feat: Add blink animation to non-Outfront DUP Screens (#2978)

Author: robbie-sundstrom

assets/css/dup.scss

@@ -28,6 +28,7 @@
 @use "dup/rotation/normal" as *;
 @use "dup/rotation/takeover";
 @use "dup/screen/normal" as *;
+@use "dup/screen_container";
 @use "dup/simulation" as *;
 @use "dup/viewport";
 

assets/css/dup/screen_container.scss

@@ -0,0 +1,13 @@
+.screen-container {
+  position: relative;
+  margin: 0 auto;
+}
+
+.screen-container-blink {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+}

assets/src/apps/dup.tsx

@@ -31,6 +31,8 @@ import PartialAlert from "Components/dup/partial_alert";
 import TakeoverAlert from "Components/dup/takeover_alert";
 import SimulationScreenPage from "Components/simulation_screen_page";
 import {
+  BlinkConfig,
+  BlinkConfigContext,
   ResponseMapper,
   ResponseMapperContext,
 } from "Components/screen_container";
@@ -118,6 +120,11 @@ const responseMapper: ResponseMapper = (apiResponse) => {
   }
 };
 
+const blinkConfig: BlinkConfig = {
+  refreshesPerBlink: 15,
+  durationMs: 34,
+};
+
 const App = (): JSX.Element => {
   const playerName = usePlayerName();
 
@@ -130,27 +137,29 @@ const App = (): JSX.Element => {
               <ScreenPage id={`DUP-${playerName.trim()}`} />
             </Viewport>
           ) : (
-            <Router basename="v2/screen">
-              <Routes>
-                <Route path="dup_v2" element={<MultiScreenPage />} />
+            <BlinkConfigContext.Provider value={blinkConfig}>
+              <Router basename="v2/screen">
+                <Routes>
+                  <Route path="dup_v2" element={<MultiScreenPage />} />
 
-                <Route
-                  path="pending?/:id"
-                  element={
-                    <Viewport>
-                      <ScreenPage />
-                    </Viewport>
-                  }
-                />
+                  <Route
+                    path="pending?/:id"
+                    element={
+                      <Viewport>
+                        <ScreenPage />
+                      </Viewport>
+                    }
+                  />
 
-                <Route
-                  path="pending?/:id/simulation"
-                  element={
-                    <SimulationScreenPage opts={{ alternateView: true }} />
-                  }
-                />
-              </Routes>
-            </Router>
+                  <Route
+                    path="pending?/:id/simulation"
+                    element={
+                      <SimulationScreenPage opts={{ alternateView: true }} />
+                    }
+                  />
+                </Routes>
+              </Router>
+            </BlinkConfigContext.Provider>
           )}
         </ResponseMapperContext.Provider>
       </MappingContext.Provider>