]> git.mdlowis.com Git - proto/atv.git/commitdiff
projects / proto / atv.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 5e56223)
added queue managment
authorMichael D. Lowis <mike@mdlowis.com>
Mon, 26 Feb 2024 03:06:59 +0000 (22:06 -0500)
committerMichael D. Lowis <mike@mdlowis.com>
Mon, 26 Feb 2024 03:06:59 +0000 (22:06 -0500)
atv/assets/control.html patch | blob | history

diff --git a/atv/assets/control.html b/atv/assets/control.html
index 46ec02be9604859eb5863d11c78e6a793885c2a5..3ebdbfa825a7a185bff1f6577f99db76944cc9c3 100644 (file)
--- a/atv/assets/control.html
+++ b/atv/assets/control.html
@@ -82,7 +82,7 @@
 </head>
 <body>
 
-<article id="mainView" style="display: none">
+<article id="mainView" style="display: flex">
     <section>
         <table style="width: 100%"><tbody>
             <tr>
@@ -98,27 +98,20 @@
 
     <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()"/>
-
+            <input type="button" value="Play" onclick="javascript:UI.play_pause()" id="playBtn"/>
+            <input type="button" value="Chan +" onclick="javascript:UI.chan_next()"/>
+            <input type="button" value="Chan -" onclick="javascript:UI.chan_prev()"/>
+            <input type="button" value="Enqueue" onclick="javascript:UI.select_file()"/>
         </div>
     </section>
 
     <section class="grow">
         <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>
+        <div id="queueList" style="width: 100%; text-align: center;">The queue is currently empty</div>
     </section>
 </article>
 
-<article id="browseView" style="display: flex">
+<article id="browseView" style="display: none">
     <section>
         <h1 style="text-align: center">Browse Media</h1>
         <hr/>
@@ -132,7 +125,7 @@
 
     <section>
         <hr/>
-        <div class="row"><input type="button" value="Cancel" onclick=""/></div>
+        <div class="row"><input type="button" value="Cancel"  onclick="javascript:UI.cancel()"/></div>
     </section>
 </article>
 
@@ -172,7 +165,6 @@ const UI = (()=>{
         showMain();
     };
 
-
     self.set_items = (new_items)=>{
         items = new_items;
         refreshItems();
@@ -189,6 +181,58 @@ const UI = (()=>{
         playBtn.value = (playing ? "Pause" : "Play");
     };
 
+
+
+
+    const refreshQueue = ()=>{
+        if (queue.length > 0) {
+            queueList.innerHTML = "";
+            for (const item of queue) {
+                const el = document.createElement("div");
+                el.innerText = item.path;
+                queueList.appendChild(el);
+            }
+        } else {
+            queueList.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);
+        refreshItems();
+    };
+
+    const linkUp = ()=>{
+        path.slice(-1);
+        refreshItems();
+    };
+
+    const refreshItems = ()=>{
+        const dir = getLocalRoot();
+        itemList.innerText = "";
+        for (const item in dir) {
+            const el = document.createElement("div");
+            const link = document.createElement("a");
+            link.innerText = item;
+            link.href = '#';
+            if ('path' in dir[item]) {
+                link.onclick = ()=>{ self.enqueue(dir[item].path); };
+            } else {
+                link.onclick = ()=>{ linkDown(item); };
+            }
+            el.appendChild(link);
+            itemList.appendChild(el);
+        }
+    };
+
     return self;
 })();
 
@@ -201,13 +245,10 @@ const UI = (()=>{
         console.log(data);
         if (cmd.cmd === "items")
         {
-//            items = data["items"];
-//            showItems();
             UI.set_items( data.items );
         }
         else if (cmd.cmd === "queue")
         {
-//            showQueue(data.queue);
             UI.set_queue(data.queue);
         }
         else
@@ -217,41 +258,12 @@ const UI = (()=>{
                 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 = (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) {
@@ -290,7 +302,7 @@ const UI = (()=>{
 //        for (const item in dir) {
 //            showItem(item, ('path' in dir[item]), dir[item]);
 //        }
-    };
+//    };
 
 })();
 
Unnamed repository; edit this file 'description' to name the repository.