foobar2000 - JScript Panel 3 - Custom Track Buttons (Compact) v2

Custom Track Buttons (Compact) v2.js

// ==PREPROCESSOR==
// @name "Custom Track Buttons (Compact) v2"
// @author "marc2003"
// @author "eurekagliese"
// @import "%fb2k_component_path%helpers.txt"
// @import "%fb2k_component_path%samples\js\lodash.min.js"
// @import "%fb2k_component_path%samples\js\common.js"
// @import "%fb2k_component_path%samples\js\panel.js"
// @import "%fb2k_component_path%samples\js\seekbar.js"
// @import "%fb2k_component_path%samples\js\volume.js"
// ==/PREPROCESSOR==

//favorite
var foo_lastfm_playcount_sync = fb.CheckComponent("foo_lastfm_playcount_sync");
var foo_qsearch = fb.CheckComponent("foo_qsearch");
var foo_queue_viewer = fb.CheckComponent("foo_queue_viewer");
var properties = {
	use_foo_lastfm_playcount_sync: window.GetProperty("Love tracks with foo_lastfm_playcount_sync", false),
	enableDynamicColours: window.GetProperty("TRACK.Enable Dynamic Colours", false), 
	enableDynamicDark: window.GetProperty("TRACK.Enable Dynamic Dark", false), 
	enableCustomColours: window.GetProperty("TRACK.Enable Custom Colours", false), 
	g_colour_background: window.GetProperty("TRACK.COLOUR BACKGROUND NORMAL", false), 
	g_colour_selection: window.GetProperty("TRACK.COLOUR BACKGROUND SELECTED", false), 
	g_colour_text: window.GetProperty("TRACK.COLOUR TEXT NORMAL", false),
	g_colour_button: window.GetProperty("TRACK.COLOUR BUTTON", false),
};

var g_colour_text = 0;
var g_colour_selected_text = 0;
var g_colour_background = 0;
var g_colour_selection = 0;
var g_colour_highlight = 0;
var g_colour_button = 0;
var g_colour_accent1 = 0; 
var g_colour_accent2 = 0; 
var g_colour_accent3 = 0; 

var g_themed = false;
var g_theme = window.CreateThemeManager("LISTVIEW");
var COLOR_WINDOWTEXT = 8;

on_colours_changed();

var seekbar_accent = 0;
var seekbar_bg = 0;
var btn_normal = 0;
var bg_colour = 0;
var title_colour = 0;

// GetColourScheme

var cover_img = null;
var cover_array = [];
on_item_focus_change();

var chars = {
	// material icons round
	play : '\uE037',
	play_circle : '\uE039',
	play2 : '\uE038',
	pause : '\uE034',
	pause_circle : '\uE036',
	pause2 : '\uE036',
	stop : '\uE047',
	next : '\uE044',
	previous : '\uE045',
	shuffle : '\uE043',
	shuffle_tracks : '\uE9E1',
	shuffle_albums : '\ue030',
	shuffle_folders : '\ue617',
	random : '\ue405',
	repeat : '\uE040',
	repeat2 : '\uE041',
	repeat_playlist : '\uE9D6',
	repeat_track : '\uE9D7',
	volume : '\uE04F',
	volume2 : '\uE04E',
	volume3 : '\uE04D', 
	volume4 : '\uE050',
	love1 : '\uE87D',
	love0 : '\uE87E',
	star : '\uE838',
	star2 : '\uE83A',
	queue_add : '\uE03B',
	queue_list : '\uE03D',
	queue_hover : '\uE03D',
	menu : '\uF101',
	preferences : '\uE8B8',
};

var tfo = {
	artist : fb.TitleFormat('%artist%'),
	lfm_loved : fb.TitleFormat('$if2(%lfm_loved%,0)'),
	title : fb.TitleFormat('%title%'),
	date : fb.TitleFormat(('%date%')),
	playback_time : fb.TitleFormat('[%playback_time%]'),
	length : fb.TitleFormat('$if2(%length%,LIVE)'),
};

//favorite
var svg_fav_file = fb.ProfilePath + "images\\favorite_white_24dp.svg";
var svg_fav = utils.LoadSVG(svg_fav_file);
var svg_unfav_file = fb.ProfilePath + "images\\favorite_border_white_24dp.svg";
var svg_unfav = utils.LoadSVG(svg_unfav_file);
var fav = tfo.lfm_loved.Eval();

//original
var panel = new _panel();
var seekbar = new _seekbar(0, 0, 0, 0);
var buttons = new _buttons();
var button_set_idx = 0;
var font1 = 'Segoe Fluent Icons'
var has_font = utils.CheckFont(font1);
var g_img = null;
var bs = _scale(24);
window.MaxHeight = _scale(64);
window.MinHeight = _scale(60);	
on_playback_new_track(fb.GetNowPlaying());

