From 52c8bafc2ca3b75671134b96d9b543a4cdde5ca3 Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Wed, 9 Jun 2021 22:30:16 +0200 Subject: [PATCH 1/2] feat: lower reloads on change of data --- client/src/features/editors/Editor.jsx | 2 +- .../viewers/production/lower/LowerClean.jsx | 1 + .../viewers/production/lower/LowerLines.jsx | 6 +++ .../viewers/production/lower/LowerWrapper.jsx | 38 +++++++++++++++++-- 4 files changed, 43 insertions(+), 4 deletions(-) diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx index fbbd9e0d5..5571dd728 100644 --- a/client/src/features/editors/Editor.jsx +++ b/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() { diff --git a/client/src/features/viewers/production/lower/LowerClean.jsx b/client/src/features/viewers/production/lower/LowerClean.jsx index 780a3e1ef..fb9fc8c40 100644 --- a/client/src/features/viewers/production/lower/LowerClean.jsx +++ b/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; diff --git a/client/src/features/viewers/production/lower/LowerLines.jsx b/client/src/features/viewers/production/lower/LowerLines.jsx index 7c2c28d66..714822a4b 100644 --- a/client/src/features/viewers/production/lower/LowerLines.jsx +++ b/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; diff --git a/client/src/features/viewers/production/lower/LowerWrapper.jsx b/client/src/features/viewers/production/lower/LowerWrapper.jsx index 0ee5cae91..8d9e3385c 100644 --- a/client/src/features/viewers/production/lower/LowerWrapper.jsx +++ b/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 ; + return ; case 1: - return ; + return ; default: - return ; + return ; } } From a077e126ae8e692259fb60757f971fc441d498fd Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Thu, 10 Jun 2021 13:52:48 +0200 Subject: [PATCH 2/2] refract + cleanup: render only on data change - add library for deep comparison - cleanup console.logs --- client/package.json | 1 + .../viewers/production/lower/LowerLines.jsx | 2 - .../viewers/production/lower/LowerWrapper.jsx | 45 ++++++++++++++----- client/yarn.lock | 2 +- 4 files changed, 35 insertions(+), 15 deletions(-) diff --git a/client/package.json b/client/package.json index 886e0b989..661b9195b 100644 --- a/client/package.json +++ b/client/package.json @@ -16,6 +16,7 @@ "react": "^17.0.1", "react-beautiful-dnd": "^13.1.0", "react-dom": "^17.0.1", + "react-fast-compare": "^3.2.0", "react-icons": "^4.2.0", "react-qr-code": "^1.1.1", "react-query": "^3.13.5", diff --git a/client/src/features/viewers/production/lower/LowerLines.jsx b/client/src/features/viewers/production/lower/LowerLines.jsx index 714822a4b..f96963c1d 100644 --- a/client/src/features/viewers/production/lower/LowerLines.jsx +++ b/client/src/features/viewers/production/lower/LowerLines.jsx @@ -12,8 +12,6 @@ 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; diff --git a/client/src/features/viewers/production/lower/LowerWrapper.jsx b/client/src/features/viewers/production/lower/LowerWrapper.jsx index 8d9e3385c..bc1f9cc90 100644 --- a/client/src/features/viewers/production/lower/LowerWrapper.jsx +++ b/client/src/features/viewers/production/lower/LowerWrapper.jsx @@ -1,10 +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 { title, ...rest } = props; - const [titles, setTitles] = useState(null); +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({}); @@ -23,21 +40,17 @@ export default function Lower(props) { 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); } }; @@ -109,10 +122,18 @@ export default function Lower(props) { switch (preset) { case 0: - return ; + return ( + + ); case 1: - return ; + return ( + + ); default: - return ; + return ( + + ); } -} +}; + +export default memo(Lower, areEqual); diff --git a/client/yarn.lock b/client/yarn.lock index 1062924a6..84ee4f1c6 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -10078,7 +10078,7 @@ react-error-overlay@^6.0.9: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== -react-fast-compare@3.2.0: +react-fast-compare@3.2.0, react-fast-compare@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==