GH-33 - Add image captions as images, too

package.json

@@ -10,25 +10,26 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "@types/classnames": "^2.2.10",
     "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-helmet": "^5.0.8",
-    "axios": "^0.19.0",
-    "classnames": "^2.2.6",
-    "fs-extra": "^9.0.1",
+    "@types/react": "17.0.19",
+    "@types/react-dom": "17.0.11",
+    "@types/react-helmet": "6.1.11",
+    "axios": "1.7.7",
+    "classnames": "2.5.1",
+    "fs-extra": "11.2.0",
     "mobx": "^5.11.0",
     "mobx-react-lite": "^1.4.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-helmet": "^5.2.1",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-helmet": "6.1.0",
     "react-scripts": "5.0.1",
     "react-swipeable": "^5.4.0",
-    "rimraf": "^3.0.2",
+    "rimraf": "3.0.2",
     "typescript": "^4.0.3",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "4.2.3"
+  },
+  "resolutions": {
+    "@types/react": "17.0.19"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Head/Favicon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Helmet from 'react-helmet';
+import {Helmet} from 'react-helmet';
 import appleTouchIcon from '../../assets/favicon/apple-touch-icon.png';
 import favicon16 from '../../assets/favicon/favicon-16x16.png';
 import favicon32 from '../../assets/favicon/favicon-32x32.png';

src/components/Landing/Card.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import {FunctionComponent, useCallback, useRef, useMemo} from 'react';
-import {Card as MUICard, CardHeader, Grid, MenuItem} from '@material-ui/core';
+import {Card as MUICard, CardHeader, Grid, MenuItem, Typography} from '@material-ui/core';
 import {Medium} from './Medium';
 import {observer, useObservable} from 'mobx-react-lite';
 import {Fetcher} from '../../store/fetcher';
@@ -9,6 +8,7 @@ import {headers} from '../../services/auth';
 import {useObserver} from '../../services/use-observer';
 import {CommentsLoader} from './CommentsLoader';
 import {ActionMenu} from './ActionMenu';
+import { render } from 'react-dom';
 
 type AlbumResponse = APIResponse<GalleryAlbumResponse>;
 
@@ -60,29 +60,66 @@ export const Card: FunctionComponent<Props> = observer(({item}) => {
         canvas.width = Math.max(...stillImages.map((image) => image.width));
         canvas.height = stillImages.reduce((acc, curr) => acc + curr.height, 0);
         const ctx = canvas.getContext('2d');
+        if(!ctx) return;
+
+        const {font, lineHeight} = await (async () => {
+
+            const root = document.createElement("div");
+            document.body.appendChild(root);
+            await new Promise<any>(resolve => 
+                render(<Typography variant={'body1'}>text</Typography> as any, root, () => resolve(null)));
+
+            const map = root.querySelector<any>("p")!.computedStyleMap();
+            const fontSize = +map.get("font-size")!.toString().replace("px", "");
+            const lineHeight = +map.get("line-height")!.toString().replace("px", "");
+            const style = {
+                font: map.get("font")!.toString(),
+                lineHeight: fontSize * lineHeight,
+            };
+            root.remove();
+            return style;
+        })();
+        ctx.font = font;
 
         await Promise.all(
             stillImages
                 .reduce((acc, curr) => {
-                    if(acc.length === 0) {
-                        return [{y: 0, image: curr}];
+                    let height = curr.height;
+                    let description = [] as string[];
+                    if(curr.description) {
+                        description = curr.description.split(" ").reduce((acc, curr) => {
+                            const withNewWord = `${acc[acc.length - 1]} ${curr}`;
+                            if(ctx.measureText(withNewWord).width > canvas.width) {
+                                return [...acc, curr]
+                            }
+                            return [...acc.slice(0, acc.length - 1), withNewWord];
+                        }, [""]);
+                        height += description.length * lineHeight;
                     }
-                    return [...acc, {y: acc[acc.length - 1].y + acc[acc.length - 1].image.height, image: curr}];
-                }, [] as {y: number, image: any}[])
-                .map(async ({y, image}) => {
+                    let y = 0;
+                    if(acc.length > 0) {
+                        y = acc[acc.length - 1].y + acc[acc.length - 1].height
+                    }
+
+                    return [...acc, {height, y, image: curr, description}];
+                }, [] as {height: number, y: number, image: ImageResponse, description: string[]}[])
+                .map(async ({y, image, description}) => {
                     const img = new Image();
                     img.setAttribute('crossorigin', 'anonymous');
                     const promise = new Promise(resolve => img.onload = resolve);
                     img.src = image.link;
                     await promise;
-                    console.log()
-                    if(ctx)
-                        ctx.drawImage(img,0,y);
+                    ctx.drawImage(img,0,y);
+                    if(description.length) {
+                        const leading = ctx.measureText(description[0]).fontBoundingBoxAscent;
+                        for(let i = 0; i < description.length; i++)
+                            ctx.fillText(description[i], 0, y + image.height + leading + i * lineHeight)
+                    }
                 })
         )
 
         const a = document.createElement('a');
-        const blob = await new Promise<Blob>((resolve, reject) => canvas.toBlob((blob) => blob ? resolve(blob) : reject(blob)));
+        const blob = await new Promise<Blob>((resolve, reject) => canvas.toBlob(((blob) => blob ? resolve(blob) : reject())));
         a.href = window.URL.createObjectURL(blob);
         a.download = item.id;
         a.click();

src/components/Landing/CommentsLoader.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useCallback, useState} from 'react';
+import {FC, useCallback, useState} from 'react';
 import {
     Box,
     Button,

src/components/Landing/Landing.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {FunctionComponent, useCallback, useEffect, useState} from 'react';
 import {Box, CircularProgress, Grid, IconButton} from '@material-ui/core';
 import {observer, useObservable} from 'mobx-react-lite';

src/index.tsx

@@ -1,16 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {Root} from './components/Root';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
     <React.StrictMode>
         <Root/>
     </React.StrictMode>,
     document.getElementById('root'),
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+);

src/store/fetcher.ts

@@ -1,5 +1,5 @@
 import {action, computed, observable} from 'mobx';
-import {AxiosPromise, AxiosResponse} from 'axios';
+import {AxiosError, AxiosPromise, AxiosResponse} from 'axios';
 
 export type Silent = 'silent' | undefined;
 
@@ -29,8 +29,9 @@ export class Fetcher<T extends APIResponse<U>, U extends object = object> {
         try {
             response = await request;
         } catch (e) {
-            error = e;
-            if (e.response && e.response.data)
+            if(e instanceof Error)
+                error = e;
+            if (e instanceof AxiosError && e.response?.data)
                 error = e.response.data;
         }
         if (response !== null && response.data.success)

tsconfig.json

@@ -19,7 +19,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": [
     "src"