Is there any way to move media-time-group into video-controls-start?

[MasterProvider]

Is there any way to move media-time-group into video-controls-start?
like plyr can order the control button

'use client';

import {bufferFeature, controlsFeature, createPlayer, fullscreenFeature, playbackFeature, playbackRateFeature, qualityFeature, textTrackFeature, timeFeature, volumeFeature } from '@videojs/react';
import {
  NeutralVideoSkin,
  Video,
} from '@videojs/react/video';

import '@videojs/react/video/neutral-skin.css';

const VIDEO_SRC = 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4';

const POSTER = 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg';


const { Player } = createPlayer({
  features: [playbackFeature, volumeFeature, timeFeature, controlsFeature ,textTrackFeature,fullscreenFeature,playbackRateFeature,qualityFeature,bufferFeature],
});


export default function VideoDemo() {
  return (
    <main className="demo-page">
      <div className="demo-container">
        <Player>
          <NeutralVideoSkin
            className="demo-video-skin"
            style={
              {
                '--media-accent-color': '#f5a623',
                '--media-accent-text-color': '#ffffff',
                '--media-border-color': 'transparent',
                '--media-border-radius': '8px',
                '--media-object-fit': 'cover',
                '--media-object-position': 'center',
                '--media-scale-unit': '16px',
              } 
            }
          >
            <Video
              src={VIDEO_SRC}
              poster={POSTER}
              playsInline
              preload="metadata"
              crossOrigin="anonymous"
              
            />
          </NeutralVideoSkin>
        </Player>
      </div>
    </main>
  );
}

[CharlieJamesGwapo]

Not with the packaged NeutralVideoSkin. Packaged skins only expose the CSS custom properties you're already using (--media-accent-color, --media-scale-unit, …) and have no prop for control order. The Customize skins guide says so directly, and the Plyr migration guide covers the Plyr controls option the same way. Adding a component as a child of the packaged skin doesn't put it in the control bar either.

The supported route is to add the skin's source to your project and edit it:

1. Follow Install Video.js with Shadcn, pick the Neutral video skin, and run the commands it gives you. The source lands under components/videojs/video (following your components.json alias). Commit first, so you can review what the CLI adds.
2. Swap the import: keep createPlayer/Video from @videojs/react, and render the skin from your local components/videojs/video/skin.tsx instead of NeutralVideoSkin.
3. Open the Neutral control bar component (search the installed files for Time.Group). Its layout looks like this:

<Controls.Group className={styles.start}>          {/* video-controls-start */}
  <PlayButton /> <VolumePopover … />
</Controls.Group>

<Controls.Group className={styles.timeSliderGroup}> {/* video-time-slider-group */}
  <Time.Group> … current / separator / duration … </Time.Group>
  <TimeSlider … />
</Controls.Group>

<Controls.Group className={styles.end}> … </Controls.Group>

Move the whole <Time.Group>…</Time.Group> block out of the time-slider group and put it after the volume popover inside the start group. The time-slider group then holds only the slider.

One layout detail to know: below the skin's 2xl container breakpoint, the time-slider group is basis-full, -order-1 and flex-row-reverse. So on smaller players the slider wraps onto its own row above the buttons, and the time sits to the right of it. After the move, the time stays next to play/volume at every size, and the slider row is just the slider. If the start group feels cramped, adjust its spacing in that same styles file (Tailwind) or in the skin's CSS (vanilla CSS).

When you update Video.js later, npx shadcn@latest add @videojs/video --overwrite replaces your local copy, so commit and re-apply your edit from the diff.

[MasterProvider]

So it means I need to create a custom skin that same with NeutralVideoSkin

Hi @sampotts,

Would it be possible to move the media-time-group into video-controls-start in the NeutralVideoSkin layout?

I'm referring to the current implementation in controls.tsx.

The goal is to achieve a more balanced control layout on mobile devices, as shown in the proposed design below.

[CharlieJamesGwapo]

@MasterProvider Yes — for your own layout, you can start with a local copy of the existing Neutral skin and make this small change; you do not need to recreate its appearance or controls from scratch.

In the controls.tsx you linked, move the entire <$.Time.Group>...</$.Time.Group> block into <$.Controls.Group className={styles.start}>, immediately after <VolumePopover ... />. Leave <TimeSlider ... /> in styles.timeSliderGroup, and render your local skin instead of the packaged NeutralVideoSkin. Check the start-group spacing at narrow widths after the move.

Changing the default layout in Video.js itself is a separate proposal for the maintainers to consider. My earlier suggestion was a way to achieve your preferred layout locally with the existing Neutral skin as the starting point.

[sampotts]

Would it be possible to move the media-time-group into video-controls-start in the NeutralVideoSkin layout?

It seems like a reasonable request. I'll take a look and see if we can make that change.

[CharlieJamesGwapo]

Thanks for taking a look, @sampotts! Moving the time display into the start group seems like a useful improvement for the mobile layout. My earlier suggestion was a local workaround for the current layout; having this supported in the default Neutral skin would make that customization unnecessary for this use case.

[sampotts]

Tracking this in #9701, with the change up in #9702.

The Neutral video skin now puts the time next to play and volume at every size, and on compact players the time slider gets a row to itself, like your mockup. The same PR also tidies up the smallest players in both the Neutral and Default skins, so the controls stay on one row down to 240px.

Once it's released, you won't need a local copy of the skin for this layout.