edit: lien entre player & message + mastodon

2026-04-01 09:42:27 +02:00
parent 54731b6721
commit eaf1e1bbcb
20 changed files with 125 additions and 95 deletions
@@ -1,17 +1,3 @@
 [
-  {
-    "track":"L'Inverse",
-    "artist":"Surprise",
-    "src":"./DATA/Son/1.mp3"
-  },
-  {
-    "track":"Yummy",
-    "artist":"Ayesha Erotica",
-    "src":"./DATA/Son/2.mp3"
-  },
-  {
-    "track":"M le Maudit",
-    "artist":"Mauvais Exemple",
-    "src":"./DATA/Son/3.mp3"
-  }
+  "vega"
 ]
@@ -1,38 +0,0 @@
-[
-  {
-    "title": "Atelier Meetup 1/3",
-    "date": "21/03",
-    "content": "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. \n\n Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-    "like": 0,
-    "isLiked": false,
-    "going": 0,
-    "isGoing": false,
-    "wasRead": false,
-    "isSelected": false,
-    "isEvent": true
-  },
-  {
-    "title": "Atelier Meetup 1/3",
-    "date": "21/03",
-    "content": "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. \n\n Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-    "like": 0,
-    "isLiked": false,
-    "going": 0,
-    "isGoing": false,
-    "wasRead": false,
-    "isSelected": false,
-    "isEvent": true
-  },
-  {
-    "title": "Atelier Meetup 1/3",
-    "date": "21/03",
-    "content": "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. \n\n Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-    "like": 0,
-    "isLiked": false,
-    "going": 0,
-    "isGoing": false,
-    "wasRead": false,
-    "isSelected": false,
-    "isEvent": true
-  }
-]
@@ -225,7 +225,7 @@ canvas {
 }
 /*==================Reaction Bar for indi pannels*/
 .reactBar{
-  margin-left: -16.1%;
+  margin-left: 3.33%;
  width: 77%;
  display: flex;
  flex-direction: row;
@@ -1,4 +1,56 @@
-export async function loadAudioData() {
-  const aData = await fetch('./DATA/audioData.json');
-  return await aData.json();
+function inlineContent(str){
+  let data = str.split("<br>");
+  let content = "";
+  for (let line of data){
+    content += line + '\n';
+  }
+  return content
+}
+
+function creditsContent(str){
+  let data = str.split("<br>")
+  let credits = data[0].split(" - ");
+  return {
+    track: credits[0],
+    artist: credits[1]
+  }
+}
+
+export async function loadAudioData() {
+  const audioRes = await fetch('./DATA/audioData.json');
+  const aData = await audioRes.json();
+  const res = await fetch("https://pouet.drags-nerds.net/api/v1/timelines/public?local=true&limit=40");
+
+  if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);
+
+  const pouets = await res.json();
+  const filtered = pouets.filter(p => aData.some(user => p.account.display_name === user));
+  console.log(filtered);
+  const files = {};
+  for (const user of aData) {
+    files[user] = [];
+  }
+
+  let audioFiles = [];
+
+  for (const pouet of filtered){
+    //ignorer les PJ autres que audio
+    if (pouet.media_attachments?.length > 0 &&
+        !pouet.media_attachments[0].type.includes('audio')) {
+      continue;
+    }
+
+    if(pouet.media_attachments?.length > 0){
+        let credits = creditsContent(pouet.content);
+      let entry = {
+        track: credits.track,
+        artist: credits.artist,
+        src: pouet.media_attachments[0].url
+      }
+      audioFiles.push(entry);
+    }
+  }
+
+  console.log(audioFiles);
+  return audioFiles
 }
@@ -1,10 +1,51 @@
-//ecrire les messages dans /public/DATA/msgData.json avec 6 paramètres : title, content, likes, going, isSelected, isEvent
-// like & going à 0 par défaut (fonctionnel)
-// isLiked & isGoing local pour cette session: false par default (fonctionnel)
-// isSelected: false par défault (fonctionnel)
-// wasRead: false par défault (fonctionnel)
-// isEvent: true si le message concerne un évènement
-export async function loadMsgData() {
-  const data = await fetch('./DATA/msgData.json');
-  return await data.json();
+function idAndDate(str){
+  let data = str.split("T");
+  let date = data[0].split("-");
+  return {
+    date: date[2] +'/'+ date[1],
+    id: date[2] + date[1]
+  }
+}
+
+function titleAndContent(str){
+  let data = str.split(" :");
+  let title = data[0];
+  let contentData = data[1].split("<br>").filter(e => e);
+  let content = "";
+  for(let line of contentData){
+      content += line + '\n';
+  }
+  return {
+      title: title,
+      content: content
+    }
+  }
+
+export async function loadMsgData() {
+  const res = await fetch("https://pouet.drags-nerds.net/api/v1/timelines/public?local=true&limit=40");
+
+  if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);
+
+  const pouets = await res.json();
+  const filtered = pouets.filter(p => p.account.display_name === 'Drags and Nerds /Live');
+  console.log(filtered);
+
+  let msgContent = [];
+
+  for (let pouet of filtered){
+    let textInfos = titleAndContent(pouet.content);
+    let dateInfos = idAndDate(pouet.created_at);
+    let entry = {
+      title: textInfos.title,
+      date: dateInfos.date,
+      content: textInfos.content,
+      like: pouet.favourites_count,
+      isLiked: false,
+      wasRead: false,
+      isSelected: false
+    }
+    msgContent.push(entry);
+  }
+
+  return msgContent;
 }
@@ -7,15 +7,6 @@ function idAndDate(str){
  }
 }

