Automatically generate thumbnail sizes (#59)

* automatically generate thumbnail sizes * multiply instead of divide for canvases where height is larger than width * upgrade storybook * replace storybook styling addon * remove unused OSD icons
cu-mkp · Sep 13, 2023 · 91d2e89 · 91d2e89
1 parent bd97f17
commit 91d2e89
Show file tree

Hide file tree

Showing 42 changed files with 18,699 additions and 20,337 deletions.
diff --git a/editioncrafter/.storybook/main.js b/editioncrafter/.storybook/main.js
@@ -5,14 +5,50 @@ const config = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    {
-      name: '@storybook/addon-styling',
-      options: {
-        sass: {
-          implementation: require('sass'),
-        },
-      },
-    },
+    "@storybook/addon-styling-webpack",
+    ({
+        name: "@storybook/addon-styling-webpack",
+
+        options: {
+          rules: [{
+        test: /\.css$/,
+        sideEffects: true,
+        use: [
+            require.resolve("style-loader"),
+            {
+                loader: require.resolve("css-loader"),
+                options: {
+
+
+                },
+            },
+        ],
+      },{
+        test: /\.s[ac]ss$/,
+        sideEffects: true,
+        use: [
+            require.resolve("style-loader"),
+            {
+                loader: require.resolve("css-loader"),
+                options: {
+
+                    importLoaders: 2,
+                },
+            },
+            require.resolve("resolve-url-loader"),
+            {
+                loader: require.resolve("sass-loader"),
+                options: {
+                    // Want to add more Sass options? Read more here: https://webpack.js.org/loaders/sass-loader/#options
+                    implementation: require.resolve("sass"),
+                    sourceMap: true,
+                    sassOptions: {},
+                },
+            },
+        ],
+      },],
+        }
+    })
   ],
   framework: {
     name: "@storybook/react-webpack5",

diff --git a/editioncrafter/package-lock.json b/editioncrafter/package-lock.json
diff --git a/editioncrafter/package.json b/editioncrafter/package.json
@@ -52,13 +52,13 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@storybook/addon-essentials": "^7.2.2",
-    "@storybook/addon-interactions": "^7.2.2",
-    "@storybook/addon-links": "^7.2.2",
-    "@storybook/addon-styling": "^1.3.6",
-    "@storybook/blocks": "^7.2.2",
-    "@storybook/react": "^7.2.2",
-    "@storybook/react-webpack5": "^7.2.2",
+    "@storybook/addon-essentials": "^7.4.1",
+    "@storybook/addon-interactions": "^7.4.1",
+    "@storybook/addon-links": "^7.4.1",
+    "@storybook/addon-styling-webpack": "0.0.4",
+    "@storybook/blocks": "^7.4.1",
+    "@storybook/react": "^7.4.1",
+    "@storybook/react-webpack5": "^7.4.1",
     "@storybook/testing-library": "0.2.0",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
@@ -96,9 +96,10 @@
     "react-refresh": "^0.14.0",
     "redux-mock-store": "^1.5.1",
     "redux-saga-test-plan": "^4.0.6",
+    "resolve-url-loader": "^5.0.0",
     "sass": "^1.61.0",
     "sass-loader": "^13.2.2",
-    "storybook": "^7.2.2",
+    "storybook": "^7.4.1",
     "style-loader": "^3.3.2",
     "terser-webpack-plugin": "^5.3.1",
     "unfetch": "^4.1.0",

diff --git a/editioncrafter/src/action/DocumentActions.js b/editioncrafter/src/action/DocumentActions.js
@@ -55,10 +55,10 @@ function parseImageURLs(canvas) {
       if (annotation.type !== 'Annotation') throwError(`Expected Annotation in items property of ${annotationPage.id}`);
       if (annotation.motivation === 'painting') {
         if (!annotation.body) throwError(`Expected body property in Annotation ${annotation.id}`);
-        if (!annotation.body.thumbnail) throwError(`Expected body.thumbnail property in Annotation ${annotation.id}`);
-        const thumbnailURL = annotation.body.thumbnail[0].id;
-        if (!thumbnailURL) throwError(`Unable to find thumbnail for resource: ${annotation.body.id}`);
-        return { imageURL: `${annotation.body.id}/info.json`, thumbnailURL };
+        return {
+          bodyId: annotation.body.id,
+          imageURL: `${annotation.body.id}/info.json`,
+        };
       }
     }
   }
