@collaborne/video-player
v1.1.16
Published
Media player for carrot-app
Downloads
296
Keywords
Readme
@collaborne/video-player 1.1.10
A media player build in React on top of CookPete/react-player.It supports the MUI theming and components and own functionality of the Picture-in-Picture and Fullscreen API. And yes, it is updated to React v18 :balloon:!
You can play both: audio and video files.
Note: At the moment we support video and audio files URL. Youtube, twitch and other media streaming services URL's are not supported yet.
Introduction
@collaborne/video-player
provides a set of: "draft" player that has own PIP and Fullscreen implementation, UI Controls, a
high flexibility for composing different player's UI Controls, hooks for accessing media store/data and event listeners, a ready to go media player solution
(with our own customized MUI Themed Components) and many other features.
Installation
- Add as a dependency @collaborne/video-player
npm install --save @collaborne/video-player
- Install our peer dependencies. As an example we use
mui
for theming and UI Components,react-transition-group
for animation,lodash
for throttling, etc.
You can check peer dependencies inpackage.json
. What is a peer dependency you can check here.
How to use
The Players
- Out of the box
You can just use a component that contains all the futures. See in CodeSandbox.
NOTE: Wait the sandbox until installs all dependencies and refresh it in case if it got "staled"
import { MediaPlayer } from '@collaborne/video-player';
export const MyComponent: React.FC = () => {
return (
<MediaPlayer url="some-video-url" />
);
};
- Compose own UI Controls
This comes handy when you want to customize controls for the player. CodeSandbox
NOTE: Wait the sandbox until installs all dependencies and refresh it in case if it got "staled"
import { CorePlayer, Controls, BottomControls } from "@collaborne/video-player";
import { PlayArrow } from "@mui/icons-material";
import { IconButton } from "@mui/material";
const PlayButton = () => {
return (
<IconButton>
<PlayArrow />
</IconButton>
);
};
export default function App() {
return (
<>
<CorePlayer url="some-url">
<Controls>
<BottomControls>
<PlayButton />
</BottomControls>
</Controls>
</CorePlayer>
</>
);
}
Recipes
- Using Media Store for the children
We use zustand for storing media state(current time, isPlaying, isMuted...).
That's why we can get the state using zustand
approach.
import { useMediaStore } from "@collaborne/video-player";
import { PlayArrow } from "@mui/icons-material";
import { IconButton } from "@mui/material";
const PlayButton = () => {
const play = useMediaStore((state) => state.play);
return (
<IconButton onClick={play}>
<PlayArrow />
</IconButton>
);
};
- Using MediaStore outside of the player
All players state is connected to an event emitter. Triggering play, pause, mute, etc will trigger an event, that you can connect too.
So, subscribing to an event can boost your app and save performance. Code example in CodeSandbox.
NOTE: Wait the sandbox until installs all dependencies and refresh it in case if it got "staled"
import {
MediaPlayer,
usePlayerContext,
useMediaListener
} from "@collaborne/video-player";
export default function App() {
const { mediaContext, setMediaContext } = usePlayerContext();
const listener = mediaContext?.getListener();
useMediaListener("play", () => alert("Play event was triggered"), listener);
return (
<MediaPlayer
url="some-url"
onStoreUpdate={setMediaContext}
/>
);
}
Documentation
Latest changes, types and interfaces here.
Debugging
We use debug package for logging events. As you can see in our live demo,
player provides you logs for native <video>
play and pause events, and also when state is changed. To use it in any your environment(we used in our storybook environment)
you need to add to yours process.env
a parameter of DEBUG=*
, that will print all these logs in browser's DevTools.
FAQ
- Q: How to use player in a performant way? How to avoid rerenders?
A: Subscribe to events. We emit events for almost all use cases(play
,pause
,timeupdate
,durationchange
, ...etc). - Q: Do you support Youtube, vimeo sources?
A: At the moment, no. We support only files.
License
Apache-2.0 © Collaborne