Merge pull request #94 from LaQuay/add-list-to-web

Add list to web
2024-11-26 10:49:13 +01:00 · 2019-02-03 18:49:54 +01:00 · 2019-02-03 18:49:54 +01:00 · 43215bfc00
commit 43215bfc00
parent 73476a1114 2dad92dca5
3 changed files with 221 additions and 185 deletions
--- a/script/public/index.html
+++ b/script/public/index.html
@ -17,28 +17,30 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
-<div class="container" style="margin-top: 30px; margin-bottom: 30px; padding-bottom: 50px;">
-    <h1 class="display-3">TDTChannels</h1>
-    <p class="lead">
-        Bienvenido al reproductor del proyecto opensource TDTChannels
-    </p>
+<div class="container" style="margin-top: 30px">
+    <h1 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">Sitio personal</a>
+       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 style="margin-top: 25px">
+    <div class="row" style="margin-top: 40px;">
+        <div class="col-xs-4 col-md-4">
+            <div 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">
+                    <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
@ -63,7 +65,8 @@
                    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">
+                    <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
@ -95,6 +98,7 @@
                </div>
            </div>
        </div>
+    </div>
 </div>

 <div class="navbar fixed-bottom container">
@ -108,132 +112,19 @@
    </div>
 </div>
 <script>
-    // Se espera en la URL este tipo de llamada
-    // .html?type={audio,video}&channel={url_a_reproducir}
-    var player;
+var player;

-    var typeToReproduce = getUrlParameter("type");
-    var channelToReproduce;
-    if (typeToReproduce == "audio") {
+var typeToReproduce = getUrlParameter("type");
+var channelToReproduce;
+if (typeToReproduce == "audio") {
    channelToReproduce = getUrlParameter("channel");
    reproduceAudio(channelToReproduce);
-    } else if (typeToReproduce == "video") {
+} 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 video: " + channelToReproduce);
-        if (channelToReproduce.includes("m3u8")) {
-            var divInfo = document.getElementById("video-player").childElementCount;
-            if (divInfo == 0) {
-                player = new Clappr.Player({
-                    source: channelToReproduce,
-                    parentId: '#video-player',
-                    height: '500px',
-                    width: '100%',
-                    autoPlay: true,
-                });
-            } else {
-                // Assume player instance is already created
-                player.configure({
-                  source: channelToReproduce,
-                });
-            }
-            clearResolutions();
-            getResolution(channelToReproduce, updateResolution);
-        }
-
-        ga('send', {
-          hitType: 'event',
-          eventCategory: 'Video',
-          eventAction: 'play',
-          eventLabel: channelToReproduce
-        });
-	}
-
-	function reproduceAudio(channelToReproduce) {
-        if (channelToReproduce.includes("pls")) {
-            getURLsFromPLS(channelToReproduce, reproducePLSFromUrl);
-        } else {
-            reproduceAudioFromUrl(channelToReproduce);
-        }
-    }
-
-    function reproduceAudioFromUrl(channelToReproduce) {
-	    console.log("Reproducing audio: " + channelToReproduce);
-        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.
-          });
-        }
-
-        ga('send', {
-          hitType: 'event',
-          eventCategory: 'Audio',
-          eventAction: 'play',
-          eventLabel: channelToReproduce
-        });
-    }
-
-    function reproducePLSFromUrl(data) {
-        reproduceAudioFromUrl(data[0]);
-        updateExtraAudioInfo("pls_more_url_available", data);
-    }
-
-    function updateResolution(resolutions) {
-        console.log("Resoluciones: " + resolutions);
-
-        for (i = 0; i < resolutions.length; i++) {
-            var resolutionToAdd = resolutions[i];
-            if (i < resolutions.length - 1){
-                resolutionToAdd += ", ";
-            }
-            document.getElementById("video-resolution").innerHTML += resolutionToAdd;
-        }
-    }
-
-    function clearResolutions() {
-        document.getElementById("video-resolution").innerHTML = "";
-    }
-
-    function updateExtraAudioInfo(type, data) {
-        console.log("Extra info type: " + type);
-        console.log("Extra info data: " + data);
-
-        var textToAdd = "";
-        if (type == "pls_more_url_available") {
-            for (i = 0; i < data.length; i++) {
-                textToAdd += data[i] + "<br>";
-            }
-        }
-
-        document.getElementById("extra-audio-info").innerHTML = textToAdd;
-        document.getElementById("extra-audio-info-div").style.display = "block";
-    }
+}

