feat: add "play next" to achievement details dialog

Author: sifferhans

components/ButtonStyled.vue

@@ -52,6 +52,7 @@ const className = cva(
 <template>
   <button
     :class="className({ iconOnly: !slots.default, intent, size, disabled })"
+    :disabled
   >
     <NuxtIcon
       v-if="loading"

components/ProjectBoxItem.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { TrackApi } from "@bcc-code/bmm-sdk-fetch";
 import type { AchievementModel, ProjectBoxV2 } from "@bcc-code/bmm-sdk-fetch";
 
 defineProps<{
@@ -16,6 +17,23 @@ const showDialog = computed({
     }
   },
 });
+
+const { $mediaPlayer } = useNuxtApp();
+async function playTrackWithId(trackId: number) {
+  const track = await new TrackApi().trackIdGet({ id: trackId });
+  $mediaPlayer.replaceCurrent(track);
+  setTimeout(() => {
+    $mediaPlayer.open.value = true;
+  }, 100);
+}
+
+const trackIsPlaying = computed(() => {
+  if (!$mediaPlayer.currentTrack.value) return false;
+  if (!selectedAchievement.value) return false;
+  return (
+    $mediaPlayer.currentTrack.value.id === selectedAchievement.value.trackId
+  );
+});
 </script>
 
 <template>
@@ -56,6 +74,20 @@ const showDialog = computed({
         </span>
         <p class="type-heading-2 my-2">{{ selectedAchievement.title }}</p>
         <p class="text-balance">{{ selectedAchievement.description }}</p>
+
+        <div
+          v-if="selectedAchievement.trackId"
+          class="mt-6 flex w-full flex-col gap-2"
+        >
+          <ButtonStyled
+            :disabled="trackIsPlaying"
+            size="large"
+            :icon="trackIsPlaying ? 'icon.playing.animation' : 'icon.play'"
+            @click="playTrackWithId(selectedAchievement.trackId)"
+          >
+            {{ $t("project.achievementPlayNext") }}
+          </ButtonStyled>
+        </div>
       </div>
     </DialogBase>
   </div>

components/media-player/MediaPlayer.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { MediaPlayerStatus } from "~/plugins/mediaPlayer/mediaPlayer";
 
-const open = ref(false);
-
-const { status, play, pause, next, previous } = useNuxtApp().$mediaPlayer;
+const { status, play, pause, next, previous, open } = useNuxtApp().$mediaPlayer;
 
 defineShortcuts({
   " ": {

locales/en.json

@@ -233,6 +233,7 @@
   },
   "project": {
     "achievement": "Achievement",
-    "achievementUnlocked": "Unlocked"
+    "achievementUnlocked": "Unlocked",
+    "achievementPlayNext": "Play next"
   }
 }

plugins/mediaPlayer/mediaPlayer.ts

@@ -49,6 +49,7 @@ export interface MediaPlayer {
   addNext: (track: TrackModel, origin?: string) => void;
   replaceCurrent: (track: TrackModel) => void;
   repeatStatus: Ref<RepeatStatus>;
+  open: Ref<boolean>;
 }
 
 export const seekOffset = 15;
@@ -74,6 +75,7 @@ export const initMediaPlayer = (
 
   const volume = ref(1);
   const playbackSpeed = ref(1);
+  const open = ref(false);
 
   function stop() {
     if (activeMedia.value) {
@@ -351,5 +353,6 @@ export const initMediaPlayer = (
     addNext,
     replaceCurrent,
     repeatStatus,
+    open,
   };
 };