123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- /* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
- define(["jquery", "util", "session", "elementFinder"],
- function ($, util, session, elementFinder) {
- var listeners = [];
- var TIME_UPDATE = 'timeupdate';
- var MIRRORED_EVENTS = ['play', 'pause'];
- var TOO_FAR_APART = 3000;
- session.on("reinitialize", function () {
- unsetListeners();
- setupListeners();
- });
- session.on("ui-ready", setupListeners);
- function setupListeners() {
- var videos = $('video');
- setupMirroredEvents(videos);
- setupTimeSync(videos);
- }
- function setupMirroredEvents(videos) {
- var currentListener;
- MIRRORED_EVENTS.forEach(function (eventName) {
- currentListener = makeEventSender(eventName);
- videos.on(eventName, currentListener);
- listeners.push({
- name: eventName,
- listener: currentListener
- });
- });
- }
- function makeEventSender(eventName) {
- return function (event, options) {
- var element = event.target;
- options = options || {};
- if (!options.silent) {
- session.send({
- type: ('video-'+eventName),
- location: elementFinder.elementLocation(element),
- position: element.currentTime
- });
- }
- };
- }
- function setupTimeSync(videos) {
- videos.each(function(i, video) {
- var onTimeUpdate = makeTimeUpdater();
- $(video).on(TIME_UPDATE, onTimeUpdate);
- listeners.push({
- name: TIME_UPDATE,
- listener: onTimeUpdate
- });
- });
- }
- function makeTimeUpdater() {
- var last = 0;
- return function (event) {
- var currentTime = event.target.currentTime;
- if(areTooFarApart(currentTime, last)){
- makeEventSender(TIME_UPDATE)(event);
- }
- last = currentTime;
- };
- }
- function areTooFarApart(currentTime, lastTime) {
- var secDiff = Math.abs(currentTime - lastTime);
- var milliDiff = secDiff * 1000;
- return milliDiff > TOO_FAR_APART;
- }
- session.on("close", unsetListeners);
- function unsetListeners() {
- var videos = $('video');
- listeners.forEach(function (event) {
- videos.off(event.name, event.listener);
- });
- listeners = [];
- }
- session.hub.on('video-timeupdate', function (msg) {
- var element = $findElement(msg.location);
- var oldTime = element.prop('currentTime');
- var newTime = msg.position;
- //to help throttle uneccesary position changes
- if(areTooFarApart(oldTime, newTime)){
- setTime(element, msg.position);
- }
- });
- MIRRORED_EVENTS.forEach( function (eventName) {
- session.hub.on("video-"+eventName, function (msg) {
- var element = $findElement(msg.location);
- setTime(element, msg.position);
- element.trigger(eventName, {silent: true});
- });
- });
- //Currently does not discriminate between visible and invisible videos
- function $findElement(location) {
- return $(elementFinder.findElement(location));
- }
- function setTime(video, time) {
- video.prop('currentTime', time);
- }
- });
|