Skip to main content
Topic: CaTRoX (QWR Edition): fb2k theme (Read 5945 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: CaTRoX (QWR Edition): fb2k theme

Reply #75
So, this is slightly tangential to the purpose of this thread, but I need some help ripping off your shit ;)

I finally decided I needed to switch from my version of Catrox's playlist circa 2013 to your version, after trying out your theme and seeing how silky smooth everything operated. Really awesome work, and the code is a billion times cleaner. So I copied all the code from your playlist panel, and tried to cram it into my theme.

My theme is just a single JScript panel, with no PSS's to be found. Your playlist assumes that it will take up the entire space of a panel. It wasn't too much work to shrink the playlist to the appropriate size in on_size, but now positioning it is turning out to be a pain in the ass.




It looks like PlaylistManager and Playlist both get initialized with x/y set to 0, but it doesn't look like there's a way to reposition them after creation, and when I try to hack it in the on_size, things go terribly wrong.

Do you have any ideas here? I'll keep plugging away at it, but at the moment I'm not making much progress on this front.

Edit: One other thing you might be able to help with. Everytime I update the playlist (i.e. due to a on_playlist_XXXX event) I get a crash in this.init_rows Fixed this. Hadn't deleted my Row constructor  O:)

Re: CaTRoX (QWR Edition): fb2k theme

Reply #76
Nevermind. Took me about 4 hours, and some head to desk, but I finally got it.
Spoiler (click to show/hide)

I saw you had some comments in initialize_rows about array[ i] being a lot faster, but I noticed you didn't maximize your gains. Using direct index instead of .push ought to show noticeable savings on really large playlists as it's twice as fast in modern browsers. I'd expect IE9's difference might even be more pronounced.

Code: [Select]
function initialize_rows(playlist_items, playlist_size) {
        // Magic! For some reason using array[i] instead of IFbMetadbHandleList.Item(i) greatly increases performance :\
        var playlist_items_arr = [];
        for (var i = 0; i < playlist_size; ++i) {
            playlist_items_arr[i] = playlist_items.Item(i);
        }

        var rows = [];
        for (var i = 0; i < playlist_size; ++i) {
            rows[i] = new Row(that.list_x, 0, that.list_w, that.row_h, playlist_items_arr[i], i, cur_playlist_idx);
            if (!g_properties.show_header) {
                rows[i].is_odd = (i + 1) % 2;
            }
        }

        return rows;
    }

 

Re: CaTRoX (QWR Edition): fb2k theme

Reply #77
I saw you had some comments in initialize_rows about array[ i] being a lot faster, but I noticed you didn't maximize your gains. Using direct index instead of .push ought to show noticeable savings on really large playlists as it's twice as fast in modern browsers. I'd expect IE9's difference might even be more pronounced.
Welp, dunno about twice the performance, but it did yield me 10-15% in rows initialization speed and 6.5-7% in total playlist initialization speed, thanks!

PS: See https://stackoverflow.com/questions/614126/why-is-array-push-sometimes-faster-than-arrayn-value, i.e. it's not always viable to replace push() with [idx] =)

Nevermind. Took me about 4 hours, and some head to desk, but I finally got it.
Congrats =) But, IMO, you should've added this to PlaylistPanel instead (+ pass the x,y to the PlaylistManager and Playlist ctors).

Adding 'Disc' separator Row (like you did in your theme) won't be that simple though...
Also there is another problem: playlist's bottom part is cropped by the panel in my theme. Since you don't have that you'll have to crop it yourself somehow.
Additionally, FontAwesome is needed for some icons (like the Lock icon above the scrollbar).

Fell free to ask if you have any further questions about the script ;)

Re: CaTRoX (QWR Edition): fb2k theme

Reply #78
Welp, dunno about twice the performance, but it did yield me 10-15% in rows initialization speed and 6.5-7% in total playlist initialization speed, thanks!
Awesome! I meant just the insert to the array was 2x over .push. I'm pleasantly surprised the gains were that big (I didn't have time to test last night). Figured it would definitely be noticeable on 1-2k entry playlists.

Congrats =) But, IMO, you should've added this to PlaylistPanel instead (+ pass the x,y to the PlaylistManager and Playlist ctors).

Adding 'Disc' separator Row (like you did in your theme) won't be that simple though...
Also there is another problem: playlist's bottom part is cropped by the panel in my theme. Since you don't have that you'll have to crop it yourself somehow.
Additionally, FontAwesome is needed for some icons (like the Lock icon above the scrollbar).

Fell free to ask if you have any further questions about the script ;)
I mistyped. I added it to the PlaylistPanel.on_size, and not Playlist.on_size. I'm nervous about the disc separator, but I'm also determined, so we'll see how it goes :D

