reworked control page

diff --git a/atv/assets/control.html b/atv/assets/control.html
index c99b09d3538dd5f93036aa903ee25da005228f71..46ec02be9604859eb5863d11c78e6a793885c2a5 100644 (file)
--- a/atv/assets/control.html
+++ b/atv/assets/control.html
@@ -98,10 +98,17 @@
 
     <section>
         <div class="row">
+<!--
             <input type="button" value="Play" onclick="javscript:Client.play_pause()" id="playBtn"/>
             <input type="button" value="Chan +" onclick="javscript:Client.chan_next()"/>
             <input type="button" value="Chan -" onclick="javscript:Client.chan_prev()"/>
             <input type="button" value="Enqueue" onclick="javscript:Client.enqueue()"/>
+-->
+            <input type="button" value="Play" onclick="javscript:UI.play_pause()" id="playBtn"/>
+            <input type="button" value="Chan +" onclick="javscript:UI.chan_next()"/>
+            <input type="button" value="Chan -" onclick="javscript:UI.chan_prev()"/>
+            <input type="button" value="Enqueue" onclick="javscript:UI.select_file()"/>
+
         </div>
     </section>
 
@@ -109,8 +116,6 @@
         <div style="width: 100%; text-align: center"><h2>Queued Videos</h2></div>
         <div id="queue" style="width: 100%; text-align: center;">The queue is currently empty</div>
     </section>
-
-    <section><hr/>FOOTER</section>
 </article>
 
 <article id="browseView" style="display: flex">
@@ -122,7 +127,7 @@
     </section>
 
     <section class="grow">
-        <div>contents here</div>
+        <div id="itemList">contents here</div>
     </section>
 
     <section>
@@ -134,49 +139,162 @@
 <script type="text/javascript" src="client.js"></script>
 
 <script>
+
+const UI = (()=>{
+    const self = {};
+
+    let queue = [];
+    let items = {};
+    let path = [];
+
+    const showBrowser = ()=>{
+        path = [];
+        browseView.style.display = "flex";
+        mainView.style.display = "none";
+    };
+
+    const showMain = ()=>{
+        path = [];
+        browseView.style.display = "none";
+        mainView.style.display = "flex";
+    };
+
+    // Button handlers
+    self.play_pause  = ()=>{ Client.play_pause(); };
+    self.chan_next   = ()=>{ Client.chan_next(); };
+    self.chan_prev   = ()=>{ Client.chan_prev(); };
+    self.select_file = ()=>{ showBrowser(); };
+    self.cancel      = ()=>{ showMain(); };
+
+    self.enqueue = (path)=>{
+        console.log(path);
+        Client.send("enqueue", { path: path });
+        showMain();
+    };
+
+
+    self.set_items = (new_items)=>{
+        items = new_items;
+        refreshItems();
+    };
+
+    self.set_queue = (new_queue)=>{
+        queue = new_queue;
+        refreshQueue();
+    };
+
+    self.set_play_state = (up_now, up_next, playing)=>{
+        currVid.innerText = up_now;
+        nextVid.innerText = up_next;
+        playBtn.value = (playing ? "Pause" : "Play");
+    };
+
+    return self;
+})();
+
+
 (()=>{
     let items = {}
+    let path = [];
+
     Client.connect((data)=>{
         console.log(data);
         if (cmd.cmd === "items")
         {
-            items = data["items"];
+//            items = data["items"];
+//            showItems();
+            UI.set_items( data.items );
         }
         else if (cmd.cmd === "queue")
         {
-            showQueue(data.queue);
+//            showQueue(data.queue);
+            UI.set_queue(data.queue);
         }
         else
         {
-            currVid.innerText = data["curr"]["path"]
-            nextVid.innerText = data["next"]["path"]
-            playBtn.value = (data["playing"] ? "Pause" : "Play");
+            UI.set_play_state(
+                data["curr"]["path"], // Now Playing
+                data["next"]["path"], // Up next
+                data.playing          // Playing or paused
+            );
+
+//            currVid.innerText = data["curr"]["path"]
+//            nextVid.innerText = data["next"]["path"]
+//            playBtn.value = (data["playing"] ? "Pause" : "Play");
         }
     });
 
-    Client.enqueue = ()=>{
-//        console.log("enqueue");
-//        Client.send("enqueue", { path: items[0]["path"] });
+//    Client.enqueue = (path)=>{
+//        console.log(path)
+//        Client.send("enqueue", { path: path });
+//        path = [];
+//        browseView.style.display = "none";
+//        mainView.style.display = "flex";
+////        showItems();
+////        console.log("enqueue");
+////        Client.send("enqueue", { path: items[0]["path"] });
+//    };
+//
+//    const showQueueElement = (item) => {
+//        const el = document.createElement("div");
+//        el.innerText = item.path;
+//        queue.appendChild(el);
+//    }
+//
+//    const showQueue = (data)=>{
+//        if (data.length > 0) {
+//            queue.innerHTML = "";
+//            for (const item of data) {
+//                showQueueElement(item);
+//            }
+//        } else {
+//            queue.innerHTML = "The queue is currently empty";
+//        }
+//    };
+//
+//    const getLocalRoot = ()=>{
+//        let root = items;
+//        for (const dir of path) {
+//            root = root[dir];
+//        }
+//        return root;
+//    };
+//
+//    const linkDown = (dir)=>{
+//        path.push(dir);
+//        showItems();
+//    };
+//
+//    const linkUp = ()=>{
+//        path.slice(-1);
+//        showItems();
+//    };
+//
+//    const showItem = (item, isFile, fileData) => {
+//        const el = document.createElement("div");
+//        const link = document.createElement("a");
+//        link.innerText = item;
+//        link.href = '#';
+//        if (!isFile) {
+//            link.onclick = ()=>{ linkDown(item); };
+//        } else {
+//            link.onclick = ()=>{ Client.enqueue(fileData.path); };
+//        }
+//        el.appendChild(link);
+//        itemList.appendChild(el);
+//    }
+//
+//    const showItems = ()=>{
+//        const dir = getLocalRoot();
+//        itemList.innerText = "";
+//        for (const item in dir) {
+//            showItem(item, ('path' in dir[item]), dir[item]);
+//        }
     };
 
-    const showQueueElement = (item) => {
-        const el = document.createElement("div");
-        el.innerText = item.path;
-        queue.appendChild(el);
-    }
+})();
 
-    const showQueue = (data)=>{
-        if (data.length > 0) {
-            queue.innerHTML = "";
-            for (const item of data) {
-                showQueueElement(item);
-            }
-        } else {
-            queue.innerHTML = "The queue is currently empty";
-        }
-    };
 
-})();
 </script>
 </body>
 </html>