Apply prettier to Custom Apps

.github/workflows/prettier.yml

@@ -11,4 +11,4 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actionsx/prettier@v2
       with:
-        args: --print-width 150 --tab-width 4 --trailing-comma es5 --arrow-parens always --write "./Extensions/*.js" "./jsHelper/{homeConfig,sidebarConfig}.js" "CustomApps/*/*.css"
+        args: --print-width 150 --tab-width 4 --trailing-comma es5 --arrow-parens always --write .\Extensions\*.js ".\jsHelper\{homeConfig,sidebarConfig}.js" "CustomApps\*\*{.js,.css}"

.prettierignore

@@ -0,0 +1,2 @@
+# File too complex to be formatted
+spicetifyWrapper.js

CustomApps/new-releases/Card.js

@@ -27,70 +27,129 @@ class Card extends react.Component {
             detail.push(Spicetify.Locale.get("tracklist-header.songs-counter", this.trackCount));
         }
 
-        return react.createElement(Spicetify.ReactComponent.RightClickMenu || "div", {
-            menu: react.createElement(this.menuType, { uri: this.uri, }),
-        }, react.createElement("div", {
-            className: "main-card-card",
-            onClick: (event) => {
-                History.push(this.href);
-                event.preventDefault();
+        return react.createElement(
+            Spicetify.ReactComponent.RightClickMenu || "div",
+            {
+                menu: react.createElement(this.menuType, { uri: this.uri }),
             },
-        }, react.createElement("div", {
-            className: "main-card-draggable",
-            draggable: "true"
-        }, react.createElement("div", {
-            className: "main-card-imageContainer"
-        }, react.createElement("div", {
-            className: "main-cardImage-imageWrapper"
-        }, react.createElement("div", {
-        }, react.createElement("img", {
-            "aria-hidden": "false",
-            draggable: "false",
-            loading: "lazy",
-            src: this.imageURL,
-            className: "main-image-image main-cardImage-image"
-        }))), react.createElement("div", {
-            className: "main-card-PlayButtonContainer"
-        }, react.createElement("button", {
-            className: "main-playButton-PlayButton main-playButton-primary",
-            "aria-label": Spicetify.Locale.get("play"),
-            style: { "--size": "40px" },
-            onClick: this.play.bind(this),
-        }, react.createElement("svg", {
-            height: "16",
-            role: "img",
-            width: "16",
-            viewBox: "0 0 24 24",
-            "aria-hidden": "true"
-        }, react.createElement("polygon", {
-            points: "21.57 12 5.98 3 5.98 21 21.57 12",
-            fill: "currentColor"
-        }))))), react.createElement("div", {
-            className: "main-card-cardMetadata"
-        }, react.createElement("a", {
-            draggable: "false",
-            title: this.title,
-            className: "main-cardHeader-link",
-            dir: "auto",
-            href: this.href
-        }, react.createElement("div", {
-            className: "main-cardHeader-text main-type-balladBold",
-            as: "div"
-        }, this.title)), detail.length > 0 && react.createElement("div", {
-            className: "main-cardSubHeader-root main-type-mestoBold new-releases-cardSubHeader",
-            as: "div",
-        }, react.createElement("span", null, detail.join(" • ")),
-        ), react.createElement("a", {
-            className: `main-cardSubHeader-root main-type-mesto new-releases-cardSubHeader`,
-            href: this.artistHref,
-            onClick: (event) => {
-                History.push(this.artistHref);
-                event.stopPropagation();
-                event.preventDefault();
-            },
-        }, react.createElement("span", null, this.artist.name)),
-        ), react.createElement("div", {
-            className: "main-card-cardLink"
-        }))));
+            react.createElement(
+                "div",
+                {
+                    className: "main-card-card",
+                    onClick: (event) => {
+                        History.push(this.href);
+                        event.preventDefault();
+                    },
+                },
+                react.createElement(
+                    "div",
+                    {
+                        className: "main-card-draggable",
+                        draggable: "true",
+                    },
+                    react.createElement(
+                        "div",
+                        {
+                            className: "main-card-imageContainer",
+                        },
+                        react.createElement(
+                            "div",
+                            {
+                                className: "main-cardImage-imageWrapper",
+                            },
+                            react.createElement(
+                                "div",
+                                {},
+                                react.createElement("img", {
+                                    "aria-hidden": "false",
+                                    draggable: "false",
+                                    loading: "lazy",
+                                    src: this.imageURL,
+                                    className: "main-image-image main-cardImage-image",
+                                })
+                            )
+                        ),
+                        react.createElement(
+                            "div",
+                            {
+                                className: "main-card-PlayButtonContainer",
+                            },
+                            react.createElement(
+                                "button",
+                                {
+                                    className: "main-playButton-PlayButton main-playButton-primary",
+                                    "aria-label": Spicetify.Locale.get("play"),
+                                    style: { "--size": "40px" },
+                                    onClick: this.play.bind(this),
+                                },
+                                react.createElement(
+                                    "svg",
+                                    {
+                                        height: "16",
+                                        role: "img",
+                                        width: "16",
+                                        viewBox: "0 0 24 24",
+                                        "aria-hidden": "true",
+                                    },
+                                    react.createElement("polygon", {
+                                        points: "21.57 12 5.98 3 5.98 21 21.57 12",
+                                        fill: "currentColor",
+                                    })
+                                )
+                            )
+                        )
+                    ),
+                    react.createElement(
+                        "div",
+                        {
+                            className: "main-card-cardMetadata",
+                        },
+                        react.createElement(
+                            "a",
+                            {
+                                draggable: "false",
+                                title: this.title,
+                                className: "main-cardHeader-link",
+                                dir: "auto",
+                                href: this.href,
+                            },
+                            react.createElement(
+                                "div",
+                                {
+                                    className: "main-cardHeader-text main-type-balladBold",
+                                    as: "div",
+                                },
+                                this.title
+                            )
+                        ),
+                        detail.length > 0 &&
+                            react.createElement(
+                                "div",
+                                {
+                                    className: "main-cardSubHeader-root main-type-mestoBold new-releases-cardSubHeader",
+                                    as: "div",
+                                },
+                                react.createElement("span", null, detail.join(" • "))
+                            ),
+                        react.createElement(
+                            "a",
+                            {
+                                className: `main-cardSubHeader-root main-type-mesto new-releases-cardSubHeader`,
+                                href: this.artistHref,
+                                onClick: (event) => {
+                                    History.push(this.artistHref);
+                                    event.stopPropagation();
+                                    event.preventDefault();
+                                },
+                            },
+                            react.createElement("span", null, this.artist.name)
+                        )
+                    ),
+                    react.createElement("div", {
+                        className: "main-card-cardLink",
+                    })
+                )
+            )
+        );
     }
 }

