Skip to content

Commit

Permalink
List videos by tag
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThatGuySam
ThatGuySam committed Dec 27, 2020
1 parent a6c1332 commit 6e8e39c
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 29 deletions.
28 changes: 20 additions & 8 deletions components/video/card.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -47,7 +57,7 @@

<script>
import { getVideoEndpoint } from '~/helpers/app-derived.js'
// import { getVideoEndpoint } from '~/helpers/app-derived.js'
export default {
props: {
Expand Down Expand Up @@ -77,12 +87,14 @@ export default {
return `${thumbnail.url} ${thumbnail.width}w`
}).join(', ')
},
videoEndpoint () {
return getVideoEndpoint(this.video)
pill () {
// 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
}
}
Expand Down
61 changes: 61 additions & 0 deletions helpers/build-video-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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({
Expand Down
100 changes: 79 additions & 21 deletions pages/app/_slug/benchmarks.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
:videos="relatedVideos"
v-if="benchmarkVideos.length !== 0"
:videos="benchmarkVideos"
:active-video-id="video.id"
/>
</div>
Expand All @@ -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"
:videos="relatedVideos"
v-if="performanceVideos.length !== 0"
:videos="performanceVideos"
:active-video-id="video.id"
/>
</div>
Expand All @@ -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"
:videos="relatedVideos"
v-if="moreVideos.length !== 0"
:videos="moreVideos"
:active-video-id="video.id"
/>
</div>
Expand Down Expand Up @@ -103,38 +106,91 @@ export default {
const app = allVideoAppsList.find(app => (app.slug === slug))
// const featuredApps = []
const submitVideoCard = {
endpoint: `https://docs.google.com/forms/d/e/1FAIpQLSeEVGM9vE7VcfLMy6fJkfU70X2VZ60rHDyhDQLtnAN4nso0WA/viewform?usp=pp_url&entry.1018125313=${app.name}`
}
const relatedVideos = videosRelatedToApp( app )
// const featuredApps = []
// console.log('relatedVideos', relatedVideos)
const relatedVideos = videosRelatedToApp( app ).map(video => {
// console.log('video', video)
return {
...video,
endpoint: `#${video.id}`
}
})
return {
app,
relatedVideos: relatedVideos.map(video => {
// console.log('video', video)
return {
...video,
endpoint: `#${video.id}`
}
})
allVideos: relatedVideos
}
},
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
Expand All @@ -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
Expand Down

0 comments on commit 6e8e39c

Please sign in to comment.