+loadChannelsInList();
 </script>
 </body>
 </html>
--- a/script/public/index.js
+++ b/script/public/index.js
@ -1,3 +1,116 @@
+// Se espera en la URL este tipo de llamada .html?type={audio,video}&channel={url_a_reproducir}
+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 video: " + channelToReproduce);
+    if (channelToReproduce.includes("m3u8")) {
+        var divInfo = document.getElementById("video-player").childElementCount;
+        if (divInfo == 0) {
+            player = new Clappr.Player({
+                source: channelToReproduce,
+                parentId: '#video-player',
+                height: '500px',
+                width: '100%',
+                autoPlay: true,
+            });
+        } else {
+            // Assume player instance is already created
+            player.configure({
+              source: channelToReproduce,
+            });
+        }
+        clearResolutions();
+        getResolution(channelToReproduce, updateResolution);
+    }
+
+    ga('send', {
+      hitType: 'event',
+      eventCategory: 'Video',
+      eventAction: 'play',
+      eventLabel: channelToReproduce
+    });
+}
+
+function reproduceAudio(channelToReproduce) {
+    if (channelToReproduce.includes("pls")) {
+        getURLsFromPLS(channelToReproduce, reproducePLSFromUrl);
+    } else {
+        reproduceAudioFromUrl(channelToReproduce);
+    }
+}
+
+function reproduceAudioFromUrl(channelToReproduce) {
+    console.log("Reproducing audio: " + channelToReproduce);
+    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.
+      });
+    }
+
+    ga('send', {
+      hitType: 'event',
+      eventCategory: 'Audio',
+      eventAction: 'play',
+      eventLabel: channelToReproduce
+    });
+}
+
+function reproducePLSFromUrl(data) {
+    reproduceAudioFromUrl(data[0]);
+    updateExtraAudioInfo("pls_more_url_available", data);
+}
+
+function updateResolution(resolutions) {
+    console.log("Resoluciones: " + resolutions);
+
+    for (i = 0; i < resolutions.length; i++) {
+        var resolutionToAdd = resolutions[i];
+        if (i < resolutions.length - 1){
+            resolutionToAdd += ", ";
+        }
+        document.getElementById("video-resolution").innerHTML += resolutionToAdd;
+    }
+}
+
+function clearResolutions() {
+    document.getElementById("video-resolution").innerHTML = "";
+}
+
+function updateExtraAudioInfo(type, data) {
+    console.log("Extra info type: " + type);
+    console.log("Extra info data: " + data);
+
+    var textToAdd = "";
+    if (type == "pls_more_url_available") {
+        for (i = 0; i < data.length; i++) {
+            textToAdd += data[i] + "<br>";
+        }
+    }
+
+    document.getElementById("extra-audio-info").innerHTML = textToAdd;
+    document.getElementById("extra-audio-info-div").style.display = "block";
+}
+
 function getURLsFromPLS(sUrl, fn_callback) {
    $.get(sUrl, function(data) {
        $response = data.split("\n");
@ -54,9 +167,34 @@ function getUrlParameter(sParam) {
 };

 // Check an URL is valid or broken
-// TODO: For streams if it works it keeps loading infinite time
+// FIXME: For streams if it works it keeps loading infinite time
 function checkIfWebsiteWorks(sUrl){
    $.get(sUrl, function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
 }
+
+function onChannelClick(channel){
+    channel = JSON.parse(channel);
+    reproduceVideo(channel['options'][0]['url'])
+}
+
+function loadChannelsInList() {
+    fetch('http://91.121.64.179/tdt_project/output/channels.json')
+      .then(function(response) {
+        return response.json();
+      })
+      .then(function(myJson) {
+        console.log(myJson);
+        nacionales = myJson[1];
+
+        var items = [];
+        $.each(nacionales["ambits"], function( ambit, ambit_val ) {
+            $.each(ambit_val["channels"], function( key, val ) {
+                items.push("<a href='javascript:onChannelClick("+ JSON.stringify(JSON.stringify(val)) + ")' class='list-group-item list-group-item-action'>" + val["name"] + "</a>")
+            });
+        });
+
+        $(items.join( "" )).appendTo(".channels-list");
+      });
+}
--- a/script/public/styles.css
+++ b/script/public/styles.css
@ -1,3 +1,10 @@
 .container[data-container] {
  max-width: 100% !important;
 }
+
+.list-group{
+    max-height: 70%;
+    overflow: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+}