mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add some web client settings
This commit is contained in:
Luke Pulverenti
parent
2c7636b291
commit
ba33bf6fff
5 changed files with 245 additions and 81 deletions
|
|
@ -12,19 +12,7 @@
|
|||
<tr>
|
||||
<td>
|
||||
<br />
|
||||
<div class="myLibrary">
|
||||
</div>
|
||||
<div id="resumableSection" style="display: none;">
|
||||
<h1 class="listHeader">${HeaderResume}</h1>
|
||||
|
||||
<div id="resumableItems">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="listHeader">${HeaderLatestMedia}</h1>
|
||||
|
||||
<div id="recentlyAddedItems">
|
||||
</div>
|
||||
<div class="sections"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,38 @@
|
|||
</div>
|
||||
|
||||
<br />
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<label for="selectHomeSection1">${LabelHomePageSection1}</label>
|
||||
<select id="selectHomeSection1" data-mini="true">
|
||||
<option value="">${OptionAuto}</option>
|
||||
<option value="librarybuttons">${OptionLibraryButtons}</option>
|
||||
<option value="librarytiles">${OptionLibraryTiles}</option>
|
||||
<option value="resume">${OptionResumablemedia}</option>
|
||||
<option value="latestmedia">${OptionLatestMedia}</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<label for="selectHomeSection2">${LabelHomePageSection2}</label>
|
||||
<select id="selectHomeSection2" data-mini="true">
|
||||
<option value="">${OptionAuto}</option>
|
||||
<option value="librarybuttons">${OptionLibraryButtons}</option>
|
||||
<option value="librarytiles">${OptionLibraryTiles}</option>
|
||||
<option value="resume">${OptionResumablemedia}</option>
|
||||
<option value="latestmedia">${OptionLatestMedia}</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<label for="selectHomeSection3">${LabelHomePageSection3}</label>
|
||||
<select id="selectHomeSection3" data-mini="true">
|
||||
<option value="">${OptionAuto}</option>
|
||||
<option value="librarybuttons">${OptionLibraryButtons}</option>
|
||||
<option value="librarytiles">${OptionLibraryTiles}</option>
|
||||
<option value="resume">${OptionResumablemedia}</option>
|
||||
<option value="latestmedia">${OptionLatestMedia}</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="detailSectionHeader" style="margin: 0 .5em;">
|
||||
${HeaderThisDevice}
|
||||
|
|
|
|||
|
|
@ -82,7 +82,23 @@
|
|||
return html;
|
||||
}
|
||||
|
||||
function refreshMediaLibrary(page) {
|
||||
function getDefaultSection(index) {
|
||||
|
||||
switch (index) {
|
||||
|
||||
case 0:
|
||||
return 'librarybuttons';
|
||||
case 1:
|
||||
return 'resume';
|
||||
case 2:
|
||||
return 'latestmedia';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function loadlibraryButtons(elem, userId, index) {
|
||||
|
||||
var options = {
|
||||
|
||||
|
|
@ -90,8 +106,6 @@
|
|||
Fields: "PrimaryImageAspectRatio"
|
||||
};
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
var promise1 = ApiClient.getItems(userId, options);
|
||||
|
||||
var promise2 = ApiClient.getLiveTvInfo();
|
||||
|
|
@ -131,59 +145,31 @@
|
|||
});
|
||||
}
|
||||
|
||||
$('.myLibrary', page).html(createMediaLinks({
|
||||
var html = '';
|
||||
|
||||
if (index) {
|
||||
html += '<h1 class="listHeader">My Library</h1>';
|
||||
}
|
||||
html += '<div>';
|
||||
html += createMediaLinks({
|
||||
items: result.Items,
|
||||
shape: 'myLibrary',
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
|
||||
}));
|
||||
});
|
||||
html += '</div>';
|
||||
|
||||
$(elem).html(html);
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('pagebeforeshow', "#indexPage", function () {
|
||||
function loadRecentlyAdded(elem, userId) {
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
var page = this;
|
||||
|
||||
refreshMediaLibrary(page);
|
||||
|
||||
var options = {
|
||||
|
||||
SortBy: "DatePlayed",
|
||||
SortOrder: "Descending",
|
||||
MediaTypes: "Video",
|
||||
Filters: "IsResumable",
|
||||
Limit: screenWidth >= 1920 ? 5 : (screenWidth >= 1440 ? 4 : 3),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
CollapseBoxSetItems: false,
|
||||
ExcludeLocationTypes: "Virtual"
|
||||
};
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
||||
if (result.Items.length) {
|
||||
$('#resumableSection', page).show();
|
||||
} else {
|
||||
$('#resumableSection', page).hide();
|
||||
}
|
||||
|
||||
$('#resumableItems', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferBackdrop: true,
|
||||
shape: 'backdrop',
|
||||
overlayText: screenWidth >= 600,
|
||||
showTitle: true,
|
||||
showParentTitle: true
|
||||
|
||||
})).createPosterItemMenus();
|
||||
|
||||
});
|
||||
|
||||
options = {
|
||||
|
||||
SortBy: "DateCreated",
|
||||
SortOrder: "Descending",
|
||||
Limit: screenWidth >= 2400 ? 30 : (screenWidth >= 1920 ? 20 : (screenWidth >= 1440 ? 12 : (screenWidth >= 800 ? 12 : 8))),
|
||||
|
|
@ -194,18 +180,139 @@
|
|||
ExcludeLocationTypes: "Virtual,Remote"
|
||||
};
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
ApiClient.getItems(userId, options).done(function (result) {
|
||||
|
||||
$('#recentlyAddedItems', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
var html = '';
|
||||
|
||||
html += '<h1 class="listHeader">Latest Media</h1>';
|
||||
html += '<div>';
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferThumb: true,
|
||||
shape: 'backdrop',
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
|
||||
})).createPosterItemMenus();
|
||||
});
|
||||
html += '</div>';
|
||||
|
||||
$(elem).html(html).createPosterItemMenus();
|
||||
});
|
||||
}
|
||||
|
||||
function loadLibraryTiles(elem, userId) {
|
||||
|
||||
var options = {
|
||||
|
||||
SortBy: "SortName",
|
||||
Fields: "PrimaryImageAspectRatio"
|
||||
};
|
||||
|
||||
ApiClient.getItems(userId, options).done(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<h1 class="listHeader">My Library</h1>';
|
||||
html += '<div>';
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferThumb: true,
|
||||
shape: 'backdrop',
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
});
|
||||
html += '</div>';
|
||||
|
||||
$(elem).html(html).createPosterItemMenus();
|
||||
});
|
||||
}
|
||||
|
||||
function loadResume(elem, userId) {
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
var options = {
|
||||
|
||||
SortBy: "DatePlayed",
|
||||
SortOrder: "Descending",
|
||||
MediaTypes: "Video",
|
||||
Filters: "IsResumable",
|
||||
Limit: screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : 6),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
CollapseBoxSetItems: false,
|
||||
ExcludeLocationTypes: "Virtual"
|
||||
};
|
||||
|
||||
ApiClient.getItems(userId, options).done(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<h1 class="listHeader">Resume</h1>';
|
||||
html += '<div>';
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferBackdrop: true,
|
||||
shape: 'backdrop',
|
||||
overlayText: screenWidth >= 600,
|
||||
showTitle: true,
|
||||
showParentTitle: true
|
||||
});
|
||||
html += '</div>';
|
||||
|
||||
$(elem).html(html).createPosterItemMenus();
|
||||
});
|
||||
}
|
||||
|
||||
function loadSection(page, userId, displayPreferences, index) {
|
||||
|
||||
var section = displayPreferences.CustomPrefs['home' + index] || getDefaultSection(index);
|
||||
|
||||
var elem = $('.section' + index, page);
|
||||
|
||||
if (section == 'latestmedia') {
|
||||
loadRecentlyAdded(elem, userId);
|
||||
}
|
||||
else if (section == 'librarytiles') {
|
||||
loadLibraryTiles(elem, userId);
|
||||
}
|
||||
else if (section == 'resume') {
|
||||
loadResume(elem, userId);
|
||||
}
|
||||
else if (section == 'librarybuttons') {
|
||||
loadlibraryButtons(elem, userId, index);
|
||||
}
|
||||
}
|
||||
|
||||
function loadSections(page, userId, displayPreferences) {
|
||||
|
||||
var i, length;
|
||||
var sectionCount = 3;
|
||||
var html = '';
|
||||
|
||||
for (i = 0, length = sectionCount; i < length; i++) {
|
||||
|
||||
html += '<div class="section' + i + '"></div>';
|
||||
}
|
||||
|
||||
$('.sections', page).html(html);
|
||||
|
||||
for (i = 0, length = sectionCount; i < length; i++) {
|
||||
|
||||
loadSection(page, userId, displayPreferences, i);
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on('pagebeforeshow', "#indexPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
ApiClient.getDisplayPreferences('home', userId, 'webclient').done(function (result) {
|
||||
|
||||
loadSections(page, userId, result);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
})(jQuery, document, ApiClient);
|
||||
|
|
@ -1,22 +1,31 @@
|
|||
(function ($, window, document) {
|
||||
|
||||
function loadForm(page, user) {
|
||||
function loadForm(page, userId, displayPreferences) {
|
||||
|
||||
$('#selectThemeSong', page).val(LocalSettings.val('enableThemeSongs', user.Id) || '').selectmenu("refresh");
|
||||
$('#selectBackdrop', page).val(LocalSettings.val('enableBackdrops', user.Id) || '').selectmenu("refresh");
|
||||
$('#selectThemeSong', page).val(LocalSettings.val('enableThemeSongs', userId) || '').selectmenu("refresh");
|
||||
$('#selectBackdrop', page).val(LocalSettings.val('enableBackdrops', userId) || '').selectmenu("refresh");
|
||||
|
||||
$('#selectHomeSection1', page).val(displayPreferences.CustomPrefs.home0 || '').selectmenu("refresh");
|
||||
$('#selectHomeSection2', page).val(displayPreferences.CustomPrefs.home1 || '').selectmenu("refresh");
|
||||
$('#selectHomeSection3', page).val(displayPreferences.CustomPrefs.home2 || '').selectmenu("refresh");
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
function saveUser(page, user) {
|
||||
function saveUser(page, userId, displayPreferences) {
|
||||
|
||||
LocalSettings.val('enableThemeSongs', user.Id, $('#selectThemeSong', page).val());
|
||||
LocalSettings.val('enableBackdrops', user.Id, $('#selectBackdrop', page).val());
|
||||
LocalSettings.val('enableThemeSongs', userId, $('#selectThemeSong', page).val());
|
||||
LocalSettings.val('enableBackdrops', userId, $('#selectBackdrop', page).val());
|
||||
|
||||
displayPreferences.CustomPrefs.home0 = $('#selectHomeSection1', page).val();
|
||||
displayPreferences.CustomPrefs.home1 = $('#selectHomeSection2', page).val();
|
||||
displayPreferences.CustomPrefs.home2 = $('#selectHomeSection3', page).val();
|
||||
|
||||
ApiClient.updateDisplayPreferences('home', displayPreferences, userId, 'webclient').done(function () {
|
||||
|
||||
//ApiClient.updateUser(user).done(function () {
|
||||
//Dashboard.alert(Globalize.translate("SettingsSaved"));
|
||||
//});
|
||||
Dashboard.alert(Globalize.translate("SettingsSaved"));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
|
|
@ -27,9 +36,9 @@
|
|||
|
||||
var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
|
||||
|
||||
ApiClient.getUser(userId).done(function (result) {
|
||||
ApiClient.getDisplayPreferences('home', userId, 'webclient').done(function (result) {
|
||||
|
||||
saveUser(page, result);
|
||||
saveUser(page, userId, result);
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -49,12 +58,11 @@
|
|||
|
||||
var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
|
||||
|
||||
ApiClient.getUser(userId).done(function (user) {
|
||||
ApiClient.getDisplayPreferences('home', userId, 'webclient').done(function (result) {
|
||||
|
||||
loadForm(page, user);
|
||||
loadForm(page, userId, result);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
window.WebClientPreferencesPage = {
|
||||
|
|
|
|||
|
|
@ -873,6 +873,35 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
|
|||
});
|
||||
};
|
||||
|
||||
self.getDisplayPreferences = function (id, userId, app) {
|
||||
|
||||
var url = self.getUrl("DisplayPreferences/" + id, {
|
||||
userId: userId,
|
||||
client: app
|
||||
});
|
||||
|
||||
return self.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
dataType: "json"
|
||||
});
|
||||
};
|
||||
|
||||
self.updateDisplayPreferences = function (id, obj, userId, app) {
|
||||
|
||||
var url = self.getUrl("DisplayPreferences/" + id, {
|
||||
userId: userId,
|
||||
client: app
|
||||
});
|
||||
|
||||
return self.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
data: JSON.stringify(obj),
|
||||
contentType: "application/json"
|
||||
});
|
||||
};
|
||||
|
||||
self.getSeasons = function (itemId, options) {
|
||||
|
||||
var url = self.getUrl("Shows/" + itemId + "/Seasons", options);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue