From 942e91fa193560e9170dd3b200454f62237b8813 Mon Sep 17 00:00:00 2001
From: Pierre Recontact <commit@recontact.me>
Date: Sun, 6 Dec 2020 22:59:07 +0100
Subject: [PATCH] feat(embedded): do not load embedded video by default

---
 front/components/ChapterCard/ChapterCard.vue  |  8 +++----
 .../ChapterCard/Paragraphs/Paragraphs.spec.js | 10 +++++++--
 .../ChapterCard/Paragraphs/Paragraphs.vue     | 22 +++++++++++++++++--
 .../__snapshots__/Paragraphs.spec.js.snap     |  2 +-
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/front/components/ChapterCard/ChapterCard.vue b/front/components/ChapterCard/ChapterCard.vue
index e35ad429..05decbcd 100644
--- a/front/components/ChapterCard/ChapterCard.vue
+++ b/front/components/ChapterCard/ChapterCard.vue
@@ -20,16 +20,16 @@
         class="chapter__image">
     </div>
     <paragraphs
-      :chapterText="chapterText"
+      :chapter-text="chapterText"
       :title="chapterTitle"/>
   </article>
 </template>
 
 <script>
-import translationsService from '../../services/services/translations'
-import Paragraphs from './Paragraphs/Paragraphs'
+  import translationsService from '../../services/services/translations'
+  import Paragraphs from './Paragraphs/Paragraphs'
 
-export default {
+  export default {
     name: 'ChapterCard',
     components: { Paragraphs },
     props: { chapter: { type: Object, default: () => {} } },
diff --git a/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js b/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js
index fcbc0940..c11a3f56 100644
--- a/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js
+++ b/front/components/ChapterCard/Paragraphs/Paragraphs.spec.js
@@ -1,11 +1,16 @@
+import VueI18n from 'vue-i18n'
 import Paragraphs from './Paragraphs.vue'
 
 describe('Component | Paragraphs.vue', () => {
   let wrapper
   let propsData
+  let localVue
 
   beforeEach(() => {
+    console.warn = jest.fn()
     propsData = { title: 'title', chapterText: ['voilà', ''] }
+    localVue = createLocalVue()
+    localVue.use(VueI18n)
   })
 
   describe('template', () => {
@@ -20,9 +25,10 @@ describe('Component | Paragraphs.vue', () => {
       expect(wrapper).toMatchSnapshot()
     })
 
-    it('should match snapshot with video', () => {
+    it('should match snapshot with video on click on loading button', async () => {
     propsData = { title: 'title', chapterText: ['https://www.youtu.be/embed/123'] }
-      wrapper = shallowMount(Paragraphs, { propsData })
+      wrapper = shallowMount(Paragraphs, { propsData, localVue })
+      await wrapper.find('button').trigger('click')
       expect(wrapper).toMatchSnapshot()
     })
   })
diff --git a/front/components/ChapterCard/Paragraphs/Paragraphs.vue b/front/components/ChapterCard/Paragraphs/Paragraphs.vue
index 0f019461..39b725ef 100644
--- a/front/components/ChapterCard/Paragraphs/Paragraphs.vue
+++ b/front/components/ChapterCard/Paragraphs/Paragraphs.vue
@@ -7,8 +7,13 @@
       <li
         v-if="paragraph"
         class="paragraph">
+        <button
+          v-if="paragraph.iframeSrc && isIframeHidden"
+          @click="displayIframe">
+          {{ $t("displayIframe") }}
+        </button>
         <iframe
-          v-if="paragraph.iframeSrc"
+          v-else-if="paragraph.iframeSrc && !isIframeHidden"
           :width="dimensions.width"
           :height="dimensions.height"
           :src="paragraph.iframeSrc"
@@ -50,7 +55,7 @@
       chapterText: { type: Array, default: () => [] },
       title: { type: String, default: () => '' },
     },
-    data: () => ({ dimensions: iframeDimensions() }),
+    data: () => ({ dimensions: iframeDimensions(), isIframeHidden: true }),
     computed: {
       paragraphs() {
         return this.chapterText
@@ -66,6 +71,19 @@
           text: paragraph,
         }
       },
+      displayIframe() {
+        this.isIframeHidden = false
+      },
+    },
+    i18n: {
+      messages: {
+        fr: {
+          displayIframe: 'Voir la vidéo',
+        },
+        en: {
+          displayIframe: 'See the video',
+        },
+      },
     },
   }
 </script>
diff --git a/front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap b/front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap
index 8528356f..8028a641 100644
--- a/front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap
+++ b/front/components/ChapterCard/Paragraphs/__snapshots__/Paragraphs.spec.js.snap
@@ -24,7 +24,7 @@ exports[`Component | Paragraphs.vue template should match snapshot with text 1`]
 </footer>
 `;
 
-exports[`Component | Paragraphs.vue template should match snapshot with video 1`] = `
+exports[`Component | Paragraphs.vue template should match snapshot with video on click on loading button 1`] = `
 <footer class="chapter__footer">
   <ul class="paragraph-container">
     <li class="paragraph"><iframe width="512" height="288" src="https://www.youtu.be/embed/123?rel=0&amp;modestbranding=1" title="title" allow="accelerometer; encrypted-media; gyroscope;" allowfullscreen="allowfullscreen" class="youtube-iframe"></iframe></li>