content: import React, { Component } from 'react';
  import Rating from './Rating';
  import Hourglass from './Hourglass';
  import PauseIndicator from './PauseIndicator';
  import ErrorIndicator from './ErrorIndicator';
  import DateLabel from './DateLabel';
  import Menu from './Menu';
  import Canvas from './Canvas';
  import imageProvider from '../service/imageProvider';
  import keyboardListener from '../service/keyboardListener';
  import './Viewer.css';
  
  export default class Viewer extends Component {
    constructor(props) {
      super(props);
      this.handleMouseMove = this.handleMouseMove.bind(this);
      this.state = {
        isBusy: false,
        isPaused: false,
        displayMenu: false,
        dateTaken: 0,
        rating: 0,
        backgroundColor: '#333333'
      }
    }
  
    componentDidMount() {
      imageProvider.setup(this);
      keyboardListener.setup(imageProvider);
  
      document.addEventListener('mousemove', this.handleMouseMove, false);
    }
  
    componentWillUnmount() {
      keyboardListener.teardown();
      document.removeEventListener('mousemove', this.handleMouseMove);
      return imageProvider.resetSchedule();
    }
  
    handleMouseMove(event) {
      this.setMenuVisible(true);
    }
  
    onImageUpdate(imageData, img) {
      console.debug(`Image data: ${JSON.stringify(imageData)}`);
      return new Promise((resolve, reject) => {
        this.setState({
          ...this.state,
          errorInfo: null,
          img,
          rating: imageData.rating,
          dateTaken: imageData.dateTaken
        })
        resolve();
      });
    }
  
    onRatingUpdate(rating) {
      return new Promise((resolve, reject) => {
        this.setState({
          ...this.state,
          rating
        });
        resolve();
      });
    }
  
    onBusy(value) {
      console.debug(`onBusy: ${value}`);
      return new Promise((resolve, reject) => {
        this.setState({
          ...this.state,
          isBusy: value
        });
        resolve();
      });
    }
  
    onPause(value) {
      console.debug(`Viewer.onPause: ${value}`);
      return new Promise((resolve, reject) => {
        this.setState({
          ...this.state,
          isPaused: value
        })
      });
    }
  
    onError(error, retryDelay) {
      return new Promise((resolve, reject) => {
        this.setState({
          ...this.state,
          errorInfo: {
            message: error.message || error.statusText,
            retryDelay
          }
        })
        resolve();
      });
    }
  
    setMenuVisible(value) {
      if (this.state.displayMenu !== value) {
        this.setState({
          ...this.state,
          displayMenu: value
        });
      }
      if (value) {
        if (this.hideMenuTimer) {
          clearTimeout(this.hideMenuTimer);
          this.hideMenuTimer = 0;
        }
        this.hideMenuTimer = setTimeout(() => this.setMenuVisible(false), 5000);
      }
    }
  
    handleKeyPress(e) {
      e = e || window.event;
      if (e.keyCode === 38) {
        alert('up!');
      }
    }
  
    render() {
      return (
        <div id="viewer" className={ this.state.displayMenu ? '' : 'noCursor' } style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', right: '10px', bottom: '10px' }}>
            <Rating rating={this.state.rating} />
            <div style={{ clear: 'both' }}>
              <DateLabel dateTaken={this.state.dateTaken} />
              <Hourglass isBusy={this.state.isBusy} />
              <PauseIndicator isPaused={this.state.isPaused} />
              <ErrorIndicator errorInfo={this.state.errorInfo} />
            </div>
          </div>
          <Menu isVisible={this.state.displayMenu} />
          <Canvas img={this.state.img} backgroundColor={this.state.backgroundColor} />
        </div>
      );
    }
  
  }