misc/clicks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pan a zoomed-in player with arrow keys.

Browse Source
This commit is contained in:
Ian Gulliver
2015-12-01 22:59:19 -08:00
parent a854c08137
commit 55cdb63eec
2 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/clicks.html
View File

@@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<div id="container" class="clicks-fullscreen-container"></div> <div id="container" class="clicks-fullscreen-container"></div>
<script src="/static/clicks.js"></script> <script src="/static/clicks.js" charset="UTF-8"></script>
<script src="https://www.youtube.com/iframe_api"></script> <script src="https://www.youtube.com/iframe_api"></script>
<script> <script>
new Clicks('AIzaSyAoIqzEVYfji5CqdFWu0__8cym3RYOA-Pc', document.getElementById('container'), true, 'UA-70175137-1'); new Clicks('AIzaSyAoIqzEVYfji5CqdFWu0__8cym3RYOA-Pc', document.getElementById('container'), true, 'UA-70175137-1');

48
static/clicks.js
View File

@@ -26,6 +26,7 @@ var Clicks = function(youTubeAPIKey, container, takeDocumentHashOwnership, track
this.takeDocumentHashOwnership(); this.takeDocumentHashOwnership();
} }
window.addEventListener('keydown', this.onKeyDown_.bind(this));
window.addEventListener('keypress', this.onKeyPress_.bind(this)); window.addEventListener('keypress', this.onKeyPress_.bind(this));
window.setInterval(this.fireConfigChange.bind(this), 300); window.setInterval(this.fireConfigChange.bind(this), 300);
}; };
@@ -33,6 +34,12 @@ var Clicks = function(youTubeAPIKey, container, takeDocumentHashOwnership, track
Clicks.youTubeIframeAPIReady = false; Clicks.youTubeIframeAPIReady = false;
Clicks.onYouTubeIframeAPIReady = []; Clicks.onYouTubeIframeAPIReady = [];
Clicks.keyCodeMappings = {
37: '←',
38: '↑',
39: '→',
40: '↓',
};
Clicks.keyStrings = { Clicks.keyStrings = {
' ': '<space>', ' ': '<space>',
'\x1b': '<esc>', '\x1b': '<esc>',
@@ -444,9 +451,7 @@ Clicks.prototype.buildButton_ = function(image, key) {
button.appendChild(shortcut); button.appendChild(shortcut);
button.addEventListener('click', function(e) { button.addEventListener('click', function(e) {
this.onKeyPress_({ this.handleKey_(key);
'charCode': key.charCodeAt(0),
});
e.stopPropagation(); e.stopPropagation();
}.bind(this)); }.bind(this));
@@ -684,8 +689,21 @@ Clicks.prototype.onWindowResize_ = function(e) {
}; };
Clicks.prototype.onKeyDown_ = function(e) {
var key = Clicks.keyCodeMappings[e.keyCode];
if (key) {
this.handleKey_(key);
}
};
Clicks.prototype.onKeyPress_ = function(e) { Clicks.prototype.onKeyPress_ = function(e) {
switch (String.fromCharCode(e.charCode).toLowerCase()) { this.handleKey_(String.fromCharCode(e.charCode).toLowerCase());
};
Clicks.prototype.handleKey_ = function(key) {
switch (key) {
case ' ': case ' ':
if (this.activePlayer_.player.getPlayerState() == YT.PlayerState.PLAYING) { if (this.activePlayer_.player.getPlayerState() == YT.PlayerState.PLAYING) {
this.activePlayer_.player.pauseVideo(); this.activePlayer_.player.pauseVideo();
@@ -825,6 +843,22 @@ Clicks.prototype.onKeyPress_ = function(e) {
case '*': case '*':
this.activePlayer_.zoom(4.5); this.activePlayer_.zoom(4.5);
break; break;
case '←':
this.activePlayer_.pan(-10, 0);
break;
case '→':
this.activePlayer_.pan(10, 0);
break;
case '↑':
this.activePlayer_.pan(0, -10);
break;
case '↓':
this.activePlayer_.pan(0, 10);
break;
default:
console.log('Unknown key:', key);
} }
this.fireConfigChange(); this.fireConfigChange();
}; };
@@ -909,6 +943,12 @@ ClicksVideo.prototype.zoom = function(zoomLevel) {
}; };
ClicksVideo.prototype.pan = function(x, y) {
this.playerContainer_.scrollLeft += x;
this.playerContainer_.scrollTop += y;
};
ClicksVideo.prototype.zoomOut = function() { ClicksVideo.prototype.zoomOut = function() {
var i = ClicksVideo.zoomLevels_.indexOf(this.zoomLevel_); var i = ClicksVideo.zoomLevels_.indexOf(this.zoomLevel_);
this.zoom(ClicksVideo.zoomLevels_[i - 1] || this.zoomLevel_); this.zoom(ClicksVideo.zoomLevels_[i - 1] || this.zoomLevel_);