cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

Change keyboard shortcuts to match youtube

Browse Source 
Use the same keyboard shortcuts than Youtube.
Add shortcut tooltips in titles.
Make sure tab is focused before handling gampad events.
This commit is contained in:
Jean-Samuel Aubry-Guzzi 2019-04-25 12:35:02 -04:00 committed by DrPandemic
parent df3d3bc7d3
commit 658aedf96a
No known key found for this signature in database
GPG Key ID: B6A2F8AEC8AD2825
2 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/controllers/videoosd.js
View File

@ -530,7 +530,7 @@ define(["playbackManager", "dom", "inputmanager", "datetime", "itemHelper", "med
view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("ExitFullscreen")); view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("ExitFullscreen"));
view.querySelector(".btnFullscreen i").innerHTML = ""; view.querySelector(".btnFullscreen i").innerHTML = "";
} else { } else {
view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("Fullscreen")); view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("Fullscreen") + " (f)");
view.querySelector(".btnFullscreen i").innerHTML = ""; view.querySelector(".btnFullscreen i").innerHTML = "";
} }
} }
@ -713,7 +713,14 @@ define(["playbackManager", "dom", "inputmanager", "datetime", "itemHelper", "med
} }
function updatePlayPauseState(isPaused) { function updatePlayPauseState(isPaused) {
view.querySelector(".btnPause i").innerHTML = isPaused ? "" : ""; var button = view.querySelector(".btnPause i");
if (isPaused) {
button.innerHTML = "";
button.setAttribute("title", globalize.translate("ButtonPlay") + " (k)");
} else {
button.innerHTML = "";
button.setAttribute("title", globalize.translate("ButtonPause") + " (k)");
}
} }
function updatePlayerStateInternal(event, player, state) { function updatePlayerStateInternal(event, player, state) {
@ -836,10 +843,10 @@ define(["playbackManager", "dom", "inputmanager", "datetime", "itemHelper", "med
} }
if (isMuted) { if (isMuted) {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute")); view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute") + " (m)");
view.querySelector(".buttonMute i").innerHTML = ""; view.querySelector(".buttonMute i").innerHTML = "";
} else { } else {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute")); view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute") + " (m)");
view.querySelector(".buttonMute i").innerHTML = ""; view.querySelector(".buttonMute i").innerHTML = "";
} }
@ -1013,43 +1020,61 @@ define(["playbackManager", "dom", "inputmanager", "datetime", "itemHelper", "med
} }
function onWindowKeyDown(e) { function onWindowKeyDown(e) {
if (!currentVisibleMenu && (32 === e.keyCode || 13 === e.keyCode)) { if (!currentVisibleMenu && 32 === e.keyCode) {
playbackManager.playPause(currentPlayer); playbackManager.playPause(currentPlayer);
return void showOsd(); return void showOsd();
} }
switch (e.key) { switch (e.key) {
case "f": case "k":
if (!e.ctrlKey) { playbackManager.playPause(currentPlayer);
playbackManager.toggleFullscreen(currentPlayer); showOsd();
} break;
case "l":
case "ArrowRight":
case "Right":
playbackManager.fastForward(currentPlayer);
showOsd();
break;
case "j":
case "ArrowLeft":
case "Left":
playbackManager.rewind(currentPlayer);
showOsd();
break;
case "f":
if (!e.ctrlKey && !e.metaKey) {
playbackManager.toggleFullscreen(currentPlayer);
showOsd();
}
break; break;
case "m": case "m":
playbackManager.toggleMute(currentPlayer); playbackManager.toggleMute(currentPlayer);
showOsd();
break; break;
case "ArrowLeft":
case "Left":
case "NavigationLeft": case "NavigationLeft":
case "GamepadDPadLeft": case "GamepadDPadLeft":
case "GamepadLeftThumbstickLeft": case "GamepadLeftThumbstickLeft":
if (e.shiftKey) { // Ignores gamepad events that are always triggered, even when not focused.
if (document.hasFocus()) {
playbackManager.rewind(currentPlayer); playbackManager.rewind(currentPlayer);
showOsd();
} }
break; break;
case "ArrowRight":
case "Right":
case "NavigationRight": case "NavigationRight":
case "GamepadDPadRight": case "GamepadDPadRight":
case "GamepadLeftThumbstickRight": case "GamepadLeftThumbstickRight":
if (e.shiftKey) { // Ignores gamepad events that are always triggered, even when not focused.
if (document.hasFocus()) {
playbackManager.fastForward(currentPlayer); playbackManager.fastForward(currentPlayer);
showOsd();
} }
} }
} }

10
src/videoosd.html
View File

@ -37,7 +37,7 @@
<i class="xlargePaperIconButton md-icon">&#xE045;</i> <i class="xlargePaperIconButton md-icon">&#xE045;</i>
</button> </button>
<button is="paper-icon-button-light" class="btnRewind" title="${Rewind}"> <button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (j)">
<i class="xlargePaperIconButton md-icon">&#xE020;</i> <i class="xlargePaperIconButton md-icon">&#xE020;</i>
</button> </button>
@ -45,7 +45,7 @@
<i class="xlargePaperIconButton md-icon">&#xE034;</i> <i class="xlargePaperIconButton md-icon">&#xE034;</i>
</button> </button>
<button is="paper-icon-button-light" class="btnFastForward" title="${FastForward}"> <button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)">
<i class="xlargePaperIconButton md-icon">&#xE01F;</i> <i class="xlargePaperIconButton md-icon">&#xE01F;</i>
</button> </button>
@ -62,7 +62,7 @@
<button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}"> <button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
<i class="largePaperIconButton md-icon">&#xE8B8;</i> <i class="largePaperIconButton md-icon">&#xE8B8;</i>
</button> </button>
<button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen}"> <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)">
<i class="xlargePaperIconButton md-icon">&#xE5D0;</i> <i class="xlargePaperIconButton md-icon">&#xE5D0;</i>
</button> </button>
<button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}"> <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
@ -72,7 +72,7 @@
<div class="osdTimeText"><span class="osdPositionText"></span><span class="osdDurationText"></span><span class="endsAtText"></span></div> <div class="osdTimeText"><span class="osdPositionText"></span><span class="osdDurationText"></span><span class="endsAtText"></span></div>
<div class="volumeButtons hide-mouse-idle-tv"> <div class="volumeButtons hide-mouse-idle-tv">
<button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute}"> <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute} (m)">
<i class="xlargePaperIconButton md-icon">&#xE050;</i> <i class="xlargePaperIconButton md-icon">&#xE050;</i>
</button> </button>
<div class="sliderContainer osdVolumeSliderContainer"> <div class="sliderContainer osdVolumeSliderContainer">
@ -82,4 +82,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>