Add Watch Party Option

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

@@ -10,7 +10,7 @@ import { convertSubtitlesToSrtDataurl } from "@/components/player/utils/captions
 import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 import { usePlayerStore } from "@/stores/player/store";
 
-function useDownloadLink() {
+export function useDownloadLink() {
   const source = usePlayerStore((s) => s.source);
   const currentQuality = usePlayerStore((s) => s.currentQuality);
   const url = useMemo(() => {

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

@@ -12,7 +12,10 @@ import { qualityToString } from "@/stores/player/utils/qualities";
 import { useSubtitleStore } from "@/stores/subtitles";
 import { getPrettyLanguageNameFromLocale } from "@/utils/language";
 
+import { useDownloadLink } from "./Downloads";
+
 export function SettingsMenu({ id }: { id: string }) {
+  const downloadUrl = useDownloadLink();
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
   const currentQuality = usePlayerStore((s) => s.currentQuality);
@@ -39,6 +42,14 @@ export function SettingsMenu({ id }: { id: string }) {
 
   const downloadable = source?.type === "file" || source?.type === "hls";
 
+  const handleWatchPartyClick = () => {
+    if (downloadUrl) {
+      const watchPartyUrl = `https://www.watchparty.me/create?video=${encodeURIComponent(
+        downloadUrl,
+      )}`;
+      window.open(watchPartyUrl);
+    }
+  };
   return (
     <Menu.Card>
       <Menu.SectionTitle>
@@ -67,6 +78,14 @@ export function SettingsMenu({ id }: { id: string }) {
         >
           {t("player.menus.settings.downloadItem")}
         </Menu.Link>
+        <Menu.Link
+          clickable
+          onClick={handleWatchPartyClick}
+          rightSide={<Icon className="text-xl" icon={Icons.WATCH_PARTY} />}
+          className={downloadable ? "opacity-100" : "opacity-50"}
+        >
+          {t("Watch Party")}
+        </Menu.Link>
       </Menu.Section>
 
       <Menu.SectionTitle>