Skip to content

Commit 6a74780

Browse files
mihar-22mihar-22
committed
fix(player/react): move remotion to completely separate entry
1 parent ca9c3ea commit 6a74780

4 files changed

Lines changed: 33 additions & 17 deletions

File tree

‎packages/react/src/components/layouts/default/shared-layout.tsx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import * as VolumeSliderBase from '../../ui/sliders/volume-slider';
3333
import * as ThumbnailBase from '../../ui/thumbnail';
3434
import { Time } from '../../ui/time';
3535
import * as TooltipBase from '../../ui/tooltip';
36+
import { RemotionSliderThumbnail, RemotionThumbnail } from '../remotion-ui';
3637
import { DefaultLayoutContext, useDefaultLayoutLang } from './context';
3738
import type { DefaultLayoutIcon, DefaultLayoutIcons } from './icons';
3839

@@ -408,15 +409,12 @@ export { DefaultVolumeSlider };
408409
* DefaultTimeSlider
409410
* -----------------------------------------------------------------------------------------------*/
410411

411-
const RemotionSliderThumbnail = React.lazy(
412-
() => import('../../../providers/remotion/ui/slider-thumbnail'),
413-
);
414-
415412
function DefaultTimeSlider() {
416413
const $src = useMediaState('currentSrc'),
417414
width = useMediaState('width'),
418415
{ thumbnails } = React.useContext(DefaultLayoutContext),
419-
label = useDefaultLayoutLang('Seek');
416+
label = useDefaultLayoutLang('Seek'),
417+
$RemotionSliderThumbnail = useSignal(RemotionSliderThumbnail);
420418
return (
421419
<TimeSliderBase.Root className="vds-time-slider vds-slider" aria-label={label}>
422420
<TimeSliderBase.Chapters className="vds-slider-chapters" disabled={width < 768}>
@@ -439,8 +437,8 @@ function DefaultTimeSlider() {
439437
>
440438
<TimeSliderBase.Thumbnail.Img />
441439
</TimeSliderBase.Thumbnail.Root>
442-
) : isRemotionSource($src) ? (
443-
<RemotionSliderThumbnail className="vds-slider-thumbnail vds-thumbnail" />
440+
) : $RemotionSliderThumbnail && isRemotionSource($src) ? (
441+
<$RemotionSliderThumbnail className="vds-slider-thumbnail vds-thumbnail" />
444442
) : null}
445443
<TimeSliderBase.ChapterTitle className="vds-slider-chapter-title" />
446444
<TimeSliderBase.Value className="vds-slider-value" />
@@ -514,8 +512,6 @@ export { DefaultTimeInfo };
514512
* DefaultChaptersMenu
515513
* -----------------------------------------------------------------------------------------------*/
516514

517-
const RemotionThumbnail = React.lazy(() => import('../../../providers/remotion/ui/thumbnail'));
518-
519515
function DefaultChaptersMenu({ tooltip, placement, portalClass }: DefaultMediaMenuProps) {
520516
const { showMenuDelay, noModal, isSmallLayout, Icons, menuGroup } =
521517
React.useContext(DefaultLayoutContext),
@@ -525,7 +521,8 @@ function DefaultChaptersMenu({ tooltip, placement, portalClass }: DefaultMediaMe
525521
{ thumbnails } = React.useContext(DefaultLayoutContext),
526522
$src = useMediaState('currentSrc'),
527523
$viewType = useMediaState('viewType'),
528-
$offset = !isSmallLayout && menuGroup === 'bottom' && $viewType === 'video' ? 26 : 0;
524+
$offset = !isSmallLayout && menuGroup === 'bottom' && $viewType === 'video' ? 26 : 0,
525+
$RemotionThumbnail = useSignal(RemotionThumbnail);
529526

530527
const Content = (
531528
<MenuBase.Content
@@ -551,8 +548,8 @@ function DefaultChaptersMenu({ tooltip, placement, portalClass }: DefaultMediaMe
551548
<ThumbnailBase.Root src={thumbnails} className="vds-thumbnail" time={cue.startTime}>
552549
<ThumbnailBase.Img />
553550
</ThumbnailBase.Root>
554-
) : isRemotionSource($src) ? (
555-
<RemotionThumbnail className="vds-thumbnail" frame={cue.startTime * $src.fps!} />
551+
) : $RemotionThumbnail && isRemotionSource($src) ? (
552+
<$RemotionThumbnail className="vds-thumbnail" frame={cue.startTime * $src.fps!} />
556553
) : null}
557554
<div className="vds-chapter-radio-content">
558555
<span className="vds-chapter-radio-label">{label}</span>

‎packages/react/src/components/layouts/remotion-ui.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { signal } from 'maverick.js';
2+
3+
export const RemotionThumbnail = signal<React.LazyExoticComponent<React.ComponentType<any>> | null>(
4+
null,
5+
);
6+
7+
export const RemotionSliderThumbnail = signal<React.LazyExoticComponent<
8+
React.ComponentType<any>
9+
> | null>(null);

‎packages/react/src/components/provider.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ import {
77
useStateContext,
88
type ReactElementProps,
99
} from 'maverick.js/react';
10-
import { mediaContext, mediaState } from 'vidstack';
10+
import { mediaContext, mediaState, type MediaProviderLoader } from 'vidstack';
1111

12-
import { RemotionProviderLoader } from '../providers/remotion/loader';
1312
import { isRemotionProvider } from '../providers/remotion/type-check';
1413
import { MediaProviderInstance } from './primitives/instances';
1514

@@ -19,7 +18,9 @@ import { MediaProviderInstance } from './primitives/instances';
1918

2019
const MediaProviderBridge = createReactComponent(MediaProviderInstance);
2120

22-
export interface MediaProviderProps extends ReactElementProps<MediaProviderInstance> {
21+
export interface MediaProviderProps
22+
extends Omit<ReactElementProps<MediaProviderInstance>, 'loaders'> {
23+
loaders?: Array<{ new (): MediaProviderLoader }>;
2324
mediaProps?: React.HTMLAttributes<HTMLMediaElement>;
2425
children?: React.ReactNode;
2526
ref?: React.Ref<MediaProviderInstance>;
@@ -37,8 +38,8 @@ export interface MediaProviderProps extends ReactElementProps<MediaProviderInsta
3738
* ```
3839
*/
3940
const MediaProvider = React.forwardRef<MediaProviderInstance, MediaProviderProps>(
40-
({ children, mediaProps, ...props }, forwardRef) => {
41-
const reactLoaders = React.useMemo(() => [new RemotionProviderLoader()], []);
41+
({ loaders, children, mediaProps, ...props }, forwardRef) => {
42+
const reactLoaders = React.useMemo(() => loaders?.map((Loader) => new Loader()), [loaders]);
4243

4344
return (
4445
<MediaProviderBridge {...props} loaders={reactLoaders} ref={forwardRef}>

‎packages/react/src/providers/remotion/loader.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1+
import * as React from 'react';
2+
13
import type { MediaProviderAdapter, MediaProviderLoader, MediaSrc, MediaType } from 'vidstack';
24

5+
import * as UI from '../../components/layouts/remotion-ui';
6+
37
export class RemotionProviderLoader implements MediaProviderLoader {
48
target!: HTMLElement;
59

10+
constructor() {
11+
UI.RemotionThumbnail.set(React.lazy(() => import('./ui/thumbnail')));
12+
UI.RemotionSliderThumbnail.set(React.lazy(() => import('./ui/slider-thumbnail')));
13+
}
14+
615
canPlay(src: MediaSrc): boolean {
716
return src.type === 'video/remotion';
817
}

0 commit comments

Comments
 (0)