edit: icon player + modif noise fermé + panneau plus large en format tres grand écran

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;

index.html

@@ -94,7 +94,7 @@
       <div id="aboutSection">
         <div class="uiStyle" id="aboutText">
           <p>
-            Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tout les passionné·es d'informatique, d'électronique et de technique,
+            Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
             qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
     				Le LOL est un lieu d'exploration des alternatives et de bidouille anti-systèmes.
           </p>
@@ -106,7 +106,7 @@
     			<p>
             Nous revendiquons l'ouverture du code et des techniques,
     				le partage des connaissances et l'autogestion,
-            la liberté et l'anti-fascisme. <br><br>
+            l'anti-capitalisme et l'anti-fascisme. <br><br>
             Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.<br>
             Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
           </p>

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import PlayerIcon from './assets/icons/play.svg'
+  import PlayerIcon from './assets/icons/player.svg'
   import LinkIcon from './assets/icons/folder.svg'
 </script>
 
@@ -89,9 +89,8 @@
       openPannel(str){
         if(!(this.pannelStatus.activePannels.includes(str))){
           this.pannelStatus.activePannels.push(str)
-        } else {
-          this.focusPannel(str)
         }
+        this.focusPannel(str)
       }
     },
     mounted(){

src/artAndTexture.js

@@ -92,9 +92,9 @@ function analogLikeNoise(){
   for(let x = 0; x<tW; x++){
     const sx = x * scale + offset
     for(let y = 0; y<tH; y++){
-      let lum = Math.random()*200
+      let lum = Math.random()*161
 
-      //img.data[index++] = lum;
+      //img.data[index++] = lum*150/255;
       index++
       img.data[index++] = lum;
       img.data[index++] = lum;

src/assets/icons/player.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.51 84.66">
+  <path d="M18.91,0v49.74c-.47-.03-.94-.06-1.42-.06-4.72,0-8.81,1.74-12.28,5.21-3.47,3.47-5.21,7.51-5.21,12.1,0,4.96,1.74,9.15,5.21,12.56,3.47,3.41,7.57,5.12,12.28,5.12,4.96,0,9.12-1.7,12.47-5.12,3.35-3.41,5.02-7.6,5.02-12.56,0-.53-.03-1.05-.07-1.57V16h46.6v22.48c-.49-.04-.99-.07-1.49-.07-4.72,0-8.81,1.74-12.28,5.21-3.47,3.47-5.21,7.51-5.21,12.1,0,4.96,1.74,9.15,5.21,12.56,3.47,3.41,7.57,5.12,12.28,5.12,4.96,0,9.12-1.7,12.47-5.12,3.31-3.37,4.97-7.49,5.02-12.37h0V0H18.91Z"/>
+</svg>

src/components/EventInfoPannel.vue

@@ -38,6 +38,17 @@
     left: 77px;
     padding-bottom: 3.33px;
 
+    @media(min-width:650px){
+        left: 333px;
+    }
+
+    @media(min-width: 1300px){
+      width: 333px;
+      max-height: 333px;
+      top: 222px;
+      left: 1000px;
+    }
+
 
           #eventContent{
             padding: 7.77px;
@@ -63,13 +74,6 @@
                   }
           }
   }
-
-  /*================ PC LARGE*/
-  @media(min-width:650px){
-    #eventPannel{
-      left: 333px;
-    }
-  }
 </style>
 
 <script>

src/components/LinkPannel.vue

@@ -48,6 +48,17 @@
     height: 333px;
     top: 222px;
     left: 117px;
+
+    @media(min-width:650px){
+        left: 477px;
+    }
+
+    @media(min-width: 1300px){
+      width: 333px;
+      height: 444px;
+      top: 420px;
+      left: 555px;
+    }
   }
 
   #linkContent{
@@ -95,13 +106,6 @@
             margin-bottom: 7.77px;;
           }
   }
-
-  /*================ PC LARGE*/
-  @media(min-width:650px){
-    #linkPannel{
-      left: 477px;
-    }
-  }
 </style>
 
 <script>

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>
@@ -66,6 +65,16 @@
     box-sizing: border-box;
     cursor: move;
 
+    @media(min-width:700px){
+        left: 477px;
+    }
+
+    @media(min-width: 1300px){
+      width: 333px;
+      top: 333px;
+      left: 333px;
+    }
+
     .closeBtn{
       position: absolute;
       align-self: flex-end;
@@ -109,16 +118,11 @@
 
           }
   }
-
-  /*================ PC LARGE*/
-  @media(min-width:650px){
-    #playerPannel{
-      left: 477px;
-    }
-  }
 </style>
 
 <script>
+import { loadAudioData } from '../data/audioData.js'
+
   import Moveable from 'vue3-moveable';
 
   export default {
@@ -130,7 +134,6 @@
       return{
         target: null,
         audioTarget: null,
-        audioData: [],
         selectedSong:{
           track: "",
           artist: "",
@@ -142,6 +145,11 @@
         isPlaying: false
       }
     },
+    computed: {
+      audioData(){
+        return loadAudioData
+      }
+    },
     emits: ['close','focus'],
     methods: {
       onDrag({ target, transform }) {
@@ -186,10 +194,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,9 +1,11 @@
+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',
       artist: '333',
@@ -20,6 +22,4 @@ export async function loadAudioData() {
       src: audio03
     }
   ]
-  //console.log(audioFiles);
+)
-  return audioFiles
-}