5stackgg · lukepolo · Sep 28, 2026 · Sep 27, 2026 · Sep 27, 2026 · Sep 28, 2026
diff --git a/components/settings/PlaycastEdgeRelay.vue b/components/settings/PlaycastEdgeRelay.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { Cloud, RefreshCw, Server } from "lucide-vue-next";
+import { Button } from "~/components/ui/button";
+
+const relayDomain = String(useRuntimeConfig().public.relayDomain || "");
+
+const status = ref<"checking" | "active" | "inactive">("checking");
+
+// Only the edge relay worker answers /health on the relay domain: the panel's
+// own relay has no such path, so an answer means Cloudflare is already sending
+// the relay's traffic through the worker.
+async function check() {
+  status.value = "checking";
+  try {
+    const response = await fetch(`https://${relayDomain}/health`, {
+      cache: "no-store",
+    });
+    const health = response.ok ? await response.json() : null;
+    status.value =
+      health?.worker === "5stack-playcast-relay" ? "active" : "inactive";
+  } catch {
+    status.value = "inactive";
+  }
+}
+
+onMounted(() => {
+  if (relayDomain) {
+    check();
+  } else {
+    status.value = "inactive";
+  }
+});
+</script>
+
+<template>
+  <div class="space-y-4 rounded-md border border-border/60 p-4">
+    <div class="space-y-1">
+      <h4 class="text-sm font-medium">
+        {{ $t("pages.settings.application.streaming.relay_title") }}
+      </h4>
+      <p class="text-xs text-muted-foreground">
+        {{ $t("pages.settings.application.streaming.relay_description") }}
+      </p>
+    </div>
+
+    <div
+      class="flex flex-wrap items-center justify-between gap-3 rounded-md bg-muted/30 px-3 py-2 text-sm"
+    >
+      <div class="flex min-w-0 items-center gap-2">
+        <Cloud
+          v-if="status === 'active'"
+          class="size-4 shrink-0 text-primary"
+        />
+        <Server v-else class="size-4 shrink-0 text-muted-foreground" />
+        <span class="truncate" data-test="relay-status">
+          {{
+            $t(`pages.settings.application.streaming.relay_${status}`, {
+              domain: relayDomain,
+            })
+          }}
+        </span>
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        :loading="status === 'checking'"
+        @click="check"
+      >
+        <RefreshCw class="size-3.5" />
+        {{ $t("pages.settings.application.streaming.relay_check_again") }}
+      </Button>
+    </div>
+
+    <div v-if="status === 'inactive'" class="space-y-3 text-xs">
+      <p class="text-muted-foreground">
+        {{
+          $t("pages.settings.application.streaming.relay_setup_proxied", {
+            domain: relayDomain || "tv.example.com",
+          })
+        }}
+      </p>
+      <p class="text-muted-foreground">
+        {{ $t("pages.settings.application.streaming.relay_setup_deploy") }}
+      </p>
+      <pre
+        class="overflow-x-auto rounded-md bg-muted p-2"
+      ><code>./playcast-relay.sh</code></pre>
+      <p class="text-muted-foreground">
+        {{ $t("pages.settings.application.streaming.relay_setup_fail_open") }}
+      </p>
+      <a
+        href="https://docs.5stack.gg/advanced/playcast-edge-relay"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-block text-primary hover:underline"
+      >
+        {{ $t("pages.settings.application.streaming.relay_setup_guide") }}
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/i18n/locales/ar_SA.json b/i18n/locales/ar_SA.json
@@ -1989,6 +1989,16 @@
           "playcast": "Playcast",
           "playcast_description": "فعّل Playcast بدلًا من استخدام منافذ TV مباشرة. ",
           "playcast_learn_more": "اعرف المزيد",
