'use strict';
/* global 
  getStorageIfAvailable,
  getVideoRotation,
  VideoUtils,
  ForwardRewindController,
  MimeMapper,
  getUnusedFilename,
  MediaUtils,
  VideoLoadingChecker,
  MediaError,
  Seeker
*/

/*
 * This is a stripped down version of video.js that handles the view activity
 * and displays streaming videos specified by url.
 *
 * Unfortunately, there is a fair bit of code duplication between this
 * file and video.js, but we are too close to the v1 deadline to refactor
 * the shared code into a single shared file. If the video player UI changes
 * those changes will have to be made in both video.js and view.js
 */
(function init() {
  var dom = {};            // document elements
  var seeker;
  var playing = false;
  var controlShowing = false;
  var controlFadeTimeout = null;
  var dragging = false;
  var storage;       // A device storage object used by the save button
  var saved = false; // Did we save it?
  var videoRotation = 0;
  var activity;      // The activity object we're handling
  var data;          // The data sent by the initiating app
  var blob;          // The blob we'll be displaying and maybe saving
  var url;           // URL string representing the blob object
  var title;         // What we call the video in the titlebar and banner
  // touch start id is the identifier of touch event. we only need to process
  // events related to this id.
  var touchStartID = null;
  var sliderRect;
  window.pause = pause;

  //
  // Bug 1088456: when the view activity is launched by the bluetooth transfer
  // app (when the user taps on a downloaded file in the notification tray)
  // this code starts running while the regular video app is still running as
  // the foreground app. Since the video app does not get sent to the
  // background in this case, the currently playing video (if there is one) is
  // not paused. And so, in the case of videos that require decoder hardware,
  // the view activity cannot play the video. For this workaround, we have set
  // a localStorage property here. The video.js file should receive an event
  // when we do that and will use that as a signal to unload its video. We use
  // Date.now() as the value of the property so we get a different value and
  // generate an event each time we run.
  //
  localStorage.setItem('view-activity-wants-to-use-hardware', Date.now());

  // Register a handler to receive the Activity object
  navigator.mozSetMessageHandler('activity', handleViewActivity);

  function handleViewActivity(request) {
    activity = request;
    data = activity.source.data;
    blob = data.blob;
    url = data.url;
    title = data.title || '';

    // Set up the UI, if it is not already set up
    if (!dom.player) {
      initUI();
    }

    // Hide save button
    dom.save.hidden = true;

    // If blob exists, video should be launched by open activity
    if (blob) {
      // The title we display for this video may be explicitly specified,
      // or it might be the specified filename to save to or it might be
      // the filename of the blob.
      title = data.title || baseName(data.filename) || baseName(blob.name);
      url = URL.createObjectURL(blob);

      // If the app that initiated this activity wants us to allow the
      // user to save this blob as a file, and if device storage is available
      // and if there is enough free space, then display a save button.
      if (data.allowSave && data.filename && checkFilename()) {
        getStorageIfAvailable('videos', blob.size, function(ds) {
          dom.save.hidden = false;

          // HACK: Cause gaia-header to re-run font-fit logic
          // now that the 'save' button is visible.
          dom.videoTitle.textContent = dom.videoTitle.textContent;

          storage = ds;
        });
      }

      // to hide player because it shows in the wrong rotation.
      dom.player.classList.add('hidden');
      // video rotation is not parsed, parse it.
      getVideoRotation(blob, function(rotation) {
        // when error found, fallback to 0
        if (typeof rotation === 'string') {
          console.error('get video rotation error: ' + rotation);
          videoRotation = 0;
        } else {
          videoRotation = rotation;
        }
        // show player when player size and rotation are correct.
        dom.player.classList.remove('hidden');
        // start to play the video that showPlayer also calls fitContainer.
        showPlayer(url, title);
      });
    } else {
      // In the url case, we don't need to calculate the rotation.
      showPlayer(url, title);
    }
  }

  // Terminate video playback when visibility is changed.
  window.addEventListener('visibilitychange',
    function onVisibilityChanged() {
      if (document.hidden) {
        done();
      }
    });

  // We get headphoneschange event when the headphones is plugged or unplugged
  var acm = navigator.mozAudioChannelManager;
  if (acm) {
    acm.addEventListener('headphoneschange', function onheadphoneschange() {
      if (!acm.headphones && playing) {
        setVideoPlaying(false);
      }
    });
  }

  function setVideoPlaying(playing) {
    if (playing) {
      play();
    } else {
      pause();
    }
  }

  function initUI() {
    // Fullscreen mode and inline activities don't seem to play well together
    // so we'll play the video without going into fullscreen mode.

    // Get all the elements we use by their id
    var ids = ['player', 'player-view',
               'player-header', 'play', 'playHead', 'video-container',
               'elapsedTime', 'video-title', 'duration-text', 'elapsed-text',
               'slider-wrapper', 'spinner-overlay', 'timeSlider',
               'save', 'banner', 'message', 'seek-forward',
               'seek-backward', 'videoControlBar', 'in-use-overlay',
               'in-use-overlay-title', 'in-use-overlay-text'];

    ids.forEach(function createElementRef(name) {
      dom[toCamelCase(name)] = document.getElementById(name);
    });

    function toCamelCase(str) {
      return str.replace(/\-(.)/g, function replacer(str, p1) {
        return p1.toUpperCase();
      });
    }

    seeker = new Seeker(dom.player);

    dom.player.mozAudioChannelType = 'content';

    // handling the dragging of slider
    dom.sliderWrapper.addEventListener('touchstart', handleSliderTouchStart);
    dom.sliderWrapper.addEventListener('touchmove', handleSliderTouchMove);
    dom.sliderWrapper.addEventListener('touchend', handleSliderTouchEnd);

    // Rescale when window size changes. This should get called when
    // orientation changes.
    window.addEventListener('resize', function() {
      if (dom.player.readyState !== dom.player.HAVE_NOTHING) {
        VideoUtils.fitContainer(dom.videoContainer, dom.player,
                                videoRotation || 0);
      }
    });

    dom.player.addEventListener('timeupdate', timeUpdated);
    dom.player.addEventListener('seeked', updateSlider);

    // showing + hiding the loading spinner
    dom.player.addEventListener('waiting', showSpinner);
    dom.player.addEventListener('playing', hideSpinner);
    dom.player.addEventListener('play', hideSpinner);
    dom.player.addEventListener('pause', hideSpinner);
    dom.player.addEventListener('ended', playerEnded);
    dom.player.addEventListener('canplaythrough', hideSpinner);

    // option buttons
    dom.play.addEventListener('click', handlePlayButtonClick);
    dom.playerHeader.addEventListener('action', done);
    dom.save.addEventListener('click', save);
    // show/hide controls
    dom.videoContainer.addEventListener('click', toggleVideoControls);

    // handle slider keypress, emitted by the screen reader
    dom.timeSlider.addEventListener('keypress', handleSliderKeypress);

    ForwardRewindController.init(dom.player, dom.seekForward, dom.seekBackward,
                                 seeker);
  }

  function checkFilename() {
    var dotIdx = data.filename.lastIndexOf('.');
    if (dotIdx > -1) {
      var ext = data.filename.substr(dotIdx + 1);
      return MimeMapper.guessTypeFromExtension(ext) === blob.type;
    } else {
      return false;
    }
  }

  function setControlsVisibility(visible) {
    dom.playerView.classList[visible ? 'remove' : 'add'](
      'video-controls-hidden');
    controlShowing = visible;
    // Set the proper accessibility label for the video container based on
    // controls showing.
    dom.videoContainer.setAttribute('data-l10n-id', controlShowing ?
      'hide-controls-button' : 'show-controls-button');
    if (visible) {
      // update elapsed time and slider while showing.
      updateSlider();
    }
  }

  function handlePlayButtonClick() {
    setVideoPlaying(dom.player.paused);
  }

  function toggleVideoControls(e) {
    // When we change the visibility state of video controls, we need to check
    // the timeout of auto hiding.
    if (controlFadeTimeout) {
      clearTimeout(controlFadeTimeout);
      controlFadeTimeout = null;
    }
    // We cannot change the visibility state of video contorls when we are in
    // picking mode.
    e.cancelBubble = !controlShowing;
    setControlsVisibility(!controlShowing);
  }

  function handleSliderTouchStart(event) {
    // If we have a touch start event, we don't need others.
    if (null != touchStartID) {
      return;
    }
    touchStartID = event.changedTouches[0].identifier;

    dragging = true;
    // calculate the slider wrapper size for slider dragging.
    sliderRect = dom.sliderWrapper.getBoundingClientRect();

    // We can't do anything if we don't know our duration
    if (dom.player.duration === Infinity) {
      return;
    }

    handleSliderTouchMove(event);
  }

  function done() {
    pause();

    // Release any video resources
    dom.player.removeAttribute('src');
    dom.player.load();

    // End the activity
    activity.postResult({saved: saved});

    // Undo the bug 1088456 workaround hack.
    localStorage.removeItem('view-activity-wants-to-use-hardware');
  }

  function save() {
    // Hide the menu that holds the save button: we can only save once
    dom.save.hidden = true;
    // XXX work around bug 870619
    dom.videoTitle.textContent = dom.videoTitle.textContent;

    getUnusedFilename(storage, data.filename, function(filename) {
      var savereq = storage.addNamed(blob, filename);
      savereq.onsuccess = function() {
        // Remember that it has been saved so we can pass this back
        // to the invoking app
        saved = filename;
        // And tell the user
        showBanner({
          id: 'saved',
          args: { title: title }
        });
      };
      savereq.onerror = function(e) {
        // XXX we don't report this to the user because it is hard to
        // localize.
        console.error('Error saving', filename, e);
      };
    });
  }

  // show video player
  function showPlayer(url, title) {
    function handleLoadedMetadata() {
      var formattedDuration = MediaUtils.formatDuration(dom.player.duration);
      dom.durationText.textContent = formattedDuration;
      timeUpdated();

      setButtonPaused(false);
      VideoUtils.fitContainer(dom.videoContainer, dom.player,
                              videoRotation || 0);

      dom.player.currentTime = 0;

      // Show the controls briefly then fade out
      controlFadeTimeout = setTimeout(function() {
        setControlsVisibility(false);
      }, 2000);

      document.l10n.setAttributes(dom.timeSlider, 'seek-bar',
        { duration: formattedDuration });
      dom.timeSlider.setAttribute('aria-valuemin', 0);
      dom.timeSlider.setAttribute('aria-valuemax', dom.player.duration);
      dom.timeSlider.setAttribute('aria-valuenow', dom.player.currentTime);
      dom.timeSlider.setAttribute('aria-valuetext',
        MediaUtils.formatDuration(dom.player.currentTime));

      play();
    }

    dom.videoTitle.textContent = title || '';
    setControlsVisibility(true);

    var loadingChecker =
      new VideoLoadingChecker(dom.player, dom.inUseOverlay,
                              dom.inUseOverlayTitle,
                              dom.inUseOverlayText);
    loadingChecker.ensureVideoLoads(handleLoadedMetadata);

    dom.player.src = url;

    dom.player.onloadeddata = function(evt) { URL.revokeObjectURL(url); };
    dom.player.onerror = function(evt) {
      var errorid = '';

      switch (evt.target.error.code) {
        case MediaError.MEDIA_ERR_ABORTED:
          // This aborted error should be triggered by the user
          // so we don't have to show any error messages
          return;
        case MediaError.MEDIA_ERR_NETWORK:
          errorid = 'error-network';
          break;
        case MediaError.MEDIA_ERR_DECODE:
        case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
          // If users tap some video link in an offline page
          // the error code will be MEDIA_ERR_SRC_NOT_SUPPORTED
          // we also prompt the unsupported error message for it
          errorid = 'error-unsupported';
          break;
        // Is it possible to be unknown errors?
        default:
          errorid = 'error-unknown';
          break;
      }

      handleError(errorid);
    };
  }

  function handleError(l10nId) {
    document.l10n.formatValue(l10nId).then((msg) => {
      alert(msg);
      done();
    });
  }

  function play() {
    // Switch the button icon
    setButtonPaused(false);

    // Start playing
    dom.player.play();
    playing = true;
  }

  function pause() {
    // Switch the button icon
    setButtonPaused(true);

    // Stop playing the video
    dom.player.pause();
    playing = false;
  }

  // Update the progress bar and play head as the video plays
  function timeUpdated() {
    if (controlShowing) {
      // We can't update a progress bar if we don't know how long
      // the video is. It is kind of a bug that the <video> element
      // can't figure this out for ogv videos.
      if (dom.player.duration === Infinity || dom.player.duration === 0) {
        return;
      }

      updateSlider();
    }

    dom.timeSlider.setAttribute('aria-valuenow', dom.player.currentTime);
    dom.timeSlider.setAttribute('aria-valuetext',
      MediaUtils.formatDuration(dom.player.currentTime));
  }

  function playerEnded() {
    if (dragging) {
      return;
    }

    // If we are still playing when this 'ended' event arrives, then the
    // user played the video all the way to the end, and we skip to the
    // beginning and pause so it is easy for the user to restart. If we
    // reach the end because the user fast forwarded or dragged the slider
    // to the end, then we will have paused the video before we get this
    // event and in that case we will remain paused at the end of the video.
    if (playing) {
      dom.player.currentTime = 0;
      pause();
    }
  }

  function setButtonPaused(paused) {
    dom.play.classList.toggle('paused', paused);
    dom.play.setAttribute('data-l10n-id',
      paused ? 'play-button' : 'pause-button');
  }

  function movePlayHead(percent) {
    if (document.documentElement.dir === 'ltr') {
      dom.playHead.style.left = percent;
    }
    else {
      dom.playHead.style.right = percent;
    }
  }

  function updateSlider() {
    // We update the slider when we get a 'seeked' event.
    // Don't do updates while we're seeking because the position we fastSeek()
    // to probably isn't exactly where we requested and we don't want jerky
    // updates
    if (dom.player.seeking) {
      return;
    }

    var percent = (dom.player.currentTime / dom.player.duration) * 100;
    if (isNaN(percent)) { // this happens when we end the activity
      return;
    }
    percent += '%';

    dom.elapsedText.textContent = MediaUtils.formatDuration(
      dom.player.currentTime);
    dom.elapsedTime.style.width = percent;
    // Don't move the play head if the user is dragging it.
    if (!dragging) {
      movePlayHead(percent);
    }
  }

  function handleSliderTouchEnd(event) {
    // We don't care the event not related to touchStartID
    if (!event.changedTouches.identifiedTouch(touchStartID)) {
      return;
    }
    touchStartID = null;

    if (!dragging) {
      // We don't need to do anything without dragging.
      return;
    }

    dragging = false;

    dom.playHead.classList.remove('active');

    // We didn't move the play head while the user's finger was on it
    // so now it may be in the wrong place.
    updateSlider();

    if (dom.player.currentTime === dom.player.duration) {
      pause();
    }
  }

  function handleSliderTouchMove(event) {
    if (!dragging) {
      return;
    }

    var touch = event.changedTouches.identifiedTouch(touchStartID);
    // We don't care the event not related to touchStartID
    if (!touch) {
      return;
    }

    function getTouchPos() {
      return (document.documentElement.dir === 'ltr') ?
         (touch.clientX - sliderRect.left) :
         (sliderRect.right - touch.clientX);
    }

    var touchPos = getTouchPos();

    var pos = touchPos / sliderRect.width;
    pos = Math.max(pos, 0);
    pos = Math.min(pos, 1);

    // Update the slider to match the position of the user's finger.
    // Note, however, that we don't update the displayed time until
    // we actually get a 'seeked' event.
    var percent = pos * 100 + '%';
    dom.playHead.classList.add('active');
    movePlayHead(percent);
    dom.elapsedTime.style.width = percent;
    seeker.seekTo(dom.player.duration * pos);
  }

  function handleSliderKeypress(event) {
    // The standard accessible control for sliders is arrow up/down keys.
    // Our screenreader synthesizes those events on swipe up/down gestures.
    // Currently, we only allow screen reader users to adjust sliders with a
    // constant step size (there is no page up/down equivalent). In the case
    // of videos, we make sure that the maximum amount of steps for the entire
    // duration is 20, or 2 second increments if the duration is less then 40
    // seconds.
    var step = Math.max(dom.player.duration / 20, 2);
    if (event.keyCode === event.DOM_VK_DOWN) {
      seeker.seekTo(dom.player.currentTime - step);
    } else if (event.keyCode === event.DOM_VK_UP) {
      seeker.seekTo(dom.player.currentTime + step);
    }
  }

  function showBanner(l10n) {
    document.l10n.setAttributes(
      dom.message,
      l10n.id,
      l10n.args);
    dom.banner.hidden = false;
    setTimeout(function() {
      dom.banner.hidden = true;
    }, 3000);
  }

  // Strip directories and just return the base filename
  function baseName(filename) {
    if (!filename) {
      return '';
    }
    return filename.substring(filename.lastIndexOf('/') + 1);
  }

  function setDisabled(element, disabled) {
    element.classList.toggle('disabled', disabled);

    // Set ARIA disabled attribute to maintain semantic meaning for the
    // assistive technologies like screen reader.
    element.setAttribute('aria-disabled', disabled);
  }

  function showSpinner() {
    if (!blob) {
      dom.spinnerOverlay.classList.remove('hidden');
      setDisabled(dom.playerView, true);
    }
  }

  function hideSpinner() {
    dom.spinnerOverlay.classList.add('hidden');
    setDisabled(dom.playerView, false);
  }
})();