Skip to content
Snippets Groups Projects
Select Git revision
  • 2323ee4efe7a4e4ff7010146b78ffa69f3fa906f
  • 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

SidebarIndexThumbnail.js

Blame
  • user avatar
    Jack Reed authored and Chris Beer committed
    2323ee4e
    History
    SidebarIndexThumbnail.js 1.50 KiB
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import Typography from '@material-ui/core/Typography';
    import classNames from 'classnames';
    import MiradorCanvas from '../lib/MiradorCanvas';
    import { CanvasThumbnail } from './CanvasThumbnail';
    
    /** */
    export class SidebarIndexThumbnail extends Component {
      /** */
      render() {
        const {
          classes, config, otherCanvas, canvas,
        } = this.props;
    
        const { width, height } = config.canvasNavigation;
        const miradorCanvas = new MiradorCanvas(otherCanvas);
    
        return (
          <>
            <div style={{ minWidth: 50 }}>
              <CanvasThumbnail
                className={classNames(classes.clickable)}
                isValid={miradorCanvas.hasValidDimensions}
                imageUrl={miradorCanvas.thumbnail(width, height)}
                maxHeight={config.canvasNavigation.height}
                maxWidth={config.canvasNavigation.width}
                aspectRatio={miradorCanvas.aspectRatio}
              />
            </div>
            <Typography
              className={classNames(classes.label)}
              variant="body1"
            >
              {canvas.label}
            </Typography>
          </>
        );
      }
    }
    
    SidebarIndexThumbnail.propTypes = {
      canvas: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
      classes: PropTypes.objectOf(PropTypes.string).isRequired,
      config: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
      otherCanvas: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
    };