1044 lines
26 KiB
JavaScript
1044 lines
26 KiB
JavaScript
var Clicks = function(youTubeAPIKey, container, takeDocumentHashOwnership, trackingID) {
|
|
this.youTubeAPIKey_ = youTubeAPIKey;
|
|
this.container_ = container;
|
|
this.players_ = [];
|
|
this.activePlayer_ = null;
|
|
this.delayedConfig_ = {};
|
|
|
|
this.buildUI_();
|
|
|
|
this.eventTarget_ = document.createDocumentFragment();
|
|
this.addEventListener =
|
|
this.eventTarget_.addEventListener.bind(this.eventTarget_);
|
|
this.removeEventListener =
|
|
this.eventTarget_.removeEventListener.bind(this.eventTarget_);
|
|
this.dispatchEvent =
|
|
this.eventTarget_.dispatchEvent.bind(this.eventTarget_);
|
|
|
|
if (trackingID) {
|
|
this.loadAnalytics(trackingID);
|
|
}
|
|
|
|
window.addEventListener('resize', this.onWindowResize_.bind(this));
|
|
|
|
this.addEventListener('configchange', this.updateControls_.bind(this));
|
|
if (takeDocumentHashOwnership) {
|
|
this.takeDocumentHashOwnership();
|
|
}
|
|
|
|
window.addEventListener('keypress', this.onKeyPress_.bind(this));
|
|
window.setInterval(this.fireConfigChange.bind(this), 300);
|
|
};
|
|
|
|
|
|
Clicks.youTubeIframeAPIReady = false;
|
|
Clicks.onYouTubeIframeAPIReady = [];
|
|
Clicks.keyStrings = {
|
|
' ': '<space>',
|
|
'\x1b': '<esc>',
|
|
};
|
|
|
|
|
|
Clicks.createElementAndAppend = function(className, parentNode) {
|
|
var element = document.createElement('div');
|
|
element.className = className;
|
|
parentNode.appendChild(element);
|
|
return element;
|
|
};
|
|
|
|
|
|
Clicks.prototype.trackEvent_ = function(var_args) {
|
|
if (this.analyticsObj_) {
|
|
this.analyticsObj_.apply(this, arguments);
|
|
} else if (this.analyticsObjName_) {
|
|
window[this.analyticsObjName_].q.push(arguments);
|
|
}
|
|
};
|
|
|
|
|
|
Clicks.prototype.loadAnalytics = function(trackingID) {
|
|
this.analyticsObjName_ = 'ClicksAnalytics' + Math.round(Math.random() * 10000000).toString();
|
|
window['GoogleAnalyticsObject'] = this.analyticsObjName_;
|
|
|
|
var completeCallback = (function() {
|
|
this.analyticsObj_ = window[this.analyticsObjName_];
|
|
delete window[this.analyticsObjName_];
|
|
}).bind(this);
|
|
|
|
window[this.analyticsObjName_] = {
|
|
'l': 1 * new Date(),
|
|
'q': [],
|
|
};
|
|
|
|
var script = document.createElement('script');
|
|
script.src = 'https://www.google-analytics.com/analytics.js';
|
|
script.async = true;
|
|
script.onload = completeCallback;
|
|
document.body.appendChild(script);
|
|
|
|
this.trackEvent_('create', trackingID, {
|
|
'storage': 'none',
|
|
'clientId': localStorage['clicks_tracking_client_id']
|
|
});
|
|
this.trackEvent_((function(analytics) {
|
|
localStorage['clicks_tracking_client_id'] =
|
|
analytics.get('clientId');
|
|
}).bind(this));
|
|
};
|
|
|
|
|
|
Clicks.prototype.takeDocumentHashOwnership = function() {
|
|
if (document.location.hash.length > 1) {
|
|
this.parseConfigString(document.location.hash.substring(1));
|
|
}
|
|
|
|
this.addEventListener('configchange', function(e) {
|
|
if (e.detail.length == 0) {
|
|
return;
|
|
}
|
|
document.location.hash = '#' + e.detail;
|
|
});
|
|
};
|
|
|
|
|
|
Clicks.prototype.onAddVideoValueChanged_ = function(e) {
|
|
var value = e.target.textContent;
|
|
|
|
if (value.length == 11 && value.indexOf(':') == -1 && value.indexOf('.') == -1) {
|
|
// Plausible YouTube video ID
|
|
this.addVideo(value);
|
|
return;
|
|
}
|
|
|
|
var parse = document.createElement('a');
|
|
parse.href = value;
|
|
|
|
if ((parse.hostname == 'youtu.be' || parse.hostname == 'www.youtu.be') && parse.pathname.length == 12) {
|
|
this.addVideo(parse.pathname.substring(1));
|
|
return;
|
|
}
|
|
|
|
var re = new RegExp('[?&]v=([^&]{11})(&|$)');
|
|
var match = re.exec(parse.search);
|
|
if (match) {
|
|
this.addVideo(match[1]);
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
Clicks.prototype.buildUI_ = function() {
|
|
this.container_.tabIndex = -1;
|
|
|
|
this.addVideo_ = Clicks.createElementAndAppend(
|
|
'clicks-add-video clicks-add-video-active', this.container_);
|
|
var addVideoDialog = Clicks.createElementAndAppend(
|
|
'clicks-add-video-dialog', this.addVideo_);
|
|
this.addVideoValue_ = Clicks.createElementAndAppend(
|
|
'clicks-add-video-input', addVideoDialog);
|
|
this.addVideoValue_.contentEditable = true;
|
|
this.addVideoValue_.addEventListener('keypress', function(e) { e.stopPropagation(); });
|
|
this.addVideoValue_.addEventListener('input', this.onAddVideoValueChanged_.bind(this));
|
|
this.addVideoValue_.focus();
|
|
|
|
this.loading_ = Clicks.createElementAndAppend(
|
|
'clicks-loading', this.container_);
|
|
|
|
this.controls_ = Clicks.createElementAndAppend(
|
|
'clicks-controls', this.container_);
|
|
|
|
var infoArea = Clicks.createElementAndAppend(
|
|
'clicks-control-info-area', this.controls_);
|
|
this.title_ = Clicks.createElementAndAppend(
|
|
'clicks-title', infoArea);
|
|
this.channel_ = Clicks.createElementAndAppend(
|
|
'clicks-channel', infoArea);
|
|
this.currentTime_ = Clicks.createElementAndAppend(
|
|
'clicks-current-time', infoArea);
|
|
this.totalTime_ = Clicks.createElementAndAppend(
|
|
'clicks-total-time', infoArea);
|
|
|
|
this.buffering_ = document.createElement('img');
|
|
this.buffering_.src = '/static/images/buffering.svg';
|
|
this.buffering_.className = 'clicks-buffering';
|
|
infoArea.appendChild(this.buffering_);
|
|
|
|
var controls = [
|
|
{
|
|
'title': 'Transport',
|
|
'buttons': [
|
|
[
|
|
{
|
|
'img': 'playpause',
|
|
'key': ' ',
|
|
},
|
|
{
|
|
'img': 'play',
|
|
'key': 'a',
|
|
},
|
|
{
|
|
'img': 'pause',
|
|
'key': 's',
|
|
},
|
|
],
|
|
[
|
|
{
|
|
'img': 'jumpback-1f',
|
|
'key': 't',
|
|
},
|
|
{
|
|
'img': 'jumpback-1s',
|
|
'key': 'r',
|
|
},
|
|
{
|
|
'img': 'jumpback-10s',
|
|
'key': 'e',
|
|
},
|
|
{
|
|
'img': 'jumpback-1m',
|
|
'key': 'w',
|
|
},
|
|
{
|
|
'img': 'jumpback-10m',
|
|
'key': 'q',
|
|
},
|
|
],
|
|
[
|
|
{
|
|
'img': 'jumpforward-1f',
|
|
'key': 'y',
|
|
},
|
|
{
|
|
'img': 'jumpforward-1s',
|
|
'key': 'u',
|
|
},
|
|
{
|
|
'img': 'jumpforward-10s',
|
|
'key': 'i',
|
|
},
|
|
{
|
|
'img': 'jumpforward-1m',
|
|
'key': 'o',
|
|
},
|
|
{
|
|
'img': 'jumpforward-10m',
|
|
'key': 'p',
|
|
},
|
|
],
|
|
],
|
|
},
|
|
{
|
|
'title': 'Rate',
|
|
'buttons': [
|
|
[
|
|
{
|
|
'img': 'slower',
|
|
'key': '[',
|
|
},
|
|
{
|
|
'img': 'faster',
|
|
'key': ']',
|
|
},
|
|
],
|
|
[
|
|
{
|
|
'img': 'rate-025x',
|
|
'key': '3',
|
|
},
|
|
{
|
|
'img': 'rate-05x',
|
|
'key': '4',
|
|
},
|
|
{
|
|
'img': 'rate-1x',
|
|
'key': '5',
|
|
},
|
|
{
|
|
'img': 'rate-125x',
|
|
'key': '6',
|
|
},
|
|
{
|
|
'img': 'rate-15x',
|
|
'key': '7',
|
|
},
|
|
{
|
|
'img': 'rate-2x',
|
|
'key': '8',
|
|
},
|
|
],
|
|
],
|
|
},
|
|
{
|
|
'title': 'Zoom',
|
|
'buttons': [
|
|
[
|
|
{
|
|
'img': 'zoom-out',
|
|
'key': '-',
|
|
},
|
|
{
|
|
'img': 'zoom-in',
|
|
'key': '+',
|
|
},
|
|
],
|
|
],
|
|
},
|
|
{
|
|
'title': 'Markers',
|
|
'buttons': [],
|
|
},
|
|
{
|
|
'title': 'Player',
|
|
'buttons': [
|
|
[
|
|
{
|
|
'img': 'togglefullscreen',
|
|
'key': 'd',
|
|
},
|
|
{
|
|
'img': 'fullscreen',
|
|
'key': 'f',
|
|
},
|
|
{
|
|
'img': 'exitfullscreen',
|
|
'key': '\x1b',
|
|
},
|
|
],
|
|
[
|
|
{
|
|
'img': 'mutetoggle',
|
|
'key': 'm',
|
|
},
|
|
{
|
|
'img': 'mute',
|
|
'key': 'b',
|
|
},
|
|
{
|
|
'img': 'unmute',
|
|
'key': 'n',
|
|
},
|
|
],
|
|
],
|
|
},
|
|
];
|
|
|
|
|
|
var selectArea = Clicks.createElementAndAppend(
|
|
'clicks-control-section-select-area', this.controls_);
|
|
|
|
this.sectionSelectors_ = {};
|
|
|
|
for (var i = 0; i < controls.length; i++) {
|
|
var section = controls[i];
|
|
|
|
var sectionSelect = Clicks.createElementAndAppend(
|
|
'clicks-control-section-select', selectArea);
|
|
sectionSelect.textContent = section.title;
|
|
sectionSelect.addEventListener(
|
|
'click', this.activateControlSection_.bind(this, section.title));
|
|
this.sectionSelectors_[section.title] = sectionSelect;
|
|
}
|
|
|
|
var sectionArea = Clicks.createElementAndAppend(
|
|
'clicks-control-section-area', this.controls_);
|
|
|
|
this.sections_ = {};
|
|
this.buttons_ = {};
|
|
|
|
for (var i = 0; i < controls.length; i++) {
|
|
var section = controls[i];
|
|
|
|
var sectionNode = Clicks.createElementAndAppend(
|
|
'clicks-control-section', sectionArea);
|
|
this.sections_[section.title] = sectionNode;
|
|
|
|
for (var j = 0; j < section.buttons.length; j++) {
|
|
var buttons = section.buttons[j];
|
|
var row = Clicks.createElementAndAppend(
|
|
'clicks-control-section-row', sectionNode);
|
|
|
|
for (var k = 0; k < buttons.length; k++) {
|
|
var button = buttons[k];
|
|
var buttonNode = this.buildButton_(button.img, button.key);
|
|
row.appendChild(buttonNode);
|
|
this.buttons_[button.img] = buttonNode;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.playersContainer_ = Clicks.createElementAndAppend(
|
|
'clicks-players-container', this.container_);
|
|
|
|
this.activateControlSection_(controls[0].title);
|
|
|
|
this.container_.addEventListener('click', this.showHideControls_.bind(this));
|
|
};
|
|
|
|
|
|
Clicks.prototype.activateControlSection_ = function(title, e) {
|
|
if (e) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
for (var key in this.sections_) {
|
|
if (key == title) {
|
|
this.sectionSelectors_[key].className =
|
|
'clicks-control-section-select clicks-control-section-select-active';
|
|
this.sections_[key].className =
|
|
'clicks-control-section clicks-control-section-active';
|
|
} else {
|
|
this.sectionSelectors_[key].className = 'clicks-control-section-select';
|
|
this.sections_[key].className = 'clicks-control-section';
|
|
};
|
|
}
|
|
};
|
|
|
|
|
|
Clicks.prototype.buildButton_ = function(image, key) {
|
|
var button = document.createElement('div');
|
|
button.className = 'clicks-button';
|
|
|
|
var img = document.createElement('img');
|
|
img.src = '/static/images/' + image + '.svg';
|
|
button.appendChild(img);
|
|
|
|
var shortcut = document.createElement('div');
|
|
shortcut.className = 'clicks-shortcut';
|
|
shortcut.textContent = Clicks.keyStrings[key] || key;
|
|
button.appendChild(shortcut);
|
|
|
|
button.addEventListener('click', function(e) {
|
|
this.onKeyPress_({
|
|
'charCode': key.charCodeAt(0),
|
|
});
|
|
e.stopPropagation();
|
|
}.bind(this));
|
|
|
|
return button;
|
|
};
|
|
|
|
|
|
Clicks.prototype.isFullScreen_ = function() {
|
|
return window.innerHeight == screen.height;
|
|
};
|
|
|
|
|
|
Clicks.prototype.parseConfigString = function(str) {
|
|
var params = str.split(',');
|
|
for (var i = 0; i < params.length; i++) {
|
|
var keyValue = params[i].split('=', 2);
|
|
switch (keyValue[0]) {
|
|
case 'ytid':
|
|
this.addVideo(keyValue[1]);
|
|
break;
|
|
case 'rate':
|
|
case 'zoom':
|
|
case 'muted':
|
|
case 'time':
|
|
this.delayedConfig_[keyValue[0]] = keyValue[1];
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
Clicks.prototype.getConfigString = function() {
|
|
if (!this.activePlayer_) {
|
|
return '';
|
|
}
|
|
|
|
var config = {
|
|
'ytid': this.activePlayer_.id,
|
|
'rate': this.activePlayer_.getRate().realRate,
|
|
'zoom': this.activePlayer_.getZoomLevel(),
|
|
'muted': this.activePlayer_.player.isMuted() ? 1 : 0,
|
|
'time': this.activePlayer_.player.getCurrentTime(),
|
|
};
|
|
var params = [];
|
|
for (var key in config) {
|
|
params.push(key + '=' + config[key]);
|
|
}
|
|
return params.join(',');
|
|
};
|
|
|
|
|
|
Clicks.prototype.durationToString_ = function(num) {
|
|
function zeroPad(x) {
|
|
var xstr = x.toString();
|
|
return xstr.length == 1 ? '0' + xstr : xstr;
|
|
}
|
|
|
|
return (
|
|
zeroPad(Math.floor(num / 3600)) + 'h ' +
|
|
zeroPad(Math.floor(num % 3600 / 60)) + 'm ' +
|
|
zeroPad(Math.floor(num % 60)) + '.' +
|
|
zeroPad(Math.floor(num * 100 % 100)) + 's'
|
|
);
|
|
};
|
|
|
|
|
|
Clicks.prototype.setButtonActive_ = function(name, active) {
|
|
if (active) {
|
|
this.buttons_[name].className = 'clicks-button clicks-button-active';
|
|
} else {
|
|
this.buttons_[name].className = 'clicks-button';
|
|
}
|
|
};
|
|
|
|
|
|
Clicks.prototype.fireConfigChange = function() {
|
|
var e = new CustomEvent('configchange', {
|
|
'detail': this.getConfigString(),
|
|
});
|
|
this.dispatchEvent(e);
|
|
};
|
|
|
|
|
|
Clicks.prototype.updateControls_ = function(e) {
|
|
if (this.isFullScreen_()) {
|
|
this.setButtonActive_('fullscreen', true);
|
|
this.setButtonActive_('exitfullscreen', false);
|
|
} else {
|
|
this.setButtonActive_('fullscreen', false);
|
|
this.setButtonActive_('exitfullscreen', true);
|
|
}
|
|
if (!this.activePlayer_) {
|
|
return;
|
|
}
|
|
|
|
this.currentTime_.textContent = this.durationToString_(
|
|
this.activePlayer_.player.getCurrentTime());
|
|
this.totalTime_.textContent = this.durationToString_(
|
|
this.activePlayer_.player.getDuration());
|
|
|
|
if (this.activePlayer_.player.getPlayerState() == YT.PlayerState.BUFFERING) {
|
|
this.buffering_.className = 'clicks-buffering clicks-buffering-active';
|
|
} else {
|
|
this.buffering_.className = 'clicks-buffering';
|
|
}
|
|
|
|
if (this.activePlayer_.player.getPlayerState() == YT.PlayerState.PLAYING) {
|
|
this.setButtonActive_('play', true);
|
|
this.setButtonActive_('pause', false);
|
|
} else {
|
|
this.setButtonActive_('play', false);
|
|
this.setButtonActive_('pause', true);
|
|
}
|
|
|
|
if (this.activePlayer_.player.isMuted()) {
|
|
this.setButtonActive_('mute', true);
|
|
this.setButtonActive_('unmute', false);
|
|
} else {
|
|
this.setButtonActive_('mute', false);
|
|
this.setButtonActive_('unmute', true);
|
|
}
|
|
|
|
var activeRate = this.activePlayer_.getRate().realRate;
|
|
this.setButtonActive_('rate-025x', activeRate == 0.25);
|
|
this.setButtonActive_('rate-05x', activeRate == 0.5);
|
|
this.setButtonActive_('rate-1x', activeRate == 1.0);
|
|
this.setButtonActive_('rate-125x', activeRate == 1.25);
|
|
this.setButtonActive_('rate-15x', activeRate == 1.5);
|
|
this.setButtonActive_('rate-2x', activeRate == 2.0);
|
|
};
|
|
|
|
|
|
Clicks.prototype.addVideo = function(id) {
|
|
console.log('Adding YouTube video ID:', id);
|
|
new ClicksVideo(this.youTubeAPIKey_, id, this.playersContainer_, this.onVideoAdded_.bind(this));
|
|
|
|
this.addVideo_.className = 'clicks-add-video';
|
|
this.container_.focus();
|
|
this.addVideoValue_.textContent = '';
|
|
|
|
this.trackEvent_('send', 'event', 'Video', 'Add', id);
|
|
};
|
|
|
|
|
|
Clicks.prototype.onVideoAdded_ = function(player) {
|
|
this.players_.push(player);
|
|
this.activePlayer_ = player;
|
|
for (var key in this.delayedConfig_) {
|
|
var value = this.delayedConfig_[key];
|
|
switch (key) {
|
|
case 'rate':
|
|
this.activePlayer_.setRate(parseFloat(value));
|
|
break;
|
|
case 'zoom':
|
|
this.activePlayer_.zoom(parseFloat(value));
|
|
break;
|
|
case 'muted':
|
|
if (parseInt(value)) {
|
|
this.activePlayer_.player.mute();
|
|
} else {
|
|
this.activePlayer_.player.unMute();
|
|
}
|
|
break;
|
|
case 'time':
|
|
this.activePlayer_.player.seekTo(parseFloat(value), true);
|
|
break;
|
|
}
|
|
}
|
|
this.activePlayer_.resize();
|
|
this.activePlayer_.player.unMute();
|
|
|
|
document.title = player.metadata.title;
|
|
this.title_.textContent = player.metadata.title;
|
|
this.channel_.textContent = player.metadata.channelTitle;
|
|
|
|
for (var i = 0; i < player.metadata.markers.length; i++) {
|
|
var marker = player.metadata.markers[i];
|
|
|
|
var markerNode = document.createElement('div');
|
|
markerNode.className = 'clicks-controls-marker';
|
|
|
|
var markerName = document.createElement('div');
|
|
markerName.className = 'clicks-controls-marker-name';
|
|
markerName.textContent = marker[1];
|
|
markerNode.appendChild(markerName);
|
|
|
|
var markerTime = document.createElement('div');
|
|
markerTime.className = 'clicks-controls-marker-time';
|
|
markerTime.textContent = this.durationToString_(marker[0]);
|
|
markerNode.appendChild(markerTime);
|
|
|
|
markerNode.addEventListener('click', function(time, e) {
|
|
this.activePlayer_.player.seekTo(time, true);
|
|
e.stopPropagation();
|
|
}.bind(this, marker[0]));
|
|
|
|
this.sections_['Markers'].appendChild(markerNode);
|
|
}
|
|
|
|
player.unhide();
|
|
this.loading_.className = 'clicks-loading clicks-loading-complete';
|
|
player.player.playVideo();
|
|
|
|
this.fireConfigChange();
|
|
};
|
|
|
|
|
|
Clicks.prototype.onWindowResize_ = function(e) {
|
|
for (var i = 0; i < this.players_.length; i++) {
|
|
this.players_[i].resize();
|
|
}
|
|
};
|
|
|
|
|
|
Clicks.prototype.onKeyPress_ = function(e) {
|
|
switch (String.fromCharCode(e.charCode).toLowerCase()) {
|
|
case ' ':
|
|
if (this.activePlayer_.player.getPlayerState() == YT.PlayerState.PLAYING) {
|
|
this.activePlayer_.player.pauseVideo();
|
|
} else {
|
|
this.activePlayer_.player.playVideo();
|
|
}
|
|
break;
|
|
case 'a':
|
|
this.activePlayer_.player.playVideo();
|
|
break;
|
|
|
|
case 's':
|
|
this.activePlayer_.player.pauseVideo();
|
|
break;
|
|
|
|
case '[':
|
|
var i = this.activePlayer_.getRateIndex();
|
|
if (i > 0) {
|
|
this.activePlayer_.setRate(this.activePlayer_.rates[i - 1].realRate);
|
|
}
|
|
break;
|
|
case ']':
|
|
var i = this.activePlayer_.getRateIndex();
|
|
if (i < this.activePlayer_.rates.length - 1) {
|
|
this.activePlayer_.setRate(this.activePlayer_.rates[i + 1].realRate);
|
|
}
|
|
break;
|
|
|
|
case '3':
|
|
this.activePlayer_.setRate(0.25);
|
|
break;
|
|
case '4':
|
|
this.activePlayer_.setRate(0.5);
|
|
break;
|
|
case '5':
|
|
this.activePlayer_.setRate(1.0);
|
|
break;
|
|
case '6':
|
|
this.activePlayer_.setRate(1.25);
|
|
break;
|
|
case '7':
|
|
this.activePlayer_.setRate(1.5);
|
|
break;
|
|
case '8':
|
|
this.activePlayer_.setRate(2);
|
|
break;
|
|
|
|
case 't':
|
|
this.activePlayer_.seekRelative(0 - this.activePlayer_.frameSkip);
|
|
break;
|
|
case 'r':
|
|
this.activePlayer_.seekRelative(-1);
|
|
break;
|
|
case 'e':
|
|
this.activePlayer_.seekRelative(-10);
|
|
break;
|
|
case 'w':
|
|
this.activePlayer_.seekRelative(-60);
|
|
break;
|
|
case 'q':
|
|
this.activePlayer_.seekRelative(-600);
|
|
break;
|
|
|
|
case 'y':
|
|
this.activePlayer_.seekRelative(this.activePlayer_.frameSkip);
|
|
break;
|
|
case 'u':
|
|
this.activePlayer_.seekRelative(1);
|
|
break;
|
|
case 'i':
|
|
this.activePlayer_.seekRelative(10);
|
|
break;
|
|
case 'o':
|
|
this.activePlayer_.seekRelative(60);
|
|
break;
|
|
case 'p':
|
|
this.activePlayer_.seekRelative(600);
|
|
break;
|
|
|
|
case 'd':
|
|
if (this.isFullScreen_()) {
|
|
this.exitFullScreen_();
|
|
} else {
|
|
this.fullScreen_();
|
|
}
|
|
case 'f':
|
|
this.fullScreen_();
|
|
break;
|
|
case '\x1b':
|
|
this.exitFullScreen_();
|
|
break;
|
|
|
|
case 'm':
|
|
if (this.activePlayer_.player.isMuted()) {
|
|
this.activePlayer_.player.unMute();
|
|
} else {
|
|
this.activePlayer_.player.mute();
|
|
}
|
|
break;
|
|
case 'b':
|
|
this.activePlayer_.player.mute();
|
|
break;
|
|
case 'n':
|
|
this.activePlayer_.player.unMute();
|
|
break;
|
|
|
|
case '-':
|
|
case '_':
|
|
this.activePlayer_.zoomOut();
|
|
break;
|
|
|
|
case '+':
|
|
case '=':
|
|
this.activePlayer_.zoomIn();
|
|
break;
|
|
}
|
|
this.fireConfigChange();
|
|
};
|
|
|
|
|
|
Clicks.prototype.showHideControls_ = function(e) {
|
|
if (this.controls_.className == 'clicks-controls clicks-controls-active') {
|
|
this.controls_.className = 'clicks-controls';
|
|
} else {
|
|
this.controls_.className = 'clicks-controls clicks-controls-active';
|
|
}
|
|
e.stopPropagation();
|
|
};
|
|
|
|
|
|
Clicks.prototype.fullScreen_ = function() {
|
|
if (this.container_.requestFullscreen) {
|
|
this.container_.requestFullscreen();
|
|
} else if (this.container_.webkitRequestFullscreen) {
|
|
this.container_.webkitRequestFullscreen();
|
|
} else if (this.container_.mozRequestFullScreen) {
|
|
this.container_.mozRequestFullScreen();
|
|
}
|
|
};
|
|
|
|
|
|
Clicks.prototype.exitFullScreen_ = function() {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.webkitExitFullscreen) {
|
|
document.webkitExitFullscreen();
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen();
|
|
}
|
|
};
|
|
|
|
|
|
|
|
var ClicksVideo = function(youTubeAPIKey, id, container, onReady) {
|
|
this.youTubeAPIKey_ = youTubeAPIKey;
|
|
this.id = id;
|
|
this.container_ = container;
|
|
this.onReady_ = onReady;
|
|
this.loading_ = true;
|
|
this.zoomLevel_ = 1.0;
|
|
|
|
this.fetchVideoInfo_(id, this.onMetadataResponse_.bind(this));
|
|
|
|
if (Clicks.youTubeIframeAPIReady) {
|
|
this.onAPIReady_();
|
|
} else {
|
|
Clicks.onYouTubeIframeAPIReady.push(this.onAPIReady_.bind(this));
|
|
}
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.zoomLevels_ = function() {
|
|
// TODO: make this dynamic and refuse to zoom beyond 1:1
|
|
return [
|
|
1.0,
|
|
1.5,
|
|
2.0,
|
|
2.5,
|
|
3.0,
|
|
];
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.getZoomLevel = function() {
|
|
return this.zoomLevel_;
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.zoom = function(zoomLevel) {
|
|
// TODO: sotp overzoom
|
|
this.zoomLevel_ = zoomLevel;
|
|
this.resize();
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.zoomOut = function() {
|
|
var zoomLevels = this.zoomLevels_();
|
|
var i = zoomLevels.indexOf(this.zoomLevel_);
|
|
this.zoom(zoomLevels[i - 1] || this.zoomLevel_);
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.zoomIn = function() {
|
|
var zoomLevels = this.zoomLevels_();
|
|
var i = zoomLevels.indexOf(this.zoomLevel_);
|
|
this.zoom(zoomLevels[i + 1] || this.zoomLevel_);
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.unhide = function() {
|
|
this.playerContainer_.className =
|
|
'clicks-player-container clicks-player-container-active';
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.resize = function() {
|
|
var zoom = Math.min(
|
|
this.container_.clientWidth / this.videoRes[0],
|
|
this.container_.clientHeight / this.videoRes[1]);
|
|
zoom = Math.min(zoom * this.zoomLevel_, 1.0);
|
|
this.playerScale_.style.transform = [
|
|
'scale(' + zoom + ',' + zoom + ')',
|
|
].join(' ');
|
|
this.playerScale_.style.width = this.videoRes[0];
|
|
this.playerScale_.style.height = this.videoRes[1];
|
|
this.playerCrop_.style.width = Math.ceil(this.videoRes[0] * zoom);
|
|
this.playerCrop_.style.height = Math.ceil(this.videoRes[1] * zoom);
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.onMetadataResponse_ = function(response) {
|
|
this.metadata = this.parseVideoDescription_(response);
|
|
this.checkComplete_();
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.onPlayerReady_ = function(e) {
|
|
this.playerRates = e.target.getAvailablePlaybackRates();
|
|
this.checkComplete_();
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.onPlayerStateChange_ = function(e) {
|
|
if (e.data == YT.PlayerState.PLAYING && this.loading_) {
|
|
this.player.pauseVideo();
|
|
this.player.seekTo(0, true);
|
|
this.setRate(1.0);
|
|
this.loading_ = false;
|
|
this.onReady_(this);
|
|
}
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.onAPIReady_ = function() {
|
|
this.playerContainer_ = Clicks.createElementAndAppend(
|
|
'clicks-player-container', this.container_);
|
|
this.playerCrop_ = Clicks.createElementAndAppend(
|
|
'clicks-player-crop', this.playerContainer_);
|
|
this.playerScale_ = Clicks.createElementAndAppend(
|
|
'clicks-player-scale', this.playerCrop_);
|
|
this.playerOverlay_ = Clicks.createElementAndAppend(
|
|
'clicks-player-overlay', this.playerScale_);
|
|
|
|
var tempNode = document.createElement('div');
|
|
this.playerScale_.appendChild(tempNode);
|
|
this.player = new YT.Player(tempNode, {
|
|
height: '1080',
|
|
width: '1920',
|
|
videoId: this.id,
|
|
playerVars: {
|
|
'controls': 0,
|
|
'enablejsapi': 1,
|
|
'disablekb': 1,
|
|
'showinfo': 0,
|
|
},
|
|
events: {
|
|
'onReady': this.onPlayerReady_.bind(this),
|
|
'onStateChange': this.onPlayerStateChange_.bind(this),
|
|
},
|
|
});
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.checkComplete_ = function() {
|
|
if (!this.metadata || !this.playerRates) {
|
|
return;
|
|
}
|
|
var baseRate = parseFloat(this.metadata.tags.realfps) / parseFloat(this.metadata.tags.ytfps)
|
|
this.rates = [];
|
|
for (var i = 0; i < this.playerRates.length; i++) {
|
|
this.rates.push({
|
|
'playerRate': this.playerRates[i],
|
|
'realRate': this.playerRates[i] * baseRate,
|
|
'fps': this.metadata.tags['ytfps'] * this.playerRates[i],
|
|
});
|
|
}
|
|
this.frameSkip = 1.0 / parseFloat(this.metadata.tags.ytfps);
|
|
var yRes = parseInt(this.metadata.tags.res);
|
|
this.videoRes = [yRes * 16 / 9, yRes];
|
|
this.player.setSize(this.videoRes[0], this.videoRes[1]);
|
|
this.player.setPlaybackQuality('highres');
|
|
this.player.setVolume(100);
|
|
this.player.mute();
|
|
this.player.playVideo();
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.seekRelative = function(offset) {
|
|
this.player.seekTo(this.player.getCurrentTime() + offset, true);
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.getRateIndex = function() {
|
|
var playerRate = this.player.getPlaybackRate();
|
|
for (var i = 0; i < this.rates.length; i++) {
|
|
if (this.rates[i].playerRate == playerRate) {
|
|
return i;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.getRate = function() {
|
|
return this.rates[this.getRateIndex()];
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.setRate = function(realRate) {
|
|
for (var i = 0; i < this.rates.length; i++) {
|
|
if (this.rates[i].realRate == realRate) {
|
|
this.player.setPlaybackRate(this.rates[i].playerRate);
|
|
return;
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.buildQueryString_ = function(args) {
|
|
var ret = [];
|
|
for (var key in args) {
|
|
ret.push(encodeURIComponent(key) + '=' + encodeURIComponent(args[key]));
|
|
}
|
|
return ret.join('&');
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.fetchVideoInfo_ = function(id, callback) {
|
|
var queryString = this.buildQueryString_({
|
|
'key': this.youTubeAPIKey_,
|
|
'part': 'snippet',
|
|
'id': id,
|
|
});
|
|
|
|
var sendRequest = function() {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.responseType = 'json';
|
|
xhr.open('GET', 'https://www.googleapis.com/youtube/v3/videos?' + queryString);
|
|
xhr.addEventListener('load', function(e) {
|
|
if (!e.target.response.items || e.target.response.items.length != 1) {
|
|
console.log('Invalid response:', e.target);
|
|
setTimeout(sendRequest, 1000);
|
|
return;
|
|
}
|
|
callback(e.target.response.items[0]);
|
|
});
|
|
xhr.addEventListener('error', function(e) {
|
|
setTimeout(sendRequest, 1000);
|
|
});
|
|
xhr.send();
|
|
};
|
|
|
|
sendRequest();
|
|
};
|
|
|
|
|
|
ClicksVideo.prototype.parseVideoDescription_ = function(video) {
|
|
var markerRe = new RegExp('^fctv:marker=(\\d+):(.*)$');
|
|
var tagRe = new RegExp('^fctv:(.*?)=(.*)$');
|
|
var ret = {
|
|
'title': video.snippet.title,
|
|
'channelTitle': video.snippet.channelTitle,
|
|
'tags': {
|
|
// Best guesses
|
|
'ytfps': 30.0,
|
|
'realfps': 30.0,
|
|
'res': '1080',
|
|
},
|
|
'markers': [],
|
|
};
|
|
for (var i = 0; i < video.snippet.tags.length; i++) {
|
|
var match = markerRe.exec(video.snippet.tags[i]);
|
|
if (match) {
|
|
ret.markers.push([parseFloat(match[1]), match[2]]);
|
|
continue;
|
|
}
|
|
|
|
match = tagRe.exec(video.snippet.tags[i]);
|
|
if (match) {
|
|
ret.tags[match[1]] = match[2];
|
|
}
|
|
}
|
|
return ret;
|
|
};
|
|
|
|
|
|
|
|
var onYouTubeIframeAPIReady = function() {
|
|
Clicks.youTubeIframeAPIReady = true;
|
|
for (var i = 0; i < Clicks.onYouTubeIframeAPIReady.length; i++) {
|
|
Clicks.onYouTubeIframeAPIReady[i]();
|
|
}
|
|
Clicks.onYouTubeIframeAPIReady.length = 0;
|
|
};
|