{% extends 'base.html' %} {% block scripts %}
<style>
	/* --- Search result list ---------------------------------- */
	ul.search_result_items {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	ul.search_result_items li {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		padding: 0.75rem;
	}
	ul.search_result_items li:nth-child(odd) {
		background-color: rgb(50, 55, 55);
	}
	@media screen and (min-width: 768px) {
		ul.search_result_items li {
			flex-direction: row;
			align-items: center;
		}
	}

	/* Thumbnail: full width on mobile, fixed 200px on desktop */
	#search-results .img-wrapper {
		position: relative;
		cursor: pointer;
		width: 100%;
		flex-shrink: 0;
	}
	@media screen and (min-width: 768px) {
		#search-results .img-wrapper {
			width: 200px;
		}
	}
	#search-results .img-frame {
		position: relative;
		overflow: hidden;
		aspect-ratio: 16 / 9;
	}
	#search-results .img-wrapper img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: opacity 0.3s ease;
	}

	/* Options row: one setting on the left, the two text actions on the right */
	#search-options {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1.5rem;
		margin-bottom: 0.75rem;
	}
	.search-options-links {
		display: inline-flex;
		align-items: center;
		gap: 1.25rem;
		/* Auto margin rather than space-between on the row: once the links wrap
		   onto their own line on mobile, space-between would leave them flush
		   left. This keeps them right-aligned at every width. */
		margin-left: auto;
	}
	/* Neither has an href -- they are JS actions, so the cursor needs saying */
	#clear-search,
	#show-advanced {
		cursor: pointer;
	}

	/* Stacked at every width, as it already rendered on mobile: side by side the
	   two labels form a wide block that squeezes the title into a narrow column. */
	.search_result_items_actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		flex-shrink: 0;
		gap: 0.5rem;
	}

	/* Meta: title fills space, button pinned right */
	.search_result_items_meta {
		display: flex;
		align-items: center;
		gap: 1rem;
		flex: 1;
		min-width: 0;
		text-align: left;
	}
	.search_result_items_meta > div:first-child {
		flex: 1;
		min-width: 0;
	}

	#search-results .img-wrapper:hover img {
		opacity: 0.7;
		box-shadow: 0px 0px 3px 1px #878787;
	}

	/* Semi-transparent circle behind the play icon */
	#search-results .img-wrapper::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80px;
		height: 80px;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		opacity: 0.7;
		transition: opacity 0.3s ease;
		pointer-events: none;
		z-index: 1;
	}

	/* Fontello play icon overlay */
	#search-results .img-wrapper::after {
		font-family: "fontello";
		content: "\e800";
		position: absolute;
		top: 50%;
		left: 51%;
		transform: translate(-50%, -50%);
		font-size: 2rem;
		color: white;
		opacity: 0.9;
		transition: all 0.3s ease;
		text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
		pointer-events: none;
		z-index: 2;
	}

	/* Hover: full opacity and slight scale on desktop */
	#search-results .img-wrapper:hover::before {
		opacity: 1;
	}

	#search-results .img-wrapper:hover::after {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.2);
	}

	.video-container {
		aspect-ratio: 16 / 9;
		position: relative;
	}
	.video-container video {
		width: 100%;
		height: 100%;
	}
	/* Overlays the dead player so the modal keeps its shape. */
	#modal-video-error {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 90%;
		text-align: center;
		z-index: 12;
	}

	.duration-badge,
	.library-badge {
		position: absolute;
		background: rgba(0, 0, 0, 0.8);
		color: #fff;
		font-size: 0.75rem;
		padding: 2px 4px;
		border-radius: 3px;
		pointer-events: none;
		z-index: 3; /* above the play-icon overlays (z-index 1 and 2) */
	}
	.duration-badge {
		bottom: 4px;
		right: 4px;
	}
	.library-badge {
		top: 4px;
		left: 4px;
		background: hsl(204, 71%, 39%);
		font-weight: 600;
	}

	/* Loading overlay for the video preview modal.
	   Bulma's is-loading only styles buttons/controls, not arbitrary divs,
	   so we define the spinner here for .modal-content. */
	.modal-content.is-loading {
		position: relative;
	}
	.modal-content.is-loading::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 10;
	}
	.modal-content.is-loading::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2.5rem;
		height: 2.5rem;
		margin-top: -1.25rem;
		margin-left: -1.25rem;
		border: 3px solid rgba(255, 255, 255, 0.3);
		border-top-color: #fff;
		border-radius: 50%;
		animation: spinAround 0.6s linear infinite;
		z-index: 11;
	}
	@keyframes spinAround {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}
</style>
<script>
	$(function () {
		const searchInput = document.getElementById("search_string_input");

		$(".direct-download").click(function () {
			const url = $("#direct-download-url").val();
			if (!url) return;
			const $btn = $(this);
			$(".direct-download").attr("disabled", true);
			$btn.addClass("is-loading");
			requestDownload(url, "", Boolean(this.dataset.queue), function (accepted) {
				$btn.removeClass("is-loading");
				if (accepted) {
					// Clearing the box leaves both buttons disabled via the input handler,
					// so the same URL cannot be sent twice while it waits in the queue.
					$("#direct-download-url").val("");
				} else {
					$(".direct-download").removeAttr("disabled");
				}
			});
		});

		function runSearch() {
			const term = searchInput.value.trim();
			if (!term) return;
			$("#searching_loader").removeClass("is-hidden");
			$("#searching_loader #search_term").text(term);
			$("#search-link").attr("disabled", "true").addClass("is-loading");
			$("#search_string").val(term);
			$("#non_karaoke").val($("#include-non-karaoke").is(":checked"));
			$("#container_search_result").hide();
			// Drop the keyboard before the wait: it covers the loader now and the
			// results when they land.
			searchInput.blur();
			$("#container_search_form form").submit();
		}

		$("#search-link").on("click", function (e) {
			e.preventDefault();
			runSearch();
		});

		// The input submits on Enter rather than firing per keystroke, so this page
		// needs no IME composition handling. The Songs page filter does fire per
		// keystroke and handles composition there.
		searchInput.addEventListener("keypress", function (e) {
			if (e.which === 13) {
				e.preventDefault();
				runSearch();
			}
		});

		$("#clear-search").on("click", function (e) {
			e.preventDefault();
			searchInput.value = "";
			searchInput.focus();
		});

		// re-populate the search field with the previous search term
		const qSearchString = new URLSearchParams(window.location.search).get("search_string");
		if (qSearchString) {
			searchInput.value = qSearchString;
		} else {
			// Only on a fresh page. Focusing a results page pops the mobile keyboard
			// over the results the search just produced; Clear and tapping the box
			// are the ways back in.
			searchInput.focus();
		}

		// A disclosure, not a setting: the panel starts hidden via its inline style.
		$("#show-advanced").on("click", function (e) {
			e.preventDefault();
			var expanded = $(this).attr("aria-expanded") === "true";
			$(this).attr("aria-expanded", !expanded);
			$("#advanced-settings").slideToggle(120);
		});

		// handle direct download url input change
		$("#direct-download-url").on("input", function () {
			$(".direct-download").attr("disabled", !isYoutubeURL($(this).val()));
		});

		setUserCookie(); // Don't reload page after setting cookie

		loadSingerList();

		// "Include non-karaoke matches" is the only setting left on this page, so its
		// cookie is read and written right here rather than through a restore-everything
		// helper.
		const includeNonKaraoke = Cookies.get("include-non-karaoke");
		if (includeNonKaraoke !== undefined) {
			$("#include-non-karaoke").prop("checked", includeNonKaraoke === "true");
		}
		$("#include-non-karaoke").change(function () {
			Cookies.set("include-non-karaoke", $(this).is(":checked"), {
				expires: 365,
			});
		});

		// This POST only hands the song to the download worker, which runs yt-dlp
		// afterwards, so no caller may report that the file has arrived. Completion
		// comes back later on the song_downloaded socket event.
		function requestDownload(songUrl, songTitle, addToQueue, onSettled) {
			$.ajax({
				url: "{{ url_for('search.download') }}",
				type: "POST",
				contentType: "application/json",
				data: JSON.stringify({
					song_url: songUrl,
					song_title: songTitle || "",
					song_added_by: resolveSinger(),
					queue: addToQueue,
				}),
				success: function () { onSettled(true); },
				error: function () { onSettled(false); },
			});
		}

		// Replaces the download choice for as long as the song is with the worker:
		// the file does not exist yet, so downloading it again and queueing it are
		// both invalid. The displaced markup is kept for restoreChoice.
		function showPending($actions) {
			if ($actions.data("choiceHtml") === undefined) {
				$actions.data("choiceHtml", $actions.html());
			}
			$actions.html(
				'<span class="button is-static search_result_items_pending">' +
					'<span class="icon"><i class="icon-down-circled"></i></span>' +
					// {# MSG: Status shown on a search result that has been requested but has not arrived yet. #}
					'<span>{{ _("Adding...") | forceescape }}</span>' +
				"</span>"
			);
		}

		function restoreChoice($actions) {
			const html = $actions.data("choiceHtml");
			if (html !== undefined) {
				$actions.html(html);
			}
		}

		// Rewrites a row into the state the server renders for a song it already
		// holds. The anchor needs no binding of its own: base.html delegates
		// add-song-link clicks from the document and reads the path from data-song.
		function showInLibrary($row, path) {
			$row.find(".search_result_items_actions").html(
				'<a class="button is-info add-song-link" href="#" data-song="' + encodeURIComponent(path) + '">' +
					'<span class="icon"><i class="icon-list-add"></i></span>' +
					// {# MSG: Button which adds an already-downloaded song to the queue. #}
					'<span>{{ _("Add to queue") | forceescape }}</span>' +
				"</a>"
			);
			const $frame = $row.find(".img-frame");
			if (!$frame.find(".library-badge").length) {
				// {# MSG: Badge on a YouTube search result marking a song that is already downloaded. #}
				$frame.prepend('<span class="library-badge">{{ _("In library") | forceescape }}</span>');
			}
		}

		// Delegated and scoped to the download class: rows for songs already in
		// the library render an anchor instead of a button, and an unconditional
		// querySelector("button") would throw on them. data-queue carries the
		// intent, so "Add to queue" and "Save for later" share one handler.
		$("#search-results").on("click", ".search_result_items_download", function () {
			const item = this.closest("li");
			const $actions = $(this).closest(".search_result_items_actions");
			showPending($actions);
			requestDownload(
				item.getAttribute("value"),
				item.getAttribute("data-ytTitle"),
				Boolean(this.dataset.queue),
				function (accepted) {
					if (!accepted) {
						restoreChoice($actions);
					}
				}
			);
		});

		// Unbound first: SPA navigation re-executes this script, so a plain bind
		// would stack and rewrite the same row once per page visited.
		window.socket.off("song_downloaded");
		window.socket.on("song_downloaded", function (data) {
			if (!data || !data.youtube_id) return;
			const $row = $("#search-results li[data-ytID='" + data.youtube_id + "']");
			if ($row.length) {
				showInLibrary($row, data.path);
			}
		});

		window.socket.off("download_stopped");
		window.socket.on("download_stopped", function () {
			// A failed download emits no song_downloaded, so a row still pending once
			// the worker has drained is never getting its file. Hand the choice back.
			$(".search_result_items_pending").each(function () {
				restoreChoice($(this).closest(".search_result_items_actions"));
			});
		});

		const previewModal = document.getElementById("modal-js-example");
		const previewVideo = document.getElementById("modal-video");
		const previewContent = previewModal.querySelector(".modal-content");
		const previewCloseButton = previewModal.querySelector(".modal-close");
		const previewError = document.getElementById("modal-video-error");

		// Fetching a stream URL takes seconds, long enough to close the modal or click
		// another thumbnail, so only the response for the preview on screen is applied.
		let previewRequestId = 0;
		let previewPageUrl = null;
		let previewRetried = false;

		// A refused stream is common enough that one silent re-request beats a failure,
		// whether the server gave up or the browser could not play what it returned.
		const retryOrFailPreview = function () {
			if (!previewRetried) {
				previewRetried = true;
				previewContent.classList.add("is-loading");
				requestPreview(previewPageUrl, previewRequestId);
				return;
			}
			previewContent.classList.remove("is-loading");
			previewError.style.display = "block";
		};

		const requestPreview = function (videoUrl, requestId) {
			$.ajax({
				url: "{{ url_for('search.preview') }}" + "?url=" + encodeURIComponent(videoUrl),
				type: "get",
				success: function (data) {
					if (requestId !== previewRequestId) return;
					previewVideo.src = data.stream_url;
					previewVideo.load();
					previewVideo.play().catch(function () {});
				},
				error: function () {
					if (requestId !== previewRequestId) return;
					retryOrFailPreview();
				},
			});
		};

		// Registered once; clearing the spinner is idempotent.
		previewVideo.addEventListener("playing", function () {
			previewContent.classList.remove("is-loading");
			previewError.style.display = "none";
		});
		previewVideo.addEventListener("error", function () {
			// Detaching the source during teardown also fires error; ignore that.
			if (!previewModal.classList.contains("is-active")) return;
			retryOrFailPreview();
		});

		const closePreview = function () {
			previewRequestId++;
			previewModal.classList.remove("is-active");
			previewContent.classList.remove("is-loading");
			previewError.style.display = "none";
			previewVideo.pause();
			// Detach rather than set src="", which resolves to the page URL and makes
			// the browser fetch this HTML as media.
			previewVideo.removeAttribute("src");
			previewVideo.load();
		};

		previewCloseButton.onclick = closePreview;
		previewModal.querySelector(".modal-background").onclick = closePreview;

		$("#search-results").on("click", ".img-wrapper", function () {
			const videoUrl = $(this).data("url");
			const requestId = ++previewRequestId;
			previewPageUrl = videoUrl;
			previewRetried = false;

			previewModal.classList.add("is-active");
			previewContent.classList.add("is-loading");
			previewError.style.display = "none";
			previewCloseButton.focus();

			// Unlock autoplay on iOS: Safari only ties play() to a gesture when it is
			// called in the handler. load() aborts this promise, so nothing chains to it.
			previewVideo.play().catch(function () {});

			requestPreview(videoUrl, requestId);
		});
	});

	function isYoutubeURL(s) {
		if (s.includes("http")) {
			return s.includes("youtube.com/watch?v=") || s.includes("youtube.com/v/") || s.includes("youtu.be/");
		} else {
			return false;
		}
	}
