@ozdao/martyrs 0.2.495 → 0.2.496

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

@@ -17,22 +17,23 @@
       <!-- Left Column - Cover & Stats -->
       <div class="pos-sticky pos-t-0 mobile:pos-relative track-cover-section">
         <!-- Cover with Play Overlay -->
-        <div class="cover-container relative mn-b-medium radius-big overflow-hidden shadow-big">
+        <div class="cover-container pos-relative mn-b-medium radius-big o-hidden">
           <Media 
             :url="track.coverUrl || (track.album && track.album.coverUrl) || '/logo/logo-placeholder.jpg'" 
             :alt="track.title"
             class="aspect-1x1 w-100 radius-medium o-hidden"
           />
-          <!-- <div class="cover-overlay absolute inset-0 bg-black-transp-40 flex-center opacity-0 hover-opacity-100 transition">
+          <div class="cover-overlay w-100 h-100 pos-absolute pos-t-0 pos-r-0 bg-black-transp-40 flex flex-center">
             <Button
               @click="playTrack"
               color="white"
               size="big"
-              class="w-5r h-5r radius-full shadow-big hover-scale-110"
+              class="w-5r h-5r radius-big bg-main shadow-big hover-scale-110"
             >
-              <IconPlay class="w-2r h-2r" />
+              <IconPlay v-if="!isPlaying" fill="rgb(var(--white))" class="i-medium" />
+              <IconPause v-else fill="rgb(var(--white))" class="i-medium" />
             </Button>
-          </div> -->
+          </div>
         </div>
 
           
@@ -54,8 +55,8 @@
       <div class="track-details-section">
         <!-- Track Type Badge -->
         <div class="flex items-center gap-small mn-b-small">
-          <span class="badge bg-primary-transp-20 t-primary pd-thin-big radius-small t-small t-uppercase">Single</span>
-          <span v-if="track.isExplicit" class="badge bg-danger-transp-20 t-danger pd-thin-big radius-small t-small">Explicit</span>
+           <span class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">Single</span>
+           <span class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">Explicit</span>
         </div>
 
         <!-- Track Title -->
@@ -68,8 +69,9 @@
             size="medium"
             class="flex-1 t-white bg-black radius-thin flex-center gap-thin"
           >
-            <IconPlay fill="rgb(var(--white))" class="i-medium" />
-            Play
+            <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
@@ -88,7 +90,7 @@
             size="medium"
             class="flex-1 bg-light radius-thin flex-center gap-thin"
           >
-            <IconLike class="i-medium" :fill="isFavorite" />
+            <IconLike class="i-medium" :fill="isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'" />
             {{isFavorite ? 'Liked' : 'Like'}}
           </Button>
 
@@ -121,82 +123,52 @@
         </div>
 
         <!-- Artist Card -->
-        <div class="artist-card bg-light pd-medium radius-medium flex items-center gap-medium mn-b-big">
-          <router-link 
-            :to="{ name: 'artist', params: { url: track.artist.url } }"
-            class="flex items-center gap-medium flex-1 hover-opacity"
-          >
-            <div class="artist-avatar">
-              <Media 
-                v-if="track.artist.photoUrl"
-                :src="track.artist.photoUrl"
-                :alt="track.artist.name"
-                class="w-4r h-4r radius-full object-cover"
-              />
-              <div v-else class="w-4r h-4r radius-full bg-primary flex-center ">
-                {{ track.artist.name.charAt(0) }}
-              </div>
-            </div>
-            <div>
-              <div class="flex items-center gap-thin">
-                <span class="t-large ">{{ track.artist.name }}</span>
-                <IconVerified v-if="track.artist.isVerified" class="w-1r h-1r t-primary" />
-              </div>
-              <span class="t-small t-transp">Artist</span>
-            </div>
-          </router-link>
-          <Button 
-            v-if="!isOwner"
-            @click="toggleFollowArtist"
-            :color="isFollowingArtist ? 'primary' : 'transp'"
-            size="small"
-          >
-            {{ isFollowingArtist ? 'Following' : 'Follow' }}
-          </Button>
+        <div class="artists-section mn-b-medium">
+          <h3 class="t-medium mn-b-small" v-if="track.artist">Artist</h3>
+          <div class="flex flex-col gap-small">
+            <ArtistCardSmall 
+              :key="track.artist._id"
+              :artist="track.artist"
+              :is-following="isFollowingArtist"
+              :show-follow-button="!isOwner"
+              @toggle-follow="toggleFollowArtist"
+            />
+          </div>
         </div>
 
-
-
         <!-- Metadata Cards -->
