jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Explorer start

Browse Source
This commit is contained in:
Dominic Villemure
2024-08-29 19:37:26 -04:00
parent ed1abd4a96
commit 2c7248d600
3 changed files with 133 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/views/explorer/explorer.vue
View File

@@ -1,12 +1,62 @@
<script setup>
import { ref, computed } from 'vue';
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 mostViewedVideos = videosData.mostViewedVideos;
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);
console.log(response.data);
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);
@@ -19,7 +69,7 @@ const selectedTimeRangeBought = ref('24h'); // Plage de temps sélectionnée pou
// Fonction pour passer à l'ensemble suivant de vidéos (Most Viewed)
const nextRowViewed = () => {
if (currentRangeViewed.value + videosPerRowViewed.value < mostViewedVideos.length) {
if (currentRangeViewed.value + videosPerRowViewed.value < mostReactedContent.value.length) {
currentRangeViewed.value += videosPerRowViewed.value;
}
};
@@ -48,8 +98,8 @@ const previousRowBought = () => {
// 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);
if (currentRangeViewed.value + videosPerRowViewed.value >= mostReactedContent.length) {
currentRangeViewed.value = Math.max(mostReactedContent.length - 8, 0);
}
videosPerRowViewed.value = 8;
} else {
@@ -101,21 +151,21 @@ const chevronIconBought = computed(() => {
<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>
<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 -->
@@ -123,9 +173,9 @@ const chevronIconBought = computed(() => {
<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 mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRowViewed)"
:key="video.id"
:video="video"
v-for="(content, index) in mostReactedContent.slice(currentRangeViewed, currentRangeViewed + videosPerRowViewed)"
:key="content.id"
:content="content"
/>
</div>
</div>
@@ -135,7 +185,7 @@ const chevronIconBought = computed(() => {
<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 >= mostViewedVideos.length">
<v-btn @click="nextRowViewed" :disabled="currentRangeViewed + videosPerRowViewed.value >= mostReactedContent.length">
<v-icon>mdi-arrow-down-circle-outline</v-icon>
</v-btn>
</div>
@@ -149,56 +199,56 @@ const chevronIconBought = computed(() => {
</div>
<!-- Ligne de séparation -->
<hr class="my-8"/>
<!-- <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>
<!-- <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">
<!-- 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>
<!-- <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>-->
<!-- 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>
<!-- &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>