[chrome-ext/music-player-client.git] / main.js

// Written by Mike Frysinger <vapier@gmail.com>.  Released into the public domain.  Suck it.

/* Globals to allow easy manipulation via javascript console */
var mpc;
var tcpclient;
var refresh_id = NaN;

function TcpClientSender(tcpclient) {
	this.tcpclient = tcpclient;
}
TcpClientSender.prototype.send = function(data, cb) {
	this.tcpclient.sendMessage(data, cb);
}
TcpClientSender.prototype.poll = function() {
	this.tcpclient.poll();
}

function tramp_mpc_recv(data) {
	mpc.recv(data);
}

function sync_storage(sync) {
	return sync ? chrome.storage.sync : chrome.storage.local;
}

window.onload = function() {
	var local_keys = [
		'sync',
	];
	var sync_keys = [
		'host', 'port', 'refresh',
	];
	var options = {
		'host': '192.168.0.2',
		'port': 6600,
		'sync': true,
		'refresh': 5,
	};

	chrome.storage.local.get(local_keys, function(settings) {
		local_keys.forEach(function(key) {
			if (key in settings)
				options[key] = settings[key]
		});

		var storage = sync_storage(options['sync']);
		storage.get(sync_keys, function(settings) {
			sync_keys.forEach(function(key) {
				if (key in settings)
					options[key] = settings[key];
			});

			init_ui(local_keys, sync_keys, options);
			mpc_connect();
		});
	});
};

window.onkeypress = function(e) {
	switch (e.keyCode) {
	case 49: // 1
		show_page('controls');
		break;
	case 50: // 1
		show_page('metadata');
		break;
	case 51: // 1
		show_page('playlist');
		break;
	case 52: // 1
		show_page('options');
		break;
	}
};

function mpc_refresh() {
	mpc.status();
}

function mpc_connect(host, port) {
	if (typeof(host) != 'string') {
		host = window['opts_host'].value;
		port = parseInt(window['opts_port'].value);
	}

	if (mpc != undefined) {
		console.log('disconnecting');
		update_ui('disconnect');
		delete mpc;
		tcpclient.disconnect();
		delete tcpclient;
	}

	update_ui('init');
	tcpclient = new TcpClient(host, port);
	tcpclient.connect(function() {
		var mpc_sender = new TcpClientSender(tcpclient);
		tcpclient.addResponseListener(tramp_mpc_recv);
		mpc = new Mpc(mpc_sender, update_ui);
		console.log('connected to ' + host + ':' + port);
		console.log('protip: use the "mpc" object to poke mpd directly.\n' +
		            'you can also do mpc.set_debug(3) to see traffic');
		mpc_refresh();
		update_refresh_timer();
	});
}

function tramp_mpc_consume() {
	var val = zo(!getToggleButton(this));
	mpc.consume(val);
	setToggleButton(this, val);
}
function tramp_mpc_deleteid() { mpc.deleteid(this.title); }
function tramp_mpc_next() { mpc.next(); }
function tramp_mpc_pause() { mpc.pause(); }
function tramp_mpc_play() { mpc.play(); }
function tramp_mpc_previous() { mpc.previous(); }
function tramp_mpc_random() {
	var val = zo(!getToggleButton(this));
	mpc.random(val);
	setToggleButton(this, val);
}
function tramp_mpc_repeat() {
	var val = zo(!getToggleButton(this));
	mpc.repeat(val);
	setToggleButton(this, val);
}
function tramp_mpc_seekcur() { mpc.seekcur(this.value); }
function tramp_mpc_setvol() { mpc.setvol(this.value); }
function tramp_mpc_single() {
	var val = zo(!getToggleButton(this));
	mpc.single(val);
	setToggleButton(this, val);
}
function tramp_mpc_stop() { mpc.stop(); }

function zo(val) {
	return val ? 1 : 0;
}
function szo(val) {
	return val == '0' ? 0 : 1;
}
function getToggleButton(btn) {
	return btn.style.borderStyle == 'inset';
}
function setToggleButton(btn, val) {
	if (val === undefined)
		val = !getToggleButton(btn);
	btn.style.borderStyle = val ? 'inset' : '';
}