I solved the cropping problem last night. You were already using a clipImg (which wasn't being clipped  8) ) so I updated Playlist.on_paint to have this code:
Code: [Select]
        if (this.items_to_draw.length) {
            var that = this;
            _.forEachRight(this.items_to_draw, function (item) {
    item.draw(gr, that.y, that.y + that.h);
            }, that);
Then I have Header.draw call those two variables top and bottom, and threw this code at the very bottom of Header.draw_normal_header():
Code: [Select]
		clipImg.ReleaseGraphics(grClip);
var y = this.y;
var h = this.h;
var srcY = 0;
if (this.y < top) {
y = top;
h = this.h - (top - this.y);
srcY = this.h - h;
} else if (this.y + this.h > bottom) {
h = bottom - this.y;
}
        gr.DrawImage(clipImg, this.x, y, this.w, h, 0, srcY, this.w, h, 0, 255);
        clipImg.Dispose();
The individual rows don't draw to a clip image, so no way to clip the top and bottom rows, but your code is already set up to cover up rows if the list has some spacing around it, so I just used that.

Re: CaTRoX (QWR Edition): fb2k theme

Reply #79
BTW, my To-Do list is:
  • Disc header rows - maybe special case of Row, or a new DiscHeader object, can't decide yet
  • Caching artwork on playlist refresh to avoid reloading images
  • playlist_info to bottom of window - I might hate how this ends up looking
  • Various cosmetic stuff you probably won't care about

To avoid spamming up this thread, are you interested in the first three at all? It might be a little hard for me to do PRs in github since I've changed a few things that I know you DON'T want in the main branch, but I can at least open issues and share code snippets there if you prefer. I can also continue pasting stuff here if you like, or just STFU. :) Let me know what you want.

Re: CaTRoX (QWR Edition): fb2k theme

Reply #80
BTW, my To-Do list is:
  • Disc header rows - maybe special case of Row, or a new DiscHeader object, can't decide yet - actually I've wanted to implement it myself =)
  • Caching artwork on playlist refresh to avoid reloading images - the idea is nice, but it all depends on the implementation (I'm not a fan of quick and dirty solutions =) )
  • playlist_info to bottom of window - I might hate how this ends up looking - this won't be compatible with my theme's looks, so that's a no

To avoid spamming up this thread, are you interested in the first three at all? It might be a little hard for me to do PRs in github since I've changed a few things that I know you DON'T want in the main branch, but I can at least open issues and share code snippets there if you prefer. I can also continue pasting stuff here if you like, or just STFU. :) Let me know what you want.
New feature suggestions or suggestions about modifying the existing ones are fine here, I think.


Re: CaTRoX (QWR Edition): fb2k theme

Reply #82
After a lot of thinking, I went with the simpler solution of making discHeader just a special case of Row. I'm not entirely happy with this, but the interaction with Header got complicated, and it allowed me to handle one special case really well.

Code: [Select]
    function initialize_rows(playlist_items, playlist_size) {
        // Magic! For some reason using array[i] instead of IFbMetadbHandleList.Item(i) greatly increases performance :\
        var playlist_items_arr = [];
        for (var i = 0; i < playlist_size; ++i) {
            playlist_items_arr[i] = playlist_items.Item(i);
        }

var rows = [];
var disc, lastDisc = '';
var tfo = fb.TitleFormat('$ifgreater(%totaldiscs%,1,,false)[' + tf.disc_subtitle + ']');
var disc_group = fb.TitleFormat('%album artist% %album% %edition% %discnumber%' + tf.disc_subtitle);

for (var i = 0; i < playlist_size; ++i) {
discHeader = false;
if (tfo.EvalWithMetadb(playlist_items_arr[i]) !== 'false') {
disc = disc_group.EvalWithMetadb(playlist_items_arr[i]);
if (disc != lastDisc) {
discHeader = true;
lastDisc = disc;
}
}
            rows[i] = new Row(that.list_x, 0, that.list_w, discHeader ? that.row_h * 2 : that.row_h, playlist_items_arr[i], i, cur_playlist_idx, discHeader);
            if (!g_properties.show_header) {
                rows[i].is_odd = (i + 1) % 2;
}
}
_.dispose(tfo);
_.dispose(disc_group);

        return rows;
    }
So discHeaders are a row that's double height, and in the Row.draw I just check for the discHeader flag, and adjust what and where I draw the text. This solution handles multi-disc releases with and without subtitles, single disc releases with a subtitle (I just don't show the Disc 1 in that case), and if for example, I've got a single disc reissue which combines multiple releases, I can just tag tracks 10-15 with a discsubtitle of "1985 Demo" and the header will show in the middle of the track list which is what I want.

The one problem with doing this is that it almost doubles the speed of initialize_rows, although I can still load 30k entries in <700ms which seems acceptable. I also think that's a problem even creating a DiscHeader object type would still run into because you're going to be forced to do a bunch of TF queries. The other problem is that I can't think of a "clean" way to get the run time of the individual disc, something that would be much simpler with DiscHeader.

Re: CaTRoX (QWR Edition): fb2k theme

Reply #83
Well, I didn't think this thoroughly yet, but I wanted disc sub-header to be something like grouping header, i.e. selecting entirety of one disc, when clicked on, maybe collapsible and surely 100% optional. The actual implementation idea is yet to form, but we'll see how it goes...

Re: CaTRoX (QWR Edition): fb2k theme

Reply #84
No, of course. Like I said, I went for the simplest solution at the moment. Doing it my way, I miss out on collapsible/selectable functionality which would be great to have... and it's much uglier if you want it disabled or if you're already grouping by discnumber.

I also ultimately decided that this early in my theme development I didn't want to drift too far from your main branch if I could help it :)

Just now though I did have another idea of how to approach this as it's own item when the groups are being created, so I might give this another pass and see how difficult it is.

 
SimplePortal 1.0.0 RC1 © 2008-2018