Skip to content

Commit

Permalink
feat(player): add media control keys
Browse files Browse the repository at this point in the history
  • Loading branch information
endrl committed May 20, 2023
1 parent c569143 commit 910c258
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 7 deletions.
3 changes: 3 additions & 0 deletions frontend/src/components/Layout/AudioControls.vue
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,9 @@
<script setup lang="ts">
import { getItemDetailsLink } from '@/utils/items';
import { playbackManagerStore } from '@/store';
import { usePlayerKeys } from '@/composables/use-playerkeys';
usePlayerKeys();
const playbackManager = playbackManagerStore();
</script>
Expand Down
44 changes: 44 additions & 0 deletions frontend/src/composables/use-playerkeys.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import {
onKeyStroke,
whenever,
useMagicKeys,
useThrottleFn
} from '@vueuse/core';
import playbackManager from '@/store/playbackManager';

/**
* Register keyboard player control.
* @param osdHandler - show the player osd for a short period whenever a suitable action is called
*/
export function usePlayerKeys(osdHandler?: () => void): void {
const keys = useMagicKeys();

whenever(keys.mediapause, playbackManager.playPause);
whenever(keys.mediaplaypause, playbackManager.playPause);
whenever(keys.mediastop, playbackManager.stop);
whenever(keys.mediatracknext, playbackManager.setNextTrack);
whenever(keys.mediatrackprevious, playbackManager.setPreviousTrack);
whenever(keys.audiovolumemute, playbackManager.toggleMute);
whenever(keys.space, playbackManager.playPause);
whenever(keys.k, playbackManager.playPause);
whenever(keys.m, playbackManager.toggleMute);

const callHandler = (): void => {
if (osdHandler) {
osdHandler();
}
};

const throttledForwardFn = useThrottleFn(() => {
playbackManager.skipForward();
callHandler();
}, 500);

const throttledBackwardFn = useThrottleFn(() => {
playbackManager.skipBackward();
callHandler();
}, 500);

onKeyStroke(['j', 'ArrowLeft'], throttledBackwardFn);
onKeyStroke(['l', 'ArrowRight'], throttledForwardFn);
}
3 changes: 3 additions & 0 deletions frontend/src/pages/playback/music/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ import { isNil } from 'lodash-es';
import { useRoute } from 'vue-router';
import { getBlurhash } from '@/utils/images';
import { playbackManagerStore } from '@/store';
import { usePlayerKeys } from '@/composables/use-playerkeys';

const modules = [A11y, Keyboard, Virtual, EffectCoverflow];
const route = useRoute();
Expand All @@ -99,6 +100,8 @@ const coverflowEffect = {
stretch: -400
};

usePlayerKeys();

const backdropHash = computed(() => {
return playbackManager.currentItem
? getBlurhash(playbackManager.currentItem, ImageType.Primary)
Expand Down
10 changes: 3 additions & 7 deletions frontend/src/pages/playback/video/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ import {
useMagicKeys,
whenever
} from '@vueuse/core';
import { usePlayerKeys } from '@/composables/use-playerkeys';
import {
playbackManagerStore,
playerElementStore,
Expand Down Expand Up @@ -173,6 +174,8 @@ function handleMouseMove(): void {
timeout.start();
}

usePlayerKeys(handleMouseMove);

onBeforeUnmount(() => {
if (playerElement.isFullscreenVideoPlayer) {
playbackManager.stop();
Expand All @@ -189,14 +192,7 @@ onMounted(() => {
playerElement.isFullscreenMounted = true;
});

whenever(keys.space, playbackManager.playPause);
whenever(keys.k, playbackManager.playPause);
whenever(keys.right, playbackManager.skipForward);
whenever(keys.l, playbackManager.skipForward);
whenever(keys.left, playbackManager.skipBackward);
whenever(keys.j, playbackManager.skipBackward);
whenever(keys.f, fullscreen.toggle);
whenever(keys.m, playbackManager.toggleMute);

watch(staticOverlay, (val) => {
if (val) {
Expand Down

0 comments on commit 910c258

Please sign in to comment.