From 8a212763eb4c2350302105d1554ea8d253eeb9dd Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 15 Feb 2024 16:08:27 +0100 Subject: [PATCH 01/16] Run with some ugly post install steps --- package.json | 8 ++++---- src/index.js | 10 ++++++++-- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 92db028..060d7e9 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,11 @@ "license": "ISC", "dependencies": { "css-loader": "^3.6.0", - "mirador": "^3.3.0", - "mirador-image-tools": "^0.11.0", + "mirador": "git+https://github.com/SCENE-CE/mirador-video#mui5-annotation-on-video-stable", + "mirador-annotation-editor": "^1.0.1", "parcel-bundler": "^1.12.4", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "react": "^17.0.0", + "react-dom": "^17.0.0", "style-loader": "^1.2.1", "webpack": "^4.43.0", "webpack-cli": "^3.3.12" diff --git a/src/index.js b/src/index.js index 2e8b000..704a050 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import Mirador from 'mirador/dist/es/src/index'; -import { miradorImageToolsPlugin } from 'mirador-image-tools'; +import annotationPlugins from 'mirador-annotation-editor'; +import LocalStorageAdapter from 'mirador-annotation-editor/es/LocalStorageAdapter'; const config = { id: 'demo', @@ -15,8 +16,13 @@ const config = { }, }, }, + annotation: { + adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`), + // adapter: (canvasId) => new AnnototAdapter(canvasId, endpointUrl), + exportLocalStorageAnnotations: false, // display annotation JSON export button + }, }; Mirador.viewer(config, [ - ...miradorImageToolsPlugin, + ...annotationPlugins, ]); From b2d59bd98f13da93cd8bcabebe3e00909ba024c0 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 15 Feb 2024 16:39:17 +0100 Subject: [PATCH 02/16] Mirador and mirator annotations editor plugin running smoothly --- package.json | 22 ++++++++-- webpack/webpack.config.js | 91 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 110 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 060d7e9..75c7819 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "name": "mirador-integration", "version": "0.0.0", "description": "", - "private": true, "scripts": { "parcel": "parcel parcel/index.html", "webpack": "webpack --config webpack/webpack.config.js", @@ -18,7 +17,24 @@ "react": "^17.0.0", "react-dom": "^17.0.0", "style-loader": "^1.2.1", - "webpack": "^4.43.0", - "webpack-cli": "^3.3.12" + "webpack": "^5.70.0", + "webpack-cli": "^5.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.17.6", + "@babel/core": "^7.17.7", + "@babel/plugin-proposal-class-properties": "^7.16.7", + "@babel/plugin-proposal-object-rest-spread": "^7.17.3", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@babel/plugin-transform-regenerator": "^7.16.7", + "@babel/plugin-transform-runtime": "^7.17.0", + "@babel/preset-env": "^7.16.11", + "@babel/preset-react": "^7.16.7", + "babel-loader": "^9.1.0", + "babel-plugin-lodash": "^3.3.4", + "babel-plugin-macros": "^3.0.1", + "babel-plugin-transform-react-remove-prop-types": "^0.4.24", + "html-webpack-plugin": "^4.5.0", + "webpack-dev-server": "^3.11.0" } } diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js index 25c398e..196e5b1 100644 --- a/webpack/webpack.config.js +++ b/webpack/webpack.config.js @@ -1,10 +1,101 @@ const path = require('path'); +const fs = require('fs'); + module.exports = { entry: './src/index.js', + module: { + rules: [ + { + include: path.resolve(fs.realpathSync(process.cwd()), '.'), // CRL + loader: require.resolve('babel-loader'), + options: { + // Save disk space when time isn't as important + cacheCompression: true, + cacheDirectory: true, + compact: true, + envName: 'development', + presets: [ + ['@babel/preset-env', + { + corejs: 3, + exclude: ['transform-typeof-symbol'], + forceAllTransforms: true, + modules: false, + useBuiltIns: 'entry', + }], + [ + '@babel/preset-react', + { + development: true, + runtime: 'automatic', + useBuiltIns: true, + }, + ], + ], + plugins:[ + 'babel-plugin-macros', + '@babel/plugin-transform-destructuring', + [ + '@babel/plugin-proposal-class-properties', + { + loose: true, + }, + ], + ['@babel/plugin-proposal-private-property-in-object', { loose: true }], + [ + '@babel/plugin-proposal-object-rest-spread', + { + useBuiltIns: true, + }, + ], + [ + '@babel/plugin-transform-runtime', + { + corejs: false, + helpers: false, // Needed to support IE/Edge + regenerator: true, + }, + ], + [ + '@babel/plugin-transform-regenerator', + { + async: false, + }, + ], + ['transform-react-remove-prop-types', + { + ignoreFilenames: ['node_modules'], + removeImport: true, + }, + ], + ['lodash', { + id: [ + 'lodash', + ], + }, + ], + ], + }, + test: /\.(js|mjs|jsx)$/, + }, + { + test: /\.css$/i, + use: ['style-loader', 'css-loader'], + }, + ], + }, output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), publicPath: './dist/', }, + mode: 'development', + resolve: { + alias: { + 'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js', + 'react/jsx-runtime': 'react/jsx-runtime.js', + }, + extensions: ['.js'], + }, }; From e1e7a0aab826e4df462d103da6b7434849c333d8 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 15 Feb 2024 16:40:48 +0100 Subject: [PATCH 03/16] Update README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4baf1cf..ad0f948 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,10 @@ This repository is designed to show integrating Mirador 3 with modern frontend b You will likely need to have at least the following dependencies available in your `package.json`. - - `mirador` + - `mirador-video` (custom Mirador with video support for annotation) - `react` - `react-dom` - - `mirador-image-tools` - A plugin just to test plugin integration + - `mirador-annotation-edition` ### Webpack From 21c86e060e010962e6c2acb59ef591e6ddf7e930 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 15 Feb 2024 16:41:35 +0100 Subject: [PATCH 04/16] Update ignore to avoid commiting intellij file --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 8aea253..683c796 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules/ dist/ package-lock.json .cache/ +.idea/ From 39b2e58010c15fa4fac3294b54d3a9529420c6b7 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 15 Feb 2024 16:43:06 +0100 Subject: [PATCH 05/16] Update info in package json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 75c7819..b25aa90 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "mirador-integration", + "name": "mirador-integration-scene-video", "version": "0.0.0", - "description": "", + "description": "Integration of Mirador with SCENE plugins", "scripts": { "parcel": "parcel parcel/index.html", "webpack": "webpack --config webpack/webpack.config.js", From 9400a82dbcc4469c9bd04dee4d35c90d1bb24391 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 15 Feb 2024 17:15:53 +0100 Subject: [PATCH 06/16] Update dependancy to use latest mirador video and mae plugins --- package.json | 4 ++-- src/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index b25aa90..224f4eb 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ "license": "ISC", "dependencies": { "css-loader": "^3.6.0", - "mirador": "git+https://github.com/SCENE-CE/mirador-video#mui5-annotation-on-video-stable", - "mirador-annotation-editor": "^1.0.1", + "mirador": "npm:mirador-video@^1.0.0", + "mirador-annotation-editor": "^1.0.2", "parcel-bundler": "^1.12.4", "react": "^17.0.0", "react-dom": "^17.0.0", diff --git a/src/index.js b/src/index.js index 704a050..e57e2b0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import Mirador from 'mirador/dist/es/src/index'; +import Mirador from 'mirador-video/dist/es/src/index'; import annotationPlugins from 'mirador-annotation-editor'; import LocalStorageAdapter from 'mirador-annotation-editor/es/LocalStorageAdapter'; From 5114476844a2c31c9fe4ec9078204a48cdf56fae Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 15 Feb 2024 17:40:56 +0100 Subject: [PATCH 07/16] fix import in demo --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index e57e2b0..704a050 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import Mirador from 'mirador-video/dist/es/src/index'; +import Mirador from 'mirador/dist/es/src/index'; import annotationPlugins from 'mirador-annotation-editor'; import LocalStorageAdapter from 'mirador-annotation-editor/es/LocalStorageAdapter'; From 9b8a11d55f4b6d4549e5bb0eb5020ea53f9f152d Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Mon, 19 Feb 2024 14:52:56 +0100 Subject: [PATCH 08/16] Clean index file, simplify package.json, update readme --- README.md | 12 ++---------- package.json | 2 +- src/index.js | 15 +++++++-------- 3 files changed, 10 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index ad0f948..19d741e 100644 --- a/README.md +++ b/README.md @@ -2,16 +2,8 @@ This repository is designed to show integrating Mirador 3 with modern frontend build systems. -### Dependencies -You will likely need to have at least the following dependencies available in your `package.json`. - - - `mirador-video` (custom Mirador with video support for annotation) - - `react` - - `react-dom` - - `mirador-annotation-edition` - -### Webpack +### Build with webpack See `./webpack` for a basic webpack setup for Mirador 3 + a plugin. @@ -19,7 +11,7 @@ See `./webpack` for a basic webpack setup for Mirador 3 + a plugin. npm run webpack ``` -### Parcel +### Run with parcel See `./parcel`, but essentially it is just an html file referencing the JavaScript. diff --git a/package.json b/package.json index 224f4eb..a4dfb49 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "dependencies": { "css-loader": "^3.6.0", "mirador": "npm:mirador-video@^1.0.0", - "mirador-annotation-editor": "^1.0.2", + "mirador-annotations": "npm:mirador-annotation-editor@^1.0.2", "parcel-bundler": "^1.12.4", "react": "^17.0.0", "react-dom": "^17.0.0", diff --git a/src/index.js b/src/index.js index 704a050..60e0171 100644 --- a/src/index.js +++ b/src/index.js @@ -1,18 +1,17 @@ import Mirador from 'mirador/dist/es/src/index'; -import annotationPlugins from 'mirador-annotation-editor'; -import LocalStorageAdapter from 'mirador-annotation-editor/es/LocalStorageAdapter'; +import annotationPlugins from 'mirador-annotations'; +import LocalStorageAdapter from 'mirador-annotations/es/LocalStorageAdapter'; const config = { id: 'demo', - windows: [{ - imageToolsEnabled: true, - imageToolsOpen: true, - manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest', - }], + catalog: [ + { manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest' }, + { manifestId: 'https://files.tetras-libre.fr/dev/Clock/manifest.json'} + ], theme: { palette: { primary: { - main: '#1967d2', + main: '#6e8678', }, }, }, From 71cbf95bb5c84ac14c62d62048a684bce18bf85f Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Mon, 19 Feb 2024 14:59:20 +0100 Subject: [PATCH 09/16] Use latest version of MAE plugin --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a4dfb49..a69515a 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "dependencies": { "css-loader": "^3.6.0", "mirador": "npm:mirador-video@^1.0.0", - "mirador-annotations": "npm:mirador-annotation-editor@^1.0.2", + "mirador-annotations": "npm:mirador-annotation-editor@^1.0.3", "parcel-bundler": "^1.12.4", "react": "^17.0.0", "react-dom": "^17.0.0", From ef9350a4e08a7eee50a2e4a6f4ebf448c609d82c Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 25 Apr 2024 11:27:46 +0200 Subject: [PATCH 10/16] Lock version to have R17 wroking --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index a69515a..85328bd 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ "license": "ISC", "dependencies": { "css-loader": "^3.6.0", - "mirador": "npm:mirador-video@^1.0.0", - "mirador-annotations": "npm:mirador-annotation-editor@^1.0.3", + "mirador": "npm:mirador-video@1.0.0", + "mirador-annotations": "npm:mirador-annotation-editor@1.0.3", "parcel-bundler": "^1.12.4", "react": "^17.0.0", "react-dom": "^17.0.0", From 8f5a23f431284ac7b39c02da41ad34ecf1531066 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 26 Sep 2024 22:52:34 +0200 Subject: [PATCH 11/16] Fix LocalStorage Adapter path --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 60e0171..0ac4272 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import Mirador from 'mirador/dist/es/src/index'; import annotationPlugins from 'mirador-annotations'; -import LocalStorageAdapter from 'mirador-annotations/es/LocalStorageAdapter'; +import LocalStorageAdapter from 'mirador-annotations/es/annotationAdapter/LocalStorageAdapter'; const config = { id: 'demo', From d005ef94bbaf5ae55dba23a694b0b38cf534414a Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 26 Sep 2024 22:53:01 +0200 Subject: [PATCH 12/16] Use latest version of MAE MV --- package.json | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 85328bd..cea9663 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,11 @@ "license": "ISC", "dependencies": { "css-loader": "^3.6.0", - "mirador": "npm:mirador-video@1.0.0", - "mirador-annotations": "npm:mirador-annotation-editor@1.0.3", + "mirador": "npm:mirador-video@1.0.6", + "mirador-annotations": "npm:mirador-annotation-editor@1.0.31", "parcel-bundler": "^1.12.4", - "react": "^17.0.0", - "react-dom": "^17.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0", "style-loader": "^1.2.1", "webpack": "^5.70.0", "webpack-cli": "^5.0.0" @@ -36,5 +36,10 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "html-webpack-plugin": "^4.5.0", "webpack-dev-server": "^3.11.0" + }, + "overrides": { + "mirador": { + "react-dnd": "^16.0.1" + } } } From 232b945eeac6f63249197de77902b1ee233ff820 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 26 Sep 2024 22:53:20 +0200 Subject: [PATCH 13/16] Fix compilation jsx runtime error --- webpack/webpack.config.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js index 196e5b1..be56cf3 100644 --- a/webpack/webpack.config.js +++ b/webpack/webpack.config.js @@ -92,10 +92,7 @@ module.exports = { }, mode: 'development', resolve: { - alias: { - 'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js', - 'react/jsx-runtime': 'react/jsx-runtime.js', - }, + extensions: ['.js'], }, }; From b0339fdf1900ad1b4ce5b5e9987531e8a1f03b16 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 26 Sep 2024 22:58:10 +0200 Subject: [PATCH 14/16] Dont know why but some dependancies require SVG loader. MAE work --- package.json | 1 + webpack/webpack.config.js | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/package.json b/package.json index cea9663..13cd776 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "babel-plugin-macros": "^3.0.1", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "html-webpack-plugin": "^4.5.0", + "svg-inline-loader": "^0.8.2", "webpack-dev-server": "^3.11.0" }, "overrides": { diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js index be56cf3..ca50727 100644 --- a/webpack/webpack.config.js +++ b/webpack/webpack.config.js @@ -83,6 +83,10 @@ module.exports = { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, + { + test: /\.svg$/, + loader: 'svg-inline-loader' + } ], }, output: { From cc718b1f0492da12db89af74005d5818f1cec978 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 26 Sep 2024 22:59:51 +0200 Subject: [PATCH 15/16] Update Mirador to M4 and add clean scripts entrynpm --- package.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 13cd776..25527c3 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,15 @@ "scripts": { "parcel": "parcel parcel/index.html", "webpack": "webpack --config webpack/webpack.config.js", - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "clean": "rm -rf dist", + "clean-deps": "rm -rf node_modules package-lock.json" }, "author": "", "license": "ISC", "dependencies": { "css-loader": "^3.6.0", - "mirador": "npm:mirador-video@1.0.6", + "mirador": "4.0.0-alpha.2", "mirador-annotations": "npm:mirador-annotation-editor@1.0.31", "parcel-bundler": "^1.12.4", "react": "^18.0.0", From 64dfb440c947ce86e5007df25023f0e62d5871a9 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon Date: Thu, 26 Sep 2024 23:18:51 +0200 Subject: [PATCH 16/16] Fix main color and package name for upstream --- package.json | 4 ++-- src/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 25527c3..7fec92a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "mirador-integration-scene-video", + "name": "mirador-integration", "version": "0.0.0", - "description": "Integration of Mirador with SCENE plugins", + "description": "Integration of Mirador with some plugins", "scripts": { "parcel": "parcel parcel/index.html", "webpack": "webpack --config webpack/webpack.config.js", diff --git a/src/index.js b/src/index.js index 0ac4272..243257c 100644 --- a/src/index.js +++ b/src/index.js @@ -11,7 +11,7 @@ const config = { theme: { palette: { primary: { - main: '#6e8678', + main: '#1967d2', }, }, },