Merge pull request #2811 from metabrainz/svg-loader-update

Art Creator: Update svg-loader library and fix sidebar

Author: MonkeyDo

Diff for: frontend/css/fresh-releases.less

@@ -270,30 +270,6 @@
   flex-direction: column;
 }
 
-.toggle-sidebar-button {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: 9999;
-  width: 64px;
-  height: 64px;
-  padding: 10px;
-  border-radius: 50%;
-  border-color: black;
-  cursor: pointer;
-  background-color: #fff;
-  color: #353070;
-
-  @media screen and (min-width: @screen-md) {
-    display: none;
-  }
-}
-
-.toggle-sidebar-button.open {
-  background-color: #353070;
-  color: #fff;
-}
-
 .no-release {
   text-align: center;
   margin-left: auto;

Diff for: frontend/js/src/components/Sidebar.tsx

@@ -7,9 +7,12 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 function Sidebar(
-  props: React.PropsWithChildren<{ toggleIcon?: IconDefinition }>
+  props: React.PropsWithChildren<{
+    toggleIcon?: IconDefinition;
+    className?: string;
+  }>
 ) {
-  const { children, toggleIcon } = props;
+  const { children, toggleIcon, className } = props;
 
   const [isSidebarOpen, setIsSidebarOpen] = React.useState<boolean>(false);
   const toggleSidebar = () => {
@@ -18,7 +21,9 @@ function Sidebar(
 
   return (
     <>
-      <div className={`sidebar ${isSidebarOpen ? "open" : ""}`}>{children}</div>
+      <div className={`sidebar ${isSidebarOpen ? "open" : ""} ${className}`}>
+        {children}
+      </div>
       <button
         className={`toggle-sidebar-button ${isSidebarOpen ? "open" : ""}`}
         onClick={toggleSidebar}

Diff for: frontend/js/src/explore/art-creator/ArtCreator.tsx

@@ -12,6 +12,7 @@ import Preview from "./components/Preview";
 import { svgToBlob, toPng } from "./utils";
 import { ToastMsg } from "../../notifications/Notifications";
 import UserSearch from "../../common/UserSearch";
+import Sidebar from "../../components/Sidebar";
 
 export enum TemplateNameEnum {
   designerTop5 = "designer-top-5",
@@ -370,6 +371,7 @@ export default function ArtCreator() {
             onClickCopyURL={onClickCopyURL}
           />
           <Preview
+            key={previewUrl}
             url={previewUrl}
             styles={{
               textColor,
@@ -380,7 +382,17 @@ export default function ArtCreator() {
             size={DEFAULT_IMAGE_SIZE}
           />
         </div>
-        <div className="sidebar settings-navbar">
+        <Sidebar className="settings-navbar">
+          <div className="sidebar-header">
+            <p>Art Creator</p>
+            <p>Visualize and share images of your listening stats.</p>
+            <p>
+              Select your username, a date range and a template to a dynamic
+              image that you can save, copy and share easily with your friends.
+              Check out the #ListenbrainzMonday tag on your social platform of
+              choice!
+            </p>
+          </div>
           <div className="basic-settings-container">
             <div className="sidenav-content-grid">
               <h4>Settings</h4>
@@ -606,65 +618,57 @@ export default function ArtCreator() {
                 </>
               )}
               {/* <div className="flex-center input-group">
-              <label htmlFor="bg-upload">Background image:</label>
-              <div className="input-group">
-                <input className="form-control" type="text" disabled />
-                <div className="input-group-btn">
-                  <button type="button" className="btn btn-default btn-sm">
-                    <FontAwesomeIcon icon={faCloudArrowUp} />
-                  </button>
-                  <input id="bg-upload" type="file" className="hidden" />
+                <label htmlFor="bg-upload">Background image:</label>
+                <div className="input-group">
+                  <input className="form-control" type="text" disabled />
+                  <div className="input-group-btn">
+                    <button type="button" className="btn btn-default btn-sm">
+                      <FontAwesomeIcon icon={faCloudArrowUp} />
+                    </button>
+                    <input id="bg-upload" type="file" className="hidden" />
+                  </div>
                 </div>
-              </div>
-            </div> */}
+              </div> */}
 
               {/* <div>
-              <label htmlFor="genres">
-                Genres: <FontAwesomeIcon icon={faCircleQuestion} />
-              </label>
-              <input
-                id="genres"
-                type="text"
-                className="form-control"
-                onChange={updateGenresCallback}
-              />
-            </div> */}
+                <label htmlFor="genres">
+                  Genres: <FontAwesomeIcon icon={faCircleQuestion} />
+                </label>
+                <input
+                  id="genres"
+                  type="text"
+                  className="form-control"
+                  onChange={updateGenresCallback}
+                />
+              </div> */}
               {/* <div>
-              <ToggleOption onClick={userToggler} buttonName="Users" />
-              <ToggleOption onClick={dateToggler} buttonName="Date" />
-              <ToggleOption onClick={rangeToggler} buttonName="Range" />
-              <ToggleOption onClick={totalToggler} buttonName="Total" />
-              <ToggleOption onClick={genresToggler} buttonName="Genres" />
-            </div> */}
+                <ToggleOption onClick={userToggler} buttonName="Users" />
+                <ToggleOption onClick={dateToggler} buttonName="Date" />
+                <ToggleOption onClick={rangeToggler} buttonName="Range" />
+                <ToggleOption onClick={totalToggler} buttonName="Total" />
+                <ToggleOption onClick={genresToggler} buttonName="Genres" />
+              </div> */}
               {/* <div>
-              <label htmlFor="font-select">Font:</label>
-              <select
-                id="font-select"
-                className="form-control"
-                value={font}
-                onChange={updateFontCallback}
-              >
-                {fontOptions.map((opt) => (
-                  <option key={opt} value={opt}>
-                    {opt}
-                  </option>
-                ))}
-              </select>
-            </div> */}
+                <label htmlFor="font-select">Font:</label>
+                <select
+                  id="font-select"
+                  className="form-control"
+                  value={font}
+                  onChange={updateFontCallback}
+                >
+                  {fontOptions.map((opt) => (
+                    <option key={opt} value={opt}>
+                      {opt}
+                    </option>
+                  ))}
+                </select>
+              </div> */}
               {/* <div>
-              <ToggleOption onClick={vaToggler} buttonName="Ignore VA" />
-            </div> */}
+                <ToggleOption onClick={vaToggler} buttonName="Ignore VA" />
+              </div> */}
             </div>
           </div>
-          {/* <div className="generate-button-container">
-          <button
-            type="button"
-            className="btn btn-block btn-info text-uppercase"
-          >
-            Generate
-          </button>
-        </div> */}
-        </div>
+        </Sidebar>
       </div>
     </>
   );

Diff for: frontend/js/src/explore/art-creator/components/Preview.tsx

@@ -21,29 +21,16 @@ const Preview = React.forwardRef(function PreviewComponent(
     Object.values(styles)?.filter(Boolean).length
   );
   const { textColor, bgColor1, bgColor2 } = styles;
-  /* The library used to dynamically load the SVG does not currently allow handling errors
-  so we have to separately try to hit the URL to catch and display any API errors (no data for user for range, etc.)
-  See https://github.com/shubhamjain/svg-loader/pull/42 */
+
   React.useEffect(() => {
-    const fetchUrl = async () => {
-      if (!url) {
-        return;
-      }
-      try {
-        const response = await fetch(url);
-        // We only care if there was an error
-        if (!response.ok) {
-          const json = await response.json();
-          setError(json.error || "Something went wrong");
-        } else {
-          setError(undefined);
-        }
-      } catch (err) {
-        setError(err.toString());
-      }
+    const errorEventListener = ((e: CustomEvent) => {
+      setError(e.detail ?? "Something went wrong");
+    }) as EventListener;
+    window.addEventListener("iconloaderror", errorEventListener);
+    return () => {
+      window.removeEventListener("iconloaderror", errorEventListener);
     };
-    fetchUrl();
-  }, [url]);
+  }, []);
 
   if (!url) {
     return (
@@ -57,7 +44,7 @@ const Preview = React.forwardRef(function PreviewComponent(
       <div className="alert alert-danger">
         There was an error trying to load statistics for this user and time
         range:
-        <pre>{error}</pre>
+        <pre style={{ whiteSpace: "pre-wrap" }}>{error}</pre>
         Please check the username or try another time range.
       </div>
     );

Diff for: package-lock.json

@@ -64,7 +64,7 @@
     "d3-scale-chromatic": "^3.0.0",
     "debounce-async": "0.0.2",
     "dompurify": "^2.2.6",
-    "external-svg-loader": "^1.6.10",
+    "external-svg-loader": "^1.7.1",
     "fetch-retry": "^5.0.3",
     "file-saver": "^2.0.5",
     "he": "^1.2.0",