Various tweeks

robrotheram · Jan 2, 2024 · a6ad8bd · a6ad8bd
1 parent 6bc7107
commit a6ad8bd
Show file tree

Hide file tree

Showing 16 changed files with 224 additions and 80 deletions.
diff --git a/backend/api/router.go b/backend/api/router.go
@@ -71,15 +71,29 @@ func (api *GoGalleryAPI) setupDashboardRoutes() {
 }
 
 func (api *GoGalleryAPI) ImgHandler(w http.ResponseWriter, r *http.Request) {
-	w.Header().Set("Cache-Control", "max-age=604800") // 7 days
+	size := r.URL.Query().Get("size")
 	vars := mux.Vars(r)
 	id := vars["id"]
+	if len(size) == 0 {
+		size = vars["size"]
+	}
 	pic := api.db.Pictures.FindByID(id)
+	//Is image in cache
+	if file, err := api.db.ImageCache.Get(pic.Id, size); err == nil {
+		io.Copy(w, file)
+		return
+	}
 	src, err := pic.Load()
 	if err != nil {
 		return
 	}
-	pipeline.ProcessImage(src, templateengine.ImageSizes["xsmall"], w)
+	cache, _ := api.db.ImageCache.Writer(pic.Id, size)
+	writer := io.MultiWriter(w, cache)
+	if size, ok := templateengine.ImageSizes[size]; ok {
+		pipeline.ProcessImage(src, size, writer)
+		return
+	}
+	pipeline.ProcessImage(src, templateengine.ImageSizes["xsmall"], writer)
 }
 
 func (api *GoGalleryAPI) DashboardAPI() {
@@ -171,7 +185,6 @@ func IsHtml(constentType string) bool {
 
 func (h *home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	data := strings.Replace(r.URL.Path, "/preview-build", "", -1)
-
 	data = path.Join(h.base, data)
 	fileInfo, err := os.Stat(data)
 	if err != nil {
@@ -180,7 +193,6 @@ func (h *home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	if fileInfo.IsDir() {
 		data = path.Join(data, "index.html")
 	}
-	fmt.Println(data)
 	file, err := os.Open(data)
 	if err != nil {
 		return
@@ -197,5 +209,4 @@ func (h *home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		w.Header().Set("Content-Type", contentType)
 		io.Copy(w, file)
 	}
-
 }
diff --git a/backend/cmd/dasboard.go b/backend/cmd/dasboard.go
@@ -36,6 +36,7 @@ func LaunchDashboard() error {
 		Height:           768,
 		MinWidth:         1200,
 		Assets:           &embeds.DashboardFS,
+		Frameless:        false,
 		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
 	})
 }
diff --git a/backend/datastore/datastore.go b/backend/datastore/datastore.go
@@ -23,9 +23,10 @@ type CRUD interface {
 }
 
 type DataStore struct {
-	db       *storm.DB
-	Pictures *PictureCollection
-	Albums   *AlumnCollectioins
+	db         *storm.DB
+	Pictures   *PictureCollection
+	Albums     *AlumnCollectioins
+	ImageCache *ImageCache
 }
 
 func Open(dbPath string) *DataStore {
@@ -36,9 +37,10 @@ func Open(dbPath string) *DataStore {
 		log.Fatalf("Unable to open db at: %s \n Error: %v", path, err)
 	}
 	return &DataStore{
-		db:       db,
-		Pictures: &PictureCollection{DB: db},
-		Albums:   &AlumnCollectioins{DB: db},
+		db:         db,
+		Pictures:   &PictureCollection{DB: db},
+		Albums:     &AlumnCollectioins{DB: db},
+		ImageCache: NewImageCache(),
 	}
 }
 

diff --git a/backend/datastore/image_cache.go b/backend/datastore/image_cache.go
@@ -0,0 +1,26 @@
+package datastore
+
+import (
+	"fmt"
+	"os"
+	"path"
+)
+
+type ImageCache struct {
+	base string
+}
+
+func NewImageCache() *ImageCache {
+	path := path.Join(os.TempDir(), "gogallery")
+	os.MkdirAll(path, 0755)
+	return &ImageCache{
+		base: path,
+	}
+}
+
+func (ic *ImageCache) Get(name string, size string) (*os.File, error) {
+	return os.Open(path.Join(ic.base, fmt.Sprintf("%s-%s.webp", name, size)))
+}
+func (ic *ImageCache) Writer(name string, size string) (*os.File, error) {
+	return os.Create(path.Join(ic.base, fmt.Sprintf("%s-%s.webp", name, size)))
+}
diff --git a/frontend/index.html b/frontend/index.html
@@ -14,7 +14,7 @@
 
 </head>
 <body style="margin: 0px;">
-<div id="app_root"></div>
+<div id="app_root" style="--wails-draggable:drag"></div>
 <script src="./src/main.jsx" type="module"></script>
 </body>
 </html>

diff --git a/frontend/src/components/Gallery.jsx b/frontend/src/components/Gallery.jsx
@@ -1,33 +1,69 @@
 import React from 'react';
 import { LazyLoadImage, trackWindowScroll }
     from 'react-lazy-load-image-component';
-import { config } from '../store';
 import { Row, Col } from 'antd';
-const Gallery = ({ images, imageSize,addElementRef,selectPhoto,getStyle, scrollPosition }) => (
-    <Row gutter={[16, 16]}>
-        {images.map((image, index) =>
-            <Col key={image.id} span={parseInt(imageSize)}>
-                <div
-                    //ref={addElementRef}
-                    className={`item`}
-                >
-                    <figure className="galleryImg" style={getStyle(image.id)} onClick={(e) => selectPhoto(e, image)}>
-                        <LazyLoadImage
-                            alt={image.name}
-                            // Make sure to pass down the scrollPosition,
-                            // this will be used by the component to know
-                            // whether it must track the scroll position or not
-                            scrollPosition={scrollPosition}
-                            src={config.imageUrl + image.id + "?size=tiny&token=" + localStorage.getItem('token')}
-                            width="100%"
-                            height="100%"
-                        />
-                    </figure>
-                </div>
-            </Col>
-        )}
-    </Row>
-);
+import "./loading/loading.css"
+import Loading from './loading/loading.svg';
+import { config } from '../store';
+const Gallery = ({ images, imageSize, addElementRef, selectPhoto, getStyle, scrollPosition }) => {
+
+    const spanWidth = (size) => {
+        console.log("CHANGE_SIZE", size)
+        switch (size) {
+            case "xsmall":
+                return 2;
+            case "small":
+                return 4;
+            case "medium":
+                return 6;
+            case "large":
+                return 12;
+            case "xlarge":
+                return 24;
+            default: return 2;
+        }
+    }
+    return (
+        <Row gutter={[16, 16]}>
+            {images.map((image, index) =>
+                <Col key={image.id} span={spanWidth(imageSize)}>
+                    <div
+                        //ref={addElementRef}
+                        className={`item`}
+                    >
+                        <figure className="galleryImg" style={getStyle(image.id)} onClick={(e) => selectPhoto(e, image)}>
+                            <LazyLoadImage
+                                alt={image.name}
+                                effect="blur"
+                                scrollPosition={scrollPosition}
+                                src={config.imageUrl + image.id + "?size=" + imageSize}
+                                wrapperProps={
+                                    {
+                                        style:{
+                                            backgroundSize:"30% 30%",
+                                            backgroundRepeat:"no-repeat",
+                                            backgroundPosition:"center",
+                                            backgroundImage:`url(${Loading})`,
+                                            color: "transparent",
+                                            display: "inline-block",
+                                            height: "100%",
+                                            width: "100%",
+                                            border: "1px solid white",
+                                            borderRadius: "0px"
+                                        }
+                                    }
+                                }
+                                width="100%"
+                                height="100%"
+                                style={{objectFit:"cover"}}
+                            />
+                        </figure>
+                    </div>
+                </Col>
+            )}
+        </Row>
+    );
+}
 // Wrap Gallery with trackWindowScroll HOC so it receives
 // a scrollPosition prop to pass down to the images
 export default trackWindowScroll(Gallery);

diff --git a/frontend/src/components/Lazyloading.jsx b/frontend/src/components/Lazyloading.jsx
diff --git a/frontend/src/components/loading/loading.css b/frontend/src/components/loading/loading.css
@@ -0,0 +1,39 @@
+  .container {
+    --uib-size: 35px;
+    --uib-color: black;
+    --uib-speed: 1.2s;
+    --uib-bg-opacity: .1;
+    height: var(--uib-size);
+    width: var(--uib-size);
+    transform-origin: center;
+    will-change: transform;
+    overflow: visible;
+  }
+
+  .car {
+    fill: none;
+    stroke: var(--uib-color);
+    stroke-dasharray: 25, 75;
+    stroke-dashoffset: 0;
+    animation: travel var(--uib-speed) linear infinite;
+    will-change: stroke-dasharray, stroke-dashoffset;
+    transition: stroke 0.5s ease;
+  }
+
+  .track {
+    fill: none;
+    stroke: var(--uib-color);
+    opacity: var(--uib-bg-opacity);
+    transition: stroke 0.5s ease;
+  }
+
+  @keyframes travel {
+    0% {
+      stroke-dashoffset: 0;
+    }
+
+    100% {
+      stroke-dashoffset: -100;
+    }
+  }
+
diff --git a/frontend/src/components/loading/loading.jsx b/frontend/src/components/loading/loading.jsx
@@ -0,0 +1,30 @@
+import "./loading.css"
+
+export const Loading = () => (
+    <svg
+        className="container"
+        viewBox="0 0 35 35"
+        height="35"
+        width="35"
+    >
+        <rect
+            className="track"
+            x="2.5"
+            y="2.5"
+            fill="none"
+            stroke-width="5px"
+            width="32.5"
+            height="32.5"
+        />
+        <rect
+            className="car"
+            x="2.5"
+            y="2.5"
+            fill="none"
+            stroke-width="5px"
+            width="32.5"
+            height="32.5"
+            pathlength="100"
+        />
+    </svg>
+)
diff --git a/frontend/src/components/loading/loading.svg b/frontend/src/components/loading/loading.svg
diff --git a/frontend/src/components/loading/placeholder.png b/frontend/src/components/loading/placeholder.png
diff --git a/frontend/src/components/sidebar.jsx b/frontend/src/components/sidebar.jsx
@@ -79,11 +79,9 @@ const SideBar = ({ photo }) => {
     return date.toLocaleString();
   }
 
-
-
   return (
-    <Sider width={data.name ? 350 : 0} style={{ overflow: "auto", height: "calc(100vh - 64px)" }}>
-      <img src={config.imageUrl + data.id + "?size=tiny&token=" + localStorage.getItem('token')} width="100%" alt="thumbnail" />
+    <Sider width={data.name ? 500 : 0} style={{ overflow: "auto", height: "calc(100vh - 64px)" }}>
+      <img src={config.imageUrl + data.id + "?size=small"} width="100%" alt="thumbnail" />
       <Form
         form={form}
         layout="horizontal"

diff --git a/frontend/src/pages/Main.css b/frontend/src/pages/Main.css
@@ -98,10 +98,14 @@ html, body {
 .brand {
   float: left;
   font-size: 24px;
-  padding: 0px 44px;
   color: white;
   border-right: 1px solid  #282828;
+  border-color: rgba(253, 253, 253, 0.12);
+  width: 200px;
+  text-align: center;
 }
+
+
 .brand:hover {
   color: rgba(255, 255, 255, 0.65);
 }