Version 1.4.0 - Correction de bugs

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",

src/assets/Global.scss

@@ -28,9 +28,9 @@
     --primary: #FFFFFF;
     --primary-inverse: #111210;
     --primary-hover: #292b26;
-    --secondary: #EAEAEA;
+    --secondary: #cccccc;
-    --tertiary: #d3d3d3;
+    --tertiary: #9b9a9a;
-    --quaternary: #b8b8b8;
+    --quaternary: #9f9f9f;
     --text: #111210;
     --text-inverse: #FFFFFF;
     --text-secondary: #404040;

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 title="En boucle" :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="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 title="Changer de salon" @click="changeChannel"><Hand icon="fa-solid fa-hand"/></CustomIcon>
-              <CustomIcon @click="disconnect"><Disconnect icon="fa-solid fa-phone-slash"/></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 title="En boucle" :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="Lecture aléatoire" :active="shuffle" @click="toggleShuffle"><Shuffle icon="fa-solid fa-shuffle"/></CustomIcon>
-          <CustomIcon @click="changeChannel"><Hand icon="fa-solid fa-hand"/></CustomIcon>
+          <CustomIcon title="Changer de salon" @click="changeChannel"><Hand icon="fa-solid fa-hand"/></CustomIcon>
-          <CustomIcon @click="disconnect"><Disconnect icon="fa-solid fa-phone-slash"/></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}">

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
 

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)

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: {

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,

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

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>