From 5be4833b8da535b8036714c51f37665832d5326a Mon Sep 17 00:00:00 2001 From: RyloRiz <91710711+RyloRiz@users.noreply.github.com> Date: Wed, 24 Jan 2024 18:41:45 -0800 Subject: [PATCH 01/65] Created an 'x' button to clear search query --- src/components/form/SearchBar.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index 05e8257d..93b5dbf7 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -57,6 +57,15 @@ export const SearchBarInput = forwardRef( className="w-full flex-1 bg-transparent px-4 py-4 pl-12 text-search-text placeholder-search-placeholder focus:outline-none sm:py-4 sm:pr-2" placeholder={props.placeholder} /> + +
{ + setSearch(""); + }} + className="cursor-pointer absolute bottom-0 right-5 top-0 flex max-h-14 items-center text-search-icon" + > + +
); From ef9792827a2cfa90d67bb8936b4f5fa5fdd27c54 Mon Sep 17 00:00:00 2001 From: RyloRiz <91710711+RyloRiz@users.noreply.github.com> Date: Sat, 27 Jan 2024 15:34:33 -0800 Subject: [PATCH 02/65] Fixed search query updating on clear --- src/components/form/SearchBar.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index 93b5dbf7..bf994c7b 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -1,5 +1,5 @@ import c from "classnames"; -import { forwardRef, useState } from "react"; +import { forwardRef, useRef, useState } from "react"; import { Flare } from "@/components/utils/Flare"; @@ -16,9 +16,20 @@ export interface SearchBarProps { export const SearchBarInput = forwardRef( (props, ref) => { const [focused, setFocused] = useState(false); + const clearButtonRef = useRef(null); function setSearch(value: string) { props.onChange(value, false); + clearButtonRef.current!.hidden = value.length >= 0; + } + + function refocusSearch() { + if (ref && typeof ref !== "function") { + ref.current?.blur(); + setTimeout(() => ref.current?.focus(), 10); + setTimeout(() => ref.current?.blur(), 20); + setTimeout(() => ref.current?.focus(), 30); + } } return ( @@ -59,8 +70,10 @@ export const SearchBarInput = forwardRef( />
{ setSearch(""); + setTimeout(() => refocusSearch(), 100); }} className="cursor-pointer absolute bottom-0 right-5 top-0 flex max-h-14 items-center text-search-icon" > From d8dcdcc09b1aad93c1dd87fbf0a46eb142044c44 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sun, 28 Jan 2024 01:18:45 +0100 Subject: [PATCH 03/65] Swap onboarding cards --- src/pages/onboarding/Onboarding.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx index 38d465c2..e0c896e7 100644 --- a/src/pages/onboarding/Onboarding.tsx +++ b/src/pages/onboarding/Onboarding.tsx @@ -59,14 +59,14 @@ export function OnboardingPage() {
- navigate("/onboarding/proxy")}> + navigate("/onboarding/extension")}> - {t("onboarding.start.options.proxy.action")} + {t("onboarding.start.options.extension.action")}
@@ -74,14 +74,14 @@ export function OnboardingPage() { or
- navigate("/onboarding/extension")}> + navigate("/onboarding/proxy")}> - {t("onboarding.start.options.extension.action")} + {t("onboarding.start.options.proxy.action")}
From c33176ff8b16694c660c8d83cc9c7f6034537f31 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sun, 28 Jan 2024 01:20:11 +0100 Subject: [PATCH 04/65] Un-reverse onboarding cards --- src/pages/onboarding/Onboarding.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx index e0c896e7..8ba0ba19 100644 --- a/src/pages/onboarding/Onboarding.tsx +++ b/src/pages/onboarding/Onboarding.tsx @@ -58,7 +58,7 @@ export function OnboardingPage() { {t("onboarding.start.explainer")} -
+
navigate("/onboarding/extension")}> Date: Sat, 27 Jan 2024 21:32:04 -0800 Subject: [PATCH 05/65] Restyled clear button & visibility --- src/components/form/SearchBar.tsx | 20 +++++++++++++++----- themes/default.ts | 1 + 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index bf994c7b..71834a8a 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -1,5 +1,5 @@ import c from "classnames"; -import { forwardRef, useRef, useState } from "react"; +import { forwardRef, useEffect, useRef, useState } from "react"; import { Flare } from "@/components/utils/Flare"; @@ -20,7 +20,8 @@ export const SearchBarInput = forwardRef( function setSearch(value: string) { props.onChange(value, false); - clearButtonRef.current!.hidden = value.length >= 0; + const opacity = value.length > 0 ? "1" : "0"; + clearButtonRef.current!.style.opacity = opacity; } function refocusSearch() { @@ -32,6 +33,12 @@ export const SearchBarInput = forwardRef( } } + useEffect(() => { + if (ref && typeof ref !== "function") { + setSearch(ref.current?.value || ""); + } + }); + return ( ( ref={clearButtonRef} onClick={() => { setSearch(""); - setTimeout(() => refocusSearch(), 100); + setTimeout(() => refocusSearch(), 10); }} - className="cursor-pointer absolute bottom-0 right-5 top-0 flex max-h-14 items-center text-search-icon" + className="group/clear cursor-pointer absolute p-1 bottom-0 right-2 top-0 flex justify-center my-auto max-h-10 max-w-10 h-full w-full items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full opacity-0 transition duration-100" > - +
diff --git a/themes/default.ts b/themes/default.ts index bd31b3ff..c4495a0e 100644 --- a/themes/default.ts +++ b/themes/default.ts @@ -160,6 +160,7 @@ export const defaultTheme = { // search bar search: { background: tokens.shade.c500, + hoverBackground: tokens.shade.c600, focused: tokens.shade.c400, placeholder: tokens.shade.c100, icon: tokens.shade.c100, From 32c6bf12c78ce4e666f5b5b1d312480ae274bf82 Mon Sep 17 00:00:00 2001 From: RyloRiz <91710711+RyloRiz@users.noreply.github.com> Date: Sat, 27 Jan 2024 21:38:01 -0800 Subject: [PATCH 06/65] Removed clear pointer/action when not visible --- src/components/form/SearchBar.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index 71834a8a..f09684fd 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -15,13 +15,15 @@ export interface SearchBarProps { export const SearchBarInput = forwardRef( (props, ref) => { + const [canClear, setCanClear] = useState(false); const [focused, setFocused] = useState(false); const clearButtonRef = useRef(null); function setSearch(value: string) { props.onChange(value, false); - const opacity = value.length > 0 ? "1" : "0"; - clearButtonRef.current!.style.opacity = opacity; + setCanClear(value.length > 0); + clearButtonRef.current!.style.opacity = canClear ? "1" : "0"; + clearButtonRef.current!.style.cursor = canClear ? "pointer" : "auto"; } function refocusSearch() { @@ -79,8 +81,10 @@ export const SearchBarInput = forwardRef(
{ - setSearch(""); - setTimeout(() => refocusSearch(), 10); + if (canClear) { + setSearch(""); + setTimeout(() => refocusSearch(), 10); + } }} className="group/clear cursor-pointer absolute p-1 bottom-0 right-2 top-0 flex justify-center my-auto max-h-10 max-w-10 h-full w-full items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full opacity-0 transition duration-100" > From 058a3c41c8cc1eae48ee04ccaee792648929dbcf Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sun, 28 Jan 2024 14:07:52 +0100 Subject: [PATCH 07/65] Mobile view for SetupPart --- src/pages/parts/settings/SetupPart.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/parts/settings/SetupPart.tsx b/src/pages/parts/settings/SetupPart.tsx index 16100ca7..963cefeb 100644 --- a/src/pages/parts/settings/SetupPart.tsx +++ b/src/pages/parts/settings/SetupPart.tsx @@ -155,7 +155,7 @@ export function SetupPart() { return ( -
+
-
+
From 6cf870d2468efd64305c143f23a36e0fffc667b7 Mon Sep 17 00:00:00 2001 From: RyloRiz <91710711+RyloRiz@users.noreply.github.com> Date: Mon, 29 Jan 2024 17:58:13 -0800 Subject: [PATCH 08/65] Reviewed changes & simplified clearing process --- src/components/form/SearchBar.tsx | 55 ++++++++++--------------------- src/hooks/useSearchQuery.ts | 6 ++-- themes/list/blue.ts | 1 + themes/list/gray.ts | 1 + themes/list/red.ts | 1 + themes/list/teal.ts | 1 + 6 files changed, 26 insertions(+), 39 deletions(-) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index f09684fd..8a7cfc4a 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -1,5 +1,5 @@ import c from "classnames"; -import { forwardRef, useEffect, useRef, useState } from "react"; +import { forwardRef, useState } from "react"; import { Flare } from "@/components/utils/Flare"; @@ -9,38 +9,18 @@ import { TextInputControl } from "../text-inputs/TextInputControl"; export interface SearchBarProps { placeholder?: string; onChange: (value: string, force: boolean) => void; - onUnFocus: () => void; + onUnFocus: (newSearch?: string) => void; value: string; } export const SearchBarInput = forwardRef( (props, ref) => { - const [canClear, setCanClear] = useState(false); const [focused, setFocused] = useState(false); - const clearButtonRef = useRef(null); function setSearch(value: string) { props.onChange(value, false); - setCanClear(value.length > 0); - clearButtonRef.current!.style.opacity = canClear ? "1" : "0"; - clearButtonRef.current!.style.cursor = canClear ? "pointer" : "auto"; } - function refocusSearch() { - if (ref && typeof ref !== "function") { - ref.current?.blur(); - setTimeout(() => ref.current?.focus(), 10); - setTimeout(() => ref.current?.blur(), 20); - setTimeout(() => ref.current?.focus(), 30); - } - } - - useEffect(() => { - if (ref && typeof ref !== "function") { - setSearch(ref.current?.value || ""); - } - }); - return ( ( placeholder={props.placeholder} /> -
{ - if (canClear) { - setSearch(""); - setTimeout(() => refocusSearch(), 10); - } - }} - className="group/clear cursor-pointer absolute p-1 bottom-0 right-2 top-0 flex justify-center my-auto max-h-10 max-w-10 h-full w-full items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full opacity-0 transition duration-100" - > - -
+ {props.value.length > 0 && ( +
{ + props.onUnFocus(""); + if (ref && typeof ref !== "function") { + ref.current?.focus(); + } + }} + className="cursor-pointer absolute p-1 bottom-0 right-2 top-0 flex justify-center my-auto max-h-10 max-w-10 h-full w-full items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full transition duration-100" + > + +
+ )} ); diff --git a/src/hooks/useSearchQuery.ts b/src/hooks/useSearchQuery.ts index 75cd2a28..23942c06 100644 --- a/src/hooks/useSearchQuery.ts +++ b/src/hooks/useSearchQuery.ts @@ -33,8 +33,10 @@ export function useSearchQuery(): [ ); }; - const onUnFocus = () => { - updateParams(search, true); + const onUnFocus = (newSearch?: string) => { + // eslint-disable-next-line eqeqeq + const updated = newSearch == undefined ? search : newSearch; + updateParams(updated, true); }; return [search, updateParams, onUnFocus]; diff --git a/themes/list/blue.ts b/themes/list/blue.ts index e10592dc..2cb43766 100644 --- a/themes/list/blue.ts +++ b/themes/list/blue.ts @@ -111,6 +111,7 @@ export default createTheme({ search: { background: tokens.shade.c500, + hoverBackground: tokens.shade.c600, focused: tokens.shade.c400, placeholder: tokens.shade.c100, icon: tokens.shade.c100 diff --git a/themes/list/gray.ts b/themes/list/gray.ts index c0c434e8..c6c0144d 100644 --- a/themes/list/gray.ts +++ b/themes/list/gray.ts @@ -111,6 +111,7 @@ export default createTheme({ search: { background: tokens.shade.c500, + hoverBackground: tokens.shade.c600, focused: tokens.shade.c400, placeholder: tokens.shade.c100, icon: tokens.shade.c100 diff --git a/themes/list/red.ts b/themes/list/red.ts index b42b935f..0ec319e8 100644 --- a/themes/list/red.ts +++ b/themes/list/red.ts @@ -111,6 +111,7 @@ export default createTheme({ search: { background: tokens.shade.c500, + hoverBackground: tokens.shade.c600, focused: tokens.shade.c400, placeholder: tokens.shade.c100, icon: tokens.shade.c100 diff --git a/themes/list/teal.ts b/themes/list/teal.ts index 742f4a32..1fb66ac4 100644 --- a/themes/list/teal.ts +++ b/themes/list/teal.ts @@ -111,6 +111,7 @@ export default createTheme({ search: { background: tokens.shade.c500, + hoverBackground: tokens.shade.c600, focused: tokens.shade.c400, placeholder: tokens.shade.c100, icon: tokens.shade.c100 From 5f4cff89755b5ab25af48f1b59c167d82f44f78b Mon Sep 17 00:00:00 2001 From: mrjvs Date: Tue, 30 Jan 2024 20:39:40 +0100 Subject: [PATCH 09/65] Cleanup some styling --- src/components/form/SearchBar.tsx | 7 ++----- src/hooks/useSearchQuery.ts | 4 +--- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index 8a7cfc4a..6ac6128f 100644 --- a/src/components/form/SearchBar.tsx +++ b/src/components/form/SearchBar.tsx @@ -66,12 +66,9 @@ export const SearchBarInput = forwardRef( ref.current?.focus(); } }} - className="cursor-pointer absolute p-1 bottom-0 right-2 top-0 flex justify-center my-auto max-h-10 max-w-10 h-full w-full items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full transition duration-100" + className="cursor-pointer hover:text-white absolute bottom-0 right-2 top-0 flex justify-center my-auto h-10 w-10 items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full transition-[transform,background-color] duration-200" > - +
)} diff --git a/src/hooks/useSearchQuery.ts b/src/hooks/useSearchQuery.ts index 23942c06..425fe4f1 100644 --- a/src/hooks/useSearchQuery.ts +++ b/src/hooks/useSearchQuery.ts @@ -34,9 +34,7 @@ export function useSearchQuery(): [ }; const onUnFocus = (newSearch?: string) => { - // eslint-disable-next-line eqeqeq - const updated = newSearch == undefined ? search : newSearch; - updateParams(updated, true); + updateParams(newSearch ?? search, true); }; return [search, updateParams, onUnFocus]; From 893e9e0ae68384800cbdaf051f2f5ebd45132ad9 Mon Sep 17 00:00:00 2001 From: MemeCornucopia <148788549+MemeCornucopia@users.noreply.github.com> Date: Tue, 30 Jan 2024 17:12:14 -0500 Subject: [PATCH 10/65] Fixed Sorting --- src/backend/accounts/user.ts | 44 +++++++++++++++++++++++------------- 1 file changed, 28 insertions(+), 16 deletions(-) diff --git a/src/backend/accounts/user.ts b/src/backend/accounts/user.ts index aaa1b227..cd701395 100644 --- a/src/backend/accounts/user.ts +++ b/src/backend/accounts/user.ts @@ -87,6 +87,11 @@ export function progressResponsesToEntries(responses: ProgressResponse[]) { } const item = items[v.tmdbId]; + // Update the item only if the new update is more recent than the current one + if (new Date(v.updatedAt).getTime() > item.updatedAt) { + item.updatedAt = new Date(v.updatedAt).getTime(); + } + if (item.type === "movie") { item.progress = { duration: Number(v.duration), @@ -95,22 +100,29 @@ export function progressResponsesToEntries(responses: ProgressResponse[]) { } if (item.type === "show" && v.season.id && v.episode.id) { - item.seasons[v.season.id] = { - id: v.season.id, - number: v.season.number ?? 0, - title: "", - }; - item.episodes[v.episode.id] = { - id: v.episode.id, - number: v.episode.number ?? 0, - title: "", - progress: { - duration: Number(v.duration), - watched: Number(v.watched), - }, - seasonId: v.season.id, - updatedAt: new Date(v.updatedAt).getTime(), - }; + if ( + !item.seasons[v.season.id] || + (item.episodes[v.episode.id] && + new Date(v.updatedAt).getTime() > + item.episodes[v.episode.id].updatedAt) + ) { + item.seasons[v.season.id] = { + id: v.season.id, + number: v.season.number ?? 0, + title: "", + }; + item.episodes[v.episode.id] = { + id: v.episode.id, + number: v.episode.number ?? 0, + title: "", + progress: { + duration: Number(v.duration), + watched: Number(v.watched), + }, + seasonId: v.season.id, + updatedAt: new Date(v.updatedAt).getTime(), + }; + } } }); From 55bb3c4574a4d1761966cecbfc5220aa01453d36 Mon Sep 17 00:00:00 2001 From: MemeCornucopia <148788549+MemeCornucopia@users.noreply.github.com> Date: Tue, 30 Jan 2024 17:33:00 -0500 Subject: [PATCH 11/65] Fixed a mistake I made. --- src/backend/accounts/user.ts | 39 +++++++++++++++--------------------- 1 file changed, 16 insertions(+), 23 deletions(-) diff --git a/src/backend/accounts/user.ts b/src/backend/accounts/user.ts index cd701395..a6208d30 100644 --- a/src/backend/accounts/user.ts +++ b/src/backend/accounts/user.ts @@ -100,29 +100,22 @@ export function progressResponsesToEntries(responses: ProgressResponse[]) { } if (item.type === "show" && v.season.id && v.episode.id) { - if ( - !item.seasons[v.season.id] || - (item.episodes[v.episode.id] && - new Date(v.updatedAt).getTime() > - item.episodes[v.episode.id].updatedAt) - ) { - item.seasons[v.season.id] = { - id: v.season.id, - number: v.season.number ?? 0, - title: "", - }; - item.episodes[v.episode.id] = { - id: v.episode.id, - number: v.episode.number ?? 0, - title: "", - progress: { - duration: Number(v.duration), - watched: Number(v.watched), - }, - seasonId: v.season.id, - updatedAt: new Date(v.updatedAt).getTime(), - }; - } + item.seasons[v.season.id] = { + id: v.season.id, + number: v.season.number ?? 0, + title: "", + }; + item.episodes[v.episode.id] = { + id: v.episode.id, + number: v.episode.number ?? 0, + title: "", + progress: { + duration: Number(v.duration), + watched: Number(v.watched), + }, + seasonId: v.season.id, + updatedAt: new Date(v.updatedAt).getTime(), + }; } }); From 22358112d337dff77623a9976f55ed8a8a32c1a5 Mon Sep 17 00:00:00 2001 From: MemeCornucopia <148788549+MemeCornucopia@users.noreply.github.com> Date: Tue, 30 Jan 2024 18:13:11 -0500 Subject: [PATCH 12/65] Update src/backend/accounts/user.ts Co-authored-by: William Oldham --- src/backend/accounts/user.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/backend/accounts/user.ts b/src/backend/accounts/user.ts index a6208d30..4708dd2b 100644 --- a/src/backend/accounts/user.ts +++ b/src/backend/accounts/user.ts @@ -87,7 +87,9 @@ export function progressResponsesToEntries(responses: ProgressResponse[]) { } const item = items[v.tmdbId]; - // Update the item only if the new update is more recent than the current one + + // Since each watched episode is a single array entry but with the same tmdbId, the root item updatedAt will only have the first episode's timestamp (which is not the newest). + // Here, we are setting it explicitly so the updatedAt always has the highest updatedAt from the episodes. if (new Date(v.updatedAt).getTime() > item.updatedAt) { item.updatedAt = new Date(v.updatedAt).getTime(); } From 8e22d4f96ed021a7de809a83eb0f07178ac3fe53 Mon Sep 17 00:00:00 2001 From: qtchaos <72168435+qtchaos@users.noreply.github.com> Date: Wed, 31 Jan 2024 02:47:31 +0200 Subject: [PATCH 13/65] Attempt to send proxy to backend during onboarding. --- src/pages/onboarding/OnboardingProxy.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/pages/onboarding/OnboardingProxy.tsx b/src/pages/onboarding/OnboardingProxy.tsx index ae76b9aa..e67c0769 100644 --- a/src/pages/onboarding/OnboardingProxy.tsx +++ b/src/pages/onboarding/OnboardingProxy.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useAsyncFn } from "react-use"; +import { updateSettings } from "@/backend/accounts/settings"; import { singularProxiedFetch } from "@/backend/helpers/fetch"; import { Button } from "@/components/buttons/Button"; import { Stepper } from "@/components/layout/Stepper"; @@ -10,6 +11,7 @@ import { AuthInputBox } from "@/components/text-inputs/AuthInputBox"; import { Divider } from "@/components/utils/Divider"; import { ErrorLine } from "@/components/utils/ErrorLine"; import { Heading2, Paragraph } from "@/components/utils/Text"; +import { useBackendUrl } from "@/hooks/auth/useBackendUrl"; import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout"; import { useNavigateOnboarding, @@ -29,6 +31,8 @@ export function OnboardingProxyPage() { const [url, setUrl] = useState(""); const setProxySet = useAuthStore((s) => s.setProxySet); const installLink = conf().ONBOARDING_PROXY_INSTALL_LINK; + const backendUrl = useBackendUrl(); + const account = useAuthStore((s) => s.account); const [{ loading, error }, test] = useAsyncFn(async () => { if (!url.startsWith("http")) @@ -38,6 +42,13 @@ export function OnboardingProxyPage() { if (res.url !== testUrl) throw new Error("onboarding.proxy.input.errorNotProxy"); setProxySet([url]); + + if (account) { + await updateSettings(backendUrl, account, { + proxyUrls: [url], + }); + } + completeAndRedirect(); } catch (e) { throw new Error("onboarding.proxy.input.errorConnection"); From a562cbeb255790e417bbf72c6848da8311a5c748 Mon Sep 17 00:00:00 2001 From: Astrid Date: Wed, 31 Jan 2024 22:22:07 +0100 Subject: [PATCH 14/65] Proper onClick types and give the callback --- src/components/buttons/Button.tsx | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx index 70e2c780..1c1a2b61 100644 --- a/src/components/buttons/Button.tsx +++ b/src/components/buttons/Button.tsx @@ -7,7 +7,9 @@ import { Spinner } from "@/components/layout/Spinner"; interface Props { icon?: Icons; - onClick?: () => void; + onClick?: ( + event: React.MouseEvent, + ) => void; children?: ReactNode; theme?: "white" | "purple" | "secondary" | "danger"; padding?: string; @@ -21,11 +23,19 @@ interface Props { export function Button(props: Props) { const navigate = useNavigate(); const { onClick, href, loading } = props; - const cb = useCallback(() => { - if (loading) return; - if (href) navigate(href); - else onClick?.(); - }, [onClick, href, navigate, loading]); + const cb = useCallback( + ( + event: React.MouseEvent< + HTMLAnchorElement | HTMLButtonElement, + MouseEvent + >, + ) => { + if (loading) return; + if (href && !onClick) navigate(href); + else onClick?.(event); + }, + [onClick, href, navigate, loading], + ); let colorClasses = "bg-white hover:bg-gray-200 text-black"; if (props.theme === "purple") @@ -80,6 +90,7 @@ export function Button(props: Props) { target="_blank" rel="noreferrer" download={props.download} + onClick={cb} > {content} From 71ddbca657374a46c42def879e8ae79c19fb56b5 Mon Sep 17 00:00:00 2001 From: Astrid Date: Wed, 31 Jan 2024 22:22:26 +0100 Subject: [PATCH 15/65] Copy playlist link instead of download playlist --- src/components/player/atoms/settings/Downloads.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/player/atoms/settings/Downloads.tsx b/src/components/player/atoms/settings/Downloads.tsx index 45c97997..5eb7d798 100644 --- a/src/components/player/atoms/settings/Downloads.tsx +++ b/src/components/player/atoms/settings/Downloads.tsx @@ -69,7 +69,17 @@ export function DownloadView({ id }: { id: string }) { -