MAth-Cloud-3.0.0/www.ipsocloud.com/webapp_webpack/src/VideoViewer.js

/**
 * Depends on Framework7
 */

export class VideoViewer {
  // 
  constructor(video, fps, frameCount, frameChanged) {
    this.video = video;
    this.fps = fps;
    this.frameCount = frameCount;
    this.currentFrame = 0;
    this.playing = false;
    this.timeout = null;
    this.currentKey = null;
    this.frameChanged = frameChanged;

    let that = this;

    video.css({
      'position':'relative'
    });
    this.overflay = $$('<div>');
    this.overflay.css({
      'display': 'flex',
      'flex-shrink': '1',
      'flex-direction': 'column',
      'justify-content': 'flex-end',
      'position':'absolute',
      'width':'100%',
      'height':'100%',
      'left': '0',
      'top': '0',
      'color': 'white',
      'font-size':'16px',
      //'z-index': '101'
    });
    video.parent().append(this.overflay);

    let row = $$('<div>');
    row.css({
      'display': 'flex',
      'flex-shrink': '1',
      'flex-direction': 'row',
      'justify-content': 'space-between',
      'background-color': 'rgba(0,0,0,0.5)',
      'color': 'white',
      'padding': '2px',
      'position':'absolute',
      'bottom': '0',
      'left': '0',
      'width':'calc(100% - 4px)',
      'z-index': '104'
    });
    this.overflay.append(row);

    // Play
    this.playButton = $$('<a class="link"><span class="icon material-icons">play_arrow</span></a>');
    this.playButton.click(function() {
      that.playing = !that.playing;
      if(that.playing) {
        that.playButton.html('<a class="link"><span class="icon material-icons">pause</span></a>');
        that.nextFrame();
      }
      else {
        that.playButton.html('<a class="link"><span class="icon material-icons">play_arrow</span></a>');
      }
    });

    // Stop
    let stopButton = $$('<a class="link"><span class="icon material-icons">stop</span></a>');
    stopButton.click(function() {
      that.stop();
      that.currentFrame=0;
      that.updateTime();
    });

    let prevButton = $$('<a class="link"><span class="icon material-icons">skip_previous</span></a>');
    prevButton.click(function() {
      that.stop();
      that.previousFrame();
    });

    let nextButton = $$('<a class="link"><span class="icon material-icons">skip_next</span></a>');
    nextButton.click(function() {
      that.stop();
      that.nextFrame();
    });

    document.addEventListener('keydown', function(key) {
      if(!that.currentKey) {
        that.stop();
        if (key.code=='ArrowRight' || key.code=='ArrowLeft') {
          that.currentKey = key.code;
          if (key.code=='ArrowRight') {
            that.playing = 1;
            that.nextFrame();
          }
          else if(key.code=='ArrowLeft') {
            that.playing = 2;
            that.previousFrame();
          }
        }
      }
      that.currentKey = key;
    });
    document.addEventListener('keyup', function(key) {
      that.currentKey = null;
      that.stop();
    });

    this.frameCounter = $$('<span>');

    // Video time changed
    video[0].ontimeupdate = function() {
      if(that.playing) {
        var delta = Date.now() - that.startTime;
        let frameTime = 1.0/that.fps*1000;
        frameTime -= delta;
        if(frameTime<0) {
          console.log('delayed by', -frameTime);
          frameTime = 0;
        }

        that.timeout = setTimeout(function() {
          if(that.playing===2) {
            that.previousFrame();
          }
          else if(that.playing===1 || that.playing===true) {
            that.nextFrame();
          }
        }, frameTime);        
      }
    };

    let col1 = $$('<div>');
    col1.css({
      'display': 'flex',
      'flex-shrink': '1',
      'flex-direction': 'row',
    });
    col1.append(this.playButton);
    col1.append(stopButton);
    row.append(col1);

    let mid0 = $$('<div>');
    mid0.css({
      'display': 'flex',
      'flex-shrink': '1',
      'width': 'calc(100% - 200px)',
      'flex-direction': 'row',
    });
    let mid = $$('<div class="range-slider">');
    let range = $$('<input type="range" min="0" max="'+(this.frameCount-1)+'" step="1" value="0">');
    mid.mousedown(function() {
      that.sliderMouseDown = true;
    });
    mid.mouseup(function() {
      that.sliderMouseDown = null;
    });
    mid.append(range);
    mid0.append(mid);
    row.append(mid0);
    this.slider = global.app.range.create({
      el: '.range-slider',
      on: {
        change: function () {
          if(that.sliderMouseDown) {
            that.stop();
            that.currentFrame=that.slider.getValue();
            that.updateTime();
          }
        }
      }
    });

    let col2 = $$('<div>');
    col2.css({
      'display': 'flex',
      'flex-shrink': '1',
      'flex-direction': 'row',
    });
    col2.append(prevButton);
    col2.append(that.frameCounter);
    col2.append(nextButton);
    row.append(col2);

    that.updatePosition();
  }

  clean() {
    this.overflay.remove();
  }

  stop() {
    this.playing = false;
    clearTimeout(this.timeout);
    this.playButton.html('<a class="link"><span class="icon material-icons">play_arrow</span></a>');
  }

  previousFrame() {
    this.currentFrame--;
    if(this.currentFrame<0) {
      this.currentFrame=this.frameCount-1;
    }
    this.updateTime();
  }

  nextFrame() {
    this.currentFrame++;
    if(this.currentFrame>=this.frameCount) {
      this.currentFrame=0;
    }
    this.updateTime();
  }

  updatePosition() {
    this.slider.setValue(this.currentFrame);
    this.frameCounter.text((this.currentFrame+1)+'/'+this.frameCount);
  }

