oh boy another useless rewrite incoming

[hucario]

found this a while ago and it's been sitting on my bookmarks bar for about a month now so I'm probably going to do something with this and because all the code is v messy might do a rewrite there too

[hucario]

update:

(it doesn't actually connect to pandora yet, those are sample songs)

[hucario]

hey it's me again, I should've let this go a while ago

I've been working on this on and off at hucario/genericplayer. Restarted everything as a React app, which shouldn't effect loading times too much because... you know... extensions are preloaded. Anyways, another progress update:

A mostly incomplete list of changes:

• No jquery yea boi
• React
• Icons are fonts, which gets around the whole theming icon colors mess
• Extensions. The screenshot is using sampleextension.js which just provides mock data, but the thought is that instead of being locked to one provider (pandora) it can be any radio-based service with a decent API. I'm also working on pandoraextension.js which actually hooks up to Pandora, but it only logs in and pulls stations for now.
• Modularized a few things:
• • volume and seek bars - which are ranges now, much better than jquery because it's native
• • IconToggles - the list/grid toggles & station refresh button
• • The history panel is a separate component
• • and so is the stations panel

We'll see if it's actually better with react, but development sure is easier.

[hucario]

Update:

Settings page! (and settings provider but uh I'll get to that later)

• Fully themable

• Different types of inputs, which respond to the current theme:

• Toggles: Background of toggle: var(--background) Color when checked/active: var(--active-icon-color) Color when not: var(--icon-color) Color when hovered: var(--hint-icon-color)

• Colors: Background of text/hex input: var(--background-floating-higher) (background tertiary) Color of text inside: var(--text-color) Border color (border only shows when focused): var(--active-icon-color)

• Pixels (currently only used for width and height of player): Same theming as color inputs.

• Selects (option lists): Hard to explain, just take my word for it lol

• Just straight up numbers: Same theming as pixel inputs. (uses the same code as pixel inputs, just removes the measurement indicator)

Saves the settings (and gets initial settings) to/from a settings provider. Because this is a React app, and the settings app and popup are on different ports, you can't use localstorage during dev 🙃 so I kinda uh made the settings provider unnecessarily complicated 🙃

/* polyfilling during dev because this sure ain't an extension yet */
// eslint-disable-next-line no-unused-vars
let chrome = chrome ||  {
    extension: {
        getBackgroundPage: function() {
            return {
                settings: {
                    getSettingsPages() {
                        // makes a sync xmlhttprequest to a node server that both popup & settings set/get to/from
                        // needs to be sync because getting from localhost is synchronous
                        // who uses async to get a property lmao
                    },
                    registerSettingsPage(page) {
                        // registers a settings page for getSettingsPages()
                        // each extension will do this as they initially load, because they'll be in the background
                    },
                    getSetting(daemon, key) {
                        var request = new XMLHttpRequest();
                        request.open('GET', `http://localhost:8085/setting/${encodeURIComponent(daemon)}/${encodeURIComponent(key)}`, false);  // `false` makes the request synchronous
                        request.send(null);

                        if (request.status === 200) {
                            return request.responseText;
                        }
                        return null;
                    },
                    setSetting(daemon, key, value) {
                        // throttles requests
                        this.__store.toSet[daemon] = this.__store.toSet[daemon] ?? {}
                        this.__store.toSet[daemon][key] = value;
                        if (!this.__store.timeouts[daemon]) {
                            this.__store.timeouts[daemon] = {}
                        }
                        if (this.__store.timeouts[daemon][key]) {
                            clearTimeout(this.__store.timeouts[daemon][key]);
                        }
                        this.__store.timeouts[daemon][key] = setTimeout(() => {
                            this.__set(daemon, key, this.__store.toSet[daemon][key]);
                            delete this.__store.timeouts[daemon][key];
                            delete this.__store.toSet[daemon][key];
                        }, 1500)
                        return value;
                    },
                    __set(daemon, key, value) {
                        if (value == null) {
                            return;
                        }
                        // _this_ can be async
                        fetch(`http://localhost:8085/setting/${
                                encodeURIComponent(daemon)
                            }/${
                                encodeURIComponent(key)
                            }/${
                                encodeURIComponent(value)
                            }`, {
                                method: "POST"
                            });
                    },
                    __store: {
                        timeouts: {

                        },
                        toSet: {

                        }
                    },
                    getAllSettings() {
                        var request = new XMLHttpRequest();
                        request.open('GET', `http://localhost:8085/settings/`, false);
                        request.send(null);

                        if (request.status === 200) {
                            return JSON.parse(request.responseText);
                        }
                        return null;
                    }
                }
            }
        }
    }
}

Background page isn't finished yet too so that's fun 🙃

Anyways, back to the fun stuff-

Player pane is looking v nice: (Terrible radial gradient background is to show the boundaries of the player)

It now properly interfaces with the backend: for instance, if you use the seek bar, it tells the backend "seek to (position)". Backend can directly edit all players' state to do stuff.

Mute button functions well

The whole player pane is pretty much ready for me to start on PandoraExtension.js development

Things that still need to be done:

• Stations area needs a gridmode (unless I want to remove that completely?)
• Fonts theming. I already have the CSS variables in place, I just need to set up the settings chooser for this.
• Login needs polish
• my login creds are hardcoded in right now, might want to fix that before release lmao
• tweaks.
• • I want the background art fixed, as an example. Should be a simple fix, but there are others like it
• Need to sync up a few things to settings for persistence. For example, the icontoggles should save their state.

(pinging you @pvrs12 because I'm not sure this is actually being seen and I don't want to just be talking to the void 😅)

[hucario]

ah right, and also I need to make the search work in stations also thinking of adding favorites functionality to stations

also, I swear I didn't like "hold back" on you before I've legitimately just learned that much since I made that redesign 🙃

[pvrs12]

Howdy! Boy it's been a minute since I dug back into this... sorry about that! This looks great! Since I've been so absent on this, and you seem trustworthy 😉, would you want push access? Save you the trouble of waiting on me

[hucario]

Maybe? I'd wait until this is completely done because it's probably going to be another month or two. Plus, I'd want your input for any push anyways so not much would change

[pvrs12]

Okay sounds good 👌

All in all these changes looks great!

---

From: hucario notifications@github.com Sent: Wednesday, December 23, 2020 12:34:46 PM To: pvrs12/Anesidora Anesidora@noreply.github.com Cc: Patrick Vares pvrs12@gmail.com; Mention mention@noreply.github.com Subject: Re: [pvrs12/Anesidora] oh boy another useless rewrite incoming (#63)

Maybe? I'd wait until this is completely done because it's probably going to be another month or two. Plus, I'd want your input for any push anyways so not much would change

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/pvrs12/Anesidora/issues/63#issuecomment-750401443, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABVCK4IDCTZMSTPTT7WXKLTSWIS3NANCNFSM4R4SPABQ.