Improve Explorer template concept
This commit is contained in:
PascalMarchesseault
@@ -1,83 +1,204 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { ref, computed } 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;
|
||||
// Données
|
||||
const mostViewedVideos = videosData.mostViewedVideos;
|
||||
const mostBoughtVideos = videosData.mostBoughtVideos;
|
||||
|
||||
// State to control the current range of videos displayed
|
||||
const currentRangeLiked = ref(0);
|
||||
const currentRangeBought = ref(0);
|
||||
const currentRangeShared = ref(0);
|
||||
// État pour contrôler la plage actuelle des vidéos affichées
|
||||
const currentRangeViewed = ref(0);
|
||||
const videosPerRow = 4;
|
||||
const animationDirection = ref('');
|
||||
const currentRangeBought = ref(0);
|
||||
|
||||
// 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);
|
||||
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 < mostViewedVideos.length) {
|
||||
currentRangeViewed.value += videosPerRowViewed.value;
|
||||
}
|
||||
};
|
||||
|
||||
// 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);
|
||||
// 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;
|
||||
}
|
||||
};
|
||||
|
||||
// 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';
|
||||
// Fonction pour passer à l'ensemble suivant de vidéos (Most Bought)
|
||||
const nextRowBought = () => {
|
||||
if (currentRangeBought.value + videosPerRowBought.value < mostBoughtVideos.length) {
|
||||
currentRangeBought.value += videosPerRowBought.value;
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
animationDirection.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 >= mostViewedVideos.length) {
|
||||
currentRangeViewed.value = Math.max(mostViewedVideos.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 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>
|
||||
</div>
|
||||
|
||||
<!-- Section Most Viewed -->
|
||||
<h2 class="text-2xl font-bold mb-2">Most Viewed</h2>
|
||||
<!-- 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 ${animationClass()}`">
|
||||
<ExplorerCard v-for="(video, index) in mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRow)" :key="video.id" :video="video" />
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center px-2">
|
||||
<v-btn @click="previousRow(currentRangeViewed)" :disabled="currentRangeViewed === 0" class="mb-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>
|
||||
<v-btn @click="nextRow(currentRangeViewed, mostViewedVideos)" :disabled="currentRangeViewed + videosPerRow >= mostViewedVideos.length">
|
||||
<!-- Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Viewed) -->
|
||||
<v-btn @click="nextRowViewed" :disabled="currentRangeViewed + videosPerRowViewed.value >= mostViewedVideos.length">
|
||||
<v-icon>mdi-arrow-down-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Line -->
|
||||
<hr class="my-3">
|
||||
<!-- 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>
|
||||
|
||||
<!-- Repeat similar blocks for Most Liked, Most Bought, Most Shared -->
|
||||
<!-- 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--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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -85,4 +206,22 @@ onMounted(() => {
|
||||
.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>
|
||||
|
||||
@@ -1,170 +1,410 @@
|
||||
{
|
||||
"mostLikedVideos": [
|
||||
{
|
||||
"id": 37,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 1,
|
||||
"title": "Top 10 Football Goals",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "A compilation of the best goals in football history.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Alex Martin",
|
||||
"vues": 5000,
|
||||
"timeAgo": "3 hours"
|
||||
},
|
||||
{
|
||||
"id": 38,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 2,
|
||||
"title": "Basketball Dunk Contest Highlights",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Watch the best dunks from the latest dunk contest.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Jordan Lee",
|
||||
"vues": 4500,
|
||||
"timeAgo": "5 hours"
|
||||
},
|
||||
{
|
||||
"id": 39,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 3,
|
||||
"title": "Epic Tennis Rallies",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "A look at some of the most intense rallies in tennis.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Serena West",
|
||||
"vues": 4700,
|
||||
"timeAgo": "1 day"
|
||||
},
|
||||
{
|
||||
"id": 40,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 4,
|
||||
"title": "Marathon Motivation",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Get inspired by these marathon runners.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Eliud Kip",
|
||||
"vues": 3800,
|
||||
"timeAgo": "2 days"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"title": "Best Volleyball Spikes",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Watch these powerful volleyball spikes in action.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Misty May",
|
||||
"vues": 4200,
|
||||
"timeAgo": "3 days"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"title": "Cycling Through The Alps",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Experience the thrill of cycling in the Alps.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Lance Ryder",
|
||||
"vues": 3900,
|
||||
"timeAgo": "4 days"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"title": "Cricket's Greatest Hits",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "A look at some of the most memorable moments in cricket.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Sachin Kumar",
|
||||
"vues": 4400,
|
||||
"timeAgo": "5 days"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"title": "Top MMA Knockouts",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "The most shocking knockouts in MMA history.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Conor Mac",
|
||||
"vues": 5000,
|
||||
"timeAgo": "6 days"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"title": "F1 Racing Highlights",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "A thrilling recap of the latest Formula 1 races.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Lewis Ham",
|
||||
"vues": 4800,
|
||||
"timeAgo": "1 week"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"title": "Golf's Most Amazing Shots",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Witness the most incredible shots in golf.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Tiger Woods",
|
||||
"vues": 5300,
|
||||
"timeAgo": "1 week"
|
||||
}
|
||||
],
|
||||
"mostBoughtVideos": [
|
||||
{
|
||||
"id": 41,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 11,
|
||||
"title": "Football Training Drills",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Master the best football drills for every position.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"name": "Pep Guardiola",
|
||||
"vues": 6000,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 42,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 12,
|
||||
"title": "Advanced Basketball Techniques",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Learn advanced techniques to improve your game.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Kobe Bryant",
|
||||
"vues": 5500,
|
||||
"timeAgo": "4 hours"
|
||||
},
|
||||
{
|
||||
"id": 43,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 13,
|
||||
"title": "Perfecting Your Tennis Serve",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Tips and tricks to perfect your tennis serve.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Roger Federer",
|
||||
"vues": 5100,
|
||||
"timeAgo": "6 hours"
|
||||
},
|
||||
{
|
||||
"id": 44,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 14,
|
||||
"title": "Marathon Nutrition Guide",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Essential nutrition tips for marathon runners.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Meb Keflezighi",
|
||||
"vues": 4800,
|
||||
"timeAgo": "1 day"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"title": "Volleyball Defense Mastery",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Become a defensive powerhouse in volleyball.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Kerri Walsh",
|
||||
"vues": 4700,
|
||||
"timeAgo": "2 days"
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
"title": "Ultimate Cycling Techniques",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Improve your cycling skills with these techniques.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Chris Froome",
|
||||
"vues": 4600,
|
||||
"timeAgo": "3 days"
|
||||
},
|
||||
{
|
||||
"id": 17,
|
||||
"title": "Mastering Spin Bowling",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Learn the art of spin bowling in cricket.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Shane Warne",
|
||||
"vues": 5200,
|
||||
"timeAgo": "4 days"
|
||||
},
|
||||
{
|
||||
"id": 18,
|
||||
"title": "MMA Grappling Techniques",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Dominate the ground game with these techniques.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Khabib Nur",
|
||||
"vues": 5300,
|
||||
"timeAgo": "5 days"
|
||||
},
|
||||
{
|
||||
"id": 19,
|
||||
"title": "F1 Pit Stop Secrets",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Learn the strategies behind a perfect F1 pit stop.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Sebastian Vettel",
|
||||
"vues": 5400,
|
||||
"timeAgo": "6 days"
|
||||
},
|
||||
{
|
||||
"id": 20,
|
||||
"title": "Golf Putting Techniques",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Improve your putting with these expert tips.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Phil Mickelson",
|
||||
"vues": 5500,
|
||||
"timeAgo": "1 week"
|
||||
}
|
||||
],
|
||||
"mostSharedVideos": [
|
||||
{
|
||||
"id": 45,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 21,
|
||||
"title": "Soccer Match Replays",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Watch full replays of the latest soccer matches.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Cristiano Ronaldo",
|
||||
"vues": 6000,
|
||||
"timeAgo": "1 hour"
|
||||
},
|
||||
{
|
||||
"id": 46,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 22,
|
||||
"title": "Basketball Trick Shots",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "The most incredible trick shots in basketball.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Steph Curry",
|
||||
"vues": 5900,
|
||||
"timeAgo": "3 hours"
|
||||
},
|
||||
{
|
||||
"id": 47,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 23,
|
||||
"title": "Tennis Grand Slam Finals",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Relive the excitement of Grand Slam tennis finals.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Novak Djokovic",
|
||||
"vues": 5800,
|
||||
"timeAgo": "5 hours"
|
||||
},
|
||||
{
|
||||
"id": 48,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 24,
|
||||
"title": "Running Tips for Beginners",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Get started with running with these beginner tips.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Usain Bolt",
|
||||
"vues": 5700,
|
||||
"timeAgo": "1 day"
|
||||
},
|
||||
{
|
||||
"id": 25,
|
||||
"title": "Beach Volleyball Highlights",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Catch the best moments from beach volleyball matches.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "April Ross",
|
||||
"vues": 5600,
|
||||
"timeAgo": "2 days"
|
||||
},
|
||||
{
|
||||
"id": 26,
|
||||
"title": "Mountain Biking Adventures",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Experience the thrill of mountain biking.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Danny MacAskill",
|
||||
"vues": 5500,
|
||||
"timeAgo": "3 days"
|
||||
},
|
||||
{
|
||||
"id": 27,
|
||||
"title": "Cricket World Cup Highlights",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "The most thrilling moments from the Cricket World Cup.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Virat Kohli",
|
||||
"vues": 5400,
|
||||
"timeAgo": "4 days"
|
||||
},
|
||||
{
|
||||
"id": 28,
|
||||
"title": "MMA Fight Replays",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Watch full replays of the most intense MMA fights.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Anderson Silva",
|
||||
"vues": 5300,
|
||||
"timeAgo": "5 days"
|
||||
},
|
||||
{
|
||||
"id": 29,
|
||||
"title": "F1 Crash Compilation",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "A compilation of the most shocking F1 crashes.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Michael Schumacher",
|
||||
"vues": 5200,
|
||||
"timeAgo": "6 days"
|
||||
},
|
||||
{
|
||||
"id": 30,
|
||||
"title": "Golf Tips for Beginners",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Essential tips for those new to golf.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Jack Nicklaus",
|
||||
"vues": 5100,
|
||||
"timeAgo": "1 week"
|
||||
}
|
||||
],
|
||||
"mostViewedVideos": [
|
||||
{
|
||||
"id": 49,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 31,
|
||||
"title": "Soccer's Greatest Goals",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "A look at the greatest goals ever scored in soccer.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"name": "Lionel Messi",
|
||||
"vues": 7000,
|
||||
"timeAgo": "30 minutes"
|
||||
},
|
||||
{
|
||||
"id": 32,
|
||||
"title": "Best of Basketball Finals",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Relive the best moments from recent basketball finals.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "LeBron James",
|
||||
"vues": 6900,
|
||||
"timeAgo": "1 hour"
|
||||
},
|
||||
{
|
||||
"id": 33,
|
||||
"title": "Tennis Serve Speed Records",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Check out the fastest serves ever recorded in tennis.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Andy Roddick",
|
||||
"vues": 6800,
|
||||
"timeAgo": "2 hours"
|
||||
},
|
||||
{
|
||||
"id": 50,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 34,
|
||||
"title": "Running in Extreme Weather",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Tips for running in various weather conditions.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Mo Farah",
|
||||
"vues": 6700,
|
||||
"timeAgo": "3 hours"
|
||||
},
|
||||
{
|
||||
"id": 51,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 35,
|
||||
"title": "Volleyball Team Strategies",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "Learn advanced team strategies for volleyball.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Giba Godoy",
|
||||
"vues": 6600,
|
||||
"timeAgo": "4 hours"
|
||||
},
|
||||
{
|
||||
"id": 52,
|
||||
"title": "Amazing Video Title",
|
||||
"id": 36,
|
||||
"title": "Cycling Gear Tips",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "This is a brief description of the video content.",
|
||||
"description": "A guide to choosing the best cycling gear.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "John Doe",
|
||||
"vues": 1200,
|
||||
"timeAgo": "2 hours"
|
||||
"name": "Peter Sagan",
|
||||
"vues": 6500,
|
||||
"timeAgo": "1 day"
|
||||
},
|
||||
{
|
||||
"id": 37,
|
||||
"title": "Cricket Batting Techniques",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Improve your batting with these cricket techniques.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Brian Lara",
|
||||
"vues": 6400,
|
||||
"timeAgo": "2 days"
|
||||
},
|
||||
{
|
||||
"id": 38,
|
||||
"title": "MMA Striking Combinations",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Learn effective striking combinations in MMA.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Georges St-Pierre",
|
||||
"vues": 6300,
|
||||
"timeAgo": "3 days"
|
||||
},
|
||||
{
|
||||
"id": 39,
|
||||
"title": "F1 Overtakes Compilation",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "The most exciting overtakes in F1 history.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Ayrton Senna",
|
||||
"vues": 6200,
|
||||
"timeAgo": "4 days"
|
||||
},
|
||||
{
|
||||
"id": 40,
|
||||
"title": "Golf Swing Analysis",
|
||||
"thumbnail": "src/views/explorer/ThumbnailImage.png",
|
||||
"description": "Breakdown of the best golf swings.",
|
||||
"profileImage": "src/views/explorer/ThumbnailImage.png",
|
||||
"name": "Rory McIlroy",
|
||||
"vues": 6100,
|
||||
"timeAgo": "5 days"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user