Code Monkey home page Code Monkey logo

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

basic usage Custom usage

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

abdullahceylan avatar alantoa avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.