//Segoe Fluent Icons
var button_set = {
	play : [chars.play, '\ue768'],
	pause : [chars.pause, '\ue769'],
	stop : [chars.stop, '\ue71a'],
	next : [chars.next, '\uE893'],
	previous : [chars.previous, '\ue892'],
	//shuffle : [chars.shuffle, '\ue8b1'],
	shuffle : [chars.shuffle, '\ue72A'],
	//shuffle_tracks : [chars.shuffle_tracks, '\uE1CA'],
	shuffle_tracks : [chars.shuffle_tracks, '\ue8b1'],
	shuffle_albums : [chars.shuffle_albums, '\ue93c'],
	shuffle_folders : [chars.shuffle_folders, '\uE8F7'],
	random : [chars.random, '\ue897'],
	repeat : [chars.repeat, '\ue8ee'],
	repeat_playlist : [chars.repeat_playlist, '\ue8ed'],
	repeat_track : [chars.repeat_track, '\ue8ee'],
	volume : [chars.volume, '\uF0EB'],
	volume2 : [chars.volume2, '\uF0EB'],
	volume3 : [chars.volume3, '\uF0EC'],
	volume4 : [chars.volume4, '\uF0ED'],
	queue_add : [chars.queue_add, '\ue710'], 
	queue_list : [chars.queue_list, '\uE700'],
	queue_hover : [chars.queue_hover, '\uE142'],
	menu : [chars.menu, '\uE700'],
	preferences : [chars.preferences, '\uE115'],
	favorite0 : [chars.love0, '\uE006'],
	favorite1 : [chars.love1, '\uE0A5'],
}

if (has_font) {
	button_set_idx = window.GetProperty('2K3.BUTTON.SET', 0);
}

// volume
var volume = new _volume(0, 0, 0,0);

