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

correction player and theme color

Browse Source
This commit is contained in:
Gabriel Goldbronn
2025-05-03 16:33:17 +02:00
parent 7149f70cca
commit 0860b83486
9 changed files with 133 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/assets/Global.scss
View File

@@ -17,8 +17,8 @@
--primary-200: #FFC9D7;
--primary-300: #FF9CB6;
--primary-400: #FF6591;
--primary-500: #FF306F;
--primary-600: #ED0C5B;
--primary-500: #ED0C5B;
--primary-500: #e10954;
--primary-700: #CD034F;
--primary-800: #AB064A;
--primary-900: #920945;
@@ -42,9 +42,9 @@
--primary-100: #920945;
--primary-200: #AB064A;
--primary-300: #CD034F;
--primary-400: #ED0C5B;
--primary-500: #FF306F;
--primary-600: #ED0C5B;
--primary-400: #e10954;
--primary-500: #ED0C5B;
--primary-600: #FF6591;
--primary-700: #FF9CB6;
--primary-800: #FFC9D7;
--primary-900: #FFE2E8;

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

@@ -39,7 +39,7 @@ header {
align-items: center;
gap: 10px;
align-self: stretch;
background-color: var(--primary-600);
background-color: var(--primary-500);
border-radius: 15px;
}

75
frontend/src/components/Player.vue
View File

