• Stars
    star
    99
  • Rank 343,315 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 9 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

This is a react native media player with external display controller. Support photo, video, music and background mode.

React Native Media Player

This is a react native media player with external display controller. Support photo, video, music and background mode.

NOTE If your RN version <= 0.28, please keep use v0.2.x.

Installation

$ npm install react-native-fs react-native-media-player --save
$ react-native link

Usage

Initialize

You just simply need to import react-native-media-player in your js world

import MediaPlayer from "react-native-media-player";

Get Support File Type List

You can get the support file type list programatically

MediaPlayer.getSupportFileTypeList();

Virtual Screen

When initialize react-native-media-player you can see one black virtual screen on your main screen. Once you plug your external display it will disappear and turn you content rend on external display. You also can show / hide your virtual screen manually when there is no external display connected.

// Show the virtual screen
await MediaPlayer.showVirtualScreen();
// Hide the virtual screen
await MediaPlayer.hideVirtualScreen();

You also can fix the virtual screen layout and disable all gesture recognizer.

// Set Virtual Screen Layout
// x: number			# The absolute x position of screen
// y: number			# The absolute y position of screen
// width: number		# New width of virtual screen
// height: number	# New height of virtual scree
// lock: bool			# Disable all gesture recognizer

MediaPlayer.setVirtualScreenLayout(0, 0, 400, 300, false);

// Or you can get your layout rect by
<View style={style.renderContainer} onLayout={(event) => {
	this.setState({
		layout: event.nativeEvent.layout;
	});
}}>

// And set layout
MediaPlayer.setVirtualScreenLayout(
	this.state.layout.x,
	this.state.layout.y,
	this.state.layout.width,
	this.state.layout.height,
	true
);

Push Image or Video

Currently only support rend image file type *.png, *.jpg and video file type *.mp4.

// Push Image
// path:     string        # The absolute path for image source
// duration: number        # Image rend duration in milliseconds
// pushWay:  string[enum]  # The way push this media (see Push Way below)

try{
	let containerId = await MediaPlayer.pushImage(image_file_path, 2000, MediaPlayer.PUSH_WAY.AtLast);
	console.log("Image Container ID:" + containerId);
}
catch(err){
	showErrorMessage(err);
}

// Push Video
// path:     string        # The absolute path for video source
// pushWay:  string[enum]  # The way push this media (see Push Way below)

try{
	let containerId = await MediaPlayer.pushVideo(video_file_path, MediaPlayer.PUSH_WAY.AtLast);
	console.log("Video Container ID:" + containerId);
}
catch(err){
	showErrorMessage(err);
}

Push Way

This player have a simple rend queue. So you can push your media with four kind of way:

Push Way Description
MediaPlayer.PUSH_WAY.AtLast Place the media at end of queue
MediaPlayer.PUSH_WAY.AfterNow Place the media next rend position, it will rend after current rending media finish his own job
MediaPlayer.PUSH_WAY.Interrupt This will rendout current rending media and rendin new media immediately, the other media which already in queue will still rend after this finish
MediaPlayer.PUSH_WAY.ClearOther This will rendout current rending media and rendin new media immediately, and clear all other media which already in queue

Clear Queue

You can simply call clear() to remove all item in playlist.

// Clear all item
// keepCurrentPlaying: bool   # Set true if you do not want to disturb current playing item 

let keepCurrentPlaying = true;
MediaPlayer.clear(keepCurrentPlaying);m

Background

If set the backgroud image for media player. The image will auto rend when render is idle. And you can use clearBackground to remove background image.

MediaPlayer.setBackground(background_image_path);
MediaPlayer.clearBackground();

Group

This player support a single group let you can play a bunch of media with random order or repeat mode. When using group you must create group first and then add some image or video. After you setup all your metarial just call play() the group will auto control those media as you want.

Create your group first

// repeat: bool    # Group will auto replay when all item rend finished
// random: bool    # Group will random the queue order every time to start playing group

MediaPlayer.createGroup(repeat, random);

Make your playlist

Like the queue, you can push image, video, audio(not support yet) to rend.

// Push image or video
// pathList:  string        # The absolute path list for images, videos, musics source
// duration:  number        # Image rend duration in milliseconds
// reRendAll: bool          # When push a new item to group rerend all item immediately
MediaPlayer.group.pushImages(pathList, duration, reRendAll);
MediaPlayer.group.pushVideos(pathList, reRendAll);
MediaPlayer.group.pushMusics(pathList);

