1.0.10 • Published 2 years ago
material-ui-player v1.0.10
Material UI Player
Simple React components for playing audio and video, using material-ui
- AudioCard: Audio element with controls
- VideoCard: Video element with controls
- SoundButton: IconButton to only play audio files (ideal for short audios)
Contents
Why use this package
- Allow customization on traditional
<audio>
and<video>
HTML elements - Easy play media files stored in Firebase Storage or anywhere need to retrieve the download URL
- Material-UI components like : theming, customizations and low level components
- Use modern React hook and coding conventions
- Documentation made with Storybook
Usage
npm install material-ui-player # or yarn add material-ui-player
import React from 'react'
import { AudioCard, VideoCard } from 'material-ui-player'
// Relative URL - play a media from same origin
<AudioCard src={'/audio.mp3'} />
<VideoCard src={'/video.mp4'} />
<SoundButton src={'/audio.mp3'} />
// Absolute URL - play a media from external source
<AudioCard src={'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3'} />
<VideoCard src={'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'} />
<SoundButton src={'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3'} />
// Promise retrieve URL
<AudioCard src={fetch('<my url>')} />
<VideoCard src={fetch('<my url>')} />
<SoundButton src={fetch('<my url>')} />
Props
Prop | Description | Default | Component |
---|---|---|---|
src | string or Promise<string> or () => string or () => Promise<string> - The url of a media to play ◦ Can be a relative or absolute url A Promise resolved into a string (the url) after Play button clicked. This case can be useful when you are using Firebase Storage, where you need to call an API to retrieve the download Url. | (mandatory) | all |
forward | Set to true or falsy to show forward button | undefined | AudioCard, VideoCard |
backward | Set to true or falsy to show backward button | undefined | AudioCard, VideoCard |
autoplay | Set to true or falsy to set autoplay on audio | undefined | AudioCard, VideoCard |
loop | Set to true or falsy to set loop on audio | undefined | AudioCard, VideoCard |
width | Set the width of the player | Audio: undefined (fit parent container) Video: undefined (video maintain original size, card fit parent container) | AudioCard, VideoCard |
speed | Set to true or falsy to show speed control | undefined | AudioCard, VideoCard |
mute | Set to true or falsy to show mute button | undefined | AudioCard, VideoCard |
fadeSettings | Object with fadeInTime and fadeOutTime (number, seconds) to fadein and fadeout video | undefined | VideoCard |
thickness | Set sliders line thickness (thin , medium or large ) | medium | AudioCard, VideoCard |
background | Set container card background | inherit | all |
PlayProps | enable customization using Material UI IconButton props | undefined | all |
BackwardProps , StopProps , PauseProps , ForwardProps , MuteProps | enable customization using Material UI IconButton props | undefined | AudioCard, VideoCard |
Callback props
Callback props take a function that gets fired on various player events:
Prop | Description | Component |
---|---|---|
onForwardClick | Called when forward button is clicked | AudioCard, VideoCard |
onBackwardClick | Called when backward button is clicked | AudioCard, VideoCard |
onEnded | Called when media ended | AudioCard, VideoCard |
Demo
Try it using the storyboard
Note
Please note:
- As required from Material UI you mast be sure to use this library's components inside a
<ThemeProvider>
wrapper, in order to use your custom theme. - This module has following peerDependencies:
"@mui/material": ">=5.0.0",
"@mui/styles": ">=5.0.0",
"react": ">=17.0.0",
"react-dom": ">=17.0.0"
NB: Still need to use Material UI 4? Use version 0.2.6
License
Released under MIT License
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.10
2 years ago
1.0.6
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
0.2.6
2 years ago
0.2.5
3 years ago
0.2.3
3 years ago
0.2.4
3 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.2.2
3 years ago
0.1.12
3 years ago
0.1.11
3 years ago
0.1.10
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.9
3 years ago
0.1.4
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago