{% extends 'base.html' %} {% block scripts %}
<script>
	var volume = {{ volume|default(0.85) }};

	// Ensure global socket exists
	if (typeof window.socket === 'undefined') {
		window.socket = io({ path: window.pikaraokeConfig.socketioPath });
	}

	function loadNowPlaying() {
		console.log("Loading now playing data");
		$.get('{{ url_for("now_playing.now_playing") }}', function (data) {
			handleNowPlaying(JSON.parse(data));
		});
	}

	function handleNowPlaying(np) {
		console.log(np);
		if (np.now_playing) {
			var nowPlayingHtml = `<p style="margin-bottom: 5px">${np.now_playing}</p>
          <p class="has-text-success" style="margin-bottom: 5px"><i class="icon icon-mic-1" title="Current singer"></i>${np.now_playing_user}</p>`;

			if (np.now_playing_transpose != 0) {
				nowPlayingHtml +=
					// {# MSG: Label for display of how many semitones the song has been shifted. #}
					"<span class='is-size-6 has-text-success'><b>Key</b>: " +
					getSemitonesLabel(np.now_playing_transpose) +
					"<span>";
			}

			$("#now-playing").html(nowPlayingHtml);
			$(".control-box").show();
		} else {
			// {# MSG: Message which shows in the "Now Playing" section when there is no song currently playing #}
			$("#now-playing").html({{ _('Nothing is playing right now.') | tojson }});
			$(".control-box").hide();
		}

		if (np.up_next) {
			$("#up-next").html(`<p style="margin-bottom: 5px">${np.up_next}</p>
          <p class="has-text-success">
            {# MSG: Title text for the icon marking the next person to sing. #}
            <i class="icon icon-mic-1" title="{{ _('Next singer') | forceescape }}"></i>${np.next_user}</p>`);
		} else {
			// {# MSG: Alternative text for the "Up next" section if no more songs are queued up. #}
			$("#up-next").html({{ _('No song is queued.') | tojson }});
		}

		if (np.now_playing_transpose != 0) {
			$("#transpose").val(np.now_playing_transpose);
			$("#semitones-label").html(getSemitonesLabel(np.now_playing_transpose));
		} else {
			$("#transpose").val(0);
			$("#semitones-label").html(getSemitonesLabel(np.now_playing_transpose));
		}

		// set the volume slider to the current volume
		if (np.volume != volume) {
			volume = np.volume;
			console.log("setting volume to " + volume);
			$("#volume-slider").val(volume);
		}

		if (np.is_paused) {
			$("#pause-resume").removeClass("icon-pause");
			$("#pause-resume").addClass("icon-play");
			$(".playing_gif").attr("src", "{{  url_for('static', filename='images/now-playing.png') }}");
		} else {
			$("#pause-resume").removeClass("icon-play");
			$("#pause-resume").addClass("icon-pause");
			$(".playing_gif").attr("src", "{{  url_for('static', filename='images/now-playing.gif') }}");
		}
	}

	$(function () {
		$(".control-box").hide();

		var slider = document.getElementById("transpose");
		var output = document.getElementById("semitones-label");
		if (slider && output) {
			output.innerHTML = getSemitonesLabel(slider.value);
			// Update the current slider value (each time you drag the slider handle)
			slider.oninput = function () {
				output.innerHTML = getSemitonesLabel(slider.value);
			};
		}

		$("#volume-slider").on(
			"input",
			debounce(function (event) {
				const value = this.value;
				$.post(window.pikaraokeConfig.basePath + "/volume/" + value);
			}, 500)
		);

		$("#submit-transpose").click(function () {
			var value;
			if (slider) {
				value = slider.value;
			} else {
				value = 0;
			}
			r = confirm(window.translations.confirmTranspose.replace("{label}", getSemitonesLabel(value)));
			if (r) {
				$.post(window.pikaraokeConfig.basePath + "/transpose/" + value);
			}
			slider.value = 0;
			output.innerHTML = getSemitonesLabel(slider.value);
		});

		$("#pause-resume").click(function () {
			$.post(window.pikaraokeConfig.basePath + "/pause");
			togglePausePlayButton();
		});

		$("#vol-up").click(function () {
			$.post(window.pikaraokeConfig.basePath + "/vol_up");
		});

		$("#vol-down").click(function () {
			$.post(window.pikaraokeConfig.basePath + "/vol_down");
		});

		$("#restart").click(function () {
			r = confirm(window.translations.confirmRestartTrack);
			if (r) {
				$.post(window.pikaraokeConfig.basePath + "/restart");
			}
		});

		$("#skip").click(function () {
			r = confirm(
				// {# MSG: Confirmation message when clicking a button to skip a track. #}
				{{ _("Are you sure you want to skip this track? If you didn't add this song, ask permission first!") | tojson }}
			);
			if (r) {
				$.post(window.pikaraokeConfig.basePath + "/skip");
			}
		});

		$("#semitones-info").click(function () {
			showNotification(
				window.translations.semitonesInfo,
				"is-info",
				10000
			);
		});

		function togglePausePlayButton() {
			if ($("#pause-resume").hasClass("icon-pause")) {
				$("#pause-resume").removeClass("icon-pause");
				$("#pause-resume").addClass("icon-play");
			} else {
				$("#pause-resume").removeClass("icon-play");
				$("#pause-resume").addClass("icon-pause");
			}
		}

		//for first time load of splash screen
		loadNowPlaying();
		//for pushed updates to now playing state
		window.socket.on("now_playing", (np) => handleNowPlaying(np));

		document.addEventListener("visibilitychange", function () {
			console.log("on visibility change");

			if (document.visibilityState === "visible") {
				loadNowPlaying();
				console.log(window.socket);
				if (!window.socket.connected) {
					console.log("Reconnecting socket...");
					window.socket = io({ path: window.pikaraokeConfig.socketioPath });
					window.socket.on("now_playing", (np) => handleNowPlaying(np));
				}
			}
		});

		{% if admin and mic_available %}
		// Mic volume controls (live adjustment for enabled mics)
		window.socket.on("mic_devices_state", function(devices) {
			var enabled = devices.filter(function(d) { return d.enabled; });
			if (enabled.length === 0) {
				$("#mic-live-panel").hide();
				return;
			}
			var list = $("#mic-live-list");
			list.empty();
			enabled.forEach(function(dev) {
				var escaped = $('<span>').text(dev.label).html();
				list.append(
					'<div class="is-flex mb-1" style="align-items: center;">' +
						'<i class="icon icon-mic-1 mr-1"></i>' +
						'<span class="is-size-7 mr-2" style="min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + escaped + '</span>' +
						'<input type="range" min="0" max="1" step="0.05" value="' + dev.volume + '" ' +
							'class="mic-live-volume" data-device-id="' + dev.deviceId + '" data-label="' + escaped + '" ' +
							'style="width: 100px;" />' +
					'</div>'
				);
			});
			$("#mic-live-panel").show();
		});

		window.socket.on("mic_update", function(data) {
			if (!data.enabled) {
				$(".mic-live-volume").filter(function() {
					return $(this).data("device-id") === data.deviceId;
				}).closest("div").remove();
				if ($("#mic-live-list").children().length === 0) {
					$("#mic-live-panel").hide();
				}
			} else {
				var slider = $(".mic-live-volume").filter(function() {
					return $(this).data("device-id") === data.deviceId;
				});
				if (slider.length) slider.val(data.volume);
			}
		});

		$(document).on("input", ".mic-live-volume", debounce(function() {
			var deviceId = $(this).data("device-id");
			var label = $(this).data("label");
			var volume = parseFloat($(this).val());
			window.socket.emit("mic_update", {
				deviceId: deviceId, label: label, enabled: true, volume: volume
			});
		}, 300));

		// Request mic state on load
		window.socket.emit("request_mic_devices");
		{% endif %}
	});
</script>
{% endblock %} {% block heading %}{{ title }}
<img
	style="display: none"
	class="playing_gif control-box"
	width="40"
	src="{{  url_for('static', filename='images/now-playing.png') }}"
/>{% endblock %}

{% block content %}

<p class="is-size-4 has-text-warning" id="now-playing">&nbsp;</p>

<hr />
<h3>{# MSG: Title for the section displaying the next song to be played. #} {% trans %}Next Song{% endtrans %}</h3>
<p id="up-next" class="has-text-warning"></p>
<hr />

{% if admin %}
<div class="has-background-black-bis box control-box" style="max-width: 500px; display: none">
	{# MSG: Title of the box with controls such as pause and skip. #}
	<h4>{% trans %}Player Control{% endtrans %}</h4>
	<div class="is-size-3" style="display: flex; justify-content: space-between">
		<div class="is-size-3">
			{# MSG: Title attribute on the button to restart the current song. #}
			<a title="{{ _('Restart Song') }}" id="restart"><i class="icon icon-to-start"></i> </a>&nbsp;&nbsp; {# MSG:
			Title attribute on the button to play or pause the current song. #}
			<a title="{{ _('Play/Pause') }}"><i id="pause-resume" class="icon icon-pause"></i> </a>&nbsp;&nbsp; {# MSG:
			Title attribute on the button to skip to the next song. #}
			<a title="{{ _('Stop Current Song') }}" id="skip"><i class="icon icon-to-end"></i> </a>
		</div>
		<div class="is-size-3" style="display: flex; align-items: center">
			<i id="vol-down" class="icon icon-volume-down"></i>
			<input
				type="range"
				min="0"
				max="1"
				value="{{ volume|default(0.85) }}"
				step="0.025"
				id="volume-slider"
				style="margin: 0 8px 0px 5px; width: 100px"
			/>
			<i id="vol-up" class="icon icon-volume-up"></i>
		</div>
	</div>
	<hr />

	{% if is_transpose_enabled %}
	<div class="is-flex" style="justify-content: space-between">
		<div>
			{# MSG: Title of a control to change the key/pitch of the playing song. #}
			<h4>{% trans %}Change Key{% endtrans %}</h4>
		</div>
		<div class="is-flex">
			<h4 id="semitones-label"></h4>
			<a id="semitones-info"> <i class="icon icon-info-circled-1" title="Info"></i></a>
		</div>
	</div>
	<div style="width: 100%">
		<div class="is-flex">
			<input
				type="range"
				min="-12"
				max="12"
				value="0"
				width="300px"
				class="transpose-slider"
				id="transpose"
				style="width: 100%"
			/>
			<button id="submit-transpose" class="button is-rounded is-small" style="margin-left: 10px">
				{# MSG: Label on the button to confirm the change in key/pitch of the playing song. #} {% trans %}Change{%
				endtrans %}
			</button>
		</div>
	</div>
	{% endif %}

	{% if mic_available %}
	<div id="mic-live-panel" style="display: none">
		<hr />
		<h4><i class="icon icon-mic-1"></i> {% trans %}Microphones{% endtrans %}</h4>
		<div id="mic-live-list"></div>
	</div>
	{% endif %}
</div>
{% endif %}

<div></div>
{% endblock %}