Update explorer.vue
This commit is contained in:
PascalMarchesseault
33
src/views/explorer/ExplorerCard.vue
Normal file
33
src/views/explorer/ExplorerCard.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out py4">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<h3 class="text-lg font-bold p-3">{{ video.title }}</h3>
|
||||
<v-btn icon class="ml-2" variant="plain">
|
||||
<v-icon>mdi-dots-vertical</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<img :src="video.thumbnail" alt="video thumbnail" class="w-full ">
|
||||
<div class="p-3">
|
||||
<p class="text-gray-600 mb-4">{{ video.description }}</p>
|
||||
<div class="flex items-center">
|
||||
<img :src="video.profileImage" alt="profile image" class="w-10 h-10 rounded-full">
|
||||
<div class="ml-4">
|
||||
<h4 class="text-md font-bold">{{ video.name }}</h4>
|
||||
<div class="text-gray-600 text-sm">
|
||||
<span>{{ video.vues }} vues</span> -
|
||||
<span>{{ video.timeAgo }} ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
video: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -2,6 +2,7 @@
|
||||
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;
|
||||
@@ -13,6 +14,7 @@ const mostViewedVideos = videosData.mostViewedVideos;
|
||||
const currentRangeLiked = ref(0);
|
||||
const currentRangeBought = ref(0);
|
||||
const currentRangeShared = ref(0);
|
||||
const currentRangeViewed = ref(0);
|
||||
const videosPerRow = 4;
|
||||
const animationDirection = ref('');
|
||||
|
||||
@@ -59,21 +61,14 @@ onMounted(() => {
|
||||
<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>
|
||||
<ExplorerCard v-for="(video, index) in mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRow)" :key="video.id" :video="video" />
|
||||
</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-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(currentRangeBought, mostBoughtVideos)" :disabled="currentRangeBought + videosPerRow >= mostBoughtVideos.length">
|
||||
<v-btn @click="nextRow(currentRangeViewed, mostViewedVideos)" :disabled="currentRangeViewed + videosPerRow >= mostViewedVideos.length">
|
||||
<v-icon>mdi-arrow-down-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
@@ -82,83 +77,7 @@ onMounted(() => {
|
||||
<!-- 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>
|
||||
<!-- Repeat similar blocks for Most Liked, Most Bought, Most Shared -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,298 +1,170 @@
|
||||
{
|
||||
"mostLikedVideos": [
|
||||
{
|
||||
"id": 1,
|
||||
"id": 37,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 1",
|
||||
"description": "This is a short description of Most Liked Video 1"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"id": 38,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 2",
|
||||
"description": "This is a short description of Most Liked Video 2"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"id": 39,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Liked Video 3",
|
||||
"description": "This is a short description of Most Liked Video 3"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"id": 40,
|
||||
"title": "Amazing Video Title",
|
||||
"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"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
}
|
||||
],
|
||||
"mostBoughtVideos": [
|
||||
{
|
||||
"id": 7,
|
||||
"id": 41,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 1",
|
||||
"description": "This is a short description of Most Bought Video 1"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"id": 42,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 2",
|
||||
"description": "This is a short description of Most Bought Video 2"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"id": 43,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Bought Video 3",
|
||||
"description": "This is a short description of Most Bought Video 3"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"id": 44,
|
||||
"title": "Amazing Video Title",
|
||||
"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"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
}
|
||||
],
|
||||
"mostSharedVideos": [
|
||||
{
|
||||
"id": 13,
|
||||
"id": 45,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 1",
|
||||
"description": "This is a short description of Most Shared Video 1"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"id": 46,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 2",
|
||||
"description": "This is a short description of Most Shared Video 2"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"id": 47,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Shared Video 3",
|
||||
"description": "This is a short description of Most Shared Video 3"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
"id": 48,
|
||||
"title": "Amazing Video Title",
|
||||
"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"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
}
|
||||
],
|
||||
"mostViewedVideos": [
|
||||
{
|
||||
"id": 37,
|
||||
"id": 49,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 1",
|
||||
"description": "This is a short description of Most Viewed Video 1"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 38,
|
||||
"id": 50,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 2",
|
||||
"description": "This is a short description of Most Viewed Video 2"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 39,
|
||||
"id": 51,
|
||||
"title": "Amazing Video Title",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"title": "Most Viewed Video 3",
|
||||
"description": "This is a short description of Most Viewed Video 3"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 40,
|
||||
"id": 52,
|
||||
"title": "Amazing Video Title",
|
||||
"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"
|
||||
"description": "This is a brief description of the video content.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user