@meeovi/layer-lists 1.0.3 → 1.0.5

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>

package/app/components/partials/addtolist.vue

@@ -1,233 +0,0 @@
-<template>
-    <div class="text-center">
-        <v-dialog v-model="dialog" max-width="600">
-            <template v-slot:activator="{ props: activatorProps }">
-                <v-btn prepend-icon="fas:fa fa-plus" text="Add to List" color="primary" size="large"
-                    v-bind="activatorProps"></v-btn>
-            </template>
-
-            <v-card>
-                <v-tabs v-model="tab" bg-color="primary">
-                    <v-tab value="one">Add to List</v-tab>
-                    <v-tab value="two">Create List</v-tab>
-                </v-tabs>
-
-                <v-card-text>
-                    <v-tabs-window v-model="tab">
-                        <v-tabs-window-item value="one">
-                            <v-card>
-                                <v-card-title class="text-h6">
-                                    Add this Product to your List
-                                </v-card-title>
-                                <v-card-text>
-                                    <v-row dense>
-                                        <v-col cols="12" sm="6">
-                                            <v-autocomplete 
-                                                v-model="selectedLists" 
-                                                :items="lists" 
-                                                item-title="name"
-                                                item-value="id" 
-                                                label="Choose a List" 
-                                                auto-select-first 
-                                                multiple
-                                                chips
-                                                :loading="loading"
-                                                :disabled="loading"
-                                            />
-                                        </v-col>
-                                    </v-row>
-
-                                    <div v-if="productPreview" class="mt-4">
-                                        <v-img :src="productPreview.image" height="100" cover class="rounded" />
-                                        <div class="mt-2 text-subtitle-1">{{ productPreview.name }}</div>
-                                        <div class="text-caption text-grey">{{ productPreview.sku }}</div>
-                                    </div>
-
-                                    <v-alert
-                                        v-if="error"
-                                        type="error"
-                                        class="mt-4"
-                                    >
-                                        {{ error }}
-                                    </v-alert>
-                                </v-card-text>
-
-                                <v-divider></v-divider>
-
-                                <v-card-actions>
-                                    <v-spacer></v-spacer>
-                                    <v-btn text="Close" variant="plain" @click="closeDialog"></v-btn>
-                                    <v-btn 
-                                        color="primary" 
-                                        text="Save" 
-                                        variant="tonal" 
-                                        @click="saveToLists"
-                                        :loading="loading"
-                                        :disabled="loading || selectedLists.length === 0"
-                                    >
-                                        Save
-                                    </v-btn>
-                                </v-card-actions>
-                            </v-card>
-                        </v-tabs-window-item>
-
-                        <v-tabs-window-item value="two">
-                            <createlist @list-created="handleListCreated" />
-                        </v-tabs-window-item>
-                    </v-tabs-window>
-                </v-card-text>
-            </v-card>
-        </v-dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-
-// Define props with Magento product structure
-const props = defineProps({
-    product: {
-        type: Object,
-        required: true,
-        validator: (value) => {
-            return value && value.uid && value.name && value.sku;
-        }
-    }
-});
-
-const emit = defineEmits(['item-added']);
-
-const { $directus } = useNuxtApp();
-const user = useSupabaseAuth();
-
-const dialog = ref(false);
-const tab = ref('one');
-const lists = ref([]);
-const selectedLists = ref([]);
-const loading = ref(false);
-const error = ref(null);
-
-// Fetch user's lists from Directus
-const fetchLists = async () => {
-    if (!user.value) return;
-    
-    loading.value = true;
-    error.value = null;
-    
-    try {
-        const response = await $directus.items('lists').readItems({
-            filter: {
-                user: {
-                    _eq: user.value.id
-                }
-            },
-            fields: ['id', 'name', 'description']
-        });
-        lists.value = response.data;
-    } catch (err) {
-        console.error('Error fetching lists:', err);
-        error.value = 'Failed to load your lists. Please try again.';
-    } finally {
-        loading.value = false;
-    }
-};
-
-onMounted(fetchLists);
-
-// Save product to selected lists
-const saveToLists = async () => {
-    if (!props.product?.uid || selectedLists.value.length === 0) return;
-
-    loading.value = true;
-    error.value = null;
-
-    try {
-        // Check if product already exists in any of the selected lists
-        const existingItems = await Promise.all(
-            selectedLists.value.map(listId => 
-                isProductInList(listId, props.product.uid)
-            )
-        );
-
-        // Filter out lists where the product already exists
-        const newLists = selectedLists.value.filter((_, index) => !existingItems[index]);
-
-        if (newLists.length === 0) {
-            error.value = 'This product is already in all selected lists.';
-            return;
-        }
-
-        // Create list items for each selected list
-        const promises = newLists.map(listId => {
-            return $directus.items('list_items').createItem({
-                list: listId,
-                magento_product_uid: props.product.uid,
-                magento_product_sku: props.product.sku,
-                magento_product_name: props.product.name,
-                magento_product_image: props.product.image?.url || null,
-                date_added: new Date().toISOString()
-            });
-        });
-
-        await Promise.all(promises);
-        
-        // Emit event for parent component
-        emit('item-added', {
-            product: props.product,
-            lists: newLists
-        });
-
-        closeDialog();
-    } catch (err) {
-        console.error('Error saving to lists:', err);
-        error.value = 'Failed to add product to lists. Please try again.';
-    } finally {
-        loading.value = false;
-    }
-};
-
-const closeDialog = () => {
-    dialog.value = false;
-    selectedLists.value = [];
-    error.value = null;
-};
-
-// Handle newly created list
-const handleListCreated = (newList) => {
-    lists.value.push(newList);
-    selectedLists.value = [newList.id];
-    tab.value = 'one';
-};
-
-// Computed property for product preview
-const productPreview = computed(() => {
-    if (!props.product) return null;
-    
-    return {
-        image: props.product.image?.url || '',
-        name: props.product.name,
-        sku: props.product.sku
-    };
-});
-
-const isProductInList = async (listId, productUid) => {
-    try {
-        const response = await $directus.items('list_items').readItems({
-            filter: {
-                list: { _eq: listId },
-                magento_product_uid: { _eq: productUid }
-            }
-        });
-        return response.data.length > 0;
-    } catch (error) {
-        console.error('Error checking product in list:', error);
-        return false;
-    }
-};
-</script>
-
-<style scoped>
-.v-card {
-    border-radius: 8px;
-}
-</style>

