jellyfin-web/dashboard-ui/scripts/search.js

267 lines
6.3 KiB
JavaScript
Raw Normal View History

2016-04-10 21:24:16 -07:00
define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
2013-04-26 13:53:54 -07:00
2013-04-27 06:05:33 -07:00
var searchHintTimeout;
2013-04-26 13:53:54 -07:00
2013-04-27 06:05:33 -07:00
function clearSearchHintTimeout() {
2013-04-26 13:53:54 -07:00
2013-04-27 06:05:33 -07:00
if (searchHintTimeout) {
clearTimeout(searchHintTimeout);
searchHintTimeout = null;
}
}
2015-01-24 23:34:50 -07:00
function getAdditionalTextLines(hint) {
if (hint.Type == "Audio") {
return [[hint.AlbumArtist, hint.Album].join(" - ")];
}
else if (hint.Type == "MusicAlbum") {
return [hint.AlbumArtist];
}
else if (hint.Type == "MusicArtist") {
return [Globalize.translate('LabelArtist')];
}
else if (hint.Type == "Movie") {
return [Globalize.translate('LabelMovie')];
}
else if (hint.Type == "MusicVideo") {
return [Globalize.translate('LabelMusicVideo')];
}
else if (hint.Type == "Episode") {
return [Globalize.translate('LabelEpisode')];
}
else if (hint.Type == "Series") {
2016-04-09 13:20:19 -07:00
return [Globalize.translate('Series')];
2015-01-24 23:34:50 -07:00
}
2015-01-25 12:13:04 -07:00
else if (hint.Type == "BoxSet") {
return [Globalize.translate('LabelCollection')];
}
2015-08-10 10:37:50 -07:00
else if (hint.ChannelName) {
return [hint.ChannelName];
}
2015-01-24 23:34:50 -07:00
return [hint.Type];
}
2013-12-27 10:12:23 -07:00
function search() {
var self = this;
2015-05-25 10:32:22 -07:00
self.showSearchPanel = function () {
2013-12-27 10:12:23 -07:00
2015-06-08 14:32:20 -07:00
showSearchMenu();
2013-04-26 13:53:54 -07:00
};
}
window.Search = new search();
2013-04-28 10:21:56 -07:00
2015-01-21 12:21:19 -07:00
function renderSearchResultsInOverlay(elem, hints) {
// Massage the objects to look like regular items
hints = hints.map(function (i) {
i.Id = i.ItemId;
i.ImageTags = {};
i.UserData = {};
if (i.PrimaryImageTag) {
i.ImageTags.Primary = i.PrimaryImageTag;
}
return i;
});
2016-03-16 13:38:01 -07:00
var html = libraryBrowser.getPosterViewHtml({
2015-01-21 12:21:19 -07:00
items: hints,
2015-06-01 22:46:06 -07:00
shape: "auto",
2015-01-22 23:15:15 -07:00
lazy: true,
2015-01-21 12:21:19 -07:00
overlayText: false,
2015-01-24 12:03:55 -07:00
showTitle: true,
2015-01-26 23:50:40 -07:00
centerImage: true,
2015-08-22 10:55:53 -07:00
centerText: true,
2015-12-30 13:25:32 -07:00
textLines: getAdditionalTextLines,
overlayPlayButton: true
2015-01-21 12:21:19 -07:00
});
2015-06-28 08:43:49 -07:00
var itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.innerHTML = html;
2015-06-29 13:38:15 -07:00
ImageLoader.lazyChildren(itemsContainer);
2015-01-21 12:21:19 -07:00
}
function requestSearchHintsForOverlay(elem, searchTerm) {
var currentTimeout = searchHintTimeout;
2015-06-17 18:41:22 -07:00
Dashboard.showLoadingMsg();
2015-01-21 12:21:19 -07:00
2015-07-19 20:43:13 -07:00
ApiClient.getSearchHints({
userId: Dashboard.getCurrentUserId(),
2016-04-11 07:26:54 -07:00
searchTerm: (searchTerm || '').trim(),
2015-07-19 20:43:13 -07:00
limit: 30
2015-12-14 08:43:03 -07:00
}).then(function (result) {
2015-01-21 12:21:19 -07:00
2015-06-17 18:41:22 -07:00
if (currentTimeout == searchHintTimeout) {
renderSearchResultsInOverlay(elem, result.SearchHints);
2015-01-21 12:21:19 -07:00
}
2015-06-17 18:41:22 -07:00
Dashboard.hideLoadingMsg();
2015-12-14 08:43:03 -07:00
}, function () {
2015-06-17 18:41:22 -07:00
Dashboard.hideLoadingMsg();
2015-01-21 12:21:19 -07:00
});
}
function updateSearchOverlay(elem, searchTerm) {
if (!searchTerm) {
2016-03-15 22:33:31 -07:00
var itemsContainer = elem.querySelector('.itemsContainer');
if (itemsContainer) {
itemsContainer.innerHTML = '';
}
2015-01-21 12:21:19 -07:00
clearSearchHintTimeout();
return;
}
clearSearchHintTimeout();
searchHintTimeout = setTimeout(function () {
requestSearchHintsForOverlay(elem, searchTerm);
2015-08-25 22:10:04 -07:00
}, 300);
2015-01-21 12:21:19 -07:00
}
function getSearchOverlay(createIfNeeded) {
2015-01-20 23:26:16 -07:00
2015-06-29 13:38:15 -07:00
var elem = document.querySelector('.searchResultsOverlay');
2015-01-20 23:26:16 -07:00
2015-06-29 13:38:15 -07:00
if (createIfNeeded && !elem) {
2015-01-22 23:15:15 -07:00
2016-03-16 13:38:01 -07:00
var div = document.createElement('div');
div.className = 'searchResultsOverlay ui-body-b smoothScrollY background-theme-b';
2015-01-22 23:15:15 -07:00
2016-03-16 13:38:01 -07:00
div.innerHTML = '<div class="searchResultsContainer"><div class="itemsContainer"></div></div></div>';
2015-01-22 23:15:15 -07:00
2016-03-16 13:38:01 -07:00
document.body.appendChild(div);
libraryBrowser.createCardMenus(div);
2016-04-01 21:16:18 -07:00
elem = div;
2015-01-20 23:26:16 -07:00
}
return elem;
}
2015-12-14 08:43:03 -07:00
var isVisible;
2015-01-20 23:26:16 -07:00
function onHeaderSearchChange(val) {
2015-06-29 13:38:15 -07:00
var elem;
2015-01-20 23:26:16 -07:00
if (val) {
2015-06-29 13:38:15 -07:00
elem = getSearchOverlay(true);
2015-12-14 08:43:03 -07:00
if (!isVisible) {
fadeIn(elem, 1);
}
isVisible = true;
2015-06-28 07:45:21 -07:00
document.body.classList.add('bodyWithPopupOpen');
2015-01-20 23:26:16 -07:00
2015-06-29 13:38:15 -07:00
updateSearchOverlay(elem, val);
2015-01-20 23:26:16 -07:00
} else {
2015-06-29 13:38:15 -07:00
elem = getSearchOverlay(false);
if (elem) {
updateSearchOverlay(elem, '');
2015-12-14 08:43:03 -07:00
if (isVisible) {
fadeOut(elem, 1);
isVisible = false;
}
document.body.classList.remove('bodyWithPopupOpen');
2015-06-29 13:38:15 -07:00
}
2015-01-20 23:26:16 -07:00
}
}
2015-12-14 08:43:03 -07:00
function fadeIn(elem, iterations) {
var keyframes = [
{ opacity: '0', offset: 0 },
{ opacity: '1', offset: 1 }];
var timing = { duration: 200, iterations: iterations, fill: 'both' };
2016-04-01 21:16:18 -07:00
if (elem.animate) {
elem.animate(keyframes, timing);
}
2015-12-14 08:43:03 -07:00
}
function fadeOut(elem, iterations) {
var keyframes = [
{ opacity: '1', offset: 0 },
{ opacity: '0', offset: 1 }];
var timing = { duration: 600, iterations: iterations, fill: 'both' };
2016-04-01 21:16:18 -07:00
var onfinish = function () {
2015-12-14 08:43:03 -07:00
elem.parentNode.removeChild(elem);
};
2016-04-01 21:16:18 -07:00
if (elem.animate) {
elem.animate(keyframes, timing).onfinish = onfinish;
} else {
onfinish();
}
2015-12-14 08:43:03 -07:00
}
2015-01-21 12:21:19 -07:00
function bindSearchEvents() {
2013-04-27 07:00:22 -07:00
2016-03-15 22:33:31 -07:00
require(['searchmenu'], function (searchmenu) {
Events.on(window.SearchMenu, 'closed', closeSearchResults);
Events.on(window.SearchMenu, 'change', function (e, value) {
2013-04-27 07:00:22 -07:00
2015-07-10 07:25:18 -07:00
onHeaderSearchChange(value);
});
2015-02-14 12:36:40 -07:00
});
2015-01-24 12:03:55 -07:00
}
2015-07-10 07:25:18 -07:00
function closeSearchResults() {
2015-01-24 12:03:55 -07:00
onHeaderSearchChange('');
2015-06-08 14:32:20 -07:00
hideSearchMenu();
}
function showSearchMenu() {
2016-03-15 22:33:31 -07:00
require(['searchmenu'], function (searchmenu) {
window.SearchMenu.show();
2015-06-08 14:32:20 -07:00
});
}
function hideSearchMenu() {
2016-03-15 22:33:31 -07:00
require(['searchmenu'], function (searchmenu) {
window.SearchMenu.hide();
2015-07-10 07:25:18 -07:00
});
2015-01-21 12:21:19 -07:00
}
2015-12-14 08:43:03 -07:00
document.addEventListener('pagebeforehide', closeSearchResults);
2015-01-21 12:21:19 -07:00
2015-12-14 08:43:03 -07:00
document.addEventListener('headercreated', function () {
2015-01-20 23:26:16 -07:00
2015-01-21 12:21:19 -07:00
bindSearchEvents();
2015-01-20 23:26:16 -07:00
});
2013-04-26 13:53:54 -07:00
2016-03-15 22:33:31 -07:00
});