edit: audioData est mtn const reactive() et playlist editor fonctionne coté client

README.md

@@ -15,4 +15,6 @@ POUR LE STATUT D'OUVERTURE DU LIEU IL FAUT :
 
 NB: les infos indiquées sont surtout là pour prévisualiser, mais ne sont pour l'instant pas plus que des envies personelles par rapport au lieu (rien d'officiel pour l'instant, juste des idées)
 
+PS: BESOIN DE QQN POUR FAIRE LE BACKEND SVP <3 <3 <3
+
 333

admin/components/PlaylistEditor.vue

@@ -17,9 +17,10 @@
         <p>&emsp; Artiste &emsp;&emsp;&ensp; &rarr;</p>
         <input type="text" name="songArtist" v-model="artist">
       </div>
+      <p v-show="editingSong" id="note">Note : Laisser vide pour conserver le fichier ↘</p>
       <div class="inputDiv" id="src">
         <p>&emsp; Fichier MP3 &ensp; &rarr;</p>
-        <input type="file" name="songFile" ref="audioFile" @change="loadFile">
+        <input type="file" name="songFile" ref="audioFile" @change="modifyFile">
       </div>
       <button type="button" name="saveChanges" class="textBtnStyle" @click="savePlaylist" :class="{alert: playlistAlertActive}">SAUVEGARDER !</button>
     </div>
@@ -108,6 +109,15 @@
         color: var(--back-color);
         background-color: var(--main-color);
       }
+            #note{
+              width: 66%;
+              font-family: 'velvelyne';
+              font-weight: normal;
+              font-size: 13.12px;
+              color: var(--main-color);
+              margin: 0;
+              text-align: right;
+            }
 
             .inputDiv{
               display: flex;
@@ -251,13 +261,12 @@
           src: null
         },
         editingSong: null,
-        fileInput: null
+        selectedInput: null
       }
     },
     computed: {
       displayedPlaylists(){
-        let list = loadAudioData()
+        return loadAudioData
-        return list
       },
       playlistPannel(){
         return pannelStatusList.playlist;
@@ -286,7 +295,6 @@
       backToDefaultPlaylist(){
         this.track = this.playlistDefault.track;
         this.artist = this.playlistDefault.artist;
-        this.src = this.playlistDefault.src;
         this.editingSong = null;
         this.newSongText = 'Nouveau Son';
       },
@@ -296,16 +304,16 @@
           artist: this.artist,
           src: this.src
         }
-
+        console.log('created or modified entry :', entry)
         return entry
       },
       savePlaylist(){
         let entry = this.createListEntry();
         if(this.editingSong){
           Object.assign(this.editingSong, {
-            title: this.title,
+            track: this.track,
-            href: this.href,
+            artist: this.artist,
-            desc: this.desc
+            src: this.src
           })
         } else {
           this.displayedPlaylists.push(entry);
@@ -324,6 +332,7 @@
         this.track = obj.track;
         this.artist = obj.artist;
         this.src = obj.src;
+
         this.newSongText = 'Éditer les infos'
         this.toggleNewPlaylist();
       },
@@ -336,10 +345,16 @@
           this.eventAlertActive = false;
           this.submitPlaylistText = 'SAUVEGARDER';
         }, 1610)
+      },
+      modifyFile(){
+        if (this.selectedInput.files[0]){
+          this.src = this.selectedInput.files[0];
+        }
       }
     },
     mounted(){
-      this.fileInput = this.$refs.audioFile;
+      this.selectedInput = this.$refs.audioFile;
+      console.log(this.selectedInput)
       watch( () => this.playlistPannel, () => {
         if(!this.playlistPannel){
           this.newSong = false;

src/components/PlayerPannel.vue

@@ -5,7 +5,6 @@
     import PauseIcon from '../assets/icons/pause.svg'
     import NextIcon from '../assets/icons/next.svg'
     import PrevIcon from '../assets/icons/prev.svg'
-    import { loadAudioData } from '@/data/audioData.js'
 </script>
 
 <template>
@@ -24,13 +23,13 @@
           <marquee direction="left" behavior="scroll" scrollamount="7" width="100%">{{selectedSong.track}} — {{selectedSong.artist}}</marquee>
         </div>
         <div id="controls">
-          <button type="button" class="iconBtnStyle" @click="prevTrack" data-tooltip="précédente">
+          <button type="button" class="iconBtnStyle" @mousedown.stop @touchstart.stop @click="prevTrack" data-tooltip="précédente">
             <PrevIcon name="prev" class="icon"/>
           </button>
-          <button type="button" class="iconBtnStyle" @click="toggleAudio" data-tooltip="lancer">
+          <button type="button" class="iconBtnStyle" @mousedown.stop @touchstart.stop @click="toggleAudio" data-tooltip="lancer">
             <component :is="isPlaying? PauseIcon : PlayIcon" class="icon"/>
           </button>
-          <button type="button" class="iconBtnStyle" @click="nextTrack" data-tooltip="suivante">
+          <button type="button" class="iconBtnStyle" @mousedown.stop @touchstart.stop @click="nextTrack" data-tooltip="suivante">
             <NextIcon name="next" class="icon"/>
           </button>
         </div>
@@ -119,6 +118,8 @@
 </style>
 
 <script>
+import { loadAudioData } from '../data/audioData.js'
+
   import Moveable from 'vue3-moveable';
 
   export default {
@@ -130,7 +131,6 @@
       return{
         target: null,
         audioTarget: null,
-        audioData: [],
         selectedSong:{
           track: "",
           artist: "",
@@ -142,8 +142,13 @@
         isPlaying: false
       }
     },
+    computed: {
+      audioData(){
+        return loadAudioData
+      }
+    },
     emits: ['close','focus'],
-    methods:{
+    methods: {
       onDrag({ target, transform }) {
         target.style.transform = transform;
       },
@@ -186,10 +191,8 @@
     },
     async mounted(){
       this.target = this.$refs.playerPannel;
-
-      this.audioData = await loadAudioData();
       this.audioTarget = this.$refs.selectedAudio;
-      //console.log('AUDIO/', this.audioData);
+      console.log('AUDIO/', this.audioData);
       this.loadAudio();
 
       console.log("Player pannel is loaded!");

src/data/audioData.js

@@ -1,25 +1,25 @@
+import { reactive } from 'vue'
+
 import audio01 from './juste-tek.mp3'
 import audio02 from './sinking-into-.mp3'
 import audio03 from './technoloooogia.mp3'
 
-export async function loadAudioData() {
+export const loadAudioData = reactive (
-  let audioFiles = [
+  [
-      {
+    {
-        track: 'the sink',
+      track: 'the sink',
-        artist: '333',
+      artist: '333',
-        src: audio02
+      src: audio02
-      },
+    },
-      {
+    {
-        track: 'just tek',
+      track: 'just tek',
-        artist: '333',
+      artist: '333',
-        src: audio01
+      src: audio01
-      },
+    },
-      {
+    {
-        track: 'Technolooooogia',
+      track: 'Technolooooogia',
-        artist: '333',
+      artist: '333',
-        src: audio03
+      src: audio03
-      }
+    }
-    ]
+  ]
-  //console.log(audioFiles);
+)
-  return audioFiles
-}