diff --git a/apps/client/src/common/components/schedule/ScheduleItem.tsx b/apps/client/src/common/components/schedule/ScheduleItem.tsx index af265725c..dcfabc2e2 100644 --- a/apps/client/src/common/components/schedule/ScheduleItem.tsx +++ b/apps/client/src/common/components/schedule/ScheduleItem.tsx @@ -1,7 +1,12 @@ +import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime'; import { formatTime } from '../../utils/time'; import './Schedule.scss'; +const formatOptions = { + format: 'hh:mm a', +}; + interface ScheduleItemProps { selected: 'past' | 'now' | 'future'; timeStart: number; @@ -16,8 +21,8 @@ interface ScheduleItemProps { export default function ScheduleItem(props: ScheduleItemProps) { const { selected, timeStart, timeEnd, title, presenter, backstageEvent, colour, skip } = props; - const start = formatTime(timeStart, { format: 'hh:mm' }); - const end = formatTime(timeEnd, { format: 'hh:mm' }); + const start = formatTime(timeStart, formatOptions); + const end = formatTime(timeEnd, formatOptions); const userColour = colour !== '' ? colour : ''; const selectStyle = `entry--${selected}`; @@ -25,7 +30,12 @@ export default function ScheduleItem(props: ScheduleItemProps) {
  • - {`${start} → ${end} ${backstageEvent ? '*' : ''}`} +
    + + {' → '} + + {backstageEvent ? '*' : ''} +
    {title}
    {presenter &&
    {presenter}
    } diff --git a/apps/client/src/common/utils/__tests__/time.test.js b/apps/client/src/common/utils/__tests__/time.test.ts similarity index 73% rename from apps/client/src/common/utils/__tests__/time.test.js rename to apps/client/src/common/utils/__tests__/time.test.ts index 226d7c2a3..e96d432a7 100644 --- a/apps/client/src/common/utils/__tests__/time.test.js +++ b/apps/client/src/common/utils/__tests__/time.test.ts @@ -26,4 +26,14 @@ describe('formatTime()', () => { const time = formatTime(ms); expect(time).toStrictEqual('...'); }); + + it('shows 12h format without times', () => { + const ms = 13 * 60 * 60 * 1000; + const options = { + showSeconds: false, + format: 'hh:mm a', + }; + const time = formatTime(ms, options, () => '12'); + expect(time).toStrictEqual('01:00 PM'); + }); }); diff --git a/apps/client/src/features/viewers/backstage/Backstage.scss b/apps/client/src/features/viewers/backstage/Backstage.scss index 208ed1aee..45d549e50 100644 --- a/apps/client/src/features/viewers/backstage/Backstage.scss +++ b/apps/client/src/features/viewers/backstage/Backstage.scss @@ -60,6 +60,7 @@ font-weight: 600; color: var(--secondary-color-override, $viewer-secondary-color); letter-spacing: 0.05em; + line-height: 0.95em; } .message { diff --git a/apps/client/src/features/viewers/backstage/Backstage.tsx b/apps/client/src/features/viewers/backstage/Backstage.tsx index 94fb848b1..01e1dab6f 100644 --- a/apps/client/src/features/viewers/backstage/Backstage.tsx +++ b/apps/client/src/features/viewers/backstage/Backstage.tsx @@ -18,6 +18,7 @@ import { TimeManagerType } from '../../../common/models/TimeManager.type'; import { formatTime } from '../../../common/utils/time'; import { useTranslation } from '../../../translation/TranslationProvider'; import { titleVariants } from '../common/animation'; +import SuperscriptTime from '../common/superscript-time/SuperscriptTime'; import './Backstage.scss'; @@ -97,7 +98,7 @@ export default function Backstage(props: BackstageProps) { {general.title}
    {getLocalizedString('common.time_now')}
    -
    {clock}
    +
    @@ -128,12 +129,16 @@ export default function Backstage(props: BackstageProps) {
    {getLocalizedString('common.started_at')}
    -
    {startedAt}
    +
    {getLocalizedString('common.expected_finish')}
    -
    {expectedFinish}
    + {isNegative ? ( +
    {expectedFinish}
    + ) : ( + + )}
    diff --git a/apps/client/src/features/viewers/clock/Clock.tsx b/apps/client/src/features/viewers/clock/Clock.tsx index ef40764a2..871a053e8 100644 --- a/apps/client/src/features/viewers/clock/Clock.tsx +++ b/apps/client/src/features/viewers/clock/Clock.tsx @@ -10,6 +10,7 @@ import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet import { TimeManagerType } from '../../../common/models/TimeManager.type'; import { OverridableOptions } from '../../../common/models/View.types'; import { formatTime } from '../../../common/utils/time'; +import SuperscriptTime from '../common/superscript-time/SuperscriptTime'; import './Clock.scss'; @@ -135,7 +136,8 @@ export default function Clock(props: ClockProps) { > -
    - {clock} -
    + />
    ); } diff --git a/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.scss b/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.scss new file mode 100644 index 000000000..301b9d7da --- /dev/null +++ b/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.scss @@ -0,0 +1,4 @@ +sup.period { + top: -1em; + font-size: 0.4em; +} diff --git a/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.tsx b/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.tsx new file mode 100644 index 000000000..6a1b99054 --- /dev/null +++ b/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.tsx @@ -0,0 +1,23 @@ +import { CSSProperties } from 'react'; + +import './SuperscriptTime.scss'; + +interface SuperscriptTimeProps { + time: string; + className?: string; + style?: CSSProperties; +} + +export default function SuperscriptTime(props: SuperscriptTimeProps) { + const { time, className, style } = props; + + // we assume anything after space is a period tag + const [timeString, period] = time.split(' '); + + return ( +
    + {timeString} + {period && {period}} +
    + ); +} diff --git a/apps/client/src/features/viewers/countdown/Countdown.scss b/apps/client/src/features/viewers/countdown/Countdown.scss index 7859e460e..c2c33a57b 100644 --- a/apps/client/src/features/viewers/countdown/Countdown.scss +++ b/apps/client/src/features/viewers/countdown/Countdown.scss @@ -68,6 +68,7 @@ font-size: clamp(32px, 3.5vw, 50px); color: var(--secondary-color-override, $viewer-secondary-color); letter-spacing: 0.05em; + line-height: 0.95em; } } @@ -135,6 +136,7 @@ font-size: clamp(32px, 3.5vw, 50px); color: var(--secondary-color-override, $viewer-secondary-color); letter-spacing: 0.05em; + line-height: 0.95em; &--delayed { color: $delay-color; diff --git a/apps/client/src/features/viewers/countdown/Countdown.tsx b/apps/client/src/features/viewers/countdown/Countdown.tsx index 441ded578..b6ac0658b 100644 --- a/apps/client/src/features/viewers/countdown/Countdown.tsx +++ b/apps/client/src/features/viewers/countdown/Countdown.tsx @@ -11,6 +11,7 @@ import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet import { TimeManagerType } from '../../../common/models/TimeManager.type'; import { formatTime } from '../../../common/utils/time'; import { useTranslation } from '../../../translation/TranslationProvider'; +import SuperscriptTime from '../common/superscript-time/SuperscriptTime'; import { fetchTimerData, TimerMessage } from './countdown.helpers'; import CountdownSelect from './CountdownSelect'; @@ -118,26 +119,27 @@ export default function Countdown(props: CountdownProps) {
    {getLocalizedString('common.time_now')}
    -
    {clock}
    +
    {runningMessage !== TimerMessage.unhandled && (
    {getLocalizedString(`countdown.${runningMessage}`)}
    )} - - {formattedTimer} - +
    {follow?.title || 'Untitled Event'}
    {getLocalizedString('common.start_time')}
    - {startTime} +
    {getLocalizedString('common.end_time')}
    - {endTime} +
    diff --git a/apps/client/src/features/viewers/countdown/CountdownSelect.tsx b/apps/client/src/features/viewers/countdown/CountdownSelect.tsx index 056a05673..16aa5c9b6 100644 --- a/apps/client/src/features/viewers/countdown/CountdownSelect.tsx +++ b/apps/client/src/features/viewers/countdown/CountdownSelect.tsx @@ -9,6 +9,10 @@ import { sanitiseTitle } from './countdown.helpers'; import './Countdown.scss'; +const formatOptions = { + format: 'hh:mm a', +}; + interface CountdownSelectProps { events: OntimeRundownEntry[]; } @@ -31,8 +35,8 @@ export default function CountdownSelect(props: CountdownSelectProps) { filteredEvents.map((event: OntimeEvent, counter: number) => { const index = counter + 1; const title = sanitiseTitle(event.title); - const start = formatTime(event.timeStart, { format: 'hh:mm' }); - const end = formatTime(event.timeEnd, { format: 'hh:mm' }); + const start = formatTime(event.timeStart, formatOptions); + const end = formatTime(event.timeEnd, formatOptions); return (
  • diff --git a/apps/client/src/features/viewers/public/Public.scss b/apps/client/src/features/viewers/public/Public.scss index 504cb24ce..d38f72110 100644 --- a/apps/client/src/features/viewers/public/Public.scss +++ b/apps/client/src/features/viewers/public/Public.scss @@ -58,6 +58,7 @@ font-size: clamp(32px, 3.5vw, 50px); font-weight: 600; letter-spacing: 0.05em; + line-height: 0.95em; } .message { diff --git a/apps/client/src/features/viewers/public/Public.tsx b/apps/client/src/features/viewers/public/Public.tsx index 78d97a4f4..a9b779e99 100644 --- a/apps/client/src/features/viewers/public/Public.tsx +++ b/apps/client/src/features/viewers/public/Public.tsx @@ -16,6 +16,7 @@ import { TimeManagerType } from '../../../common/models/TimeManager.type'; import { formatTime } from '../../../common/utils/time'; import { useTranslation } from '../../../translation/TranslationProvider'; import { titleVariants } from '../common/animation'; +import SuperscriptTime from '../common/superscript-time/SuperscriptTime'; import './Public.scss'; @@ -63,7 +64,7 @@ export default function Public(props: BackstageProps) { {general.title}
    {getLocalizedString('common.time_now')}
    -
    {clock}
    +
    diff --git a/apps/client/src/features/viewers/studio/StudioClock.scss b/apps/client/src/features/viewers/studio/StudioClock.scss index 6421a99f6..cfb997e49 100644 --- a/apps/client/src/features/viewers/studio/StudioClock.scss +++ b/apps/client/src/features/viewers/studio/StudioClock.scss @@ -13,7 +13,7 @@ $half-hours: min(1.5vh, 10px); $size-min: min(2.5vh, 18px); $half-min: min(1.25vh, 9px); $red-active: #c53030; -$red-idle: #300000; +$red-idle: #000000; $cyan-active: #0ff; $cyan-idle: #0aa; @@ -56,11 +56,10 @@ $cyan-idle: #0aa; .hours { border-radius: 50%; position: absolute; - background: $red-idle; + background: var(--studio-idle, $red-idle); &--active { - background: $red-active; - box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.25); + background: var(--studio-active, $red-active); } } @@ -80,7 +79,7 @@ $cyan-idle: #0aa; } .studio-timer { - color: $red-active; + color: var(--studio-active, $red-active); font-size: calc(#{$clock-size} / 3); margin-top: calc(50% - calc(#{$clock-size} / 7)); line-height: 0.8em; @@ -88,9 +87,8 @@ $cyan-idle: #0aa; &--with-seconds { font-size: calc(#{$clock-size} / 4.6); margin-top: calc(50% - calc(#{$clock-size} / 11)); + } } - } - .next-title:after, @@ -100,14 +98,15 @@ $cyan-idle: #0aa; } .next-title { - color: $cyan-idle; + color: var(--studio-idle-label, $cyan-idle); text-align: center; } .next-countdown { + color: var(--studio-active-label, $cyan-active); + font-size: 10vh; line-height: 1em; - color: $cyan-active; &--overtime { color: darken($red-active, 10%); @@ -131,16 +130,16 @@ $cyan-idle: #0aa; padding-bottom: 2vh; font-size: 15vh; line-height: 0.9em; - color: $red-active; + color: var(--studio-active, $red-active); &--idle { - color: $red-idle; + color: var(--studio-idle, $red-active); } } .schedule { ul { - color: $cyan-idle; + color: var(--studio-idle-label, $cyan-idle); font-size: 3.75vh; line-height: 1em; list-style: none; @@ -154,18 +153,18 @@ $cyan-idle: #0aa; } .now { - color: $cyan-active; + color: var(--studio-active-label, $cyan-active); } .next { - color: $red-active; + color: var(--studio-active, $red-active); } .user-colour { width: 0.35em; height: 0.35em; aspect-ratio: 1; - background-color: $red-idle; + background-color: var(--studio-idle, $red-idle); margin-right: 0.35em; } } diff --git a/apps/client/src/features/viewers/timer/Timer.scss b/apps/client/src/features/viewers/timer/Timer.scss index 5d53cd3cb..e7c3192b5 100644 --- a/apps/client/src/features/viewers/timer/Timer.scss +++ b/apps/client/src/features/viewers/timer/Timer.scss @@ -48,6 +48,7 @@ font-size: clamp(32px, 3.5vw, 50px); color: var(--secondary-color-override, $viewer-secondary-color); letter-spacing: 0.05em; + line-height: 0.95em; } &--hidden { @@ -115,11 +116,11 @@ opacity: 1; transition: $viewer-transition-time; - &--paused { - opacity: $viewer-opacity-disabled; - transition: $viewer-transition-time; + &--paused { + opacity: $viewer-opacity-disabled; + transition: $viewer-transition-time; + } } -} /* =================== OVERLAY ===================*/ diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx index aaccf4c63..914b98328 100644 --- a/apps/client/src/features/viewers/timer/Timer.tsx +++ b/apps/client/src/features/viewers/timer/Timer.tsx @@ -12,6 +12,7 @@ import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet import { TimeManagerType } from '../../../common/models/TimeManager.type'; import { formatTime } from '../../../common/utils/time'; import { useTranslation } from '../../../translation/TranslationProvider'; +import SuperscriptTime from '../common/superscript-time/SuperscriptTime'; import { formatTimerDisplay, getTimerByType } from '../common/viewerUtils'; import './Timer.scss'; @@ -106,7 +107,7 @@ export default function Timer(props: TimerProps) {
    {getLocalizedString('common.time_now')}
    -
    {clock}
    +
    diff --git a/apps/server/src/external/styles/override.css b/apps/server/src/external/styles/override.css index e4ab0deec..63c304c7d 100644 --- a/apps/server/src/external/styles/override.css +++ b/apps/server/src/external/styles/override.css @@ -16,6 +16,11 @@ --operator-running-bg-override: #D20300; --operator-highlight-override: #FFAB33; + + --studio-active: #101010; + --studio-idle: #cfcfcf; + --studio-active-label: #101010; + --studio-idle-label: #595959; } .timer {