booru widget: no more lag

.config/ags/modules/sideleft/apis/booru.js

@@ -117,19 +117,72 @@ const BooruPage = (taglist) => {
         onClicked: action,
         setup: setupCursorHover,
     })
-    const PreviewImage = (data) => {
+    const PreviewImage = (data, delay = 0) => {
-        return Overlay({
+        const imageArea = Widget.DrawingArea({
-            child: Box({
+            className: 'sidebar-booru-image-drawingarea',
+        });
+        const imageBox = Box({
             className: 'sidebar-booru-image',
-                css: `background-image: url('${data.preview_url}');`,
+            // css: `background-image: url('${data.preview_url}');`,
-                // setup: (self) => {
+            attribute: {
-                // Utils.timeout(1000, () => {
+                'update': (self, data, force = false) => {
-                //     self.css = `background-image: url('${data.preview_url}');`;
+                    const imagePath = `${USER_CACHE_DIR}/ags/media/waifus/${data.md5}.${data.file_ext}`;
-                // })
+                    const widgetStyleContext = imageArea.get_style_context();
-                // }
+                    const widgetWidth = widgetStyleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
-            }),
+                    const widgetHeight = widgetStyleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
-            overlays: [
+                    imageArea.set_size_request(widgetWidth, widgetHeight);
-                Box({
+                    const showImage = () => {
+                        const imageDimensionsStr = exec(`identify -format {\\"w\\":%w,\\"h\\":%h} '${imagePath}'`)
+                        const imageDimensionsJson = JSON.parse(imageDimensionsStr);
+                        let imageWidth = imageDimensionsJson.w;
+                        let imageHeight = imageDimensionsJson.h;
+
+                        // Fill
+                        const scale = imageWidth / imageHeight;
+                        if (imageWidth > imageHeight) {
+                            imageWidth = widgetHeight * scale;
+                            imageHeight = widgetHeight;
+                        } else {
+                            imageHeight = widgetWidth / scale;
+                            imageWidth = widgetWidth;
+                        }
+
+                        // const pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(imagePath, widgetWidth, widgetHeight);
+                        const pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(imagePath, imageWidth, imageHeight, false);
+                        imageArea.connect("draw", (widget, cr) => {
+                            const borderRadius = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL);
+
+                            // Draw a rounded rectangle
+                            cr.arc(borderRadius, borderRadius, borderRadius, Math.PI, 1.5 * Math.PI);
+                            cr.arc(widgetWidth - borderRadius, borderRadius, borderRadius, 1.5 * Math.PI, 2 * Math.PI);
+                            cr.arc(widgetWidth - borderRadius, widgetHeight - borderRadius, borderRadius, 0, 0.5 * Math.PI);
+                            cr.arc(borderRadius, widgetHeight - borderRadius, borderRadius, 0.5 * Math.PI, Math.PI);
+                            cr.closePath();
+                            cr.clip();
+
+                            // Paint image as bg
+                            Gdk.cairo_set_source_pixbuf(cr, pixbuf, (widgetWidth - imageWidth) / 2, (widgetHeight - imageHeight) / 2);
+                            cr.paint();
+                        });
+                        self.queue_draw();
+                    }
+                    // Show
+                    // const downloadCommand = `wget -O '${imagePath}' '${data.preview_url}'`;
+                    const downloadCommand = `curl -L -o '${imagePath}' '${data.preview_url}'`;
+                    // console.log(downloadCommand)
+                    if (!force && fileExists(imagePath)) showImage();
+                    else Utils.timeout(delay, () => Utils.execAsync(['bash', '-c', downloadCommand])
+                        .then(showImage)
+                        .catch(print)
+                    );
+                },
+            },
+            child: imageArea,
+            setup: (self) => {
+                Utils.timeout(1000, () => self.attribute.update(self, data));
+            }
+        });
+        const imageActions = Box({
             vpack: 'start',
             className: 'sidebar-booru-image-actions spacing-h-3',
             children: [
@@ -145,8 +198,10 @@ const BooruPage = (taglist) => {
                     action: () => execAsync(['xdg-open', `${data.source}`]).catch(print),
                 }),
             ]
-                })
+        });
-            ]
+        return Overlay({
+            child: imageBox,
+            overlays: [imageActions]
         })
     }
     const colorIndicator = Box({
@@ -188,39 +243,9 @@ const BooruPage = (taglist) => {
             downloadIndicator,
         ]
     });
-    const pageActions = Revealer({
-        transition: 'crossfade',
-        revealChild: false,
-        child: Box({
-            vertical: true,
-            children: [
-                Box({
-                    className: 'sidebar-waifu-image-actions spacing-h-3',
-                    children: [
-                        Box({ hexpand: true }),
-                        ImageAction({
-                            name: 'Go to source',
-                            icon: 'link',
-                            action: () => execAsync(['xdg-open', `${thisPage.attribute.imageData.source}`]).catch(print),
-                        }),
-                        ImageAction({
-                            name: 'Hoard',
-                            icon: 'save',
-                            action: () => execAsync(['bash', '-c', `mkdir -p ~/Pictures/homework${thisPage.attribute.isNsfw ? '/🌶️' : ''} && cp ${thisPage.attribute.imagePath} ~/Pictures/homework${thisPage.attribute.isNsfw ? '/🌶️/' : ''}`]).catch(print),
-                        }),
-                        ImageAction({
-                            name: 'Open externally',
-                            icon: 'open_in_new',
-                            action: () => execAsync([IMAGE_VIEWER_APP, `${thisPage.attribute.imagePath}`]).catch(print),
-                        }),
-                    ]
-                })
-            ],
-        })
-    })
     const pageImageGrid = Grid({
-        columnHomogeneous: true,
+        // columnHomogeneous: true,
-        rowHomogeneous: true,
+        // rowHomogeneous: true,
         className: 'sidebar-waifu-image',
         // css: 'min-height: 90px;'
     });
@@ -248,9 +273,11 @@ const BooruPage = (taglist) => {
                 // Add stuff
                 for (let i = 0; i < imageRows; i++) {
                     for (let j = 0; j < imageColumns; j++) {
-                        if (i * imageColumns + j >= userOptions.sidebar.imageBooruCount) break;
+                        if (i * imageColumns + j >= Math.min(userOptions.sidebar.imageBooruCount, data.length)) break;
-                        // if (i * imageColumns + j >= data.length) break;
+                        pageImageGrid.attach(
-                        pageImageGrid.attach(PreviewImage(data[i * imageColumns + j]), j, i, 1, 1);
+                            PreviewImage(data[i * imageColumns + j]),
+                            j, i, 1, 1
+                        );
                     }
                 }
                 pageImageGrid.show_all();
@@ -259,9 +286,6 @@ const BooruPage = (taglist) => {
                 Utils.timeout(IMAGE_REVEAL_DELAY,
                     () => pageImageRevealer.revealChild = true
                 );
-                Utils.timeout(IMAGE_REVEAL_DELAY + pageImageRevealer.transitionDuration,
-                    () => pageActions.revealChild = true
-                );
                 downloadIndicator.attribute.hide();
             },
         },

.config/ags/scss/_sidebars.scss

@@ -853,14 +853,20 @@ $waifu_image_overlay_transparency: 0.7;
 .sidebar-booru-image {
     @include small-rounding;
     margin: 0.273rem;
-    min-width: 12.818rem;
+    min-width: 11.932rem;
-    min-height: 12.818rem;
+    min-height: 11.932rem;
-    background-size: cover;
+    // background-color: rgba(100, 200, 0, 0.3);
-    background-repeat: no-repeat;
+}
-    background-position: center;
+
+.sidebar-booru-image-drawingarea {
+    // background-color: rgba(200, 100, 0, 0.3);
+    @include small-rounding;
+    min-width: 12.273rem;
+    min-height: 12.273rem;
 }
 
 .sidebar-booru-image-actions {
+    // background-color: rgba(100, 100, 0, 0.3);
     @include element_decel;
     margin: 0.545rem;
 }