mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-15 06:35:20 -07:00
List videos by tag
This commit is contained in:
Sam Carlton
parent
a6c1332128
commit
6e8e39c95c
3 changed files with 160 additions and 29 deletions
|
|
@ -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 () {
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 )
|
||||
|
||||
// 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
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue