fix: support native video fullscreen

src/controls/bar/ControlsBar.jsx

@@ -15,6 +15,7 @@ import ChannelInfo from "../info/ChannelInfo.jsx";
 export default function ControlsBar({
   core,
   videoContainer,
+  videoElement,
   shouldShow,
   barRef,
   isPlaying,
@@ -25,8 +26,10 @@ export default function ControlsBar({
 }) {
   const { volume, isMuted, handleVolumeChange, handleMuteToggle } =
     useVolumeControl(core);
-  const { isFullscreen, handleFullscreenToggle } =
-    useFullscreenControl(videoContainer);
+  const { isFullscreen, handleFullscreenToggle } = useFullscreenControl(
+    videoContainer,
+    videoElement,
+  );
   const { username, viewerCount, uptime } = useChannelInfo();
 
   useKeyboardControls({

src/controls/container/Container.jsx

@@ -4,7 +4,7 @@ import { useControlsVisibility } from "./useControlsVisibility.js";
 import { usePlaybackControl } from "../play/usePlaybackControl.js";
 import { usePreferences } from "../usePreferences.js";
 
-export default function Container({ core, videoContainer }) {
+export default function Container({ core, videoContainer, videoElement }) {
   const containerRef = useRef(null);
   const barRef = useRef(null);
   const { shouldShow, showControls } = useControlsVisibility(
@@ -33,6 +33,7 @@ export default function Container({ core, videoContainer }) {
       <ControlsBar
         core={core}
         videoContainer={videoContainer}
+        videoElement={videoElement}
         shouldShow={shouldShow}
         barRef={barRef}
         isPlaying={isPlaying}

src/controls/fullscreen/useFullscreenControl.js

@@ -1,28 +1,246 @@
 import { useState, useCallback, useEffect } from "react";
 
-export function useFullscreenControl(container) {
+const fullscreenChangeEvents = [
+  "fullscreenchange",
+  "webkitfullscreenchange",
+  "mozfullscreenchange",
+  "MSFullscreenChange",
+];
+
+const nativeVideoFullscreenEvents = [
+  "webkitbeginfullscreen",
+  "webkitendfullscreen",
+  "webkitpresentationmodechanged",
+];
+
+function getFullscreenElement() {
+  return (
+    document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.mozFullScreenElement ||
+    document.msFullscreenElement
+  );
+}
+
+function isNativeVideoFullscreen(videoElement) {
+  return !!(
+    videoElement &&
+    (videoElement.webkitDisplayingFullscreen ||
+      videoElement.webkitPresentationMode === "fullscreen")
+  );
+}
+
+function supportsNativeVideoFullscreen(videoElement) {
+  return (
+    typeof videoElement.webkitEnterFullscreen === "function" &&
+    videoElement.webkitSupportsFullscreen !== false
+  );
+}
+
+function supportsNativeVideoPresentationMode(
+  videoElement,
+  mode,
+  failedAttempts,
+) {
+  if (typeof videoElement.webkitSetPresentationMode !== "function") {
+    return false;
+  }
+
+  if (typeof videoElement.webkitSupportsPresentationMode !== "function") {
+    return true;
+  }
+
+  try {
+    return videoElement.webkitSupportsPresentationMode.call(videoElement, mode);
+  } catch (err) {
+    failedAttempts.push({
+      method: `webkitSupportsPresentationMode("${mode}")`,
+      err,
+    });
+    return false;
+  }
+}
+
+function tryNativeVideoFullscreen(method, enterFullscreen) {
+  try {
+    enterFullscreen();
+    return null;
+  } catch (err) {
+    return { method, err };
+  }
+}
+
+function enterNativeVideoFullscreen(videoElement) {
+  if (!videoElement) {
+    return false;
+  }
+
+  const failedAttempts = [];
+
+  if (supportsNativeVideoFullscreen(videoElement)) {
+    const failure = tryNativeVideoFullscreen("webkitEnterFullscreen", () => {
+      videoElement.webkitEnterFullscreen();
+    });
+
+    if (!failure) {
+      return true;
+    }
+
+    failedAttempts.push(failure);
+  }
+
+  if (
+    supportsNativeVideoPresentationMode(
+      videoElement,
+      "fullscreen",
+      failedAttempts,
+    )
+  ) {
+    const failure = tryNativeVideoFullscreen(
+      'webkitSetPresentationMode("fullscreen")',
+      () => {
+        videoElement.webkitSetPresentationMode("fullscreen");
+      },
+    );
+
+    if (!failure) {
+      return true;
+    }
+
+    failedAttempts.push(failure);
+  }
+
+  if (failedAttempts.length) {
+    console.warn("[Kickstiny] Native video fullscreen failed", failedAttempts);
+  }
+
+  return false;
+}
+
+function exitNativeVideoFullscreen(videoElement) {
+  try {
+    if (typeof videoElement.webkitExitFullscreen === "function") {
+      videoElement.webkitExitFullscreen();
+      return;
+    }
+
+    if (typeof videoElement.webkitSetPresentationMode === "function") {
+      videoElement.webkitSetPresentationMode("inline");
+    }
+  } catch (err) {
+    console.warn("[Kickstiny] Native video fullscreen exit failed", err);
+  }
+}
+
+function getElementFullscreenRequest(element) {
+  if (!element) {
+    return null;
+  }
+
+  return (
+    (typeof element.requestFullscreen === "function" &&
+      element.requestFullscreen) ||
+    (typeof element.webkitRequestFullscreen === "function" &&
+      element.webkitRequestFullscreen) ||
+    (typeof element.mozRequestFullScreen === "function" &&
+      element.mozRequestFullScreen) ||
+    (typeof element.msRequestFullscreen === "function" &&
+      element.msRequestFullscreen) ||
+    null
+  );
+}
+
+export function useFullscreenControl(container, videoElement) {
   const [isFullscreen, setIsFullscreen] = useState(false);
 
+  const updateFullscreenState = useCallback(() => {
+    const fullscreenElement = getFullscreenElement();
+    setIsFullscreen(
+      fullscreenElement === container ||
+        fullscreenElement === videoElement ||
+        isNativeVideoFullscreen(videoElement),
+    );
+  }, [container, videoElement]);
+
+  const enterNativeVideoFullscreenOrUpdateState = useCallback(() => {
+    if (!enterNativeVideoFullscreen(videoElement)) {
+      updateFullscreenState();
+    }
+  }, [updateFullscreenState, videoElement]);
+
   const handleFullscreenToggle = useCallback(() => {
-    if (!document.fullscreenElement) {
-      container.requestFullscreen();
-    } else {
-      document.exitFullscreen();
+    if (getFullscreenElement()) {
+      const exitFullscreen =
+        document.exitFullscreen ||
+        document.webkitExitFullscreen ||
+        document.mozCancelFullScreen ||
+        document.msExitFullscreen;
+
+      if (exitFullscreen) {
+        try {
+          const result = exitFullscreen.call(document);
+          result?.catch?.((err) => {
+            console.warn("[Kickstiny] Fullscreen exit failed", err);
+            updateFullscreenState();
+          });
+        } catch (err) {
+          console.warn("[Kickstiny] Fullscreen exit failed", err);
+          updateFullscreenState();
+        }
+      }
+
+      return;
+    }
+
+    if (isNativeVideoFullscreen(videoElement)) {
+      exitNativeVideoFullscreen(videoElement);
+      return;
     }
-  }, [container]);
+
+    const requestFullscreen = getElementFullscreenRequest(container);
+
+    if (!requestFullscreen) {
+      enterNativeVideoFullscreenOrUpdateState();
+      return;
+    }
+
+    try {
+      const result = requestFullscreen.call(container);
+      result?.catch?.((err) => {
+        console.warn("[Kickstiny] Element fullscreen failed", err);
+        enterNativeVideoFullscreenOrUpdateState();
+      });
+    } catch (err) {
+      console.warn("[Kickstiny] Element fullscreen failed", err);
+      enterNativeVideoFullscreenOrUpdateState();
+    }
+  }, [
+    container,
+    enterNativeVideoFullscreenOrUpdateState,
+    updateFullscreenState,
+    videoElement,
+  ]);
 
   useEffect(() => {
-    const updateFullscreenState = () => {
-      setIsFullscreen(document.fullscreenElement === container);
-    };
+    const handleFullscreenChange = () => updateFullscreenState();
 
-    container.addEventListener("fullscreenchange", updateFullscreenState);
+    fullscreenChangeEvents.forEach((eventName) => {
+      document.addEventListener(eventName, handleFullscreenChange);
+    });
+    nativeVideoFullscreenEvents.forEach((eventName) => {
+      videoElement?.addEventListener(eventName, handleFullscreenChange);
+    });
     updateFullscreenState();
 
     return () => {
-      container.removeEventListener("fullscreenchange", updateFullscreenState);
+      fullscreenChangeEvents.forEach((eventName) => {
+        document.removeEventListener(eventName, handleFullscreenChange);
+      });
+      nativeVideoFullscreenEvents.forEach((eventName) => {
+        videoElement?.removeEventListener(eventName, handleFullscreenChange);
+      });
     };
-  }, []);
+  }, [updateFullscreenState, videoElement]);
 
   return {
     isFullscreen,

src/main.js

@@ -39,7 +39,7 @@ if (window.__kickQualityExtensionInjected) {
     });
 
     injectStyles();
-    renderControls(core, video.parentElement);
+    renderControls(core, video.parentElement, video);
   }
 
   function injectStyles() {
@@ -49,7 +49,7 @@ if (window.__kickQualityExtensionInjected) {
     console.debug("[Kickstiny] Injected styles");
   }
 
-  function renderControls(core, videoContainer) {
+  function renderControls(core, videoContainer, videoElement) {
     const root = document.createElement("div");
     root.id = "kickstiny";
     videoContainer.appendChild(root);
@@ -58,6 +58,7 @@ if (window.__kickQualityExtensionInjected) {
     const reactComponent = React.createElement(Container, {
       core,
       videoContainer,
+      videoElement,
     });
     reactRoot.render(reactComponent);
     console.debug("[Kickstiny] Rendered custom controls");