package/app/components/partials/createListBtn.vue

@@ -1,95 +0,0 @@
-<template>
-  <div>
-    <v-dialog v-model="dialogOpen" justify="center">
-      <template v-slot:activator="{ props }">
-        <v-btn size="m" variant="tertiary" v-bind="props">
-          <SfIconFavorite size="m" />
-          Add to list
-        </v-btn>
-      </template>
-
-      <v-card max-width="500px">
-        <v-tabs v-model="tab" bg-color="info">
-          <v-tab value="one">Your Lists</v-tab>
-          <!--<v-tab value="two">Create a List</v-tab>
-          <v-tab value="three">Item Three</v-tab>-->
-        </v-tabs>
-
-        <v-card-text>
-          <v-tabs-window v-model="tab">
-            <v-tabs-window-item value="one">
-              <v-row>
-                <v-col cols="12" v-for="list in lists" :key="list.id">
-                  <strong>
-                    <p style="text-align: center;">Save</p>
-                  </strong>
-                  <v-list lines="two">
-                    <v-list-item :title="list?.name" :subtitle="list?.type"
-                      :prepend-avatar="`${$directus.url}/assets/${list?.image?.filename_disk}`"
-                      @click="saveProductToList(list.id)" style="cursor: pointer;" :disabled="loading">
-                      <template v-slot:append>
-                        <v-progress-circular v-if="loading" indeterminate size="24"></v-progress-circular>
-                        <v-icon v-else icon="fas:fa fa-plus"></v-icon>
-                      </template>
-                    </v-list-item>
-                  </v-list>
-                </v-col>
-              </v-row>
-
-              <createlist />
-            </v-tabs-window-item>
-
-            <v-tabs-window-item value="two">
-            </v-tabs-window-item>
-
-            <v-tabs-window-item value="three">
-              Three
-            </v-tabs-window-item>
-          </v-tabs-window>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script setup>
-  import {
-    ref,
-    onMounted
-  } from 'vue'
-  import {
-    
-    SfIconFavorite
-  } from '@storefront-ui/vue'
-  import list from '../features/lists.vue'
-  import createlist from '../lists/add-list.vue'
-
-  const loading = ref(false)
-
-  const route = useRoute();
-  const dialogOpen = ref(false);
-  const tab = ref(null);
-  const {
-    $directus,
-    $readItems,
-    $createItem
-  } = useNuxtApp()
-
-  const {
-    data: lists
-  } = await useAsyncData('lists', () => {
-    return $directus.request($readItems('lists', {
-      filter: {
-        status: {
-          _eq: 'Public'
-        }
-      }
-    }))
-  })
-</script>
-
-<style scoped>
-  .v-dialog {
-    border-radius: 8px;
-  }
-</style>

package/app/components/partials/listBtn.vue

@@ -1,35 +0,0 @@
-<template>
-    <div>
-        <v-dialog max-width="500">
-            <template v-slot:activator="{ props: activatorProps }">
-                <v-btn v-bind="activatorProps" prepend-icon="fas:fa fa-plus" color="white" text="Create a List"
-                    variant="text"></v-btn>
-            </template>
-
-            <template v-slot:default="{ isActive }">
-                <div v-if="target.type === 'product'">
-                    <addtolist :target="productId.id" />
-                </div>
-
-                <div v-if="target.type === 'post'">
-                    <addtolist :target="postId.id" />
-                </div>
-            </template>
-        </v-dialog>
-    </div>
-</template>
-
-<script setup>
-    import addtolist from '../lists/add-list.vue'
-
-    defineProps({
-        productId: {
-            type: String,
-            required: true
-        },
-        postId: {
-            type: String,
-            required: true
-        }
-    });
-</script>

package/app/components/related/list.vue

@@ -1,33 +0,0 @@
-<template>
-    <div>
-        <div class="item-wrapper card_1">
-            <div class="item-content">
-                <h4 class="item-title_1 mbr-fonts-style display-7">
-                    <strong>{{ list?.name }}</strong>
-                </h4>
-                <p class="item-text_1 mbr-fonts-style display-4" v-dompurify-html="list?.description"></p>
-                <div class="mbr-section-btn item-footer">
-                    <NuxtLink :to="`/lists/list/${list?.slug}`" class="btn item-btn btn-info-outline display-4">
-                        View
-                    </NuxtLink>
-                </div>
-            </div>
-            <div class="item-img" v-if="list?.image?.filename_disk">
-                <img :src="`${$directus.url}assets/${list?.image?.filename_disk}`" :alt="list?.name" >
-            </div>
-
-            <div class="item-img" v-else>
-                <img src="images/image10.jpg" :alt="list?.name" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-    const props = defineProps({
-        list: {
-            type: Object,
-            required: true,
-        },
-    });
-</script>