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

Remove /explorer 'Explorer'

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-10-06 01:36:32 -04:00
parent 02d5ef4371
commit 34d51f2c85
6 changed files with 3 additions and 759 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/router/router.js
View File

@@ -16,7 +16,6 @@ import Wallet from '../views/main/Wallet.vue'
import ProfilePage from '@/views/profile/ProfilePage.vue' import ProfilePage from '@/views/profile/ProfilePage.vue'
import CreatorList from '@/views/browser/CreatorList.vue' import CreatorList from '@/views/browser/CreatorList.vue'
import PostContent from "@/views/contents/PostContent.vue"; import PostContent from "@/views/contents/PostContent.vue";
import Explorer from "@/views/explorer/explorer.vue";
import {useAuthStore} from "@/stores/authStore.js"; import {useAuthStore} from "@/stores/authStore.js";
import CreatorLayout from "@/views/creators/CreatorLayout.vue"; import CreatorLayout from "@/views/creators/CreatorLayout.vue";
@@ -142,12 +141,6 @@ const routes = [
name: 'profile', name: 'profile',
component: ProfilePage, component: ProfilePage,
meta: {requiresAuth: true} meta: {requiresAuth: true}
},
{
path: '/explorer',
name: 'explorer',
component: Explorer,
} }
] ]

36
src/views/explorer/ExplorerCard.vue
View File

