Skip to content

Commit d8eceba

Browse files
giolaqgiolaq
committed
refactor: improve Vega PlayerScreen with consistent function organization
- Move callback definitions before useEffect to prevent TDZ errors - Extract seek, togglePausePlay, showControls, and navigateBack into reusable callbacks - Simplify remote control key handler with cleaner function calls - Remove duplicate function definitions - Improve code maintainability and consistency with standard PlayerScreen
1 parent 20ec0d3 commit d8eceba

1 file changed

Lines changed: 83 additions & 126 deletions

File tree

‎packages/shared-ui/src/screens/PlayerScreen.vega.tsx‎

Lines changed: 83 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,81 @@ export default function PlayerScreen() {
7575
durationRef.current = duration;
7676
}, [duration]);
7777

78+
/**
79+
* Show controls with auto-hide
80+
*/
81+
const showControls = useCallback(() => {
82+
setControlsVisible(true);
83+
84+
if (hideControlsTimeoutRef.current) {
85+
clearTimeout(hideControlsTimeoutRef.current);
86+
}
87+
hideControlsTimeoutRef.current = setTimeout(() => {
88+
setControlsVisible(false);
89+
}, 5000);
90+
}, []);
91+
92+
/**
93+
* Seek to a specific time
94+
*/
95+
const seek = useCallback((time: number) => {
96+
if (videoHandlerRef.current && durationRef.current) {
97+
try {
98+
const clampedTime = Math.max(0, Math.min(time, durationRef.current));
99+
videoHandlerRef.current.seek(clampedTime);
100+
setCurrentTime(clampedTime);
101+
currentTimeRef.current = clampedTime;
102+
showControls();
103+
} catch (e) {
104+
console.warn('[PlayerScreen.kepler] Seek error:', e);
105+
}
106+
}
107+
}, [showControls]);
108+
109+
/**
110+
* Toggle play/pause
111+
*/
112+
const togglePausePlay = useCallback(() => {
113+
if (videoHandlerRef.current) {
114+
try {
115+
if (videoHandlerRef.current.isPaused()) {
116+
videoHandlerRef.current.play();
117+
setPaused(false);
118+
} else {
119+
videoHandlerRef.current.pause();
120+
setPaused(true);
121+
}
122+
showControls();
123+
} catch (e) {
124+
console.warn('[PlayerScreen.kepler] Play/pause error:', e);
125+
}
126+
}
127+
}, [showControls]);
128+
129+
/**
130+
* Navigate back with cleanup
131+
*/
132+
const navigateBack = useCallback(() => {
133+
console.log('[PlayerScreen.kepler] - Navigating back');
134+
135+
// Clear surface and caption handles
136+
if (surfaceHandleRef.current && videoRef.current) {
137+
videoRef.current.clearSurfaceHandle(surfaceHandleRef.current);
138+
}
139+
if (captionViewHandleRef.current && videoRef.current) {
140+
videoRef.current.clearCaptionViewHandle(captionViewHandleRef.current);
141+
}
142+
143+
// Destroy video elements
144+
videoHandlerRef.current?.destroyVideoElements();
145+
videoRef.current = null;
146+
147+
// Navigate back after short delay
148+
setTimeout(() => {
149+
navigation.goBack();
150+
}, 300);
151+
}, [navigation]);
152+
78153
/**
79154
* Initialize video handler and start playback
80155
*/
@@ -131,7 +206,7 @@ export default function PlayerScreen() {
131206
if (isVideoInitialized && duration > 0) {
132207
showControls();
133208
}
134-
}, [isVideoInitialized, duration]);
209+
}, [isVideoInitialized, duration, showControls]);
135210

