moving supported formats to the config #561 #97

2025-10-30 23:57:43 +02:00 · 2022-11-25 22:56:33 +01:00
parent e345da5e05
commit 11fffd4a5d
7 changed files with 99 additions and 32 deletions
--- a/angular.json
+++ b/angular.json
@@ -70,7 +70,7 @@
      },
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "localize": true,
            "aot": true,
@@ -103,7 +103,11 @@
            "scripts": [
              "node_modules/marked/marked.min.js"
            ],
-            "i18nMissingTranslation": "warning"
+            "i18nMissingTranslation": "warning",
+            "customWebpackConfig": {
+              "path": "./angular.webpack.js",
+              "replaceDuplicatePlugins": true
+            }
          },
          "configurations": {
            "dev": {
@@ -147,7 +151,7 @@
          }
        },
        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "pigallery2:build"
          },
@@ -158,13 +162,13 @@
          }
        },
        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular-builders/custom-webpack:extract-i18n",
          "options": {
            "browserTarget": "pigallery2:build"
          }
        },
        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular-builders/custom-webpack:karma",
          "options": {
            "main": "src/frontend/test.ts",
            "karmaConfig": "./karma.conf.js",
@@ -190,7 +194,11 @@
                "input": "node_modules/leaflet/dist/images/",
                "output": "./assets/"
              }
