willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,424 @@
+.willa-prose-audio-embed {
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  grid-template-columns: 5.6rem minmax(0, 1fr) auto;
+  align-items: stretch;
+  min-height: 7rem;
+  margin: 0 0 1.35rem;
+  overflow: hidden;
+  border: 1px solid var(--willa-audio-border);
+  border-radius: 10px;
+  background: var(--willa-audio-bg);
+  color: inherit;
+  text-decoration: none;
+  text-shadow: none;
+  transition:
+    border-color 180ms ease,
+    background-color 180ms ease,
+    transform 180ms ease;
+}
+
+.willa-prose-audio-embed:hover {
+  border-color: var(--willa-audio-border-hover);
+  background: var(--willa-audio-bg-hover);
+  transform: translateY(-1px);
+}
+
+.willa-prose-audio-embed--inline {
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-height: auto;
+  background: var(--willa-audio-inline-bg);
+}
+
+.willa-prose-audio-embed:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-prose-audio-embed-visual {
+  display: block;
+  min-height: 100%;
+  background: var(--willa-audio-visual-bg);
+}
+
+.willa-prose-audio-embed-fallback {
+  display: flex;
+  width: 100%;
+  min-height: 7rem;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0.82rem;
+  background: var(--willa-audio-fallback-bg);
+}
+
+.willa-prose-audio-embed-kind-icon {
+  width: 1.55rem;
+  height: 1.55rem;
+  color: var(--willa-audio-accent);
+}
+
+.willa-prose-audio-embed-wave {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  height: 1.3rem;
+}
+
+.willa-prose-audio-embed-wave span {
+  width: 3px;
+  border-radius: 999px;
+  background: var(--willa-audio-accent);
+}
+
+.willa-prose-audio-embed-wave span:nth-child(1) {
+  height: 0.52rem;
+  opacity: 0.58;
+}
+
+.willa-prose-audio-embed-wave span:nth-child(2) {
+  height: 1.15rem;
+  opacity: 0.9;
+}
+
+.willa-prose-audio-embed-wave span:nth-child(3) {
+  height: 0.82rem;
+  opacity: 0.72;
+}
+
+.willa-prose-audio-embed-wave span:nth-child(4) {
+  height: 1.3rem;
+  opacity: 0.96;
+}
+
+.willa-prose-audio-embed-content {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.42rem;
+  padding: 1.05rem 1.1rem;
+}
+
+.willa-prose-audio-embed--inline .willa-prose-audio-embed-content {
+  padding-right: 0.8rem;
+}
+
+.willa-prose-audio-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-audio-embed-inline-icon {
+  flex: none;
+  width: 0.92rem;
+  height: 0.92rem;
+}
+
+.willa-prose-audio-embed-duration {
+  color: var(--willa-text-soft);
+  font-family: var(--willa-code-font);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.willa-prose-audio-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-audio-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-audio-embed-external {
+  width: 1rem;
+  height: 1rem;
+  margin: 1rem 1rem 0 0;
+  color: var(--willa-text-faint);
+}
+
+.willa-prose-audio-embed-external-link {
+  display: inline-flex;
+  align-self: start;
+  margin: 1rem 1rem 0 0;
+  color: var(--willa-text-faint);
+}
+
+.willa-prose-audio-embed-external-link:hover {
+  color: var(--willa-text-strong);
+}
+
+.willa-prose-audio-embed-external-link .willa-prose-audio-embed-external {
+  margin: 0;
+}
+
+.willa-prose-audio-embed-external--placeholder {
+  opacity: 0;
+}
+
+.willa-prose-audio-embed-player-shell {
+  grid-column: 1 / -1;
+  margin: 0 1rem 1rem;
+  padding-top: 0.95rem;
+  border-top: 1px solid var(--willa-line);
+}
+
+.willa-prose-audio-embed-player {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 0.9rem;
+  width: 100%;
+  min-height: 4rem;
+  padding: 0.8rem 0.9rem;
+  border: 1px solid var(--willa-audio-player-border);
+  border-radius: 12px;
+  background: var(--willa-audio-player-bg);
+}
+
+.willa-prose-audio-embed-toggle {
+  display: inline-flex;
+  width: 2.55rem;
+  height: 2.55rem;
+  align-self: start;
+  margin-top: 0.18rem;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: var(--willa-audio-toggle-bg);
+  color: var(--willa-audio-toggle-color);
+  box-shadow: var(--willa-audio-toggle-shadow);
+  cursor: pointer;
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease,
+    background-color 180ms ease;
+}
+
+.willa-prose-audio-embed-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.72;
+  transform: none;
+  box-shadow: none;
+}
+
+.willa-prose-audio-embed-toggle:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--willa-audio-toggle-shadow-hover);
+}
+
+.willa-prose-audio-embed-toggle:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-prose-audio-embed-toggle--playing {
+  background: var(--willa-audio-toggle-playing-bg);
+}
+
+.willa-prose-audio-embed-toggle--loading {
+  background: var(--willa-audio-toggle-loading-bg);
+}
+
+.willa-prose-audio-embed-toggle--error {
+  background: var(--willa-audio-toggle-error-bg);
+}
+
+.willa-prose-audio-embed-toggle svg {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+.willa-prose-audio-embed-timeline {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 0.44rem;
+  padding-top: 0.1rem;
+}
+
+.willa-prose-audio-embed-scrubber {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.8rem;
+  min-height: 2.55rem;
+}
+
+.willa-prose-audio-embed-progress {
+  --willa-audio-progress: 0%;
+  position: relative;
+  height: 0.45rem;
+  display: flex;
+  align-items: center;
+  border-radius: 999px;
+  background: var(--willa-audio-progress-bg);
+  overflow: visible;
+}
+
+.willa-prose-audio-embed-progress::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--willa-audio-progress);
+  border-radius: inherit;
+  background: var(--willa-audio-progress-fill);
+  pointer-events: none;
+}
+
+.willa-prose-audio-embed-progress input[type="range"] {
+  position: absolute;
+  inset: 50% 0 auto;
+  display: block;
+  z-index: 1;
+  width: 100%;
+  height: 0.45rem;
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.willa-prose-audio-embed-progress input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  width: 0.9rem;
+  height: 0.9rem;
+  margin-top: -0.225rem;
+  border: 2px solid var(--willa-audio-thumb-border);
+  border-radius: 50%;
+  background: var(--willa-audio-thumb-bg);
+  box-shadow: var(--willa-audio-thumb-shadow);
+}
+
+.willa-prose-audio-embed-progress
+  input[type="range"]::-webkit-slider-runnable-track {
+  height: 0.45rem;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.willa-prose-audio-embed-progress input[type="range"]::-moz-range-thumb {
+  width: 0.9rem;
+  height: 0.9rem;
+  border: 2px solid var(--willa-audio-thumb-border);
+  border-radius: 50%;
+  background: var(--willa-audio-thumb-bg);
+  box-shadow: var(--willa-audio-thumb-shadow);
+}
+
+.willa-prose-audio-embed-progress input[type="range"]::-moz-range-track {
+  height: 0.45rem;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.willa-prose-audio-embed-progress input[type="range"]:disabled {
+  cursor: default;
+}
+
+.willa-prose-audio-embed-time {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.28rem;
+  white-space: nowrap;
+  color: var(--willa-text-faint);
+  font-family: var(--willa-code-font);
+  font-size: 0.76rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.willa-prose-audio-embed-meta {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.willa-prose-audio-embed-status {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.06rem 0.38rem;
+  border-radius: 999px;
+  background: var(--willa-audio-status-bg);
+  color: var(--willa-audio-status-color);
+  font-size: 0.68rem;
+  font-weight: 650;
+  letter-spacing: 0.01em;
+  text-transform: lowercase;
+}
+
+.willa-prose-audio-embed-native {
+  display: none;
+}
+
+@media (hover: none) {
+  .willa-prose-audio-embed:hover,
+  .willa-prose-audio-embed-toggle:hover {
+    transform: none;
+  }
+
+  .willa-prose-audio-embed:hover {
+    border-color: var(--willa-audio-border);
+    background: var(--willa-audio-bg);
+  }
+}
+
+@media (max-width: 767px) {
+  .willa-prose-audio-embed {
+    grid-template-columns: 1fr auto;
+  }
+
+  .willa-prose-audio-embed-visual {
+    grid-column: 1 / -1;
+    min-height: 9rem;
+  }
+
+  .willa-prose-audio-embed-content {
+    padding: 0.95rem 1rem 1rem;
+  }
+
+  .willa-prose-audio-embed-player-shell {
+    margin: 0 0.9rem 0.9rem;
+    padding-top: 0.85rem;
+  }
+
+  .willa-prose-audio-embed-player {
+    gap: 0.75rem;
+    padding: 0.72rem 0.8rem;
+  }
+
+  .willa-prose-audio-embed-toggle {
+    width: 2.35rem;
+    height: 2.35rem;
+  }
+
+  .willa-prose-audio-embed-time {
+    justify-content: flex-start;
+  }
+
+  .willa-prose-audio-embed-meta {
+    justify-content: flex-start;
+  }
+}

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

@@ -0,0 +1,270 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import {
+  ExternalLinkIcon,
+  PauseIcon,
+  PlayIcon,
+  SpeakerLoudIcon,
+} 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 AudioEmbedProps = MediaContextProps & {
+  href?: string;
+  title: string;
+  src?: string;
+  volume?: number;
+  description?: string;
+  duration?: string;
+  provider?: string;
+  className?: string;
+};
+
+const formatTime = (seconds: number) => {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+
+  const totalSeconds = Math.floor(seconds);
+  const minutes = Math.floor(totalSeconds / 60);
+  const remainSeconds = totalSeconds % 60;
+
+  return `${minutes}:${String(remainSeconds).padStart(2, "0")}`;
+};
+
+export function AudioEmbed(props: AudioEmbedProps) {
+  const { href, title, description, duration, provider, volume, className } =
+    props;
+  const normalizedHref = href?.trim() ?? "";
+  const normalizedTitle = title.trim();
+  const resolvedSrc = resolveMediaEmbedAsset(props, props.src);
+  const hasInlinePlayer = Boolean(resolvedSrc);
+  const hasExternalLink = Boolean(normalizedHref);
+
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [isLoading, setIsLoading] = useState(Boolean(hasInlinePlayer));
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [durationSeconds, setDurationSeconds] = useState(0);
+  const progressValue = durationSeconds > 0 ? currentTime / durationSeconds : 0;
+
+  const durationLabel = useMemo(() => {
+    if (durationSeconds > 0) return formatTime(durationSeconds);
+    return duration?.trim() || "0:00";
+  }, [duration, durationSeconds]);
+
+  const statusLabel = loadError
+    ? loadError
+    : isLoading || !isReady
+      ? "loading audio"
+      : null;
+
+  useEffect(() => {
+    setIsPlaying(false);
+    setIsReady(false);
+    setIsLoading(Boolean(hasInlinePlayer));
+    setLoadError(null);
+    setCurrentTime(0);
+    setDurationSeconds(0);
+  }, [hasInlinePlayer, resolvedSrc]);
+
+  useEffect(() => {
+    const resolvedVolume = resolveMediaVolume(volume);
+    if (resolvedVolume !== undefined && audioRef.current) {
+      audioRef.current.volume = resolvedVolume;
+    }
+  }, [volume, resolvedSrc]);
+
+  if ((!hasExternalLink && !hasInlinePlayer) || !normalizedTitle) return null;
+
+  const content = (
+    <MediaEmbedContent
+      kind="audio"
+      icon={<SpeakerLoudIcon />}
+      provider={provider}
+      title={normalizedTitle}
+      description={description}
+      duration={duration}
+    />
+  );
+
+  if (!hasInlinePlayer) {
+    return (
+      <a
+        className={classNames("willa-prose-audio-embed", className)}
+        href={normalizedHref}
+        target="_blank"
+        rel="noreferrer"
+        aria-label={`Open external audio: ${normalizedTitle}`}
+      >
+        <span className="willa-prose-audio-embed-visual" aria-hidden="true">
+          <span className="willa-prose-audio-embed-fallback">
+            <SpeakerLoudIcon className="willa-prose-audio-embed-kind-icon" />
+            <span className="willa-prose-audio-embed-wave" aria-hidden="true">
+              <span />
+              <span />
+              <span />
+              <span />
+            </span>
+          </span>
+        </span>
+        {content}
+        <ExternalLinkIcon className="willa-prose-audio-embed-external" />
+      </a>
+    );
+  }
+
+  return (
+    <article
+      className={classNames(
+        "willa-prose-audio-embed",
+        "willa-prose-audio-embed--inline",
+        className,
+      )}
+    >
+      {content}
+      {hasExternalLink ? (
+        <a
+          className="willa-prose-audio-embed-external-link"
+          href={normalizedHref}
+          target="_blank"
+          rel="noreferrer"
+          aria-label={`Open external audio: ${normalizedTitle}`}
+          title="Open external audio"
+        >
+          <ExternalLinkIcon className="willa-prose-audio-embed-external" />
+        </a>
+      ) : (
+        <span className="willa-prose-audio-embed-external willa-prose-audio-embed-external--placeholder" />
+      )}
+      <div className="willa-prose-audio-embed-player-shell">
+        <div className="willa-prose-audio-embed-player">
+          <button
+            type="button"
+            className={classNames(
+              "willa-prose-audio-embed-toggle",
+              isPlaying && "willa-prose-audio-embed-toggle--playing",
+              isLoading && "willa-prose-audio-embed-toggle--loading",
+              loadError && "willa-prose-audio-embed-toggle--error",
+            )}
+            onClick={async () => {
+              const audio = audioRef.current;
+              if (!audio || loadError) return;
+
+              if (audio.paused) {
+                setIsLoading(true);
+                try {
+                  await audio.play();
+                } catch {
+                  setIsPlaying(false);
+                  setIsLoading(false);
+                }
+                return;
+              }
+
+              audio.pause();
+            }}
+            aria-label={isPlaying ? "Pause audio" : "Play audio"}
+            disabled={Boolean(loadError)}
+          >
+            {isPlaying ? <PauseIcon /> : <PlayIcon />}
+          </button>
+          <div className="willa-prose-audio-embed-timeline">
+            <div className="willa-prose-audio-embed-scrubber">
+              <div
+                className="willa-prose-audio-embed-progress"
+                style={
+                  {
+                    ["--willa-audio-progress" as string]: `${
+                      progressValue * 100
+                    }%`,
+                  } as CSSProperties
+                }
+              >
+                <input
+                  type="range"
+                  min={0}
+                  max={durationSeconds || 0}
+                  step={0.1}
+                  value={Math.min(currentTime, durationSeconds || currentTime)}
+                  onChange={(event) => {
+                    const nextTime = Number(event.target.value);
+                    setCurrentTime(nextTime);
+                    if (audioRef.current) {
+                      audioRef.current.currentTime = nextTime;
+                    }
+                  }}
+                  aria-label="Seek audio"
+                  disabled={durationSeconds <= 0}
+                />
+              </div>
+              <div className="willa-prose-audio-embed-time">
+                <span>{formatTime(currentTime)}</span>
+                <span>/</span>
+                <span>{durationLabel}</span>
+              </div>
+            </div>
+            {statusLabel ? (
+              <div className="willa-prose-audio-embed-meta">
+                <span className="willa-prose-audio-embed-status">
+                  {statusLabel}
+                </span>
+              </div>
+            ) : null}
+          </div>
+          <audio
+            ref={audioRef}
+            className="willa-prose-audio-embed-native"
+            preload="metadata"
+            src={resolvedSrc}
+            onLoadStart={() => {
+              setIsLoading(true);
+              setLoadError(null);
+            }}
+            onCanPlay={() => {
+              setIsReady(true);
+              setIsLoading(false);
+            }}
+            onLoadedMetadata={(event) => {
+              const nextDuration = event.currentTarget.duration;
+              if (Number.isFinite(nextDuration)) {
+                setDurationSeconds(nextDuration);
+              }
+            }}
+            onTimeUpdate={(event) => {
+              setCurrentTime(event.currentTarget.currentTime);
+            }}
+            onPlay={() => {
+              setIsPlaying(true);
+              setIsLoading(false);
+              setLoadError(null);
+            }}
+            onPause={() => setIsPlaying(false)}
+            onError={() => {
+              setIsPlaying(false);
+              setIsReady(false);
+              setIsLoading(false);
+              setLoadError("audio unavailable");
+            }}
+            onEnded={() => {
+              setIsPlaying(false);
+              setCurrentTime(0);
+            }}
+          />
+        </div>
+      </div>
+    </article>
+  );
+}
+
+AudioEmbed.displayName = "AudioEmbed";