Redesign v3 Thread

[hucario]

for some reason I keep coming back here it's probably because I like the project and I use it probably the most out of any of my browser extensions anyways I updated the ui a tiny bit. you may not want to push this to main because... maybe three ui updates in a year is a tad too much for longtime users? I've changed it a bit more to adapt to high popup heights because I switched to Vivaldi and made it a webpanel which is as high as the screen, as opposed to chrome popups being limited in height to I think it's 599px?

was I saying something? oh right yeah so here are the changes I've made and a few screenshots

• redid the html for the icon, a lot
• in fact I redid a lot of the html
  • the "switch to different tab" buttons (the chevrons) are now actual buttons, rather than <span>s (yay, semantic html)
  • I switched to using the Inter font family instead of using the default sans-serif, as it just looks a lot nicer:
  • ok now that I see it side-by-side you can't actually tell that much based on the history panel's small text but just trust me it looks much better for the main panel, I just don't want to spoil what the main panel looks like yet
  • the player controls pane got a lot of improvements:
  • album cover:
    • is now not a link
    • when the player is too short, it just... doesn't go full width
    • is now an actual <img> instead of an <a> with a background-image (yay, semantic html)
    • when there's no room for it to be as high as the player is wide, it shows little reflections to the right and left:
    • reflections also use <img>s, meaning that they load in the same fashion as the main image (example of differing <img> and background-image)
  • artist / album / song info:
    • now does not have horizontal scrolling functionality
    • instead, it dynamically shrinks the cover[1] if it doesn't have space
    • big text now. looked better to me, you can shrink it if you want
    • there's now an album link with the album name on it so you know what you're listening to
    • I didn't actually mean to replace the cover link with this but it was convenient
    • artist and album links are smaller than song name, and usually have an opacity of 0.7 unless they're:
    • being hovered on
    • focused
  • I moved the play/pause and skip buttons to be larger and with the song details, because they're the most important buttons
  • the other buttons now have the same opacity properties as the artist and album links
  • When there's no station playing (where it usually says "Play to play your latest station" or something like that), now it says that and the play button pulses:
  • I swapped some expensive transitions (width, left) to good GPU-accelerable transitions (transform: scaleX, transform: translate)

that said, I did break theming a little bit because I figured I wasn't going to share these modifications ✨ but then I did ✨ so I'll need to fix that

again, no pressure to add this. tell me if you do want it though so I can fix the issues that I don't care about but would matter were it to be released to the public (mostly how I broke theming a tad)

screenshots

Main player pane:  Stations pane: (I figured that since station names are long, they should have more room, so 3 per row -> 2 per row)  Main player pane, in a Vivaldi webpanel (meaning it has enough height to have the cover "comfortable"):  Inter vs sans-serif comparison: (See especially the album & artist names) 

fruit by the footnotes

[1] details on how it does this: the cover is actually set to have a `height` of zero, but with `flex-grow` set to 10 so that it _can_ grow, but only if there's free space. because the other elements aren't absolutely positioned anymore, they have a say in layout and thus can bully around the cover into being smaller. turns out that if you don't use hacks in the first place you don't have to use hacks later

[lovelydumpling]

On the history panel, the inter text looks a lot sharper than the sans-serif, definitely a better font to be sure. I personally would love all these changes, really like what you've done with it.

[hucario]

Changed a few things:

• Replaced "reflections" with previous / coming album covers:
• New transition to fit with that whenever the song changes:

https://user-images.githubusercontent.com/50851047/137649084-7641c45f-acd1-40a8-9f7f-22c9e756995e.mp4

• Shouldn't be very slow / resource intensive, as I'm using Good Practices:tm: and transform
• With this the masking doesn't rely on -webkit-mask-image anymore, which means it should be fine on Firefox-based devices (although I also added the standard mask-image property, I'm not sure how well it works with linear-gradient and I'm not launching Firefox to find out)
• it shows the previous and coming song, but it also preloads the song after that's cover so it doesn't have to load in during the transition
  • the only exception to this is when you're at the end of the current playlist, in which case it doesn't request a new playlist early. however, it still shows the coming song so it's not too bad

this is being worked on at hucario/Anesidora:vivaldi-webpanel

it's still not ready for broad usage, mainly because I screwed with the theming settings

[hucario]

I'm not certain how but now anesidora-as-a-tab looks good

I didn't specifically design for this but it looks good and sure I'll keep it

[pvrs12]

Howdy! I'm sorry I haven't been up-to-date with this in recent history. Work and life has been super busy.

I'm going to give you push perms to the repo. Your UI skills are far beyond mine and I trust your judgement on these things. I'm sorry I can't be more active in the dev right now...

