From 497ed64a09390155bc812d161c900287d04f664e Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Sat, 17 May 2025 21:41:31 -0600
Subject: [PATCH] hide if backend is out of date

---
 src/assets/locales/en.json                    |   7 +-
 .../player/atoms/settings/WatchPartyView.tsx  | 340 ++++++++++--------
 2 files changed, 191 insertions(+), 156 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index a3becdcc..7cea4bf7 100644
--- a/src/assets/locales/en.json
+++ b/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..."
     }
 }
diff --git a/src/components/player/atoms/settings/WatchPartyView.tsx b/src/components/player/atoms/settings/WatchPartyView.tsx
index d4c67f99..891dfb24 100644
--- a/src/components/player/atoms/settings/WatchPartyView.tsx
+++ b/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,173 +140,180 @@ export function WatchPartyView({ id }: { id: string }) {
             {t("player.menus.watchparty.notice")}
           </Menu.Paragraph>
 
-          {enabled ? (
-            <div className="space-y-4">
-              {isJoining ? (
-                <div className="text-center py-4">
-                  <Spinner />
-                  <p className="text-sm text-type-secondary">
-                    {t("watchParty.validating")}
-                  </p>
-                </div>
-              ) : (
-                <>
-                  <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>
-                    </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"
-                      onClick={handleCopyCode}
-                      title={t("watchParty.copyCode")}
-                    >
-                      <input
-                        type="text"
-                        readOnly
-                        value={roomCode || ""}
-                        className="bg-transparent border-none text-center text-2xl font-mono tracking-widest w-full outline-none cursor-pointer text-type-logo"
-                        onClick={(e) => {
-                          if (e.target instanceof HTMLInputElement) {
-                            e.target.select();
-                          }
-                        }}
-                      />
-                    </div>
-                    <p className="text-xs text-center text-type-secondary">
-                      {isHost
-                        ? t("watchParty.shareCode")
-                        : t("watchParty.connectedAsGuest")}
+          {backendSupportsWatchParty &&
+            (enabled ? (
+              <div className="space-y-4">
+                {isJoining ? (
+                  <div className="text-center py-4">
+                    <Spinner />
+                    <p className="text-sm text-type-secondary">
+                      {t("watchParty.validating")}
                     </p>
                   </div>
-
-                  {roomUsers.length > 1 && (
-                    <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 })}
-                        </span>
+                ) : (
+                  <>
+                    <div className="flex flex-col gap-2">
+                      <div className="text-center">
+                        <Trans
+                          i18nKey={
+                            isHost ? "watchParty.isHost" : "watchParty.isGuest"
+                          }
+                          values={{ backendName }}
+                          className="text-sm text-type-secondary"
+                        >
+                          <span className="text-type-logo" />
+                        </Trans>
                       </div>
-                      <div className="max-h-32 overflow-y-auto space-y-1">
-                        {roomUsers.map((user) => (
-                          <div
-                            key={user.userId}
-                            className="flex items-center justify-between text-xs py-1"
-                          >
-                            <span className="flex items-center gap-1">
-                              <Icon
-                                icon={
-                                  user.isHost ? Icons.RISING_STAR : Icons.USER
-                                }
-                                className={`w-3 h-3 ${user.isHost ? "text-onboarding-best" : "text-type-secondary"}`}
-                              />
-                              <span
-                                className={
-                                  user.isHost
-                                    ? "text-onboarding-best"
-                                    : "text-type-secondary"
-                                }
-                              >
-                                {user.userId.substring(0, 8)}...
-                              </span>
-                            </span>
-                            <span className="text-type-secondary">
-                              {user.player.duration > 0
-                                ? `${Math.floor((user.player.time / user.player.duration) * 100)}%`
-                                : `${Math.floor(user.player.time)}s`}
-                            </span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-
-                  <div className="flex flex-col space-y-4">
-                    <div className="flex items-center justify-between bg-mediaCard-hoverBackground rounded-lg p-3 border border-mediaCard-hoverAccent border-opacity-20">
-                      <span className="text-white">
-                        {t("watchParty.showStatusOverlay")}
-                      </span>
-                      <label className="relative inline-flex items-center cursor-pointer">
+                      <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"
+                        onClick={handleCopyCode}
+                        title={t("watchParty.copyCode")}
+                      >
                         <input
-                          type="checkbox"
-                          className="sr-only peer"
-                          checked={showStatusOverlay}
-                          onChange={toggleStatusOverlay}
+                          type="text"
+                          readOnly
+                          value={roomCode || ""}
+                          className="bg-transparent border-none text-center text-2xl font-mono tracking-widest w-full outline-none cursor-pointer text-type-logo"
+                          onClick={(e) => {
+                            if (e.target instanceof HTMLInputElement) {
+                              e.target.select();
+                            }
+                          }}
                         />
-                        <div className="w-9 h-5 bg-mediaCard-hoverBackground rounded-full peer peer-checked:bg-buttons-purple peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-mediaCard-hoverAccent after:border after:rounded-full after:h-4 after:w-4 after:transition-all" />
-                      </label>
+                      </div>
+                      <p className="text-xs text-center text-type-secondary">
+                        {isHost
+                          ? t("watchParty.shareCode")
+                          : t("watchParty.connectedAsGuest")}
+                      </p>
                     </div>
 
-                    <Button
-                      className="w-full"
-                      theme="danger"
-                      onClick={handleDisableParty}
-                    >
-                      {t("watchParty.leaveWatchParty")}
-                    </Button>
+                    {roomUsers.length > 1 && (
+                      <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,
+                            })}
+                          </span>
+                        </div>
+                        <div className="max-h-32 overflow-y-auto space-y-1">
+                          {roomUsers.map((user) => (
+                            <div
+                              key={user.userId}
+                              className="flex items-center justify-between text-xs py-1"
+                            >
+                              <span className="flex items-center gap-1">
+                                <Icon
+                                  icon={
+                                    user.isHost ? Icons.RISING_STAR : Icons.USER
+                                  }
+                                  className={`w-3 h-3 ${user.isHost ? "text-onboarding-best" : "text-type-secondary"}`}
+                                />
+                                <span
+                                  className={
+                                    user.isHost
+                                      ? "text-onboarding-best"
+                                      : "text-type-secondary"
+                                  }
+                                >
+                                  {user.userId.substring(0, 8)}...
+                                </span>
+                              </span>
+                              <span className="text-type-secondary">
+                                {user.player.duration > 0
+                                  ? `${Math.floor((user.player.time / user.player.duration) * 100)}%`
+                                  : `${Math.floor(user.player.time)}s`}
+                              </span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    <div className="flex flex-col space-y-4">
+                      <div className="flex items-center justify-between bg-mediaCard-hoverBackground rounded-lg p-3 border border-mediaCard-hoverAccent border-opacity-20">
+                        <span className="text-white">
+                          {t("watchParty.showStatusOverlay")}
+                        </span>
+                        <label className="relative inline-flex items-center cursor-pointer">
+                          <input
+                            type="checkbox"
+                            className="sr-only peer"
+                            checked={showStatusOverlay}
+                            onChange={toggleStatusOverlay}
+                          />
+                          <div className="w-9 h-5 bg-mediaCard-hoverBackground rounded-full peer peer-checked:bg-buttons-purple peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-mediaCard-hoverAccent after:border after:rounded-full after:h-4 after:w-4 after:transition-all" />
+                        </label>
+                      </div>
+
+                      <Button
+                        className="w-full"
+                        theme="danger"
+                        onClick={handleDisableParty}
+                      >
+                        {t("watchParty.leaveWatchParty")}
+                      </Button>
+                    </div>
+                  </>
+                )}
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {showJoinInput ? (
+                  <div className="space-y-2">
+                    <input
+                      type="text"
+                      maxLength={4}
+                      className="w-full p-2 text-center text-2xl tracking-widest bg-mediaCard-hoverBackground border border-mediaCard-hoverAccent border-opacity-20 rounded-lg text-type-logo"
+                      placeholder="0000"
+                      value={joinCode}
+                      onChange={(e) =>
+                        setJoinCode(
+                          e.target.value.replace(/[^0-9]/g, "").slice(0, 4),
+                        )
+                      }
+                    />
+                    <div className="flex space-x-2">
+                      <Button
+                        className="w-full"
+                        theme="secondary"
+                        onClick={() => setShowJoinInput(false)}
+                      >
+                        {t("watchParty.cancel")}
+                      </Button>
+                      <Button
+                        className="w-full"
+                        theme="purple"
+                        onClick={handleJoinParty}
+                        disabled={joinCode.length !== 4}
+                      >
+                        {t("watchParty.join")}
+                      </Button>
+                    </div>
                   </div>
-                </>
-              )}
-            </div>
-          ) : (
-            <div className="space-y-4">
-              {showJoinInput ? (
-                <div className="space-y-2">
-                  <input
-                    type="text"
-                    maxLength={4}
-                    className="w-full p-2 text-center text-2xl tracking-widest bg-mediaCard-hoverBackground border border-mediaCard-hoverAccent border-opacity-20 rounded-lg text-type-logo"
-                    placeholder="0000"
-                    value={joinCode}
-                    onChange={(e) =>
-                      setJoinCode(
-                        e.target.value.replace(/[^0-9]/g, "").slice(0, 4),
-                      )
-                    }
-                  />
-                  <div className="flex space-x-2">
-                    <Button
-                      className="w-full"
-                      theme="secondary"
-                      onClick={() => setShowJoinInput(false)}
-                    >
-                      {t("watchParty.cancel")}
-                    </Button>
+                ) : (
+                  <div className="space-y-4">
                     <Button
                       className="w-full"
                       theme="purple"
-                      onClick={handleJoinParty}
-                      disabled={joinCode.length !== 4}
+                      onClick={handleHostParty}
                     >
-                      {t("watchParty.join")}
+                      {t("watchParty.hostParty")}
+                    </Button>
+                    <Button
+                      className="w-full"
+                      theme="secondary"
+                      onClick={() => setShowJoinInput(true)}
+                    >
+                      {t("watchParty.joinParty")}
                     </Button>
                   </div>
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  <Button
-                    className="w-full"
-                    theme="purple"
-                    onClick={handleHostParty}
-                  >
-                    {t("watchParty.hostParty")}
-                  </Button>
-                  <Button
-                    className="w-full"
-                    theme="secondary"
-                    onClick={() => setShowJoinInput(true)}
-                  >
-                    {t("watchParty.joinParty")}
-                  </Button>
-                </div>
-              )}
-            </div>
-          )}
+                )}
+              </div>
+            ))}
 
-          <Menu.Divider />
+          {backendSupportsWatchParty && <Menu.Divider />}
 
           <Menu.Link
             clickable