Add custom configuration

README.md

@@ -13,7 +13,7 @@ Share your Immich photos and albums in a safe way without exposing your Immich i
 - [Install with Docker](#how-to-install-with-docker)
 - [How to use it](#how-to-use-it)
 - [How it works](#how-it-works)
-- [Additional configuration](#configuration)
+- [Additional configuration](#additional-configuration)
 - [Feature requests](#feature-requests)
 
 ## About this project
@@ -82,7 +82,7 @@ Other than the initial configuration above, everything else is managed through I
 You share your photos/videos as normal through Immich. Because you have set the **External domain** in Immich settings
 to be the URL for your proxy app, the links that Immich generates will automaticaly have the correct URL:
 
-<img src="docs/share-link.webp" width="601" height="419">
+<img src="docs/share-link.webp" width="751" height="524">
 
 ## How it works
 
@@ -102,32 +102,40 @@ individual image or gallery.
 
 If the shared link has expired or any of the assets have been put in the Immich trash, it will not return those.
 
-## Configuration
+## Additional configuration
 
-The gallery is created using [lightGallery](https://github.com/sachinchoolur/lightGallery). You can change various settings to change how your gallery displays by
-updating the `lightGallery` section in `/views/gallery.ejs`:
+The gallery is created using [lightGallery](https://github.com/sachinchoolur/lightGallery). You can adjust various settings to customise how your gallery displays. 
 
-```javascript
-lightGallery(document.getElementById('lightgallery'), {
-  plugins: [lgZoom, lgThumbnail, lgVideo, lgFullscreen],
-  speed: 500
-})
+1. Make a copy of `config.json` in the same folder as your `docker-compose.yml`.
+
+2. Pass the config to your docker container by adding a volume like this:
+
+```yaml
+    volumes:
+      - ./config.json:/app/config.json:ro
 ```
 
-For example to disable the download button for images, you would add `download: false`:
-
-```javascript
-lightGallery(document.getElementById('lightgallery'), {
-  plugins: [lgZoom, lgThumbnail, lgVideo, lgFullscreen],
-  download: false,
-  speed: 500
-})
-```
+3. Restart your container and your custom configuration should be active.
 
 You can find all of lightGallery's settings here:
-
 https://www.lightgalleryjs.com/docs/settings/
 
+For example to disable the download button for images, you would change `download` to `false`:
+
+```json
+{
+  "lightGallery": {
+    "controls": true,
+    "download": false,
+    "mobileSettings": {
+      "controls": false,
+      "showCloseIcon": true,
+      "download": false
+    }
+  }
+}
+```
+
 ## Feature requests
 
 You can [add feature requests here](https://github.com/alangrainger/immich-public-proxy/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop),

config.json

@@ -0,0 +1,11 @@
+{
+  "lightGallery": {
+    "controls": true,
+    "download": true,
+    "mobileSettings": {
+      "controls": false,
+      "showCloseIcon": true,
+      "download": true
+    }
+  }
+}

docker-compose.yml

@@ -9,6 +9,8 @@ services:
       - NODE_ENV=production
     env_file:
       - .env
+    volumes:
+      - ./config.json:/app/config.json:ro
     healthcheck:
       test: node /app/healthcheck.js
       interval: 120s

package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich-public-proxy",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "scripts": {
     "dev": "ts-node src/index.ts",
     "build": "npx tsc",

public/web.js

@@ -1,11 +1,11 @@
-function initLightGallery () {
-  lightGallery(document.getElementById('lightgallery'), {
+function initLightGallery (config = {}) {
+  lightGallery(document.getElementById('lightgallery'), Object.assign({
     plugins: [lgZoom, lgThumbnail, lgVideo, lgFullscreen],
     /*
     This license key was graciously provided by LightGallery under their
     GPLv3 open-source project license:
     */
-    licenseKey: '8FFA6495-676C4D30-8BFC54B6-4D0A6CEC',
+    licenseKey: '8FFA6495-676C4D30-8BFC54B6-4D0A6CEC'
     /*
     Please do not take it and use it for other projects, as it was provided
     specifically for Immich Public Proxy.
@@ -15,6 +15,5 @@ function initLightGallery () {
 
     https://www.lightgalleryjs.com/docs/settings/#licenseKey
     */
-    speed: 500
-  })
+  }, config))
 }

src/render.ts

@@ -3,6 +3,16 @@ import { Response } from 'express-serve-static-core'
 import { Asset, AssetType, ImageSize, SharedLink } from './types'
 
 class Render {
+  lgConfig = {}
+
+  constructor () {
+    try {
+      // Import user-provided lightGallery config (if exists)
+      const config = require('../config.json')
+      if (typeof config === 'object' && config.lightGallery) this.lgConfig = config.lightGallery
+    } catch (e) { }
+  }
+
   async assetBuffer (res: Response, asset: Asset, size?: ImageSize) {
     const data = await immich.getAssetBuffer(asset, size)
     if (data) {
@@ -50,7 +60,8 @@ class Render {
     res.render('gallery', {
       items,
       openItem,
-      title: this.title(share)
+      title: this.title(share),
+      lgConfig: this.lgConfig
     })
   }
 

views/gallery.ejs

@@ -28,7 +28,7 @@
 <script src="/lg-video.min.js"></script>
 <script src="/lg-zoom.min.js"></script>
 <script type="text/javascript">
-  initLightGallery() // from web.js
+  initLightGallery(<%- JSON.stringify(lgConfig) %>) // initLightGallery imported from web.js
   <% if (openItem) { %>
   const openItem = <%- openItem %>
   const thumbs = document.querySelectorAll('#lightgallery a')