+          "relay_title": "مرحّل الحافة (Cloudflare)",
+          "relay_description": "قدّم البث لمشاهدي Playcast من حافة شبكة Cloudflare. مع worker مرحّل Playcast من 5stack على نطاق المرحّل لديك، تواصل خوادم اللعب إرسال بثها مباشرة إلى هذا الخادم، ويُخدم المشاهدون من ذاكرة Cloudflare المؤقتة.",
+          "relay_checking": "جارٍ فحص {domain}",
+          "relay_active": "نشط: يُخدم مشاهدو Playcast على {domain} من حافة شبكة Cloudflare",
+          "relay_inactive": "غير نشط: يخدم هذا الخادم مشاهدي Playcast على {domain}",
+          "relay_check_again": "افحص مجدداً",
+          "relay_setup_proxied": "يجب أن يمر {domain} عبر وكيل Cloudflare (السحابة البرتقالية).",
+          "relay_setup_deploy": "من نسخة 5stack-panel لديك، انشره على نطاق المرحّل:",
+          "relay_setup_fail_open": "ثم اضبط وضع الفشل عند حد الطلبات لذلك المسار على Fail open في لوحة تحكم Cloudflare، كي يستمر وصول البث إلى هذا الخادم إذا بلغت الحد اليومي لـ Workers.",
+          "relay_setup_guide": "دليل الإعداد",
           "encoding_section": "الترميز",
           "live_video_codec": "ترميز البث المباشر",
           "live_video_codec_description": "H.264 هو الخيار الافتراضي لأوسع توافق مع المتصفحات والأجهزة، بما في ذلك مسار WebRTC الأقل تأخيرًا في كل المتصفحات. أما H.265 (HEVC) فيقلّل الحجم بنحو 30% عند الجودة نفسها، لكن HEVC عبر WebRTC مدعوم في Safari 17+ فقط — ومشاهدو Chrome وFirefox يرجعون إلى مسار HLS. ويرجع H.265 إلى H.264 تلقائيًا إذا كان GPU لا يدعم NVENC HEVC.",

diff --git a/i18n/locales/da_DK.json b/i18n/locales/da_DK.json
@@ -1989,6 +1989,16 @@
           "playcast": "Playcast",
           "playcast_description": "Brug Playcast i stedet for TV-porte direkte. ",
           "playcast_learn_more": "Læs mere",
+          "relay_title": "Edge-relay (Cloudflare)",
+          "relay_description": "Server Playcast-seere fra Cloudflares edge. Med 5stack-playcast-relay-workeren på dit relay-domæne sender spilservere stadig deres udsendelse direkte til denne server, og seerne betjenes fra Cloudflares cache.",
+          "relay_checking": "Tjekker {domain}",
+          "relay_active": "Aktiv: Playcast-seere på {domain} betjenes fra Cloudflares edge",
+          "relay_inactive": "Ikke aktiv: Playcast-seere på {domain} betjenes af denne server",
+          "relay_check_again": "Tjek igen",
+          "relay_setup_proxied": "{domain} skal gå gennem Cloudflares proxy (orange sky).",
+          "relay_setup_deploy": "Udrul den på relay-domænet fra din kopi af 5stack-panel:",
+          "relay_setup_fail_open": "Sæt derefter rutens fejltilstand ved anmodningsgrænse til Fail open i Cloudflare-dashboardet, så udsendelser fortsat når denne server, hvis Workers' daglige grænse nås.",
+          "relay_setup_guide": "Opsætningsguide",
           "encoding_section": "Encoding",
           "live_video_codec": "Codec til livestream",
           "live_video_codec_description": "H.264 er standard og giver bredest mulig understøttelse i browsere og på enheder, inklusive den WebRTC-sti med lavest latency i alle browsere. H.265 (HEVC) fylder ca. 30 % mindre ved samme kvalitet, men HEVC over WebRTC virker kun i Safari 17+ — seere i Chrome og Firefox falder tilbage til HLS. H.265 falder automatisk tilbage til H.264, hvis GPU'en mangler NVENC HEVC.",

diff --git a/i18n/locales/de_DE.json b/i18n/locales/de_DE.json
@@ -1989,6 +1989,16 @@
           "playcast": "Playcast",
           "playcast_description": "Playcast statt direkter TV-Ports verwenden. ",
           "playcast_learn_more": "Mehr erfahren",
