@hanifhan1f/vidstack-react 1.12.13 → 1.12.14

package/src/components/layouts/default/media-layout.tsx

@@ -1,259 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, useSignal } from 'maverick.js/react';
-import { isBoolean } from 'maverick.js/std';
-import {
-  type DefaultLayoutTranslations,
-  type FileDownloadInfo,
-  type MediaPlayerQuery,
-  type MediaStreamType,
-  type ThumbnailSrc,
-} from 'vidstack';
-
-import { useMediaContext } from '../../../hooks/use-media-context';
-import { useMediaState } from '../../../hooks/use-media-state';
-import { createComputed, createSignal } from '../../../hooks/use-signals';
-import type { PrimitivePropsWithRef } from '../../primitives/nodes';
-import { DefaultLayoutContext } from './context';
-import { useColorSchemeClass } from './hooks';
-import type { DefaultLayoutIcons } from './icons';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultMediaLayout
- * -----------------------------------------------------------------------------------------------*/
-
-export interface DefaultLayoutProps<Slots = unknown> extends PrimitivePropsWithRef<'div'> {
-  children?: React.ReactNode;
-  /**
-   * The icons to be rendered and displayed inside the layout.
-   */
-  icons: DefaultLayoutIcons;
-  /**
-   * Whether light or dark color theme should be active. Defaults to user operating system
-   * preference.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme}
-   */
-  colorScheme?: 'light' | 'dark' | 'system' | 'default';
-  /**
-   * Sets the download URL and filename for the download button.
-   */
-  download?: FileDownloadInfo;
-  /**
-   * Specifies the number of milliseconds to wait before tooltips are visible after interacting
-   * with a control.
-   *
-   * @defaultValue 700
-   */
-  showTooltipDelay?: number;
-  /**
-   * Specifies the number of milliseconds to wait before menus are visible after opening them.
-   *
-   * @defaultValue 0
-   */
-  showMenuDelay?: number;
-  /**
-   * Whether the bitrate should be hidden in the settings quality menu next to each option.
-   *
-   * @defaultValue false
-   */
-  hideQualityBitrate?: boolean;
-  /**
-   * Determines when the small (e.g., mobile) UI should be displayed.
-   *
-   * @defaultValue `({ width, height }) => width < 576 || height < 380`
-   */
-  smallLayoutWhen?: boolean | MediaPlayerQuery;
-  /**
-   * The thumbnails resource.
-   *
-   * @see {@link https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails}
-   */
-  thumbnails?: ThumbnailSrc;
-  /**
-   * Translation map from english to your desired language for words used throughout the layout.
-   */
-  translations?: Partial<DefaultLayoutTranslations> | null;
-  /**
-   * A document query selector string or `HTMLElement` to mount menus inside.
-   *
-   * @defaultValue `document.body`
-   */
-  menuContainer?: string | HTMLElement | null;
-  /**
-   * Specifies whether menu buttons should be placed in the top or bottom controls group. This
-   * only applies to the large video layout.
-   */
-  menuGroup?: 'top' | 'bottom';
-  /**
-   * Disable audio boost slider in the settings menu.
-   */
-  noAudioGain?: boolean;
-  /**
-   * The audio gain options to be displayed in the settings menu.
-   */
-  audioGains?: number[] | { min: number; max: number; step: number };
-  /**
-   * Whether modal menus should be disabled when the small layout is active. A modal menu is
-   * a floating panel that floats up from the bottom of the screen (outside of the player). It's
-   * enabled by default as it provides a better user experience for touch devices.
-   */
-  noModal?: boolean;
-  /**
-   * Whether to disable scrubbing by touch swiping left or right on the player canvas.
-   */
-  noScrubGesture?: boolean;
-  /**
-   * The minimum width of the slider to start displaying slider chapters when available.
-   */
-  sliderChaptersMinWidth?: number;
-  /**
-   * Whether the time slider should be disabled.
-   */
-  disableTimeSlider?: boolean;
-  /**
-   * Whether all gestures such as press to play or seek should not be active.
-   */
-  noGestures?: boolean;
-  /**
-   * Whether keyboard actions should not be displayed.
-   */
-  noKeyboardAnimations?: boolean;
-  /**
-   * The playback rate options to be displayed in the settings menu.
-   */
-  playbackRates?: number[] | { min: number; max: number; step: number };
-  /**
-   * The number of seconds to seek forward or backward when pressing the seek button or using
-   * keyboard shortcuts.
-   */
-  seekStep?: number;
-  /**
-   * Provide additional content to be inserted in specific positions.
-   */
-  slots?: Slots;
-}
-
-export interface CreateDefaultMediaLayout {
-  type: 'audio' | 'video';
-  smLayoutWhen: MediaPlayerQuery;
-  renderLayout: (props: {
-    streamType: MediaStreamType;
-    isLoadLayout: boolean;
-    isSmallLayout: boolean;
-  }) => React.ReactNode;
-}
-
-export function createDefaultMediaLayout({
-  type,
-  smLayoutWhen,
-  renderLayout,
-}: CreateDefaultMediaLayout) {
-  const Layout = React.forwardRef<HTMLDivElement, DefaultLayoutProps>(
-    (
-      {
-        children,
-        className,
-        disableTimeSlider = false,
-        hideQualityBitrate = false,
-        icons,
-        colorScheme = 'system',
-        download = null,
-        menuContainer = null,
-        menuGroup = 'bottom',
-        noAudioGain = false,
-        audioGains = { min: 0, max: 300, step: 25 },
-        noGestures = false,
-        noKeyboardAnimations = false,
-        noModal = false,
-        noScrubGesture,
-        playbackRates = { min: 0, max: 2, step: 0.25 },
-        seekStep = 10,
-        showMenuDelay,
-        showTooltipDelay = 700,
-        sliderChaptersMinWidth = 325,
-        slots,
-        smallLayoutWhen = smLayoutWhen,
-        thumbnails = null,
-        translations,
-        ...props
-      },
-      forwardRef,
-    ) => {
-      const media = useMediaContext(),
-        $load = useSignal(media.$props.load),
-        $canLoad = useMediaState('canLoad'),
-        $viewType = useMediaState('viewType'),
-        $streamType = useMediaState('streamType'),
-        $smallWhen = createComputed(() => {
-          return isBoolean(smallLayoutWhen) ? smallLayoutWhen : smallLayoutWhen(media.player.state);
-        }, [smallLayoutWhen]),
-        userPrefersAnnouncements = createSignal(true),
-        userPrefersKeyboardAnimations = createSignal(true),
-        isMatch = $viewType === type,
-        isSmallLayout = $smallWhen(),
-        isForcedLayout = isBoolean(smallLayoutWhen),
-        isLoadLayout = $load === 'play' && !$canLoad,
-        canRender = $canLoad || isForcedLayout || isLoadLayout,
-        colorSchemeClass = useColorSchemeClass(colorScheme),
-        layoutEl = createSignal<HTMLElement | null>(null);
-
-      useSignal($smallWhen);
-
-      return (
-        <div
-          {...props}
-          className={
-            `vds-${type}-layout` +
-            (colorSchemeClass ? ` ${colorSchemeClass}` : '') +
-            (className ? ` ${className}` : '')
-          }
-          data-match={isMatch ? '' : null}
-          data-sm={isSmallLayout ? '' : null}
-          data-lg={!isSmallLayout ? '' : null}
-          data-size={isSmallLayout ? 'sm' : 'lg'}
-          data-no-scrub-gesture={noScrubGesture ? '' : null}
-          ref={composeRefs(layoutEl.set as any, forwardRef)}
-        >
-          {canRender && isMatch ? (
-            <DefaultLayoutContext.Provider
-              value={{
-                disableTimeSlider,
-                hideQualityBitrate,
-                icons: icons,
-                colorScheme,
-                download,
-                isSmallLayout,
-                menuContainer,
-                menuGroup,
-                noAudioGain,
-                audioGains,
-                layoutEl,
-                noGestures,
-                noKeyboardAnimations,
-                noModal,
-                noScrubGesture,
-                showMenuDelay,
-                showTooltipDelay,
-                sliderChaptersMinWidth,
-                slots,
-                seekStep,
-                playbackRates,
-                thumbnails,
-                translations,
-                userPrefersAnnouncements,
-                userPrefersKeyboardAnimations,
-              }}
-            >
-              {renderLayout({ streamType: $streamType, isSmallLayout, isLoadLayout })}
-              {children}
-            </DefaultLayoutContext.Provider>
-          ) : null}
-        </div>
-      );
-    },
-  );
-
-  Layout.displayName = 'DefaultMediaLayout';
-  return Layout;
-}

