search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.71k stars 70 forks source link

When loading page the player background is briefly transparent with layout shift #1023

Open rlaphoenix opened 9 hours ago

rlaphoenix commented 9 hours ago

Even though I explicitly set the following to #000:

--media-background-color | #000 | background-color of container.

It still briefly goes transparent while loading.

I tested with an empty <media-controller> (as in nothing inside it but "test2" string) and saw it began in the DOM as nothing, then:

<media-controller
  class="w-full h-screen max-[1800px]:h-full overflow-hidden flex flex-col justify-center items-center rounded-xl max-h-[calc(100vh-14.5rem)] max-[1800px]:aspect-video translate-x-0"
  autohide="5"
  defaultstreamtype="live"
  keyboardbackwardseekoffset="5"
  keyboardforwardseekoffset="5"
  >test2</media-controller
>

At this point it is transparent and layout shift is happening. After this when it actually goes the color I selected, the DOM is:

<media-controller
  autohide="5"
  defaultstreamtype="live"
  keyboardbackwardseekoffset="5"
  keyboardforwardseekoffset="5"
  class="w-full h-screen max-[1800px]:h-full overflow-hidden flex flex-col justify-center items-center rounded-xl max-h-[calc(100vh-14.5rem)] max-[1800px]:aspect-video translate-x-0"
  role="region"
  aria-label="video player"
  userinactive=""
  mediapaused=""
  mediaplaybackrate="1"
  mediavolume="1"
  mediavolumelevel="high"
  mediacurrenttime="0"
  mediastreamtype="live"
  mediapipunavailable="unsupported"
  mediavolumeunavailable="unsupported"
  mediacastunavailable="unsupported"
  mediaairplayunavailable="unsupported"
  mediarenditionunavailable="unsupported"
  mediaaudiotrackunavailable="unsupported"
  breakpointsm=""
  breakpointmd=""
  breakpointlg=""
  breakpointxl=""
  >test2</media-controller

This happens with or without my class string, but I need to set the width and height to SOMETHING or it basically doesnt show at all.

rlaphoenix commented 8 hours ago

I will also note that I can often also see all the slots of some controls when loading briefly as well, like the mute button slots for the different levels of loudness.