From 877b462b7fccffa3be3b8f115a602a05b2200e5c Mon Sep 17 00:00:00 2001
From: Oj18 <oj@oojmed.com>
Date: Sun, 15 Aug 2021 17:28:17 +0100
Subject: [PATCH] [Settings > Items] card: banner image using img (native
 lazyload, other tweaks), make authors not pointer cursor

---
 src/ui/settings/css.js                  | 13 +++----
 src/ui/settings/items/card.js           | 25 +++----------
 src/ui/settings/items/sub/lazyBanner.js | 48 -------------------------
 3 files changed, 9 insertions(+), 77 deletions(-)
 delete mode 100644 src/ui/settings/items/sub/lazyBanner.js

diff --git a/src/ui/settings/css.js b/src/ui/settings/css.js
index 7e01e60b..3e25f2af 100644
--- a/src/ui/settings/css.js
+++ b/src/ui/settings/css.js
@@ -66,16 +66,11 @@ export default () => {
   margin-left: -12px;
 
   background-color: var(--background-secondary-alt);
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: 50%;
 
-  text-align: center;
-  line-height: 200px;
+  object-fit: contain;
 
-  color: var(--interactive-normal);
-  font-family: var(--font-display);
-  font-size: 36px;
+  -webkit-user-drag: none;
+  user-select: none;
 }
 
 .gm-store-card > :nth-child(2) {
@@ -91,6 +86,8 @@ export default () => {
   width: fit-content;
 
   padding-right: 10px;
+
+  cursor: default;
 }
 
 .gm-store-card > :nth-child(2).no-pfp {
diff --git a/src/ui/settings/items/card.js b/src/ui/settings/items/card.js
index fe2048c3..7765f0f6 100644
--- a/src/ui/settings/items/card.js
+++ b/src/ui/settings/items/card.js
@@ -1,9 +1,6 @@
-import _LazyBanner from './sub/lazyBanner';
-
 export default () => {
 const { React } = goosemod.webpackModules.common;
 
-const LazyBanner = _LazyBanner();
 const Button = goosemod.webpackModules.findByProps('Sizes', 'Colors', 'Looks', 'DropdownSizes');
 const Switch = goosemod.webpackModules.findByDisplayName('Switch');
 
@@ -29,26 +26,12 @@ return class Card extends React.PureComponent {
       className: ['gm-store-card', this.props.mini ? 'gm-store-card-mini' : '', ...this.props.tags.map((x) => x.replace(/ /g, '|'))].join(' '),
       onClick: this.props.onClick
     },
-      /* React.createElement('div', {
-        style: {
-          backgroundImage: this.props.images?.length ? `url("${this.props.images[0]}")` : ''
-        },
 
-        onClick: () => {
-          if (!this.props.images?.length) return; // Ignore if no images
-
-          ModalHandler.openModal(() => React.createElement('div', {
-            className: 'gm-carousel-modal'
-          },
-            React.createElement(SmallMediaCarousel, {
-              items: this.props.images.map((x) => ({ type: 1, src: x })),
-              autoplayInterval: 5000 // Time between automatically cycling to next image
-            })
-          ));
-        }
-      }), */
+      React.createElement('img', {
+        loading: 'lazy',
+        alt: '',
+        draggable: 'false',
 
-      React.createElement(LazyBanner, {
         src: this.props.images?.[0],
 
         onClick: () => {
diff --git a/src/ui/settings/items/sub/lazyBanner.js b/src/ui/settings/items/sub/lazyBanner.js
deleted file mode 100644
index 57760353..00000000
--- a/src/ui/settings/items/sub/lazyBanner.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const observer = new IntersectionObserver((entries) => {
-  for (const entry of entries) {
-    if (entry.isIntersecting) {
-      const image = entry.target;
-
-      image._lazyLoad();
-
-      observer.unobserve(image);
-    }
-  }
-});
-
-export default () => {
-const { React, ReactDOM } = goosemod.webpackModules.common;
-
-
-return class LazyBanner extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      loaded: false
-    };
-  }
-
-  componentDidMount() {
-    const node = ReactDOM.findDOMNode(this);
-
-    node._lazyLoad = () => {
-      this.setState({
-        loaded: true
-      });
-    };
-    
-    observer.observe(node);
-  }
-
-  render() {
-    return React.createElement('div', {
-      style: {
-        backgroundImage: this.state.loaded ? `url("${this.props.src}")` : ''
-      },
-
-      onClick: this.props.onclick
-    });
-  }
-};
-};
\ No newline at end of file