willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-widgets/src/components/VideoEmbed/index.css

@@ -0,0 +1,230 @@
+.willa-prose-video-embed {
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  grid-template-columns: minmax(8.5rem, 34%) minmax(0, 1fr) auto;
+  align-items: stretch;
+  min-height: 8.25rem;
+  margin: 0 0 1.35rem;
+  overflow: hidden;
+  border: 1px solid var(--willa-video-border);
+  border-radius: 10px;
+  background: var(--willa-video-bg);
+  color: inherit;
+  text-decoration: none;
+  text-shadow: none;
+  transition:
+    border-color 180ms ease,
+    background-color 180ms ease,
+    transform 180ms ease;
+}
+
+.willa-prose-video-embed:hover {
+  border-color: var(--willa-video-border-hover);
+  background: var(--willa-video-bg-hover);
+  transform: translateY(-1px);
+}
+
+.willa-prose-video-embed--inline {
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-height: auto;
+  background: var(--willa-video-inline-bg);
+}
+
+.willa-prose-video-embed:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-prose-video-embed-visual {
+  position: relative;
+  display: block;
+  min-height: 100%;
+  background: var(--willa-image-bg);
+  overflow: hidden;
+}
+
+.willa-prose-video-embed-poster {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 8.25rem;
+  object-fit: cover;
+  transition:
+    transform 180ms ease,
+    opacity 180ms ease;
+}
+
+.willa-prose-video-embed:hover .willa-prose-video-embed-poster {
+  opacity: 0.94;
+  transform: scale(1.02);
+}
+
+.willa-prose-video-embed-fallback {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 8.25rem;
+  align-items: center;
+  justify-content: center;
+  background: var(--willa-video-fallback-bg);
+}
+
+.willa-prose-video-embed-kind-icon {
+  width: 2.2rem;
+  height: 2.2rem;
+  color: var(--willa-text-faint);
+}
+
+.willa-prose-video-embed-play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  display: inline-flex;
+  width: 2.7rem;
+  height: 2.7rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--willa-video-play-bg);
+  color: var(--willa-video-play-color);
+  box-shadow: var(--willa-video-play-shadow);
+  transform: translate(-50%, -50%);
+}
+
+.willa-prose-video-embed-play svg {
+  width: 1.18rem;
+  height: 1.18rem;
+}
+
+.willa-prose-video-embed-content {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.42rem;
+  padding: 1.05rem 1.1rem;
+}
+
+.willa-prose-video-embed--inline .willa-prose-video-embed-content {
+  padding-right: 0.8rem;
+}
+
+.willa-prose-video-embed-kicker {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.38rem 0.55rem;
+  color: var(--willa-text-faint);
+  font-size: 0.78rem;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.willa-prose-video-embed-inline-icon {
+  flex: none;
+  width: 0.92rem;
+  height: 0.92rem;
+}
+
+.willa-prose-video-embed-duration {
+  color: var(--willa-text-soft);
+  font-family: var(--willa-code-font);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.willa-prose-video-embed-title {
+  color: var(--willa-text-strong);
+  font-family: var(--willa-title-font);
+  font-size: 1.08rem;
+  font-weight: 650;
+  line-height: 1.45;
+}
+
+.willa-prose-video-embed-description {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--willa-text-soft);
+  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.7;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.willa-prose-video-embed-external {
+  width: 1rem;
+  height: 1rem;
+  margin: 1rem 1rem 0 0;
+  color: var(--willa-text-faint);
+}
+
+.willa-prose-video-embed-external-link {
+  display: inline-flex;
+  align-self: start;
+  margin: 1rem 1rem 0 0;
+  color: var(--willa-text-faint);
+}
+
+.willa-prose-video-embed-external-link:hover {
+  color: var(--willa-text-strong);
+}
+
+.willa-prose-video-embed-external-link .willa-prose-video-embed-external {
+  margin: 0;
+}
+
+.willa-prose-video-embed-external--placeholder {
+  opacity: 0;
+}
+
+.willa-prose-video-embed-player-shell {
+  grid-column: 1 / -1;
+  margin: 0 1rem 1rem;
+  padding-top: 0.95rem;
+  border-top: 1px solid var(--willa-line);
+}
+
+.willa-prose-video-embed-player {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: 1px solid var(--willa-line);
+  border-radius: 10px;
+  background: var(--willa-panel-bg);
+}
+
+@media (hover: none) {
+  .willa-prose-video-embed:hover {
+    border-color: var(--willa-video-border);
+    background: var(--willa-video-bg);
+    transform: none;
+  }
+
+  .willa-prose-video-embed:hover .willa-prose-video-embed-poster {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .willa-prose-video-embed {
+    grid-template-columns: 1fr auto;
+  }
+
+  .willa-prose-video-embed-visual {
+    grid-column: 1 / -1;
+    min-height: 9rem;
+  }
+
+  .willa-prose-video-embed-content {
+    padding: 0.95rem 1rem 1rem;
+  }
+
+  .willa-prose-video-embed-player-shell {
+    margin: 0 0.9rem 0.9rem;
+    padding-top: 0.85rem;
+  }
+}

package/packages/willa-widgets/src/components/VideoEmbed/index.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useRef } from "react";
+import { ExternalLinkIcon, PlayIcon, VideoIcon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+import { resolveMediaVolume, type MediaContextProps } from "@willa-ui/shared";
+import {
+  MediaEmbedContent,
+  resolveMediaEmbedAsset,
+} from "#widgets/internal/mediaEmbed";
+
+export type VideoEmbedProps = MediaContextProps & {
+  href?: string;
+  title: string;
+  src?: string;
+  volume?: number;
+  description?: string;
+  duration?: string;
+  poster?: string;
+  provider?: string;
+  className?: string;
+};
+
+export function VideoEmbed({
+  href,
+  src,
+  title,
+  description,
+  duration,
+  volume,
+  provider,
+  poster,
+  className,
+  articleSourcePath,
+  resolveAssetUrl,
+}: VideoEmbedProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const normalizedHref = href?.trim() ?? "";
+  const normalizedSrc = src?.trim() ?? "";
+  const normalizedTitle = title.trim();
+  const mediaContext = { articleSourcePath, resolveAssetUrl };
+  const resolvedSrc = resolveMediaEmbedAsset(mediaContext, normalizedSrc);
+  const resolvedPoster = resolveMediaEmbedAsset(mediaContext, poster);
+  const hasInlinePlayer = Boolean(resolvedSrc);
+  const hasExternalLink = Boolean(normalizedHref);
+
+  useEffect(() => {
+    const resolvedVolume = resolveMediaVolume(volume);
+    if (resolvedVolume !== undefined && videoRef.current) {
+      videoRef.current.volume = resolvedVolume;
+    }
+  }, [volume, resolvedSrc]);
+
+  if ((!hasExternalLink && !hasInlinePlayer) || !normalizedTitle) return null;
+
+  const content = (
+    <MediaEmbedContent
+      kind="video"
+      icon={<VideoIcon />}
+      provider={provider}
+      title={normalizedTitle}
+      description={description}
+      duration={duration}
+    />
+  );
+
+  if (!hasInlinePlayer) {
+    return (
+      <a
+        className={classNames("willa-prose-video-embed", className)}
+        href={normalizedHref}
+        target="_blank"
+        rel="noreferrer"
+        aria-label={`Open external video: ${normalizedTitle}`}
+      >
+        <span className="willa-prose-video-embed-visual" aria-hidden="true">
+          {resolvedPoster ? (
+            <img
+              src={resolvedPoster}
+              alt=""
+              className="willa-prose-video-embed-poster"
+              loading="lazy"
+            />
+          ) : (
+            <span className="willa-prose-video-embed-fallback">
+              <VideoIcon className="willa-prose-video-embed-kind-icon" />
+            </span>
+          )}
+          <span className="willa-prose-video-embed-play">
+            <PlayIcon />
+          </span>
+        </span>
+        {content}
+        <ExternalLinkIcon className="willa-prose-video-embed-external" />
+      </a>
+    );
+  }
+
+  return (
+    <article
+      className={classNames(
+        "willa-prose-video-embed",
+        "willa-prose-video-embed--inline",
+        className,
+      )}
+    >
+      {content}
+      {hasExternalLink ? (
+        <a
+          className="willa-prose-video-embed-external-link"
+          href={normalizedHref}
+          target="_blank"
+          rel="noreferrer"
+          aria-label={`Open external video: ${normalizedTitle}`}
+          title="Open external video"
+        >
+          <ExternalLinkIcon className="willa-prose-video-embed-external" />
+        </a>
+      ) : (
+        <span className="willa-prose-video-embed-external willa-prose-video-embed-external--placeholder" />
+      )}
+      <div className="willa-prose-video-embed-player-shell">
+        <video
+          ref={videoRef}
+          className="willa-prose-video-embed-player"
+          controls
+          preload="metadata"
+          src={resolvedSrc}
+        />
+      </div>
+    </article>
+  );
+}
+
+VideoEmbed.displayName = "VideoEmbed";

package/packages/willa-widgets/src/components/VideoLink/index.css

@@ -0,0 +1,118 @@
+.willa-prose-video-link,
+.willa-prose-video-link--player {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.32rem;
+  max-width: 100%;
+  margin: 0 0.12rem;
+  padding: 0.16rem 0.42rem;
+  border: 1px solid var(--willa-video-link-border);
+  border-radius: 999px;
+  background: var(--willa-video-link-bg);
+  color: var(--willa-text-strong);
+  font-size: 0.88em;
+  font-weight: 650;
+  line-height: 1.25;
+  text-decoration: none;
+  text-shadow: none;
+  vertical-align: 0.02em;
+  transition:
+    border-color 180ms ease,
+    background-color 180ms ease,
+    color 180ms ease;
+}
+
+.willa-prose-video-link--player {
+  cursor: pointer;
+}
+
+.willa-prose-video-link:hover,
+.willa-prose-video-link--player:hover {
+  border-color: var(--willa-video-link-border-hover);
+  background: var(--willa-video-link-bg-hover);
+  color: var(--willa-text-strong);
+  text-decoration: none;
+}
+
+.willa-prose-video-link-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.32rem;
+  max-width: 100%;
+  vertical-align: 0.02em;
+}
+
+.willa-prose-video-link-icon,
+.willa-prose-media-link-external {
+  flex: none;
+  width: 0.86em;
+  height: 0.86em;
+  color: var(--willa-video-link-icon);
+  vertical-align: middle;
+}
+
+.willa-prose-video-link-icon--trigger {
+  width: 0.92em;
+  height: 0.92em;
+}
+
+.willa-prose-media-link-external {
+  color: var(--willa-text-faint);
+}
+
+.willa-prose-video-link-external-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--willa-text-faint);
+}
+
+.willa-prose-media-link-content {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.28rem;
+  line-height: 1;
+}
+
+.willa-prose-media-link-kicker {
+  color: var(--willa-text-faint);
+  font-size: 0.92em;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.willa-prose-media-link-title {
+  min-width: 0;
+  line-height: 1;
+}
+
+.willa-prose-video-link-popover {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 0.55rem);
+  z-index: var(--willa-layer-popover, 1000);
+  display: block;
+  width: min(24rem, calc(100vw - 3rem));
+  padding: 0.7rem;
+  border: 1px solid var(--willa-line);
+  border-radius: 12px;
+  background: var(--willa-panel-bg);
+  box-shadow: var(--willa-media-popover-shadow);
+}
+
+.willa-prose-video-link-player {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border: 1px solid var(--willa-line);
+  border-radius: 10px;
+  background: var(--willa-panel-bg);
+}
+
+@media (max-width: 767px) {
+  .willa-prose-video-link-popover {
+    width: min(20rem, calc(100vw - 2rem));
+  }
+}

