290 lines
8.5 KiB
TypeScript
290 lines
8.5 KiB
TypeScript
// Metro module 8141 (f8142).
|
|
import { memo, useState, useEffect, useCallback, createRef, useLayoutEffect } from "react";
|
|
import MediaModalWebView, { PlayerState } from "./MediaModalWebView";
|
|
import usePrevious from "../../../../hooks/usePrevious";
|
|
import { MediaViewerAnalytics } from "../../MediaViewerAnalyticsManager";
|
|
import { useMediaPlayerMutedStore } from "../MediaPlayerMuteManager";
|
|
const baseUrl = `https:${window.GLOBAL_ENV.WEBAPP_ENDPOINT}`;
|
|
const r29 = memo(function({ visible, style, source, controls, ...props }) {
|
|
let mediaPlayerMutedStore;
|
|
mediaPlayerMutedStore = void 0;
|
|
const [state, setState] = useState(PlayerState.UNREADY);
|
|
const previous = usePrevious(state);
|
|
let c16285_4 = previous;
|
|
const previous2 = usePrevious(visible);
|
|
let c16285_5 = previous2;
|
|
const ref = controls == null ? void 0 : controls.props?.ref;
|
|
useEffect(() => {
|
|
MediaViewerAnalytics.trackMessageEmbedsActionCompleted({
|
|
platform: "file",
|
|
action: "attempted"
|
|
});
|
|
}, []);
|
|
const callback = useCallback((a0) => {
|
|
L38: {
|
|
const r8 = (function(a0) {
|
|
let r4;
|
|
try {
|
|
r4 = JSON.parse(a0);
|
|
} catch ($e) {
|
|
return {};
|
|
}
|
|
return r4;
|
|
})(a0);
|
|
const { type, value } = r8;
|
|
switch (type) {
|
|
case "loaded":
|
|
setState(PlayerState.READY);
|
|
break L38;
|
|
case "canplay":
|
|
if (controls != null) {
|
|
const props8 = controls.props;
|
|
if (props8 != null) {
|
|
props8.onPlayerStateChange(PlayerState.VIDEO_CUED);
|
|
}
|
|
}
|
|
setState(PlayerState.VIDEO_CUED);
|
|
break L38;
|
|
case "error":
|
|
setState(PlayerState.ERRORED);
|
|
MediaViewerAnalytics.trackMessageEmbedsActionCompleted({
|
|
platform: "file",
|
|
action: "errored",
|
|
error: "unknown"
|
|
});
|
|
break L38;
|
|
case "ended":
|
|
if (controls != null) {
|
|
const props7 = controls.props;
|
|
if (props7 != null) {
|
|
props7.onPlayerStateChange(PlayerState.ENDED);
|
|
}
|
|
}
|
|
setState(PlayerState.ENDED);
|
|
break L38;
|
|
case "play":
|
|
if (controls != null) {
|
|
const props6 = controls.props;
|
|
if (props6 != null) {
|
|
props6.onPlayerStateChange(PlayerState.PLAYING);
|
|
}
|
|
}
|
|
setState(PlayerState.PLAYING);
|
|
break L38;
|
|
case "pause":
|
|
if (controls != null) {
|
|
const props5 = controls.props;
|
|
if (props5 != null) {
|
|
props5.onPlayerStateChange(PlayerState.PAUSED);
|
|
}
|
|
}
|
|
setState(PlayerState.PAUSED);
|
|
break L38;
|
|
case "stalled":
|
|
if (controls != null) {
|
|
const props4 = controls.props;
|
|
if (props4 != null) {
|
|
props4.onPlayerStateChange(PlayerState.BUFFERING);
|
|
}
|
|
}
|
|
setState(PlayerState.BUFFERING);
|
|
break L38;
|
|
case "durationchange":
|
|
if (value == null) {
|
|
break L38;
|
|
}
|
|
if (controls == null) {
|
|
break L38;
|
|
}
|
|
const props3 = controls.props;
|
|
if (props3 == null) {
|
|
break L38;
|
|
}
|
|
const onDuration2 = props3.onDuration;
|
|
if (onDuration2 == null) {
|
|
break L38;
|
|
}
|
|
onDuration2.call(props3, value);
|
|
break L38;
|
|
case "progress":
|
|
if (value == null) {
|
|
break L38;
|
|
}
|
|
if (controls == null) {
|
|
break L38;
|
|
}
|
|
const props2 = controls.props;
|
|
if (props2 == null) {
|
|
break L38;
|
|
}
|
|
const onDownloadProgress2 = props2.onDownloadProgress;
|
|
if (onDownloadProgress2 == null) {
|
|
break L38;
|
|
}
|
|
onDownloadProgress2.call(props2, value);
|
|
break L38;
|
|
case "timeupdate":
|
|
if (value == null) {
|
|
break L38;
|
|
}
|
|
if (controls == null) {
|
|
break L38;
|
|
}
|
|
const props = controls.props;
|
|
if (props == null) {
|
|
break L38;
|
|
}
|
|
const onCurrentSecond2 = props.onCurrentSecond;
|
|
if (onCurrentSecond2 == null) {
|
|
break L38;
|
|
}
|
|
onCurrentSecond2.call(props, value);
|
|
break L38;
|
|
default:
|
|
}
|
|
}
|
|
}, [controls?.props]);
|
|
mediaPlayerMutedStore = useMediaPlayerMutedStore((a0) => a0.isMuted);
|
|
useEffect(() => {
|
|
if (ref?.current != null && state !== PlayerState.UNREADY) {
|
|
ref.current.injectJavaScript(`window.player.muted = ${JSON.stringify(mediaPlayerMutedStore)}; true;`);
|
|
if ((visible ? c16285_4 === PlayerState.UNREADY : visible) && state === PlayerState.READY) {
|
|
ref.current.injectJavaScript("window.player.play(); true;");
|
|
}
|
|
if (visible ? !c16285_5 : visible) {
|
|
ref.current.injectJavaScript("window.player.play(); true;");
|
|
}
|
|
if (visible ? !visible : c16285_5) {
|
|
ref.current.injectJavaScript("window.player.pause(); true;");
|
|
}
|
|
}
|
|
}, [ref, visible, previous2, previous, state, mediaPlayerMutedStore]);
|
|
return <MediaModalWebView key={source.uri} ref={ref} style={style} source={{
|
|
html: `
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="initial-scale=1">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #000;
|
|
object-fit: contain;
|
|
}
|
|
</style>
|
|
<script>${`
|
|
function onReady() {
|
|
const player = window.player = document.createElement('video');
|
|
player.controls = false;
|
|
player.autoplay = false;
|
|
player.playsInline = true;
|
|
player.disablePictureInPicture = true;
|
|
const addEvent = (name, func) => {
|
|
player.addEventListener(name, (e) => {
|
|
window.ReactNativeWebView.postMessage(
|
|
JSON.stringify({type: name, value: func ? func() : undefined})
|
|
);
|
|
});
|
|
};
|
|
addEvent('error', () => player.error);
|
|
addEvent('canplay');
|
|
addEvent('ended');
|
|
addEvent('pause');
|
|
addEvent('play');
|
|
addEvent('stalled');
|
|
addEvent('durationchange', () => player.duration);
|
|
addEvent('timeupdate', () => player.currentTime);
|
|
addEvent('progress', () => {
|
|
const ranges = player.buffered;
|
|
let total = 0;
|
|
for (let i = 0; i < ranges.length; i++) {
|
|
total += (ranges.end(i) - ranges.start(i));
|
|
}
|
|
return total;
|
|
});
|
|
player.src = ${JSON.stringify(source.uri)};
|
|
document.body.appendChild(player);
|
|
player.load();
|
|
window.ReactNativeWebView.postMessage(JSON.stringify({type: 'loaded'}));
|
|
}
|
|
window.addEventListener('load', onReady);
|
|
`}</script>
|
|
</head>
|
|
<body>
|
|
</body>
|
|
</html>
|
|
`,
|
|
baseUrl
|
|
}} baseURL={baseUrl} playerState={state} onDataReceived={callback} javaScriptEnabled javaScriptCanOpenWindowsAutomatically {...props} />;
|
|
});
|
|
export default r29;
|
|
export function createWebFileVideoControls() {
|
|
let c16286_0, c16286_1, c16286_2;
|
|
const ref2 = createRef();
|
|
let c16286_4 = 0;
|
|
let c16286_5 = 0;
|
|
let c16286_6 = 0;
|
|
return {
|
|
seek: (a0) => {
|
|
const current = ref2.current;
|
|
if (current != null) {
|
|
current.injectJavaScript(`window.player.currentTime = ${JSON.stringify(a0)}; true;`);
|
|
}
|
|
},
|
|
pause: (a0) => {
|
|
const current = ref2.current;
|
|
if (current != null) {
|
|
current.injectJavaScript(`window.player.${a0 ? "pause" : "play"}(); true;`);
|
|
}
|
|
},
|
|
useSubscribe: (a0, a1, a2) => {
|
|
c16286_0 = a0;
|
|
c16286_1 = a1;
|
|
c16286_2 = a2;
|
|
useLayoutEffect(() => {
|
|
if (c16286_0 != null) {
|
|
c16286_0(c16286_4, c16286_5);
|
|
}
|
|
}, []);
|
|
},
|
|
props: {
|
|
ref: ref2,
|
|
onPlayerStateChange: (a0) => {
|
|
if (c16286_1 != null) {
|
|
c16286_1(a0 === PlayerState.PAUSED || a0 === PlayerState.ENDED);
|
|
}
|
|
},
|
|
onCurrentSecond: (a0) => {
|
|
c16286_4 = a0;
|
|
if (c16286_0 != null) {
|
|
c16286_0(c16286_4, c16286_5);
|
|
}
|
|
},
|
|
onDuration: (a0) => {
|
|
c16286_5 = a0;
|
|
if (c16286_0 != null) {
|
|
c16286_0(c16286_4, c16286_5);
|
|
}
|
|
if (c16286_5 > 0) {
|
|
const r12 = c16286_6 / c16286_5;
|
|
if (c16286_2 != null) {
|
|
c16286_2(r12);
|
|
}
|
|
}
|
|
},
|
|
onDownloadProgress: (a0) => {
|
|
c16286_6 = a0;
|
|
if (c16286_5 > 0) {
|
|
const r7 = c16286_6 / c16286_5;
|
|
if (c16286_2 != null) {
|
|
c16286_2(r7);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|