feat: lower reloads on change of data

client/src/features/editors/Editor.jsx

@@ -10,7 +10,7 @@ import MenuBar from 'features/menu/MenuBar';
 const EventListWrapper = lazy(() =>
   import('features/editors/list/EventListWrapper')
 );
-const PlaybackControl = lazy(() => import('features/control/PlaybackButtons'));
+const PlaybackControl = lazy(() => import('features/control/PlaybackControl'));
 const MessageControl = lazy(() => import('features/control/MessageControl'));
 
 export default function Editor() {

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

@@ -12,6 +12,8 @@ export default function LowerLines(props) {
   };
   const [showLower, setShowLower] = useState(true);
 
+  console.log('DEBUG TITLE SHOW:', title.showNow);
+
   // Unmount if fadeOut
   useEffect(() => {
     if (!options.fadeOut) return;
@@ -30,6 +32,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

@@ -3,6 +3,8 @@ import LowerClean from './LowerClean';
 import LowerLines from './LowerLines';
 
 export default function Lower(props) {
+  const { title, ...rest } = props;
+  const [titles, setTitles] = useState(null);
   const [preset, setPreset] = useState(1);
   const [lowerOptions, setLowerOptions] = useState({});
 
@@ -11,6 +13,36 @@ 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
+    ) {
+      console.log('DEBUG TITLES: SETTING TITLES TO NULL');
+      setTitles((t) => ({ ...t, showNow: false }));
+
+      const transitionTime = 2000;
+
+      timeout = setTimeout(() => {
+        console.log('DEBUG TITLES: RESUMING');
+        setTitles(title);
+      }, transitionTime);
+    }
+
+    return () => {
+      if (timeout != null) {
+        console.log('DEBUG TITLES: CLEARING');
+
+        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 +109,10 @@ export default function Lower(props) {
 
   switch (preset) {
     case 0:
-      return <LowerClean {...props} options={lowerOptions} />;
+      return <LowerClean {...rest} title={title} options={lowerOptions} />;
     case 1:
-      return <LowerLines {...props} options={lowerOptions} />;
+      return <LowerLines {...rest} title={titles} options={lowerOptions} />;
     default:
-      return <LowerLines {...props} options={lowerOptions} />;
+      return <LowerLines {...rest} title={title} options={lowerOptions} />;
   }
 }