@meeovi/layer-lists 1.0.2 → 1.0.4

package/app/components/lists/update-list.vue

@@ -1,192 +0,0 @@
-<template>
-    <div>
-        <v-row justify="center">
-            <v-card>
-                <form @submit.prevent="handleSubmit">
-                    <v-toolbar dark color="primary">
-                        <v-btn icon dark @click="dialog = false">
-                            <v-icon icon="fas:fa fa-circle-xmark"></v-icon>
-                        </v-btn>
-                        <v-card-title>
-                            <span class="text-h6">Create a new Space</span>
-                        </v-card-title>
-                    </v-toolbar>
-                    <v-card-text>
-                        <v-container>
-                            <v-row>
-                                <v-col cols="12">
-                                    <v-text-field v-model="listData.name" label="List Name" required></v-text-field>
-                                </v-col>
-                                <v-col cols="6">
-                                    <v-select v-model="listData.type" label="Type"
-                                        :items="['List', 'Registry', 'Playlist', 'Todo']"></v-select>
-                                </v-col>
-                                <v-col cols="6">
-                                    <v-select v-model="listData.status" label="Status"
-                                        :items="['Public', 'Private']"></v-select>
-                                </v-col>
-                                <v-col cols="12">
-                                    <v-file-input @change="handleImageUpload" clearable
-                                        density="compact" prepend-icon="fas:fa fa-image" accept="image/*"
-                                        label="Image for List" variant="solo-inverted" />
-                                </v-col>
-                                <v-col cols="12">
-                                    <v-textarea v-model="listData.description" label="List Description"></v-textarea>
-                                </v-col>
-                                <v-col cols="12">
-                                    <v-card title="Choose a Product for your List">
-                                        <v-card-text>
-                                            <v-text-field density="compact" variant="solo"
-                                                label="Search Meeovi for products" append-inner-icon="fas:fa fa-search"
-                                                single-line hide-details></v-text-field>
-                                            <div class="d-flex pa-4">
-                                                <v-checkbox-btn v-model="includeFiles" class="pe-2" color="orange">
-                                                </v-checkbox-btn>
-                                                <!--<NuxtLink :to="`/product/${products.id}`">
-                                        <v-card class="ma-4" height="580" width="250" @click="toggle">
-                                            <NuxtImg loading="lazy" class="align-end text-white" height="280"
-                                                :src="`${products.featuredAsset.preview}`" :alt="products.name" cover />
-
-                                            <v-card-title class="pt-4">
-                                                {{ products.name }}
-                                            </v-card-title>
-
-                                            <v-card-text>
-                                                <div>Sku: {{ products.variants.sku }}</div>
-                                            </v-card-text>
-
-                                            <v-card-actions>
-                                                <v-card-title>$ {{ products.variants.price }}
-                                                </v-card-title>
-                                            </v-card-actions>
-                                            <div class="d-flex fill-height align-center justify-center">
-                                                <v-scale-transition>
-                                                    <v-icon v-if="isSelected" color="white" size="48"
-                                                        icon="mdi-close-circle-outline"></v-icon>
-                                                </v-scale-transition>
-                                            </div>
-                                        </v-card>
-                                    </NuxtLink>-->
-                                            </div>
-                                        </v-card-text>
-                                    </v-card>
-                                </v-col>
-                            </v-row>
-                        </v-container>
-                        <small>*indicates required field</small>
-                    </v-card-text>
-                    <v-divider class="mt-12"></v-divider>
-                    <v-card-actions>
-                        <v-btn color="blue-darken-1" variant="text" type="submit" @click="resetForm = false">
-                            Reset
-                        </v-btn>
-                        <v-btn color="blue-darken-1" variant="text" type="submit">
-                            Update
-                        </v-btn>
-                    </v-card-actions>
-                </form>
-            </v-card>
-        </v-row>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import uploadFiles from '~//composables/uploadFiles';
-import updateList from '~/app/composables/lists/updateList';
-
-const route = useRoute();
-const router = useRouter();
-
-const listData = ref({
-    id: '', // Add this to store the list ID
-    name: '',
-    type: '',
-    status: '',
-    description: '',
-    image: null,
-});
-
-const dialog = ref(false);
-const includeFiles = ref(true);
-const imageFile = ref(null);
-const loading = ref(false);
-
-// Function to fetch existing list data
-const fetchListData = async () => {
-    try {
-        const { $directus, $readItem } = useNuxtApp();
-        const listId = route.params.id; // Assuming you're passing the ID in the route
-        const response = await $directus.request(readItem('lists', listId));
-        
-        // Populate the form with existing data
-        listData.value = {
-            id: response.id,
-            name: response.name,
-            type: response.type,
-            status: response.status,
-            description: response.description,
-            image: response.image
-        };
-    } catch (error) {
-        console.error('Error fetching list:', error);
-    }
-};
-
-// Load existing data when component mounts
-onMounted(() => {
-    if (route.params.id) {
-        fetchListData();
-    }
-});
-
-const handleImageUpload = (event) => {
-    imageFile.value = event.target.files[0];
-};
-
-const resetForm = () => {
-    listData.value = {
-        name: '',
-        type: '',
-        status: '',
-        description: '',
-        image: null,
-    };
-    imageFile.value = null;
-};
-
-const handleSubmit = async () => {
-    try {
-        loading.value = true;
-
-        // Handle image upload if there's a new image
-        if (imageFile.value) {
-            const uploadedFiles = await uploadFiles({
-                imageFile: imageFile.value,
-            });
-            listData.value.image = uploadedFiles.imageId;
-        }
-
-        // Update the list
-        const updatedList = await updateList(route.params.id, {
-            name: listData.value.name,
-            type: listData.value.type,
-            status: listData.value.status,
-            description: listData.value.description,
-            image: listData.value.image,
-        });
-
-        console.log('List updated successfully:', updatedList);
-        
-        // Show success message (you can implement your preferred notification system)
-        alert('List updated successfully');
-
-    } catch (error) {
-        console.error('Error updating list:', error);
-        alert('Error updating list: ' + error.message);
-    } finally {
-        loading.value = false;
-    }
-};
-</script>

