TeaSpeak/TeaWeb
TeaSpeak/TeaWeb
1
0
Fork 0
Code Issues 1 Pull requests Activity

added live track of the bots player index and buffer status and fixed UI overflow

Browse source
This commit is contained in:
WolverinDEV 2019-01-20 19:36:00 +01:00
parent 07b79ca0eb
commit 9a8ce332d7
2 changed files with 58 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
shared/css/modal-playlist.scss
View file

@ -155,6 +155,10 @@
} }
.playlist-edit { .playlist-edit {
display: flex;
flex-direction: column;
justify-content: stretch;
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -199,6 +203,9 @@
} }
} }
} }
flex-shrink: 0;
flex-grow: 0;
} }
.playback-properties { .playback-properties {
@ -241,7 +248,15 @@
text-align: center; text-align: center;
} }
.tab-content, x-content {
overflow-y: hidden;
display: flex;
flex-direction: column;
}
.container-songs { .container-songs {
display: flex;
flex-direction: column;
padding: 5px; padding: 5px;
.song-list { .song-list {
@ -347,6 +362,10 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-grow: 0;
flex-shrink: 0;
margin-top: 5px;
} }
} }

43
shared/js/ui/frames/SelectedItemInfo.ts
View file

@ -387,12 +387,19 @@ enum MusicPlayerState {
} }
class MusicInfoManager extends ClientInfoManager { class MusicInfoManager extends ClientInfoManager {
notify_status: (json) => any;
createFrame<_>(handle: InfoBar<_>, channel: MusicClientEntry, html_tag: JQuery<HTMLElement>) { createFrame<_>(handle: InfoBar<_>, channel: MusicClientEntry, html_tag: JQuery<HTMLElement>) {
super.createFrame(handle, channel, html_tag); super.createFrame(handle, channel, html_tag);
this.updateFrame(channel, html_tag); this.updateFrame(channel, html_tag);
} }
updateFrame(bot: MusicClientEntry, html_tag: JQuery<HTMLElement>) { updateFrame(bot: MusicClientEntry, html_tag: JQuery<HTMLElement>) {
if(this.notify_status) {
this.handle.handle.serverConnection.commandHandler.unset_handler("notifymusicstatusupdate", this.notify_status);
this.notify_status = undefined;
}
this.resetIntervals(); this.resetIntervals();
html_tag.empty(); html_tag.empty();
@ -563,20 +570,39 @@ class MusicInfoManager extends ClientInfoManager {
frame.find(".timeline").attr("time-max", info.player_max_index); frame.find(".timeline").attr("time-max", info.player_max_index);
let timeline = frame.find(".timeline"); let timeline = frame.find(".timeline");
let time_bar = timeline.find(".played"); let time_bar = timeline.find(".played");
let buffered_bar = timeline.find(".buffered");
let slider = timeline.find(".slider"); let slider = timeline.find(".slider");
let player_time = _frame.find(".player_time"); let player_time = _frame.find(".player_time");
let update_handler = () => {
let time_index = info.player_replay_index + (bot.properties.player_state == 2 ? Date.now() - timestamp : 0); let update_handler = (played?: number, buffered?: number) => {
let time_index = played || info.player_replay_index + (bot.properties.player_state == 2 ? Date.now() - timestamp : 0);
let buffered_index = buffered || 0;
time_bar.css("width", time_index / info.player_max_index * 100 + "%"); time_bar.css("width", time_index / info.player_max_index * 100 + "%");
buffered_bar.css("width", buffered_index / info.player_max_index * 100 + "%");
if(!slider.prop("editing") && !slider.prop("edited")) { if(!slider.prop("editing") && !slider.prop("edited")) {
player_time.text(format_time(Math.floor(time_index / 1000))); player_time.text(format_time(Math.floor(time_index / 1000)));
slider.css("margin-left", time_index / info.player_max_index * 100 + "%"); slider.css("margin-left", time_index / info.player_max_index * 100 + "%");
} }
}; };
this.registerInterval(setInterval(update_handler, 1000));
let interval = setInterval(update_handler, 1000);
this.registerInterval(interval);
update_handler(); update_handler();
/* register subscription */
this.handle.handle.serverConnection.sendCommand("musicbotsetsubscription", {bot_id: bot.properties.client_database_id}).catch(error => {
console.error("Failed to subscribe to displayed music bot! Using pseudo timeline");
}).then(() => {
clearInterval(interval);
});
this.notify_status = json => {
json = json[0];
update_handler(parseInt(json["player_replay_index"]), parseInt(json["player_buffered_index"]));
};
this.handle.handle.serverConnection.commandHandler.set_handler("notifymusicstatusupdate", this.notify_status);
} }
}); });
} }
@ -656,4 +682,13 @@ class MusicInfoManager extends ClientInfoManager {
return typeof object == "object" && object instanceof MusicClientEntry; return typeof object == "object" && object instanceof MusicClientEntry;
} }
finalizeFrame(object: ClientEntry, frame: JQuery<HTMLElement>) {
if(this.notify_status) {
this.handle.handle.serverConnection.commandHandler.unset_handler("notifymusicstatusupdate", this.notify_status);
this.notify_status = undefined;
}
super.finalizeFrame(object, frame);
}
} }