@@ -1,36 +0,0 @@
<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">{{ content.title }}</h3>
</div>
<img v-if="content.urls !== null" :src="content.urls" alt="thumbnail" class="w-full ">
<div class="p-3">
<p class="text-gray-600 mb-4">{{ content.description }}</p>
<div class="flex items-center">
<router-link class="capitalize px-2" :to="`/@${props.content.createdByName}`">
<img :src="content.createdByPortraitUrl" alt="profile image" class="w-10 h-10 rounded-full">
</router-link>
<div class="ml-4">
<h4 class="text-md font-bold">{{ content.name }}</h4>
<div class="text-gray-600 text-sm">
<span>{{ content.reactions.length }} reactions</span> -
<span>{{ time_ago(content.createdAt) }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {time_ago} from "@/internal_time_ago.js";
const props = defineProps({
content: {
type: Object,
required: true
}
});
</script>

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

@@ -1,275 +0,0 @@
<script setup>
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 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);
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);
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 < mostReactedContent.value.length) {
currentRangeViewed.value += videosPerRowViewed.value;
}
};
// 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;
}
};
// Fonction pour passer à l'ensemble suivant de vidéos (Most Bought)
const nextRowBought = () => {
if (currentRangeBought.value + videosPerRowBought.value < mostBoughtVideos.length) {
currentRangeBought.value += videosPerRowBought.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 >= mostReactedContent.length) {
currentRangeViewed.value = Math.max(mostReactedContent.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 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 -->
<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="(content, index) in mostReactedContent.slice(currentRangeViewed, currentRangeViewed + videosPerRowViewed)"
:key="content.id"
:content="content"
/>
</div>
</div>
<div class="flex flex-col justify-center px-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>
<!-- Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Viewed) -->
<v-btn @click="nextRowViewed" :disabled="currentRangeViewed + videosPerRowViewed.value >= mostReactedContent.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 Viewed) -->
<div class="flex justify-center mt-4">
<v-btn icon @click="toggleVideoDisplayViewed">
<v-icon>{{ chevronIconViewed }}</v-icon>
</v-btn>
</div>
<!-- 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&#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">-->
<!-- &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>-->
<!-- &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>
<style scoped>
.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>

410
src/views/explorer/videos.json
View File

@@ -1,410 +0,0 @@
{
"mostLikedVideos": [
{
"id": 1,
"title": "Top 10 Football Goals",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "A compilation of the best goals in football history.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Alex Martin",
"vues": 5000,
"timeAgo": "3 hours"
},
{
"id": 2,
"title": "Basketball Dunk Contest Highlights",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Watch the best dunks from the latest dunk contest.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Jordan Lee",
"vues": 4500,
"timeAgo": "5 hours"
},
{
"id": 3,
"title": "Epic Tennis Rallies",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "A look at some of the most intense rallies in tennis.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Serena West",
"vues": 4700,
"timeAgo": "1 day"
},
{
"id": 4,
"title": "Marathon Motivation",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Get inspired by these marathon runners.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Eliud Kip",
"vues": 3800,
"timeAgo": "2 days"
},
{
"id": 5,
"title": "Best Volleyball Spikes",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Watch these powerful volleyball spikes in action.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Misty May",
"vues": 4200,
"timeAgo": "3 days"
},
{
"id": 6,
"title": "Cycling Through The Alps",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Experience the thrill of cycling in the Alps.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Lance Ryder",
"vues": 3900,
"timeAgo": "4 days"
},
{
"id": 7,
"title": "Cricket's Greatest Hits",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "A look at some of the most memorable moments in cricket.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Sachin Kumar",
"vues": 4400,
"timeAgo": "5 days"
},
{
"id": 8,
"title": "Top MMA Knockouts",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "The most shocking knockouts in MMA history.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Conor Mac",
"vues": 5000,
"timeAgo": "6 days"
},
{
"id": 9,
"title": "F1 Racing Highlights",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "A thrilling recap of the latest Formula 1 races.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Lewis Ham",
"vues": 4800,
"timeAgo": "1 week"
},
{
"id": 10,
"title": "Golf's Most Amazing Shots",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Witness the most incredible shots in golf.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Tiger Woods",
"vues": 5300,
"timeAgo": "1 week"
}
],
"mostBoughtVideos": [
{
"id": 11,
"title": "Football Training Drills",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Master the best football drills for every position.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Pep Guardiola",
"vues": 6000,
"timeAgo": "2 hours"
},
{
"id": 12,
"title": "Advanced Basketball Techniques",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Learn advanced techniques to improve your game.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Kobe Bryant",
"vues": 5500,
"timeAgo": "4 hours"
},
{
"id": 13,
"title": "Perfecting Your Tennis Serve",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Tips and tricks to perfect your tennis serve.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Roger Federer",
"vues": 5100,
"timeAgo": "6 hours"
},
{
"id": 14,
"title": "Marathon Nutrition Guide",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Essential nutrition tips for marathon runners.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Meb Keflezighi",
"vues": 4800,
"timeAgo": "1 day"
},
{
"id": 15,
"title": "Volleyball Defense Mastery",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Become a defensive powerhouse in volleyball.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Kerri Walsh",
"vues": 4700,
"timeAgo": "2 days"
},
{
"id": 16,
"title": "Ultimate Cycling Techniques",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Improve your cycling skills with these techniques.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Chris Froome",
"vues": 4600,
"timeAgo": "3 days"
},
{
"id": 17,
"title": "Mastering Spin Bowling",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Learn the art of spin bowling in cricket.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Shane Warne",
"vues": 5200,
"timeAgo": "4 days"
},
{
"id": 18,
"title": "MMA Grappling Techniques",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Dominate the ground game with these techniques.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Khabib Nur",
"vues": 5300,
"timeAgo": "5 days"
},
{
"id": 19,
"title": "F1 Pit Stop Secrets",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Learn the strategies behind a perfect F1 pit stop.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Sebastian Vettel",
"vues": 5400,
"timeAgo": "6 days"
},
{
"id": 20,
"title": "Golf Putting Techniques",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Improve your putting with these expert tips.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Phil Mickelson",
"vues": 5500,
"timeAgo": "1 week"
}
],
"mostSharedVideos": [
{
"id": 21,
"title": "Soccer Match Replays",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Watch full replays of the latest soccer matches.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Cristiano Ronaldo",
"vues": 6000,
"timeAgo": "1 hour"
},
{
"id": 22,
"title": "Basketball Trick Shots",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "The most incredible trick shots in basketball.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Steph Curry",
"vues": 5900,
"timeAgo": "3 hours"
},
{
"id": 23,
"title": "Tennis Grand Slam Finals",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Relive the excitement of Grand Slam tennis finals.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Novak Djokovic",
"vues": 5800,
"timeAgo": "5 hours"
},
{
"id": 24,
"title": "Running Tips for Beginners",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Get started with running with these beginner tips.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Usain Bolt",
"vues": 5700,
"timeAgo": "1 day"
},
{
"id": 25,
"title": "Beach Volleyball Highlights",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Catch the best moments from beach volleyball matches.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "April Ross",
"vues": 5600,
"timeAgo": "2 days"
},
{
"id": 26,
"title": "Mountain Biking Adventures",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Experience the thrill of mountain biking.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Danny MacAskill",
"vues": 5500,
"timeAgo": "3 days"
},
{
"id": 27,
"title": "Cricket World Cup Highlights",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "The most thrilling moments from the Cricket World Cup.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Virat Kohli",
"vues": 5400,
"timeAgo": "4 days"
},
{
"id": 28,
"title": "MMA Fight Replays",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Watch full replays of the most intense MMA fights.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Anderson Silva",
"vues": 5300,
"timeAgo": "5 days"
},
{
"id": 29,
"title": "F1 Crash Compilation",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "A compilation of the most shocking F1 crashes.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Michael Schumacher",
"vues": 5200,
"timeAgo": "6 days"
},
{
"id": 30,
"title": "Golf Tips for Beginners",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Essential tips for those new to golf.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Jack Nicklaus",
"vues": 5100,
"timeAgo": "1 week"
}
],
"mostViewedVideos": [
{
"id": 31,
"title": "Soccer's Greatest Goals",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "A look at the greatest goals ever scored in soccer.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Lionel Messi",
"vues": 7000,
"timeAgo": "30 minutes"
},
{
"id": 32,
"title": "Best of Basketball Finals",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Relive the best moments from recent basketball finals.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "LeBron James",
"vues": 6900,
"timeAgo": "1 hour"
},
{
"id": 33,
"title": "Tennis Serve Speed Records",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Check out the fastest serves ever recorded in tennis.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Andy Roddick",
"vues": 6800,
"timeAgo": "2 hours"
},
{
"id": 34,
"title": "Running in Extreme Weather",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Tips for running in various weather conditions.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Mo Farah",
"vues": 6700,
"timeAgo": "3 hours"
},
{
"id": 35,
"title": "Volleyball Team Strategies",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Learn advanced team strategies for volleyball.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Giba Godoy",
"vues": 6600,
"timeAgo": "4 hours"
},
{
"id": 36,
"title": "Cycling Gear Tips",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "A guide to choosing the best cycling gear.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Peter Sagan",
"vues": 6500,
"timeAgo": "1 day"
},
{
"id": 37,
"title": "Cricket Batting Techniques",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Improve your batting with these cricket techniques.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Brian Lara",
"vues": 6400,
"timeAgo": "2 days"
},
{
"id": 38,
"title": "MMA Striking Combinations",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Learn effective striking combinations in MMA.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Georges St-Pierre",
"vues": 6300,
"timeAgo": "3 days"
},
{
"id": 39,
"title": "F1 Overtakes Compilation",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "The most exciting overtakes in F1 history.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Ayrton Senna",
"vues": 6200,
"timeAgo": "4 days"
},
{
"id": 40,
"title": "Golf Swing Analysis",
"thumbnail": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"description": "Breakdown of the best golf swings.",
"profileImage": "images/hutopymedia/thumbnail/ThumbnailImage.png",
"name": "Rory McIlroy",
"vues": 6100,
"timeAgo": "5 days"
}
]
}

15
src/views/main/Header.vue
View File

@@ -64,17 +64,6 @@
</v-text-field> </v-text-field>
</div> </div>
<!-- Buttons -->
<div v-if="!showSearch" class="absolute-center flex">
<v-btn
variant="plain"
icon
class="flex flex-row justify-center"
@click="explorerHandler"
>
<v-icon>mdi-earth</v-icon>
</v-btn>
</div>
</div> </div>
<div class="flex items-center space-x-4 search-container"> <div class="flex items-center space-x-4 search-container">
@@ -188,10 +177,6 @@ const toggleSearch = () => {
showSearch.value = !showSearch.value; showSearch.value = !showSearch.value;
}; };
const explorerHandler = () => {
router.push('/explorer');
};
const handleClickOutside = (event) => { const handleClickOutside = (event) => {
if (!event.target.closest('.search-container')) { if (!event.target.closest('.search-container')) {
showSearch.value = false; showSearch.value = false;

17
src/views/main/SideBar.vue
View File

@@ -9,14 +9,6 @@ const {locale} = useI18n();
const router = useRouter(); const router = useRouter();
const selectedLanguage = ref(locale.value); const selectedLanguage = ref(locale.value);
const explorerHandler = () => {
router.push('/explorer');
};
const feedHandler = () => {
router.push('/feed');
};
function initializeLocale() { function initializeLocale() {
const preferredLocale = localStorage.getItem('preferredLocale'); const preferredLocale = localStorage.getItem('preferredLocale');
selectedLanguage.value = preferredLocale === null ? locale.value : preferredLocale; selectedLanguage.value = preferredLocale === null ? locale.value : preferredLocale;
@@ -39,13 +31,8 @@ initializeLocale();
<nav class="flex flex-col h-full overflow-y-auto custom-scrollbar bg-white"> <nav class="flex flex-col h-full overflow-y-auto custom-scrollbar bg-white">
<div class="flex justify-center py-3"> <div class="flex justify-center py-3">
<v-btn v-if="authStore.isAuthenticated" variant="plain" class="p-8" @click="feedHandler">
<img src="/images/hutopymedia/icons/feedfollow.svg" alt="feed follow icon"
style="filter: invert(0.5) brightness(0.0); width: 32px; height: 32px;"/>
</v-btn>
<v-btn variant="plain" class="p-8" @click="explorerHandler">
<v-icon style="font-size: 28px;">mdi-earth</v-icon>
</v-btn>
<v-btn <v-btn
variant="text" variant="text"
class="p-0 mx-0 min-w-0" class="p-0 mx-0 min-w-0"