margin: 0.5em;
}
-
-
article {
display: flex;
flex-flow: column;
.shrink {
flex: 0 1 auto;
}
+
+ #breadCrumbs {
+ margin-left: 1em;
+ margin-right: 1em;
+ }
+
+ #itemList {
+ margin-left: 1em;
+ margin-right: 1em;
+ }
+
+
</style>
</head>
<body>
</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="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="queueList" style="width: 100%; text-align: center;">The queue is currently empty</div>
- </section>
</article>
<article id="browseView" style="display: none">
<section>
<h1 style="text-align: center">Browse Media</h1>
<hr/>
- <div>Breadcrumbs</div>
+ <div>
+ <input type="button" value="Up" onclick="javascript:UI.browse_up()" id="playBtn"/>
+ <span id="currDir"></span>
+ </div>
<hr/>
</section>
<script type="text/javascript" src="client.js"></script>
<script>
-
const UI = (()=>{
const self = {};
playBtn.value = (playing ? "Pause" : "Play");
};
+ self.browse_up = ()=>{
+ path.pop();
+ refreshItems();
+ };
refreshItems();
};
- const linkUp = ()=>{
- path.slice(-1);
- 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");
bottom: 1em;
color: white;
font-family: sans-serif;
+ background-color: black;
}
+
.badge span {
display: block;
width: 100%;
text-align: center;
}
-
- .leftBadge {
- position: absolute;
- bottom: 1em;
- left: 1em;
- color: white;
- font-family: sans-serif;
- }
- .rightBadge {
+ .channelBadge {
position: absolute;
- bottom: 1em;
- right: 1em;
+ top: 0em;
color: white;
font-family: sans-serif;
+ font-size: 3em;
+ background-color: black;
+ width: 100%;
+ text-align: center;
}
</style>
</head>
<span>APP</span>
</div>
+<div id="ChannelTitle" class="channelBadge">Channel</div>
+
<script>
let current = {};
return (now.getTime() - midnight.getTime()) / 1000;
};
+const updateChannelTitle = ()=>{
+ if (current["chan"] != ChannelTitle.innerText) {
+ ChannelTitle.innerText = current["chan"];
+ ChannelTitle.style.display = 'block';
+ setTimeout(()=>{ ChannelTitle.style.display = 'none'; }, 5000);
+ }
+};
+
const updatePlayer = ()=>{
const curr_time = secondsSinceMidnight();
if (!current["start_time"])
ws.onmessage = (event)=>{
const msg = JSON.parse(event.data);
- if (msg["cmd"] == "play")
+ if (msg["cmd"] == "play" || msg["cmd"] == "chan_next" || msg["cmd"] == "chan_prev" || msg["cmd"] == "pause")
{
current = msg;
+ updateChannelTitle();
+ updatePlayer();
}
- updatePlayer();
};
ws.onclose = (event)=>{
FileUtils.cp(path, "#{ATV_ROOT}/#{file}")
end
+pp JSON.parse(File.read("#{ATV_ROOT}/config.json"))
+exit 1
+
# Then run the server
db = ATV::Database.new(ATV_ROOT)
channels = [
next_index = ((@index+1) >= @items.length ? 0 : (@index+1))
next_item = (@queue.length > 0 ? @queue.first : @items[next_index])
{
+ "chan" => @name,
"time" => @time,
"curr" => @current,
"next" => next_item
node[path.last] = item
end
- pp tree
-
{ "items" => tree }
end