Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Information overlays #194

Merged
merged 30 commits into from
Nov 22, 2024
Merged

Information overlays #194

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
aaf8bcd
added basic implementation
damongolding Nov 20, 2024
23d423f
landscape mode and remove on polling restart
damongolding Nov 20, 2024
8754b81
damn JS!!
damongolding Nov 20, 2024
1df6799
clunky but it works
damongolding Nov 20, 2024
029613c
Update .coderabbit.yaml
damongolding Nov 20, 2024
bf3b535
Update .coderabbit.yaml
damongolding Nov 20, 2024
d196d48
Update image-more-info.css
damongolding Nov 20, 2024
dd8d983
Update .coderabbit.yaml
damongolding Nov 20, 2024
a59332c
Update .coderabbit.yaml
damongolding Nov 20, 2024
1e782c4
refinements
damongolding Nov 21, 2024
b1b5ba8
Merge branch 'feature/more-into-overlay' of https://github.com/damong…
damongolding Nov 21, 2024
be96fc4
design update (colours) and webhook trigger
damongolding Nov 21, 2024
39eeade
consistency and http reinit safety
damongolding Nov 21, 2024
dd20266
new colour and rate limiter
damongolding Nov 21, 2024
15be838
added a signature on the webhook endpoint
damongolding Nov 21, 2024
2652519
Delete .coderabbit.yaml
damongolding Nov 21, 2024
c8f8ca6
housekeeping
damongolding Nov 21, 2024
5de4ab6
Update common.go
damongolding Nov 21, 2024
47d8c27
better more info design
damongolding Nov 22, 2024
4d5cb2a
landscape fix and docs
damongolding Nov 22, 2024
57ba92a
removing generated files
damongolding Nov 22, 2024
eddd48e
templ in docker build step
damongolding Nov 22, 2024
966ffec
generate templ files in actions
damongolding Nov 22, 2024
621cdda
rename css and remove dups
damongolding Nov 22, 2024
fb279d3
Update custom.example.css
damongolding Nov 22, 2024
fd1c4ce
add docs
damongolding Nov 22, 2024
f448363
Merge pull request #195 from damongolding/docs/contributing
damongolding Nov 22, 2024
3ff9104
only show webhook button is a webhook is set in config
damongolding Nov 22, 2024
7f36ce4
docs a ts safety
damongolding Nov 22, 2024
7085966
task file desc
damongolding Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .coderabbitignore
View file
Open in desktop

This file was deleted.

13 changes: 7 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -762,12 +762,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

Expand Down
11 changes: 10 additions & 1 deletion common/common.go
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
// Package common provides shared types and utilities for the immich-kiosk application
package common

import "github.com/damongolding/immich-kiosk/config"
import (
"github.com/damongolding/immich-kiosk/config"
"github.com/damongolding/immich-kiosk/utils"
)

var SharedSecret string
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add documentation for the exported SharedSecret variable.

As per Go conventions, exported variables should be documented. Additionally, consider whether this secret truly needs to be globally accessible.

Add documentation and consider encapsulation:

+// SharedSecret is a cryptographic secret used for secure communications.
+// Warning: This is a global mutable state. Access should be controlled carefully.
 var SharedSecret string

Consider wrapping this in a thread-safe accessor pattern:

type secretManager struct {
    secret string
    mu     sync.RWMutex
}

func (sm *secretManager) GetSecret() string {
    sm.mu.RLock()
    defer sm.mu.RUnlock()
    return sm.secret
}


