feat(ui): add environment media playlists

apps/control-station/src/components/EnvironmentBackgroundMedia.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useMemo, useState } from "react";
+
+import type {
+  EnvironmentBackground,
+  EnvironmentMediaItem,
+} from "../core/environment/environmentSettings";
+
+type ReadyEnvironmentMediaItem = EnvironmentMediaItem & {
+  url: string;
+  mediaKind: "image" | "video";
+};
+
+function isReadyMediaItem(
+  item: EnvironmentMediaItem,
+): item is ReadyEnvironmentMediaItem {
+  return Boolean(item.url && item.mediaKind);
+}
+
+export function EnvironmentBackgroundMedia({
+  background,
+}: {
+  background: EnvironmentBackground;
+}) {
+  const items = useMemo(
+    () => background.items.filter(isReadyMediaItem),
+    [background.items],
+  );
+  const playlistIdentity = items.map((item) => `${item.id}:${item.url}`).join("|");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [failedIds, setFailedIds] = useState<Set<string>>(new Set());
+  const playableItems = items.filter((item) => !failedIds.has(item.id));
+  const activeItem = playableItems[activeIndex] ?? playableItems[0] ?? null;
+
+  useEffect(() => {
+    setActiveIndex(0);
+    setFailedIds(new Set());
+  }, [playlistIdentity]);
+
+  useEffect(() => {
+    if (
+      !background.enabled
+      || !activeItem
+      || activeItem.mediaKind !== "image"
+      || playableItems.length < 2
+    ) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      setActiveIndex((current) => (current + 1) % playableItems.length);
+    }, background.imageDurationSeconds * 1_000);
+    return () => window.clearTimeout(timer);
+  }, [
+    activeItem,
+    background.enabled,
+    background.imageDurationSeconds,
+    playableItems.length,
+  ]);
+
+  if (!background.enabled || !activeItem) return null;
+
+  return (
+    <div className="landing-stage__media" aria-hidden="true">
+      {activeItem.mediaKind === "video" ? (
+        <video
+          key={activeItem.url}
+          src={activeItem.url}
+          autoPlay
+          muted
+          loop={playableItems.length === 1}
+          playsInline
+          onEnded={() => setActiveIndex((current) => (
+            (current + 1) % playableItems.length
+          ))}
+          onError={() => {
+            setFailedIds((current) => new Set(current).add(activeItem.id));
+            setActiveIndex(0);
+          }}
+        />
+      ) : (
+        <img
+          key={activeItem.url}
+          src={activeItem.url}
+          alt=""
+          onError={() => {
+            setFailedIds((current) => new Set(current).add(activeItem.id));
+            setActiveIndex(0);
+          }}
+        />
+      )}
+    </div>
+  );
+}

apps/control-station/src/components/EnvironmentMediaPlaylistEditor.tsx

