read right to left

CHANGELOG.md

@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
-
+  
 ## Updated
 - updated middleware file to redirect synthetic collections (DR-3750)
 - updates node version to 22
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Added
 - added OpenGraph image to Items page (DR-3791)
+- added support to read right-to-left (DR-3841)
 
 ## [1.0.0] 2025-08-04
 - Added Playwright test for Name filter for search-results page (DR-3796)

app/items/[uuid]/page.tsx

@@ -106,9 +106,28 @@ export default async function ItemViewer({ params, searchParams }: ItemProps) {
 
   // only allow canvasIndex to be in the range of 0...item.imageIds.length (number of canvases)
   const imageIDs = item.imageIDs || [];
-  const maxIndex = imageIDs.length - 1;
-  const rawIndex = searchParams.canvasIndex || 0;
+  const maxIndex = Math.max(0, imageIDs.length - 1);
+
+  // If no canvasIndex provided (or it's not a number), use default based on viewing direction
+  const providedIndexRaw = (searchParams as any)?.canvasIndex;
+  const providedIndex =
+    typeof providedIndexRaw === "string"
+      ? Number(providedIndexRaw)
+      : typeof providedIndexRaw === "number"
+      ? providedIndexRaw
+      : NaN;
+
+  // Is this a right-to-left item?
+  const isRTL = item.viewingDirection?.toLowerCase() === "right-to-left";
+
+  const defaultIndex = isRTL ? maxIndex : 0;
+  const rawIndex = Number.isFinite(providedIndex)
+    ? providedIndex
+    : defaultIndex;
+
+  // Clamp to valid range
   const clampedCanvasIndex = Math.max(0, Math.min(rawIndex, maxIndex));
+
   const breadcrumbData = formatItemBreadcrumbs(item);
   return (
     <PageLayout

app/src/models/item.ts

@@ -50,6 +50,7 @@ export class ItemModel {
   subcollectionName: string | null;
   permittedLocationText: string;
   captures: CaptureModel[];
+  viewingDirection: string;
 
   constructor(
     uuid: string,
@@ -211,5 +212,7 @@ export class ItemModel {
 
     // get a list of signed urls
     this.mediaFiles = annotations.map((annotation) => annotation.id);
+    this.viewingDirection = manifest["viewingDirection"];
+    console.log("item.readingDirection: ", manifest["viewingDirection"]);
   }
 }