-        <div class="metadata-grid grid cols-2 gap-small mn-b-big">
-          <!-- Duration -->
+        <h3 class="t-medium mn-b-small">Metadata</h3>
+        <div class="metadata-grid grid cols-2 gap-small mn-b-medium">
+          <!-- Release Date -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-medium">
-            <div class="icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center">
-              <IconClock class="i-regular t-primary" />
-            </div>
+            <IconCalendar class="i-regular t-primary" />
             <div>
-              <div class="t-small t-transp t-uppercase">Duration</div>
-              <div class="t-medium ">{{ formatDuration(track.duration) }}</div>
+              <div class="t-small t-transp t-uppercase">Released</div>
+              <div class="t-medium ">{{ formatDate(track.releaseDate) }}</div>
             </div>
           </div>
 
-          <!-- Release Date -->
+          <!-- Total Duration -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-medium">
-            <div class="icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center">
-              <IconCalendar class="i-regular t-primary" />
-            </div>
+            <IconClock class="i-regular t-primary" />
             <div>
-              <div class="t-small t-transp t-uppercase">Released</div>
-              <div class="t-medium ">{{ formatDate(track.releaseDate) }}</div>
+              <div class="t-small t-transp t-uppercase">Duration</div>
+              <div class="t-medium ">{{ formatDuration(track.duration) }}</div>
             </div>
           </div>
 
-          <!-- Status -->
+          <!-- Label -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-medium">
-            <div class="icon-wrapper bg-success-transp-20 w-3r h-3r radius-small flex-center">
-              <IconCheck class="i-regular t-success" />
-            </div>
+            <IconCheck class="i-regular t-primary" />
             <div>
               <div class="t-small t-transp t-uppercase">Status</div>
-              <div class="t-medium t-success">{{ track.status }}</div>
+              <div class="t-medium ">{{ track.status }}</div>
             </div>
           </div>
 
           <!-- Visibility -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-medium">
-            <div class="icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center">
-              <IconEye class="i-regular t-primary" />
-            </div>
+            <IconEye class="i-regular t-primary" />
             <div>
               <div class="t-small t-transp t-uppercase">Visibility</div>
               <div class="t-medium ">{{ track.isPublic ? 'Public' : 'Private' }}</div>
@@ -204,18 +176,19 @@
           </div>
         </div>
 
+
         <!-- Album Info -->
+        <h3 v-if="track.album" class="t-medium mn-b-small">From Album</h3>
         <div v-if="track.album" class="album-card bg-light pd-medium radius-medium mn-b-medium">
-          <div class="t-small t-transp t-uppercase mn-b-thin">From Album</div>
+         
           <router-link 
             :to="`/album/${track.album.url}`"
-            class="flex items-center gap-medium hover-opacity"
+            class="flex flex-v-center gap-thin hover-opacity"
           >
             <Media 
-              v-if="track.album.coverUrl"
-              :src="track.album.coverUrl"
+              :url="track.album.coverArt || '/logo/logo-placeholder.jpg'"
               :alt="track.album.title"
-              class="w-3r h-3r radius-small object-cover"
+              class="w-3r h-3r radius-thin o-hidden object-cover"
             />
             <span class="t-medium ">{{ track.album.title }}</span>
           </router-link>
@@ -228,16 +201,16 @@
             <span 
               v-for="genre in track.genre" 
               :key="genre"
-              class="tag bg-primary-transp-20 t-primary pd-thin-big radius-small t-small hover-bg-primary-transp-30 cursor-pointer"
+              class="tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer"
             >
-              {{ genre }}
+              {{ genre.name || genre }}
             </span>
             <span 
               v-for="tag in track.tags" 
               :key="tag"
               class="tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer"
             >
-              #{{ tag }}
+              #{{ tag.name || tag }}
             </span>
           </div>
         </div>
@@ -318,6 +291,7 @@ import Feed from '@martyrs/src/components/Feed/Feed.vue';
 
 // Icons
 import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
+import IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';
 import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
 import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
 import IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';
@@ -329,13 +303,16 @@ import IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vu
 
 // Components
 import TrackListCard from '../cards/TrackListCard.vue';
+import ArtistCardSmall from '../cards/ArtistCardSmall.vue';
 // import PlaylistSelector from '../forms/PlaylistSelector.vue';
 
 // Store
 import { state as tracksState, actions as tracksActions } from '../../store/tracks.js';
-import { actions as playerActions } from '../../store/player.js';
+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 isPlaying = computed(() => playerState.isPlaying);
+
 const route = useRoute();
 const router = useRouter();
 

package/src/styles/base/all.scss

