Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Transcript tool persistance + better font

This commit is contained in:
DrMint 2023-04-27 23:50:16 +02:00
parent 2deea6184e
commit 0f6339c0f8
3 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -7,6 +7,7 @@
"name": "accords-library.com",
"hasInstallScript": true,
"dependencies": {
"@fontsource/noto-serif-jp": "^4.5.12",
"@fontsource/opendyslexic": "^4.5.4",
"@fontsource/share-tech-mono": "^4.5.9",
"@fontsource/vollkorn": "^4.5.14",
@ -1547,6 +1548,11 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@fontsource/noto-serif-jp": {
"version": "4.5.12",
"resolved": "https://registry.npmjs.org/@fontsource/noto-serif-jp/-/noto-serif-jp-4.5.12.tgz",
"integrity": "sha512-ojRh30udBocUjV5+wxhAd5t7V1AWsgyyDf5BhKvHyx5DCZ7oxDyIGxYv6fjVDzTyXKsek543FGP2+D5rIoCQjw=="
},
"node_modules/@fontsource/opendyslexic": {
"version": "4.5.4",
"resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.4.tgz",
@ -12045,6 +12051,11 @@
"integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
"dev": true
},
"@fontsource/noto-serif-jp": {
"version": "4.5.12",
"resolved": "https://registry.npmjs.org/@fontsource/noto-serif-jp/-/noto-serif-jp-4.5.12.tgz",
"integrity": "sha512-ojRh30udBocUjV5+wxhAd5t7V1AWsgyyDf5BhKvHyx5DCZ7oxDyIGxYv6fjVDzTyXKsek543FGP2+D5rIoCQjw=="
},
"@fontsource/opendyslexic": {
"version": "4.5.4",
"resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.4.tgz",

1
package.json
View File

@ -20,6 +20,7 @@
"upgrade": "ncu --interactive --format group"
},
"dependencies": {
"@fontsource/noto-serif-jp": "^4.5.12",
"@fontsource/opendyslexic": "^4.5.4",
"@fontsource/share-tech-mono": "^4.5.9",
"@fontsource/vollkorn": "^4.5.14",

18
src/pages/dev/transcript.tsx
View File

@ -1,5 +1,7 @@
import "@fontsource/noto-serif-jp";
import { GetStaticProps } from "next";
import { useCallback, useRef, useState } from "react";
import { atomWithStorage } from "jotai/utils";
import { AppLayout, AppLayoutRequired } from "components/AppLayout";
import { Button } from "components/Inputs/Button";
import { ButtonGroup } from "components/Inputs/ButtonGroup";
@ -7,12 +9,17 @@ import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/Cont
import { ToolTip } from "components/ToolTip";
import { getOpenGraph } from "helpers/openGraph";
import { getFormat } from "helpers/i18n";
import { atomPairing, useAtomPair } from "helpers/atoms";
/*
* ╭─────────────╮
* ────────────────────────────────────────╯ CONSTANTS ╰──────────────────────────────────────────
*/
const textAtom = atomPairing(atomWithStorage("transcriptText", ""));
const fontSizeAtom = atomPairing(atomWithStorage("transcriptFontSize", 1));
const textOffset = atomPairing(atomWithStorage("transcriptTextOffset", 0));
const SIZE_MULTIPLIER = 1000;
/*
@ -39,9 +46,9 @@ const swapChar = (char: string, swaps: string[]): string => {
};
const Transcript = (props: Props): JSX.Element => {
const [text, setText] = useState("");
const [fontSize, setFontSize] = useState(1);
const [xOffset, setXOffset] = useState(0);
const [text, setText] = useAtomPair(textAtom);
const [fontSize, setFontSize] = useAtomPair(fontSizeAtom);
const [xOffset, setXOffset] = useAtomPair(textOffset);
const [lineIndex, setLineIndex] = useState(0);
const textAreaRef = useRef<HTMLTextAreaElement>(null);
@ -50,7 +57,7 @@ const Transcript = (props: Props): JSX.Element => {
if (textAreaRef.current) {
setText(textAreaRef.current.value);
}
}, []);
}, [setText]);
const updateLineIndex = useCallback(() => {
if (textAreaRef.current) {
@ -369,10 +376,11 @@ const Transcript = (props: Props): JSX.Element => {
onKeyUp={updateLineIndex}
title="Input textarea"
className="whitespace-pre"
value={text}
/>
<p
className="h-[80vh] whitespace-nowrap font-[initial] font-bold
className="h-[80vh] whitespace-nowrap font-bold [font-family:Noto_Serif_JP]
[transform-origin:top_right] [writing-mode:vertical-rl]"
style={{
transform: `scale(${fontSize}) translateX(${fontSize * xOffset}px)`,