Redesign Thread

[hucario]

Just what the title says. I'm working on a major redesign for the player, but I have no clue where to put the volume slider. I certainly don't want to remove it, but currently it's just in the middle of the player sitting on everything. Ideas? (yes, I realize the tabs to go to the next pane are janky. I'm working on it.)

[hucario]

here's the redesign so far: (I've hidden the volume slider for now until I can find a place to put it) Haven't done anything with the station picker yet. Radically changed the history section, though: wow! you can now dislike things from the history thing! (accidentally put that gif in reverse, whoops)

^That's me entering an invalid email, showing the warnings, and then typing in a valid email and getting in, not me entering in an email and getting told it's invalid and it showing warnings

some other small things: some bug fixes in background.js and anesidora.js

noticed a bug where if there is no local storage, you can't start it up without manually getting the token for a station from background.stationList and then doing background.play(background.stationList[0].stationToken), or the token for whichever station you want. That's probably a breaking change I made, so I'll try to fix it.

[hucario]

alright: fixed the "can't start" bug; R A D I C A L changes to the Station "List" :D begone, LIST. we have GRIDS here. search now looks way snazzier, too "How are you getting those album covers for the stations?", I hear you ask: Good question! Each album cover is from the last played song played on that station (or the default one). The URLs are stored in local storage, which means they're staying there. And all this for the low low price of $̶2̶9̶9̶.̶9̶9 free!

oh, and let's not forget this, which took the least amount of time and looks the best: an actual preview that's dynamic and uses the actual CSS, not just a box.

[pvrs12]

You are killing it! Hmm volume slider is tricky. As you might have guessed by the current look and feel, my design sense leaves something... Lacking. My gut says it could sit below the control buttons, but it could be confusing for the playback scrubber.

One other thing I'll say is I would like to make it possible to keep the old layout as an option. If that's impossible I can just offer a separate install.

[hucario]

You are killing it! Hmm volume slider is tricky. As you might have guessed by the current look and feel, my design sense leaves something... Lacking. My gut says it could sit below the control buttons, but it could be confusing for the playback scrubber.

I'm thinking just going for the traditional horizontal volume slider. I've got a free premium subscription for IconScout because my Github for Education package, so at least that won't be a problem, and I'm sure I can work out a horizontal slider easily enough.

One other thing I'll say is I would like to make it possible to keep the old layout as an option. If that's impossible I can just offer a separate install.

That is actually a problem I'm having trouble with. I want to be able to keep them both, but I've been modifying the HTML because I wasn't feeling up for some CSS zen garden at that point, and still don't. I think we have three options, each with pros and cons: 1: popup.htm is just a giant iframe pointing at new.htm or old.htm Pro: Easy Con: slight loading time 2: popup.htm is (effectively) just a giant iframe: js replaces all html/css/js on load Pro: doesn't involve iframes Con: doesn't involve iframes

3. separate install: pro: simplest for developers con: most complicated for end users

I think I'll test out iframes first and see where that goes.

[hucario]

Good news! I can stick newpopup.htm into an iframe within popup.htm and there's not lag opening it as far as I can tell. I'm going to test putting oldpopup.htm in next. (I might put in themes while I'm at it :eyes: )

Edit: They both work :eyes: :eyes: :eyes: :eyes: :eyes: :eyes: :eyes: :eyes: :eyes: :eyes: :eyes: :eyes: :eyes: :eyes: Alright, next up is editing the control panel to put in a button between them.

[pvrs12]

One other quick comment, the skip button in the redesign is a fast-forward icon. Not the end of the world, but if possible I'd like ⏭ instead of ⏩

I'm excited about the idea of themes!

Do you have any preference on attribution for these changes? This is smelling like a v2 to me and I want to make it clear that it is your overhaul

[hucario]

One other quick comment, the skip button in the redesign is a fast-forward icon. Not the end of the world, but if possible I'd like :next_track_button: instead of :fast_forward:

Oh yeah, sure, that's no problem. I still have like 55 downloads left on my IconScout account. Thanks for the catch!

I'm excited about the idea of themes!

Me too :)

Do you have any preference on attribution for these changes? This is smelling like a v2 to me and I want to make it clear that it is your overhaul

