@ozdao/martyrs 0.2.469 → 0.2.471

package/src/modules/music/components/forms/PlaylistForm.vue

@@ -0,0 +1,156 @@
+<!-- components/forms/PlaylistForm.vue -->
+<template>
+  <div class="playlist-form">
+    <form @submit.prevent="submitForm">
+      <div class="form-group mn-b-medium">
+        <label for="title" class="t-white t-medium mn-b-thin d-block">Playlist Name</label>
+        <Field 
+          v-model:field="form.title"
+          id="title"
+          type="text"
+          placeholder="New Playlist"
+          :validation="validationErrors.title"
+          class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+        />
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label for="description" class="t-white t-medium mn-b-thin d-block">Description</label>
+        <Field 
+          v-model:field="form.description"
+          id="description"
+          type="textarea"
+          placeholder="Add an optional description"
+          :validation="validationErrors.description"
+          class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+        />
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label class="t-white t-medium mn-b-thin d-block">Privacy</label>
+        <div class="flex gap-small">
+          <Radio 
+            v-model:radio="form.isPublic"
+            :value="true"
+            name="privacy"
+            label="Public"
+            class="t-white"
+          />
+          <Radio 
+            v-model:radio="form.isPublic"
+            :value="false"
+            name="privacy"
+            label="Private"
+            class="t-white"
+          />
+        </div>
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label class="t-white t-medium mn-b-thin d-block">Cover Image</label>
+        <div class="playlist-cover-upload flex gap-medium">
+          <div class="playlist-cover-preview bg-dark-transp-25 radius-small o-hidden">
+            <Media 
+              v-if="form.coverUrl"
+              :url="form.coverUrl"
+              class="w-10r h-10r object-fit-cover"
+            />
+            <div v-else class="w-10r h-10r flex-center flex">
+              <IconMusic class="i-big" fill="rgb(var(--grey))"/>
+            </div>
+          </div>
+          
+          <UploadImage
+            v-model:photo="form.coverUrl"
+            uploadPath="playlists"
+            class="flex-1 h-10r bg-dark-transp-25 radius-small"
+          />
+        </div>
+      </div>
+      
+      <div class="form-actions t-right">
+        <Button 
+          @click="$emit('cancel')"
+          type="button"
+          class="bg-dark-transp-25 t-white pd-small radius-small mn-r-small hover-bg-dark"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          Cancel
+        </Button>
+        
+        <Button 
+          type="submit"
+          class="bg-main t-white pd-small radius-small hover-scale-1"
+          :submit="submitForm"
+          :showLoader="true" 
+          :showSucces="true"
+          :validation="!!Object.keys(validationErrors).length"
+        >
+          Create Playlist
+        </Button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import Field from '@martyrs/src/components/Field/Field.vue';
+import Radio from '@martyrs/src/components/Radio/Radio.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';
+import Media from '@martyrs/src/components/Media/Media.vue';
+import IconMusic from '@martyrs/src/modules/icons/entities/IconMusic.vue';
+
+// Import auth store and playlists store
+import { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';
+import { actions as playlistsActions } from '../../store/playlists.js';
+
+const emit = defineEmits(['created', 'cancel']);
+
+// Form data
+const form = reactive({
+  title: '',
+  description: '',
+  isPublic: true,
+  coverUrl: '',
+  isCollaborative: false,
+  tracks: []
+});
+
+// Validation
+const validationErrors = reactive({});
+
+// Form submission
+const submitForm = async () => {
+  // Validate form
+  validationErrors.title = !form.title ? { message: 'Playlist name is required' } : null;
+  
+  // If there are validation errors, don't submit
+  if (Object.values(validationErrors).some(error => error !== null)) {
+    return;
+  }
+  
+  // Prepare playlist data
+  const playlistData = {
+    ...form,
+    creator: {
+      type: 'User',
+      target: authState.user._id
+    },
+    owner: {
+      type: 'User',
+      target: authState.user._id
+    }
+  };
+  
+  try {
+    const playlist = await playlistsActions.createPlaylist(playlistData);
+    emit('created', playlist);
+  } catch (error) {
+    console.error('Error creating playlist:', error);
+    // Handle error (could add form-level error message)
+  }
+};
+</script>

package/src/modules/music/components/forms/SearchForm.vue

@@ -0,0 +1,82 @@
+<!-- components/forms/SearchForm.vue -->
+<template>
+  <div class="search-form flex-v-center flex bg-dark-transp-50 pd-thin radius-extra">
+    <IconSearch class="i-small mn-r-small" fill="rgb(var(--grey))"/>
+    <input 
+      ref="searchInput"
+      v-model="searchQuery"
+      type="text"
+      :placeholder="placeholder"
+      class="bg-transparent border-none t-white flex-1"
+      @keydown.enter="handleSearch"
+    />
+    <Button 
+      v-if="searchQuery.length > 0"
+      @click="clearSearch"
+      class="bg-transparent border-none pd-zero"
+      :showLoader="false" 
+      :showSucces="false"
+    >
+      <IconCross class="i-small" fill="rgb(var(--grey))"/>
+    </Button>
+  </div>
+</template>
+
+<script setup>
+import { ref, watchEffect, defineEmits } from 'vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';
+import IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'Search...'
+  },
+  initialQuery: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['search']);
+
+const searchInput = ref(null);
+const searchQuery = ref(props.initialQuery);
+
+const handleSearch = () => {
+  if (searchQuery.value.trim()) {
+    emit('search', searchQuery.value.trim());
+  }
+};
+
+const clearSearch = () => {
+  searchQuery.value = '';
+  searchInput.value.focus();
+};
+
+watchEffect(() => {
+  // Update search query when initialQuery prop changes
+  if (props.initialQuery !== searchQuery.value) {
+    searchQuery.value = props.initialQuery;
+  }
+});
+</script>
+
+<style scoped>
+.search-form {
+  transition: background-color 0.2s ease;
+}
+
+.search-form:focus-within {
+  background-color: rgba(var(--dark), 0.8);
+}
+
+input::placeholder {
+  color: rgba(var(--grey), 0.8);
+}
+
+input:focus {
+  outline: none;
+}
+</style>

