Merge branch 'master' into feat/electron

client/src/common/components/myProgressBar/MyProgressBar.jsx

@@ -3,16 +3,21 @@ import styles from './MyProgressBar.module.css';
 
 export default function MyProgressBar(props) {
   const { now, complete, showElapsed } = props;
-  const percentComplete = showElapsed
-  ? clamp((100 - (now * 100) / complete), 0, 100)
-  : clamp((now * 100) / complete, 0, 100)
+
+  let percentComplete = showElapsed ? 0 : 100;
+
+  if (now != null && complete != null) {
+    percentComplete = showElapsed
+      ? clamp(100 - (now * 100) / complete, 0, 100)
+      : clamp((now * 100) / complete, 0, 100);
+  }
 
   return (
-    <div className={styles.progress}>
+    <div className={showElapsed ? styles.progress : styles.progressCountdown}>
       <div
         className={styles.progressBar}
         style={{ width: `${percentComplete}%` }}
-      ></div>
+      />
     </div>
   );
 }

client/src/common/components/myProgressBar/MyProgressBar.module.css

@@ -1,13 +1,22 @@
-.progress {
+.progress,
+.progressCountdown {
   height: 2vh;
   background-color: rgba(255, 255, 255, 0.13);
   border-radius: 4px;
 }
 
+.progress {
+  background-color: rgba(255, 255, 255, 0.13);
+}
+
+.progressCountdown {
+  background-color: #ff7597;
+}
+
 .progressBar {
   width: 100%;
   height: 2vh;
-  background-color: rgba(255, 255, 255, 0.79);
+  background-color: rgb(255, 255, 255);
   border-radius: 4px;
   transition: 1s linear;
   transition-property: width;

client/src/common/components/views/Paginator.jsx

@@ -12,7 +12,6 @@ export default function Paginator(props) {
   const [page, setPage] = useState([]);
   const [pages, setPages] = useState(0);
   const [selPage, setSelPage] = useState(0);
-  const [selected, setSelected] = useState(-1);
 
   useEffect(() => {
     if (events == null) return;
@@ -33,18 +32,6 @@ export default function Paginator(props) {
     // if array is completely in past, show depending on SCROLL_PAST
   }, [events, selPage, LIMIT_PER_PAGE]);
 
-  useEffect(() => {
-    // maybe nothing is selected
-    if (events == null || selectedId == null) return;
-
-    // which one is selected
-    const s = events.filter((e) => e.id === selectedId);
-
-    if (s.length < 1) return;
-
-    setSelected(s[0].id);
-  }, [events, selectedId]);
-
   // every SCROLL_TIME go to the next array
   useInterval(() => {
     if (numEvents > LIMIT_PER_PAGE) {
@@ -68,9 +55,8 @@ export default function Paginator(props) {
       </div>
       <div className={style.entries}>
         {page.map((e) => {
-          if (selectedState === 1) selectedState = 2;
-          if (e.id === selected) selectedState = 1;
-          else if (e.id > selected) selectedState = 2;
+          if (e.id === selectedId) selectedState = 1;
+          else if (selectedState === 1) selectedState = 2;
           return (
             <TodayItem
               key={e.id}
@@ -78,6 +64,7 @@ export default function Paginator(props) {
               timeStart={e.timeStart}
               timeEnd={e.timeEnd}
               title={e.title}
+              backstageEvent={!e.isPublic}
             />
           );
         })}

client/src/common/components/views/Paginator.module.css

@@ -26,11 +26,13 @@
   margin-left: 0.5vw;
 }
 
-.entryStart,
-.entryEnd {
+.entryTimes {
   font-family: 'Open Sans', sans-serif;
-  min-width: 5vw;
+  font-size: 1.4vw;
+
+  min-width: 10vw;
   opacity: 0.9;
+  letter-spacing: 0.035em;
 }
 
 .entryTitle {
@@ -40,26 +42,42 @@
 .entryPast,
 .entryNow,
 .entryFuture {
-  background-color: rgba(255, 255, 255, 0.03);
   display: flex;
   font-size: 1.3vw;
   padding: 0.2vh 1vw;
   margin-bottom: 1.5vh;
+  border-radius: 3px;
 }
 
 .entryPast {
-  color: #aaa;
+  background-color: rgba(255, 255, 255, 0.01);
   font-size: 1.2vw;
 }
 
+.entryPast > .entryTitle {
+  color: #999;
+}
+
 .entryFuture {
+  background-color: rgba(255, 255, 255, 0.03);
   color: #ddd;
 }
 
 .entryNow {
   color: #fff;
   line-height: 5vh;
-  background-color: rgba(255, 255, 255, 0.09);
+  background-color: rgba(255, 255, 255, 0.07);
   border-bottom: 0.5vh solid #ff7597aa;
-  margin-left: -0.5vw;
+  margin-left: -0.5em;
+  padding-left: 0.5em;
+}
+
+.backstageInd {
+  color: #ff7597aa;
+  margin-left: auto;
+  margin-right: -0.5vw;
+}
+
+.backstageInd::before {
+  content: '*';
 }

client/src/common/components/views/TodayItem.jsx

@@ -1,7 +1,7 @@
 import { stringFromMillis } from 'common/dateConfig';
 import style from './Paginator.module.css';
 export default function TodayItem(props) {
-  const { selected, timeStart, timeEnd, title } = props;
+  const { selected, timeStart, timeEnd, title, backstageEvent } = props;
 
   // Format timers
   const start = stringFromMillis(timeStart, false) || '';
@@ -13,9 +13,13 @@ export default function TodayItem(props) {
   else if (selected === 2) selectStyle = style.entryFuture;
   return (
     <div className={selectStyle}>
-      <div className={style.entryStart}>{start}</div>
-      <div className={style.entryEnd}>{end}</div>
+      <div
+        className={`${style.entryTimes} ${
+          backstageEvent ? style.backstage : undefined
+        }`}
+      >{`${start} · ${end}`}</div>
       <div className={style.entryTitle}>{title}</div>
+      {backstageEvent && <div className={style.backstageInd}></div>}
     </div>
   );
 }

client/src/features/editors/Editor.jsx

@@ -1,13 +1,19 @@
+
+import { lazy, useEffect } from 'react';
+import { Heading } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
-import PlaybackControl from '../control/PlaybackControl';
-import MessageControl from '../control/MessageControl';
+import NumberedText from 'common/components/text/NumberedText';
 import styles from './Editor.module.css';
-import EventListWrapper from './list/EventListWrapper';
 import { useDisclosure } from '@chakra-ui/hooks';
 import SettingsModal from '../modals/SettingsModal';
-import { useEffect } from 'react';
 import MenuBar from 'features/menu/MenuBar';
 
+const EventListWrapper = lazy(() =>
+  import('features/editors/list/EventListWrapper')
+);
+const PlaybackControl = lazy(() => import('features/control/PlaybackControl'));
+const MessageControl = lazy(() => import('features/control/MessageControl'));
+
 export default function Editor() {
   const { isOpen, onOpen, onClose } = useDisclosure();
 

client/src/features/viewers/presenter/PresenterView.jsx

@@ -71,11 +71,7 @@ export default function PresenterView(props) {
             isPlaying ? style.progressContainer : style.progressContainerPaused
           }
         >
-          <MyProgressBar
-            now={normalisedTime}
-            complete={time.durationSeconds}
-            showElapsed
-          />
+          <MyProgressBar now={normalisedTime} complete={time.durationSeconds} />
         </div>
       )}
 

client/src/features/viewers/production/lower/LowerClean.jsx

@@ -33,6 +33,7 @@ export default function LowerClean(props) {
 
   // calculate transition times
   useEffect(() => {});
+
   // Format messages
   const showLowerMessage = lower.text !== '' && lower.visible;
 

client/src/features/viewers/production/lower/LowerLines.jsx

@@ -30,6 +30,10 @@ export default function LowerLines(props) {
     return () => clearTimeout(timeout);
   }, [options.fadeOut, options.transitionIn, defaults.transitionIn]);
 
+  useEffect(() => {
+    setShowLower(title.showNow);
+  }, [title.showNow]);
+
   // Format messages
   const showLowerMessage = lower.text !== '' && lower.visible;
 

client/src/features/viewers/production/lower/LowerWrapper.jsx

@@ -1,8 +1,27 @@
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import LowerClean from './LowerClean';
 import LowerLines from './LowerLines';
+const isEqual = require('react-fast-compare');
 
-export default function Lower(props) {
+const areEqual = (prevProps, nextProps) => {
+  return (
+    isEqual(prevProps.title, nextProps.title) &&
+    isEqual(prevProps.lower && nextProps.lower)
+  );
+};
+
+const Lower = (props) => {
+  const { title } = props;
+  const [titles, setTitles] = useState({
+    titleNow: '',
+    titleNext: '',
+    subtitleNow: '',
+    subtitleNext: '',
+    presenterNow: '',
+    presenterNext: '',
+    showNow: false,
+    showNext: false,
+  });
   const [preset, setPreset] = useState(1);
   const [lowerOptions, setLowerOptions] = useState({});
 
@@ -11,6 +30,32 @@ export default function Lower(props) {
     document.title = 'ontime - Lower Thirds';
   }, []);
 
+  // reload if data changes
+  useEffect(() => {
+    // clear titles if necessary
+    // will trigger an animation out in the component
+    let timeout = null;
+    if (
+      title?.titleNow !== titles?.titleNow ||
+      title?.subtitleNow !== titles?.subtitleNow ||
+      title?.presenterNow !== titles?.presenterNow
+    ) {
+      setTitles((t) => ({ ...t, showNow: false }));
+
+      const transitionTime = 2000;
+
+      timeout = setTimeout(() => {
+        setTitles(title);
+      }, transitionTime);
+    }
+
+    return () => {
+      if (timeout != null) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [title.titleNow, title.subtitleNow, title.presenterNow]);
+
   // TODO: sanitize data
   // getting config from URL: preset, size, transition, bg, text, key
   // eg. http://localhost:3000/lower?bg=ff2&text=f00&size=0.6&transition=5
@@ -77,10 +122,18 @@ export default function Lower(props) {
 
   switch (preset) {
     case 0:
-      return <LowerClean {...props} options={lowerOptions} />;
+      return (
+        <LowerClean lower={props.lower} title={titles} options={lowerOptions} />
+      );
     case 1:
-      return <LowerLines {...props} options={lowerOptions} />;
+      return (
+        <LowerLines lower={props.lower} title={titles} options={lowerOptions} />
+      );
     default:
-      return <LowerLines {...props} options={lowerOptions} />;
+      return (
+        <LowerLines lower={props.lower} title={titles} options={lowerOptions} />
+      );
   }
-}
+};
+
+export default memo(Lower, areEqual);