// RouteRequestData contains request metadata and configuration used across routes
type RouteRequestData struct {
Expand All @@ -10,3 +15,7 @@ type RouteRequestData struct {
RequestID string // Unique identifier for this specific request
ClientName string // Name of the client making the request
}

func init() {
SharedSecret = utils.GenerateSharedSecret()
}
19 changes: 19 additions & 0 deletions custom.example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{}
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Empty CSS blocks require implementation

The following selectors have empty blocks that need to be implemented with appropriate styles:

  1. Image metadata styles:

    • .polling-paused.more-info .image--metadata

  2. More info overlay styles:

    • #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 a
    • .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
    • .layout-splitview-landscape #more-info
    • .layout-splitview-landscape #more-info .more-info--image

  3. Container styles:

    • .polling-paused.more-info #clock-weather-container

  4. Navigation styles:

    • .navigation--more-info svg

Would you like me to help generate the CSS implementations for these selectors based on the AI summary's description of the intended functionality?

Also applies to: 66-76, 93-93, 161-161

🧰 Tools
🪛 Biome

[error] 43-43: An empty block isn't allowed.

Consider removing the empty block or adding styles inside it.

(lint/suspicious/noEmptyBlock)

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add this file to ignore list

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@damongolding, understood. To have CodeRabbit ignore this file in future reviews, you can add a path filter to your CodeRabbit configuration. Here's how you can do it:

In your .coderabbit.yml configuration file, add the following:

path_filters:
  - path: 'custom.example.css'
    action: ignore

This will instruct CodeRabbit to skip reviewing custom.example.css. For more details on path-based instructions, you can refer to the CodeRabbit documentation:

Path-based and AST-based Instructions

Let me know if you need any assistance with this configuration.

.image--metadata{}
.image--metadata--theme-fade::before{}
.frame--layout-splitview:nth-child(1) .image--metadata--theme-fade::before{}
Expand All @@ -61,6 +62,21 @@ to{}
.frame .frame--image-smart-zoom-in img{}
.polling-paused .frame{}
.polling-paused .frame img{}
/* src/css/image-more-info.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 a{}
.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{}
.layout-splitview-landscape #more-info{}
.layout-splitview-landscape #more-info .more-info--image{}
.more-info--webhook{}
.more-info--webhook:hover{}
/* src/css/error.css */
.error-container{}
.error{}
Expand All @@ -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{}
Expand Down Expand Up @@ -136,6 +153,7 @@ to{}
.navigation{}
.navigation--item{}
.navigation--item:hover{}
.navigation--item:hover svg{}
.navigation--item--separator{}
.navigation-hidden{}
.navigation svg{}
Expand All @@ -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{}
Expand Down
140 changes: 135 additions & 5 deletions frontend/public/assets/css/kiosk.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
/* src/css/vars.css */
:root {
--light-grey: #f7f9f8;
--cool-grey: #333460;
--mint-green: #1ed2bb;
--yellow: #e7e65f;
--fade-gradient:
hsla(0, 0%, 0%, 0.59) 0%,
hsla(0, 0%, 0%, 0.582) 5.2%,
Expand Down Expand Up @@ -368,6 +372,9 @@ body {
}

/* src/css/image.css */
.polling-paused.more-info .image--metadata {
opacity: 0.2;
}
.image--metadata {
position: absolute;
display: -webkit-flex;
Expand Down Expand Up @@ -548,6 +555,119 @@ body {
}
}

/* src/css/image-more-info.css */
#more-info {
display: none;
}
#more-info * {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.polling-paused.more-info .frame--image img {
-webkit-filter: grayscale(1) blur(4px) brightness(0.4);
filter: grayscale(1) blur(4px) brightness(0.4);
}
damongolding marked this conversation as resolved.
Show resolved Hide resolved
.polling-paused.more-info #more-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-flex;
display: -moz-box;
display: flex;
gap: 0.4rem;
padding: 0.4rem;
z-index: 99998;
}
.polling-paused.more-info #more-info .more-info--image {
width: 100%;
height: 100%;
background-color: rgb(51 52 96 / 60%);
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
gap: 2rem;
padding: 6rem 3rem 3rem 3rem;
color: #fff;
border-radius: 0.74rem;
}
.polling-paused.more-info #more-info .more-info--image .more-info--image--data {
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-flex: 1;
-moz-box-flex: 1;
flex: 1;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
gap: 2rem;
}
.polling-paused.more-info #more-info .more-info--image h3 {
margin: 0.5rem 0;
}
.polling-paused.more-info #more-info .more-info--image a {
font-weight: 600;
text-decoration: underline;
color: #fff;
}
.polling-paused.more-info #more-info .more-info--image .more-info--image--qr-code {
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-align-items: flex-end;
-moz-box-align: end;
align-items: flex-end;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
.polling-paused.more-info #more-info .more-info--image .more-info--image--qr-code img {
max-width: 14rem;
border-radius: 0.5rem;
}
.layout-splitview-landscape #more-info {
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
}
.layout-splitview-landscape #more-info .more-info--image {
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
flex-direction: row;
}
.more-info--webhook {
background-color: var(--mint-green);
outline: none;
border: none;
color: var(--cool-grey);
font-weight: 600;
border-radius: 60rem;
padding: 0.5rem 2rem;
font-size: 1rem;
cursor: pointer;
}
.more-info--webhook:hover {
-webkit-filter: brightness(85%);
filter: brightness(85%);
}

/* src/css/error.css */
.error-container {
position: absolute;
Expand Down Expand Up @@ -634,6 +754,9 @@ body {
}

/* src/css/clock-weather-container.css */
.polling-paused.more-info #clock-weather-container {
opacity: 0.2;
}
#clock-weather-container {
position: absolute;
display: -webkit-flex;
Expand Down Expand Up @@ -1130,7 +1253,7 @@ body {
justify-content: center;
width: 100%;
height: 100%;
z-index: 99999;
z-index: 99997;
background-color: transparent;
}
#navigation-interaction-area--previous-image,
Expand All @@ -1147,7 +1270,7 @@ body {
display: -webkit-flex;
display: -moz-box;
display: flex;
gap: 1.6rem;
gap: 1.4rem;
position: absolute;
top: 1rem;
right: 50%;
Expand Down Expand Up @@ -1181,8 +1304,11 @@ body {
cursor: pointer;
}
.navigation--item:hover {
background-color: rgb(51 52 96 / 60%);
background-color: var(--mint-green);
}
.navigation--item:hover svg {
fill: var(--cool-grey);
}
.navigation--item--separator {
border: 0.0625rem solid rgba(255, 255, 255, 0.2);
}
Expand All @@ -1194,8 +1320,8 @@ body {
}
.navigation svg {
fill: white;
width: 2rem;
height: 2rem;
width: 1.8rem;
height: 1.8rem;
}
.rounded {
border-radius: 40rem;
Expand All @@ -1216,6 +1342,10 @@ body {
display: none;
visibility: hidden;
}
.navigation--more-info svg {
width: 1.5rem;
height: 1.5rem;
}
.navigation--media-buttons {
display: -webkit-flex;
display: -moz-box;
Expand Down
2 changes: 1 addition & 1 deletion frontend/public/assets/js/kiosk.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions frontend/src/css/clock-weather-container.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
.polling-paused.more-info {
#clock-weather-container {
opacity: 0.2;
}
}

#clock-weather-container {
position: absolute;
display: flex;
Expand Down
Loading
Loading