package/src/components/layouts/default/slots.tsx

@@ -1,98 +0,0 @@
-import * as React from 'react';
-
-import { isUndefined, uppercaseFirstChar } from 'maverick.js/std';
-
-import { DefaultLayoutContext } from './context';
-
-export type SlotPositions<Name extends string> =
-  | `before${Capitalize<Name>}`
-  | Name
-  | `after${Capitalize<Name>}`;
-
-export type Slots<Names extends string> = {
-  [slotName in SlotPositions<Names>]?: React.ReactNode;
-};
-
-export type DefaultLayoutSlotName =
-  | 'bufferingIndicator'
-  | 'captionButton'
-  | 'captions'
-  | 'title'
-  | 'chapterTitle'
-  | 'currentTime'
-  | 'timeDivider'
-  | 'endTime'
-  | 'fullscreenButton'
-  | 'liveButton'
-  | 'livePlayButton'
-  | 'muteButton'
-  | 'pipButton'
-  | 'airPlayButton'
-  | 'googleCastButton'
-  | 'downloadButton'
-  | 'playButton'
-  | 'loadButton'
-  | 'seekBackwardButton'
-  | 'seekForwardButton'
-  | 'startDuration'
-  | 'timeSlider'
-  | 'volumeSlider'
-  | 'topControlsGroupStart'
-  | 'topControlsGroupCenter'
-  | 'topControlsGroupEnd'
-  | 'centerControlsGroupStart'
-  | 'centerControlsGroupCenter'
-  | 'centerControlsGroupEnd'
-  | DefaultLayoutMenuSlotName;
-
-export type DefaultLayoutMenuSlotName =
-  | 'chaptersMenu'
-  | 'settingsMenu'
-  /** @deprecated - use `settingsMenuItemsStart` */
-  | 'settingsMenuStartItems'
-  /** @deprecated - use `settingsMenuItemsEnd` */
-  | 'settingsMenuEndItems'
-  | 'settingsMenuItemsStart'
-  | 'settingsMenuItemsEnd'
-  | 'playbackMenuItemsStart'
-  | 'playbackMenuItemsEnd'
-  | 'playbackMenuLoop'
-  | 'accessibilityMenuItemsStart'
-  | 'accessibilityMenuItemsEnd'
-  | 'audioMenuItemsStart'
-  | 'audioMenuItemsEnd'
-  | 'captionsMenuItemsStart'
-  | 'captionsMenuItemsEnd';
-
-export interface DefaultLayoutSlots extends Slots<DefaultLayoutSlotName> {}
-
-export interface DefaultAudioLayoutSlots extends DefaultLayoutSlots {}
-
-export interface DefaultVideoLayoutSlots extends DefaultLayoutSlots {
-  smallLayout?: DefaultLayoutSlots;
-  largeLayout?: DefaultLayoutSlots;
-}
-
-export function useDefaultAudioLayoutSlots() {
-  return React.useContext(DefaultLayoutContext).slots as DefaultAudioLayoutSlots | undefined;
-}
-
-export function useDefaultVideoLayoutSlots() {
-  return React.useContext(DefaultLayoutContext).slots as DefaultVideoLayoutSlots | undefined;
-}
-
-export function slot<T>(
-  slots: T | undefined,
-  name: keyof T,
-  defaultValue: React.ReactNode,
-): React.ReactNode {
-  const slot = slots?.[name],
-    capitalizedName = uppercaseFirstChar(name as string);
-  return (
-    <>
-      {slots?.[`before${capitalizedName}`]}
-      {isUndefined(slot) ? defaultValue : slot}
-      {slots?.[`after${capitalizedName}`]}
-    </>
-  );
-}

