metamaps--metamaps/frontend/src/Metamaps/Views/VideoView.js

/* global $ */

var Private = {
  addControls: function() {
    var self = this

    this.$audioControl = $('<div class="video-audio"></div>')
    this.$videoControl = $('<div class="video-video"></div>')

    this.$audioControl.on('click', function() {
      Handlers.audioControlClick.call(self)
    })

    this.$videoControl.on('click', function() {
      Handlers.videoControlClick.call(self)
    })

    this.$container.append(this.$audioControl)
    this.$container.append(this.$videoControl)
  },
  cancelClick: function() {
    this.mouseIsDown = false

    if (this.hasMoved) {

    }

    $(document).trigger(VideoView.events.dragEnd)
  }
}

var Handlers = {
  mousedown: function(event) {
    this.mouseIsDown = true
    this.hasMoved = false
    this.mouseMoveStart = {
      x: event.pageX,
      y: event.pageY
    }
    this.posStart = {
      x: parseInt(this.$container.css('left'), '10'),
      y: parseInt(this.$container.css('top'), '10')
    }

    $(document).trigger(VideoView.events.mousedown)
  },
  mouseup: function(event) {
    $(document).trigger(VideoView.events.mouseup, [this])

    var storedTime = this.lastClick
    var now = Date.now()
    this.lastClick = now

    if (now - storedTime < this.config.DOUBLE_CLICK_TOLERANCE) {
      $(document).trigger(VideoView.events.doubleClick, [this])
    }
  },
  mousemove: function(event) {
    var
      diffX,
      diffY,
      newX,
      newY

    if (this.$parent && this.mouseIsDown) {
      this.manuallyPositioned = true
      this.hasMoved = true
      diffX = event.pageX - this.mouseMoveStart.x
      diffY = this.mouseMoveStart.y - event.pageY
      newX = this.posStart.x + diffX
      newY = this.posStart.y - diffY
      this.$container.css({
        top: newY,
        left: newX
      })
    }
  },
  audioControlClick: function() {
    if (this.audioStatus) {
      this.audioOff()
    } else {
      this.audioOn()
    }
    $(document).trigger(VideoView.events.audioControlClick, [this])
  },
  videoControlClick: function() {
    if (this.videoStatus) {
      this.videoOff()
    } else {
      this.videoOn()
    }
    $(document).trigger(VideoView.events.videoControlClick, [this])
  }
}

var VideoView = function(video, $parent, id, isMyself, config) {
  var self = this

  this.$parent = $parent // mapView

  this.video = video
  this.id = id

  this.config = config

  this.mouseIsDown = false
  this.mouseDownOffset = { x: 0, y: 0 }
  this.lastClick = null
  this.hasMoved = false

  this.audioStatus = true
  this.videoStatus = true

  this.$container = $('<div></div>')
  this.$container.addClass('collaborator-video' + (isMyself ? ' my-video' : ''))
  this.$container.attr('id', 'container_' + id)

  var $vidContainer = $('<div></div>')
  $vidContainer.addClass('video-cutoff')
  $vidContainer.append(this.video)

  this.avatar = config.avatar
  this.$avatar = $('<img draggable="false" class="collaborator-video-avatar" src="' + config.avatar + '" width="150" height="150" />')
  $vidContainer.append(this.$avatar)

  this.$container.append($vidContainer)

  this.$container.on('mousedown', function(event) {
    Handlers.mousedown.call(self, event)
  })

  if (isMyself) {
    Private.addControls.call(this)
  }

    // suppress contextmenu
  this.video.oncontextmenu = function() { return false }

  if (this.$parent) this.setParent(this.$parent)
}

VideoView.prototype.setParent = function($parent) {
  var self = this
  this.$parent = $parent
  this.$parent.off('.video' + this.id)
  this.$parent.on('mouseup.video' + this.id, function(event) {
    Handlers.mouseup.call(self, event)
    Private.cancelClick.call(self)
  })
  this.$parent.on('mousemove.video' + this.id, function(event) {
    Handlers.mousemove.call(self, event)
  })
}

VideoView.prototype.setAvatar = function(src) {
  this.$avatar.attr('src', src)
  this.avatar = src
}

VideoView.prototype.remove = function() {
  this.$container.off()
  if (this.$parent) this.$parent.off('.video' + this.id)
  this.$container.remove()
}

VideoView.prototype.videoOff = function() {
  this.$videoControl.addClass('active')
  this.$avatar.show()
  this.videoStatus = false
}

VideoView.prototype.videoOn = function() {
  this.$videoControl.removeClass('active')
  this.$avatar.hide()
  this.videoStatus = true
}

VideoView.prototype.audioOff = function() {
  this.$audioControl.addClass('active')
  this.audioStatus = false
}

VideoView.prototype.audioOn = function() {
  this.$audioControl.removeClass('active')
  this.audioStatus = true
}

/**
 * @class
 * @static
 */
VideoView.events = {
  mousedown: 'VideoView:mousedown',
  mouseup: 'VideoView:mouseup',
  doubleClick: 'VideoView:doubleClick',
  dragEnd: 'VideoView:dragEnd',
  audioControlClick: 'VideoView:audioControlClick',
  videoControlClick: 'VideoView:videoControlClick'
}

export default VideoView