[web] Make the cast link clickable (#1286)

Tested locally.
This commit is contained in:
Manav Rathi 2024-04-02 16:53:03 +05:30 committed by GitHub
commit 8dd7c100af
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 4 deletions

View file

@ -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",

View file

@ -10,9 +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 { useEffect, useState } from "react";
import { Trans } from "react-i18next";
import { Collection } from "types/collection";
import { v4 as uuidv4 } from "uuid";
@ -220,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}

View file

@ -2,7 +2,15 @@ import { ButtonProps } from "@mui/material";
export interface DialogBoxAttributesV2 {
icon?: React.ReactNode;
title?: string;
/**
* The dialog's title
*
* Usually this will be a string, but it can be any {@link ReactNode}. Note
* that it always gets wrapped in a Typography element to set the font
* style, so if your ReactNode wants to do its own thing, it'll need to
* reset or override these customizations.
*/
title?: React.ReactNode;
staticBackdrop?: boolean;
nonClosable?: boolean;
content?: any;