--- /dev/null
+<!DOCTYPE html>
+<html dir="ltr" lang="en-US">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ max-height: 100%;
+ background-color: #eaeaea;
+ overflow: hidden;
+ }
+
+ .table {
+ display: block;
+ }
+
+ .row {
+ display: flex;
+ flex: 1 0 auto;
+ border-bottom: 1px solid black;
+ }
+
+ .label {
+ flex-shrink: 1;
+ padding: 1em;
+ width: 8em;
+ border-right: 1px solid black;
+ }
+
+ .item {
+ flex-grow: 1;
+ border-left: 0;
+ padding: 1em;
+ }
+
+ .row input {
+ flex-grow: 1;
+ height: 4em;
+ }
+
+ td {
+ border: 1px solid #000;
+ padding: 1em;
+ }
+
+ tr td:first-child {
+ width: 1%;
+ white-space: nowrap;
+ }
+
+ input {
+ margin: 0.5em;
+ }
+
+ article {
+ display: flex;
+ flex-flow: column;
+ height: 100%;
+ max-height: 100%;
+ }
+
+ article section {
+ //border: 1px dotted black;
+ flex: 0 1 auto;
+ }
+
+ .grow {
+ flex: 1 1 auto;
+ overflow: auto;
+ }
+
+ .shrink {
+ flex: 0 1 auto;
+ }
+
+ #breadCrumbs {
+ margin-left: 1em;
+ margin-right: 1em;
+ }
+
+ #itemList {
+ margin-left: 1em;
+ margin-right: 1em;
+ }
+
+
+ </style>
+</head>
+<body>
+
+<article id="mainView" style="display: flex">
+ <section>
+ <table style="width: 100%"><tbody>
+ <tr>
+ <td><strong>Now Playing</strong></td>
+ <td class="item" id="currVid">Some File</td>
+ </tr>
+ <tr>
+ <td><strong>Playing Next</strong></td>
+ <td class="item" id="nextVid">Some Other File</td>
+ </tr>
+ </tbody></table>
+ </section>
+
+ <section class="grow">
+ <div style="width: 100%; text-align: center"><h2>Queued Videos</h2></div>
+ <div id="queueList" style="width: 100%; text-align: center;">The queue is currently empty</div>
+ </section>
+
+ <section>
+ <div class="row">
+ <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="Skip" onclick="javascript:UI.skip()"/>
+ </div>
+ </section>
+</article>
+
+<article id="browseView" style="display: none">
+ <section>
+ <h1 style="text-align: center">Browse Media</h1>
+ <hr/>
+ <div>
+ <input type="button" value="Up" onclick="javascript:UI.browse_up()"/>
+ <span id="currDir"></span>
+ </div>
+ <hr/>
+ </section>
+
+ <section class="grow">
+ <div id="itemList">contents here</div>
+ </section>
+
+ <section>
+ <hr/>
+ <div class="row"><input type="button" value="Cancel" onclick="javascript:UI.cancel()"/></div>
+ </section>
+</article>
+
+<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.skip = ()=>{ Client.skip(); };
+ 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");
+ };
+
+ self.browse_up = ()=>{
+ path.pop();
+ refreshItems();
+ };
+
+
+
+ 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 refreshItems = ()=>{
+ const dir = getLocalRoot();
+ currDir.innerText = (path[path.length - 1] || "Root");
+
+ 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;
+})();
+
+
+(()=>{
+ let items = {}
+ let path = [];
+
+ Client.connect((data)=>{
+ console.log(data);
+ if (cmd.cmd === "items")
+ {
+ UI.set_items( data.items );
+ }
+ else if (cmd.cmd === "queue")
+ {
+ UI.set_queue(data.queue);
+ }
+ else
+ {
+ UI.set_play_state(
+ data["curr"]["path"], // Now Playing
+ data["next"]["path"], // Up next
+ data.playing // Playing or paused
+ );
+ }
+ });
+
+
+
+
+// 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]);
+// }
+// };
+
+})();
+
+
+</script>
+</body>
+</html>
projects / proto / atv.git / commitdiff