mirror of
https://github.com/zoriya/react-native-omni.git
synced 2026-08-16 02:44:51 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
645b226359 |
@@ -23,9 +23,9 @@
|
|||||||
"typescript": "^7.0.2",
|
"typescript": "^7.0.2",
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "19.2.7",
|
"react": ">=19.0.0",
|
||||||
"react-native": "0.86.0",
|
"react-native": ">=0.86.0",
|
||||||
"react-native-nitro-modules": "0.36.1",
|
"react-native-nitro-modules": ">=0.36.0",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
"example": {
|
"example": {
|
||||||
|
|||||||
+13
-2
@@ -1,6 +1,12 @@
|
|||||||
import { createPlayer } from "@videojs/react";
|
import { createPlayer } from "@videojs/react";
|
||||||
import { videoFeatures } from "@videojs/react/video";
|
import { videoFeatures } from "@videojs/react/video";
|
||||||
import { createContext, type ReactNode, useContext, useEffect } from "react";
|
import {
|
||||||
|
createContext,
|
||||||
|
type ReactNode,
|
||||||
|
useContext,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
} from "react";
|
||||||
import { WebOmniPlayer } from "./player.web";
|
import { WebOmniPlayer } from "./player.web";
|
||||||
import type { OmniPlayer } from "./types/player";
|
import type { OmniPlayer } from "./types/player";
|
||||||
import type { Source } from "./types/source";
|
import type { Source } from "./types/source";
|
||||||
@@ -39,10 +45,15 @@ const PlayerInitializer = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const store = VideoPlayer.usePlayer();
|
const store = VideoPlayer.usePlayer();
|
||||||
const player = useLazyRef(() => new WebOmniPlayer(store));
|
const player = useLazyRef(() => new WebOmniPlayer(store));
|
||||||
|
const seekedForSrc = useRef<string | undefined>(undefined);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
player.source = source;
|
player.source = source;
|
||||||
if (source.startTime) store.seek(source.startTime).catch(() => {});
|
const uri = source.src[0]?.uri;
|
||||||
|
if (uri !== seekedForSrc.current) {
|
||||||
|
seekedForSrc.current = uri;
|
||||||
|
if (source.startTime) store.seek(source.startTime)
|
||||||
|
}
|
||||||
}, [source, store]);
|
}, [source, store]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
+11
-7
@@ -114,19 +114,23 @@ export const OmniView = ({
|
|||||||
false;
|
false;
|
||||||
const Tech = isHls ? HlsJsVideo : Video;
|
const Tech = isHls ? HlsJsVideo : Video;
|
||||||
|
|
||||||
const config = useMemo<HlsMediaConfig | undefined>(() => {
|
const headersRef = useRef(src?.headers);
|
||||||
const headers = src?.headers;
|
headersRef.current = src?.headers;
|
||||||
if (!headers || Object.keys(headers).length === 0) return undefined;
|
|
||||||
return {
|
const config = useMemo<HlsMediaConfig>(
|
||||||
|
() => ({
|
||||||
hlsJs: {
|
hlsJs: {
|
||||||
xhrSetup: (xhr: XMLHttpRequest) => {
|
xhrSetup: (xhr: XMLHttpRequest) => {
|
||||||
|
const headers = headersRef.current;
|
||||||
|
if (!headers) return;
|
||||||
for (const [key, value] of Object.entries(headers)) {
|
for (const [key, value] of Object.entries(headers)) {
|
||||||
if (value) xhr.setRequestHeader(key, value);
|
if (value) xhr.setRequestHeader(key, value);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
}),
|
||||||
}, [src?.headers]);
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VideoPlayer.Container
|
<VideoPlayer.Container
|
||||||
@@ -137,7 +141,7 @@ export const OmniView = ({
|
|||||||
<Tech
|
<Tech
|
||||||
ref={ref}
|
ref={ref}
|
||||||
src={src.uri}
|
src={src.uri}
|
||||||
config={config}
|
config={isHls ? config : undefined}
|
||||||
autoPlay={autoplay}
|
autoPlay={autoplay}
|
||||||
playsInline
|
playsInline
|
||||||
crossOrigin="anonymous"
|
crossOrigin="anonymous"
|
||||||
|
|||||||
Reference in New Issue
Block a user