mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

add separate user preferences area

Browse source
This commit is contained in:
Luke Pulverenti 2014-05-21 12:45:42 -04:00
parent cc365f2f6d
commit f81c84719f
14 changed files with 300 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

46
dashboard-ui/mypreferencesdisplay.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${TitleMediaBrowser}</title>
</head>
<body>
<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-theme="b">
<div class="libraryViewNav">
<a href="#" class="ui-btn-active lnkDisplayPreferences">${TabDisplay}</a>
<a href="#" class="lnkLanguagePreferences">${TabLanguages}</a>
<a href="#" class="lnkWebClientPreferences">${TabWebClient}</a>
</div>
<br />
<form class="displayPreferencesForm" style="margin: 0 auto;">
<ul data-role="listview" class="ulForm">
<li>
<input type="checkbox" id="chkDisplayMissingEpisodes" data-mini="true" />
<label for="chkDisplayMissingEpisodes">${LabelDisplayMissingEpisodesWithinSeasons}</label>
</li>
<li>
<input type="checkbox" id="chkDisplayUnairedEpisodes" data-mini="true" />
<label for="chkDisplayUnairedEpisodes">${LabelUnairedMissingEpisodesWithinSeasons}</label>
</li>
<li>
<input type="checkbox" id="chkGroupMoviesIntoCollections" data-mini="true" />
<label for="chkGroupMoviesIntoCollections">${LabelGroupMoviesIntoCollections}</label>
<div class="fieldDescription">${LabelGroupMoviesIntoCollectionsHelp}</div>
</li>
<li>
<button type="submit" data-theme="a" data-icon="check" data-mini="true">
${ButtonOk}
</button>
<button type="button" onclick="history.back();" data-icon="delete" data-mini="true">
${ButtonCancel}
</button>
</li>
</ul>
</form>
<script type="text/javascript">
$('.displayPreferencesForm').off('submit', DisplayPreferencesPage.onSubmit).on('submit', DisplayPreferencesPage.onSubmit);
</script>
</div>
</body>
</html>

58
dashboard-ui/mypreferenceslanguages.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${TitleMediaBrowser}</title>
</head>
<body>
<div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-theme="b">
<div class="libraryViewNav">
<a href="#" class="lnkDisplayPreferences">${TabDisplay}</a>
<a href="#" class="ui-btn-active lnkLanguagePreferences">${TabLanguages}</a>
<a href="#" class="lnkWebClientPreferences">${TabWebClient}</a>
</div>
<br />
<form style="margin: 0 auto;" class="languagePreferencesForm">
<ul data-role="listview" class="ulForm">
<li>
<label for="selectAudioLanguage">${LabelAudioLanguagePreference}</label>
<select id="selectAudioLanguage" data-mini="true"></select>
</li>
<li>
<input type="checkbox" id="chkPlayDefaultAudioTrack" data-mini="true" />
<label for="chkPlayDefaultAudioTrack">${LabelPlayDefaultAudioTrack}</label>
</li>
<li>
<label for="selectSubtitleLanguage">${LabelSubtitleLanguagePreference}</label>
<select id="selectSubtitleLanguage" data-mini="true"></select>
</li>
<li>
<label for="selectSubtitlePlaybackMode">${LabelSubtitlePlaybackMode}</label>
<select id="selectSubtitlePlaybackMode" data-mini="true">
<option value="Default">${OptionDefaultSubtitles}</option>
<option value="OnlyForced">${OptionOnlyForcedSubtitles}</option>
<option value="Always">${OptionAlwaysPlaySubtitles}</option>
<option value="None">${OptionNoSubtitles}</option>
</select>
<div class="fieldDescription subtitlesDefaultHelp subtitlesHelp" style="display: none;">${OptionDefaultSubtitlesHelp}</div>
<div class="fieldDescription subtitlesAlwaysHelp subtitlesHelp" style="display: none;">${OptionAlwaysPlaySubtitlesHelp}</div>
<div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp" style="display: none;">${OptionOnlyForcedSubtitlesHelp}</div>
<div class="fieldDescription subtitlesNoneHelp subtitlesHelp" style="display: none;">${OptionNoSubtitlesHelp}</div>
</li>
<li>
<button type="submit" data-theme="a" data-icon="check" data-mini="true">
${ButtonOk}
</button>
<button type="button" onclick="history.back();" data-icon="delete" data-mini="true">
${ButtonCancel}
</button>
</li>
</ul>
</form>
<script type="text/javascript">
$('.languagePreferencesForm').off('submit', LanguagePreferencesPage.onSubmit).on('submit', LanguagePreferencesPage.onSubmit);
</script>
</div>
</body>
</html>

