diff --git a/script/public/index.html b/script/public/index.html
index 7733e7df..c58f1e3e 100644
--- a/script/public/index.html
+++ b/script/public/index.html
@@ -1,36 +1,160 @@
<html>
<head>
<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"
+ integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+ integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+ crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
+ integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
+ crossorigin="anonymous"></script>
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
+ integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
+ crossorigin="anonymous"></script>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
-<div id="player"></div>
+<div class="container" style="margin-top: 30px; margin-bottom: 30px">
+ <h1 class="display-3">TDTChannels</h1>
+ <p class="lead">
+ Bienvenido al reproductor del proyecto opensource TDTChannels
+ </p>
+ <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">Sitio personal</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 style="margin-top: 25px">
+ <div id="video">
+ <p class="lead">
+ Reproductor de Televisión
+ </p>
+ <p>Formatos soportados: <em>m3u8</em></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>
+
+ <div id="audio" style="margin-top: 15px">
+ <p class="lead">
+ Reproductor de Radio
+ </p>
+ <p>Formatos soportados: <em>nsv</em></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>
+ <source id="audio-player" src="" autoplay>
+ Your browser does not support the audio element.
+ </audio>
+ </div>
+ </div>
+</div>
<script>
- var getUrlParameter = function getUrlParameter(sParam) {
- var sPageURL = decodeURIComponent(window.location.search.substring(1)),
- sURLVariables = sPageURL.split('&'),
- sParameterName,
- i;
+ // Se espera en la URL este tipo de llamada
+ // .html?type={audio,video}&channel={url_a_reproducir}
- for (i = 0; i < sURLVariables.length; i++) {
- sParameterName = sURLVariables[i].split('=');
+ var getUrlParameter = function getUrlParameter(sParam) {
+ var sPageURL = decodeURIComponent(window.location.search.substring(1)),
+ sURLVariables = sPageURL.split('&'),
+ sParameterName,
+ i;
- if (sParameterName[0] === sParam) {
- return sParameterName[1] === undefined ? true : sParameterName[1];
- }
- }
- };
-
- var channelToReproduce = getUrlParameter("channel");
-
- if (channelToReproduce.includes("m3u8")) {
- var player = new Clappr.Player({
- source: channelToReproduce,
- parentId: '#player',
- height: '100%',
- width: '100%',
- autoPlay: true,
- });
- }
+ for (i = 0; i < sURLVariables.length; i++) {
+ sParameterName = sURLVariables[i].split('=');
+
+ if (sParameterName[0] === sParam) {
+ return sParameterName[1] === undefined ? true : sParameterName[1];
+ }
+ }
+ };
+
+ 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);
+ }
+
+ function loadItem(from) {
+ var value;
+ if (from == "audio") {
+ value = document.getElementById("input-reproduccion-audio").value;
+ reproduceAudio(value);
+ } else if (from == "video") {
+ value = document.getElementById("input-reproduccion-video").value;
+ reproduceVideo(value);
+ }
+ }
+
+ function reproduceVideo(channelToReproduce) {
+ console.log("Reproducing " + channelToReproduce);
+ if (channelToReproduce.includes("m3u8")) {
+ console.log("Reproducing video")
+ var divInfo = document.getElementById("video-player").childElementCount;
+ if (divInfo == 0) {
+ player = new Clappr.Player({
+ source: channelToReproduce,
+ parentId: '#video-player',
+ height: '400px',
+ width: '100%',
+ autoPlay: true,
+ });
+ } else {
+ // Assume player instance is already created
+ player.configure({
+ source: channelToReproduce,
+ });
+ }
+ }
+ }
+
+ function reproduceAudio(channelToReproduce) {
+ console.log("Reproducing " + channelToReproduce);
+ if (channelToReproduce.includes("nsv")) {
+ console.log("Reproducing audio")
+
+ var audioSource = document.getElementById('audio-controller');
+ var audioPlayer = document.getElementById('audio-player');
+
+ audioPlayer.src = channelToReproduce;
+
+ audioSource.load();
+ audioSource.pause();
+ var playPromise = audioSource.play();
+
+ if (playPromise !== undefined) {
+ playPromise.then(function() {
+ // Automatic playback started!
+ }).catch(function(error) {
+ // Automatic playback failed.
+ // Show a UI element to let the user manually start playback.
+ });
+ }
+ }
+ }
</script>
</body>
diff --git a/script/public/index_test.html b/script/public/index_test.html
deleted file mode 100644
index abf56abb..00000000
--- a/script/public/index_test.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<html>
-<head>
- <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
- <script src="https://unpkg.com/video.js/dist/video.js"></script>
- <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
-
- </style>
-</head>
-
-<body>
-<video autoplay preload="auto" controls id="player" class="video-js vjs-default-skin">
-</video>
-
-<script>
- var getUrlParameter = function getUrlParameter(sParam) {
- var sPageURL = decodeURIComponent(window.location.search.substring(1)),
- sURLVariables = sPageURL.split('&'),
- sParameterName,
- i;
-
- for (i = 0; i < sURLVariables.length; i++) {
- sParameterName = sURLVariables[i].split('=');
-
- if (sParameterName[0] === sParam) {
- return sParameterName[1] === undefined ? true : sParameterName[1];
- }
- }
- };
-
- var channelToReproduce = getUrlParameter("channel");
- if (channelToReproduce.includes("m3u8")) {
- videojs('player').src({type: 'application/x-mpegURL', src: channelToReproduce});
-
- videojs('player').ready(function () {
- var myPlayer = this;
- myPlayer.play();
-
- // Store the video object
- var myPlayer = this, id = myPlayer.id();
- // Make up an aspect ratio
- var aspectRatio = 9.0/17.5;
- var reduction = 0.95;
-
- function resizeVideoJS(){
- var width = document.getElementById(id).parentElement.offsetWidth;
- myPlayer.width(width*reduction);
- myPlayer.height(width*aspectRatio*reduction);
- }
-
- // Initialize resizeVideoJS()
- resizeVideoJS();
- // Then on resize call resizeVideoJS()
- window.onresize = resizeVideoJS();
- });
-
- videojs('player').on('dblclick', function() {
- var myPlayer = this;
- if (myPlayer.isFullscreen()) {
- myPlayer.exitFullscreen();
- } else {
- myPlayer.requestFullscreen();
- }
- });
- }
-
-</script>
-</body>
-</html>
\ No newline at end of file