Some Chinese text fixes

public/local-data/websiteInterfaces.json

@@ -109,11 +109,11 @@
           "previous_content": "{ count, plural, =0 {No previous content} one {Previous content} other {Previous contents} }",
           "followup_content": "{ count, plural, =0 {No follow-up content} one {Follow-up content} other {Follow-up contents} }",
           "videos": "Videos",
-          "view_on": "View on",
+          "view_on_x": "View on {x}",
           "channel": "Channel",
           "subscribers": "Subscribers",
           "description": "Description",
-          "available_at": "Available at",
+          "available_at_x": "Available at {x}",
           "want_it": "I want it!",
           "have_it": "I have it!",
           "source": "Source",
@@ -289,11 +289,11 @@
           "previous_content": "Contenu précédent",
           "followup_content": "Contenu suivant",
           "videos": "Videos",
-          "view_on": "Voir sur",
+          "view_on_x": "Voir sur {x}",
           "channel": "Chaîne",
           "subscribers": "Abonnés",
           "description": "Description",
-          "available_at": "Disponible sur",
+          "available_at_x": "Disponible sur {x}",
           "want_it": "Je le veux !",
           "have_it": "Je l'ai !",
           "source": "Source",
@@ -469,11 +469,11 @@
           "previous_content": "前のコンテンツ",
           "followup_content": "フォローアップコンテンツ",
           "videos": "動画",
-          "view_on": "見る",
+          "view_on_x": null,
           "channel": "チャンネル",
           "subscribers": "サブスクライバー",
           "description": "説明",
-          "available_at": "でご覧いただけます。",
+          "available_at_x": null,
           "want_it": "欲しいです!",
           "have_it": "持ってます!",
           "source": "出典",
@@ -649,11 +649,11 @@
           "previous_content": "Contenido anterior",
           "followup_content": "Contenido siguiente",
           "videos": "Vídeos",
-          "view_on": null,
+          "view_on_x": null,
           "channel": "Canal",
           "subscribers": "Suscriptores",
           "description": "Descripción",
-          "available_at": "Disponible en",
+          "available_at_x": "Disponible en {x}",
           "want_it": "Lo quiero!",
           "have_it": "Lo tengo!",
           "source": "Fuente",
@@ -829,11 +829,11 @@
           "previous_content": "Conteúdo anterior:",
           "followup_content": "Próximo conteúdo:",
           "videos": "Videos:",
-          "view_on": "Ver no:",
+          "view_on_x": "Ver no {x}",
           "channel": "Canal",
           "subscribers": "Inscritos",
           "description": "Descrição",
-          "available_at": "Disponível no:",
+          "available_at_x": "Disponível no {x}",
           "want_it": null,
           "have_it": null,
           "source": null,
@@ -1009,11 +1009,11 @@
           "previous_content": "{ count, plural, =0 {本文为第一部分} one {上一章节} other {相关章节} }",
           "followup_content": "{ count, plural, =0 {本文为最后一部分} one {下一章节} other {后续章节} }",
           "videos": "影像",
-          "view_on": null,
+          "view_on_x": "前往 {x} 观看",
           "channel": "频道",
           "subscribers": "订阅数",
           "description": "简介",
-          "available_at": "可在",
+          "available_at_x": "可在 {x} 查看或购买",
           "want_it": "想要！",
           "have_it": "已入手！",
           "source": "来源",

src/graphql/icuParams.ts

@@ -104,11 +104,11 @@ export interface ICUParams {
   previous_content: { count: number };
   followup_content: { count: number };
   videos: never;
-  view_on: never;
+  view_on_x: { x: Date | boolean | number | string };
   channel: never;
   subscribers: never;
   description: never;
-  available_at: never;
+  available_at_x: { x: Date | boolean | number | string };
   want_it: never;
   have_it: never;
   source: never;

src/helpers/component.tsx

@@ -1,3 +1,4 @@
+import { ReactNode, useMemo } from "react";
 import { HorizontalLine } from "components/HorizontalLine";
 import { insertInBetweenArray } from "helpers/others";
 import { isDefined } from "helpers/asserts";
@@ -44,3 +45,19 @@ export const ElementsSeparator = ({
 }: ElementsSeparatorProps): JSX.Element => (
   <>{insertInBetweenArray(children.filter(Boolean), separator)}</>
 );
+
+interface FormatWithComponentProps {
+  text: string;
+  component: React.ReactNode;
+}
+
+export const formatWithComponentSplitter = " [SPLITTER] ";
+export const FormatWithComponent = ({ text, component }: FormatWithComponentProps): JSX.Element => {
+  const splittedText = useMemo<ReactNode[]>(() => {
+    const result = text.split("[SPLITTER]");
+    return result;
+  }, [text]);
+
+  console.log(splittedText);
+  return <ElementsSeparator separator={component}>{splittedText}</ElementsSeparator>;
+};

src/pages/archives/videos/v/[uid].tsx

@@ -104,7 +104,7 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {
               {video.source === "YouTube" && (
                 <Button
                   size="small"
-                  text={`${format("view_on")} ${video.source}`}
+                  text={format("view_on_x", { x: video.source })}
                   href={`https://youtu.be/${video.uid}`}
                   alwaysNewTab
                 />

src/pages/library/[slug]/index.tsx

@@ -51,7 +51,11 @@ import { atoms } from "contexts/atoms";
 import { useAtomGetter, useAtomSetter } from "helpers/atoms";
 import { useFormat } from "hooks/useFormat";
 import { getFormat } from "helpers/i18n";
-import { ElementsSeparator } from "helpers/component";
+import {
+  ElementsSeparator,
+  FormatWithComponent,
+  formatWithComponentSplitter,
+} from "helpers/component";
 import { ToolTip } from "components/ToolTip";
 import { AudioPlayer } from "components/Player";
 
@@ -239,12 +243,14 @@ const LibrarySlug = ({
               <>
                 {item.urls?.length ? (
                   <div className="flex flex-row place-items-center gap-3">
-                    <p>{format("available_at")}</p>
+                    <FormatWithComponent
-                    {filterHasAttributes(item.urls, ["url"]).map((url, index) => (
+                      text={format("available_at_x", { x: formatWithComponentSplitter })}
+                      component={filterHasAttributes(item.urls, ["url"]).map((url, index) => (
                         <Fragment key={index}>
                           <Button href={url.url} text={prettyURL(url.url)} alwaysNewTab />
                         </Fragment>
                       ))}
+                    />
                   </div>
                 ) : (
                   <p>{format("item_not_available")}</p>