Nerds Publishing Monstrosities
    Have ideas to improve npm?Join in the discussion! »

    react-native-media-controls
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    react-native-media-controls

    A sweet UI component to manipulate your media. Strongly typed using Typescript.

    mediac

    Installation

       // install package
       yarn add react-native-media-controls
       // install react-native-slider, as this is a dependency of this library
       yarn add react-native-slider

    Usage

    // Require the module
    import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';
    
    const App = () => {
      const [currentTime, setCurrentTime] = useState(0);
      const [duration, setDuration] = useState(0);
      const [isFullScreen, setIsFullScreen] = useState(false);
      const [isLoading, setIsLoading] = useState(true);
      const [paused, setPaused] = useState(false);
      const [playerState, setPlayerState] = useState(PLAYER_STATES.PLAYING);
    
      // ... ... ...
      // ... ... ...
    
      return (
        <View style={styles.container}>
          <Video
            {...videoProps}
          />
          <MediaControls
            isFullScreen={isFullScreen}
            duration={duration}
            isLoading={isLoading}
            mainColor="orange"
            onFullScreen={noop}
            onPaused={onPaused}
            onReplay={onReplay}
            onSeek={onSeek}
            onSeeking={onSeeking}
            playerState={playerState}
            progress={currentTime}
          >
            <MediaControls.Toolbar>
              <View style={styles.toolbar}>
                <Text>I'm a custom toolbar </Text>
              </View>
            </MediaControls.Toolbar>
          </MediaControls>
        </View>
      );
    };

    Props

    Prop Type Optional Default Description
    mainColor string Yes rgba(12, 83, 175, 0.9) Change custom color to the media controls
    isLoading boolean Yes false When is loading
    isFullScreen boolean Yes false To change icon state of fullscreen
    fadeOutDelay number Yes 5000 Allows to customize the delay between fade in and fade out transition
    progress number No Current time of the media player
    duration number No Total duration of the media
    playerState number No Could be PLAYING, PAUSED or ENDED (take a look at constants section)
    onFullScreen function Yes Triggered when the fullscreen button is pressed. If not provided, the fullscreen icon is not displayed
    onPaused function No Triggered when the play/pause button is pressed. It returns the new toggled value (PLAYING or PAUSED)
    onReplay function Yes Triggered when the replay button is pressed
    onSeek function No Triggered when the user released the slider
    onSeeking function Yes Triggered when the user is interacting with the slider
    showOnStart boolean Yes true controls the visibility of the controls during the initial render

    Constants

      PLAYING,
      PAUSED,
      ENDED,

    Example

    Refer to the example folder to find an implementation of this project

    Install

    npm i react-native-media-controls

    DownloadsWeekly Downloads

    1,961

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    133 kB

    Total Files

    44

    Last publish

    Collaborators

    • avatar