[Mux React Player (next-video)] Hide specific controls in the react player

[Hiddenberg]

First of all thanks for this tool, it's been a great experience to work with Mux

I'm trying to customize the react player (imported from next-video) to simulate a live stream with an on-demand video but I can't manage to only hide the video progress bar

I know I can hide all the controls for the player with the property controls={false} but I only want to the video time-range bar to prevent the user from moving froward or backwards through the video while still allowing them to change the volume, pause the video, go full screen, etc.

I've tried using css styles in my component as mentioned in the documentation here but the controls are still showing
https://www.mux.com/docs/guides/player-customize-look-and-feel#style-with-css

Can you please help me to know if this is possible or if I'm doing something wrong?

Here is my code

import Video from "next-video";
import cascadeVideo from "@videos/Joren_Falls_Izu_Jap.webm"

function PlayerPage() {
   return ( 
      <div>
         <h1 className="font-semibold text-xl">Player Page</h1>
         <div className="rounded-xl w-[40rem] overflow-hidden">
            <Video src={cascadeVideo} startTime={5} style={{
               "--time-range": "none",
               "--time-display": "none",
               "--duration-display": "none",
            }}/>
         </div>
      </div>
    );
}

export default PlayerPage;

[luwes]

which version of next-video are you using? v2 and up don't use Mux player anymore.
it's using Media Chrome, https://github.com/muxinc/next-video#default-player

try using the CSS vars --media-time-range-display
see https://www.media-chrome.org/docs/en/reference/styling