136211
/**
137212
* Handle remote control key presses
@@ -142,70 +217,20 @@ export default function PlayerScreen() {
142217
switch (key) {
143218
case SupportedKeys.Right:
144219
case SupportedKeys.FastForward:
145-
// Seek forward 10 seconds
146-
if (videoHandlerRef.current && durationRef.current) {
147-
try {
148-
const newTime = Math.min(currentTimeRef.current + 10, durationRef.current);
149-
videoHandlerRef.current.seek(newTime);
150-
setCurrentTime(newTime);
151-
currentTimeRef.current = newTime;
152-
setControlsVisible(true);
153-
} catch (e) {
154-
console.warn('[PlayerScreen.kepler] Seek error:', e);
155-
}
156-
}
220+
seek(currentTimeRef.current + 10);
157221
break;
158222
case SupportedKeys.Left:
159223
case SupportedKeys.Rewind:
160-
// Seek backward 10 seconds
161-
if (videoHandlerRef.current) {
162-
try {
163-
const newTime = Math.max(currentTimeRef.current - 10, 0);
164-
videoHandlerRef.current.seek(newTime);
165-
setCurrentTime(newTime);
166-
currentTimeRef.current = newTime;
167-
setControlsVisible(true);
168-
} catch (e) {
169-
console.warn('[PlayerScreen.kepler] Seek error:', e);
170-
}
171-
}
224+
seek(currentTimeRef.current - 10);
172225
break;
173226
case SupportedKeys.Back:
174-
// Navigate back with cleanup
175-
try {
176-
if (surfaceHandleRef.current && videoRef.current) {
177-
videoRef.current.clearSurfaceHandle(surfaceHandleRef.current);
178-
}
179-
if (captionViewHandleRef.current && videoRef.current) {
180-
videoRef.current.clearCaptionViewHandle(captionViewHandleRef.current);
181-
}
182-
videoHandlerRef.current?.destroyVideoElements();
183-
videoRef.current = null;
184-
navigation.goBack();
185-
} catch (e) {
186-
console.warn('[PlayerScreen.kepler] Navigation error:', e);
187-
navigation.goBack();
188-
}
227+
navigateBack();
189228
break;
190229
case SupportedKeys.PlayPause:
191-
// Toggle pause/play
192-
if (videoHandlerRef.current) {
193-
try {
194-
if (videoHandlerRef.current.isPaused()) {
195-
videoHandlerRef.current.play();
196-
setPaused(false);
197-
} else {
198-
videoHandlerRef.current.pause();
199-
setPaused(true);
200-
}
201-
setControlsVisible(true);
202-
} catch (e) {
203-
console.warn('[PlayerScreen.kepler] Play/pause error:', e);
204-
}
205-
}
230+
togglePausePlay();
206231
break;
207232
default:
208-
setControlsVisible(true);
233+
showControls();
209234
break;
210235
}
211236
} catch (e) {
@@ -219,21 +244,7 @@ export default function PlayerScreen() {
219244
const backHandler = BackHandler.addEventListener(
220245
'hardwareBackPress',
221246
() => {
222-
try {
223-
// Navigate back with cleanup
224-
if (surfaceHandleRef.current && videoRef.current) {
225-
videoRef.current.clearSurfaceHandle(surfaceHandleRef.current);
226-
}
227-
if (captionViewHandleRef.current && videoRef.current) {
228-
videoRef.current.clearCaptionViewHandle(captionViewHandleRef.current);
229-
}
230-
videoHandlerRef.current?.destroyVideoElements();
231-
videoRef.current = null;
232-
navigation.goBack();
233-
} catch (e) {
234-
console.warn('[PlayerScreen.kepler] Back button error:', e);
235-
navigation.goBack();
236-
}
247+
navigateBack();
237248
return true;
238249
},
239250
);
@@ -242,7 +253,7 @@ export default function PlayerScreen() {
242253
RemoteControlManager.removeKeydownListener(listener);
243254
backHandler.remove();
244255
};
245-
}, [navigation]);
256+
}, [seek, togglePausePlay, showControls, navigateBack]);
246257

247258
/**
248259
* Handle surface view creation
@@ -300,60 +311,6 @@ export default function PlayerScreen() {
300311
captionViewHandleRef.current = null;
301312
}, []);
302313

303-
/**
304-
* Navigate back with cleanup
305-
*/
306-
const navigateBack = useCallback(() => {
307-
console.log('[PlayerScreen.kepler] - Navigating back');
308-
309-
// Clear surface and caption handles
310-
if (surfaceHandleRef.current && videoRef.current) {
311-
videoRef.current.clearSurfaceHandle(surfaceHandleRef.current);
312-
}
313-
if (captionViewHandleRef.current && videoRef.current) {
314-
videoRef.current.clearCaptionViewHandle(captionViewHandleRef.current);
315-
}
316-
317-
// Destroy video elements
318-
videoHandlerRef.current?.destroyVideoElements();
319-
videoRef.current = null;
320-
321-
// Navigate back after short delay
322-
setTimeout(() => {
323-
navigation.goBack();
324-
}, 300);
325-
}, [navigation]);
326-
327-
/**
328-
* Show controls with auto-hide
329-
*/
330-
const showControls = () => {
331-
setControlsVisible(true);
332-
333-
if (hideControlsTimeoutRef.current) {
334-
clearTimeout(hideControlsTimeoutRef.current);
335-
}
336-
hideControlsTimeoutRef.current = setTimeout(() => {
337-
setControlsVisible(false);
338-
}, 5000);
339-
};
340-
341-
/**
342-
* Toggle play/pause
343-
*/
344-
const togglePausePlay = () => {
345-
if (videoHandlerRef.current) {
346-
if (videoHandlerRef.current.isPaused()) {
347-
videoHandlerRef.current.play();
348-
setPaused(false);
349-
} else {
350-
videoHandlerRef.current.pause();
351-
setPaused(true);
352-
}
353-
showControls();
354-
}
355-
};
356-
357314
const styles = usePlayerStyles();
358315

359316
if (isVideoError) {

0 commit comments

Comments
 (0)