Add Video Submit card

xiaoyunge · Dec 27, 2020 · 1cddb1f · 1cddb1f
1 parent 6e8e39c
commit 1cddb1f
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 4 deletions.
diff --git a/components/video/row.vue b/components/video/row.vue
@@ -7,8 +7,9 @@
             }"
             class="video-row-contents flex overflow-x-auto whitespace-no-wrap py-2 space-x-6"
         >
-            <VideoCard
+            <component
                 v-for="video in videos"
+                :is="cardType ( video )"
                 :key="video.slug"
                 :video="video"
                 :style="{
@@ -68,11 +69,13 @@
 
 <script>
 
+import SubmitCard from '~/components/video/submit-card.vue'
 import VideoCard from '~/components/video/card.vue'
 
 
 export default {
     components: {
+        SubmitCard,
         VideoCard
     },
     props: {
@@ -92,6 +95,14 @@ export default {
     methods: {
         scrollRow ( pixels ) {
             this.$refs['row'].scrollBy({ left: pixels, behavior: 'smooth' })
+        },
+        isSubmitCard ( video ) {
+            return video.endpoint.includes('https://docs.google.com/forms')
+        },
+        cardType ( video ) {
+            if (this.isSubmitCard(video)) return SubmitCard
+
+            return VideoCard
         }
     }
 }

diff --git a/components/video/submit-card.vue b/components/video/submit-card.vue
@@ -0,0 +1,69 @@
+<template>
+
+    <div class="video-card">
+        <a
+            :href="video.endpoint"
+            class=""
+        >
+            <div class="video-card-container relative overflow-hidden bg-white">
+                <div class="video-card-image ratio-wrapper">
+                    <div class="relative overflow-hidden w-full pb-16/9">
+                        <!-- <img
+                            :srcset="thumbnailSrcset"
+                            :sizes="thumbnailSizes"
+                            :src="video.thumbnails.default.url"
+                            :alt="video.name"
+                            class="absolute h-full w-full object-cover"
+                        > -->
+                    </div>
+                </div>
+                <div
+                    :style="{
+                        '--gradient-from-color': 'rgba(0, 0, 0, 1)',
+                        '--gradient-to-color': 'rgba(0, 0, 0, 0.7)'
+                    }"
+                    class="video-card-overlay absolute inset-0 flex justify-between items-start bg-gradient-to-tr from-black to-transparent p-4"
+                >
+                    <div class="plus-circle w-8 h-8 bg-white-2 flex justify-center items-center outline-0 rounded-full ease">
+                        <svg
+                            viewBox="0 0 24 24"
+                            style="width:18px;height:18px;"
+                        >
+                            <path
+                                fill="currentColor"
+                                d="M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z"
+                            />
+                            <!-- Plus Icon: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" -->
+                        </svg>
+                    </div>
+
+                </div>
+
+                <!-- Video Text Content -->
+                <div class="video-card-content absolute inset-0 flex items-end py-4 px-6">
+                    <div class="w-full text-sm text-left whitespace-normal">Submit Video</div>
+                </div>
+            </div>
+        </a>
+    </div>
+
+</template>
+
+<script>
+
+import { getVideoEndpoint } from '~/helpers/app-derived.js'
+
+export default {
+    props: {
+        video: {
+            type: Object,
+            required: true
+        }
+    },
+    // computed: {},
+    methods: {
+        getVideoEndpoint
+    }
+}
+
+</script>
diff --git a/pages/app/_slug/benchmarks.vue b/pages/app/_slug/benchmarks.vue
@@ -122,7 +122,8 @@ export default {
 
         return {
             app,
-            allVideos: relatedVideos
+            allVideos: relatedVideos,
+            submitVideoCard
         }
     },
     data: function () {
@@ -184,13 +185,14 @@ export default {
             this.performanceVideos.push(video)
         })
 
+        // Append submit card to end
+        this.benchmarkVideos.push(this.submitVideoCard)
+
 
         // console.log('Added performance videos')
         // console.log('benchmarkVideos.length', this.benchmarkVideos.length)
         // console.log('performanceVideos.length', this.performanceVideos.length)
         // console.log('moreVideos.length', this.moreVideos.length)
-
-
     },
     mounted () {
         window.onhashchange = this.loadVideoFromHash