@stepincto/expo-video 1.0.0

package/build/VideoView.web.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { StyleSheet } from 'react-native';
+import { getSourceUri } from './VideoPlayer.web';
+function createAudioContext() {
+    return typeof window !== 'undefined' ? new window.AudioContext() : null;
+}
+function createZeroGainNode(audioContext) {
+    const zeroGainNode = audioContext?.createGain() ?? null;
+    if (audioContext && zeroGainNode) {
+        zeroGainNode.gain.value = 0;
+        zeroGainNode.connect(audioContext.destination);
+    }
+    return zeroGainNode;
+}
+function mapStyles(style) {
+    const flattenedStyles = StyleSheet.flatten(style);
+    // Looking through react-native-web source code they also just pass styles directly without further conversions, so it's just a cast.
+    return flattenedStyles;
+}
+export function isPictureInPictureSupported() {
+    return typeof document === 'object' && typeof document.exitPictureInPicture === 'function';
+}
+export const VideoView = forwardRef((props, ref) => {
+    const videoRef = useRef(null);
+    const mediaNodeRef = useRef(null);
+    const hasToSetupAudioContext = useRef(false);
+    const fullscreenChangeListener = useRef(null);
+    const isWaitingForFirstFrame = useRef(false);
+    /**
+     * Audio context is used to mute all but one video when multiple video views are playing from one player simultaneously.
+     * Using audio context nodes allows muting videos without displaying the mute icon in the video player.
+     * We have to keep the context that called createMediaElementSource(videoRef), as the method can't be called
+     * for the second time with another context and there is no way to unbind the video and audio context afterward.
+     */
+    const audioContextRef = useRef(null);
+    const zeroGainNodeRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        enterFullscreen: async () => {
+            if (!props.allowsFullscreen) {
+                return;
+            }
+            await videoRef.current?.requestFullscreen();
+        },
+        exitFullscreen: async () => {
+            await document.exitFullscreen();
+        },
+        startPictureInPicture: async () => {
+            await videoRef.current?.requestPictureInPicture();
+        },
+        stopPictureInPicture: async () => {
+            try {
+                await document.exitPictureInPicture();
+            }
+            catch (e) {
+                if (e instanceof DOMException && e.name === 'InvalidStateError') {
+                    console.warn('The VideoView is not in Picture-in-Picture mode.');
+                }
+                else {
+                    throw e;
+                }
+            }
+        },
+    }));
+    useEffect(() => {
+        const onEnter = () => {
+            props.onPictureInPictureStart?.();
+        };
+        const onLeave = () => {
+            props.onPictureInPictureStop?.();
+        };
+        const onLoadStart = () => {
+            isWaitingForFirstFrame.current = true;
+        };
+        const onCanPlay = () => {
+            if (isWaitingForFirstFrame.current) {
+                props.onFirstFrameRender?.();
+            }
+            isWaitingForFirstFrame.current = false;
+        };
+        videoRef.current?.addEventListener('enterpictureinpicture', onEnter);
+        videoRef.current?.addEventListener('leavepictureinpicture', onLeave);
+        videoRef.current?.addEventListener('loadstart', onLoadStart);
+        videoRef.current?.addEventListener('loadeddata', onCanPlay);
+        return () => {
+            videoRef.current?.removeEventListener('enterpictureinpicture', onEnter);
+            videoRef.current?.removeEventListener('leavepictureinpicture', onLeave);
+            videoRef.current?.removeEventListener('loadstart', onLoadStart);
+            videoRef.current?.removeEventListener('loadeddata', onCanPlay);
+        };
+    }, [videoRef, props.onPictureInPictureStop, props.onPictureInPictureStart]);
+    // Adds the video view as a candidate for being the audio source for the player (when multiple views play from one
+    // player only one will emit audio).
+    function attachAudioNodes() {
+        const audioContext = audioContextRef.current;
+        const zeroGainNode = zeroGainNodeRef.current;
+        const mediaNode = mediaNodeRef.current;
+        if (audioContext && zeroGainNode && mediaNode) {
+            props.player.mountAudioNode(audioContext, zeroGainNode, mediaNode);
+        }
+        else {
+            console.warn("Couldn't mount audio node, this might affect the audio playback when using multiple video views with the same player.");
+        }
+    }
+    function detachAudioNodes() {
+        const audioContext = audioContextRef.current;
+        const mediaNode = mediaNodeRef.current;
+        if (audioContext && mediaNode && videoRef.current) {
+            props.player.unmountAudioNode(videoRef.current, audioContext, mediaNode);
+        }
+    }
+    function maybeSetupAudioContext() {
+        if (!hasToSetupAudioContext.current ||
+            !navigator.userActivation.hasBeenActive ||
+            !videoRef.current) {
+            return;
+        }
+        const audioContext = createAudioContext();
+        detachAudioNodes();
+        audioContextRef.current = audioContext;
+        zeroGainNodeRef.current = createZeroGainNode(audioContextRef.current);
+        mediaNodeRef.current = audioContext
+            ? audioContext.createMediaElementSource(videoRef.current)
+            : null;
+        attachAudioNodes();
+        hasToSetupAudioContext.current = false;
+    }
+    function fullscreenListener() {
+        if (document.fullscreenElement === videoRef.current) {
+            props.onFullscreenEnter?.();
+        }
+        else {
+            props.onFullscreenExit?.();
+        }
+    }
+    function setupFullscreenListener() {
+        fullscreenChangeListener.current = fullscreenListener;
+        videoRef.current?.addEventListener('fullscreenchange', fullscreenChangeListener.current);
+    }
+    function cleanupFullscreenListener() {
+        if (fullscreenChangeListener.current) {
+            videoRef.current?.removeEventListener('fullscreenchange', fullscreenChangeListener.current);
+            fullscreenChangeListener.current = null;
+        }
+    }
+    useEffect(() => {
+        if (videoRef.current) {
+            props.player?.mountVideoView(videoRef.current);
+        }
+        setupFullscreenListener();
+        attachAudioNodes();
+        return () => {
+            if (videoRef.current) {
+                props.player?.unmountVideoView(videoRef.current);
+            }
+            cleanupFullscreenListener();
+            detachAudioNodes();
+        };
+    }, [props.player]);
+    return (_jsx("video", { controls: props.nativeControls ?? true, controlsList: props.allowsFullscreen ? undefined : 'nofullscreen', crossOrigin: props.crossOrigin, style: {
+            ...mapStyles(props.style),
+            objectFit: props.contentFit,
+        }, onPlay: () => {
+            maybeSetupAudioContext();
+        }, 
+        // The player can autoplay when muted, unmuting by a user should create the audio context
+        onVolumeChange: () => {
+            maybeSetupAudioContext();
+        }, ref: (newRef) => {
+            // This is called with a null value before `player.unmountVideoView` is called,
+            // we can't assign null to videoRef if we want to unmount it from the player.
+            if (newRef && !newRef.isEqualNode(videoRef.current)) {
+                videoRef.current = newRef;
+                hasToSetupAudioContext.current = true;
+                maybeSetupAudioContext();
+            }
+        }, disablePictureInPicture: !props.allowsPictureInPicture, playsInline: props.playsInline, src: getSourceUri(props.player?.src) ?? '' }));
+});
+export default VideoView;
+//# sourceMappingURL=VideoView.web.js.map

