Information overlays

.dockerignore

@@ -5,3 +5,5 @@
 
 dist/
 config.yaml
+
+*_templ.go

.github/workflows/go-test.yml

@@ -18,6 +18,11 @@ jobs:
       - name: Get dependencies
         run: go mod download
 
+      - name: Install templ and generate
+        run: |
+          go install github.com/a-h/templ/cmd/templ@latest
+          templ generate
+
       - name: Run tests
         env:
           CI: true

.gitignore

@@ -37,3 +37,5 @@ dist/
 
 node_modules/
 custom.css
+
+*_templ.go

Dockerfile

@@ -1,3 +1,4 @@
+# Builder
 FROM --platform=$BUILDPLATFORM golang:1.23.3-alpine AS build
 
 ARG VERSION
@@ -9,9 +10,12 @@ WORKDIR /app
 COPY . .
 
 RUN go mod download
-RUN CGO_ENABLED=0 GOOS=$TARGETOS GOARCH=$TARGETARCH go build -a -installsuffix cgo -ldflags "-X main.version=${VERSION}" -o dist/kiosk .
+RUN go install github.com/a-h/templ/cmd/templ@latest
+RUN templ generate
 
+RUN CGO_ENABLED=0 GOOS=$TARGETOS GOARCH=$TARGETARCH go build -a -installsuffix cgo -ldflags "-X main.version=${VERSION}" -o dist/kiosk .
 
+# Release
 FROM  alpine:latest
 
 ENV TZ=Europe/London

README.md

@@ -681,11 +681,12 @@ Kiosk's display is divided into interactive zones:
 
 ### Keyboard Shortcuts
 
-| Key           | Action                        |
-|---------------|-------------------------------|
-| _ Spacebar    | Play/Pause and Toggle Menu    |
-| → Right Arrow | Next Image(s)                 |
-| ← Left Arrow  | Previous Image(s)             |
+| Key           | Action                                                   |
+|---------------|----------------------------------------------------------|
+| _ Spacebar    | Play/Pause and Toggle Menu                               |
+| → Right Arrow | Next Image(s)                                            |
+| ← Left Arrow  | Previous Image(s)                                        |
+| i Key         | Play/Pause and Toggle Menu and display more info overlay |
 
 ------
 
@@ -762,12 +763,13 @@ webhooks:
 
 ### Available Events
 
-| Event           | Description                                             |
-|-----------------|---------------------------------------------------------|
-|`asset.new`      | Triggered when a new image is requested from Kiosk      |
-|`asset.previous` | Triggered when a previous image is requested from Kiosk |
-|`asset.prefetch` | Triggered when Kiosk prefecthes asset data from Immich  |
-|`cache.flushed`  | Triggered when the cache is manually cleared            |
+| Event                              | Description                                             |
+|------------------------------------|---------------------------------------------------------|
+|`asset.new`                         | Triggered when a new image is requested from Kiosk      |
+|`asset.previous`                    | Triggered when a previous image is requested from Kiosk |
+|`asset.prefetch`                    | Triggered when Kiosk prefecthes asset data from Immich  |
+|`cache.flushed`                     | Triggered when the cache is manually cleared            |
+|`user.webhook.trigger.info_overlay` | Triggered when the "trigger webhook" button is clicked in the image details overlay |
 
 ### Webhook Payload
 
@@ -965,6 +967,67 @@ If you'd like to chat or need some informal help, feel free to find me in the Ki
   <img style="height:32px!important" src="https://img.shields.io/badge/Immich%20Kiosk-Kiosk%20Discord?style=flat&logo=discord&logoColor=%23fff&labelColor=%235865F2&color=%235865F2" alt="Discord button">
 </a>
 
