diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index a62f49e..81054d9 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,40 +5,10 @@
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -133,7 +103,7 @@
-
+
diff --git a/frontend/src/components/SearchPreview.vue b/frontend/src/components/SearchPreview.vue
index 5447fa6..a8b8fdc 100644
--- a/frontend/src/components/SearchPreview.vue
+++ b/frontend/src/components/SearchPreview.vue
@@ -2,6 +2,7 @@
import Miniature from "../items/Miniature.vue";
import {searchStore} from "../stores/dataStore.ts";
+import Loader from "../items/Loader.vue";
const search = searchStore();
@@ -10,6 +11,7 @@ const search = searchStore();
diff --git a/frontend/src/items/InputSearch.vue b/frontend/src/items/InputSearch.vue
index 244e58f..70fd5ed 100644
--- a/frontend/src/items/InputSearch.vue
+++ b/frontend/src/items/InputSearch.vue
@@ -2,13 +2,15 @@
import {lectureListIsOpen, playlistsIsOpen} from '../stores/globalStore.ts'
import {searchStore} from '../stores/dataStore.ts'
import SearchIcon from "../assets/Icons/SearchIcon.vue";
-import {onMounted} from "vue";
+import {onMounted, ref} from "vue";
const search = searchStore();
const lectureList = lectureListIsOpen();
const playlists = playlistsIsOpen();
+const inputRef = ref(null);
+
const updateSearch = (event: Event) => {
lectureList.closeLectureList();
playlists.closePlaylists();
@@ -16,14 +18,22 @@ const updateSearch = (event: Event) => {
};
onMounted(() => {
- (document.querySelector('.input') as HTMLInputElement).value = search.searchQuery;
+ if (inputRef.value) {
+ inputRef.value.value = search.searchQuery;
+ }
});
-
+
diff --git a/frontend/src/items/Loader.vue b/frontend/src/items/Loader.vue
new file mode 100644
index 0000000..02371ac
--- /dev/null
+++ b/frontend/src/items/Loader.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/stores/dataStoreFuture.ts b/frontend/src/stores/dataStoreFuture.ts
new file mode 100644
index 0000000..9b463d2
--- /dev/null
+++ b/frontend/src/stores/dataStoreFuture.ts
@@ -0,0 +1,131 @@
+import { defineStore } from 'pinia';
+
+export const userOnlineStore = defineStore('userOnline', {
+ state: () => ({
+ nbUser: null as number | null
+ }),
+ actions: {
+ updateUserOnline(nbUser: number) {
+ this.nbUser = nbUser;
+ }
+ }
+});
+
+export const searchStore = defineStore('search', {
+ state: () => ({
+ searchQuery: '',
+ videos: null as {
+ name: string;
+ title: string;
+ thumbnail: string;
+ duration: string;
+ }[] | null
+ }),
+
+ actions: {
+ updateSearch(query: string) {
+ this.searchQuery = query;
+ },
+ updateVideosSearch(videoList: {
+ name: string;
+ title: string;
+ thumbnail: string;
+ duration: string;
+ }[]) {
+ this.videos = videoList;
+ },
+ clearVideosSearch() {
+ this.videos = [];
+ }
+ }
+});
+
+export const playlistsListStore = defineStore('playlistsList', {
+ state: () => ({
+ playlists: null as {
+ name: string;
+ origin: 'Default' | 'YouTube' | 'Spotify' | 'SoundCloud';
+ }[] | null
+ }),
+
+ actions: {
+ updatePlaylistsList(playlists: {
+ name: string;
+ origin: 'Default' | 'YouTube' | 'Spotify' | 'SoundCloud';
+ }[]) {
+ this.playlists = playlists;
+ },
+ clearPlaylistsList() {
+ this.playlists = [];
+ }
+ }
+});
+
+export const playlistStore = defineStore('playlist', {
+ state: () => ({
+ playlist: null as {
+ name: string;
+ title: string;
+ thumbnail: string;
+ }[] | null
+ }),
+
+ actions: {
+ updatePlaylist(videos: {
+ name: string;
+ title: string;
+ thumbnail: string;
+ }[]) {
+ this.playlist = videos;
+ },
+ clearPlaylist() {
+ this.playlist = [];
+ }
+ }
+});
+
+export const lectureListStore = defineStore('lecture', {
+ state: () => ({
+ lectures: null as {
+ name: string;
+ title: string;
+ thumbnail: string;
+ }[] | null
+ }),
+
+ actions: {
+ updateLectureList(lectures: {
+ name: string;
+ title: string;
+ thumbnail: string;
+ }[]) {
+ this.lectures = lectures;
+ },
+ clearLectureList() {
+ this.lectures = [];
+ }
+ }
+});
+
+export const historyListStore = defineStore('history', {
+ state: () => ({
+ history: null as {
+ name: string;
+ title: string;
+ thumbnail: string;
+ }[] | null
+ }),
+
+ actions: {
+ updateHistoryList(lectures: {
+ name: string;
+ title: string;
+ thumbnail: string;
+ }[]) {
+ this.history = lectures;
+ },
+ clearHistoryList() {
+ this.history = [];
+ }
+ }
+});