List videos by tag

components/video/card.vue

@@ -2,7 +2,7 @@
 
     <div class="video-card">
         <a
-            :href="videoEndpoint"
+            :href="video.endpoint"
             class=""
         >
             <div class="video-card-container relative overflow-hidden bg-black">
@@ -22,7 +22,7 @@
                         '--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-start items-start bg-gradient-to-tr from-black to-transparent p-4"
+                    class="video-card-overlay absolute inset-0 flex justify-between items-start bg-gradient-to-tr from-black to-transparent p-4"
                 >
                     <div class="play-circle w-8 h-8 bg-white-2 flex justify-center items-center outline-0 rounded-full ease">
                         <svg
@@ -35,7 +35,17 @@
                             />
                         </svg>
                     </div>
+
+                    <div
+                        v-if="pill"
+                        class="video-pill h-5 text-xs bg-white-2 flex justify-center items-center outline-0 rounded-full ease px-2"
+                    >
+                        {{ pill }}
+                    </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">{{ video.name }}</div>
                 </div>
@@ -47,7 +57,7 @@
 
 <script>
 
-import { getVideoEndpoint } from '~/helpers/app-derived.js'
+// import { getVideoEndpoint } from '~/helpers/app-derived.js'
 
 export default {
     props: {
@@ -77,12 +87,14 @@ export default {
                 return `${thumbnail.url} ${thumbnail.width}w`
             }).join(', ')
         },
-        videoEndpoint () {
+        pill () {
-            return getVideoEndpoint(this.video)
+            // if this video has a banchmark tag
+            // then pill is 'Benchmark'
+            if (this.video.tags.includes('benchmark')) return 'Benchmark'
+
+            // No pill
+            return null
         }
-    },
-    methods: {
-        getVideoEndpoint
     }
 }
 

helpers/build-video-list.js

@@ -23,6 +23,66 @@ const videoFeaturesApp = function (app, video) {
     return false
 }
 
