From 2e7dcc6bc28a883a7b5b7a51fe1111c526fc8e18 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Tue, 2 Apr 2024 15:02:39 +0530
Subject: [PATCH] Make the cast link clickable

---
 .../public/locales/en-US/translation.json     |  2 +-
 .../CollectionOptions/AlbumCastDialog.tsx     | 21 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/web/apps/photos/public/locales/en-US/translation.json b/web/apps/photos/public/locales/en-US/translation.json
index b06336bf52..c0e5cd7115 100644
--- a/web/apps/photos/public/locales/en-US/translation.json
+++ b/web/apps/photos/public/locales/en-US/translation.json
@@ -631,7 +631,7 @@
     "PAIR_WITH_PIN": "Pair with PIN",
     "CHOOSE_DEVICE_FROM_BROWSER": "Choose a cast-compatible device from the browser popup.",
     "PAIR_WITH_PIN_WORKS_FOR_ANY_LARGE_SCREEN_DEVICE": "Pair with PIN works for any large screen device you want to play your album on.",
-    "VISIT_CAST_ENTE_IO": "Visit cast.ente.io on the device you want to pair.",
+    "VISIT_CAST_ENTE_IO": "Visit <a>{{url}}</a> on the device you want to pair.",
     "CAST_AUTO_PAIR_FAILED": "Chromecast Auto Pair failed. Please try again.",
     "CACHE_DIRECTORY": "Cache folder",
     "FREEHAND": "Freehand",
diff --git a/web/apps/photos/src/components/Collections/CollectionOptions/AlbumCastDialog.tsx b/web/apps/photos/src/components/Collections/CollectionOptions/AlbumCastDialog.tsx
index b6c93d255d..894d2a1949 100644
--- a/web/apps/photos/src/components/Collections/CollectionOptions/AlbumCastDialog.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionOptions/AlbumCastDialog.tsx
@@ -10,10 +10,10 @@ import { loadSender } from "@ente/shared/hooks/useCastSender";
 import { addLogLine } from "@ente/shared/logging";
 import castGateway from "@ente/shared/network/cast";
 import { logError } from "@ente/shared/sentry";
-import { Typography } from "@mui/material";
+import { Link, Typography } from "@mui/material";
 import { t } from "i18next";
-import { Trans } from "react-i18next";
 import { useEffect, useState } from "react";
+import { Trans } from "react-i18next";
 import { Collection } from "types/collection";
 import { v4 as uuidv4 } from "uuid";
 
@@ -154,7 +154,7 @@ export default function AlbumCastDialog(props: Props) {
             open={props.show}
             onClose={props.onHide}
             attributes={{
-                title: <Trans i18nKey="CAST_ALBUM_TO_TV"/>,
+                title: t("CAST_ALBUM_TO_TV"),
             }}
         >
             {view === "choose" && (
@@ -221,7 +221,20 @@ export default function AlbumCastDialog(props: Props) {
             )}
             {view === "pin" && (
                 <>
-                    <Typography>{t("VISIT_CAST_ENTE_IO")}</Typography>
+                    <Typography>
+                        <Trans
+                            i18nKey="VISIT_CAST_ENTE_IO"
+                            components={{
+                                a: (
+                                    <Link
+                                        target="_blank"
+                                        href="https://cast.ente.io"
+                                    />
+                                ),
+                            }}
+                            values={{ url: "cast.ente.io" }}
+                        />
+                    </Typography>
                     <Typography>{t("ENTER_CAST_PIN_CODE")}</Typography>
                     <SingleInputForm
                         callback={onSubmit}