improving caption support and lightboy shortcuts

2018-12-06 13:50:55 +01:00 · 2018-12-06 13:50:55 +01:00 · e4214c65e8
commit e4214c65e8
parent b15d102c84
11 changed files with 165 additions and 49 deletions
--- a/README.md
+++ b/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.2-a Install from release
+### 1.1.1 Install PiGallery2
+#### 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:
--- a/backend/middlewares/AdminMWs.ts
+++ b/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;
--- a/common/config/public/ConfigClass.ts
+++ b/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,
--- a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html
+++ b/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>
--- a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts
+++ b/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;
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
@ -16,7 +16,7 @@
    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 controls-top">
      <a *ngIf="activePhoto"
@ -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>
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
+++ b/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 = false;
+    this.controllersDimmed = true;
  };


--- a/frontend/app/settings/other/other.settings.component.html
+++ b/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>
--- a/frontend/app/settings/settings.service.ts
+++ b/frontend/app/settings/settings.service.ts
@ -44,6 +44,7 @@ export class SettingsService {
          enabled: true
        },
        Other: {
+          captionFirstNaming: false,
          enableCache: true,
          enableOnScrollRendering: true,
          enableOnScrollThumbnailPrioritising: true,
--- a/frontend/translate/messages.en.xlf
+++ b/frontend/translate/messages.en.xlf
@ -108,16 +108,16 @@
        </context-group>
        <target>download</target>
      </trans-unit>
-      <trans-unit id="d3f952f7e85f196637e4536a1939c01f8a68d7da" datatype="html">
-        <source>info</source>
+      <trans-unit id="1b39202792f1e79300ba55f5615910525c482e80" datatype="html">
+        <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">
-        <source>toggle fullscreen</source>
+      <trans-unit id="75d395063772653b542109d690691e092511a851" datatype="html">
+        <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">
-        <source>close</source>
+      <trans-unit id="d78be78234111c1ca3a1d28d981a05ed6ce5d38d" datatype="html">
+        <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>
--- a/frontend/translate/messages.hu.xlf
+++ b/frontend/translate/messages.hu.xlf
@ -108,16 +108,16 @@
        </context-group>
        <target>letöltés</target>
      </trans-unit>
-      <trans-unit id="d3f952f7e85f196637e4536a1939c01f8a68d7da" datatype="html">
-        <source>info</source>
+      <trans-unit id="1b39202792f1e79300ba55f5615910525c482e80" datatype="html">
+        <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">
-        <source>toggle fullscreen</source>
+      <trans-unit id="75d395063772653b542109d690691e092511a851" datatype="html">
+        <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">
-        <source>close</source>
+      <trans-unit id="d78be78234111c1ca3a1d28d981a05ed6ce5d38d" datatype="html">
+        <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>