feat: Add dark simple, retro (#50)

web/src/pages/frame/page.tsx

@@ -16,21 +16,27 @@ import monitorWithoutGridLines from './themes/monitor-without-grid-lines.theme';
 import crop1x1 from './themes/crop-1:1.theme';
 import crop4x5 from './themes/crop-4:5.theme';
 import instagramFrame from './themes/instagram.theme';
+import darkStrapFrame from './themes/dark-strap.theme';
+import darkSimpleFrame from './themes/dark-simple.theme';
+import retroFrame from './themes/retro.theme';
 
 const FramePage = () => {
   const frames = [
     { name: 'No Frame', func: noFrame },
     { name: 'Cinema Scope', func: cinemaScope },
     { name: 'Grid Lines', func: gridLines },
     { name: 'Simple', func: simpleFrame },
+    { name: 'Dark Simple', func: darkSimpleFrame },
     { name: 'Compact', func: compactFrame },
     { name: 'Strap', func: strapFrame },
+    { name: 'Dark Strap', func: darkStrapFrame },
     { name: 'Inside', func: insideFrame },
     { name: 'Monitor', func: monitor },
     { name: 'Monitor Without Grid Lines', func: monitorWithoutGridLines },
     { name: 'Crop 1:1', func: crop1x1 },
     { name: 'Crop 4:5', func: crop4x5 },
     { name: 'Instagram', func: instagramFrame },
+    { name: 'Retro', func: retroFrame },
   ];
 
   const [photos, setPhotos] = useState<Photo[]>([]);

web/src/pages/frame/themes/dark-simple.theme.ts

@@ -0,0 +1,39 @@
+import Photo from '../domain/photo';
+
+const calculateMargin = (image: HTMLImageElement) => {
+  return image.width > image.height
+    ? { top: image.width * 0.05, right: image.width * 0.05, bottom: image.width * 0.05 * 2, left: image.width * 0.05 }
+    : { top: image.height * 0.05, right: image.height * 0.05, bottom: image.height * 0.05 * 2, left: image.height * 0.05 };
+};
+
+const darkSimpleFrame = (photo: Photo) => {
+  const { canvas, context, image } = photo.forRender;
+  const { cameraModel, lensModel, focalLength, iso, aperture, shutterSpeed } = photo.toMetadata();
+  const { top, right, bottom, left } = calculateMargin(image);
+
+  canvas.width = image.width + left + right;
+  canvas.height = image.height + top + bottom;
+
+  context.fillStyle = '#000000';
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  context.drawImage(image, left, top, image.width, image.height);
+
+  const fontSize = image.height > image.width ? image.width * 0.035 : image.height * 0.035;
+  context.fillStyle = '#ffffff';
+  context.font = `normal 200 ${fontSize}px Barlow`;
+  context.textAlign = 'center';
+  context.textBaseline = 'middle';
+  context.fillText(
+    [cameraModel, lensModel].filter(Boolean).join(' | '),
+    canvas.width / 2,
+    canvas.height - bottom / 2 - fontSize / 2 - fontSize / 7
+  );
+  context.fillText(
+    [focalLength, aperture, iso, shutterSpeed].filter(Boolean).join(' | '),
+    canvas.width / 2,
+    canvas.height - bottom / 2 + fontSize / 2 + fontSize / 7
+  );
+};
+
+export default darkSimpleFrame;

web/src/pages/frame/themes/dark-strap.theme.ts

@@ -0,0 +1,52 @@
+import Photo from '../domain/photo';
+
+const calculateMargin = (image: HTMLImageElement) => {
+  return image.width > image.height
+    ? { top: 0, right: 0, bottom: image.width * 0.04 * 2, left: 0 }
+    : { top: 0, right: 0, bottom: image.height * 0.04 * 2, left: 0 };
+};
+
+const darkStrapFrame = (photo: Photo) => {
+  const { canvas, context, image } = photo.forRender;
+  const { cameraModel, lensModel, focalLength, iso, aperture, shutterSpeed, capturedAt } = photo.toMetadata();
+  const { top, right, bottom, left } = calculateMargin(image);
+
+  canvas.width = image.width + left + right;
+  canvas.height = image.height + top + bottom;
+
+  context.fillStyle = '#000000';
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  context.drawImage(image, left, top, image.width, image.height);
+
+  const fontSize = image.height > image.width ? image.width * 0.025 : image.height * 0.025;
+  context.fillStyle = '#ffffff';
+  context.font = `normal 500 ${fontSize}px Barlow`;
+  context.textAlign = 'left';
+  context.textBaseline = 'middle';
+  context.fillText([iso, aperture, shutterSpeed].filter(Boolean).join(' '), fontSize, canvas.height - bottom / 2 - fontSize / 1.8);
+
+  context.fillStyle = '#808080';
+  context.font = `normal 300 ${fontSize}px Barlow`;
+  context.textAlign = 'left';
+  context.textBaseline = 'middle';
+  context.fillText([capturedAt === '?' ? '' : capturedAt].filter(Boolean).join(' '), fontSize, canvas.height - bottom / 2 + fontSize / 1.8);
+
+  context.fillStyle = '#ffffff';
+  context.font = `normal 500 ${fontSize}px Barlow`;
+  context.textAlign = 'right';
+  context.textBaseline = 'middle';
+  context.fillText([cameraModel].filter(Boolean).join(' '), canvas.width - fontSize, canvas.height - bottom / 2 - fontSize / 1.8);
+
+  context.fillStyle = '#808080';
+  context.font = `normal 300 ${fontSize}px Barlow`;
+  context.textAlign = 'right';
+  context.textBaseline = 'middle';
+  context.fillText(
+    [lensModel, focalLength].filter(Boolean).join(' '),
+    canvas.width - fontSize,
+    canvas.height - bottom / 2 + fontSize / 1.8
+  );
+};
+
+export default darkStrapFrame;

web/src/pages/frame/themes/retro.theme.ts

@@ -0,0 +1,25 @@
+import Photo from '../domain/photo';
+
+const calculateMargin = (image: HTMLImageElement) => {
+  return image.width > image.height
+    ? { top: image.width * 0.2, right: image.width * 0.2, bottom: image.width * 0.2, left: image.width * 0.2 }
+    : { top: image.height * 0.2, right: image.height * 0.2, bottom: image.height * 0.2, left: image.height * 0.2 };
+};
+
+const retroFrame = (photo: Photo) => {
+  const { canvas, context, image } = photo.forRender;
+  const { top, right, bottom, left } = calculateMargin(image);
+
+  canvas.width = image.width + left + right;
+  canvas.height = image.height + top + bottom;
+
+  context.fillStyle = '#000000';
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  context.fillStyle = '#ffffff';
+  context.fillRect(top / 7, bottom / 7, canvas.width - (top / 7) * 2, canvas.height - (bottom / 7) * 2);
+
+  context.drawImage(image, left, top, image.width, image.height);
+};
+
+export default retroFrame;