89 lines
2.7 KiB
Vue
89 lines
2.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { onMounted } from 'vue';
|
|
import videosData from './videos.json';
|
|
import ExplorerCard from '@/views/explorer/ExplorerCard.vue';
|
|
|
|
// Data
|
|
const mostLikedVideos = videosData.mostLikedVideos;
|
|
const mostBoughtVideos = videosData.mostBoughtVideos;
|
|
const mostSharedVideos = videosData.mostSharedVideos;
|
|
const mostViewedVideos = videosData.mostViewedVideos;
|
|
|
|
// State to control the current range of videos displayed
|
|
const currentRangeLiked = ref(0);
|
|
const currentRangeBought = ref(0);
|
|
const currentRangeShared = ref(0);
|
|
const currentRangeViewed = ref(0);
|
|
const videosPerRow = 4;
|
|
const animationDirection = ref('');
|
|
|
|
// 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);
|
|
}
|
|
};
|
|
|
|
// 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);
|
|
}
|
|
};
|
|
|
|
// 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';
|
|
}
|
|
return '';
|
|
};
|
|
|
|
onMounted(() => {
|
|
animationDirection.value = '';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container mx-auto py-4">
|
|
|
|
<!-- Section Most Viewed -->
|
|
<h2 class="text-2xl font-bold mb-2">Most Viewed</h2>
|
|
<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>
|
|
</div>
|
|
<div class="flex flex-col justify-center px-2">
|
|
<v-btn @click="previousRow(currentRangeViewed)" :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">
|
|
<v-icon>mdi-arrow-down-circle-outline</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Horizontal Line -->
|
|
<hr class="my-3">
|
|
|
|
<!-- Repeat similar blocks for Most Liked, Most Bought, Most Shared -->
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
max-width: 1200px;
|
|
}
|
|
</style>
|