@meeovi/layer-lists 1.0.2

package/app/components/media/MediaPlayer.vue

@@ -0,0 +1,302 @@
+<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

@@ -0,0 +1,233 @@
+<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

@@ -0,0 +1,95 @@
+<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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,33 @@
+<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>