From 6e71ef6bfa69280c4e777fe77e7e63d6fbb4e4e2 Mon Sep 17 00:00:00 2001
From: Raphix <picot.raphael@gmail.com>
Date: Sat, 6 Dec 2025 22:20:16 +0100
Subject: [PATCH] Version 1.4.0 - Correction de bugs

---
 package.json                                  |  2 +-
 src/assets/Global.scss                        |  6 ++---
 src/components/Layout/Player.vue              | 24 +++++++++----------
 src/components/Layout/Playlist.vue            |  1 -
 src/components/UI/Carousel.vue                |  4 ++++
 src/components/Widget/Guild/GuildSettings.vue |  1 +
 src/components/Widget/Queue/NextList.vue      | 10 ++++++--
 src/components/Widget/Queue/PreviousList.vue  | 12 +++++++---
 src/components/Widget/View/Home/History.vue   | 12 ++++------
 9 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 33f2fef..64268ef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chopin-frontend",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "scripts": {
     "dev": "vite --host --port 8080",
diff --git a/src/assets/Global.scss b/src/assets/Global.scss
index 4ae8c31..b7cef2e 100644
--- a/src/assets/Global.scss
+++ b/src/assets/Global.scss
@@ -28,9 +28,9 @@
     --primary: #FFFFFF;
     --primary-inverse: #111210;
     --primary-hover: #292b26;
-    --secondary: #EAEAEA;
-    --tertiary: #d3d3d3;
-    --quaternary: #b8b8b8;
+    --secondary: #cccccc;
+    --tertiary: #9b9a9a;
+    --quaternary: #9f9f9f;
     --text: #111210;
     --text-inverse: #FFFFFF;
     --text-secondary: #404040;
diff --git a/src/components/Layout/Player.vue b/src/components/Layout/Player.vue
index 6d36193..9f1baab 100644
--- a/src/components/Layout/Player.vue
+++ b/src/components/Layout/Player.vue
@@ -10,21 +10,21 @@
         <DurationBar ref="durationBar" :buffering="buffering" :pause="pause" class="duration-bar" @seek="seek" :offline="!online || !video" :current-time="currentTime" :total-duration="totalDuration" />
         <div class="actions">
             <div v-if="online" class="actions-div">
-              <CustomIcon :active="loop" @click="toggleLoop"><Loop active icon="fa-solid fa-sync"/></CustomIcon>
-              <CustomIcon :active="shuffle" @click="toggleShuffle"><Shuffle icon="fa-solid fa-shuffle"/></CustomIcon>
+              <CustomIcon title="En boucle" :active="loop" @click="toggleLoop"><Loop active icon="fa-solid fa-sync"/></CustomIcon>
+              <CustomIcon title="Lecture aléatoire" :active="shuffle" @click="toggleShuffle"><Shuffle icon="fa-solid fa-shuffle"/></CustomIcon>
             </div>
             <span v-else></span>
             <div :class="{'actions-div': true, 'offline': !online || !video}" >
-              <Backward @click="backward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}" class="itm-sec" icon="fa-solid fa-backward-step"/>
+              <Backward title="Précédent" @click="backward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}" class="itm-sec" icon="fa-solid fa-backward-step"/>
               <div @click="togglePause()" :class="{'playIcon': online && video, 'itm-main': true}">
                 <Play  v-if="pause || !online"/>
                 <Pause v-else/>
               </div>
-              <Forward @click="forward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}"  class="itm-sec" icon="fa-solid fa-forward-step"/>
+              <Forward title="Suivant" @click="forward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}"  class="itm-sec" icon="fa-solid fa-forward-step"/>
             </div>
             <div v-if="online" class="actions-div">
-              <CustomIcon @click="changeChannel"><Hand icon="fa-solid fa-hand"/></CustomIcon>
-              <CustomIcon @click="disconnect"><Disconnect icon="fa-solid fa-phone-slash"/></CustomIcon>
+              <CustomIcon title="Changer de salon" @click="changeChannel"><Hand icon="fa-solid fa-hand"/></CustomIcon>
+              <CustomIcon title="Déconnecter" @click="disconnect"><Disconnect icon="fa-solid fa-phone-slash"/></CustomIcon>
             </div>
             <span v-else></span>
         </div>
@@ -38,20 +38,20 @@
       <DurationBar ref="durationBar" mobile :buffering="buffering" :pause="pause" class="duration-bar" @seek="seek" :offline="!online || !video" :current-time="currentTime" :total-duration="totalDuration" />
       <span class="actions-container">
       <div :class="{'actions-div': true, 'offline': !online || !video}" >
