Start working on the content explorer!
This commit is contained in:
PascalMarchesseault
@@ -18,6 +18,7 @@ import CreatorList from '../views/creators/CreatorList.vue'
|
||||
import CreatorPage from "@/views/creators/CreatorPage.vue";
|
||||
import ContentPage from "@/views/contents/ContentPage.vue";
|
||||
import PostContent from "@/views/contents/PostContent.vue";
|
||||
import Explorer from "@/views/explorer/explorer.vue";
|
||||
import {useAuthStore} from "@/stores/authStore.js";
|
||||
|
||||
const routes = [
|
||||
@@ -127,6 +128,12 @@ const routes = [
|
||||
component: Profile,
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/explorer',
|
||||
name: 'explorer',
|
||||
component: Explorer,
|
||||
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
169
src/views/explorer/explorer.vue
Normal file
169
src/views/explorer/explorer.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
import videosData from './videos.json';
|
||||
|
||||
// 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 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()}`">
|
||||
<div v-for="(video, index) in mostViewedVideos.slice(currentRangeBought, currentRangeBought + videosPerRow)" :key="video.id" class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
|
||||
<img :src="video.thumbnail" alt="video thumbnail" class="w-full">
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-bold">{{ video.title }}</h3>
|
||||
<p class="text-gray-600">{{ video.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center px-2">
|
||||
<v-btn @click="previousRow(currentRangeBought)" :disabled="currentRangeBought === 0" class="mb-2">
|
||||
<v-icon>mdi-arrow-up-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn @click="nextRow(currentRangeBought, mostBoughtVideos)" :disabled="currentRangeBought + videosPerRow >= mostBoughtVideos.length">
|
||||
<v-icon>mdi-arrow-down-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Line -->
|
||||
<hr class="my-3">
|
||||
|
||||
<!-- Section Most Liked -->
|
||||
<h2 class="text-2xl font-bold mb-2">Most Liked</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()}`">
|
||||
<div v-for="(video, index) in mostLikedVideos.slice(currentRangeLiked, currentRangeLiked + videosPerRow)" :key="video.id" class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
|
||||
<img :src="video.thumbnail" alt="video thumbnail" class="w-full">
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-bold">{{ video.title }}</h3>
|
||||
<p class="text-gray-600">{{ video.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center px-2">
|
||||
<v-btn @click="previousRow(currentRangeLiked)" :disabled="currentRangeLiked === 0" class="mb-2">
|
||||
<v-icon>mdi-arrow-up-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn @click="nextRow(currentRangeLiked, mostLikedVideos)" :disabled="currentRangeLiked + videosPerRow >= mostLikedVideos.length">
|
||||
<v-icon>mdi-arrow-down-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Line -->
|
||||
<hr class="my-3">
|
||||
|
||||
<!-- Section Most Bought -->
|
||||
<h2 class="text-2xl font-bold mb-2">Most Bought</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()}`">
|
||||
<div v-for="(video, index) in mostBoughtVideos.slice(currentRangeBought, currentRangeBought + videosPerRow)" :key="video.id" class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
|
||||
<img :src="video.thumbnail" alt="video thumbnail" class="w-full">
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-bold">{{ video.title }}</h3>
|
||||
<p class="text-gray-600">{{ video.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center px-2">
|
||||
<v-btn @click="previousRow(currentRangeBought)" :disabled="currentRangeBought === 0" class="mb-2">
|
||||
<v-icon>mdi-arrow-up-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn @click="nextRow(currentRangeBought, mostBoughtVideos)" :disabled="currentRangeBought + videosPerRow >= mostBoughtVideos.length">
|
||||
<v-icon>mdi-arrow-down-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Line -->
|
||||
<hr class="my-3">
|
||||
|
||||
<!-- Section Most Shared -->
|
||||
<h2 class="text-2xl font-bold mb-2">Most Shared</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()}`">
|
||||
<div v-for="(video, index) in mostSharedVideos.slice(currentRangeShared, currentRangeShared + videosPerRow)" :key="video.id" class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
|
||||
<img :src="video.thumbnail" alt="video thumbnail" class="w-full">
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-bold">{{ video.title }}</h3>
|
||||
<p class="text-gray-600">{{ video.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center px-2">
|
||||
<v-btn @click="previousRow(currentRangeShared)" :disabled="currentRangeShared === 0" class="mb-2">
|
||||
<v-icon>mdi-arrow-up-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn @click="nextRow(currentRangeShared, mostSharedVideos)" :disabled="currentRangeShared + videosPerRow >= mostSharedVideos.length">
|
||||
<v-icon>mdi-arrow-down-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
</style>
|
||||
298
src/views/explorer/videos.json
Normal file
298
src/views/explorer/videos.json
Normal file
@@ -0,0 +1,298 @@
|
||||
{
|
||||
"mostLikedVideos": [
|
||||
{
|
||||
"id": 1,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 1",
|
||||
"description": "This is a short description of Most Liked Video 1"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 2",
|
||||
"description": "This is a short description of Most Liked Video 2"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 3",
|
||||
"description": "This is a short description of Most Liked Video 3"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 4",
|
||||
"description": "This is a short description of Most Liked Video 4"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 5",
|
||||
"description": "This is a short description of Most Liked Video 5"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 6",
|
||||
"description": "This is a short description of Most Liked Video 6"
|
||||
},
|
||||
{
|
||||
"id": 19,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 7",
|
||||
"description": "This is a short description of Most Liked Video 7"
|
||||
},
|
||||
{
|
||||
"id": 20,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 8",
|
||||
"description": "This is a short description of Most Liked Video 8"
|
||||
},
|
||||
{
|
||||
"id": 21,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 9",
|
||||
"description": "This is a short description of Most Liked Video 9"
|
||||
},
|
||||
{
|
||||
"id": 22,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 10",
|
||||
"description": "This is a short description of Most Liked Video 10"
|
||||
},
|
||||
{
|
||||
"id": 23,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 11",
|
||||
"description": "This is a short description of Most Liked Video 11"
|
||||
},
|
||||
{
|
||||
"id": 24,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 12",
|
||||
"description": "This is a short description of Most Liked Video 12"
|
||||
}
|
||||
],
|
||||
"mostBoughtVideos": [
|
||||
{
|
||||
"id": 7,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 1",
|
||||
"description": "This is a short description of Most Bought Video 1"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 2",
|
||||
"description": "This is a short description of Most Bought Video 2"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 3",
|
||||
"description": "This is a short description of Most Bought Video 3"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 4",
|
||||
"description": "This is a short description of Most Bought Video 4"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 5",
|
||||
"description": "This is a short description of Most Bought Video 5"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 6",
|
||||
"description": "This is a short description of Most Bought Video 6"
|
||||
},
|
||||
{
|
||||
"id": 25,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 7",
|
||||
"description": "This is a short description of Most Bought Video 7"
|
||||
},
|
||||
{
|
||||
"id": 26,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 8",
|
||||
"description": "This is a short description of Most Bought Video 8"
|
||||
},
|
||||
{
|
||||
"id": 27,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 9",
|
||||
"description": "This is a short description of Most Bought Video 9"
|
||||
},
|
||||
{
|
||||
"id": 28,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 10",
|
||||
"description": "This is a short description of Most Bought Video 10"
|
||||
},
|
||||
{
|
||||
"id": 29,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 11",
|
||||
"description": "This is a short description of Most Bought Video 11"
|
||||
},
|
||||
{
|
||||
"id": 30,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 12",
|
||||
"description": "This is a short description of Most Bought Video 12"
|
||||
}
|
||||
],
|
||||
"mostSharedVideos": [
|
||||
{
|
||||
"id": 13,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 1",
|
||||
"description": "This is a short description of Most Shared Video 1"
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 2",
|
||||
"description": "This is a short description of Most Shared Video 2"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 3",
|
||||
"description": "This is a short description of Most Shared Video 3"
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 4",
|
||||
"description": "This is a short description of Most Shared Video 4"
|
||||
},
|
||||
{
|
||||
"id": 17,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 5",
|
||||
"description": "This is a short description of Most Shared Video 5"
|
||||
},
|
||||
{
|
||||
"id": 18,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 6",
|
||||
"description": "This is a short description of Most Shared Video 6"
|
||||
},
|
||||
{
|
||||
"id": 31,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 7",
|
||||
"description": "This is a short description of Most Shared Video 7"
|
||||
},
|
||||
{
|
||||
"id": 32,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 8",
|
||||
"description": "This is a short description of Most Shared Video 8"
|
||||
},
|
||||
{
|
||||
"id": 33,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 9",
|
||||
"description": "This is a short description of Most Shared Video 9"
|
||||
},
|
||||
{
|
||||
"id": 34,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 10",
|
||||
"description": "This is a short description of Most Shared Video 10"
|
||||
},
|
||||
{
|
||||
"id": 35,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 11",
|
||||
"description": "This is a short description of Most Shared Video 11"
|
||||
},
|
||||
{
|
||||
"id": 36,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 12",
|
||||
"description": "This is a short description of Most Shared Video 12"
|
||||
}
|
||||
],
|
||||
"mostViewedVideos": [
|
||||
{
|
||||
"id": 37,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 1",
|
||||
"description": "This is a short description of Most Viewed Video 1"
|
||||
},
|
||||
{
|
||||
"id": 38,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 2",
|
||||
"description": "This is a short description of Most Viewed Video 2"
|
||||
},
|
||||
{
|
||||
"id": 39,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 3",
|
||||
"description": "This is a short description of Most Viewed Video 3"
|
||||
},
|
||||
{
|
||||
"id": 40,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 4",
|
||||
"description": "This is a short description of Most Viewed Video 4"
|
||||
},
|
||||
{
|
||||
"id": 41,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 5",
|
||||
"description": "This is a short description of Most Viewed Video 5"
|
||||
},
|
||||
{
|
||||
"id": 42,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 6",
|
||||
"description": "This is a short description of Most Viewed Video 6"
|
||||
},
|
||||
{
|
||||
"id": 43,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 7",
|
||||
"description": "This is a short description of Most Viewed Video 7"
|
||||
},
|
||||
{
|
||||
"id": 44,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 8",
|
||||
"description": "This is a short description of Most Viewed Video 8"
|
||||
},
|
||||
{
|
||||
"id": 45,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 9",
|
||||
"description": "This is a short description of Most Viewed Video 9"
|
||||
},
|
||||
{
|
||||
"id": 46,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 10",
|
||||
"description": "This is a short description of Most Viewed Video 10"
|
||||
},
|
||||
{
|
||||
"id": 47,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 11",
|
||||
"description": "This is a short description of Most Viewed Video 11"
|
||||
},
|
||||
{
|
||||
"id": 48,
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 12",
|
||||
"description": "This is a short description of Most Viewed Video 12"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user