feat(embedded): do not load embedded video by default

trollepierre · Dec 6, 2020 · 025d99a · 025d99a
1 parent 5997bb0
commit 025d99a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>