From b7a2cc1f0f4b332e996190b89330a4ca49c19b07 Mon Sep 17 00:00:00 2001
From: JantsoP <jantso.porali@gmail.com>
Date: Fri, 5 Sep 2025 01:44:59 +0200
Subject: [PATCH] Add possbile fix for iOS streaming

Since chromecast is not a valid prio tech on iOS, streaming and record viewing fails. This should introduce a bypass where it sniffs the user-agent and redirects the playlist correctly.
---
 .../Components/Livestream/VideoJsPlayer.vue   | 32 +++++++++++++++++-
 resources/js/Pages/RecordingPlayer.vue        | 33 ++++++++++++++++++-
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/Livestream/VideoJsPlayer.vue b/resources/js/Components/Livestream/VideoJsPlayer.vue
index 1707940..9e8103a 100644
--- a/resources/js/Components/Livestream/VideoJsPlayer.vue
+++ b/resources/js/Components/Livestream/VideoJsPlayer.vue
@@ -14,6 +14,17 @@ import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
 import 'videojs-hotkeys';
 
+
+/* --- ADD: Native HLS detection for Apple browsers (minimal, additive) --- */
+const __isIOSLike__ =
+  /iP(hone|od|ad)/.test(navigator.platform) ||
+  /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+  (/Macintosh/.test(navigator.userAgent) && 'ontouchend' in document);
+
+const __isSafari__ = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+const __useNativeHls__ = __isIOSLike__ || __isSafari__;
+/* --- END ADD --- */
+
 // Make videojs available globally for plugins that require it
 window.videojs = videojs;
 
@@ -251,7 +262,26 @@ const initializePlayer = async () => {
     }
 
     // Create player instance
-    player = videojs(videoPlayer.value, options);
+    
+// --- ADD: Prioritize native HLS on iOS/Safari without changing original options ---
+try {
+  if (typeof __useNativeHls__ !== 'undefined' && __useNativeHls__) {
+    if (typeof options !== 'undefined' && options) {
+      options.techOrder = ['html5'];
+      if (options.html5 && options.html5.vhs) {
+        options.html5.vhs.overrideNative = false;
+      } else {
+        options.html5 = options.html5 || {};
+        options.html5.vhs = options.html5.vhs || {};
+        options.html5.vhs.overrideNative = false;
+      }
+    }
+  }
+} catch (e) {
+  // no-op
+}
+// --- END ADD ---
+player = videojs(videoPlayer.value, options);
 
     // No need for complex autoplay handling - Video.js handles it with 'muted' option
 
diff --git a/resources/js/Pages/RecordingPlayer.vue b/resources/js/Pages/RecordingPlayer.vue
index 2890892..488cb46 100644
--- a/resources/js/Pages/RecordingPlayer.vue
+++ b/resources/js/Pages/RecordingPlayer.vue
@@ -89,6 +89,18 @@ import 'video.js/dist/video-js.css';
 import 'videojs-contrib-quality-levels';
 import '@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.css';
 
+
+/* --- ADD: Native HLS detection for Apple browsers (minimal, additive) --- */
+const __isIOSLike__ =
+  /iP(hone|od|ad)/.test(navigator.platform) ||
+  /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+  (/Macintosh/.test(navigator.userAgent) && 'ontouchend' in document);
+
+const __isSafari__ = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+const __useNativeHls__ = __isIOSLike__ || __isSafari__;
+/* --- END ADD --- */
+
+
 // Make videojs available globally for plugins
 window.videojs = videojs;
 
@@ -427,7 +439,26 @@ const initializePlayer = async () => {
     };
     
     // Initialize Video.js player
-    player = videojs(videoPlayer.value, options, function() {
+    
+// --- ADD: Prefer native HLS on iOS/Safari without changing original options ---
+try {
+  if (typeof __useNativeHls__ !== 'undefined' && __useNativeHls__) {
+    if (typeof options !== 'undefined' && options) {
+      options.techOrder = ['html5'];
+      if (options.html5 && options.html5.vhs) {
+        options.html5.vhs.overrideNative = false;
+      } else {
+        options.html5 = options.html5 || {};
+        options.html5.vhs = options.html5.vhs || {};
+        options.html5.vhs.overrideNative = false;
+      }
+    }
+  }
+} catch (e) {
+  // no-op
+}
+// --- END ADD ---
+player = videojs(videoPlayer.value, options, function() {
         // Player is ready
         console.log('Video.js player ready');