default view

temp changes to default view
- countdown setup
- prepare to create a separate preview window

src/common/components/countdown/Countdown.jsx

@@ -1,5 +1,21 @@
-import styles from './Countdown.module.css'
+import { useEffect, useState } from 'react';
+import styles from './Countdown.module.css';
+
+function display(seconds) {
+  const format = (val) => `0${Math.floor(val)}`.slice(-2);
+  const hours = seconds / 3600;
+  const minutes = (seconds % 3600) / 60;
+
+  if (hours < 1) return [minutes, seconds % 60].map(format).join(':');
+  else return [hours, minutes, seconds % 60].map(format).join(':');
+}
 
 export default function Countdown({ time }) {
-  return <div className={styles.countdownClock}>{time}</div>;
+  const [counter, setCounter] = useState(time);
+
+  useEffect(() => {
+    counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
+  }, [counter]);
+
+  return <div className={styles.countdownClock}>{display(counter)}</div>;
 }

src/features/editors/Editor.jsx

@@ -78,7 +78,7 @@ export default function Editor() {
         <Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading>
         <NumberedText number={3} text={'Preview layout'} />
         <div className={styles.content}>
-          <PreviewContainer />
+          <PreviewContainer data={selectedData} />
         </div>
       </Box>
     </SimpleGrid>

src/features/viewers/DefaultPresenter.jsx

@@ -1,33 +1,55 @@
-import { format } from 'date-fns';
-import { useState } from 'react';
+import { differenceInSeconds, format, subMinutes } from 'date-fns';
+import addMinutes from 'date-fns/addMinutes';
 import { sampleData } from '../../app/sampleData';
 import Countdown from '../../common/components/countdown/Countdown';
 import MyProgressBar from '../../common/components/myProgressBar/MyProgressBar';
 import SmallTimer from '../../common/components/smallTimer/SmallTimer';
 import './viewers.css';
 
-export default function DefaultPresenter() {
-  const [data, setData] = useState(sampleData);
-  const [timer, setTimer] = useState(sampleData.timerDuration);
-  const [elapsed, setElapsed] = useState(0);
+export default function DefaultPresenter(props) {
+  const data = sampleData;
+  const now = new Date();
+  const values = props.data ?? {
+    title: 'Presentation Title',
+    subtitle: 'Presentation Subtitle',
+    presenter: 'Presenter Name',
+    timerDuration: 10,
+    timeStart: now,
+    timeEnd: now,
+  };
 
-  const timeNow = new Date();
+  // NITE: test only
+  const clockStarted = addMinutes(now, 6);
+
+  const timer = differenceInSeconds(
+    now,
+    subMinutes(clockStarted, values.timerDuration)
+  );
+
+  const timeStart = format(values.timeStart, 'HH:mm');
+  const currentTime = format(now, 'HH:mm');
+  const timeEnd = format(values.timeEnd, 'HH:mm');
+  const elapsed = timer / (values.timerDuration * 60);
+
+  console.log('timers', timer, timeStart, currentTime, timeEnd, elapsed);
+
+  if (props?.preview) return <div>Preview</div>;
 
   return (
     <div className='presenter'>
-      <div className='presentationTitle'>{data.title}</div>
-      <div className='presentationSub'>{data.subtitle}</div>
-      <Countdown time={format(timer, 'mm.ss')} />
-      {!data.message.active && <MyProgressBar normalisedComplete={0.9} />}
+      <div className='presentationTitle'>{values.title}</div>
+      <div className='presentationSub'>{values.subtitle}</div>
+      <Countdown time={timer} />
+      {!data.message.active && <MyProgressBar normalisedComplete={elapsed} />}
       <div
         className={data.message.active ? 'userMessage' : 'userMessage hidden'}
       >
         {data.message.text}
       </div>
       <div className='extra'>
-        <SmallTimer label='Scheduled Start' time={data.timeStart} />
-        <SmallTimer label='Current Time' time={format(timeNow, 'HH:mm')} />
-        <SmallTimer label='Scheduled End' time={data.timeEnd} />
+        <SmallTimer label='Scheduled Start' time={timeStart} />
+        <SmallTimer label='Current Time' time={currentTime} />
+        <SmallTimer label='Scheduled End' time={timeEnd} />
       </div>
     </div>
   );

src/features/viewers/PreviewContainer.jsx

@@ -1,18 +1,27 @@
 import DefaultPresenter from './DefaultPresenter';
 import styles from './PreviewContainer.module.css';
 
-export default function PreviewContainer() {
+export default function PreviewContainer(props) {
   return (
     <div className={styles.previewContainer}>
-
-      <div className={styles.preview}>
-        {/* <DefaultPresenter /> */}
+      <div className={styles.previewItem}>
+        <div className={styles.preview}>
+          <DefaultPresenter data={props.data} preview/>
+        </div>
+        <div className={styles.label}>Default Presenter</div>
       </div>
-      <div className={styles.label}>Default Presenter</div>
-
-      <div className={styles.preview}>
+      <div className={styles.previewItem}>
+        <div className={styles.preview}></div>
+        <div className={styles.label}>Audience</div>
+      </div>
+      <div className={styles.previewItem}>
+        <div className={styles.preview}></div>
+        <div className={styles.label}>Stage Manager</div>
+      </div>
+      <div className={styles.previewItem}>
+        <div className={styles.preview}></div>
+        <div className={styles.label}>Lower third</div>
       </div>
-      <div className={styles.label}>Audience</div>
     </div>
   );
 }