Hang the wall frame landscape too, beside the portrait one

docker/frontend/shared/types/index.ts

@@ -1,4 +1,10 @@
-export type FrameId = 'none' | 'polaroid' | 'classic-white' | 'cinematic' | 'wallframe';
+export type FrameId =
+  | 'none'
+  | 'polaroid'
+  | 'classic-white'
+  | 'cinematic'
+  | 'wallframe' // WALL FRAME PORTRAIT — the artwork hung 90° CW
+  | 'wallframe-landscape'; // the same artwork upright: WALL FRAME LANDSCAPE
 
 // Viewfinder/composition aspect-ratio selector. Convention is an UPRIGHT
 // (portrait) picture: "4:3" = standing 3:4 photo (w/h = 3/4), "3:2" = standing

docker/frontend/shared/utils/recipeShare.ts

@@ -12,7 +12,7 @@ const KEY = 'RecipesCam::recipe-share::v1';
 const ALGORITHM = 'xor16-v1';
 
 const BASE_FILTERS: BaseFilter[] = [...FILM_SIMS.map((s) => s.baseFilter), 'none'];
-const FRAMES: FrameId[] = ['none', 'polaroid', 'classic-white', 'cinematic', 'wallframe'];
+const FRAMES: FrameId[] = ['none', 'polaroid', 'classic-white', 'cinematic', 'wallframe', 'wallframe-landscape'];
 
 const hash = (s: string): number => {
   let h = 0x811c9dc5;

docker/frontend/src/App.tsx

@@ -48,6 +48,7 @@ const FRAMES: { id: FrameId; label: MsgKey }[] = [
   { id: 'classic-white', label: 'frame.classic' },
   { id: 'cinematic', label: 'frame.cinematic' },
   { id: 'wallframe', label: 'frame.wall' },
+  { id: 'wallframe-landscape', label: 'frame.wallLand' },
 ];
 
 // FREE draws the frame on the canvas and lets the user drag its corners, so
@@ -326,6 +327,7 @@ export function Workspace() {
           gpsInfo: gps,
           assets: engine.assets,
           options: {
+            wallframeLandscape: frameId === 'wallframe-landscape',
             sharpen: true,
             photoRotation: rotation,
             cropRect: cropLive ? cropRect : null,
@@ -623,6 +625,7 @@ export function Workspace() {
         gpsInfo: gps,
         assets: engine.assets,
         options: {
+          wallframeLandscape: frameId === 'wallframe-landscape',
           dpi: 300,
           sharpen: true,
           photoRotation: rotation,

docker/frontend/src/engine/exportEngine.ts

@@ -219,6 +219,10 @@ function loadFaces(assets: RenderAssets) {
   return faces;
 }
 
+// Both walls are one artwork on one code path: `wallframe` hangs the PNG turned
+// 90° CW (the portrait opening), `wallframe-landscape` lays it down as it is.
+const isWallframe = (id: FrameId) => id === 'wallframe' || id === 'wallframe-landscape';
+
 function loadWallframe(assets: RenderAssets) {
   if (wallframeImage) return wallframeImage;
   wallframeImage = Skia.Image.MakeImageFromEncoded(assets.wallframe);
@@ -254,7 +258,7 @@ export async function renderPhoto(input: RenderInput): Promise<RenderResult | nu
     const aspectWH = options?.aspect && options.aspect !== 'full' ? ASPECT_RATIO_W_H[options.aspect] : null;
     const cropRect = options?.cropRect ?? null;
     const ratioWH = cropRect ? null : options?.cropWH ?? aspectWH;
-    if ((cropRect || ratioWH) && frameId !== 'wallframe') {
+    if ((cropRect || ratioWH) && !isWallframe(frameId)) {
       const curAspect = width / height;
       let cropW = width;
       let cropH = height;
@@ -534,13 +538,13 @@ export async function renderPhoto(input: RenderInput): Promise<RenderResult | nu
       stampCanvas = cardCanvas;
       stampW = outW;
       stampH = outH;
-    } else if (frameId === 'wallframe') {
+    } else if (isWallframe(frameId)) {
       flush(surface);
       const photoImg = own(surface.makeImageSnapshot());
       cardSource = photoImg;
       const pw = photoImg.width();
       const ph = photoImg.height();
-      const wallLand = options?.wallframeLandscape === true;
+      const wallLand = frameId === 'wallframe-landscape' || options?.wallframeLandscape === true;
       const outW = wallLand ? WALLFRAME_LAND_W : WALLFRAME_W;
       const outH = wallLand ? WALLFRAME_LAND_H : WALLFRAME_H;
       const cardSurface = createSurface(outW, outH);

docker/frontend/src/i18n/en.ts

@@ -59,8 +59,8 @@ export const en: Dict = {
   'frame.polaroid': 'RETRO INSTANT',
   'frame.classic': 'CLASSIC BORDER',
   'frame.cinematic': 'CINEMATIC',
-  'frame.wall': 'WALL FRAME',
-  'frame.wallLand': 'WALL LANDSCAPE',
+  'frame.wall': 'WALL FRAME PORTRAIT',
+  'frame.wallLand': 'WALL FRAME LANDSCAPE',
 
   'crop.none': 'NO CROP',
   'crop.1:1': '1:1',

docker/frontend/src/i18n/vi.ts

@@ -62,8 +62,8 @@ export const vi = {
   'frame.polaroid': 'RETRO INSTANT',
   'frame.classic': 'VIỀN CLASSIC',
   'frame.cinematic': 'ĐIỆN ẢNH',
-  'frame.wall': 'WALL FRAME',
-  'frame.wallLand': 'WALL LANDSCAPE',
+  'frame.wall': 'WALL FRAME PORTRAIT',
+  'frame.wallLand': 'WALL FRAME LANDSCAPE',
 
   'crop.none': 'KHÔNG CẮT',
   'crop.1:1': '1:1',