Once you've got a build ready lmk and I can release it on the Mozilla app store

[hucario]

Alright. I'll wait until I've got everything fleshed out and working, then wait for your consent, then push to main.

To-do:

• Redo the entirety of settings

[hucario]

whoopsie, I may have accidentally reimplemented the entire history pane in the form of those sidecovers I made previously now I just need to get the song transition working again video (couldn't put it on github because it's a ✨large file✨) It's a little laggy, but that's because I'm recording large video and have a trash computer, not because it's actually doing that much work this is what happens when I let myself get distracted while working on UI

I've also done a little bit of work on a reworked options page but it's nowhere near functional yet:

https://user-images.githubusercontent.com/50851047/139377386-9d2b823d-8a8c-4aa2-bd1a-95ea3e038e6c.mp4

[hucario]

This interfaces gives options, by the way

so I'm adding a few things to my to-do:

• per song in the "coming next" queue:
  • [x] "skip to this song" button, which... skips all songs until it gets to that song
  • "why this song?" button, which queries track.explainTrack
  • favourite a song, for later reference. this stays completely on the client, doesn't do anything with pandora
  • [x] remove from playlist. i don't want it. get it out of here

[hucario]

update: "skip to song" and "remove from playlist" now work I also got the autoscroll to work. it was janky as hell and took two days and I still don't know why it works?? but it does now and I'm not screwing with autoscroll ever again dear GOD

I've decided that the favourite button is a can of worms I don't want to open, so here's the updated checklist:

• [x] skip to this song
• [ ] why this song / song explanation / track.explainTrack
• [x] remove this song
• [ ] QA / bug testing
• [ ] settings

screenshot / video:

https://user-images.githubusercontent.com/50851047/141905829-12a4c55d-ebfe-4d5f-9203-5f4a6854f823.mp4

[pvrs12]

Hey, it's been a minute! These are looking great!

I'm looking to test this out for myself a little bit. Is the code available on your fork? I didn't see it, but I also didn't check every branch.

How do things look in the popout? I'd like to be able to keep that functionality and have a button/option to put new.htm in its own tab.

I went ahead and merged the changes for lazy loading and packaging and have released your fix for the request spamming. The packaging one should make it a lot easier to release test builds for everyone (especially @lovelydumpling).

I'll hopefully have a little more time in the near-ish future to work on further improvements. I saw your typescript branch on your fork and am very interested. I (very halfheartedly) attempted that a few years back, but didn't get anywhere.

[hucario]

Is the code available on your fork?

Ah, yeah, it's at hucario/anesidora:vivaldi-webpanel

How do things look in the popout?

Experiencing a bug with the autoscroll where it scrolls the entire player instead of covers but it's completely fixable Here's a screenshot with the bug in effect and with it manually fixed:

I went a head and merged lazy-loading and automatic packaging

Neat, that'll make public beta testing much easier, yeah

I saw your typescript branch on your fork and am very interested

Oh yeah, I've spent a bunch of time on that lately Spent a while porting every (known and documented) pandora API request and response to TS

Allows for this type of thing:

I'm eventually going to rewrite all of background.js and anesidora.js to be able to handle multiple accounts and apparently Pandora has a bookmarks functionality already so I don't need to deal with a lot more complexity so in conclusion I can add a favorites button

I'm also reworking the entirety of settings? And creating a first-start setup tour, here's what I've got so far

in conclusion this is going to take a while fortunately I have a lot more time than usual this week so I'm going to be working on it a lot

[pvrs12]

fortunately I have a lot more time than usual this week so I'm going to be working on it a lot :turkey: same :turkey:

I'll be around to poke things/test if you want.

Just loaded up your branch, and yep, it'll definitely be a bit 😉 but that's nbd.

A starter Options page is a good idea, but I would recommend only showing it the first time someone clicks the "options" button, otherwise just go with the defaults as normal.

[pvrs12]

I went ahead and created https://github.com/pvrs12/Anesidora/pull/99 based on your fork/branch. Once it's up-to-date with master (pretty easy merge, only 3 conflicts) it should do auto-builds for you whenever you push.

[hucario]

A starter Options page is a good idea, but I would recommend only showing it the first time someone clicks the "options" button, otherwise just go with the defaults as normal.

I was actually thinking on first install, but yeah that works too.

Minor note: I'm ditching old player support in this branch, it's just too much of a pain (especially as I'm reworking the background scripts so I'd have to rework the oldplayer scripts as well)

[pvrs12]

I'm ditching old player support in this branch

That's fine, if someone wants that they can version lock

