Fix play button z-index + add basic player theme

web/components/video/Player.module.scss

@@ -1,9 +1,4 @@
 .player {
   height: 80vh;
   width: 100%;
-  background-color: black;
-
-  .vjs-big-play-centered .vjs-big-play-button {
-    z-index: 99999 !important;
-  }
 }

web/components/video/player.scss

@@ -0,0 +1,14 @@
+/* Change all text and icon colors in the player. */
+.vjs-owncast.video-js {
+  color: var(--primary-color);
+}
+
+.vjs-owncast .vjs-big-play-button {
+  z-index: 999999;
+  border-color: var(--primary-color) !important;
+  border-radius: var(--theme-rounded-corners) !important;
+}
+
+.vjs-owncast .vjs-control-bar {
+  background-color: var(--theme-background) !important;
+}

web/components/video/player.tsx

@@ -52,7 +52,7 @@ export function VideoJS(props: Props) {
   return (
     <div data-vjs-player>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-      <video ref={videoRef} className={`video-js vjs-big-play-centered ${s.player}`} />
+      <video ref={videoRef} className={`video-js vjs-big-play-centered ${s.player} vjs-owncast`} />
     </div>
   );
 }

web/pages/_app.tsx

@@ -20,6 +20,8 @@ import '../styles/chat.scss';
 import '../styles/pages.scss';
 import '../styles/offline-notice.scss';
 
+import '../components/video/player.scss';
+
 import { AppProps } from 'next/app';
 import { Router, useRouter } from 'next/router';