Skip to content
Snippets Groups Projects
Select Git revision
  • 24-dependencies-build-nested-watch
  • main default protected
  • 24-everything-from-git
  • 45-create-new-poc-deployment-with-docker
  • 44-add-a-cli-tool
  • improve-deployment
  • 31-backend
  • bash-script-bug-fix
  • upgrades_submodules
  • 24-dependencies-build-using-workspaces
  • 24-dependencies-build
  • wip-all-local
  • 10-annotot
  • 3-annotation-plugin-showing-up
14 results

Caddyfile

Blame
    • Loïs Poujade's avatar
      545fd75c
      Add a dev server · 545fd75c
      Loïs Poujade authored
      - all local files (sources, dependencies, config, etc) are mounted in
        the devserver container
      - devserver watch sources & rebuild/reload on each change
      - "prod" server was updated to allow devserver to access its ressources
      - "prod" server now use npm ci instead of install and webpack
        `production` mode for build
      Verified
      545fd75c
      History
      Add a dev server
      Loïs Poujade authored
      - all local files (sources, dependencies, config, etc) are mounted in
        the devserver container
      - devserver watch sources & rebuild/reload on each change
      - "prod" server was updated to allow devserver to access its ressources
      - "prod" server now use npm ci instead of install and webpack
        `production` mode for build
    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,
    };