function show_page(page) {
	if (typeof(page) != 'string')
		page = this.id.split('.')[1];

	switch (page) {
	case 'playlist':
		mpc.playlistinfo();
		// Fallthrough.
	case 'metadata':
		mpc.currentsong();
		break;
	}

	var eles = document.getElementsByClassName('main');
	for (var i = 0; i < eles.length; ++i) {
		var ele = eles[i];
		var dis = 'none';
		var cls = '';
		if (ele.id == 'main.' + page) {
			dis = '';
			cls = 'selected';
		}
		ele.style.display = dis;
		document.getElementById('tab.' + ele.id.split('.')[1]).className = cls;
	}
}

function do_refresh() {
	mpc_refresh();
	refresh_id = window.setTimeout(do_refresh, window['opts_refresh'].value * 1000);
}

function update_refresh_timer() {
	if (!isNaN(refresh_id))
		window.clearTimeout(refresh_id);
	var rate = window['opts_refresh'].value * 1000;
	if (rate > 0)
		refresh_id = window.setTimeout(do_refresh, rate);
}

function update_local_settings() {
	var setting = {};
	setting[this.id] = this.checked;
	chrome.storage.local.set(setting);
}

function update_sync_settings() {
	var setting = {};
	setting[this.id] = this.value;
	var storage = sync_storage(window['opts_sync'].checked);
	storage.set(setting);

	switch (this.id) {
	case 'refresh':
		update_refresh_timer();
		break;
	}
}

function init_ui(local_keys, sync_keys, options) {
	var ele, i;

	/* Setup footer */
	i = 1;
	[
		'controls', 'metadata', 'playlist', 'options',
	].forEach(function(id) {
		var ele = document.getElementById('tab.' + id);
		ele.onclick = show_page;
		ele.title = id + ' [' + i + ']';
		++i;
	});

	/* Setup control tab */
	ui_mpc_status = document.getElementById('status');
	[
		'consume', 'next', 'pause', 'play', 'previous', 'random', 'repeat',
		'seekcur', 'setvol', 'single', 'stop',
	].forEach(function(id) {
		var ele = window['ui_mpc_' + id] = document.getElementById(id);
		ele.onchange = ele.onclick = window['tramp_mpc_' + id];
		ele.title = id;
		if (ele.accessKey)
			ele.title += ' [' + ele.accessKey + ']'
	});
	window['ui_mpc_currtime'] = document.getElementById('currtime');

	/* Setup metadata tab */
	[
		'album', 'artist', 'date', 'file', 'title',
	].forEach(function(id) {
		window['ui_mpc_metadata_' + id] = document.getElementById('metadata.' + id);
	});

	/* Setup playlist tab */
	window['ui_mpc_playlist'] = document.getElementById('playlist');

	/* Setup options tab */
	document.getElementById('connect').onclick = mpc_connect;
	local_keys.forEach(function(id) {
		var ele = window['opts_' + id] = document.getElementById(id);
		ele.checked = options[id];
		ele.onchange = update_local_settings;
	});
	sync_keys.forEach(function(id) {
		var ele = window['opts_' + id] = document.getElementById(id);
		ele.value = options[id];
		ele.oninput = update_sync_settings;
	});
}

function pretty_time(time) {
	var sec, min, hrs, ret = '';
	time = parseInt(time);
	sec = time % 60;
	min = parseInt((time / 60) % 60);
	hrs = parseInt((time / 3600) % 3600);
	if (hrs)
		ret = hrs + ':' + ("00" + min).substr(-2) + ':';
	else
		ret = min + ':';
	return ret + ("00" + sec).substr(-2);
}

function playlist_del() {
	mpc.deleteid(this.song_id);
	this.parentNode.remove();
}

function playlist_play() {
	mpc.playid(this.song_id);
	this.parentNode.style.fontWeight = 'bold';
}