package/src/modules/music/components/forms/UploadForm.vue

@@ -0,0 +1,313 @@
+<!-- components/forms/UploadForm.vue -->
+<template>
+  <div class="upload-form">
+    <!-- <form @submit.prevent="submitForm"> -->
+      <div class="form-group mn-b-medium">
+        <label for="title" class="t-white t-medium mn-b-thin d-block">Track Title</label>
+        <Field 
+          v-model:field="form.title"
+          id="title"
+          type="text"
+          placeholder="Track Title"
+          :validation="validationErrors.title"
+          class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+        />
+      </div>
+
+      <div class="form-group mn-b-medium">
+        <label for="artist" class="t-white t-medium mn-b-thin d-block">Artist</label>
+        <Select 
+          v-model:select="form.artist"
+          id="artist"
+          :options="artistOptions"
+          placeholder="Select an artist"
+          :validation="validationErrors.artist"
+          class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+        />
+      </div>
+
+      <div class="form-group mn-b-medium">
+        <label for="album" class="t-white t-medium mn-b-thin d-block">Album (Optional)</label>
+        <Select 
+          v-model:select="form.album"
+          id="album"
+          :options="albumOptions"
+          placeholder="Select an album"
+          class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+        />
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label for="genre" class="t-white t-medium mn-b-thin d-block">Genre</label>
+        <Select 
+          v-model:select="form.genre"
+          id="genre"
+          :options="genreOptions"
+          placeholder="Select a genre"
+          :validation="validationErrors.genre"
+          class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+        />
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label for="releaseDate" class="t-white t-medium mn-b-thin d-block">Release Date</label>
+        <Field 
+          v-model:field="form.releaseDate"
+          id="releaseDate"
+          type="date"
+          :validation="validationErrors.releaseDate"
+          class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+        />
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label for="isExplicit" class="t-white t-medium mn-b-thin d-block">Explicit Content</label>
+        <Checkbox 
+          v-model:checkbox="form.isExplicit"
+          id="isExplicit"
+          label="This track contains explicit content"
+          class="t-white"
+        />
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label for="isPublic" class="t-white t-medium mn-b-thin d-block">Privacy</label>
+        <div class="flex gap-small">
+          <Radio 
+            v-model:radio="form.isPublic"
+            :value="true"
+            name="privacy"
+            label="Public"
+            class="t-white"
+          />
+          <Radio 
+            v-model:radio="form.isPublic"
+            :value="false"
+            name="privacy"
+            label="Private"
+            class="t-white"
+          />
+        </div>
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label class="t-white t-medium mn-b-thin d-block">Cover Image</label>
+        <div class="track-cover-upload flex gap-medium">
+          <div class="track-cover-preview bg-dark-transp-25 radius-small o-hidden">
+            <Media 
+              v-if="form.coverUrl"
+              :url="form.coverUrl"
+              class="w-10r h-10r object-fit-cover"
+            />
+            <div v-else class="w-10r h-10r flex-center flex">
+              <IconMusic class="i-big" fill="rgb(var(--grey))"/>
+            </div>
+          </div>
+          
+          <UploadImage
+            v-model:photo="form.coverUrl"
+            uploadPath="tracks"
+            class="flex-1 h-10r bg-dark-transp-25 radius-small"
+          />
+        </div>
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label class="t-white t-medium mn-b-thin d-block">Track Audio File</label>
+        <Upload
+          v-model:field="form.fileUrl"
+          @file-change="(url) => form.fileUrl = url"
+          type="file"
+          uploadPath="tracks"
+          class="bg-dark-transp-25 radius-small pd-small t-white"
+        />
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label for="lyrics" class="t-white t-medium mn-b-thin d-block">Lyrics (Optional)</label>
+        <Field 
+          v-model:field="form.lyrics"
+          id="lyrics"
+          type="textarea"
+          placeholder="Add lyrics"
+          class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+        />
+      </div>
+      
+      <div class="form-actions t-right">
+        <Button 
+          @click="resetForm"
+          type="button"
+          class="bg-dark-transp-25 t-white pd-small radius-small mn-r-small hover-bg-dark"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          Reset
+        </Button>
+        
+        <Button 
+          type="submit"
+          class="bg-main t-white pd-small radius-small hover-scale-1"
+          :submit="() => submitForm()"
+          :showLoader="true" 
+          :showSucces="true"
+        >
+          Upload Track
+        </Button>
+      </div>
+    <!-- </form> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import Field from '@martyrs/src/components/Field/Field.vue';
+import Select from '@martyrs/src/components/Select/Select.vue';
+import Radio from '@martyrs/src/components/Radio/Radio.vue';
+import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Upload from '@martyrs/src/components/Upload/Upload.vue';
+import UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';
+import Media from '@martyrs/src/components/Media/Media.vue';
+import IconMusic from '@martyrs/src/modules/icons/entities/IconMusic.vue';
+
+// Import stores
+import { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';
+import { actions as tracksActions } from '../../store/tracks.js';
+import { state as artistsState, actions as artistsActions } from '../../store/artists.js';
+import { state as albumsState, actions as albumsActions } from '../../store/albums.js';
+
+const emit = defineEmits(['uploaded']);
+
+// Form data
+const form = reactive({
+  title: '',
+  artist: null,
+  album: null,
+  genre: [],
+  releaseDate: new Date().toISOString().split('T')[0],
+  isExplicit: false,
+  isPublic: true,
+  coverUrl: '',
+  fileUrl: '',
+  lyrics: ''
+});
+
+// Options for dropdowns
+const artistOptions = ref([]);
+const albumOptions = ref([]);
+const genreOptions = ref([
+  'Pop', 'Rock', 'Hip Hop', 'R&B', 'Jazz', 'Electronic', 'Classical', 'Country', 'Folk', 'Blues'
+]);
+
+// Validation
+const validationErrors = reactive({});
+
+/// Form submission with improved error handling
+const submitForm = async () => {
+  // Validate form (I'm keeping this commented out as in your original code)
+  // validationErrors.title = !form.title ? { message: 'Track title is required' } : null;
+  // validationErrors.artist = !form.artist ? { message: 'Artist is required' } : null;
+  // validationErrors.genre = !form.genre || form.genre.length === 0 ? { message: 'Genre is required' } : null;
+  // validationErrors.fileUrl = !form.fileUrl ? { message: 'Audio file is required' } : null;
+  
+  // // If there are validation errors, don't submit
+  // if (Object.values(validationErrors).some(error => error !== null)) {
+  //   console.log(error)
+  //   return;
+  // }
+  
+  console.log('Submitting form data:', form);
+  
+  // Check if the API URL is correct
+  console.log('API URL:', process.env.API_URL);
+  
+  // Prepare track data
+  const trackData = {
+    ...form,
+    creator: {
+      type: 'user', // Make sure type matches what's expected on the server (lowercase)
+      target: authState.user._id
+    },
+    owner: {
+      type: 'user', // Make sure type matches what's expected on the server (lowercase)
+      target: authState.user._id
+    },
+    status: 'draft' // Add a default status if needed
+  };
+  
+  try {
+    console.log('Sending track data to API:', trackData);
+    
+    // Directly use the Store instance to debug the issue
+    // This bypasses the action layer to see if the issue is there
+    // const directApiResult = await trackStore.create(trackData);
+    // console.log('Direct API result:', directApiResult);
+    
+    // If the direct approach works, try the normal action
+    const track = await tracksActions.createTrack(trackData);
+    console.log('Track created successfully:', track);
+    
+    emit('uploaded', track);
+    resetForm();
+  } catch (error) {
+    console.error('Error uploading track:', error);
+    
+    // Add more detailed error logging
+    if (error.status) {
+      console.error(`HTTP Status: ${error.status}`);
+    }
+    if (error.message) {
+      console.error(`Error message: ${error.message}`);
+    }
+    if (error.stack) {
+      console.error(`Stack trace: ${error.stack}`);
+    }
+    
+    // Show error to user
+    // setError({
+    //   message: 'Failed to upload track: ' + (error.message || 'Unknown error'),
+    //   errorCode: error.errorCode || 'TRACK_UPLOAD_FAILED'
+    // });
+  }
+};
+const resetForm = () => {
+  Object.keys(form).forEach(key => {
+    if (key === 'releaseDate') {
+      form[key] = new Date().toISOString().split('T')[0];
+    } else if (key === 'isPublic') {
+      form[key] = true;
+    } else if (key === 'isExplicit') {
+      form[key] = false;
+    } else {
+      form[key] = '';
+    }
+  });
+  
+  // Clear validation errors
+  Object.keys(validationErrors).forEach(key => {
+    validationErrors[key] = null;
+  });
+};
+
+// Fetch artists and albums for dropdowns
+onMounted(async () => {
+  try {
+    // Fetch user's artists
+    const userArtists = await artistsActions.fetchUserArtists(authState.user._id);
+    artistOptions.value = userArtists.map(artist => ({
+      name: artist.name,
+      value: artist._id
+    }));
+    
+    // Fetch user's albums
+    const userAlbums = await albumsActions.fetchUserAlbums(authState.user._id);
+    albumOptions.value = userAlbums.map(album => ({
+      name: album.title,
+      value: album._id
+    }));
+  } catch (error) {
+    console.error('Error fetching artists and albums:', error);
+  }
+});
+</script>

package/src/modules/music/components/layouts/MusicLayout.vue

@@ -0,0 +1,137 @@
+<!-- components/layouts/MusicLayout.vue -->
+<template>
+  <div class="music-layout flex flex-nowrap o-hidden w-100 h-100">
+    <!-- Main Content -->
+    <div class="flex-child-1 flex flex-column h-100 o-hidden">
+      <!-- Header Bar -->
+      <header class="flex-child-shrink-0 z-index-3 bg-dark flex-v-center flex-justify-between flex gap-small pd-small br-b br-solid br-dark-transp-20">
+        <div class="flex-v-center flex gap-small">
+          <div class="music-navigation-buttons flex gap-thin">
+            <button @click="$router.go(-1)" class="bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro">
+              <IconChevronLeft class="i-small" fill="rgb(var(--white))"/>
+            </button>
+            <button @click="$router.go(1)" class="bg-black radius-extra flex-center flex aspect-1x1 i-medium cursor-pointer hover-bg-dark pd-micro">
+              <IconChevronRight class="i-small" fill="rgb(var(--white))"/>
+            </button>
+          </div>
+          
+          <h2 v-if="$route.meta.title" class="t-white">{{ $route.meta.title }}</h2>
+        </div>
+        
+        <div class="music-search-bar flex-child-1 mn-l-medium mn-r-medium" v-if="$route.name !== 'music-search'">
+          <SearchForm @search="handleSearch" placeholder="Search music..." />
+        </div>
+        
+        <div class="music-user-menu pos-relative">
+          <Button 
+            v-if="isAuthenticated"
+            @click="showUserMenu = !showUserMenu" 
+            class="bg-black radius-extra flex-v-center flex pd-thin hover-bg-dark"
+            :showLoader="false"
+            :showSucces="false"
+          >
+            <span v-if="user && user.profile" class="t-nowrap t-medium t-truncate w-max-10r mn-r-thin">{{ user.profile.name }}</span>
+            <IconProfile class="i-medium" fill="rgb(var(--white))"/>
+          </Button>
+          
+          <!-- User dropdown menu -->
+          <Dropdown 
+            v-if="showUserMenu" 
+            class="pos-absolute pos-t-100 pos-r-0 mn-t-thin pd-small bg-dark radius-small z-index-5"
+            :align="'right'"
+          >
+            <ul class="w-max-15r">
+              <li class="mn-b-thin w-100">
+                <router-link :to="{ name: 'music-library' }" class="t-white pd-thin w-100 d-block hover-bg-dark-medium radius-small">
+                  My Library
+                </router-link>
+              </li>
+              <li class="mn-b-thin w-100">
+                <router-link :to="{ name: 'music-upload' }" class="t-white pd-thin w-100 d-block hover-bg-dark-medium radius-small">
+                  Upload Music
+                </router-link>
+              </li>
+              <li class="w-100">
+                <button @click="logout" class="t-white bg-transparent border-none w-100 t-left pd-thin hover-bg-dark-medium radius-small cursor-pointer">
+                  Logout
+                </button>
+              </li>
+            </ul>
+          </Dropdown>
+          
+          <Button 
+            v-else 
+            @click="login" 
+            class="bg-main radius-extra pd-small t-white hover-scale-1"
+            :showLoader="false"
+            :showSucces="false"
+          >
+            Login
+          </Button>
+        </div>
+      </header>
+      
+      <!-- Main Content Area -->
+      <main class="flex-child-1 o-y-scroll o-x-hidden bg-black-transp-95">
+        <div class="mn-small">
+          <router-view></router-view>
+        </div>
+      </main>
+      
+      <!-- Music Player Fixed at Bottom -->
+      <MusicPlayer v-if="currentTrack" class="flex-child-shrink-0"/>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import MusicPlayer from '../player/MusicPlayer.vue';
+import SearchForm from '../forms/SearchForm.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';
+
+// Icons - Import from icons in the Martyrs framework
+import IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';
+import IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';
+import IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';
+
+// Import store modules
+import { state as playerState } from '../../store/player.js';
+import { state as authState, actions as authActions } from '@martyrs/src/modules/auth/views/store/auth.js';
+
+const router = useRouter();
+
+// UI state
+const showUserMenu = ref(false);
+
+// Auth computed properties
+const isAuthenticated = computed(() => {
+  return authState.access.status === true;
+});
+
+const user = computed(() => {
+  return authState.user;
+});
+
+// Current track from player store
+const currentTrack = computed(() => {
+  return playerState.currentTrack;
+});
+
+// Methods
+const handleSearch = (query) => {
+  router.push({ name: 'music-search', query: { q: query } });
+};
+
+const login = () => {
+  router.push({ name: 'Sign In', query: { redirect: router.currentRoute.value.fullPath } });
+};
+
+const logout = async () => {
+  await authActions.logout();
+  showUserMenu.value = false;
+  router.push({ name: 'music-home' });
+};
+</script>