From 63f86be30428c69465ef08f1575bc1d0c6f90031 Mon Sep 17 00:00:00 2001
From: LaQuay <marcvilagomez@gmail.com>
Date: Sun, 24 Mar 2019 18:47:35 +0100
Subject: [PATCH] add channel options in website

---
 script/public/index.html |  1 +
 script/public/index.js   | 41 +++++++++++++++++++---------------------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/script/public/index.html b/script/public/index.html
index d20ecd05..f2bff804 100644
--- a/script/public/index.html
+++ b/script/public/index.html
@@ -60,6 +60,7 @@
                     <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">
diff --git a/script/public/index.js b/script/public/index.js
index 0fcc1c1d..c9e6a99d 100644
--- a/script/public/index.js
+++ b/script/public/index.js
@@ -123,13 +123,6 @@ function getURLsFromPLS(sUrl, fn_callback) {
             }
         });
         fn_callback($urls)
-
-        //$.each($urls, function( index, value ) {
-        //    if (checkIfWebsiteWorks(value)) {
-        //        fn_callback(value);
-        //        break;
-        //    }
-        //});
     });
 };
 
@@ -166,16 +159,8 @@ function getUrlParameter(sParam) {
     }
 };
 
-// Check an URL is valid or broken
-// 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 filterChannelsList() {
-    var input, filter, div, li, a, i, txtValue;
+    var input, filter, div, elements, txtValue;
 
     input = document.getElementById("searchInput");
     filter = input.value.toUpperCase();
@@ -192,11 +177,24 @@ function filterChannelsList() {
     }
 }
 
-function onChannelClick(channel){
-    channel = JSON.parse(channel);
-    reproduceVideo(channel['options'][0]['url'])
+function reproduceChannel(channel_options) {
+    options = channel_options;
 
-    //document.getElementById("titleh1").innerText = document.getElementById("container").offsetWidth
+    document.getElementById("option-buttons").innerHTML = ""
+    if (options.length == 1) {
+        reproduceVideo(channel['options'][0]['url'])
+    } else if (options.length > 1) {
+        for (i = 0; i < options.length; ++i) {
+            var url = options[i]['url'];
+            document.getElementById("option-buttons").innerHTML +=
+                "<a href='javascript:reproduceVideo(\"" + url + "\")' class='btn btn-secondary btn-sm' style='margin-right: 10px'>Opción " + (i+1) + "</a>";
+        }
+    }
+}
+
+function onChannelClick(channel) {
+    channel = JSON.parse(channel);
+    reproduceChannel(channel['options'])
 
     if (document.getElementById("container").offsetWidth < 720) {
         document.getElementById("video").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
@@ -209,13 +207,12 @@ function loadChannelsInList() {
         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.push("<a href='javascript:onChannelClick(" + JSON.stringify(JSON.stringify(val)) + ")' class='list-group-item list-group-item-action'>" + val["name"] + "</a>")
             });
         });