subsonics/chopin
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dynamisation du code

Browse Source
This commit is contained in:
Gabriel Goldbronn
2025-03-05 23:42:45 +01:00
parent b8e682f333
commit a540d12ed2
18 changed files with 377 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/.vite/deps/_metadata.json Normal file
View File

@@ -0,0 +1,25 @@
{
"hash": "e3fc6723",
"configHash": "0efc9154",
"lockfileHash": "61d6d597",
"browserHash": "9c288342",
"optimized": {
"vue": {
"src": "../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js",
"fileHash": "6c0b41d9",
"needsInterop": false
},
"pinia": {
"src": "../../node_modules/pinia/dist/pinia.mjs",
"file": "pinia.js",
"fileHash": "a962c13a",
"needsInterop": false
}
},
"chunks": {
"chunk-IJV5NOMV": {
"file": "chunk-IJV5NOMV.js"
}
}
}

3
frontend/.vite/deps/package.json Normal file
View File

@@ -0,0 +1,3 @@
{
"type": "module"
}

15
frontend/src/assets/Icons/DefaultPlaylist.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
</script>
<template>
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="68" height="68" rx="14" stroke="#332429" stroke-width="2"/>
<path d="M32 41V29.3554C32 28.8738 32 28.6331 32.0876 28.4378C32.1648 28.2656 32.2892 28.1189 32.4463 28.0144C32.6245 27.8959 32.862 27.8563 33.337 27.7771L42.137 26.3105C42.7779 26.2036 43.0984 26.1502 43.3482 26.243C43.5674 26.3244 43.7511 26.48 43.8674 26.6829C44 26.914 44 27.2389 44 27.8887V39M32 41C32 42.6568 30.6568 44 29 44C27.3432 44 26 42.6568 26 41C26 39.3431 27.3432 38 29 38C30.6568 38 32 39.3431 32 41ZM44 39C44 40.6568 42.6569 42 41 42C39.3431 42 38 40.6568 38 39C38 37.3431 39.3431 36 41 36C42.6569 36 44 37.3431 44 39Z" stroke="#1F181A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<style scoped>
</style>

60
frontend/src/components/LectureList.vue
View File

