fixed

src/components/playerComponent/playerComponent.tsx

@@ -35,6 +35,7 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
       <iframe
         title="stream"
         src={url}
+        allowFullScreen
         className={"player playerOn"}
         security={""}
       ></iframe>

src/components/playerComponent/playerStyles.css

@@ -1,4 +1,5 @@
 .playerOn {
+   user-select: none;
    pointer-events: all;
 }
 

src/components/ui/FullscreenButton/FullscreenButton.tsx

@@ -1,10 +1,16 @@
 import { useState, useEffect } from "react";
 import { Button } from "../button/button";
+
 import fullscreen from "../../../images/icons/fullscreen.svg";
 import fullscreenOff from "../../../images/icons/fullscreenOff.svg";
 
-export const FullscreenButton = ({}) => {
-  const [active, setActive] = useState(false);
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
+
+
+export const FullscreenButton = ({ }) => {
+  const handle = useFullScreenHandle();
+
+  const [active, setActive] = useState(Boolean(document.fullscreenElement));
   const [button, setButton] = useState({
     icon: fullscreen,
     inactive: "fullscreen-control-btn",
@@ -12,8 +18,18 @@ export const FullscreenButton = ({}) => {
     type: "fullscreen",
   });
 
+
   function handleClick() {
-    setActive((prev) => !prev);
+    setActive(Boolean(document.fullscreenElement))
+    if (!document.fullscreenElement) {
+      document.body.requestFullscreen()
+    } else {
+      document.exitFullscreen()
+
+    }
+  }
+
+  useEffect(() => {
     setButton({
       icon: active ? fullscreen : fullscreenOff,
       inactive: "fullscreen-control-btn",
@@ -21,19 +37,23 @@ export const FullscreenButton = ({}) => {
       type: "fullscreen",
     });
 
-    if (active) {
-      document.exitFullscreen();
-    } else {
-      document.body.requestFullscreen();
-    }
-  }
+  }, [active])
 
   useEffect(() => {
-    return () => {
-      document.exitFullscreen();
-    };
+    function onFullscreenChange() {
+      setActive(Boolean(document.fullscreenElement));
+
+
+    }
+
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+
+    return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
   }, []);
 
+
+
+
   return (
     <div className="toolbar-button-area">
       <Button button={button} active={active} onClick={handleClick}></Button>

src/components/ui/button/button.tsx

@@ -20,7 +20,9 @@ export const Button: React.FC<any> = ({ button, onClick, active }) => {
   return (
     <div>
       <motion.button
+        tabIndex={-1}
         onClick={handleClick}
+        onFocus={(e) => e.target.blur()}
         onHoverStart={() => setHover(true)}
         onHoverEnd={() => setHover(false)}
         className={