add basic event functionality and a loader at startup

CHANGELOG.md

@@ -1,3 +1,6 @@
+Added:
+- A spinning loader at startup while spotify is not ready
+
 Fixed:
 - Checking for update every 10 Minutes not working
 - Background album art is cut off (#116)

src/js/Dribbblish.js

@@ -0,0 +1,68 @@
+import ConfigMenu from "./ConfigMenu";
+import Info from "./Info";
+import Loader from "./Loader";
+
+export default class Dribbblish {
+    /**
+     * @typedef {"ready"} Event
+     */
+
+    /**
+     * @callback listener
+     * @param {any} [data]
+     * @returns {void}
+     */
+
+    /** @type {ConfigMenu} */
+    config;
+
+    /** @type {Info} */
+    info;
+
+    /** @type {Loader} */
+    loader;
+
+    /** @type {Object.<string, listener[]>} */
+    #listeners = {};
+
+    /** @type {Boolean} */
+    #ready = false;
+
+    constructor() {
+        this.config = new ConfigMenu();
+        this.info = new Info();
+        this.loader = new Loader();
+
+        const interval = setInterval(() => {
+            if (document.querySelector("#main") == null || Spicetify?.showNotification == undefined || !this.info.isReady()) return;
+            this.#ready = true;
+            this.emit("ready");
+            clearInterval(interval);
+        }, 200);
+    }
+
+    /**
+     * @param {Event} event
+     * @param {any} data
+     */
+    emit(event, data) {
+        this.#listeners[event]?.forEach((listener) => listener(data));
+    }
+
+    /**
+     * @param {Event} event
+     * @param {listener} listener
+     */
+    on(event, listener) {
+        this.#listeners[event] = [...(this.#listeners[event] ?? []), listener];
+        if (event == "ready" && this.#ready) listener();
+    }
+
+    /**
+     * @param {Event} event
+     * @param {listener} listener
+     */
+    off(event, listener) {
+        this.#listeners = this.#listeners[event].filter((f) => f != listener);
+    }
+}

src/js/Info.js

@@ -43,6 +43,10 @@ export default class Info {
         });
     }
 
