elmadev / recplayer-react

React component for recplayer.

recplayer-react

React component for recplayer.

Example usage

Run npm install recplayer-react

import RecPlayer from "recplayer-react";

<RecPlayer
  recUrl="http://janka.la:5050/downloads/brec/129645"
  levUrl="http://janka.la:5050/downloads/lev/398698"
  width="auto"
  height={200}
  zoom={0.7}
  controls
  autoPlay
  wakeLock
  imageUrl="http://www.recsource.tv/images"
  onInitialize={cnt => someFunction(cnt)}
  onPlayPause={isPlaying => someFunction(isPlaying)}
  frame={250}
  fitLev
  showStartPos
  levelOptions={{
    grass: true,
    pictures: true,
    customBackgroundSky: true,
  }}
/>

The width and height properties can be set either as pixel values, or as "auto" in which case the player will be resized to the size of the parent element. The zoom property sets the initial zoom level of the player. The recUrl and levUrl are of course the urls of the files that should be loaded. If you add controls property to the component player controls will be overlaid on the player. With autoPlay property you can control whether the the playback of the replay will start automatically or not, default value is false. You can pass in a custom url where the recplayer will load the images with the imageUrl property. Use wakeLock prop to prevent display going off during a replay playback (implemented using the wakeLock api https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API). You can pass a callback function to onPlayPause prop which will be called whenever the player pauses or resumes playback. The function receives a boolean value as a parameter indicating whether the player is playing or not. Use frame prop to pass in a frame number where the player should resume playback. This only works when a replay is already loaded on the player; when you change the value of this prop the player will automatically jump to the given frame. Useful if you want to skip to some certain part of the replay from the code. The fitLev prop will set the zoom level so entire level is visible in the player. The showStartPos prop will show a bike in the start position of the level, this can only be used when there is no recUrl.

Setting up the dev environment

If you want to develop this project follow these instructions:

1. Clone this repo
2. In the project folder run npm i
3. Run npm start
   • Rollup (https://rollupjs.org/) will build the bundle and watch the files; new build will be generated whenever you make changes to the code
4. Clone https://github.com/elmadev/elmaonline-web
   • in that project folder run npx link "path_to_recplayer-react_folder"
5. Your local recplayer-react is now symlinked to elmaonline-web project and you can see and test your changes live there

recplayer-react's Issues

Option to merge or not

Currently if you change only recUrl parameter it will merge with the replays, would be nice to have the option to select if you want this or not.

Could also have the option to give an array of recUrl's to merge directly.

Grass, pictures and custombackground as parameters

These can be turned on off with keyboard shortcuts currently. If added as parameters an app can choose a default or let the user save a setting.

Click to play/pause, doubleclick to fullscreen

Can be more convenient than having to find the controls and something people are used to from the likes of youtube.

Pinch to zoom on mobile

As zoom currently happens with mousewheel there's no way to do this on mobile.

onPlay prop vs. wakeLock

Preventing screen sleep during rec playback was suggested over on elmaonline-site elmadev/elmaonline-site#558 but I realised we can't implement that since only inside recplayer-react do you know if rec is currently playing or not. So as I see it the options are to either implement an onPlay callback prop or implement wakeLock in recplayer-react, but not sure what makes most sense. Any thoughts?

Option to self host images or host them on ssl

The images loaded from http://www.recsource.tv/images breaks SSL if you're using that. Would be nice with an option to specifiy the url for self hosting it, or host them on SSL. Alternatively include them in the package.