fix: implemented safari webkit support for fullscreen and PiP

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "nodecast-tv",
-    "version": "2.1.2",
+    "version": "2.1.3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "nodecast-tv",
-    "version": "2.1.2",
+    "version": "2.1.3",
     "description": "Modern IPTV Player",
     "license": "GPL-3.0-only",
     "main": "server/index.js",

public/js/components/VideoPlayer.js

@@ -349,30 +349,47 @@ class VideoPlayer {
     }
 
     /**
-     * Toggle fullscreen mode
+     * Toggle fullscreen mode (cross-browser including Safari)
      */
     toggleFullscreen() {
-        if (document.fullscreenElement) {
+        const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
+
+        if (isFullscreen) {
+            if (document.exitFullscreen) {
                 document.exitFullscreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            }
         } else {
-            this.container.requestFullscreen().catch(err => {
+            const element = this.container;
-                console.error('Fullscreen error:', err);
+            if (element.requestFullscreen) {
-            });
+                element.requestFullscreen().catch(err => console.error('Fullscreen error:', err));
+            } else if (element.webkitRequestFullscreen) {
+                element.webkitRequestFullscreen();
+            } else if (this.video.webkitEnterFullscreen) {
+                // iOS Safari: use native video fullscreen
+                this.video.webkitEnterFullscreen();
+            }
         }
     }
 
     /**
-     * Toggle Picture-in-Picture mode
+     * Toggle Picture-in-Picture mode (cross-browser including Safari)
      */
     async togglePictureInPicture() {
         try {
+            // Standard PiP API (Chrome, Edge, Firefox)
             if (document.pictureInPictureElement) {
                 await document.exitPictureInPicture();
             } else if (document.pictureInPictureEnabled && this.video.readyState >= 2) {
                 await this.video.requestPictureInPicture();
             }
+            // Safari fallback using webkitPresentationMode
+            else if (typeof this.video.webkitSetPresentationMode === 'function') {
+                const mode = this.video.webkitPresentationMode;
+                this.video.webkitSetPresentationMode(mode === 'picture-in-picture' ? 'inline' : 'picture-in-picture');
+            }
         } catch (err) {
-            // Silently fail - Firefox users can use native PiP button
             if (err.name !== 'NotAllowedError') {
                 console.error('Picture-in-Picture error:', err);
             }

public/js/pages/WatchPage.js

@@ -634,22 +634,40 @@ class WatchPage {
 
     toggleFullscreen() {
         const container = document.querySelector('.watch-video-section');
-        if (!document.fullscreenElement) {
+        const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
-            container?.requestFullscreen?.() || container?.webkitRequestFullscreen?.();
+
+        if (isFullscreen) {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            }
         } else {
-            document.exitFullscreen?.() || document.webkitExitFullscreen?.();
+            if (container?.requestFullscreen) {
+                container.requestFullscreen();
+            } else if (container?.webkitRequestFullscreen) {
+                container.webkitRequestFullscreen();
+            } else if (this.video?.webkitEnterFullscreen) {
+                // iOS Safari: use native video fullscreen
+                this.video.webkitEnterFullscreen();
+            }
         }
     }
 
     async togglePictureInPicture() {
         try {
+            // Standard PiP API (Chrome, Edge, Firefox)
             if (document.pictureInPictureElement) {
                 await document.exitPictureInPicture();
             } else if (document.pictureInPictureEnabled && this.video.readyState >= 2) {
                 await this.video.requestPictureInPicture();
             }
+            // Safari fallback using webkitPresentationMode
+            else if (typeof this.video.webkitSetPresentationMode === 'function') {
+                const mode = this.video.webkitPresentationMode;
+                this.video.webkitSetPresentationMode(mode === 'picture-in-picture' ? 'inline' : 'picture-in-picture');
+            }
         } catch (err) {
-            // Silently fail - Firefox users can use native PiP button
             if (err.name !== 'NotAllowedError') {
                 console.error('Picture-in-Picture error:', err);
             }