mirror of
https://github.com/stagehacks/Cue-View.git
synced 2026-07-26 09:18:39 +00:00
Linus Wileryd
c3ddbd8353
* Feature: Ontime support, WebSocket, Embedded fonts. * Fix: Clock matching operator view Also more notes showing * Fix: ws path+font assets
82 lines
3.5 KiB
Plaintext
82 lines
3.5 KiB
Plaintext
<%
|
||
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>
|
||
<% } %>
|