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

edit: audioData est mtn const reactive() et playlist editor fonctionne coté client
2026-07-07 16:05:56 +02:00 · 2026-07-07 01:23:27 +02:00
10 changed files with 85 additions and 51 deletions
@@ -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
@@ -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 list
+        return loadAudioData
      },
      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,
-            href: this.href,
-            desc: this.desc
+            track: this.track,
+            artist: this.artist,
+            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;
@@ -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>
@@ -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(){
@@ -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;
@@ -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>
@@ -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>
@@ -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>
@@ -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!");
@@ -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() {
-  let audioFiles = [
+export const loadAudioData = reactive (
+  [
    {
      track: 'the sink',
      artist: '333',
@@ -20,6 +22,4 @@ export async function loadAudioData() {
      src: audio03
    }
  ]
-  //console.log(audioFiles);
-  return audioFiles
-}
+)
Author	SHA1	Message	Date
vgaNAR6ta	9f7e957979	edit: icon player + modif noise fermé + panneau plus large en format tres grand écran	2026-07-07 16:05:56 +02:00
vgaNAR6ta	7c25390ead	edit: audioData est mtn const reactive() et playlist editor fonctionne coté client	2026-07-07 01:23:27 +02:00