Skip to content

Commit

Permalink
feat: New ClosedCaptionButton component
Browse files Browse the repository at this point in the history
  • Loading branch information
JimLiu committed Jun 19, 2019
1 parent a467494 commit 6bea3a1
Show file tree
Hide file tree
Showing 22 changed files with 2,334 additions and 18 deletions.
30 changes: 30 additions & 0 deletions docs/lib/Components/CaptionedVideoPage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
import React from 'react';
import { PrismCode } from 'react-prism';
import Helmet from 'react-helmet';
import PlayerWithCaptions from '../examples/PlayerWithCaptions';

const PlayerWithCaptionsSource = require('!!raw-loader!../examples/PlayerWithCaptions');

export default function CaptionedVideoPage() {
return (
<div>
<Helmet title="PosterImage" />
<h3>ClosedCaptionButton</h3>
<p>
There is an example on how to add a ClosedCaption button component into{' '}
<code>Video-React</code> Player.
</p>
<div className="docs-example">
<PlayerWithCaptions />
</div>
<p />
<h4>ClosedCaptionButton</h4>
<pre>
<PrismCode className="language-jsx">
{PlayerWithCaptionsSource}
</PrismCode>
</pre>
</div>
);
}
4 changes: 4 additions & 0 deletions docs/lib/Components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ class Components extends React.Component {
{
name: 'PlaybackRateMenuButton',
to: '/components/playback-rate-menu-button/'
},
{
name: 'ClosedCaptionButton',
to: '/components/captioned-video'
}
]
};
Expand Down
67 changes: 67 additions & 0 deletions docs/lib/examples/PlayerWithCaptions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React from 'react';
import { Player, ControlBar, ClosedCaptionButton } from 'video-react';

export default function PlayerWithCaptions() {
return (
<Player videoId="video-1" autoPlay>
<source
src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4"
type="video/mp4"
/>
<source
src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.ogg"
type="video/ogg"
/>

<track
kind="captions"
src="/assets/elephantsdream/captions.en.vtt"
srcLang="en"
label="English"
default
/>
<track
kind="captions"
src="/assets/elephantsdream/captions.sv.vtt"
srcLang="sv"
label="Swedish"
/>
<track
kind="captions"
src="/assets/elephantsdream/captions.ru.vtt"
srcLang="ru"
label="Russian"
/>
<track
kind="captions"
src="/assets/elephantsdream/captions.ja.vtt"
srcLang="ja"
label="Japanese"
/>
<track
kind="captions"
src="/assets/elephantsdream/captions.ar.vtt"
srcLang="ar"
label="Arabic"
/>

<track
kind="descriptions"
src="/assets/elephantsdream/descriptions.en.vtt"
srcLang="en"
label="English"
/>

<track
kind="chapters"
src="/assets/elephantsdream/chapters.en.vtt"
srcLang="en"
label="English"
/>

<ControlBar autoHide={false}>
<ClosedCaptionButton order={7} />
</ControlBar>
</Player>
);
}
2 changes: 2 additions & 0 deletions docs/lib/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import ForwardControlPage from './Components/ForwardControlPage';
import ReplayControlPage from './Components/ReplayControlPage';
import VolumeMenuButtonPage from './Components/VolumeMenuButtonPage';
import PlaybackRateMenuButtonPage from './Components/PlaybackRateMenuButtonPage';
import CaptionedVideoPage from './Components/CaptionedVideoPage';

import Customize from './Customize';
import EnableDisableComponentPage from './Customize/EnableDisableComponentPage';
Expand All @@ -41,6 +42,7 @@ const routes = (
path="playback-rate-menu-button/"
component={PlaybackRateMenuButtonPage}
/>
<Route path="captioned-video" component={CaptionedVideoPage} />
</Route>
<Route path="/customize/" component={Customize}>
<IndexRedirect to="enable-disable-components/" />
Expand Down
Loading

0 comments on commit 6bea3a1

Please sign in to comment.