tubearchivist/tubearchivist
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist.git synced 2025-03-14 09:50:12 +00:00
Code Issues Projects Releases Wiki Activity

Fix embeddable player focus by using useRef

Browse Source
This commit is contained in:
MerlinScheurer 2025-01-27 19:04:49 +01:00
parent 78528c4260
commit 781dd8d2fc
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/EmbeddableVideoPlayer.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { VideoResponseType } from '../pages/Video'; import { VideoResponseType } from '../pages/Video';
import VideoPlayer from './VideoPlayer'; import VideoPlayer from './VideoPlayer';
import loadVideoById from '../api/loader/loadVideoById'; import loadVideoById from '../api/loader/loadVideoById';
@ -24,6 +24,8 @@ type EmbeddableVideoPlayerProps = {
}; };
const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => { const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
const inlinePlayerRef = useRef<HTMLDivElement>(null);
const [, setSearchParams] = useSearchParams(); const [, setSearchParams] = useSearchParams();
const [refresh, setRefresh] = useState(false); const [refresh, setRefresh] = useState(false);
@ -63,8 +65,7 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
setVideoResponse(videoResponse); setVideoResponse(videoResponse);
const inlinePlayer = document.getElementById('inline-player'); inlinePlayerRef.current?.scrollIntoView();
inlinePlayer?.scrollIntoView();
setRefresh(false); setRefresh(false);
setLoading(false); setLoading(false);
@ -91,7 +92,7 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
return ( return (
<> <>
<div id="inline-player" className="player-wrapper"> <div ref={inlinePlayerRef} className="player-wrapper">
<div className="video-player"> <div className="video-player">
{!loading && ( {!loading && (
<VideoPlayer <VideoPlayer