Skip to content

feat: typed CSSProperties for mux-player custom CSS vars #1216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
luwes merged 8 commits into from
Nov 21, 2025
+14 −3
Merged

feat: typed CSSProperties for mux-player custom CSS vars #1216

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7e4fee9
feat: Properly typed CSSProperties for mux-player custom CSS vars
ignasio-mux Oct 21, 2025
d86af1e
fix: same fix for web component
ignasio-mux Oct 22, 2025
7c0372f
removing mux video and redundancy
ignasio-mux Oct 23, 2025
8e08122
unnecesary changes
ignasio-mux Oct 23, 2025
eb9eeaa
also removing mux video from intrinsic elements
ignasio-mux Oct 23, 2025
672414e
removing support for web component
ignasio-mux Nov 3, 2025
2e285c7
restoring previous implementation
ignasio-mux Nov 3, 2025
ab5bfc9
Merge branch 'main' into feat/mux-player-cssproperties
luwes Nov 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions packages/mux-player-react/src/lazy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import ConditionalSuspense from './ConditionalSuspense';
import useIsBrowser from './useIsBrowser';
import useIsIntersecting from './useIsIntersecting';

import type { MuxPlayerProps, MuxPlayerRefAttributes } from './index';
import type { MuxPlayerProps, MuxPlayerRefAttributes, MuxCSSProperties } from './index';
import type MuxPlayerElement from '@mux/mux-player';

interface MuxPlayerElementReact extends Partial<Omit<MuxPlayerElement, 'style' | 'children'>> {
Expand All @@ -16,15 +16,6 @@ interface MuxPlayerElementReact extends Partial<Omit<MuxPlayerElement, 'style' |
children?: React.ReactNode;
}

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
interface IntrinsicElements {
'mux-player': MuxPlayerElementReact;
}
}
}

const MuxPlayerIndex = React.lazy(() => import('./index'));

interface FallbackProps extends MuxPlayerProps {
Expand Down Expand Up @@ -58,7 +49,7 @@ const Fallback = (props: FallbackProps) => {
{
'--mux-player-react-lazy-placeholder': placeholder ? `url('${placeholder}');` : '',
...style,
} as React.CSSProperties
} as MuxCSSProperties
}
className={className || ''}
// since there's a possibility that the bundle loads before Suspense clears this placeholder,
Expand Down
24 changes: 23 additions & 1 deletion packages/mux-player-react/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@ import type {
import type MuxPlayerElement from '@mux/mux-player';
import type { Tokens, EventMap as MuxPlayerElementEventMap } from '@mux/mux-player';

/**
* CSS properties interface for Mux components
* Extends standard CSSProperties to include custom CSS variables
*/
export interface MuxCSSProperties extends CSSProperties {
[key: `--${string}`]: string | undefined;
}

// Alias for backward compatibility
export type MuxPlayerCSSProperties = MuxCSSProperties;

type ValueOf<T> = T[keyof T];

export interface GenericEventListener<T extends Event = CustomEvent> {
Expand All @@ -30,7 +41,7 @@ type VideoApiAttributes = {
autoPlay: boolean | string;
loop: boolean;
muted: boolean;
style: CSSProperties;
style: MuxPlayerCSSProperties;
};

type MuxMediaPropTypes = {
Expand Down Expand Up @@ -130,3 +141,14 @@ export type MuxPlayerProps = {
onChapterChange?: GenericEventListener<MuxPlayerElementEventMap['chapterchange']>;
} & Partial<MuxMediaPropTypes> &
Partial<VideoApiAttributes>;

declare global {
namespace JSX {
interface IntrinsicElements {
'mux-player': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
Copy link
Contributor

@luwes luwes Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, what about all the other supported props. src, muted, etc. Are those types still intact?

Copy link
Contributor Author

@ignasio-mux ignasio-mux Nov 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I decided to restore JSX IntrinsicElements for the web component. I tried using React.HTMLAttributes, but during testing I realized it allows any random attribute (like nacho="true"), which makes TypeScript checks pointless.

There doesn’t seem to be a simple way to only allow valid HTML, data-, aria-, and known component attributes at the same time.

I think this PR still makes sense since it fixes the issue for the React component.

style?: MuxCSSProperties;
[key: string]: any;
};
}
}
}
Loading