alantoa / expo-reanimated-av-player Goto Github PK

A high-performance, interactive and customizable video player control, built upon Reanimated v2 & GestureHandler v2

License: MIT License

Shell 0.14% JavaScript 2.83% TypeScript 81.53% Starlark 1.87% Java 7.88% Ruby 1.91% Objective-C 3.63% C 0.10% Swift 0.11%

expo-reanimated-av-player's Introduction

`JSThread` to `JSThread`, `UIThread` to `UIThread`.

React Native Reanimated Expo Player

100% written in Typescript video player component, interaction is like Youtube player.

Player basic usage	▶️ Custom usage for example

▶️ Watch example video

Installation

First you have to follow installation instructions of:

yarn add expo-reanimated-av-player

Example usage

import VideoPlayer from 'expo-reanimated-av-player';
import { useSharedValue } from 'react-native-reanimated';
export const Example = () => {
  const videoHeight = useSharedValue(0);
  const isFullScreen = useSharedValue(false);

  return (
    <VideoPlayer
      source={videoInfo.source}
      headerBarTitle={`fullscreen title`}
      onToggleAutoPlay={(state: boolean) => {
        console.log(`onToggleAutoPlay state: ${state}`);
      }}
      videoDefaultHeight={VIDEO_DEFAULT_HEIGHT}
      videoHeight={videoHeight}
      resizeMode="cover"
      isFullScreen={isFullScreen}
      onTapBack={() => {
        console.log('onTapBack');
      }}
      onTapMore={() => {
        console.log('onTapMore');
      }}
    />
  );
};

Features

100% written in TypeScript.
100% built upon react-native-reanimated and react-native-gusture-handler.
Support gestures switch full screen.
Support double tap seek to back or ahead.
...

Configuration

The <VideoPlayer/> component has the following configuration properties:

Name	Type	Description	Required	Default Value
theme	object	The slider theme color	❌	{ // Color to fill the progress in the seekbar minimumTrackTintColor: string, // Color to fill the background in the seekbar maximumTrackTintColor: string, // Color to fill the cache in the seekbar cacheTrackTintColor: string, // Color to fill the bubble backgroundColor disableMinTrackTintColor: string, // Disabled color to fill the progress in the seekbar bubbleBackgroundColor: string }
showOnStart	boolean	control view init show	❌	false
onEnterFullscreen	function	on enter fullscreen callback	❌	undefined
onExitFullscreen	function	on exit fullscreen callback	❌	undefined
controlTimeout	nubmer	How long to hide the control view after showing	❌	2000
videoDefaultHeight	number	video default height	❌	screenWidth * (9 / 16)
headerBarTitle	string	header bar title on fullscreen mode	❌	undefined
onTapBack	function	tap header bar Icon-'Back' callback	❌	undefined
navigation	any	navigation	❌	undefined
autoPlay	boolean	auto play	❌	false
onToggleAutoPlay	function	on toggle auto play	❌	undefined
onTapMore	function	tap headerbar Icon-'More' callback	❌	undefined
doubleTapInterval	number	double tap interval	❌	undefined
paused	boolean	video paused	✅	undefined
onPausedChange	boolean	on change video paused	❌	undefined
onTapPause	function	on tap video paused	❌	undefined
sliderProps	object	react-native-awesome-slider props	❌	undefined
videoHeight	Animated.SharedValue	video height	✅	width * (9 / 16);
customAnimationStyle	Animated Viewstyle	video height	❌	width * (9 / 16);
onCustomPanGesture	PanGesture	custom pan gesture	❌	width * (9 / 16);
isFullScreen	Animated ShareValue	fullScreen status	✅	undefined
disableControl	boolean	control view status	❌	undefined
renderBackIcon	JSX	custom back icon	❌	undefined
renderFullScreenBackIcon	JSX	custom full's fullscreen icon	❌	undefined
renderMore	JSX	custom more icon	❌	undefined
renderFullScreen	JSX	custom fullscreen icon	❌	undefined

expo-reanimated-av-player's People

Contributors

Stargazers

Watchers

Forkers

ahnafnafee ehxxn tumme abdullahceylan codemeemoinc iwater estpla goupbusiness-llc gedoz tconns herberthk

expo-reanimated-av-player's Issues

TypeError: Attempted to assign to readonly property.

I am getting this error just after importing the component. What should I do to fix this?

Tried to synchronously call anonymous function from a different thread

Got this error while trying to implement the player. No idea about how to fix it...

  "dependencies": {
    "@babel/preset-env": "^7.1.6",
    "expo": "~47.0.12",
    "expo-av": "^13.0.2",
    "expo-screen-orientation": "^5.0.1",
    "expo-status-bar": "~1.4.2",
    "lottie-ios": "^3.4.0",
    "lottie-react-native": "^5.1.4",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-awesome-slider": "^2.3.0",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-reanimated": "~2.12.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-web": "~0.18.9"
  }

Invariant Violation: Tried to register two views with the same name RNGestureHandlerRootView

TypeError: null is not an object (evaluating 'safeGetViewManagerConfig('LottieAnimationView').Commands')

After installing the package and use it as same as the example in the Readme, I'm getting the following error:

TypeError: null is not an object (evaluating 'safeGetViewManagerConfig('LottieAnimationView').Commands')

This error is located at:
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (at LottieView.js:178)
    in RCTView (created by View)
    in View (at LottieView.js:177)
    in LottieView (created by ExpoAvPlayer)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by ExpoAvPlayer)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown
    in RCTView (created by View)
    in View
    in Unknown
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by ExpoAvPlayer)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by ExpoAvPlayer)
    in Wrap (created by AnimatedComponent(Wrap))
    in AnimatedComponent(Wrap)
    in Unknown (created by GestureDetector)
    in GestureDetector (created by ExpoAvPlayer)
    in ExpoAvPlayer (created by DisplayVideoScreen)

