Skip to content

Commit

Permalink
feat(player): Add control keys
Browse files Browse the repository at this point in the history
  • Loading branch information
endrl committed Jun 12, 2023
1 parent d51b1de commit 49128ee
Show file tree
Hide file tree
Showing 6 changed files with 248 additions and 59 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
55 changes: 55 additions & 0 deletions frontend/src/composables/use-playerkeys.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import {
onKeyStroke,
whenever,
useMagicKeys,
useThrottleFn
} from '@vueuse/core';
import playbackManager from '@/store/playbackManager';

import { isTizen, isWebOS } from '@/utils/browser-detection';

/**
* 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.pause);
whenever(keys.mediaplay, playbackManager.unpause);
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();
}, 100);

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

onKeyStroke(['j', 'ArrowLeft'], throttledBackwardFn);
onKeyStroke(['l', 'ArrowRight'], throttledForwardFn);
onKeyStroke(['AudioVolumeUp'], playbackManager.volumeUp);
onKeyStroke(['AudioVolumeDown'], playbackManager.volumeDown);

if (!isTizen() && !isWebOS()) {
onKeyStroke(['ArrowUp'], playbackManager.volumeUp);
onKeyStroke(['ArrowDown'], playbackManager.volumeDown);
}
}
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
14 changes: 14 additions & 0 deletions frontend/src/store/playbackManager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -949,6 +949,20 @@ class PlaybackManagerStore {
this.isMuted = !this.isMuted;
};

/**
* Increase volume by 5
*/
public volumeUp = (): void => {
this.currentVolume = Math.min(this.currentVolume + 5, 100);
};

/**
* Decrease volume by 5
*/
public volumeDown = (): void => {
this.currentVolume = Math.max(this.currentVolume - 5, 0);
};

public instantMixFromItem = async (itemId: string): Promise<void> => {
const items = (
await remote.sdk.newUserApi(getInstantMixApi).getInstantMixFromItem({
Expand Down
Loading

0 comments on commit 49128ee

Please sign in to comment.