edit: intégration video mastodon + bug fix liens

v1-com-officielle/src/data/peopleData.js

@@ -22,25 +22,16 @@ function titleAndContent(str){
   for(let line of contentData){
     if(line.includes('http')||line.includes('@')){
       let linkData = line.split("# ");
-      //console.log(title, linkData);
+      console.log(linkData[1]);
       let linkNoFormat;
-      if (linkData.includes('http')){
-        linkNoFormat = linkData[1].split("\"");
-      } else {
-        linkNoFormat = linkData[0]
-      }
       let url = "";
-      for(let el of linkNoFormat){
-        if(el.includes('http')){
-          url = el;
-          break
-        } else if(el.includes('@')){
-          url = 'mailto:' + el;
-          break
-        } else {
-          continue
-        }
+      if (linkData[1].includes('http')){
+        linkNoFormat = linkData[1].split("\"");
+        url = linkNoFormat[1];
+      } else if (linkData[1].includes('@')){
+          url = 'mailto:' + linkData[1];
       }
+      console.log("url info", url)
       src.push({
         caption: linkData[0],
         url: url
@@ -70,6 +61,11 @@ function exceptionKey(user, content){
   return false;
 }
 
+function videoExt(str){
+  let data = str.split('.');
+  return data.at(-1)
+}
+
 export async function loadPeopleData() {
   const usernamesRes = await fetch('/DATA/peopleData.json');
   const pData = await usernamesRes.json();
@@ -110,7 +106,8 @@ export async function loadPeopleData() {
     //console.log(pouet);
     //ignorer autres que images
     if (selectedPouet.media_attachments?.length > 0 &&
-        !pouet.media_attachments[0].type.includes('image')) {
+        !pouet.media_attachments[0].type.includes('image') &&
+        !pouet.media_attachments[0].type.includes('video')) {
       continue;
     }
     //ignorer réponses
@@ -140,6 +137,7 @@ export async function loadPeopleData() {
     } else if (selectedPouet.media_attachments?.length > 0) {
           let textInfos = titleAndContent(selectedPouet.content);
           //console.log(pouet);
+          if (pouet.media_attachments[0].type.includes('image')){
               entry = {
               id: 'img' + displayName + infos.id,
               date: infos.date,
@@ -153,6 +151,24 @@ export async function loadPeopleData() {
               like: selectedPouet.favourites_count,
               isSelected: false
             }
+          }
+          if (pouet.media_attachments[0].type.includes('video')){
+              let videoType = videoExt(selectedPouet.media_attachments[0].url)
+              entry = {
+              id: 'vid' + displayName + infos.id,
+              date: infos.date,
+              dateInfo: selectedPouet.created_at,
+              type: "video",
+              format: selectedPouet.media_attachments[0].type + '/' + videoType,
+              author: displayName,
+              caption: textInfos.title + '.move',
+              src: selectedPouet.media_attachments[0].url,
+              alt: selectedPouet.media_attachments[0].description,
+              description: textInfos.content,
+              like: selectedPouet.favourites_count,
+              isSelected: false
+            }
+          }
     } else {
       let textInfos = titleAndContent(selectedPouet.content);
       entry = {
@@ -166,6 +182,7 @@ export async function loadPeopleData() {
         isSelected: false
       };
     }
+    //console.log(entry);
     files[username].push(entry);
   }
 

v1-com-officielle/src/dataExchange.js

@@ -21,5 +21,13 @@ export const dataStorage = reactive({
   selectedLink:{
     linksData: [],
     description: ''
+  },
+  selectedVideo: {
+    src: "",
+    caption: "",
+    like: 0,
+    alt: "",
+    format:"",
+    isLiked: false
   }
 })

v1-com-officielle/src/indieComponents/ArtistPannel.vue

@@ -332,7 +332,7 @@
         rootDepth: 0
       }
     },
-    emits: ['close','focus','openImg','openLink'],
+    emits: ['close','focus','openImg','openLink','openVideo'],
     methods:{
       onDrag({ target, transform }) {
         target.style.transform = transform;
@@ -393,7 +393,19 @@
             caption: e.caption,
             description: e.description
           }
-          //console.log(dataStorage.selectedLink);
+          console.log(dataStorage.selectedLink);
+        }
+        if(e.type === 'video'){
+            this.$emit('openVideo');
+            dataStorage.selectedVideo = {
+              src: e.src,
+              caption: e.caption,
+              like: e.like,
+              alt: e.alt,
+              format: e.format,
+              isLiked: e.isLiked
+            }
+            this.displayedDescription = e.description;
         }
 
         this.selectFile(e);

v1-com-officielle/src/indieComponents/DonationPannel.vue

@@ -20,7 +20,7 @@
         </button>
       </div>
       <div class="windowContent">
-          <p>Si tu penses que tu as les moyens<br>de nous faire une petite donation,<br> toute participation est la bienvenue et<br>ça nous aiderait bien à démarrer le projet ^^</p>
+          <p>On a besoin de ton aide ! <br><br> Si tu penses que tu as les moyens<br>de nous faire une petite donation,<br> toute participation est la bienvenue et<br>ça nous aiderait bien à démarrer le projet ^^</p>
           <div id="linkRow">
             <a href="#" class="textBtnStyle">Lydia</a>
             <a href="#" class="textBtnStyle">Paypal</a>

v1-com-officielle/src/indieComponents/LinkPannel.vue

@@ -15,13 +15,13 @@
           {{selectedLink.caption}}
         </p>
         <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
-        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.stop="$emit('close')" data-tooltip="fermer">
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
       <div class="windowContent" id="linkContent">
         <p id="linkTextStyle">{{selectedLink.description}}</p>
-        <a class="textBtnStyle" v-for="item in selectedLink.linksData" :href="item.url" target="_blank">{{item.caption}}</a>
+        <a class="textBtnStyle" v-for="item in selectedLink.linksData" :href="item.url" target="_blank" @mousedown.stop @touchstart.stop>{{item.caption}}</a>
       </div>
     </div>
 </template>
@@ -104,6 +104,7 @@
     emits: ['close','focus'],
     computed: {
       selectedLink(){
+        console.log(this.selectedLink);
         return dataStorage.selectedLink
       }
     },

v1-com-officielle/src/indieComponents/VideoPannel.vue

@@ -0,0 +1,114 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+    import LikeIcon from '../assets/icons/like.svg'
+</script>
+
+<template>
+    <div id="videoPannel" class="windowStyle" ref="videoPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          {{selectedVideo.caption}}
+        </p>
+        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent" id="visualizerContent">
+        <video controls autoplay id="displayedImgStyle">
+          <source :src="selectedVideo.src" :type="selectedVideo.format">
+        </video>
+        <div class="reactBar">
+          <p class="reactStatStyle">{{selectedVideo.like}}</p>
+          <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedVideo.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
+            <LikeIcon name="test" class="icon"/>
+          </button>
+        </div>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+
+  #videoPannel{
+    position: fixed;
+    width: 333px;
+    height: auto;
+    top: 500px;
+    left: 16.1px;
+    border-radius: 16.1px;
+  }
+
+  #videoContent{
+    align-items: flex-start;
+  }
+
+  #displayedImgStyle{
+    width:100%;
+    height:auto;
+    margin: 0;
+    padding: 0;
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #videoPannel{
+      top: 333px;
+      left: 161px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'VideoPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed: {
+      selectedVideo(){
+        return dataStorage.selectedVideo
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      likeImg(){
+        this.selectedVideo.isLiked = !this.selectedVideo.isLiked;
+        console.log(this.selectedVideo);
+      }
+    },
+    mounted(){
+      this.target = this.$refs.videoPannel;
+      console.log("Video pannel is loaded!");
+    }
+  };
+</script>

v1-com-officielle/src/infoComponents/InfoMenu.vue

@@ -66,6 +66,7 @@
       v-show="isActive.includes('artist')"
       @openImg = "openPannel('visual')"
       @openLink = "openPannel('link')"
+      @openVideo = "openPannel('video')"
       @close="closePannel('artist')"
       @focus="focusPannel('artist')"
       :class="{zBase: isFocused!=='artist', zFocus: isFocused==='artist'}">
@@ -106,6 +107,12 @@
       @focus="focusPannel('visual')"
       :class="{zBase: isFocused!=='visual', zFocus: isFocused==='visual'}">
     </VisualizerPan>
+    <VideoPan
+      v-show="isActive.includes('video')"
+      @close="closePannel('video')"
+      @focus="focusPannel('video')"
+      :class="{zBase: isFocused!=='video', zFocus: isFocused==='video'}">
+    </VideoPan>
     <LinkPan
       v-show="isActive.includes('link')"
       @close="closePannel('link')"

v1-com-officielle/src/main.js

@@ -22,6 +22,7 @@ import InstaPannel from './indieComponents/InstaPannel.vue'
 import MessagePannel from './indieComponents/MessagePannel.vue'
 import FollowPannel from './indieComponents/FollowPannel.vue'
 import VisualizerPannel from './indieComponents/VisualizerPannel.vue'
+import VideoPannel from './indieComponents/VideoPannel.vue'
 import LinkPannel from './indieComponents/LinkPannel.vue'
 import DonationPannel from './indieComponents/DonationPannel.vue'
 import TicketPannel from './indieComponents/TicketPannel.vue'
@@ -51,6 +52,7 @@ app.component('InstaPan', InstaPannel);
 app.component('MessagePan', MessagePannel);
 app.component('FollowPan', FollowPannel);
 app.component('VisualizerPan', VisualizerPannel);
+app.component('VideoPan', VideoPannel);
 app.component('LinkPan', LinkPannel);
 app.component('DonationPan', DonationPannel);
 app.component('TicketPan', TicketPannel);

v1-com-officielle/src/titleComponents/TitleText.vue

@@ -38,7 +38,7 @@
             <a href="https://grrrndzero.org/" target="_blank">
               <p><strong>Grrrnd Zero</strong></p>
               <p>60 Avenue de Bohlen</p>
-              <p>69110 Vaux-en-Velin</p>
+              <p>69120 Vaux-en-Velin</p>
             </a>
           </div>
         </div>