aaaaaaaaaaaaaa

web/source/frontend/index.js

@@ -179,19 +179,24 @@ dynamicSpoiler("text-spoiler", (details) => {
 	const summary = details.children[0];
 	const button = details.querySelector(".button");
 
-	// Use button inside summary to
+	// Use button *instead of summary*
-	// toggle post body visibility.
+	// to toggle post visibility.
+	summary.tabIndex = "-1";
 	button.tabIndex = "0";
 	button.setAttribute("aria-role", "button");
-	button.onclick = () => {
+	button.onclick = (e) => {
-		details.click();
+		e.preventDefault();
+		return details.hasAttribute("open")
+			? details.removeAttribute("open")
+			: details.setAttribute("open", "");
 	};
 
 	// Let enter also trigger the button
 	// (for those using keyboard to navigate).
 	button.addEventListener("keydown", (e) => {
 		if (e.key === "Enter") {
-			summary.click();
+			e.preventDefault();
+			button.click();
 		}
 	});
 
@@ -215,15 +220,19 @@ dynamicSpoiler("media-spoiler", (details) => {
 	summary.tabIndex = "-1";
 	button.tabIndex = "0";
 	button.setAttribute("aria-role", "button");
-	button.onclick = () => {
+	button.onclick = (e) => {
-		details.click();
+		e.preventDefault();
+		return details.hasAttribute("open")
+			? details.removeAttribute("open")
+			: details.setAttribute("open", "");
 	};
 
 	// Let enter also trigger the button
 	// (for those using keyboard to navigate).
 	button.addEventListener("keydown", (e) => {
 		if (e.key === "Enter") {
-			summary.click();
+			e.preventDefault();
+			button.click();
 		}
 	});
 

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>
+	);
+}

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

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 [ detailsOpen, setDetailsOpen ] = useState(false);
-	const detailsOnClick = () => {
-		detailsRef.current?.click();
-	};
-
-	const summaryRef = useRef<HTMLElement>(null);
-	const summaryOnClick = () => {
-		summaryRef.current?.click();
-	};
 
 	return (
 		<div className="status-body">
 			<details
 				className="text-spoiler"
-				ref={detailsRef}
+				open={detailsOpen}
 			>
-				<summary
+				<summary tabIndex={-1}>
-					tabIndex={-1}
-					ref={summaryRef}
-				>
 					<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"
+						aria-label={detailsOpen ? "Hide content" : "Show content"}
-						onClick={detailsOnClick}
+						onClick={(e) => {
-						onKeyDown={e => e.key === "Enter" && summaryOnClick()}
+							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 [ detailsOpen, setDetailsOpen ] = useState(false);
-	const detailsOnClick = () => {
-		detailsRef.current?.click();
-	};
-
-	const summaryRef = useRef<HTMLElement>(null);
-	const summaryOnClick = () => {
-		summaryRef.current?.click();
-	};
-	
 	return (
 		<div className="media-wrapper">
-			<details className="image-spoiler media-spoiler">
+			<details
-				<summary tabIndex={-1} ref={summaryRef}>
+				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}
+						onClick={(e) => {
-						onKeyDown={e => e.key === "Enter" && summaryOnClick()}
+							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"
+						aria-label={detailsOpen ? "Hide media" : "Show media"}
-						onClick={detailsOnClick}
+						onClick={(e) => {
-						onKeyDown={e => e.key === "Enter" && summaryOnClick()}
+							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"
 				>

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}
 			>

web/source/settings/views/moderation/domain-permissions/drafts/index.tsx

@@ -211,7 +211,7 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
 
 	const title = `${permTypeUpper} ${domain}`;
 
-	const onClick = () => {
+	const onClick = (_) => {
 		// When clicking on a draft, direct
 		// to the detail view for that draft.
 		setLocation(linkTo, {
@@ -228,7 +228,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}
 		>

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}
 		>

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" />

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}
 		>

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}
 		>

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}
 		>

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}
 		>