@@ -2,7 +2,6 @@
import RepeatIcon from "../assets/Icons/RepeatIcon.vue";
import ShuffleIcon from "../assets/Icons/ShuffleIcon.vue";
import SoundIcon from "../assets/Icons/SoundIcon.vue";
import HandIcon from "../assets/Icons/HandIcon.vue";
import LeaveIcon from "../assets/Icons/LeaveIcon.vue";
import PrevIcon from "../assets/Icons/PrevIcon.vue";
@@ -16,6 +15,16 @@ const isPlaying = ref(true);
function togglePlay() {
isPlaying.value = !isPlaying.value;
}
const progress = ref(0);
function handleTimebarClick(event: MouseEvent) {
const target = event.currentTarget as HTMLElement;
const rect = target.getBoundingClientRect();
const clickX = event.clientX - rect.left;
const width = rect.width;
progress.value = Math.min(Math.max((clickX / width) * 100, 0), 100);
}
</script>
<template>
@@ -26,7 +35,15 @@ function togglePlay() {
</div>
<p>lofi hip hop mix 📚 beats to relax/study to (Part 1)</p>
</div>
<div class="player__timebar">
<div class="player__timebar" @click="handleTimebarClick">
<div
class="player__timebar__progress"
:style="{ width: progress + '%' }"
></div>
</div>
<div class="player__timebar__time">
<p>2:10</p>
<p>4:20</p>
</div>
<div class="player__controls">
<button><PrevIcon /></button>
@@ -40,10 +57,26 @@ function togglePlay() {
<button><NextIcon /></button>
</div>
<div class="player__actions">
<button><RepeatIcon /></button>
<button><ShuffleIcon /></button>
<button><HandIcon /></button>
<button><LeaveIcon /></button>
<button
title="Jouer le song en boucle"
>
<RepeatIcon />
</button>
<button
title="Joyer les songs aléatoirement"
>
<ShuffleIcon />
</button>
<button
title="Rammener le bot dans le channel"
>
<HandIcon />
</button>
<button
title="Faire partir le bot"
>
<LeaveIcon />
</button>
</div>
</div>
</template>
@@ -56,7 +89,7 @@ function togglePlay() {
justify-content: flex-end;
padding: 30px;
align-items: center;
gap: 20px;
gap: 5px;
height: 100%;
width: 100%;
flex-shrink: 0;
@@ -73,6 +106,7 @@ function togglePlay() {
gap: 20px;
flex: 1 0 0;
align-self: stretch;
margin-bottom: 20px;
&__img {
flex: 1 0 0;
@@ -93,9 +127,30 @@ function togglePlay() {
&__timebar {
width: 100%;
height: 5px;
background: var(--primary-600);
height: 8px;
background: var(--neutral-300);
border-radius: 900px;
position: relative;
transition: height 0.2s ease;
&:hover {
cursor: pointer;
}
&__progress {
height: 100%;
background: var(--primary-500);
border-radius: 900px;
transition: width 0.2s ease;
}
&__time {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 12px;
color: var(--neutral-500);
}
}
&__controls {
@@ -115,7 +170,7 @@ function togglePlay() {
}
.play_button {
background: var(--primary-600);
background: var(--primary-500);
display: flex;
padding: 16px 15px;
align-items: center;

2
frontend/src/items/Button.vue
View File

@@ -35,7 +35,7 @@ const props = defineProps<{
color: white;
&:hover {
background-color: var(--primary-600);
background-color: var(--primary-500);
}
}

2
frontend/src/items/Loader.vue
View File

@@ -14,7 +14,7 @@
/* From Uiverse.io by mobinkakei */
.loader {
--path: var(--neutral-950);
--dot: var(--primary-600);
--dot: var(--primary-500);
--duration: 2.5s;
--size: 44px;
width: var(--size);

46
frontend/src/items/PlaylistItem.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { defineProps, ref, onMounted, onBeforeUnmount } from 'vue';
import {defineProps, ref, onMounted, onBeforeUnmount} from 'vue';
import DotsMenu from "../assets/Icons/DotsMenu.vue";
import YoutubePlaylist from "../assets/Icons/YoutubePlaylist.vue";
import Trash from "../assets/Icons/Trash.vue";
@@ -14,51 +14,57 @@ const props = defineProps<{
let dotsMenuActive = ref(false);
// Fonction pour afficher / masquer le menu
const toggleMenu = (event: MouseEvent) => {
event.stopPropagation();
dotsMenuActive.value = !dotsMenuActive.value;
};
// Fermer le menu si on clique en dehors
const closeMenu = () => {
dotsMenuActive.value = false;
};
// Ajoute l'écouteur pour fermer au clic global
onMounted(() => {
document.addEventListener("click", closeMenu);
});
// Supprime l'écouteur quand le composant est démonté
onBeforeUnmount(() => {
document.removeEventListener("click", closeMenu);
});
function oppenPlaylist() {
//todo: ouvrir la playlist
console.log("Ouvrir la playlist");
}
</script>
<template>
<div class="play-list">
<YoutubePlaylist v-if="imgSrc == 'youtube'" />
<DefaultPlaylist v-else />
<div class="play-list__info">
<p class="play-list__info__title" :title="props.title">{{ props.title }}</p>
</div>
<button
class="play-list__content"
@click.stop="oppenPlaylist"
>
<YoutubePlaylist v-if="imgSrc == 'youtube'"/>
<DefaultPlaylist v-else/>
<div class="play-list__info">
<p class="play-list__info__title" :title="props.title">{{ props.title }}</p>
</div>
</button>
<button @click.stop="toggleMenu">
<DotsMenu />
<DotsMenu/>
</button>
<div v-if="dotsMenuActive" class="overlay" @click="closeMenu"></div>
<div :class="['play-list__dots-menu', { 'play-list__dots-menu--active': dotsMenuActive }]">
<button>
<Add />
<Add/>
Ajouter
</button>
<button>
<Play />
<Play/>
Lire
</button>
<button>
<Trash />
<Trash/>
Supprimer
</button>
</div>
@@ -74,6 +80,15 @@ onBeforeUnmount(() => {
gap: 10px;
flex-shrink: 0;
&__content {
display: flex;
width: 100%;
flex: 1 1 auto;
box-sizing: border-box;
gap: 10px;
min-width: 0;
overflow: hidden;
}
&__info {
display: flex;
flex-direction: column;
@@ -83,12 +98,15 @@ onBeforeUnmount(() => {
flex: 1 1 auto;
min-width: 0;
width: 100%;
box-sizing: border-box;
&__title {
text-align: start;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
box-sizing: border-box;
}
}

2
frontend/src/items/UserLoginInfo.vue
View File

@@ -19,7 +19,7 @@ const userLoginInfo = userOnlineStore();
align-items: center;
gap: 5px;
border-radius: 4px;
background: var(--primary-600);
background: var(--primary-500);
color: var(--neutral-50);
}

19
frontend/src/views/Home.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import {ref, onMounted, onUnmounted, computed} from "vue";
import HomeMobile from "./HomeMobile.vue";
import HomeTablet from "./HomeTablet.vue";
import HomeDesktop from "./HomeDesktop.vue";
@@ -37,11 +37,26 @@ onMounted(() => {
onUnmounted(() => {
window.removeEventListener("resize", updateScreenSize);
});
const CurrentComponent = computed(() => {
switch (screenSize.value) {
case 'mobile':
return HomeMobile;
case 'tablet':
return HomeTablet;
case 'desktop':
return HomeDesktop;
default:
return null;
}
});
</script>
<template>
<div class="home-container">
<component :is="screenSize === 'mobile' ? HomeMobile : screenSize === 'tablet' ? HomeTablet : HomeDesktop" />
<component v-if="CurrentComponent" :is="CurrentComponent" />
<p v-else>Composant introuvable</p>
</div>
</template>