@cinecrew/cinecrew-player 0.1.1

package/packages/react-native-vlc-media-player/VLCPlayer.js

@@ -0,0 +1,207 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import ReactNative from 'react-native';
+import PropTypes from 'prop-types';
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+
+const { StyleSheet, requireNativeComponent, View, UIManager } = ReactNative;
+
+const VLCPlayer = forwardRef(function VLCPlayer(props, forwardedRef) {
+  const {
+    autoplay = true,
+    source: sourceProp,
+    repeat,
+    onBuffering,
+    onError,
+    onOpen,
+    onLoadStart,
+    onProgress,
+    onEnd,
+    onStopped,
+    onPaused,
+    onPlaying,
+    onLoad,
+    onRecordingCreated,
+    onSnapshot,
+    ...otherProps
+  } = props;
+  const rootRef = useRef(null);
+  const lastRecordingRef = useRef(null);
+
+  useImperativeHandle(forwardedRef, () => {
+    const dispatchCommand = (command, args) => {
+      const viewTag = ReactNative.findNodeHandle(rootRef.current);
+      if (viewTag == null) return;
+      const manager = UIManager.getViewManagerConfig('RCTVLCPlayer');
+      const commandId = manager?.Commands?.[command];
+      if (commandId == null) return;
+      UIManager.dispatchViewManagerCommand(viewTag, commandId, args);
+    };
+    const setNativeProps = (nativeProps) => rootRef.current?.setNativeProps?.(nativeProps);
+
+    return {
+      setNativeProps,
+      startRecording: (path) => dispatchCommand('startRecording', [path]),
+      stopRecording: () => dispatchCommand('stopRecording', []),
+      stopPlayer: () => dispatchCommand('stopPlayer', []),
+      snapshot: (path) => dispatchCommand('snapshot', [path]),
+      seek: (position) => setNativeProps({ seek: position }),
+      resume: (shouldResume) => setNativeProps({ resume: shouldResume }),
+      autoAspectRatio: (isAuto) => setNativeProps({ autoAspectRatio: isAuto }),
+      changeVideoAspectRatio: (ratio) => setNativeProps({ videoAspectRatio: ratio }),
+      _onStopped: () => {
+        setNativeProps({ paused: true });
+        onStopped?.();
+      },
+    };
+  }, [onStopped]);
+
+  const handleNativeEvent = useCallback(
+    (callback) => (event) => callback?.(event.nativeEvent),
+    [],
+  );
+  const handleStopped = useCallback(
+    (event) => {
+      rootRef.current?.setNativeProps?.({ paused: true });
+      onStopped?.(event.nativeEvent);
+    },
+    [onStopped],
+  );
+  const handleRecordingState = useCallback(
+    (event) => {
+      const { isRecording, recordPath } = event.nativeEvent;
+      if (lastRecordingRef.current === recordPath) return;
+      if (!isRecording && recordPath) {
+        lastRecordingRef.current = recordPath;
+        onRecordingCreated?.(recordPath);
+      }
+    },
+    [onRecordingCreated],
+  );
+  const handleSnapshot = useCallback(
+    (event) => {
+      if (event.nativeEvent.success) onSnapshot?.(event.nativeEvent);
+    },
+    [onSnapshot],
+  );
+
+  const resolvedSource = resolveAssetSource(sourceProp) || {};
+  const source = { ...resolvedSource };
+  if (Array.isArray(resolvedSource.initOptions)) {
+    source.initOptions = [...resolvedSource.initOptions];
+  }
+
+  let uri = source.uri || '';
+  if (uri.startsWith('/')) uri = `file://${uri}`;
+
+  let isNetwork = /^https?:/i.test(uri);
+  const isAsset = /^(assets-library|file|content|ms-appx|ms-appdata):/i.test(uri);
+  if (!isAsset) isNetwork = true;
+  if (uri.startsWith('/')) isNetwork = false;
+  source.isNetwork = isNetwork;
+  source.autoplay = autoplay;
+  source.initOptions = source.initOptions || [];
+
+  if (repeat) {
+    const hasRepeatOption = source.initOptions.some(
+      (item) => item.startsWith('--repeat') || item.startsWith('--input-repeat'),
+    );
+    if (!hasRepeatOption) source.initOptions.push('--repeat');
+  }
+
+  const nativeProps = {
+    ...otherProps,
+    autoplay,
+    repeat,
+    style: [styles.base, otherProps.style],
+    source,
+    src: {
+      uri,
+      isNetwork,
+      isAsset,
+      type: source.type || '',
+      mainVer: source.mainVer || 0,
+      patchVer: source.patchVer || 0,
+    },
+    onVideoLoadStart: handleNativeEvent(onLoadStart),
+    onVideoOpen: handleNativeEvent(onOpen),
+    onVideoError: handleNativeEvent(onError),
+    onVideoProgress: handleNativeEvent(onProgress),
+    onVideoEnded: handleNativeEvent(onEnd),
+    onVideoEnd: handleNativeEvent(onEnd),
+    onVideoPlaying: handleNativeEvent(onPlaying),
+    onVideoPaused: handleNativeEvent(onPaused),
+    onVideoStopped: handleStopped,
+    onVideoBuffering: handleNativeEvent(onBuffering),
+    onVideoLoad: handleNativeEvent(onLoad),
+    onRecordingState: handleRecordingState,
+    onSnapshot: handleSnapshot,
+    progressUpdateInterval: onProgress ? 250 : 0,
+  };
+
+  return <NativeVLCPlayer ref={rootRef} {...nativeProps} />;
+});
+
+VLCPlayer.displayName = 'VLCPlayer';
+VLCPlayer.propTypes = {
+  rate: PropTypes.number,
+  seek: PropTypes.number,
+  resume: PropTypes.bool,
+  paused: PropTypes.bool,
+  autoAspectRatio: PropTypes.bool,
+  videoAspectRatio: PropTypes.string,
+  volume: PropTypes.number,
+  disableFocus: PropTypes.bool,
+  src: PropTypes.string,
+  playInBackground: PropTypes.bool,
+  playWhenInactive: PropTypes.bool,
+  resizeMode: PropTypes.string,
+  poster: PropTypes.string,
+  muted: PropTypes.bool,
+  audioTrack: PropTypes.number,
+  textTrack: PropTypes.number,
+  acceptInvalidCertificates: PropTypes.bool,
+  onVideoLoadStart: PropTypes.func,
+  onVideoError: PropTypes.func,
+  onVideoProgress: PropTypes.func,
+  onVideoEnded: PropTypes.func,
+  onVideoEnd: PropTypes.func,
+  onVideoPlaying: PropTypes.func,
+  onVideoPaused: PropTypes.func,
+  onVideoStopped: PropTypes.func,
+  onVideoBuffering: PropTypes.func,
+  onVideoOpen: PropTypes.func,
+  onVideoLoad: PropTypes.func,
+  onRecordingState: PropTypes.func,
+  onSnapshot: PropTypes.func,
+  autoplay: PropTypes.bool,
+  source: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.string]),
+  repeat: PropTypes.bool,
+  onBuffering: PropTypes.func,
+  onError: PropTypes.func,
+  onOpen: PropTypes.func,
+  onLoadStart: PropTypes.func,
+  onProgress: PropTypes.func,
+  onEnd: PropTypes.func,
+  onEnded: PropTypes.func,
+  onStopped: PropTypes.func,
+  onPaused: PropTypes.func,
+  onPlaying: PropTypes.func,
+  onLoad: PropTypes.func,
+  onRecordingCreated: PropTypes.func,
+  scaleX: PropTypes.number,
+  scaleY: PropTypes.number,
+  translateX: PropTypes.number,
+  translateY: PropTypes.number,
+  rotation: PropTypes.number,
+  ...View.propTypes,
+};
+
+const NativeVLCPlayer = requireNativeComponent('RCTVLCPlayer', VLCPlayer);
+
+const styles = StyleSheet.create({
+  base: {
+    overflow: 'hidden',
+  },
+});
+
+export default VLCPlayer;

