field video on paragraphe source

src/components/contents/Entite.vue

@@ -52,11 +52,11 @@ export default {
     <section v-if="entite.image.length || entite.can_update" class="image">
       <ImageEditable 
         :can_update="entite.can_update"
-        :image="entite.image"
+        :image="entite.image[0]"
         :data="{
           entitytype: 'node',
           bundle: 'entite',
-          nid: this.entite.id,
+          id: this.entite.id,
           uuid: this.entite.uuid,
           field: 'field_image'
         }"

src/components/contents/Source.vue

@@ -8,12 +8,16 @@ import { UserStore } from '@stores/user'
 import ContentEditable from '@components/editable/ContentEditable.vue';
 import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
 import ImageEditable from '@components/editable/ImageEditable.vue';
+import VideoEditable from '@components/editable/VideoEditable.vue';
 
 export default {
   props: ['concernement', 'entite', "eid", 'source'],
   emits: ['reloadEntite'],
   data() {
     return {
+      // plyr_options: {
+      //   controls: ['play', 'progress', 'current-time', 'mute', 'volume']
+      // }
     }
   },
   computed: {
@@ -37,6 +41,7 @@ export default {
     ContentEditable,
     CheckboxEditable,
     ImageEditable,
+    VideoEditable,
   }
 }
 </script>
@@ -61,33 +66,41 @@ export default {
           v-on:updated="reloadEntite" />
     </section>
       
+    <!-- v-if="source.images.length"
+      :key="j" 
+      -->
     <section
-      v-if="source.images.length" 
       class="images">
-        <figure
-          v-for="(image, j) in source.images"
-          :key="j">
-          <figure>
-            <img :src="image.url" :alt="image.alt"/>
-            <figcaption>{{ image.alt }}</figcaption>
-          </figure>
-        </figure>
+        <ImageEditable
+          :can_update="entite.can_update"
+          :image="source.images[0]"
+          :data="{
+            entitytype: 'paragraph',
+            bundle: 'source',
+            id: this.source.id,
+            uuid: this.source.uuid,
+            field: 'field_images'
+          }"
+          v-on:updated="reloadEntite" />
     </section>
 
+    <!-- v-if="source.videos.length" -->
     <section
-      v-if="source.videos.length"
-      class="video multiple">
-        <vue-plyr
-          v-for="(video,v) in source.videos"
-          :key="v">
-            <div class="plyr__video-embed">
-              <!-- TODO fix vimeo embed url -->
-              <iframe 
-                :src="video.url"
-                allowfullscreen
-              ></iframe>
-            </div>
-        </vue-plyr>
+      class="video">
+        <VideoEditable
+          :can_update="entite.can_update"
+          :video="source.videos[0]"
+          :data="{
+            entitytype: 'paragraph',
+            bundle: 'source',
+            id: this.source.id,
+            uuid: this.source.uuid,
+            field: {
+              field_name: 'field_videos',
+              value: 'value'
+            }
+          }"
+          v-on:updated="reloadEntite"/>
     </section>
 
     <section
@@ -98,7 +111,7 @@ export default {
             :key="a">
           <label v-if="audio.description">{{ audio.description }}</label>
           <label v-else>{{ audio.file.filename }}</label>
-          <vue-plyr>
+          <vue-plyr  :options="plyr_options">
               <audio>
                 <source :src="audio.file.url" :type="audio.file.filemime" />
               </audio>

src/components/contents/TerrainDeVie.vue

@@ -202,9 +202,9 @@ export default {
         })
     },
     onMainScrolled(scrolled){
-      console.log('this.$refs', this.$refs);
+      // console.log('this.$refs', this.$refs);
       let cartouche_main = this.$refs.cartouche_layout.$refs.cartouche_main;
-      console.log('cartouche_main', cartouche_main);
+      // console.log('cartouche_main', cartouche_main);
       if(scrolled && cartouche_main.scrollHeight > 600){
         this.headerreduced = true;
       } else {