+          "relay_title": "Edge-Relay (Cloudflare)",
+          "relay_description": "Playcast-Zuschauer über das Edge-Netz von Cloudflare bedienen. Mit dem 5stack-Playcast-Relay-Worker auf deiner Relay-Domain senden Gameserver ihre Übertragung weiterhin direkt an diesen Server, und Zuschauer werden aus dem Cache von Cloudflare bedient.",
+          "relay_checking": "Prüfe {domain}",
+          "relay_active": "Aktiv: Playcast-Zuschauer auf {domain} werden über das Edge-Netz von Cloudflare bedient",
+          "relay_inactive": "Nicht aktiv: Playcast-Zuschauer auf {domain} werden von diesem Server bedient",
+          "relay_check_again": "Erneut prüfen",
+          "relay_setup_proxied": "{domain} muss über Cloudflare geleitet werden (orangene Wolke).",
+          "relay_setup_deploy": "Stelle ihn aus deinem 5stack-panel-Checkout auf der Relay-Domain bereit:",
+          "relay_setup_fail_open": "Stelle danach im Cloudflare-Dashboard den Fehlermodus bei Anfragelimit dieser Route auf Fail open, damit Übertragungen diesen Server weiter erreichen, falls das tägliche Workers-Limit erreicht wird.",
+          "relay_setup_guide": "Einrichtungsanleitung",
           "encoding_section": "Encoding",
           "live_video_codec": "Codec für Live-Streams",
           "live_video_codec_description": "H.264 ist der Standard für die breiteste Browser- und Geräte-Kompatibilität, inklusive des WebRTC-Pfads mit der geringsten Latenz in jedem Browser. H.265 (HEVC) ist bei gleicher Qualität rund 30 % kleiner, aber HEVC über WebRTC läuft nur ab Safari 17 — Zuschauer in Chrome und Firefox fallen auf den HLS-Pfad zurück. H.265 fällt automatisch auf H.264 zurück, wenn die GPU kein NVENC HEVC unterstützt.",

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -1989,6 +1989,16 @@
           "playcast": "Playcast",
           "playcast_description": "Enable Playcast over using TV ports directly. ",
           "playcast_learn_more": "Learn more",
+          "relay_title": "Edge relay (Cloudflare)",
+          "relay_description": "Serve Playcast viewers from Cloudflare's edge. With the 5stack playcast relay worker on your relay domain, game servers keep sending their broadcast straight through to this server, and viewers are served from Cloudflare's cache.",
+          "relay_checking": "Checking {domain}",
+          "relay_active": "Active: Playcast viewers on {domain} are served from Cloudflare's edge",
+          "relay_inactive": "Not active: Playcast viewers on {domain} are served by this server",
+          "relay_check_again": "Check again",
+          "relay_setup_proxied": "{domain} must be proxied through Cloudflare (orange cloud).",
+          "relay_setup_deploy": "From your 5stack-panel checkout, deploy it onto the relay domain:",
+          "relay_setup_fail_open": "Then set that route's request limit failure mode to Fail open in the Cloudflare dashboard, so broadcasts keep reaching this server if the Workers daily limit is ever reached.",
+          "relay_setup_guide": "Setup guide",
           "encoding_section": "Encoding",
           "live_video_codec": "Live Stream Codec",
           "live_video_codec_description": "H.264 is the default for the broadest browser and device compatibility, including the lowest-latency WebRTC path on every browser. H.265 (HEVC) is ~30% smaller at matched quality, but HEVC-over-WebRTC is Safari 17+ only — Chrome and Firefox viewers fall back to the HLS path. H.265 falls back to H.264 automatically if the GPU lacks NVENC HEVC.",

diff --git a/i18n/locales/es_ES.json b/i18n/locales/es_ES.json
@@ -1989,6 +1989,16 @@
           "playcast": "Playcast",
           "playcast_description": "Usa Playcast en lugar de los puertos de TV directamente. ",
           "playcast_learn_more": "Más información",
