Fix pages without videos not rendering

This commit is contained in:
Sam Carlton 2020-12-26 13:50:02 -06:00
parent d434b19c9b
commit 660ab9948e

View file

@ -1,9 +1,32 @@
<template> <template>
<section class="container py-16"> <section class="container py-16">
<div class="flex flex-col items-center text-center space-y-8"> <div class="flex flex-col items-center text-center space-y-8">
<VideoPlayer <template
:video="video" v-if="video"
/> >
<VideoPlayer
:video="video"
/>
</template>
<template v-else>
<div
:style="{
'left': '50%',
'right': '50%',
'margin-left': '-50vw',
'margin-right': '-50vw'
}"
class="video-canvas w-screen flex justify-center bg-black"
>
<div class="ratio-wrapper w-full max-w-4xl">
<div class="relative overflow-hidden w-full pb-16/9">
<div class="absolute h-full w-full flex justify-center items-center">
<div class="message text-4xl md:text-6xl font-hairline leading-tight text-center">No videos yet</div>
</div>
</div>
</div>
</div>
</template>
<!-- <h1 class="title text-sm md:text-3xl font-semibold"> <!-- <h1 class="title text-sm md:text-3xl font-semibold">
{{ video.name }} {{ video.name }}
@ -14,6 +37,7 @@
Benchmark Videos Benchmark Videos
</h2> </h2>
<VideoRow <VideoRow
v-if="relatedVideos.length !== 0"
:videos="relatedVideos" :videos="relatedVideos"
:active-video-id="video.id" :active-video-id="video.id"
/> />
@ -24,6 +48,7 @@
Performance Videos Performance Videos
</h2> </h2>
<VideoRow <VideoRow
v-if="relatedVideos.length !== 0"
:videos="relatedVideos" :videos="relatedVideos"
:active-video-id="video.id" :active-video-id="video.id"
/> />
@ -34,6 +59,7 @@
More Videos More Videos
</h2> </h2>
<VideoRow <VideoRow
v-if="relatedVideos.length !== 0"
:videos="relatedVideos" :videos="relatedVideos"
:active-video-id="video.id" :active-video-id="video.id"
/> />
@ -81,6 +107,8 @@ export default {
const relatedVideos = videosRelatedToApp( app ) const relatedVideos = videosRelatedToApp( app )
// console.log('relatedVideos', relatedVideos)
return { return {
app, app,
relatedVideos: relatedVideos.map(video => { relatedVideos: relatedVideos.map(video => {