hide if backend is out of date

src/assets/locales/en.json

@@ -940,8 +940,8 @@
         },
         "alone": "Alone",
         "withCount": "With {{count}} others",
-        "isHost": "You are hosting a watch party",
-        "isGuest": "You are a guest in a watch party",
+        "isHost": "Hosting on <0>{{backendName}}</0>",
+        "isGuest": "Watching as a guest on <0>{{backendName}}</0>",
         "hosting": "Hosting",
         "watching": "Watching",
         "syncing": "Syncing...",
@@ -958,6 +958,7 @@
         "join": "Join",
         "cancel": "Cancel",
         "contentMismatch": "Cannot join watch party: The content does not match the host's content.",
-        "episodeMismatch": "Cannot join watch party: You are watching a different episode than the host."
+        "episodeMismatch": "Cannot join watch party: You are watching a different episode than the host.",
+        "validating": "Validating watch party..."
     }
 }

src/components/player/atoms/settings/WatchPartyView.tsx

@@ -1,11 +1,14 @@
 /* eslint-disable no-alert */
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
+import { useAsync } from "react-use";
 
+import { getBackendMeta } from "@/backend/accounts/meta";
 import { Button } from "@/components/buttons/Button";
 import { Icon, Icons } from "@/components/Icon";
 import { Spinner } from "@/components/layout/Spinner";
 import { Menu } from "@/components/player/internals/ContextMenu";
+import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
 import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 import { useWatchPartySync } from "@/hooks/useWatchPartySync";
 import { useWatchPartyStore } from "@/stores/watchParty";
@@ -19,6 +22,17 @@ export function WatchPartyView({ id }: { id: string }) {
   const [joinCode, setJoinCode] = useState("");
   const [showJoinInput, setShowJoinInput] = useState(false);
   const [isJoining, setIsJoining] = useState(false);
+  const [backendName, setBackendName] = useState("");
+  const backendUrl = useBackendUrl();
+
+  const backendMeta = useAsync(async () => {
+    if (!backendUrl) return;
+    return getBackendMeta(backendUrl);
+  }, [backendUrl]);
+
+  const backendSupportsWatchParty = backendMeta?.value?.version
+    ? backendMeta.value.version >= "2.0.1"
+    : false;
 
   // Watch party store access
   const {
@@ -35,6 +49,19 @@ export function WatchPartyView({ id }: { id: string }) {
   // Watch party sync data
   const { roomUsers } = useWatchPartySync();
 
+  // Fetch backend name
+  useEffect(() => {
+    if (backendUrl && enabled) {
+      getBackendMeta(backendUrl)
+        .then((meta) => {
+          setBackendName(meta.name);
+        })
+        .catch(() => {
+          setBackendName("Unknown Server");
+        });
+    }
+  }, [backendUrl, enabled]);
+
   // Listen for validation status events
   useEffect(() => {
     const handleValidation = () => {
@@ -113,7 +140,8 @@ export function WatchPartyView({ id }: { id: string }) {
             {t("player.menus.watchparty.notice")}
           </Menu.Paragraph>
 
-          {enabled ? (
+          {backendSupportsWatchParty &&
+            (enabled ? (
               <div className="space-y-4">
                 {isJoining ? (
                   <div className="text-center py-4">
@@ -126,11 +154,15 @@ export function WatchPartyView({ id }: { id: string }) {
                   <>
                     <div className="flex flex-col gap-2">
                       <div className="text-center">
-                      <span className="text-sm text-type-secondary">
-                        {isHost
-                          ? t("watchParty.isHost")
-                          : t("watchParty.isGuest")}
-                      </span>
+                        <Trans
+                          i18nKey={
+                            isHost ? "watchParty.isHost" : "watchParty.isGuest"
+                          }
+                          values={{ backendName }}
+                          className="text-sm text-type-secondary"
+                        >
+                          <span className="text-type-logo" />
+                        </Trans>
                       </div>
                       <div
                         className="flex items-center justify-center p-3 bg-mediaCard-hoverBackground rounded-lg border border-mediaCard-hoverAccent border-opacity-20 cursor-pointer transition-all duration-300 hover:bg-mediaCard-hoverShadow group"
@@ -160,7 +192,9 @@ export function WatchPartyView({ id }: { id: string }) {
                       <div className="bg-mediaCard-hoverBackground rounded-lg p-3 border border-mediaCard-hoverAccent border-opacity-20">
                         <div className="flex justify-between items-center mb-2">
                           <span className="text-sm font-medium text-white">
-                          {t("watchParty.viewers", { count: roomUsers.length })}
+                            {t("watchParty.viewers", {
+                              count: roomUsers.length,
+                            })}
                           </span>
                         </div>
                         <div className="max-h-32 overflow-y-auto space-y-1">
@@ -277,9 +311,9 @@ export function WatchPartyView({ id }: { id: string }) {
                   </div>
                 )}
               </div>
-          )}
+            ))}
 
-          <Menu.Divider />
+          {backendSupportsWatchParty && <Menu.Divider />}
 
           <Menu.Link
             clickable