@ozdao/martyrs 0.2.565 → 0.2.566

package/src/modules/music/components/pages/Track.vue

@@ -13,7 +13,7 @@
     </div>
 
     <!-- Track Content -->
-    <div v-if="track" class="track-content cols-2-fit-content mobile:cols-1 gap-big">
+    <div v-if="track" class="track-content cols-2 mobile:cols-1 gap-big">
       <!-- Left Column - Cover & Stats -->
       <div class="pos-sticky pos-t-0 mobile:pos-relative track-cover-section">
         <!-- Cover with Play Overlay -->
@@ -62,78 +62,18 @@
         <!-- Track Title -->
         <h1 class="h1 mn-b-medium">{{ track.title }}</h1>
         <!-- Action Buttons -->
-        <div class="flex gap-small mn-b-medium">
-          <Button
-            @click="playTrack"
-            color="primary"
-            size="medium"
-            class="flex-1 t-white bg-black radius-thin flex-center gap-thin"
-          >
-            <IconPlay v-if="!isPlaying" fill="rgb(var(--white))" class="i-medium" />
-            <IconPause v-else fill="rgb(var(--white))" class="i-medium" />
-            {{ !isPlaying ? 'Play' : 'Pause'}}
-          </Button>
-
-          <Button
-            @click="addToQueue"
-            color="primary"
-            size="medium"
-            class="flex-1 bg-light radius-thin flex-center gap-thin"
-          >
-            <IconAdd class="i-medium" />
-            Add to Queue
-          </Button>
-
-          <Button
-            @click="toggleFavorite"
-            color="primary"
-            size="medium"
-            class="flex-1 bg-light radius-thin flex-center gap-thin"
-          >
-            <IconLike class="i-medium" :fill="isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'" />
-            {{isFavorite ? 'Liked' : 'Like'}}
-          </Button>
-
-          <Dropdown :label="{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }" v-model="showDropdown" class="relative">
-            <template #trigger>
-              <Button color="transp" size="medium" class="w-3r h-3r radius-full">
-                <IconEllipsis class="w-1-25r h-1-25r" />
-              </Button>
-            </template>
-            <template #default>
-              <div class="dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin">
-                <Button @click="showAddToPlaylistModal = true" color="transp" size="small" class="w-100 justify-start">
-                  Add to Playlist
-                </Button>
-                <Button @click="copyLink" color="transp" size="small" class="w-100 justify-start">
-                  Copy Link
-                </Button>
-                <template v-if="isOwner">
-                  <hr class="mn-v-thin border-dark-transp-10" />
-                  <Button @click="editTrack" color="transp" size="small" class="w-100 justify-start">
-                    Edit Track
-                  </Button>
-                  <Button @click="deleteTrack" color="danger" size="small" class="w-100 justify-start">
-                    Delete Track
-                  </Button>
-                </template>
-              </div>
-            </template>
-          </Dropdown>
-        </div>
+        <ActionButtons :buttons="actionButtons" />
 
         <!-- Artist Card -->
         <div class="artists-section mn-b-medium">
           <h3 class="t-medium mn-b-small" v-if="track.artist">Artist</h3>
-          <div class="flex flex-column gap-small">
-            <ArtistCardSmall 
-              :key="track.artist._id"
-              :artist="track.artist"
-              :is-following="isFollowingArtist"
-              :show-follow-button="!isOwner"
-              @toggle-follow="toggleFollowArtist"
-            />
-          </div>
+          <ArtistCardSmall 
+            :key="track.artist._id"
+            :artist="track.artist"
+            :is-following="isFollowingArtist"
+            :show-follow-button="!isOwner"
+            @toggle-follow="toggleFollowArtist"
+          />
         </div>
 
         <!-- Metadata Cards -->
@@ -302,6 +242,7 @@ import IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';
 import IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';
 
 // Components
+import ActionButtons from '../blocks/ActionButtons.vue';
 import TrackListCard from '../cards/TrackListCard.vue';
 import ArtistCardSmall from '../cards/ArtistCardSmall.vue';
 // import PlaylistSelector from '../forms/PlaylistSelector.vue';
@@ -321,7 +262,6 @@ const emits = defineEmits(['page-loading', 'page-loaded']);
 
 // State
 const hasLoaded = ref(false);
-const showDropdown = ref(false);
 const showAddToPlaylistModal = ref(false);
 const isFavorite = ref(false);
 const isFollowingArtist = ref(false);
@@ -338,6 +278,50 @@ const isOwner = computed(() => {
   return track.value?.owner?.target === authState.user?._id;
 });
 
