Fix streamer overlay streaming

Tripperful · Sep 16, 2024 · 3fbd4f7 · 3fbd4f7
1 parent becc9ed
commit 3fbd4f7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/packages/client/src/components/StreamerOverlay/PlayerOverlayItem.tsx b/packages/client/src/components/StreamerOverlay/PlayerOverlayItem.tsx
@@ -8,6 +8,8 @@ import FlashlightIcon from '~icons/flashlight.svg';
 import { useGlobalStyles } from '~styles/global';
 import { theme } from '~styles/theme';
 
+const vLerp = 0.5; // seconds
+
 const useStyles = createUseStyles({
   root: {
     display: 'flex',
@@ -25,7 +27,7 @@ const useStyles = createUseStyles({
         transition: 'opacity 0.2s ease 0s',
         overflow: 'visible',
         '&-path': {
-          transition: 'stroke-dashoffset 0.2s ease 0s',
+          transition: `stroke-dashoffset ${vLerp}s ease 0s`,
         },
       },
     },
@@ -122,7 +124,7 @@ const useStyles = createUseStyles({
   sprintValue: {
     width: '100%',
     backgroundColor: theme.fgInfo,
-    transition: 'height 0.2s ease 0s',
+    transition: `height ${vLerp}s ease 0s`,
   },
   flashlightIcon: {
     color: theme.fgInfo,

diff --git a/packages/client/src/components/StreamerOverlay/useDelayedStreamFrame.ts b/packages/client/src/components/StreamerOverlay/useDelayedStreamFrame.ts
@@ -2,7 +2,6 @@ import { StreamFrame } from '@motd-menu/common';
 import { useEffect, useState } from 'react';
 
 const streamQueue: StreamFrame[] = [];
-let now = Date.now();
 
 export const useDelayedStreamFrame = (sessionId: string, delay: number) => {
   const [streamFrame, setStreamFrame] = useState<StreamFrame>();
@@ -14,11 +13,7 @@ export const useDelayedStreamFrame = (sessionId: string, delay: number) => {
     eventSource.onmessage = (event) => {
       const frame = JSON.parse(event.data) as StreamFrame;
 
-      if (frame.timestamp > now - delay) {
-        streamQueue.push(frame);
-
-        now = frame.timestamp;
-      }
+      streamQueue.push(frame);
     };
 
     return () => {
@@ -29,8 +24,14 @@ export const useDelayedStreamFrame = (sessionId: string, delay: number) => {
   useEffect(() => {
     const interval = setInterval(() => {
       let nextFrame: StreamFrame;
-
-      while (streamQueue[0]?.timestamp <= now - delay) {
+      let firstFrame: StreamFrame;
+      let lastFrame: StreamFrame;
+
+      while (
+        (firstFrame = streamQueue[0]) &&
+        (lastFrame = streamQueue[streamQueue.length - 1]) &&
+        (lastFrame?.timestamp ?? 0) - (firstFrame?.timestamp ?? 0) > delay
+      ) {
         nextFrame = streamQueue.shift();
       }