From 98de22b67e875be076f89be2a0bafa63399550f5 Mon Sep 17 00:00:00 2001
From: ByungHoon YOO <bhyoo99@gmail.com>
Date: Sun, 29 Dec 2024 00:59:40 +0900
Subject: [PATCH 1/3] feat(web): add HLS support for streaming video sources

---
 package.json      | 139 +++++++++++++++++++++++-----------------------
 src/Video.web.tsx |  23 ++++++++
 2 files changed, 93 insertions(+), 69 deletions(-)

diff --git a/package.json b/package.json
index 50384dbbd3..e595405272 100644
--- a/package.json
+++ b/package.json
@@ -1,71 +1,72 @@
 {
-    "name": "react-native-video",
-    "version": "6.8.2",
-    "description": "A <Video /> element for react-native",
-    "main": "lib/index",
-    "source": "src/index.ts",
-    "react-native": "src/index",
-    "license": "MIT",
-    "author": "Community Contributors",
-    "homepage": "https://docs.thewidlarzgroup.com/react-native-video/",
-    "repository": {
-        "type": "git",
-        "url": "git@github.com:TheWidlarzGroup/react-native-video.git"
-    },
-    "resolutions": {
-        "@types/react": "~18.0.0"
-    },
-    "devDependencies": {
-        "@expo/config-plugins": "^8.0.5",
-        "@jamesacarr/eslint-formatter-github-actions": "^0.2.0",
-        "@react-native/eslint-config": "^0.72.2",
-        "@release-it/conventional-changelog": "^7.0.2",
-        "@types/jest": "^28.1.2",
-        "@types/react": "~18.0.0",
-        "@types/react-native": "0.72.3",
-        "@typescript-eslint/eslint-plugin": "^6.7.4",
-        "eslint": "^8.19.0",
-        "eslint-plugin-jest": "^27.4.2",
-        "jest": "^29.7.0",
-        "prettier": "^2.4.1",
-        "react": "18.2.0",
-        "react-native": "0.73.2",
-        "react-native-windows": "^0.61.0-0",
-        "release-it": "^16.2.1",
-        "typescript": "5.1.6"
-    },
-    "dependencies": {},
-    "peerDependencies": {
-        "react": "*",
-        "react-native": "*"
-    },
-    "scripts": {
-        "lint": "yarn eslint .",
-        "build": "yarn tsc",
-        "prepare": "yarn build",
-        "xbasic": "yarn --cwd examples/basic",
-        "docs": "yarn --cwd docs build",
-        "release": "release-it",
-        "test": "echo no test available",
-        "check-ios": "scripts/swift-format.sh && scripts/swift-lint.sh && scripts/clang-format.sh",
-        "check-android": "scripts/kotlin-lint.sh",
-        "check-all": "yarn check-android; yarn check-ios; yarn lint",
-        "codegen": "node ./node_modules/react-native/scripts/generate-codegen-artifacts.js --path ./ ./output"
-    },
-    "files": [
-        "android",
-        "ios",
-        "windows",
-        "src",
-        "lib",
-        "react-native-video.podspec",
-        "app.plugin.js",
-        "!android/build",
-        "!android/buildOutput_*",
-        "!android/local.properties",
-        "!ios/build",
-        "!**/*.tsbuildinfo",
-        "!docs",
-        "!examples"
-    ]
+  "name": "react-native-video",
+  "version": "6.8.2",
+  "description": "A <Video /> element for react-native",
+  "main": "lib/index",
+  "source": "src/index.ts",
+  "react-native": "src/index",
+  "license": "MIT",
+  "author": "Community Contributors",
+  "homepage": "https://docs.thewidlarzgroup.com/react-native-video/",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:TheWidlarzGroup/react-native-video.git"
+  },
+  "resolutions": {
+    "@types/react": "~18.0.0"
+  },
+  "devDependencies": {
+    "@expo/config-plugins": "^8.0.5",
+    "@jamesacarr/eslint-formatter-github-actions": "^0.2.0",
+    "@react-native/eslint-config": "^0.72.2",
+    "@release-it/conventional-changelog": "^7.0.2",
+    "@types/jest": "^28.1.2",
+    "@types/react": "~18.0.0",
+    "@types/react-native": "0.72.3",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "eslint": "^8.19.0",
+    "eslint-plugin-jest": "^27.4.2",
+    "hls.js": "^1.5.18",
+    "jest": "^29.7.0",
+    "prettier": "^2.4.1",
+    "react": "18.2.0",
+    "react-native": "0.73.2",
+    "react-native-windows": "^0.61.0-0",
+    "release-it": "^16.2.1",
+    "typescript": "5.1.6"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "scripts": {
+    "lint": "yarn eslint .",
+    "build": "yarn tsc",
+    "prepare": "yarn build",
+    "xbasic": "yarn --cwd examples/basic",
+    "docs": "yarn --cwd docs build",
+    "release": "release-it",
+    "test": "echo no test available",
+    "check-ios": "scripts/swift-format.sh && scripts/swift-lint.sh && scripts/clang-format.sh",
+    "check-android": "scripts/kotlin-lint.sh",
+    "check-all": "yarn check-android; yarn check-ios; yarn lint",
+    "codegen": "node ./node_modules/react-native/scripts/generate-codegen-artifacts.js --path ./ ./output"
+  },
+  "files": [
+    "android",
+    "ios",
+    "windows",
+    "src",
+    "lib",
+    "react-native-video.podspec",
+    "app.plugin.js",
+    "!android/build",
+    "!android/buildOutput_*",
+    "!android/local.properties",
+    "!ios/build",
+    "!**/*.tsbuildinfo",
+    "!docs",
+    "!examples"
+  ]
 }
diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index a8b5a218a3..a8927beb92 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -1,3 +1,4 @@
+import Hls from 'hls.js';
 import React, {
   forwardRef,
   useCallback,
@@ -252,6 +253,28 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       nativeRef.current.playbackRate = rate;
     }, [rate]);
 
+    useEffect(() => {
+      if (!src?.uri || !nativeRef.current || !Hls.isSupported()) {
+        return;
+      }
+
+      const isHlsStream =
+        typeof src.uri === 'string' &&
+        (src.uri.includes('m3u8') || src.type === 'm3u8');
+
+      if (!isHlsStream) {
+        return;
+      }
+
+      const hls = new Hls();
+      hls.loadSource(src.uri);
+      hls.attachMedia(nativeRef.current);
+
+      return () => {
+        hls.destroy();
+      };
+    }, [src]);
+
     useMediaSession(src?.metadata, nativeRef, showNotificationControls);
 
     return (

From a9b4f5229d57230ba1447086d9c8b58124347142 Mon Sep 17 00:00:00 2001
From: ByungHoon YOO <bhyoo99@gmail.com>
Date: Sun, 29 Dec 2024 01:31:26 +0900
Subject: [PATCH 2/3] refactor(web): improve HLS stream validation and handling

---
 src/Video.web.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index a8927beb92..3ca159e344 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -254,21 +254,22 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
     }, [rate]);
 
     useEffect(() => {
-      if (!src?.uri || !nativeRef.current || !Hls.isSupported()) {
+      if (!nativeRef.current || typeof src?.uri !== 'string') {
         return;
       }
 
-      const isHlsStream =
-        typeof src.uri === 'string' &&
-        (src.uri.includes('m3u8') || src.type === 'm3u8');
+      const isHlsUrl = src.uri.endsWith('.m3u8') || src.type === 'm3u8';
 
-      if (!isHlsStream) {
+      if (!isHlsUrl) {
         return;
       }
 
       const hls = new Hls();
-      hls.loadSource(src.uri);
-      hls.attachMedia(nativeRef.current);
+
+      if (Hls.isSupported()) {
+        hls.loadSource(src.uri);
+        hls.attachMedia(nativeRef.current);
+      }
 
       return () => {
         hls.destroy();

From 11d95907287febe22dade8083ece1060eb4135c0 Mon Sep 17 00:00:00 2001
From: ByungHoon YOO <bhyoo99@gmail.com>
Date: Sun, 29 Dec 2024 01:35:42 +0900
Subject: [PATCH 3/3] chore: update package.json formatting for consistency

---
 package.json | 140 +++++++++++++++++++++++++--------------------------
 1 file changed, 70 insertions(+), 70 deletions(-)

diff --git a/package.json b/package.json
index e595405272..f2a23ecb91 100644
--- a/package.json
+++ b/package.json
@@ -1,72 +1,72 @@
 {
-  "name": "react-native-video",
-  "version": "6.8.2",
-  "description": "A <Video /> element for react-native",
-  "main": "lib/index",
-  "source": "src/index.ts",
-  "react-native": "src/index",
-  "license": "MIT",
-  "author": "Community Contributors",
-  "homepage": "https://docs.thewidlarzgroup.com/react-native-video/",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:TheWidlarzGroup/react-native-video.git"
-  },
-  "resolutions": {
-    "@types/react": "~18.0.0"
-  },
-  "devDependencies": {
-    "@expo/config-plugins": "^8.0.5",
-    "@jamesacarr/eslint-formatter-github-actions": "^0.2.0",
-    "@react-native/eslint-config": "^0.72.2",
-    "@release-it/conventional-changelog": "^7.0.2",
-    "@types/jest": "^28.1.2",
-    "@types/react": "~18.0.0",
-    "@types/react-native": "0.72.3",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "eslint": "^8.19.0",
-    "eslint-plugin-jest": "^27.4.2",
-    "hls.js": "^1.5.18",
-    "jest": "^29.7.0",
-    "prettier": "^2.4.1",
-    "react": "18.2.0",
-    "react-native": "0.73.2",
-    "react-native-windows": "^0.61.0-0",
-    "release-it": "^16.2.1",
-    "typescript": "5.1.6"
-  },
-  "dependencies": {},
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
-  },
-  "scripts": {
-    "lint": "yarn eslint .",
-    "build": "yarn tsc",
-    "prepare": "yarn build",
-    "xbasic": "yarn --cwd examples/basic",
-    "docs": "yarn --cwd docs build",
-    "release": "release-it",
-    "test": "echo no test available",
-    "check-ios": "scripts/swift-format.sh && scripts/swift-lint.sh && scripts/clang-format.sh",
-    "check-android": "scripts/kotlin-lint.sh",
-    "check-all": "yarn check-android; yarn check-ios; yarn lint",
-    "codegen": "node ./node_modules/react-native/scripts/generate-codegen-artifacts.js --path ./ ./output"
-  },
-  "files": [
-    "android",
-    "ios",
-    "windows",
-    "src",
-    "lib",
-    "react-native-video.podspec",
-    "app.plugin.js",
-    "!android/build",
-    "!android/buildOutput_*",
-    "!android/local.properties",
-    "!ios/build",
-    "!**/*.tsbuildinfo",
-    "!docs",
-    "!examples"
-  ]
+    "name": "react-native-video",
+    "version": "6.8.2",
+    "description": "A <Video /> element for react-native",
+    "main": "lib/index",
+    "source": "src/index.ts",
+    "react-native": "src/index",
+    "license": "MIT",
+    "author": "Community Contributors",
+    "homepage": "https://docs.thewidlarzgroup.com/react-native-video/",
+    "repository": {
+        "type": "git",
+        "url": "git@github.com:TheWidlarzGroup/react-native-video.git"
+    },
+    "resolutions": {
+        "@types/react": "~18.0.0"
+    },
+    "devDependencies": {
+        "@expo/config-plugins": "^8.0.5",
+        "@jamesacarr/eslint-formatter-github-actions": "^0.2.0",
+        "@react-native/eslint-config": "^0.72.2",
+        "@release-it/conventional-changelog": "^7.0.2",
+        "@types/jest": "^28.1.2",
+        "@types/react": "~18.0.0",
+        "@types/react-native": "0.72.3",
+        "@typescript-eslint/eslint-plugin": "^6.7.4",
+        "eslint": "^8.19.0",
+        "eslint-plugin-jest": "^27.4.2",
+        "hls.js": "^1.5.18",
+        "jest": "^29.7.0",
+        "prettier": "^2.4.1",
+        "react": "18.2.0",
+        "react-native": "0.73.2",
+        "react-native-windows": "^0.61.0-0",
+        "release-it": "^16.2.1",
+        "typescript": "5.1.6"
+    },
+    "dependencies": {},
+    "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+    },
+    "scripts": {
+        "lint": "yarn eslint .",
+        "build": "yarn tsc",
+        "prepare": "yarn build",
+        "xbasic": "yarn --cwd examples/basic",
+        "docs": "yarn --cwd docs build",
+        "release": "release-it",
+        "test": "echo no test available",
+        "check-ios": "scripts/swift-format.sh && scripts/swift-lint.sh && scripts/clang-format.sh",
+        "check-android": "scripts/kotlin-lint.sh",
+        "check-all": "yarn check-android; yarn check-ios; yarn lint",
+        "codegen": "node ./node_modules/react-native/scripts/generate-codegen-artifacts.js --path ./ ./output"
+    },
+    "files": [
+        "android",
+        "ios",
+        "windows",
+        "src",
+        "lib",
+        "react-native-video.podspec",
+        "app.plugin.js",
+        "!android/build",
+        "!android/buildOutput_*",
+        "!android/local.properties",
+        "!ios/build",
+        "!**/*.tsbuildinfo",
+        "!docs",
+        "!examples"
+    ]
 }