Improve Explorer template concept

src/views/explorer/explorer.vue

@@ -1,83 +1,204 @@
 <script setup>
-import { ref } from 'vue';
-import { onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import videosData from './videos.json';
-import ExplorerCard from '@/views/explorer/ExplorerCard.vue'; 
+import ExplorerCard from '@/views/explorer/ExplorerCard.vue';
 
-// Data
-const mostLikedVideos = videosData.mostLikedVideos;
-const mostBoughtVideos = videosData.mostBoughtVideos;
-const mostSharedVideos = videosData.mostSharedVideos;
+// Données
 const mostViewedVideos = videosData.mostViewedVideos;
+const mostBoughtVideos = videosData.mostBoughtVideos;
 
-// State to control the current range of videos displayed
-const currentRangeLiked = ref(0);
-const currentRangeBought = ref(0);
-const currentRangeShared = ref(0);
+// État pour contrôler la plage actuelle des vidéos affichées
 const currentRangeViewed = ref(0);
-const videosPerRow = 4;
-const animationDirection = ref('');
+const currentRangeBought = ref(0);
 
-// Function to move to the next set of videos
-const nextRow = (currentRange, videosList) => {
-  if (currentRange.value + videosPerRow < videosList.length) {
-    animationDirection.value = 'down';
-    setTimeout(() => {
-      currentRange.value += videosPerRow;
-    }, 300);
+const videosPerRowViewed = ref(4); // Nombre initial de vidéos par ligne pour Most Viewed
+const videosPerRowBought = ref(4); // Nombre initial de vidéos par ligne pour Most Bought
+
+const selectedTimeRangeViewed = ref('24h'); // Plage de temps sélectionnée pour Most Viewed
+const selectedTimeRangeBought = ref('24h'); // Plage de temps sélectionnée pour Most Bought
+
+// Fonction pour passer à l'ensemble suivant de vidéos (Most Viewed)
+const nextRowViewed = () => {
+  if (currentRangeViewed.value + videosPerRowViewed.value < mostViewedVideos.length) {
+    currentRangeViewed.value += videosPerRowViewed.value;
   }
 };
 
-// Function to move to the previous set of videos
-const previousRow = (currentRange) => {
-  if (currentRange.value - videosPerRow >= 0) {
-    animationDirection.value = 'up';
-    setTimeout(() => {
-      currentRange.value -= videosPerRow;
-    }, 300);
+// Fonction pour revenir à l'ensemble précédent de vidéos (Most Viewed)
+const previousRowViewed = () => {
+  if (currentRangeViewed.value - videosPerRowViewed.value >= 0) {
+    currentRangeViewed.value -= videosPerRowViewed.value;
   }
 };
 
-// Function to animate the transition
-const animationClass = () => {
-  if (animationDirection.value === 'down') {
-    return 'transition-transform transform translate-y-full opacity-0';
-  } else if (animationDirection.value === 'up') {
-    return 'transition-transform transform -translate-y-full opacity-0';
+// Fonction pour passer à l'ensemble suivant de vidéos (Most Bought)
+const nextRowBought = () => {
+  if (currentRangeBought.value + videosPerRowBought.value < mostBoughtVideos.length) {
+    currentRangeBought.value += videosPerRowBought.value;
   }
-  return '';
 };
 
-onMounted(() => {
-  animationDirection.value = '';
+// Fonction pour revenir à l'ensemble précédent de vidéos (Most Bought)
+const previousRowBought = () => {
+  if (currentRangeBought.value - videosPerRowBought.value >= 0) {
+    currentRangeBought.value -= videosPerRowBought.value;
+  }
+};
+
+// Fonction pour basculer entre l'affichage de 4 et 8 vidéos (Most Viewed)
+const toggleVideoDisplayViewed = () => {
+  if (videosPerRowViewed.value === 4) {
+    if (currentRangeViewed.value + videosPerRowViewed.value >= mostViewedVideos.length) {
+      currentRangeViewed.value = Math.max(mostViewedVideos.length - 8, 0);
+    }
+    videosPerRowViewed.value = 8;
+  } else {
+    videosPerRowViewed.value = 4;
+  }
+};
+
+// Fonction pour basculer entre l'affichage de 4 et 8 vidéos (Most Bought)
+const toggleVideoDisplayBought = () => {
+  if (videosPerRowBought.value === 4) {
+    if (currentRangeBought.value + videosPerRowBought.value >= mostBoughtVideos.length) {
+      currentRangeBought.value = Math.max(mostBoughtVideos.length - 8, 0);
+    }
+    videosPerRowBought.value = 8;
+  } else {
+    videosPerRowBought.value = 4;
+  }
+};
+
+// Fonction pour changer la plage de temps sélectionnée pour Most Viewed
+const changeTimeRangeViewed = (range) => {
+  selectedTimeRangeViewed.value = range;
+  currentRangeViewed.value = 0; // Réinitialiser la plage de vidéos affichées (Most Viewed)
+  // Logique pour filtrer les vidéos en fonction de la plage de temps sélectionnée
+  // À implémenter si nécessaire
+};
+
+// Fonction pour changer la plage de temps sélectionnée pour Most Bought
+const changeTimeRangeBought = (range) => {
+  selectedTimeRangeBought.value = range;
+  currentRangeBought.value = 0; // Réinitialiser la plage de vidéos affichées (Most Bought)
+  // Logique pour filtrer les vidéos en fonction de la plage de temps sélectionnée
+  // À implémenter si nécessaire
+};
+
+// Computed property pour le changement d'icône du chevron (Most Viewed)
+const chevronIconViewed = computed(() => {
+  return videosPerRowViewed.value === 4 ? 'mdi-chevron-down' : 'mdi-chevron-up';
 });
+
+// Computed property pour le changement d'icône du chevron (Most Bought)
+const chevronIconBought = computed(() => {
+  return videosPerRowBought.value === 4 ? 'mdi-chevron-down' : 'mdi-chevron-up';
+});
+
 </script>
 
 <template>
   <div class="container mx-auto py-4">
+    <!-- Section Most Viewed avec boutons de sélection de la plage de temps -->
+    <div class="flex justify-between items-center mb-4">
+      <h2 class="text-2xl font-bold">Most Viewed</h2>
+      <div class="flex space-x-4">
+        <v-btn variant="outlined" small @click="changeTimeRangeViewed('24h')" :class="{'v-btn--active': selectedTimeRangeViewed === '24h'}">
+          <v-icon left>mdi-timer</v-icon> 24h
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('72h')" :class="{'v-btn--active': selectedTimeRangeViewed === '72h'}">
+          <v-icon left>mdi-timer-sand</v-icon> 72h
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('week')" :class="{'v-btn--active': selectedTimeRangeViewed === 'week'}">
+          <v-icon left>mdi-calendar-week</v-icon> Semaine
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('month')" :class="{'v-btn--active': selectedTimeRangeViewed === 'month'}">
+          <v-icon left>mdi-calendar-month</v-icon> Mois
+        </v-btn>
+      </div>
+    </div>
 
-    <!-- Section Most Viewed -->
-    <h2 class="text-2xl font-bold mb-2">Most Viewed</h2>
+    <!-- Liste des vidéos les plus vues -->
     <div class="flex flex-row">
       <div class="relative overflow-hidden">
-        <div :class="`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8 ${animationClass()}`">
-          <ExplorerCard v-for="(video, index) in mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRow)" :key="video.id" :video="video" />
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8">
+          <ExplorerCard
+              v-for="(video, index) in mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRowViewed)"
+              :key="video.id"
+              :video="video"
+          />
         </div>
       </div>
       <div class="flex flex-col justify-center px-2">
-        <v-btn @click="previousRow(currentRangeViewed)" :disabled="currentRangeViewed === 0" class="mb-2">
+        <!-- Bouton pour naviguer vers l'ensemble précédent de vidéos (Most Viewed) -->
+        <v-btn @click="previousRowViewed" :disabled="currentRangeViewed === 0" class="mb-2">
           <v-icon>mdi-arrow-up-circle-outline</v-icon>
         </v-btn>
-        <v-btn @click="nextRow(currentRangeViewed, mostViewedVideos)" :disabled="currentRangeViewed + videosPerRow >= mostViewedVideos.length">
+        <!-- Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Viewed) -->
+        <v-btn @click="nextRowViewed" :disabled="currentRangeViewed + videosPerRowViewed.value >= mostViewedVideos.length">
           <v-icon>mdi-arrow-down-circle-outline</v-icon>
         </v-btn>
       </div>
     </div>
 
-    <!-- Horizontal Line -->
-    <hr class="my-3">
+    <!-- Chevron pour basculer entre l'affichage de 4 et 8 vidéos (Most Viewed) -->
+    <div class="flex justify-center mt-4">
+      <v-btn icon @click="toggleVideoDisplayViewed">
+        <v-icon>{{ chevronIconViewed }}</v-icon>
+      </v-btn>
+    </div>
 
-    <!-- Repeat similar blocks for Most Liked, Most Bought, Most Shared -->
+    <!-- Ligne de séparation -->
+    <hr class="my-8"/>
+
+    <!-- Section Most Bought avec boutons de sélection de la plage de temps -->
+    <div class="flex justify-between items-center mb-4">
+      <h2 class="text-2xl font-bold">Most Bought</h2>
+      <div class="flex space-x-4">
+        <v-btn variant="outlined" small @click="changeTimeRangeBought('24h')" :class="{'v-btn--active': selectedTimeRangeBought === '24h'}">
+          <v-icon left>mdi-timer</v-icon> 24h
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeBought('72h')" :class="{'v-btn--active': selectedTimeRangeBought === '72h'}">
+          <v-icon left>mdi-timer-sand</v-icon> 72h
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeBought('week')" :class="{'v-btn--active': selectedTimeRangeBought === 'week'}">
+          <v-icon left>mdi-calendar-week</v-icon> Semaine
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeBought('month')" :class="{'v-btn--active': selectedTimeRangeBought === 'month'}">
+          <v-icon left>mdi-calendar-month</v-icon> Mois
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Liste des vidéos les plus achetées -->
+    <div class="flex flex-row">
+      <div class="relative overflow-hidden">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8">
+          <ExplorerCard
+              v-for="(video, index) in mostBoughtVideos.slice(currentRangeBought, currentRangeBought + videosPerRowBought)"
+              :key="video.id"
+              :video="video"
+          />
+        </div>
+      </div>
+      <div class="flex flex-col justify-center px-2">
+        <!-- Bouton pour naviguer vers l'ensemble précédent de vidéos (Most Bought) -->
+        <v-btn @click="previousRowBought" :disabled="currentRangeBought === 0" class="mb-2">
+          <v-icon>mdi-arrow-up-circle-outline</v-icon>
+        </v-btn>
+        <!-- Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Bought) -->
+        <v-btn @click="nextRowBought" :disabled="currentRangeBought + videosPerRowBought.value >= mostBoughtVideos.length">
+          <v-icon>mdi-arrow-down-circle-outline</v-icon>
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Chevron pour basculer entre l'affichage de 4 et 8 vidéos (Most Bought) -->
+    <div class="flex justify-center mt-4">
+      <v-btn icon @click="toggleVideoDisplayBought">
+        <v-icon>{{ chevronIconBought }}</v-icon>
+      </v-btn>
+    </div>
   </div>
 </template>
 
@@ -85,4 +206,22 @@ onMounted(() => {
 .container {
   max-width: 1200px;
 }
+
+.v-btn--active {
+  background-color: #1976d2;
+  color: white;
+}
+
+.v-btn--active.v-btn--text {
+  background-color: #1976d2;
+  color: white;
+}
+
+.v-btn--text:hover {
+  background-color: rgba(25, 118, 210, 0.1);
+}
+
+hr {
+  border: 1px solid #ddd;
+}
 </style>