@@ -0,0 +1,257 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Icon,
+  IconButton,
+  MediaSourceField,
+  RangeControl,
+  SortableList,
+} from "@nodedc/ui-react";
+
+import {
+  createEnvironmentMediaItem,
+  inferEnvironmentMediaKind,
+  maxEnvironmentMediaItems,
+  type EnvironmentBackground,
+  type EnvironmentMediaItem,
+  type EnvironmentSurfaceId,
+  type UploadedEnvironmentMedia,
+} from "../core/environment/environmentSettings";
+
+interface EnvironmentMediaPlaylistEditorProps {
+  surfaceId: EnvironmentSurfaceId;
+  background: EnvironmentBackground;
+  disabled: boolean;
+  error: string | null;
+  onChange: (background: EnvironmentBackground) => void;
+  onBusyChange: (busy: boolean) => void;
+  onUpload: (
+    surfaceId: EnvironmentSurfaceId,
+    itemId: string,
+    file: File,
+  ) => Promise<UploadedEnvironmentMedia>;
+}
+
+const acceptedEnvironmentMedia = [
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+  "image/avif",
+  "video/mp4",
+  "video/webm",
+  "video/quicktime",
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".webp",
+  ".avif",
+  ".mp4",
+  ".webm",
+  ".mov",
+].join(",");
+
+function patchItem(
+  background: EnvironmentBackground,
+  itemId: string,
+  patch: Partial<EnvironmentMediaItem>,
+): EnvironmentBackground {
+  return {
+    ...background,
+    items: background.items.map((item) => (
+      item.id === itemId ? { ...item, ...patch } : item
+    )),
+  };
+}
+
+export function EnvironmentMediaPlaylistEditor({
+  surfaceId,
+  background,
+  disabled,
+  error,
+  onChange,
+  onBusyChange,
+  onUpload,
+}: EnvironmentMediaPlaylistEditorProps) {
+  const [uploadingIds, setUploadingIds] = useState<Set<string>>(new Set());
+  const [itemErrors, setItemErrors] = useState<Record<string, string>>({});
+  const backgroundRef = useRef(background);
+  backgroundRef.current = background;
+  const displayedItems = useMemo(
+    () => [...background.items].reverse(),
+    [background.items],
+  );
+
+  useEffect(() => {
+    onBusyChange(uploadingIds.size > 0);
+  }, [onBusyChange, uploadingIds.size]);
+
+  useEffect(() => () => onBusyChange(false), [onBusyChange]);
+
+  const setItemError = (itemId: string, message?: string) => {
+    setItemErrors((current) => {
+      const next = { ...current };
+      if (message) next[itemId] = message;
+      else delete next[itemId];
+      return next;
+    });
+  };
+
+  const uploadFile = async (itemId: string, file?: File) => {
+    if (!file) return;
+    setUploadingIds((current) => new Set(current).add(itemId));
+    setItemError(itemId);
+    try {
+      const uploaded = await onUpload(surfaceId, itemId, file);
+      onChange(patchItem(backgroundRef.current, itemId, {
+        source: "file",
+        url: uploaded.url,
+        mediaKind: uploaded.mediaKind,
+        fileName: uploaded.fileName,
+      }));
+    } catch (reason) {
+      setItemError(
+        itemId,
+        reason instanceof Error
+          ? reason.message
+          : "Не удалось загрузить медиаконтент.",
+      );
+    } finally {
+      setUploadingIds((current) => {
+        const next = new Set(current);
+        next.delete(itemId);
+        return next;
+      });
+    }
+  };
+
+  return (
+    <div className="environment-media-playlist">
+      <div className="environment-media-playlist__head">
+        <div>
+          <span>Видео / картинка</span>
+          <p>MP4, WebM, MOV, PNG, JPEG, GIF, WebP или AVIF · до 256 МБ.</p>
+        </div>
+        <IconButton
+          label="Добавить медиаконтент"
+          disabled={disabled || background.items.length >= maxEnvironmentMediaItems}
+          onClick={() => onChange({
+            ...background,
+            items: [...background.items, createEnvironmentMediaItem()],
+          })}
+        >
+          <Icon name="plus" />
+        </IconButton>
+      </div>
+
+      {displayedItems.length ? (
+        <SortableList
+          items={displayedItems}
+          getId={(item) => item.id}
+          className="environment-media-playlist__items"
+          onReorder={(items) => onChange({
+            ...background,
+            items: [...items].reverse(),
+          })}
+        >
+          {(item, { handle }) => {
+            const playbackIndex = background.items.findIndex(
+              (candidate) => candidate.id === item.id,
+            );
+            return (
+              <div className="environment-media-playlist__item">
+                <MediaSourceField
+                  label={`Медиаконтент ${String(playbackIndex + 1).padStart(2, "0")}`}
+                  kindLabel={item.mediaKind ?? "media"}
+                  source={item.source}
+                  url={item.url ?? ""}
+                  fileName={item.fileName}
+                  uploading={uploadingIds.has(item.id)}
+                  previewSrc={item.url}
+                  previewKind={item.mediaKind}
+                  accept={acceptedEnvironmentMedia}
+                  path={`${surfaceId}.background.items[${playbackIndex}] → server environment media`}
+                  hint="Файл сохраняется в Mission Core data root. URL должен вести прямо на media по HTTP(S)."
+                  error={itemErrors[item.id] ?? (
+                    playbackIndex === background.items.length - 1 ? error : null
+                  )}
+                  onSourceChange={(source) => {
+                    if (source === item.source) return;
+                    setItemError(item.id);
+                    onChange(patchItem(background, item.id, {
+                      source,
+                      url: null,
+                      mediaKind: null,
+                      fileName: null,
+                    }));
+                  }}
+                  onUrlChange={(url) => {
+                    setItemError(item.id);
+                    onChange(patchItem(background, item.id, {
+                      source: "url",
+                      url: url || null,
+                      mediaKind: url ? inferEnvironmentMediaKind(url) : null,
+                      fileName: null,
+                    }));
+                  }}
+                  onFileChange={(file) => void uploadFile(item.id, file)}
+                />
+                <div className="environment-media-playlist__item-actions">
+                  <IconButton
+                    label={`Удалить медиаконтент ${playbackIndex + 1}`}
+                    disabled={disabled || uploadingIds.has(item.id)}
+                    onClick={() => {
+                      setItemError(item.id);
+                      const items = background.items.filter(
+                        (candidate) => candidate.id !== item.id,
+                      );
+                      onChange({
+                        ...background,
+                        enabled: items.length ? background.enabled : false,
+                        items,
+                      });
+                    }}
+                  >
+                    <Icon name="trash" />
+                  </IconButton>
+                  {handle}
+                </div>
+              </div>
+            );
+          }}
+        </SortableList>
+      ) : (
+        <>
+          <p className="environment-media-playlist__empty">
+            Добавьте первый файл или прямую ссылку на медиаконтент.
+          </p>
+          {error ? (
+            <p className="environment-media-playlist__error" role="alert">
+              {error}
+            </p>
+          ) : null}
+        </>
+      )}
+
+      <div className="environment-media-playlist__timing">
+        <RangeControl
+          label="Показывать изображение"
+          value={background.imageDurationSeconds}
+          min={1}
+          max={60}
+          step={1}
+          disabled={disabled}
+          formatValue={(value) => `${value} с`}
+          onChange={(imageDurationSeconds) => onChange({
+            ...background,
+            imageDurationSeconds,
+          })}
+        />
+        <span>
+          Новые элементы появляются сверху. Воспроизведение начинается снизу;
+          перетаскивание меняет порядок.
+        </span>
+      </div>
+    </div>
+  );
+}