Well, it's my first time working on a project like this semi-publicly, so I don't know what level of attribution would be appropriate. Maybe like a some contributions by [Hugh](https://github.com/hucario) in the changelog or something?

[pvrs12]

https://github.com/pvrs12/Anesidora/releases/tag/v1.14.0 Attributed here.

Do you want it listed on the chrome/mozilla webstores too?

[hucario]

Sure, thanks! Also, do you want me to commit the changes I have right now so you can build it yourself? It's not nearly done yet, but it's better than screenshots.

[pvrs12]

If it's not a pain for you, I'd love to check them out!

[hucario]

Sorry, had to get off for the night. Alright, I'm commiting my current work (not anything finished, mind you, just what I have right now) to hucario/Anesidora right after I make the options.js work so you can properly switch between old/new players (shouldn't take too long - 10 minutes?)

edit: taking a bit longer because I have to change the defaults and minimums systems into object-based systems, because the two players need different defaults and minimums edit 2: that took WAY too long but I have it at a place I'm satisfied with now, committing it

[pvrs12]

Awesome, I'll check it out this afternoon!

[hucario]

Alright, committed it. Next I'll work on creating a volume slider, and then... themes? maybe? I don't know where I'd put the settings for that

edit: actually I'm going to work on the skip button. shouldn't be too long in Inkscape.

One other quick comment, the skip button in the redesign is a fast-forward icon. Not the end of the world, but if possible I'd like :next_track_button: instead of :fast_forward:

[hucario]

this work fine? I can edit it more if you like, I've got time. (Also; in case I didn't mention it, all new images are SVGs, which means they can scale infinitely) I would appreciate it if you would delay release until I get a few more things satisfactory, such as this css:

#historyDiv:empty:before {
    content: "History is empty";
    width: 100%;
    text-align: center;
    display: block;
    font-size: calc(var(--width) / 7);
    color: rgba(255,255,255,0.3);
}
#historyDiv:empty {
    display: flex;
    align-items: center;
    flex-direction: row;
}

[hucario]

alright. this is about where I've settled on: thoughts? maybe make the rest of the slider white or something?

[hucario]

eyy, partial themeing support! (css variables, but no way to change the theme) Don't mind that the volume seems to have dissapeared, I just haven't reloaded the extension for that to take effect yet. some themes that I threw together (nothing saved, just examples of what you can do):

A rose theme

A garden theme (look I said you could theme, not that I'm any good at theming)

This was going to be a space theme but honestly I'm not sure at this point

[pvrs12]

Skip looks great! Love the themes, and don't worry, mine won't be any better.

Volume slider looks good. I'd agree with having the whitespacefor the rest of the slider.

And yeah of course I'll hold it! There's definitely going to need to be a lot of testing and bug squash in before we do any sort of official release

[hucario]

@pvrs12 I've been testing with theming your old player for about an hour and uh...

I don't think we should attempt theming the old player, because it doesn't work very well. That may just be my lack of skill in creating themes, though.

I think the theming page will be separate from the settings, but linked to from the settings, because the settings are about as large as they should be. that was a sentence

[pvrs12]

Heh, no surprises that the old player has a whole lot of old crap. I'd agree about theming options being on a separate page.

[pvrs12]

Are you thinking about having the theming controls/settings in the extension or leave people to their own devices (modify a file).

I'm indifferent between them

[hucario]

I was thinking something like both, actually. Theming options has a hand-holding section for most people, and a section with two textboxes: one for input, where you can paste in objects generated by the output, which you could edit by hand I guess. It's hard to explain, but I think this will help? It's the hand-holding object that I'm working on right now.

[
    {
        'name': 'Covers per Row',
        'desc': 'How many album covers show per row in the Stations and History grids.',
        'property': 'size',
        'func': function(a) {
            return 'calc(var(--width) / '+a+')';
        }
    },
    {
        'name': 'Background',
        'desc': 'The background of the player. Can be a URL to an image or a color.',
        'property': 'background',
        'func': function(a) {
              var isURL = new RegExp('^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$','i').test(a);
            if (isURL) {
                return `url('${a}')`;
            } else {
                return a;
            }
        }
    },
    {
        'name': 'Font',
        'desc': 'What font will be used through the player.',
        'property': 'font-family',
        'func': function(a) { return a; }
    }]

Then, when they're done hand-holding, they have an option to export what that generates to a JSON file or just copy the JSON. If they want to just modify a file, they can modify that. There'll also be an import option for a string or a JSON file. I hope that explains what I mean well, because I have no better way to explain it.

[hucario]

@pvrs12 that's some good stuff right there :eyes: :eyes: :eyes:

[pvrs12]

Oh thats great! 👌👌👌

[hucario]

Now, to add the inport/export settings, right after crowing that the save function actually works now

[hucario]

@pvrs12 you're going to want to build my fork and check it out; I suggest going to options and pressing 'theme', then import this crappy theme (right click -> save link as...) I think I'm about done for now, unless you have ideas to implement.

[pvrs12]

Moving conversation to #54