Prevent re-creating caster elements on break screen when it is not ne…

…cessary so caster video feeds aren't reloaded on all caster updates
IPLSplatoon · Oct 9, 2024 · 4b15d9f · 4b15d9f
1 parent ba4ad5e
commit 4b15d9f
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 41 deletions.
diff --git a/src/graphics/break/scripts/casters.ts b/src/graphics/break/scripts/casters.ts
@@ -3,12 +3,13 @@ import { elementById } from '../../helpers/elem';
 import gsap from 'gsap';
 import { getPrevious } from '../../helpers/object';
 import { isBlank } from '../../helpers/string';
+import { Caster } from 'schemas';
 
 const castersWrapper = elementById('info-bar-casters');
 const twittersWrapper = elementById('info-bar-twitters');
 const castersLayout = elementById('casters-layout');
 
-casters.on('change', newValue => {
+casters.on('change', (newValue, oldValue) => {
     const values = Object.values(newValue);
 
     castersWrapper.innerHTML = values.reduce((existing, elem) => {
@@ -24,52 +25,47 @@ casters.on('change', newValue => {
 
     gsap.set([ castersWrapper, twittersWrapper ], { scale: values.length > 2 ? 0.7 : 1 });
 
-    const casterWidth = getCasterWidth(values.length);
-    castersLayout.innerHTML = values.reduce((result, elem) => {
-        result += `
-            <div
-               class="caster-wrapper"
-               style="--caster-width: ${casterWidth}px"
-           >
-        `;
+    const newCasterIds = Object.keys(newValue);
+    const oldCasterIds = oldValue == null ? null : Object.keys(oldValue);
+    const shouldRecreateCasterElements =
+        oldCasterIds == null
+        || newCasterIds.length !== oldCasterIds.length
+        || newCasterIds.some((elem, i) => oldCasterIds[i] !== elem);
 
-        if (!isBlank(elem.videoUrl)) {
+    if (shouldRecreateCasterElements) {
+        const casterWidth = getCasterWidth(values.length);
+        castersLayout.innerHTML = values.reduce((result, elem, i) => {
             result += `
-               <div class="video-loader-wrapper">
-                   <iframe
-                       allow="autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;midi;geolocation;"
-                       src="${elem.videoUrl}"
-                       width="1280"
-                       height="720"
-                   ></iframe>
+                <div
+                   class="caster-wrapper"
+                   style="--caster-width: ${casterWidth}px"
+                   data-caster-id="${newCasterIds[i]}"
+               >
+                   <div class="caster-visual-wrapper">
+                       ${getCasterVisual(elem)}
+                   </div>
+                   <div class="caster-nametag">
+                       <fitted-text max-width="${casterWidth - 50}" text="${elem.name}" class="caster-name" align="right"></fitted-text>
+                       <fitted-text max-width="${casterWidth - 50}" text="${elem.twitter}" class="caster-twitter" align="right"></fitted-text>
+                   </div>
                </div>
             `;
-        } else if (!isBlank(elem.imageUrl)) {
-            result += `
-                <img 
-                    class="caster-image"
-                    src="${elem.imageUrl}"
-                >                    
-            `;
-        } else {
-            result += `
-                <img 
-                    class="caster-image-placeholder"
-                    src="assets/sac-logo-white.png"
-                >                    
-            `;
-        }
 
-        result += `
-                <div class="caster-nametag">
-                    <fitted-text max-width="${casterWidth - 50}" text="${elem.name}" class="caster-name" align="right"></fitted-text>
-                    <fitted-text max-width="${casterWidth - 50}" text="${elem.twitter}" class="caster-twitter" align="right"></fitted-text>
-                </div>
-            </div>
-        `
+            return result;
+        }, '');
+    } else {
+        newCasterIds.forEach((casterId) => {
+            const casterElem = document.querySelector(`[data-caster-id="${casterId}"]`);
+            const caster = newValue[casterId];
+            const oldCaster = oldValue[casterId];
+            (casterElem.querySelector('.caster-name') as FittedText).text = caster.name;
+            (casterElem.querySelector('.caster-twitter') as FittedText).text = caster.twitter;
 
-        return result;
-    }, '');
+            if (caster.videoUrl !== oldCaster.videoUrl || (isBlank(caster.videoUrl) && caster.imageUrl !== oldCaster.imageUrl)) {
+                casterElem.querySelector('.caster-visual-wrapper').innerHTML = getCasterVisual(caster);
+            }
+        });
+    }
 });
 
 const casterInfoLoopTl = gsap.timeline({ repeat: -1 });
@@ -94,3 +90,33 @@ function getCasterWidth(casterCount: number): number {
             return 625;
     }
 }
+
+function getCasterVisual(caster: Caster): string {
+    if (!isBlank(caster.videoUrl)) {
+        return `
+           <div class="video-loader-wrapper">
+               <iframe
+                   allow="autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;midi;geolocation;"
+                   src="${caster.videoUrl}"
+                   width="1280"
+                   height="720"
+               ></iframe>
+           </div>
+        `;
+    } else if (!isBlank(caster.imageUrl)) {
+        return `
+            <img 
+                class="caster-image"
+                src="${caster.imageUrl}"
+            >                    
+        `;
+    } else {
+        return `
+            <img 
+                class="caster-image-placeholder"
+                src="assets/sac-logo-white.png"
+            >                    
+        `;
+    }
+
+}
diff --git a/src/graphics/break/styles/casters.scss b/src/graphics/break/styles/casters.scss
@@ -23,6 +23,10 @@
         position: relative;
     }
 
+    .caster-visual-wrapper {
+        display: contents;
+    }
+
     .caster-nametag {
         display: flex;
         flex-direction: column;