's'

web-console/components/live-product/LiveYoutubeUnmannedView.tsx

@@ -19,6 +19,8 @@ import {
   defaultPm2NameForChannel,
   loadYoutubeProChannels,
   newChannelId,
+  parseYoutubeProChannelList,
+  pushYoutubeProChannelsRemote,
   saveYoutubeProChannels,
   type YoutubeProChannel,
 } from "@/lib/youtubeProChannels";
@@ -203,6 +205,7 @@ export function LiveYoutubeUnmannedView({
           setChannels((prev) => {
             const next = prev.map((x) => (x.id === activeCh ? { ...x, urlLines: c } : x));
             saveYoutubeProChannels(next);
+            void pushYoutubeProChannelsRemote(fetchJson, next).catch(() => {});
             return next;
           });
         }
@@ -238,6 +241,7 @@ export function LiveYoutubeUnmannedView({
           setChannels((prev) => {
             const next = prev.map((x) => (x.id === activeCh ? { ...x, urlLines: c } : x));
             saveYoutubeProChannels(next);
+            void pushYoutubeProChannelsRemote(fetchJson, next).catch(() => {});
             return next;
           });
         }
@@ -260,35 +264,57 @@ export function LiveYoutubeUnmannedView({
   }, []);
 
   useEffect(() => {
-    const list = loadYoutubeProChannels();
-    const initial =
-      list.length > 0
-        ? list
-        : (() => {
-            const id = newChannelId();
-            return [
-              {
-                id,
-                name: "线路 1",
-                streamKey: "",
-                urlLines: "",
-                pm2Name: defaultPm2NameForChannel(id),
-                notes: "",
-              },
-            ];
-          })();
-    setChannels(initial);
-    if (!list.length) saveYoutubeProChannels(initial);
-  }, []);
+    let cancelled = false;
+    void (async () => {
+      try {
+        const data = await fetchJson<{ channels?: unknown }>("/hub/youtube_pro_channels");
+        const fromServer = parseYoutubeProChannelList(data.channels);
+        if (fromServer.length && !cancelled) {
+          setChannels(fromServer);
+          saveYoutubeProChannels(fromServer);
+          return;
+        }
+      } catch {
+        /* 使用本机缓存 */
+      }
+      if (cancelled) return;
+      const list = loadYoutubeProChannels();
+      const initial =
+        list.length > 0
+          ? list
+          : (() => {
+              const id = newChannelId();
+              return [
+                {
+                  id,
+                  name: "线路 1",
+                  streamKey: "",
+                  urlLines: "",
+                  pm2Name: defaultPm2NameForChannel(id),
+                  notes: "",
+                },
+              ];
+            })();
+      setChannels(initial);
+      if (!list.length) saveYoutubeProChannels(initial);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchJson]);
 
   useEffect(() => {
     if (channels.length && !activeCh) setActiveCh(channels[0].id);
   }, [channels, activeCh]);
 
-  const persistChannels = useCallback((next: YoutubeProChannel[]) => {
-    setChannels(next);
-    saveYoutubeProChannels(next);
-  }, []);
+  const persistChannels = useCallback(
+    (next: YoutubeProChannel[]) => {
+      setChannels(next);
+      saveYoutubeProChannels(next);
+      void pushYoutubeProChannelsRemote(fetchJson, next).catch(() => {});
+    },
+    [fetchJson],
+  );
 
   const active = channels.find((c) => c.id === activeCh) || channels[0];
 
@@ -373,6 +399,7 @@ export function LiveYoutubeUnmannedView({
         setChannels((prev) => {
           const next = prev.map((x) => (x.id === activeCh ? { ...x, urlLines: c } : x));
           saveYoutubeProChannels(next);
+          void pushYoutubeProChannelsRemote(fetchJson, next).catch(() => {});
           return next;
         });
       } catch {