mirror of
https://github.com/stagehacks/Cue-View.git
synced 2026-08-15 10:43:39 +00:00
Feature: Ontime (#373)
* Feature: Ontime support, WebSocket, Embedded fonts. * Fix: Clock matching operator view Also more notes showing * Fix: ws path+font assets
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
<%
|
||||
function formatMs(ms) {
|
||||
if (ms === null || ms === undefined) return '--:--';
|
||||
var neg = ms < 0;
|
||||
var abs = Math.abs(ms);
|
||||
var h = Math.floor(abs / 3600000);
|
||||
var m = Math.floor((abs % 3600000) / 60000);
|
||||
var s = Math.floor((abs % 60000) / 1000);
|
||||
var result = h > 0
|
||||
? h + ':' + String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0')
|
||||
: m + ':' + String(s).padStart(2, '0');
|
||||
return (neg ? '-' : '') + result;
|
||||
}
|
||||
function formatClock(ms) {
|
||||
if (ms === null || ms === undefined) return '';
|
||||
var h = Math.floor(ms / 3600000) % 24;
|
||||
var m = Math.floor((ms % 3600000) / 60000);
|
||||
return String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
|
||||
}
|
||||
var playback = data.timer ? data.timer.playback : 'stop';
|
||||
var current = data.timer ? data.timer.current : null;
|
||||
var duration = data.timer ? data.timer.duration : null;
|
||||
var overtime = current !== null && current < 0;
|
||||
%>
|
||||
|
||||
<header>
|
||||
<h1><%= listName %></h1>
|
||||
</header>
|
||||
|
||||
<div class="ontime-top-bar <%= playback %><%= overtime ? ' overtime' : '' %>">
|
||||
<div class="ontime-top-section">
|
||||
<div class="ontime-top-label">Running timer</div>
|
||||
<div class="ontime-timer-value"><%= formatMs(current) %></div>
|
||||
<% if (data.timer && data.timer.addedTime && data.timer.addedTime !== 0) { %>
|
||||
<div class="ontime-added-time"><%= data.timer.addedTime > 0 ? '+' : '' %><%= Math.round(data.timer.addedTime / 1000) %>s</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<% if (data.clock !== null && data.clock !== undefined) { %>
|
||||
<div class="ontime-top-section ontime-top-clock">
|
||||
<div class="ontime-top-label">Time now</div>
|
||||
<div class="ontime-clock-value"><%= formatClock(data.clock) %></div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<% if (duration !== null && duration !== undefined && duration > 0) { %>
|
||||
<% var elapsed = data.timer && data.timer.elapsed !== null && data.timer.elapsed !== undefined ? data.timer.elapsed : null; %>
|
||||
<% var pct = elapsed !== null ? Math.max(0, Math.min(100, (elapsed / duration) * 100)) : 0; %>
|
||||
<div class="ontime-progress-bar"><div class="ontime-progress-fill" style="width:<%= Math.round(pct) %>%"></div></div>
|
||||
<% } %>
|
||||
|
||||
<% if (data.eventNow) { %>
|
||||
<div class="ontime-event ontime-event-now" style="<%= data.eventNow.colour ? 'border-left-color:' + data.eventNow.colour : '' %>">
|
||||
<div class="ontime-event-header">
|
||||
<span class="ontime-event-cue"><%= data.eventNow.cue || '' %></span>
|
||||
<span class="ontime-event-label">Now</span>
|
||||
</div>
|
||||
<div class="ontime-event-title"><%= data.eventNow.title || '' %></div>
|
||||
<% if (data.eventNow.timeStart !== undefined && data.eventNow.timeEnd !== undefined) { %>
|
||||
<div class="ontime-event-times"><%= formatClock(data.eventNow.timeStart) %> – <%= formatClock(data.eventNow.timeEnd) %></div>
|
||||
<% } %>
|
||||
<% if (data.eventNow.note) { %>
|
||||
<div class="ontime-event-note"><%= data.eventNow.note %></div>
|
||||
<% } %>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<% if (data.eventNext) { %>
|
||||
<div class="ontime-event ontime-event-next" style="<%= data.eventNext.colour ? 'border-left-color:' + data.eventNext.colour : '' %>">
|
||||
<div class="ontime-event-header">
|
||||
<span class="ontime-event-cue"><%= data.eventNext.cue || '' %></span>
|
||||
<span class="ontime-event-label">Next</span>
|
||||
</div>
|
||||
<div class="ontime-event-title"><%= data.eventNext.title || '' %></div>
|
||||
<% if (data.eventNext.timeStart !== undefined && data.eventNext.timeEnd !== undefined) { %>
|
||||
<div class="ontime-event-times"><%= formatClock(data.eventNext.timeStart) %> – <%= formatClock(data.eventNext.timeEnd) %></div>
|
||||
<% } %>
|
||||
<% if (data.eventNext.note) { %>
|
||||
<div class="ontime-event-note"><%= data.eventNext.note %></div>
|
||||
<% } %>
|
||||
</div>
|
||||
<% } %>
|
||||
Reference in New Issue
Block a user