//////////////////////
buttons.update = function () {

	btn_normal = g_colour_button
	btn_accent1 = g_colour_accent1
	btn_accent2 = g_colour_accent2
	btn_accent3 = g_colour_accent3
	var fav = tfo.lfm_loved.Eval();
	var y = Math.round((panel.h - bs) / 2);
	var c = Math.round((panel.w - bs) / 2);

	this.buttons.play = new _button(c, y - 24, bs, bs + bs , {
		char	: !fb.IsPlaying || fb.IsPaused
				? button_set.play[button_set_idx]
				: button_set.pause[button_set_idx],
		colour: btn_normal
		},
		{
		char	: !fb.IsPlaying || fb.IsPaused
				? button_set.play[button_set_idx]
				: button_set.pause[button_set_idx],
		colour	: g_colour_accent1
		},
		function () {
			fb.PlayOrPause();
		},
		!fb.IsPlaying || fb.IsPaused
				? 'Play'
				: 'Pause'
	);

	//shuffle
    this.buttons.shuffle = new _button(c + 100, y - 12, bs, bs + 8 , {
		char	: (plman.PlaybackOrder == 0) ? button_set.shuffle[button_set_idx]
				: (plman.PlaybackOrder == 0) ? button_set.repeat[button_set_idx]
				: (plman.PlaybackOrder == 1) ? button_set.repeat_playlist[button_set_idx]
				: (plman.PlaybackOrder == 2) ? button_set.repeat_track[button_set_idx]
				: (plman.PlaybackOrder == 3) ? button_set.random[button_set_idx]
				: (plman.PlaybackOrder == 4) ? button_set.shuffle_tracks[button_set_idx]
				: (plman.PlaybackOrder == 5) ? button_set.shuffle_albums[button_set_idx]
				: (plman.PlaybackOrder == 6) ? button_set.shuffle_folders[button_set_idx]
				: button_set.shuffle[button_set_idx],
        colour  : btn_normal,
    	}, {
		char	: (plman.PlaybackOrder == 0) ? button_set.shuffle[button_set_idx]
				: (plman.PlaybackOrder == 0) ? button_set.repeat[button_set_idx]
				: (plman.PlaybackOrder == 1) ? button_set.repeat_playlist[button_set_idx]
				: (plman.PlaybackOrder == 2) ? button_set.repeat_track[button_set_idx]
				: (plman.PlaybackOrder == 3) ? button_set.random[button_set_idx]
				: (plman.PlaybackOrder == 4) ? button_set.shuffle_tracks[button_set_idx]
				: (plman.PlaybackOrder == 5) ? button_set.shuffle_albums[button_set_idx]
				: (plman.PlaybackOrder == 6) ? button_set.shuffle_folders[button_set_idx]
				: button_set.shuffle[button_set_idx],
		colour  : g_colour_accent1,
		}, function () {			
			shuffle_switch();
		}, (plman.PlaybackOrder == 0) ? 'Default\nLeft Click: Shuffle cycle\nRight click: Repeat cycle\nMiddle Click: Random'
				: (plman.PlaybackOrder == 1) ? 'Repeat Playlist'
				: (plman.PlaybackOrder == 2) ? 'Repeat Track'
				: (plman.PlaybackOrder == 3) ? 'Random'
				: (plman.PlaybackOrder == 4) ? 'Shuffle Tracks'
				: (plman.PlaybackOrder == 5) ? 'Shuffle Album'
				: (plman.PlaybackOrder == 6) ? 'Shuffle Folder'
				: 'Shuffle\nRight click for Repeat cycle');
	
	//previous
	this.buttons.previous = new _button(c - 50, y - 16, bs, bs + 16 , {
		char: button_set.previous[button_set_idx],
		colour: btn_normal
	}, {
		char: button_set.previous[button_set_idx],
		colour: g_colour_accent1
	}, function () {
		fb.Prev();
	}, 'Previous\nRight Click: Back by 10 seconds');

	//next
	this.buttons.next = new _button(c + 50, y - 16, bs, bs + 16 , {
		char: button_set.next[button_set_idx],
		colour: btn_normal
	}, {
		char: button_set.next[button_set_idx],
		colour: g_colour_accent1
	}, function () {
		fb.Next();
	}, 'Next\nRight Click: Ahead by 10 seconds');
	
	//stop
	this.buttons.stop = new _button(c - 100, y - 16, bs, bs + 16 , {
		char: button_set.stop[button_set_idx],
		colour: fb.StopAfterCurrent
			? RGB(255, 34, 49)
			: btn_normal
	}, {
		char: button_set.stop[button_set_idx],
		colour: g_colour_accent1
	}, function () {
		if (utils.IsKeyPressed(VK_SHIFT)) {
			fb.StopAfterCurrent = !fb.StopAfterCurrent
		} else {
			fb.Stop();	
		}
	}, 'Stop\nRight click: Stop after current');

	//favorite
	if (foo_lastfm_playcount_sync) {
    this.buttons.favorite = new _button(120, y - 12, bs, bs + 8, {
		char    : fav == 1 ? button_set.favorite1[button_set_idx] : button_set.favorite0[button_set_idx],
		colour  : fav == 1 ? RGB(255, 34, 49) : btn_normal
	}, {
		char: button_set.favorite1[button_set_idx],
		colour: RGB(255, 34, 49)
	}, function () {
        // console.log(fav);
        favorite_lastfm();
	}, 'Last.fm loved tracks');
	}

	//Add to queue
	if (foo_queue_viewer) {
	this.buttons.queue = new _button(70, y - 16, bs, bs + 16 , {
		char: button_set.queue_add[button_set_idx],
		colour: btn_normal
	}, {
		char: button_set.queue_add[button_set_idx],
		colour: g_colour_accent1
	}, function () {
		var handleList = plman.GetPlaylistSelectedItems(plman.ActivePlaylist);
		if (handleList && handleList.Count !== 0) {
			handleList.RunContextCommand("Add to playback queue");
		}
	}, 'Add to playback queue\nRight Click: Flush Queue\nMiddle Click: Queue Viewer');
	}
		
		// preferences
	this.buttons.preferences = new _button(20, y - 12, bs, bs + 8 , {
		char: button_set.preferences[button_set_idx],
		colour: btn_normal
	}, {
		char: button_set.preferences[button_set_idx],
		colour: g_colour_accent1
	}, function () {
		fb.ShowPreferences();
		
	}, 'Preferences\nRight Click: Menu\nMiddle Click: Help');

	
	//volume
	this.buttons.volume = new _button(panel.w - LM - (bs * 4), y - 12, bs, bs + 8 , {
		char 	: fb.Volume === -100 ? button_set.volume[button_set_idx] 
				: fb.Volume > -3 ? button_set.volume4[button_set_idx]
				: fb.Volume > -15 ? button_set.volume3[button_set_idx]
				: button_set.volume2[button_set_idx],
		colour: fb.Volume === -100 ? setAlpha(btn_normal, 128) : btn_normal
		}, {
		char 	: fb.Volume === -100 ? button_set.volume[button_set_idx] 
				: fb.Volume > -3 ? button_set.volume4[button_set_idx]
				: fb.Volume > -15 ? button_set.volume3[button_set_idx]
				: button_set.volume2[button_set_idx],
		colour: g_colour_accent1
		}, function () { 
			fb.VolumeMute(); 
		}, 'Mute\nRight click: Output device');


	if (button_set_idx == 1) {
		var font = JSON.stringify({Name:font1, Size:bs - _scale(5)});
		for (i in this.buttons) {
			this.buttons[i].font = font;
		}
	}
}