17
dashboard-ui/mypreferenceswebclient.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${TitleMediaBrowser}</title>
</head>
<body>
<div id="webClientPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-theme="b">
<div class="libraryViewNav">
<a href="#" class="lnkDisplayPreferences">${TabDisplay}</a>
<a href="#" class="lnkLanguagePreferences">${TabLanguages}</a>
<a href="#" class="ui-btn-active lnkWebClientPreferences">${TabWebClient}</a>
</div>
</div>
</body>
</html>

4
dashboard-ui/scripts/moviesrecommended.js
View file

@ -49,7 +49,7 @@
SortOrder: "Descending", SortOrder: "Descending",
IncludeItemTypes: "Movie", IncludeItemTypes: "Movie",
Filters: "IsResumable", Filters: "IsResumable",
Limit: screenWidth >= 1920 ? 5 : (screenWidth >= 1440 ? 4 : 3), Limit: screenWidth >= 1920 ? 4 : (screenWidth >= 1440 ? 4 : 3),
Recursive: true, Recursive: true,
Fields: "PrimaryImageAspectRatio", Fields: "PrimaryImageAspectRatio",
CollapseBoxSetItems: false, CollapseBoxSetItems: false,
@ -79,7 +79,7 @@
userId: Dashboard.getCurrentUserId(), userId: Dashboard.getCurrentUserId(),
categoryLimit: screenWidth >= 1200 ? 6 : 3, categoryLimit: screenWidth >= 1200 ? 6 : 3,
itemLimit: screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : 6), itemLimit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 6),
Fields: "PrimaryImageAspectRatio", Fields: "PrimaryImageAspectRatio",
ParentId: parentId ParentId: parentId
}); });

76
dashboard-ui/scripts/mypreferencesdisplay.js Normal file
View file

@ -0,0 +1,76 @@
(function ($, window, document) {
function loadForm(page, user) {
$('#chkDisplayMissingEpisodes', page).checked(user.Configuration.DisplayMissingEpisodes || false).checkboxradio("refresh");
$('#chkDisplayUnairedEpisodes', page).checked(user.Configuration.DisplayUnairedEpisodes || false).checkboxradio("refresh");
$('#chkGroupMoviesIntoCollections', page).checked(user.Configuration.GroupMoviesIntoBoxSets || false).checkboxradio("refresh");
Dashboard.hideLoadingMsg();
}
function saveUser(page, user) {
user.Configuration.DisplayMissingEpisodes = $('#chkDisplayMissingEpisodes', page).checked();
user.Configuration.DisplayUnairedEpisodes = $('#chkDisplayUnairedEpisodes', page).checked();
user.Configuration.GroupMoviesIntoBoxSets = $('#chkGroupMoviesIntoCollections', page).checked();
ApiClient.updateUser(user).done(function () {
Dashboard.alert(Globalize.translate("SettingsSaved"));
});
}
function onSubmit() {
var page = $(this).parents('.page');
Dashboard.showLoadingMsg();
var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
ApiClient.getUser(userId).done(function (result) {
saveUser(page, result);
});
// Disable default form submission
return false;
}
$(document).on('pageinit', "#displayPreferencesPage", function () {
var page = this;
}).on('pageshow', "#displayPreferencesPage", function () {
var page = this;
Dashboard.showLoadingMsg();
var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
ApiClient.getUser(userId).done(function (user) {
loadForm(page, user);
});
}).on('pageshow', ".userPreferencesPage", function () {
var page = this;
var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
$('.lnkDisplayPreferences', page).attr('href', 'mypreferencesdisplay.html?userId=' + userId);
$('.lnkLanguagePreferences', page).attr('href', 'mypreferenceslanguages.html?userId=' + userId);
$('.lnkWebClientPreferences', page).attr('href', 'mypreferenceswebclient.html?userId=' + userId);
});
window.DisplayPreferencesPage = {
onSubmit: onSubmit
};
})(jQuery, window, document);

98
dashboard-ui/scripts/mypreferenceslanguages.js Normal file
View file

