diff --git a/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.scss b/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.scss index 301b9d7da..408df7264 100644 --- a/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.scss +++ b/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.scss @@ -2,3 +2,7 @@ sup.period { top: -1em; font-size: 0.4em; } + +.subscript { + font-size: 0.75em; +} diff --git a/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.tsx b/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.tsx index 57aa5dfc8..18e7b3a7c 100644 --- a/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.tsx +++ b/apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.tsx @@ -9,17 +9,32 @@ interface SuperscriptTimeProps { } /** - * @description receives a string like 12:00 AM and adds the period part to the superscript + * When the timer includes seconds, we want to split it from the rest + */ +function getTimerParts(time: string) { + if (time.length !== 8) { + return [time, '']; + } + + return [time.slice(0, 5), time.slice(5)]; +} + +/** + * Receives a time string and formats it with a subscript or superscript + * @example 12:00 AM -> AM becomes a superscript + * @example 12:00:10 -> the seconds become a subscript */ 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(' '); + const [mainTime, subscript] = getTimerParts(timeString); return (