Skip to content

feat: t-timers UI #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anteeek wants to merge 4 commits into
base: feat/t-timers
Choose a base branch
from
Open

feat: t-timers UI #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
15ad2fd
SOFIE-261 | add UI for t-timers (WIP)
anteeek Jan 16, 2026
95dc71f
SOFIE-261 | change alignment of t-timers in rundown screen
anteeek Feb 4, 2026
079b70b
Refactor UI for new timer style
rjmunro Jan 30, 2026
e9fc4c4
Apply code review suggestions
anteeek Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 81 additions & 8 deletions packages/webui/src/client/styles/rundownView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,8 +209,13 @@ body.no-overflow {
bottom: 0;
right: 0;

background:
linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%),
background: linear-gradient(
-45deg,
$color-status-fatal 33%,
transparent 33%,
transparent 66%,
$color-status-fatal 66%
),
linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%),
linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%),
linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%);
Expand Down Expand Up @@ -266,7 +271,16 @@ body.no-overflow {

.timing__header__left {
text-align: left;
display: flex;
}

.timing__header__center {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.timing__header__right {
display: grid;
grid-template-columns: auto auto;
Expand Down Expand Up @@ -1100,8 +1114,7 @@ svg.icon {
}
.segment-timeline__part {
.segment-timeline__part__invalid-cover {
background-image:
repeating-linear-gradient(
background-image: repeating-linear-gradient(
45deg,
var(--invalid-reason-color-transparent) 0%,
var(--invalid-reason-color-transparent) 4px,
Expand Down Expand Up @@ -1383,8 +1396,7 @@ svg.icon {
left: 2px;
right: 2px;
z-index: 3;
background:
repeating-linear-gradient(
background: repeating-linear-gradient(
45deg,
var(--invalid-reason-color-opaque) 0,
var(--invalid-reason-color-opaque) 5px,
Expand Down Expand Up @@ -1566,8 +1578,7 @@ svg.icon {
right: 1px;
z-index: 10;
pointer-events: all;
background-image:
repeating-linear-gradient(
background-image: repeating-linear-gradient(
45deg,
var(--invalid-reason-color-transparent) 0%,
var(--invalid-reason-color-transparent) 5px,
Expand Down Expand Up @@ -3573,3 +3584,65 @@ svg.icon {
}

@import 'rundownOverview';

.rundown-header .timing__header_t-timers {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-38%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 1em;

.timing__header_t-timers__timer {
display: flex;
gap: 0.5em;
justify-content: space-between;
align-items: baseline;
white-space: nowrap;
line-height: 1.3;

.timing__header_t-timers__timer__label {
font-size: 0.7em;
color: #b8b8b8;
text-transform: uppercase;
white-space: nowrap;
}

.timing__header_t-timers__timer__value {
font-family:
'Roboto',
Helvetica Neue,
Arial,
sans-serif;
font-variant-numeric: tabular-nums;
font-weight: 500;
color: #fff;
font-size: 1.1em;
}

.timing__header_t-timers__timer__sign {
display: inline-block;
width: 0.6em;
text-align: center;
font-weight: 500;
font-size: 0.9em;
color: #fff;
margin-right: 0.3em;
}

.timing__header_t-timers__timer__part {
color: #fff;
&.timing__header_t-timers__timer__part--dimmed {
color: #888;
font-weight: 400;
}
}
.timing__header_t-timers__timer__separator {
margin: 0 0.05em;
color: #888;
}
}
}
97 changes: 97 additions & 0 deletions packages/webui/src/client/ui/RundownView/RundownHeader/RundownHeaderTimers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import React from 'react'
import { RundownTTimer } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
import { useTiming } from '../RundownTiming/withTiming'
import { RundownUtils } from '../../../lib/rundown'
import classNames from 'classnames'
import { getCurrentTime } from '../../../lib/systemTime'

interface IProps {
tTimers: [RundownTTimer, RundownTTimer, RundownTTimer]
}

export const RundownHeaderTimers: React.FC<IProps> = ({ tTimers }) => {
useTiming()

const activeTimers = tTimers.filter((t) => t.mode)

if (activeTimers.length == 0) return null

return (
<div className="timing__header_t-timers">
{activeTimers.map((timer) => (
<SingleTimer key={timer.index} timer={timer} />
))}
</div>
)
}

interface ISingleTimerProps {
timer: RundownTTimer
}

function SingleTimer({ timer }: ISingleTimerProps) {
const now = getCurrentTime()

const isRunning = !!timer.state && !timer.state.paused

const diff = calculateDiff(timer, now)
const timeStr = RundownUtils.formatDiffToTimecode(Math.abs(diff), false, true, true, false, true)
const parts = timeStr.split(':')

const timerSign = diff >= 0 ? '+' : '-'

const isCountingDown = timer.mode?.type === 'countdown' && diff < 0 && isRunning

return (
<div
className={classNames('timing__header_t-timers__timer', {
'timing__header_t-timers__timer__countdown': timer.mode!.type === 'countdown',
'timing__header_t-timers__timer__freeRun': timer.mode!.type === 'freeRun',
'timing__header_t-timers__timer__isRunning': isRunning,
'timing__header_t-timers__timer__isPaused': !isRunning,
Comment on lines +47 to +51
Copy link
Collaborator

@rjmunro rjmunro Feb 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you need the ! after mode? Can't Typescript infer it exists because you checked it on line 32?

Also can you do:

Suggested change
className={classNames('timing__header_t-timers__timer', {
'timing__header_t-timers__timer__countdown': timer.mode!.type === 'countdown',
'timing__header_t-timers__timer__freeRun': timer.mode!.type === 'freeRun',
'timing__header_t-timers__timer__isRunning': isRunning,
'timing__header_t-timers__timer__isPaused': !isRunning,
className={classNames('timing__header_t-timers__timer',
'timing__header_t-timers__timer__'+ timer.mode!.type
'timing__header_t-timers__timer__is' + isRunning ? 'Running' : 'Paused',
{

Copy link
Collaborator Author

@anteeek anteeek Feb 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's right, typescript detects it but after moving it out higher (to the rendering component) it doesn't anymore. As for the class concatenation, I would advise against it as it will make the classes un-ctrl+f-able across the codebase, and prone to unexpected breaks

'timing__header_t-timers__timer__isCountingDown': timer.mode!.type === 'countdown' && isCountingDown,
'timing__header_t-timers__timer__isCountingUp': timer.mode!.type === 'countdown' && !isCountingDown,
'timing__header_t-timers__timer__isComplete':
timer.mode!.type === 'countdown' && timer.state !== null && diff <= 0,
})}
>
<span className="timing__header_t-timers__timer__label">{timer.label}</span>
<div className="timing__header_t-timers__timer__value">
<span className="timing__header_t-timers__timer__sign">{timerSign}</span>
{parts.map((p, i) => (
<React.Fragment key={i}>
<span
className={classNames('timing__header_t-timers__timer__part', {
'timing__header_t-timers__timer__part--dimmed': Math.abs(diff) < [3600000, 60000, 1][i],
})}
>
{p}
</span>
{i < parts.length - 1 && <span className="timing__header_t-timers__timer__separator">:</span>}
</React.Fragment>
))}
</div>
</div>
)
}

function calculateDiff(timer: RundownTTimer, now: number): number {
if (!timer.state) {
return 0
}

// Get current time: either frozen duration or calculated from zeroTime
const currentTime = timer.state.paused ? timer.state.duration : timer.state.zeroTime - now

// Free run counts up, so negate to get positive elapsed time
if (timer.mode?.type === 'freeRun') {
return -currentTime
}

// Apply stopAtZero if configured
if (timer.mode?.stopAtZero && currentTime < 0) {
return 0
}

return currentTime
}
2 changes: 2 additions & 0 deletions packages/webui/src/client/ui/RundownView/RundownHeader/TimingDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { PlaylistStartTiming } from '../RundownTiming/PlaylistStartTiming'
import { RundownName } from '../RundownTiming/RundownName'
import { TimeOfDay } from '../RundownTiming/TimeOfDay'
import { useTiming } from '../RundownTiming/withTiming'
import { RundownHeaderTimers } from './RundownHeaderTimers'

interface ITimingDisplayProps {
rundownPlaylist: DBRundownPlaylist
Expand Down Expand Up @@ -52,6 +53,7 @@ export function TimingDisplay({
<RundownName rundownPlaylist={rundownPlaylist} currentRundown={currentRundown} rundownCount={rundownCount} />
</div>
<div className="timing__header__center">
<RundownHeaderTimers tTimers={rundownPlaylist.tTimers} />
<TimeOfDay />
</div>
<div className="timing__header__right">
Expand Down
Loading