diff options
Diffstat (limited to 'web/source/settings')
11 files changed, 196 insertions, 55 deletions
diff --git a/web/source/settings/components/blurhash.tsx b/web/source/settings/components/blurhash.tsx new file mode 100644 index 000000000..25d973d03 --- /dev/null +++ b/web/source/settings/components/blurhash.tsx @@ -0,0 +1,75 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. +*/ + +import React, { useEffect, useRef } from "react"; +import { MediaAttachment } from "../lib/types/status"; +import { decode } from "blurhash"; + +export default function BlurhashCanvas({ media }: { media: MediaAttachment }) { + const hash = media.blurhash; + const thumbHeight = media.meta.small.height; + const thumbWidth = media.meta.small.width; + const thumbAspect = media.meta.small.aspect; + + /* + It's very expensive to draw big canvases + with blurhashes, so use tiny ones, keeping + aspect ratio of the original thumbnail. + */ + var useWidth = 32; + var useHeight = 32; + switch (true) { + case thumbWidth > thumbHeight: + useHeight = Math.round(useWidth / thumbAspect); + break; + case thumbHeight > thumbWidth: + useWidth = Math.round(useHeight * thumbAspect); + break; + } + + const pixels = decode( + hash, + useWidth, + useHeight, + ); + + const canvasRef = useRef<HTMLCanvasElement>(null); + + useEffect(() => { + const ctx = canvasRef.current?.getContext("2d"); + if (!ctx) { + return; + } + + const imageData = ctx.createImageData( + useWidth, + useHeight, + ); + imageData.data.set(pixels); + ctx.putImageData(imageData, 0, 0); + }, [pixels, useHeight, useWidth]); + + return ( + <canvas + width={useWidth} + height={useHeight} + ref={canvasRef} + ></canvas> + ); +} diff --git a/web/source/settings/components/form/inputs.tsx b/web/source/settings/components/form/inputs.tsx index c26b88f6a..1495e18f7 100644 --- a/web/source/settings/components/form/inputs.tsx +++ b/web/source/settings/components/form/inputs.tsx @@ -122,7 +122,8 @@ export function FileInput({ label, field, ...props }: FileInputProps) { const ref = useRef<HTMLInputElement>(null); const { onChange, infoComponent } = field; const id = nanoid(); - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); ref.current?.click(); }; @@ -133,7 +134,12 @@ export function FileInput({ label, field, ...props }: FileInputProps) { htmlFor={id} tabIndex={0} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="button" > <div className="label-label"> diff --git a/web/source/settings/components/status.tsx b/web/source/settings/components/status.tsx index 04c5933d5..a5b85f214 100644 --- a/web/source/settings/components/status.tsx +++ b/web/source/settings/components/status.tsx @@ -17,10 +17,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ -import React, { useRef } from "react"; +import React, { useState } from "react"; import { useVerifyCredentialsQuery } from "../lib/query/login"; import { MediaAttachment, Status as StatusType } from "../lib/types/status"; import sanitize from "sanitize-html"; +import BlurhashCanvas from "./blurhash"; export function FakeStatus({ children }) { const { data: account = { @@ -122,26 +123,15 @@ function StatusBody({ status }: { status: StatusType }) { content = sanitize(status.content); } - const detailsRef = useRef<HTMLDetailsElement>(null); - const detailsOnClick = () => { - detailsRef.current?.click(); - }; - - const summaryRef = useRef<HTMLElement>(null); - const summaryOnClick = () => { - summaryRef.current?.click(); - }; + const [ detailsOpen, setDetailsOpen ] = useState(false); return ( <div className="status-body"> <details className="text-spoiler" - ref={detailsRef} + open={detailsOpen} > - <summary - tabIndex={-1} - ref={summaryRef} - > + <summary tabIndex={-1}> <div className="spoiler-content" lang={status.language} @@ -155,11 +145,19 @@ function StatusBody({ status }: { status: StatusType }) { className="button" role="button" tabIndex={0} - aria-label="Toggle content visibility" - onClick={detailsOnClick} - onKeyDown={e => e.key === "Enter" && summaryOnClick()} + aria-label={detailsOpen ? "Hide content" : "Show content"} + onClick={(e) => { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + } + }} > - Toggle content visibility + {detailsOpen ? "Hide content" : "Show content"} </span> </summary> <div @@ -201,27 +199,29 @@ function StatusMedia({ status }: { status: StatusType }) { } function StatusMediaEntry({ media }: { media: MediaAttachment }) { - const detailsRef = useRef<HTMLDetailsElement>(null); - const detailsOnClick = () => { - detailsRef.current?.click(); - }; - - const summaryRef = useRef<HTMLElement>(null); - const summaryOnClick = () => { - summaryRef.current?.click(); - }; - + const [ detailsOpen, setDetailsOpen ] = useState(false); return ( <div className="media-wrapper"> - <details className="image-spoiler media-spoiler"> - <summary tabIndex={-1} ref={summaryRef}> + <details + className="image-spoiler media-spoiler" + open={detailsOpen} + > + <summary tabIndex={-1}> <div className="show sensitive button" role="button" - tabIndex={0} + tabIndex={-1} aria-hidden="true" - onClick={detailsOnClick} - onKeyDown={e => e.key === "Enter" && summaryOnClick()} + onClick={(e) => { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + } + }} > Show media </div> @@ -229,15 +229,27 @@ function StatusMediaEntry({ media }: { media: MediaAttachment }) { className="eye button" role="button" tabIndex={0} - aria-label="Toggle show media" - onClick={detailsOnClick} - onKeyDown={e => e.key === "Enter" && summaryOnClick()} + aria-label={detailsOpen ? "Hide media" : "Show media"} + onClick={(e) => { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + } + }} > <i className="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i> <i className="show fa fa-fw fa-eye" aria-hidden="true"></i> </span> + <div className="blurhash-container"> + <BlurhashCanvas media={media} /> + </div> </summary> <a + className="photoswipe-slide" href={media.url} target="_blank" > diff --git a/web/source/settings/views/admin/http-header-permissions/overview.tsx b/web/source/settings/views/admin/http-header-permissions/overview.tsx index 0b708aa8c..3509e6617 100644 --- a/web/source/settings/views/admin/http-header-permissions/overview.tsx +++ b/web/source/settings/views/admin/http-header-permissions/overview.tsx @@ -65,7 +65,8 @@ export default function HeaderPermsOverview() { } = useGetHeaderAllowsQuery(NoArg, { skip: permType !== "allow" }); const itemToEntry = (perm: HeaderPermission) => { - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); // When clicking on a header perm, // go to the detail view for perm. setLocation(`/${permType}s/${perm.id}`, { @@ -81,7 +82,12 @@ export default function HeaderPermsOverview() { key={perm.id} className="entry pseudolink" onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="link" tabIndex={0} > diff --git a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx index 36bc7ee01..baa3e7a5b 100644 --- a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx +++ b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx @@ -211,7 +211,8 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) { const title = `${permTypeUpper} ${domain}`; - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); // When clicking on a draft, direct // to the detail view for that draft. setLocation(linkTo, { @@ -228,7 +229,12 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) { aria-label={title} title={title} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="link" tabIndex={0} > diff --git a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx index 207f94d61..adc78ec6d 100644 --- a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx +++ b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx @@ -186,7 +186,8 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro return <ErrorC error={new Error("id was undefined")} />; } - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); // When clicking on a exclude, direct // to the detail view for that exclude. setLocation(linkTo, { @@ -203,7 +204,12 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro aria-label={`Exclude ${domain}`} title={`Exclude ${domain}`} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="link" tabIndex={0} > diff --git a/web/source/settings/views/moderation/domain-permissions/form.tsx b/web/source/settings/views/moderation/domain-permissions/form.tsx index cf1447cfd..caa2cbe83 100644 --- a/web/source/settings/views/moderation/domain-permissions/form.tsx +++ b/web/source/settings/views/moderation/domain-permissions/form.tsx @@ -71,7 +71,8 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp }, [exportResult]); const importFileRef = useRef<HTMLInputElement>(null); - const importFileOnClick = () => { + const importFileOnClick = (e) => { + e.preventDefault(); importFileRef.current?.click(); }; @@ -110,7 +111,12 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp className={`button with-icon${form.permType.value === undefined || form.permType.value.length === 0 ? " disabled" : ""}`} tabIndex={0} onClick={importFileOnClick} - onKeyDown={e => e.key === "Enter" && importFileOnClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + importFileOnClick(e); + } + }} role="button" > <i className="fa fa-fw " aria-hidden="true" /> diff --git a/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx b/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx index 808d03dcf..def7e2c6e 100644 --- a/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx +++ b/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx @@ -109,7 +109,8 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri successfullyFetchedAtStr = new Date(successfullyFetchedAt).toDateString(); } - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); // When clicking on a subscription, direct // to the detail view for that subscription. setLocation(linkTo, { @@ -126,7 +127,12 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri aria-label={ariaLabel} title={ariaLabel} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="link" tabIndex={0} > diff --git a/web/source/settings/views/moderation/reports/search.tsx b/web/source/settings/views/moderation/reports/search.tsx index bae0a2004..9c671268b 100644 --- a/web/source/settings/views/moderation/reports/search.tsx +++ b/web/source/settings/views/moderation/reports/search.tsx @@ -184,7 +184,8 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) { const created = new Date(report.created_at).toLocaleString(); const title = `${status}. @${target.account.acct} was reported by @${from.account.acct} on ${created}. Reason: "${comment}"`; - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); // When clicking on a report, direct // to the detail view for that report. setLocation(linkTo, { @@ -201,7 +202,12 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) { aria-label={title} title={title} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="link" tabIndex={0} > diff --git a/web/source/settings/views/user/applications/search.tsx b/web/source/settings/views/user/applications/search.tsx index afbb0d326..02f8ed5c6 100644 --- a/web/source/settings/views/user/applications/search.tsx +++ b/web/source/settings/views/user/applications/search.tsx @@ -139,7 +139,8 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr const created = useCreated(app); const redirectURIs = useRedirectURIs(app); - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); // When clicking on an app, direct // to the detail view for that app. setLocation(linkTo, { @@ -156,7 +157,12 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr aria-label={`${app.name}`} title={`${app.name}`} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="link" tabIndex={0} > diff --git a/web/source/settings/views/user/interactions/search.tsx b/web/source/settings/views/user/interactions/search.tsx index 5d2da7563..2f5f41d7d 100644 --- a/web/source/settings/views/user/interactions/search.tsx +++ b/web/source/settings/views/user/interactions/search.tsx @@ -174,7 +174,8 @@ function ReqsListEntry({ req, linkTo, backLocation }: ReqsListEntryProps) { const ourContent = useContent(req.status); const theirContent = useContent(req.reply); - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); // When clicking on a request, direct // to the detail view for that request. setLocation(linkTo, { @@ -191,7 +192,12 @@ function ReqsListEntry({ req, linkTo, backLocation }: ReqsListEntryProps) { aria-label={label} title={label} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="link" tabIndex={0} > |