Version 1.1.0 - Modification et ajout de fonctionnalités

src/components/Widget/VideoComposable.vue

@@ -1,8 +1,8 @@
 <template>
 <Video :video="video" ref="videoContainer">
     <div ref="controls" class="controls">
-        <span v-if="globalStore.currentChannel" title="Ajouter à la liste de lecture" @click="disableAction(); playSong(false)" class="control-icon"><AddList /></span>
-        <span v-if="globalStore.currentChannel" title="Lire maintenant" @click="disableAction(); playSong(true)" class="control-icon"><Icon icon="fa-play" /></span>
+        <span title="Ajouter à la liste de lecture" @click="disableAction(); playSong(false)" :class="{'control-icon': globalStore.currentChannel, 'control-icon-disable': !globalStore.currentChannel}"><AddList /></span>
+        <span title="Lire maintenant" @click="disableAction(); playSong(true)" :class="{'control-icon': globalStore.currentChannel, 'control-icon-disable': !globalStore.currentChannel}"><Icon icon="fa-play" /></span>
         <span v-if="!props.delete && video.type != 'attachment'" title="Enregistrer dans une playlist" @click="disableAction(); saveModal.open()" class="control-icon"><Icon icon="fa-save" /></span>
         <span v-if="props.delete" title="Supprimer" @click="disableAction(); Events.emit('video:delete', { video: props.video })" class="control-icon"><Icon icon="fa-trash" /></span>
     </div>
@@ -11,7 +11,7 @@
     <Video :video="video"/>
     <Button v-if="globalStore.currentChannel" @click="playSong(false)"><AddList /> Ajouter à la liste de lecture</Button>
     <Button v-if="globalStore.currentChannel" @click="playSong(true)"><Icon icon="fa-solid fa-play"/> Lire maintenant</Button>
-    <div v-else>
+    <div v-if="!globalStore.currentChannel" >
         <p class="text-secondary">Connectez vous à un salon audio sur le serveur {{ globalStore.actualServer ? globalStore.actualServer.name : '' }}, pour lancer un titre</p>
         <ActualChannel/>
     </div>
@@ -64,6 +64,7 @@ const props = defineProps({
 let nativeVideo = {}
 
 function disableAction() {
+    if(!globalStore.currentChannel) return;
     controls.value.style.display = "none";
 }
 
@@ -74,7 +75,7 @@ let activePointerId = null;
 const SLIDE_THRESHOLD = 10; // ajuster si besoin
 
 function playSong(now) {
-    
+    if(!globalStore.currentChannel) return;
     IORequest("/SEARCH/PLAY", (data) => {
         modal.value.close();    
     }, {song: nativeVideo, now: now})
@@ -118,9 +119,12 @@ onMounted(() => {
             if (activePointerId != null) videoContainer.value.releasePointerCapture(activePointerId);
         } catch (e) { /* ignore */ }
         if(!videoContainer.value) return
+        try {
         videoContainer.value.removeEventListener('pointermove', onPointerMove);
         videoContainer.value.removeEventListener('pointerup', onPointerUp);
         videoContainer.value.removeEventListener('pointercancel', onPointerCancel);
+        } catch (e) { console.log(videoContainer.value) }
+  
         activePointerId = null;
     };
 
@@ -149,10 +153,16 @@ onMounted(() => {
         isSliding = false;
         activePointerId = ev.pointerId;
         if(!videoContainer.value) return
+        try {
+            thumbnailContainer.value = videoContainer.value.getThumbnailContainer();
+            videoContainer.value = videoContainer.value.getVideoContainer();
+        } catch (e) { }
         try { videoContainer.value.setPointerCapture(activePointerId); } catch (e) { /* ignore */ }
-        videoContainer.value.addEventListener('pointermove', onPointerMove);
-        videoContainer.value.addEventListener('pointerup', onPointerUp);
-        videoContainer.value.addEventListener('pointercancel', onPointerCancel);
+        try {
+             videoContainer.value.addEventListener('pointermove', onPointerMove);
+            videoContainer.value.addEventListener('pointerup', onPointerUp);
+            videoContainer.value.addEventListener('pointercancel', onPointerCancel);
+        } catch (e) { console.log(videoContainer.value) }
     };
 
     videoContainer.value.addEventListener('pointerdown', onPointerDown);
@@ -218,6 +228,20 @@ onMounted(() => {
     opacity: 0.8;
 }
 
+.control-icon-disable {
+    font-size: 1.2em;
+    background-color: var(--text-inverse);
+    color: var(--secondary);
+    border-radius: 100%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+}
+
+
 
 .video:hover .controls {
     opacity: 1;