diff --git a/eslint.config.mjs b/eslint.config.mjs index 881e1594..a1ae7eca 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -1,5 +1,4 @@ import antfu from '@antfu/eslint-config'; - import jsxA11y from 'eslint-plugin-jsx-a11y'; export default antfu({ @@ -23,9 +22,14 @@ export default antfu({ plugins: { 'jsx-a11y': jsxA11y, }, -}, { rules: { + // Allow single line bracing. 'antfu/if-newline': 'off', + 'style/brace-style': ['error', '1tbs', { allowSingleLine: true }], + // Only quote props when necessary. + 'style/quote-props': ['error', 'as-needed'], + // JSX A11Y plugin rules + ...jsxA11y.configs.recommended.rules, }, }, { files: ['**/*.md'], diff --git a/examples/react-demo/src/App.tsx b/examples/react-demo/src/App.tsx index ec0e4c8a..934dd9a3 100644 --- a/examples/react-demo/src/App.tsx +++ b/examples/react-demo/src/App.tsx @@ -52,8 +52,8 @@ const DEFAULT_SKIN: SkinKey = 'toasted'; const DEFAULT_MEDIA_SOURCE: MediaSourceKey = '1'; export default function App(): JSX.Element { - const [skinKey, setSkinKey] = useState(getParam('skin', DEFAULT_SKIN)); - const [mediaSourceKey, setMediaSourceKey] = useState(getParam('source', DEFAULT_MEDIA_SOURCE)); + const [skinKey, setSkinKey] = useState(() => getParam('skin', DEFAULT_SKIN)); + const [mediaSourceKey, setMediaSourceKey] = useState(() => getParam('source', DEFAULT_MEDIA_SOURCE)); const mediaSource = useMemo(() => { let match = mediaSources.find(m => m.key === mediaSourceKey); @@ -138,10 +138,10 @@ export default function App(): JSX.Element {
-
+
- {/* @ts-ignore -- types are incorrect */} + {/* @ts-expect-error -- types are incorrect */} diff --git a/package.json b/package.json index 5dc70651..ccca703a 100644 --- a/package.json +++ b/package.json @@ -38,12 +38,12 @@ "@ianvs/prettier-plugin-sort-imports": "^4.7.0", "@prettier/plugin-xml": "^3.4.2", "@types/node": "^22.18.6", - "eslint": "^9.36.0", + "eslint": "^9.37.0", "eslint-plugin-format": "^1.0.2", "eslint-plugin-jsx-a11y": "^6.10.2", - "eslint-plugin-react-hooks": "^5.2.0", - "eslint-plugin-react-refresh": "^0.4.21", - "lint-staged": "^16.2.0", + "eslint-plugin-react-hooks": "^6.1.1", + "eslint-plugin-react-refresh": "^0.4.23", + "lint-staged": "^16.2.3", "prettier": "^3.6.2", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/packages/core/core/src/components/time-range.ts b/packages/core/core/src/components/time-range.ts index afbbfde5..30e9af5f 100644 --- a/packages/core/core/src/components/time-range.ts +++ b/packages/core/core/src/components/time-range.ts @@ -23,12 +23,10 @@ export class TimeRange extends Range { let _fillWidth = 0; if (state._dragging) { _fillWidth = state._pointerRatio * 100; - } - else if (state.duration > 0) { + } else if (state.duration > 0) { if (this.#seekingTime !== null && this.#oldCurrentTime === state.currentTime) { _fillWidth = (this.#seekingTime / state.duration) * 100; - } - else { + } else { _fillWidth = (state.currentTime / state.duration) * 100; this.#seekingTime = null; } diff --git a/packages/core/core/src/components/volume-range.ts b/packages/core/core/src/components/volume-range.ts index e853926b..8dcaed4f 100644 --- a/packages/core/core/src/components/volume-range.ts +++ b/packages/core/core/src/components/volume-range.ts @@ -19,8 +19,7 @@ export class VolumeRange extends Range { let _fillWidth = 0; if (state._dragging) { _fillWidth = state._pointerRatio * 100; - } - else { + } else { _fillWidth = state.muted ? 0 : (state.volume || 0) * 100; } diff --git a/packages/core/media-store/src/factory.ts b/packages/core/media-store/src/factory.ts index 6ba5c72d..b4b81a3d 100644 --- a/packages/core/media-store/src/factory.ts +++ b/packages/core/media-store/src/factory.ts @@ -114,11 +114,9 @@ export function createMediaStore({ if (type === 'mediastateownerchangerequest') { updateStateOwners({ media: detail }); - } - else if (type === 'containerstateownerchangerequest') { + } else if (type === 'containerstateownerchangerequest') { updateStateOwners({ container: detail }); - } - else { + } else { for (const stateObject of Object.values(stateMediator).filter( (stateMediatorEntry): stateMediatorEntry is FacadeProp => 'set' in stateMediatorEntry, )) { diff --git a/packages/core/media-store/src/state-mediators/fullscreenable.ts b/packages/core/media-store/src/state-mediators/fullscreenable.ts index 178005aa..842c56cd 100644 --- a/packages/core/media-store/src/state-mediators/fullscreenable.ts +++ b/packages/core/media-store/src/state-mediators/fullscreenable.ts @@ -73,41 +73,33 @@ export const fullscreenable = { // Enter fullscreen if (container.requestFullscreen) { container.requestFullscreen(); - } - else if (container.webkitRequestFullscreen) { + } else if (container.webkitRequestFullscreen) { // Safari support container.webkitRequestFullscreen(); - } - else if (container.mozRequestFullScreen) { + } else if (container.mozRequestFullScreen) { // Firefox support container.mozRequestFullScreen(); - } - else if (container.msRequestFullscreen) { + } else if (container.msRequestFullscreen) { // IE/Edge support container.msRequestFullscreen(); } - } - else { + } else { // Exit fullscreen const doc = globalThis.document as any; if (doc.exitFullscreen) { doc.exitFullscreen(); - } - else if (doc.webkitExitFullscreen) { + } else if (doc.webkitExitFullscreen) { // Safari support doc.webkitExitFullscreen(); - } - else if (doc.mozCancelFullScreen) { + } else if (doc.mozCancelFullScreen) { // Firefox support doc.mozCancelFullScreen(); - } - else if (doc.msExitFullscreen) { + } else if (doc.msExitFullscreen) { // IE/Edge support doc.msExitFullscreen(); } } - } - catch (error) { + } catch (error) { // Gracefully handle fullscreen API errors (e.g., user interaction required) console.warn('Fullscreen operation failed:', error); } diff --git a/packages/html/html/src/components/media-fullscreen-button.ts b/packages/html/html/src/components/media-fullscreen-button.ts index 2e7027a6..4e771308 100644 --- a/packages/html/html/src/components/media-fullscreen-button.ts +++ b/packages/html/html/src/components/media-fullscreen-button.ts @@ -21,8 +21,7 @@ export class FullscreenButtonBase extends MediaChromeButton { if (state && type === 'click') { if (state.fullscreen) { state.requestExitFullscreen(); - } - else { + } else { state.requestEnterFullscreen(); } } @@ -61,7 +60,7 @@ export const useFullscreenButtonProps: PropsHook<{ fullscreen: boolean }> = (sta 'data-fullscreen': state.fullscreen, /** @TODO Need another state provider in core for i18n (CJP) */ /** aria attributes/props */ - 'role': 'button', + role: 'button', 'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen', /** tooltip */ 'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen', diff --git a/packages/html/html/src/components/media-mute-button.ts b/packages/html/html/src/components/media-mute-button.ts index 6950557e..e00ec35c 100644 --- a/packages/html/html/src/components/media-mute-button.ts +++ b/packages/html/html/src/components/media-mute-button.ts @@ -24,8 +24,7 @@ export class MuteButtonBase extends MediaChromeButton { if (type === 'click') { if (state.volumeLevel === 'off') { state.requestUnmute(); - } - else { + } else { state.requestMute(); } } @@ -73,7 +72,7 @@ export const useMuteButtonProps: PropsHook<{ 'data-volume-level': state.volumeLevel, /** @TODO Need another state provider in core for i18n (CJP) */ /** aria attributes/props */ - 'role': 'button', + role: 'button', 'aria-label': state.muted ? 'unmute' : 'mute', /** tooltip */ 'data-tooltip': state.muted ? 'Unmute' : 'Mute', diff --git a/packages/html/html/src/components/media-play-button.ts b/packages/html/html/src/components/media-play-button.ts index b0afd7a9..0a65ffab 100644 --- a/packages/html/html/src/components/media-play-button.ts +++ b/packages/html/html/src/components/media-play-button.ts @@ -19,8 +19,7 @@ export class PlayButtonBase extends MediaChromeButton { if (state && type === 'click') { if (state.paused) { state.requestPlay(); - } - else { + } else { state.requestPause(); } } @@ -55,7 +54,7 @@ export const usePlayButtonProps: PropsHook<{ paused: boolean }> = (state, _eleme 'data-paused': state.paused, /** @TODO Need another state provider in core for i18n (CJP) */ /** aria attributes/props */ - 'role': 'button', + role: 'button', 'aria-label': state.paused ? 'play' : 'pause', /** tooltip */ 'data-tooltip': state.paused ? 'Play' : 'Pause', diff --git a/packages/html/html/src/components/media-popover.ts b/packages/html/html/src/components/media-popover.ts index 963562e1..7c9de460 100644 --- a/packages/html/html/src/components/media-popover.ts +++ b/packages/html/html/src/components/media-popover.ts @@ -63,8 +63,7 @@ export class MediaPopoverRoot extends HTMLElement { if (open) { this.#setupFloating(); - } - else { + } else { this.#cleanup?.(); this.#cleanup = null; } diff --git a/packages/html/html/src/components/media-time-range.ts b/packages/html/html/src/components/media-time-range.ts index d23e298b..4a792f13 100644 --- a/packages/html/html/src/components/media-time-range.ts +++ b/packages/html/html/src/components/media-time-range.ts @@ -91,8 +91,7 @@ export class TimeRangeTrackBase extends HTMLElement { if (orientation === 'horizontal') { this.style.width = '100%'; this.style.removeProperty('height'); - } - else { + } else { this.style.height = '100%'; this.style.removeProperty('width'); } @@ -117,8 +116,7 @@ export class TimeRangeProgressBase extends HTMLElement { this.style.height = '100%'; this.style.top = '0'; this.style.removeProperty('bottom'); - } - else { + } else { this.style.height = 'var(--slider-fill, 0%)'; this.style.width = '100%'; this.style.bottom = '0'; @@ -145,8 +143,7 @@ export class TimeRangePointerBase extends HTMLElement { this.style.height = '100%'; this.style.top = '0'; this.style.removeProperty('bottom'); - } - else { + } else { this.style.height = 'var(--slider-pointer, 0%)'; this.style.width = '100%'; this.style.bottom = '0'; @@ -170,8 +167,7 @@ export class TimeRangeThumbBase extends HTMLElement { this.style.left = 'var(--slider-fill, 0%)'; this.style.top = '50%'; this.style.transform = 'translate(-50%, -50%)'; - } - else { + } else { this.style.bottom = 'var(--slider-fill, 0%)'; this.style.left = '50%'; this.style.transform = 'translate(-50%, 50%)'; diff --git a/packages/html/html/src/components/media-tooltip.ts b/packages/html/html/src/components/media-tooltip.ts index 914ccf53..d815c199 100644 --- a/packages/html/html/src/components/media-tooltip.ts +++ b/packages/html/html/src/components/media-tooltip.ts @@ -19,8 +19,7 @@ export class MediaTooltipRoot extends HTMLElement { handleEvent(event: Event): void { if (event.type === 'mouseenter') { this.#handleMouseEnter(); - } - else if (event.type === 'mouseleave') { + } else if (event.type === 'mouseleave') { this.#handleMouseLeave(); } } @@ -70,8 +69,7 @@ export class MediaTooltipRoot extends HTMLElement { if (open) { this.#setupFloating(); - } - else { + } else { this.#cleanup?.(); this.#cleanup = null; } @@ -203,8 +201,7 @@ export class MediaTooltipTrigger extends HTMLElement { const attributeValue = triggerElement.getAttribute(attributeName); if (attributeValue !== null) { popupElement.setAttribute(attributeName, attributeValue); - } - else { + } else { popupElement.removeAttribute(attributeName); } } diff --git a/packages/html/html/src/components/media-volume-range.ts b/packages/html/html/src/components/media-volume-range.ts index fc2ea359..45efb6eb 100644 --- a/packages/html/html/src/components/media-volume-range.ts +++ b/packages/html/html/src/components/media-volume-range.ts @@ -102,8 +102,7 @@ export class VolumeRangeTrackBase extends HTMLElement { if (orientation === 'horizontal') { this.style.width = '100%'; this.style.removeProperty('height'); - } - else { + } else { this.style.height = '100%'; this.style.removeProperty('width'); } @@ -131,8 +130,7 @@ export class VolumeRangeProgressBase extends HTMLElement { this.style.height = '100%'; this.style.top = '0'; this.style.removeProperty('bottom'); - } - else { + } else { this.style.height = 'var(--slider-fill, 0%)'; this.style.width = '100%'; this.style.bottom = '0'; @@ -159,8 +157,7 @@ export class VolumeRangeThumbBase extends HTMLElement { this.style.left = 'var(--slider-fill, 0%)'; this.style.top = '50%'; this.style.transform = 'translate(-50%, -50%)'; - } - else { + } else { this.style.bottom = 'var(--slider-fill, 0%)'; this.style.left = '50%'; this.style.transform = 'translate(-50%, 50%)'; diff --git a/packages/react/react-icons/svgr.config.js b/packages/react/react-icons/svgr.config.js index 4edaeda4..cc7901bd 100644 --- a/packages/react/react-icons/svgr.config.js +++ b/packages/react/react-icons/svgr.config.js @@ -12,9 +12,9 @@ export default { replaceAttrValues: { '#000': '{color}', '#fff': '{color}', - 'black': '{color}', - 'white': '{color}', - 'currentColor': '{color}', + black: '{color}', + white: '{color}', + currentColor: '{color}', }, template: (variables, { tpl }) => { return tpl` diff --git a/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts b/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts index d704be02..991b7368 100644 --- a/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts +++ b/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts @@ -52,8 +52,7 @@ export function useSyncExternalStoreWithSelector( value: null, }; instRef.current = inst as SnapshotRef; - } - else { + } else { inst = instRef.current; } diff --git a/packages/react/react/src/components/FullscreenButton.tsx b/packages/react/react/src/components/FullscreenButton.tsx index 9610696c..f24a0a31 100644 --- a/packages/react/react/src/components/FullscreenButton.tsx +++ b/packages/react/react/src/components/FullscreenButton.tsx @@ -36,7 +36,7 @@ export function useFullscreenButtonProps(props: PropsWithChildren, state: Return const baseProps: Record = { /** @TODO Need another state provider in core for i18n (CJP) */ /** aria attributes/props */ - 'role': 'button', + role: 'button', 'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen', /** tooltip */ 'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen', @@ -64,8 +64,7 @@ export function renderFullscreenButton(props: FullscreenButtonProps, state: Full if (props.disabled) return; if (state.fullscreen) { state.requestExitFullscreen(); - } - else { + } else { state.requestEnterFullscreen(); } }} diff --git a/packages/react/react/src/components/MuteButton.tsx b/packages/react/react/src/components/MuteButton.tsx index 0ec782d4..c824cd9e 100644 --- a/packages/react/react/src/components/MuteButton.tsx +++ b/packages/react/react/src/components/MuteButton.tsx @@ -38,7 +38,7 @@ export function useMuteButtonProps(props: PropsWithChildren, state: ReturnType, state: Return const baseProps: Record = { /** @TODO Need another state provider in core for i18n (CJP) */ /** aria attributes/props */ - 'role': 'button', + role: 'button', 'aria-label': state.paused ? 'play' : 'pause', /** tooltip */ 'data-tooltip': state.paused ? 'Play' : 'Pause', @@ -62,8 +62,7 @@ export function renderPlayButton(props: PlayButtonProps, state: PlayButtonState) if (props.disabled) return; if (state.paused) { state.requestPlay(); - } - else { + } else { state.requestPause(); } }} diff --git a/packages/react/react/src/components/TimeRange.tsx b/packages/react/react/src/components/TimeRange.tsx index a6a4d950..46c7bfc4 100644 --- a/packages/react/react/src/components/TimeRange.tsx +++ b/packages/react/react/src/components/TimeRange.tsx @@ -53,12 +53,12 @@ export function useTimeRangeRootProps(props: TimeRange.Props, state: TimeRange.S const { children, className, id, style, orientation = 'horizontal' } = props; return { - 'ref': useCallback((el: HTMLDivElement) => { + ref: useCallback((el: HTMLDivElement) => { if (!el) return; state.core?.attach(el); }, []), id, - 'role': 'slider', + role: 'slider', 'aria-label': 'Seek', 'aria-valuemin': 0, 'aria-valuemax': 100, @@ -69,10 +69,10 @@ export function useTimeRangeRootProps(props: TimeRange.Props, state: TimeRange.S 'data-current-time': state.currentTime, 'data-duration': state.duration, className, - 'style': { + style: { ...style, '--slider-fill': `${_fillWidth.toFixed(3)}%`, - '--slider-pointer': `${_pointerWidth.toFixed(3)}%`, + '--slider-pointer': `${(_pointerWidth * 100).toFixed(3)}%`, } as React.CSSProperties, children, }; @@ -98,12 +98,12 @@ const TimeRangeRoot: ConnectedComponent, context: TimeRange.State): TimeRangeRenderProps { return { - 'ref': useCallback((el: HTMLDivElement) => { + ref: useCallback((el: HTMLDivElement) => { context.core?.setState({ _trackElement: el }); }, []), 'data-orientation': context.orientation, ...props, - 'style': { + style: { ...props.style, [context.orientation === 'horizontal' ? 'width' : 'height']: '100%', }, @@ -130,7 +130,7 @@ export function useTimeRangeThumbProps(props: React.ComponentProps<'div'>, conte return { 'data-orientation': context.orientation, ...props, - 'style': { + style: { ...props.style, [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)', [context.orientation === 'horizontal' ? 'top' : 'left']: '50%', @@ -160,7 +160,7 @@ export function useTimeRangePointerProps(props: React.ComponentProps<'div'>, con return { 'data-orientation': context.orientation, ...props, - 'style': { + style: { ...props.style, [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-pointer, 0%)', [context.orientation === 'horizontal' ? 'height' : 'width']: '100%', @@ -188,7 +188,7 @@ export function useTimeRangeProgressProps(props: React.ComponentProps<'div'>, co return { 'data-orientation': context.orientation, ...props, - 'style': { + style: { ...props.style, [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)', [context.orientation === 'horizontal' ? 'height' : 'width']: '100%', diff --git a/packages/react/react/src/components/Tooltip.tsx b/packages/react/react/src/components/Tooltip.tsx index 4819dca0..66c3d447 100644 --- a/packages/react/react/src/components/Tooltip.tsx +++ b/packages/react/react/src/components/Tooltip.tsx @@ -150,7 +150,7 @@ function TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element { const { refs, open } = context; return React.cloneElement(React.Children.only(children) as JSX.Element, { - 'ref': refs.setReference, + ref: refs.setReference, ...getReferenceProps(), 'data-popup-open': open ? '' : undefined, }); diff --git a/packages/react/react/src/components/VolumeRange.tsx b/packages/react/react/src/components/VolumeRange.tsx index 1e336440..913a496a 100644 --- a/packages/react/react/src/components/VolumeRange.tsx +++ b/packages/react/react/src/components/VolumeRange.tsx @@ -57,12 +57,12 @@ export function useVolumeRangeRootProps(props: VolumeRange.Props, state: VolumeR const { children, className, id, style, orientation = 'horizontal' } = props; return { - 'ref': useCallback((el: HTMLDivElement) => { + ref: useCallback((el: HTMLDivElement) => { if (!el) return; state.core?.attach(el); }, []), id, - 'role': 'slider', + role: 'slider', 'aria-label': 'Volume', 'aria-valuemin': 0, 'aria-valuemax': 100, @@ -73,7 +73,7 @@ export function useVolumeRangeRootProps(props: VolumeRange.Props, state: VolumeR 'data-muted': state.muted, 'data-volume-level': state.volumeLevel, className, - 'style': { + style: { ...style, '--slider-fill': `${_fillWidth.toFixed(3)}%`, '--slider-pointer': `${_pointerWidth.toFixed(3)}%`, @@ -102,12 +102,12 @@ const VolumeRangeRoot: ConnectedComponent, context: VolumeRange.State): VolumeRangeRenderProps { return { - 'ref': useCallback((el: HTMLDivElement) => { + ref: useCallback((el: HTMLDivElement) => { context.core?.setState({ _trackElement: el }); }, []), 'data-orientation': context.orientation, ...props, - 'style': { + style: { ...props.style, [context.orientation === 'horizontal' ? 'width' : 'height']: '100%', }, @@ -133,7 +133,7 @@ export function useVolumeRangeThumbProps(props: React.ComponentProps<'div'>, con return { 'data-orientation': context.orientation, ...props, - 'style': { + style: { ...props.style, [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)', [context.orientation === 'horizontal' ? 'top' : 'left']: '50%', @@ -162,7 +162,7 @@ export function useVolumeRangeProgressProps(props: React.ComponentProps<'div'>, return { 'data-orientation': context.orientation, ...props, - 'style': { + style: { ...props.style, [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)', [context.orientation === 'horizontal' ? 'height' : 'width']: '100%', diff --git a/packages/react/react/src/skins/default/MediaSkinDefault.tsx b/packages/react/react/src/skins/default/MediaSkinDefault.tsx index d2242fbb..507d8897 100644 --- a/packages/react/react/src/skins/default/MediaSkinDefault.tsx +++ b/packages/react/react/src/skins/default/MediaSkinDefault.tsx @@ -75,7 +75,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps - + diff --git a/packages/react/react/src/skins/default/styles.ts b/packages/react/react/src/skins/default/styles.ts index b076b1dd..44bc23d9 100644 --- a/packages/react/react/src/skins/default/styles.ts +++ b/packages/react/react/src/skins/default/styles.ts @@ -88,7 +88,7 @@ const styles: MediaDefaultSkinStyles = { ), PlayTooltip: cn('play-tooltip'), PauseTooltip: cn('pause-tooltip'), - VolumeButton: cn( + MuteButton: cn( '[&_svg]:opacity-0', '[&[data-volume-level="high"]_.volume-high-icon]:opacity-100', '[&[data-volume-level="medium"]_.volume-low-icon]:opacity-100', diff --git a/packages/react/react/src/skins/default/types.ts b/packages/react/react/src/skins/default/types.ts index 0d67cce5..bfed7182 100644 --- a/packages/react/react/src/skins/default/types.ts +++ b/packages/react/react/src/skins/default/types.ts @@ -11,7 +11,7 @@ export interface MediaDefaultSkinStyles { readonly PlayTooltip: string; readonly PauseTooltip: string; readonly TooltipPopup: string; - readonly VolumeButton: string; + readonly MuteButton: string; readonly VolumeHighIcon: string; readonly VolumeLowIcon: string; readonly VolumeOffIcon: string; diff --git a/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx b/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx index a714e7ae..4cb702cc 100644 --- a/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx +++ b/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx @@ -17,7 +17,6 @@ import { MediaContainer } from '../../components/MediaContainer'; import MuteButton from '../../components/MuteButton'; import PlayButton from '../../components/PlayButton'; import { TimeRange } from '../../components/TimeRange'; -import { VolumeRange } from '../../components/VolumeRange'; import styles from './styles'; type SkinProps = PropsWithChildren<{ @@ -29,63 +28,43 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps {children} -
- {/*
-

Example Video

-

This is just a description for the example video.

-
*/} +