src/app/model/history/components/AnimationControls.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *       http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import React, { Component } from 'react';
  22 import { Link } from 'react-router-dom';
  23 import Col from 'react-bootstrap/lib/Col';
  24
  25 class AnimationControls extends Component {
  26   constructor(props){
  27       console.log(props);
  28       super(props);
  29       this.props = props;
  30   }
  31
  32   getIndex = () =>{
  33       return (this.props.get('sliderTickArray')).indexOf(this.props.get('currentStateHistoryValue'));
  34   }
  35
  36   navigateAnimation = (index, command) => {
  37      if(!command){
  38         this.props.set('isPlaying',false);
  39         this.props.set('isStopped', false);
  40         this.props.set('isPaused', true);
  41         this.props.setValueState((this.props.get('sliderTickArray'))[index]);
  42      }else if (command === 'play'){
  43         this.props.setValueState((this.props.get('sliderTickArray'))[index]);
  44      }
  45      this.props.setNavigate((this.props.get('sliderTickArray'))[index]);
  46   }
  47
  48   play = () =>{
  49     if(this.props.get('isPlaying')){
  50         var index = Math.min((this.props.get('sliderTickArray')).length - 1, this.getIndex() + 1);
  51         this.navigateAnimation(this.getIndex() + 1, 'play');
  52         if(index === (this.props.get('sliderTickArray')).length - 1){
  53             this.props.set('isPlaying', false);
  54             this.props.set('isStopped', true);
  55             this.props.set('isPaused', false);
  56         }
  57     }else{
  58          this.props.clear(this.props.get('intervalId'));
  59     }
  60   }
  61
  62   animationControl = (controlType) => {
  63     console.log("Control was hit: " + controlType);
  64     switch(controlType){
  65         case 'play':
  66             if(!this.props.get('isPlaying')){
  67                 if(!this.props.get('intervalId')){
  68                     this.props.set('intervalId', setInterval(this.play, 10000));
  69                 }
  70                 this.props.set('isPlaying', true);
  71                 this.props.set('isStopped', false);
  72                 this.props.set('isPaused', false);
  73             }
  74             break;
  75         case 'pause':
  76             if(this.props.get('isPlaying')){
  77                 this.props.clear(this.props.get('intervalId'));
  78                 this.props.set('isPlaying', false);
  79                 this.props.set('isPaused', true);
  80             }
  81             break;
  82         case 'stop':
  83             if(this.props.get('isPlaying') || this.props.get('isPaused')){
  84                 this.props.clear(this.props.get('intervalId'));
  85                 this.props.set('isPlaying', false);
  86                 this.props.set('isStopped', true);
  87                 this.props.set('isPaused', false);
  88             }
  89             break;
  90         case 'skipForwardStep':
  91             var index = Math.min((this.props.get('sliderTickArray')).length - 1, this.getIndex() + 1);
  92             this.navigateAnimation(index);
  93             break;
  94         case 'skipBackwardStep':
  95             var index = Math.max(0, this.getIndex() - 1);
  96             this.navigateAnimation(index);
  97             break;
  98         case 'skipForwardLast':
  99             this.navigateAnimation((this.props.get('sliderTickArray')).length - 1);
 100             break;
 101         case 'skipBackwardEpoch':
 102             this.navigateAnimation(0);
 103             break;
 104         default:
 105             this.props.set('isPlaying', false);
 106             this.props.set('isStopped', false);
 107             this.props.set('isPaused', false);
 108             break;
 109     }
 110   }
 111   render(){
 112     return (
 113      <Col md={8}>
 114        <i className='icon-controls-skipbackstartover animationControlIcon'  onClick={() => this.animationControl('skipBackwardEpoch')} role="img"></i>
 115        <i className='icon-controls-rewind animationControlIcon'  onClick={() => this.animationControl('skipBackwardStep')} role="img"></i>
 116        { !this.props.playControlsDisabled && (<span><i className={'icon-controls-pointer ' + (this.props.get('isPlaying') ? 'animationPlayingIcon' : 'animationControlIcon')}  onClick={() => this.animationControl('play')} role="img"></i>
 117        <i className={'icon-controls-pause ' + (this.props.get('isPaused') ? 'animationPausedIcon' : 'animationControlIcon')}  onClick={() => this.animationControl('pause')} role="img"></i>
 118        <i className={'icon-controls-stop ' + (this.props.get('isStopped') ? 'animationStoppedIcon' : 'animationControlIcon')}   onClick={() => this.animationControl('stop')} role="img"></i></span>)}
 119        <i className='icon-controls-fastforward animationControlIcon'  onClick={() => this.animationControl('skipForwardStep')} role="img"></i>
 120        <i className='icon-controls-skipforward animationControlIcon'  onClick={() => this.animationControl('skipForwardLast')} role="img"></i>
 121      </Col>
 122     );
 123   }
 124 };
 125
 126 export default AnimationControls;