social-media/src/views/explorer/explorer.vue

<script setup>
import {ref, computed, onMounted, onBeforeUnmount, onBeforeMount} from 'vue';
import videosData from './videos.json';
import ExplorerCard from '@/views/explorer/ExplorerCard.vue';
import {useClient} from "@/plugins/api.js";

const client = useClient();

const contentCount = ref(0);
const pageSize = ref(10);
const isSmallScreen = ref(false);
const errorMessage = ref()
// Données
const mostReactedContent = ref([]);
const mostBoughtVideos = videosData.mostBoughtVideos;

let last_id = null

const updateScreenSize = () => {
  isSmallScreen.value = window.matchMedia('(max-width: 600px)').matches;
};

const fetchContents = async () => {
  try {
    let uri = `/api/contents/featured/?page_size=${pageSize.value}`;
    if (last_id !== null) uri = uri + `&last_id=${last_id}`
    
    const response = await client.get(uri);
    
    if (response.status >= 200 && response.status < 300) {
      contentCount.value = response.data.length;

      if (contentCount.value > 0) {
        mostReactedContent.value.push(...response.data)
        const [last_content] = response.data.slice(-1)
        last_id = last_content.id
      }
    }
  } catch (error) {
    console.error("Failed to fetch posts", error);
  }
};

onBeforeMount(async () => {
  await fetchContents();
})

onMounted(() => {
  updateScreenSize();
  window.addEventListener('resize', updateScreenSize);
});

onBeforeUnmount(async () => {
  window.removeEventListener('resize', updateScreenSize);
});


// État pour contrôler la plage actuelle des vidéos affichées
const currentRangeViewed = ref(0);
const currentRangeBought = ref(0);

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 < mostReactedContent.value.length) {
    currentRangeViewed.value += videosPerRowViewed.value;
  }
};

// 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;
  }
};

// Fonction pour passer à l'ensemble suivant de vidéos (Most Bought)
const nextRowBought = () => {
  if (currentRangeBought.value + videosPerRowBought.value < mostBoughtVideos.length) {
    currentRangeBought.value += videosPerRowBought.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 >= mostReactedContent.length) {
      currentRangeViewed.value = Math.max(mostReactedContent.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 Reacted</h2>
<!--      <div class="flex space-x-4">-->
<!--        <v-btn variant="outlined" small @click="changeTimeRangeViewed('24h')" :class="{'v-btn&#45;&#45;active': selectedTimeRangeViewed === '24h'}">-->
<!--          <v-icon left>mdi-timer</v-icon> 24h-->
<!--        </v-btn>-->
<!--        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('72h')" :class="{'v-btn&#45;&#45;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&#45;&#45;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&#45;&#45;active': selectedTimeRangeViewed === 'month'}">-->
<!--          <v-icon left>mdi-calendar-month</v-icon> Mois-->
<!--        </v-btn>-->
<!--      </div>-->
    </div>

    <!-- 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">
          <ExplorerCard
              v-for="(content, index) in mostReactedContent.slice(currentRangeViewed, currentRangeViewed + videosPerRowViewed)"
              :key="content.id"
              :content="content"
          />
        </div>
      </div>
      <div class="flex flex-col justify-center px-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>
        <!-- Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Viewed) -->
        <v-btn @click="nextRowViewed" :disabled="currentRangeViewed + videosPerRowViewed.value >= mostReactedContent.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 Viewed) -->
    <div class="flex justify-center mt-4">
      <v-btn icon @click="toggleVideoDisplayViewed">
        <v-icon>{{ chevronIconViewed }}</v-icon>
      </v-btn>
    </div>

    <!-- 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&#45;&#45;active': selectedTimeRangeBought === '24h'}">-->
<!--          <v-icon left>mdi-timer</v-icon> 24h-->
<!--        </v-btn>-->
<!--        <v-btn variant="outlined"  small @click="changeTimeRangeBought('72h')" :class="{'v-btn&#45;&#45;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&#45;&#45;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&#45;&#45;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">-->
<!--        &lt;!&ndash; Bouton pour naviguer vers l'ensemble précédent de vidéos (Most Bought) &ndash;&gt;-->
<!--        <v-btn @click="previousRowBought" :disabled="currentRangeBought === 0" class="mb-2">-->
<!--          <v-icon>mdi-arrow-up-circle-outline</v-icon>-->
<!--        </v-btn>-->
<!--        &lt;!&ndash; Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Bought) &ndash;&gt;-->
<!--        <v-btn @click="nextRowBought" :disabled="currentRangeBought + videosPerRowBought.value >= mostBoughtVideos.length">-->
<!--          <v-icon>mdi-arrow-down-circle-outline</v-icon>-->
<!--        </v-btn>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; Chevron pour basculer entre l'affichage de 4 et 8 vidéos (Most Bought) &ndash;&gt;-->
<!--    <div class="flex justify-center mt-4">-->
<!--      <v-btn icon @click="toggleVideoDisplayBought">-->
<!--        <v-icon>{{ chevronIconBought }}</v-icon>-->
<!--      </v-btn>-->
<!--    </div>-->
  </div>
</template>

<style scoped>
.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>