On Mon, Nov 22, 2021, 12:53 PM hucario @.***> wrote:

A starter Options page is a good idea, but I would recommend only showing it the first time someone clicks the "options" button, otherwise just go with the defaults as normal.

I was actually thinking on first install, but yeah that works too.

Minor note: I'm ditching old player support in this branch, it's just too much of a pain (especially as I'm reworking the background scripts so I'd have to rework the oldplayer scripts as well)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/pvrs12/Anesidora/issues/93#issuecomment-975775995, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABVCK4NIA7I6P5FBUUVKZ7LUNJ7RNANCNFSM5GEHTNIQ .

[hucario]

Update: Multi-account backend is working (as a start, for logins), and it automatically fetches bookmarks on login.

I also may have made a build.ts that compiles the typescript, copies the appropriate manifest, and copies all other files (non-.ts) from common.

[lovelydumpling]

Shame the old layout's being phased out. Makes sense that it'd happen and why it's happening, but I'll admit I've always preferred the smaller form factor of that player.

I suppose if I were to have a request, although I don't know how difficult it'd be to implement, perhaps a compact mode? With smaller font and no album art, so it's just the playhead, song/artist name, and controls? That ultimately would serve well to replace what I like most in the Old layout, although it's certainly not super important and I can make do without it.

Obviously I could version lock like mentioned but there's always the chance something will break again down the line like it did earlier this year and then folks won't really have a choice anymore anyway.

[hucario]

I suppose if I were to have a request, although I don't know how difficult it'd be to implement, perhaps a compact mode? With smaller font and no album art, so it's just the playhead, song/artist name, and controls? That ultimately would serve well to replace what I like most in the Old layout, although it's certainly not super important and I can make do without it.

Sure, I can absolutely do that. I'm already making the player very customizable so yeah that works too, I'll just add miniplayer support

[lovelydumpling]

You're my hero.

[hucario]

Alright, after far too long I have finished the bookmarks page. Mostly. I still need to add contextmenu support but I'm waiting until I implement that everywhere before I implement that here.

I've sort of redesigned the whole player, but the main gist is that each panel is created by a function and thus you can reorder them all you like. Changes based off of the config, and updates live with said config. Mildly amusingly, what took the most time was making it so it could update without having to rebuild the entire thing.

Anyways, here's Wonderwall a quick demonstration of that being a thing you can do, by changing the default album cover (image that shows when there isn't one):

https://user-images.githubusercontent.com/50851047/143328755-c458af34-ff3c-4b26-9a49-d07714cfa980.mp4

Here's a slightly more dramatic change, but it's the same system, which is the one the settings page will use:

Client sends "changeConfig" to backend with changed value
Backend saves that in localStorage
Backend sends "configChanged" to client(s)
Clients sift through the data and figure out what to do (ah, newValue.backgroundColor !== oldValue.backgroundColor, so run bPNodes.style.backgroundColor = newValue.backgroundColor)

https://user-images.githubusercontent.com/50851047/143331290-d388c01c-83da-424f-affe-57b15e0f1956.mp4

The current config schema

Currently it only has the options for the Bookmarks pane, as that's what I've finished - but there'll be options per pane, and global options, and options for player behavior, and options for almost everything. ```ts const defaultConfig: AnesidoraConfig = { searchProvider: 'https://youtube.com/results?search_query=', defaultPane: "bookmarks", bookmarksPane: { uniqueOption: true }, theming: { popupWidth: "400px", popupHeight: "599px", cssVars: { tabSize: '2rem', fontFamily: "'Inter', sans-serif" }, customCSS: null, common: {}, bookmarks: { defaultAlbumCover: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPkL5v/HwAD5QIlaA51ZwAAAABJRU5ErkJggg==', backgroundColor: 'rgba(0,0,0,1)', textColor: 'rgba(255,255,255,1)', padding: '0 5rem 5rem 5rem', mode: 'widesquares', groupMode: 'artist_first', combined: false, artistGroup: { gap: '1rem', columns: 4, imgSize: '5rem' }, songGroup: { gap: '1rem', columns: 3, imgSize: '4rem' }, combinedGroup: { gap: '1rem', columns: 3, imgSize: '4rem' } } }, forceSecure: true, accounts: [], activeAccount: null, playerPanes: [ "bookmarks", "controls", "stations", "accountSelection" ] } ```

[hucario]

Alright, I'm about 50% done with the controls section.

[hucario]

Alright, mostly done with the UI code (for the controls pane at least), now I'm working on getting it functional; It's in a useable - if very buggy - state right now, so it's a few more hours of work and then that pane should be complete.