package/packages/react-native-vlc-media-player/expo/android/withGradleTasks.cjs

@@ -0,0 +1,49 @@
+const { withAppBuildGradle } = require('@expo/config-plugins');
+const generateCode = require('@expo/config-plugins/build/utils/generateCode');
+
+const resolveAppGradleString = (options) => {
+  const rnJetifierName = options?.android?.legacyJetifier
+    ? 'jetified-react-native'
+    : 'jetified-react-android';
+
+  return `tasks.whenTaskAdded((tas -> {
+        if (tas.name.contains("merge") && tas.name.contains("NativeLibs")) {
+            tasks.named(tas.name) {it
+                doFirst {
+                    java.nio.file.Path notNeededDirectory = it.externalLibNativeLibs
+                            .getFiles()
+                            .stream()
+                            .filter(file -> file.toString().contains("${rnJetifierName}"))
+                            .findAny()
+                            .orElse(null)
+                            .toPath();
+                    java.nio.file.Files.walk(notNeededDirectory).forEach(file -> {
+                        if (file.toString().contains("libc++_shared.so")) {
+                            java.nio.file.Files.delete(file);
+                        }
+                    });
+                }
+            }
+        }
+    }))`;
+};
+
+const withGradleTasks = (config, options) => {
+  if (!options?.android) return config;
+
+  return withAppBuildGradle(config, (modConfig) => {
+    const newCode = generateCode.mergeContents({
+      tag: 'withVlcMediaPlayer',
+      src: modConfig.modResults.contents,
+      newSrc: resolveAppGradleString(options),
+      anchor: /applyNativeModulesAppBuildGradle\(project\)/i,
+      offset: 2,
+      comment: '//',
+    });
+
+    modConfig.modResults.contents = newCode.contents;
+    return modConfig;
+  });
+};
+
+module.exports = withGradleTasks;

