TDTChannels/script/public/index.html

133 lines
6.1 KiB
HTML

<html>
<head>
<meta charset="utf-8"/>
<title>TDT Channels - Marc Vila</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-27327609-3"></script>
<script src="./analytics.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="./index.js"></script>
<link href="./styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="container" class="container" style="margin-top: 30px">
<h1 id="titleh1" class="display-4">TDTChannels</h1>
<br>
<a class="btn btn-outline-secondary" role="button" href="https://github.com/LaQuay/TDTChannels"
target="_blank">Repositorio TDT Channels</a>
<a class="btn btn-outline-success" role="button" href="http://www.marcvila.me/"
target="_blank">Marc Vila</a>
<a class="btn btn-outline-warning" role="button" href="https://github.com/LaQuay/"
target="_blank">GitHub</a>
<a class="btn btn-outline-primary" role="button" href="https://www.linkedin.com/in/marcvilagomez/"
target="_blank">LinkedIn</a>
<div class="row" style="margin-top: 40px;">
<div class="col-xs-4 col-md-4">
<input id="searchInput" class="form-control" type="text" onkeyup="filterChannelsList()"
placeholder="Search..." style="margin-bottom: 1px">
<div id="channel-list" class="list-group channels-list"></div>
</div>
<div class="col-xs-8 col-md-8">
<div id="video">
<p class="lead">
Reproductor de Televisión
</p>
<div class="input-group mb-3">
<input id="input-reproduccion-video" type="text" class="form-control"
placeholder="URL de reproducción">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-reproduccion-video"
onclick="loadItem('video');">Cargar
</button>
</div>
</div>
<div id="video-player"></div>
<div id="video-information" class="shadow-sm p-3 mb-5 bg-white rounded" style="margin-top: 15px">
<p class="lead">Información de la reproducción</p>
Formatos soportados
<br>
<em>m3u8</em>
<br><br>
Resoluciones disponibles
<br>
<em id="video-resolution"></em>
<p id="extra-video-info" style="display: block"></p>
<div id="option-buttons"></div>
</div>
</div>
<div id="audio" style="margin-top: 15px">
<p class="lead">
Reproductor de Radio
</p>
<div class="input-group mb-3">
<input id="input-reproduccion-audio" type="text" class="form-control"
placeholder="URL de reproducción">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-reproduccion-audio"
onclick="loadItem('audio');">Cargar
</button>
</div>
</div>
<audio id="audio-controller" controls autoplay="">
<source id="audio-player" src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="audio-information" class="shadow-sm p-3 mb-5 bg-white rounded" style="margin-top: 15px">
<p class="lead">Información de la reproducción</p>
Formatos soportados
<br>
<em>aac</em>, <em>mp3</em>, <em>nsv</em>, <em>audio/mpeg</em>, <em>pls</em>(Beta)
<div id="extra-audio-info-div" style="display: none; padding-top: 20px">
<button class="btn btn-secondary" type="button" data-toggle="collapse"
data-target="#collapseAlternativas"
aria-expanded="false" aria-controls="collapseAlternativas">
URLs alternativas
</button>
<div class="collapse" id="collapseAlternativas">
<div class="card card-body">
<p id="extra-audio-info"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar fixed-bottom container">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<em><strong>Nota</strong>: Esta web está diseñada únicamente para comprobar el funcionamiento con los canales
del repositorio. Queda fuera del objetivo algún otro uso. El usuario es el responsable del
uso que se le da a la web.</em>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
<script>
var player;
var typeToReproduce = getUrlParameter("type");
var channelToReproduce;
if (typeToReproduce == "audio") {
channelToReproduce = getUrlParameter("channel");
reproduceAudio(channelToReproduce);
} else if (typeToReproduce == "video") {
channelToReproduce = getUrlParameter("channel");
reproduceVideo(channelToReproduce);
}
loadChannelsInList();
</script>
</body>
</html>