Added more localized texts

2022-03-07 13:29:39 +01:00 · 2022-03-07 13:29:39 +01:00 · a04e25a1ad
parent d6279df8bf
commit a04e25a1ad
7 changed files with 138 additions and 42 deletions
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@ -29,6 +29,7 @@ type AppLayoutProps = {
 };

 export default function AppLayout(props: AppLayoutProps): JSX.Element {
+  const langui = props.langui;
  const router = useRouter();
  const isMobile = useMediaMobile();
  const isCoarse = useMediaCoarse();
@ -91,7 +92,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {

  const metaDescription = props.description
    ? props.description
-    : props.langui.default_description;
+    : langui.default_description;

  useEffect(() => {
    document.getElementsByTagName("html")[0].style.fontSize = `${
@ -166,9 +167,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
            <div className="grid place-content-center h-full">
              <div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9 opacity-40">
                <p className="text-4xl">❮</p>
-                <p className="text-2xl w-64">
-                  {props.langui.select_option_sidebar}
-                </p>
+                <p className="text-2xl w-64">{langui.select_option_sidebar}</p>
              </div>
            </div>
          )}
@ -220,7 +219,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
          className={`${mainPanelClass} border-r-[1px] mobile:bottom-20 border-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light texture-paper-dots
        ${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
        >
-          <MainPanel langui={props.langui} />
+          <MainPanel langui={langui} />
        </div>

        {/* Main panel minimize button*/}
@ -270,7 +269,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
          state={appLayout.languagePanelOpen}
          setState={appLayout.setLanguagePanelOpen}
        >
-          <h2 className="text-2xl">{props.langui.select_language}</h2>
+          <h2 className="text-2xl">{langui.select_language}</h2>
          <div className="flex flex-wrap flex-row gap-2 mobile:flex-col">
            {router.locales?.sort().map((locale) => (
              <Button
@ -290,11 +289,11 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
          state={appLayout.configPanelOpen}
          setState={appLayout.setConfigPanelOpen}
        >
-          <h2 className="text-2xl">Settings</h2>
+          <h2 className="text-2xl">{langui.settings}</h2>

          <div className="mt-4 grid gap-8 place-items-center text-center desktop:grid-cols-2">
            <div>
-              <h3 className="text-xl">Theme</h3>
+              <h3 className="text-xl">{langui.theme}</h3>
              <div className="flex flex-row">
                <Button
                  onClick={() => {
@ -307,7 +306,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
                  }
                  className="rounded-r-none"
                >
-                  Light
+                  {langui.light}
                </Button>
                <Button
                  onClick={() => {
@ -316,7 +315,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
                  active={appLayout.selectedThemeMode === false}
                  className="rounded-l-none rounded-r-none border-x-0"
                >
-                  Auto
+                  {langui.auto}
                </Button>
                <Button
                  onClick={() => {
@ -329,13 +328,13 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
                  }
                  className="rounded-l-none"
                >
-                  Dark
+                  {langui.dark}
                </Button>
              </div>
            </div>

            <div>
-              <h3 className="text-xl">Currency</h3>
+              <h3 className="text-xl">{langui.currency}</h3>
              <div>
                <Select
                  options={currencyOptions}
@ -347,7 +346,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
            </div>

            <div>
-              <h3 className="text-xl">Font size</h3>
+              <h3 className="text-xl">{langui.font_size}</h3>
              <div className="flex flex-row">
                <Button
                  className="rounded-r-none"
@ -382,7 +381,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
            </div>

            <div>
-              <h3 className="text-xl">Font</h3>
+              <h3 className="text-xl">{langui.font}</h3>
              <div className="grid gap-2">
                <Button
                  active={appLayout.dyslexic === false}
@ -402,12 +401,14 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
            </div>

            <div>
-              <h3 className="text-xl">Player name</h3>
+              <h3 className="text-xl">{langui.player_name}</h3>
              <input
                type="text"
                placeholder="<player>"
                className="w-48"
-                onInput={(e) => appLayout.setPlayerName(e.target.value)}
+                onInput={(e) =>
+                  appLayout.setPlayerName((e.target as HTMLInputElement).value)
+                }
              />
            </div>
          </div>
--- a/src/components/RecorderChip.tsx
+++ b/src/components/RecorderChip.tsx
@ -1,15 +1,20 @@
 import Chip from "components/Chip";
-import { GetContentTextQuery } from "graphql/operations-types";
+import {
+  GetContentTextQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
 import Img, { ImageQuality } from "./Img";
 import ReactDOMServer from "react-dom/server";

 type RecorderChipProps = {
  className?: string;
  recorder: GetContentTextQuery["contents"]["data"][number]["attributes"]["text_set"][number]["transcribers"]["data"][number];
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
 };

 export default function RecorderChip(props: RecorderChipProps): JSX.Element {
  const recorder = props.recorder;
+  const langui = props.langui;
  return (
    <Chip
      key={recorder.id}
@ -28,7 +33,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
          </div>
          {recorder.attributes.languages.data.length > 0 && (
            <div className="flex flex-row flex-wrap gap-1">
-              <p>Languages:</p>
+              <p>{langui.languages}:</p>
              {recorder.attributes.languages.data.map((language) => (
                <Chip key={language.attributes.code}>
                  {language.attributes.code.toUpperCase()}
@ -38,7 +43,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
          )}
          {recorder.attributes.pronouns && (
            <div className="flex flex-row flex-wrap gap-1">
-              <p>Pronouns:</p>
+              <p>{langui.pronouns}:</p>
              <Chip>{recorder.attributes.pronouns}</Chip>
            </div>
          )}
--- a/src/graphql/operation.graphql
+++ b/src/graphql/operation.graphql
@ -83,6 +83,32 @@ query getWebsiteInterface($language_code: String) {
        group_by
        select_option_sidebar
        group
+        settings
+        theme
+        light
+        auto
+        dark
+        font_size
+        player_name
+        currency
+        font
+        calculated
+        status_incomplete
+        status_draft
+        status_review
+        status_done
+        incomplete
+        draft
+        review
+        done
+        status
+        transcribers
+        translators
+        proofreaders
+        transcript_notice
+        translation_notice
+        source_language
+        pronouns
      }
    }
  }
--- a/src/graphql/operations-types.ts
+++ b/src/graphql/operations-types.ts
@ -165,6 +165,32 @@ export type GetWebsiteInterfaceQuery = {
        group_by: string;
        select_option_sidebar: string;
        group: string;
+        settings: string;
+        theme: string;
+        light: string;
+        auto: string;
+        dark: string;
+        font_size: string;
+        player_name: string;
+        currency: string;
+        font: string;
+        calculated: string;
+        status_incomplete: string;
+        status_draft: string;
+        status_review: string;
+        status_done: string;
+        incomplete: string;
+        draft: string;
+        review: string;
+        done: string;
+        status: string;
+        transcribers: string;
+        translators: string;
+        proofreaders: string;
+        transcript_notice: string;
+        translation_notice: string;
+        source_language: string;
+        pronouns: string;
      };
    }>;
  };
--- a/src/pages/contents/[slug]/index.tsx
+++ b/src/pages/contents/[slug]/index.tsx
@ -36,7 +36,6 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
        displayOn={ReturnButtonType.Desktop}
        horizontalLine
      />
-      
    </SubPanel>
  );
  const contentPanel = (
@ -96,9 +95,22 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
      langui={langui}
      contentPanel={contentPanel}
      subPanel={subPanel}
-      description={
-        content.titles.length > 0 ? content.titles[0].description : undefined
+      description={`${langui.type}: ${
+        content.type.data.attributes.titles.length > 0
+          ? content.type.data.attributes.titles[0].title
+          : prettySlug(content.type.data.attributes.slug)
      }
+      ${langui.categories}: ${
+        content.categories.data.length > 0 &&
+        content.categories.data
+          .map((category) => {
+            return category.attributes.short;
+          })
+          .join(" | ")
+      }
+         
+        ${content.titles.length > 0 ? content.titles[0].description : undefined}
+        `}
    />
  );
 }
--- a/src/pages/contents/[slug]/read.tsx
+++ b/src/pages/contents/[slug]/read.tsx
@ -57,14 +57,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
          <h2 className="text-xl">
            {content.text_set[0].source_language.data.attributes.code ===
            router.locale
-              ? "This content is a transcript"
-              : "This content is a fan-translation"}
+              ? langui.transcript_notice
+              : langui.translation_notice}
          </h2>

          {content.text_set[0].source_language.data.attributes.code !==
            router.locale && (
            <div className="grid place-items-center gap-2">
-              <p className="font-headers">Source language:</p>
+              <p className="font-headers">{langui.source_language}:</p>
              <Button
                href={router.asPath}
                locale={
@ -79,20 +79,20 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
          )}

          <div className="grid grid-flow-col place-items-center place-content-center gap-2">
-            <p className="font-headers">Status:</p>
+            <p className="font-headers">{langui.status}:</p>

            <Chip
              data-tip={
                content.text_set[0].status ===
                Enum_Componentsetstextset_Status.Incomplete
-                  ? "This entry is only partially translated/transcribed."
+                  ? langui.status_incomplete
                  : content.text_set[0].status ===
                    Enum_Componentsetstextset_Status.Draft
-                  ? "This entry is just a draft. It usually means that this is a work-in-progress. Translation/transcription might be poor and/or computer-generated."
+                  ? langui.status_draft
                  : content.text_set[0].status ===
                    Enum_Componentsetstextset_Status.Review
-                  ? "This entry has not yet being proofread. The content should still be accurate."
-                  : "This entry has been checked and proofread. If you notice any translation errors or typos, please contact us so we can fix it!"
+                  ? langui.status_review
+                  : langui.status_done
              }
              data-for={"StatusTooltip"}
            >
@ -102,10 +102,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {

          {content.text_set[0].transcribers.data.length > 0 && (
            <div>
-              <p className="font-headers">Transcribers:</p>
+              <p className="font-headers">{langui.transcribers}:</p>
              <div className="grid place-items-center place-content-center gap-2">
                {content.text_set[0].transcribers.data.map((recorder) => (
-                  <RecorderChip key={recorder.id} recorder={recorder} />
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
                ))}
              </div>
            </div>
@ -113,10 +117,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {

          {content.text_set[0].translators.data.length > 0 && (
            <div>
-              <p className="font-headers">Translators:</p>
+              <p className="font-headers">{langui.translators}:</p>
              <div className="grid place-items-center place-content-center gap-2">
                {content.text_set[0].translators.data.map((recorder) => (
-                  <RecorderChip key={recorder.id} recorder={recorder} />
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
                ))}
              </div>
            </div>
@ -124,10 +132,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {

          {content.text_set[0].proofreaders.data.length > 0 && (
            <div>
-              <p className="font-headers">Proofreaders:</p>
+              <p className="font-headers">{langui.proofreaders}:</p>
              <div className="grid place-items-center place-content-center gap-2">
                {content.text_set[0].proofreaders.data.map((recorder) => (
-                  <RecorderChip key={recorder.id} recorder={recorder} />
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
                ))}
              </div>
            </div>
@ -204,6 +216,22 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
      contentPanel={contentPanel}
      subPanel={subPanel}
      extra={extra}
+      description={`${langui.type}: ${
+        content.type.data.attributes.titles.length > 0
+          ? content.type.data.attributes.titles[0].title
+          : prettySlug(content.type.data.attributes.slug)
+      }
+      ${langui.categories}: ${
+        content.categories.data.length > 0 &&
+        content.categories.data
+          .map((category) => {
+            return category.attributes.short;
+          })
+          .join(" | ")
+      }
+         
+        ${content.titles.length > 0 ? content.titles[0].description : undefined}
+        `}
    />
  );
 }
--- a/src/pages/library/[slug].tsx
+++ b/src/pages/library/[slug].tsx
@ -239,8 +239,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                    appLayout.currency && (
                    <p>
                      {prettyPrice(item.price, currencies, appLayout.currency)}{" "}
-                      <br />
-                      (calculated)
+                      <br />({langui.calculated.toLowerCase()})
                    </p>
                  )}
                </div>
@ -283,7 +282,9 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
              ""
            )}

-            {item.metadata.length > 0 ? (
+            {item.metadata.length > 0 &&
+            item.metadata[0].__typename !== "ComponentMetadataGroup" &&
+            item.metadata[0].__typename !== "ComponentMetadataOther" ? (
              <>
                <h3 className="text-xl">{langui.type_information}</h3>
                <div className="grid grid-cols-2 w-full place-content-between">
@ -338,9 +339,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                  ) : item.metadata[0].__typename ===
                    "ComponentMetadataGame" ? (
                    <></>
-                  ) : item.metadata[0].__typename ===
-                    "ComponentMetadataGroup" ? (
-                    <></>
                  ) : (
                    ""
                  )}