[%jsp3_playlist_name%: $num(%list_index%,1) of %list_total%]

3.4.14 adds some file/folder copy/rename methods.

https://jscript-panel.github.io/docs/changes/

https://github.com/jscript-panel/release/releases/

3.4.13 samples fixes and a new Text Display + Album Art + Seekbar + Buttons

https://github.com/jscript-panel/release/releases

Example:



edit: code for first line

Code: [Select]

[%jsp3_playlist_name%: $num(%list_index%,1) of %list_total%]

%list_index% and %list_total% are fb2k native but not many components outside of playlist viewers can display it. This can. And %jsp3_playlist_name% is obviously exclusive.

DPI = 144;

Here's a random tip for anyone who doesn't know. Most samples are DPI aware and this is read on script init. But you can override it on a per panel basis. The default is 96 but you change it to 120 (125%), 144(150%) or even 192(200%).

Just add this at the top of the script...

Code: [Select]

DPI = 144;

Comparison:

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

Anyone except me can. I don't use RG and would have no idea what button icons could show which mode is active.

// ==PREPROCESSOR==
// @name "Text Display + Album Art + Seekbar + Buttons, added ReplayGain"
// @author "marc2003"
// @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\albumart.js"
// @import "%fb2k_component_path%samples\js\text_display.js"
// @import "%fb2k_component_path%samples\js\seekbar.js"
// ==/PREPROCESSOR==

// https://jscript-panel.github.io/gallery/text-display/

var panel = new _panel({ custom_background : true });
var albumart = new _albumart(0, 0, 0, 0);
var text = new _text_display(LM, 0, 0, 0, true);
var seekbar = new _seekbar(0, 0, 0, 0);

var colours = {
	slider_background : RGB(160, 160, 160),
	white : RGB(255, 255, 255),
	contrast : RGB(196, 30, 35),
};

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

var rg_chars			= ['\uE878', '\uE879', '\uE87B', '\uE87A' ];
var rx					= 0;	// Placeholder for x of dropdown - ReplayGain
var ry					= 0;	// Placeholder for y of dropdown - ReplayGain

var font = CreateFontString("Segoe UI", 12);
var buttons = new _buttons();
var bs = _scale(24);

buttons.update = function () {
	var x = (panel.w - (bs * 9)) / 2
	var y = seekbar.y + _scale(12);
	this.buttons.stop = new _button(x, y, bs, bs, { char : chars.stop, colour: fb.StopAfterCurrent ? colours.contrast : colours.white}, null, function () { fb.Stop(); }, 'Stop');
	this.buttons.previous = new _button(x + bs, y, bs, bs, { char : chars.prev, colour:colours.white }, null, function () { fb.Prev(); }, 'Previous');
	this.buttons.play = new _button(x + (bs * 2), y, bs, bs, { char : !fb.IsPlaying || fb.IsPaused ? chars.play : chars.pause, colour:colours.white}, null, function () { fb.PlayOrPause(); }, !fb.IsPlaying || fb.IsPaused ? 'Play' : 'Pause');
	this.buttons.next = new _button(x + (bs * 3), y, bs, bs, { char : chars.next, colour:colours.white }, null, function () { fb.Next(); }, 'Next');

	rx = x + (bs * 4); 	ry = y + _scale(20);
	this.buttons.replaygain = new _button(x + (bs * 5), y, bs, bs, { char : rg_chars[fb.ReplaygainMode], colour:colours.white}, null, function (x, y, mask) { _rg(rx, ry); }, 'ReplayGain');

	this.buttons.search = new _button(x + (bs * 7), y, bs, bs, { char : chars.search, colour:colours.white }, null, function () { fb.RunMainMenuCommand('Library/Search'); }, 'Library Search');
	this.buttons.preferences = new _button(x + (bs * 8), y, bs, bs, { char : chars.preferences, colour:colours.white}, null, function () { fb.ShowPreferences(); }, 'Preferences');
}

panel.item_focus_change();

function on_colours_changed() {
	panel.colours_changed();
	text.refresh(true);
}

function on_font_changed() {
	panel.font_changed();
	text.refresh(true);
}

function on_item_focus_change() {
	if (panel.selection.value == 0 && fb.IsPlaying) return;
	panel.item_focus_change();
}

function on_metadb_changed(handles, fromhook) {
	if (!fromhook) {
		albumart.metadb_changed();
	}
	text.metadb_changed();
}

function on_mouse_lbtn_dblclk(x, y) {
	if (albumart.img && albumart.containsXY(x, y)) {
		panel.metadb.ShowAlbumArtViewer();
	}
}

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

function on_mouse_lbtn_up(x, y) {
	if (seekbar.lbtn_up(x, y)) {
		return;
	}
	if (buttons.lbtn_up(x, y)) {
		return;
	}
	text.lbtn_up(x, y);
}

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

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

function on_mouse_rbtn_up(x, y) {
	if (buttons.buttons.stop.containsXY(x, y)) {
		fb.StopAfterCurrent = !fb.StopAfterCurrent;
		return true;
	}

	if (buttons.buttons.replaygain.containsXY(x, y)) {
		fb.ReplaygainMode = 1;
		return true;
	}

	return panel.rbtn_up(x, y, text);
}

