Make video poster fill player and not use the logo. For #1857

This commit is contained in:
Gabe Kangas 2022-06-29 14:01:41 -07:00
parent ccb97197c5
commit 3c43db4d86
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
4 changed files with 12 additions and 3 deletions

View File

@ -296,7 +296,9 @@ export default function OwncastPlayer(props: Props) {
</div>
)}
<div style={{ gridColumn: 1, gridRow: 1 }}>
{!videoPlaying && <VideoPoster online={online} initialSrc="/logo" src="/thumbnail.jpg" />}
{!videoPlaying && (
<VideoPoster online={online} initialSrc="/thumbnail.jpg" src="/thumbnail.jpg" />
)}
</div>
</div>
);

View File

@ -2,3 +2,8 @@
height: 80vh;
width: 100%;
}
.poster {
width: 100%;
height: 100%;
}

View File

@ -2,4 +2,6 @@
background-color: black;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}

View File

@ -30,7 +30,7 @@ export default function VideoPoster(props: Props) {
return (
<div className={s.poster}>
{!online && <img src={initialSrc} alt="logo" height="500vh" />}
{!online && <img src={initialSrc} alt="logo" />}
{online && (
<CrossfadeImage
@ -38,7 +38,7 @@ export default function VideoPoster(props: Props) {
duration={duration}
objectFit="contain"
width="100%"
height="500px"
height="100%"
/>
)}
</div>