package/packages/react-native-vlc-media-player/expo/ios/withMobileVlcKit.cjs

@@ -0,0 +1,28 @@
+const { withDangerousMod } = require('@expo/config-plugins');
+const generateCode = require('@expo/config-plugins/build/utils/generateCode');
+const path = require('node:path');
+const fs = require('node:fs');
+
+const withMobileVlcKit = (config, options) => {
+  if (!options?.ios?.includeVLCKit) return config;
+
+  return withDangerousMod(config, [
+    'ios',
+    (modConfig) => {
+      const filePath = path.join(modConfig.modRequest.platformProjectRoot, 'Podfile');
+      const contents = fs.readFileSync(filePath, 'utf-8');
+      const newCode = generateCode.mergeContents({
+        tag: 'withVlcMediaPlayer',
+        src: contents,
+        newSrc: "  pod 'MobileVLCKit', '3.3.10'",
+        anchor: /use_expo_modules!/i,
+        offset: 3,
+        comment: '  #',
+      });
+      fs.writeFileSync(filePath, newCode.contents);
+      return modConfig;
+    },
+  ]);
+};
+
+module.exports = withMobileVlcKit;

package/packages/react-native-vlc-media-player/expo/withVlcMediaPlayer.cjs

@@ -0,0 +1,10 @@
+const withGradleTasks = require('./android/withGradleTasks.cjs');
+const withMobileVlcKit = require('./ios/withMobileVlcKit.cjs');
+
+const withVlcMediaPlayer = (config, options) => {
+  config = withGradleTasks(config, options);
+  config = withMobileVlcKit(config, options);
+  return config;
+};
+
+module.exports = withVlcMediaPlayer;

package/packages/react-native-vlc-media-player/index.d.ts

