From ddd9756bb65df87c6a7d1e2677fc40609b629926 Mon Sep 17 00:00:00 2001
From: Marc <marcvila10@hotmail.com>
Date: Sun, 3 Feb 2019 19:10:08 +0100
Subject: [PATCH] filter channels

---
 script/public/index.html |  4 +++-
 script/public/index.js   | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/script/public/index.html b/script/public/index.html
index 354f0325..49f9a656 100644
--- a/script/public/index.html
+++ b/script/public/index.html
@@ -30,7 +30,9 @@
        target="_blank">LinkedIn</a>
     <div class="row" style="margin-top: 40px;">
         <div class="col-xs-4 col-md-4">
-            <div class="list-group channels-list"></div>
+            <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">
diff --git a/script/public/index.js b/script/public/index.js
index 241d86e6..cab08424 100644
--- a/script/public/index.js
+++ b/script/public/index.js
@@ -174,6 +174,24 @@ function checkIfWebsiteWorks(sUrl){
     });
 }
 
+function filterChannelsList() {
+    var input, filter, div, li, a, i, txtValue;
+
+    input = document.getElementById("searchInput");
+    filter = input.value.toUpperCase();
+    div = document.getElementById("channel-list");
+    elements = div.getElementsByTagName("a");
+
+    for (i = 0; i < elements.length; i++) {
+        txtValue = elements[i].textContent || elements[i].innerText;
+        if (txtValue.toUpperCase().indexOf(filter) > -1) {
+            elements[i].style.display = "";
+        } else {
+            elements[i].style.display = "none";
+        }
+    }
+}
+
 function onChannelClick(channel){
     channel = JSON.parse(channel);
     reproduceVideo(channel['options'][0]['url'])