@ozdao/martyrs 0.2.564 → 0.2.566

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>

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

@@ -3,10 +3,10 @@
   <div class="player-container">
     <div class="player">
       <!-- Track Info Section -->
-      <div class="track-info">
+      <div class="track-info" @click="openFullPlayer">
         <div class="track-image">
-          <Media 
-            :url="currentTrack?.coverUrl || (currentTrack?.album && currentTrack.album.coverUrl) || '/assets/placeholder-track.jpg'" 
+          <Media
+            :url="currentTrack?.coverUrl || (currentTrack?.album && currentTrack.album.coverUrl) || '/assets/placeholder-track.jpg'"
             class="track-image-media"
           />
         </div>
@@ -14,11 +14,12 @@
           <h3 class="track-title">{{ currentTrack?.title || 'No track playing' }}</h3>
           <p class="track-artist">{{ getArtistName(currentTrack) }}</p>
         </div>
-        <Button 
-          @click="toggleFavorite" 
+        <Button
+          v-if="authState.user"
+          @click.stop="toggleFavorite"
           class="like-btn"
           :class="{ liked: isFavorite }"
-          :showLoader="false" 
+          :showLoader="false"
           :showSucces="false"
         >
           <IconLike class="like-icon"/>
@@ -28,53 +29,7 @@
       <!-- Control Section -->
       <div class="controls">
         <div class="control-buttons">
-          <Button 
-            @click="toggleShuffle" 
-            class="control-btn secondary"
-            :class="{ active: shuffle }"
-            :showLoader="false" 
-            :showSucces="false"
-          >
-            <IconShuffle fill="rgb(var(--black))" class="control-icon"/>
-          </Button>
-          
-          <Button 
-            @click="playPrevious" 
-            class="control-btn secondary"
-            :showLoader="false" 
-            :showSucces="false"
-          >
-            <IconPrevious fill="rgb(var(--black))" class="control-icon"/>
-          </Button>
-          
-          <Button 
-            @click="togglePlay" 
-            class="control-btn primary"
-            :showLoader="false" 
-            :showSucces="false"
-          >
-            <IconPause v-if="isPlaying" fill="white" class="play-icon"/>
-            <IconPlay fill="white"  v-else class="play-icon"/>
-          </Button>
-          
-          <Button 
-            @click="playNext" 
-            class="control-btn secondary"
-            :showLoader="false" 
-            :showSucces="false"
-          >
-            <IconNext fill="rgb(var(--black))" class="control-icon"/>
-          </Button>
-          
-          <Button 
-            @click="toggleRepeat" 
-            class="control-btn secondary"
-            :class="{ active: repeat !== 'off' }"
-            :showLoader="false" 
-            :showSucces="false"
-          >
-            <IconRepeat fill="rgb(var(--black))" class="control-icon"/>
-          </Button>
+          <PlayerControls />
         </div>
         
         <!-- Progress Bar -->
@@ -84,22 +39,7 @@
       </div>
 
       <!-- Volume Section -->
-      <div class="volume-section">
-        <Button 
-          @click="toggleMute" 
-          class="volume-btn"
-          :showLoader="false" 
-          :showSucces="false"
-        >
-          <IconVolumeMute fill="rgb(var(--black))" v-if="muted || volume < 0.005" class="volume-icon"/>
-          <!-- <IconVolumeHalf fill="rgb(var(--black))" v-else-if="!muted && volume > 0" class="volume-icon"/> -->
-          <IconUnMute  fill="rgb(var(--black))" v-else class="volume-icon"/>
-        </Button>
-        
-        <div class="volume-slider">
-          <VolumeControl />
-        </div>
-      </div>
+      <VolumeControl />
     </div>
   </div>
 </template>
@@ -110,64 +50,31 @@ import Media from '@martyrs/src/components/Media/Media.vue';
 import Button from '@martyrs/src/components/Button/Button.vue';
 import TrackProgress from './TrackProgress.vue';
 import VolumeControl from './VolumeControl.vue';
+import PlayerControls from './PlayerControls.vue';
 
 // Import icons
-import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
-import IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';
-import IconNext from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';
-import IconPrevious from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';
-import IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';
-import IconRepeat from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';
 import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
-import IconVolume from '@martyrs/src/modules/icons/navigation/IconVolume.vue';
-import IconUnMute from '@martyrs/src/modules/icons/navigation/IconUnMute.vue';
-import IconVolumeHalf from '@martyrs/src/modules/icons/navigation/IconVolume.vue';
-import IconVolumeMute from '@martyrs/src/modules/icons/navigation/IconMute.vue';
 
 // Import player store
 import { state as playerState, actions as playerActions } from '../../store/player.js';
