diff --git a/src/Overlay/LowerThird.tsx b/src/Overlay/LowerThird.tsx index 3f04c43..944be3a 100644 --- a/src/Overlay/LowerThird.tsx +++ b/src/Overlay/LowerThird.tsx @@ -92,9 +92,9 @@ function LowerThird({ !!displayedInfo && cgConfig.showLowerThird && ( - (!!displayedInfo.title && !!displayedInfo.title.match(/\S/)) + (!!displayedInfo.title && !!displayedInfo.title.match(/\S/)) || (!!displayedInfo.subtitle && !!displayedInfo.subtitle.match(/\S/)) - ) + ), ); }, [ cgConfig?.showLowerThird, diff --git a/src/components/MultiDisplay/EventRow/MessageRow/index.tsx b/src/components/MultiDisplay/EventRow/MessageRow/index.tsx index 929f64b..27f181a 100644 --- a/src/components/MultiDisplay/EventRow/MessageRow/index.tsx +++ b/src/components/MultiDisplay/EventRow/MessageRow/index.tsx @@ -4,7 +4,7 @@ import { Event } from '@shared/DbTypes'; import { Textfit } from '@gmurph91/react-textfit'; import styles from './styles.module.scss'; -const MessageRow = ({ event, showLine }: { event: Event; showLine: 0 | 1 }) => ( +const MessageRow = ({ event, showLine }: { event: Event; showLine: 0 | 1 | null }) => (
( {/* Logo/Event Name Short Fader */}
{/* Logo */} -
+
{event.name} ( { @@ -114,7 +114,7 @@ const PlayoffRow = ({ // Make a new array of max queuing matches to display const maxQ = typeof e.options?.maxQueueingToShow === 'number' ? e.options?.maxQueueingToShow - : 3; + : 1; const toFill = new Array(maxQ).fill(null); toFill.forEach((_, i) => { @@ -237,7 +237,7 @@ const PlayoffRow = ({ {getDisplayText(nextMatch)} - {nextMatch?.match && ( + {nextMatch?.match && showLine !== null && ( {getDisplayText(x)} - {x?.match && ( + {x?.match && showLine !== null && ( - {queueingMatches[0]?.match && ( + {queueingMatches[0]?.match && showLine !== null && ( { @@ -90,7 +90,7 @@ const QualRow = ({ // Make a new array of max queuing matches to display const maxQ = typeof e.options?.maxQueueingToShow === 'number' ? e.options?.maxQueueingToShow - : 3; + : 1; const toFill = new Array(maxQ).fill(null); toFill.forEach((_, i) => { toFill[i] = i + 2; @@ -250,13 +250,15 @@ const QualRow = ({ {(nextMatch as QualMatch)?.number} - - - + {showLine !== null ? ( + + + + ) : <>} )} @@ -277,13 +279,15 @@ const QualRow = ({ return (
{match.number} - -
- -
+ {showLine !== null && ( +
+ +
+ )}
); } @@ -305,13 +309,15 @@ const QualRow = ({ {(queueingMatches[0] as QualMatch)?.number} - - - + {showLine !== null && ( + + + + )} )} diff --git a/src/components/MultiDisplay/EventRow/index.tsx b/src/components/MultiDisplay/EventRow/index.tsx index 8014e30..a740421 100644 --- a/src/components/MultiDisplay/EventRow/index.tsx +++ b/src/components/MultiDisplay/EventRow/index.tsx @@ -19,7 +19,7 @@ const EventRow = ({ }: { token: string; season: string; - showLine: 0 | 1; + showLine: 0 | 1 | null; }) => { // Ref to the event in the database const dbEventRef = useRef(); diff --git a/src/components/MultiDisplay/EventRow/sharedStyles.module.scss b/src/components/MultiDisplay/EventRow/sharedStyles.module.scss index ffb9a0a..6d5d413 100644 --- a/src/components/MultiDisplay/EventRow/sharedStyles.module.scss +++ b/src/components/MultiDisplay/EventRow/sharedStyles.module.scss @@ -18,6 +18,11 @@ $cell-vertical-negative: -3vh; line-height: 0.8; } +.noTeamNumbers .matchNumber { + top: 0; + font-size: calc($matchnumber-size * 0.9); +} + .flexRow { display: flex; flex-direction: row; diff --git a/src/components/MultiDisplay/index.tsx b/src/components/MultiDisplay/index.tsx index 42feb7c..4350f6f 100644 --- a/src/components/MultiDisplay/index.tsx +++ b/src/components/MultiDisplay/index.tsx @@ -2,11 +2,13 @@ import { h, Fragment } from 'preact'; import { useEffect, useState } from 'preact/hooks'; import EventRow from './EventRow'; import styles from './styles.module.scss'; +import sharedStyles from './EventRow/sharedStyles.module.scss'; const MultiQueueing = () => { const searchParams = new URLSearchParams(window.location.search); const events = searchParams.getAll('e'); const season = searchParams.get('s') ?? new Date().getFullYear().toString(); + const showTeamNumbers = searchParams.get('teamNumbers') !== 'false'; const calcClock = (): string => { const now = new Date(); @@ -18,29 +20,29 @@ const MultiQueueing = () => { return str; }; - const [showLine, setShowLine] = useState<0 | 1>(0); + const [showLine, setShowLine] = useState<0 | 1 | null>(showTeamNumbers ? 0 : null); const [clock, setClock] = useState(calcClock()); useEffect(() => { - const interval = setInterval(() => { - setShowLine((sl: 0 | 1) => (sl === 0 ? 1 : 0)); - }, 5000); + const interval = showTeamNumbers ? setInterval(() => { + setShowLine((sl: 0 | 1 | null) => (sl === 0 ? 1 : 0)); + }, 5000) : null; const clockInterval = setInterval(() => setClock(calcClock()), 10000); calcClock(); return () => { - clearInterval(interval); + if (interval) clearInterval(interval); clearInterval(clockInterval); }; - }, []); + }, [showTeamNumbers]); return ( -
+
c).join(' ')}> - +
{clock}{clock} On Field Up Next Queueing