Select Git revision
-
Loïs Poujade authoredLoïs Poujade authored
ViewerNavigationVideo.js 4.36 KiB
import ClosedCaption from '@mui/icons-material/ClosedCaption';
import ClosedCaptionOutlined from '@mui/icons-material/ClosedCaptionOutlined';
import { Component } from 'react';
import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
import PropTypes from 'prop-types';
import Slider from '@mui/material/Slider';
import Typography from '@mui/material/Typography';
import VolumeOffIcon from '@mui/icons-material/VolumeOff';
import VolumeUpIcon from '@mui/icons-material/VolumeUp';
import { styled } from '@mui/material/styles';
import MiradorMenuButton from '../containers/MiradorMenuButton';
import ns from '../config/css-ns';
const StyledSliderDiv = styled('div')(() => ({
alignItems: 'center',
display: 'flex',
paddingLeft: '10px',
paddingRight: '15px',
width: '200px',
}));
const StyledPlayControls = styled('div')(() => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
}));
/** ViewerNavigationVideo - based on ViewerNavigation */
export class ViewerNavigationVideo extends Component {
/** */
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
/** */
handleChange = (event, newValue) => {
const { paused, setCurrentTime, setSeekTo } = this.props;
if (!paused) {
setSeekTo(newValue);
} else {
setCurrentTime(newValue);
}
};
/**
* Renders things
*/
render() {
const {
currentTime,
duration,
hasTextTrack,
muted,
paused,
setMuted,
setPaused,
setTextTrackDisabled,
textTrackDisabled,
} = this.props;
const start = (duration > 3600 || duration === undefined) ? 11 : 14;
const len = (duration > 3600 || duration === undefined) ? 8 : 5;
let durationLabel = new Date(currentTime * 1000).toISOString().substr(start, len);
let slider = '';
if (duration !== undefined) {
durationLabel = `${durationLabel} / ${new Date(duration * 1000).toISOString().substr(start, len)}`;
slider = (
<StyledSliderDiv>
<Slider value={currentTime} min={0} max={duration} onChange={this.handleChange} />
</StyledSliderDiv>
);
}
return (
<StyledPlayControls>
<MiradorMenuButton
aria-label={paused ? 'Play' : 'Pause'}
className={paused ? ns('next-canvas-button') : ns('next-canvas-button')}
onClick={() => { setPaused(!paused); }}
>
{ paused ? <PlayArrowRoundedIcon /> : <PauseRoundedIcon /> }
</MiradorMenuButton>
{slider}
<span style={{
alignItems: 'center',
display: 'flex',
}}
>
<Typography variant="caption">
{durationLabel}
</Typography>
</span>
<MiradorMenuButton
aria-label={muted ? 'Unmute' : 'Mute'}
className={muted ? ns('next-canvas-button') : ns('next-canvas-button')}
onClick={() => { setMuted(!muted); }}
>
{ muted ? <VolumeOffIcon /> : <VolumeUpIcon /> }
</MiradorMenuButton>
{ hasTextTrack && (
<MiradorMenuButton
aria-label={textTrackDisabled ? 'CC show' : 'CC hide'}
className={textTrackDisabled ? ns('next-canvas-button') : ns('next-canvas-button')}
onClick={() => { setTextTrackDisabled(!textTrackDisabled); }}
>
{ textTrackDisabled ? <ClosedCaptionOutlined /> : <ClosedCaption /> }
</MiradorMenuButton>
)}
<span style={{
borderRight: '1px solid #808080',
display: 'inline-block',
height: '24px',
margin: '12px 6px',
}}
/>
</StyledPlayControls>
);
}
}
ViewerNavigationVideo.propTypes = {
currentTime: PropTypes.number,
duration: PropTypes.number,
hasTextTrack: PropTypes.bool,
muted: PropTypes.bool,
paused: PropTypes.bool,
setCurrentTime: PropTypes.func,
setMuted: PropTypes.func,
setPaused: PropTypes.func,
setSeekTo: PropTypes.func,
setTextTrackDisabled: PropTypes.func,
textTrackDisabled: PropTypes.bool,
};
ViewerNavigationVideo.defaultProps = {
currentTime: 0,
duration: undefined,
hasTextTrack: false,
muted: false,
paused: true,
setCurrentTime: () => {},
setMuted: () => {},
setPaused: () => {},
setSeekTo: () => {},
setTextTrackDisabled: () => {},
textTrackDisabled: true,
};