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.
@collaborne/media-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.
npm install --save @collaborne/media-player
mui
for theming and UI Components, react-transition-group
for animation, lodash
for throttling, etc.package.json
. What is a peer dependency you can check here.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/media-player';
export const MyComponent: React.FC = () => {
return (
<MediaPlayer url="some-video-url" />
);
};
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/media-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>
</>
);
}
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/media-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>
);
};
import {
MediaPlayer,
usePlayerContext,
useMediaListener
} from "@collaborne/media-player";
// `<App />` can control MediaStore not being a children of MediaPlayer
export default function App() {
// mediaContext is a ref value. Use only setters and media listener
const { mediaContext, setMediaContext } = usePlayerContext();
const listener = mediaContext?.getListener();
// useMediaListener - custom hooks that improves usability of emitted events
useMediaListener("play", () => alert("Play event was triggered"), listener);
return (
<MediaPlayer
url="some-url"
onStoreUpdate={setMediaContext}
/>
);
}
@collaborne/media-player categorizes its functionality as follows:
Note: Functions may belong to multiple categories. For example, the <VolumeButton />
is both a React Component and a UI Control.
Latest changes, types and interfaces here.
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.
play
, pause
, timeupdate
, durationchange
, ...etc).Apache-2.0 © Collaborne