summaryrefslogtreecommitdiff
path: root/web/source/settings/components
diff options
context:
space:
mode:
Diffstat (limited to 'web/source/settings/components')
-rw-r--r--web/source/settings/components/blurhash.tsx75
-rw-r--r--web/source/settings/components/form/inputs.tsx10
-rw-r--r--web/source/settings/components/status.tsx86
3 files changed, 132 insertions, 39 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"
>
generated by cgit v1.2.3 (git 2.46.0) at 2025-12-03 20:25:35 +0000