function favorite_lastfm() {
    if (properties.use_foo_lastfm_playcount_sync) {
        if (foo_lastfm_playcount_sync) {
            var fav = tfo.lfm_loved.Eval();
            var handleList = plman.GetPlaylistSelectedItems(plman.ActivePlaylist);
            handleList.RunContextCommand("Last.fm Playcount Sync/" + (fav == 1 ? "Unlove" : "Love"));
        } else {
            utils.ShowPopupMessage("Last.fm Playcount Sync component is missing")
        }
    }
    buttons.update();
    window.Repaint();
}

function repeat_switch() {
	if (plman.PlaybackOrder < 2) {
		plman.PlaybackOrder += 1;
	}
	else if (plman.PlaybackOrder === 2) {
		plman.PlaybackOrder = 0;
	}
	else {
		plman.PlaybackOrder = 1;
	}	
	window.Repaint();
}

function shuffle_switch() {
	if (plman.PlaybackOrder < 6 && plman.PlaybackOrder > 3) {
		plman.PlaybackOrder += 1;
	}
	else if (plman.PlaybackOrder === 6) {
		plman.PlaybackOrder = 0;
	}
	else {
		plman.PlaybackOrder = 4;
	}
	window.Repaint();
}

function random_switch() {
	if (plman.PlaybackOrder != 3) {
		plman.PlaybackOrder = 3;
	}
	else {
		plman.PlaybackOrder = 0;
	}	
	window.Repaint();
}

function on_mouse_lbtn_down(x, y) {
	seekbar.lbtn_down(x, y);
	//
	volume.lbtn_down(x, y);
}

function on_mouse_lbtn_up(x, y) {
	if (buttons.lbtn_up(x, y)) {
		return;
	}
	if (seekbar.lbtn_up(x, y)) {
		return;
	}
	fb.RunMainMenuCommand('View/Show now playing in playlist');
	
	//volume
	if (volume.lbtn_up(x, y)) {
		return;
	}
}

function on_mouse_leave() {
	buttons.leave();
}

function on_mouse_move(x, y) {
	window.SetCursor(buttons.buttons.volume.containsXY(x, y) ? IDC_HAND
					: buttons.buttons.preferences.containsXY(x, y) ? IDC_HAND
					: foo_queue_viewer && buttons.buttons.queue.containsXY(x, y) ? IDC_HAND
					: buttons.buttons.shuffle.containsXY(x, y) ? IDC_HAND
					: buttons.buttons.next.containsXY(x, y) ? IDC_HAND
					: buttons.buttons.play.containsXY(x, y) ? IDC_HAND
					: buttons.buttons.previous.containsXY(x, y) ? IDC_HAND
					: buttons.buttons.stop.containsXY(x, y) ? IDC_HAND
					: seekbar.move(x, y) ? IDC_HAND
					: volume.move(x, y) ? IDC_HAND
					: IDC_ARROW);

	if (buttons.move(x, y)) {
		return;
	}
	seekbar.move(x, y);

	//volume
	volume.move(x, y);
	
}

function on_mouse_mbtn_up(x,y) {
	
		if (buttons.buttons.shuffle.containsXY(x, y)) {
			random_switch();
			return true;
		}

		if (buttons.buttons.queue.containsXY(x, y)) {
			// fb.RunMainMenuCommand('Playback/Flush playback queue');
			if (foo_queue_viewer) {
			fb.RunMainMenuCommand('View/Queue Viewer');
			return true;
			} else {
				utils.Run('https://www.foobar2000.org/components/view/foo_queue_viewer');
			}
		} 
		
		if (buttons.buttons.preferences.containsXY(x, y)) {
			_help(x,y);
			return true;
		}

	}
	
