diff --git a/README.md b/README.md index 9760801..435693f 100644 --- 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: diff --git a/backend/middlewares/AdminMWs.ts b/backend/middlewares/AdminMWs.ts index 00500d1..9223453 100644 --- 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; diff --git a/common/config/public/ConfigClass.ts b/common/config/public/ConfigClass.ts index 31b7c96..f2abd83 100644 --- 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, diff --git a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html index f1e7173..e285d65 100644 --- 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"> -
{{gridPhoto.media.name}}
+
{{Title}}
diff --git a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts index f6f9d02..9f15c89 100644 --- 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 ((this.gridPhoto.media).metadata.caption) { + if ((this.gridPhoto.media).metadata.caption.length > 20) { + return (this.gridPhoto.media).metadata.caption.substring(0, 17) + '...'; + } + return (this.gridPhoto.media).metadata.caption; + } + return this.gridPhoto.media.name; + } + /* onImageLoad() { this.loading.show = false; diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html index 1e4eb6e..e5d3c5b 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html +++ b/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'): ''"> -
{{Title}}
+ [ngClass]="(controllersDimmed && !controllersAlwaysOn) ? (activePhoto && activePhoto.gridPhoto.isVideo() ? 'dim-controls-video' :'dim-controls'): ''"> +
{{Title}}
+ title="info key: i" i18n-title>
+ title="toggle fullscreen, key: f" i18n-title> @@ -44,14 +44,14 @@
+ title="toggle fullscreen, key: f" i18n-title>
+ title="close, key: Escape" i18n-title> diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts index c1a903f..20a00dc 100644 --- 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; 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; }; diff --git a/frontend/app/settings/other/other.settings.component.html b/frontend/app/settings/other/other.settings.component.html index 138d89b..8ec99d6 100644 --- a/frontend/app/settings/other/other.settings.component.html +++ b/frontend/app/settings/other/other.settings.component.html @@ -107,6 +107,27 @@
+
+ +
+ + + Show the caption (IPTC 120) tags from the EXIF data instead of the filenames. + +
+
+ +

Navigation bar:

diff --git a/frontend/app/settings/settings.service.ts b/frontend/app/settings/settings.service.ts index 19af1d1..a830518 100644 --- 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, diff --git a/frontend/translate/messages.en.xlf b/frontend/translate/messages.en.xlf index d84d774..6d0a89a 100644 --- a/frontend/translate/messages.en.xlf +++ b/frontend/translate/messages.en.xlf @@ -108,16 +108,16 @@ download - - info + + info key: i app/gallery/lightbox/lightbox.gallery.component.html 31 - info + info key: i - - toggle fullscreen + + toggle fullscreen, key: f app/gallery/lightbox/lightbox.gallery.component.html 38 @@ -126,15 +126,15 @@ app/gallery/lightbox/lightbox.gallery.component.html 47 - toggle fullscreen + toggle fullscreen, key: f - - close + + close, key: Escape app/gallery/lightbox/lightbox.gallery.component.html 54 - close + close, key: Escape key: left arrow @@ -649,7 +649,7 @@ app/settings/other/other.settings.component.html - 147 + 168 Save @@ -690,7 +690,7 @@ app/settings/other/other.settings.component.html - 150 + 171 Reset @@ -1192,11 +1192,28 @@ Caches directory contents and search results for better performance + + Caption first naming + + app/settings/other/other.settings.component.html + 111 + + Caption first naming + + + Show the caption (IPTC 120) tags from the EXIF data instead of the filenames. + + + app/settings/other/other.settings.component.html + 125 + + Show the caption (IPTC 120) tags from the EXIF data instead of the filenames. + Navigation bar: app/settings/other/other.settings.component.html - 110 + 131 Navigation bar: @@ -1204,7 +1221,7 @@ Show item count app/settings/other/other.settings.component.html - 112 + 133 Show item count @@ -1213,7 +1230,7 @@ app/settings/other/other.settings.component.html - 126 + 147 Show the number of items (photos) in the folder @@ -1221,7 +1238,7 @@ Default photo sorting method app/settings/other/other.settings.component.html - 134 + 155 Default photo sorting method diff --git a/frontend/translate/messages.hu.xlf b/frontend/translate/messages.hu.xlf index 810671d..50e3e0f 100644 --- a/frontend/translate/messages.hu.xlf +++ b/frontend/translate/messages.hu.xlf @@ -108,16 +108,16 @@ letöltés - - info + + info key: i app/gallery/lightbox/lightbox.gallery.component.html 31 - info + info gyorsgomb: i - - toggle fullscreen + + toggle fullscreen, key: f app/gallery/lightbox/lightbox.gallery.component.html 38 @@ -126,15 +126,15 @@ app/gallery/lightbox/lightbox.gallery.component.html 47 - teljes képernyőre váltás + teljes képernyős váltás, gyorsgomb: f - - close + + close, key: Escape app/gallery/lightbox/lightbox.gallery.component.html 54 - bezárás + bezárás, gyorsgomb: escape key: left arrow @@ -142,7 +142,7 @@ app/gallery/lightbox/lightbox.gallery.component.html 68 - billentyű: balra nyíl + gyorsgomb: balra nyíl key: right arrow @@ -150,7 +150,7 @@ app/gallery/lightbox/lightbox.gallery.component.html 72 - billentyű: jobbra nyíl + gyorsgomb: jobbra nyíl Search @@ -649,7 +649,7 @@ app/settings/other/other.settings.component.html - 147 + 168 Mentés @@ -690,7 +690,7 @@ app/settings/other/other.settings.component.html - 150 + 171 Visszaállítás @@ -1192,11 +1192,28 @@ Cache-eli a könyvtár tartalmát és a keresési eredményeket a gyorsabb betöltés érdekében + + Caption first naming + + app/settings/other/other.settings.component.html + 111 + + Képaláírás alapú elnevezés + + + Show the caption (IPTC 120) tags from the EXIF data instead of the filenames. + + + app/settings/other/other.settings.component.html + 125 + + Fájl nev helyett a képaláírás (IPTC 120) címkét mutatja, amit az EXIF-adatokból nyert ki. + Navigation bar: app/settings/other/other.settings.component.html - 110 + 131 Navigációs sáv: @@ -1204,7 +1221,7 @@ Show item count app/settings/other/other.settings.component.html - 112 + 133 Az elemek számának megjelenítése @@ -1213,7 +1230,7 @@ app/settings/other/other.settings.component.html - 126 + 147 A mappában lévő elemek (fotók) számának mutatása @@ -1221,7 +1238,7 @@ Default photo sorting method app/settings/other/other.settings.component.html - 134 + 155 Az alapértelmezett fotó rendezés @@ -1769,4 +1786,4 @@ - \ No newline at end of file +