From 732c698408084c87d2e39e1134716a4a711559b1 Mon Sep 17 00:00:00 2001 From: Terry Geng Date: Wed, 25 Mar 2020 21:12:01 +0800 Subject: [PATCH] feat: fold playlist to avoid displaying too many items --- interface.py | 25 ++++++++++++--- templates/index.html | 72 ++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 90 insertions(+), 7 deletions(-) diff --git a/interface.py b/interface.py index 6096676..4e2b4b5 100644 --- a/interface.py +++ b/interface.py @@ -165,10 +165,23 @@ def playlist(): if len(var.playlist) == 0: return ('', 204) + DEFAULT_DISPLAY_COUNT = 11 + _from = 0 + _to = 10 + + if 'range_from' in request.args and 'range_to' in request.args: + _from = int(request.args['range_from']) + _to = int(request.args['range_to']) + else: + if var.playlist.current_index - int(DEFAULT_DISPLAY_COUNT/2) > 0: + _from = var.playlist.current_index - int(DEFAULT_DISPLAY_COUNT/2) + _to = _from - 1 + DEFAULT_DISPLAY_COUNT + + tags_color_lookup = build_tags_color_lookup() # TODO: cached this? items = [] - for index, item_wrapper in enumerate(var.playlist): + for index, item_wrapper in enumerate(var.playlist[_from: _to + 1]): tag_tuples = [] for tag in item_wrapper.item().tags: tag_tuples.append([tag, tags_color_lookup[tag]]) @@ -197,7 +210,7 @@ def playlist(): thumb = "static/image/unknown-album.png" items.append({ - 'index': index, + 'index': _from + index, 'id': item.id, 'type': item.display_type(), 'path': path, @@ -207,7 +220,12 @@ def playlist(): 'tags': tag_tuples, }) - return jsonify({'items': items, 'current_index': var.playlist.current_index}) + return jsonify({ + 'items': items, + 'current_index': var.playlist.current_index, + 'length': len(var.playlist), + 'start_from': _from + }) def status(): @@ -581,7 +599,6 @@ def upload(): def download(): global log - print('id' in request.args) if 'id' in request.args and request.args['id']: item = dicts_to_items(var.bot, var.music_db.query_music( diff --git a/templates/index.html b/templates/index.html index ec653f9..d174db0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -94,6 +94,11 @@ + + + See items on the playlist. + + @@ -473,10 +478,14 @@ var playlist_loading = $("#playlist-loading"); var playlist_table = $("#playlist-table"); var playlist_empty = $("#playlist-empty"); + var playlist_expand = $("#playlist-expand"); var playlist_ver = 0; var playlist_current_index = 0; + var playlist_range_from = 0; + var playlist_range_to = 0; + function request(_url, _data, refresh=false){ console.log(_data); $.ajax({ @@ -541,14 +550,37 @@ playlist_loading.hide(); $(".playlist-item").remove(); var items = data.items; + var length = data.length; + var start_from = data.start_from; + playlist_range_from = start_from; + playlist_range_to = start_from + length - 1; + + if(items.length < length && start_from > 0) { + _from = start_from - 5; + _from = _from > 0 ? _from : 0; + _to = start_from - 1; + if(_to > 0) { + insertExpandPrompt(_from, start_from + length - 1, _from, _to); + } + } + items.forEach( function (item) { addPlaylistItem(item); - bindPlaylistEvent(); } ); + if(items.length < length && start_from + items.length < length) { + _from = start_from + items.length; + _to = start_from + items.length - 1 + 10; + _to = _to < length - 1 ? _to : length - 1; + if(start_from + items.length < _to) { + insertExpandPrompt(start_from, _to, _from, _to); + } + } + displayActiveItem(data.current_index); + bindPlaylistEvent(); playlist_table.animate({opacity: 1}, 200); }); } @@ -558,14 +590,40 @@ $("#playlist-item-"+current_index).addClass("table-active"); } + function insertExpandPrompt(real_from, real_to ,display_from, display_to){ + var expand_copy = playlist_expand.clone(); + if(display_from !== display_to){ + expand_copy.find(".playlist-expand-item-range").html((display_from+1) + "~" + (display_to+1)); + }else{ + expand_copy.find(".playlist-expand-item-range").html(display_from); + } + + expand_copy.addClass('playlist-item'); + expand_copy.appendTo(playlist_table); + expand_copy.click(function(){ + updatePlaylist(); + playlist_range_from = real_from; + playlist_range_to = real_to; + }); + expand_copy.show(); + } + function updatePlaylist(){ playlist_table.animate({opacity: 0}, 200, function(){ playlist_empty.hide(); playlist_loading.show(); $("#playlist-table .playlist-item").css("opacity", 0); + data = {}; + if(!(playlist_range_from === 0 && playlist_range_to === 0)) { + data = { + range_from: playlist_range_from, + range_to: playlist_range_to + }; + } $.ajax({ type: 'GET', url: 'playlist', + data: data, statusCode : { 200: displayPlaylist, 204: function(){ @@ -587,11 +645,19 @@ 200 : function(data){ if(data.ver !== playlist_ver){ playlist_ver = data.ver; + playlist_range_from = 0; + playlist_range_to = 0; updatePlaylist(); } if(data.current_index !== playlist_current_index){ - playlist_current_index = data.current_index; - displayActiveItem(data.current_index); + if(data.current_index > playlist_range_to || data.current_index < playlist_range_from){ + playlist_range_from = 0; + playlist_range_to = 0; + updatePlaylist(); + }else{ + playlist_current_index = data.current_index; + displayActiveItem(data.current_index); + } } updateControls(data.empty, data.play, data.mode); }