feat(video): video placeholder

src/components/VideoElement.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import Hls from 'hls.js'
 import './VideoElement.css'
+import { VideoPlaceholder } from './VideoPlaceholder'
 
 // streamUrl: string
 // loading: boolean
@@ -29,13 +30,13 @@ export function VideoElement({ streamUrl, loading }) {
     // TODO make better loading/error/empty state
 
     if (error)
-        return (<p className="videoElementText">Your browser is not supported</p>)
+        return (<VideoPlaceholder className="videoElementText">Your browser is not supported</VideoPlaceholder>)
 
     if (loading)
-        return <p className="videoElementText">Loading episode</p>
+        return <VideoPlaceholder>Loading episode</VideoPlaceholder>
     
     if (!streamUrl || streamUrl.length === 0)
-        return <p className="videoElementText">No video selected</p>
+        return <videoPlaceholder>No video selected</videoPlaceholder>
 
     return (
         <video className="videoElement" ref={videoRef} controls autoPlay />

src/components/VideoPlaceholder.css

@@ -0,0 +1,23 @@
+.videoPlaceholder {
+	width: 100%;
+	position: relative;
+}
+.videoPlaceholder::before {
+	content: '';
+	display: block;
+	width: 100%;
+	padding-bottom: 56.25%;
+}
+.videoPlaceholderBox {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	background: var(--choice);
+	border-radius: 6px;
+	color: var(--text);
+}

src/components/VideoPlaceholder.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import './VideoPlaceholder.css'
+
+export function VideoPlaceholder(props) {
+	return (
+		<div className="videoPlaceholder">
+			<div className="videoPlaceholderBox">
+				<p>{props.children}</p>
+			</div>
+		</div>
+	)
+}