Add vimeo video to topic

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: {

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>

client/src/graphql/gql/topicQuery.gql

@@ -5,6 +5,7 @@ query Topic($slug: String!){
     title
     teaser
     description
+    vimeoId
     modules {
       edges {
         node {

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 {

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;
     }
   }
 })

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),
+        ),
+    ]

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'),
     ]
 

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'],