Fix video player sometimes not playing

.changeset/fix_video_player.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix video player sometimes not working

src/app/components/DeviceVerification.tsx

@@ -38,7 +38,7 @@ type WaitingMessageProps = {
 function WaitingMessage({ message }: WaitingMessageProps) {
   return (
     <Box alignItems="Center" gap="200">
-      <Spinner variant="Secondary" size="200" />
+      <Spinner variant="Secondary" size="200" style={{ backgroundColor: 'transparent' }} />
       <Text size="T300">{message}</Text>
     </Box>
   );

src/app/components/media/media.css.ts

@@ -17,6 +17,7 @@ export const ImagePixelated = style({
 export const Video = style([
   DefaultReset,
   {
+    position: 'relative',
     objectFit: 'contain',
     width: '100%',
     height: '100%',

src/app/components/message/modals/MessageDelete.tsx

@@ -155,7 +155,7 @@ export function MessageDeleteInternal({ room, mEvent, onClose }: MessageDeleteIn
           variant="Critical"
           before={
             deleteState.status === AsyncStatus.Loading ? (
-              <Spinner fill="Solid" variant="Critical" size="200" />
+              <Spinner variant="Secondary" size="200" style={{ backgroundColor: 'transparent' }} />
             ) : undefined
           }
           aria-disabled={deleteState.status === AsyncStatus.Loading}

src/app/components/message/modals/MessageReport.tsx

@@ -156,7 +156,7 @@ export function MessageReportInternal({ room, mEvent, onClose }: MessageReportIn
           variant="Critical"
           before={
             reportState.status === AsyncStatus.Loading ? (
-              <Spinner fill="Solid" variant="Critical" size="200" />
+              <Spinner variant="Secondary" size="200" style={{ backgroundColor: 'transparent' }} />
             ) : undefined
           }
           aria-disabled={

src/app/components/room-card/RoomCard.tsx

@@ -324,7 +324,16 @@ export const RoomCard = as<'div', RoomCardProps>(
                 variant="Secondary"
                 size="300"
                 disabled={joining}
-                before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />}
+                before={
+                  joining && (
+                    <Spinner
+                      size="50"
+                      variant="Secondary"
+                      fill="Soft"
+                      style={{ background: 'transparent' }}
+                    />
+                  )
+                }
               >
                 <Text size="B300" truncate>
                   {joining ? 'Joining' : 'Join'}

src/app/components/room-intro/RoomIntro.tsx

@@ -158,7 +158,12 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
                 disabled={prevRoomState.status === AsyncStatus.Loading}
                 after={
                   prevRoomState.status === AsyncStatus.Loading ? (
-                    <Spinner size="50" variant="Secondary" fill="Soft" />
+                    <Spinner
+                      size="50"
+                      variant="Secondary"
+                      fill="Soft"
+                      style={{ background: 'transparent' }}
+                    />
                   ) : undefined
                 }
               >

src/app/features/room/RoomInput.tsx

@@ -1814,6 +1814,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                         variant="SurfaceVariant"
                         size="300"
                         radii="300"
+                        style={{ backgroundColor: 'transparent' }}
                       >
                         {composerIcon(GifIcon, {
                           weight: emojiBoardTab === EmojiBoardTab.Gif ? 'fill' : 'regular',

src/app/features/room/RoomTimeline.tsx

@@ -1001,13 +1001,13 @@ export function RoomTimeline({
 
       {showBackPaginationSpinner && (
         <TimelineFloat position="Top" style={timelineTopFloatLift}>
-          <Spinner variant="Secondary" size="400" />
+          <Spinner variant="Secondary" size="400" style={{ backgroundColor: 'transparent' }} />
         </TimelineFloat>
       )}
 
       {showFrontPaginationSpinner && (
         <TimelineFloat position="Bottom" style={timelineBottomFloatLift}>
-          <Spinner variant="Secondary" size="400" />
+          <Spinner variant="Secondary" size="400" style={{ backgroundColor: 'transparent' }} />
         </TimelineFloat>
       )}