-              <Backward @click="backward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}" class="itm-sec" icon="fa-solid fa-backward-step"/>
+              <Backward title="Précédent" @click="backward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}" class="itm-sec" icon="fa-solid fa-backward-step"/>
               <div @click="togglePause()" :class="{'playIcon': online && video, 'itm-main': true}">
                 <Play  v-if="pause || !online"/>
                 <Pause v-else/>
               </div>
-              <Forward @click="forward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}"  class="itm-sec" icon="fa-solid fa-forward-step"/>
+              <Forward title="Suivant" @click="forward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}"  class="itm-sec" icon="fa-solid fa-forward-step"/>
       </div>
       </span>
       <ActualChannel/>
       <div class="button-div" v-if="online" >
-          <CustomIcon :active="loop" @click="toggleLoop"><Loop active icon="fa-solid fa-sync"/></CustomIcon>
-          <CustomIcon :active="shuffle" @click="toggleShuffle"><Shuffle icon="fa-solid fa-shuffle"/></CustomIcon>
-          <CustomIcon @click="changeChannel"><Hand icon="fa-solid fa-hand"/></CustomIcon>
-          <CustomIcon @click="disconnect"><Disconnect icon="fa-solid fa-phone-slash"/></CustomIcon>
+          <CustomIcon title="En boucle" :active="loop" @click="toggleLoop"><Loop active icon="fa-solid fa-sync"/></CustomIcon>
+          <CustomIcon title="Lecture aléatoire" :active="shuffle" @click="toggleShuffle"><Shuffle icon="fa-solid fa-shuffle"/></CustomIcon>
+          <CustomIcon title="Changer de salon" @click="changeChannel"><Hand icon="fa-solid fa-hand"/></CustomIcon>
+          <CustomIcon title="Déconnecter" @click="disconnect"><Disconnect icon="fa-solid fa-phone-slash"/></CustomIcon>
       </div>
     </div>
     <div :class="{'player-mobile-bar': playerOpen, 'player-mobile-fold': !playerOpen}">
diff --git a/src/components/Layout/Playlist.vue b/src/components/Layout/Playlist.vue
index 51cfcff..5dd422e 100644
--- a/src/components/Layout/Playlist.vue
+++ b/src/components/Layout/Playlist.vue
@@ -52,7 +52,6 @@ const error = ref(null);
 const globalStore = useGlobalStore();
 const userStore = useUserStore();
 
-//FIXME: Fix Ralentissement lors de grosses Playlists
 //TODO: Faire la synchro google 
 //TODO: Faire la possibilité d'envoyer une playlist
 
diff --git a/src/components/UI/Carousel.vue b/src/components/UI/Carousel.vue
index 17f058f..adb5ec7 100644
--- a/src/components/UI/Carousel.vue
+++ b/src/components/UI/Carousel.vue
@@ -127,6 +127,7 @@ function updateSlots() {
     if(props.onlyMobile) {
         if (window.innerWidth > 1280) {
             direction.value = '';
+            allSlots.value = allSlots.value[0] ? [allSlots.value[0]] : [];
             actualIndex.value = 0; // Reset index when resizing to desktop
             return;
         } else {
@@ -144,6 +145,9 @@ function updateSlots() {
                
             });
         }
+        if(actualIndex.value >= allSlots.value.length) {
+            actualIndex.value = 0; // Reset index when resizing to desktop
+        }
     }
     ready.value = true;
     }, 100)
diff --git a/src/components/Widget/Guild/GuildSettings.vue b/src/components/Widget/Guild/GuildSettings.vue
index 02e9f22..a58c0a7 100644
--- a/src/components/Widget/Guild/GuildSettings.vue
+++ b/src/components/Widget/Guild/GuildSettings.vue
@@ -25,6 +25,7 @@ const userStore = useUserStore();
 const modal = ref(null);
 
 //TODO: Ajout de Log pour serveur
