Make sure audio only icon is visible

With the way we do it now, we can't change the color of the audio only
icon, as it is effictively an image. But we can change the background
for the icon instead.

Also fixes an issue where themed css was not properly applied
to the react player.

Author: Arnei

src/main/VideoPlayers.tsx

@@ -410,6 +410,8 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
         borderTopLeftRadius: "5px",
         borderBottomRightRadius: "5px",
       },
+      backgroundColor: theme.audio_only_bg,
+      // ...(audioOnly) && { background: `${theme.audio_only_bg}` },
     });
 
     const videoPlayerWrapperStyles = css({
@@ -436,24 +438,26 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
       if (!errorState) {
         return (
           <div css={videoPlayerWrapperStyles}>
-            <ReactPlayer url={url}
-              css={overwritePlayerCSS ?? [backgroundBoxStyle(theme), reactPlayerStyle]}
-              ref={ref}
-              width="unset"
-              height="100%"
-              playing={isPlaying}
-              volume={volume}
-              muted={!isPrimary || isMuted}
-              onProgress={onProgressCallback}
-              progressInterval={100}
-              onReady={onReadyCallback}
-              onPlay={onPlay}
-              onEnded={onEndedCallback}
-              onError={onErrorCallback}
-              tabIndex={-1}
-              config={playerConfig}
-              disablePictureInPicture
-            />
+            {/* Make sure themeing is applied properly with this wrapper*/}
+            <div css={overwritePlayerCSS ?? [backgroundBoxStyle(theme), reactPlayerStyle]}>
+              <ReactPlayer url={url}
+                ref={ref}
+                width="unset"
+                height="100%"
+                playing={isPlaying}
+                volume={volume}
+                muted={!isPrimary || isMuted}
+                onProgress={onProgressCallback}
+                progressInterval={100}
+                onReady={onReadyCallback}
+                onPlay={onPlay}
+                onEnded={onEndedCallback}
+                onError={onErrorCallback}
+                tabIndex={-1}
+                config={playerConfig}
+                disablePictureInPicture
+              />
+            </div>
           </div>
         );
       } else {

src/themes.ts

@@ -68,6 +68,7 @@ export interface Theme {
   clock_focus: string;
   digit_selected: string;
   text_shadow: string;
+  audio_only_bg: string;
 }
 
 export const lightMode: Theme = {
@@ -130,6 +131,7 @@ export const lightMode: Theme = {
     `0 2px ${COLORS.neutral15}, 0 -2px ${COLORS.neutral15},` +
     `1px 1px ${COLORS.neutral15}, -1px -1px ${COLORS.neutral15},` +
     `1px -1px ${COLORS.neutral15}, -1px 1px ${COLORS.neutral15}`,
+  audio_only_bg: COLORS.neutral05,
 };
 
 export const darkMode: Theme = {
@@ -190,6 +192,7 @@ export const darkMode: Theme = {
     `0 2px ${COLORS.neutral15}, 0 -2px ${COLORS.neutral15},` +
     `1px 1px ${COLORS.neutral15}, -1px -1px ${COLORS.neutral15},` +
     `1px -1px ${COLORS.neutral15}, -1px 1px ${COLORS.neutral15}`,
+  audio_only_bg: COLORS.neutral90,
 };
 
 export const highContrastDarkMode: Theme = {
@@ -248,6 +251,7 @@ export const highContrastDarkMode: Theme = {
   digit_selected: "#000",
   text_shadow: "2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000," +
     " 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000",
+  audio_only_bg: "#fff",
 };
 
 export const highContrastLightMode: Theme = {
@@ -306,4 +310,5 @@ export const highContrastLightMode: Theme = {
   digit_selected: "#fff",
   text_shadow: "2px 0 snow, -2px 0 snow, 0 2px snow, 0 -2px snow," +
     " 1px 1px snow, -1px -1px snow, 1px -1px snow, -1px 1px snow",
+  audio_only_bg: "#fff",
 };