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

loader prepartion

Browse Source
This commit is contained in:
Gabriel Goldbronn
2025-05-03 13:34:33 +02:00
parent 64a2264c30
commit bffbfd6ec0
5 changed files with 316 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
.idea/workspace.xml generated
View File

@@ -5,40 +5,10 @@
</component>
<component name="ChangeListManager">
<list default="true" id="5847035d-0a9b-4d26-a129-e3ed88eb8bd7" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/DarkModeIcone.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/LightModeIcone.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/frontend/src/items/Button.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/frontend/src/items/Loader.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Global.scss" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Global.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/Add.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/Add.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/DefaultPlaylist.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/DefaultPlaylist.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/DotsMenu.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/DotsMenu.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/HandIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/HandIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/InPlayListIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/InPlayListIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/LeaveIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/LeaveIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/LectureListIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/LectureListIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/LogoIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/LogoIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/NextIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/NextIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/PauseIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/PauseIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/Play.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/Play.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/PlayIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/PlayIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/PlaylistIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/PlaylistIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/PrevIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/PrevIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/RepeatIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/RepeatIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/SearchIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/SearchIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/SetingsIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/SetingsIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/ShuffleIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/ShuffleIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/SoundIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/SoundIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/Top.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/Top.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/UserIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/UserIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/YoutubePlaylist.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/YoutubePlaylist.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/InfoHeader.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/InfoHeader.vue" 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/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/Miniature.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/Miniature.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/items/SwitchTab.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/SwitchTab.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/items/InputSearch.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/InputSearch.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/stores/dataStore.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/stores/dataStore.ts" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
@@ -133,7 +103,7 @@
<workItem from="1744962250986" duration="599000" />
<workItem from="1744963762669" duration="7674000" />
<workItem from="1745243053934" duration="15721000" />
<workItem from="1746260006352" duration="5873000" />
<workItem from="1746260006352" duration="7898000" />
</task>
<servers />
</component>

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

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

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

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

163
frontend/src/items/Loader.vue Normal file
View File

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

131
frontend/src/stores/dataStoreFuture.ts Normal file
View File

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