function on_mouse_rbtn_up(x, y) {
	
	if (foo_lastfm_playcount_sync) {
		if (buttons.buttons.favorite.containsXY(x, y)) {
			fb.RunMainMenuCommand('Library/Last.fm Playcount Sync/Show loved tracks');
			return true;
		}
	}
	
	if (buttons.buttons.shuffle.containsXY(x, y)) {
		repeat_switch();
		return true;
	}

	if (buttons.buttons.previous.containsXY(x, y)) {
		fb.RunMainMenuCommand('Playback/Seek/Back by 10 seconds');
		return true;
	}
	
	if (buttons.buttons.play.containsXY(x, y)) {
		fb.RunMainMenuCommand('Edit/Selection/Sort/Sort by file path');
		return true;
	}

	if (buttons.buttons.next.containsXY(x, y)) {
		fb.RunMainMenuCommand('Playback/Seek/Ahead by 10 seconds');
		return true;
	}
	
	if (buttons.buttons.stop.containsXY(x, y)) {
		fb.StopAfterCurrent = !fb.StopAfterCurrent;
		return true;
	}
	
	if (buttons.buttons.volume.containsXY(x, y)) {
		output();
		return true;
	}
	
	if (foo_queue_viewer && buttons.buttons.queue.containsXY(x, y)) {
		// fb.RunMainMenuCommand('View/Queue Viewer');
		fb.RunMainMenuCommand('Playback/Flush playback queue');
		return true;
	}
	
	if (buttons.buttons.preferences.containsXY(x, y)) {
		_menu(x,y);
		return true;
	}

	var menu = window.CreatePopupMenu();
	var sub = window.CreatePopupMenu();
	// sub.AppendMenuItem(CheckMenuIf(button_set_idx == 0), 1, 'Material Icons Round');
	// sub.AppendMenuItem(GetMenuFlags(has_font, button_set_idx == 1), 2, font1);
	sub.AppendMenuItem(MF_STRING, 1, 'Material Icons Round');
	sub.AppendMenuItem(EnableMenuIf(has_font), 2, font1);
	sub.CheckMenuRadioItem(1, 2, button_set_idx + 1);

	sub.AppendTo(menu, MF_STRING, 'Buttons');
	menu.AppendMenuSeparator();
	
	var colour_flag = EnableMenuIf(properties.enableCustomColours);
	menu.AppendMenuItem(CheckMenuIf(properties.enableDynamicColours), 12, "Enable Dynamic");
	menu.AppendMenuItem(CheckMenuIf(properties.enableDynamicDark), 11, "Enable Dynamic Accent");
	menu.AppendMenuItem(CheckMenuIf(properties.enableCustomColours), 13, "Enable Custom Colour");
	menu.AppendMenuSeparator();
	menu.AppendMenuItem(colour_flag, 14, "Text");
	menu.AppendMenuItem(colour_flag, 15, "Background");
	menu.AppendMenuItem(colour_flag, 16, "Accent");
	menu.AppendMenuItem(colour_flag, 17, "Button");
	menu.AppendMenuSeparator();
	menu.AppendMenuItem(MF_STRING, 19, 'Settings');
	menu.AppendMenuSeparator();
	menu.AppendMenuItem(MF_STRING, 20, 'Configure');

	var idx = menu.TrackPopupMenu(x, y);
	switch (idx ) {
	case 1:
	case 2:
		button_set_idx = idx - 1;
		window.SetProperty('2K3.BUTTON.SET', button_set_idx);
		buttons.update();
		window.Repaint();
		break;
	case 19:
		fb.ShowPreferences();
		break;
		
	case 20:
		window.ShowConfigure();
		break;
		
	case 11:
		properties.enableDynamicDark = !properties.enableDynamicDark;
		window.SetProperty("TRACK.Enable Dynamic Dark", properties.enableDynamicDark);
		on_colours_changed();
		buttons.update();
		window.Repaint();
		break;
		
	case 12:
		properties.enableDynamicColours = !properties.enableDynamicColours;
		window.SetProperty("TRACK.Enable Dynamic Colours", properties.enableDynamicColours);
		on_colours_changed();
		buttons.update();
		window.Repaint();
		break;

	case 13:
		properties.enableCustomColours = !properties.enableCustomColours;
		window.SetProperty("TRACK.Enable Custom Colours", properties.enableCustomColours);
		on_colours_changed();
		buttons.update();
		window.Repaint();
		break;

	case 14:
		g_colour_text = utils.ColourPicker(g_colour_text);
		window.SetProperty("TRACK.COLOUR TEXT NORMAL", g_colour_text);
		on_colours_changed();
		buttons.update();
		window.Repaint();
		break;
	case 15:
		g_colour_background = utils.ColourPicker(g_colour_background);
		window.SetProperty("TRACK.COLOUR BACKGROUND NORMAL", g_colour_background);
		on_colours_changed();
		buttons.update();
		window.Repaint();
		break;
		
	case 16:
		g_colour_selection = utils.ColourPicker(g_colour_selection);
		window.SetProperty("TRACK.COLOUR BACKGROUND SELECTED", g_colour_selection);
		on_colours_changed();
		buttons.update();
		window.Repaint();
		break;
	
	case 17:
		g_colour_button = utils.ColourPicker(g_colour_button);
		window.SetProperty("TRACK.COLOUR BUTTON", g_colour_button);
		on_colours_changed();
		buttons.update();
		window.Repaint();
		break;
	}

	sub.Dispose();
	menu.Dispose();
	return true;
}

function on_mouse_wheel(s) {
	if (seekbar.wheel(s)) {
		return;
	}
	if (s == 1) {
		fb.VolumeUp();
	} else {
		fb.VolumeDown();
	}
	//volume
	volume.wheel(s);
}

