From b510f3c539fb6c71ffba6f32974193d6fb035165 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Mon, 14 Apr 2025 15:12:21 +0200 Subject: [bugfix/frontend] Fix photoswipe layout issues, keyboard shortcuts (#4010) * fix photoswipe layout issues (chrome) * aaaaaaaaaaaaaa * wwwwwwwwwwww --- web/source/settings/components/blurhash.tsx | 75 ++++++++++++++++++++++ web/source/settings/components/form/inputs.tsx | 10 ++- web/source/settings/components/status.tsx | 86 +++++++++++++++----------- 3 files changed, 132 insertions(+), 39 deletions(-) create mode 100644 web/source/settings/components/blurhash.tsx (limited to 'web/source/settings/components') 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 . +*/ + +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(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 ( + + ); +} 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(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" >
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 . */ -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(null); - const detailsOnClick = () => { - detailsRef.current?.click(); - }; - - const summaryRef = useRef(null); - const summaryOnClick = () => { - summaryRef.current?.click(); - }; + const [ detailsOpen, setDetailsOpen ] = useState(false); return (
- +
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"}
(null); - const detailsOnClick = () => { - detailsRef.current?.click(); - }; - - const summaryRef = useRef(null); - const summaryOnClick = () => { - summaryRef.current?.click(); - }; - + const [ detailsOpen, setDetailsOpen ] = useState(false); return (
-
- +
+ @@ -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); + } + }} > +
+ +
-- cgit v1.2.3