+const generateVideoTags = function ( video ) {
+    const tags = {
+        'benchmark': {
+            relatedWords: [
+                'benchmarks',
+                'comparison',
+                'speed test',
+                'bench mark',
+                'bench marks'
+            ]
+        },
+        'performance': {
+            relatedWords: [
+                'speed'
+            ]
+        }
+    }
+
+    const videoTags = video.tags
+
+    // Match tags against video titles and descriptions
+    for (const tagKey in tags) {
+
+        // Skip if this video already has this tag
+        // then skip it
+        if (videoTags.includes(tagKey)) continue
+
+        const matchingWords = [
+            tagKey,
+            ...tags[tagKey].relatedWords
+        ]
+
+        for (const tagWord of matchingWords) {
+
+            // Skip if this video already has this tag
+            // then stop this loop
+            if (videoTags.includes(tagKey)) break
+
+            // Check title
+            if (matchesWholeWord(tagWord.toLowerCase(), video.title.toLowerCase())) {
+                videoTags.push(tagKey)
+
+                // console.log(video.title, 'has', tagKey, 'tag')
+
+                // We're done since the tag matched for the title
+                continue
+            }
+
+            // Check description
+            if (matchesWholeWord(tagWord.toLowerCase(), video.description.toLowerCase())) {
+                videoTags.push(tagKey)
+
+                // console.log(video.title, 'has', tagKey, 'tag')
+            }
+        }
+    }
+
+    return videoTags
+}
+
 export default async function ( applist ) {
 
     // Fetch Commits
@@ -68,6 +128,7 @@ export default async function ( applist ) {
             lastUpdated,
             apps,
             slug,
+            tags: generateVideoTags(fetchedVideos[videoId]),
             timestamps: fetchedVideos[videoId].timestamps,
             thumbnails: fetchedVideos[videoId].rawData.snippet.thumbnails,
             endpoint: getVideoEndpoint({

pages/app/_slug/benchmarks.vue

@@ -36,9 +36,10 @@
                 <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
                     Benchmark Videos
                 </h2>
+                <!-- <pre class="text-left">{{ benchmarkVideos }}</pre> -->
                 <VideoRow
-                    v-if="relatedVideos.length !== 0"
+                    v-if="benchmarkVideos.length !== 0"
-                    :videos="relatedVideos"
+                    :videos="benchmarkVideos"
                     :active-video-id="video.id"
                 />
             </div>
@@ -47,9 +48,10 @@
                 <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
                     Performance Videos
                 </h2>
+                <!-- <pre class="text-left">{{ performanceVideos }}</pre> -->
                 <VideoRow
-                    v-if="relatedVideos.length !== 0"
+                    v-if="performanceVideos.length !== 0"
-                    :videos="relatedVideos"
+                    :videos="performanceVideos"
                     :active-video-id="video.id"
                 />
             </div>
@@ -58,9 +60,10 @@
                 <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
                     More Videos
                 </h2>
+                <!-- <pre class="text-left">{{ relatedVideos }}</pre> -->
                 <VideoRow
-                    v-if="relatedVideos.length !== 0"
+                    v-if="moreVideos.length !== 0"
-                    :videos="relatedVideos"
+                    :videos="moreVideos"
                     :active-video-id="video.id"
                 />
             </div>
@@ -103,38 +106,91 @@ export default {
 
         const app = allVideoAppsList.find(app => (app.slug === slug))
 
+        const submitVideoCard = {
+            endpoint: `https://docs.google.com/forms/d/e/1FAIpQLSeEVGM9vE7VcfLMy6fJkfU70X2VZ60rHDyhDQLtnAN4nso0WA/viewform?usp=pp_url&entry.1018125313=${app.name}`
+        }
+
         // const featuredApps = []
 
-        const relatedVideos = videosRelatedToApp( app )
+        const relatedVideos = videosRelatedToApp( app ).map(video => {
-
+            // console.log('video', video)
-        // console.log('relatedVideos', relatedVideos)
+            return {
+                ...video,
+                endpoint: `#${video.id}`
+            }
+        })
 
         return {
             app,
-            relatedVideos: relatedVideos.map(video => {
+            allVideos: relatedVideos
-                // console.log('video', video)
-                return {
-                    ...video,
-                    endpoint: `#${video.id}`
-                }
-            })
         }
     },
     data: function () {
         return {
-            activeVideoIndex: 0
+            activeVideoIndex: 0,
+            benchmarkVideos: [],
+            performanceVideos: [],
+            moreVideos: [],
         }
     },
     computed: {
         video () {
-            return this.relatedVideos[this.activeVideoIndex]
+            return this.allVideos[this.activeVideoIndex]
         },
         title () {
             return `${this.app.name} Benchmarks for Apple Silicon - Does It ARM`
         },
         description () {
-            return `Apple Silicon performance and support videos for ${this.app.name}`
+            return `Apple Silicon benchmark, performance, and support videos for ${this.app.name}`
-        }
+        },
+    },
+    created () {
+
+        const nonBenchmarkVideos = []
+
+        // console.log('benchmarkVideos.length', this.benchmarkVideos.length)
+        // console.log('performanceVideos.length', this.performanceVideos.length)
+        // console.log('moreVideos.length', this.moreVideos.length)
+
+        // Move benchmark videos out of related videos
+        this.allVideos.forEach((video, index) => {
+            // console.log('video.name', video.name)
+            // console.log('video.tags', video.tags)
+
+            if (!video.tags.includes('benchmark')) {
+                nonBenchmarkVideos.push(video)
+                return
+            }
+
+
+            // Add to benchmark videos
+            this.benchmarkVideos.push(video)
+        })
+
+        // console.log('Added benchmark videos')
+        // console.log('benchmarkVideos.length', this.benchmarkVideos.length)
+        // console.log('performanceVideos.length', this.performanceVideos.length)
+        // console.log('moreVideos.length', this.moreVideos.length)
+
+        // Move performance videos out of related videos
+        nonBenchmarkVideos.forEach((video, index) => {
+
+            if (!video.tags.includes('performance')) {
+                this.moreVideos.push(video)
+                return
+            }
+
+            // Add to benchmark videos
+            this.performanceVideos.push(video)
+        })
+
+
+        // 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
@@ -149,10 +205,12 @@ export default {
             const hashId = location.hash.split('#')[1]
 
             // Find the index of the video with the matching hash
-            const newVideoIndex = this.relatedVideos.findIndex(video => {
+            const newVideoIndex = this.allVideos.findIndex(video => {
                 return video.id === hashId
             })
 
+            console.log('newVideoIndex', newVideoIndex)
+
             // Load in the index to load out video
             this.activeVideoIndex = newVideoIndex