@ozdao/martyrs 0.2.565 → 0.2.566

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>

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

@@ -0,0 +1,151 @@
+<template>
+  <div class="">
+    <canvas class="w-100 h-100" style="transform: rotate(-90deg)" id="audiowaves" ref="audiowaves"/>
+  </div>
+</template>
+
+
+<style lang="scss">
+</style>
+
+<script setup>
+import { ref, reactive,onMounted, onUnmounted, watchEffect } from 'vue';
+import { App } from '@capacitor/app';
+
+import * as radioStore from './radio.store.js';
+
+const props = defineProps({
+  options: {
+    type: Object,
+    default: {
+      position: false
+    }
+  }
+})
+
+const audiowaves = ref(null)
+const cleanupResources = ref([]);
+
+let audio, context, source, splitter, procNode, analChannel_0, analChannel_1;
+
+App.addListener('appStateChange', ({ isActive }) => {
+  isActive ? initFullPlayer() : removeFullPlayer()
+});
+
+const stopAudioAndContext = async () => {
+  if (source) await source.disconnect();
+  if (context) await context.close();
+};
+
+async function initFullPlayer () {
+  audio = await radioStore.getPlayerInstance()
+  context = await radioStore.getContextInstance()
+  source = await radioStore.getSourceInstance(context,audio)
+
+  let c = document.getElementById('audiowaves');
+
+  if (c) { 
+    let $ = c.getContext('2d');
+    let w = c.width = global.innerWidth;
+    let h = c.height = global.innerHeight;
+
+    //number of frequency bins to be displayed for each channel
+    let NUMBER_OF_COLUMNS = 1300;
+    let COLUMN_WIDTH = w / NUMBER_OF_COLUMNS;
+    let MIDDLE_HEIGHT = Math.round(h / 2);
+    let ANALYSERS_FFT_SIZE = 4096;
+    let HUE_STEP = Math.round(360 / 256);
+
+    let i, value;
+
+    //color step for frequency values
+    visualise(new Array(NUMBER_OF_COLUMNS), new Array(NUMBER_OF_COLUMNS));
+   
+    analChannel_0 = context.createAnalyser();
+    analChannel_1 = context.createAnalyser();
+
+    analChannel_0.fftSize = analChannel_1.fftSize = ANALYSERS_FFT_SIZE;
+
+    splitter = context.createChannelSplitter(2);
+    splitter.connect(analChannel_0, 0);
+    splitter.connect(analChannel_1, 1);
+
+    //processing node callback to be called every 1024 samples collected
+    procNode = context.createScriptProcessor(1024);
+    procNode.connect(context.destination);
+    procNode.onaudioprocess = function(event) {
+      let array0 = new Uint8Array(analChannel_0.frequencyBinCount);
+      analChannel_0.getByteFrequencyData(array0);
+      let array1 = new Uint8Array(analChannel_1.frequencyBinCount);
+      analChannel_1.getByteFrequencyData(array1);
+      
+      visualise(array0, array1);
+    }
+
+    source.connect(procNode);
+    source.connect(splitter);
+
+    cleanupResources.value.push(() => procNode.disconnect());
+    cleanupResources.value.push(() => splitter.disconnect());
+    cleanupResources.value.push(() => analChannel_0.disconnect());
+    cleanupResources.value.push(() => analChannel_1.disconnect());
+    cleanupResources.value.push(stopAudioAndContext);
+
+    
+    function visualise(array0, array1) {
+
+      $.clearRect(0, 0, w, h);
+      $.fillStyle = 'black';
+      $.fillRect(0, 0, w, h);
+
+
+      for (i = 0; i < NUMBER_OF_COLUMNS; i++) {
+          value = array0[i] * radioStore.state.volume || 1;
+          $.fillStyle = 'hsl(' + ((value * HUE_STEP) - 180) + ', 100%, 81%)'; // Adjusted saturation and lightness
+          $.fillRect(i * COLUMN_WIDTH, MIDDLE_HEIGHT - (value * 0.7 || 1), COLUMN_WIDTH, 256);
+      }
+
+      $.clearRect(0, h / 2, w, h / 2);
+      $.fillStyle = 'black';
+      $.fillRect(0, h / 2, w, h / 2);
+
+      for (i = 0; i < NUMBER_OF_COLUMNS; i++) {
+          value = array1[i] * radioStore.state.volume || 1;
+          $.fillStyle = 'hsl(' + ((value * HUE_STEP) - 180) + ', 100%, 81%)'; // Adjusted saturation and lightness
+          $.fillRect(i * COLUMN_WIDTH, MIDDLE_HEIGHT + 1, COLUMN_WIDTH, value * 0.7 || 1);
+      }
+    }
+  }
+}
+
+async function removeFullPlayer () {
+  cleanupResources.value.forEach(cleanup => cleanup());
+
+  audio = null
+  context = null
+  source = null
+
+  radioStore.state.context = null
+  radioStore.state.source = null
+  radioStore.state.gain = null
+  radioStore.state.player = null
+
+
+  let playerNew = radioStore.getPlayerInstance()
+  radioStore.state.player.volume = radioStore.state.volume;
+
+  if (radioStore.state.isPlaying) {
+    await playerNew.play()
+  }
+}
+
+onMounted(async() => {
+  await initFullPlayer()
+});
+
+onUnmounted(async() => {
+  await removeFullPlayer()
+  App.removeAllListeners()
+});
+
+</script>

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

