LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Fix play button z-index + add basic player theme

Browse Source
This commit is contained in:
Gabe Kangas 2022-05-26 21:44:54 -07:00
parent 8ed01ed4da
commit da0a2f5f5d
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
4 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/video/Player.module.scss
View File

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

14
web/components/video/player.scss Normal file
View File

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

2
web/components/video/player.tsx
View File

@ -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>
);
}

2
web/pages/_app.tsx
View File

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