@@ -50,6 +50,7 @@ body {
 	.w-m-50r { width: min(100%, 50rem); }
 	.w-m-40r { width: min(100%, 40rem); }
 	.w-m-33r { width: min(100%, 33rem); }
+	.w-minmax-33r-100 { width: max(33rem, 100%); }
 	.w-m-25r { width: min(100%, 25rem); }
 	.w-m-20r { width: min(100%, 20rem); }
 	.w-m-15r { width: min(100%, 15rem); }

package/dist/martyrs/src/components/Chips/Chips.vue.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chips.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/components/Chips/Chips.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chips.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/components/Dropdown/Dropdown.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dropdown.vue.js","sources":["../../../../../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"dropdown pos-relative\" v-click-outside=\"clickedOutside\" @click.stop=\"isOpen = !isOpen\">\n    <div v-if=\"isComponentLabel\" class=\"w-100 h-100 flex-center flex\">\n      <component :is=\"label.component\" v-bind=\"label.props\" :class=\"label.class\"></component>\n    </div>\n    <div v-else>\n      {{ label }}\n    </div>\n    <transition name=\"TransitionTranslateY\" mode=\"out-in\">\n      <div \n        v-show=\"isOpen\" \n        :style=\"{ left: align === 'left' ? '0' : 'auto', right: align === 'right' ? '0' : 'auto' }\" \n        class=\"dropdown-content radius-big\" \n      >\n        <slot></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\nimport clickOutside from '../FieldPhone/click-outside.js';\n\nlet vClickOutside = clickOutside\n\nconst props = defineProps({\n  label: {\n    type: [String, Object],\n    default: 'Open'\n  },\n  align: {\n    type: String,\n    default: 'left'\n  }\n})\n\nconst isOpen = ref(false);\nconst isComponentLabel = computed(() => typeof props.label === 'object');\n\nfunction clickedOutside () {\n  isOpen.value = false\n}\n</script>\n\n<style >\n.dropdown-content {\n  display: block;\n  position: absolute;\n  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n  z-index: 1;\n}\n\n/*.dropdown:hover .dropdown-content {\n  display: block;\n}*/\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,QAAI,gBAAgB;AAEpB,UAAM,QAAQ;AAWd,UAAM,SAAS,IAAI,KAAK;AACxB,UAAM,mBAAmB,SAAS,MAAM,OAAO,MAAM,UAAU,QAAQ;AAEvE,aAAS,iBAAkB;AACzB,aAAO,QAAQ;AAAA,IACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/components/Menu/Menu.vue2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/components/Menu/Menu.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/martyrs/src/components/Tooltip/Tooltip.vue2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip.vue2.cjs","sources":["../../../../../src/components/Tooltip/Tooltip.vue"],"sourcesContent":["<template>\n  <div class=\"cursor-pointer tooltip-container\" @mouseover=\"showTooltip\" @mouseleave=\"hideTooltip\">\n    <slot></slot>\n    <div  class=\"tooltip-content\" :style=\"tooltipStyle\">\n      <span>{{ text }}</span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive } from 'vue';\n\nconst props = defineProps({\n  text: {\n    type: String,\n    required: true\n  }\n});\n\nconst visible = ref(false);\n\nconst tooltipStyle = reactive({\n  position: 'absolute',\n  width: 'max-content',\n  zIndex: 1000,\n  background: '#333',\n  color: '#fff',\n  padding: '5px',\n  borderRadius: '3px',\n  fontSize: '14px',\n  display: 'none',\n});\n\nfunction showTooltip(event) {\n  visible.value = true;\n  tooltipStyle.left = `${(event.clientX / 100) + 10 }px`;\n  tooltipStyle.top = `${(event.clientY / 100) + 10 }px`;\n  tooltipStyle.display = 'block';\n}\n\nfunction hideTooltip() {\n  visible.value = false;\n  tooltipStyle.display = 'none';\n}\n</script>\n\n<style >\n.tooltip-container {\n  position: relative;\n  display: inline-block;\n}\n\n.tooltip-content {\n  pointer-events: none;\n}\n</style>"],"names":["ref","reactive"],"mappings":";;;;;;;;;;;;;AAmBA,UAAM,UAAUA,IAAAA,IAAI,KAAK;AAEzB,UAAM,eAAeC,IAAAA,SAAS;AAAA,MAC5B,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,UAAU;AAAA,MACV,SAAS;AAAA,IACX,CAAC;AAED,aAAS,YAAY,OAAO;AAC1B,cAAQ,QAAQ;AAChB,mBAAa,OAAO,GAAI,MAAM,UAAU,MAAO,EAAE;AACjD,mBAAa,MAAM,GAAI,MAAM,UAAU,MAAO,EAAE;AAChD,mBAAa,UAAU;AAAA,IACzB;AAEA,aAAS,cAAc;AACrB,cAAQ,QAAQ;AAChB,mBAAa,UAAU;AAAA,IACzB;;;;;;;;;;;;;;;;;;;"}