CustomApps/new-releases/Icons.js

@@ -1,32 +1,101 @@
-const LoadingIcon = react.createElement("svg", {
-    width: "100px", height: "100px", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid"
-}, react.createElement("circle", {
-    cx: "50", cy: "50", r: "0", fill: "none", stroke: "currentColor", "stroke-width": "2"
-}, react.createElement("animate", {
-    attributeName: "r", repeatCount: "indefinite", dur: "1s", values: "0;40", keyTimes: "0;1", keySplines: "0 0.2 0.8 1", calcMode: "spline", begin: "0s"
-}), react.createElement("animate", {
-    attributeName: "opacity", repeatCount: "indefinite", dur: "1s", values: "1;0", keyTimes: "0;1", keySplines: "0.2 0 0.8 1", calcMode: "spline", begin: "0s"
-})), react.createElement("circle", {
-    cx: "50", cy: "50", r: "0", fill: "none", stroke: "currentColor", "stroke-width": "2"
-}, react.createElement("animate", {
-    attributeName: "r", repeatCount: "indefinite", dur: "1s", values: "0;40", keyTimes: "0;1", keySplines: "0 0.2 0.8 1", calcMode: "spline", begin: "-0.5s"
-}), react.createElement("animate", {
-    attributeName: "opacity", repeatCount: "indefinite", dur: "1s", values: "1;0", keyTimes: "0;1", keySplines: "0.2 0 0.8 1", calcMode: "spline", begin: "-0.5s"
-})));
+const LoadingIcon = react.createElement(
+    "svg",
+    {
+        width: "100px",
+        height: "100px",
+        viewBox: "0 0 100 100",
+        preserveAspectRatio: "xMidYMid",
+    },
+    react.createElement(
+        "circle",
+        {
+            cx: "50",
+            cy: "50",
+            r: "0",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+        },
+        react.createElement("animate", {
+            attributeName: "r",
+            repeatCount: "indefinite",
+            dur: "1s",
+            values: "0;40",
+            keyTimes: "0;1",
+            keySplines: "0 0.2 0.8 1",
+            calcMode: "spline",
+            begin: "0s",
+        }),
+        react.createElement("animate", {
+            attributeName: "opacity",
+            repeatCount: "indefinite",
+            dur: "1s",
+            values: "1;0",
+            keyTimes: "0;1",
+            keySplines: "0.2 0 0.8 1",
+            calcMode: "spline",
+            begin: "0s",
+        })
+    ),
+    react.createElement(
+        "circle",
+        {
+            cx: "50",
+            cy: "50",
+            r: "0",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+        },
+        react.createElement("animate", {
+            attributeName: "r",
+            repeatCount: "indefinite",
+            dur: "1s",
+            values: "0;40",
+            keyTimes: "0;1",
+            keySplines: "0 0.2 0.8 1",
+            calcMode: "spline",
+            begin: "-0.5s",
+        }),
+        react.createElement("animate", {
+            attributeName: "opacity",
+            repeatCount: "indefinite",
+            dur: "1s",
+            values: "1;0",
+            keyTimes: "0;1",
+            keySplines: "0.2 0 0.8 1",
+            calcMode: "spline",
+            begin: "-0.5s",
+        })
+    )
+);
 
 class LoadMoreIcon extends react.Component {
     render() {
-        return react.createElement("div", {
-            onClick: this.props.onClick,
-        }, react.createElement("p", {
-            style: {
-                fontSize: 100,
-                lineHeight: "65px",
-            }
-        }, "»"), react.createElement("span", {
-            style: {
-                fontSize: 20,
-            }
-        }, "Load more"));
-    };
-}
+        return react.createElement(
+            "div",
+            {
+                onClick: this.props.onClick,
+            },
+            react.createElement(
+                "p",
+                {
+                    style: {
+                        fontSize: 100,
+                        lineHeight: "65px",
+                    },
+                },
+                "»"
+            ),
+            react.createElement(
+                "span",
+                {
+                    style: {
+                        fontSize: 20,
+                    },
+                },
+                "Load more"
+            )
+        );
+    }
+}