+    isReady() {
+        return this.#ready;
+    }
+
     /**
      * @param {String} key
      * @param {DribbblishInfo} info

src/js/Loader.js

@@ -0,0 +1,25 @@
+export default class Loader {
+    /** @type {HTMLDivElement} */
+    #container;
+
+    constructor() {
+        this.#container = document.createElement("div");
+        this.#container.id = "dribbblish-loader";
+        this.#container.innerHTML = `
+            <svg width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+                <circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+            </svg>
+        `;
+
+        document.body.appendChild(this.#container);
+    }
+
+    show(text) {
+        this.#container.setAttribute("text", text ?? "");
+        this.#container.setAttribute("active", "");
+    }
+
+    hide() {
+        this.#container.removeAttribute("active");
+    }
+}

src/js/Util.js

@@ -60,3 +60,17 @@ export function htmlToNode(htmlStr) {
     div.innerHTML = htmlStr.trim();
     return div.firstChild;
 }
+
+export function getRandomArbitrary(min, max) {
+    return Math.random() * (max - min) + min;
+}
+
+export function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export function randomFromArray(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+}

src/js/main.js

@@ -4,9 +4,8 @@ import chroma from "chroma-js";
 import $ from "jquery";
 import moment from "moment";
 
-import { waitForElement, copyToClipboard, capitalizeFirstLetter, getClosestToNum } from "./Util";
+import { waitForElement, copyToClipboard, capitalizeFirstLetter, getClosestToNum, randomFromArray } from "./Util";
-import ConfigMenu from "./ConfigMenu";
+import { default as _Dribbblish } from "./Dribbblish";
-import Info from "./Info";
 import "./Folders";
 
 import iconArrowDown from "icon/arrow-down";
@@ -14,14 +13,19 @@ import iconCode from "icon/code";
 import iconWifiSlash from "icon/wifi-slash";
 import iconCog from "icon/cog";
 
-const Dribbblish = {
-    config: new ConfigMenu(),
-    info: new Info()
-};
-const colorThief = new ColorThief();
 // To expose to external scripts
+const Dribbblish = new _Dribbblish();
 window.Dribbblish = Dribbblish;
 
+const colorThief = new ColorThief();
+
+// In the future maybe have some useful info here
+const loadingHints = ["Getting things ready...", "Starting up...", "Just one moment..."];
+Dribbblish.loader.show(randomFromArray(loadingHints));
+
+Dribbblish.on("ready", () => {
+    setTimeout(() => Dribbblish.loader.hide(), 3000);
+
     Dribbblish.config.register({
         type: "checkbox",
         key: "openSettingsInfo",
@@ -108,7 +112,6 @@ waitForElement([".main-nowPlayingBar-container"], ([container]) => {
         });
     });
 
-waitForElement(["#main"], () => {
     Dribbblish.config.register({
         type: "select",
         data: { none: "None", "none-padding": "None (With Top Padding)", solid: "Solid", transparent: "Transparent" },
@@ -152,7 +155,6 @@ waitForElement(["#main"], () => {
         defaultValue: false,
         onChange: (val) => $("#main").attr("hide-ads", val)
     });
-});
 
     waitForElement([".main-rootlist-rootlist", ".main-rootlist-wrapper > :nth-child(2) > :first-child", "#spicetify-show-list"], ([rootlist]) => {
         function checkSidebarPlaylistScroll() {
@@ -273,8 +275,6 @@ Dribbblish.config.register({
         onChange: (val) => $("html").css("--song-transition-speed", `${val}s`)
     });
 
-// waitForElement because Spicetify is not initialized at startup
-waitForElement(["#main"], () => {
     Dribbblish.config.registerArea({ name: "About", order: 999 });
 
     Dribbblish.config.register({
@@ -380,7 +380,6 @@ waitForElement(["#main"], () => {
         data: "Open",
         onChange: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases", "_blank")
     });
-});
 
     /* js */
     async function getAlbumRelease(uri) {
@@ -543,6 +542,7 @@ Dribbblish.config.register({
         area: "Theme",
         type: "select",
         data: { dark: "Dark", light: "Light", time: "Based on Time" },
+        order: -1,
         key: "theme",
         name: "Theme",
         description: "Select Dark / Bright mode",
@@ -677,6 +677,7 @@ async function songchange() {
     }
 
     Spicetify.Player.addEventListener("songchange", songchange);
+    songchange();
 
     async function pickCoverColor(img) {
         if (!img.currentSrc.startsWith("spotify:")) return;
@@ -772,5 +773,6 @@ window.addEventListener("offline", () =>
         })
     );
     window.addEventListener("online", () => Dribbblish.info.remove("offline"));
+});
 
 $("html").css("--warning_message", " ");

src/styles/ConfigMenu.scss

@@ -27,12 +27,12 @@
         backdrop-filter: blur(3px);
         padding: 20px 15px;
         border-radius: var(--main-corner-radius);
-        box-shadow: 0 0 10px 3px #0000003b;
         display: flex;
         gap: 5px;
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        @include spiceShadow();
 
         .dribbblish-config-close {
             position: absolute;

src/styles/ContextMenu.scss

@@ -16,6 +16,7 @@
         backdrop-filter: blur(10px);
         border-radius: var(--main-corner-radius);
         box-shadow: 0px 0px 8px spiceColor("subtext", 0.1, 0.1);
+        @include spiceShadow();
     }
 
     .main-contextMenu-menuItem {

src/styles/Loader.scss

@@ -0,0 +1,73 @@
+// From https://codepen.io/mrrocks/pen/EiplA
+@use "sass:math";
+
+$offset: 187;
+$duration: 1.4s;
+
+#dribbblish-loader {
+    z-index: 999999;
+    position: fixed;
+    inset: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 1s ease-in;
+
+    &[active] {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0px;
+        color: spiceColor("subtext");
+        background-color: spiceColor("main", 0.9, -0.1);
+        backdrop-filter: blur(10px);
+    }
+
+    &::after {
+        content: attr(text);
+        position: absolute;
+        bottom: 40%;
+        @include spiceFont("glue", 32px, "Bold");
+    }
+
+    svg {
+        animation: rotator $duration linear infinite;
+
+        circle {
+            stroke: spiceColor("sidebar");
+            stroke-dasharray: $offset;
+            stroke-dashoffset: 0;
+            transform-origin: center;
+            animation: dash $duration ease-in-out infinite;
+        }
+    }
+}
+
+@keyframes rotator {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(270deg);
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dashoffset: $offset;
+    }
+    50% {
+        stroke-dashoffset: math.div($offset, 4);
+        transform: rotate(135deg);
+    }
+    100% {
+        stroke-dashoffset: $offset;
+        transform: rotate(450deg);
+    }
+}

src/styles/Util.scss

@@ -2,3 +2,7 @@
 @function lightOffset($n, $offset) {
     @return calc($n + $offset * var(--is_light));
 }
+
+@mixin spiceShadow() {
+    box-shadow: 0px 0px 8px spiceColor("subtext", 0.1, 0.1);
+}

src/styles/main.scss

@@ -12,6 +12,7 @@
 @import "NoAds";
 @import "Markdown";
 @import "Info";
+@import "Loader";
 
 :root {
     --bar-height: 70px;