correction player and theme color

.idea/workspace.xml

@@ -5,7 +5,15 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="5847035d-0a9b-4d26-a129-e3ed88eb8bd7" name="Changes" comment="">
-      <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$/.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" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -100,7 +108,7 @@
       <workItem from="1744962250986" duration="599000" />
       <workItem from="1744963762669" duration="7674000" />
       <workItem from="1745243053934" duration="15721000" />
-      <workItem from="1746260006352" duration="14688000" />
+      <workItem from="1746260006352" duration="16911000" />
     </task>
     <servers />
   </component>

frontend/src/assets/Global.scss

@@ -17,8 +17,8 @@
   --primary-200: #FFC9D7;
   --primary-300: #FF9CB6;
   --primary-400: #FF6591;
-  --primary-500: #FF306F;
+  --primary-500: #ED0C5B;
-  --primary-600: #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-400: #e10954;
-  --primary-500: #FF306F;
+  --primary-500: #ED0C5B;
-  --primary-600: #ED0C5B;
+  --primary-600: #FF6591;
   --primary-700: #FF9CB6;
   --primary-800: #FFC9D7;
   --primary-900: #FFE2E8;

frontend/src/components/Header.vue

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

frontend/src/components/Player.vue

@@ -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
-      <button><ShuffleIcon /></button>
+          title="Jouer le song en boucle"
-      <button><HandIcon /></button>
+      >
-      <button><LeaveIcon /></button>
+        <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;
+    height: 8px;
-    background: var(--primary-600);
+    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;

frontend/src/items/Button.vue

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

frontend/src/items/Loader.vue

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

frontend/src/items/PlaylistItem.vue

@@ -14,35 +14,41 @@ 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">
+    <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/>
     </button>
@@ -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;
     }
   }
 

frontend/src/items/UserLoginInfo.vue

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

frontend/src/views/Home.vue

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