906 lines
No EOL
40 KiB
TypeScript
906 lines
No EOL
40 KiB
TypeScript
// import {SideBarController, FrameContent} from "../SideBarController";
|
|
// import {LogCategory} from "../../../log";
|
|
// import {CommandResult, PlaylistSong} from "../../../connection/ServerConnectionDeclaration";
|
|
// import {createErrorModal, createInputModal} from "../../../ui/elements/Modal";
|
|
// import * as log from "../../../log";
|
|
// import * as image_preview from "../image_preview";
|
|
// import {Registry} from "../../../events";
|
|
// import {ErrorCode} from "../../../connection/ErrorCode";
|
|
// import {ClientEvents, MusicClientEntry, SongInfo} from "../../../tree/Client";
|
|
// import { tr } from "tc-shared/i18n/localize";
|
|
//
|
|
// export interface MusicSidebarEvents {
|
|
// "open": {}, /* triggers when frame should be shown */
|
|
// "close": {}, /* triggers when frame will be closed */
|
|
//
|
|
// "bot_change": {
|
|
// old: MusicClientEntry | undefined,
|
|
// new: MusicClientEntry | undefined
|
|
// },
|
|
// "bot_property_update": {
|
|
// properties: string[]
|
|
// },
|
|
//
|
|
// "action_play": {},
|
|
// "action_pause": {},
|
|
// "action_song_set": { song_id: number },
|
|
// "action_forward": {},
|
|
// "action_rewind": {},
|
|
// "action_forward_ms": {
|
|
// units: number;
|
|
// },
|
|
// "action_rewind_ms": {
|
|
// units: number;
|
|
// },
|
|
// "action_song_add": {},
|
|
// "action_song_delete": { song_id: number },
|
|
// "action_playlist_reload": {},
|
|
//
|
|
// "playtime_move_begin": {},
|
|
// "playtime_move_end": {
|
|
// canceled: boolean,
|
|
// target_time?: number
|
|
// },
|
|
//
|
|
// "reorder_begin": { song_id: number; entry: JQuery },
|
|
// "reorder_end": { song_id: number; canceled: boolean; entry: JQuery; previous_entry?: number },
|
|
//
|
|
// "player_time_update": ClientEvents["music_status_update"],
|
|
// "player_song_change": ClientEvents["music_song_change"],
|
|
//
|
|
// "playlist_song_add": ClientEvents["playlist_song_add"] & { insert_effect?: boolean },
|
|
// "playlist_song_remove": ClientEvents["playlist_song_remove"],
|
|
// "playlist_song_reorder": ClientEvents["playlist_song_reorder"],
|
|
// "playlist_song_loaded": ClientEvents["playlist_song_loaded"] & { html_entry?: JQuery },
|
|
// }
|
|
//
|
|
// interface LoadedSongData {
|
|
// description: string;
|
|
// title: string;
|
|
// url: string;
|
|
//
|
|
// length: number;
|
|
// thumbnail?: string;
|
|
//
|
|
// metadata: {[key: string]: string};
|
|
// }
|
|
//
|
|
// export class MusicInfo {
|
|
// readonly events: Registry<MusicSidebarEvents>;
|
|
// readonly handle: SideBarController;
|
|
//
|
|
// private _html_tag: JQuery;
|
|
// private _container_playlist: JQuery;
|
|
//
|
|
// private currentMusicBot: MusicClientEntry | undefined;
|
|
// private update_song_info: number = 0; /* timestamp when we force update the info */
|
|
// private time_select: {
|
|
// active: boolean,
|
|
// max_time: number,
|
|
// current_select_time: number,
|
|
// current_player_time: number
|
|
// } = { active: false, current_select_time: 0, max_time: 0, current_player_time: 0};
|
|
// private song_reorder: {
|
|
// active: boolean,
|
|
// song_id: number,
|
|
// previous_entry: number,
|
|
// html: JQuery,
|
|
// mouse?: {x: number, y: number},
|
|
// indicator: JQuery
|
|
// } = { active: false, song_id: 0, previous_entry: 0, html: undefined, indicator: $.spawn("div").addClass("reorder-indicator") };
|
|
//
|
|
// previous_frame_content: FrameContent;
|
|
//
|
|
// constructor(handle: SideBarController) {
|
|
// this.events = new Registry<MusicSidebarEvents>();
|
|
// this.handle = handle;
|
|
//
|
|
// this.events.enableDebug("music-info");
|
|
// this.initialize_listener();
|
|
// this._build_html_tag();
|
|
//
|
|
// this.set_current_bot(undefined, true);
|
|
// }
|
|
//
|
|
// html_tag() : JQuery {
|
|
// return this._html_tag;
|
|
// }
|
|
//
|
|
// destroy() {
|
|
// this.set_current_bot(undefined);
|
|
// this.events.destroy();
|
|
//
|
|
// this._html_tag && this._html_tag.remove();
|
|
// this._html_tag = undefined;
|
|
//
|
|
// this.currentMusicBot = undefined;
|
|
// this.previous_frame_content = undefined;
|
|
// }
|
|
//
|
|
// private format_time(value: number) {
|
|
// if(value == 0) return "--:--:--";
|
|
//
|
|
// value /= 1000;
|
|
//
|
|
// let hours = 0, minutes = 0;
|
|
// while(value >= 60 * 60) {
|
|
// hours++;
|
|
// value -= 60 * 60;
|
|
// }
|
|
//
|
|
// while(value >= 60) {
|
|
// minutes++;
|
|
// value -= 60;
|
|
// }
|
|
//
|
|
// return ("0" + hours).substr(-2) + ":" + ("0" + minutes).substr(-2) + ":" + ("0" + value.toFixed(0)).substr(-2);
|
|
// };
|
|
//
|
|
// private _build_html_tag() {
|
|
// this._html_tag = $("#tmpl_frame_chat_music_info").renderTag();
|
|
// this._container_playlist = this._html_tag.find(".container-playlist");
|
|
//
|
|
// this._html_tag.find(".button-close").on('click', () => {
|
|
// if(this.previous_frame_content === FrameContent.CLIENT_INFO) {
|
|
// this.previous_frame_content = FrameContent.NONE;
|
|
// }
|
|
//
|
|
// this.handle.set_content(this.previous_frame_content);
|
|
// });
|
|
//
|
|
// this._html_tag.find(".button-reload-playlist").on('click', () => this.events.fire("action_playlist_reload"));
|
|
// this._html_tag.find(".button-song-add").on('click', () => this.events.fire("action_song_add"));
|
|
// this._html_tag.find(".thumbnail").on('click', event => {
|
|
// const image = this._html_tag.find(".thumbnail img");
|
|
// const url = image.attr("x-thumbnail-url");
|
|
// if(!url) return;
|
|
//
|
|
// image_preview.preview_image(decodeURIComponent(url), decodeURIComponent(url));
|
|
// });
|
|
//
|
|
// {
|
|
// const button_play = this._html_tag.find(".control-buttons .button-play");
|
|
// const button_pause = this._html_tag.find(".control-buttons .button-pause");
|
|
//
|
|
// button_play.on('click', () => this.events.fire("action_play"));
|
|
// button_pause.on('click', () => this.events.fire("action_pause"));
|
|
//
|
|
// this.events.on(["bot_change", "bot_property_update"], event => {
|
|
// if(event.type === "bot_property_update" && event.as<"bot_property_update">().properties.indexOf("player_state") == -1) return;
|
|
//
|
|
// button_play.toggleClass("hidden", this.currentMusicBot === undefined || this.currentMusicBot.isCurrentlyPlaying());
|
|
// });
|
|
//
|
|
// this.events.on(["bot_change", "bot_property_update"], event => {
|
|
// if(event.type === "bot_property_update" && event.as<"bot_property_update">().properties.indexOf("player_state") == -1) return;
|
|
//
|
|
// button_pause.toggleClass("hidden", this.currentMusicBot !== undefined && !this.currentMusicBot.isCurrentlyPlaying());
|
|
// });
|
|
//
|
|
// this._html_tag.find(".control-buttons .button-rewind").on('click', () => this.events.fire("action_rewind"));
|
|
// this._html_tag.find(".control-buttons .button-forward").on('click', () => this.events.fire("action_forward"));
|
|
// }
|
|
//
|
|
// /* timeline updaters */
|
|
// {
|
|
// const container = this._html_tag.find(".container-timeline");
|
|
//
|
|
// const timeline = container.find(".timeline");
|
|
// const indicator_playtime = container.find(".indicator-playtime");
|
|
// const indicator_buffered = container.find(".indicator-buffered");
|
|
// const thumb = container.find(".thumb");
|
|
//
|
|
// const timestamp_current = container.find(".timestamps .current");
|
|
// const timestamp_max = container.find(".timestamps .max");
|
|
//
|
|
// thumb.on('mousedown', event => event.button === 0 && this.events.fire("playtime_move_begin"));
|
|
//
|
|
// this.events.on(["bot_change", "player_song_change", "player_time_update", "playtime_move_end"], event => {
|
|
// if(!this.currentMusicBot) {
|
|
// this.time_select.max_time = 0;
|
|
// indicator_buffered.each((_, e) => { e.style.width = "0%"; });
|
|
// indicator_playtime.each((_, e) => { e.style.width = "0%"; });
|
|
// thumb.each((_, e) => { e.style.marginLeft = "0%"; });
|
|
//
|
|
// timestamp_current.text("--:--:--");
|
|
// timestamp_max.text("--:--:--");
|
|
// return;
|
|
// }
|
|
// if(event.type === "playtime_move_end" && !event.as<"playtime_move_end">().canceled) return;
|
|
//
|
|
// const update_info = Date.now() > this.update_song_info;
|
|
// this.currentMusicBot.requestPlayerInfo(update_info ? 1000 : 60 * 1000).then(data => {
|
|
// if(update_info)
|
|
// this.display_song_info(data);
|
|
//
|
|
// let played, buffered;
|
|
// if(event.type !== "player_time_update") {
|
|
// played = data.player_replay_index;
|
|
// buffered = data.player_buffered_index;
|
|
// } else {
|
|
// played = event.as<"player_time_update">().player_replay_index;
|
|
// buffered = event.as<"player_time_update">().player_buffered_index;
|
|
// }
|
|
//
|
|
// this.time_select.current_player_time = played;
|
|
// this.time_select.max_time = data.player_max_index;
|
|
// timestamp_max.text(data.player_max_index ? this.format_time(data.player_max_index) : "--:--:--");
|
|
//
|
|
// if(this.time_select.active)
|
|
// return;
|
|
//
|
|
// let wplayed, wbuffered;
|
|
// if(data.player_max_index) {
|
|
// wplayed = (played * 100 / data.player_max_index).toFixed(2) + "%";
|
|
// wbuffered = (buffered * 100 / data.player_max_index).toFixed(2) + "%";
|
|
//
|
|
// timestamp_current.text(this.format_time(played));
|
|
// } else {
|
|
// wplayed = "100%";
|
|
// wbuffered = "100%";
|
|
//
|
|
// timestamp_current.text(this.format_time(played));
|
|
// }
|
|
//
|
|
// indicator_buffered.each((_, e) => { e.style.width = wbuffered; });
|
|
// indicator_playtime.each((_, e) => { e.style.width = wplayed; });
|
|
// thumb.each((_, e) => { e.style.marginLeft = wplayed; });
|
|
// });
|
|
// });
|
|
//
|
|
// const move_callback = (event: MouseEvent) => {
|
|
// const x_min = timeline.offset().left;
|
|
// const x_max = x_min + timeline.width();
|
|
//
|
|
// let current = event.pageX;
|
|
// if(current < x_min)
|
|
// current = x_min;
|
|
// else if(current > x_max)
|
|
// current = x_max;
|
|
//
|
|
// const percent = (current - x_min) / (x_max - x_min);
|
|
// this.time_select.current_select_time = percent * this.time_select.max_time;
|
|
// timestamp_current.text(this.format_time(this.time_select.current_select_time));
|
|
//
|
|
// const w = (percent * 100).toFixed(2) + "%";
|
|
// indicator_playtime.each((_, e) => { e.style.width = w; });
|
|
// thumb.each((_, e) => { e.style.marginLeft = w; });
|
|
// };
|
|
//
|
|
// const up_callback = (event: MouseEvent | FocusEvent) => {
|
|
// if(event.type === "mouseup")
|
|
// if((event as MouseEvent).button !== 0) return;
|
|
//
|
|
// this.events.fire("playtime_move_end", {
|
|
// canceled: event.type !== "mouseup",
|
|
// target_time: this.time_select.current_select_time
|
|
// });
|
|
// };
|
|
//
|
|
// this.events.on("playtime_move_begin", event => {
|
|
// if(this.time_select.max_time <= 0) return;
|
|
//
|
|
// this.time_select.active = true;
|
|
// indicator_buffered.each((_, e) => { e.style.width = "0"; });
|
|
// document.addEventListener("mousemove", move_callback);
|
|
// document.addEventListener("mouseleave", up_callback);
|
|
// document.addEventListener("blur", up_callback);
|
|
// document.addEventListener("mouseup", up_callback);
|
|
// document.body.style.userSelect = "none";
|
|
// });
|
|
//
|
|
// this.events.on(["bot_change", "player_song_change", "playtime_move_end"], event => {
|
|
// document.removeEventListener("mousemove", move_callback);
|
|
// document.removeEventListener("mouseleave", up_callback);
|
|
// document.removeEventListener("blur", up_callback);
|
|
// document.removeEventListener("mouseup", up_callback);
|
|
// document.body.style.userSelect = undefined;
|
|
// this.time_select.active = false;
|
|
//
|
|
// if(event.type === "playtime_move_end") {
|
|
// const data = event.as<"playtime_move_end">();
|
|
// if(data.canceled) return;
|
|
//
|
|
// const offset = data.target_time - this.time_select.current_player_time;
|
|
// this.events.fire(offset > 0 ? "action_forward_ms" : "action_rewind_ms", {units: Math.abs(offset) });
|
|
// }
|
|
// });
|
|
// }
|
|
//
|
|
// /* song info handlers */
|
|
// this.events.on(["bot_change", "player_song_change"], event => {
|
|
// let song: SongInfo;
|
|
//
|
|
// /* update the player info so we dont get old data */
|
|
// if(this.currentMusicBot) {
|
|
// this.update_song_info = 0;
|
|
// this.currentMusicBot.requestPlayerInfo(1000).then(data => {
|
|
// this.display_song_info(data);
|
|
// }).catch(error => {
|
|
// log.warn(LogCategory.CLIENT, tr("Failed to update current song for side bar: %o"), error);
|
|
// });
|
|
// }
|
|
//
|
|
// if(event.type === "bot_change") {
|
|
// song = undefined;
|
|
// } else {
|
|
// song = event.as<"player_song_change">().song;
|
|
// }
|
|
// this.display_song_info(song);
|
|
// });
|
|
// }
|
|
//
|
|
// private display_song_info(song: SongInfo) {
|
|
// if(song) {
|
|
// if(!song.song_loaded) {
|
|
// console.log("Awaiting a loaded song info.");
|
|
// this.update_song_info = 0;
|
|
// } else {
|
|
// console.log("Song info loaded.");
|
|
// this.update_song_info = Date.now() + 60 * 1000;
|
|
// }
|
|
// }
|
|
//
|
|
// if(!song) song = new SongInfo();
|
|
//
|
|
// const container_thumbnail = this._html_tag.find(".player .container-thumbnail");
|
|
// const container_info = this._html_tag.find(".player .container-song-info");
|
|
//
|
|
// container_thumbnail.find("img")
|
|
// .attr("src", song.song_thumbnail || "img/music/no-thumbnail.png")
|
|
// .attr("x-thumbnail-url", encodeURIComponent(song.song_thumbnail))
|
|
// .css("cursor", song.song_thumbnail ? "pointer" : null);
|
|
//
|
|
// if(song.song_id)
|
|
// container_info.find(".song-name").text(song.song_title || song.song_url).attr("title", song.song_title || song.song_url);
|
|
// else
|
|
// container_info.find(".song-name").text(tr("No song selected"));
|
|
// if(song.song_description) {
|
|
// container_info.find(".song-description").removeClass("hidden").text(song.song_description).attr("title", song.song_description);
|
|
// } else {
|
|
// container_info.find(".song-description").addClass("hidden").text(tr("Song has no description")).attr("title", tr("Song has no description"));
|
|
// }
|
|
// }
|
|
//
|
|
// private initialize_listener() {
|
|
// //Must come at first!
|
|
// this.events.on("player_song_change", event => {
|
|
// if(!this.currentMusicBot) return;
|
|
//
|
|
// this.currentMusicBot.requestPlayerInfo(0); /* enforce an info refresh */
|
|
// });
|
|
//
|
|
// /* bot property listener */
|
|
// const callback_property = (event: ClientEvents["notify_properties_updated"]) => this.events.fire("bot_property_update", { properties: Object.keys(event.updated_properties) });
|
|
// const callback_time_update = (event: ClientEvents["music_status_update"]) => this.events.fire("player_time_update", event, true);
|
|
// const callback_song_change = (event: ClientEvents["music_song_change"]) => this.events.fire("player_song_change", event, true);
|
|
// this.events.on("bot_change", event => {
|
|
// if(event.old) {
|
|
// event.old.events.off(callback_property);
|
|
// event.old.events.off(callback_time_update);
|
|
// event.old.events.off(callback_song_change);
|
|
// event.old.events.disconnectAll(this.events);
|
|
// }
|
|
// if(event.new) {
|
|
// event.new.events.on("notify_properties_updated", callback_property);
|
|
//
|
|
// event.new.events.on("music_status_update", callback_time_update);
|
|
// event.new.events.on("music_song_change", callback_song_change);
|
|
//
|
|
// // @ts-ignore
|
|
// event.new.events.connect("playlist_song_add", this.events);
|
|
//
|
|
// // @ts-ignore
|
|
// event.new.events.connect("playlist_song_remove", this.events);
|
|
//
|
|
// // @ts-ignore
|
|
// event.new.events.connect("playlist_song_reorder", this.events);
|
|
//
|
|
// // @ts-ignore
|
|
// event.new.events.connect("playlist_song_loaded", this.events);
|
|
// }
|
|
// });
|
|
//
|
|
// /* basic player actions */
|
|
// {
|
|
// const action_map = {
|
|
// "action_play": 1,
|
|
// "action_pause": 2,
|
|
// "action_forward": 3,
|
|
// "action_rewind": 4,
|
|
// "action_forward_ms": 5,
|
|
// "action_rewind_ms": 6
|
|
// };
|
|
//
|
|
// this.events.on(Object.keys(action_map) as any, event => {
|
|
// if(!this.currentMusicBot) return;
|
|
//
|
|
// const action_id = action_map[event.type];
|
|
// if(typeof action_id === "undefined") {
|
|
// log.warn(LogCategory.GENERAL, tr("Invalid music bot action event detected: %s. This should not happen!"), event.type);
|
|
// return;
|
|
// }
|
|
// const data = {
|
|
// bot_id: this.currentMusicBot.properties.client_database_id,
|
|
// action: action_id,
|
|
// units: event.units
|
|
// };
|
|
// this.handle.handle.serverConnection.send_command("musicbotplayeraction", data).catch(error => {
|
|
// if(error instanceof CommandResult && error.id === ErrorCode.SERVER_INSUFFICIENT_PERMISSIONS) return;
|
|
//
|
|
// log.error(LogCategory.CLIENT, tr("Failed to perform action %s on bot: %o"), event.type, error);
|
|
// //TODO: Better error dialog
|
|
// createErrorModal(tr("Failed to perform action."), tr("Failed to perform action for music bot.")).open();
|
|
// });
|
|
// });
|
|
// }
|
|
//
|
|
// this.events.on("action_song_set", event => {
|
|
// if(!this.currentMusicBot) return;
|
|
//
|
|
// const connection = this.handle.handle.serverConnection;
|
|
// if(!connection || !connection.connected()) return;
|
|
//
|
|
// connection.send_command("playlistsongsetcurrent", {
|
|
// playlist_id: this.currentMusicBot.properties.client_playlist_id,
|
|
// song_id: event.song_id
|
|
// }).catch(error => {
|
|
// if(error instanceof CommandResult && error.id === ErrorCode.SERVER_INSUFFICIENT_PERMISSIONS) return;
|
|
//
|
|
// log.error(LogCategory.CLIENT, tr("Failed to set current song on bot: %o"), event.type, error);
|
|
// //TODO: Better error dialog
|
|
// createErrorModal(tr("Failed to set song."), tr("Failed to set current replaying song.")).open();
|
|
// })
|
|
// });
|
|
//
|
|
// this.events.on("action_song_add", () => {
|
|
// if(!this.currentMusicBot) return;
|
|
//
|
|
// createInputModal(tr("Enter song URL"), tr("Please enter the target song URL"), text => {
|
|
// try {
|
|
// new URL(text);
|
|
// return true;
|
|
// } catch(error) {
|
|
// return false;
|
|
// }
|
|
// }, result => {
|
|
// if(!result || !this.currentMusicBot) return;
|
|
//
|
|
// const connection = this.handle.handle.serverConnection;
|
|
// connection.send_command("playlistsongadd", {
|
|
// playlist_id: this.currentMusicBot.properties.client_playlist_id,
|
|
// url: result
|
|
// }).catch(error => {
|
|
// if(error instanceof CommandResult && error.id === ErrorCode.SERVER_INSUFFICIENT_PERMISSIONS) return;
|
|
//
|
|
// log.error(LogCategory.CLIENT, tr("Failed to add song to bot playlist: %o"), error);
|
|
//
|
|
// //TODO: Better error description
|
|
// createErrorModal(tr("Failed to insert song"), tr("Failed to append song to the playlist.")).open();
|
|
// });
|
|
// }).open();
|
|
// });
|
|
//
|
|
// this.events.on("action_song_delete", event => {
|
|
// if(!this.currentMusicBot) return;
|
|
//
|
|
// const connection = this.handle.handle.serverConnection;
|
|
// if(!connection || !connection.connected()) return;
|
|
//
|
|
// connection.send_command("playlistsongremove", {
|
|
// playlist_id: this.currentMusicBot.properties.client_playlist_id,
|
|
// song_id: event.song_id
|
|
// }).catch(error => {
|
|
// if(error instanceof CommandResult && error.id === ErrorCode.SERVER_INSUFFICIENT_PERMISSIONS) return;
|
|
//
|
|
// log.error(LogCategory.CLIENT, tr("Failed to delete song from bot playlist: %o"), error);
|
|
//
|
|
// //TODO: Better error description
|
|
// createErrorModal(tr("Failed to delete song"), tr("Failed to remove song from the playlist.")).open();
|
|
// });
|
|
// });
|
|
//
|
|
// /* bot subscription */
|
|
// this.events.on("bot_change", () => {
|
|
// const connection = this.handle.handle.serverConnection;
|
|
// if(!connection || !connection.connected()) return;
|
|
//
|
|
// const bot_id = this.currentMusicBot ? this.currentMusicBot.properties.client_database_id : 0;
|
|
// this.handle.handle.serverConnection.send_command("musicbotsetsubscription", { bot_id: bot_id }).catch(error => {
|
|
// log.warn(LogCategory.CLIENT, tr("Failed to subscribe to displayed bot within the side bar: %o"), error);
|
|
// });
|
|
// });
|
|
//
|
|
// /* playlist stuff */
|
|
// this.events.on(["bot_change", "action_playlist_reload"], event => {
|
|
// this.playlist_subscribe(true);
|
|
// this.update_playlist();
|
|
// });
|
|
//
|
|
// this.events.on("playlist_song_add", event => {
|
|
// const animation = typeof event.insert_effect === "boolean" ? event.insert_effect : true;
|
|
// const html_entry = this.build_playlist_entry(event.song, animation);
|
|
// const playlist = this._container_playlist.find(".playlist");
|
|
// const previous = playlist.find(".entry[song-id=" + event.song.song_previous_song_id + "]");
|
|
//
|
|
// if(previous.length)
|
|
// html_entry.insertAfter(previous);
|
|
// else
|
|
// html_entry.appendTo(playlist);
|
|
// if(event.song.song_loaded)
|
|
// this.events.fire("playlist_song_loaded", {
|
|
// html_entry: html_entry,
|
|
// metadata: event.song.song_metadata,
|
|
// success: true,
|
|
// song_id: event.song.song_id
|
|
// });
|
|
// if(animation)
|
|
// setTimeout(() => html_entry.addClass("shown"), 50);
|
|
// });
|
|
//
|
|
// this.events.on("playlist_song_remove", event => {
|
|
// const playlist = this._container_playlist.find(".playlist");
|
|
// const song = playlist.find(".entry[song-id=" + event.song_id + "]");
|
|
// song.addClass("deleted");
|
|
// setTimeout(() => song.remove(), 5000); /* to play some animations */
|
|
// });
|
|
//
|
|
// this.events.on("playlist_song_reorder", event => {
|
|
// const playlist = this._container_playlist.find(".playlist");
|
|
// const entry = playlist.find(".entry[song-id=" + event.song_id + "]");
|
|
// if(!entry) return;
|
|
//
|
|
// console.log(event);
|
|
// const previous = playlist.find(".entry[song-id=" + event.previous_song_id + "]");
|
|
// if(previous.length) {
|
|
// entry.insertAfter(previous);
|
|
// } else {
|
|
// entry.insertBefore(playlist.find(".entry")[0]);
|
|
// }
|
|
// });
|
|
//
|
|
// this.events.on("playlist_song_loaded", event => {
|
|
// const entry = event.html_entry || this._container_playlist.find(".playlist .entry[song-id=" + event.song_id + "]");
|
|
//
|
|
// const thumbnail = entry.find(".container-thumbnail img");
|
|
// const name = entry.find(".name");
|
|
// const description = entry.find(".description");
|
|
// const length = entry.find(".length");
|
|
//
|
|
// if(event.success) {
|
|
// let meta: LoadedSongData;
|
|
// try {
|
|
// meta = JSON.parse(event.metadata);
|
|
// } catch(error) {
|
|
// log.warn(LogCategory.CLIENT, tr("Failed to decode song metadata"));
|
|
// meta = {
|
|
// description: "",
|
|
// title: "",
|
|
// metadata: {},
|
|
// length: 0,
|
|
// url: entry.attr("song-url")
|
|
// }
|
|
// }
|
|
//
|
|
// if(!meta.title && meta.description) {
|
|
// meta.title = meta.description.split("\n")[0];
|
|
// meta.description = meta.description.split("\n").slice(1).join("\n");
|
|
// }
|
|
// meta.title = meta.title || meta.url;
|
|
//
|
|
// name.text(meta.title);
|
|
// description.text(meta.description);
|
|
// length.text(this.format_time(meta.length || 0));
|
|
// if(meta.thumbnail) {
|
|
// thumbnail.attr("src", meta.thumbnail)
|
|
// .attr("x-thumbnail-url", encodeURIComponent(meta.thumbnail));
|
|
// }
|
|
// } else {
|
|
// name.text(tr("failed to load ") + entry.attr("song-url")).attr("title", tr("failed to load ") + entry.attr("song-url"));
|
|
// description.text(event.error_msg || tr("unknown error")).attr("title", event.error_msg || tr("unknown error"));
|
|
// }
|
|
// });
|
|
//
|
|
// /* song reorder */
|
|
// {
|
|
// const move_callback = (event: MouseEvent) => {
|
|
// if(!this.song_reorder.html) return;
|
|
//
|
|
// this.song_reorder.html.each((_, e) => {
|
|
// e.style.left = (event.pageX - this.song_reorder.mouse.x) + "px";
|
|
// e.style.top = (event.pageY - this.song_reorder.mouse.y) + "px";
|
|
// });
|
|
//
|
|
// const entries = this._container_playlist.find(".playlist .entry");
|
|
// let before: HTMLElement;
|
|
// for(const entry of entries) {
|
|
// const off = $(entry).offset().top;
|
|
// if(off > event.pageY) {
|
|
// this.song_reorder.indicator.insertBefore(entry);
|
|
// this.song_reorder.previous_entry = before ? parseInt(before.attributes.getNamedItem("song-id").value) : 0;
|
|
// return;
|
|
// }
|
|
//
|
|
// before = entry;
|
|
// }
|
|
// this.song_reorder.indicator.insertAfter(entries.last());
|
|
// this.song_reorder.previous_entry = before ? parseInt(before.attributes.getNamedItem("song-id").value) : 0;
|
|
// };
|
|
//
|
|
// const up_callback = (event: MouseEvent | FocusEvent) => {
|
|
// if(event.type === "mouseup")
|
|
// if((event as MouseEvent).button !== 0) return;
|
|
//
|
|
// this.events.fire("reorder_end", {
|
|
// canceled: event.type !== "mouseup",
|
|
// song_id: this.song_reorder.song_id,
|
|
// entry: this.song_reorder.html,
|
|
// previous_entry: this.song_reorder.previous_entry
|
|
// });
|
|
// };
|
|
//
|
|
// this.events.on("reorder_begin", event => {
|
|
// this.song_reorder.song_id = event.song_id;
|
|
// this.song_reorder.html = event.entry;
|
|
//
|
|
// const width = this.song_reorder.html.width() + "px";
|
|
// this.song_reorder.html.each((_, e) => { e.style.width = width; });
|
|
// this.song_reorder.active = true;
|
|
// this.song_reorder.html.addClass("reordering");
|
|
//
|
|
// document.addEventListener("mousemove", move_callback);
|
|
// document.addEventListener("mouseleave", up_callback);
|
|
// document.addEventListener("blur", up_callback);
|
|
// document.addEventListener("mouseup", up_callback);
|
|
// document.body.style.userSelect = "none";
|
|
// });
|
|
//
|
|
// this.events.on(["bot_change", "playlist_song_remove", "reorder_end"], event => {
|
|
// if(event.type === "playlist_song_remove" && event.as<"playlist_song_remove">().song_id !== this.song_reorder.song_id) return;
|
|
//
|
|
// document.removeEventListener("mousemove", move_callback);
|
|
// document.removeEventListener("mouseleave", up_callback);
|
|
// document.removeEventListener("blur", up_callback);
|
|
// document.removeEventListener("mouseup", up_callback);
|
|
// document.body.style.userSelect = undefined;
|
|
//
|
|
// this.song_reorder.active = false;
|
|
// this.song_reorder.indicator.remove();
|
|
// if(this.song_reorder.html) {
|
|
// this.song_reorder.html.each((_, e) => {
|
|
// e.style.width = null;
|
|
// e.style.left = null;
|
|
// e.style.top = null;
|
|
// });
|
|
// this.song_reorder.html.removeClass("reordering");
|
|
// }
|
|
//
|
|
// if(event.type === "reorder_end") {
|
|
// const data = event.as<"reorder_end">();
|
|
// if(data.canceled) return;
|
|
//
|
|
// const connection = this.handle.handle.serverConnection;
|
|
// if(!connection || !connection.connected()) return;
|
|
// if(!this.currentMusicBot) return;
|
|
//
|
|
// connection.send_command("playlistsongreorder", {
|
|
// playlist_id: this.currentMusicBot.properties.client_playlist_id,
|
|
// song_id: data.song_id,
|
|
// song_previous_song_id: data.previous_entry
|
|
// }).catch(error => {
|
|
// if(error instanceof CommandResult && error.id === ErrorCode.SERVER_INSUFFICIENT_PERMISSIONS) return;
|
|
//
|
|
// log.error(LogCategory.CLIENT, tr("Failed to add song to bot playlist: %o"), error);
|
|
//
|
|
// //TODO: Better error description
|
|
// createErrorModal(tr("Failed to reorder song"), tr("Failed to reorder song within the playlist.")).open();
|
|
// });
|
|
// console.log("Reorder to %d", data.previous_entry);
|
|
// }
|
|
// });
|
|
//
|
|
// this.events.on(["bot_change", "player_song_change"], event => {
|
|
// if(!this.currentMusicBot) {
|
|
// this._html_tag.find(".playlist .current-song").removeClass("current-song");
|
|
// return;
|
|
// }
|
|
//
|
|
// this.currentMusicBot.requestPlayerInfo(1000).then(data => {
|
|
// const song_id = data ? data.song_id : 0;
|
|
// this._html_tag.find(".playlist .current-song").removeClass("current-song");
|
|
// this._html_tag.find(".playlist .entry[song-id=" + song_id + "]").addClass("current-song");
|
|
// });
|
|
// });
|
|
// }
|
|
// }
|
|
//
|
|
// set_current_bot(client: MusicClientEntry | undefined, enforce?: boolean) {
|
|
// if(client) client.updateClientVariables(); /* just to ensure */
|
|
// if(client === this.currentMusicBot && (typeof(enforce) === "undefined" || !enforce))
|
|
// return;
|
|
//
|
|
// const old = this.currentMusicBot;
|
|
// this.currentMusicBot = client;
|
|
// this.events.fire("bot_change", {
|
|
// new: client,
|
|
// old: old
|
|
// });
|
|
// }
|
|
//
|
|
// current_bot() : MusicClientEntry | undefined {
|
|
// return this.currentMusicBot;
|
|
// }
|
|
//
|
|
// private sort_songs(data: PlaylistSong[]) {
|
|
// const result = [];
|
|
//
|
|
// let appendable: PlaylistSong[] = [];
|
|
// for(const song of data) {
|
|
// if(song.song_id == 0 || data.findIndex(e => e.song_id === song.song_previous_song_id) == -1)
|
|
// result.push(song);
|
|
// else
|
|
// appendable.push(song);
|
|
// }
|
|
//
|
|
// let iters;
|
|
// while (appendable.length) {
|
|
// do {
|
|
// iters = 0;
|
|
// const left: PlaylistSong[] = [];
|
|
// for(const song of appendable) {
|
|
// const index = data.findIndex(e => e.song_id === song.song_previous_song_id);
|
|
// if(index == -1) {
|
|
// left.push(song);
|
|
// continue;
|
|
// }
|
|
//
|
|
// result.splice(index + 1, 0, song);
|
|
// iters++;
|
|
// }
|
|
// appendable = left;
|
|
// } while(iters > 0);
|
|
//
|
|
// if(appendable.length)
|
|
// result.push(appendable.pop_front());
|
|
// }
|
|
//
|
|
// return result;
|
|
// }
|
|
//
|
|
// /* playlist stuff */
|
|
// update_playlist() {
|
|
// this.playlist_subscribe(true);
|
|
//
|
|
// this._container_playlist.find(".overlay").toggleClass("hidden", true);
|
|
// const playlist = this._container_playlist.find(".playlist");
|
|
// playlist.empty();
|
|
//
|
|
// if(!this.handle.handle.serverConnection || !this.handle.handle.serverConnection.connected() || !this.currentMusicBot) {
|
|
// this._container_playlist.find(".overlay-empty").removeClass("hidden");
|
|
// return;
|
|
// }
|
|
//
|
|
// const overlay_loading = this._container_playlist.find(".overlay-loading");
|
|
// overlay_loading.removeClass("hidden");
|
|
//
|
|
// this.currentMusicBot.updateClientVariables(true).catch(error => {
|
|
// log.warn(LogCategory.CLIENT, tr("Failed to update music bot variables: %o"), error);
|
|
// }).then(() => {
|
|
// this.handle.handle.serverConnection.command_helper.requestPlaylistSongs(this.currentMusicBot.properties.client_playlist_id, false).then(songs => {
|
|
// this.playlist_subscribe(false); /* we're allowed to see the playlist */
|
|
// if(!songs) {
|
|
// this._container_playlist.find(".overlay-empty").removeClass("hidden");
|
|
// return;
|
|
// }
|
|
//
|
|
// for(const song of this.sort_songs(songs))
|
|
// this.events.fire("playlist_song_add", { song: song, insert_effect: false });
|
|
// }).catch(error => {
|
|
// if(error instanceof CommandResult && error.id === ErrorCode.SERVER_INSUFFICIENT_PERMISSIONS) {
|
|
// this._container_playlist.find(".overlay-no-permissions").removeClass("hidden");
|
|
// return;
|
|
// }
|
|
// log.error(LogCategory.CLIENT, tr("Failed to load bot playlist: %o"), error);
|
|
// this._container_playlist.find(".overlay.overlay-error").removeClass("hidden");
|
|
// }).then(() => {
|
|
// overlay_loading.addClass("hidden");
|
|
// });
|
|
// });
|
|
// }
|
|
//
|
|
// private _playlist_subscribed = false;
|
|
// private playlist_subscribe(unsubscribe: boolean) {
|
|
// if(!this.handle.handle.serverConnection) return;
|
|
//
|
|
// if(unsubscribe || !this.currentMusicBot) {
|
|
// if(!this._playlist_subscribed) return;
|
|
// this._playlist_subscribed = false;
|
|
//
|
|
// this.handle.handle.serverConnection.send_command("playlistsetsubscription", {playlist_id: 0}).catch(error => {
|
|
// log.warn(LogCategory.CLIENT, tr("Failed to unsubscribe from last playlist: %o"), error);
|
|
// });
|
|
// } else {
|
|
// this.handle.handle.serverConnection.send_command("playlistsetsubscription", {
|
|
// playlist_id: this.currentMusicBot.properties.client_playlist_id
|
|
// }).then(() => this._playlist_subscribed = true).catch(error => {
|
|
// log.warn(LogCategory.CLIENT, tr("Failed to subscribe to bots playlist: %o"), error);
|
|
// });
|
|
// }
|
|
// }
|
|
//
|
|
// private build_playlist_entry(data: PlaylistSong, insert_effect: boolean) : JQuery {
|
|
// const tag = $("#tmpl_frame_music_playlist_entry").renderTag();
|
|
// tag.attr({
|
|
// "song-id": data.song_id,
|
|
// "song-url": data.song_url
|
|
// });
|
|
//
|
|
// const thumbnail = tag.find(".container-thumbnail img");
|
|
// const name = tag.find(".name");
|
|
// const description = tag.find(".description");
|
|
// const length = tag.find(".length");
|
|
//
|
|
// tag.find(".button-delete").on('click', () => this.events.fire("action_song_delete", { song_id: data.song_id }));
|
|
// tag.find(".container-thumbnail").on('click', event => {
|
|
// const target = tag.find(".container-thumbnail img");
|
|
// const url = target.attr("x-thumbnail-url");
|
|
// if(!url) return;
|
|
//
|
|
// image_preview.preview_image(decodeURIComponent(url), decodeURIComponent(url));
|
|
// });
|
|
// tag.on('dblclick', event => this.events.fire("action_song_set", { song_id: data.song_id }));
|
|
// name.text(tr("loading..."));
|
|
// description.text(data.song_url);
|
|
//
|
|
// tag.on('mousedown', event => {
|
|
// if(event.button !== 0) return;
|
|
//
|
|
// this.song_reorder.mouse = {
|
|
// x: event.pageX,
|
|
// y: event.pageY
|
|
// };
|
|
//
|
|
// const baseOff = tag.offset();
|
|
// const off = { x: event.pageX - baseOff.left, y: event.pageY - baseOff.top };
|
|
// const move_listener = (event: MouseEvent) => {
|
|
// const distance = Math.pow(event.pageX - this.song_reorder.mouse.x, 2) + Math.pow(event.pageY - this.song_reorder.mouse.y, 2);
|
|
// if(distance < 50) return;
|
|
//
|
|
// document.removeEventListener("blur", up_listener);
|
|
// document.removeEventListener("mouseup", up_listener);
|
|
// document.removeEventListener("mousemove", move_listener);
|
|
//
|
|
// this.song_reorder.mouse = off;
|
|
// this.events.fire("reorder_begin", {
|
|
// entry: tag,
|
|
// song_id: data.song_id
|
|
// });
|
|
// };
|
|
//
|
|
// const up_listener = event => {
|
|
// if(event.type === "mouseup" && event.button !== 0) return;
|
|
//
|
|
// document.removeEventListener("blur", up_listener);
|
|
// document.removeEventListener("mouseup", up_listener);
|
|
// document.removeEventListener("mousemove", move_listener);
|
|
// };
|
|
//
|
|
// document.addEventListener("blur", up_listener);
|
|
// document.addEventListener("mouseup", up_listener);
|
|
// document.addEventListener("mousemove", move_listener);
|
|
// });
|
|
//
|
|
// if(this.currentMusicBot) {
|
|
// this.currentMusicBot.requestPlayerInfo(60 * 1000).then(pdata => {
|
|
// if(pdata.song_id === data.song_id)
|
|
// tag.addClass("current-song");
|
|
// });
|
|
// }
|
|
//
|
|
// if(insert_effect) {
|
|
// tag.removeClass("shown");
|
|
// tag.addClass("animation");
|
|
// }
|
|
// return tag;
|
|
// }
|
|
// }
|