-            ]
+            ],
+            "customWebpackConfig": {
+              "path": "./angular.webpack.js",
+              "replaceDuplicatePlugins": true
+            }
          }
        },
        "lint": {
--- a/angular.webpack.js
+++ b/angular.webpack.js
@@ -0,0 +1,16 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires,no-undef
+const webpack = require('webpack');
+
+/**
+ * Custom angular webpack configuration
+ */
+module.exports = (config, options) => {
+  config.plugins = [
+    ...config.plugins,
+    new webpack.IgnorePlugin({
+      resourceRegExp: /config\/private\/Config/,
+    })
+  ];
+
+  return config;
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
        "pigallery2": "src/backend/index.js"
      },
      "devDependencies": {
-        "@angular-devkit/build-angular": "13.3.1",
+        "@angular-builders/custom-webpack": "13.1.0",
        "@angular-devkit/build-optimizer": "0.1302.1",
        "@angular-eslint/builder": "13.1.0",
        "@angular-eslint/eslint-plugin": "13.1.0",
@@ -143,6 +143,24 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/@angular-builders/custom-webpack": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/@angular-builders/custom-webpack/-/custom-webpack-13.1.0.tgz",
+      "integrity": "sha512-qhtnAv1i7agk14zeKZZfXjrckYt37OZ+3tsTBLhf3ZFbwREK8L1SNi8xhZ1j1JLGsf2Dp0GEcZrSYeFDweo0WA==",
+      "dev": true,
+      "dependencies": {
+        "@angular-devkit/architect": ">=0.1300.0 < 0.1400.0",
+        "@angular-devkit/build-angular": "^13.0.0",
+        "@angular-devkit/core": "^13.0.0",
+        "lodash": "^4.17.15",
+        "ts-node": "^10.0.0",
+        "tsconfig-paths": "^3.9.0",
+        "webpack-merge": "^5.7.3"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
    "node_modules/@angular-devkit/architect": {
      "version": "0.1303.1",
      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1303.1.tgz",
@@ -22936,6 +22954,21 @@
        "sourcemap-codec": "1.4.8"
      }
    },
+    "@angular-builders/custom-webpack": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/@angular-builders/custom-webpack/-/custom-webpack-13.1.0.tgz",
+      "integrity": "sha512-qhtnAv1i7agk14zeKZZfXjrckYt37OZ+3tsTBLhf3ZFbwREK8L1SNi8xhZ1j1JLGsf2Dp0GEcZrSYeFDweo0WA==",
+      "dev": true,
+      "requires": {
+        "@angular-devkit/architect": ">=0.1300.0 < 0.1400.0",
+        "@angular-devkit/build-angular": "^13.0.0",
+        "@angular-devkit/core": "^13.0.0",
+        "lodash": "^4.17.15",
+        "ts-node": "^10.0.0",
+        "tsconfig-paths": "^3.9.0",
+        "webpack-merge": "^5.7.3"
+      }
+    },
    "@angular-devkit/architect": {
      "version": "0.1303.1",
      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1303.1.tgz",
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
    "typeorm": "0.3.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "13.3.1",
+    "@angular-builders/custom-webpack": "13.1.0",
    "@angular-devkit/build-optimizer": "0.1302.1",
    "@angular-eslint/builder": "13.1.0",
    "@angular-eslint/eslint-plugin": "13.1.0",
--- a/src/common/SupportedFormats.ts
+++ b/src/common/SupportedFormats.ts
@@ -1,30 +1,26 @@
+import {ClientClass} from './config/public/Config';
+
+let Config: ClientClass;
+
+if (typeof window !== 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  Config = require('./config/public/Config').Config;
+} else {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  Config = require('./config/private/Config').Config;
+}
+
 export const SupportedFormats = {
-  Photos: ['gif', 'jpeg', 'jpg', 'jpe', 'png', 'webp', 'svg', 'heic'],
+  Photos: Config.Client.Media.Photo.supportedFormats,
  // Browser supported video formats
  // Read more:  https://www.w3schools.com/html/html5_video.asp
-  Videos: ['mp4', 'webm', 'ogv', 'ogg'],
-  MetaFiles: ['gpx', 'pg2conf', 'md'],
+  Videos: Config.Client.Media.Video.supportedFormats,
+  MetaFiles: Config.Client.MetaFile.supportedFormats,
  // These formats need to be transcoded (with the build-in ffmpeg support)
  TranscodeNeed: {
    // based on libvips, all supported formats for sharp: https://github.com/libvips/libvips
    Photos: [] as string[],
-    Videos: [
-      'avi',
-      'mkv',
-      'mov',
-      'wmv',
-      'flv',
-      'mts',
-      'm2ts',
-      'mpg',
-      '3gp',
-      'm4v',
-      'mpeg',
-      'vob',
-      'divx',
-      'xvid',
-      'ts',
-    ],
+    Videos: Config.Client.Media.Video.supportedFormatsWithTranscoding,
  },
  // --------------------------------------------
  // Below this, it is autogenerated, DO NOT EDIT
--- a/src/common/config/public/ClientConfig.ts
+++ b/src/common/config/public/ClientConfig.ts
@@ -170,6 +170,16 @@ export class ClientOtherConfig {
 export class ClientVideoConfig {
  @ConfigProperty()
  enabled: boolean = true;
+  @ConfigProperty({
+    arrayType: 'string',
+    description: 'Video formats that are supported after transcoding (with the build-in ffmpeg support)'
+  })
+  supportedFormatsWithTranscoding: string[] = ['avi', 'mkv', 'mov', 'wmv', 'flv', 'mts', 'm2ts', 'mpg', '3gp', 'm4v', 'mpeg', 'vob', 'divx', 'xvid', 'ts'];
+  // Browser supported video formats
+  // Read more:  https://www.w3schools.com/html/html5_video.asp
+  @ConfigProperty({arrayType: 'string', description: 'Video formats that are supported also without transcoding'})
+  supportedFormats: string[] = ['mp4', 'webm', 'ogv', 'ogg'];
+
 }

@SubConfigClass()
@@ -187,6 +197,8 @@ export class ClientPhotoConfig {
      'Enables loading the full resolution image on zoom in the ligthbox (preview).',
  })
  loadFullImageOnZoom: boolean = true;
+  @ConfigProperty({arrayType: 'string'})
+  supportedFormats: string[] = ['gif', 'jpeg', 'jpg', 'jpe', 'png', 'webp', 'svg'];
 }

@SubConfigClass()
@@ -226,6 +238,8 @@ export class ClientMetaFileConfig {
      'Reads *.pg2conf files (You can use it for custom sorting and save search (albums)).',
  })
  pg2conf: boolean = true;
+  @ConfigProperty({arrayType: 'string'})
+  supportedFormats: string[] = ['gpx', 'pg2conf', 'md'];
 }

@SubConfigClass()
--- a/src/common/entities/MediaDTO.ts
+++ b/src/common/entities/MediaDTO.ts
@@ -1,7 +1,7 @@
-import { DirectoryPathDTO } from './DirectoryDTO';
-import { PhotoDTO } from './PhotoDTO';
-import { FileDTO } from './FileDTO';
-import { SupportedFormats } from '../SupportedFormats';
+import {DirectoryPathDTO} from './DirectoryDTO';
+import {PhotoDTO} from './PhotoDTO';
+import {FileDTO} from './FileDTO';
+import {SupportedFormats} from '../SupportedFormats';

 export interface MediaDTO extends FileDTO {
  id: number;