this.on_size = function (w, h, x, y) {
		List.prototype.on_size.apply(this, [w, h, x, y]);
		this.x = x;
		this.y = y;
		this.h = h;
		this.w = w;
		was_on_size_called = true;
		this.reinitialize();
    };

List.prototype.on_size = function (w, h, x, y) {
    var w_changed = this.w !== w || this.x !== x;
    var h_changed = this.h !== h || this.y !== y;

    if (h_changed) {
		this.y = y;
        this.on_h_size(h);
    }

    if (w_changed) {
		this.x = x;
		this.list_x = this.x + g_properties.list_left_pad;
        this.on_w_size(w);
    }
};

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;
    }

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.

Nevermind. Took me about 4 hours, and some head to desk, but I finally got it.

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!

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

        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);

		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();

• 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

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.

    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;
    }

    this.initialize_items = function (rows_to_process) {
        this.sub_items = [];
        if (!rows_to_process.length) {
            return 0;
        }

        var rows_processed = 0;
        var disc_header = undefined;
        var header = this;
        var num_disc_headers = 0;

        var query = grouping_handler.get_query();
        var tfo = fb.TitleFormat(query ? query : ''); // workaround a bug, because of which '' is sometimes treated as null :\

        var disc_tfo = fb.TitleFormat('$ifgreater(%totaldiscs%,1,%discnumber%,)[%discsubtitle%]');
        var disc_group = disc_tfo.EvalWithMetadb(_.head(rows_to_process).metadb);
        if (disc_group.length) {
            disc_header = new DiscHeader(this.x, 0, this.w, g_properties.row_h, _.head(rows_to_process).metadb, 0);
            disc_header.parent = this;
            disc_header.is_odd = true;
            disc_header.idx_in_header = num_disc_headers++;
            disc_header.idx = 0;
            header = disc_header;
            this.sub_items.push(disc_header);
        }

        var group = tfo.EvalWithMetadb(_.head(rows_to_process).metadb);
        _.forEach(rows_to_process, _.bind(function (item, i) {
            var cur_group = tfo.EvalWithMetadb(item.metadb);
            if (group !== cur_group) {
                return false;
            }
            var cur_disc = disc_tfo.EvalWithMetadb(item.metadb);
            if (cur_disc !== disc_group) {
                disc_group = cur_disc;
                if (disc_header) {
                    disc_header.initialize_items(disc_header.sub_items);
                }
                disc_header = new DiscHeader(this.x, 0, this.w, g_properties.row_h, item.metadb, 0);
                disc_header.parent = this;
                disc_header.idx_in_header = i + num_disc_headers++;
                disc_header.idx = num_disc_headers;
                header = disc_header;
                this.sub_items.push(disc_header);
            }
            item.idx_in_header = i + num_disc_headers;
            if (g_properties.show_header) {
                item.is_odd = !(i & 1);
            }
            item.parent = header;
            header.sub_items.push(item);
            rows_processed++;
        }, this));

        if (disc_header) {
            disc_header.initialize_items(disc_header.sub_items);
        }

        _.dispose(tfo);
        _.dispose(disc_tfo);

        metadb = _.head(this.sub_items).metadb;

        return rows_processed;
    };

Here's my confusion. What do idx and idx_in_header mean for DiscHeaders? Say I've got the following layout:

Header1
 * DiscHeader1
 - - Row1
 - - Row2
 * DiscHeader2
 - - Row3

Does the Header1 just have two sub_items (DiscHeader1 and 2) or does it have 5? DiscHeader1 presumably has two sub_items, right? Does Row3's idx_in_header referring to DiscHeader2 or Header? i.e. is does Row3 have idx_in_header = 0, 3, or 5?

I coded this assuming that Header1 would have two sub_items, and DiscHeader1 would also have two sub_items, but something isn't working right (or I've got a bug I haven't spotted).

    if (!is_next_level_row) {

    if (_.isInstanceOf(_.head(header.sub_items), BaseHeader)) {

Once I made the change magically everything started working.

            if (queued_item.PlaylistIndex !== cur_playlist_idx || queued_item.PlaylistItemIndex === -1) {
                return;
            }

Inside queue_contents.forEach first lines should be:

Code: [Select]

            if (queued_item.PlaylistIndex !== cur_playlist_idx || queued_item.PlaylistItemIndex === -1) {
                return;
            }

    function generate_all_items_to_draw(wy, wh, first_item) {
        var items_to_draw = [first_item];
        var cur_y = first_item.y + first_item.h;

        var done = false;
        var start_item_found = false;
        var first_item_header = first_item;
        while (first_item_header && first_item_header.parent !== _.head(that.sub_items).parent) {
            first_item_header = first_item_header.parent;
        }

        /**
         *
         * @param {Array<BaseHeader>|Array<Row>} sub_items
         * @param {Row|BaseHeader} start_item
         * @return {boolean} true, if start_item was used
         */
        function iterate_level(sub_items, start_item) {
            var start_idx = 0;
            if (first_item_header) {
                start_idx = first_item_header.idx;
                first_item_header = null;
            }
            for (var i = start_idx; i < sub_items.length; i++) {
                var item = sub_items[i];
                if (start_item_found) {
                    item.set_y(cur_y);

                    items_to_draw.push(item);
                    cur_y += item.h;
                }

                if (item === start_item) {
                    start_item_found = true;
                }

                if (cur_y >= wy + wh) {
                    done = true;
                    break;
                }

                if (item.is_collapsed) {
                    continue;
                }

                if (item.sub_items && item.sub_items.length) {
                    done = iterate_level(item.sub_items, start_item);
                    if (done) {
                        break;
                    }
                }
            }
            return done;
        }

        iterate_level(that.sub_items, first_item);

        return items_to_draw;
    }

Okay, this one's kind of a doozy. I was able to fix the draw issue with a Header whose sub_items consists of Rows, and then a BaseHeader with its own Rows.

just find the header of first_item, then start at that header, and loop through all its sub_items, and siblings until cur_y > playlist height.
...
It ought to be a really uncommon use case

Yours works without bugs because you ensure that if a Header has a TestHeader, then ALL of it's sub_items are TestHeaders.

I do this by building out DiscHeaders in the Header.initialize_items meaning I only need to make a single pass through every item in the playlist, where yours will make two passes. Performance wise I feel that's a bigger concern than if people are grouping things in dumb ways

I prefer not to show a DiscHeader in the single disc case. e.g.: https://i.imgur.com/7K5C6Bm.png
...
I'm thinking now that it may not be worth the trouble though and I should follow your method of enforcing all sub_items to be the same type.

I don't see any reason for sub_items elements not to have the same type. If you have some tracks in the Header that do not have CD#, but all other tracks in that Header do, then, IMO, it's much cleaner UI-wise to give those untagged tracks a fake CD sub-header (like it is done in my mock-up implementation), since it will be hard to visually separate those track groups from each other otherwise (e.g. CD-numbered track group followed by unnumbered track group). Also, I think that such scenario is exactly the case of bad-tagging

I'm using an alternative font rendering engine on windows and was wondering why it doesn't apply to anything except for library tree and lyrics panel on your skin. It works okay on another skin that is purely jscript.