better more info design

damongolding · Nov 22, 2024 · 47d8c27 · 47d8c27
1 parent 5de4ab6
commit 47d8c27
Show file tree

Hide file tree

Showing 9 changed files with 276 additions and 143 deletions.
diff --git a/custom.example.css b/custom.example.css
@@ -70,13 +70,13 @@ to{}
 .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{}
+.more-info--button-group{}
+.more-info--image-link{}
+.more-info--webhook:hover, .more-info--image-link:hover{}
 /* src/css/error.css */
 .error-container{}
 .error{}

diff --git a/frontend/public/assets/css/kiosk.css b/frontend/public/assets/css/kiosk.css
@@ -600,6 +600,7 @@ body {
       padding: 6rem 3rem 3rem 3rem;
       color: #fff;
       border-radius: 0.74rem;
+      overflow: hidden;
     }
 .polling-paused.more-info #more-info .more-info--image .more-info--image--data {
         display: -webkit-flex;
@@ -615,16 +616,11 @@ body {
         -webkit-justify-content: center;
            -moz-box-pack: center;
                 justify-content: center;
-        gap: 2rem;
+        gap: 1rem;
       }
 .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;
@@ -647,23 +643,41 @@ body {
             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;
+      -webkit-flex-direction: row !important;
+         -moz-box-orient: horizontal !important;
+         -moz-box-direction: normal !important;
+              flex-direction: row !important;
+      height: 50%;
     }
