improving caption support and lightboy shortcuts

README.md

@@ -2,9 +2,11 @@
 [![npm version](https://badge.fury.io/js/pigallery2.svg)](https://badge.fury.io/js/pigallery2)
 [![Build Status](https://travis-ci.org/bpatrik/pigallery2.svg?branch=master)](https://travis-ci.org/bpatrik/pigallery2)
 [![Heroku](https://heroku-badge.herokuapp.com/?app=pigallery2&style=flat)](https://pigallery2.herokuapp.com)
+[![Docker Build Status](https://img.shields.io/docker/build/bpatrik/pigallery2.svg)](https://hub.docker.com/r/bpatrik/pigallery2/)
 [![dependencies Status](https://david-dm.org/bpatrik/pigallery2/status.svg)](https://david-dm.org/bpatrik/pigallery2)
 [![devDependencies Status](https://david-dm.org/bpatrik/pigallery2/dev-status.svg)](https://david-dm.org/bpatrik/pigallery2?type=dev)
 
+
 Homepage: http://bpatrik.github.io/pigallery2/
 
 This is a directory-first photo gallery website, optimised for running on low resource servers (especially on raspberry pi)
@@ -33,8 +35,8 @@ sudo apt-get install -y nodejs
 
 Full node install on raspberry pi description: https://www.w3schools.com/nodejs/nodejs_raspberrypi.asp
  
-### 1.1.2 Install PiGallery2
+### 1.1.1 Install PiGallery2
-#### 1.1.2-a Install from release
+#### 1.1.1-a Install from release
 
 ```bash
 cd ~
@@ -43,7 +45,7 @@ unzip pigallery2.zip
 cd pigallery2
 npm install
 ```
-#### 1.1.2-b Install from source
+#### 1.1.1-b Install from source
 ```bash
 cd ~
 wget https://github.com/bpatrik/pigallery2/archive/master.zip
@@ -53,7 +55,7 @@ npm install
 ```
 **Note**: if you run `npm run build-release`, it creates a clean, minified, production ready version from the app in the `release` folder, that is ready to deploy.
 
-#### 1.1.3 Run PiGallery2
+#### 1.1.2 Run PiGallery2
 ```bash
 npm start
 ```
@@ -78,12 +80,25 @@ After the container is up and running, you go to `http://localhost` and log in w
 
 **Note**: You dont need to do the installation steps if you are using docker. 
 
-### 1.3 Useful links/tips:
+
+### 1.3 Advanced configuration
+You can set up the app the following ways:
+ * Using the UI
+ * Manually editing the `config.json`
+ * Through switches
+   * Like: `node backend/index.js --Server-port=3000 --Client-authenticationRequired=false`
+   * You can check the generated `config.json` for the config hierarchy
+ * Through environmental variable
+   * like set env. variable `Server-port` to `3000`   
+
+### 1.4 Useful links/tips:
 
 #### using nginx
+It is recommended to use a reverse proxy like nginx before node
 https://stackoverflow.com/questions/5009324/node-js-nginx-what-now
 
 #### making https
+With cerbot & nginx it is simple to set up secure connection. You have no excuse not doing so.
 https://certbot.eff.org/
 
 #### node install error:

backend/middlewares/AdminMWs.ts

@@ -315,6 +315,7 @@ export class AdminMWs {
     try {
       const settings: OtherConfigDTO = req.body.settings;
       Config.Client.Other.enableCache = settings.Client.enableCache;
+      Config.Client.Other.captionFirstNaming = settings.Client.captionFirstNaming;
       Config.Client.Other.enableOnScrollRendering = settings.Client.enableOnScrollRendering;
       Config.Client.Other.enableOnScrollThumbnailPrioritising = settings.Client.enableOnScrollThumbnailPrioritising;
       Config.Client.Other.defaultPhotoSortingMethod = settings.Client.defaultPhotoSortingMethod;
@@ -323,6 +324,7 @@ export class AdminMWs {
       // only updating explicitly set config (not saving config set by the diagnostics)
       const original: PrivateConfigClass = Config.original();
       original.Client.Other.enableCache = settings.Client.enableCache;
+      original.Client.Other.captionFirstNaming = settings.Client.captionFirstNaming;
       original.Client.Other.enableOnScrollRendering = settings.Client.enableOnScrollRendering;
       original.Client.Other.enableOnScrollThumbnailPrioritising = settings.Client.enableOnScrollThumbnailPrioritising;
       original.Client.Other.defaultPhotoSortingMethod = settings.Client.defaultPhotoSortingMethod;

common/config/public/ConfigClass.ts

@@ -42,6 +42,7 @@ export module ClientConfig {
     defaultPhotoSortingMethod: SortingMethods;
     enableOnScrollThumbnailPrioritising: boolean;
     NavBar: NavBarConfig;
+    captionFirstNaming: boolean; // shows the caption instead of the filename in the phot grid
   }
 
   export interface VideoConfig {
@@ -111,6 +112,7 @@ export class PublicConfigClass {
       enabled: true
     },
     Other: {
+      captionFirstNaming: false,
       enableCache: true,
       enableOnScrollRendering: true,
       enableOnScrollThumbnailPrioritising: true,

frontend/app/gallery/grid/photo/photo.grid.gallery.component.html

@@ -23,7 +23,7 @@
        [style.margin-top.px]="infoBar.marginTop"
        [style.background]="infoBar.background"
        [style.width.px]="container.nativeElement.offsetWidth">
-    <div class="photo-name">{{gridPhoto.media.name}}</div>
+    <div class="photo-name">{{Title}}</div>
 
     <div class="photo-position" *ngIf="gridPhoto.hasPositionData()">
       <span class="oi oi-map-marker"></span>

frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts

@@ -124,6 +124,19 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
 
   }
 
+  get Title(): string {
+    if (Config.Client.Other.captionFirstNaming === false) {
+      return this.gridPhoto.media.name;
+    }
+    if ((<PhotoDTO>this.gridPhoto.media).metadata.caption) {
+      if ((<PhotoDTO>this.gridPhoto.media).metadata.caption.length > 20) {
+        return (<PhotoDTO>this.gridPhoto.media).metadata.caption.substring(0, 17) + '...';
+      }
+      return (<PhotoDTO>this.gridPhoto.media).metadata.caption;
+    }
+    return this.gridPhoto.media.name;
+  }
+
   /*
    onImageLoad() {
    this.loading.show = false;

frontend/app/gallery/lightbox/lightbox.gallery.component.html

@@ -16,8 +16,8 @@
     id="controllers-container"
     #controls
     [style.width.px]="getPhotoFrameWidth()"
-    [ngClass]="!controllersDimmed ? (activePhoto && activePhoto.gridPhoto.isVideo() ? 'dim-controls-video' :'dim-controls'):  ''">
+    [ngClass]="(controllersDimmed && !controllersAlwaysOn) ? (activePhoto && activePhoto.gridPhoto.isVideo() ? 'dim-controls-video' :'dim-controls'):  ''">
-    <div class="controls-caption"  *ngIf="Title">{{Title}}</div>
+    <div class="controls-caption" *ngIf="Title">{{Title}}</div>
     <div class="controls controls-top">
       <a *ngIf="activePhoto"
          class="highlight control-button"
@@ -28,14 +28,14 @@
       </a>
 
       <div class=" highlight control-button" (click)="toggleInfoPanel()"
-           title="info" i18n-title>
+           title="info key: i" i18n-title>
         <span class="oi oi-info"></span>
       </div>
 
       <div *ngIf="fullScreenService.isFullScreenEnabled()"
            class=" highlight control-button"
            (click)="fullScreenService.exitFullScreen()"
-           title="toggle fullscreen" i18n-title>
+           title="toggle fullscreen, key: f" i18n-title>
         <span class="oi oi-fullscreen-exit">
 
         </span>
@@ -44,14 +44,14 @@
       <div *ngIf="!fullScreenService.isFullScreenEnabled()"
            class="highlight control-button"
            (click)="fullScreenService.showFullScreen(root)"
-           title="toggle fullscreen" i18n-title>
+           title="toggle fullscreen, key: f" i18n-title>
         <span class="oi oi-fullscreen-enter">
         </span>
       </div>
 
       <div class="highlight control-button"
            (click)="hide()"
-           title="close" i18n-title>
+           title="close, key: Escape" i18n-title>
         <span class="oi oi-x">
 
         </span>

frontend/app/gallery/lightbox/lightbox.gallery.component.ts

@@ -41,6 +41,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
 
   @ViewChild('photo') mediaElement: GalleryLightboxMediaComponent;
   @ViewChild('lightbox') lightboxElement: ElementRef;
+  @ViewChild('root') root: HTMLElement;
 
   public navigation = {hasPrev: true, hasNext: true};
   public blackCanvasOpacity = 0;
@@ -60,7 +61,8 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
   private timer: Observable<number>;
   private timerSub: Subscription;
   public playBackState = 0;
-  public controllersDimmed = true;
+  public controllersDimmed = false;
+  public controllersAlwaysOn = false;
   public controllersVisible = true;
 
   public infoPanelVisible = false;
@@ -235,6 +237,29 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
           this.prevImage();
         }
         break;
+      case 'i':
+      case 'I':
+        if (this.isInfoPanelAnimating()) {
+          return;
+        }
+        if (this.infoPanelVisible) {
+          this.hideInfoPanel(true);
+        } else {
+          this.showInfoPanel();
+        }
+        break;
+      case 'f':
+      case 'F':
+        if (this.fullScreenService.isFullScreenEnabled()) {
+          this.fullScreenService.exitFullScreen();
+        } else {
+          this.fullScreenService.showFullScreen(this.root);
+        }
+        break;
+      case 'c':
+      case 'C':
+        this.controllersAlwaysOn = !this.controllersAlwaysOn;
+        break;
       case 'ArrowRight':
         if (this.activePhotoId < this.gridPhotoQL.length - 1) {
           this.nextImage();
@@ -373,6 +398,10 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     this.playBackState = 1;
   }
 
+  isInfoPanelAnimating(): boolean {
+    return this.iPvisibilityTimer != null;
+  }
+
   showInfoPanel() {
     this.infoPanelVisible = true;
 
@@ -461,7 +490,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
   }
 
   private showControls() {
-    this.controllersDimmed = true;
+    this.controllersDimmed = false;
     if (this.visibilityTimer != null) {
       clearTimeout(this.visibilityTimer);
     }
@@ -469,8 +498,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
   }
 
   private hideControls = () => {
-
+    this.controllersDimmed = true;
-    this.controllersDimmed = false;
   };
 
 

frontend/app/settings/other/other.settings.component.html

@@ -107,6 +107,27 @@
       </div>
 
 
+      <div class="form-group row">
+        <label class="col-md-2 control-label" for="enableCache" i18n>Caption first naming</label>
+        <div class="col-md-10">
+          <bSwitch
+            id="captionFirstNaming"
+            class="switch"
+            name="captionFirstNaming"
+            [switch-on-color]="'primary'"
+            [switch-inverse]="'inverse'"
+            [switch-off-text]="text.Disabled"
+            [switch-on-text]="text.Enabled"
+            [switch-handle-width]="'100'"
+            [switch-label-width]="'20'"
+            [(ngModel)]="settings.Client.captionFirstNaming">
+          </bSwitch>
+          <small class="form-text text-muted" i18n>Show the caption (IPTC 120) tags from the EXIF data instead of the filenames.
+          </small>
+        </div>
+      </div>
+
+
       <p class="title" i18n>Navigation bar:</p>
       <div class="form-group row">
         <label class="col-md-2 control-label" for="showItemCount" [hidden]="simplifiedMode" i18n>Show item count</label>

frontend/app/settings/settings.service.ts

@@ -44,6 +44,7 @@ export class SettingsService {
           enabled: true
         },
         Other: {
+          captionFirstNaming: false,
           enableCache: true,
           enableOnScrollRendering: true,
           enableOnScrollThumbnailPrioritising: true,

frontend/translate/messages.en.xlf

@@ -108,16 +108,16 @@
         </context-group>
         <target>download</target>
       </trans-unit>
-      <trans-unit id="d3f952f7e85f196637e4536a1939c01f8a68d7da" datatype="html">
+      <trans-unit id="1b39202792f1e79300ba55f5615910525c482e80" datatype="html">
-        <source>info</source>
+        <source>info key: i</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">31</context>
         </context-group>
-        <target>info</target>
+        <target>info key: i</target>
       </trans-unit>
-      <trans-unit id="a9c1983f028dd7c8079b2a379465c7a8d3e0b2cb" datatype="html">
+      <trans-unit id="75d395063772653b542109d690691e092511a851" datatype="html">
-        <source>toggle fullscreen</source>
+        <source>toggle fullscreen, key: f</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">38</context>
@@ -126,15 +126,15 @@
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">47</context>
         </context-group>
-        <target>toggle fullscreen</target>
+        <target>toggle fullscreen, key: f</target>
       </trans-unit>
-      <trans-unit id="e329f67417e3574eda9988c92b15c0e29df1dd1b" datatype="html">
+      <trans-unit id="d78be78234111c1ca3a1d28d981a05ed6ce5d38d" datatype="html">
-        <source>close</source>
+        <source>close, key: Escape</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">54</context>
         </context-group>
-        <target>close</target>
+        <target>close, key: Escape</target>
       </trans-unit>
       <trans-unit id="774684628600c4622be2ed1dab5e1525c03b7bd3" datatype="html">
         <source>key: left arrow</source>
@@ -649,7 +649,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">147</context>
+          <context context-type="linenumber">168</context>
         </context-group>
         <target>Save</target>
       </trans-unit>
@@ -690,7 +690,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">150</context>
+          <context context-type="linenumber">171</context>
         </context-group>
         <target>Reset</target>
       </trans-unit>
@@ -1192,11 +1192,28 @@
         </context-group>
         <target>Caches directory contents and search results for better performance</target>
       </trans-unit>
+      <trans-unit id="444a85e1dff192c11fecdb4ae588a422ea385077" datatype="html">
+        <source>Caption first naming</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
+          <context context-type="linenumber">111</context>
+        </context-group>
+        <target>Caption first naming</target>
+      </trans-unit>
+      <trans-unit id="90071eef3ad802369d399deba98443736668765d" datatype="html">
+        <source>Show the caption (IPTC 120) tags from the EXIF data instead of the filenames.
+          </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
+          <context context-type="linenumber">125</context>
+        </context-group>
+        <target>Show the caption (IPTC 120) tags from the EXIF data instead of the filenames.</target>
+      </trans-unit>
       <trans-unit id="0efc9c8107ab5af400ea695f606b9a4b2637f947" datatype="html">
         <source>Navigation bar:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">110</context>
+          <context context-type="linenumber">131</context>
         </context-group>
         <target>Navigation bar:</target>
       </trans-unit>
@@ -1204,7 +1221,7 @@
         <source>Show item count</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">112</context>
+          <context context-type="linenumber">133</context>
         </context-group>
         <target>Show item count</target>
       </trans-unit>
@@ -1213,7 +1230,7 @@
           </source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">126</context>
+          <context context-type="linenumber">147</context>
         </context-group>
         <target>Show the number of items (photos) in the folder</target>
       </trans-unit>
@@ -1221,7 +1238,7 @@
         <source>Default photo sorting method</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">134</context>
+          <context context-type="linenumber">155</context>
         </context-group>
         <target>Default photo sorting method</target>
       </trans-unit>

frontend/translate/messages.hu.xlf

@@ -108,16 +108,16 @@
         </context-group>
         <target>letöltés</target>
       </trans-unit>
-      <trans-unit id="d3f952f7e85f196637e4536a1939c01f8a68d7da" datatype="html">
+      <trans-unit id="1b39202792f1e79300ba55f5615910525c482e80" datatype="html">
-        <source>info</source>
+        <source>info key: i</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">31</context>
         </context-group>
-        <target>info</target>
+        <target>info gyorsgomb: i</target>
       </trans-unit>
-      <trans-unit id="a9c1983f028dd7c8079b2a379465c7a8d3e0b2cb" datatype="html">
+      <trans-unit id="75d395063772653b542109d690691e092511a851" datatype="html">
-        <source>toggle fullscreen</source>
+        <source>toggle fullscreen, key: f</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">38</context>
@@ -126,15 +126,15 @@
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">47</context>
         </context-group>
-        <target>teljes képernyőre váltás</target>
+        <target>teljes képernyős váltás, gyorsgomb: f</target>
       </trans-unit>
-      <trans-unit id="e329f67417e3574eda9988c92b15c0e29df1dd1b" datatype="html">
+      <trans-unit id="d78be78234111c1ca3a1d28d981a05ed6ce5d38d" datatype="html">
-        <source>close</source>
+        <source>close, key: Escape</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">54</context>
         </context-group>
-        <target>bezárás</target>
+        <target>bezárás, gyorsgomb: escape</target>
       </trans-unit>
       <trans-unit id="774684628600c4622be2ed1dab5e1525c03b7bd3" datatype="html">
         <source>key: left arrow</source>
@@ -142,7 +142,7 @@
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">68</context>
         </context-group>
-        <target>billentyű: balra nyíl</target>
+        <target>gyorsgomb: balra nyíl</target>
       </trans-unit>
       <trans-unit id="063218892255510d21ef1cd3797ef59729730964" datatype="html">
         <source>key: right arrow</source>
@@ -150,7 +150,7 @@
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">72</context>
         </context-group>
-        <target>billentyű: jobbra nyíl</target>
+        <target>gyorsgomb: jobbra nyíl</target>
       </trans-unit>
       <trans-unit id="7e892ba15f2c6c17e83510e273b3e10fc32ea016" datatype="html">
         <source>Search</source>
@@ -649,7 +649,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">147</context>
+          <context context-type="linenumber">168</context>
         </context-group>
         <target>Mentés</target>
       </trans-unit>
@@ -690,7 +690,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">150</context>
+          <context context-type="linenumber">171</context>
         </context-group>
         <target>Visszaállítás</target>
       </trans-unit>
@@ -1192,11 +1192,28 @@
         </context-group>
         <target>Cache-eli a könyvtár tartalmát és a keresési eredményeket a gyorsabb betöltés érdekében</target>
       </trans-unit>
+      <trans-unit id="444a85e1dff192c11fecdb4ae588a422ea385077" datatype="html">
+        <source>Caption first naming</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
+          <context context-type="linenumber">111</context>
+        </context-group>
+        <target>Képaláírás alapú elnevezés</target>
+      </trans-unit>
+      <trans-unit id="90071eef3ad802369d399deba98443736668765d" datatype="html">
+        <source>Show the caption (IPTC 120) tags from the EXIF data instead of the filenames.
+          </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
+          <context context-type="linenumber">125</context>
+        </context-group>
+        <target>Fájl nev helyett a képaláírás (IPTC 120) címkét mutatja, amit az EXIF-adatokból nyert ki.</target>
+      </trans-unit>
       <trans-unit id="0efc9c8107ab5af400ea695f606b9a4b2637f947" datatype="html">
         <source>Navigation bar:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">110</context>
+          <context context-type="linenumber">131</context>
         </context-group>
         <target>Navigációs sáv:</target>
       </trans-unit>
@@ -1204,7 +1221,7 @@
         <source>Show item count</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">112</context>
+          <context context-type="linenumber">133</context>
         </context-group>
         <target>Az elemek számának megjelenítése</target>
       </trans-unit>
@@ -1213,7 +1230,7 @@
           </source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">126</context>
+          <context context-type="linenumber">147</context>
         </context-group>
         <target>A mappában lévő elemek (fotók) számának mutatása</target>
       </trans-unit>
@@ -1221,7 +1238,7 @@
         <source>Default photo sorting method</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/settings/other/other.settings.component.html</context>
-          <context context-type="linenumber">134</context>
+          <context context-type="linenumber">155</context>
         </context-group>
         <target>Az alapértelmezett fotó rendezés</target>
       </trans-unit>
@@ -1769,4 +1786,4 @@
       </trans-unit>
     </body>
   </file>
-</xliff>
+</xliff>