@@ -109,6 +109,9 @@ function parseAnnotationURLs(canvas, transcriptionTypes) {
   return annos;
 }
 
+// The largest dimension for either width or height allowed in a thumbnail.
+const MAX_THUMBNAIL_DIMENSION = 130;
+
 function parseManifest(manifest, transcriptionTypes) {
   const folios = [];
 
@@ -127,9 +130,20 @@ function parseManifest(manifest, transcriptionTypes) {
     if (!canvas.id) throwError(`Expected items[${i}] to have an id property.`);
     const folioID = canvas.id.substr(canvas.id.lastIndexOf('/') + 1);
     const canvasLabel = parseLabel(canvas);
-    const { imageURL, thumbnailURL } = parseImageURLs(canvas);
+    const { bodyId, imageURL } = parseImageURLs(canvas);
     const annotationURLs = parseAnnotationURLs(canvas, transcriptionTypes);
 
+    const ratio = canvas.width / canvas.height;
+
+    let thumbnailDimensions = [];
+    if (ratio > 1) {
+      thumbnailDimensions = [MAX_THUMBNAIL_DIMENSION, Math.round(MAX_THUMBNAIL_DIMENSION / ratio)];
+    } else {
+      thumbnailDimensions = [Math.round(MAX_THUMBNAIL_DIMENSION * ratio), MAX_THUMBNAIL_DIMENSION];
+    }
+
+    const thumbnailURL = `${bodyId}/full/${thumbnailDimensions.join(',')}/0/default.jpg`;
+
     const folio = {
       id: folioID,
       name: canvasLabel,

diff --git a/editioncrafter/src/component/ImageView.js b/editioncrafter/src/component/ImageView.js
@@ -53,7 +53,7 @@ const ImageView = (props) => {
         element: el,
         zoomInButton: in_id,
         zoomOutButton: out_id,
-        prefixUrl: './img/openseadragon/',
+        showNavigationControl: false,
         zoomPerClick: 1,
       });
 

diff --git a/editioncrafter/src/img/openseadragon/button_grouphover.png b/editioncrafter/src/img/openseadragon/button_grouphover.png
diff --git a/editioncrafter/src/img/openseadragon/button_hover.png b/editioncrafter/src/img/openseadragon/button_hover.png
diff --git a/editioncrafter/src/img/openseadragon/button_pressed.png b/editioncrafter/src/img/openseadragon/button_pressed.png
diff --git a/editioncrafter/src/img/openseadragon/button_rest.png b/editioncrafter/src/img/openseadragon/button_rest.png
diff --git a/editioncrafter/src/img/openseadragon/fullpage_grouphover.png b/editioncrafter/src/img/openseadragon/fullpage_grouphover.png
diff --git a/editioncrafter/src/img/openseadragon/fullpage_hover.png b/editioncrafter/src/img/openseadragon/fullpage_hover.png
diff --git a/editioncrafter/src/img/openseadragon/fullpage_pressed.png b/editioncrafter/src/img/openseadragon/fullpage_pressed.png
diff --git a/editioncrafter/src/img/openseadragon/fullpage_rest.png b/editioncrafter/src/img/openseadragon/fullpage_rest.png
diff --git a/editioncrafter/src/img/openseadragon/home_grouphover.png b/editioncrafter/src/img/openseadragon/home_grouphover.png
diff --git a/editioncrafter/src/img/openseadragon/home_hover.png b/editioncrafter/src/img/openseadragon/home_hover.png
diff --git a/editioncrafter/src/img/openseadragon/home_pressed.png b/editioncrafter/src/img/openseadragon/home_pressed.png
diff --git a/editioncrafter/src/img/openseadragon/home_rest.png b/editioncrafter/src/img/openseadragon/home_rest.png
diff --git a/editioncrafter/src/img/openseadragon/next_grouphover.png b/editioncrafter/src/img/openseadragon/next_grouphover.png
diff --git a/editioncrafter/src/img/openseadragon/next_hover.png b/editioncrafter/src/img/openseadragon/next_hover.png
diff --git a/editioncrafter/src/img/openseadragon/next_pressed.png b/editioncrafter/src/img/openseadragon/next_pressed.png
diff --git a/editioncrafter/src/img/openseadragon/next_rest.png b/editioncrafter/src/img/openseadragon/next_rest.png
diff --git a/editioncrafter/src/img/openseadragon/previous_grouphover.png b/editioncrafter/src/img/openseadragon/previous_grouphover.png
diff --git a/editioncrafter/src/img/openseadragon/previous_hover.png b/editioncrafter/src/img/openseadragon/previous_hover.png
diff --git a/editioncrafter/src/img/openseadragon/previous_pressed.png b/editioncrafter/src/img/openseadragon/previous_pressed.png
diff --git a/editioncrafter/src/img/openseadragon/previous_rest.png b/editioncrafter/src/img/openseadragon/previous_rest.png
diff --git a/editioncrafter/src/img/openseadragon/rotateleft_grouphover.png b/editioncrafter/src/img/openseadragon/rotateleft_grouphover.png
diff --git a/editioncrafter/src/img/openseadragon/rotateleft_hover.png b/editioncrafter/src/img/openseadragon/rotateleft_hover.png
diff --git a/editioncrafter/src/img/openseadragon/rotateleft_pressed.png b/editioncrafter/src/img/openseadragon/rotateleft_pressed.png
diff --git a/editioncrafter/src/img/openseadragon/rotateleft_rest.png b/editioncrafter/src/img/openseadragon/rotateleft_rest.png
diff --git a/editioncrafter/src/img/openseadragon/rotateright_grouphover.png b/editioncrafter/src/img/openseadragon/rotateright_grouphover.png
diff --git a/editioncrafter/src/img/openseadragon/rotateright_hover.png b/editioncrafter/src/img/openseadragon/rotateright_hover.png
diff --git a/editioncrafter/src/img/openseadragon/rotateright_pressed.png b/editioncrafter/src/img/openseadragon/rotateright_pressed.png
diff --git a/editioncrafter/src/img/openseadragon/rotateright_rest.png b/editioncrafter/src/img/openseadragon/rotateright_rest.png
diff --git a/editioncrafter/src/img/openseadragon/zoomin_grouphover.png b/editioncrafter/src/img/openseadragon/zoomin_grouphover.png
diff --git a/editioncrafter/src/img/openseadragon/zoomin_hover.png b/editioncrafter/src/img/openseadragon/zoomin_hover.png
diff --git a/editioncrafter/src/img/openseadragon/zoomin_pressed.png b/editioncrafter/src/img/openseadragon/zoomin_pressed.png
diff --git a/editioncrafter/src/img/openseadragon/zoomin_rest.png b/editioncrafter/src/img/openseadragon/zoomin_rest.png
diff --git a/editioncrafter/src/img/openseadragon/zoomout_grouphover.png b/editioncrafter/src/img/openseadragon/zoomout_grouphover.png
diff --git a/editioncrafter/src/img/openseadragon/zoomout_hover.png b/editioncrafter/src/img/openseadragon/zoomout_hover.png
diff --git a/editioncrafter/src/img/openseadragon/zoomout_pressed.png b/editioncrafter/src/img/openseadragon/zoomout_pressed.png
diff --git a/editioncrafter/src/img/openseadragon/zoomout_rest.png b/editioncrafter/src/img/openseadragon/zoomout_rest.png
diff --git a/editioncrafter/src/scss/_imageGridView.scss b/editioncrafter/src/scss/_imageGridView.scss
@@ -16,7 +16,6 @@
 .imageGridComponent > ul > li {
 	margin-bottom: 20px;
 	width: 150px;
-	height: 220px;
 }
 
 .imageGridComponent > ul > li > figure {