+const actionButtons = computed(() => {
+  const buttons = [
+    {
+      type: 'button',
+      class: 't-white bg-black',
+      icon: isPlaying.value ? IconPause : IconPlay,
+      iconFill: 'rgb(var(--white))',
+      text: isPlaying.value ? 'Pause' : 'Play',
+      action: playTrack
+    },
+    {
+      type: 'button',
+      class: 'bg-light',
+      icon: IconAdd,
+      text: 'Add to Queue',
+      action: addToQueue
+    },
+    {
+      type: 'button',
+      class: 'bg-light',
+      icon: IconLike,
+      iconFill: isFavorite.value ? 'rgb(var(--main))' : 'rgb(var(--black))',
+      text: isFavorite.value ? 'Liked' : 'Like',
+      action: toggleFavorite
+    },
+    {
+      type: 'dropdown',
+      items: [
+        { text: 'Add to Playlist', action: () => showAddToPlaylistModal.value = true },
+        { text: 'Copy Link', action: copyLink }
+      ]
+    }
+  ];
+
+  if (isOwner.value) {
+    const items = buttons[3].items;
+    items.push({ separator: true });
+    items.push({ text: 'Edit Track', action: editTrack });
+    items.push({ text: 'Delete Track', action: deleteTrack, color: 'danger' });
+  }
+
+  return buttons;
+});
+
 // Format helpers
 const formatDuration = (seconds) => {
   if (!seconds) return '0:00';
@@ -410,7 +394,6 @@ const deleteTrack = async () => {
 
 const copyLink = () => {
   navigator.clipboard.writeText(window.location.href);
-  showDropdown.value = false;
 };
 
 // Data fetching

package/src/modules/music/components/player/FullscreenPlayer.vue

@@ -0,0 +1,248 @@
+<template>
+  <section
+    class="o-y-scroll o-x-hidden bg-light pd-small pos-relative z-index-2 t-center t-black w-100 h-100"
+  >
+
+    <div
+      class="pos-relative gap-small flex-nowrap flex-column flex-center flex z-index-1"
+    >
+      <!-- COVER -->
+      <div class="mn-b-thin h-max-30r br-2px br-solid br-black-transp-10  radius-extra w-100 pos-relative aspect-1x1 flex-center flex "
+        style="
+          background: linear-gradient(180deg, #BDBDBD 0%, #D9D9D9 79.69%, #A5A5A5 100%);
+          box-shadow: 0 2px 0px 2px #aaaaaa;
+        "
+      >
+
+        <div class="pos-relative">
+          <div class="radioTonarWrapper" :class="{'activeTonar': playerState.isPlaying}">
+            <img
+              class="radioTonar z-index-2"
+              src="./tonar.png"
+              :class="{'playingTonar': playerState.isPlaying}"
+            >
+          </div>
+          <div
+            ref="disk"
+            :class="['radius-100 rotate-gradient flex-center flex']"
+            :style="{
+              transform: `rotate(${playerState.rotationAngle}deg)`,
+              width: '24rem',
+              height: '24rem',
+              border: '3px solid var(--black)',
+              'box-shadow': 'rgba(0,0,0,0.5) 0 0 64px 0px'
+            }"
+            class="pos-relative z-index-1"
+          >
+            <div
+              v-for="i in 11"
+              :key="i"
+              :style="{
+                border: '1px solid rgba(0,0,0,0.25)',
+                position: 'absolute',
+                width: 23 - i * 1 + 'rem',
+                height: 23 - i * 1 + 'rem',
+                'border-radius': '100%',
+                'box-shadow': 'rgb(47 47 47 / 18%) 0px 0px 5px 10px'
+              }"
+            >
+            </div>
+
+            <div
+              :style="{
+                width: '10rem',
+                height: '10rem',
+                backgroundImage: `url('${playerState.currentTrack?.coverUrl || playerState.currentTrack?.album?.coverArt}')`,
+                backgroundPosition: 'center center',
+                backgroundSize: '106%',
+              }"
+              class="radius-extra br-solid br-black-transp-10 br-1px"
+            >
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+      <!-- NOW PLAYING -->
+      <div
+        class="pd-thin bg-white radius-medium o-hidden w-100 pos-relative"
+      >
+        <p class="mn-l-auto mn-b-thin mn-r-auto radius-big pd-thin bg-second w-min">NOW&nbsp;PLAYING</p>
+        <!-- SONG -->
+        <Marquee
+          v-if="playerState.currentTrack"
+          class="h2 uppercase mn-b-thin"
+          :gradient="true"
+          :gradientColor="'rgb(var(--white))'"
+          :clone="true"
+          gradient-length="10%"
+        >
+          {{ playerState.currentTrack.title + '\xa0\xa0'}}
+        </Marquee>
+
+        <!-- AUTHOR -->
+        <p
+          v-if="playerState.currentTrack"
+          class="h3 uppercase t-transp"
+        >
+          {{ playerState.currentTrack.artist?.name || 'Unknown Artist' }}
+        </p>
+      </div>
+
+      <!-- LIKES -->
+      <div
+        class="pd-thin bg-white radius-medium w-100 pos-relative flex flex-v-center gap-thin"
+      >
+        <div v-if="authState.user" class="flex-nowrap flex gap-thin flex-v-center">
+          <IconLike
+            @click="toggleLike()"
+            :isLiked="isLiked"
+            fill="rgb(var(--black))"
+            class="i-medium cursor-pointer"
+            :class="{'no-events': isLoading}"
+          />
+          <p class="t-semi h4">{{ isLiked ? 'Liked' : 'Like' }}</p>
+        </div>
+
+        <p class="t-semi h4" :class="{'mn-l-auto': authState.user}">{{ likesCount }} {{ likesCount === 1 ? 'person' : 'people' }} liked</p>
+      </div>
+
+      <!-- CONTROLS -->
+      <div
+        class="gap-thin flex-center flex-nowrap flex pd-small bg-white radius-medium o-hidden w-100 pos-relative"
+      >
+        <PlayerControls />
+      </div>
+
+      <!-- VOLUME -->
+      <div class="pd-thin bg-white radius-medium w-100 pos-relative">
+        <VolumeControl />
+      </div>
+
+
+      <!-- QUEUE LIST -->
+      <div
+        v-if="playerState.queue.length > 0"
+        class="mn-b-small bg-white radius-medium o-hidden w-100 pos-relative"
+      >
+
+        <div class="pd-regular w-100 gap-thin flex-nowrap flex flex-v-center">
+          <IconEvents :fill="'rgb(var(--black))'" class="t-transp i-medium"/>
+          <p class="w-100 t-transp t-left">QUEUE</p>
+        </div>
+
+        <TrackListCard
+          v-for="(track, index) in playerState.queue.slice(0, 10)"
+          :key="track._id || index"
+          :track="track"
+          :index="index"
+          :showCover="true"
+          :showAlbum="false"
+        />
+
+      </div>
+
+    </div>
+
+  </section>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+
+import { Text, Tooltip, Marquee } from '@ozdao/martyrs';
+import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
+import IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue';
+
+import TrackListCard from '../cards/TrackListCard.vue';
+import VolumeControl from './VolumeControl.vue';
+import PlayerControls from './PlayerControls.vue';
+import { state as playerState, actions as playerActions } from '../../store/player.js';
+import { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';
+
+const isLiked = ref(false);
+const isLoading = ref(false);
+const likesCount = ref(0);
+
+async function toggleLike() {
+  // TODO: Implement likes integration with community module
+  isLiked.value = !isLiked.value;
+  likesCount.value += isLiked.value ? 1 : -1;
+}
+
+onMounted(() => {
+  if ('mediaSession' in navigator) {
+    navigator.mediaSession.setActionHandler('pause', () => playerActions.togglePlay());
+    navigator.mediaSession.setActionHandler('play', () => playerActions.togglePlay());
+    navigator.mediaSession.setActionHandler('stop', () => playerActions.togglePlay());
+    navigator.mediaSession.setActionHandler('previoustrack', () => playerActions.playPrevious());
+    navigator.mediaSession.setActionHandler('nexttrack', () => playerActions.playNext());
+  }
+});
+
+</script>
+
+
+<style lang="scss" scoped>
+.radioTonarWrapper {
+  width: 15rem;
+  position: absolute;
+  z-index: 30;
+  transform: rotate(253deg);
+  transform-origin: 75% center;
+  top: 0;
+  right: -2.5rem;
+  transition: transform 1s ease-in-out;
+}
+
+.radioTonar {
+  width: 15rem;
+  transform-origin: 75% center;
+}
+
+.activeTonar {
+  transform: rotate(285deg);
+}
+
+.playingTonar {
+  animation: playingTonar 2s ease-in-out infinite;
+}
+
+@keyframes playingTonar {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(2deg);
+  }
+  50% {
+    transform: rotate(-2deg);
+  }
+}
+
+@property --a {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@property --b {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.rotate-gradient {
+  --a: 0deg;
+  --b: 0deg;
+  transition: --a 0.5s, --b 0.5s;
+
+  background:
+    conic-gradient(from var(--a), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.33), rgba(255, 255, 255, 0.1)),
+    linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(180deg, #000 0%, rgba(10, 10, 10, 0.00) 100%),
+    #000;
+}
+</style>