According to the Lottie documentation, it is happening due to the non-linked Lottie. So do we need to link lottie-react-native manually? If so, can you please update the readme?

Unable to run with Expo 44

Hello, I'm following the installation instructions and trying to set up the provided Example component. I receive the error below, seems renimated related, have you run into this?

TypeError: this.InnerNativeModule.configureProps is not a function. (In 'this.InnerNativeModule.configureProps(uiProps, nativeProps)', 'this.InnerNativeModule.configureProps' is undefined)
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError  
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl       
at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error   
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error    
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\@react-native\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules\metro-runtime\src\polyfills\require.js:204:6 in guardedLoadModule
at http://192.168.1.22:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:274417:3 in global code

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError  
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl       
at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error   
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error    
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\@react-native\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:367:8 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue

babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

VideoScreen.tsx

import * as React from "react";
import { Dimensions, StyleSheet } from "react-native";
import VideoPlayer from "expo-reanimated-av-player";
import { SafeAreaView } from "react-native-safe-area-context";
import { useSharedValue } from "react-native-reanimated";
import { StackScreenProps } from "@react-navigation/stack";
import { UserStackParamList } from "../navigation/UserStack";

const width = Dimensions.get("window").width;
const VIDEO_DEFAULT_HEIGHT = width;

type Props = StackScreenProps<UserStackParamList, "Video">;

const VideoScreen: React.FC<Props> = ({ navigation }) => {
  const videoHeight = useSharedValue(0);
  const isFullScreen = useSharedValue(false);

  return (
    <SafeAreaView style={styles.container}>
      <VideoPlayer
        source={{ uri: "YOUTUBE_URL_HERE" }}
        headerBarTitle={`fullscreen title`}
        onToggleAutoPlay={(state: boolean) => {
          console.log(`onToggleAutoPlay state: ${state}`);
        }}
        videoDefaultHeight={VIDEO_DEFAULT_HEIGHT}
        videoHeight={videoHeight}
        resizeMode="cover"
        isFullScreen={isFullScreen}
        onTapBack={() => {
          console.log("onTapBack");
        }}
        onTapMore={() => {
          console.log("onTapMore");
        }}
      />
    </SafeAreaView>
  );
};

export default VideoScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

package.json deps

 "dependencies": {
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.1.1",
    "dotenv": "^16.0.0",
    "expo": "~44.0.0",
    "expo-av": "~10.2.0",
    "expo-constants": "~13.0.1",
    "expo-keep-awake": "~10.0.1",
    "expo-reanimated-av-player": "^0.2.0",
    "expo-status-bar": "~1.2.0",
    "firebase": "^9.6.10",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "typescript": "~4.3.5"
  },