Ajout du live

2026-05-20 23:43:01 +02:00
parent 12e5befd42
commit e0ae10c89d
5 changed files with 174 additions and 1 deletions
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="Calque_1"
+   data-name="Calque 1"
+   viewBox="0 0 40.19 38.9"
+   version="1.1"
+   sodipodi:docname="live.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3" />
+  <sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="12.366161"
+     inkscape:cx="16.415765"
+     inkscape:cy="15.121912"
+     inkscape:window-width="1714"
+     inkscape:window-height="1081"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Calque_1" />
+  <path
+     d="M33.56,0H0v38.9h40.19V0h-6.62ZM32.3,33.62H5.28V5.28h2.61s24.41,0,24.41,0h0s2.61,0,2.61,0v28.34h-2.61Z"
+     id="path2" />
+  <path
+     style="fill:currentColor;fill-opacity:1;stroke-width:1.51181;paint-order:stroke markers fill"
+     d="M 27.347382,19.189543 12.842618,10.815214 v 17.269572 z"
+     id="path3" />
+</svg>
@@ -293,6 +293,7 @@ html, body{
  border-radius: 21px;
  border-color: var(--main-color);
  overflow: hidden;
+  position: relative;
 }

 .zBase{
@@ -321,11 +322,16 @@ html, body{
  display: flex;
  flex-direction: row;
  align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  cursor: move;
+  gap: 10px;
+}
+
+.windowTitle p:first-child {
+  flex: 1;
 }

 .windowTitleLower{
@@ -344,6 +350,11 @@ html, body{
  width: 50px;
  height: 33px;
  align-items: center;
+  position: relative;
+  z-index: 100;
+  text-align: center;
+  line-height: 38px;
+  padding: 0;
 }

 .closeBtn:hover{
@@ -0,0 +1,103 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+    import LinkIcon from "../assets/icons/link.svg"
+</script>
+
+<template>
+    <div id="livePannel" class="windowStyle" ref="livePannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          Drags&Nerds #2 en DIRECT
+        </p>
+        <a type="button" class="closeBtn" href="https://peertube.1312.media/w/jCDFda8rcm8heLwDN2u2HZ" target="_blank" data-tooltip="Ouvrir dans un nouvel onglet">
+          <LinkIcon name="Ouvrir dans une nouvelle fenêtre" class="icon"/>
+        </a>
+        <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">
+        <iframe title="Drags&Nerds #2 en DIRECT" src="https://peertube.1312.media/videos/embed/jCDFda8rcm8heLwDN2u2HZ" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+      </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){}
+  */
+
+  #livePannel{
+    position: fixed;
+    width: 80vw;
+    height: auto;
+    top: 100px;
+    left: min(50px, 10vw);
+    border-radius: 16.1px;
+    max-width: 1300px;
+    background: black;
+  }
+
+  #livePannel::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 25%;
+    z-index: 10;
+  }
+
+  #livePannel iframe {
+    margin-top: -50px;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'LivePannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed: {
+      selectedVideo(){
+        return dataStorage.selectedVideo
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.livePannel;
+      console.log("Live pannel is loaded!");
+    }
+  };
+</script>
@@ -2,6 +2,7 @@
  import PeopleIcon from '../assets/icons/people.svg'
  import InstaIcon from '../assets/icons/insta.svg'
  import ContactIcon from '../assets/icons/contact.svg'
+  import LiveIcon from '../assets/icons/live.svg'
 </script>

 <template>
@@ -58,6 +59,9 @@
        <button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')" data-tooltip="nous contacter">
          <ContactIcon name="contact" class="icon"/>
        </button>
+        <button type="button" class="iconBtnStyle" id="btn" @click="openPannel('live')" data-tooltip="Drags&Nerds #2 en DIRECT!">
+          <LiveIcon name="live" class="icon"/>
+        </button>
      </div>
    </div>
    <!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link' 'follow' 'donation'-->
@@ -113,6 +117,12 @@
      @focus="focusPannel('video')"
      :class="{zBase: isFocused!=='video', zFocus: isFocused==='video'}">
    </VideoPan>
+    <LivePan
+      v-show="isActive.includes('live')"
+      @close="closePannel('live')"
+      @focus="focusPannel('live')"
+      :class="{zBase: isFocused!=='live', zFocus: isFocused==='live'}">
+      ></LivePan>
    <LinkPan
      v-show="isActive.includes('link')"
      @close="closePannel('link')"
@@ -315,6 +325,13 @@
    },
    mounted(){
      console.log("Info menu is loaded!");
+      const START_DATE = new Date("2026-05-22T16:00:00.000Z");
+      const END_DATE = new Date("2026-05-23T01:00:00.000Z");
+      const now = Date.now();
+
+      if(now > START_DATE.getTime() && now < END_DATE.getTime()) {
+        this.openPannel('live')
+      }
    }
  };
 </script>
@@ -23,6 +23,7 @@ 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 LivePannel from './indieComponents/LivePannel.vue'
 import LinkPannel from './indieComponents/LinkPannel.vue'
 import DonationPannel from './indieComponents/DonationPannel.vue'
 import TicketPannel from './indieComponents/TicketPannel.vue'
@@ -53,6 +54,7 @@ app.component('MessagePan', MessagePannel);
 app.component('FollowPan', FollowPannel);
 app.component('VisualizerPan', VisualizerPannel);
 app.component('VideoPan', VideoPannel);
+app.component('LivePan', LivePannel);
 app.component('LinkPan', LinkPannel);
 app.component('DonationPan', DonationPannel);
 app.component('TicketPan', TicketPannel);