moving supported formats to the config #561 #97

Author: bpatrik

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": {

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;
+}

package-lock.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",

package.json

@@ -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

src/common/SupportedFormats.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()

src/common/config/public/ClientConfig.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;