1 | # Material UI Player
|
2 |
|
3 | [![NPM version][npm-image]][npm-url]
|
4 | ![Types included][types-image]
|
5 | [![install size](https://packagephobia.com/badge?p=material-ui-player@0.1.12)](https://packagephobia.com/result?p=material-ui-player@0.1.12)
|
6 | [![minisize][min-image]][min-url]
|
7 |
|
8 | [npm-image]: https://img.shields.io/npm/v/material-ui-player.svg
|
9 | [npm-url]: https://npmjs.org/package/material-ui-player
|
10 | [types-image]: https://badgen.net/npm/types/tslib
|
11 | [min-image]:https://badgen.net/bundlephobia/min/material-ui-player
|
12 | [min-url]:https://bundlephobia.com/result?p=material-ui-player
|
13 |
|
14 | Simple React components for playing audio and video, using [material-ui](https://material-ui.com/)
|
15 | - AudioCard: Audio element with controls
|
16 | - VideoCard: Video element with controls
|
17 | - SoundButton: IconButton to only play audio files (ideal for short audios)
|
18 |
|
19 | ## Contents
|
20 |
|
21 | - [Why use this package](#why-use-this-package)
|
22 | - [Usage](#usage)
|
23 | - [Props](#props)
|
24 | - [Callback props](#callback-props)
|
25 | - [Note](#note)
|
26 | - [License](#license)
|
27 |
|
28 | ### Why use this package
|
29 |
|
30 | - Allow customization on traditional ```<audio>``` and ```<video>``` HTML elements
|
31 | - Easy play media files stored in Firebase Storage or anywhere need to retrieve the download URL
|
32 | - Material-UI components like : theming, customizations and low level components
|
33 | - Use modern React hook and coding conventions
|
34 | - Documentation made with Storybook
|
35 |
|
36 | ### Usage
|
37 |
|
38 | ```bash
|
39 | npm install material-ui-player # or yarn add material-ui-player
|
40 | ```
|
41 |
|
42 | ```jsx
|
43 | import React from 'react'
|
44 | import { AudioCard, VideoCard } from 'material-ui-player'
|
45 |
|
46 | // Relative URL - play a media from same origin
|
47 | <AudioCard src={'/audio.mp3'} />
|
48 | <VideoCard src={'/video.mp4'} />
|
49 | <SoundButton src={'/audio.mp3'} />
|
50 |
|
51 | // Absolute URL - play a media from external source
|
52 | <AudioCard src={'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3'} />
|
53 | <VideoCard src={'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'} />
|
54 | <SoundButton src={'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3'} />
|
55 |
|
56 | // Promise retrieve URL
|
57 | <AudioCard src={fetch('<my url>')} />
|
58 | <VideoCard src={fetch('<my url>')} />
|
59 | <SoundButton src={fetch('<my url>')} />
|
60 |
|
61 | ```
|
62 | ### Props
|
63 |
|
64 | Prop | Description | Default | Component
|
65 | ---- | ----------- | ------- | ---------
|
66 | `src` | `string` or `Promise<string>` or `() => string` or `() => Promise<string>` <br /> - The url of a media to play ◦ Can be a relative or absolute url <br /> 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
|
67 | `forward` | Set to `true` or falsy to show forward button | `undefined` | AudioCard, VideoCard
|
68 | `backward` | Set to `true` or falsy to show backward button | `undefined` | AudioCard, VideoCard
|
69 | `autoplay` | Set to `true` or falsy to set autoplay on audio | `undefined` | AudioCard, VideoCard
|
70 | `loop` | Set to `true` or falsy to set loop on audio | `undefined` | AudioCard, VideoCard
|
71 | `width` | Set the width of the player | Audio: `undefined` (fit parent container) <br /> Video: `undefined` (video maintain original size, card fit parent container) | AudioCard, VideoCard
|
72 | `speed` | Set to `true` or falsy to show speed control | `undefined` | AudioCard, VideoCard
|
73 | `mute` | Set to `true` or falsy to show mute button | `undefined` | AudioCard, VideoCard
|
74 | `fadeSettings` | Object with `fadeInTime` and `fadeOutTime` (number, seconds) to fadein and fadeout video | `undefined` | VideoCard
|
75 | `thickness` | Set sliders line thickness (`thin`, `medium` or `large`) | `medium` | AudioCard, VideoCard
|
76 | `background` | Set container card background | `inherit` | all
|
77 | `PlayProps` | enable customization using Material UI IconButton props | `undefined` | all
|
78 | `BackwardProps`, `StopProps`, `PauseProps`, `ForwardProps`, `MuteProps` | enable customization using Material UI IconButton props | `undefined` | AudioCard, VideoCard
|
79 |
|
80 |
|
81 | ### Callback props
|
82 |
|
83 | Callback props take a function that gets fired on various player events:
|
84 |
|
85 | Prop | Description | Component
|
86 | ---- | ----------- | ---------
|
87 | `onForwardClick` | Called when forward button is clicked | AudioCard, VideoCard
|
88 | `onBackwardClick` | Called when backward button is clicked | AudioCard, VideoCard
|
89 | `onEnded` | Called when media ended | AudioCard, VideoCard
|
90 |
|
91 |
|
92 | ### Note
|
93 | Please Note: this module has following peerDependencies:
|
94 | ```
|
95 | "@material-ui/core": "^4.0.0",
|
96 | "@material-ui/icons": "^4.0.0",
|
97 | "react": "^17.0.0",
|
98 | "react-dom": "^17.0.0",
|
99 | ```
|
100 |
|
101 | ### License
|
102 |
|
103 | Released under MIT License
|
104 |
|
105 |
|