+import { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';
 
 // State
 const isFavorite = ref(false);
 
 // Computed properties
 const currentTrack = computed(() => playerState.currentTrack);
-const isPlaying = computed(() => playerState.isPlaying);
-const volume = computed(() => playerState.volume);
-const muted = computed(() => playerState.muted);
-const shuffle = computed(() => playerState.shuffle);
-const repeat = computed(() => playerState.repeat);
 
 // Methods
-const togglePlay = () => {
-  playerActions.togglePlay();
-};
-
-const playNext = () => {
-  playerActions.playNext();
-};
-
-const playPrevious = () => {
-  playerActions.playPrevious();
-};
-
-const toggleShuffle = () => {
-  playerActions.toggleShuffle();
-};
-
-const toggleRepeat = () => {
-  playerActions.toggleRepeat();
-};
-
-const toggleMute = () => {
-  playerActions.toggleMute();
-};
-
 const toggleFavorite = () => {
   isFavorite.value = !isFavorite.value;
   // Implement favorite track logic here
 };
 
+const openFullPlayer = () => {
+  playerActions.toggleFullPlayer();
+};
+
 const getArtistName = (track) => {
   if (!track) return 'Unknown Artist';
   
@@ -208,6 +115,12 @@ const getArtistName = (track) => {
   align-items: center;
   gap: 12px;
   min-width: 0;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.track-info:hover {
+  opacity: 0.8;
 }
 
 .track-image {
@@ -305,111 +218,12 @@ const getArtistName = (track) => {
   gap: 16px;
 }
 
-.control-btn {
-  background: none;
-  border: none;
-  color: rgb(var(--grey));
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 50%;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.control-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.control-btn.primary {
-  background: rgb(var(--second));
-  color: rgb(var(--white));
-  width: 32px;
-  height: 32px;
-}
-
-.play-icon {
-  width: 14px;
-  height: 14px;
-  fill: rgb(var(--white));
-}
-
-.control-btn.primary:hover {
-  background: rgb(var(--second));
-  transform: scale(1.06);
-}
-
-.control-btn.secondary:hover {
-  color: rgb(var(--white));
-  background: rgba(var(--black),0.1);
-}
-
-.control-btn.secondary:hover .control-icon {
-  fill: rgb(var(--white));
-}
-
-.control-btn.active {
-  color: rgb(var(--main));
-  background: rgba(var(--second),0.1);
-}
-
-.control-btn.active .control-icon {
-  fill: rgb(var(--main));
-}
-
-.control-btn.active:hover {
-  color: rgb(var(--main));
-  opacity: 0.8;
-   background: rgba(var(--second),0.2);
-}
-
 /* Progress Section */
 .progress-section {
   width: 100%;
   max-width: 600px;
 }
 
-/* Volume Section */
-.volume-section {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  justify-content: flex-end;
-}
-
-.volume-btn {
-  background: none;
-  border: none;
-  color: rgb(var(--grey));
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 50%;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.volume-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.volume-btn:hover {
-  color: rgb(var(--white));
-  background: rgba(var(--white),0.1);
-}
-
-.volume-btn:hover .volume-icon {
-  fill: rgb(var(--white));
-}
-
-.volume-slider {
-  width: 100px;
-}
-
 /* Responsive Design */
 @media (max-width: 768px) {
   .player {
@@ -428,15 +242,6 @@ const getArtistName = (track) => {
     order: 2;
   }
 
-  .volume-section {
-    order: 3;
-    justify-content: center;
-  }
-
-  .volume-slider {
-    width: 120px;
-  }
-
   .progress-section {
     max-width: 100%;
   }

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

@@ -0,0 +1,112 @@
+<!-- components/player/PlayerControls.vue -->
+<template>
+  <div class="flex-nowrap flex gap-thin flex-v-center">
+    <!-- Shuffle -->
+    <Button
+      @click="playerActions.toggleShuffle()"
+      class="control-btn secondary"
+      :class="{ active: playerState.shuffle }"
+      :showLoader="false"
+      :showSucces="false"
+    >
+      <IconShuffle fill="rgb(var(--black))" class="control-icon"/>
+    </Button>
+
+    <!-- Previous -->
+    <Button
+      @click="playerActions.playPrevious()"
+      class="control-btn secondary"
+      :showLoader="false"
+      :showSucces="false"
+    >
+      <IconPrevious fill="rgb(var(--black))" class="control-icon"/>
+    </Button>
+
+    <!-- Play/Pause -->
+    <Button
+      @click="playerActions.togglePlay()"
+      class="control-btn primary"
+      :showLoader="false"
+      :showSucces="false"
+    >
+      <div
+        :class="{'paused': !playerState.isPlaying}"
+        class="play-icon pauseplay-btn"
+      >
+        <div class="radius-small d1"></div>
+        <div class="radius-small d2"></div>
+      </div>
+    </Button>
+
+    <!-- Next -->
+    <Button
+      @click="playerActions.playNext()"
+      class="control-btn secondary"
+      :showLoader="false"
+      :showSucces="false"
+    >
+      <IconNext fill="rgb(var(--black))" class="control-icon"/>
+    </Button>
+
+    <!-- Repeat -->
+    <Button
+      @click="playerActions.toggleRepeat()"
+      class="control-btn secondary"
+      :class="{ active: playerState.repeat }"
+      :showLoader="false"
+      :showSucces="false"
+    >
+      <IconRepeat fill="rgb(var(--black))" class="control-icon"/>
+    </Button>
+  </div>
+</template>
+
+<script setup>
+import Button from '@martyrs/src/components/Button/Button.vue';
+import IconPrevious from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';
+import IconNext from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';
+import IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';
+import IconRepeat from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';
+import { state as playerState, actions as playerActions } from '../../store/player.js';
+</script>
+
+<style scoped>
+.pauseplay-btn {
+  --bars-anim-duration: 300ms;
+  --clip-anim-duration: 150ms;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: clip-path ease-out var(--clip-anim-duration);
+  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+}
+
+.pauseplay-btn.paused {
+  clip-path: polygon(0 0, 0 100%, 100% 50%, 100% 50%);
+}
+
+.pauseplay-btn div {
+  position: absolute;
+  top: 0;
+  width: 30%;
+  height: 100%;
+  background: white;
+  transition: transform ease-out var(--bars-anim-duration);
+}
+
+.pauseplay-btn.paused div {
+  transform: scaleX(2);
+}
+
+.pauseplay-btn div.d1 {
+  left: 0;
+  transform-origin: left;
+}
+
+.pauseplay-btn div.d2 {
+  right: 0;
+  transform-origin: right;
+}
+</style>