Let's rock

Now you can play your playlist just one call, sure you can stop it. The better thing is we will keep the group let you start again util you delete it.

MediaPlayer.group.start();
MediaPlayer.group.stop();

Delete group

Currently you can only have one group at a time, so when you need a new group you will need delete old group first.

MediaPlayer.deleteGroup();

Event

Media player will emit render status and group status. You can subscribe the channel to receive below event.

MediaPlayer.subscribe(MediaPlayer.EVENT_CHANNEL.RENDER_STATUS, callback);
MediaPlayer.subscribe(MediaPlayer.EVENT_CHANNEL.MUSIC_STATUS, callback);
MediaPlayer.subscribe(MediaPlayer.EVENT_CHANNEL.GROUP_STATUS, callback);
Channel Status Parameter Description
EVENT_CHANNEL.RENDER_STATUS Idle containerId Fire when there is no item to rend
EVENT_CHANNEL.RENDER_STATUS Rending containerId Start rend an item
EVENT_CHANNEL.RENDER_STATUS RendOut Fire when an item start rend out
Channel Status Parameter Description
EVENT_CHANNEL.MUSIC_STATUS Playing musicId Start play a music
EVENT_CHANNEL.MUSIC_STATUS End musicId Music stopped
Channel Status Parameter Description
EVENT_CHANNEL.GROUP_STATUS Start Start a group, include auto replay
EVENT_CHANNEL.GROUP_STATUS Stop Stop a group
EVENT_CHANNEL.GROUP_STATUS RendStart Rend start, include auto replay
EVENT_CHANNEL.GROUP_STATUS RendStop Stop rend
EVENT_CHANNEL.GROUP_STATUS RendFinished All item in group are rended once, both before replay group and stop rend a group will fire this event
EVENT_CHANNEL.GROUP_STATUS ReRend When push a new item and set reRendAll
EVENT_CHANNEL.GROUP_STATUS PushRend Add new item to rend
EVENT_CHANNEL.GROUP_STATUS MusicStart Start play a music in group
EVENT_CHANNEL.GROUP_STATUS MusicStop Music stopped
EVENT_CHANNEL.GROUP_STATUS MusicFinished All music in group are played once, both before replay group and stop a group will fire this event
EVENT_CHANNEL.GROUP_STATUS PushMusic When push a music into group

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Roadmap

  • Android support
  • Test coverage
  • Image transitions
  • Music play
  • Support react native reload
  • Stop music when video playing
  • Virtual display control

Known Issues

History

TODO: Write history

Credits

TODO: Write credits

License

MIT

More Repositories

1

whisper.rn

React Native binding of whisper.cpp.
C
282
star
2

react-native-external-display

React Native view renderer in External Display
Java
191
star
3

llama.rn

React Native binding of llama.cpp
C++
164
star
4

react-native-s3

A React Native wrapper for AWS iOS/Android S3 SDK.
Objective-C
92
star
5

react-native-media-meta

Get media file metadata in your React Native app
Objective-C
81
star
6

react-native-xprinter

This is an android xprinter driver.
Java
13
star
7

react-native-multi-ble-peripheral

Multiple BLE Peripheral Manager on React Native
Kotlin
8
star
8

react-native-jsi-udp

C++
7
star
9

react-native-google-firebase

Firebase 3 (google version) native framework wrap.
Objective-C
6
star
10

react-native-call-modal

This module let you use api call to open React Native Modal and provide some basic panel most commonly.
JavaScript
6
star
11

react-native-global-keyevent

React Native module for listen global key event
Objective-C
4
star
12

react-native-web-sound

React Native for Web implementation of react-native-sound
JavaScript
4
star
13

llama.node

Node.js binding of Llama.cpp
C++
3
star
14

react-native-video-player

Video player for React Native
Kotlin
3
star
15

reanimated-easing

Use easing functions followed by `easings.net` in `React Native Reanimated`
JavaScript
3
star
16

image-mosaic

Creates an image mosaic with Node
JavaScript
3
star
17

yarn-workspace-sync-deps

A simple script for keeping dependencies are same between root and packages on Yarn workspaces
JavaScript
2
star
18

babel-plugin-react-native-electron

Babel plugin like `babel-plugin-react-native-web` for `react-native-electron`
JavaScript
1
star
19

bark.rn

Bark.cpp integration for React Native
C
1
star
20

react-native-skia-offscreencanvas

The browser-like OffscreenCanvas API for React Native.
JavaScript
1
star