+//FIXME: Duration Bug sur stats
 
 const props = defineProps({
     server: {
diff --git a/src/components/Widget/Queue/NextList.vue b/src/components/Widget/Queue/NextList.vue
index 4469c4c..56a3dd4 100644
--- a/src/components/Widget/Queue/NextList.vue
+++ b/src/components/Widget/Queue/NextList.vue
@@ -25,7 +25,7 @@
                     <Icon icon="fa-solid fa-list-ol"/>
                     <p>Déplacer en première position</p>
                 </div>
-                <div @click="savePlaylist()">
+                <div v-if="!isAFile" @click="savePlaylist()">
                     <Icon icon="fa-solid fa-floppy-disk"/>
                     <p>Sauvegarder dans une playlist</p>
                 </div>
@@ -49,7 +49,7 @@
 <script setup>
 import VideoQueue from '@/components/UI/VideoQueue.vue';
 import IconAction from '@/components/UI/IconAction.vue';
-import { useId, ref, onMounted, watch } from 'vue';
+import { useId, ref, onMounted, watch, computed } from 'vue';
 import ContextMenu from '@/components/UI/ContextMenu.vue';
 import Button from '@/components/UI/Button.vue';
 import { IORequest } from '@/utils/IORequest';
@@ -68,6 +68,12 @@ const userStore = useUserStore()
 const playlistSelector = ref(null)
 const localNextList = ref([])
 
+const isAFile = computed(() => {
+    if(selectedIndex.value == null) return false;
+    const video = props.nextList[selectedIndex.value];
+    return video.type === "attachment";
+})
+
 const dragOptions = {
     animation: 200,
     disabled: false,
diff --git a/src/components/Widget/Queue/PreviousList.vue b/src/components/Widget/Queue/PreviousList.vue
index bb35632..b6696b1 100644
--- a/src/components/Widget/Queue/PreviousList.vue
+++ b/src/components/Widget/Queue/PreviousList.vue
@@ -17,7 +17,7 @@
                     <Icon icon="fa-solid fa-play"/>
                     <p>Jouer maintenant</p>
                 </div>
-                <div @click="savePlaylist()">
+                <div v-if="!isAFile" @click="savePlaylist()">
                     <Icon icon="fa-solid fa-floppy-disk"/>
                     <p>Sauvegarder dans une playlist</p>
                 </div>
@@ -37,7 +37,7 @@
 <script setup>
 import VideoQueue from '@/components/UI/VideoQueue.vue';
 import IconAction from '@/components/UI/IconAction.vue';
-import { ref, onMounted, watch, useId } from 'vue';
+import { ref, computed, useId } from 'vue';
 import ContextMenu from '@/components/UI/ContextMenu.vue';
 import Button from '@/components/UI/Button.vue';
 import { IORequest } from '@/utils/IORequest';
@@ -58,6 +58,12 @@ const contextMenu = ref(null)
 const saveModal = ref(null)
 const playlistSelector = ref(null)
 
+const isAFile = computed(() => {
+    if(selectedIndex.value == null) return false;
+    const video = props.previousList[selectedIndex.value];
+    return video.type === "attachment";
+})
+
 function setSelectedIndex(index) {
     selectedIndex.value = index;
     contextMenu.value.show()
@@ -74,7 +80,7 @@ function savePlaylist() {
 }
 
 
-defineProps({
+const props = defineProps({
     selectedTab: Number,
     online: {},
     previousList: Array
diff --git a/src/components/Widget/View/Home/History.vue b/src/components/Widget/View/Home/History.vue
index 5632bdb..aaed1f9 100644
--- a/src/components/Widget/View/Home/History.vue
+++ b/src/components/Widget/View/Home/History.vue
@@ -3,7 +3,7 @@
     <h2>🔄️ Historique personnel</h2>
     <p class="info">Voici les derniers titres que tu as écoutés (tout serveur confondu) !</p>
     <div v-if="history && history.length" class="history-list">
-        <VideoComposable v-for="video in history" :key="id" :video="video" />
+        <VideoComposable v-for="video in history.reverse()" :key="id" :video="video" />
     </div>
     <p v-else-if="loading" class="none"><Icon icon="fa-spinner" spin-pulse /> Chargement en cours</p>
     <p v-else class="none">
@@ -14,10 +14,10 @@
 </template>
 <script setup>
 import { onMounted, ref } from 'vue';
-import { IORequest } from '@/utils/IORequest';
+import { IORequest } from '@/utils/IORequest';  
 import VideoComposable from '@/components/Widget/VideoComposable.vue';
 import Events from '@/utils/Events';
-import { useId } from 'vue'
+import { useId, watch } from 'vue'
 
 const id = useId()
 
@@ -26,19 +26,17 @@ const loading = ref(true);
 
 onMounted(() => {
     IORequest('/USER/HISTORY', data => {
-        history.value = data.reverse();
         loading.value = false;
+        history.value = data;
     });
 })
 
 Events.on("player:update", () => {
     loading.value = true;
     IORequest('/USER/HISTORY', data => {
-        history.value = data.reverse();
         loading.value = false;
+        history.value = data;
     });
-    //FIXME: Error on the history
-    //FIXME: Remove the possibility to add file to playlist
 })
 
 </script>