package/packages/willa-widgets/src/components/VideoLink/index.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { ExternalLinkIcon, PlayIcon, VideoIcon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+import { resolveMediaVolume, type MediaContextProps } from "@willa-ui/shared";
+
+import {
+  MediaLinkExternalAction,
+  resolveMediaInline,
+} from "#widgets/internal/media";
+
+export type VideoLinkProps = MediaContextProps & {
+  href?: string;
+  src?: string;
+  volume?: number;
+  children?: ReactNode;
+  label?: string;
+  provider?: string;
+  className?: string;
+};
+
+export function VideoLink({
+  href,
+  src,
+  children,
+  label,
+  volume,
+  provider,
+  className,
+  articleSourcePath,
+  resolveAssetUrl,
+}: VideoLinkProps) {
+  const wrapRef = useRef<HTMLSpanElement | null>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const { content, normalizedHref, resolvedSrc } = resolveMediaInline({
+    articleSourcePath,
+    children,
+    href,
+    label,
+    mediaLabel: "video",
+    provider,
+    resolveAssetUrl,
+    src,
+  });
+  const [isOpen, setIsOpen] = useState(false);
+
+  const closePlayer = () => {
+    videoRef.current?.pause();
+    setIsOpen(false);
+  };
+
+  const togglePlayer = () => {
+    setIsOpen((open) => {
+      if (open) {
+        videoRef.current?.pause();
+      }
+
+      return !open;
+    });
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handlePointerDown = (event: globalThis.PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+
+      if (wrapRef.current?.contains(target)) {
+        return;
+      }
+
+      closePlayer();
+    };
+
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") {
+        closePlayer();
+      }
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    const resolvedVolume = resolveMediaVolume(volume);
+    if (resolvedVolume !== undefined && videoRef.current) {
+      videoRef.current.volume = resolvedVolume;
+    }
+  }, [volume, resolvedSrc, isOpen]);
+
+  if (!normalizedHref && !resolvedSrc) return null;
+
+  if (!resolvedSrc) {
+    return (
+      <a
+        className={classNames("willa-prose-video-link", className)}
+        href={normalizedHref}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <VideoIcon className="willa-prose-video-link-icon" />
+        {content}
+        <ExternalLinkIcon className="willa-prose-media-link-external" />
+      </a>
+    );
+  }
+
+  return (
+    <span
+      ref={wrapRef}
+      className={classNames("willa-prose-video-link-wrap", className)}
+    >
+      <button
+        type="button"
+        className={classNames(
+          "willa-prose-video-link",
+          "willa-prose-video-link--player",
+          isOpen && "willa-prose-video-link--open",
+        )}
+        onClick={togglePlayer}
+        aria-expanded={isOpen}
+        aria-label={isOpen ? "Hide video player" : "Show video player"}
+      >
+        <VideoIcon className="willa-prose-video-link-icon" />
+        {content}
+        <PlayIcon className="willa-prose-video-link-icon willa-prose-video-link-icon--trigger" />
+      </button>
+      {normalizedHref ? (
+        <MediaLinkExternalAction
+          href={normalizedHref}
+          mediaLabel="video"
+          className="willa-prose-video-link-external-action"
+        />
+      ) : null}
+      {isOpen ? (
+        <span className="willa-prose-video-link-popover">
+          <video
+            ref={videoRef}
+            className="willa-prose-video-link-player"
+            controls
+            preload="metadata"
+            src={resolvedSrc}
+          />
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+VideoLink.displayName = "VideoLink";