+          "relay_title": "Relé en el borde (Cloudflare)",
+          "relay_description": "Sirve a los espectadores de Playcast desde el borde de Cloudflare. Con el worker de relé de Playcast de 5stack en tu dominio de relé, los servidores de juego siguen enviando su emisión directamente a este servidor y los espectadores se sirven desde la caché de Cloudflare.",
+          "relay_checking": "Comprobando {domain}",
+          "relay_active": "Activo: los espectadores de Playcast en {domain} se sirven desde el borde de Cloudflare",
+          "relay_inactive": "Inactivo: los espectadores de Playcast en {domain} se sirven desde este servidor",
+          "relay_check_again": "Comprobar de nuevo",
+          "relay_setup_proxied": "{domain} debe pasar por el proxy de Cloudflare (nube naranja).",
+          "relay_setup_deploy": "Desde tu copia de 5stack-panel, despliégalo en el dominio de relé:",
+          "relay_setup_fail_open": "Después, en el panel de Cloudflare, pon el modo de fallo por límite de solicitudes de esa ruta en Fail open, para que las emisiones sigan llegando a este servidor si alguna vez se alcanza el límite diario de Workers.",
+          "relay_setup_guide": "Guía de configuración",
           "encoding_section": "Codificación",
           "live_video_codec": "Códec de la retransmisión en directo",
           "live_video_codec_description": "H.264 es el valor por defecto por su máxima compatibilidad con navegadores y dispositivos, incluida la ruta WebRTC de menor latencia en todos los navegadores. H.265 (HEVC) ocupa ~30% menos con la misma calidad, pero HEVC sobre WebRTC solo funciona en Safari 17+: los espectadores de Chrome y Firefox pasan a la ruta HLS. H.265 recurre automáticamente a H.264 si la GPU no admite NVENC HEVC.",

diff --git a/i18n/locales/fr_FR.json b/i18n/locales/fr_FR.json
@@ -1989,6 +1989,16 @@
           "playcast": "Playcast",
           "playcast_description": "Utiliser Playcast plutôt que les ports TV directement. ",
           "playcast_learn_more": "En savoir plus",
+          "relay_title": "Relais en périphérie (Cloudflare)",
+          "relay_description": "Servez les spectateurs Playcast depuis la périphérie de Cloudflare. Avec le worker de relais Playcast de 5stack sur votre domaine de relais, les serveurs de jeu continuent d'envoyer leur diffusion directement à ce serveur, et les spectateurs sont servis depuis le cache de Cloudflare.",
+          "relay_checking": "Vérification de {domain}",
+          "relay_active": "Actif : les spectateurs Playcast sur {domain} sont servis depuis la périphérie de Cloudflare",
+          "relay_inactive": "Inactif : les spectateurs Playcast sur {domain} sont servis par ce serveur",
+          "relay_check_again": "Vérifier à nouveau",
+          "relay_setup_proxied": "{domain} doit passer par le proxy de Cloudflare (nuage orange).",
+          "relay_setup_deploy": "Depuis votre copie de 5stack-panel, déployez-le sur le domaine de relais :",
+          "relay_setup_fail_open": "Ensuite, dans le tableau de bord Cloudflare, réglez le mode d'échec en cas de limite de requêtes de cette route sur Fail open, afin que les diffusions continuent d'atteindre ce serveur si la limite quotidienne de Workers est atteinte.",
+          "relay_setup_guide": "Guide de configuration",
           "encoding_section": "Encodage",
           "live_video_codec": "Codec du stream live",
           "live_video_codec_description": "H.264 est le choix par défaut pour la compatibilité navigateurs et appareils la plus large, y compris le chemin WebRTC à plus faible latence sur tous les navigateurs. H.265 (HEVC) est environ 30 % plus léger à qualité équivalente, mais HEVC via WebRTC n'est disponible que sur Safari 17+ — les spectateurs Chrome et Firefox basculent sur le chemin HLS. H.265 retombe automatiquement sur H.264 si le GPU n'a pas NVENC HEVC.",

