From 781dd8d2fce6b2ecc50fded3f2ddb5692f05b957 Mon Sep 17 00:00:00 2001
From: MerlinScheurer <merlin.scheurer@Yahoo.de>
Date: Mon, 27 Jan 2025 19:04:49 +0100
Subject: [PATCH] Fix embeddable player focus by using useRef

---
 frontend/src/components/EmbeddableVideoPlayer.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

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