function on_paint(gr) {

	seekbar_accent = g_colour_selection
	// seekbar_accent = g_colour_accent1
	// seekbar_accent = g_colour_highlight
	seekbar_bg = setAlpha(seekbar_accent, 80);
	bg_colour = g_colour_background
	title_colour = g_colour_text
	gr.FillRectangle(0, 0, panel.w, panel.h, bg_colour);
	gr.FillRoundedRectangle(seekbar.x, seekbar.y, seekbar.w + _scale(6), seekbar.h, 2, 2, seekbar_bg);
		
	buttons.paint(gr);
	
	if (fb.IsPlaying) {
		if (fb.PlaybackLength > 0) {
			var pos = seekbar.pos();
			gr.FillRoundedRectangle(seekbar.x, seekbar.y, pos, seekbar.h, 4, 4, seekbar_accent);
			gr.FillEllipse(seekbar.x + pos - 6, seekbar.y + 4, _scale(6), _scale(6), title_colour); //knob
			gr.DrawEllipse(seekbar.x + pos - 6, seekbar.y + 4, _scale(6), _scale(6), 1, bg_colour); //knob
		}
	}

	//volume
	gr.FillRoundedRectangle(volume.x, volume.y, volume.w, volume.h, 2, 2, seekbar_bg);
	gr.FillRoundedRectangle(volume.x, volume.y, volume.pos(), volume.h, 2, 2, seekbar_accent);
	
}

function get_colours() {
	if (properties.enableDynamicColours) {
		var arr = GetNowPlayingColours();
		if (arr.length) {
			g_colour_background = arr[0];
			g_colour_text = arr[1];
			g_colour_selection = arr[2];
			g_colour_selected_text = arr[3];
			g_colour_highlight = g_colour_selection;
			g_colour_button = g_colour_text
			g_colour_accent1 = arr[4];
			g_colour_accent2 = arr[5];
			g_colour_accent3 = arr[6];
			g_themed = false;
			return;
		}
	}

	
	if (properties.enableDynamicDark) {
		var arr = GetNowPlayingColours();
		if (arr.length) {
			g_colour_background = window.IsDefaultUI ? window.GetColourDUI(ColourTypeDUI.background) : window.GetColourCUI(ColourTypeCUI.background);
			g_colour_text = window.IsDark ? RGB(255, 255, 255) : RGB(0, 0, 0);
			g_colour_selection = arr[2];
			g_colour_selected_text = arr[3];
			g_colour_highlight = g_colour_selection;
			g_colour_button = g_colour_text
			g_colour_accent1 = arr[4];
			g_colour_accent2 = arr[5];
			g_colour_accent3 = arr[6];
			g_themed = false;
			return;
		}
		else {
			if (window.IsDefaultUI) {
				g_colour_background = window.GetColourDUI(ColourTypeDUI.background);
				g_colour_selection = window.GetColourDUI(ColourTypeDUI.selection);
				g_colour_text = window.GetColourDUI(ColourTypeDUI.text);
				g_colour_selected_text = DetermineTextColour(g_colour_selection);
				g_colour_highlight = window.GetColourDUI(ColourTypeDUI.highlight);
				g_colour_button = window.GetColourDUI(ColourTypeDUI.text);
				g_colour_accent1 = window.GetColourDUI(ColourTypeDUI.highlight);
				g_colour_accent2 = window.GetColourDUI(ColourTypeDUI.highlight);
				g_colour_accent3 = window.GetColourDUI(ColourTypeDUI.highlight);
			} else {
				g_colour_background = window.GetColourCUI(ColourTypeCUI.background);
				g_colour_selection = window.GetColourCUI(ColourTypeCUI.selection_background);
				g_colour_text = window.GetColourCUI(ColourTypeCUI.text);
				g_colour_selected_text = window.GetColourCUI(ColourTypeCUI.selection_text);
				g_colour_highlight = window.GetColourCUI(ColourTypeCUI.text);
				g_colour_button = window.GetColourCUI(ColourTypeCUI.text);
				g_colour_accent1 = window.GetColourCUI(ColourTypeCUI.text);
				g_colour_accent2 = window.GetColourCUI(ColourTypeCUI.text);
				g_colour_accent3 = window.GetColourCUI(ColourTypeCUI.text);
			}
	
			// check g_theme to make sure window.CreateThemeManager didn't return null
			// window.IsThemed is a new boolean property for 3.2.11 and later, undefined for previous versions
			g_themed = g_theme && window.IsThemed; 
			if (g_themed) {
				g_theme.SetPartAndStateID(6, 12);
				g_colour_selected_text = utils.GetSysColour(COLOR_WINDOWTEXT);
			}
		}
	}

	if (properties.enableCustomColours) {
		g_colour_background = window.GetProperty("TRACK.COLOUR BACKGROUND NORMAL", RGB(206, 112, 179));
		g_colour_selection = window.GetProperty("TRACK.COLOUR BACKGROUND SELECTED", RGB(32, 255, 255));
		g_colour_text = window.GetProperty("TRACK.COLOUR TEXT NORMAL", RGB(180, 180, 180));
		g_colour_selected_text = DetermineTextColour(g_colour_selection);
		g_colour_highlight = g_colour_text;
		g_colour_button = window.GetProperty("TRACK.COLOUR BUTTON", RGB(180, 180, 180));
		g_colour_accent1 = g_colour_selection;
		g_colour_accent2 = g_colour_selection;
		g_colour_accent3 = g_colour_selection;
		g_themed = false;
	} else {
		if (window.IsDefaultUI) {
			g_colour_background = window.GetColourDUI(ColourTypeDUI.background);
			g_colour_selection = window.GetColourDUI(ColourTypeDUI.selection);
			g_colour_text = window.GetColourDUI(ColourTypeDUI.text);
			g_colour_selected_text = DetermineTextColour(g_colour_selection);
			g_colour_highlight = window.GetColourDUI(ColourTypeDUI.highlight);
			g_colour_button = window.GetColourDUI(ColourTypeDUI.text);
			g_colour_accent1 = window.GetColourDUI(ColourTypeDUI.highlight);
			g_colour_accent2 = window.GetColourDUI(ColourTypeDUI.highlight);
			g_colour_accent3 = window.GetColourDUI(ColourTypeDUI.highlight);
		} else {
			g_colour_background = window.GetColourCUI(ColourTypeCUI.background);
			g_colour_selection = window.GetColourCUI(ColourTypeCUI.selection_background);
			g_colour_text = window.GetColourCUI(ColourTypeCUI.text);
			g_colour_selected_text = window.GetColourCUI(ColourTypeCUI.selection_text);
			g_colour_highlight = window.GetColourCUI(ColourTypeCUI.text);
			g_colour_button = window.GetColourCUI(ColourTypeCUI.text);
			g_colour_accent1 = window.GetColourCUI(ColourTypeCUI.selection_background); //test
			g_colour_accent2 = window.GetColourCUI(ColourTypeCUI.selection_background);
			g_colour_accent3 = window.GetColourCUI(ColourTypeCUI.selection_background);
		}

		// check g_theme to make sure window.CreateThemeManager didn't return null
		// window.IsThemed is a new boolean property for 3.2.11 and later, undefined for previous versions
		g_themed = g_theme && window.IsThemed; 
		if (g_themed) {
			g_theme.SetPartAndStateID(6, 12);
			g_colour_selected_text = utils.GetSysColour(COLOR_WINDOWTEXT);
		}
	}
}

