mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Display previous/next keyboard shortcuts (#5759)

Browse source 
* Display previous/next track keyboard shortcuts

* Display keyboard shortcuts in uppercase

* Display previous/next chapter keyboard shortcuts

* Allow capital letters for keyboard shortcuts

> On YouTube, Shift and CapsLock have no effect on these actions.
This commit is contained in:
Daniel M. Capella 2024-07-16 14:34:13 +00:00 • committed by GitHub
parent 9501c5097b
commit 2d68f94ec6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 17 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/controllers/playback/video/index.html
View file

@ -33,15 +33,15 @@
<span class="xlargePaperIconButton material-icons fiber_manual_record" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons fiber_manual_record" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide" title="${PreviousTrack}"> <button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide" title="${PreviousTrack} (Shift+P)" aria-label="${PreviousTrack}">
<span class="xlargePaperIconButton material-icons skip_previous" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons skip_previous" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnPreviousChapter autoSize hide" title="${PreviousChapter}"> <button is="paper-icon-button-light" class="btnPreviousChapter autoSize hide" title="${PreviousChapter} (PageDown)" aria-label="${PreviousChapter}">
<span class="xlargePaperIconButton material-icons undo" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons undo" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (j)" aria-label="${Rewind}"> <button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (J)" aria-label="${Rewind}">
<span class="xlargePaperIconButton material-icons fast_rewind" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons fast_rewind" aria-hidden="true"></span>
</button> </button>
@ -49,15 +49,15 @@
<span class="xlargePaperIconButton material-icons pause" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons pause" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)" aria-label="${FastForward}"> <button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (L)" aria-label="${FastForward}">
<span class="xlargePaperIconButton material-icons fast_forward" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons fast_forward" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnNextChapter autoSize hide" title="${NextChapter}"> <button is="paper-icon-button-light" class="btnNextChapter autoSize hide" title="${NextChapter} (PageUp)" aria-label="${NextChapter}">
<span class="xlargePaperIconButton material-icons redo" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons redo" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnNextTrack autoSize hide" title="${NextTrack}"> <button is="paper-icon-button-light" class="btnNextTrack autoSize hide" title="${NextTrack} (Shift+N)" aria-label="${NextTrack}">
<span class="xlargePaperIconButton material-icons skip_next" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons skip_next" aria-hidden="true"></span>
</button> </button>
</div> </div>
@ -65,7 +65,7 @@
<div class="osdTimeText"> <div class="osdTimeText">
<span class="endsAtText"></span> <span class="endsAtText"></span>
</div> </div>
<div class="osdRatingsText"> <div class="osdRatingsText">
</div> </div>
@ -80,7 +80,7 @@
<span class="xlargePaperIconButton material-icons audiotrack" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons audiotrack" aria-hidden="true"></span>
</button> </button>
<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} (m)" aria-label="${Mute}"> <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute} (M)" aria-label="${Mute}">
<span class="xlargePaperIconButton material-icons volume_up" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons volume_up" aria-hidden="true"></span>
</button> </button>
<div class="sliderContainer osdVolumeSliderContainer"> <div class="sliderContainer osdVolumeSliderContainer">
@ -96,7 +96,7 @@
<button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}"> <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
<span class="xlargePaperIconButton material-icons picture_in_picture_alt" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons picture_in_picture_alt" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)" aria-label="${Fullscreen}"> <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (F)" aria-label="${Fullscreen}">
<span class="xlargePaperIconButton material-icons fullscreen" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons fullscreen" aria-hidden="true"></span>
</button> </button>
</div> </div>

11
src/controllers/playback/video/index.js
View file

@ -496,10 +496,10 @@ export default function (view) {
icon.classList.remove('fullscreen_exit', 'fullscreen'); icon.classList.remove('fullscreen_exit', 'fullscreen');
if (playbackManager.isFullscreen(currentPlayer)) { if (playbackManager.isFullscreen(currentPlayer)) {
button.setAttribute('title', globalize.translate('ExitFullscreen') + ' (f)'); button.setAttribute('title', globalize.translate('ExitFullscreen') + ' (F)');
icon.classList.add('fullscreen_exit'); icon.classList.add('fullscreen_exit');
} else { } else {
button.setAttribute('title', globalize.translate('Fullscreen') + ' (f)'); button.setAttribute('title', globalize.translate('Fullscreen') + ' (F)');
icon.classList.add('fullscreen'); icon.classList.add('fullscreen');
} }
} }
@ -721,7 +721,7 @@ export default function (view) {
} }
btnPlayPauseIcon.classList.add(icon); btnPlayPauseIcon.classList.add(icon);
dom.setElementTitle(btnPlayPause, title + ' (k)', title); dom.setElementTitle(btnPlayPause, title + ' (K)', title);
} }
function updatePlayerStateInternal(event, player, state) { function updatePlayerStateInternal(event, player, state) {
@ -1245,6 +1245,7 @@ export default function (view) {
} }
break; break;
case 'k': case 'k':
case 'K':
playbackManager.playPause(currentPlayer); playbackManager.playPause(currentPlayer);
showOsd(btnPlayPause); showOsd(btnPlayPause);
break; break;
@ -1257,23 +1258,27 @@ export default function (view) {
playbackManager.volumeDown(currentPlayer); playbackManager.volumeDown(currentPlayer);
break; break;
case 'l': case 'l':
case 'L':
case 'ArrowRight': case 'ArrowRight':
case 'Right': case 'Right':
playbackManager.fastForward(currentPlayer); playbackManager.fastForward(currentPlayer);
showOsd(btnFastForward); showOsd(btnFastForward);
break; break;
case 'j': case 'j':
case 'J':
case 'ArrowLeft': case 'ArrowLeft':
case 'Left': case 'Left':
playbackManager.rewind(currentPlayer); playbackManager.rewind(currentPlayer);
showOsd(btnRewind); showOsd(btnRewind);
break; break;
case 'f': case 'f':
case 'F':
if (!e.ctrlKey && !e.metaKey) { if (!e.ctrlKey && !e.metaKey) {
playbackManager.toggleFullscreen(currentPlayer); playbackManager.toggleFullscreen(currentPlayer);
} }
break; break;
case 'm': case 'm':
case 'M':
playbackManager.toggleMute(currentPlayer); playbackManager.toggleMute(currentPlayer);
break; break;
case 'p': case 'p':