From 117e8bf0d8319b29c3137ba7474b66b63e3ef60c Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 11 Mar 2019 19:45:28 +0100
Subject: [PATCH] Add vimeo video to topic

---
 client/src/App.vue                            |  4 +-
 client/src/components/FullscreenVideo.vue     | 41 +++++++++++++++++++
 client/src/graphql/gql/topicQuery.gql         |  1 +
 client/src/pages/topic.vue                    | 19 +++++++++
 client/src/store/index.js                     | 11 ++++-
 .../books/migrations/0009_topic_vimeo_id.py   | 18 ++++++++
 server/books/models/topic.py                  |  2 +
 server/books/schema/queries.py                |  2 +-
 8 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/FullscreenVideo.vue
 create mode 100644 server/books/migrations/0009_topic_vimeo_id.py

diff --git a/client/src/App.vue b/client/src/App.vue
index af50e398..b80a48b6 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -19,6 +19,7 @@
   import NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
   import FullscreenImage from '@/components/FullscreenImage';
   import FullscreenInfographic from '@/components/FullscreenInfographic';
+  import FullscreenVideo from '@/components/FullscreenVideo';
 
   export default {
     name: 'App',
@@ -36,7 +37,8 @@
       EditObjectiveGroupWizard,
       NewProjectEntryWizard,
       FullscreenImage,
-      FullscreenInfographic
+      FullscreenInfographic,
+      FullscreenVideo
     },
 
     computed: {
diff --git a/client/src/components/FullscreenVideo.vue b/client/src/components/FullscreenVideo.vue
new file mode 100644
index 00000000..82a474a4
--- /dev/null
+++ b/client/src/components/FullscreenVideo.vue
@@ -0,0 +1,41 @@
+<template>
+  <modal class="fullscreen-video" :hide-header="true" :fullscreen="true">
+    <iframe :src="src"
+            width="2000"
+            height="1000"
+            class="fullscreen-video__embed"
+            frameborder="0" webkitallowfullscreen
+            mozallowfullscreen allowfullscreen></iframe>
+  </modal>
+
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+
+  export default {
+    components: {
+      Modal
+    },
+
+    computed: {
+      vimeoId() {
+        return this.$store.state.vimeoId;
+      },
+      src() {
+        return `https://player.vimeo.com/video/${this.vimeoId}`;
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .fullscreen-video {
+    &__embed {
+      max-width: 100%;
+      width: 100%;
+      height: 95vh;
+      vertical-align: bottom;
+    }
+  }
+</style>
diff --git a/client/src/graphql/gql/topicQuery.gql b/client/src/graphql/gql/topicQuery.gql
index 38a3a931..e3538f3f 100644
--- a/client/src/graphql/gql/topicQuery.gql
+++ b/client/src/graphql/gql/topicQuery.gql
@@ -5,6 +5,7 @@ query Topic($slug: String!){
     title
     teaser
     description
+    vimeoId
     modules {
       edges {
         node {
diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue
index 226dc281..8d3511bc 100644
--- a/client/src/pages/topic.vue
+++ b/client/src/pages/topic.vue
@@ -4,6 +4,9 @@
     <p class="topic__teaser">
       {{topic.teaser}}
     </p>
+    <div v-if="topic.vimeoId" class="topic__video-link" @click="openVideo">
+      <span class="topic__video-link-description">Video schauen</span>
+    </div>
     <div class="topic__modules">
       <module-teaser v-for="module in modules" :key="module.id" v-bind="module"></module-teaser>
     </div>
@@ -39,6 +42,12 @@
       }
     },
 
+    methods: {
+      openVideo() {
+        this.$store.dispatch('showFullscreenVideo', this.topic.vimeoId);
+      }
+    },
+
     data() {
       return {
         topic: {
@@ -60,6 +69,16 @@
       color: $color-darkgrey-1;
       width: 90%;
       @include lead-paragraph;
+      margin-bottom: $large-spacing;
+    }
+
+    &__video-link {
+      margin-bottom: $large-spacing;
+      cursor: pointer;
+    }
+
+    &__video-link-description {
+      @include heading-3;
     }
 
     &__modules {
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 58dcd61b..b0a045f4 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -23,7 +23,8 @@ export default new Vuex.Store({
     infographic: {
       id: 0,
       type: ''
-    }
+    },
+    vimeoId: null
   },
 
   getters: {},
@@ -51,6 +52,7 @@ export default new Vuex.Store({
         id: 0,
         type: ''
       });
+      commit('setVimeoId', null);
     },
     resetContentBlockPosition({commit}) {
       commit('setContentBlockPosition', {});
@@ -102,6 +104,10 @@ export default new Vuex.Store({
       commit('setInfographic', payload);
       dispatch('showModal', 'fullscreen-infographic');
     },
+    showFullscreenVideo({commit, dispatch}, payload) {
+      commit('setVimeoId', payload);
+      dispatch('showModal', 'fullscreen-video');
+    },
   },
 
   mutations: {
@@ -149,6 +155,9 @@ export default new Vuex.Store({
     },
     setInfographic(state, payload) {
       state.infographic = payload;
+    },
+    setVimeoId(state, payload) {
+      state.vimeoId = payload;
     }
   }
 })
diff --git a/server/books/migrations/0009_topic_vimeo_id.py b/server/books/migrations/0009_topic_vimeo_id.py
new file mode 100644
index 00000000..9af87cf2
--- /dev/null
+++ b/server/books/migrations/0009_topic_vimeo_id.py
@@ -0,0 +1,18 @@
+# Generated by Django 2.0.6 on 2019-03-11 15:38
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('books', '0008_auto_20190301_0954'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='topic',
+            name='vimeo_id',
+            field=models.CharField(default=None, max_length=200, null=True),
+        ),
+    ]
diff --git a/server/books/models/topic.py b/server/books/models/topic.py
index d3c89890..8f8079fd 100644
--- a/server/books/models/topic.py
+++ b/server/books/models/topic.py
@@ -18,11 +18,13 @@ class Topic(StrictHierarchyPage):
     order = models.PositiveIntegerField(null=False, blank=False, help_text='Order of the topic')
     teaser = models.TextField()
     description = RichTextField(features=DEFAULT_RICH_TEXT_FEATURES)
+    vimeo_id = models.CharField(max_length=200, null=True, default=None)
 
     content_panels = [
         FieldPanel('title', classname="full title"),
         FieldPanel('order'),
         FieldPanel('teaser'),
+        FieldPanel('vimeo_id'),
         FieldPanel('description'),
     ]
 
diff --git a/server/books/schema/queries.py b/server/books/schema/queries.py
index 7e6d76f0..3473a790 100644
--- a/server/books/schema/queries.py
+++ b/server/books/schema/queries.py
@@ -118,7 +118,7 @@ class TopicNode(DjangoObjectType):
     class Meta:
         model = Topic
         only_fields = [
-            'slug', 'title', 'meta_title', 'teaser', 'description',
+            'slug', 'title', 'meta_title', 'teaser', 'description',  'vimeo_id'
         ]
         filter_fields = {
             'slug': ['exact', 'icontains', 'in'],