BXX Camera Sync Enhancement (http://bxxweb.com)

bxxcamsync.js

// I saw the site from a link on Reddit.
// I wished I could easily sync the cameras.
// 3 hours later I had a script to do it.
// Just copy and paste it into your console. (I'm too lazy to make an extension).
//
// Features:
// - Control all cameras simultaneously by using the controls of any camera view.
//   (except for volume and crap like that).
// - Have cams playing? Launch another and it should sync up automatically.
//
// Bugs:
// - Gets weird with too many cams running (damn events).
//
// Notes:
// - Only tested in Chrome.
// - Let me know if you have improvements.
// 
// Have fun,
// BoB

function getCam(el) {
	return window['modVP_' + $(el).find('.cameraInfo').text().trim()];
	//return $(el).data('cam');
}

function getOpenPlayers() {
	var players = $('.cameraView');
	return $(players).map(function(){
		return getCam(this);
	});
}

function syncVidsToCam(cam){
    var cams = getOpenPlayers();
	
	function syncRest(time) {
		for(i=0;i<cams.length;i++){
			if (cams[i] !== cam) {
				//cams[i].play();
				cams[i].seek(time);
			}
		}
	}
	
	cam.getVideoPosition(false, syncRest);
}

function controlRest(cam, action) {
	//console.log('control other cams', action);
	var cams = getOpenPlayers();
	if (action === 'sync') {
		syncVidsToCam(cam);
	} else {
		for(i=0;i<cams.length;i++){
			if (cams[i] !== cam) {
				if (action === 'pause') {
					cams[i].pause();
				} else if (action === 'play') {
					cams[i].play();
				}
			}
		}
	}
}

var blockEvents = [];

function blockOtherCams(cam) {
	var cams = getOpenPlayers();
	var otherCams = [];
	for(i=0;i<cams.length;i++){
		if (cams[i] !== cam) {
			otherCams.push(cams[i]);
		}
	}
	blockEvents = otherCams;
}

function checkAndUnblock(cam) {
	for(i=0;i<blockEvents.length;i++){
		if (blockEvents[i] === cam) {
			blockEvents[i] = null;
			console.log('cam event blocked');
			return true;
		}
	}
	return false;
}

function bindEventsToCam(cam) {
	cam.addEventListener('mediaSeekNotify', function(ev) {
		console.log('seek', cam);
		if (!checkAndUnblock(cam)) {
			blockOtherCams(cam);
			controlRest(cam, 'sync');
		}
	});
	cam.addEventListener('mediaBegin', function(ev) {
		console.log('begin', cam);
		var firstCam = getOpenPlayers()[0];
		if (firstCam !== cam) {
			firstCam.getVideoPosition(false, function(pos) {
				blockOtherCams();
				cam.seek(pos);
			});
		}
	});
	cam.addEventListener('mediaPlay', function(ev) {
		console.log('play', cam);
		if (!checkAndUnblock(cam)) {
			blockOtherCams(cam);
			controlRest(cam, 'play');
		}
	});
	cam.addEventListener('mediaStop', function(ev) {
		console.log('pause', cam);
		if (!checkAndUnblock(cam)) {
			blockOtherCams(cam);
			controlRest(cam, 'pause');
		}
	});

	return cam;
}

function display_cam_seg(returnData){
    var $cam = $('#'+returnData['view_id']).html(returnData['camera']);
	var camStr = 'modVP_'+$cam.find('.cameraInfo').text().trim();
	var tries = 0;
	
	function tryToBind() {
		if (tries > 100) {
			console.log('tried too many times to bind', camStr, $cam);
			clearInterval(tryInterval);
			return false;
		} else {
			if (window.hasOwnProperty(camStr)) {
				var cam = window[camStr];
				if (typeof(cam) !== "undefined") {
					clearInterval(tryInterval);
					$cam.data('cam', cam);
					bindEventsToCam(cam);
					// sync
					var firstCam = getOpenPlayers()[0];
					if (firstCam !== cam) {
						firstCam.getIsPlaying(function(isit) {
							if (isit) {cam.play()}
						});
					}
				} else {
					tries += 1;
				}
			} else {
				tries += 1;
			}
		}
	}
	
	var tryInterval = setInterval(tryToBind, 100);	
}