+
+------
+
+## Contributing
+
+### Prerequisites
+Want to help improve Immich Kiosk? Great! Here's what you'll need to get started:
+
+First, make sure you have these tools installed on your computer:
+
+- [Go](https://golang.org/doc/install) - The main programming language we use
+- [Taskfile](https://taskfile.dev/installation/) - Helps automate common tasks
+- [Node.js](https://nodejs.org/) - For running the frontend
+- [pnpm](https://pnpm.io/installation) - Package manager for the frontend
+
+Ready to contribute? Here's how:
+
+1. Fork the repository and create a new branch for your changes
+   ```sh
+   git checkout -b feature/my-feature
+   ```
+
+2. Run `task install` to set up your development environment
+
+3. Make your changes! Just remember to:
+   - Follow the existing code style
+   - Add tests if you're adding new features
+   - Test your changes with `task test`
+   - Check code quality with `task lint`
+
+4. Commit your changes with a helpful message
+   ```sh
+   git commit -m "feat: description of your change"
+   ```
+
+5. Push your changes to GitHub
+   ```sh
+   git push origin feature/my-feature
+   ```
+
+6. Create a Pull Request to the `main` branch
+   - Tell us what your changes do and why you made them
+   - Link to any related issues
+   - Add screenshots if you changed anything visual
+
+### Guidelines
+
+We try to keep things organized, so please:
+- Follow [Go best practices](https://golang.org/doc/effective_go)
+- Write clear commit messages following [conventional commits](https://www.conventionalcommits.org/)
+- Keep changes focused and manageable in size
+- Update docs if you change how things work
+- Add tests for new features
+
+Your changes will need to pass our automated checks before being merged.
+
+Need help? We're here for you!
+- Open an issue on GitHub
+- Chat with us in the [Discord channel](https://discord.com/channels/979116623879368755/1293191523927851099)
+
+
 <!-- LINKS & IMAGES -->
 [immich-github-url]: https://github.com/immich-app/immich
 [dietpi-url]: https://dietpi.com/docs/software/desktop/#chromium

common/common.go

@@ -1,7 +1,13 @@
 // Package common provides shared types and utilities for the immich-kiosk application
 package common
 
-import "github.com/damongolding/immich-kiosk/config"
+import (
+	"github.com/charmbracelet/log"
+	"github.com/damongolding/immich-kiosk/config"
+	"github.com/damongolding/immich-kiosk/utils"
+)
+
+var SharedSecret string
 
 // RouteRequestData contains request metadata and configuration used across routes
 type RouteRequestData struct {
@@ -10,3 +16,11 @@ type RouteRequestData struct {
 	RequestID     string        // Unique identifier for this specific request
 	ClientName    string        // Name of the client making the request
 }
+
+func init() {
+	secret, err := utils.GenerateSharedSecret()
+	if err != nil {
+		log.Fatal("Failed to generate shared secret", "error", err)
+	}
+	SharedSecret = secret
+}

custom.example.css

@@ -40,6 +40,7 @@ to{}
 .frameless .frame--layout-splitview-landscape{}
 .frame--layout-splitview-landscape .frame--image{}
 /* src/css/image.css */
+.polling-paused.more-info .image--metadata{}
 .image--metadata{}
 .image--metadata--theme-fade::before{}
 .frame--layout-splitview:nth-child(1) .image--metadata--theme-fade::before{}
@@ -61,6 +62,21 @@ to{}
 .frame .frame--image-smart-zoom-in img{}
 .polling-paused .frame{}
 .polling-paused .frame img{}
+/* src/css/more-info-overlay.css */
+#more-info{}
+#more-info *{}
+.polling-paused.more-info .frame--image img{}
+.polling-paused.more-info #more-info{}
+.polling-paused.more-info #more-info .more-info--image{}
+.polling-paused.more-info #more-info .more-info--image .more-info--image--data{}
+.polling-paused.more-info #more-info .more-info--image h3{}
+.polling-paused.more-info #more-info .more-info--image .more-info--image--qr-code{}
+.polling-paused.more-info #more-info .more-info--image .more-info--image--qr-code img{}
+.polling-paused.more-info.layout-splitview-landscape #more-info{}
+.polling-paused.more-info.layout-splitview-landscape #more-info .more-info--image{}
+.more-info--button-group{}
+.more-info--image-link{}
+.more-info--webhook:hover, .more-info--image-link:hover{}
 /* src/css/error.css */
 .error-container{}
 .error{}
@@ -77,6 +93,7 @@ to{}
 .offline{}
 .sleep #offline{}
 /* src/css/clock-weather-container.css */
+.polling-paused.more-info #clock-weather-container{}
 #clock-weather-container{}
 .layout-splitview #clock-weather-container{}
 .sleep #clock-weather-container{}
@@ -136,6 +153,7 @@ to{}
 .navigation{}
 .navigation--item{}
 .navigation--item:hover{}
+.navigation--item:hover svg{}
 .navigation--item--separator{}
 .navigation-hidden{}
 .navigation svg{}
@@ -144,6 +162,7 @@ to{}
 .navigation--fullscreen--exit{}
 .navigation--fullscreen-enabled .navigation--fullscreen--exit{}
 .navigation--fullscreen-enabled .navigation--fullscreen--enter{}
+.navigation--more-info svg{}
 .navigation--media-buttons{}
 .navigation--media-buttons .navigation--item{}
 .navigation--play-pause--play{}