List videos by tag

This commit is contained in:
Sam Carlton 2020-12-26 18:38:41 -06:00
parent a6c1332128
commit 6e8e39c95c
3 changed files with 160 additions and 29 deletions

View file

@ -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