@@ -0,0 +1,354 @@
+import type { Component } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+/**
+ * Video aspect ratio type
+ */
+export type PlayerAspectRatio = "16:9" | "1:1" | "4:3" | "3:2" | "21:9" | "9:16";
+
+/**
+ * Video resize mode
+ */
+export type PlayerResizeMode = "fill" | "contain" | "cover" | "none" | "scale-down";
+
+/**
+ * VLC Player source configuration options
+ */
+export interface VLCPlayerSource {
+  /**
+   * Media source URI to render
+   */
+  uri: string;
+  /**
+   * VLC Player initialization type
+   * 
+   *  - Default configuration: `1`
+   *  - Custom configuration: `2`
+   * 
+   * See `initOptions` for more information
+   * 
+   * @default 1
+   */
+  initType?: 1 | 2;
+  /**
+   * https://wiki.videolan.org/VLC_command-line_help/
+   * 
+   * VLC Player initialization options
+   * 
+   * `["--network-caching=50", "--rtsp-tcp"]`
+   * 
+   * If `repeat` is set on props this will default to ["--repeat"] unless
+   * another `--repeat` or `--input-repeat` flag is passed.
+   * 
+   * @default []
+   */
+  initOptions?: string[];
+}
+
+/**
+ * Represents a track type in playback
+ */
+export type Track = {
+  /**
+   * Track identification
+   */
+  id: number;
+
+  /**
+   * Track name
+   */
+  name: string;
+};
+
+/**
+ * Represents a full playback information
+ */
+export type VideoInfo = {
+  /**
+   * Total playback duration
+   */
+  duration: number;
+
+  /**
+   * Playback target
+   */
+  target: number;
+
+  /**
+   * Total playback video size
+   */
+  videoSize: Record<"width" | "height", number>;
+
+  /**
+   * List of playback audio tracks
+   */
+  audioTracks: Track[];
+
+  /**
+   * List of playback text tracks
+   */
+  textTracks: Track[];
+};
+
+type OnPlayingEventProps = Pick<VideoInfo, "duration" | "target"> & {
+  seekable: boolean;
+};
+
+type OnProgressEventProps = Pick<VideoInfo, "duration" | "target"> & {
+  /**
+   * Current playback time
+   */
+  currentTime: number;
+
+  /**
+   * Current playback position
+   */
+  position: number;
+
+  /**
+   * Remaining time to end playback
+   */
+  remainingTime: number;
+};
+
+type SimpleCallbackEventProps = Pick<VideoInfo, "target">;
+
+export type VLCPlayerCallbackProps = {
+  /**
+   * Called when media starts playing returns
+   *
+   * @param event - Event properties
+   */
+  onPlaying?: (event: OnPlayingEventProps) => void;
+
+  /**
+   * Callback containing position as a fraction, and duration, currentTime and remainingTime in seconds
+   *
+   * @param event - Event properties
+   */
+  onProgress?: (event: OnProgressEventProps) => void;
+
+  /**
+   * Called when media is paused
+   *
+   * @param event - Event properties
+   */
+  onPaused?: (event: SimpleCallbackEventProps) => void;
+
+  /**
+   * Called when media is stoped
+   *
+   * @param event - Event properties
+   */
+  onStopped?: (event: SimpleCallbackEventProps) => void;
+
+  /**
+   * Called when media is buffering
+   *
+   * @param event - Event properties
+   */
+  onBuffering?: (event: SimpleCallbackEventProps) => void;
+
+  /**
+   * Called when media playing ends
+   *
+   * @param event - Event properties
+   */
+  onEnd?: (event: SimpleCallbackEventProps) => void;
+
+  /**
+   * Called when an error occurs whilst attempting to play media
+   *
+   * @param event - Event properties
+   */
+  onError?: (event: SimpleCallbackEventProps) => void;
+
+  /**
+   * Called when video info is loaded, Callback containing `VideoInfo`
+   *
+   * @param event - Event properties
+   */
+  onLoad?: (event: VideoInfo) => void;
+
+  /**
+   * Called when a new recording is created
+   *
+   * @param recordingPath - Full path to the recording file
+   */
+  onRecordingCreated?: (recordingPath: string) => void;
+
+  /**
+   * Called when a new snapshot is created
+   *
+   * @param event - Event properties
+   */
+  onSnapshot?: (event: {
+    success: boolean;
+    path?: string;
+    error?: string;
+  }) => void;
+};
+
+export type VLCPlayerProps = VLCPlayerCallbackProps & {
+  /**
+   * Object that contains the uri of a video or song to play eg
+   */
+  source: VLCPlayerSource;
+
+  /**
+   * local subtitle file path，if you want to hide subtitle,
+   * you can set this to an empty subtitle file，
+   * current we don't support a hide subtitle prop.
+   */
+  subtitleUri?: string;
+
+  /**
+   * Set to `true` or `false` to pause or play the media
+   * @default false
+   */
+  paused?: boolean;
+
+  /**
+   * Set to `true` or `false` to loop the media
+   * @default false
+   */
+  repeat?: boolean;
+
+  /**
+   * Set the playback rate of the player
+   * @default 1
+   */
+  rate?: number;
+
+  /**
+   * Set position to seek between 0 and 1
+   * (0 being the start, 1 being the end, use position from the progress object)
+   */
+  seek?: number;
+
+  /**
+   * Set the volume of the player
+   */
+  volume?: number;
+
+  /**
+   * Set to `true` or `false` to mute the player
+   * @default false
+   */
+  muted?: boolean;
+
+  /**
+   * Set audioTrack id (number) (see onLoad callback VideoInfo.audioTracks)
+   */
+  audioTrack?: number;
+
+  /**
+   * 	Set textTrack(subtitle) id (number) (see onLoad callback - VideoInfo.textTracks)
+   */
+  textTrack?: number;
+
+  /**
+   * Set to `true` or `false` to allow playing in the background
+   * @default false
+   */
+  playInBackground?: boolean;
+
+  /**
+   * Video aspect ratio
+   */
+  videoAspectRatio?: PlayerAspectRatio;
+
+  /**
+   * Set to `true` or `false` to enable auto aspect ratio
+   * @default false
+   */
+  autoAspectRatio?: boolean;
+
+  /**
+   * Set the behavior for the video size (fill, contain, cover, none, scale-down)
+   */
+  resizeMode?: PlayerResizeMode;
+
+  /**
+   * React native view stylesheet styles
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Enables autoplay
+   *
+   * @default true
+   */
+  autoplay?: boolean;
+
+  /**
+   * Set to `true` to automatically accept invalid SSL/TLS certificates
+   * when connecting to HTTPS streams. This bypasses certificate validation
+   * which may pose security risks.
+   *
+   * @default false
+   */
+  acceptInvalidCertificates?: boolean;
+};
+
+declare class PlaybackMethods<T> extends Component<T> {
+  /**
+   * Start a new recording session at the given path
+   * @param path Directory to create new recording in
+   */
+  startRecording(path: string);
+
+  /**
+   * Stop current recording session
+   */
+  stopRecording();
+
+  /**
+   * Stop playing 
+   */
+  stopPlayer();
+
+  /**
+   * Take a screenshot of the current video frame
+   *
+   * @param path The file path where to save the screenshot
+   */
+  snapshot(path: string);
+
+  /**
+   * Seek to the given position
+   * 
+   * @param pos Position to seek to (as a percentage of the full duration)
+   */
+  seek(pos: number);
+
+  /**
+   * Resume playback
+   */
+  resume();
+
+  /**
+   * Change auto aspect ratio setting
+   * 
+   * @param useAuto Whether or not to use auto aspect ratio
+   */
+  autoAspectRatio(useAuto: boolean);
+  
+  /**
+   * Update video aspect ratio e.g. `"16:9"`
+   * 
+   * @param ratio Aspect ratio to use
+   */
+  changeVideoAspectRatio(ratio: string);
+}
+
+/**
+ * A component that can be used to show a playback
+ */
+declare class VLCPlayer extends PlaybackMethods<VLCPlayerProps> {}
+
+/**
+ * A component that renders a playback with additional
+ * features like fullscreen, controls, etc.
+ */
+declare class VlCPlayerView extends PlaybackMethods<any> {}

package/packages/react-native-vlc-media-player/ios/RCTVLCPlayer/RCTVLCPlayer.h

@@ -0,0 +1,36 @@
+#import "React/RCTView.h"
+#if TARGET_OS_TV
+#import <TVVLCKit/TVVLCKit.h>
+#else
+#import <MobileVLCKit/MobileVLCKit.h>
+#endif
+
+@class RCTEventDispatcher;
+
+@interface RCTVLCPlayer : UIView <VLCCustomDialogRendererProtocol>
+
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoProgress;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoPaused;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoStopped;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoBuffering;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoPlaying;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoEnded;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoError;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoOpen;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoLoadStart;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoLoad;
+@property (nonatomic, copy) RCTBubblingEventBlock onRecordingState;
+@property (nonatomic, copy) RCTBubblingEventBlock onSnapshot;
+
+@property (nonatomic, strong) VLCDialogProvider *dialogProvider;
+@property (nonatomic, assign) BOOL acceptInvalidCertificates;
+
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
+- (void)setMuted:(BOOL)value;
+- (void)setPlayInBackground:(BOOL)value;
+- (void)setPlayWhenInactive:(BOOL)value;
+- (void)startRecording:(NSString*)path;
+- (void)stopRecording;
+- (void)stopPlayer;
+- (void)snapshot:(NSString*)path;
+@end