Skip to content
Snippets Groups Projects
Select Git revision
  • 55350dc3fc3e01e1c37a70d49e599319dc794ded
  • annotation-on-video default protected
  • demo_ci
  • 3-upstream-01022023
  • master
  • gh3538-captions
  • 16-adapt-for-images-annot
  • 15-api-for-annotations-on-video
  • 15-annotations-on-videos
  • video_for_annotations
  • wip-1-annotations-on-videos
  • 9-videoviewer-tests
  • 9_wip_videotests
  • 6-fix-tests-and-ci
  • _fix_ci
  • wip-webpack-from-git
16 results

AnnotationSettings.js

Blame
  • AnnotationSettings.js 2.18 KiB
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import SyncIcon from '@material-ui/icons/Sync';
    import SyncDisabledIcon from '@material-ui/icons/SyncDisabled';
    import VisibilityIcon from '@material-ui/icons/VisibilitySharp';
    import VisibilityOffIcon from '@material-ui/icons/VisibilityOffSharp';
    import MiradorMenuButton from '../containers/MiradorMenuButton';
    import { VideosReferences } from '../plugins/VideosReferences';
    
    /**
     * AnnotationSettings is a component to handle various annotation
     * display settings in the Annotation companion window
    */
    export class AnnotationSettings extends Component {
      /**
       * Returns the rendered component
      */
      render() {
        const {
          windowId, autoScroll, autoScrollDisabled,
          displayAll, displayAllDisabled, t, toggleAnnotationAutoScroll, toggleAnnotationDisplay,
        } = this.props;
    
        const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';
    
        return (
          <>
            <MiradorMenuButton
              aria-label={t(displayAll ? 'displayNoAnnotations' : 'highlightAllAnnotations')}
              onClick={toggleAnnotationDisplay}
              disabled={displayAllDisabled}
              size="small"
            >
              { displayAll ? <VisibilityIcon /> : <VisibilityOffIcon /> }
            </MiradorMenuButton>
            { mediaIsVideo && (
            <MiradorMenuButton
              aria-label={autoScroll ? 'Disable auto scroll' : 'Enable auto scroll'}
              onClick={toggleAnnotationAutoScroll}
              disabled={autoScrollDisabled}
              size="small"
            >
              { autoScroll ? <SyncIcon /> : <SyncDisabledIcon /> }
            </MiradorMenuButton>
            )}
          </>
        );
      }
    }
    
    AnnotationSettings.defaultProps = {
      autoScroll: true,
      autoScrollDisabled: true,
      toggleAnnotationAutoScroll: () => {},
    };
    AnnotationSettings.propTypes = {
      autoScroll: PropTypes.bool,
      autoScrollDisabled: PropTypes.bool,
      displayAll: PropTypes.bool.isRequired,
      displayAllDisabled: PropTypes.bool.isRequired,
      t: PropTypes.func.isRequired,
      toggleAnnotationAutoScroll: PropTypes.func,
      toggleAnnotationDisplay: PropTypes.func.isRequired,
      windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
    };