</script>
{% endblock %} {% block header %}
{# MSG: Subtitle under the Add New heading, explaining that this page gets songs the machine does not have. #}
<p class="subtitle is-6">{% trans %}Add new songs from YouTube{% endtrans %}</p>
{% endblock %} {% block content %}

<div>
	{% include 'partials/singer_field.html' %}
	<div class="field">
		<div id="search-field" class="field has-addons mb-1">
			<div class="control has-icons-left is-expanded">
				<input
					id="search_string_input"
					class="input"
					type="text"
					autocomplete="off"
					{# MSG: Placeholder in the box used to search YouTube for a song to download. #}
					placeholder="{{ _('Search YouTube by title, artist...') }}"
				/>
				<span class="icon is-small is-left"><i class="icon icon-search-1"></i></span>
			</div>
			<div class="control">
				{# MSG: Submit button on the search form for searching YouTube. #}
				<a class="button is-warning" id="search-link">{% trans %}Search{% endtrans %}</a>
			</div>
		</div>
		{# Only one setting left: each result row carries its own queue-or-not
		   buttons, so no global toggle is needed. Advanced reveals the direct-URL
		   form -- a disclosure rather than a setting, so it is a link, not a tickbox. #}
		<div id="search-options">
			<label class="checkbox">
				<input type="checkbox" id="include-non-karaoke" name="include-non-karaoke" />
				{# MSG: Checkbox label which enables matching songs which are not karaoke versions (i.e. the songs still
				have a singer and are not just instrumentals.) #} {% trans %}Include non-karaoke matches{% endtrans %}
			</label>
			<span class="search-options-links">
				{# MSG: Link which clears the text from the search box. #}
				<a id="clear-search" class="has-text-danger">{% trans %}Clear{% endtrans %}</a>
				{# MSG: Link which reveals the direct-URL download form. #}
				<a id="show-advanced" aria-expanded="false">{% trans %}Advanced{% endtrans %}</a>
			</span>
		</div>

		<div id="advanced-settings" class="box has-background-black-bis mt-2" style="display: none">
			<div class="control">
				<div class="label">
					{# MSG: Label for an input which takes a YouTube url directly instead of searching titles. #}
					{% trans %}Paste a YouTube url:{% endtrans %}
				</div>
				<div>
					{# An example rather than a prefilled value: the stub URL had to be typed
					   past or cleared before a pasted link would work. #}
					<input
						class="input"
						id="direct-download-url"
						type="text"
						placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
					/>
					<div class="has-text-right mt-2">
						{# MSG: Button which downloads a song and puts it straight in the queue. #}
						<button class="button is-info direct-download" disabled data-queue="1">
							<span class="icon"><i class="icon-list-add"></i></span>
							<span>{% trans %}Add to queue{% endtrans %}</span>
						</button>
						{# MSG: Button which downloads a song into the library without queuing it. #}
						<button class="button direct-download" disabled data-queue="">
							<span class="icon"><i class="icon-down-circled"></i></span>
							<span>{% trans %}Save for later{% endtrans %}</span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="field is-hidden" id="container_search_form">
		<form action="{{ url_for('search.search') }}" method="get">
			<input id="search_string" type="text" name="search_string" />
			<input type="text" id="non_karaoke" name="non_karaoke" />
		</form>
	</div>

	<div id="searching_loader" class="control is-loading is-hidden">
		{% set placeholder_search_term %}
		<span id="search_term"></span>
		{% endset %} {# MSG: Html text which displays what was searched for, in quotes while the page is loading. #} {%
		trans search_term=placeholder_search_term -%} Searching YouTube for
		<small><i>'{{ search_term }}'</i></small>
		{%- endtrans %}
	</div>
	{% if search_results %}
	<div class="field" id="container_search_result">
		<label class="label">
			{# MSG: Html text which displays what was searched for, in quotes. #} {% trans search_term=search_string -%}
			Search results for
			<small><i>'{{search_string}}'</i></small>
			{%- endtrans %}
		</label>
		<ul id="search-results" class="search_result_items">
			{% for result in search_results %}
			{% set local_path = library_matches.get(result.video_id) %}
			<li data-ytID="{{result.video_id}}" data-ytTitle="{{result.title}}" value="{{result.url}}" data-index="{{loop.index0}}">
				<div class="img-wrapper" data-url="{{result.url}}">
					<div class="img-frame">
						<img src="https://img.youtube.com/vi/{{result.video_id}}/mqdefault.jpg" />
						{# On the thumbnail rather than after the title: titles wrap, so a tag
						   trailing the text lands wherever the last line happens to end. #}
						{% if local_path %}
						{# MSG: Badge on a YouTube search result marking a song that is already downloaded. #}
						<span class="library-badge">{% trans %}In library{% endtrans %}</span>
						{% endif %}
						{% if result.duration %}<span class="duration-badge">{{ result.duration }}</span>{% endif %}
					</div>
				</div>
				<div class="search_result_items_meta">
					<div>
						{{result.title}}
						{% if result.channel %}<div class="is-size-7 has-text-grey">{{ result.channel }}</div>{% endif %}
						<a href="{{result.url}}" target="_blank" rel="noopener noreferrer" class="is-size-7 has-text-info">YouTube ↗</a>
					</div>
					<div class="search_result_items_actions">
						{% if local_path %}
						{# Already downloaded, so queue it rather than fetching a second copy. #}
						<a
							class="button is-info add-song-link"
							href="#"
							data-song="{{url_escape(local_path.encode('utf-8','surrogateescape'))}}"
						>
							<span class="icon"><i class="icon-list-add"></i></span>
							{# MSG: Button which adds an already-downloaded song to the queue. #}
							<span>{% trans %}Add to queue{% endtrans %}</span>
						</a>
						{% else %}
						{# The row states the intent, so there is no global "queue once downloaded" toggle. #}
						{# The label needs its own span: with a bare text node the icon is the
						   only element child, and Bulma's icon-only-button rule then applies
						   negative margins that pull the text over the glyph. #}
						{# MSG: Button which downloads a song and puts it straight in the queue. #}
						<button class="button is-info search_result_items_download" data-queue="1">
							<span class="icon"><i class="icon-list-add"></i></span>
							<span>{% trans %}Add to queue{% endtrans %}</span>
						</button>
						{# MSG: Button which downloads a song into the library without queuing it. #}
						<button class="button search_result_items_download" data-queue="">
							<span class="icon"><i class="icon-down-circled"></i></span>
							<span>{% trans %}Save for later{% endtrans %}</span>
						</button>
						{% endif %}
					</div>
				</div>
			</li>
			{% endfor %}
		</ul>
		<div id="modal-js-example" class="modal">
			<div class="modal-background"></div>
			<div class="modal-content">
				<div class="video-container">
					<video id="modal-video" controls></video>
					<div id="modal-video-error" class="notification is-danger" style="display: none">
						{% trans %}Preview unavailable for this video. Use the YouTube link on the result to watch it.{% endtrans %}
					</div>
				</div>
			</div>
			<button class="modal-close is-large" aria-label="close"></button>
		</div>
	</div>
</div>
{% else %} {% endif %} {% endblock %}