fixing lightbox controls background

package-lock.json

@@ -27,7 +27,7 @@
         "sharp": "0.31.2",
         "ts-exif-parser": "0.2.2",
         "ts-node-iptc": "1.0.11",
-        "typeconfig": "2.0.24",
+        "typeconfig": "2.0.25",
         "typeorm": "0.3.10",
         "xml2js": "0.4.23"
       },
@@ -14587,9 +14587,12 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.6",
+      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/minipass": {
       "version": "3.1.6",
@@ -20822,18 +20825,13 @@
       }
     },
     "node_modules/typeconfig": {
-      "version": "2.0.24",
+      "version": "2.0.25",
-      "resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.0.24.tgz",
+      "resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.0.25.tgz",
-      "integrity": "sha512-djBNV0x/ZmOGvbq7/LhTG2mHfkZL6Lfox1MJ8g8Kvyxa2OP0tD0jJNVUX1lGzjBxw0G99uWDYCWFn08LCil+cA==",
+      "integrity": "sha512-f9PgNmhQEI0C3ZcndHECiEvqYMSecQyqynBWhNGvgeRGqzD6Vm+QTCBv0sIUllF0S0UovwhDGRYyd4Q6XKDuzA==",
       "dependencies": {
-        "minimist": "1.2.5"
+        "minimist": "1.2.7"
       }
     },
-    "node_modules/typeconfig/node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
-    },
     "node_modules/typed-assert": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/typed-assert/-/typed-assert-1.0.9.tgz",
@@ -33344,9 +33342,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.6",
+      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
     },
     "minipass": {
       "version": "3.1.6",
@@ -38128,18 +38126,11 @@
       }
     },
     "typeconfig": {
-      "version": "2.0.24",
+      "version": "2.0.25",
-      "resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.0.24.tgz",
+      "resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.0.25.tgz",
-      "integrity": "sha512-djBNV0x/ZmOGvbq7/LhTG2mHfkZL6Lfox1MJ8g8Kvyxa2OP0tD0jJNVUX1lGzjBxw0G99uWDYCWFn08LCil+cA==",
+      "integrity": "sha512-f9PgNmhQEI0C3ZcndHECiEvqYMSecQyqynBWhNGvgeRGqzD6Vm+QTCBv0sIUllF0S0UovwhDGRYyd4Q6XKDuzA==",
       "requires": {
-        "minimist": "1.2.5"
+        "minimist": "1.2.7"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
-        }
       }
     },
     "typed-assert": {

package.json

@@ -49,7 +49,7 @@
     "sharp": "0.31.2",
     "ts-exif-parser": "0.2.2",
     "ts-node-iptc": "1.0.11",
-    "typeconfig": "2.0.24",
+    "typeconfig": "2.0.25",
     "xml2js": "0.4.23",
     "typeorm": "0.3.10"
   },

src/common/config/private/PrivateConfig.ts

@@ -112,7 +112,7 @@ export class UserConfig {
 
 @SubConfigClass()
 export class ServerDataBaseConfig {
-  @ConfigProperty<DatabaseType, IPrivateConfig>({
+  @ConfigProperty<DatabaseType, IPrivateConfig, string>({
     type: DatabaseType,
     onNewValue: (value, config) => {
       if (config && value === DatabaseType.memory) {

src/common/config/public/ClientConfig.ts

@@ -77,7 +77,7 @@ export class MapLayers {
 
 @SubConfigClass()
 export class ClientMapConfig {
-  @ConfigProperty<boolean, IPrivateConfig>({
+  @ConfigProperty<boolean, IPrivateConfig, string>({
     onNewValue: (value, config) => {
       if (value === false) {
         config.Client.MetaFile.gpx = false;

src/common/config/public/Config.ts

@@ -19,7 +19,7 @@ declare namespace ServerInject {
   export const ConfigInject: ClientClass;
 }
 
-export const Config: IWebConfigClass & ClientClass =
+export const Config: IWebConfigClass<string> & ClientClass =
   WebConfigClassBuilder.attachInterface(new ClientClass());
 
 if (

src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css

@@ -50,7 +50,6 @@
   height: initial;
   text-align: right;
   width: 100%;
-  padding: 5px;
   font-size: large;
   opacity: 1;
   transition: width 0.3s ease-in-out, opacity 1s;
@@ -60,6 +59,12 @@
   -moz-transition: width 0.3s ease-in-out, opacity 1s;
 }
 
+.controls-background {
+  padding: 5px;
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+}
 
 
 .controls .control-button {
@@ -103,7 +108,6 @@
 }
 
 .controls-playback {
-  padding-right: 15px;
   bottom: 0;
   z-index: 3;
   position: absolute;
@@ -270,9 +274,11 @@ input[type="range"].zoom-progress::-moz-range-track {
 .dim-controls {
   opacity: 0.0;
 }
+
 .controls-caption.controls-nodim {
   opacity: 0.7;
 }
+
 .controls:hover {
   opacity: 1;
 }

src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html

@@ -5,7 +5,7 @@
 
   <div [class.dim-controls]="controllersDimmed"
        class="controls controls-top">
-
+    <div class="controls-background">
       <div class="highlight control-button" (click)="toggleInfoPanel.emit()"
            title="info key: i" i18n-title>
         <span class="oi oi-info"></span>
@@ -112,6 +112,7 @@
         </span>
       </div>
     </div>
+  </div>
 
   <div id="swipeable-container"
        (swipeleft)="zoom == 1 && nextPhoto.emit()"
@@ -186,6 +187,7 @@
 
   <div [class.dim-controls]="controllersDimmed" class="controls controls-playback"
        *ngIf="zoom == 1 && activePhoto && activePhoto.gridMedia.isPhoto()">
+    <div class="controls-background">
     <span class="oi oi-media-pause highlight control-button"
           [ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
           (click)="pause()"
@@ -200,6 +202,7 @@
             (click)="fastForward()"
             title="fast auto play"></span>
     </div>
+  </div>
 
   <div [class.dim-controls]="controllersDimmed" class="controls controls-big-play"
        *ngIf="activePhoto && activePhoto.gridMedia.isVideo() && mediaElement.Paused">