package/src/components/layouts/default/ui/announcer.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-import { useSignal } from 'maverick.js/react';
-
-import { MediaAnnouncer } from '../../../announcer';
-import { useDefaultLayoutContext } from '../context';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultAnnouncer
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultAnnouncer() {
-  const { userPrefersAnnouncements, translations } = useDefaultLayoutContext(),
-    $userPrefersAnnouncements = useSignal(userPrefersAnnouncements);
-
-  if (!$userPrefersAnnouncements) return null;
-
-  return <MediaAnnouncer translations={translations} />;
-}
-
-DefaultAnnouncer.displayName = 'DefaultAnnouncer';
-export { DefaultAnnouncer };

package/src/components/layouts/default/ui/buttons.tsx

@@ -1,301 +0,0 @@
-import * as React from 'react';
-
-import { isString, uppercaseFirstChar } from 'maverick.js/std';
-import { getDownloadFile, isTrackCaptionKind } from 'vidstack';
-
-import { useMediaState } from '../../../../hooks/use-media-state';
-import { appendParamsToURL } from '../../../../utils';
-import { AirPlayButton } from '../../../ui/buttons/airplay-button';
-import { CaptionButton } from '../../../ui/buttons/caption-button';
-import { FullscreenButton } from '../../../ui/buttons/fullscreen-button';
-import { GoogleCastButton } from '../../../ui/buttons/google-cast-button';
-import { LiveButton } from '../../../ui/buttons/live-button';
-import { MuteButton } from '../../../ui/buttons/mute-button';
-import { PIPButton } from '../../../ui/buttons/pip-button';
-import { PlayButton } from '../../../ui/buttons/play-button';
-import { SeekButton } from '../../../ui/buttons/seek-button';
-import * as Tooltip from '../../../ui/tooltip';
-import { useDefaultLayoutContext, useDefaultLayoutWord } from '../context';
-import { DefaultTooltip } from './tooltip';
-
-/* -------------------------------------------------------------------------------------------------
- * Types
- * -----------------------------------------------------------------------------------------------*/
-
-interface DefaultMediaButtonProps {
-  tooltip: Tooltip.ContentProps['placement'];
-}
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultPlayButton
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultPlayButton({ tooltip }: DefaultMediaButtonProps) {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    playText = useDefaultLayoutWord('Play'),
-    pauseText = useDefaultLayoutWord('Pause'),
-    $paused = useMediaState('paused'),
-    $ended = useMediaState('ended');
-  return (
-    <DefaultTooltip content={$paused ? playText : pauseText} placement={tooltip}>
-      <PlayButton className="vds-play-button vds-button" aria-label={playText}>
-        {$ended ? (
-          <Icons.PlayButton.Replay className="vds-icon" />
-        ) : $paused ? (
-          <Icons.PlayButton.Play className="vds-icon" />
-        ) : (
-          <Icons.PlayButton.Pause className="vds-icon" />
-        )}
-      </PlayButton>
-    </DefaultTooltip>
-  );
-}
-
-DefaultPlayButton.displayName = 'DefaultPlayButton';
-export { DefaultPlayButton };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultMuteButton
- * -----------------------------------------------------------------------------------------------*/
-
-const DefaultMuteButton = React.forwardRef<HTMLButtonElement, DefaultMediaButtonProps>(
-  ({ tooltip }, forwardRef) => {
-    const { icons: Icons } = useDefaultLayoutContext(),
-      muteText = useDefaultLayoutWord('Mute'),
-      unmuteText = useDefaultLayoutWord('Unmute'),
-      $muted = useMediaState('muted'),
-      $volume = useMediaState('volume');
-    return (
-      <DefaultTooltip content={$muted ? unmuteText : muteText} placement={tooltip}>
-        <MuteButton className="vds-mute-button vds-button" aria-label={muteText} ref={forwardRef}>
-          {$muted || $volume == 0 ? (
-            <Icons.MuteButton.Mute className="vds-icon" />
-          ) : $volume < 0.5 ? (
-            <Icons.MuteButton.VolumeLow className="vds-icon" />
-          ) : (
-            <Icons.MuteButton.VolumeHigh className="vds-icon" />
-          )}
-        </MuteButton>
-      </DefaultTooltip>
-    );
-  },
-);
-
-DefaultMuteButton.displayName = 'DefaultMuteButton';
-export { DefaultMuteButton };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultCaptionButton
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultCaptionButton({ tooltip }: DefaultMediaButtonProps) {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    captionsText = useDefaultLayoutWord('Captions'),
-    onText = useDefaultLayoutWord('Closed-Captions On'),
-    offText = useDefaultLayoutWord('Closed-Captions Off'),
-    $track = useMediaState('textTrack'),
-    isOn = $track && isTrackCaptionKind($track);
-  return (
-    <DefaultTooltip content={isOn ? onText : offText} placement={tooltip}>
-      <CaptionButton className="vds-caption-button vds-button" aria-label={captionsText}>
-        {isOn ? (
-          <Icons.CaptionButton.On className="vds-icon" />
-        ) : (
-          <Icons.CaptionButton.Off className="vds-icon" />
-        )}
-      </CaptionButton>
-    </DefaultTooltip>
-  );
-}
-
-DefaultCaptionButton.displayName = 'DefaultCaptionButton';
-export { DefaultCaptionButton };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultPIPButton
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultPIPButton({ tooltip }: DefaultMediaButtonProps) {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    pipText = useDefaultLayoutWord('PiP'),
-    enterText = useDefaultLayoutWord('Enter PiP'),
-    exitText = useDefaultLayoutWord('Exit PiP'),
-    $pip = useMediaState('pictureInPicture');
-  return (
-    <DefaultTooltip content={$pip ? exitText : enterText} placement={tooltip}>
-      <PIPButton className="vds-pip-button vds-button" aria-label={pipText}>
-        {$pip ? (
-          <Icons.PIPButton.Exit className="vds-icon" />
-        ) : (
-          <Icons.PIPButton.Enter className="vds-icon" />
-        )}
-      </PIPButton>
-    </DefaultTooltip>
-  );
-}
-
-DefaultPIPButton.displayName = 'DefaultPIPButton';
-export { DefaultPIPButton };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultFullscreenButton
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultFullscreenButton({ tooltip }: DefaultMediaButtonProps) {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    fullscreenText = useDefaultLayoutWord('Fullscreen'),
-    enterText = useDefaultLayoutWord('Enter Fullscreen'),
-    exitText = useDefaultLayoutWord('Exit Fullscreen'),
-    $fullscreen = useMediaState('fullscreen');
-  return (
-    <DefaultTooltip content={$fullscreen ? exitText : enterText} placement={tooltip}>
-      <FullscreenButton className="vds-fullscreen-button vds-button" aria-label={fullscreenText}>
-        {$fullscreen ? (
-          <Icons.FullscreenButton.Exit className="vds-icon" />
-        ) : (
-          <Icons.FullscreenButton.Enter className="vds-icon" />
-        )}
-      </FullscreenButton>
-    </DefaultTooltip>
-  );
-}
-
-DefaultFullscreenButton.displayName = 'DefaultFullscreenButton';
-export { DefaultFullscreenButton };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultSeekButton
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultSeekButton({
-  backward,
-  tooltip,
-}: DefaultMediaButtonProps & { backward?: boolean }) {
-  const { icons: Icons, seekStep } = useDefaultLayoutContext(),
-    seekForwardText = useDefaultLayoutWord('Seek Forward'),
-    seekBackwardText = useDefaultLayoutWord('Seek Backward'),
-    seconds = (backward ? -1 : 1) * seekStep!,
-    label = seconds >= 0 ? seekForwardText : seekBackwardText;
-  return (
-    <DefaultTooltip content={label} placement={tooltip}>
-      <SeekButton className="vds-seek-button vds-button" seconds={seconds} aria-label={label}>
-        {seconds >= 0 ? (
-          <Icons.SeekButton.Forward className="vds-icon" />
-        ) : (
-          <Icons.SeekButton.Backward className="vds-icon" />
-        )}
-      </SeekButton>
-    </DefaultTooltip>
-  );
-}
-
-DefaultSeekButton.displayName = 'DefaultSeekButton';
-export { DefaultSeekButton };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultAirPlayButton
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultAirPlayButton({ tooltip }: DefaultMediaButtonProps) {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    airPlayText = useDefaultLayoutWord('AirPlay'),
-    $state = useMediaState('remotePlaybackState'),
-    stateText = useDefaultLayoutWord(uppercaseFirstChar($state) as Capitalize<RemotePlaybackState>),
-    label = `${airPlayText} ${stateText}`,
-    Icon =
-      ($state === 'connecting'
-        ? Icons.AirPlayButton.Connecting
-        : $state === 'connected'
-          ? Icons.AirPlayButton.Connected
-          : null) ?? Icons.AirPlayButton.Default;
-  return (
-    <DefaultTooltip content={airPlayText} placement={tooltip}>
-      <AirPlayButton className="vds-airplay-button vds-button" aria-label={label}>
-        <Icon className="vds-icon" />
-      </AirPlayButton>
-    </DefaultTooltip>
-  );
-}
-
-DefaultAirPlayButton.displayName = 'DefaultAirPlayButton';
-export { DefaultAirPlayButton };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultGoogleCastButton
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultGoogleCastButton({ tooltip }: DefaultMediaButtonProps) {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    googleCastText = useDefaultLayoutWord('Google Cast'),
-    $state = useMediaState('remotePlaybackState'),
-    stateText = useDefaultLayoutWord(uppercaseFirstChar($state) as Capitalize<RemotePlaybackState>),
-    label = `${googleCastText} ${stateText}`,
-    Icon =
-      ($state === 'connecting'
-        ? Icons.GoogleCastButton.Connecting
-        : $state === 'connected'
-          ? Icons.GoogleCastButton.Connected
-          : null) ?? Icons.GoogleCastButton.Default;
-  return (
-    <DefaultTooltip content={googleCastText} placement={tooltip}>
-      <GoogleCastButton className="vds-google-cast-button vds-button" aria-label={label}>
-        <Icon className="vds-icon" />
-      </GoogleCastButton>
-    </DefaultTooltip>
-  );
-}
-
-DefaultGoogleCastButton.displayName = 'DefaultGoogleCastButton';
-export { DefaultGoogleCastButton };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultLiveButton
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultLiveButton() {
-  const $live = useMediaState('live'),
-    label = useDefaultLayoutWord('Skip To Live'),
-    liveText = useDefaultLayoutWord('LIVE');
-  return $live ? (
-    <LiveButton className="vds-live-button" aria-label={label}>
-      <span className="vds-live-button-text">{liveText}</span>
-    </LiveButton>
-  ) : null;
-}
-
-DefaultLiveButton.displayName = 'DefaultLiveButton';
-export { DefaultLiveButton };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultDownloadButton
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultDownloadButton() {
-  const { download, icons: Icons } = useDefaultLayoutContext(),
-    $src = useMediaState('source'),
-    $title = useMediaState('title'),
-    file = getDownloadFile({
-      title: $title,
-      src: $src,
-      download,
-    }),
-    downloadText = useDefaultLayoutWord('Download');
-
-  return isString(file?.url) ? (
-    <DefaultTooltip content={downloadText} placement="top">
-      <a
-        role="button"
-        className="vds-download-button vds-button"
-        aria-label={downloadText}
-        href={appendParamsToURL(file.url, { download: file.name })}
-        download={file.name}
-        target="_blank"
-      >
-        {Icons.DownloadButton ? <Icons.DownloadButton.Default className="vds-icon" /> : null}
-      </a>
-    </DefaultTooltip>
-  ) : null;
-}
-
-DefaultDownloadButton.displayName = 'DefaultDownloadButton';
-export { DefaultDownloadButton };

package/src/components/layouts/default/ui/captions.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-import { Captions } from '../../../ui/captions';
-import { useDefaultLayoutWord } from '../context';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultCaptions
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultCaptions() {
-  const exampleText = useDefaultLayoutWord('Captions look like this');
-  return <Captions className="vds-captions" exampleText={exampleText} />;
-}
-
-DefaultCaptions.displayName = 'DefaultCaptions';
-export { DefaultCaptions };