@ -0,0 +1,98 @@
(function ($, window, document) {
function populateLanguages(select, languages) {
var html = "";
html += "<option value=''></option>";
for (var i = 0, length = languages.length; i < length; i++) {
var culture = languages[i];
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
}
$(select).html(html).selectmenu("refresh");
}
function loadForm(page, user, loggedInUser, allCulturesPromise) {
allCulturesPromise.done(function (allCultures) {
populateLanguages($('#selectAudioLanguage', page), allCultures);
populateLanguages($('#selectSubtitleLanguage', page), allCultures);
$('#selectAudioLanguage', page).val(user.Configuration.AudioLanguagePreference || "").selectmenu("refresh");
$('#selectSubtitleLanguage', page).val(user.Configuration.SubtitleLanguagePreference || "").selectmenu("refresh");
});
$('#selectSubtitlePlaybackMode', page).val(user.Configuration.SubtitleMode || "").selectmenu("refresh").trigger('change');
$('#chkPlayDefaultAudioTrack', page).checked(user.Configuration.PlayDefaultAudioTrack || false).checkboxradio("refresh");
Dashboard.hideLoadingMsg();
}
function saveUser(page, user) {
user.Configuration.AudioLanguagePreference = $('#selectAudioLanguage', page).val();
user.Configuration.SubtitleLanguagePreference = $('#selectSubtitleLanguage', page).val();
user.Configuration.SubtitleMode = $('#selectSubtitlePlaybackMode', page).val();
user.Configuration.PlayDefaultAudioTrack = $('#chkPlayDefaultAudioTrack', page).checked();
ApiClient.updateUser(user).done(function () {
Dashboard.alert(Globalize.translate("SettingsSaved"));
});
}
function onSubmit() {
var page = $(this).parents('.page');
Dashboard.showLoadingMsg();
var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
ApiClient.getUser(userId).done(function (result) {
saveUser(page, result);
});
// Disable default form submission
return false;
}
$(document).on('pageinit', "#languagePreferencesPage", function () {
var page = this;
}).on('pageshow', "#languagePreferencesPage", function () {
var page = this;
Dashboard.showLoadingMsg();
var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
var promise1 = ApiClient.getUser(userId);
var promise2 = Dashboard.getCurrentUser();
var allCulturesPromise = ApiClient.getCultures();
$.when(promise1, promise2).done(function (response1, response2) {
loadForm(page, response1[0] || response1, response2[0], allCulturesPromise);
});
});
window.LanguagePreferencesPage = {
onSubmit: onSubmit
};
})(jQuery, window, document);

1
dashboard-ui/scripts/mypreferenceswebclient.js Normal file
View file

@ -0,0 +1 @@


7
dashboard-ui/scripts/site.js
View file

@ -497,9 +497,8 @@ var Dashboard = {
html += '<form>'; html += '<form>';
html += '<p><label for="chkEnableThemeSongs">Play theme songs</label><input onchange="ThemeSongManager.enabled(this.checked);" type="checkbox" id="chkEnableThemeSongs" data-mini="true" /></a>'; html += '<p><a data-mini="true" data-role="button" href="mypreferencesdisplay.html?userId=' + user.Id + '" data-icon="gear">My Preferences</button></a>';
html += '<p><a data-mini="true" data-role="button" href="useredit.html?userId=' + user.Id + '" data-icon="user">My Profile</button></a>';
html += '<p><a data-mini="true" data-role="button" href="usersettings.html?userId=' + user.Id + '" data-icon="user">Preferences</button></a>';
html += '<p><button data-mini="true" type="button" onclick="Dashboard.logout();" data-icon="lock">Sign Out</button></p>'; html += '<p><button data-mini="true" type="button" onclick="Dashboard.logout();" data-icon="lock">Sign Out</button></p>';
html += '</form>'; html += '</form>';
@ -511,8 +510,6 @@ var Dashboard = {
$(this).off("panelafterclose").remove(); $(this).off("panelafterclose").remove();
}); });
$('#chkEnableThemeSongs', elem).checked(window.ThemeSongManager.enabled()).checkboxradio('refresh');
}); });
}, },

157
dashboard-ui/scripts/usersettings.js
View file

