video.coffee

showVolume = ($el, volume) ->
  return unless $el.length > 0

  height =
    if volume < -45 # vary between -45 and -20
      '0px'
    else if volume > -20
      '100%'
    else
      Math.floor((volume + 100) * 100 / 25 - 220) + '%'

  $el.css({ height: height })

$ ->
  $local = $('#local-video')

  opts =
    # url: 'http://endpoint02.uswest.xirsys.com:8080'
    url: 'https://endpoint02.uswest.xirsys.com:443'
    localVideoEl: 'local-video' # the id/dom element to hold "our" video
    # remoteVideosEl: 'remoteVideos' # the id/dom element to hold remote videos
    autoRequestMedia: true # immediately ask for camera access
    debug: false
    detectSpeakingEvents: true
    autoAdjustMic: false
    peerConnectionConfig: $local.data('ice')

  webrtc = new SimpleWebRTC(opts)

  webrtc.on 'readyToCall', ->
    webrtc.joinRoom $local.data('room-token')

  webrtc.on 'channelMessage', (peer, label, data) ->
    if data.type == 'volume'
      showVolume $("#volume-#{peer.id}"), data.volume

  webrtc.on 'videoAdded', (video, peer) ->
    # console.log 'video added', peer
    $remotes = $('#remote-videos')

    if $remotes.length > 0
      $d = $('<div/>')
      $d.addClass 'video-container'
      $d.attr 'id', "container-#{webrtc.getDomId(peer)}"
      $d.append video

      $vol = $('<div/>')
      $vol.attr 'id', "volume-#{peer.id}"
      $vol.addClass 'volume-bar'

      $(video).on 'click', ->
        css =
          width: "#{video.videoWidth}px"
          height: "#{video.videoHeight}px"
        $d.css(css)

      $d.append($vol)
      $remotes.append $d

  webrtc.on 'videoRemoved', (video, peer) ->
    # console.log 'video removed ', peer
    $el = $("#container-#{webrtc.getDomId(peer)}")
    $el.remove() if $el.length > 0

  webrtc.on 'volumeChange', (volume, threshold) ->
    # console.log 'own volume', volume
    showVolume $('#local-volume'), volume