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

* fix photoswipe layout issues (chrome)

* aaaaaaaaaaaaaa

* wwwwwwwwwwww

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