fix(ui): restore background after playlist reset

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

@@ -8,9 +8,10 @@ import {
 } from "@nodedc/ui-react";
 
 import {
-  createEnvironmentMediaItem,
+  appendEnvironmentMediaItem,
   inferEnvironmentMediaKind,
   maxEnvironmentMediaItems,
+  removeEnvironmentMediaItem,
   type EnvironmentBackground,
   type EnvironmentMediaItem,
   type EnvironmentSurfaceId,
@@ -135,10 +136,7 @@ export function EnvironmentMediaPlaylistEditor({
         <IconButton
           label="Добавить медиаконтент"
           disabled={disabled || background.items.length >= maxEnvironmentMediaItems}
-          onClick={() => onChange({
-            ...background,
-            items: [...background.items, createEnvironmentMediaItem()],
-          })}
+          onClick={() => onChange(appendEnvironmentMediaItem(background))}
         >
           <Icon name="plus" />
         </IconButton>
@@ -202,14 +200,7 @@ export function EnvironmentMediaPlaylistEditor({
                     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,
-                      });
+                      onChange(removeEnvironmentMediaItem(background, item.id));
                     }}
                   >
                     <Icon name="trash" />

apps/control-station/src/core/environment/environmentSettings.ts

@@ -75,6 +75,36 @@ export function createEnvironmentMediaItem(): EnvironmentMediaItem {
   };
 }
 
+export function appendEnvironmentMediaItem(
+  background: EnvironmentBackground,
+  item: EnvironmentMediaItem = createEnvironmentMediaItem(),
+): EnvironmentBackground {
+  if (
+    background.items.length >= maxEnvironmentMediaItems
+    || background.items.some((candidate) => candidate.id === item.id)
+  ) {
+    return background;
+  }
+  return {
+    ...background,
+    enabled: background.items.length === 0 ? true : background.enabled,
+    items: [...background.items, item],
+  };
+}
+
+export function removeEnvironmentMediaItem(
+  background: EnvironmentBackground,
+  itemId: string,
+): EnvironmentBackground {
+  const items = background.items.filter((item) => item.id !== itemId);
+  if (items.length === background.items.length) return background;
+  return {
+    ...background,
+    enabled: items.length > 0 && background.enabled,
+    items,
+  };
+}
+
 export function inferEnvironmentMediaKind(url: string): EnvironmentMediaKind {
   return /\.(mp4|webm|mov)(?:[?#].*)?$/i.test(url) ? "video" : "image";
 }