dynamisation du code

.idea/workspace.xml

@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="5847035d-0a9b-4d26-a129-e3ed88eb8bd7" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/DefaultPlaylist.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/frontend/src/stores/dataStore.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/LectureList.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/LectureList.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/Player.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/Player.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/Playlist.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/Playlist.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/SearchPreview.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/SearchPreview.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/items/InputSearch.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/InputSearch.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/items/Miniature.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/Miniature.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/items/MiniatureList.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/MiniatureList.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/items/PlaylistItem.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/PlaylistItem.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/items/UserLoginInfo.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/UserLoginInfo.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/stores/globalStore.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/stores/globalStore.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/views/Home.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/views/Home.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/views/HomeDesktop.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/views/HomeDesktop.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/views/HomeTablet.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/views/HomeTablet.vue" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="SCSS File" />
+        <option value="TypeScript File" />
+        <option value="Vue Composition API Component" />
+      </list>
+    </option>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 2
+}</component>
+  <component name="ProjectId" id="2tXfL9BjUPbyXVFkt7SA8WxNDUk" />
+  <component name="ProjectLevelVcsManager">
+    <ConfirmationsSetting value="2" id="Add" />
+  </component>
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;frontend-0.2.0&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/Users/gabriel/Documents/GitHub/chopin/frontend/src/views&quot;,
+    &quot;list.type.of.created.stylesheet&quot;: &quot;SCSS&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/Users/gabriel/Documents/GitHub/chopin/frontend/node_modules/typescript/lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  },
+  &quot;keyToStringList&quot;: {
+    &quot;vue.recent.templates&quot;: [
+      &quot;Vue Composition API Component&quot;
+    ]
+  }
+}</component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/frontend/src/views" />
+      <recent name="$PROJECT_DIR$/frontend/src/items" />
+      <recent name="$PROJECT_DIR$/frontend/src/components" />
+    </key>
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/frontend/src/assets/Icons" />
+    </key>
+  </component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-js-predefined-d6986cc7102b-1632447f56bf-JavaScript-WS-243.25659.40" />
+      </set>
+    </attachedChunks>
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="5847035d-0a9b-4d26-a129-e3ed88eb8bd7" name="Changes" comment="" />
+      <created>1740503280401</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1740503280401</updated>
+      <workItem from="1740503281735" duration="34792000" />
+      <workItem from="1740931209372" duration="2409000" />
+      <workItem from="1740934406955" duration="5718000" />
+      <workItem from="1740989873081" duration="10636000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>

frontend/.vite/deps/_metadata.json

@@ -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"
+    }
+  }
+}

frontend/.vite/deps/package.json

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

frontend/src/assets/Icons/DefaultPlaylist.vue

@@ -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>

frontend/src/components/LectureList.vue

@@ -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"
+          v-for="lecture in lecturesList.lectures"
-          title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
+          :thumbnail="lecture.thumbnail"
-          name="LofiGirl"
+          :title="lecture.title"
-      />
+          :name="lecture.name"
-      <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"
       />
     </div>
   </div>

frontend/src/components/Player.vue

@@ -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">

frontend/src/components/Playlist.vue

@@ -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"
+          v-for="playlist in playlists.playlists"
-          img-src="youtube"
+          :key="playlist.name"
-      />
+          :title="playlist.name"
-      <PlaylistItem
+          :imgSrc="playlist.origin"
-          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"
       />
     </div>
   </div>
@@ -82,7 +51,6 @@ const props = defineProps({
   &__content {
     display: flex;
     flex-direction: column;
-    gap: 20px;
     width: 100%;
     height: 100%;
     padding: 30px;

frontend/src/components/SearchPreview.vue

@@ -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"
+          v-for="video in search.videos"
-          title="lofi hip hop mix 📚 beats to relax/study to (Part 1)"
+          :key="video.title"
-          name="LofiGirl"
+          :thumbnail="video.thumbnail"
-      />
+          :title="video.title"
-      <Miniature
+          :name="video.name"
-          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"
       />
     </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;

frontend/src/items/InputSearch.vue

@@ -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>
 

frontend/src/items/Miniature.vue

@@ -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 />

frontend/src/items/MiniatureList.vue

@@ -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>

frontend/src/items/PlaylistItem.vue

@@ -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;

frontend/src/items/UserLoginInfo.vue

@@ -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>
 

frontend/src/stores/dataStore.ts

@@ -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 = [];
+        }
+    }
+});

frontend/src/stores/globalStore.ts

@@ -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

frontend/src/views/Home.vue

@@ -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>
 

frontend/src/views/HomeDesktop.vue

@@ -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>

frontend/src/views/HomeTablet.vue

@@ -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">