From 1a2890838ffb0c18732243588aebaae1c798604b Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 21 Sep 2026 20:37:01 +1000
Subject: [PATCH] fix: keep cloud page effects and keyboard handlers current

---
 .../worker/web/src/components/LibraryPage.tsx    |  8 ++++----
 .../worker/web/src/components/ShareFeedback.tsx  |  2 +-
 .../worker/web/src/components/SharePage.tsx      |  6 +++---
 .../worker/web/src/components/SharePlayer.tsx    | 16 ++++++++--------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/services/recordly-share/worker/web/src/components/LibraryPage.tsx b/services/recordly-share/worker/web/src/components/LibraryPage.tsx
index ca0bc715..0c15aa84 100644
--- a/services/recordly-share/worker/web/src/components/LibraryPage.tsx
+++ b/services/recordly-share/worker/web/src/components/LibraryPage.tsx
@@ -5,7 +5,7 @@ import {
   LockKeyIcon,
   TrashIcon,
 } from '@phosphor-icons/react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   fetchVideos,
   renewVideo,
@@ -43,7 +43,7 @@ export default function LibraryPage() {
   const [error, setError] = useState('');
   const [pending, setPending] = useState<string | null>(null);
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
-  async function load() {
+  const load = useCallback(async () => {
     setLoading(true);
     setError('');
     try {
@@ -53,10 +53,10 @@ export default function LibraryPage() {
     } finally {
       setLoading(false);
     }
-  }
+  }, []);
   useEffect(() => {
     void load();
-  }, []);
+  }, [load]);
   async function renew(code: string) {
     setPending(code);
     try {
diff --git a/services/recordly-share/worker/web/src/components/ShareFeedback.tsx b/services/recordly-share/worker/web/src/components/ShareFeedback.tsx
index e3a96307..6c7d100c 100644
--- a/services/recordly-share/worker/web/src/components/ShareFeedback.tsx
+++ b/services/recordly-share/worker/web/src/components/ShareFeedback.tsx
@@ -90,7 +90,7 @@ export default function ShareFeedback({
     return () => {
       cancelled = true;
     };
-  }, [data.shareCode]);
+  }, [data.shareCode, setComments]);
 
   async function loadMore() {
     setMoreLoading(true);
diff --git a/services/recordly-share/worker/web/src/components/SharePage.tsx b/services/recordly-share/worker/web/src/components/SharePage.tsx
index 88b95483..10d1a438 100644
--- a/services/recordly-share/worker/web/src/components/SharePage.tsx
+++ b/services/recordly-share/worker/web/src/components/SharePage.tsx
@@ -187,7 +187,7 @@ export default function SharePage() {
   const [unlocking, setUnlocking] = useState(false);
   const [error, setError] = useState('');
 
-  async function load() {
+  const load = useCallback(async () => {
     setView('loading');
     try {
       const code = location.pathname.split('/').filter(Boolean).pop() || '';
@@ -207,10 +207,10 @@ export default function SharePage() {
     } catch {
       setView('error');
     }
-  }
+  }, []);
   useEffect(() => {
     void load();
-  }, []);
+  }, [load]);
 
   async function unlock() {
     if (unlocking) return;
diff --git a/services/recordly-share/worker/web/src/components/SharePlayer.tsx b/services/recordly-share/worker/web/src/components/SharePlayer.tsx
index 61eef5de..3f112249 100644
--- a/services/recordly-share/worker/web/src/components/SharePlayer.tsx
+++ b/services/recordly-share/worker/web/src/components/SharePlayer.tsx
@@ -25,7 +25,7 @@ import {
   RewindIcon,
   ChatCircleIcon,
 } from '@phosphor-icons/react';
-import { useEffect, useRef, useState, type RefObject } from 'react';
+import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
 import type { Comment, Reaction, ShareData } from '../scripts/api';
 import { formatTimestamp } from '../scripts/api';
 import { clusterTimeline, type TimelineItem } from '../scripts/shareModel';
@@ -70,7 +70,7 @@ export default function SharePlayer({
   const cta =
     data.video.cta_url && /^https?:\/\//i.test(data.video.cta_url) ? data.video.cta_url : null;
 
-  async function togglePlay() {
+  const togglePlay = useCallback(async () => {
     const video = videoRef.current;
     if (!video) return;
     if (!video.paused) video.pause();
@@ -80,8 +80,8 @@ export default function SharePlayer({
       } catch {
         toast.danger('Playback could not start. Try again.');
       }
-  }
-  function toggleMute() {
+  }, [videoRef]);
+  const toggleMute = useCallback(() => {
     const video = videoRef.current;
     if (!video) return;
     if (video.muted || video.volume === 0) {
@@ -91,15 +91,15 @@ export default function SharePlayer({
       savedVolume.current = video.volume;
       video.muted = true;
     }
-  }
-  async function fullscreen() {
+  }, [videoRef]);
+  const fullscreen = useCallback(async () => {
     try {
       if (document.fullscreenElement) await document.exitFullscreen();
       else await shell.current?.requestFullscreen();
     } catch {
       toast.danger('Fullscreen is unavailable in this browser.');
     }
-  }
+  }, []);
   async function pictureInPicture() {
     try {
       if (document.pictureInPictureElement) await document.exitPictureInPicture();
@@ -159,7 +159,7 @@ export default function SharePlayer({
     }
     document.addEventListener('keydown', keyboard);
     return () => document.removeEventListener('keydown', keyboard);
-  }, [seek]);
+  }, [seek, videoRef, togglePlay, toggleMute, fullscreen]);
 
   return (
     <Card ref={shell} className="video-shell">