@ozdao/martyrs 0.2.489 → 0.2.492

package/dist/martyrs/src/modules/music/components/forms/TrackForm.vue.cjs

@@ -2,13 +2,13 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Field = require("../../../../components/Field/Field.vue.cjs");
+const Field = require("../../../../components/Field/Field.vue2.cjs");
 const Block = require("../../../../components/Block/Block.vue.cjs");
-const Button = require("../../../../components/Button/Button.vue2.cjs");
+const Button = require("../../../../components/Button/Button.vue.cjs");
 const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");
-const Select = require("../../../../components/Select/Select.vue.cjs");
+const Select = require("../../../../components/Select/Select.vue2.cjs");
 const UploadImage = require("../../../../components/UploadImage/UploadImage.vue.cjs");
-const Upload = require("../../../../components/Upload/Upload.vue.cjs");
+const Upload = require("../../../../components/Upload/Upload.vue2.cjs");
 const IconCross = require("../../../icons/navigation/IconCross.vue.cjs");
 const BlockMultiselect = require("../../../globals/views/components/blocks/BlockMultiselect.vue.cjs");
 const tracks = require("../../store/tracks.cjs");
@@ -177,8 +177,8 @@ const _sfc_main = {
         const formData = {
           ...form,
           artist: form.artists.length > 0 ? form.artists[0]._id || form.artists[0] : null,
-          album: form.albums.length > 0 ? form.albums[0]._id || form.albums[0] : null,
-          genres: form.genres.map((genre) => genre._id || genre)
+          album: form.albums.length > 0,
+          genres: form.genres.map((genre2) => genre2._id || genre2)
         };
         if (!props.editMode) {
           formData.owner = {
@@ -305,7 +305,7 @@ const _sfc_main = {
               }, {
                 selected: vue.withCtx(({ item, clear }) => [
                   vue.createElementVNode("div", _hoisted_4, [
-                    vue.createElementVNode("span", _hoisted_5, vue.toDisplayString((item == null ? void 0 : item.name) || item), 1),
+                    vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(item?.name || item), 1),
                     vue.createElementVNode("button", {
                       onClick: vue.withModifiers(clear, ["stop"]),
                       class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
@@ -370,7 +370,7 @@ const _sfc_main = {
               }, {
                 selected: vue.withCtx(({ item, clear }) => [
                   vue.createElementVNode("div", _hoisted_11, [
-                    vue.createElementVNode("span", _hoisted_12, vue.toDisplayString((item == null ? void 0 : item.title) || item), 1),
+                    vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(item?.title || item), 1),
                     vue.createElementVNode("button", {
                       onClick: vue.withModifiers(clear, ["stop"]),
                       class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
@@ -435,7 +435,7 @@ const _sfc_main = {
               }, {
                 selected: vue.withCtx(({ item, clear }) => [
                   vue.createElementVNode("div", _hoisted_18, [
-                    vue.createElementVNode("span", _hoisted_19, vue.toDisplayString((item == null ? void 0 : item.name) || item), 1),
+                    vue.createElementVNode("span", _hoisted_19, vue.toDisplayString(item?.name || item), 1),
                     vue.createElementVNode("button", {
                       onClick: vue.withModifiers(clear, ["stop"]),
                       class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"

package/dist/martyrs/src/modules/music/components/forms/TrackForm.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TrackForm.vue.cjs","sources":["../../../../../../../src/modules/music/components/forms/TrackForm.vue"],"sourcesContent":["<!-- components/forms/TrackForm.vue -->\n<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Track' : 'Upload Track' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-medium\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Track Title -->\n        <Field\n          v-model:field=\"form.title\"\n          label=\"Track Title\"\n          placeholder=\"Enter track title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"form.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the track title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n\n        <!-- Artist Selection -->\n       \n\n     \n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"form.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.releaseDate\"\n        />\n      \n        <!-- Duration -->\n        <Field\n          v-model:field=\"form.duration\"\n          label=\"Duration (seconds)\"\n          type=\"number\"\n          placeholder=\"Track duration in seconds\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>  \n\n         <Block title=\"Artist\">\n          <BlockMultiselect\n            v-model=\"form.artists\"\n            placeholder=\"Search artists...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n            :store=\"{\n              read: (options) => artistsActions.fetchArtists(options),\n              state: artistsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No artists found',\n                description: 'Try different search terms or create a new artist',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.name\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected artist slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.name || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Artist item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.name }}</p>\n                  <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n\n         <!-- Album Selection -->\n        <Block title=\"Album (Optional)\">\n          <BlockMultiselect\n            v-model=\"form.albums\"\n            placeholder=\"Search albums...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, title: item.title })\"\n            :store=\"{\n              read: (options) => albumsActions.fetchAlbums(options),\n              state: albumsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No albums found',\n                description: 'Try different search terms or create a new album',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.title\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected album slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.title || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Album item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.title }}</p>\n                  <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"form.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresActions.fetchGenres(options),\n            state: genresState\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Selected genres slot -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Genre item slot -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Content Settings Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Content Settings</h3>\n        \n        <Checkbox\n          v-model:checkbox=\"form.isExplicit\"\n          label=\"Explicit Content\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n        <Checkbox\n          v-model:checkbox=\"form.isPublic\"\n          label=\"Public Track\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Media Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Media</h3>\n        \n        <div class=\"cols-2 mobile:cols-1 gap-medium\">\n          <!-- Track Cover -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Cover Image</p>\n            <UploadImage\n              v-model:photo=\"form.coverUrl\"\n              uploadPath=\"tracks/covers\"\n              class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n              @error=\"handleUploadError\"\n            />\n          </div>\n          \n          <!-- Audio File -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Audio File</p>\n            <Upload\n              v-model:field=\"form.fileUrl\"\n              @file-change=\"(url) => form.fileUrl = url\"\n              type=\"file\"\n              uploadPath=\"tracks/audio\"\n              class=\"w-100 h-15r bg-white radius-small pd-small\"\n              :validation=\"validationErrors.fileUrl\"\n            />\n          </div>\n        </div>\n      </div>\n      \n      <!-- Additional Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Additional Information</h3>\n        \n        <!-- Lyrics -->\n        <Field\n          v-model:field=\"form.lyrics\"\n          label=\"Lyrics (Optional)\"\n          type=\"textarea\"\n          placeholder=\"Enter track lyrics\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"form.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Uploaded!'\n          }\"\n        >\n          {{ editMode ? 'Update Track' : 'Upload Track' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport Upload from '@martyrs/src/components/Upload/Upload.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/globals/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as tracksStore from '../../store/tracks';\nimport * as artistsStore from '../../store/artists';\nimport * as albumsStore from '../../store/albums';\nimport * as genresStore from '../../store/genres';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Store states and actions\nconst { state: artistsState, actions: artistsActions } = artistsStore;\nconst { state: albumsState, actions: albumsActions } = albumsStore;\nconst { state: genresState, actions: genresActions } = genresStore;\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\nconst emit = defineEmits(['uploaded']);\n\n// State\nconst form = reactive({\n  title: '',\n  artists: [],\n  albums: [],\n  genres: [],\n  duration: 0,\n  fileUrl: '',\n  coverUrl: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  isExplicit: false,\n  isPublic: true,\n  lyrics: '',\n  url: '',\n  status: 'draft'\n});\n\nconst validationErrors = reactive({\n  title: false,\n  fileUrl: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Status options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in track title to auto-generate URL\nwatch(() => form.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    form.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => form.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(form.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\nconst fetchTrack = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedTrack = await tracksStore.actions.fetchTrackByUrl(props.url);\n    \n    if (!fetchedTrack) {\n      globals.actions.setError({\n        message: 'Track not found'\n      });\n      return;\n    }\n    \n    // Update local track data\n    Object.assign(form, {\n      title: fetchedTrack.title || '',\n      artists: fetchedTrack.artist ? [fetchedTrack.artist] : [],\n      albums: fetchedTrack.album ? [fetchedTrack.album] : [],\n      genres: fetchedTrack.genres || [],\n      duration: fetchedTrack.duration || 0,\n      fileUrl: fetchedTrack.fileUrl || '',\n      coverUrl: fetchedTrack.coverUrl || '',\n      releaseDate: fetchedTrack.releaseDate ? new Date(fetchedTrack.releaseDate).toISOString().split('T')[0] : '',\n      isExplicit: fetchedTrack.isExplicit || false,\n      isPublic: fetchedTrack.isPublic !== false,\n      lyrics: fetchedTrack.lyrics || '',\n      url: fetchedTrack.url || '',\n      status: fetchedTrack.status || 'draft',\n      _id: fetchedTrack._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching track:', error);\n    globals.actions.setError({\n      message: 'Failed to load track details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!form.title.trim()) {\n    validationErrors.title = {\n      message: 'Track title is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.title = false;\n  }\n  \n  // Validate file URL\n  if (!form.fileUrl) {\n    validationErrors.fileUrl = {\n      message: 'Audio file is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.fileUrl = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...form,\n      artist: form.artists.length > 0 ? (form.artists[0]._id || form.artists[0]) : null,\n      album: form.albums.length > 0 ? (form.albums[0]._id || form.albums[0]) : null,\n      genres: form.genres.map(genre => genre._id || genre)\n    };\n    \n    // Add ownership data if creating new track\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n      formData.creator = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await tracksStore.actions.updateTrack(formData);\n    } else {\n      result = await tracksStore.actions.createTrack(formData);\n    }\n    \n    // Navigate to track detail page\n    setTimeout(() => {\n      router.push({\n        name: 'track',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving track:', error);\n    globals.actions.setError({\n      message: 'Failed to save track'\n    });\n  }\n};\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.actions.setError({\n    message: 'Error uploading file'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchTrack();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>"],"names":["artistsStore","albumsStore","genresStore","useRouter","useRoute","reactive","ref","watch","tracksStore.actions","globals.actions","auth.state","onMounted"],"mappings":"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"}
+{"version":3,"file":"TrackForm.vue.cjs","sources":["../../../../../../../src/modules/music/components/forms/TrackForm.vue"],"sourcesContent":["<!-- components/forms/TrackForm.vue -->\n<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Track' : 'Upload Track' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-medium\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Track Title -->\n        <Field\n          v-model:field=\"form.title\"\n          label=\"Track Title\"\n          placeholder=\"Enter track title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"form.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the track title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n\n        <!-- Artist Selection -->\n       \n\n     \n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"form.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.releaseDate\"\n        />\n      \n        <!-- Duration -->\n        <Field\n          v-model:field=\"form.duration\"\n          label=\"Duration (seconds)\"\n          type=\"number\"\n          placeholder=\"Track duration in seconds\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>  \n\n         <Block title=\"Artist\">\n          <BlockMultiselect\n            v-model=\"form.artists\"\n            placeholder=\"Search artists...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n            :store=\"{\n              read: (options) => artistsActions.fetchArtists(options),\n              state: artistsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No artists found',\n                description: 'Try different search terms or create a new artist',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.name\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected artist slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.name || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Artist item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.name }}</p>\n                  <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n\n         <!-- Album Selection -->\n        <Block title=\"Album (Optional)\">\n          <BlockMultiselect\n            v-model=\"form.albums\"\n            placeholder=\"Search albums...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, title: item.title })\"\n            :store=\"{\n              read: (options) => albumsActions.fetchAlbums(options),\n              state: albumsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No albums found',\n                description: 'Try different search terms or create a new album',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.title\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected album slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.title || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Album item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.title }}</p>\n                  <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"form.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresActions.fetchGenres(options),\n            state: genresState\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Selected genres slot -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Genre item slot -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Content Settings Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Content Settings</h3>\n        \n        <Checkbox\n          v-model:checkbox=\"form.isExplicit\"\n          label=\"Explicit Content\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n        <Checkbox\n          v-model:checkbox=\"form.isPublic\"\n          label=\"Public Track\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Media Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Media</h3>\n        \n        <div class=\"cols-2 mobile:cols-1 gap-medium\">\n          <!-- Track Cover -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Cover Image</p>\n            <UploadImage\n              v-model:photo=\"form.coverUrl\"\n              uploadPath=\"tracks/covers\"\n              class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n              @error=\"handleUploadError\"\n            />\n          </div>\n          \n          <!-- Audio File -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Audio File</p>\n            <Upload\n              v-model:field=\"form.fileUrl\"\n              @file-change=\"(url) => form.fileUrl = url\"\n              type=\"file\"\n              uploadPath=\"tracks/audio\"\n              class=\"w-100 h-15r bg-white radius-small pd-small\"\n              :validation=\"validationErrors.fileUrl\"\n            />\n          </div>\n        </div>\n      </div>\n      \n      <!-- Additional Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Additional Information</h3>\n        \n        <!-- Lyrics -->\n        <Field\n          v-model:field=\"form.lyrics\"\n          label=\"Lyrics (Optional)\"\n          type=\"textarea\"\n          placeholder=\"Enter track lyrics\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"form.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Uploaded!'\n          }\"\n        >\n          {{ editMode ? 'Update Track' : 'Upload Track' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport Upload from '@martyrs/src/components/Upload/Upload.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/globals/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as tracksStore from '../../store/tracks';\nimport * as artistsStore from '../../store/artists';\nimport * as albumsStore from '../../store/albums';\nimport * as genresStore from '../../store/genres';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Store states and actions\nconst { state: artistsState, actions: artistsActions } = artistsStore;\nconst { state: albumsState, actions: albumsActions } = albumsStore;\nconst { state: genresState, actions: genresActions } = genresStore;\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\nconst emit = defineEmits(['uploaded']);\n\n// State\nconst form = reactive({\n  title: '',\n  artists: [],\n  albums: [],\n  genres: [],\n  duration: 0,\n  fileUrl: '',\n  coverUrl: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  isExplicit: false,\n  isPublic: true,\n  lyrics: '',\n  url: '',\n  status: 'draft'\n});\n\nconst validationErrors = reactive({\n  title: false,\n  fileUrl: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Status options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in track title to auto-generate URL\nwatch(() => form.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    form.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => form.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(form.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\nconst fetchTrack = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedTrack = await tracksStore.actions.fetchTrackByUrl(props.url);\n    \n    if (!fetchedTrack) {\n      globals.actions.setError({\n        message: 'Track not found'\n      });\n      return;\n    }\n    \n    // Update local track data\n    Object.assign(form, {\n      title: fetchedTrack.title || '',\n      artists: fetchedTrack.artist ? [fetchedTrack.artist] : [],\n      albums: fetchedTrack.album ? [fetchedTrack.album] : [],\n      genres: fetchedTrack.genres || [],\n      duration: fetchedTrack.duration || 0,\n      fileUrl: fetchedTrack.fileUrl || '',\n      coverUrl: fetchedTrack.coverUrl || '',\n      releaseDate: fetchedTrack.releaseDate ? new Date(fetchedTrack.releaseDate).toISOString().split('T')[0] : '',\n      isExplicit: fetchedTrack.isExplicit || false,\n      isPublic: fetchedTrack.isPublic !== false,\n      lyrics: fetchedTrack.lyrics || '',\n      url: fetchedTrack.url || '',\n      status: fetchedTrack.status || 'draft',\n      _id: fetchedTrack._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching track:', error);\n    globals.actions.setError({\n      message: 'Failed to load track details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!form.title.trim()) {\n    validationErrors.title = {\n      message: 'Track title is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.title = false;\n  }\n  \n  // Validate file URL\n  if (!form.fileUrl) {\n    validationErrors.fileUrl = {\n      message: 'Audio file is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.fileUrl = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...form,\n      artist: form.artists.length > 0 ? (form.artists[0]._id || form.artists[0]) : null,\n      album: form.albums.length > 0 ?? form.albums.map(album => album._id || genre),\n      genres: form.genres.map(genre => genre._id || genre)\n    };\n    \n    // Add ownership data if creating new track\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n      formData.creator = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await tracksStore.actions.updateTrack(formData);\n    } else {\n      result = await tracksStore.actions.createTrack(formData);\n    }\n    \n    // Navigate to track detail page\n    setTimeout(() => {\n      router.push({\n        name: 'track',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving track:', error);\n    globals.actions.setError({\n      message: 'Failed to save track'\n    });\n  }\n};\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.actions.setError({\n    message: 'Error uploading file'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchTrack();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>"],"names":["artistsStore","albumsStore","genresStore","useRouter","useRoute","reactive","ref","watch","tracksStore.actions","globals.actions","genre","auth.state","onMounted"],"mappings":"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"}

package/dist/martyrs/src/modules/music/components/forms/TrackForm.vue.js

@@ -1,12 +1,12 @@
 import { reactive, ref, watch, onMounted, createElementBlock, openBlock, createElementVNode, toDisplayString, withModifiers, createVNode, withCtx, unref, createCommentVNode, createTextVNode } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import Field from "../../../../components/Field/Field.vue.js";
+import Field from "../../../../components/Field/Field.vue2.js";
 import _sfc_main$1 from "../../../../components/Block/Block.vue.js";
-import _sfc_main$5 from "../../../../components/Button/Button.vue2.js";
+import _sfc_main$5 from "../../../../components/Button/Button.vue.js";
 import _sfc_main$3 from "../../../../components/Checkbox/Checkbox.vue.js";
-import Select from "../../../../components/Select/Select.vue.js";
+import Select from "../../../../components/Select/Select.vue2.js";
 import _sfc_main$4 from "../../../../components/UploadImage/UploadImage.vue.js";
-import Upload from "../../../../components/Upload/Upload.vue.js";
+import Upload from "../../../../components/Upload/Upload.vue2.js";
 import _sfc_main$2 from "../../../icons/navigation/IconCross.vue.js";
 import BlockMultiselect from "../../../globals/views/components/blocks/BlockMultiselect.vue.js";
 import { actions } from "../../store/tracks.js";
@@ -175,8 +175,8 @@ const _sfc_main = {
         const formData = {
           ...form,
           artist: form.artists.length > 0 ? form.artists[0]._id || form.artists[0] : null,
-          album: form.albums.length > 0 ? form.albums[0]._id || form.albums[0] : null,
-          genres: form.genres.map((genre) => genre._id || genre)
+          album: form.albums.length > 0,
+          genres: form.genres.map((genre2) => genre2._id || genre2)
         };
         if (!props.editMode) {
           formData.owner = {
@@ -303,7 +303,7 @@ const _sfc_main = {
               }, {
                 selected: withCtx(({ item, clear }) => [
                   createElementVNode("div", _hoisted_4, [
-                    createElementVNode("span", _hoisted_5, toDisplayString((item == null ? void 0 : item.name) || item), 1),
+                    createElementVNode("span", _hoisted_5, toDisplayString(item?.name || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
                       class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
@@ -368,7 +368,7 @@ const _sfc_main = {
               }, {
                 selected: withCtx(({ item, clear }) => [
                   createElementVNode("div", _hoisted_11, [
-                    createElementVNode("span", _hoisted_12, toDisplayString((item == null ? void 0 : item.title) || item), 1),
+                    createElementVNode("span", _hoisted_12, toDisplayString(item?.title || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
                       class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
@@ -433,7 +433,7 @@ const _sfc_main = {
               }, {
                 selected: withCtx(({ item, clear }) => [
                   createElementVNode("div", _hoisted_18, [
-                    createElementVNode("span", _hoisted_19, toDisplayString((item == null ? void 0 : item.name) || item), 1),
+                    createElementVNode("span", _hoisted_19, toDisplayString(item?.name || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
                       class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"

package/dist/martyrs/src/modules/music/components/forms/TrackForm.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrackForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/TrackForm.vue"],"sourcesContent":["<!-- components/forms/TrackForm.vue -->\n<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Track' : 'Upload Track' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-medium\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Track Title -->\n        <Field\n          v-model:field=\"form.title\"\n          label=\"Track Title\"\n          placeholder=\"Enter track title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"form.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the track title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n\n        <!-- Artist Selection -->\n       \n\n     \n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"form.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.releaseDate\"\n        />\n      \n        <!-- Duration -->\n        <Field\n          v-model:field=\"form.duration\"\n          label=\"Duration (seconds)\"\n          type=\"number\"\n          placeholder=\"Track duration in seconds\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>  \n\n         <Block title=\"Artist\">\n          <BlockMultiselect\n            v-model=\"form.artists\"\n            placeholder=\"Search artists...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n            :store=\"{\n              read: (options) => artistsActions.fetchArtists(options),\n              state: artistsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No artists found',\n                description: 'Try different search terms or create a new artist',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.name\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected artist slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.name || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Artist item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.name }}</p>\n                  <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n\n         <!-- Album Selection -->\n        <Block title=\"Album (Optional)\">\n          <BlockMultiselect\n            v-model=\"form.albums\"\n            placeholder=\"Search albums...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, title: item.title })\"\n            :store=\"{\n              read: (options) => albumsActions.fetchAlbums(options),\n              state: albumsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No albums found',\n                description: 'Try different search terms or create a new album',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.title\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected album slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.title || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Album item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.title }}</p>\n                  <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"form.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresActions.fetchGenres(options),\n            state: genresState\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Selected genres slot -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Genre item slot -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Content Settings Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Content Settings</h3>\n        \n        <Checkbox\n          v-model:checkbox=\"form.isExplicit\"\n          label=\"Explicit Content\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n        <Checkbox\n          v-model:checkbox=\"form.isPublic\"\n          label=\"Public Track\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Media Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Media</h3>\n        \n        <div class=\"cols-2 mobile:cols-1 gap-medium\">\n          <!-- Track Cover -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Cover Image</p>\n            <UploadImage\n              v-model:photo=\"form.coverUrl\"\n              uploadPath=\"tracks/covers\"\n              class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n              @error=\"handleUploadError\"\n            />\n          </div>\n          \n          <!-- Audio File -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Audio File</p>\n            <Upload\n              v-model:field=\"form.fileUrl\"\n              @file-change=\"(url) => form.fileUrl = url\"\n              type=\"file\"\n              uploadPath=\"tracks/audio\"\n              class=\"w-100 h-15r bg-white radius-small pd-small\"\n              :validation=\"validationErrors.fileUrl\"\n            />\n          </div>\n        </div>\n      </div>\n      \n      <!-- Additional Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Additional Information</h3>\n        \n        <!-- Lyrics -->\n        <Field\n          v-model:field=\"form.lyrics\"\n          label=\"Lyrics (Optional)\"\n          type=\"textarea\"\n          placeholder=\"Enter track lyrics\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"form.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Uploaded!'\n          }\"\n        >\n          {{ editMode ? 'Update Track' : 'Upload Track' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport Upload from '@martyrs/src/components/Upload/Upload.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/globals/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as tracksStore from '../../store/tracks';\nimport * as artistsStore from '../../store/artists';\nimport * as albumsStore from '../../store/albums';\nimport * as genresStore from '../../store/genres';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Store states and actions\nconst { state: artistsState, actions: artistsActions } = artistsStore;\nconst { state: albumsState, actions: albumsActions } = albumsStore;\nconst { state: genresState, actions: genresActions } = genresStore;\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\nconst emit = defineEmits(['uploaded']);\n\n// State\nconst form = reactive({\n  title: '',\n  artists: [],\n  albums: [],\n  genres: [],\n  duration: 0,\n  fileUrl: '',\n  coverUrl: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  isExplicit: false,\n  isPublic: true,\n  lyrics: '',\n  url: '',\n  status: 'draft'\n});\n\nconst validationErrors = reactive({\n  title: false,\n  fileUrl: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Status options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in track title to auto-generate URL\nwatch(() => form.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    form.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => form.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(form.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\nconst fetchTrack = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedTrack = await tracksStore.actions.fetchTrackByUrl(props.url);\n    \n    if (!fetchedTrack) {\n      globals.actions.setError({\n        message: 'Track not found'\n      });\n      return;\n    }\n    \n    // Update local track data\n    Object.assign(form, {\n      title: fetchedTrack.title || '',\n      artists: fetchedTrack.artist ? [fetchedTrack.artist] : [],\n      albums: fetchedTrack.album ? [fetchedTrack.album] : [],\n      genres: fetchedTrack.genres || [],\n      duration: fetchedTrack.duration || 0,\n      fileUrl: fetchedTrack.fileUrl || '',\n      coverUrl: fetchedTrack.coverUrl || '',\n      releaseDate: fetchedTrack.releaseDate ? new Date(fetchedTrack.releaseDate).toISOString().split('T')[0] : '',\n      isExplicit: fetchedTrack.isExplicit || false,\n      isPublic: fetchedTrack.isPublic !== false,\n      lyrics: fetchedTrack.lyrics || '',\n      url: fetchedTrack.url || '',\n      status: fetchedTrack.status || 'draft',\n      _id: fetchedTrack._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching track:', error);\n    globals.actions.setError({\n      message: 'Failed to load track details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!form.title.trim()) {\n    validationErrors.title = {\n      message: 'Track title is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.title = false;\n  }\n  \n  // Validate file URL\n  if (!form.fileUrl) {\n    validationErrors.fileUrl = {\n      message: 'Audio file is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.fileUrl = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...form,\n      artist: form.artists.length > 0 ? (form.artists[0]._id || form.artists[0]) : null,\n      album: form.albums.length > 0 ? (form.albums[0]._id || form.albums[0]) : null,\n      genres: form.genres.map(genre => genre._id || genre)\n    };\n    \n    // Add ownership data if creating new track\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n      formData.creator = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await tracksStore.actions.updateTrack(formData);\n    } else {\n      result = await tracksStore.actions.createTrack(formData);\n    }\n    \n    // Navigate to track detail page\n    setTimeout(() => {\n      router.push({\n        name: 'track',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving track:', error);\n    globals.actions.setError({\n      message: 'Failed to save track'\n    });\n  }\n};\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.actions.setError({\n    message: 'Error uploading file'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchTrack();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>"],"names":["artistsStore","albumsStore","genresStore","tracksStore.actions","globals.actions","auth.state"],"mappings":"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"}
+{"version":3,"file":"TrackForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/TrackForm.vue"],"sourcesContent":["<!-- components/forms/TrackForm.vue -->\n<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Track' : 'Upload Track' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-medium\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Track Title -->\n        <Field\n          v-model:field=\"form.title\"\n          label=\"Track Title\"\n          placeholder=\"Enter track title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"form.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the track title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n\n        <!-- Artist Selection -->\n       \n\n     \n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"form.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.releaseDate\"\n        />\n      \n        <!-- Duration -->\n        <Field\n          v-model:field=\"form.duration\"\n          label=\"Duration (seconds)\"\n          type=\"number\"\n          placeholder=\"Track duration in seconds\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>  \n\n         <Block title=\"Artist\">\n          <BlockMultiselect\n            v-model=\"form.artists\"\n            placeholder=\"Search artists...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n            :store=\"{\n              read: (options) => artistsActions.fetchArtists(options),\n              state: artistsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No artists found',\n                description: 'Try different search terms or create a new artist',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.name\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected artist slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.name || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Artist item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.name }}</p>\n                  <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n\n         <!-- Album Selection -->\n        <Block title=\"Album (Optional)\">\n          <BlockMultiselect\n            v-model=\"form.albums\"\n            placeholder=\"Search albums...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, title: item.title })\"\n            :store=\"{\n              read: (options) => albumsActions.fetchAlbums(options),\n              state: albumsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No albums found',\n                description: 'Try different search terms or create a new album',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.title\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected album slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.title || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Album item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.title }}</p>\n                  <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"form.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresActions.fetchGenres(options),\n            state: genresState\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Selected genres slot -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Genre item slot -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Content Settings Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Content Settings</h3>\n        \n        <Checkbox\n          v-model:checkbox=\"form.isExplicit\"\n          label=\"Explicit Content\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n        <Checkbox\n          v-model:checkbox=\"form.isPublic\"\n          label=\"Public Track\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Media Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Media</h3>\n        \n        <div class=\"cols-2 mobile:cols-1 gap-medium\">\n          <!-- Track Cover -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Cover Image</p>\n            <UploadImage\n              v-model:photo=\"form.coverUrl\"\n              uploadPath=\"tracks/covers\"\n              class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n              @error=\"handleUploadError\"\n            />\n          </div>\n          \n          <!-- Audio File -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Audio File</p>\n            <Upload\n              v-model:field=\"form.fileUrl\"\n              @file-change=\"(url) => form.fileUrl = url\"\n              type=\"file\"\n              uploadPath=\"tracks/audio\"\n              class=\"w-100 h-15r bg-white radius-small pd-small\"\n              :validation=\"validationErrors.fileUrl\"\n            />\n          </div>\n        </div>\n      </div>\n      \n      <!-- Additional Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Additional Information</h3>\n        \n        <!-- Lyrics -->\n        <Field\n          v-model:field=\"form.lyrics\"\n          label=\"Lyrics (Optional)\"\n          type=\"textarea\"\n          placeholder=\"Enter track lyrics\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"form.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Uploaded!'\n          }\"\n        >\n          {{ editMode ? 'Update Track' : 'Upload Track' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport Upload from '@martyrs/src/components/Upload/Upload.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/globals/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as tracksStore from '../../store/tracks';\nimport * as artistsStore from '../../store/artists';\nimport * as albumsStore from '../../store/albums';\nimport * as genresStore from '../../store/genres';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Store states and actions\nconst { state: artistsState, actions: artistsActions } = artistsStore;\nconst { state: albumsState, actions: albumsActions } = albumsStore;\nconst { state: genresState, actions: genresActions } = genresStore;\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\nconst emit = defineEmits(['uploaded']);\n\n// State\nconst form = reactive({\n  title: '',\n  artists: [],\n  albums: [],\n  genres: [],\n  duration: 0,\n  fileUrl: '',\n  coverUrl: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  isExplicit: false,\n  isPublic: true,\n  lyrics: '',\n  url: '',\n  status: 'draft'\n});\n\nconst validationErrors = reactive({\n  title: false,\n  fileUrl: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Status options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in track title to auto-generate URL\nwatch(() => form.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    form.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => form.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(form.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\nconst fetchTrack = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedTrack = await tracksStore.actions.fetchTrackByUrl(props.url);\n    \n    if (!fetchedTrack) {\n      globals.actions.setError({\n        message: 'Track not found'\n      });\n      return;\n    }\n    \n    // Update local track data\n    Object.assign(form, {\n      title: fetchedTrack.title || '',\n      artists: fetchedTrack.artist ? [fetchedTrack.artist] : [],\n      albums: fetchedTrack.album ? [fetchedTrack.album] : [],\n      genres: fetchedTrack.genres || [],\n      duration: fetchedTrack.duration || 0,\n      fileUrl: fetchedTrack.fileUrl || '',\n      coverUrl: fetchedTrack.coverUrl || '',\n      releaseDate: fetchedTrack.releaseDate ? new Date(fetchedTrack.releaseDate).toISOString().split('T')[0] : '',\n      isExplicit: fetchedTrack.isExplicit || false,\n      isPublic: fetchedTrack.isPublic !== false,\n      lyrics: fetchedTrack.lyrics || '',\n      url: fetchedTrack.url || '',\n      status: fetchedTrack.status || 'draft',\n      _id: fetchedTrack._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching track:', error);\n    globals.actions.setError({\n      message: 'Failed to load track details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!form.title.trim()) {\n    validationErrors.title = {\n      message: 'Track title is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.title = false;\n  }\n  \n  // Validate file URL\n  if (!form.fileUrl) {\n    validationErrors.fileUrl = {\n      message: 'Audio file is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.fileUrl = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...form,\n      artist: form.artists.length > 0 ? (form.artists[0]._id || form.artists[0]) : null,\n      album: form.albums.length > 0 ?? form.albums.map(album => album._id || genre),\n      genres: form.genres.map(genre => genre._id || genre)\n    };\n    \n    // Add ownership data if creating new track\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n      formData.creator = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await tracksStore.actions.updateTrack(formData);\n    } else {\n      result = await tracksStore.actions.createTrack(formData);\n    }\n    \n    // Navigate to track detail page\n    setTimeout(() => {\n      router.push({\n        name: 'track',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving track:', error);\n    globals.actions.setError({\n      message: 'Failed to save track'\n    });\n  }\n};\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.actions.setError({\n    message: 'Error uploading file'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchTrack();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>"],"names":["artistsStore","albumsStore","genresStore","tracksStore.actions","globals.actions","genre","auth.state"],"mappings":"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"}

package/dist/martyrs/src/modules/music/components/layouts/MusicLayout.vue.cjs

@@ -5,7 +5,7 @@ const vueRouter = require("vue-router");
 const MusicPlayer = require("../player/MusicPlayer.vue.cjs");
 const SearchForm = require("../forms/SearchForm.vue.cjs");
 ;/* empty css                                         */
-;/* empty css                                         */
+;/* empty css                                          */
 ;/* empty css                                              */
 const IconChevronLeft = require("../../../icons/navigation/IconChevronLeft.vue.cjs");
 const IconChevronRight = require("../../../icons/navigation/IconChevronRight.vue.cjs");

package/dist/martyrs/src/modules/music/components/layouts/MusicLayout.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MusicLayout.vue.cjs","sources":["../../../../../../../src/modules/music/components/layouts/MusicLayout.vue"],"sourcesContent":["<!-- components/layouts/MusicLayout.vue -->\n<template>\n  <div class=\"music-layout flex flex-column flex-nowrap w-100 \">\n    <!-- Header Bar -->\n    <header class=\"flex-child-shrink-0 z-index-3 flex-v-center flex-justify-between flex gap-small pd-small bg-main\">\n \n      <div class=\"music-navigation-buttons flex gap-thin\">\n        <button @click=\"$router.go(-1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronLeft class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n        <button @click=\"$router.go(1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronRight class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n      </div>\n    \n      <div class=\"music-search-bar flex-child-1 mn-l-medium mn-r-medium\" v-if=\"$route.name !== 'music-search'\">\n        <SearchForm @search=\"handleSearch\" placeholder=\"Search music...\" />\n      </div>\n      \n      <div class=\"music-user-menu flex-nowrap  flex pos-relative\">\n \n        <router-link :to=\"{ name: 'music-library' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Library\n        </router-link>\n        <router-link :to=\"{ name: 'track-create' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Upload\n        </router-link>\n        \n      </div>\n    </header>\n    \n    <!-- Main Content Area -->\n    <main class=\"o-x-hidden\">\n      <router-view></router-view>\n    </main>\n    \n    <!-- Music Player Fixed at Bottom -->\n    <MusicPlayer v-if=\"currentTrack\" class=\"pos-fixed pos-b-0 w-100 \"/>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter } from 'vue-router';\nimport MusicPlayer from '../player/MusicPlayer.vue';\nimport SearchForm from '../forms/SearchForm.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\n\n// Icons - Import from icons in the Martyrs framework\nimport IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\nimport IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\nimport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';\n\n// Import store modules\nimport { state as playerState } from '../../store/player.js';\nimport { state as authState, actions as authActions } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst router = useRouter();\n\n// UI state\nconst showUserMenu = ref(false);\n\n// Auth computed properties\nconst isAuthenticated = computed(() => {\n  return authState.access.status === true;\n});\n\nconst user = computed(() => {\n  return authState.user;\n});\n\n// Current track from player store\nconst currentTrack = computed(() => {\n  return playerState.currentTrack;\n});\n\n// Methods\nconst handleSearch = (query) => {\n  router.push({ name: 'music-search', query: { q: query } });\n};\n\n</script>"],"names":["useRouter","ref","computed","authState","playerState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,UAAM,SAASA,UAAAA,UAAW;AAGLC,QAAAA,IAAI,KAAK;AAGNC,QAAAA,SAAS,MAAM;AACrC,aAAOC,KAAS,MAAC,OAAO,WAAW;AAAA,IACrC,CAAC;AAEYD,QAAAA,SAAS,MAAM;AAC1B,aAAOC,KAAS,MAAC;AAAA,IACnB,CAAC;AAGD,UAAM,eAAeD,IAAQ,SAAC,MAAM;AAClC,aAAOE,OAAW,MAAC;AAAA,IACrB,CAAC;AAGD,UAAM,eAAe,CAAC,UAAU;AAC9B,aAAO,KAAK,EAAE,MAAM,gBAAgB,OAAO,EAAE,GAAG,MAAK,GAAI;AAAA,IAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MusicLayout.vue.cjs","sources":["../../../../../../../src/modules/music/components/layouts/MusicLayout.vue"],"sourcesContent":["<!-- components/layouts/MusicLayout.vue -->\n<template>\n  <div class=\"music-layout flex flex-column flex-nowrap w-100 \">\n    <!-- Header Bar -->\n    <header class=\"flex-child-shrink-0 z-index-3 flex-v-center flex-justify-between flex gap-small pd-small bg-main\">\n \n      <div class=\"music-navigation-buttons flex gap-thin\">\n        <button @click=\"$router.go(-1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronLeft class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n        <button @click=\"$router.go(1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronRight class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n      </div>\n    \n      <div class=\"music-search-bar flex-child-1 mn-l-medium mn-r-medium\" v-if=\"$route.name !== 'music-search'\">\n        <SearchForm @search=\"handleSearch\" placeholder=\"Search music...\" />\n      </div>\n      \n      <div class=\"music-user-menu flex-nowrap  flex pos-relative\">\n \n        <router-link :to=\"{ name: 'music-library' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Library\n        </router-link>\n        <router-link :to=\"{ name: 'track-create' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Upload\n        </router-link>\n        \n      </div>\n    </header>\n    \n    <!-- Main Content Area -->\n    <main class=\"o-x-hidden\">\n      <router-view></router-view>\n    </main>\n    \n    <!-- Music Player Fixed at Bottom -->\n    <MusicPlayer v-if=\"currentTrack\" class=\"pos-fixed pos-b-0 w-100 \"/>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter } from 'vue-router';\nimport MusicPlayer from '../player/MusicPlayer.vue';\nimport SearchForm from '../forms/SearchForm.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\n\n// Icons - Import from icons in the Martyrs framework\nimport IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\nimport IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\nimport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';\n\n// Import store modules\nimport { state as playerState } from '../../store/player.js';\nimport { state as authState, actions as authActions } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst router = useRouter();\n\n// UI state\nconst showUserMenu = ref(false);\n\n// Auth computed properties\nconst isAuthenticated = computed(() => {\n  return authState.access.status === true;\n});\n\nconst user = computed(() => {\n  return authState.user;\n});\n\n// Current track from player store\nconst currentTrack = computed(() => {\n  return playerState.currentTrack;\n});\n\n// Methods\nconst handleSearch = (query) => {\n  router.push({ name: 'music-search', query: { q: query } });\n};\n\n</script>"],"names":["useRouter","ref","computed","authState","playerState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,UAAM,SAASA,UAAAA,UAAS;AAGHC,QAAAA,IAAI,KAAK;AAGNC,QAAAA,SAAS,MAAM;AACrC,aAAOC,KAAAA,MAAU,OAAO,WAAW;AAAA,IACrC,CAAC;AAEYD,QAAAA,SAAS,MAAM;AAC1B,aAAOC,KAAAA,MAAU;AAAA,IACnB,CAAC;AAGD,UAAM,eAAeD,IAAAA,SAAS,MAAM;AAClC,aAAOE,OAAAA,MAAY;AAAA,IACrB,CAAC;AAGD,UAAM,eAAe,CAAC,UAAU;AAC9B,aAAO,KAAK,EAAE,MAAM,gBAAgB,OAAO,EAAE,GAAG,MAAK,GAAI;AAAA,IAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/layouts/MusicLayout.vue.js

@@ -3,7 +3,7 @@ import { useRouter } from "vue-router";
 import MusicPlayer from "../player/MusicPlayer.vue.js";
 import SearchForm from "../forms/SearchForm.vue.js";
 /* empty css                                       */
-/* empty css                                       */
+/* empty css                                        */
 /* empty css                                            */
 import IconChevronLeft from "../../../icons/navigation/IconChevronLeft.vue.js";
 import IconChevronRight from "../../../icons/navigation/IconChevronRight.vue.js";

package/dist/martyrs/src/modules/music/components/layouts/MusicLayout.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"MusicLayout.vue.js","sources":["../../../../../../../src/modules/music/components/layouts/MusicLayout.vue"],"sourcesContent":["<!-- components/layouts/MusicLayout.vue -->\n<template>\n  <div class=\"music-layout flex flex-column flex-nowrap w-100 \">\n    <!-- Header Bar -->\n    <header class=\"flex-child-shrink-0 z-index-3 flex-v-center flex-justify-between flex gap-small pd-small bg-main\">\n \n      <div class=\"music-navigation-buttons flex gap-thin\">\n        <button @click=\"$router.go(-1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronLeft class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n        <button @click=\"$router.go(1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronRight class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n      </div>\n    \n      <div class=\"music-search-bar flex-child-1 mn-l-medium mn-r-medium\" v-if=\"$route.name !== 'music-search'\">\n        <SearchForm @search=\"handleSearch\" placeholder=\"Search music...\" />\n      </div>\n      \n      <div class=\"music-user-menu flex-nowrap  flex pos-relative\">\n \n        <router-link :to=\"{ name: 'music-library' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Library\n        </router-link>\n        <router-link :to=\"{ name: 'track-create' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Upload\n        </router-link>\n        \n      </div>\n    </header>\n    \n    <!-- Main Content Area -->\n    <main class=\"o-x-hidden\">\n      <router-view></router-view>\n    </main>\n    \n    <!-- Music Player Fixed at Bottom -->\n    <MusicPlayer v-if=\"currentTrack\" class=\"pos-fixed pos-b-0 w-100 \"/>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter } from 'vue-router';\nimport MusicPlayer from '../player/MusicPlayer.vue';\nimport SearchForm from '../forms/SearchForm.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\n\n// Icons - Import from icons in the Martyrs framework\nimport IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\nimport IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\nimport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';\n\n// Import store modules\nimport { state as playerState } from '../../store/player.js';\nimport { state as authState, actions as authActions } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst router = useRouter();\n\n// UI state\nconst showUserMenu = ref(false);\n\n// Auth computed properties\nconst isAuthenticated = computed(() => {\n  return authState.access.status === true;\n});\n\nconst user = computed(() => {\n  return authState.user;\n});\n\n// Current track from player store\nconst currentTrack = computed(() => {\n  return playerState.currentTrack;\n});\n\n// Methods\nconst handleSearch = (query) => {\n  router.push({ name: 'music-search', query: { q: query } });\n};\n\n</script>"],"names":["authState","playerState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0DA,UAAM,SAAS,UAAW;AAGL,QAAI,KAAK;AAGN,aAAS,MAAM;AACrC,aAAOA,MAAU,OAAO,WAAW;AAAA,IACrC,CAAC;AAEY,aAAS,MAAM;AAC1B,aAAOA,MAAU;AAAA,IACnB,CAAC;AAGD,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOC,QAAY;AAAA,IACrB,CAAC;AAGD,UAAM,eAAe,CAAC,UAAU;AAC9B,aAAO,KAAK,EAAE,MAAM,gBAAgB,OAAO,EAAE,GAAG,MAAK,GAAI;AAAA,IAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MusicLayout.vue.js","sources":["../../../../../../../src/modules/music/components/layouts/MusicLayout.vue"],"sourcesContent":["<!-- components/layouts/MusicLayout.vue -->\n<template>\n  <div class=\"music-layout flex flex-column flex-nowrap w-100 \">\n    <!-- Header Bar -->\n    <header class=\"flex-child-shrink-0 z-index-3 flex-v-center flex-justify-between flex gap-small pd-small bg-main\">\n \n      <div class=\"music-navigation-buttons flex gap-thin\">\n        <button @click=\"$router.go(-1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronLeft class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n        <button @click=\"$router.go(1)\" class=\"bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro\">\n          <IconChevronRight class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </button>\n      </div>\n    \n      <div class=\"music-search-bar flex-child-1 mn-l-medium mn-r-medium\" v-if=\"$route.name !== 'music-search'\">\n        <SearchForm @search=\"handleSearch\" placeholder=\"Search music...\" />\n      </div>\n      \n      <div class=\"music-user-menu flex-nowrap  flex pos-relative\">\n \n        <router-link :to=\"{ name: 'music-library' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Library\n        </router-link>\n        <router-link :to=\"{ name: 'track-create' }\" class=\" pd-thin w-100 d-block hover-bg-dark radius-small\">\n          Upload\n        </router-link>\n        \n      </div>\n    </header>\n    \n    <!-- Main Content Area -->\n    <main class=\"o-x-hidden\">\n      <router-view></router-view>\n    </main>\n    \n    <!-- Music Player Fixed at Bottom -->\n    <MusicPlayer v-if=\"currentTrack\" class=\"pos-fixed pos-b-0 w-100 \"/>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter } from 'vue-router';\nimport MusicPlayer from '../player/MusicPlayer.vue';\nimport SearchForm from '../forms/SearchForm.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\n\n// Icons - Import from icons in the Martyrs framework\nimport IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\nimport IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\nimport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';\n\n// Import store modules\nimport { state as playerState } from '../../store/player.js';\nimport { state as authState, actions as authActions } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst router = useRouter();\n\n// UI state\nconst showUserMenu = ref(false);\n\n// Auth computed properties\nconst isAuthenticated = computed(() => {\n  return authState.access.status === true;\n});\n\nconst user = computed(() => {\n  return authState.user;\n});\n\n// Current track from player store\nconst currentTrack = computed(() => {\n  return playerState.currentTrack;\n});\n\n// Methods\nconst handleSearch = (query) => {\n  router.push({ name: 'music-search', query: { q: query } });\n};\n\n</script>"],"names":["authState","playerState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0DA,UAAM,SAAS,UAAS;AAGH,QAAI,KAAK;AAGN,aAAS,MAAM;AACrC,aAAOA,MAAU,OAAO,WAAW;AAAA,IACrC,CAAC;AAEY,aAAS,MAAM;AAC1B,aAAOA,MAAU;AAAA,IACnB,CAAC;AAGD,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOC,QAAY;AAAA,IACrB,CAAC;AAGD,UAAM,eAAe,CAAC,UAAU;AAC9B,aAAO,KAAK,EAAE,MAAM,gBAAgB,OAAO,EAAE,GAAG,MAAK,GAAI;AAAA,IAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/pages/Album.vue.cjs

@@ -5,7 +5,7 @@ const vueRouter = require("vue-router");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 const TrackCard = require("../cards/TrackCard.vue.cjs");
 const AlbumCard = require("../cards/AlbumCard.vue.cjs");
-const Button = require("../../../../components/Button/Button.vue2.cjs");
+const Button = require("../../../../components/Button/Button.vue.cjs");
 const Loader = require("../../../../components/Loader/Loader.vue2.cjs");
 const Media = require("../../../../components/Media/Media.vue.cjs");
 const Dropdown = require("../../../../components/Dropdown/Dropdown.vue.cjs");
@@ -14,6 +14,7 @@ const IconLike = require("../../../icons/navigation/IconLike.vue.cjs");
 const IconEllipsis = require("../../../icons/navigation/IconEllipsis.vue.cjs");
 const albums = require("../../store/albums.cjs");
 const player = require("../../store/player.cjs");
+;/* empty css             */
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
 const _hoisted_1 = { class: "album-page" };
 const _hoisted_2 = {
@@ -103,11 +104,10 @@ const _sfc_main = {
       });
     };
     const fetchAlbumData = async () => {
-      var _a, _b;
       isLoading.value = true;
       try {
         await albums.actions.fetchAlbumByUrl(route.params.url);
-        if ((_b = (_a = album.value) == null ? void 0 : _a.artist) == null ? void 0 : _b._id) {
+        if (album.value?.artist?._id) {
           const artistAlbums = await albums.actions.fetchAlbums({
             artist: album.value.artist._id,
             status: "published",

package/dist/martyrs/src/modules/music/components/pages/Album.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Album.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Album.vue"],"sourcesContent":["<!-- components/pages/Album.vue -->\n<template>\n  <div class=\"album-page\">\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n    \n    <div v-else-if=\"!album\" class=\"t-center pd-big\">\n      <h2 class=\"\">Album not found</h2>\n      <p class=\"t-grey t-medium\">The album you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <div v-else>\n      <!-- Album Header -->\n      <div class=\"album-header mn-b-medium flex flex-v-center gap-medium\">\n        <div class=\"album-cover\">\n          <Media \n            :url=\"album.coverUrl || '/assets/placeholder-album.jpg'\" \n            class=\"w-15r h-15r object-fit-cover shadow-lg radius-small\"\n          />\n        </div>\n        \n        <div class=\"album-info\">\n          <div class=\"t-small t-uppercase \">Album</div>\n          <h1 class=\"\">{{ album.title }}</h1>\n          \n          <div class=\"album-meta mn-t-small flex flex-v-center\">\n            <router-link \n              v-if=\"album.artist && album.artist._id\"\n              :to=\"{ name: 'artist', params: { url: album.artist.url } }\"\n              class=\" t-medium hover-t-main\"\n            >\n              {{ getArtistName(album) }}\n            </router-link>\n            <span v-else class=\" t-medium\">{{ getArtistName(album) }}</span>\n            \n            <span class=\"t-grey mn-l-small mn-r-small\">•</span>\n            \n            <span class=\"t-grey\">{{ formatReleaseYear(album.releaseDate) }}</span>\n            \n            <span class=\"t-grey mn-l-small mn-r-small\">•</span>\n            \n            <span class=\"t-grey\">{{ albumTracks.length }} {{ albumTracks.length === 1 ? 'song' : 'songs' }}</span>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Album Actions -->\n      <div class=\"album-actions mn-b-medium flex flex-v-center gap-small\">\n        <Button \n          @click=\"playAlbum\"\n          class=\"play-button bg-main radius-round pd-small flex-v-center flex gap-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\"/>\n          <span class=\"t-black t-medium\">Play</span>\n        </Button>\n        \n        <Button \n          @click=\"toggleFavorite\"\n          class=\"bg-transparent border-none pd-zero\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'\"/>\n        </Button>\n        \n        <Dropdown class=\"pos-relative\">\n          <Button \n            @click=\"showDropdown = !showDropdown\"\n            class=\"bg-transparent border-none pd-zero\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            <IconEllipsis class=\"i-medium\" fill=\"rgb(var(--white))\"/>\n          </Button>\n          \n          <template #content>\n            <ul v-if=\"showDropdown\" class=\"pd-small bg-dark radius-small pos-absolute pos-t-100 pos-r-0 z-index-3 w-max-15r mn-t-thin\">\n              <li class=\"mn-b-thin\">\n                <Button \n                  @click=\"addToQueue\"\n                  class=\"bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Add to Queue</span>\n                </Button>\n              </li>\n              <li>\n                <Button \n                  @click=\"copyLink\"\n                  class=\"bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Copy Link</span>\n                </Button>\n              </li>\n            </ul>\n          </template>\n        </Dropdown>\n      </div>\n      \n      <!-- Album Tracks -->\n      <div class=\"album-tracks\">\n        <Feed\n          :store=\"{\n            read: () => Promise.resolve(albumTracks),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"albumTracks\"\n          :states=\"{\n            empty: {\n              title: 'No tracks in album',\n              description: 'This album appears to be empty',\n              class: 'pd-medium bg-dark-transp-10 radius-medium'\n            }\n          }\"\n          class=\"gap-thin\"\n        >\n          <template #default=\"{ items }\">\n            <TrackCard\n              v-for=\"track in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :showAlbum=\"false\"\n              :showCover=\"false\"\n              class=\"w-100 bg-dark-transp-10 radius-medium\"\n            />\n          </template>\n        </Feed>\n      </div>\n      \n      <!-- Album Info -->\n      <div v-if=\"album.description\" class=\"album-description mn-t-medium pd-medium bg-dark-transp-10 radius-medium\">\n        <h3 class=\" mn-b-small\">About</h3>\n        <p class=\"t-grey\">{{ album.description }}</p>\n      </div>\n      \n      <!-- More from this artist if available -->\n      <div v-if=\"moreFromArtist.length > 0\" class=\"more-from-artist mn-t-medium\">\n        <div class=\"flex-between flex mn-b-small\">\n          <h2 class=\"\">More by {{ getArtistName(album) }}</h2>\n          <router-link \n            v-if=\"album.artist && album.artist._id\"\n            :to=\"{ name: 'artist', params: { url: album.artist.url } }\" \n            class=\"t-main t-small hover-opacity\"\n          >\n            See all\n          </router-link>\n        </div>\n        \n        <div class=\"albums-grid cols-5 mobile:cols-2 gap-small\">\n          <div v-for=\"relatedAlbum in moreFromArtist\" :key=\"relatedAlbum._id\">\n            <AlbumCard :album=\"relatedAlbum\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackCard from '../cards/TrackCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\n\n// Import icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\n\n// Import store modules\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { actions as playerActions } from '../../store/player.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// State\nconst isLoading = ref(true);\nconst isFavorite = ref(false);\nconst showDropdown = ref(false);\nconst moreFromArtist = ref([]);\n\n// Computed properties\nconst album = computed(() => albumsState.currentAlbum);\nconst albumTracks = computed(() => albumsState.currentAlbumTracks);\n\n// Methods\nconst getArtistName = (albumItem) => {\n  if (!albumItem) return 'Unknown Artist';\n  \n  if (albumItem.artist) {\n    if (typeof albumItem.artist === 'object') {\n      return albumItem.artist.name || 'Unknown Artist';\n    }\n    return albumItem.artist;\n  }\n  return 'Unknown Artist';\n};\n\nconst formatReleaseYear = (dateString) => {\n  if (!dateString) return '';\n  return new Date(dateString).getFullYear();\n};\n\nconst playAlbum = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    playerActions.setQueue(albumTracks.value);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // Implement favorite album logic here\n};\n\nconst addToQueue = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    // Add all tracks to queue\n    albumTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n    \n    showDropdown.value = false;\n  }\n};\n\nconst copyLink = () => {\n  const url = window.location.href;\n  navigator.clipboard.writeText(url).then(() => {\n    // Could show a success notification here\n    showDropdown.value = false;\n  });\n};\n\nconst fetchAlbumData = async () => {\n  isLoading.value = true;\n  \n  try {\n    // Fetch album data\n    await albumsActions.fetchAlbumByUrl(route.params.url);\n    \n    // If artist is available, fetch more albums from the same artist\n    if (album.value?.artist?._id) {\n      const artistAlbums = await albumsActions.fetchAlbums({\n        artist: album.value.artist._id,\n        status: 'published',\n        isPublic: true,\n        limit: 5\n      });\n      \n      // Filter out the current album\n      moreFromArtist.value = artistAlbums.filter(a => a._id !== album.value._id);\n    }\n  } catch (error) {\n    console.error('Error fetching album data:', error);\n  } finally {\n    isLoading.value = false;\n  }\n};\n\n// Fetch data when component mounts or URL changes\nonMounted(fetchAlbumData);\n\nwatch(() => route.params.url, (newUrl) => {\n  if (newUrl) {\n    fetchAlbumData();\n  }\n});\n</script>\n\n<style scoped>\n.album-cover {\n  box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);\n}\n</style>"],"names":["useRoute","useRouter","ref","computed","albumsState","playerActions","albumsActions","onMounted","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyLA,UAAM,QAAQA,UAAAA,SAAU;AACTC,cAAS,UAAA;AAGxB,UAAM,YAAYC,IAAG,IAAC,IAAI;AAC1B,UAAM,aAAaA,IAAG,IAAC,KAAK;AAC5B,UAAM,eAAeA,IAAG,IAAC,KAAK;AAC9B,UAAM,iBAAiBA,IAAG,IAAC,EAAE;AAG7B,UAAM,QAAQC,IAAQ,SAAC,MAAMC,OAAW,MAAC,YAAY;AACrD,UAAM,cAAcD,IAAQ,SAAC,MAAMC,OAAW,MAAC,kBAAkB;AAGjE,UAAM,gBAAgB,CAAC,cAAc;AACnC,UAAI,CAAC,UAAW,QAAO;AAEvB,UAAI,UAAU,QAAQ;AACpB,YAAI,OAAO,UAAU,WAAW,UAAU;AACxC,iBAAO,UAAU,OAAO,QAAQ;AAAA,QACtC;AACI,eAAO,UAAU;AAAA,MACrB;AACE,aAAO;AAAA,IACT;AAEA,UAAM,oBAAoB,CAAC,eAAe;AACxC,UAAI,CAAC,WAAY,QAAO;AACxB,aAAO,IAAI,KAAK,UAAU,EAAE,YAAa;AAAA,IAC3C;AAEA,UAAM,YAAY,MAAM;AACtB,UAAI,YAAY,SAAS,YAAY,MAAM,SAAS,GAAG;AACrDC,uBAAc,SAAS,YAAY,KAAK;AAAA,MAC5C;AAAA,IACA;AAEA,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IAEjC;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,YAAY,SAAS,YAAY,MAAM,SAAS,GAAG;AAErD,oBAAY,MAAM,QAAQ,WAAS;AACjCA,iBAAa,QAAC,WAAW,KAAK;AAAA,QACpC,CAAK;AAED,qBAAa,QAAQ;AAAA,MACzB;AAAA,IACA;AAEA,UAAM,WAAW,MAAM;AACrB,YAAM,MAAM,OAAO,SAAS;AAC5B,gBAAU,UAAU,UAAU,GAAG,EAAE,KAAK,MAAM;AAE5C,qBAAa,QAAQ;AAAA,MACzB,CAAG;AAAA,IACH;AAEA,UAAM,iBAAiB,YAAY;;AACjC,gBAAU,QAAQ;AAElB,UAAI;AAEF,cAAMC,OAAa,QAAC,gBAAgB,MAAM,OAAO,GAAG;AAGpD,aAAI,iBAAM,UAAN,mBAAa,WAAb,mBAAqB,KAAK;AAC5B,gBAAM,eAAe,MAAMA,OAAa,QAAC,YAAY;AAAA,YACnD,QAAQ,MAAM,MAAM,OAAO;AAAA,YAC3B,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,OAAO;AAAA,UACf,CAAO;AAGD,yBAAe,QAAQ,aAAa,OAAO,OAAK,EAAE,QAAQ,MAAM,MAAM,GAAG;AAAA,QAC/E;AAAA,MACG,SAAQ,OAAO;AACd,gBAAQ,MAAM,8BAA8B,KAAK;AAAA,MACrD,UAAY;AACR,kBAAU,QAAQ;AAAA,MACtB;AAAA,IACA;AAGAC,QAAS,UAAC,cAAc;AAExBC,QAAK,MAAC,MAAM,MAAM,OAAO,KAAK,CAAC,WAAW;AACxC,UAAI,QAAQ;AACV,uBAAgB;AAAA,MACpB;AAAA,IACA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Album.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Album.vue"],"sourcesContent":["<!-- components/pages/Album.vue -->\n<template>\n  <div class=\"album-page\">\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n    \n    <div v-else-if=\"!album\" class=\"t-center pd-big\">\n      <h2 class=\"\">Album not found</h2>\n      <p class=\"t-grey t-medium\">The album you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <div v-else>\n      <!-- Album Header -->\n      <div class=\"album-header mn-b-medium flex flex-v-center gap-medium\">\n        <div class=\"album-cover\">\n          <Media \n            :url=\"album.coverUrl || '/assets/placeholder-album.jpg'\" \n            class=\"w-15r h-15r object-fit-cover shadow-lg radius-small\"\n          />\n        </div>\n        \n        <div class=\"album-info\">\n          <div class=\"t-small t-uppercase \">Album</div>\n          <h1 class=\"\">{{ album.title }}</h1>\n          \n          <div class=\"album-meta mn-t-small flex flex-v-center\">\n            <router-link \n              v-if=\"album.artist && album.artist._id\"\n              :to=\"{ name: 'artist', params: { url: album.artist.url } }\"\n              class=\" t-medium hover-t-main\"\n            >\n              {{ getArtistName(album) }}\n            </router-link>\n            <span v-else class=\" t-medium\">{{ getArtistName(album) }}</span>\n            \n            <span class=\"t-grey mn-l-small mn-r-small\">•</span>\n            \n            <span class=\"t-grey\">{{ formatReleaseYear(album.releaseDate) }}</span>\n            \n            <span class=\"t-grey mn-l-small mn-r-small\">•</span>\n            \n            <span class=\"t-grey\">{{ albumTracks.length }} {{ albumTracks.length === 1 ? 'song' : 'songs' }}</span>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Album Actions -->\n      <div class=\"album-actions mn-b-medium flex flex-v-center gap-small\">\n        <Button \n          @click=\"playAlbum\"\n          class=\"play-button bg-main radius-round pd-small flex-v-center flex gap-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\"/>\n          <span class=\"t-black t-medium\">Play</span>\n        </Button>\n        \n        <Button \n          @click=\"toggleFavorite\"\n          class=\"bg-transparent border-none pd-zero\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'\"/>\n        </Button>\n        \n        <Dropdown class=\"pos-relative\">\n          <Button \n            @click=\"showDropdown = !showDropdown\"\n            class=\"bg-transparent border-none pd-zero\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            <IconEllipsis class=\"i-medium\" fill=\"rgb(var(--white))\"/>\n          </Button>\n          \n          <template #content>\n            <ul v-if=\"showDropdown\" class=\"pd-small bg-dark radius-small pos-absolute pos-t-100 pos-r-0 z-index-3 w-max-15r mn-t-thin\">\n              <li class=\"mn-b-thin\">\n                <Button \n                  @click=\"addToQueue\"\n                  class=\"bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Add to Queue</span>\n                </Button>\n              </li>\n              <li>\n                <Button \n                  @click=\"copyLink\"\n                  class=\"bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Copy Link</span>\n                </Button>\n              </li>\n            </ul>\n          </template>\n        </Dropdown>\n      </div>\n      \n      <!-- Album Tracks -->\n      <div class=\"album-tracks\">\n        <Feed\n          :store=\"{\n            read: () => Promise.resolve(albumTracks),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"albumTracks\"\n          :states=\"{\n            empty: {\n              title: 'No tracks in album',\n              description: 'This album appears to be empty',\n              class: 'pd-medium bg-dark-transp-10 radius-medium'\n            }\n          }\"\n          class=\"gap-thin\"\n        >\n          <template #default=\"{ items }\">\n            <TrackCard\n              v-for=\"track in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :showAlbum=\"false\"\n              :showCover=\"false\"\n              class=\"w-100 bg-dark-transp-10 radius-medium\"\n            />\n          </template>\n        </Feed>\n      </div>\n      \n      <!-- Album Info -->\n      <div v-if=\"album.description\" class=\"album-description mn-t-medium pd-medium bg-dark-transp-10 radius-medium\">\n        <h3 class=\" mn-b-small\">About</h3>\n        <p class=\"t-grey\">{{ album.description }}</p>\n      </div>\n      \n      <!-- More from this artist if available -->\n      <div v-if=\"moreFromArtist.length > 0\" class=\"more-from-artist mn-t-medium\">\n        <div class=\"flex-between flex mn-b-small\">\n          <h2 class=\"\">More by {{ getArtistName(album) }}</h2>\n          <router-link \n            v-if=\"album.artist && album.artist._id\"\n            :to=\"{ name: 'artist', params: { url: album.artist.url } }\" \n            class=\"t-main t-small hover-opacity\"\n          >\n            See all\n          </router-link>\n        </div>\n        \n        <div class=\"albums-grid cols-5 mobile:cols-2 gap-small\">\n          <div v-for=\"relatedAlbum in moreFromArtist\" :key=\"relatedAlbum._id\">\n            <AlbumCard :album=\"relatedAlbum\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackCard from '../cards/TrackCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\n\n// Import icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\n\n// Import store modules\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { actions as playerActions } from '../../store/player.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// State\nconst isLoading = ref(true);\nconst isFavorite = ref(false);\nconst showDropdown = ref(false);\nconst moreFromArtist = ref([]);\n\n// Computed properties\nconst album = computed(() => albumsState.currentAlbum);\nconst albumTracks = computed(() => albumsState.currentAlbumTracks);\n\n// Methods\nconst getArtistName = (albumItem) => {\n  if (!albumItem) return 'Unknown Artist';\n  \n  if (albumItem.artist) {\n    if (typeof albumItem.artist === 'object') {\n      return albumItem.artist.name || 'Unknown Artist';\n    }\n    return albumItem.artist;\n  }\n  return 'Unknown Artist';\n};\n\nconst formatReleaseYear = (dateString) => {\n  if (!dateString) return '';\n  return new Date(dateString).getFullYear();\n};\n\nconst playAlbum = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    playerActions.setQueue(albumTracks.value);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // Implement favorite album logic here\n};\n\nconst addToQueue = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    // Add all tracks to queue\n    albumTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n    \n    showDropdown.value = false;\n  }\n};\n\nconst copyLink = () => {\n  const url = window.location.href;\n  navigator.clipboard.writeText(url).then(() => {\n    // Could show a success notification here\n    showDropdown.value = false;\n  });\n};\n\nconst fetchAlbumData = async () => {\n  isLoading.value = true;\n  \n  try {\n    // Fetch album data\n    await albumsActions.fetchAlbumByUrl(route.params.url);\n    \n    // If artist is available, fetch more albums from the same artist\n    if (album.value?.artist?._id) {\n      const artistAlbums = await albumsActions.fetchAlbums({\n        artist: album.value.artist._id,\n        status: 'published',\n        isPublic: true,\n        limit: 5\n      });\n      \n      // Filter out the current album\n      moreFromArtist.value = artistAlbums.filter(a => a._id !== album.value._id);\n    }\n  } catch (error) {\n    console.error('Error fetching album data:', error);\n  } finally {\n    isLoading.value = false;\n  }\n};\n\n// Fetch data when component mounts or URL changes\nonMounted(fetchAlbumData);\n\nwatch(() => route.params.url, (newUrl) => {\n  if (newUrl) {\n    fetchAlbumData();\n  }\n});\n</script>\n\n<style scoped>\n.album-cover {\n  box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);\n}\n</style>"],"names":["useRoute","useRouter","ref","computed","albumsState","playerActions","albumsActions","onMounted","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyLA,UAAM,QAAQA,UAAAA,SAAQ;AACPC,cAAAA,UAAS;AAGxB,UAAM,YAAYC,IAAAA,IAAI,IAAI;AAC1B,UAAM,aAAaA,IAAAA,IAAI,KAAK;AAC5B,UAAM,eAAeA,IAAAA,IAAI,KAAK;AAC9B,UAAM,iBAAiBA,IAAAA,IAAI,EAAE;AAG7B,UAAM,QAAQC,IAAAA,SAAS,MAAMC,OAAAA,MAAY,YAAY;AACrD,UAAM,cAAcD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,kBAAkB;AAGjE,UAAM,gBAAgB,CAAC,cAAc;AACnC,UAAI,CAAC,UAAW,QAAO;AAEvB,UAAI,UAAU,QAAQ;AACpB,YAAI,OAAO,UAAU,WAAW,UAAU;AACxC,iBAAO,UAAU,OAAO,QAAQ;AAAA,QAClC;AACA,eAAO,UAAU;AAAA,MACnB;AACA,aAAO;AAAA,IACT;AAEA,UAAM,oBAAoB,CAAC,eAAe;AACxC,UAAI,CAAC,WAAY,QAAO;AACxB,aAAO,IAAI,KAAK,UAAU,EAAE,YAAW;AAAA,IACzC;AAEA,UAAM,YAAY,MAAM;AACtB,UAAI,YAAY,SAAS,YAAY,MAAM,SAAS,GAAG;AACrDC,uBAAc,SAAS,YAAY,KAAK;AAAA,MAC1C;AAAA,IACF;AAEA,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IAEjC;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,YAAY,SAAS,YAAY,MAAM,SAAS,GAAG;AAErD,oBAAY,MAAM,QAAQ,WAAS;AACjCA,iBAAAA,QAAc,WAAW,KAAK;AAAA,QAChC,CAAC;AAED,qBAAa,QAAQ;AAAA,MACvB;AAAA,IACF;AAEA,UAAM,WAAW,MAAM;AACrB,YAAM,MAAM,OAAO,SAAS;AAC5B,gBAAU,UAAU,UAAU,GAAG,EAAE,KAAK,MAAM;AAE5C,qBAAa,QAAQ;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,UAAM,iBAAiB,YAAY;AACjC,gBAAU,QAAQ;AAElB,UAAI;AAEF,cAAMC,OAAAA,QAAc,gBAAgB,MAAM,OAAO,GAAG;AAGpD,YAAI,MAAM,OAAO,QAAQ,KAAK;AAC5B,gBAAM,eAAe,MAAMA,OAAAA,QAAc,YAAY;AAAA,YACnD,QAAQ,MAAM,MAAM,OAAO;AAAA,YAC3B,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,OAAO;AAAA,UACf,CAAO;AAGD,yBAAe,QAAQ,aAAa,OAAO,OAAK,EAAE,QAAQ,MAAM,MAAM,GAAG;AAAA,QAC3E;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,8BAA8B,KAAK;AAAA,MACnD,UAAC;AACC,kBAAU,QAAQ;AAAA,MACpB;AAAA,IACF;AAGAC,QAAAA,UAAU,cAAc;AAExBC,QAAAA,MAAM,MAAM,MAAM,OAAO,KAAK,CAAC,WAAW;AACxC,UAAI,QAAQ;AACV,uBAAc;AAAA,MAChB;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/pages/Album.vue.js

@@ -3,7 +3,7 @@ import { useRoute, useRouter } from "vue-router";
 import _sfc_main$6 from "../../../../components/Feed/Feed.vue.js";
 import TrackCard from "../cards/TrackCard.vue.js";
 import AlbumCard from "../cards/AlbumCard.vue.js";
-import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
 import Loader from "../../../../components/Loader/Loader.vue2.js";
 import Media from "../../../../components/Media/Media.vue.js";
 import _sfc_main$4 from "../../../../components/Dropdown/Dropdown.vue.js";
@@ -12,6 +12,7 @@ import _sfc_main$3 from "../../../icons/navigation/IconLike.vue.js";
 import _sfc_main$5 from "../../../icons/navigation/IconEllipsis.vue.js";
 import { state, actions } from "../../store/albums.js";
 import { actions as actions$1 } from "../../store/player.js";
+/* empty css           */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "album-page" };
 const _hoisted_2 = {
@@ -101,11 +102,10 @@ const _sfc_main = {
       });
     };
     const fetchAlbumData = async () => {
-      var _a, _b;
       isLoading.value = true;
       try {
         await actions.fetchAlbumByUrl(route.params.url);
-        if ((_b = (_a = album.value) == null ? void 0 : _a.artist) == null ? void 0 : _b._id) {
+        if (album.value?.artist?._id) {
           const artistAlbums = await actions.fetchAlbums({
             artist: album.value.artist._id,
             status: "published",