Merge pull request #53 from mbaraa/feat/keyboard-shortcuts

Feat: Player's Shortcuts

Author: mbaraa

static/js/player.js

@@ -174,6 +174,8 @@ function setLoading(loading, fallback) {
  * @returns {[Function, Function, Function]}
  */
 function playPauser(audioEl) {
+  let startedPlaylist = false;
+
   const __play = () => {
     audioEl.play();
     const songEl = document.getElementById(
@@ -191,6 +193,12 @@ function playPauser(audioEl) {
     setPlayerButtonIcon(playPauseToggleExapndedEl, Player.icons.play);
   };
   const __toggle = () => {
+    const playPlaylistEl = document.getElementById("play-playlist-button");
+    if (!!playPlaylistEl && !startedPlaylist) {
+      playPlaylistEl.click();
+      startedPlaylist = true;
+      return;
+    }
     if (audioEl.paused) {
       __play();
     } else {
@@ -213,7 +221,7 @@ function stopper(audioEl) {
       "song-" + playerState.playlist.songs[playerState.currentSongIdx].yt_id,
     );
     if (!!songEl) {
-      songEl.style.backgroundColor = "var(--secondary-color-20)";
+      songEl.style.backgroundColor = "#ffffff00";
     }
     setPlayerButtonIcon(playPauseToggleEl, Player.icons.play);
     setPlayerButtonIcon(playPauseToggleExapndedEl, Player.icons.play);
@@ -265,7 +273,7 @@ function playlister(state) {
       return;
     }
     await fetch(
-      "/api/playlist/plays?" +
+      "/api/song/playlist/plays?" +
         new URLSearchParams({
           "song-id": state.playlist.songs[state.currentSongIdx].yt_id,
           "playlist-id": state.playlist.public_id,
@@ -367,6 +375,36 @@ function playlister(state) {
   return [__next, __prev, __remove, __setSongInPlaylistStyle];
 }
 
+function volumer() {
+  let lastVolume = 1;
+  const __setVolume = (level) => {
+    if (level > 1) {
+      level = 1;
+    }
+    if (level < 0) {
+      level = 0;
+    }
+    audioPlayerEl.volume = level;
+    if (volumeSeekBarEl) {
+      volumeSeekBarEl.value = Math.floor(level * 100);
+    }
+    if (volumeSeekBarExpandedEl) {
+      volumeSeekBarExpandedEl.value = Math.floor(level * 100);
+    }
+  };
+
+  const __muter = () => {
+    if (audioPlayerEl.volume === 0) {
+      __setVolume(lastVolume);
+    } else {
+      lastVolume = audioPlayerEl.volume;
+      __setVolume(0);
+    }
+  };
+
+  return [__setVolume, __muter];
+}
+
 /**
  * @param {string} songYtId
  */
@@ -571,6 +609,7 @@ const [
   removeSongFromPlaylist,
   highlightSongInPlaylist,
 ] = playlister(playerState);
+const [setVolume, mute] = volumer();
 
 playPauseToggleEl.addEventListener("click", (event) => {
   event.stopImmediatePropagation();

static/js/player_shortcuts.js

@@ -0,0 +1,66 @@
+"use strict";
+
+/**
+ * Using YouTube's applicaple shortcuts: https://support.google.com/youtube/answer/7631406?hl=en
+ */
+const shortcuts = {
+  " ": togglePP,
+  k: togglePP,
+  n: nextMuzikk,
+  N: previousMuzikk,
+  s: stopMuzikk,
+  m: mute,
+  0: () => (audioPlayerEl.currentTime = 0),
+  1: () => (audioPlayerEl.currentTime = audioPlayerEl.duration * 0.1),
+  2: () => (audioPlayerEl.currentTime = audioPlayerEl.duration * 0.2),
+  3: () => (audioPlayerEl.currentTime = audioPlayerEl.duration * 0.3),
+  4: () => (audioPlayerEl.currentTime = audioPlayerEl.duration * 0.4),
+  5: () => (audioPlayerEl.currentTime = audioPlayerEl.duration * 0.5),
+  6: () => (audioPlayerEl.currentTime = audioPlayerEl.duration * 0.6),
+  7: () => (audioPlayerEl.currentTime = audioPlayerEl.duration * 0.7),
+  8: () => (audioPlayerEl.currentTime = audioPlayerEl.duration * 0.8),
+  9: () => (audioPlayerEl.currentTime = audioPlayerEl.duration * 0.9),
+  $: () => (audioPlayerEl.currentTime = audioPlayerEl.duration),
+  j: () => (audioPlayerEl.currentTime -= 10),
+  l: () => (audioPlayerEl.currentTime += 10),
+  ArrowRight: () => setVolume(audioPlayerEl.volume + 0.1),
+  ArrowLeft: () => setVolume(audioPlayerEl.volume - 0.1),
+  i: expand,
+  I: collapse,
+  "/": () => searchInputEl.focus(),
+};
+
+/**
+ * @param {KeyboardEvent} e
+ */
+document.addEventListener("keyup", (e) => {
+  if (
+    [searchFormEl, searchInputEl, searchSugEl].includes(document.activeElement)
+  ) {
+    console.log("search suka");
+    return;
+  }
+  const action = shortcuts[e.key];
+  if (action) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    action();
+  }
+  console.log(e.key);
+});
+
+/**
+ * @param {KeyboardEvent} e
+ */
+document.addEventListener("keydown", (e) => {
+  if (
+    [searchFormEl, searchInputEl, searchSugEl].includes(document.activeElement)
+  ) {
+    return;
+  }
+  const action = shortcuts[e.key];
+  if (action) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+});

views/components/player/player.templ

@@ -18,4 +18,5 @@ templ PlayerSticky() {
 	///
 	<script src="/static/js/player.js" lang="javascript"></script>
 	<script defer src="/static/js/player_icons.js" lang="javascript"></script>
+	<script defer src="/static/js/player_shortcuts.js" lang="javascript"></script>
 }

views/pages/playlist.templ

@@ -45,6 +45,7 @@ templ playlistHeader(pl entities.Playlist) {
 		</div>
 		if pl.Songs != nil && len(pl.Songs) > 0 {
 			<button
+				id="play-playlist-button"
 				type="button"
 				title="Play playlist"
 				onClick={ playSongFromPlaylist(pl.Songs[0].YtId, pl) }