@dxos/react-ui 0.8.4-main.84f28bd → 0.8.4-main.8baae0fced

package/src/components/MediaPlayer/MediaPlayer.tsx

@@ -0,0 +1,153 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { type ThemedClassName } from '../../util';
+
+export type MediaKind = 'video' | 'audio';
+
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogv', '.mov', '.m4v'];
+const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.m4a', '.aac', '.flac'];
+
+/** iframe sandbox flags compatible with typical oEmbed-style players. */
+const DEFAULT_IFRAME_SANDBOX = 'allow-scripts allow-same-origin allow-presentation';
+
+/**
+ * Best-effort detection of `video` vs `audio` from a media URL.
+ * Inspects the pathname's extension (ignoring query/hash). Returns `undefined`
+ * when the URL doesn't look like a recognised media file — callers should
+ * default to 'video' or render a fallback (e.g. iframe / img).
+ */
+export const detectMediaKind = (src: string): MediaKind | undefined => {
+  // Strip query and hash, then take the last path segment's extension.
+  const pathname = src.split(/[?#]/, 1)[0]!;
+  const lower = pathname.toLowerCase();
+  if (VIDEO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return 'video';
+  }
+  if (AUDIO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return 'audio';
+  }
+
+  return undefined;
+};
+
+/**
+ * Heuristic match for URLs that should render as native `<video>` / `<audio>`
+ * (i.e. URLs ending in a recognised media extension).
+ *
+ * NB: legacy embed URLs (Cloudflare Stream etc. — paths containing `iframe`)
+ * serve an HTML player page, **not** a media stream, so they cannot be loaded
+ * via `<video>`. Those are detected by {@link isLegacyIframeUrl} and rendered
+ * via `<iframe>` instead.
+ */
+export const isEmbedUrl = (src: string): boolean => detectMediaKind(src) !== undefined;
+
+/** Match URLs whose pathname has an `/iframe` segment (e.g. Cloudflare Stream embeds). */
+const LEGACY_IFRAME_PATH_PATTERN = /\/iframe(?:[/?#]|$)/i;
+
+const isLegacyIframeUrl = (src: string): boolean => {
+  const pathAndQuery = src.split('#', 1)[0]!;
+  return LEGACY_IFRAME_PATH_PATTERN.test(pathAndQuery);
+};
+
+export type MediaPlayerProps = ThemedClassName<{
+  src: string;
+  /** Override auto-detection. When omitted, `detectMediaKind(src)` is used and falls back to 'video'. */
+  kind?: MediaKind;
+  controls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  /** Accessible label for the `<video>` / `<audio>` element. */
+  alt?: string;
+  /** Defaults to 'anonymous' for cross-origin sources (e.g. signed S3 URLs). */
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  /** Additional classes applied only when rendering `<img>`. */
+  imgClassNames?: string;
+  /** Additional classes applied only when rendering native media or `<iframe>`. */
+  mediaClassNames?: string;
+}>;
+
+/**
+ * Renders a media URL using the appropriate element:
+ * - Direct media URLs (mp4, mp3, …) → native `<video>` / `<audio>`.
+ * - Legacy `iframe`-style embed URLs (Cloudflare Stream, oEmbed players) → `<iframe>`.
+ * - Everything else → `<img>` that hides itself on load failure (broken images
+ *   are common in feeds and the placeholder is uglier than nothing).
+ */
+export const MediaPlayer = ({
+  classNames,
+  src,
+  kind,
+  controls = true,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  alt,
+  crossOrigin = 'anonymous',
+  imgClassNames,
+  mediaClassNames,
+}: MediaPlayerProps) => {
+  if (isEmbedUrl(src)) {
+    const resolved = kind ?? detectMediaKind(src) ?? 'video';
+    if (resolved === 'audio') {
+      return (
+        <audio
+          className={mx('w-full', classNames, mediaClassNames)}
+          src={src}
+          controls={controls}
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          crossOrigin={crossOrigin}
+          aria-label={alt}
+        />
+      );
+    }
+
+    return (
+      <video
+        className={mx('aspect-video max-w-full max-h-full', classNames, mediaClassNames)}
+        src={src}
+        controls={controls}
+        autoPlay={autoPlay}
+        loop={loop}
+        muted={muted}
+        crossOrigin={crossOrigin}
+        aria-label={alt}
+      />
+    );
+  }
+
+  if (isLegacyIframeUrl(src)) {
+    return (
+      <iframe
+        src={src}
+        title={alt ?? 'Embedded media'}
+        loading='lazy'
+        className={mx('border-none', classNames, mediaClassNames)}
+        sandbox={DEFAULT_IFRAME_SANDBOX}
+        referrerPolicy='no-referrer'
+        allow='accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;'
+        allowFullScreen
+      />
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt={alt ?? ''}
+      loading='lazy'
+      className={mx(classNames, imgClassNames)}
+      onError={(event) => {
+        event.currentTarget.style.display = 'none';
+      }}
+    />
+  );
+};

package/src/components/MediaPlayer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './MediaPlayer';

package/src/components/{Menus → Menu}/ContextMenu.stories.tsx

@@ -2,12 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ContextMenu } from './ContextMenu';
 import { withTheme } from '../../testing';
+import { ContextMenu } from './ContextMenu';
 
 const DefaultStory = () => {
   // NOTE(thure): Since long-tap will select text in some OSs, apply `select-none` to `ContextMenu.Trigger` where possible.
@@ -91,15 +90,18 @@ const DefaultStory = () => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/ContextMenu',
-  component: ContextMenu,
+const meta = {
+  title: 'ui/react-ui-core/components/ContextMenu',
+  component: ContextMenu.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
   parameters: {
     chromatic: { delay: 1600 },

package/src/components/{Menus → Menu}/ContextMenu.tsx

@@ -34,8 +34,9 @@ const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
     return (
       <ContextMenuPrimitive.Content
         {...props}
+        data-arrow-keys='up down'
         collisionPadding={safeCollisionPadding}
-        className={tx('menu.content', 'menu', { elevation }, classNames)}
+        className={tx('menu.content', { elevation }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -51,11 +52,11 @@ type ContextMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Pri
 const ContextMenuViewport = forwardRef<HTMLDivElement, ContextMenuViewportProps>(
   ({ classNames, asChild, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+      <Comp {...props} className={tx('menu.viewport', {}, classNames)} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -64,13 +65,7 @@ type ContextMenuArrowProps = ThemedClassName<ContextMenuPrimitive.ContextMenuArr
 
 const ContextMenuArrow = forwardRef<SVGSVGElement, ContextMenuArrowProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return (
-    <ContextMenuPrimitive.Arrow
-      {...props}
-      className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
-      ref={forwardedRef}
-    />
-  );
+  return <ContextMenuPrimitive.Arrow {...props} className={tx('menu.arrow', {}, classNames)} ref={forwardedRef} />;
 });
 
 type ContextMenuGroupProps = ContextMenuPrimitive.ContextMenuGroupProps;
@@ -86,13 +81,7 @@ type ContextMenuItemProps = ThemedClassName<ContextMenuPrimitive.ContextMenuItem
 const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
   ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
     const { tx } = useThemeContext();
-    return (
-      <ContextMenuPrimitive.Item
-        {...props}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    return <ContextMenuPrimitive.Item {...props} className={tx('menu.item', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -102,11 +91,7 @@ const ContextMenuCheckboxItem = forwardRef<HTMLDivElement, ContextMenuCheckboxIt
   ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.CheckboxItem
-        {...props}
-        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.CheckboxItem {...props} className={tx('menu.item', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -117,11 +102,7 @@ const ContextMenuSeparator = forwardRef<HTMLDivElement, ContextMenuSeparatorProp
   ({ classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.Separator
-        {...props}
-        className={tx('menu.separator', 'menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.Separator {...props} className={tx('menu.separator', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -132,11 +113,7 @@ const ContextMenuGroupLabel = forwardRef<HTMLDivElement, ContextMenuGroupLabelPr
   ({ classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.Label
-        {...props}
-        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.Label {...props} className={tx('menu.groupLabel', {}, classNames)} ref={forwardedRef} />
     );
   },
 );

package/src/components/{Menus → Menu}/DropdownMenu.stories.tsx

@@ -2,13 +2,12 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef, useState } from 'react';
 
-import { DropdownMenu } from './DropdownMenu';
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
+import { DropdownMenu } from './DropdownMenu';
 
 const DefaultStory = () => {
   return (
@@ -91,15 +90,18 @@ const DefaultStory = () => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/DropdownMenu',
-  component: DropdownMenu,
+const meta = {
+  title: 'ui/react-ui-core/components/DropdownMenu',
+  component: DropdownMenu.Root,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
   parameters: {
     chromatic: { delay: 1600 },