diff --git a/dashboard-ui/addplugin.html b/dashboard-ui/addplugin.html index 9874d7dc36..baf8d67935 100644 --- a/dashboard-ui/addplugin.html +++ b/dashboard-ui/addplugin.html @@ -8,9 +8,10 @@
-

- Plugin Catalog -

+
+ ${TabMyPlugins} + ${TabCatalog} +

diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 0ca71b32d4..28f9bcef2a 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -28,7 +28,7 @@ .listHeader { margin-top: .5em; margin-bottom: .2em; - padding-left: 7px; + padding-left: 4px; } .ehsContent { @@ -1070,3 +1070,85 @@ a.itemTag:hover { width: 300px; } } + +.spotlight { + position: absolute; + left: -220px; + right: 0; + background-size: cover; + background-position: center 25%; + background-repeat: no-repeat; +} + +.spotlight, .spotlightPlaceHolder { + height: 340px; +} + +.spotlightContainer { + min-height: 340px; +} + +.spotlightPlaceHolder { + margin-bottom: 3em; +} + +.spotlightTitle { + margin: 1em 0 .3em; +} + +.spotlightContent { + position: absolute; + top: 60px; + bottom: 55px; + left: 210px; + width: 600px; + background: rgba(0,0,0,.6); + border-radius: 5px; +} + +.rightSpotlightContent { + left: initial; + width: 400px; + right: 100px; +} + +.spotlightPoster { + height: 100%; + background-size: 150px 100%; + background-position: left center; + background-repeat: no-repeat; + overflow: hidden; +} + +.rightSpotlightContent .spotlightPoster { + background-size: 100% 180px; + background-position: center top; +} + +.spotlightContentInner { + padding: 1em 1em 1em 170px; +} + +.spotlightContentInner p { + max-height: 130px; + overflow: hidden; + text-overflow: ellipsis; +} + +.rightSpotlightContent .spotlightContentInner { + padding: 195px 1em 1em 1em; +} + +@media all and (max-height: 1079px) and (max-width: 1400px) { + + .spotlight, .spotlightPlaceHolder, .spotlightTitle { + display: none; + } +} + +@media all and (min-height: 1079px) and (min-width: 1400px) { + + .type-home { + overflow-x: visible!important; + } +} diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css index 30cd31430e..624bb7208f 100644 --- a/dashboard-ui/css/librarymenu.css +++ b/dashboard-ui/css/librarymenu.css @@ -1,24 +1,20 @@ .libraryPage { - padding-top: 54px !important; + padding-top: 53px !important; } .libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) { - padding-top: 97px !important; + padding-top: 102px !important; } .desktopLibraryMenu { position: fixed; left: 0; z-index: 1001; - top: 54px; - background-color: #181818; - width: 180px; + top: 53px; + width: 200px; min-height: 100px; border-bottom-right-radius: 5px; padding-bottom: 10px; -} - -.itemDetailPage .desktopLibraryMenu { background-color: rgba(0,0,0,.6); } @@ -42,6 +38,9 @@ background: #000; padding: 3px .25em 3px 1em; border-bottom: 1px solid #101010; + border-top: 0; + border-left: 0; + border-right: 0; } .viewMenuLink { @@ -165,15 +164,15 @@ } .libraryViewNav { - height: 42px; + height: 48px; overflow: hidden; - border-bottom: 1px solid #333; + border-bottom: 1px solid #222; position: fixed; right: 0; left: 0; - top: 54px; + top: 53px; z-index: 1000; - background-color: #252525; + background-color: #181818; } .libraryViewNavInner { @@ -182,7 +181,7 @@ white-space: nowrap; padding: 0 0 0; overflow-x: auto; - height: 55px; + height: 61px; } .libraryViewNav .ui-btn-active .libraryViewNavLinkContent { @@ -207,7 +206,7 @@ .libraryViewNavLinkContent { border-bottom: 5px solid transparent; display: inline-block; - padding: 0 1em 7px; + padding: 2px 1em 11px; color: #ddd; } @@ -229,7 +228,7 @@ } .libraryPage:not(.itemDetailPage):not(.metadataEditorPage) { - left: 195px !important; + left: 215px !important; width: auto !important; right: 0 !important; } diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index 83d6254242..4205d66bdd 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -119,6 +119,11 @@ pre, textarea.pre { color: #1B58B8; } +/* Bring these jqm font sizes down a little bit */ +.ui-controlgroup-controls label { + font-size: 14px; +} + .hide { display: none; } diff --git a/dashboard-ui/encodingsettings.html b/dashboard-ui/encodingsettings.html index 4f412d7d7b..0b50ae0f6d 100644 --- a/dashboard-ui/encodingsettings.html +++ b/dashboard-ui/encodingsettings.html @@ -46,7 +46,7 @@
${LabelDownMixAudioScaleHelp}
-
  • +
  • ${OptionUpscalingHelp}
    diff --git a/dashboard-ui/index.html b/dashboard-ui/index.html index 981b2e4daf..1f764136b8 100644 --- a/dashboard-ui/index.html +++ b/dashboard-ui/index.html @@ -6,7 +6,7 @@
    - +
    @@ -21,6 +21,8 @@
    + +
    diff --git a/dashboard-ui/metadata.html b/dashboard-ui/metadata.html index 79cea2b9e9..eac329b5eb 100644 --- a/dashboard-ui/metadata.html +++ b/dashboard-ui/metadata.html @@ -4,7 +4,7 @@ ${TitleMetadata} -
    +
    diff --git a/dashboard-ui/metadataadvanced.html b/dashboard-ui/metadataadvanced.html index 1ecb46cf25..9c21fae1e7 100644 --- a/dashboard-ui/metadataadvanced.html +++ b/dashboard-ui/metadataadvanced.html @@ -4,7 +4,7 @@ ${TitleMetadata} -
    +
    @@ -24,41 +25,37 @@
  • - - + + - - + + - - + +
    ${ExtractChapterImagesHelp}
    • -
    -

    ${HeaderAutomaticUpdates}

    -
    -
      -
    • - - -
      ${LabelAutomaticUpdatesFanartHelp}
      -
      • -
    • - - -
      ${LabelAutomaticUpdatesTmdbHelp}
      -
      • -
    • - - -
      ${LabelAutomaticUpdatesTvdbHelp}
      -
      • -
    -
    -
    +

    ${HeaderAutomaticUpdates}

    +
      +
    • + + +
      ${LabelAutomaticUpdatesFanartHelp}
      +
      • +
    • + + +
      ${LabelAutomaticUpdatesTmdbHelp}
      +
      • +
    • + + +
      ${LabelAutomaticUpdatesTvdbHelp}
      +
      • +

    • diff --git a/dashboard-ui/metadataimages.html b/dashboard-ui/metadataimages.html index c0697b8798..4613aceae4 100644 --- a/dashboard-ui/metadataimages.html +++ b/dashboard-ui/metadataimages.html @@ -4,7 +4,7 @@ ${TitleMetadata} -
      +
      @@ -26,13 +27,13 @@
      - + -
      +
      -
      +
      diff --git a/dashboard-ui/metadatasubtitles.html b/dashboard-ui/metadatasubtitles.html new file mode 100644 index 0000000000..5d2dd5f75b --- /dev/null +++ b/dashboard-ui/metadatasubtitles.html @@ -0,0 +1,70 @@ + + + + ${TitleMetadata} + + +
      + +
      + +
      +
      + ${TabBasics} + ${TabMovies} + ${TabTV} + ${TabGames} + ${TabMusic} + ${TabOthers} + ${TabSubtitles} + ${TabAdvanced} +
      + + +

      ${HeaderSubtitleDownloadingHelp}

      +
      + ${HeaderDownloadSubtitlesFor} + + + + + +
      +
      +
        +
      • + + +
        ${LabelRequireExternalSubtitlesHelp}
        +
        • +
      • + + +
        • +
      • + + +
        • +
      +
      +
        +
      • + + +
        • +
      + +
      + +
      + + +
      + + diff --git a/dashboard-ui/plugincatalog.html b/dashboard-ui/plugincatalog.html index 556e39b0fe..ab06fb7c83 100644 --- a/dashboard-ui/plugincatalog.html +++ b/dashboard-ui/plugincatalog.html @@ -9,8 +9,7 @@

      Types: Free, diff --git a/dashboard-ui/plugins.html b/dashboard-ui/plugins.html index 6eaaef3c9e..2cbd3351f5 100644 --- a/dashboard-ui/plugins.html +++ b/dashboard-ui/plugins.html @@ -9,9 +9,8 @@

      - ${TabMyPlugins} + ${TabMyPlugins} ${TabCatalog} - ${TabUpdates}
      diff --git a/dashboard-ui/pluginupdates.html b/dashboard-ui/pluginupdates.html deleted file mode 100644 index 4be7c3554e..0000000000 --- a/dashboard-ui/pluginupdates.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - ${PluginsTitle} - - -
      - -
      -
      -
      - ${TabMyPlugins} - ${TabCatalog} - ${TabUpdates} -
      - -
      - - - - - - - - - - -
      ${HeaderAutomaticUpdates}${HeaderUpdateLevel}
      - -
      -
      - -
      - ${DevBuildWarning} -
      - -
      -
      -
      -
      - - diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js index 8a6fc844ed..8c9c5518e6 100644 --- a/dashboard-ui/scripts/indexpage.js +++ b/dashboard-ui/scripts/indexpage.js @@ -1,11 +1,118 @@ (function ($, document, apiClient) { + function fillSeriesSpotlight(elem, item, nextUp) { + + var html = '

      ' + item.Name + '

      '; + + var imgUrl = ApiClient.getImageUrl(item.Id, { + type: "Backdrop", + tag: item.BackdropImageTags[0] + }); + + html += '
      '; + + imgUrl = ApiClient.getImageUrl(item.Id, { + type: "Primary", + tag: item.ImageTags.Primary, + EnableImageEnhancers: false + }); + + html += '
      '; + html += '
      '; + + html += '
      '; + html += '

      ' + LibraryBrowser.getMiscInfoHtml(item) + '

      '; + html += '

      ' + (item.Overview || '') + '

      '; + html += '
      '; + + html += '
      '; + html += '
      '; + + if (nextUp && nextUp.ImageTags && nextUp.ImageTags.Primary) { + + html += '
      '; + + imgUrl = ApiClient.getImageUrl(nextUp.Id, { + type: "Primary", + tag: nextUp.ImageTags.Primary, + EnableImageEnhancers: false + }); + + html += '
      '; + + html += '
      '; + html += LibraryBrowser.getPosterViewDisplayName(nextUp); + html += '
      '; + + html += '
      '; + html += '
      '; + } + + html += '
      '; + + html += '
      '; + + $(elem).html(html); + + + } + + function reloadSpotlight(page, allPromise) { + + var options = { + + SortBy: "Random", + SortOrder: "Descending", + Limit: 1, + Recursive: true, + IncludeItemTypes: "Series", + ImageTypes: "Backdrop,Primary", + Fields: "Overview" + }; + + ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + + allPromise.done(function () { + + var index = 0; + $('.spotlightContainer', page).each(function () { + + var elem = this; + var item = result.Items[index]; + index++; + + if (item && item.Type == 'Series') { + + options = { + + Limit: 1, + UserId: Dashboard.getCurrentUserId(), + SeriesId: item.Id + }; + + ApiClient.getNextUpEpisodes(options).done(function (nextUpResult) { + + fillSeriesSpotlight(elem, item, nextUpResult.Items[0]); + }); + + } else { + $(this).hide(); + } + + }); + + }); + }); + } + $(document).on('pagebeforeshow', "#indexPage", function () { var screenWidth = $(window).width(); var page = this; + $('.spotlightContainer', page).empty(); + var options = { SortBy: "DatePlayed", @@ -19,7 +126,7 @@ ExcludeLocationTypes: "Virtual" }; - ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { if (result.Items.length) { $('#resumableSection', page).show(); @@ -43,7 +150,7 @@ SortBy: "DateCreated", SortOrder: "Descending", - Limit: screenWidth >= 1920 ? 20 : (screenWidth >= 1440 ? 16 : (screenWidth >= 800 ? 12 : 8)), + Limit: screenWidth >= 2400 ? 21 : (screenWidth >= 1920 ? 15 : (screenWidth >= 1440 ? 12 : (screenWidth >= 800 ? 12 : 8))), Recursive: true, Fields: "PrimaryImageAspectRatio", Filters: "IsUnplayed,IsNotFolder", @@ -51,7 +158,7 @@ ExcludeLocationTypes: "Virtual,Remote" }; - ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + var promise2 = ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { $('#recentlyAddedItems', page).html(LibraryBrowser.getPosterViewHtml({ @@ -63,6 +170,9 @@ })).createPosterItemMenus(); }); + + //var allPromise = $.when(promise1, promise2); + //reloadSpotlight(page, allPromise); }); })(jQuery, document, ApiClient); \ No newline at end of file diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js index 649d52092d..004bcca608 100644 --- a/dashboard-ui/scripts/mediaplayer.js +++ b/dashboard-ui/scripts/mediaplayer.js @@ -60,7 +60,7 @@ self.nextTrack(); }; - self.startProgressInterval = function (itemId, mediaSourceId) { + self.startProgressInterval = function () { clearProgressInterval(); @@ -69,7 +69,7 @@ currentProgressInterval = setInterval(function () { if (currentMediaElement) { - sendProgressUpdate(itemId, mediaSourceId); + sendProgressUpdate(); } }, intervalTime); @@ -162,8 +162,8 @@ $(this).on('ended.playbackstopped', self.onPlaybackStopped).on('ended.playnext', self.playNextAfterEnded); - self.startProgressInterval(currentItem.Id, currentMediaSource.Id); - sendProgressUpdate(currentItem.Id, currentMediaSource.Id); + self.startProgressInterval(); + sendProgressUpdate(); }); @@ -1064,7 +1064,7 @@ $(self).trigger('playbackstart', [state]); - self.startProgressInterval(item.Id, mediaSource.Id); + self.startProgressInterval(); }; self.onVolumeChanged = function (playerElement) { @@ -1118,18 +1118,19 @@ } }); - function sendProgressUpdate(itemId, mediaSourceId) { + function sendProgressUpdate() { - ApiClient.reportPlaybackProgress({ - itemId: itemId, - MediaSourceId: mediaSourceId, - IsPaused: currentMediaElement.paused, - IsMuted: currentMediaElement.volume == 0, - VolumeLevel: currentMediaElement.volume * 100, - PositionTicks: self.getCurrentTicks(), + var state = self.getPlayerStateInternal(currentMediaElement, currentItem, currentMediaSource); + + var info = { + QueueableMediaTypes: state.NowPlayingItem.MediaType, + ItemId: state.NowPlayingItem.Id, + NowPlayingItem: state.NowPlayingItem + }; - CanSeek: currentMediaSource.RunTimeTicks && currentMediaSource.RunTimeTicks > 0 - }); + info = $.extend(info, state.PlayState); + + ApiClient.reportPlaybackProgress(info); } function clearProgressInterval() { diff --git a/dashboard-ui/scripts/metadataadvanced.js b/dashboard-ui/scripts/metadataadvanced.js index e0f12829b7..d496e7da75 100644 --- a/dashboard-ui/scripts/metadataadvanced.js +++ b/dashboard-ui/scripts/metadataadvanced.js @@ -15,9 +15,9 @@ load: function (page, config) { - $('#chkMovies', page).checked(config.EnableMovieChapterImageExtraction).checkboxradio("refresh"); - $('#chkEpisodes', page).checked(config.EnableEpisodeChapterImageExtraction).checkboxradio("refresh"); - $('#chkOtherVideos', page).checked(config.EnableOtherVideoChapterImageExtraction).checkboxradio("refresh"); + $('#chkChaptersMovies', page).checked(config.EnableMovieChapterImageExtraction).checkboxradio("refresh"); + $('#chkChaptersEpisodes', page).checked(config.EnableEpisodeChapterImageExtraction).checkboxradio("refresh"); + $('#chkChaptersOtherVideos', page).checked(config.EnableOtherVideoChapterImageExtraction).checkboxradio("refresh"); $('#chkEnableTmdbPersonUpdates', page).checked(config.EnableTmdbUpdates).checkboxradio("refresh"); $('#chkEnableTvdbUpdates', page).checked(config.EnableTvDbUpdates).checkboxradio("refresh"); @@ -53,9 +53,9 @@ ApiClient.getServerConfiguration().done(function (config) { - config.EnableMovieChapterImageExtraction = $('#chkMovies', form).checked(); - config.EnableEpisodeChapterImageExtraction = $('#chkEpisodes', form).checked(); - config.EnableOtherVideoChapterImageExtraction = $('#chkOtherVideos', form).checked(); + config.EnableMovieChapterImageExtraction = $('#chkChaptersMovies', form).checked(); + config.EnableEpisodeChapterImageExtraction = $('#chkChaptersEpisodes', form).checked(); + config.EnableOtherVideoChapterImageExtraction = $('#chkChaptersOtherVideos', form).checked(); config.EnableTvDbUpdates = $('#chkEnableTvdbUpdates', form).checked(); config.EnableTmdbUpdates = $('#chkEnableTmdbPersonUpdates', form).checked(); diff --git a/dashboard-ui/scripts/metadatasubtitles.js b/dashboard-ui/scripts/metadatasubtitles.js new file mode 100644 index 0000000000..8f83d8236d --- /dev/null +++ b/dashboard-ui/scripts/metadatasubtitles.js @@ -0,0 +1,68 @@ +(function ($, document, window) { + + function loadPage(page, config, systemInfo) { + + $('#chkSubtitlesMovies', page).checked(config.SubtitleOptions.DownloadMovieSubtitles).checkboxradio("refresh"); + $('#chkSubtitlesEpisodes', page).checked(config.SubtitleOptions.DownloadEpisodeSubtitles).checkboxradio("refresh"); + + $('#chkRequireExternalSubtitles', page).checked(config.SubtitleOptions.RequireExternalSubtitles).checkboxradio("refresh"); + + $('#txtOpenSubtitleUsername', page).val(config.SubtitleOptions.OpenSubtitlesUsername); + $('#txtOpenSubtitlePassword', page).val(''); + + Dashboard.hideLoadingMsg(); + } + + $(document).on('pageshow', "#metadataSubtitlesPage", function () { + + Dashboard.showLoadingMsg(); + + var page = this; + + var promise1 = ApiClient.getServerConfiguration(); + var promise2 = ApiClient.getSystemInfo(); + + $.when(promise1, promise2).done(function (response1, response2) { + + loadPage(page, response1[0], response2[0]); + + }); + + }).on('pageinit', "#metadataSubtitlesPage", function () { + + var page = this; + + + }); + + function metadataSubtitlesPage() { + + var self = this; + + self.onSubmit = function () { + Dashboard.showLoadingMsg(); + + var form = this; + + ApiClient.getServerConfiguration().done(function (config) { + + config.SubtitleOptions.DownloadMovieSubtitles = $('#chkSubtitlesMovies', form).checked(); + config.SubtitleOptions.DownloadEpisodeSubtitles = $('#chkSubtitlesEpisodes', form).checked(); + + config.SubtitleOptions.RequireExternalSubtitles = $('#chkRequireExternalSubtitles', form).checked(); + + config.SubtitleOptions.OpenSubtitlesUsername = $('#txtOpenSubtitleUsername', form).val(); + + config.SubtitleOptions.OpenSubtitlesPasswordHash = $('#txtOpenSubtitlePassword', form).val(); + + ApiClient.updateServerConfiguration(config).done(Dashboard.processServerConfigurationUpdateResult); + }); + + // Disable default form submission + return false; + }; + } + + window.MetadataSubtitlesPage = new metadataSubtitlesPage(); + +})(jQuery, document, window); diff --git a/dashboard-ui/scripts/pluginupdatespage.js b/dashboard-ui/scripts/pluginupdatespage.js deleted file mode 100644 index 96c5fb1585..0000000000 --- a/dashboard-ui/scripts/pluginupdatespage.js +++ /dev/null @@ -1,115 +0,0 @@ -var PluginUpdatesPage = { - - onPageShow: function () { - - Dashboard.showLoadingMsg(); - - $('.liPluginUpdate', this).remove(); - - ApiClient.getInstalledPlugins().done(PluginUpdatesPage.loadPlugins); - - }, - - loadPlugins: function (plugins) { - - var elem = $('#tbodyPluginUpdates', $.mobile.activePage).html(''); - - for (var i = 0, length = plugins.length; i < length; i++) { - - PluginUpdatesPage.addPlugin(plugins[i], i, elem); - - } - - Dashboard.hideLoadingMsg(); - }, - - addPlugin: function (plugin, fieldIndex, elem) { - - var html = ""; - - html += ""; - - html += "

      " + plugin.Name + "

      "; - - var fieldId = "liPluginUpdateFielda" + fieldIndex; - - var enabledOptions = [ - { name: Globalize.translate('OptionOff'), value: 'Off' }, - { name: Globalize.translate('OptionOn'), value: 'On' } - ]; - var options = PluginUpdatesPage.getHtmlOptions(enabledOptions, (plugin.EnableAutoUpdate ? "On" : "Off")); - - html += ""; - html += ""; - html += ""; - - fieldId = "liPluginUpdateFieldb" + fieldIndex; - - var updateOptions = [ - { name: Globalize.translate('OptionRelease'), value: 'Release' }, - { name: Globalize.translate('OptionBeta'), value: 'Beta' }, - { name: Globalize.translate('OptionDev'), value: 'Dev' } - ]; - options = PluginUpdatesPage.getHtmlOptions(updateOptions, plugin.UpdateClass); - - html += ""; - html += ""; - html += ""; - - html += ""; - - elem.append(html).trigger('create'); - }, - - getHtmlOptions: function (options, selectedValue) { - - var html = ""; - - for (var i = 0, length = options.length; i < length; i++) { - - var option = options[i]; - var name = option.name; - var value = option.value; - - if (value == selectedValue) { - html += ''; - } else { - html += ''; - } - } - - - return html; - - }, - - setAutoUpdate: function (select) { - - var id = $(select).attr('data-id'); - - Dashboard.showLoadingMsg(); - - ApiClient.getPluginConfiguration(id).done(function (config) { - - config.EnableAutoUpdate = select.selectedIndex === 1; - - ApiClient.updatePluginConfiguration(id, config).done(Dashboard.hideLoadingMsg); - }); - }, - - setUpdateClass: function (select) { - - var id = $(select).attr('data-id'); - - Dashboard.showLoadingMsg(); - - ApiClient.getPluginConfiguration(id).done(function (config) { - - config.UpdateClass = select.value; - - ApiClient.updatePluginConfiguration(id, config).done(Dashboard.hideLoadingMsg); - }); - } -}; - -$(document).on('pageshow', "#pluginUpdatesPage", PluginUpdatesPage.onPageShow); \ No newline at end of file diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index fd6ac2a0e0..720c063c00 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -745,7 +745,7 @@ var Dashboard = { }, { name: "Metadata", href: "metadata.html", - selected: pageElem.id == "metadataConfigurationPage" || pageElem.id == "advancedMetadataConfigurationPage" || pageElem.id == "metadataImagesConfigurationPage" + selected: page.hasClass('metadataConfigurationPage') }, { name: "Auto-Organize", href: "autoorganizelog.html", diff --git a/dashboard-ui/usersettings.html b/dashboard-ui/usersettings.html index 6bea460429..e461ade4b2 100644 --- a/dashboard-ui/usersettings.html +++ b/dashboard-ui/usersettings.html @@ -36,6 +36,7 @@
    • +
      ${LabelAudioLanguagePreferenceHelp}