A new look!
gravelld
Administrator
We've just deployed a design refresh to for the Web app:
This update is purely about the look of the app - not the way it works, nor even the way it is laid out.
We took great pains to focus on one thing at a time - in this case, just updating the styles, fonts, iconography and such like. We didn't want to get distracted by the other obvious things that need improving.
Those will come! Next up, after also aligning the https://asti.ga pages with the new look, we'll be looking at ways of restructuring the UI to make it a little more friendly to your music library-based usage, and also for new users.
Remember to force a refresh in your browser.
Comments are welcome!
Post edited by gravelld on
Comments
I cannot say I'm a fan, and the way it looks now I kinda wish I could get the old GUI back (can I somehow?)...
The more modern look and feel in general isn't as much of an issue (but neither was the old web player to me really, but I get wanting to follow the trend of making things rounded and nice again. GUI's always seem to change back and forth in style lol). Overall the general idea of the look and feel is nice. But...
Outside of the lack of dark theme burning my otherwise fully dark themed system. Here's some screenshots to help explain my biggest issues with the update. These are all from the browser, so not counting issues in electron-based player(s).
Looking quite bulky and overly big causing me to scroll and press buttons way more than needed or wanted (ignore the missing track picture, that has to do with something on my end):
Loose part of my interface (rather see it get moved inside/become smaller) as well as the ability to scroll:
Everything is so big/spaced that I barely see any music in large categories:
And when I move down just a huge chunk of space is wasted for what used to be the menu, which I cannot access unless I scroll up again (which is quite annoying on large pages, and can be fixed by simply setting the menu's position of "fixed" in the CSS...):
EDIT:
Dark "mode" is https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/ on invert mode.
The sizing seems much better when the screen is made smaller (either by resizing the window or opening dev tools). Perhaps making it less wide (and making the menu scroll along with the page) is a quick way to improve it? Altrough I still feel I need to scroll an awefull lot to see the whole page:
It doesn't solve all issues however, as the top info on genre etc pages are still way too big hiding most entries (ignore the dev window I forgot to close/kept open for the spacing):
It also makes the entries on some pages have an unnecesarily long bottom part for title and artist:
Although it doesn't look as bad on every genre/with the menu and such next to it to fill the space up a bit more usefull:
It looks quite nice but:
@neasan for the dark theme thing I found that running https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/ on inverted mode looks quite good as it doesn't invert pictures. You can turn default behavior to off and only turned it on for Astiga so it doesn't bother other websites, which is what I did as I installed it just for Astiga. (Normally I'd use Stylus for changing CSS but I hope they'll come with an official dark theme again soon enough to make it not worthwhile making a new UseStyle CSS sheet).
It works pretty decent (bit more ugly) on the forum too, now that I'm testing it.
I guess for the rest we gotta wait for @gravelld.
I can't scroll at all.
Thanks @Cambionn !
No more dark theme 😬
I've added this as a ticket - it shouldn't be too difficult as there's already provision for this in the design.
Playing songs then going to another page refreshes, causing the music to stop playing which is rather bothersome. It means I cannot go to different gengre/artist/etc pages while playing music, which in return means I cannot make or alter my current playlist properly while playing music. Is it no longer a single page application?
I see - yes this has been lost. We'll look into this asap.
Also, I generally like to have my playlist shown the whole time, not so happy that it now goes over the open screen instead of next to it 😥
. I'd much rather see it move the content inside when opened. Since it's all flexboxes and does move inside when opening dev tools it shouldn't be too hard to do so right?
I also cannot scroll when the current play list is open...
I'll look into this.
Overall the main content also looks unnecessary big and bulky now, especially on overview, albums, etc. The menu also seems quite big and space wasting (it's twice as wide as the content of it). All of this just makes me need to scroll and click buttons way more than I want too. And generally web players are on computers with a big enough screen en high enough resolution that there's no need to make everything small... I remember this was the most hated issue when FB changed their interface as well: Loose of info on screen at a time, and more effort to access it.
Ok, but it's also about a balance of keeping a calm UI. If you're more of an experienced user I think you often welcome more info, but a firehose of content can also be bewildering if you're new.
I can see in your screenshots how the left menu in particular is very wide. I think we should revisit the width of this on extra wide displays.
My electron-based app also has multiple issues now (which are not in the web viewer), but I will look into those myself first see if I can fix that manually or if it's something on my system. I'm not sure however if the official Windows and Snap version will have the same, which might make it worth mentioning.
This has been tested - what did you find with it?
When the playlist is popped out?
No, just in general, even when the playlist isn't popped out.
Clearing my cached files seems to have fixed the issue.
Also missing the dark UI. I'll probably have more meaningful feedback later but my gut reaction was literally "WTF?!" and came here to see if something was broken.
Ok, but it's also about a balance of keeping a calm UI. If you're more of an experienced user I think you often welcome more info, but a firehose of content can also be bewildering if you're new.
I can see in your screenshots how the left menu in particular is very wide. I think we should revisit the width of this on extra wide displays.
I agree it depends a bit on the user. However, these are more scaling issues to me than anything. After all, there is no functionality removed behind buttons or anything (and so each page has the same amount of info), it's just ridiculously big causing me not to see it and instead see huge pictures and unused menu space. Well, beside the current play-list but that isn't as much of an issue to me as the actual scaling.
Also, these are regular 1080p 16:9 screens (I'm simply not screenshotting the browser's address bar nor my OS's start menu), so it's not a wide-screen related issue. At least, 16:9 is generally still considered the norm. Where wide-screen to me would be ultra-wide ones that are generally 1,5 to 2 the width. I don't even want to know how Astiga looks on those now...
I find that when changing the following, the whole interface looks fine on a normal full-screen browser page (as well as making the menu scroll with the page) (also never thought I'd be using the code block function here):
.offcanvas-body.d-block.px-2.px-lg-0 { position: fixed; } .col-lg-3{ width: 16%; }It screws a bit with the scaling/resizing so code-technical it's not a fix obviously, but the screenshot is more to show you what I would hope to see instead of the current than an actual fix. It still looks pretty clean to me, not so big and wasteful, and needs way less scrolling and shows more content at once (at least I can see a whole category at once).
I'd only miss the ability to have the now playing menu show while browsing without loosing content or the ability to scroll, but I'm too lazy to look into that CSS now. This at least is a simple quick & dirty fix for me. And like I said, I can live without that. I'm more concerned about the general sizing/scaling.
If I can now change pages without a complete refresh so I can search trough my library while listening to music (so I can choose what to listen to next) I'm happy for the most immediate moment (so with this dark theme extension and change I made to CSS which I saved in Stylus, which I do hope are not necessary for long term use).
This has been tested - what did you find with it?
It mostly works, but some buttons and GUI elements seem to be dark still (notably in this screenshot, the media buttons and the time bar). My system is set to dark theme everything and has appropriate themes & libraries for qt5, qt6, gtk2, and gtk3 applications, and the browser does work properly. I've deleted all cache and did a clean built of both this my astiga package and the nativier package.
But once again it may be my build as much as all electron-based builds so this one is kinda secondary. I don't use Snap's and don't have a Windows machine at hand to test right now (and even then it may also be system-based. Linux systems are finicky like that).
No more dark theme 😬? Being suddenly greeted by a bright screen shocked me in a not good way...
Ditto that. Unfortunately the extension Cambionn mentions is for Firefox. I could probably dig one up, but as chvad mentions, I came here to see if I was missing a dark mode setting or something.
Don't mind the swap in general, but phew, eagerly waiting on that ticket for a dark theme. That's a pretty major change.
---
EDIT: Looks like "Dark Reader" is the goto extension on Chrome and friends:
Dark Reader - Chrome Web Store (google.com)
But even though I use this browser for non-work, non-important stuff, and though it's got 4m downloads (?!!) I still don't think I want to give an extension carte blanche for every website to get dark mode on astiga. Maybe someone could write one that's limited to asti.ga real quick? 😁
Ouch, I take that back. I tried removing what was in my queue and adding a new album and nothing shows nor plays.
Console said...
Let's try that cache buster... Shift-F5 and I'm still in no-music-land.
🤔
Logged out and back in. Can play what was in my queue previously -- it's still there, though I can't see it -- but can't add anything different.
This is on Edge Version 105.0.1343.50 (Official build) (64-bit) Windows 10. Same problem in Chrome Canary Version 108.0.5325.2 (Official Build) canary (64-bit). Don't think I've loaded asti.ga there before.
Tried in a private window on Edge, same issue.
Can't paste an image in here apparently, so I'll try to paste in text.
//Add move option to array Array.prototype.move = function (old_index, new_index) { if (new_index >= this.length) { var k = new_index - this.length; while ((k--) + 1) { this.push(undefined); } } this.splice(new_index, 0, this.splice(old_index, 1)[0]); // <<<< BOOM!!! return this; // for testing purposes }; // from console, sorry for the weird formatting. // that's no moon. I mean array this a {events: {…}, receiver: 'page_scoped', joinpolicy: '82C4EC73', available: true, player: {…}, …} available : true controller : Z {a: Proxy, b: null, f: null, v: null, Xa: ƒ, …} description : null device : null duration : 0 durationPretty : "00:00:00" events : {available: Array(1)} joinpolicy : "82C4EC73" muted : false paused : false player : {isConnected: false, isMediaLoaded: false, queueData: undefined, videoInfo: undefined, duration: 0, …} poster : null progress : 0 receiver : "page_scoped" session : null source : null state : "disconnected" subtitles : [] time : 0 timePretty : "00:00:00" title : null volumeLevel : 1 [[Prototype]] : Object // upstream in call stack }, { key: "trigger", value: function(e) { var t = Array.prototype.slice.call(arguments, 1); for (var r in this.events[e]) this.events[e][r].apply(this, t); // <<<< this calls BOOM! for (var r in this.events.any) this.events.any[r].apply(this, [e]) } },Edit: Looks like it's Artists that won't do anything. Other options play songs, but I still can't see my playlist.
Okay, I give for now. I'm unable to use Astiga currently.
A little update. On a 3:2 screen the interface as is does a lot better. Still feeling like those 3 row categories are a bit much, but the interface is not overly huge at least.
However, to make the albums listed only 2 rows instead of 3 as well as making the menu sticky I changed:
.offcanvas-body.d-block.px-2.px-lg-0 { position: fixed; } .col-lg-3{ width: 20%; } .col-6.col-md-4.col-lg-3.position-relative{ width: 16% }Again working crap on other proportion sizes, but at least it looks neat on here. So again, screenshot to show what I would hope to see instead of the current proportions (honestly the whole thing looks better to me in this size/proportions also after both are edited).
I've just uploaded some improvements:
More on its way...
@Cambionn Let me know your feedback on the menu change.
Still feeling like those 3 row categories are a bit much
By "categories" I thought you were referring to the tag badges before (e.g. where a genre shows an enormous number of artists) - but I don't think that's the case from this description. What do you mean by "3 row categories"?
@ruffin Looking at your issue now...
First of all, let me appreciate your quick reactions in not only text but also changes!
The menu seems well now on my 16:9 screen in terms of size! Still would rather see it's position fixed (so it scrolls with the page instead of staying at the top). Especially since you're not re-using the space of the menu when scrolling down anyways, it just becomes empty.
The pictures are still very huge tho. Each entry on the overview page is literally about 10x12cm on my 24" screen, even bigger on my 27" one.
This one play's together with the entry size. On the Overview page, you have 3 categories: "Most played", "Recently played", and "Recently added". While the entries are as huge as they are, it takes 3 rows of entries for each category.
As only 1,5 rows fit on the screen, that means I need to scroll the size of my screen just to see the whole first category. And I need to scroll 4 times the size of screen to see the second. And then there is still a third category of 3 rows below that!
This is a screenshot of my whole screen, including browser and task bar (I'm not a fan of doing that, but maybe it'll help you get a sense of how huge everything is). And again, each entry here is roughly 10x12cm in real life! For comparison. That's nearly 1,5 times as wide and about twice as long as my phone width! I actually kept my phone in front of the screen...
On the other side, my CSS edit (which is really just CSS loaded after the page has loaded the original one) made all these entries smaller, causing them to fit exactly in 2 rows instead of 3. In fact, I would dare say, the fact everything fits in one screen makes it more clean, rather then less. And the entries are still not small, maybe 8 by 6,5cm?
On my 3:2 screen, the whole marketing point of the proportion being more content on your screen due to more length and feeds going down it also wastes a lot of space still (this is a managed device so I fear I cannot do whatever on here to test),:
Especially if I compare it to what it looks like with the edited CSS, where it can make more use of that added length:
@ruffin The only play button that is not working for me right now is the play button on the top artist image at the top of an artist page. I'm testing Edge 103.0.1264.62. You mentioned the artist page - are you seeing it elsewhere?
Other options play songs, but I still can't see my playlist.
Do you mean the playlist doesn't slide out?
Those tag batches are also still taking way too much space on pages with a lot of tags (like that Kpop genre page), but they've always been taking quite some space. It did become worse with the new interface tho, as can be seen in the screenshot of the very first post with screenshots I made.
It not being alphabetical or anything, but simply in order of the first time they have an album in the list below also doesn't help. That way it's quite useless for searching artists or anything. But that's a whole other issue.
On another note, the forum is getting really slow for me and regularly stops working needing a refresh (and ever freezes half of FireFox sometimes). Too much images/traffic or is it just me?
Some other feedback. The fact that the playlist button is at the bottom, but the close playlist button is at the top is very non-intuitive. I keep having to slide my mouse from one side of the screen to the other. Even worse since I cannot use the interface when the playlist is out 🤤.
Still would rather see it's position fixed (so it scrolls with the page instead of staying at the top). Especially since you're not re-using the space of the menu when scrolling down anyways, it just becomes empty.
Sorry, missed that. I'll experiment with this, although it's lower priority than playback issues.
The pictures are still very huge tho. Each entry on the overview page is literally about 10x12cm on my 24" screen, even bigger on my 27" one.
This should be pretty quick to fix, so I'll do this soon.
This makes a change to the overview page, so can we please review that when you've tested the next fix?
This should be pretty quick to fix, so I'll do this soon.
This makes a change to the overview page, so can we please review that when you've tested the next fix?
No problem. Let me know when it's online!
I'm running the site with the edited CSS and dark theme extension for now so with the navigation working without refreshing I'm good for now. Once it's fixed/changed I'll return to vanilla (and of course also when I test stuff).
Another bug I just found. When I'm on an album page and click the album art from a single entry, the whole website reloads to the home page, stopping music.
Another note: on an album page there is no button for replacing the current playlist with one song, only to append to it the current one or to append/replace it with the current album. It's a bit inconvenient when making new playlists.
The album page does look quite pretty now tho.
Another update:
Made album cards smaller on xxl widths
I wouldn't call 3:2 and 16:9 screens "xxl widths" but that's much better lol!
The 3:2 screen now looks great now!
The 16:9 looks a bit big still, but way better and much more usable than before! It feels like something that could maybe improve with some tweaking rather than an issue now. If, over time, some small tweaks in size and padding like these could be made that would be even more perfect, as the screen will look less full and more neat. But it's already a huge game changer for the new interface, I'm quite happy 😀.
Current display:
A perfect-to-me size & padding:
EDIT: Sorry, just saw the additional post where I'm @-ed. I didn't realize the playlist needed to be popped out now; that's a bit of a help. ;) I don't love that it covers some of the UI if my browser window isn't nearly full width, but it's there! That's great.
Yes, I can add things to the playlist now. I think it's working. 😄Thanks!
(and yes, the album and artist I tested were "the top-left icon" each time, sure enough)
Ok, thanks both.
I guess the playlist sidebar, as well as not overlapping underlying content, would be best if its state were remembered between sessions.
Disregard, I think I was having a similar caching issue as described above. Still can't seem to scroll the player if I have the playlist open, but otherwise most functionality seems fixed. Looking forward to the return of dark mode.
Thanks for being so responsive about this, maybe in the future it would be nice to have a banner or notification on the player UI ahead of an update like this so it's not catching users completely off guard.