package/build/VideoView.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoView.web.js","sourceRoot":"","sources":["../src/VideoView.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport VideoPlayer, { getSourceUri } from './VideoPlayer.web';\nimport type { VideoViewProps } from './VideoView.types';\n\nfunction createAudioContext(): AudioContext | null {\n  return typeof window !== 'undefined' ? new window.AudioContext() : null;\n}\n\nfunction createZeroGainNode(audioContext: AudioContext | null): GainNode | null {\n  const zeroGainNode = audioContext?.createGain() ?? null;\n\n  if (audioContext && zeroGainNode) {\n    zeroGainNode.gain.value = 0;\n    zeroGainNode.connect(audioContext.destination);\n  }\n  return zeroGainNode;\n}\n\nfunction mapStyles(style: VideoViewProps['style']): React.CSSProperties {\n  const flattenedStyles = StyleSheet.flatten(style);\n  // Looking through react-native-web source code they also just pass styles directly without further conversions, so it's just a cast.\n  return flattenedStyles as React.CSSProperties;\n}\n\nexport function isPictureInPictureSupported(): boolean {\n  return typeof document === 'object' && typeof document.exitPictureInPicture === 'function';\n}\n\nexport const VideoView = forwardRef((props: { player?: VideoPlayer } & VideoViewProps, ref) => {\n  const videoRef = useRef<null | HTMLVideoElement>(null);\n  const mediaNodeRef = useRef<null | MediaElementAudioSourceNode>(null);\n  const hasToSetupAudioContext = useRef(false);\n  const fullscreenChangeListener = useRef<null | (() => void)>(null);\n  const isWaitingForFirstFrame = useRef(false);\n\n  /**\n   * Audio context is used to mute all but one video when multiple video views are playing from one player simultaneously.\n   * Using audio context nodes allows muting videos without displaying the mute icon in the video player.\n   * We have to keep the context that called createMediaElementSource(videoRef), as the method can't be called\n   * for the second time with another context and there is no way to unbind the video and audio context afterward.\n   */\n  const audioContextRef = useRef<null | AudioContext>(null);\n  const zeroGainNodeRef = useRef<null | GainNode>(null);\n\n  useImperativeHandle(ref, () => ({\n    enterFullscreen: async () => {\n      if (!props.allowsFullscreen) {\n        return;\n      }\n      await videoRef.current?.requestFullscreen();\n    },\n    exitFullscreen: async () => {\n      await document.exitFullscreen();\n    },\n    startPictureInPicture: async () => {\n      await videoRef.current?.requestPictureInPicture();\n    },\n    stopPictureInPicture: async () => {\n      try {\n        await document.exitPictureInPicture();\n      } catch (e) {\n        if (e instanceof DOMException && e.name === 'InvalidStateError') {\n          console.warn('The VideoView is not in Picture-in-Picture mode.');\n        } else {\n          throw e;\n        }\n      }\n    },\n  }));\n\n  useEffect(() => {\n    const onEnter = () => {\n      props.onPictureInPictureStart?.();\n    };\n    const onLeave = () => {\n      props.onPictureInPictureStop?.();\n    };\n    const onLoadStart = () => {\n      isWaitingForFirstFrame.current = true;\n    };\n    const onCanPlay = () => {\n      if (isWaitingForFirstFrame.current) {\n        props.onFirstFrameRender?.();\n      }\n      isWaitingForFirstFrame.current = false;\n    };\n    videoRef.current?.addEventListener('enterpictureinpicture', onEnter);\n    videoRef.current?.addEventListener('leavepictureinpicture', onLeave);\n    videoRef.current?.addEventListener('loadstart', onLoadStart);\n    videoRef.current?.addEventListener('loadeddata', onCanPlay);\n\n    return () => {\n      videoRef.current?.removeEventListener('enterpictureinpicture', onEnter);\n      videoRef.current?.removeEventListener('leavepictureinpicture', onLeave);\n      videoRef.current?.removeEventListener('loadstart', onLoadStart);\n      videoRef.current?.removeEventListener('loadeddata', onCanPlay);\n    };\n  }, [videoRef, props.onPictureInPictureStop, props.onPictureInPictureStart]);\n\n  // Adds the video view as a candidate for being the audio source for the player (when multiple views play from one\n  // player only one will emit audio).\n  function attachAudioNodes() {\n    const audioContext = audioContextRef.current;\n    const zeroGainNode = zeroGainNodeRef.current;\n    const mediaNode = mediaNodeRef.current;\n\n    if (audioContext && zeroGainNode && mediaNode) {\n      props.player.mountAudioNode(audioContext, zeroGainNode, mediaNode);\n    } else {\n      console.warn(\n        \"Couldn't mount audio node, this might affect the audio playback when using multiple video views with the same player.\"\n      );\n    }\n  }\n\n  function detachAudioNodes() {\n    const audioContext = audioContextRef.current;\n    const mediaNode = mediaNodeRef.current;\n    if (audioContext && mediaNode && videoRef.current) {\n      props.player.unmountAudioNode(videoRef.current, audioContext, mediaNode);\n    }\n  }\n\n  function maybeSetupAudioContext() {\n    if (\n      !hasToSetupAudioContext.current ||\n      !navigator.userActivation.hasBeenActive ||\n      !videoRef.current\n    ) {\n      return;\n    }\n    const audioContext = createAudioContext();\n\n    detachAudioNodes();\n    audioContextRef.current = audioContext;\n    zeroGainNodeRef.current = createZeroGainNode(audioContextRef.current);\n    mediaNodeRef.current = audioContext\n      ? audioContext.createMediaElementSource(videoRef.current)\n      : null;\n    attachAudioNodes();\n    hasToSetupAudioContext.current = false;\n  }\n\n  function fullscreenListener() {\n    if (document.fullscreenElement === videoRef.current) {\n      props.onFullscreenEnter?.();\n    } else {\n      props.onFullscreenExit?.();\n    }\n  }\n\n  function setupFullscreenListener() {\n    fullscreenChangeListener.current = fullscreenListener;\n    videoRef.current?.addEventListener('fullscreenchange', fullscreenChangeListener.current);\n  }\n\n  function cleanupFullscreenListener() {\n    if (fullscreenChangeListener.current) {\n      videoRef.current?.removeEventListener('fullscreenchange', fullscreenChangeListener.current);\n      fullscreenChangeListener.current = null;\n    }\n  }\n\n  useEffect(() => {\n    if (videoRef.current) {\n      props.player?.mountVideoView(videoRef.current);\n    }\n    setupFullscreenListener();\n    attachAudioNodes();\n\n    return () => {\n      if (videoRef.current) {\n        props.player?.unmountVideoView(videoRef.current);\n      }\n      cleanupFullscreenListener();\n      detachAudioNodes();\n    };\n  }, [props.player]);\n\n  return (\n    <video\n      controls={props.nativeControls ?? true}\n      controlsList={props.allowsFullscreen ? undefined : 'nofullscreen'}\n      crossOrigin={props.crossOrigin}\n      style={{\n        ...mapStyles(props.style),\n        objectFit: props.contentFit,\n      }}\n      onPlay={() => {\n        maybeSetupAudioContext();\n      }}\n      // The player can autoplay when muted, unmuting by a user should create the audio context\n      onVolumeChange={() => {\n        maybeSetupAudioContext();\n      }}\n      ref={(newRef) => {\n        // This is called with a null value before `player.unmountVideoView` is called,\n        // we can't assign null to videoRef if we want to unmount it from the player.\n        if (newRef && !newRef.isEqualNode(videoRef.current)) {\n          videoRef.current = newRef;\n          hasToSetupAudioContext.current = true;\n          maybeSetupAudioContext();\n        }\n      }}\n      disablePictureInPicture={!props.allowsPictureInPicture}\n      playsInline={props.playsInline}\n      src={getSourceUri(props.player?.src) ?? ''}\n    />\n  );\n});\n\nexport default VideoView;\n"]}

package/build/index.d.ts

@@ -0,0 +1,9 @@
+export { isPictureInPictureSupported, clearVideoCacheAsync, setVideoCacheSizeAsync, getCurrentVideoCacheSize, preCacheVideoPartialAsync, preCacheVideoAsync, isVideoCachedAsync, } from './VideoModule';
+export { VideoView } from './VideoView';
+export { useVideoPlayer } from './VideoPlayer';
+export { VideoContentFit, VideoViewProps, SurfaceType } from './VideoView.types';
+export { VideoThumbnail } from './VideoThumbnail';
+export { createVideoPlayer } from './VideoPlayer';
+export { VideoPlayer, VideoPlayerStatus, VideoSource, PlayerError, VideoMetadata, DRMType, DRMOptions, BufferOptions, AudioMixingMode, VideoThumbnailOptions, VideoSize, SubtitleTrack, AudioTrack, VideoTrack, ContentType, } from './VideoPlayer.types';
+export { VideoPlayerEvents, StatusChangeEventPayload, PlayingChangeEventPayload, PlaybackRateChangeEventPayload, VolumeChangeEventPayload, MutedChangeEventPayload, TimeUpdateEventPayload, SourceChangeEventPayload, SourceLoadEventPayload, } from './VideoPlayerEvents.types';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,2BAA2B,EAC3B,oBAAoB,EACpB,sBAAsB,EACtB,wBAAwB,EACxB,yBAAyB,EACzB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,aAAa,EACb,OAAO,EACP,UAAU,EACV,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,WAAW,GACZ,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,8BAA8B,EAC9B,wBAAwB,EACxB,uBAAuB,EACvB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,GACvB,MAAM,2BAA2B,CAAC"}

package/build/index.js

@@ -0,0 +1,7 @@
+export { isPictureInPictureSupported, clearVideoCacheAsync, setVideoCacheSizeAsync, getCurrentVideoCacheSize, preCacheVideoPartialAsync, preCacheVideoAsync, isVideoCachedAsync, } from './VideoModule';
+export { VideoView } from './VideoView';
+export { useVideoPlayer } from './VideoPlayer';
+export { VideoThumbnail } from './VideoThumbnail';
+export { createVideoPlayer } from './VideoPlayer';
+export { VideoPlayer, } from './VideoPlayer.types';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,2BAA2B,EAC3B,oBAAoB,EACpB,sBAAsB,EACtB,wBAAwB,EACxB,yBAAyB,EACzB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EACL,WAAW,GAeZ,MAAM,qBAAqB,CAAC","sourcesContent":["export {\n  isPictureInPictureSupported,\n  clearVideoCacheAsync,\n  setVideoCacheSizeAsync,\n  getCurrentVideoCacheSize,\n  preCacheVideoPartialAsync,\n  preCacheVideoAsync,\n  isVideoCachedAsync,\n} from './VideoModule';\nexport { VideoView } from './VideoView';\nexport { useVideoPlayer } from './VideoPlayer';\n\nexport { VideoContentFit, VideoViewProps, SurfaceType } from './VideoView.types';\nexport { VideoThumbnail } from './VideoThumbnail';\n\nexport { createVideoPlayer } from './VideoPlayer';\n\nexport {\n  VideoPlayer,\n  VideoPlayerStatus,\n  VideoSource,\n  PlayerError,\n  VideoMetadata,\n  DRMType,\n  DRMOptions,\n  BufferOptions,\n  AudioMixingMode,\n  VideoThumbnailOptions,\n  VideoSize,\n  SubtitleTrack,\n  AudioTrack,\n  VideoTrack,\n  ContentType,\n} from './VideoPlayer.types';\n\nexport {\n  VideoPlayerEvents,\n  StatusChangeEventPayload,\n  PlayingChangeEventPayload,\n  PlaybackRateChangeEventPayload,\n  VolumeChangeEventPayload,\n  MutedChangeEventPayload,\n  TimeUpdateEventPayload,\n  SourceChangeEventPayload,\n  SourceLoadEventPayload,\n} from './VideoPlayerEvents.types';\n"]}

package/build/resolveAssetSource.d.ts

@@ -0,0 +1,3 @@
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+export default resolveAssetSource;
+//# sourceMappingURL=resolveAssetSource.d.ts.map

package/build/resolveAssetSource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveAssetSource.d.ts","sourceRoot":"","sources":["../src/resolveAssetSource.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,iDAAiD,CAAC;AACjF,eAAe,kBAAkB,CAAC"}

package/build/resolveAssetSource.js

@@ -0,0 +1,3 @@
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+export default resolveAssetSource;
+//# sourceMappingURL=resolveAssetSource.js.map

package/build/resolveAssetSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveAssetSource.js","sourceRoot":"","sources":["../src/resolveAssetSource.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,iDAAiD,CAAC;AACjF,eAAe,kBAAkB,CAAC","sourcesContent":["import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';\nexport default resolveAssetSource;\n"]}

package/build/resolveAssetSource.web.d.ts

@@ -0,0 +1,4 @@
+export default function resolveAssetSource(assetId: number): {
+    uri: string;
+} | null;
+//# sourceMappingURL=resolveAssetSource.web.d.ts.map

package/build/resolveAssetSource.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveAssetSource.web.d.ts","sourceRoot":"","sources":["../src/resolveAssetSource.web.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAalF"}

package/build/resolveAssetSource.web.js

@@ -0,0 +1,16 @@
+import { getAssetByID } from '@react-native/assets-registry/registry';
+// Minimal `resolveAssetSource` implementation for video on web, based on the version from `expo-asset`
+export default function resolveAssetSource(assetId) {
+    const asset = getAssetByID(assetId);
+    if (!asset) {
+        return null;
+    }
+    const type = !asset.type ? '' : `.${asset.type}`;
+    const assetPath = __DEV__
+        ? asset.httpServerLocation + '/' + asset.name + type
+        : asset.httpServerLocation.replace(/\.\.\//g, '_') + '/' + asset.name + type;
+    // The base has to have a valid syntax but doesn't matter - it's removed below as we use a relative path
+    const fromUrl = new URL(assetPath, 'https://expo.dev');
+    return { uri: fromUrl.toString().replace(fromUrl.origin, '') };
+}
+//# sourceMappingURL=resolveAssetSource.web.js.map

package/build/resolveAssetSource.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveAssetSource.web.js","sourceRoot":"","sources":["../src/resolveAssetSource.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEtE,uGAAuG;AACvG,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,OAAe;IACxD,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IACpC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;IACjD,MAAM,SAAS,GAAG,OAAO;QACvB,CAAC,CAAC,KAAK,CAAC,kBAAkB,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,GAAG,IAAI;QACpD,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;IAE/E,wGAAwG;IACxG,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC;IACvD,OAAO,EAAE,GAAG,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;AACjE,CAAC","sourcesContent":["import { getAssetByID } from '@react-native/assets-registry/registry';\n\n// Minimal `resolveAssetSource` implementation for video on web, based on the version from `expo-asset`\nexport default function resolveAssetSource(assetId: number): { uri: string } | null {\n  const asset = getAssetByID(assetId);\n  if (!asset) {\n    return null;\n  }\n  const type = !asset.type ? '' : `.${asset.type}`;\n  const assetPath = __DEV__\n    ? asset.httpServerLocation + '/' + asset.name + type\n    : asset.httpServerLocation.replace(/\\.\\.\\//g, '_') + '/' + asset.name + type;\n\n  // The base has to have a valid syntax but doesn't matter - it's removed below as we use a relative path\n  const fromUrl = new URL(assetPath, 'https://expo.dev');\n  return { uri: fromUrl.toString().replace(fromUrl.origin, '') };\n}\n"]}

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["apple", "android"],
+  "apple": {
+    "modules": ["VideoModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.video.VideoModule"]
+  }
+}

package/ios/Cache/CachableRequest.swift

@@ -0,0 +1,44 @@
+// Copyright 2024-present 650 Industries. All rights reserved.
+
+import Foundation
+import AVFoundation
+import UIKit
+import CoreServices
+import ExpoModulesCore
+
+/**
+ * Class used for easier management of loadingRequests and associating them with data tasks.
+ * After the request is fulfilled or canceled, the data chunk should be saved to file holding the cache
+ */
+class CachableRequest: Equatable, Hashable {
+  let loadingRequest: AVAssetResourceLoadingRequest
+  let dataTask: URLSessionDataTask
+  var dataRequest: AVAssetResourceLoadingDataRequest
+  var response: URLResponse?
+  private(set) var receivedData = Data()
+  private let dataOffset: Int64
+
+  init(loadingRequest: AVAssetResourceLoadingRequest, dataTask: URLSessionDataTask, dataRequest: AVAssetResourceLoadingDataRequest) {
+    self.loadingRequest = loadingRequest
+    self.dataTask = dataTask
+    self.dataRequest = dataRequest
+    self.dataOffset = dataRequest.requestedOffset
+  }
+
+  func onReceivedData(data: Data) {
+    receivedData.append(data)
+  }
+
+  func saveData(to cachedResource: CachedResource) {
+    // Disabled: Player is now read-only with respect to the cache.
+    // Do nothing.
+  }
+
+  static func == (lhs: CachableRequest, rhs: CachableRequest) -> Bool {
+    return lhs === rhs
+  }
+
+  func hash(into hasher: inout Hasher) {
+    hasher.combine(ObjectIdentifier(self))
+  }
+}

package/ios/Cache/CachedResource.swift

@@ -0,0 +1,97 @@
+// Copyright 2024-present 650 Industries. All rights reserved.
+
+import Foundation
+import AVFoundation
+import ExpoModulesCore
+
+/**
+ * Class used to manage a single cached resource.  Stores a fileHandle to saved video data, and
+ * allows saving/loading data used to correctly decode the data.
+ */
+class CachedResource {
+  private let url: URL
+  private let dataPath: String
+  private let fileHandle: MediaFileHandle
+  private(set) var mediaInfo: MediaInfo?
+
+  init(dataFileUrl: String, resourceUrl: URL, dataPath: String) {
+    self.dataPath = dataPath
+    self.url = resourceUrl
+    self.fileHandle = MediaFileHandle(filePath: dataFileUrl)
+    self.mediaInfo = MediaInfo(forResourceUrl: resourceUrl)
+  }
+
+  func onResponseReceived(response: HTTPURLResponse) {
+    guard let headers = response.allHeaderFields as? [String: String], mediaInfo == nil, response.statusCode == 200 else {
+      return
+    }
+
+    mediaInfo = MediaInfo(
+      expectedContentLength: response.expectedContentLength,
+      mimeType: response.mimeType,
+      supportsByteRangeAccess: urlResponseSupportsByteRangeAcces(response),
+      headerFields: headers,
+      savePath: dataPath + VideoCacheManager.mediaInfoSuffix
+    )
+    mediaInfo?.saveToFile()
+  }
+
+  func fill(forLoadingRequest request: AVAssetResourceLoadingRequest) {
+    guard let mediaInfo, let mimeType = mediaInfo.mimeType else {
+      return
+    }
+    let fakeResponse = HTTPURLResponse(url: url, statusCode: 200, httpVersion: nil, headerFields: mediaInfo.headerFields)
+    let contentType = UTType(mimeType: mimeType)?.identifier
+    if let contentType {
+      request.contentInformationRequest?.contentType = contentType
+      request.contentInformationRequest?.contentLength = mediaInfo.expectedContentLength
+      request.contentInformationRequest?.isByteRangeAccessSupported = mediaInfo.supportsByteRangeAccess
+      request.response = fakeResponse
+    }
+  }
+
+  func writeData(data: Data, offset: Int64) async {
+    do {
+      mediaInfo?.addDataRange(newDataRange: (Int(offset), Int(offset) + data.count))
+      mediaInfo?.saveToFile()
+      try fileHandle.write(data: data, atOffset: Int(offset))
+    } catch {
+      log.warn("Failed to write at offset with the file handle")
+    }
+  }
+
+  func requestData(from: Int64, to: Int64) -> Data? {
+    if canRespondWithData(from: from, to: to) {
+      return fileHandle.readData(withOffset: Int(from), forLength: Int(to - from) + 1)
+    }
+    return nil
+  }
+
+  func requestBeginningOfData(from: Int64, to: Int64) -> Data? {
+    guard let dataRange = mediaInfo?.loadedDataRanges.first(where: { dataStart, dataEnd in
+      from >= dataStart && from < dataEnd
+    }) else {
+      return nil
+    }
+
+    return fileHandle.readData(withOffset: Int(from), forLength: Int(dataRange.1 - Int(from)) + 1)
+  }
+
+  func canRespondWithData(from: Int64, to: Int64) -> Bool {
+    guard let loadedDataRanges = mediaInfo?.loadedDataRanges else {
+      return false
+    }
+    return loadedDataRanges.contains(where: { loadedDataRangeStart, loadedDataRangeEnd in
+      from >= loadedDataRangeStart && to <= loadedDataRangeEnd
+    })
+  }
+
+  private func urlResponseSupportsByteRangeAcces(_ urlResponse: HTTPURLResponse) -> Bool {
+    // The first option is the standard-correct one, but we can check for some more in case someone
+    // didn't follow the documention fully when implementing the server
+    return urlResponse.allHeaderFields["Accept-Ranges"] as? String == "bytes" ||
+      urlResponse.allHeaderFields["Accept-Ranges"] as? String == "Bytes" ||
+      urlResponse.allHeaderFields["accept-ranges"] as? String == "bytes" ||
+      urlResponse.allHeaderFields["accept-ranges"] as? String == "Bytes"
+  }
+}

package/ios/Cache/CachingHelpers.swift

@@ -0,0 +1,92 @@
+// Copyright 2024-present 650 Industries. All rights reserved.
+
+import Foundation
+import AVFoundation
+import CryptoKit
+import MobileCoreServices
+
+internal func getRangeFromResponse(response: HTTPURLResponse) -> (Int?, Int?) {
+  // Sometimes the server returns under non-capitalized letters
+  let fullString = (response.allHeaderFields["Content-Range"] ?? response.allHeaderFields["content-range"]) as? String
+  // Example string: bytes 0-158008373/158008374
+  let fullStringComponents = fullString?.components(separatedBy: "/").first?.components(separatedBy: " ")
+  guard let rangeStringComponents = fullStringComponents?[safe: 1]?.components(separatedBy: "-") else {
+    return (nil, nil)
+  }
+  let first = rangeStringComponents.first ?? ""
+  let second = rangeStringComponents.count > 1 ? rangeStringComponents[1] : ""
+
+  return (Int(first), Int(second))
+}
+
+internal func getRangeFromRequest(request: URLRequest) -> (Int?, Int?) {
+  guard let fullString = request.allHTTPHeaderFields?["Range"] else {
+    return (nil, nil)
+  }
+  let rangeString = fullString.replacingOccurrences(of: "bytes=", with: "")
+  let rangeStringComponents = rangeString.split(separator: "-", maxSplits: 1, omittingEmptySubsequences: false)
+  let first = rangeStringComponents.first ?? ""
+  let second = rangeStringComponents.count > 1 ? rangeStringComponents[1] : ""
+
+  return (Int(first), Int(second))
+}
+
+internal func mimeTypeToExtension(mimeType: String?) -> String? {
+  guard let mimeType else {
+    return nil
+  }
+
+  guard let mimeUTI = UTTypeCreatePreferredIdentifierForTag(kUTTagClassMIMEType, mimeType as CFString, nil)?.takeUnretainedValue() else {
+    return nil
+  }
+  return UTTypeCopyPreferredTagWithClass(mimeUTI, kUTTagClassFilenameExtension)?.takeRetainedValue() as? String
+}
+
+internal extension Int {
+  var MB: Int { return self * 1024 * 1024 }
+}
+
+internal extension Array {
+  subscript(safe index: Int) -> Element? {
+    return indices.contains(index) ? self[index] : nil
+  }
+}
+
+internal extension Data {
+  func subdata(request: URLRequest, response: HTTPURLResponse) -> Data? {
+    let (requestStart, requestEnd) = getRangeFromRequest(request: request)
+    let (responseStart, responseEnd) = getRangeFromResponse(response: response)
+
+    guard let responseStart, let responseEnd, let requestStart else {
+      return nil
+    }
+    // Error handling checks would actually occur here, similar to Objective-C version
+    guard requestStart >= responseStart, requestStart < responseEnd else {
+      return nil
+    }
+
+    let startIndex = requestStart - responseStart // Corrected start index calculation
+    var endIndex: Int // Define endIndex outside of conditional logic
+
+    if let requestEnd = requestEnd {
+      endIndex = startIndex + (requestEnd - requestStart) + 1 // Use safely unwrapped requestEnd
+    } else {
+      // If requestEnd is nil, assume data to the end of resource is needed
+      endIndex = self.count
+    }
+
+    if endIndex > self.count {
+      return nil
+    }
+
+    return self.subdata(in: startIndex..<endIndex)
+  }
+}
+
+internal extension URL {
+  func withScheme(_ scheme: String) -> URL? {
+    var components = URLComponents(url: self, resolvingAgainstBaseURL: false)
+    components?.scheme = scheme
+    return components?.url
+  }
+}

package/ios/Cache/MediaFileHandle.swift

@@ -0,0 +1,94 @@
+// Copyright 2024-present 650 Industries. All rights reserved.
+
+import Foundation
+import ExpoModulesCore
+
+/**
+ * Class meant to be used as a helper for handling files by the ResourceLoaderDelegate.
+ * All operations should be dispatched from the ResourceLoaderDelegate queue.
+ */
+internal class MediaFileHandle {
+  private let filePath: String
+  private let lock = NSLock()
+  private lazy var readHandle = FileHandle(forReadingAtPath: filePath)
+  private lazy var writeHandle = FileHandle(forWritingAtPath: filePath)
+
+  var attributes: [FileAttributeKey: Any]? {
+    do {
+      return try FileManager.default.attributesOfItem(atPath: filePath)
+    } catch let error as NSError {
+      log.warn("An error occured while reading the file attributes at \(filePath) error: \(error)")
+    }
+    return nil
+  }
+
+  var fileSize: Int {
+    return attributes?[.size] as? Int ?? 0
+  }
+
+  private var fileUrl: URL? {
+    URL(string: filePath)
+  }
+
+  init(filePath: String) {
+    self.filePath = filePath
+
+    if let fileUrl {
+      VideoCacheManager.shared.registerOpenFile(at: fileUrl)
+    }
+
+    if !FileManager.default.fileExists(atPath: filePath) {
+      FileManager.default.createFile(atPath: filePath, contents: nil, attributes: nil)
+    }
+  }
+
+  deinit {
+    if let fileUrl {
+      VideoCacheManager.shared.unregisterOpenFile(at: fileUrl)
+    }
+    guard FileManager.default.fileExists(atPath: filePath) else {
+      return
+    }
+
+    close()
+  }
+
+  func readData(withOffset offset: Int, forLength length: Int) -> Data? {
+    lock.lock()
+    defer { lock.unlock() }
+
+    readHandle?.seek(toFileOffset: UInt64(offset))
+    return readHandle?.readData(ofLength: length)
+  }
+
+  func write(data: Data, atOffset offset: Int) throws {
+    lock.lock()
+    defer { lock.unlock() }
+
+    guard let writeHandle = writeHandle else {
+      return
+    }
+
+    try writeHandle.seek(toOffset: UInt64(offset))
+
+    writeHandle.write(data)
+    writeHandle.synchronizeFile()
+  }
+
+  func append(data: Data) {
+    lock.lock()
+    defer { lock.unlock() }
+    guard let writeHandle = writeHandle else {
+      return
+    }
+
+    writeHandle.seekToEndOfFile()
+    writeHandle.write(data)
+    writeHandle.synchronizeFile()
+  }
+
+  func close() {
+    readHandle?.closeFile()
+    writeHandle?.closeFile()
+  }
+}