  updateTime() {
    let frameTime = 1.0/this.fps;
    let pos = this.currentFrame * frameTime + frameTime/2.0;

    this.startTime = Date.now();
    this.video[0].currentTime = pos;
    this.updatePosition();
    if(this.frameChanged) {
      this.frameChanged(this.currentFrame);
    }
  }

}

/*
export class VideoViewer {
  // 
  constructor(video, fps, frameCount) {
    this.video = video;
    this.fps = fps;
    this.frameCount = frameCount;
    this.currentFrame = 0;
    this.playing = false;
    this.timeout = null;
    this.currentKey = null;

    let that = this;

    video.css({
      'position':'relative'
    });
    this.overflay = $$('<div>');
    this.overflay.css({
      'display': 'flex',
      'flex-shrink': '1',
      'flex-direction': 'column',
      'justify-content': 'flex-end',
      'position':'absolute',
      'width':'100%',
      'height':'100%',
      'left': '0',
      'top': '0',
      'color': 'white',
      'font-size':'16px' 
    });
    video.parent().append(this.overflay);

    let row = $$('<div>');
    row.css({
      'display': 'flex',
      'flex-shrink': '1',
      'flex-direction': 'row',
      'justify-content': 'space-between',
      'background-color': 'rgba(0,0,0,0.5)',
      'color': 'white',
      'padding': '2px',
    });
    this.overflay.append(row);

    // Play
    this.playButton = $$('<a class="link"><span class="icon material-icons">play_arrow</span></a>');
    this.playButton.click(function() {
      that.playing = !that.playing;
      if(that.playing) {
        that.playButton.html('<a class="link"><span class="icon material-icons">pause</span></a>');
        that.nextFrame();
      }
      else {
        that.playButton.html('<a class="link"><span class="icon material-icons">play_arrow</span></a>');
      }
    });

    // Stop
    let stopButton = $$('<a class="link"><span class="icon material-icons">stop</span></a>');
    stopButton.click(function() {
      that.stop();
      that.currentFrame=0;
      that.updateTime();
    });

    let prevButton = $$('<a class="link"><span class="icon material-icons">skip_previous</span></a>');
    prevButton.click(function() {
      that.stop();
      that.previousFrame();
    });

    let nextButton = $$('<a class="link"><span class="icon material-icons">skip_next</span></a>');
    nextButton.click(function() {
      that.stop();
      that.nextFrame();
    });

    document.addEventListener('keydown', function(key) {
      if(!that.currentKey) {
        that.stop();
        if (key.code=='ArrowRight' || key.code=='ArrowLeft') {
          console.log('down OK');
          that.currentKey = key.code;
          if (key.code=='ArrowRight') {
            that.playing = 1;
            that.nextFrame();
          }
          else if(key.code=='ArrowLeft') {
            that.playing = 2;
            that.previousFrame();
          }
        }
      }
      that.currentKey = key;
    });
    document.addEventListener('keyup', function(key) {
      that.currentKey = null;
      that.stop();
    });

    this.frameCounter = $$('<span>');

    // Video time changed
    video[0].ontimeupdate = function() {
      console.log(that.playing);
      if(that.playing) {
        that.timeout = setTimeout(function() {
          if(that.playing===2) {
            that.previousFrame();
          }
          else if(that.playing===1 || that.playing===true) {
            that.nextFrame();
          }
        }, 1.0/that.fps*1000);        
      }
    };

    let col1 = $$('<div>');
    col1.css({
      'display': 'flex',
      'flex-shrink': '1',
      'flex-direction': 'row',
    });
    col1.append(this.playButton);
    col1.append(stopButton);
    row.append(col1);

    let mid0 = $$('<div>');
    mid0.css({
      'display': 'flex',
      'flex-shrink': '1',
      'width': 'calc(100% - 200px)',
      'flex-direction': 'row',
    });
    let mid = $$('<div class="range-slider">');
    let range = $$('<input type="range" min="0" max="'+(this.frameCount-1)+'" step="1" value="0">');
    mid.mousedown(function() {
      that.sliderMouseDown = true;
    });
    mid.mouseup(function() {
      that.sliderMouseDown = null;
    });
    mid.append(range);
    mid0.append(mid);
    row.append(mid0);
    this.slider = global.app.range.create({
      el: '.range-slider',
      on: {
        change: function () {
          if(that.sliderMouseDown) {
            that.stop();
            that.currentFrame=that.slider.getValue();
            that.updateTime();
          }
        }
      }
    });

    let col2 = $$('<div>');
    col2.css({
      'display': 'flex',
      'flex-shrink': '1',
      'flex-direction': 'row',
    });
    col2.append(prevButton);
    col2.append(that.frameCounter);
    col2.append(nextButton);
    row.append(col2);

    that.updatePosition();
  }

  clean() {
    this.overflay.remove();
  }

  stop() {
    this.playing = false;
    clearTimeout(this.timeout);
    this.playButton.html('<a class="link"><span class="icon material-icons">play_arrow</span></a>');
  }

  previousFrame() {
    this.currentFrame--;
    if(this.currentFrame<0) {
      this.currentFrame=this.frameCount-1;
    }
    this.updateTime();
  }

  nextFrame() {
    this.currentFrame++;
    if(this.currentFrame>=this.frameCount) {
      this.currentFrame=0;
    }
    this.updateTime();
  }

  updatePosition() {
    this.slider.setValue(this.currentFrame);
    this.frameCounter.text((this.currentFrame+1)+'/'+this.frameCount);
  }

  updateTime() {
    let frameTime = 1.0/this.fps;
    let pos = this.currentFrame * frameTime + frameTime/2.0;
    this.video[0].currentTime = pos;
    this.updatePosition();
  }

}
*/