@@ -2,6 +2,7 @@
import MiniatureList from "../items/MiniatureList.vue";
import {defineProps} from "vue";
import {lectureListStore} from "../stores/dataStore.ts";
const props = defineProps({
popup: {
@@ -9,65 +10,18 @@ const props = defineProps({
default: true
}
});
const lecturesList = lectureListStore();
</script>
<template>
<div :class="props.popup == true ? 'lecture-list--popup' : 'lecture-list'">
<div class="lecture-list__content">
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<MiniatureList
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
v-for="lecture in lecturesList.lectures"
:thumbnail="lecture.thumbnail"
:title="lecture.title"
:name="lecture.name"
/>
</div>
</div>

16
frontend/src/components/Player.vue
View File

@@ -8,6 +8,14 @@ import LeaveIcon from "../assets/Icons/LeaveIcon.vue";
import PrevIcon from "../assets/Icons/PrevIcon.vue";
import NextIcon from "../assets/Icons/NextIcon.vue";
import PlayIcon from "../assets/Icons/PlayIcon.vue";
import PauseIcon from "../assets/Icons/PauseIcon.vue";
import {ref} from "vue";
const isPlaying = ref(true);
function togglePlay() {
isPlaying.value = !isPlaying.value;
}
</script>
<template>
@@ -22,7 +30,13 @@ import PlayIcon from "../assets/Icons/PlayIcon.vue";
</div>
<div class="player__controls">
<button><PrevIcon /></button>
<button class="play_button"><PlayIcon /></button>
<button
class="play_button"
@click="togglePlay"
>
<PlayIcon v-if="isPlaying"/>
<PauseIcon v-else />
</button>
<button><NextIcon /></button>
</div>
<div class="player__actions">

46
frontend/src/components/Playlist.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { defineProps } from 'vue';
import PlaylistItem from "../items/PlaylistItem.vue";
import {playlistsListStore} from "../stores/dataStore.ts";
const props = defineProps({
popup: {
@@ -8,49 +9,17 @@ const props = defineProps({
default: true
}
});
const playlists = playlistsListStore();
</script>
<template>
<div :class="props.popup == true ? 'playlist--popup' : 'playlist'">
<div class="playlist__content">
<PlaylistItem
title="Le japon sa bouge vraiment beaucoup"
img-src="youtube"
/>
<PlaylistItem
title="Le japon sa bouge vraiment beaucoup"
img-src="youtube"
/>
<PlaylistItem
title="Le japon sa bouge vraiment beaucoup"
img-src="youtube"
/>
<PlaylistItem
title="Le japon sa bouge vraiment beaucoup"
img-src="youtube"
/>
<PlaylistItem
title="Le japon sa bouge vraiment beaucoup"
img-src="youtube"
/>
<PlaylistItem
title="Le japon sa bouge vraiment beaucoup"
img-src="youtube"
/>
<PlaylistItem
title="Le japon sa bouge vraiment beaucoup"
img-src="youtube"
/>
<PlaylistItem
title="Le japon sa bouge vraiment beaucoup"
img-src="youtube"
/>
<PlaylistItem
title="Le japon sa bouge vraiment beaucoup"
img-src="youtube"
/>
<PlaylistItem
title="Le japon sa bouge vraiment beaucoup"
img-src="youtube"
v-for="playlist in playlists.playlists"
:key="playlist.name"
:title="playlist.name"
:imgSrc="playlist.origin"
/>
</div>
</div>
@@ -82,7 +51,6 @@ const props = defineProps({
&__content {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
height: 100%;
padding: 30px;

47
frontend/src/components/SearchPreview.vue
View File

@@ -1,50 +1,20 @@
<script setup lang="ts">
import Miniature from "../items/Miniature.vue";
import {searchStore} from "../stores/dataStore.ts";
const search = searchStore();
</script>
<template>
<div class="search-preview">
<div class="search-preview__content">
<Miniature
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<Miniature
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<Miniature
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<Miniature
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<Miniature
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<Miniature
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<Miniature
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
/>
<Miniature
imgSrc="https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg"
title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
name="LofiGirl"
v-for="video in search.videos"
:key="video.title"
:thumbnail="video.thumbnail"
:title="video.title"
:name="video.name"
/>
</div>
</div>
@@ -65,7 +35,6 @@ import Miniature from "../items/Miniature.vue";
grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
gap: 20px;
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
overflow: scroll;

7
frontend/src/items/InputSearch.vue
View File

@@ -1,8 +1,9 @@
<script setup lang="ts">
import {lectureListIsOpen, playlistsIsOpen, useSearchStore} from '../stores/globalStore.ts'
import {lectureListIsOpen, playlistsIsOpen} from '../stores/globalStore.ts'
import {searchStore} from '../stores/dataStore.ts'
import SearchIcon from "../assets/Icons/SearchIcon.vue";
const searchStore = useSearchStore();
const search = searchStore();
const lectureList = lectureListIsOpen();
const playlists = playlistsIsOpen();
@@ -10,7 +11,7 @@ const playlists = playlistsIsOpen();
const updateSearch = (event: Event) => {
lectureList.closeLectureList();
playlists.closePlaylists();
searchStore.updateSearch((event.target as HTMLInputElement).value);
search.updateSearch((event.target as HTMLInputElement).value);
};
</script>

4
frontend/src/items/Miniature.vue
View File

@@ -4,7 +4,7 @@ import Add from "../assets/Icons/Add.vue";
import Play from "../assets/Icons/Play.vue";
const props = defineProps<{
imgSrc: string;
thumbnail: string;
title: string;
name: string;
}>();
@@ -13,7 +13,7 @@ const props = defineProps<{
<template>
<div class="miniature">
<div class="miniature__img">
<img :src="props.imgSrc" alt="Video Thumbnail" />
<img :src="props.thumbnail" alt="Video Thumbnail" />
<div class="miniature__img__overlay">
<button>
<Add />

4
frontend/src/items/MiniatureList.vue
View File

@@ -7,7 +7,7 @@ import Add from "../assets/Icons/Add.vue";
import Top from "../assets/Icons/Top.vue";
const props = defineProps<{
imgSrc: string;
thumbnail: string;
title: string;
name: string;
}>();
@@ -39,7 +39,7 @@ onBeforeUnmount(() => {
<template>
<div class="miniature-list">
<div class="miniature-list__img">
<img :src="props.imgSrc" alt="Video Thumbnail"/>
<img :src="props.thumbnail" alt="Video Thumbnail"/>
</div>
<div class="miniature-list__info">
<p class="miniature-list__info__title" :title="props.title">{{ props.title }}</p>

5
frontend/src/items/PlaylistItem.vue
View File

@@ -5,9 +5,10 @@ import YoutubePlaylist from "../assets/Icons/YoutubePlaylist.vue";
import Trash from "../assets/Icons/Trash.vue";
import Add from "../assets/Icons/Add.vue";
import Play from "../assets/Icons/Play.vue";
import DefaultPlaylist from "../assets/Icons/DefaultPlaylist.vue";
const props = defineProps<{
imgSrc: 'youtube';
imgSrc: string;
title: string;
}>();
@@ -38,6 +39,7 @@ onBeforeUnmount(() => {
<template>
<div class="play-list">
<YoutubePlaylist v-if="imgSrc == 'youtube'" />
<DefaultPlaylist v-else />
<div class="play-list__info">
<p class="play-list__info__title" :title="props.title">{{ props.title }}</p>
</div>
@@ -80,6 +82,7 @@ onBeforeUnmount(() => {
gap: 10px;
flex: 1 1 auto;
min-width: 0;
width: 100%;
&__title {
overflow: hidden;

5
frontend/src/items/UserLoginInfo.vue
View File

@@ -1,13 +1,14 @@
<script setup lang="ts">
import UserIcon from "../assets/Icons/UserIcon.vue";
import {userOnlineStore} from "../stores/dataStore.ts";
const userLoginInfo = 2;
const userLoginInfo = userOnlineStore();
</script>
<template>
<div class="user-login-info">
<UserIcon />
<p class="sub-text">{{ userLoginInfo }}</p>
<p class="sub-text">{{ userLoginInfo.nbUser }}</p>
</div>
</template>

161
frontend/src/stores/dataStore.ts Normal file
View File

@@ -0,0 +1,161 @@
import {defineStore} from 'pinia';
export const userOnlineStore = defineStore('userOnline', {
state: () => ({
nbUser: 1
}),
actions: {
updateUserOnline(nbUser: number) {
this.nbUser = nbUser;
}
}
});
export const searchStore = defineStore('search', {
state: () => ({
searchQuery: '',
videos: [
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 1)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 2)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 3)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 4)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
]
}),
actions: {
updateSearch(query: string) {
this.searchQuery = query;
},
updateVideosSearch(videoList: { name: string; title: string; thumbnail: string }[]) {
this.videos = videoList;
},
clearVideosSearch() {
this.videos = [];
}
}
});
export const playlistsListStore = defineStore('playlist', {
state: () => ({
playlists: [
{
name: 'Le japon ça pleure beaucoup',
origin: 'YouTube',
},
{
name: 'Le japon ça bouge vraiment beaucoup',
origin: 'YouTube',
},
{
name: 'Cofee time',
origin: 'YouTube',
},
{
name: 'Pop 20',
origin: 'YouTube',
},
]
}),
actions: {
updatePlaylistsList(playlist: { name: string; origin: 'YouTube' }[]) {
this.playlists = playlist;
},
clearPlaylistsList() {
this.playlists = [];
}
}
});
export const playlist = defineStore('playlist', {
state: () => ({
playlist: [
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 1)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 2)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 3)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 4)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
]
}),
actions: {
updatePlaylist(videoList: { name: string; title: string; thumbnail: string }[]) {
this.playlist = videoList;
},
clearPlaylist() {
this.playlist = [];
}
}
})
export const lectureListStore = defineStore('lecture', {
state: () => ({
lectures: [
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 1)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 2)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 3)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 4)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
]
}),
actions: {
updateLectureList(lecture: { name: string; title: string; thumbnail: string }[]) {
this.lectures = lecture;
},
clearLectureList() {
this.lectures = [];
}
}
});

11
frontend/src/stores/globalStore.ts
View File

@@ -1,16 +1,5 @@
import { defineStore } from 'pinia';
export const useSearchStore = defineStore('search', {
state: () => ({
searchQuery: ''
}),
actions: {
updateSearch(query: string) {
this.searchQuery = query;
}
}
});
export const playlistsIsOpen = defineStore('playlistsIsOpen', {
state: () => ({
isOpen: false

7
frontend/src/views/Home.vue
View File

@@ -3,11 +3,12 @@ import Header from "../components/Header.vue";
import InfoHeader from "../components/InfoHeader.vue";
import Player from "../components/Player.vue";
import SearchPreview from "../components/SearchPreview.vue";
import { useSearchStore, lectureListIsOpen, playlistsIsOpen } from "../stores/globalStore.ts";
import { lectureListIsOpen, playlistsIsOpen } from "../stores/globalStore.ts";
import Playlist from "../components/Playlist.vue";
import LectureList from "../components/LectureList.vue";
import {searchStore} from "../stores/dataStore.ts";
const searchStore = useSearchStore();
const search = searchStore();
const lectureList = lectureListIsOpen();
const playlists = playlistsIsOpen();
</script>
@@ -17,7 +18,7 @@ const playlists = playlistsIsOpen();
<InfoHeader />
<div class="content">
<Transition name="slide-up">
<component :is="searchStore.searchQuery == '' ? Player : SearchPreview" />
<component :is="search.searchQuery == '' ? Player : SearchPreview" />
</Transition>
</div>

6
frontend/src/views/HomeDesktop.vue
View File

@@ -3,11 +3,11 @@ import Header from "../components/Header.vue";
import InfoHeader from "../components/InfoHeader.vue";
import Player from "../components/Player.vue";
import SearchPreview from "../components/SearchPreview.vue";
import {useSearchStore, lectureListIsOpen, playlistsIsOpen} from "../stores/globalStore.ts";
import Playlist from "../components/Playlist.vue";
import LectureList from "../components/LectureList.vue";
import {searchStore} from "../stores/dataStore.ts";
const searchStore = useSearchStore();
const search = searchStore();
</script>
<template>
@@ -20,7 +20,7 @@ const searchStore = useSearchStore();
<Header/>
<div class="home__center__content">
<Transition name="slide-up">
<component :is="searchStore.searchQuery == '' ? Player : SearchPreview"/>
<component :is="search.searchQuery == '' ? Player : SearchPreview"/>
</Transition>
</div>
</div>

7
frontend/src/views/HomeTablet.vue
View File

@@ -3,11 +3,12 @@ import Header from "../components/Header.vue";
import InfoHeader from "../components/InfoHeader.vue";
import Player from "../components/Player.vue";
import SearchPreview from "../components/SearchPreview.vue";
import {useSearchStore, lectureListIsOpen, playlistsIsOpen} from "../stores/globalStore.ts";
import { lectureListIsOpen} from "../stores/globalStore.ts";
import Playlist from "../components/Playlist.vue";
import LectureList from "../components/LectureList.vue";
import {searchStore} from "../stores/dataStore.ts";
const searchStore = useSearchStore();
const search = searchStore();
const lectureList = lectureListIsOpen();
</script>
@@ -21,7 +22,7 @@ const lectureList = lectureListIsOpen();
<Header/>
<div class="home__center__content">
<Transition name="slide-up">
<component :is="searchStore.searchQuery == '' ? Player : SearchPreview"/>
<component :is="search.searchQuery == '' ? Player : SearchPreview"/>
</Transition>
</div>
<Transition name="popups">