package/app/components/media/MediaPlayer.vue

@@ -1,302 +0,0 @@
-<template>
-  <v-card class="media-player">
-    <div v-if="currentMedia">
-      <!-- Video Player -->
-      <video
-        v-if="currentMedia.media_type === 'video'"
-        ref="videoPlayer"
-        :src="currentMedia.url"
-        :poster="currentMedia.thumbnail"
-        controls
-        @loadedmetadata="onMediaLoaded"
-        @timeupdate="onTimeUpdate"
-        @ended="onMediaEnded"
-        class="w-100"
-      />
-      
-      <!-- Audio Player -->
-      <div v-else-if="currentMedia.media_type === 'audio'" class="audio-player">
-        <div class="d-flex align-center pa-4">
-          <v-img
-            :src="currentMedia.thumbnail || '/default-audio.png'"
-            width="80"
-            height="80"
-            class="rounded me-4"
-          />
-          <div class="grow">
-            <h3 class="text-h6">{{ currentMedia.title }}</h3>
-            <p class="text-body-2 text-medium-emphasis">
-              {{ currentMedia.metadata?.artist || 'Unknown Artist' }}
-            </p>
-          </div>
-        </div>
-        
-        <audio
-          ref="audioPlayer"
-          :src="currentMedia.url"
-          @loadedmetadata="onMediaLoaded"
-          @timeupdate="onTimeUpdate"
-          @ended="onMediaEnded"
-          style="display: none;"
-        />
-      </div>
-    </div>
-
-    <!-- Controls -->
-    <v-card-actions class="px-4 py-2">
-      <v-btn
-        icon
-        @click="previousTrack"
-        :disabled="currentIndex === 0"
-      >
-        <v-icon>mdi-skip-previous</v-icon>
-      </v-btn>
-      
-      <v-btn
-        icon
-        @click="togglePlayPause"
-        color="primary"
-        size="large"
-      >
-        <v-icon>{{ isPlaying ? 'mdi-pause' : 'mdi-play' }}</v-icon>
-      </v-btn>
-      
-      <v-btn
-        icon
-        @click="nextTrack"
-        :disabled="currentIndex === playlist.length - 1"
-      >
-        <v-icon>mdi-skip-next</v-icon>
-      </v-btn>
-      
-      <v-spacer />
-      
-      <span class="text-caption">{{ formatTime(currentTime) }}</span>
-      <v-slider
-        v-model="currentTime"
-        :max="duration"
-        @update:model-value="seekTo"
-        class="mx-4"
-        style="min-width: 200px;"
-        hide-details
-      />
-      <span class="text-caption">{{ formatTime(duration) }}</span>
-      
-      <v-spacer />
-      
-      <v-btn
-        icon
-        @click="toggleShuffle"
-        :color="shuffle ? 'primary' : 'default'"
-      >
-        <v-icon>mdi-shuffle</v-icon>
-      </v-btn>
-      
-      <v-btn
-        icon
-        @click="toggleRepeat"
-        :color="repeat !== 'none' ? 'primary' : 'default'"
-      >
-        <v-icon>{{ repeatIcon }}</v-icon>
-      </v-btn>
-      
-      <v-btn icon @click="showPlaylist = !showPlaylist">
-        <v-icon>mdi-playlist-music</v-icon>
-      </v-btn>
-    </v-card-actions>
-
-    <!-- Playlist -->
-    <v-expand-transition>
-      <div v-show="showPlaylist">
-        <v-divider />
-        <v-list class="playlist-list" max-height="300" style="overflow-y: auto;">
-          <v-list-item
-            v-for="(item, index) in playlist"
-            :key="item.id"
-            @click="playTrack(index)"
-            :active="index === currentIndex"
-          >
-            <template v-slot:prepend>
-              <v-img
-                :src="item.thumbnail || '/default-audio.png'"
-                width="40"
-                height="40"
-                class="rounded me-3"
-              />
-            </template>
-            
-            <v-list-item-title>{{ item.title }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ item.metadata?.artist || 'Unknown Artist' }}
-            </v-list-item-subtitle>
-            
-            <template v-slot:append>
-              <span class="text-caption">{{ formatTime(item.duration) }}</span>
-            </template>
-          </v-list-item>
-        </v-list>
-      </div>
-    </v-expand-transition>
-  </v-card>
-</template>
-
-<script setup>
-const props = defineProps({
-  playlist: {
-    type: Array,
-    required: true
-  },
-  autoplay: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const currentIndex = ref(0)
-const isPlaying = ref(false)
-const currentTime = ref(0)
-const duration = ref(0)
-const shuffle = ref(false)
-const repeat = ref('none') // 'none', 'one', 'all'
-const showPlaylist = ref(false)
-
-const videoPlayer = ref(null)
-const audioPlayer = ref(null)
-
-const currentMedia = computed(() => {
-  return props.playlist[currentIndex.value] || null
-})
-
-const currentPlayer = computed(() => {
-  return currentMedia.value?.media_type === 'video' ? videoPlayer.value : audioPlayer.value
-})
-
-const repeatIcon = computed(() => {
-  switch (repeat.value) {
-    case 'one': return 'mdi-repeat-once'
-    case 'all': return 'mdi-repeat'
-    default: return 'mdi-repeat-off'
-  }
-})
-
-const togglePlayPause = () => {
-  if (!currentPlayer.value) return
-  
-  if (isPlaying.value) {
-    currentPlayer.value.pause()
-  } else {
-    currentPlayer.value.play()
-  }
-  isPlaying.value = !isPlaying.value
-}
-
-const playTrack = (index) => {
-  currentIndex.value = index
-  nextTick(() => {
-    if (currentPlayer.value) {
-      currentPlayer.value.play()
-      isPlaying.value = true
-    }
-  })
-}
-
-const nextTrack = () => {
-  if (shuffle.value) {
-    currentIndex.value = Math.floor(Math.random() * props.playlist.length)
-  } else if (currentIndex.value < props.playlist.length - 1) {
-    currentIndex.value++
-  } else if (repeat.value === 'all') {
-    currentIndex.value = 0
-  }
-  
-  nextTick(() => {
-    if (currentPlayer.value && isPlaying.value) {
-      currentPlayer.value.play()
-    }
-  })
-}
-
-const previousTrack = () => {
-  if (currentIndex.value > 0) {
-    currentIndex.value--
-  } else if (repeat.value === 'all') {
-    currentIndex.value = props.playlist.length - 1
-  }
-  
-  nextTick(() => {
-    if (currentPlayer.value && isPlaying.value) {
-      currentPlayer.value.play()
-    }
-  })
-}
-
-const seekTo = (time) => {
-  if (currentPlayer.value) {
-    currentPlayer.value.currentTime = time
-  }
-}
-
-const toggleShuffle = () => {
-  shuffle.value = !shuffle.value
-}
-
-const toggleRepeat = () => {
-  const modes = ['none', 'all', 'one']
-  const currentIndex = modes.indexOf(repeat.value)
-  repeat.value = modes[(currentIndex + 1) % modes.length]
-}
-
-const onMediaLoaded = () => {
-  if (currentPlayer.value) {
-    duration.value = currentPlayer.value.duration || 0
-  }
-}
-
-const onTimeUpdate = () => {
-  if (currentPlayer.value) {
-    currentTime.value = currentPlayer.value.currentTime || 0
-  }
-}
-
-const onMediaEnded = () => {
-  isPlaying.value = false
-  
-  if (repeat.value === 'one') {
-    currentPlayer.value.currentTime = 0
-    currentPlayer.value.play()
-    isPlaying.value = true
-  } else {
-    nextTrack()
-  }
-}
-
-const formatTime = (seconds) => {
-  if (!seconds || isNaN(seconds)) return '0:00'
-  const mins = Math.floor(seconds / 60)
-  const secs = Math.floor(seconds % 60)
-  return `${mins}:${secs.toString().padStart(2, '0')}`
-}
-
-onMounted(() => {
-  if (props.autoplay && currentMedia.value) {
-    nextTick(() => {
-      togglePlayPause()
-    })
-  }
-})
-</script>
-
-<style scoped>
-.media-player {
-  max-width: 100%;
-}
-
-.audio-player {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-}
-
-.playlist-list {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-</style>