+
@@ -80,6 +82,7 @@ onBeforeUnmount(() => {
gap: 10px;
flex: 1 1 auto;
min-width: 0;
+ width: 100%;
&__title {
overflow: hidden;
diff --git a/frontend/src/items/UserLoginInfo.vue b/frontend/src/items/UserLoginInfo.vue
index bce970b..978577a 100644
--- a/frontend/src/items/UserLoginInfo.vue
+++ b/frontend/src/items/UserLoginInfo.vue
@@ -1,13 +1,14 @@
-
{{ userLoginInfo }}
+
{{ userLoginInfo.nbUser }}
diff --git a/frontend/src/stores/dataStore.ts b/frontend/src/stores/dataStore.ts
new file mode 100644
index 0000000..7946817
--- /dev/null
+++ b/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 = [];
+ }
+ }
+});
\ No newline at end of file
diff --git a/frontend/src/stores/globalStore.ts b/frontend/src/stores/globalStore.ts
index 6f64bf8..621f4ea 100644
--- a/frontend/src/stores/globalStore.ts
+++ b/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
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index c76f712..a315cb4 100644
--- a/frontend/src/views/Home.vue
+++ b/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();
@@ -17,7 +18,7 @@ const playlists = playlistsIsOpen();
-
+
diff --git a/frontend/src/views/HomeDesktop.vue b/frontend/src/views/HomeDesktop.vue
index df01d34..9e7c9dd 100644
--- a/frontend/src/views/HomeDesktop.vue
+++ b/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();
@@ -20,7 +20,7 @@ const searchStore = useSearchStore();
-
+
diff --git a/frontend/src/views/HomeTablet.vue b/frontend/src/views/HomeTablet.vue
index e1143e1..5c8db60 100644
--- a/frontend/src/views/HomeTablet.vue
+++ b/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();
@@ -21,7 +22,7 @@ const lectureList = lectureListIsOpen();