function update_ui(state, cmd) {
	if (typeof(state) == 'string') {
		ui_mpc_status.innerText = ({
			'disconnect': 'Disconnecting...',
			'init': 'Connecting...',
		})[state];
		return;
	}

	if (Array.isArray(state)) {
		/*
		switch (cmd[0]) {
		case 'setvol':
		case 'seekcur':
			break;
		default:
			mpc_refresh();
		}
		*/
		return;
	}

	/* Update the metadata tab. */
	var currentsong = {};
	if ('Currentsong' in state)
		currentsong = state.Currentsong;
	ui_mpc_metadata_album.innerText = currentsong.Album;
	ui_mpc_metadata_artist.innerText = currentsong.Artist;
	ui_mpc_metadata_title.innerText = currentsong.Title;
	ui_mpc_metadata_date.innerText = currentsong.Date;
	ui_mpc_metadata_file.innerText = currentsong.file;

	/* Update the playlist tab. */
	var playlist = [];
	if ('Playlist' in state)
		playlist = state.Playlist;
	ui_mpc_playlist.innerHTML = '';
	playlist.forEach(function(song) {
		var cell, row = ui_mpc_playlist.insertRow(-1);
		if (song.Pos == currentsong.Pos)
			row.style.fontWeight = 'bold';

		cell = row.insertCell(-1);
		cell.id = 'playlist_del';
		cell.innerHTML = '&#164;';
		cell.song_id = song.Id;
		cell.title = 'delete';
		cell.onclick = playlist_del;

		cell = row.insertCell(-1);
		cell.innerText = song.Pos;
		cell.style.textAlign = 'right';
		cell.song_id = song.Id;
		cell.title = 'play';
		cell.onclick = playlist_play;

		if ('Artist' in song) {
			row.insertCell(-1).innerText = song.Artist;
			row.insertCell(-1).innerText = song.Album;
			row.insertCell(-1).innerText = song.Title;
		} else {
			cell = row.insertCell(-1);
			cell.innerText = song.file;
			cell.colSpan = 3;
		}
		row.insertCell(-1).innerText = pretty_time(song.Time);
	});

	/* Update the status tab. */
	var time;
	if ('time' in state)
		// When stopped, there is no time field at all.
		time = state.time.split(':');
	else
		time = [0, 0];
	ui_mpc_seekcur.max = time[1];
	ui_mpc_seekcur.value = time[0];
	percent = Math.floor((0.0 + time[0]) * 100 / (0.0 + time[1]));
	ui_mpc_seekcur.title = 'seekcur (' + percent + '%)';
	ui_mpc_currtime.innerText = [pretty_time(time[0]), pretty_time(time[1]), percent + '%'].join(' / ');

	ui_mpc_setvol.value = state.volume;
	ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';

	[
		'consume', 'random', 'repeat', 'single',
	].forEach(function(id) {
		setToggleButton(window['ui_mpc_' + id], szo(state[id]));
	});

	ui_mpc_status.innerText = ({
		'play': 'Playing',
		'pause': 'Paused',
		'stop': 'Stopped',
	})[state.state];
}
Commit	Line	Data
	1	// Written by Mike Frysinger <vapier@gmail.com>. Released into the public domain. Suck it.
	2
	3	/* Globals to allow easy manipulation via javascript console */
	4	var mpc;
	5	var tcpclient;
	6	var refresh_id = NaN;
	7
	8	function TcpClientSender(tcpclient) {
	9	this.tcpclient = tcpclient;
	10	}
	11	TcpClientSender.prototype.send = function(data, cb) {
	12	this.tcpclient.sendMessage(data, cb);
	13	}
	14	TcpClientSender.prototype.poll = function() {
	15	this.tcpclient.poll();
	16	}
	17
	18	function tramp_mpc_recv(data) {
	19	mpc.recv(data);
	20	}
	21
	22	function sync_storage(sync) {
	23	return sync ? chrome.storage.sync : chrome.storage.local;
	24	}
	25
	26	window.onload = function() {
	27	var local_keys = [
	28	'sync',
	29	];
	30	var sync_keys = [
	31	'host', 'port', 'refresh',
	32	];
	33	var options = {
	34	'host': '192.168.0.2',
	35	'port': 6600,
	36	'sync': true,
	37	'refresh': 5,
	38	};
	39
	40	chrome.storage.local.get(local_keys, function(settings) {
	41	local_keys.forEach(function(key) {
	42	if (key in settings)
	43	options[key] = settings[key]
	44	});
	45
	46	var storage = sync_storage(options['sync']);
	47	storage.get(sync_keys, function(settings) {
	48	sync_keys.forEach(function(key) {
	49	if (key in settings)
	50	options[key] = settings[key];
	51	});
	52
	53	init_ui(local_keys, sync_keys, options);
	54	mpc_connect();
	55	});
	56	});
	57	};
	58
	59	window.onkeypress = function(e) {
	60	switch (e.keyCode) {
	61	case 49: // 1
	62	show_page('controls');
	63	break;
	64	case 50: // 1
	65	show_page('metadata');
	66	break;
	67	case 51: // 1
	68	show_page('playlist');
	69	break;
	70	case 52: // 1
	71	show_page('options');
	72	break;
	73	}
	74	};
	75
	76	function mpc_refresh() {
	77	mpc.status();
	78	}
	79
	80	function mpc_connect(host, port) {
	81	if (typeof(host) != 'string') {
	82	host = window['opts_host'].value;
	83	port = parseInt(window['opts_port'].value);
	84	}
	85
	86	if (mpc != undefined) {
	87	console.log('disconnecting');
	88	update_ui('disconnect');
	89	delete mpc;
	90	tcpclient.disconnect();
	91	delete tcpclient;
	92	}
	93
	94	update_ui('init');
	95	tcpclient = new TcpClient(host, port);
	96	tcpclient.connect(function() {
	97	var mpc_sender = new TcpClientSender(tcpclient);
	98	tcpclient.addResponseListener(tramp_mpc_recv);
	99	mpc = new Mpc(mpc_sender, update_ui);
	100	console.log('connected to ' + host + ':' + port);
	101	console.log('protip: use the "mpc" object to poke mpd directly.\n' +
	102	'you can also do mpc.set_debug(3) to see traffic');
	103	mpc_refresh();
	104	update_refresh_timer();
	105	});
	106	}
	107
	108	function tramp_mpc_consume() {
	109	var val = zo(!getToggleButton(this));
	110	mpc.consume(val);
	111	setToggleButton(this, val);
	112	}
	113	function tramp_mpc_deleteid() { mpc.deleteid(this.title); }
	114	function tramp_mpc_next() { mpc.next(); }
	115	function tramp_mpc_pause() { mpc.pause(); }
	116	function tramp_mpc_play() { mpc.play(); }
	117	function tramp_mpc_previous() { mpc.previous(); }
	118	function tramp_mpc_random() {
	119	var val = zo(!getToggleButton(this));
	120	mpc.random(val);
	121	setToggleButton(this, val);
	122	}
	123	function tramp_mpc_repeat() {
	124	var val = zo(!getToggleButton(this));
	125	mpc.repeat(val);
	126	setToggleButton(this, val);
	127	}
	128	function tramp_mpc_seekcur() { mpc.seekcur(this.value); }
	129	function tramp_mpc_setvol() { mpc.setvol(this.value); }
	130	function tramp_mpc_single() {
	131	var val = zo(!getToggleButton(this));
	132	mpc.single(val);
	133	setToggleButton(this, val);
	134	}
	135	function tramp_mpc_stop() { mpc.stop(); }
	136
	137	function zo(val) {
	138	return val ? 1 : 0;
	139	}
	140	function szo(val) {
	141	return val == '0' ? 0 : 1;
	142	}
	143	function getToggleButton(btn) {
	144	return btn.style.borderStyle == 'inset';
	145	}
	146	function setToggleButton(btn, val) {
	147	if (val === undefined)
	148	val = !getToggleButton(btn);
	149	btn.style.borderStyle = val ? 'inset' : '';
	150	}
	151
	152	function show_page(page) {
	153	if (typeof(page) != 'string')
	154	page = this.id.split('.')[1];
	155
	156	switch (page) {
	157	case 'playlist':
	158	mpc.playlistinfo();
	159	// Fallthrough.
	160	case 'metadata':
	161	mpc.currentsong();
	162	break;
	163	}
	164
	165	var eles = document.getElementsByClassName('main');
	166	for (var i = 0; i < eles.length; ++i) {
	167	var ele = eles[i];
	168	var dis = 'none';
	169	var cls = '';
	170	if (ele.id == 'main.' + page) {
	171	dis = '';
	172	cls = 'selected';
	173	}
	174	ele.style.display = dis;
	175	document.getElementById('tab.' + ele.id.split('.')[1]).className = cls;
	176	}
	177	}
	178
	179	function do_refresh() {
	180	mpc_refresh();
	181	refresh_id = window.setTimeout(do_refresh, window['opts_refresh'].value * 1000);
	182	}
	183
	184	function update_refresh_timer() {
	185	if (!isNaN(refresh_id))
	186	window.clearTimeout(refresh_id);
	187	var rate = window['opts_refresh'].value * 1000;
	188	if (rate > 0)
	189	refresh_id = window.setTimeout(do_refresh, rate);
	190	}
	191
	192	function update_local_settings() {
	193	var setting = {};
	194	setting[this.id] = this.checked;
	195	chrome.storage.local.set(setting);
	196	}
	197
	198	function update_sync_settings() {
	199	var setting = {};
	200	setting[this.id] = this.value;
	201	var storage = sync_storage(window['opts_sync'].checked);
	202	storage.set(setting);
	203
	204	switch (this.id) {
	205	case 'refresh':
	206	update_refresh_timer();
	207	break;
	208	}
	209	}
	210
	211	function init_ui(local_keys, sync_keys, options) {
	212	var ele, i;
	213
	214	/* Setup footer */
	215	i = 1;
	216	[
	217	'controls', 'metadata', 'playlist', 'options',
	218	].forEach(function(id) {
	219	var ele = document.getElementById('tab.' + id);
	220	ele.onclick = show_page;
	221	ele.title = id + ' [' + i + ']';
	222	++i;
	223	});
	224
	225	/* Setup control tab */
	226	ui_mpc_status = document.getElementById('status');
	227	[
	228	'consume', 'next', 'pause', 'play', 'previous', 'random', 'repeat',
	229	'seekcur', 'setvol', 'single', 'stop',
	230	].forEach(function(id) {
	231	var ele = window['ui_mpc_' + id] = document.getElementById(id);
	232	ele.onchange = ele.onclick = window['tramp_mpc_' + id];
	233	ele.title = id;
	234	if (ele.accessKey)
	235	ele.title += ' [' + ele.accessKey + ']'
	236	});
	237	window['ui_mpc_currtime'] = document.getElementById('currtime');
	238
	239	/* Setup metadata tab */
	240	[
	241	'album', 'artist', 'date', 'file', 'title',
	242	].forEach(function(id) {
	243	window['ui_mpc_metadata_' + id] = document.getElementById('metadata.' + id);
	244	});
	245
	246	/* Setup playlist tab */
	247	window['ui_mpc_playlist'] = document.getElementById('playlist');
	248
	249	/* Setup options tab */
	250	document.getElementById('connect').onclick = mpc_connect;
	251	local_keys.forEach(function(id) {
	252	var ele = window['opts_' + id] = document.getElementById(id);
	253	ele.checked = options[id];
	254	ele.onchange = update_local_settings;
	255	});
	256	sync_keys.forEach(function(id) {
	257	var ele = window['opts_' + id] = document.getElementById(id);
	258	ele.value = options[id];
	259	ele.oninput = update_sync_settings;
	260	});
	261	}
	262
	263	function pretty_time(time) {
	264	var sec, min, hrs, ret = '';
	265	time = parseInt(time);
	266	sec = time % 60;
	267	min = parseInt((time / 60) % 60);
	268	hrs = parseInt((time / 3600) % 3600);
	269	if (hrs)
	270	ret = hrs + ':' + ("00" + min).substr(-2) + ':';
	271	else
	272	ret = min + ':';
	273	return ret + ("00" + sec).substr(-2);
	274	}
	275
	276	function playlist_del() {
	277	mpc.deleteid(this.song_id);
	278	this.parentNode.remove();
	279	}
	280
	281	function playlist_play() {
	282	mpc.playid(this.song_id);
	283	this.parentNode.style.fontWeight = 'bold';
	284	}
	285
	286	function update_ui(state, cmd) {
	287	if (typeof(state) == 'string') {
	288	ui_mpc_status.innerText = ({
	289	'disconnect': 'Disconnecting...',
	290	'init': 'Connecting...',
	291	})[state];
	292	return;
	293	}
	294
	295	if (Array.isArray(state)) {
	296	/*
	297	switch (cmd[0]) {
	298	case 'setvol':
	299	case 'seekcur':
	300	break;
	301	default:
	302	mpc_refresh();
	303	}
	304	*/
	305	return;
	306	}
	307
	308	/* Update the metadata tab. */
	309	var currentsong = {};
	310	if ('Currentsong' in state)
	311	currentsong = state.Currentsong;
	312	ui_mpc_metadata_album.innerText = currentsong.Album;
	313	ui_mpc_metadata_artist.innerText = currentsong.Artist;
	314	ui_mpc_metadata_title.innerText = currentsong.Title;
	315	ui_mpc_metadata_date.innerText = currentsong.Date;
	316	ui_mpc_metadata_file.innerText = currentsong.file;
	317
	318	/* Update the playlist tab. */
	319	var playlist = [];
	320	if ('Playlist' in state)
	321	playlist = state.Playlist;
	322	ui_mpc_playlist.innerHTML = '';
	323	playlist.forEach(function(song) {
	324	var cell, row = ui_mpc_playlist.insertRow(-1);
	325	if (song.Pos == currentsong.Pos)
	326	row.style.fontWeight = 'bold';
	327
	328	cell = row.insertCell(-1);
	329	cell.id = 'playlist_del';
	330	cell.innerHTML = '¤';
	331	cell.song_id = song.Id;
	332	cell.title = 'delete';
	333	cell.onclick = playlist_del;
	334
	335	cell = row.insertCell(-1);
	336	cell.innerText = song.Pos;
	337	cell.style.textAlign = 'right';
	338	cell.song_id = song.Id;
	339	cell.title = 'play';
	340	cell.onclick = playlist_play;
	341
	342	if ('Artist' in song) {
	343	row.insertCell(-1).innerText = song.Artist;
	344	row.insertCell(-1).innerText = song.Album;
	345	row.insertCell(-1).innerText = song.Title;
	346	} else {
	347	cell = row.insertCell(-1);
	348	cell.innerText = song.file;
	349	cell.colSpan = 3;
	350	}
	351	row.insertCell(-1).innerText = pretty_time(song.Time);
	352	});
	353
	354	/* Update the status tab. */
	355	var time;
	356	if ('time' in state)
	357	// When stopped, there is no time field at all.
	358	time = state.time.split(':');
	359	else
	360	time = [0, 0];
	361	ui_mpc_seekcur.max = time[1];
	362	ui_mpc_seekcur.value = time[0];
	363	percent = Math.floor((0.0 + time[0]) * 100 / (0.0 + time[1]));
	364	ui_mpc_seekcur.title = 'seekcur (' + percent + '%)';
	365	ui_mpc_currtime.innerText = [pretty_time(time[0]), pretty_time(time[1]), percent + '%'].join(' / ');
	366
	367	ui_mpc_setvol.value = state.volume;
	368	ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';
	369
	370	[
	371	'consume', 'random', 'repeat', 'single',
	372	].forEach(function(id) {
	373	setToggleButton(window['ui_mpc_' + id], szo(state[id]));
	374	});
	375
	376	ui_mpc_status.innerText = ({
	377	'play': 'Playing',
	378	'pause': 'Paused',
	379	'stop': 'Stopped',
	380	})[state.state];
	381	}