https://user-images.githubusercontent.com/50851047/145661404-7abcd1af-2446-459f-873e-108222179f46.mp4

[hucario]

Ad support :eyes: I haven't yet added config options for this, but when I'm creating the settings page I'll go through and do so.

Please note that this is ad support, not "force you to have ads on." I'm going down the Pandora certification checklist currently (https://developer.pandora.com/docs/certification-checklist/), but every single requirement (that changes behavior) will have an on/off toggle.

https://user-images.githubusercontent.com/50851047/148131752-55284a9a-c67e-4fb4-9e62-c03a83c34bf7.mp4

[hucario]

Station change indicators in history (don't mind the completely unstyled stations list) Still has a bug where it's slightly inaccurate, but I can fix it

https://user-images.githubusercontent.com/50851047/148150167-a50047fc-4d86-4d51-93a5-e06d5722f6c6.mp4

[hucario]

All changes have been pushed. I'm around done with the controls pane (pending more anesidorawide changes) so I'm working on the stations pane now. Latest commit:

feat: AD SUPPORT
feat(controls/background): stationChange events fully supported (good styling, IDs -> names)
feat: shift+{Left|Right}arrow selects specific feed items

fix: you can no longer tab to panes not visible
fix(controls): cover centering no longer offcenters entire pane

-- misc items --
feat(config): certification.autoSkipAds
feat(config): theming.smoothScroll
feat(config): more stations theming options

feat(background): mediaSession support for ads
feat(background): adTrackingTokens are used and registered

refactor: add TODOs for localization and documentation
refactor(pandora): add type for any PAPI method
refactor(config): Partial -> RecursivePartial when checking existing config

docs: add some explanations to code

fix: actually unique IDs for ads/songs/station changes
fix(controls): items not in covers feed are properly removed on station change

[hucario]

Sorry it's been a while - Life Happened™️. Currently working on the HTML templating engine - after that I need to:

• Polish the Stations UI
• Create the account selection UI (lodge in settings perhaps? yeah, I'll go with that)
• Right click menus
• Station management (seeding, creation, renaming, etc)
• Finish all actions associated with the main player (sleep, yeet from queue)
• An extensions api would be nice (how would this be done? eval() is yeeted by the app store, and it's a bad idea anyways - perhaps dynamic script loading? then I'd have to work around the modules being sandboxed-)

[hucario]

I made a minor change to a commonly used function and now I have Problems

[pvrs12]

Eek. That's a lot of problems...

I got Life ™️ as well.

All looking good so far though

[hucario]

Alright, finally working on this again - life has cleared up, free time is available. I've completely replaced the HTML templating engine with Liquid and the pages mechanism with Swiper. The templating engine is now if not a breeze to work with, workable and safe for end users to edit: Meanwhile, Swiper is far more polished than the tabbing system we had prior, and allows mobile (note, NOT DESKTOP - video is emulating touch) users to swipe to access different tabs:

https://user-images.githubusercontent.com/50851047/182696925-f38dc601-1fa1-4977-8376-f0d89601828a.mp4

I need to commit this

[hucario]

Apologies for the long absence - I've wasted the last year(!?) or so going up the complexity stack and then realizing I had become the thing I swore to destroy.

A timeline:

• v2, basic HTML+CSS
  • works, but is not very good at certain dynamic aspects
    • covers slider needs to manually create and/or update each dynamic element each song change
    • customization is not amazing (only options that we put in)
    • localization is not a thing (so it's only english)
  • the backend is kind of janky so I'll rewrite that
    • which, while not a mistake, added a lot of complexity that I didn't really need to do
    • I definitely bit off more than I could chew with that - while cool, we don't need multi-account support right now
  • v3, alright, so I'll move to a templating language, render that, and update it with class names
  • very customizable! users can change whatever they want about it
  • covers are automatically created, but not automatically updated and the updating part is now so much more complex
    • as an idea of the complexity change, on v1 I would know the exact structure of the DOM and could only update what's needed
    • with the new version I needed to update every possible state change:
    • 
    • hold up, this sounds like I need a state management and view rendering library. Hmm
  • localization is a thing!
  • v4(?)
  • wait a second most of my problems are caused by needing to update the page with new data
  • isn't that just React's job
  • but then if I include react I'm going all in on the "heavy website" thing which is the reason I don't use pandora.com

So, a step back is needed. Anesidora, as far as I know, is not supposed to be an all-in-one Pandora replacement. It's supposed to be a station player. So I'm going to go for a v3 (publicly, actually v4 after v3 is scrapped) which isn't a massive undertaking and instead just makes the original v1/v2 better, without throwing out almost everything.