-.more-info--webhook {
+.more-info--button-group {
+  display: -webkit-flex;
+  display: -moz-box;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  padding-top: 1rem;
+}
+.more-info--webhook,
+.more-info--image-link {
+  font-family:
+    "Barlow",
+    Arial,
+    Helvetica,
+    sans-serif;
   background-color: var(--mint-green);
   outline: none;
   border: none;
   color: var(--cool-grey);
   font-weight: 600;
-  border-radius: 60rem;
+  border-radius: 0.4rem;
   padding: 0.5rem 2rem;
   font-size: 1rem;
   cursor: pointer;
+  text-decoration: none;
+  font-weight: 600;
 }
-.more-info--webhook:hover {
+.more-info--webhook:hover, .more-info--image-link:hover {
     -webkit-filter: brightness(85%);
             filter: brightness(85%);
   }

diff --git a/frontend/src/css/image-more-info.css b/frontend/src/css/image-more-info.css
@@ -37,24 +37,20 @@
             color: #fff;
             border-radius: 0.74rem;
 
+            overflow: hidden;
+
             .more-info--image--data {
                 display: flex;
                 flex: 1;
                 flex-direction: column;
                 justify-content: center;
-                gap: 2rem;
+                gap: 1rem;
             }
 
             h3 {
                 margin: 0.5rem 0;
             }
 
-            a {
-                font-weight: 600;
-                text-decoration: underline;
-                color: #fff;
-            }
-
             .more-info--image--qr-code {
                 display: flex;
                 align-items: flex-end;
@@ -73,21 +69,33 @@
         flex-direction: column;
 
         .more-info--image {
-            flex-direction: row;
+            flex-direction: row !important;
+            height: 50%;
         }
     }
 }
 
-.more-info--webhook {
+.more-info--button-group {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    padding-top: 1rem;
+}
+
+.more-info--webhook,
+.more-info--image-link {
+    font-family: "Barlow", Arial, Helvetica, sans-serif;
     background-color: var(--mint-green);
     outline: none;
     border: none;
     color: var(--cool-grey);
     font-weight: 600;
-    border-radius: 60rem;
+    border-radius: 0.4rem;
     padding: 0.5rem 2rem;
     font-size: 1rem;
     cursor: pointer;
+    text-decoration: none;
+    font-weight: 600;
     &:hover {
         filter: brightness(85%);
     }

diff --git a/go.mod b/go.mod
@@ -7,6 +7,7 @@ require (
 	github.com/charmbracelet/lipgloss v1.0.0
 	github.com/charmbracelet/log v0.4.0
 	github.com/disintegration/imaging v1.6.2
+	github.com/dustin/go-humanize v1.0.1
 	github.com/fogleman/gg v1.3.0
 	github.com/google/go-querystring v1.1.0
 	github.com/google/uuid v1.6.0
@@ -19,6 +20,7 @@ require (
 	golang.org/x/image v0.22.0
 	golang.org/x/sync v0.9.0
 	golang.org/x/text v0.20.0
+	golang.org/x/time v0.5.0
 	gopkg.in/yaml.v3 v3.0.1
 )
 
@@ -53,5 +55,4 @@ require (
 	golang.org/x/exp v0.0.0-20240909161429-701f63a606c0 // indirect
 	golang.org/x/net v0.29.0 // indirect
 	golang.org/x/sys v0.25.0 // indirect
-	golang.org/x/time v0.5.0 // indirect
 )
diff --git a/go.sum b/go.sum
@@ -12,6 +12,8 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/disintegration/imaging v1.6.2 h1:w1LecBlG2Lnp8B3jk5zSuNqd7b4DXhcjwek1ei82L+c=
 github.com/disintegration/imaging v1.6.2/go.mod h1:44/5580QXChDfwIclfc/PCwrr44amcmDAg8hxG0Ewe4=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
 github.com/fogleman/gg v1.3.0 h1:/7zJX8F6AaYQc57WQCyN9cAIz+4bCJGO9B+dyW29am8=
 github.com/fogleman/gg v1.3.0/go.mod h1:R/bRT+9gY/C5z7JzPU0zXsXHKM4/ayA+zqcVNZzPa1k=
 github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHkI4W8=

diff --git a/immich/immich.go b/immich/immich.go
@@ -71,16 +71,16 @@ type ImmichError struct {
 }
 
 type ExifInfo struct {
-	Make             string    `json:"-"` // `json:"make"`
-	Model            string    `json:"-"` // `json:"model"`
+	Make             string    `json:"make"`
+	Model            string    `json:"model"`
 	ExifImageWidth   int       `json:"exifImageWidth"`
 	ExifImageHeight  int       `json:"exifImageHeight"`
-	FileSizeInByte   int       `json:"-"` // `json:"fileSizeInByte"`
+	FileSizeInByte   int       `json:"fileSizeInByte"`
 	Orientation      string    `json:"orientation"`
 	DateTimeOriginal time.Time `json:"dateTimeOriginal"`
-	ModifyDate       time.Time `json:"-"` // `json:"modifyDate"`
-	TimeZone         string    `json:"-"` // `json:"timeZone"`
-	LensModel        string    `json:"-"` // `json:"lensModel"`
+	ModifyDate       time.Time `json:"modifyDate"`
+	TimeZone         string    `json:"timeZone"`
+	LensModel        string    `json:"lensModel"`
 	FNumber          float64   `json:"fNumber"`
 	FocalLength      float64   `json:"focalLength"`
 	Iso              int       `json:"iso"`
@@ -122,8 +122,8 @@ type ImmichAsset struct {
 	DeviceID         string           `json:"-"` // `json:"deviceId"`
 	LibraryID        string           `json:"-"` // `json:"libraryId"`
 	Type             ImmichAssetType  `json:"type"`
-	OriginalPath     string           `json:"-"`                // `json:"originalPath"`
-	OriginalFileName string           `json:"-"`                // `json:"originalFileName"`
+	OriginalPath     string           `json:"-"` // `json:"originalPath"`
+	OriginalFileName string           `json:"originalFileName"`
 	OriginalMimeType string           `json:"originalMimeType"` // `json:"originalMimeType"`
 	Resized          bool             `json:"-"`                // `json:"resized"`
 	Thumbhash        string           `json:"-"`                // `json:"thumbhash"`

diff --git a/immich/immich_helpers.go b/immich/immich_helpers.go
@@ -93,16 +93,6 @@ func (i *ImmichAsset) immichApiCall(method, apiUrl string, body []byte) ([]byte,
 
 	for attempts := 0; attempts < 3; attempts++ {
 
-		if attempts == 1 && lastErr != nil {
-			log.Info("Recreating HTTP client after failure")
-			mu.Lock()
-			httpClient = &http.Client{
-				Timeout:   time.Second * time.Duration(requestConfig.Kiosk.HTTPTimeout),
-				Transport: httpTransport,
-			}
-			mu.Unlock()
-		}
-
 		var bodyReader io.Reader
 		if body != nil {
 			bodyReader = bytes.NewReader(body)

diff --git a/views/views_image.templ b/views/views_image.templ
@@ -1,10 +1,13 @@
 package views
 
 import (
+	"context"
 	"fmt"
 	"github.com/damongolding/immich-kiosk/common"
 	"github.com/damongolding/immich-kiosk/immich"
 	"github.com/damongolding/immich-kiosk/utils"
+	human "github.com/dustin/go-humanize"
+	"io"
 	"net/url"
 	"path"
 	"strconv"
@@ -55,6 +58,34 @@ func webhookSignature() string {
 	return utils.CalculateSignature(common.SharedSecret, strconv.FormatInt(time.Now().Unix(), 10))
 }
 
+func people(people []immich.Person) templ.Component {
+	if len(people) == 0 {
+		return templ.NopComponent
+	}
+
+	names := []string{}
+	for _, person := range people {
+		if person.Name != "" {
+			names = append(names, person.Name)
+		}
+	}
+
+	if len(names) == 0 {
+		return templ.NopComponent
+	}
+
+	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
+		return templ.Raw(`
+			<div>
+				<div>
+					<h3>People</h3>
+				</div>
+				<div>`+strings.Join(names, ", ")+`</div>
+			</div>
+		`).Render(ctx, w)
+	})
+}
+
 templ renderMoreInfo(viewData ViewData) {
 	<div id="more-info" class="hidden" hx-swap-oob="true">
 		for _, img := range viewData.Images {
@@ -63,32 +94,28 @@ templ renderMoreInfo(viewData ViewData) {
 					<div>
 						<div>
 							<h3>
-								Image ID
+								{ img.ImmichImage.ExifInfo.Make }
 							</h3>
 						</div>
 						<div>
-							{ img.ImmichImage.ID }
+							{ img.ImmichImage.ExifInfo.Model }
 						</div>
 					</div>
 					<div>
 						<div>
 							<h3>
-								Original mime type
+								{ img.ImmichImage.OriginalFileName }
 							</h3>
 						</div>
 						<div>
-							{ img.ImmichImage.OriginalMimeType }
+							{ fmt.Sprint(img.ImmichImage.ExifInfo.ExifImageWidth) } x { fmt.Sprint(img.ImmichImage.ExifInfo.ExifImageHeight) } • { human.Bytes(uint64(img.ImmichImage.ExifInfo.FileSizeInByte)) }
 						</div>
 					</div>
-					<div>
-						<h3>
-							Image link
-						</h3>
-						<a href={ templ.SafeURL(immichImageUrl(viewData.ImmichUrl, img.ImmichImage.ID)) } target="_blank">
-							The link
+					@people(img.ImmichImage.People)
+					<div class="more-info--button-group">
+						<a class="more-info--image-link" href={ templ.SafeURL(immichImageUrl(viewData.ImmichUrl, img.ImmichImage.ID)) } target="_blank">
+							View image in Immich
 						</a>
-					</div>
-					<div>
 						<button
 							class="more-info--webhook"
 							hx-post="/webhooks"