@@ -1,28 +1,42 @@
 <!-- components/player/VolumeControl.vue -->
 <template>
-  <div class="volume-control">
-    <div 
-      ref="volumeBarContainer"
-      class="volume-bar-container"
-      @click="setVolume"
-      @mousedown="startVolumeChange"
-      @mousemove="updateVolumePosition"
-      @mouseup="endVolumeChange"
-      @mouseleave="endVolumeChange"
+  <div class="volume-section">
+    <Button
+      @click="playerActions.toggleMute()"
+      class="volume-btn"
+      :showLoader="false"
+      :showSucces="false"
     >
-      <div 
-        class="volume-track"
-        :style="{ 
-          background: `linear-gradient(to right, rgb(var(--black)) 0%, rgb(var(--black)) ${volumePercentage}%, rgb(var(--grey)) ${volumePercentage}%, rgb(var(--grey)) 100%)`
-        }"
-      >
-        <div 
-          class="volume-thumb"
-          :style="{ 
-            left: `${volumePercentage}%`,
-            opacity: muted ? 0 : 1
-          }"
-        ></div>
+      <IconMute v-if="muted || volume < 0.005" fill="rgb(var(--black))" class="volume-icon"/>
+      <IconUnMute v-else fill="rgb(var(--black))" class="volume-icon"/>
+    </Button>
+
+    <div class="volume-slider">
+      <div class="volume-control">
+        <div
+          ref="volumeBarContainer"
+          class="volume-bar-container"
+          @click="setVolume"
+          @mousedown="startVolumeChange"
+          @mousemove="updateVolumePosition"
+          @mouseup="endVolumeChange"
+          @mouseleave="endVolumeChange"
+        >
+          <div
+            class="volume-track"
+            :style="{
+              background: `linear-gradient(to right, rgb(var(--black)) 0%, rgb(var(--black)) ${volumePercentage}%, rgb(var(--grey)) ${volumePercentage}%, rgb(var(--grey)) 100%)`
+            }"
+          >
+            <div
+              class="volume-thumb"
+              :style="{
+                left: `${volumePercentage}%`,
+                opacity: muted ? 0 : 1
+              }"
+            ></div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -30,6 +44,9 @@
 
 <script setup>
 import { ref, computed } from 'vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import IconMute from '@martyrs/src/modules/icons/navigation/IconMute.vue';
+import IconUnMute from '@martyrs/src/modules/icons/navigation/IconUnMute.vue';
 
 // Import player store
 import { state as playerState, actions as playerActions } from '../../store/player.js';
@@ -83,6 +100,41 @@ const endVolumeChange = () => {
 </script>
 
 <style scoped>
+.volume-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: center;
+  width: 100%;
+}
+
+.volume-btn {
+  background: none;
+  border: none;
+  color: rgb(var(--black));
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.volume-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.volume-btn:hover {
+  background: rgba(var(--black),0.1);
+}
+
+.volume-slider {
+  flex: 1;
+}
+
 .volume-control {
   width: 100%;
 }
@@ -109,7 +161,7 @@ const endVolumeChange = () => {
   top: 50%;
   width: 12px;
   height: 12px;
-   background: rgb(var(--black));
+  background: rgb(var(--black));
   border: 1px solid rgba(var(--white),0.1);
   border-radius: 50%;
   transform: translate(-50%, -50%);