@ -1,157 +0,0 @@
(function ($, window, document) {
function populateLanguages(select, languages) {
var html = "";
html += "<option value=''></option>";
for (var i = 0, length = languages.length; i < length; i++) {
var culture = languages[i];
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
}
$(select).html(html).selectmenu("refresh");
}
function loadUser(page, user, loggedInUser, allCulturesPromise) {
Dashboard.setPageTitle(user.Name);
allCulturesPromise.done(function (allCultures) {
populateLanguages($('#selectAudioLanguage', page), allCultures);
populateLanguages($('#selectSubtitleLanguage', page), allCultures);
$('#selectAudioLanguage', page).val(user.Configuration.AudioLanguagePreference || "").selectmenu("refresh");
$('#selectSubtitleLanguage', page).val(user.Configuration.SubtitleLanguagePreference || "").selectmenu("refresh");
});
$('#chkDisplayMissingEpisodes', page).checked(user.Configuration.DisplayMissingEpisodes || false).checkboxradio("refresh");
$('#chkDisplayUnairedEpisodes', page).checked(user.Configuration.DisplayUnairedEpisodes || false).checkboxradio("refresh");
$('#chkGroupMoviesIntoCollections', page).checked(user.Configuration.GroupMoviesIntoBoxSets || false).checkboxradio("refresh");
$('#selectSubtitlePlaybackMode', page).val(user.Configuration.SubtitleMode || "").selectmenu("refresh").trigger('change');
$('#chkPlayDefaultAudioTrack', page).checked(user.Configuration.PlayDefaultAudioTrack || false).checkboxradio("refresh");
Dashboard.hideLoadingMsg();
}
function onSaveComplete(page) {
Dashboard.hideLoadingMsg();
var userId = getParameterByName("userId");
Dashboard.validateCurrentUser(page);
if (userId) {
Dashboard.alert(Globalize.translate("SettingsSaved"));
} else {
Dashboard.navigate("userprofiles.html");
}
}
function saveUser(user, page) {
user.Configuration.AudioLanguagePreference = $('#selectAudioLanguage', page).val();
user.Configuration.SubtitleLanguagePreference = $('#selectSubtitleLanguage', page).val();
user.Configuration.DisplayMissingEpisodes = $('#chkDisplayMissingEpisodes', page).checked();
user.Configuration.DisplayUnairedEpisodes = $('#chkDisplayUnairedEpisodes', page).checked();
user.Configuration.GroupMoviesIntoBoxSets = $('#chkGroupMoviesIntoCollections', page).checked();
user.Configuration.SubtitleMode = $('#selectSubtitlePlaybackMode', page).val();
user.Configuration.PlayDefaultAudioTrack = $('#chkPlayDefaultAudioTrack', page).checked();
ApiClient.updateUser(user).done(function () {
onSaveComplete(page);
});
}
function userSettingsPage() {
var self = this;
self.onSubmit = function () {
var page = $(this).parents('.page');
Dashboard.showLoadingMsg();
var userId = getParameterByName("userId");
ApiClient.getUser(userId).done(function (result) {
saveUser(result, page);
});
// Disable default form submission
return false;
};
}
window.UserSettingsPage = new userSettingsPage();
$(document).on('pageinit', "#userSettingsPage", function () {
var page = this;
$('#selectSubtitlePlaybackMode', page).on('change', function () {
$('.subtitlesHelp', page).hide();
$('.subtitles' + this.value + 'Help', page).show();
});
}).on('pagebeforeshow', "#userSettingsPage", function () {
var page = this;
Dashboard.getCurrentUser().done(function (loggedInUser) {
if (loggedInUser.Configuration.IsAdministrator) {
$('#lnkParentalControl', page).show();
} else {
$('#lnkParentalControl', page).hide();
}
});
}).on('pageshow', "#userSettingsPage", function () {
var page = this;
Dashboard.showLoadingMsg();
var userId = getParameterByName("userId");
var promise1;
if (!userId) {
var deferred = $.Deferred();
deferred.resolveWith(null, [{
Configuration: {}
}]);
promise1 = deferred.promise();
} else {
promise1 = ApiClient.getUser(userId);
}
var promise2 = Dashboard.getCurrentUser();
var allCulturesPromise = ApiClient.getCultures();
$.when(promise1, promise2).done(function (response1, response2) {
loadUser(page, response1[0] || response1, response2[0], allCulturesPromise);
});
$("#userSettingsForm input:first").focus();
});
})(jQuery, window, document);

1
dashboard-ui/useredit.html
View file

@ -13,7 +13,6 @@
<a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">${TabImage}</a> <a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">${TabImage}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">${TabLibraryAccess}</a> <a href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">${TabLibraryAccess}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${TabPassword}</a> <a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${TabPassword}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">${TabPreferences}</a>
</div> </div>
<form id="editUserProfileForm"> <form id="editUserProfileForm">
<ul data-role="listview" class="ulForm"> <ul data-role="listview" class="ulForm">

1
dashboard-ui/userimage.html
View file

@ -13,7 +13,6 @@
<a href="#" data-role="button" class="ui-btn-active">${TabImage}</a> <a href="#" data-role="button" class="ui-btn-active">${TabImage}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">${TabLibraryAccess}</a> <a href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">${TabLibraryAccess}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${TabPassword}</a> <a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${TabPassword}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">${TabPreferences}</a>
</div> </div>
<div class="readOnlyContent"> <div class="readOnlyContent">
<p id="fldImage"></p> <p id="fldImage"></p>