function on_mouse_wheel(s) {
	if (seekbar.wheel(s)) {
		return;
	}
	text.wheel(s);
}

function on_paint(gr) {
	panel.paint(gr);
	text.paint(gr);
	buttons.paint(gr);

	gr.FillRoundedRectangle(seekbar.x, seekbar.y, seekbar.w, seekbar.h, _scale(2), _scale(2), colours.slider_background);

	if (fb.PlaybackLength > 0) {
		gr.FillEllipse(seekbar.x + seekbar.pos(), seekbar.y + _scale(3), _scale(6), _scale(6), colours.white);

		var time_width = seekbar.x - _scale(12);
		gr.WriteText(tfo.playback_time.Eval(), font, colours.white, 0, seekbar.y - _scale(4), time_width, _scale(12), 1, 2); 
		gr.WriteText(tfo.length.Eval(), font, colours.white, panel.w - seekbar.x, seekbar.y - _scale(4), seekbar.x, _scale(12), 0, 2);
	}
}

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

function on_playback_dynamic_info_track(type) {
	if (type == 0) text.metadb_changed();
	else if (type == 1 && (text.properties.albumart.enabled || text.properties.layout.value > 0)) albumart.metadb_changed();
}

function on_playback_new_track() {
	panel.item_focus_change();
}

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

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

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

function on_playback_stop(reason) {
	if (reason != 2) {
		panel.item_focus_change();
	}

	buttons.update();
	window.Repaint();
}

function on_playback_time() {
	text.playback_time();
}

function on_playlist_items_added() {
	text.refresh();
}

function on_playlist_items_removed() {
	text.refresh();
}

function on_playlist_items_reordered() {
	text.refresh();
}

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

function on_playlist_switch() {
	on_item_focus_change();
}

function on_playlists_changed() {
	text.refresh();
}

function on_size() {
	panel.size();
	text.size();

	seekbar.x = _scale(60);
	seekbar.y = window.Height - _scale(44);
	seekbar.w = window.Width - (seekbar.x * 2) - _scale(12);
	seekbar.h  = _scale(6);

	buttons.update();
}

function on_replaygain_mode_changed(new_mode) {
	buttons.update();
	window.Repaint();
}

function _rg(x, y, flags) {
	var menu = window.CreatePopupMenu();
	var arr = new Array("Disable", "Set to Track", "Set to Album", "Set to Track/Album by playback order");
	var active = -1;
	for (var i = 0; i < arr.length; i++) {
		menu.AppendMenuItem(MF_STRING, i + 1, arr[i]);
		if (arr[i].active) active = i;
	}

	menu.CheckMenuRadioItem(1, arr.length + 1, fb.ReplaygainMode + 1);

	var idx = menu.TrackPopupMenu(x, y);
	menu.Dispose();

	if (idx > 0) {fb.ReplaygainMode = idx - 1; };
}

Cool ! Would it be possible to add a ReplayGain button ?

Quote from: Jacob91 on 2024-03-05 22:37:46

Cool ! Would it be possible to add a ReplayGain button ?

Try this ...

/*
   Mod 2024-03-06 v3
   ------------------
   Optional ReplayGain button (rg_enable):
   ReplayGain   - Dropdown to ReplayGain modes: Disable, Track, Album and Playbackorder

   Choose (mod_version) between two different versions of ReplayGain button behavior
   2= Every mode has different char/icon (all white)
   3= Same as above but Disable mode has same char/icon as Track mode with contrast colour (red)

   Rightclick:
   Stop      - Stop after Current (same as the original script - not modified)
   Previous   - Seek back 10 sec
   Play      - Starts Random track
   Next      - Seek forward 10 sec
   ReplayGain   - Reset to ReplayGain Track mode

   Mousewheel on Art:
   Cycles through Album Art - Cover/Back/CD/Icon/Artist - Resets every trackchange to Cover
*/

function on_playback_dynamic_info_track(type) {
	if (type == 0) {
		text.metadb_changed();
		if (albumart.properties.id.value == 4) {
			albumart.metadb_changed();
		}
	} else if (type == 1) {
		if (albumart.properties.id.value == 0) {
			albumart.metadb_changed();
		}
	}
}

Text display doesn't officially support anything other than front cover art but I guess can you replace the existing on_playback_dynamic_info_track with this....

Code: [Select]

function on_playback_dynamic_info_track(type) {
	if (type == 0) {
		text.metadb_changed();
		if (albumart.properties.id.value == 4) {
			albumart.metadb_changed();
		}
	} else if (type == 1) {
		if (albumart.properties.id.value == 0) {
			albumart.metadb_changed();
		}
	}
}

Now %artist% from streams should be recognised.

When I ignore stuff like the icon thing, it means I don't give a shit. Asking again isn't going to get you anywhere.

I guess I misunderstood the artist/stream thing. I thought you wanted to display local images you had saved with %artist% from radio streams. /shrug