Skip to content
Snippets Groups Projects
Select Git revision
  • 57466ac7fa7fda69198d41d75e40f63c06640efd
  • mui5-annotation-on-video-stable default
  • get_setter_canvasSizeInformations
  • fix-error-div-into-p
  • annotation-on-video-v2
  • detached
  • annotation-on-video-r17
  • mui5
  • mui5-react-18
  • jacob-test
  • annotation-on-video protected
  • master
  • test-antoinev1
  • 20-fetch-thumbnail-on-annotation
  • add-research-field
  • Save
  • add-plugin
  • 14-wip-no-seek-to
  • 14-bug-on-video-time-control
  • 9_wip_videotests
  • _upgrade_material_ui
  • latest-tetras-16
  • v3.3.0
  • v3.2.0
  • v3.1.1
  • v3.1.0
  • v3.0.0
  • v3.0.0-rc.7
  • v3.0.0-rc.6
  • v3.0.0-rc.5
  • v3.0.0-rc.4
  • v3.0.0-rc.3
  • v3.0.0-rc.2
  • v3.0.0-rc.1
  • v3.0.0-beta.10
  • v3.0.0-beta.9
  • v3.0.0-beta.8
  • v3.0.0-beta.7
  • v3.0.0-beta.6
  • v3.0.0-beta.5
  • v3.0.0-beta.3
41 results

ViewerNavigationVideo.js

Blame
  • 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,
    };