-function inlineContent(str){
-  let data = str.split("<br>");
-  let content = "";
-  for (let line of data){
-    content += line + '\n';
-  }
-  return content
-}
-
 function titleAndContent(str){
  let data = str.split(" :");
  let title = data[0];
@@ -76,13 +67,17 @@ export async function loadPeopleData() {
    const username = pouet.account.display_name;
    let infos = idAndDate(pouet.created_at);
    let entry;
-
+    //console.log(pouet);
    //ignorer autres que images
    if (pouet.media_attachments?.length > 0 &&
        !pouet.media_attachments[0].type.includes('image')) {
      continue;
    }

+    if (pouet.in_reply_to_account_id) {
+      continue;
+    }
+
    if (pouet.content.includes('http')) {
      let textInfos = titleAndContent(pouet.content);
      entry = {
@@ -1,17 +1,14 @@
 import { reactive } from 'vue'

 export const dataStorage = reactive({
-  selectedMsg: { //empty msg template
+  selectedMsg: {
    title: '',
    date: '',
    content: '',
    like: 0,
    isLiked: false,
-    going: 0,
-    isGoing: false,
    wasRead: false,
-    isSelected: false,
-    isEvent: false
+    isSelected: false
  },
  selectedImg: {
    src: "",
@@ -22,16 +22,12 @@
        <CloseIcon name="close" class="icon"/>
      </button>
    </div>
-    <div class="windowContent">
+    <div class="windowContent" id="msgContent">
      <div class="reactBar">
        <p class="reactStatStyle">{{selectedMsg.like}}</p>
        <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
          <LikeIcon name="test" class="icon"/>
        </button>
-        <p v-show="selectedMsg.isEvent" class="reactStatStyle">{{selectedMsg.going}}</p>
-        <button v-show="selectedMsg.isEvent" type="button" class="textBtnStyle" :class="{reactedStyle: selectedMsg.isGoing}" @mousedown.capture="goingToEvent" @touchstart.capture="goingToEvent">
-          JE PARTICIPE!
-        </button>
      </div>
      <p id="selectedMsgText" @touchstart.stop>{{selectedMsg.content}}</p>
    </div>
@@ -58,6 +54,14 @@
    width: 333px;
    height: 333px;
  }
+
+  #msgContent{
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
  /*================ PC LARGE*/
  @media(min-width:1000px){
    #msgVisualizer{
@@ -107,9 +111,6 @@
      likeMsg(){
        dataStorage.selectedMsg.isLiked = !dataStorage.selectedMsg.isLiked
      },
-      goingToEvent(){
-        dataStorage.selectedMsg.isGoing = !dataStorage.selectedMsg.isGoing;
-      },
      closeMsg(){
        this.$emit('close');
        dataStorage.selectedMsg.isSelected = false;
@@ -25,8 +25,6 @@
            <p class="reactStatStyle">{{item.like}}</p>
            <LikeIcon name="testLike" class="icon" :class="{reactedStyle: item.isLiked}"/>
            <p class="reactStatStyle"v-show="item.isEvent">{{item.going}}</p>
-            <p v-show="item.isEvent && !item.isGoing" >PARTICIPAN.X.S</p>
-            <p v-show="item.isEvent && item.isGoing" class="reactedStyle">JE PARTICIPE!</p>
          </div>
        </div>
      </div>
@@ -248,11 +246,8 @@
            content: '',
            like: 0,
            isLiked: false,
-            going: 0,
-            isGoing: false,
            wasRead: false,
-            isSelected: false,
-            isEvent: false
+            isSelected: false
          }
      }
    },
@@ -162,6 +162,7 @@
    async mounted(){
      this.audioData = await loadAudioData();
      this.target = this.$refs.selectedAudio;
+      console.log('AUDIO/', this.audioData);
      this.loadAudio();
      console.log("Music player is loaded!");
    }