// testing ground

function on_focus(is_focused) {
	if (!is_focused) {
		if (properties.enableDynamicColours || properties.enableDynamicDark) {
			on_colours_changed();
		}
		buttons.update();
	}
}

function on_get_album_art_done() {
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();
}

function on_playback_follow_cursor_changed() {
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();
}

// Finally
function on_playlist_items_selection_change() {
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();
}

//
function on_playlist_items_added() {
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();
}

function on_playlist_items_removed() {
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();
}

function on_playlist_items_reordered() {
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();
}


////////////
function update_album_art(metadb) {
	
	_dispose(g_img);
	g_img = null;
	if (metadb) {
		g_img = metadb.GetAlbumArt();
	}
	window.Repaint();
}

// GetColourScheme
function on_item_focus_change() {
		
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}

	//focus
	// handle = fb.GetFocusItem();

	window.Repaint();
}

// GetColourScheme
function on_playlist_switch() {
	
	on_item_focus_change();

	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();

}

// this
function on_colours_changed() {
	get_colours(); 
	
	window.Repaint();
}

function on_playback_dynamic_info_track(type) {
		if (properties.enableDynamicColours || properties.enableDynamicDark) {
			on_colours_changed();
		}
	if (type == 0) window.Repaint();
	else update_album_art(fb.GetNowPlaying());
}

function on_playback_edited() {
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();

	window.Repaint();
}

//test..finally
function on_playback_new_track() {
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();
}

function on_playback_new_track(metadb) {
	
	update_album_art(metadb);

	if (properties.enableDynamicColours || properties.enableDynamicDark) {
			on_colours_changed();
		}
		window.Repaint();
}

function on_playback_pause() {
    buttons.update();
	window.Repaint();
}

function on_playback_seek() {
	seekbar.playback_seek();
}

function on_playback_starting() {
	//test
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();
	window.Repaint();
}

function on_playback_stop() {
		if (properties.enableDynamicColours || properties.enableDynamicDark) {
			on_colours_changed();
		}
		buttons.update();
	window.Repaint();
}

function on_playback_time() {
	window.RepaintRect(panel.h, 0, seekbar.x - panel.h, panel.h);
}

function on_playlist_stop_after_current_changed() {
	// on_colours_changed();
	buttons.update();
	window.Repaint();
}

function on_volume_change(val) {
	buttons.update(); //
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	//volume
	volume.volume_change();
	window.Repaint();
}

