plyr for react js

1import React from 'react'
2import PropTypes from 'prop-types'
3import plyr from 'plyr'
4import 'plyr/dist/plyr.css'
5
6class PlyrComponent extends React.Component {
7  componentDidMount() {
8    this.player = new plyr('.js-plyr', this.props.options)
9    this.player.source = this.props.sources
10  }
11
12  componentWillUnmount() {
13    this.player.destroy()
14  }
15
16  render() {
17    return (
18      <video className='js-plyr plyr'>
19      </video>
20    )
21  }
22}
23
24PlyrComponent.defaultProps = {
25  options: {
26    controls: [
27      'rewind',
28      'play',
29      'fast-forward',
30      'progress',
31      'current-time',
32      'duration',
33      'mute',
34      'volume',
35      'settings',
36      'fullscreen',
37    ],
38    i18n: {
39      restart: 'Restart',
40      rewind: 'Rewind {seektime}s',
41      play: 'Play',
42      pause: 'Pause',
43      fastForward: 'Forward {seektime}s',
44      seek: 'Seek',
45      seekLabel: '{currentTime} of {duration}',
46      played: 'Played',
47      buffered: 'Buffered',
48      currentTime: 'Current time',
49      duration: 'Duration',
50      volume: 'Volume',
51      mute: 'Mute',
52      unmute: 'Unmute',
53      enableCaptions: 'Enable captions',
54      disableCaptions: 'Disable captions',
55      download: 'Download',
56      enterFullscreen: 'Enter fullscreen',
57      exitFullscreen: 'Exit fullscreen',
58      frameTitle: 'Player for {title}',
59      captions: 'Captions',
60      settings: 'Settings',
61      menuBack: 'Go back to previous menu',
62      speed: 'Speed',
63      normal: 'Normal',
64      quality: 'Quality',
65      loop: 'Loop',
66    },
67  },
68  sources: {
69    type: 'video',
70    sources: [
71      {
72        src: '/path/to/movie.mp4',
73        type: 'video/mp4',
74        size: 720,
75      },
76      {
77        src: '/path/to/movie.webm',
78        type: 'video/webm',
79        size: 1080,
80      },
81    ],
82  }
83}
84
85PlyrComponent.propTypes = {
86  options: PropTypes.object,
87  sources: PropTypes.object,
88  source: PropTypes.func,
89  destroy: PropTypes.func
90}
91
92export default PlyrComponent
93
94