Enable language setting in Viewer

src/components/Viewer/InformationPanel/About/About.tsx

@@ -25,7 +25,8 @@ import { PrimitivesExternalWebResource } from "src/types/primitives";
 
 const About: React.FC = () => {
   const viewerState: ViewerContextStore = useViewerState();
-  const { activeManifest, vault } = viewerState;
+  const { activeManifest, vault, configOptions } = viewerState;
+  const { language } = configOptions;
 
   const [manifest, setManifest] = useState<ManifestNormalized>();
 
@@ -74,10 +75,10 @@ const About: React.FC = () => {
   return (
     <AboutStyled>
       <AboutContent>
-        <Thumbnail thumbnail={thumbnail} label={manifest.label} />
-        <Summary summary={manifest.summary} />
-        <Metadata metadata={manifest.metadata} />
-        <RequiredStatement requiredStatement={manifest.requiredStatement} />
+        <Thumbnail thumbnail={thumbnail} label={manifest.label} language={language} />
+        <Summary summary={manifest.summary} language={language} />
+        <Metadata metadata={manifest.metadata} language={language} />
+        <RequiredStatement requiredStatement={manifest.requiredStatement} language={language} />
         <Rights rights={manifest.rights} />
         <Homepage homepage={homepage} />
         <SeeAlso seeAlso={seeAlso} />

src/components/Viewer/Properties/Metadata.tsx

@@ -5,17 +5,19 @@ import { Metadata } from "src/components/Primitives";
 interface PropertiesMetadataProps {
   metadata: MetadataItem[] | null;
   parent?: "manifest" | "canvas";
+  language?: string;
 }
 
 const PropertiesMetadata: React.FC<PropertiesMetadataProps> = ({
   metadata,
   parent = "manifest",
+  language,
 }) => {
   if (!metadata) return <></>;
 
   return (
     <>
-      <Metadata metadata={metadata} id={`iiif-${parent}-metadata`} />
+      <Metadata metadata={metadata} id={`iiif-${parent}-metadata`} lang={language} />
     </>
   );
 };

src/components/Viewer/Properties/RequiredStatement.tsx

@@ -2,14 +2,16 @@ import { MetadataItem } from "@iiif/presentation-3";
 import React from "react";
 import { RequiredStatement } from "src/components/Primitives";
 
-interface PropertiesSummaryProps {
+interface PropertiesRequiredStatementProps {
   requiredStatement: MetadataItem | null;
   parent?: "manifest" | "canvas";
+  language?: string;
 }
 
-const PropertiesRequiredStatement: React.FC<PropertiesSummaryProps> = ({
+const PropertiesRequiredStatement: React.FC<PropertiesRequiredStatementProps> = ({
   requiredStatement,
   parent = "manifest",
+  language,
 }) => {
   if (!requiredStatement) return <></>;
 
@@ -18,6 +20,7 @@ const PropertiesRequiredStatement: React.FC<PropertiesSummaryProps> = ({
       <RequiredStatement
         requiredStatement={requiredStatement}
         id={`iiif-${parent}-required-statement`}
+        lang={language}
       />
     </>
   );

src/components/Viewer/Properties/Summary.tsx

@@ -5,17 +5,19 @@ import { Summary } from "src/components/Primitives";
 interface PropertiesSummaryProps {
   summary: InternationalString | null;
   parent?: "manifest" | "canvas";
+  language?: string;
 }
 
 const PropertiesSummary: React.FC<PropertiesSummaryProps> = ({
   summary,
   parent = "manifest",
+  language,
 }) => {
   if (!summary) return <></>;
 
   return (
     <>
-      <Summary summary={summary} as="p" id={`iiif-${parent}-summary`} />
+      <Summary summary={summary} as="p" id={`iiif-${parent}-summary`} lang={language} />
     </>
   );
 };

src/components/Viewer/Properties/Thumbnail.tsx

@@ -9,11 +9,13 @@ import { Thumbnail } from "src/components/Primitives";
 interface PropertiesThumbnailProps {
   label: InternationalString | null;
   thumbnail: IIIFExternalWebResource[];
+  language?: string;
 }
 
 const PropertiesThumbnail: React.FC<PropertiesThumbnailProps> = ({
   label,
   thumbnail,
+  language,
 }) => {
   if (thumbnail?.length === 0) return <></>;
 
@@ -23,6 +25,7 @@ const PropertiesThumbnail: React.FC<PropertiesThumbnailProps> = ({
         altAsLabel={label ? label : { none: ["resource"] }}
         thumbnail={thumbnail}
         style={{ backgroundColor: "#6663", objectFit: "cover" }}
+        lang={language}
       />
     </>
   );

src/context/viewer-context.tsx

@@ -65,6 +65,13 @@ export type ViewerConfigOptions = {
       moreResults?: string;
     };
   };
+  /**
+   * Language code (BCP 47) for displaying IIIF metadata labels and values.
+   * Used to select the appropriate translation from InternationalString objects.
+   * Example: "en", "nl", "zh", "fr-CA"
+   * If not set or the language is not available, falls back to the first available language.
+   */
+  language?: string;
 };
 
 export type OverlayOptions = {