//finally
function on_playback_order_changed() {
	if (properties.enableDynamicColours || properties.enableDynamicDark) {
		on_colours_changed();
	}
	buttons.update();
	window.Repaint();
}

//output device
function output() {
	var menu = window.CreatePopupMenu();
	var str = fb.GetOutputDevices();
	var arr = JSON.parse(str);
	var active = -1;
	for (var i = 0; i < arr.length; i++) {
		menu.AppendMenuItem(MF_STRING, i + 1, arr[i].name);
		if (arr[i].active) active = i;
	}

	if (active > -1) menu.CheckMenuRadioItem(1, arr.length + 1, active + 1);

	var idx = menu.TrackPopupMenu(outputPopUp, 0);
	menu.Dispose();

	if (idx > 0) fb.RunMainMenuCommand('Playback/Device/' + arr[idx - 1].name);
}

function GetNowPlayingColours() {
	var metadb = fb.GetFocusItem(); 
	// var metadb = fb.GetNowPlaying();
	if (metadb) {
		var img = metadb.GetAlbumArt(AlbumArtId.front, false); // 2nd arg is want_stub - we don't
		if (img) {
			var extracted_colours = img.GetColourScheme(10).toArray().map(function (item) {
				return {
					colour: item,
					luminance: Luminance(item),
				};
			});

			img.Dispose();

			var accent1 = extracted_colours[5].colour;
			var accent2 = extracted_colours[3].colour;
			var accent3 = extracted_colours[4].colour;
			var background_colour = extracted_colours[0].colour;
			var text_colour = DetermineTextColour(background_colour);

			// extreme edge case where image is solid :/
			if (extracted_colours.length == 1) {
				// invert
				var selected_background_colour = text_colour;
				var selected_text_colour = background_colour;
			} else {
				var l = extracted_colours[0].luminance;
				extracted_colours.pop();

				var diff = 0;
				var idx = 0;
				extracted_colours.forEach(function (item, i) {
					var tmp = Math.abs(l - item.luminance);
					if (tmp > diff) {
						diff = tmp;
						idx = i;
					}
				});

				var selected_background_colour = extracted_colours[idx].colour;
				var selected_text_colour = DetermineTextColour(selected_background_colour);
			}
			return [background_colour, text_colour, selected_background_colour, selected_text_colour, accent1,accent2, accent3];
		}
	}
	return [];
	
}

function _button(x, y, w, h, normal, hover, fn, tiptext) {
	this.paint = function (gr) {
		if (this.current) {
			gr.WriteText(this.current.char, this.font, this.current.colour, this.x, this.y, this.w, this.h, 2, 2);
		}
	}

	this.containsXY = function (x, y) {
		return x > this.x && x < this.x + this.w && y > this.y && y < this.y + this.h;
	}

	this.lbtn_up = function (x, y, mask) {
		if (this.fn) {
			this.fn(x, y, mask);
		}
	}

	this.cs = function (s) {
		if (s == 'hover') {
			this.current = this.hover;
			_tt(this.tiptext);
		} else {
			this.current = this.normal;
		}
		window.RepaintRect(this.x, this.y, this.w, this.h);
	}

	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;
	this.fn = fn;
	this.tiptext = tiptext;
	this.normal = normal;
	this.hover = hover || normal;
	this.current = normal;
	this.font = JSON.stringify({Name:'Material Icons Round',Size:this.h - _scale(10)});
}

function on_size() {
	panel.size();

	var bar_h = _scale(4);
	seekbar.x = 72;
	seekbar.y = panel.h - 20;
	seekbar.w = panel.w - 185;
	seekbar.h = _scale(5);
	
	//volume
	volume.x = panel.w - 100;
	volume.y = panel.h / 2 - 12
	volume.w = 90;
	volume.h = 8;
	//output
	outputPopUp = panel.w
	//stop
	svg_stop_x = panel.w/2 -150
	svg_stop_y = 12;
	svg_stop_h = 32
	svg_stop_w = 32
	//btn_volume	
	btn_volume_x = panel.w - LM - (bs * 4) - 2
	btn_volume_y = Math.round((panel.h - bs) / 2)
	btn_volume_w = 28
	btn_volume_h = 28
	//flag
	svg_flag_x = 190
	svg_flag_y = Math.round((panel.h - bs) / 2)  + 4
	//fav
	svg_fav_x = 120
	svg_fav_y = Math.round((panel.h - bs) / 2) + 4
	svg_fav_w = 24
	svg_fav_h = 24
	// artist
	artist_x = panel.h + 10
	artist_y = 28
	artist_w = panel.h * 0.9
	artist_h = seekbar.x - panel.h - _scale(60)
	// artist
	title_x = panel.h + 10
	title_y = 2
	title_w = panel.w / 4
	title_h = panel.h * 0.3

	buttons.update();
}