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

add icon save and upload file and fix switch tab

Browse Source
This commit is contained in:
Gabriel Goldbronn
2025-05-03 18:17:57 +02:00
parent f1d7e971fe
commit 2dd79f3c94
8 changed files with 95 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.idea/workspace.xml generated
View File

@@ -5,15 +5,13 @@
</component>
<component name="ChangeListManager">
<list default="true" id="5847035d-0a9b-4d26-a129-e3ed88eb8bd7" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/SaveIcon.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/UploadIcon.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/components/Header.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/Header.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/items/Button.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/Button.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/items/Loader.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/Loader.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/views/Home.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/views/Home.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/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" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -108,7 +106,7 @@
<workItem from="1744962250986" duration="599000" />
<workItem from="1744963762669" duration="7674000" />
<workItem from="1745243053934" duration="15721000" />
<workItem from="1746260006352" duration="16911000" />
<workItem from="1746260006352" duration="20086000" />
</task>
<servers />
</component>

14
frontend/src/assets/Icons/SaveIcon.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup lang="ts">
</script>
<template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 8H8.6C8.03995 8 7.75992 8 7.54601 7.89101C7.35785 7.79513 7.20487 7.64215 7.10899 7.45399C7 7.24008 7 6.96005 7 6.4V3M17 21V14.6C17 14.0399 17 13.7599 16.891 13.546C16.7951 13.3578 16.6422 13.2049 16.454 13.109C16.2401 13 15.9601 13 15.4 13H8.6C8.03995 13 7.75992 13 7.54601 13.109C7.35785 13.2049 7.20487 13.3578 7.10899 13.546C7 13.7599 7 14.0399 7 14.6V21M21 9.32548V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H14.6745C15.1637 3 15.4083 3 15.6385 3.05526C15.8425 3.10425 16.0376 3.18506 16.2166 3.29472C16.4184 3.4184 16.5914 3.59135 16.9373 3.93726L20.0627 7.06274C20.4086 7.40865 20.5816 7.5816 20.7053 7.78343C20.8149 7.96237 20.8957 8.15746 20.9447 8.36154C21 8.59171 21 8.8363 21 9.32548Z" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<style scoped>
</style>

2
frontend/src/assets/Icons/Top.vue
View File

@@ -4,7 +4,7 @@
<template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 3H3M12 21V7M12 7L5 14M12 7L19 14" class="iconDefaultStrokeReverse" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 3H3M12 21V7M12 7L5 14M12 7L19 14" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>

14
frontend/src/assets/Icons/UploadIcon.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup lang="ts">
</script>
<template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V15M17 8L12 3M12 3L7 8M12 3V15" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<style scoped>
</style>

19
frontend/src/components/Header.vue
View File

@@ -4,6 +4,7 @@ import InputSearch from "../items/InputSearch.vue";
import PlaylistIcon from "../assets/Icons/PlaylistIcon.vue";
import LectureListIcon from "../assets/Icons/LectureListIcon.vue";
import {lectureListIsOpen, lectureListPopUp, playlistPopUp, playlistsIsOpen} from "../stores/globalStore.ts";
import UploadIcon from "../assets/Icons/UploadIcon.vue";
const lectureList = lectureListIsOpen();
const playlists = playlistsIsOpen();
@@ -18,11 +19,29 @@ const togglePlaylists = () => {
playlists.togglePlaylists();
};
const uploadMyFile = () => {
const input = document.createElement("input");
input.type = "file";
input.accept = ".MP4, .MP3, .WAV, .M4A, .AAC, .OGG, .FLAC";
input.click();
input.onchange = async (e) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (file) {
const formData = new FormData();
formData.append("file", file);
console.log("File uploaded:", file);
}
};
};
</script>
<template>
<header>
<InputSearch />
<button @click="uploadMyFile">
<UploadIcon />
</button>
<button @click="togglePlaylists" v-if="playlistPopUp().popUp">
<PlaylistIcon />
</button>

37
frontend/src/components/LectureList.vue
View File

@@ -28,15 +28,6 @@ const historyList = historyListStore();
<div :class="props.popup == true ? 'lecture-list--popup' : 'lecture-list'">
<div class="lecture-list__content">
<div class="lecture-list__header">
<div v-if="nav == 'lecture'">
<button>
<Trash color="#FF306F"/>
</button>
<div>
<p>{{ lecturesList.lectures.length }}</p>
<InPlayListIcon/>
</div>
</div>
<SwitchTab
:selectedTab="nav == 'lecture' ? 1 : 2"
tab1-label="Liste de lecture"
@@ -44,6 +35,15 @@ const historyList = historyListStore();
tab2-label="Historique de lecture"
:tab2-click="() => {switchNav('history')}"
/>
<div class="sub_header" v-if="nav == 'lecture'">
<div>
<p>{{ lecturesList.lectures.length }}</p>
<InPlayListIcon/>
</div>
<button>
<Trash color="#FF306F"/>
</button>
</div>
</div>
<MiniatureList
v-if="nav == 'lecture'"
@@ -87,12 +87,27 @@ const historyList = historyListStore();
overflow: hidden;
&__header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
.sub_header {
flex : 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
box-sizing: border-box;
div {
display: flex;
align-content: center;
align-items: center;
justify-content: end;
gap: 5px;
}
}
}

14
frontend/src/items/Miniature.vue
View File

@@ -2,6 +2,7 @@
import { defineProps } from 'vue';
import Add from "../assets/Icons/Add.vue";
import Play from "../assets/Icons/Play.vue";
import SaveIcon from "../assets/Icons/SaveIcon.vue";
const props = defineProps<{
thumbnail: string;
@@ -17,12 +18,21 @@ const props = defineProps<{
<img :src="props.thumbnail" alt="Video Thumbnail" />
<p class="miniature__img__duration" >{{duration}}</p>
<div class="miniature__img__overlay">
<button>
<button
title="Ajouter à la liste de lecture"
>
<Add />
</button>
<button>
<button
title="Jouer le song maintenant"
>
<Play />
</button>
<button
title="Ajouter à la playlist"
>
<SaveIcon />
</button>
</div>
</div>
<div class="miniature__info">

5
frontend/src/items/SwitchTab.vue
View File

@@ -8,6 +8,7 @@ const props = defineProps<{
tab1Label?: string;
tab2Click?: (event: MouseEvent) => void;
tab2Label?: string;
tab1Lecture?: number;
}>();
</script>
@@ -22,7 +23,7 @@ const props = defineProps<{
<style scoped>
.tab-container {
width: 100%;
width: 79%;
display: flex;
flex-direction: row;
align-items: flex-start;
@@ -30,7 +31,7 @@ const props = defineProps<{
padding: 2px;
background-color: var(--neutral-50);
border-radius: 9px;
margin: 10px 20px 0px 20px;
margin-right: 5px;
}
.indicator {