Feat/132 (#198)

client/src/features/viewers/timer/Timer.jsx

@@ -3,13 +3,15 @@ import { useSearchParams } from 'react-router-dom';
 import TimerDisplay from 'common/components/countdown/TimerDisplay';
 import MyProgressBar from 'common/components/myProgressBar/MyProgressBar';
 import NavLogo from 'common/components/nav/NavLogo';
-import TitleCard from 'common/components/views/TitleCard';
+import TitleCard from 'common/components/title-card/TitleCard';
 import { AnimatePresence, motion } from 'framer-motion';
 import PropTypes from 'prop-types';
 
+import { overrideStylesURL } from '../../../common/api/apiConstants';
+import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { formatTime } from '../../../common/utils/time';
 
-import style from './Timer.module.scss';
+import './Timer.scss';
 
 const formatOptions = {
   showSeconds: true,
@@ -17,30 +19,32 @@ const formatOptions = {
 };
 
 export default function Timer(props) {
-  const { general, pres, title, time } = props;
+  const { general, pres, title, time, viewSettings } = props;
+  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [elapsed, setElapsed] = useState(true);
   const [searchParams] = useSearchParams();
 
-  // Set window title
   useEffect(() => {
     document.title = 'ontime - Timer';
   }, []);
 
+  // defer rendering until we load stylesheets
+  if (!shouldRender) {
+    return null;
+  }
+
   // eg. http://localhost:3000/timer?progress=up
   // Check for user options
-  useEffect(() => {
-    // progress: selector
-    // Should be 'up' or 'down'
-    const progress = searchParams.get('progress');
-    if (progress === 'up') {
-      setElapsed(true);
-    } else if (progress === 'down') {
-      setElapsed(false);
-    }
-  }, [searchParams]);
+  // progress: selector
+  // Should be 'up' or 'down'
+  const progress = searchParams.get('progress');
+  if (progress === 'up') {
+    setElapsed(true);
+  } else if (progress === 'down') {
+    setElapsed(false);
+  }
 
   const clock = formatTime(time.clock, formatOptions);
-
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playstate !== 'pause';
   const normalisedTime = Math.max(time.running, 0);
@@ -62,21 +66,21 @@ export default function Timer(props) {
   };
 
   return (
-    <div className={time.finished ? style.container__grayFinished : style.container__gray}>
-      <div className={showOverlay ? style.messageOverlayActive : style.messageOverlay}>
-        <div className={style.message}>{pres.text}</div>
+    <div className={time.finished ? 'stage-timer stage-timer--finished' : 'stage-timer'}>
+      <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
+        <div className='message'>{pres.text}</div>
       </div>
 
       <NavLogo />
 
-      <div className={style.clockContainer}>
-        <div className={style.label}>Time Now</div>
-        <div className={style.clock}>{clock}</div>
+      <div className='clock-container'>
+        <div className='label'>Time Now</div>
+        <div className='clock'>{clock}</div>
       </div>
 
-      <div className={style.timerContainer}>
+      <div className='timer-container'>
         {time.finished ? (
-          <div className={style.finished}>
+          <div className='end-message'>
             {general.endMessage == null || general.endMessage === '' ? (
               <TimerDisplay time={time.running} isNegative={time.isNegative} hideZeroHours />
             ) : (
@@ -84,14 +88,18 @@ export default function Timer(props) {
             )}
           </div>
         ) : (
-          <div className={isPlaying ? style.countdown : style.countdownPaused}>
+          <div className={isPlaying ? 'timer' : 'timer--paused'}>
             <TimerDisplay time={normalisedTime} hideZeroHours />
           </div>
         )}
       </div>
 
       {!time.finished && (
-        <div className={isPlaying ? style.progressContainer : style.progressContainerPaused}>
+        <div
+          className={
+            isPlaying ? 'progress-container' : 'progress-container progress-container--paused'
+          }
+        >
           <MyProgressBar
             now={normalisedTime}
             complete={time.durationSeconds}
@@ -103,7 +111,7 @@ export default function Timer(props) {
       <AnimatePresence>
         {title.showNow && (
           <motion.div
-            className={style.nowContainer}
+            className='event now'
             key='now'
             variants={titleVariants}
             initial='hidden'
@@ -123,7 +131,7 @@ export default function Timer(props) {
       <AnimatePresence>
         {title.showNext && (
           <motion.div
-            className={style.nextContainer}
+            className='event next'
             key='next'
             variants={titleVariants}
             initial='hidden'
@@ -148,4 +156,5 @@ Timer.propTypes = {
   pres: PropTypes.object,
   title: PropTypes.object,
   time: PropTypes.object,
+  viewSettings: PropTypes.object,
 };