[bugfix/frontend] Fix photoswipe layout issues, keyboard shortcuts (#4010)

* fix photoswipe layout issues (chrome)

* aaaaaaaaaaaaaa

* wwwwwwwwwwww

web/assets/themes/midnight-trip.css

@@ -113,9 +113,6 @@ html, body {
 .status .media .media-wrapper {
   background: var(--bg-nearly-opaque);
 }
-.status .media .media-wrapper details .unknown-attachment .placeholder {
-  border: 0.2rem dashed var(--magenta);
-}
 
 /* Polls */
 .status .text .poll {

web/assets/themes/solarized-dark.css

@@ -127,7 +127,6 @@ html, body {
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
   color: var(--base1);
-  border: 0.2rem dashed var(--base1);
 }
 .status .media .media-wrapper details video.plyr-video {
   background: transparent;

web/assets/themes/solarized-light.css

@@ -117,7 +117,6 @@ html, body {
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
   color: var(--base1);
-  border: 0.2rem dashed var(--base1);
 }
 .status .media .media-wrapper details video.plyr-video {
   background: transparent;

web/source/css/_colors.css

@@ -80,7 +80,7 @@ $profile-bg: $gray4;
 $button-bg: $blue2;
 $button-fg: $gray1;
 $button-hover-bg: $blue3;
-$button-focus-border: $blue3;
+$button-focus-border: $button-hover-bg;
 
 $button-danger-bg: $error3;
 $button-danger-fg: $white1;

web/source/css/_media-wrapper.css

@@ -38,7 +38,7 @@
 	}
 
 	details {
-		position: absolute;
+		position: relative;
 		height: 100%;
 		width: 100%;
 
@@ -55,35 +55,6 @@
 			object-fit: cover;
 		}
 
-		&[open] summary {
-			height: auto;
-			width: auto;
-			margin: 1rem;
-			padding: 0;
-
-			.show {
-				display: none;
-			}
-
-			.eye.button .hide {
-				display: inline-block;
-				grid-column: 1 / span 3;
-				grid-row: 1 / span 2;
-			}
-
-			div.blurhash-container > canvas {
-				display: none;
-			}
-
-			/*
-				Hide focus outline on click
-				to avoid ugly artifacts.
-			*/
-			&:focus {
-				outline: none;
-			}
-		}
-
 		summary {
 			position: absolute;
 			height: 100%;
@@ -110,6 +81,14 @@
 				margin: 0;
 				padding: 0.4rem;
 
+				/*
+					Make button outline really thick as we can't
+					know whether media has good contrast with it.
+				*/
+				&:focus-visible {
+					outline: 0.5rem dashed $button-focus-border;
+				}
+
 				.fa-fw {
 					line-height: $fa-fw;
 				}
@@ -117,16 +96,6 @@
 				.hide {
 					display: none;
 				}
-
-				&:focus-visible {
-					/*
-						Can't rely on media having background with
-						decent contrast so inset and use button-fg
-						instead so focus is definitely visible.
-					*/
-					outline: 0.25rem dashed $button-fg;
-					outline-offset: -0.25rem;
-				}
 			}
 
 			.show.sensitive {
@@ -144,18 +113,42 @@
 			}
 		}
 
-		a.photoswipe-slide {
+		&[open] summary {
+			height: auto;
+			width: auto;
+			cursor: pointer;
+
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr;
+
+			.show {
+				display: none;
+			}
+
+			.eye.button .hide {
 				display: inline-block;
-			height: 100%;
+			}
+
+			div.blurhash-container,
+			div.blurhash-container > canvas {
+				display: none;
+			}
+		}
+
+		a.photoswipe-slide,
+		a.unknown-attachment {
+			position: absolute;
 			width: 100%;
+			height: 100%;
 
 			/*
-				Inset outline to avoid outline
+				Make link outline really thick as we can't
-				being hidden by overflow: hidden.
+				know whether media has good contrast with it.
+				Indent outline to avoid being hidden by overflow: hidden.
 			*/
 			&:focus-visible {
-				outline: $button-focus-outline;
+				outline: 0.5rem dotted $link-fg;
-				outline-offset: -0.25rem;
+				outline-offset: -0.5rem;
 			}
 		}
 
@@ -173,7 +166,6 @@
 				width: 100%;
 				height: 100%;
 				padding: 0.8rem;
-				border: 0.2rem dashed $white2;
 
 				display: flex;
 				flex-direction: column;
@@ -220,17 +212,13 @@
 				
 				> span.eye.button {
 					font-size: smaller;
-					padding: 0 0.2rem 0 0.2rem;
+					padding: 0.2rem;
 	
 					> .fa-fw {
 						line-height: 1.4rem;
 					}
 				}
 			}
-
-			&[open] > summary {
-				margin: 0.5rem;
-			}
 		}
 	}
 
@@ -248,7 +236,7 @@
 				
 				> span.eye.button {
 					font-size: small;
-					padding: 0 0.1rem 0 0.1rem;
+					padding: 0.1rem;
 	
 					> .fa-fw {
 						line-height: 1.2rem;

web/source/css/_status-media.css

@@ -20,7 +20,6 @@
 @import "./_media-wrapper.css";
 
 .media {
-	grid-column: span 3;
 	display: grid;
 	grid-template-columns: 50% 50%;
 	grid-auto-rows: 10rem;

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
-					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"
+						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,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}
 		>

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