diff --git a/i18n/locales/it_IT.json b/i18n/locales/it_IT.json
@@ -1989,6 +1989,16 @@
           "playcast": "Playcast",
           "playcast_description": "Usa Playcast al posto delle porte TV dirette. ",
           "playcast_learn_more": "Scopri di più",
+          "relay_title": "Relay edge (Cloudflare)",
+          "relay_description": "Servi gli spettatori Playcast dall'edge di Cloudflare. Con il worker relay Playcast di 5stack sul tuo dominio di relay, i server di gioco continuano a inviare la trasmissione direttamente a questo server e gli spettatori vengono serviti dalla cache di Cloudflare.",
+          "relay_checking": "Controllo di {domain}",
+          "relay_active": "Attivo: gli spettatori Playcast su {domain} sono serviti dall'edge di Cloudflare",
+          "relay_inactive": "Non attivo: gli spettatori Playcast su {domain} sono serviti da questo server",
+          "relay_check_again": "Controlla di nuovo",
+          "relay_setup_proxied": "{domain} deve passare dal proxy di Cloudflare (nuvola arancione).",
+          "relay_setup_deploy": "Dalla tua copia di 5stack-panel, distribuiscilo sul dominio di relay:",
+          "relay_setup_fail_open": "Poi, nella dashboard di Cloudflare, imposta la modalità di errore per limite di richieste di quella route su Fail open, così le trasmissioni continuano a raggiungere questo server se si raggiunge il limite giornaliero dei Workers.",
+          "relay_setup_guide": "Guida alla configurazione",
           "encoding_section": "Codifica",
           "live_video_codec": "Codec della diretta",
           "live_video_codec_description": "H.264 è il predefinito per la massima compatibilità con browser e dispositivi, incluso il percorso WebRTC a latenza più bassa su ogni browser. H.265 (HEVC) pesa circa il 30% in meno a parità di qualità, ma HEVC su WebRTC funziona solo su Safari 17+: gli spettatori su Chrome e Firefox ricadono sul percorso HLS. H.265 ricade automaticamente su H.264 se la GPU non supporta NVENC HEVC.",

diff --git a/i18n/locales/ja_JP.json b/i18n/locales/ja_JP.json
@@ -1989,6 +1989,16 @@
           "playcast": "Playcast",
           "playcast_description": "TV ポートへの直接接続の代わりに Playcast を使用します。",
           "playcast_learn_more": "詳細",
+          "relay_title": "エッジリレー (Cloudflare)",
+          "relay_description": "Playcast の視聴者を Cloudflare のエッジから配信します。リレードメインに 5stack の playcast リレー Worker を置くと、ゲームサーバーは引き続きこのサーバーへ直接配信を送り、視聴者には Cloudflare のキャッシュから配信されます。",
+          "relay_checking": "{domain} を確認中",
+          "relay_active": "有効: {domain} の Playcast 視聴者は Cloudflare のエッジから配信されています",
+          "relay_inactive": "無効: {domain} の Playcast 視聴者はこのサーバーから配信されています",
+          "relay_check_again": "再確認",
+          "relay_setup_proxied": "{domain} は Cloudflare のプロキシ (オレンジの雲) を経由している必要があります。",
+          "relay_setup_deploy": "5stack-panel のチェックアウトから、リレードメインにデプロイします:",
+          "relay_setup_fail_open": "その後、Cloudflare ダッシュボードでそのルートのリクエスト上限時の動作を Fail open に設定してください。Workers の 1 日の上限に達しても配信がこのサーバーに届き続けます。",
+          "relay_setup_guide": "セットアップガイド",
           "encoding_section": "エンコード",
           "live_video_codec": "ライブ配信のコーデック",
           "live_video_codec_description": "H.264 が既定で、ブラウザやデバイスの互換性が最も広く、すべてのブラウザで最も低遅延な WebRTC 経路を使えます。H.265 (HEVC) は同等画質で約 30% 小さくなりますが、WebRTC 上の HEVC は Safari 17 以降のみ対応で、Chrome と Firefox の視聴者は HLS 経路にフォールバックします。GPU が NVENC HEVC に非対応の場合、H.265 は自動的に H.264 にフォールバックします。",