Add a hacky way to style the react-player.

ui/src/themes/useCurrentTheme.js

@@ -3,10 +3,11 @@ import useMediaQuery from '@material-ui/core/useMediaQuery'
 import themes from './index'
 import { AUTO_THEME_ID } from '../consts'
 import config from '../config'
+import { useEffect } from 'react'
 
 const useCurrentTheme = () => {
   const prefersLightMode = useMediaQuery('(prefers-color-scheme: light)')
-  return useSelector((state) => {
+  const theme = useSelector((state) => {
     if (state.theme === AUTO_THEME_ID) {
       return prefersLightMode ? themes.LightTheme : themes.DarkTheme
     }
@@ -18,6 +19,32 @@ const useCurrentTheme = () => {
       'DarkTheme'
     return themes[themeName]
   })
+
+  useEffect(() => {
+    const styles = document.getElementsByTagName('style')
+    let style
+    for (let i = 0; i < styles.length; i++) {
+      if (styles[i].id === 'nd-player-style-override') {
+        style = styles[i]
+      }
+    }
+    if (theme.player.stylesheet) {
+      if (style === undefined) {
+        style = document.createElement('style')
+        style.id = 'nd-player-style-override'
+        style.innerHTML = theme.player.stylesheet
+        document.head.appendChild(style)
+      } else {
+        style.innerHTML = theme.player.stylesheet
+      }
+    } else {
+      if (style !== undefined) {
+        document.head.removeChild(style)
+      }
+    }
+  }, [theme])
+
+  return theme
 }
 
 export default useCurrentTheme