apps/control-station/src/components/EnvironmentSettingsWindow.tsx

@@ -2,7 +2,6 @@ import { useEffect, useMemo, useState } from "react";
 import {
   Button,
   FeatureSettingsWindow,
-  MediaSourceField,
   Select,
   SettingsCard,
   Switch,
@@ -14,12 +13,12 @@ import {
 import {
   cloneEnvironmentSettings,
   type EnvironmentBackground,
-  type EnvironmentMediaKind,
   type EnvironmentPage,
   type EnvironmentSettings,
   type EnvironmentSurfaceId,
   type UploadedEnvironmentMedia,
 } from "../core/environment/environmentSettings";
+import { EnvironmentMediaPlaylistEditor } from "./EnvironmentMediaPlaylistEditor";
 import {
   roots,
   workspaces,
@@ -35,14 +34,11 @@ interface EnvironmentSettingsWindowProps {
   onSave: (settings: EnvironmentSettings) => Promise<EnvironmentSettings>;
   onUpload: (
     surfaceId: EnvironmentSurfaceId,
+    itemId: string,
     file: File,
   ) => Promise<UploadedEnvironmentMedia>;
 }
 
-function inferMediaKind(url: string): EnvironmentMediaKind {
-  return /\.(mp4|webm|mov|m4v)(?:[?#].*)?$/i.test(url) ? "video" : "image";
-}
-
 function patchPage(
   draft: EnvironmentSettings,
   surfaceId: EnvironmentSurfaceId,
@@ -108,8 +104,6 @@ export function EnvironmentSettingsWindow({
       description: `Стартовая страница раздела «${draft.pages[root.id].title}»`,
     })),
   ], [draft.pages]);
-  const previewKind = selectedBackground.mediaKind
-    ?? (selectedBackground.url ? inferMediaKind(selectedBackground.url) : null);
   const quickActionWorkspaces = useMemo(
     () => surfaceId === "home"
       ? workspaces.filter((workspace) => !workspace.internalOnly)
@@ -138,28 +132,6 @@ export function EnvironmentSettingsWindow({
     setDraft((current) => patchPage(current, surfaceId, patch));
   };
 
-  const uploadFile = async (file?: File) => {
-    if (!file) return;
-    setUploading(true);
-    setLocalError(null);
-    try {
-      const uploaded = await onUpload(surfaceId, file);
-      setDraft((current) => patchBackground(current, surfaceId, {
-        enabled: true,
-        source: "file",
-        url: uploaded.url,
-        mediaKind: uploaded.mediaKind,
-        fileName: uploaded.fileName,
-      }));
-    } catch (reason) {
-      setLocalError(reason instanceof Error
-        ? reason.message
-        : "Не удалось загрузить фон окружения.");
-    } finally {
-      setUploading(false);
-    }
-  };
-
   const save = async () => {
     const invalid = Object.entries(draft.pages).find(([, page]) => (
       !page.headerLabel.trim()
@@ -178,6 +150,26 @@ export function EnvironmentSettingsWindow({
       setLocalError("Быстрые кнопки должны вести на разные рабочие поверхности.");
       return;
     }
+    const invalidMedia = Object.entries(draft.pages).find(([, page]) => (
+      (page.background.enabled && !page.background.items.length)
+      || page.background.items.some((item) => {
+        if (!item.url || !item.mediaKind) return true;
+        if (item.source !== "url") return false;
+        try {
+          const parsed = new URL(item.url);
+          return !["http:", "https:"].includes(parsed.protocol);
+        } catch {
+          return true;
+        }
+      })
+    ));
+    if (invalidMedia) {
+      setSurfaceId(invalidMedia[0] as EnvironmentSurfaceId);
+      setLocalError(
+        "Каждый элемент фона должен содержать загруженный файл или прямой HTTP(S) URL.",
+      );
+      return;
+    }
     setLocalError(null);
     try {
       await onSave({
@@ -253,8 +245,8 @@ export function EnvironmentSettingsWindow({
               checked={selectedBackground.enabled}
               label="Показывать фон"
               onChange={(enabled) => {
-                if (enabled && !selectedBackground.url) {
-                  setLocalError("Сначала загрузите файл или укажите URL.");
+                if (enabled && !selectedBackground.items.length) {
+                  setLocalError("Сначала добавьте медиаконтент.");
                   return;
                 }
                 setLocalError(null);
@@ -345,29 +337,18 @@ export function EnvironmentSettingsWindow({
               </div>
             </div>
 
-            <MediaSourceField
-              label="Видео / картинка"
-              kindLabel={previewKind ?? "media"}
-              source={selectedBackground.source}
-              url={selectedBackground.url ?? ""}
-              fileName={selectedBackground.fileName}
-              uploading={uploading}
-              previewSrc={selectedBackground.url}
-              previewKind={previewKind}
-              accept="image/png,image/jpeg,image/gif,image/webp,image/avif,video/mp4,video/webm,video/quicktime,.png,.jpg,.jpeg,.gif,.webp,.avif,.mp4,.webm,.mov"
-              path={`${surfaceId}.background → server environment media`}
-              hint="Файл сохраняется в Mission Core data root. URL должен быть доступен браузеру по HTTP(S)."
+            <EnvironmentMediaPlaylistEditor
+              surfaceId={surfaceId}
+              background={selectedBackground}
+              disabled={busy}
               error={localError ?? error}
-              onSourceChange={(source) => setDraft((current) =>
-                patchBackground(current, surfaceId, { source }))}
-              onUrlChange={(url) => setDraft((current) =>
-                patchBackground(current, surfaceId, {
-                  source: "url",
-                  url: url || null,
-                  mediaKind: url ? inferMediaKind(url) : null,
-                  fileName: null,
-                }))}
-              onFileChange={uploadFile}
+              onBusyChange={setUploading}
+              onChange={(background) => {
+                setLocalError(null);
+                setDraft((current) =>
+                  patchBackground(current, surfaceId, background));
+              }}
+              onUpload={onUpload}
             />
           </div>
         </SettingsCard>

apps/control-station/src/components/LandingStage.tsx

@@ -4,6 +4,7 @@ import type { BackendStatus, RuntimePhase } from "../core/runtime/contracts";
 import type { EnvironmentPage } from "../core/environment/environmentSettings";
 import type { RootDefinition, WorkspaceDefinition } from "../productModel";
 import { backendLabel, backendTone, phaseLabel, phaseTone } from "../presentation";
+import { EnvironmentBackgroundMedia } from "./EnvironmentBackgroundMedia";
 
 export interface LandingStageProps {
   root: RootDefinition | null;
@@ -25,28 +26,16 @@ export function LandingStage({
   onOpenWorkspace,
 }: LandingStageProps) {
   const { background } = page;
+  const hasMedia = background.enabled && background.items.some(
+    (item) => item.url && item.mediaKind,
+  );
   return (
     <section
       className="landing-stage"
       data-root={root?.id ?? "home"}
-      data-has-media={background.enabled && background.url ? "true" : undefined}
+      data-has-media={hasMedia ? "true" : undefined}
     >
-      {background.enabled && background.url ? (
-        <div className="landing-stage__media" aria-hidden="true">
-          {background.mediaKind === "video" ? (
-            <video
-              key={background.url}
-              src={background.url}
-              autoPlay
-              muted
-              loop
-              playsInline
-            />
-          ) : (
-            <img src={background.url} alt="" />
-          )}
-        </div>
-      ) : null}
+      <EnvironmentBackgroundMedia background={background} />
       <div className="landing-stage__shade" aria-hidden="true" />
       <div className="landing-stage__copy">
         <span className="section-eyebrow">{page.eyebrow}</span>