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==