loader prepartion

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();
 </script>
@@ -10,6 +11,7 @@ const search = searchStore();
   <div class="search-preview">
     <div class="search-preview__content">
       <Miniature
+          v-if="search.videos != undefined"
           v-for="video in search.videos"
           :key="video.title"
           :thumbnail="video.thumbnail"
@@ -17,6 +19,10 @@ const search = searchStore();
           :name="video.name"
           :duration="video.duration"
       />
+      <Loader
+          v-else
+          class="search-preview__loader"
+          />
     </div>
   </div>
 </template>

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<HTMLInputElement | null>(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;
+  }
 });
 </script>
 
 <template>
   <div class="group">
     <SearchIcon />
-    <input placeholder="Search" type="search" class="input" @input="updateSearch">
+    <input
+        placeholder="Search"
+        type="search"
+        class="input"
+        @input="updateSearch"
+        ref="inputRef"
+    >
   </div>
 </template>
 

frontend/src/items/Loader.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="loader">
+    <svg viewBox="0 0 80 80">
+      <circle r="32" cy="40" cx="40" id="test"></circle>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+/* From Uiverse.io by mobinkakei */
+.loader {
+  --path: var(--neutral-950);
+  --dot: var(--primary-600);
+  --duration: 2.5s;
+  --size: 44px;
+  width: var(--size);
+  height: var(--size);
+  position: relative;
+}
+
+.loader:before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  position: absolute;
+  display: block;
+  background: var(--dot);
+  top: 37px;
+  left: 19px;
+  transform: translate(-18px, -18px);
+  animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
+  infinite;
+}
+
+.loader svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.loader svg rect,
+.loader svg polygon,
+.loader svg circle {
+  fill: none;
+  stroke: var(--path);
+  stroke-width: 10px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.loader svg polygon {
+  stroke-dasharray: 145 76 145 76;
+  stroke-dashoffset: 0;
+  animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
+  infinite;
+}
+
+.loader svg rect {
+  stroke-dasharray: 192 64 192 64;
+  stroke-dashoffset: 0;
+  animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+.loader svg circle {
+  stroke-dasharray: 150 50 150 50;
+  stroke-dashoffset: 75;
+  animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
+  infinite;
+}
+
+@keyframes pathTriangle {
+  33% {
+    stroke-dashoffset: 74;
+  }
+
+  66% {
+    stroke-dashoffset: 147;
+  }
+
+  100% {
+    stroke-dashoffset: 221;
+  }
+}
+
+@keyframes dotTriangle {
+  33% {
+    transform: translate(0, 0);
+  }
+
+  66% {
+    transform: translate(10px, -18px);
+  }
+
+  100% {
+    transform: translate(-10px, -18px);
+  }
+}
+
+@keyframes pathRect {
+  25% {
+    stroke-dashoffset: 64;
+  }
+
+  50% {
+    stroke-dashoffset: 128;
+  }
+
+  75% {
+    stroke-dashoffset: 192;
+  }
+
+  100% {
+    stroke-dashoffset: 256;
+  }
+}
+
+@keyframes dotRect {
+  25% {
+    transform: translate(0, 0);
+  }
+
+  50% {
+    transform: translate(18px, -18px);
+  }
+
+  75% {
+    transform: translate(0, -36px);
+  }
+
+  100% {
+    transform: translate(-18px, -18px);
+  }
+}
+
+@keyframes pathCircle {
+  25% {
+    stroke-dashoffset: 125;
+  }
+
+  50% {
+    stroke-dashoffset: 175;
+  }
+
+  75% {
+    stroke-dashoffset: 225;
+  }
+
+  100% {
+    stroke-dashoffset: 275;
+  }
+}
+
+.loader {
+  display: inline-block;
+  margin: 0 16px;
+}
+
+</style>

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