1
dashboard-ui/userparentalcontrol.html
View file

@ -13,7 +13,6 @@
<a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">${TabImage}</a> <a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">${TabImage}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" class="ui-btn-active">${TabLibraryAccess}</a> <a href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" class="ui-btn-active">${TabLibraryAccess}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${TabPassword}</a> <a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${TabPassword}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">${TabPreferences}</a>
</div> </div>
<form class="userParentalControlForm"> <form class="userParentalControlForm">

1
dashboard-ui/userpassword.html
View file

@ -13,7 +13,6 @@
<a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">${TabImage}</a> <a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">${TabImage}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">${TabLibraryAccess}</a> <a href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">${TabLibraryAccess}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabPassword}</a> <a href="#" data-role="button" class="ui-btn-active">${TabPassword}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">${TabPreferences}</a>
</div> </div>
<h2 class="formheader" style="display: none;">${HeaderCreatePassword}</h2> <h2 class="formheader" style="display: none;">${HeaderCreatePassword}</h2>
<form id="updatePasswordForm"> <form id="updatePasswordForm">

78
dashboard-ui/usersettings.html
View file

@ -1,78 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="userSettingsPage" data-role="page" class="page type-interior userProfilesConfigurationPage publicUserPage">
<div data-role="content">
<div class="content-primary">
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${TabProfile}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">${TabImage}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">${TabLibraryAccess}</a>
<a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${TabPassword}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabPreferences}</a>
</div>
<form id="userSettingsForm">
<h2>${HeaderDisplaySettings}</h2>
<div>
<input type="checkbox" id="chkDisplayMissingEpisodes" data-mini="true" />
<label for="chkDisplayMissingEpisodes">${LabelDisplayMissingEpisodesWithinSeasons}</label>
</div>
<div>
<input type="checkbox" id="chkDisplayUnairedEpisodes" data-mini="true" />
<label for="chkDisplayUnairedEpisodes">${LabelUnairedMissingEpisodesWithinSeasons}</label>
</div>
<div>
<input type="checkbox" id="chkGroupMoviesIntoCollections" data-mini="true" />
<label for="chkGroupMoviesIntoCollections">${LabelGroupMoviesIntoCollections}</label>
<div class="fieldDescription">${LabelGroupMoviesIntoCollectionsHelp}</div>
</div>
<br />
<h2>${HeaderVideoPlaybackSettings}</h2>
<ul data-role="listview" class="ulForm">
<li>
<label for="selectAudioLanguage">${LabelAudioLanguagePreference}</label>
<select id="selectAudioLanguage" data-mini="true"></select>
</li>
<li>
<input type="checkbox" id="chkPlayDefaultAudioTrack" data-mini="true" />
<label for="chkPlayDefaultAudioTrack">${LabelPlayDefaultAudioTrack}</label>
</li>
<li>
<label for="selectSubtitleLanguage">${LabelSubtitleLanguagePreference}</label>
<select id="selectSubtitleLanguage" data-mini="true"></select>
</li>
<li>
<label for="selectSubtitlePlaybackMode">${LabelSubtitlePlaybackMode}</label>
<select id="selectSubtitlePlaybackMode" data-mini="true">
<option value="Default">${OptionDefaultSubtitles}</option>
<option value="OnlyForced">${OptionOnlyForcedSubtitles}</option>
<option value="Always">${OptionAlwaysPlaySubtitles}</option>
<option value="None">${OptionNoSubtitles}</option>
</select>
<div class="fieldDescription subtitlesDefaultHelp subtitlesHelp" style="display:none;">${OptionDefaultSubtitlesHelp}</div>
<div class="fieldDescription subtitlesAlwaysHelp subtitlesHelp" style="display:none;">${OptionAlwaysPlaySubtitlesHelp}</div>
<div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp" style="display:none;">${OptionOnlyForcedSubtitlesHelp}</div>
<div class="fieldDescription subtitlesNoneHelp subtitlesHelp" style="display:none;">${OptionNoSubtitlesHelp}</div>
</li>
<li>
<button type="submit" data-theme="b" data-icon="check" data-mini="true">
${ButtonOk}
</button>
<button type="button" onclick="history.back();" data-icon="delete" data-mini="true">
${ButtonCancel}
</button>
</li>
</ul>
</form>
</div>
</div>
<script type="text/javascript">
$('#userSettingsForm').on('submit', UserSettingsPage.onSubmit);
</script>
</div>
</body>
</html>