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

Merge pull request #1131 from dmitrylyzo/fix-icons-webos2

Browse source 
Icons for WebOS 2
This commit is contained in:
Vasily 2020-05-03 23:24:26 +03:00 • committed by GitHub
commit d5c7078c3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
122 changed files with 511 additions and 509 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/apikeys.html
View file

@ -4,7 +4,7 @@
<div class="detailSectionHeader"> <div class="detailSectionHeader">
<h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2> <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
<button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${ButtonAdd}"> <button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${ButtonAdd}">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
</div> </div>
<p>${HeaderApiKeysHelp}</p> <p>${HeaderApiKeysHelp}</p>

13
src/assets/css/librarybrowser.css
View file

@ -644,12 +644,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
height: 23vw; /* Dirty hack to get it to look somewhat square. Less than ideal. */ height: 23vw; /* Dirty hack to get it to look somewhat square. Less than ideal. */
} }
.btnSyncComplete i { .itemDetailGalleryLink.defaultCardBackground > .material-icons {
-webkit-border-radius: 100em;
border-radius: 100em;
}
.itemDetailGalleryLink.defaultCardBackground > i {
font-size: 15vw; font-size: 15vw;
margin-top: 50%; margin-top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@ -681,10 +676,6 @@ div.itemDetailGalleryLink.defaultCardBackground {
} }
} }
.btnSyncComplete {
background: #673ab7 !important;
}
.emby-button.detailFloatingButton { .emby-button.detailFloatingButton {
position: absolute; position: absolute;
background-color: rgba(0, 0, 0, 0.5) !important; background-color: rgba(0, 0, 0, 0.5) !important;
@ -696,7 +687,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
color: rgba(255, 255, 255, 0.76); color: rgba(255, 255, 255, 0.76);
} }
.emby-button.detailFloatingButton i { .emby-button.detailFloatingButton .material-icons {
font-size: 3.5em; font-size: 3.5em;
} }

2
src/components/accessschedule/accessschedule.template.html
View file

@ -1,6 +1,6 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<i class="material-icons arrow_back"></i> <span class="material-icons arrow_back"></span>
</button> </button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${HeaderAccessSchedule} ${HeaderAccessSchedule}

6
src/components/actionsheet/actionsheet.js
View file

@ -158,7 +158,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
} }
if (layoutManager.tv) { if (layoutManager.tv) {
html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
} }
// If any items have an icon, give them all an icon just to make sure they're all lined up evenly // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
@ -226,9 +226,9 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
if (itemIcon) { if (itemIcon) {
html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">' + itemIcon + '</i>'; html += '<span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons ' + itemIcon + '"></span>';
} else if (renderIcon && !center) { } else if (renderIcon && !center) {
html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons" style="visibility:hidden;">check</i>'; html += '<span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons check" style="visibility:hidden;"></span>';
} }
html += '<div class="listItemBody actionsheetListItemBody">'; html += '<div class="listItemBody actionsheetListItemBody">';

8
src/components/activitylog.js
View file

@ -13,12 +13,12 @@ define(["events", "globalize", "dom", "date-fns", "dfnshelper", "userSettings",
} }
if (entry.UserId && entry.UserPrimaryImageTag) { if (entry.UserId && entry.UserPrimaryImageTag) {
html += '<i class="listItemIcon material-icons" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, { html += '<span class="listItemIcon material-icons dvr" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
type: "Primary", type: "Primary",
tag: entry.UserPrimaryImageTag tag: entry.UserPrimaryImageTag
}) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\">dvr</i>"; }) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\"></span>";
} else { } else {
html += '<i class="listItemIcon material-icons" style="background-color:' + color + '">' + icon + '</i>'; html += '<span class="listItemIcon material-icons ' + icon + '" style="background-color:' + color + '"></span>';
} }
html += '<div class="listItemBody three-line">'; html += '<div class="listItemBody three-line">';
@ -34,7 +34,7 @@ define(["events", "globalize", "dom", "date-fns", "dfnshelper", "userSettings",
html += "</div>"; html += "</div>";
if (entry.Overview) { if (entry.Overview) {
html += '<button type="button" is="paper-icon-button-light" class="btnEntryInfo" data-id="' + entry.Id + '" title="' + globalize.translate("Info") + '"><i class="material-icons">info</i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnEntryInfo" data-id="' + entry.Id + '" title="' + globalize.translate("Info") + '"><span class="material-icons info"></span></button>';
} }
return html += "</div>"; return html += "</div>";

4
src/components/alphapicker/alphapicker.js
View file

@ -67,7 +67,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
html += '<div class="' + rowClassName + '">'; html += '<div class="' + rowClassName + '">';
if (options.mode === 'keyboard') { if (options.mode === 'keyboard') {
html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon space_bar"></i></button>'; html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><span class="material-icons alphaPickerButtonIcon space_bar"></span></button>';
} else { } else {
letters = ['#']; letters = ['#'];
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
@ -77,7 +77,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
if (options.mode === 'keyboard') { if (options.mode === 'keyboard') {
html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon">backspace</i></button>'; html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><span class="material-icons alphaPickerButtonIcon backspace"></span></button>';
html += '</div>'; html += '</div>';
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

36
src/components/cardbuilder/cardBuilder.js
View file

@ -869,7 +869,7 @@ import 'programStyles';
if (isOuterFooter && options.cardLayout && layoutManager.mobile) { if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
if (options.cardFooterAside !== 'none') { if (options.cardFooterAside !== 'none') {
html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="material-icons more_horiz"></i></button>'; html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><span class="material-icons more_horiz"></span></button>';
} }
} }
@ -1418,15 +1418,15 @@ import 'programStyles';
const btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction'; const btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
if (options.centerPlayButton) { if (options.centerPlayButton) {
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="material-icons cardOverlayButtonIcon play_arrow"></i></button>'; overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><span class="material-icons cardOverlayButtonIcon play_arrow"></span></button>';
} }
if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') { if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="material-icons cardOverlayButtonIcon play_arrow"></i></button>'; overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><span class="material-icons cardOverlayButtonIcon play_arrow"></span></button>';
} }
if (options.overlayMoreButton) { if (options.overlayMoreButton) {
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon more_horiz"></i></button>'; overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon more_horiz"></span></button>';
} }
} }
@ -1560,7 +1560,7 @@ import 'programStyles';
const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light'; const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
if (playbackManager.canPlay(item)) { if (playbackManager.canPlay(item)) {
html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow"></i></button>'; html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow"></span></button>';
} }
html += '<div class="cardOverlayButton-br flex">'; html += '<div class="cardOverlayButton-br flex">';
@ -1569,7 +1569,7 @@ import 'programStyles';
if (itemHelper.canMarkPlayed(item)) { if (itemHelper.canMarkPlayed(item)) {
require(['emby-playstatebutton']); require(['emby-playstatebutton']);
html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">check</i></button>'; html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
} }
if (itemHelper.canRate(item)) { if (itemHelper.canRate(item)) {
@ -1577,10 +1577,10 @@ import 'programStyles';
const likes = userData.Likes == null ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
require(['emby-ratingbutton']); require(['emby-ratingbutton']);
html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>'; html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
} }
html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_horiz"></i></button>'; html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_horiz"></span></button>';
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
@ -1596,27 +1596,27 @@ import 'programStyles';
*/ */
export function getDefaultText(item, options) { export function getDefaultText(item, options) {
if (item.CollectionType) { if (item.CollectionType) {
return '<i class="cardImageIcon material-icons ' + imageHelper.getLibraryIcon(item.CollectionType) + '"></i>'; return '<span class="cardImageIcon material-icons ' + imageHelper.getLibraryIcon(item.CollectionType) + '"></span>';
} }
switch (item.Type) { switch (item.Type) {
case 'MusicAlbum': case 'MusicAlbum':
return '<i class="cardImageIcon material-icons">album</i>'; return '<span class="cardImageIcon material-icons album"></span>';
case 'MusicArtist': case 'MusicArtist':
case 'Person': case 'Person':
return '<i class="cardImageIcon material-icons">person</i>'; return '<span class="cardImageIcon material-icons person"></span>';
case 'Movie': case 'Movie':
return '<i class="cardImageIcon material-icons">movie</i>'; return '<span class="cardImageIcon material-icons movie"></span>';
case 'Series': case 'Series':
return '<i class="cardImageIcon material-icons">tv</i>'; return '<span class="cardImageIcon material-icons tv"></span>';
case 'Book': case 'Book':
return '<i class="cardImageIcon material-icons">book</i>'; return '<span class="cardImageIcon material-icons book"></span>';
case 'Folder': case 'Folder':
return '<i class="cardImageIcon material-icons">folder</i>'; return '<span class="cardImageIcon material-icons folder"></span>';
} }
if (options && options.defaultCardImageIcon) { if (options && options.defaultCardImageIcon) {
return '<i class="cardImageIcon material-icons">' + options.defaultCardImageIcon + '</i>'; return '<span class="cardImageIcon material-icons ' + options.defaultCardImageIcon + '"></span>';
} }
const defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item); const defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item);
@ -1718,7 +1718,7 @@ import 'programStyles';
indicatorsElem = ensureIndicators(card, indicatorsElem); indicatorsElem = ensureIndicators(card, indicatorsElem);
indicatorsElem.appendChild(playedIndicator); indicatorsElem.appendChild(playedIndicator);
} }
playedIndicator.innerHTML = '<i class="material-icons indicatorIcon">check</i>'; playedIndicator.innerHTML = '<span class="material-icons indicatorIcon check"></span>';
} else { } else {
playedIndicator = card.querySelector('.playedIndicator'); playedIndicator = card.querySelector('.playedIndicator');
@ -1808,7 +1808,7 @@ import 'programStyles';
const icon = cell.querySelector('.timerIndicator'); const icon = cell.querySelector('.timerIndicator');
if (!icon) { if (!icon) {
const indicatorsElem = ensureIndicators(cell); const indicatorsElem = ensureIndicators(cell);
indicatorsElem.insertAdjacentHTML('beforeend', '<i class="material-icons timerIndicator indicatorIcon fiber_manual_record"></i>'); indicatorsElem.insertAdjacentHTML('beforeend', '<span class="material-icons timerIndicator indicatorIcon fiber_manual_record"></span>');
} }
cell.setAttribute('data-timerid', newTimerId); cell.setAttribute('data-timerid', newTimerId);
} }

2
src/components/cardbuilder/chaptercardbuilder.js
View file

@ -90,7 +90,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">'); var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
if (!imgUrl) { if (!imgUrl) {
cardImageContainer += '<i class="material-icons cardImageIcon local_movies"></i>'; cardImageContainer += '<span class="material-icons cardImageIcon local_movies"></span>';
} }
var nameHtml = ''; var nameHtml = '';

6
src/components/channelmapper/channelmapper.js
View file

@ -60,7 +60,7 @@ define(["dom", "dialogHelper", "loading", "connectionManager", "globalize", "act
function getTunerChannelHtml(channel, providerName) { function getTunerChannelHtml(channel, providerName) {
var html = ""; var html = "";
html += '<div class="listItem">'; html += '<div class="listItem">';
html += '<i class="material-icons listItemIcon">dvr</i>'; html += '<span class="material-icons listItemIcon dvr"></span>';
html += '<div class="listItemBody two-line">'; html += '<div class="listItemBody two-line">';
html += '<h3 class="listItemBodyText">'; html += '<h3 class="listItemBodyText">';
html += channel.Name; html += channel.Name;
@ -73,7 +73,7 @@ define(["dom", "dialogHelper", "loading", "connectionManager", "globalize", "act
html += "</div>"; html += "</div>";
html += "</div>"; html += "</div>";
html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="material-icons mode_edit"></i></button>'; html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><span class="material-icons mode_edit"></span></button>';
return html += "</div>"; return html += "</div>";
} }
@ -116,7 +116,7 @@ define(["dom", "dialogHelper", "loading", "connectionManager", "globalize", "act
var html = ""; var html = "";
var title = globalize.translate("MapChannels"); var title = globalize.translate("MapChannels");
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">'; html += '<h3 class="formDialogHeaderTitle">';
html += title; html += title;
html += "</h3>"; html += "</h3>";

4
src/components/collectioneditor/collectioneditor.js
View file

@ -230,13 +230,13 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection'); var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">'; html += '<h3 class="formDialogHeaderTitle">';
html += title; html += title;
html += '</h3>'; html += '</h3>';
if (appHost.supports('externallinks')) { if (appHost.supports('externallinks')) {
html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="material-icons">info</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>'; html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><span class="material-icons info"></span><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
} }
html += '</div>'; html += '</div>';

6
src/components/directorybrowser/directorybrowser.js
View file

@ -76,7 +76,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
html += name; html += name;
html += "</div>"; html += "</div>";
html += "</div>"; html += "</div>";
html += '<i class="material-icons arrow_forward" style="font-size:inherit;"></i>'; html += '<span class="material-icons arrow_forward" style="font-size:inherit;"></span>';
html += "</div>"; html += "</div>";
return html; return html;
} }
@ -116,7 +116,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + globalize.translate(labelKey) + '"/>'; html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + globalize.translate(labelKey) + '"/>';
html += "</div>"; html += "</div>";
if (!readOnlyAttribute) { if (!readOnlyAttribute) {
html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + globalize.translate("ButtonRefresh") + '"><i class="material-icons">search</i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + globalize.translate("ButtonRefresh") + '"><span class="material-icons search"></span></button>';
} }
html += "</div>"; html += "</div>";
if (!readOnlyAttribute) { if (!readOnlyAttribute) {
@ -264,7 +264,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
var html = ""; var html = "";
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">'; html += '<h3 class="formDialogHeaderTitle">';
html += options.header || globalize.translate("HeaderSelectPath"); html += options.header || globalize.translate("HeaderSelectPath");
html += "</h3>"; html += "</h3>";

2
src/components/favoriteitems.js
View file

@ -136,7 +136,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
html += '<h2 class="sectionTitle sectionTitle-cards">'; html += '<h2 class="sectionTitle sectionTitle-cards">';
html += globalize.translate(section.name); html += globalize.translate(section.name);
html += "</h2>"; html += "</h2>";
html += '<i class="material-icons chevron_right"></i>'; html += '<span class="material-icons chevron_right"></span>';
html += "</a>"; html += "</a>";
} else { } else {
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>"; html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";

2
src/components/filtermenu/filtermenu.js
View file

@ -279,7 +279,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
var html = ''; var html = '';
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>'; html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
html += '</div>'; html += '</div>';

2
src/components/guide/guide-settings.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${Settings} ${Settings}
</h3> </h3>

14
src/components/guide/guide.js
View file

@ -415,7 +415,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var status; var status;
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
return '<i class="material-icons programIcon seriesTimerIcon fiber_smart_record"></i>'; return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>';
} else if (item.TimerId || item.SeriesTimerId) { } else if (item.TimerId || item.SeriesTimerId) {
status = item.Status || 'Cancelled'; status = item.Status || 'Cancelled';
@ -429,13 +429,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
if (item.SeriesTimerId) { if (item.SeriesTimerId) {
if (status !== 'Cancelled') { if (status !== 'Cancelled') {
return '<i class="material-icons programIcon seriesTimerIcon fiber_smart_record"></i>'; return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>';
} }
return '<i class="material-icons programIcon seriesTimerIcon seriesTimerIcon-inactive fiber_smart_record"></i>'; return '<span class="material-icons programIcon seriesTimerIcon seriesTimerIcon-inactive fiber_smart_record"></span>';
} }
return '<i class="material-icons programIcon timerIcon fiber_manual_record"></i>'; return '<span class="material-icons programIcon timerIcon fiber_manual_record"></span>';
} }
function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) { function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
@ -549,7 +549,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
html += '<div class="' + guideProgramNameClass + '">'; html += '<div class="' + guideProgramNameClass + '">';
html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon material-icons keyboard_arrow_left"></i></div>'; html += '<div class="guide-programNameCaret hide"><span class="guideProgramNameCaretIcon material-icons keyboard_arrow_left"></span></div>';
html += '<div class="guideProgramNameText">' + program.Name; html += '<div class="guideProgramNameText">' + program.Name;
@ -577,7 +577,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
html += '</div>'; html += '</div>';
if (program.IsHD && options.showHdIcon) { if (program.IsHD && options.showHdIcon) {
//html += '<i class="guideHdIcon material-icons programIcon">hd</i>'; //html += '<span class="guideHdIcon material-icons programIcon hd"></span>';
if (layoutManager.tv) { if (layoutManager.tv) {
html += '<div class="programIcon guide-programTextIcon guide-programTextIcon-tv">HD</div>'; html += '<div class="programIcon guide-programTextIcon guide-programTextIcon-tv">HD</div>';
} else { } else {
@ -1105,7 +1105,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var icon = cell.querySelector('.timerIcon'); var icon = cell.querySelector('.timerIcon');
if (!icon) { if (!icon) {
cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon material-icons programIcon fiber_manual_record"></i>'); cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<span class="timerIcon material-icons programIcon fiber_manual_record"></span>');
} }
if (newTimerId) { if (newTimerId) {

6
src/components/guide/tvguide.template.html
View file

@ -10,7 +10,7 @@
<div class="guide-headerTimeslots"> <div class="guide-headerTimeslots">
<div class="guide-channelTimeslotHeader"> <div class="guide-channelTimeslotHeader">
<button is="paper-icon-button-light" type="button" class="btnGuideViewSettings"> <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
<i class="material-icons btnGuideViewSettingsIcon more_horiz"></i> <span class="material-icons btnGuideViewSettingsIcon more_horiz"></span>
</button> </button>
</div> </div>
<div class="timeslotHeaders scrollX guideScroller"></div> <div class="timeslotHeaders scrollX guideScroller"></div>
@ -30,9 +30,9 @@
<div class="guideOptions hide"> <div class="guideOptions hide">
<button is="paper-icon-button-light" type="button" class="btnPreviousPage"> <button is="paper-icon-button-light" type="button" class="btnPreviousPage">
<i class="material-icons arrow_back"></i> <span class="material-icons arrow_back"></span>
</button> </button>
<button is="paper-icon-button-light" type="button" class="btnNextPage"> <button is="paper-icon-button-light" type="button" class="btnNextPage">
<i class="material-icons arrow_forward"></i> <span class="material-icons arrow_forward"></span>
</button> </button>
</div> </div>

6
src/components/homescreensettings/homescreensettings.js
View file

@ -149,7 +149,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">'; currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
currentHtml += '<i class="material-icons listItemIcon folder_open"></i>'; currentHtml += '<span class="material-icons listItemIcon folder_open"></span>';
currentHtml += '<div class="listItemBody">'; currentHtml += '<div class="listItemBody">';
@ -159,8 +159,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
currentHtml += '</div>'; currentHtml += '</div>';
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="material-icons keyboard_arrow_up"></i></button>'; currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><span class="material-icons keyboard_arrow_up"></span></button>';
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="material-icons keyboard_arrow_down"></i></button>'; currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><span class="material-icons keyboard_arrow_down"></span></button>';
currentHtml += '</div>'; currentHtml += '</div>';

8
src/components/homesections/homesections.js
View file

@ -183,7 +183,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
for (var i = 0, length = items.length; i < length; i++) { for (var i = 0, length = items.length; i < length; i++) {
var item = items[i]; var item = items[i];
var icon = imageHelper.getLibraryIcon(item.CollectionType); var icon = imageHelper.getLibraryIcon(item.CollectionType);
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><i class="material-icons homeLibraryIcon ' + icon + '"></i><span class="homeLibraryText">' + item.Name + '</span></a>'; html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '"></span><span class="homeLibraryText">' + item.Name + '</span></a>';
} }
html += '</div>'; html += '</div>';
@ -282,7 +282,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
html += '<h2 class="sectionTitle sectionTitle-cards">'; html += '<h2 class="sectionTitle sectionTitle-cards">';
html += globalize.translate('LatestFromLibrary', parent.Name); html += globalize.translate('LatestFromLibrary', parent.Name);
html += '</h2>'; html += '</h2>';
html += '<i class="material-icons chevron_right"></i>'; html += '<span class="material-icons chevron_right"></span>';
html += '</a>'; html += '</a>';
} else { } else {
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
@ -630,7 +630,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
html += '<h2 class="sectionTitle sectionTitle-cards">'; html += '<h2 class="sectionTitle sectionTitle-cards">';
html += globalize.translate('HeaderOnNow'); html += globalize.translate('HeaderOnNow');
html += '</h2>'; html += '</h2>';
html += '<i class="material-icons chevron_right"></i>'; html += '<span class="material-icons chevron_right"></span>';
html += '</a>'; html += '</a>';
} else { } else {
@ -705,7 +705,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
html += '<h2 class="sectionTitle sectionTitle-cards">'; html += '<h2 class="sectionTitle sectionTitle-cards">';
html += globalize.translate('HeaderNextUp'); html += globalize.translate('HeaderNextUp');
html += '</h2>'; html += '</h2>';
html += '<i class="material-icons chevron_right"></i>'; html += '<span class="material-icons chevron_right"></span>';
html += '</a>'; html += '</a>';
} else { } else {
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';

6
src/components/imagedownloader/imagedownloader.js
View file

@ -116,8 +116,8 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
if (showControls) { if (showControls) {
html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">'; html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><span class="material-icons arrow_back"></span></button>';
html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="material-icons arrow_forward"></i></button>'; html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><span class="material-icons arrow_forward"></span></button>';
html += '</div>'; html += '</div>';
} }
@ -262,7 +262,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
if (enableFooterButtons) { if (enableFooterButtons) {
html += '<div class="cardText cardTextCentered">'; html += '<div class="cardText cardTextCentered">';
html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="material-icons cloud_download"></i></button>'; html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><span class="material-icons cloud_download"></span></button>';
html += '</div>'; html += '</div>';
} }

2
src/components/imagedownloader/imagedownloader.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${Search} ${Search}
</h3> </h3>

12
src/components/imageeditor/imageeditor.js
View file

@ -155,23 +155,23 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
if (image.ImageType === "Backdrop" || image.ImageType === "Screenshot") { if (image.ImageType === "Backdrop" || image.ImageType === "Screenshot") {
if (index > 0) { if (index > 0) {
html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><i class="material-icons chevron_left"></i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><span class="material-icons chevron_left"></span></button>';
} else { } else {
html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><i class="material-icons chevron_left"></i></button>'; html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><span class="material-icons chevron_left"></span></button>';
} }
if (index < numImages - 1) { if (index < numImages - 1) {
html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><i class="material-icons chevron_right"></i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><span class="material-icons chevron_right"></span></button>';
} else { } else {
html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="material-icons chevron_right"></i></button>'; html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><span class="material-icons chevron_right"></span></button>';
} }
} else { } else {
if (imageProviders.length) { if (imageProviders.length) {
html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('Search') + '"><i class="material-icons">search</i></button>'; html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('Search') + '"><span class="material-icons search"></span></button>';
} }
} }
html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage autoSize" title="' + globalize.translate('Delete') + '"><i class="material-icons">delete</i></button>'; html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage autoSize" title="' + globalize.translate('Delete') + '"><span class="material-icons delete"></span></button>';
html += '</div>'; html += '</div>';
} }

14
src/components/imageeditor/imageeditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${HeaderEditImages} ${HeaderEditImages}
</h3> </h3>
@ -12,10 +12,10 @@
<div class="imageEditor-buttons first-imageEditor-buttons"> <div class="imageEditor-buttons first-imageEditor-buttons">
<h2 style="margin:0;">${Images}</h2> <h2 style="margin:0;">${Images}</h2>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;"> <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
<i class="material-icons">search</i> <span class="material-icons search"></span>
</button> </button>
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;"> <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
</div> </div>
<div id="images" class="itemsContainer vertical-wrap"> <div id="images" class="itemsContainer vertical-wrap">
@ -27,10 +27,10 @@
<div class="imageEditor-buttons"> <div class="imageEditor-buttons">
<h2 style="margin:0;">${Backdrops}</h2> <h2 style="margin:0;">${Backdrops}</h2>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop"> <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
<i class="material-icons">search</i> <span class="material-icons search"></span>
</button> </button>
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop"> <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
</div> </div>
<div id="backdrops" class="itemsContainer vertical-wrap"> <div id="backdrops" class="itemsContainer vertical-wrap">
@ -42,10 +42,10 @@
<div class="imageEditor-buttons"> <div class="imageEditor-buttons">
<h2 style="margin: 0;">${Screenshots}</h2> <h2 style="margin: 0;">${Screenshots}</h2>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot"> <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
<i class="material-icons">search</i> <span class="material-icons search"></span>
</button> </button>
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Screenshot"> <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Screenshot">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
</div> </div>
<div id="screenshots" class="itemsContainer vertical-wrap"> <div id="screenshots" class="itemsContainer vertical-wrap">

2
src/components/imageoptionseditor/imageoptionseditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${HeaderImageOptions} ${HeaderImageOptions}
</h3> </h3>

4
src/components/imageuploader/imageuploader.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${HeaderUploadImage} ${HeaderUploadImage}
</h3> </h3>
@ -14,7 +14,7 @@
<h2 style="margin:0;">${HeaderAddUpdateImage}</h2> <h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
<button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;"> <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
<i class="material-icons">folder</i> <span class="material-icons folder"></span>
<span>${Browse}</span> <span>${Browse}</span>
</button> </button>
</div> </div>

22
src/components/indicators/indicators.js
View file

@ -90,7 +90,7 @@ define(['datetime', 'itemHelper', 'emby-progressbar', 'css!./indicators.css', 'm
} }
if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) { if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
return '<div class="playedIndicator indicator"><i class="material-icons indicatorIcon">check</i></div>'; return '<div class="playedIndicator indicator"><span class="material-icons indicatorIcon check"></span></div>';
} }
} }
@ -118,7 +118,7 @@ define(['datetime', 'itemHelper', 'emby-progressbar', 'css!./indicators.css', 'm
var status; var status;
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
return '<i class="material-icons timerIndicator indicatorIcon fiber_smart_record"></i>'; return '<span class="material-icons timerIndicator indicatorIcon fiber_smart_record"></span>';
} else if (item.TimerId || item.SeriesTimerId) { } else if (item.TimerId || item.SeriesTimerId) {
status = item.Status || 'Cancelled'; status = item.Status || 'Cancelled';
} else if (item.Type === 'Timer') { } else if (item.Type === 'Timer') {
@ -129,20 +129,20 @@ define(['datetime', 'itemHelper', 'emby-progressbar', 'css!./indicators.css', 'm
if (item.SeriesTimerId) { if (item.SeriesTimerId) {
if (status !== 'Cancelled') { if (status !== 'Cancelled') {
return '<i class="material-icons timerIndicator indicatorIcon fiber_smart_record"></i>'; return '<span class="material-icons timerIndicator indicatorIcon fiber_smart_record"></span>';
} }
return '<i class="material-icons timerIndicator timerIndicator-inactive indicatorIcon fiber_smart_record"></i>'; return '<span class="material-icons timerIndicator timerIndicator-inactive indicatorIcon fiber_smart_record"></span>';
} }
return '<i class="material-icons timerIndicator indicatorIcon fiber_manual_record"></i>'; return '<span class="material-icons timerIndicator indicatorIcon fiber_manual_record"></span>';
} }
function getSyncIndicator(item) { function getSyncIndicator(item) {
if (item.SyncPercent === 100) { if (item.SyncPercent === 100) {
return '<div class="syncIndicator indicator fullSyncIndicator"><i class="material-icons indicatorIcon file_download"></i></div>'; return '<div class="syncIndicator indicator fullSyncIndicator"><span class="material-icons indicatorIcon file_download"></span></div>';
} else if (item.SyncPercent != null) { } else if (item.SyncPercent != null) {
return '<div class="syncIndicator indicator emptySyncIndicator"><i class="material-icons indicatorIcon file_download"></i></div>'; return '<div class="syncIndicator indicator emptySyncIndicator"><span class="material-icons indicatorIcon file_download"></span></div>';
} }
return ''; return '';
@ -150,16 +150,16 @@ define(['datetime', 'itemHelper', 'emby-progressbar', 'css!./indicators.css', 'm
function getTypeIndicator(item) { function getTypeIndicator(item) {
if (item.Type === 'Video') { if (item.Type === 'Video') {
return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">videocam</i></div>'; return '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon videocam"></span></div>';
} }
if (item.Type === 'Folder') { if (item.Type === 'Folder') {
return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">folder</i></div>'; return '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon folder"></span></div>';
} }
if (item.Type === 'PhotoAlbum') { if (item.Type === 'PhotoAlbum') {
return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon photo_album"></i></div>'; return '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon photo_album"></span></div>';
} }
if (item.Type === 'Photo') { if (item.Type === 'Photo') {
return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">photo</i></div>'; return '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon photo"></span></div>';
} }
return ''; return '';

2
src/components/itemMediaInfo/itemMediaInfo.template.html
View file

@ -1,6 +1,6 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<i class="material-icons arrow_back"></i> <span class="material-icons arrow_back"></span>
</button> </button>
<h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3> <h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
</div> </div>

4
src/components/itemcontextmenu.js
View file

@ -15,7 +15,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
commands.push({ commands.push({
name: globalize.translate("Play"), name: globalize.translate("Play"),
id: "resume", id: "resume",
icon: "&#xE037;" icon: "play_arrow"
}); });
} }
@ -23,7 +23,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
commands.push({ commands.push({
name: globalize.translate("PlayAllFromHere"), name: globalize.translate("PlayAllFromHere"),
id: "playallfromhere", id: "playallfromhere",
icon: "&#xE037;" icon: "play_arrow"
}); });
} }
} }

2
src/components/itemidentifier/itemidentifier.template.html
View file

@ -1,6 +1,6 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<i class="material-icons arrow_back"></i> <span class="material-icons arrow_back"></span>
</button> </button>
<h3 class="formDialogHeaderTitle">${Identify}</h3> <h3 class="formDialogHeaderTitle">${Identify}</h3>
</div> </div>

18
src/components/libraryoptionseditor/libraryoptionseditor.js
View file

@ -58,16 +58,16 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
for (var i = 0; i < plugins.length; i++) { for (var i = 0; i < plugins.length; i++) {
var plugin = plugins[i]; var plugin = plugins[i];
html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">'; html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">';
html += '<i class="listItemIcon material-icons live_tv"></i>'; html += '<span class="listItemIcon material-icons live_tv"></span>';
html += '<div class="listItemBody">'; html += '<div class="listItemBody">';
html += '<h3 class="listItemBodyText">'; html += '<h3 class="listItemBodyText">';
html += plugin.Name; html += plugin.Name;
html += "</h3>"; html += "</h3>";
html += "</div>"; html += "</div>";
if (i > 0) { if (i > 0) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>'; html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>';
} else if (plugins.length > 1) { } else if (plugins.length > 1) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>'; html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>';
} }
html += "</div>"; html += "</div>";
} }
@ -120,7 +120,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
html += plugin.Name; html += plugin.Name;
html += "</h3>"; html += "</h3>";
html += "</div>"; html += "</div>";
i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>'), html += "</div>"; i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>'), html += "</div>";
} }
html += "</div>"; html += "</div>";
html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>"; html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>";
@ -181,9 +181,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
html += "</h3>"; html += "</h3>";
html += "</div>"; html += "</div>";
if (i > 0) { if (i > 0) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>'; html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>';
} else if (plugins.length > 1) { } else if (plugins.length > 1) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>'; html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>';
} }
html += "</div>"; html += "</div>";
} }
@ -220,9 +220,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
html += "</h3>"; html += "</h3>";
html += "</div>"; html += "</div>";
if (i > 0) { if (i > 0) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>'; html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>';
} else if (plugins.length > 1) { } else if (plugins.length > 1) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>'; html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>';
} }
html += "</div>"; html += "</div>";
} }
@ -273,7 +273,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
function adjustSortableListElement(elem) { function adjustSortableListElement(elem) {
var btnSortable = elem.querySelector(".btnSortable"); var btnSortable = elem.querySelector(".btnSortable");
var inner = btnSortable.querySelector("i"); var inner = btnSortable.querySelector(".material-icons");
if (elem.previousSibling) { if (elem.previousSibling) {
btnSortable.title = globalize.translate("ButtonUp"); btnSortable.title = globalize.translate("ButtonUp");
btnSortable.classList.add("btnSortableMoveUp"); btnSortable.classList.add("btnSortableMoveUp");

20
src/components/listview/listview.js
View file

@ -160,7 +160,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
var button = options.rightButtons[i]; var button = options.rightButtons[i];
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><i class="material-icons">' + button.icon + '</i></button>'; html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><span class="material-icons ' + button.icon + '"></span></button>';
} }
return html; return html;
@ -262,9 +262,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
if (!clickEntireItem && options.dragHandle) { if (!clickEntireItem && options.dragHandle) {
//html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="material-icons drag_handle"></i></button>'; //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><span class="material-icons drag_handle"></span></button>';
// Firefox and Edge are not allowing the button to be draggable // Firefox and Edge are not allowing the button to be draggable
html += '<i class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent drag_handle"></i>'; html += '<span class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent drag_handle"></span>';
} }
if (options.image !== false) { if (options.image !== false) {
@ -297,7 +297,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
if (playOnImageClick) { if (playOnImageClick) {
html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="material-icons listItemImageButton-icon play_arrow"></i></button>'; html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>';
} }
var progressHtml = indicators.getProgressBarHtml(item, { var progressHtml = indicators.getProgressBarHtml(item, {
@ -426,7 +426,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
html += '<div class="' + cssClass + '">'; html += '<div class="' + cssClass + '">';
var moreIcon = '&#xE5D3;'; const moreIcon = 'more_horiz';
html += getTextLinesHtml(textlines, isLargeStyle); html += getTextLinesHtml(textlines, isLargeStyle);
@ -475,15 +475,15 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (!clickEntireItem) { if (!clickEntireItem) {
if (options.addToListButton) { if (options.addToListButton) {
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="material-icons playlist_add"></i></button>'; html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><span class="material-icons playlist_add"></span></button>';
} }
if (options.moreButton !== false) { if (options.moreButton !== false) {
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><i class="material-icons">' + moreIcon + '</i></button>'; html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><span class="material-icons ' + moreIcon + '"></span></button>';
} }
if (options.infoButton) { if (options.infoButton) {
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="material-icons info_outline"></i></button>'; html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><span class="material-icons info_outline"></span></button>';
} }
if (options.rightButtons) { if (options.rightButtons) {
@ -496,11 +496,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
var likes = userData.Likes == null ? '' : userData.Likes; var likes = userData.Likes == null ? '' : userData.Likes;
if (itemHelper.canMarkPlayed(item)) { if (itemHelper.canMarkPlayed(item)) {
html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="material-icons">check</i></button>'; html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons check"></span></button>';
} }
if (itemHelper.canRate(item)) { if (itemHelper.canRate(item)) {
html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>'; html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>';
} }
} }
} }

10
src/components/mediainfo/mediainfo.js
View file

@ -6,7 +6,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
var status; var status;
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></i>'; return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>';
} else if (item.TimerId || item.SeriesTimerId) { } else if (item.TimerId || item.SeriesTimerId) {
status = item.Status || 'Cancelled'; status = item.Status || 'Cancelled';
@ -20,13 +20,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
if (item.SeriesTimerId) { if (item.SeriesTimerId) {
if (status !== 'Cancelled') { if (status !== 'Cancelled') {
return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></i>'; return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>';
} }
return '<i class="material-icons mediaInfoItem mediaInfoIconItem fiber_smart_record"></i>'; return '<span class="material-icons mediaInfoItem mediaInfoIconItem fiber_smart_record"></span>';
} }
return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_manual_record"></i>'; return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_manual_record"></span>';
} }
function getProgramInfoHtml(item, options) { function getProgramInfoHtml(item, options) {
@ -390,7 +390,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
if (item.CommunityRating) { if (item.CommunityRating) {
html += '<div class="starRatingContainer mediaInfoItem">'; html += '<div class="starRatingContainer mediaInfoItem">';
html += '<i class="material-icons starIcon">star</i>'; html += '<span class="material-icons starIcon star"></span>';
html += item.CommunityRating.toFixed(1); html += item.CommunityRating.toFixed(1);
html += '</div>'; html += '</div>';
} }

2
src/components/medialibrarycreator/medialibrarycreator.js
View file

@ -116,7 +116,7 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
} }
html += "</div>"; html += "</div>";
html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>'; html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><span class="material-icons remove_circle"></span></button>';
html += "</div>"; html += "</div>";
return html; return html;
} }

4
src/components/medialibrarycreator/medialibrarycreator.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3> <h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
</div> </div>
@ -26,7 +26,7 @@
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<h1 style="margin: .5em 0;">${HeadersFolders}</h1> <h1 style="margin: .5em 0;">${HeadersFolders}</h1>
<button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}"> <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
</div> </div>
<div class="paperList folderList hide" style="margin-bottom:2em;"></div> <div class="paperList folderList hide" style="margin-bottom:2em;"></div>

2
src/components/medialibraryeditor/medialibraryeditor.js
View file

@ -107,7 +107,7 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
} }
html += "</div>"; html += "</div>";
html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>'; html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><span class="material-icons remove_circle"></span></button>';
html += "</div>"; html += "</div>";
return html; return html;
} }

4
src/components/medialibraryeditor/medialibraryeditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"></h3> <h3 class="formDialogHeaderTitle"></h3>
</div> </div>
@ -20,7 +20,7 @@
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<h1 style="margin: .5em 0;">${HeadersFolders}</h1> <h1 style="margin: .5em 0;">${HeadersFolders}</h1>
<button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}"> <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
</div> </div>
<div class="paperList folderList" style="margin-bottom:2em;"></div> <div class="paperList folderList" style="margin-bottom:2em;"></div>

10
src/components/metadataeditor/metadataeditor.js
View file

@ -482,7 +482,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
html += '</div>'; html += '</div>';
if (formatString) { if (formatString) {
html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><i class="material-icons open_in_browser"></i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><span class="material-icons open_in_browser"></span></button>';
} }
html += '</div>'; html += '</div>';
@ -922,7 +922,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
html += '<div class="listItem">'; html += '<div class="listItem">';
html += '<i class="material-icons listItemIcon live_tv" style="background-color:#333;"></i>'; html += '<span class="material-icons listItemIcon live_tv" style="background-color:#333;"></span>';
html += '<div class="listItemBody">'; html += '<div class="listItemBody">';
@ -932,7 +932,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
html += '</div>'; html += '</div>';
html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnRemoveFromEditorList autoSize"><i class="material-icons">delete</i></button>'; html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnRemoveFromEditorList autoSize"><span class="material-icons delete"></span></button>';
html += '</div>'; html += '</div>';
} }
@ -953,7 +953,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
html += '<div class="listItem">'; html += '<div class="listItem">';
html += '<i class="material-icons listItemIcon" style="background-color:#333;">person</i>'; html += '<span class="material-icons listItemIcon person" style="background-color:#333;"></span>';
html += '<div class="listItemBody">'; html += '<div class="listItemBody">';
html += '<button style="text-align:left;" type="button" class="btnEditPerson clearButton" data-index="' + i + '">'; html += '<button style="text-align:left;" type="button" class="btnEditPerson clearButton" data-index="' + i + '">';
@ -969,7 +969,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
html += '</button>'; html += '</button>';
html += '</div>'; html += '</div>';
html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnDeletePerson autoSize"><i class="material-icons">delete</i></button>'; html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnDeletePerson autoSize"><span class="material-icons delete"></span></button>';
html += '</div>'; html += '</div>';
} }

14
src/components/metadataeditor/metadataeditor.template.html
View file

@ -1,15 +1,15 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${Edit} ${Edit}
</h3> </h3>
<div style="margin-left: auto;" class="flex align-items-center justify-content-center"> <div style="margin-left: auto;" class="flex align-items-center justify-content-center">
<button is="emby-button" type="button" class="btnHeaderSave button-accent-flat button-flat hide" tabindex="-1"> <button is="emby-button" type="button" class="btnHeaderSave button-accent-flat button-flat hide" tabindex="-1">
<i class="material-icons">check</i> <span class="material-icons check"></span>
<span>${Save}</span> <span>${Save}</span>
</button> </button>
<button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1"> <button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
<i class="material-icons more_horiz"></i> <span class="material-icons more_horiz"></span>
</button> </button>
</div> </div>
</div> </div>
@ -184,7 +184,7 @@
${Genres} ${Genres}
</h2> </h2>
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}"> <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
<div class="paperList" id="listGenres"></div> <div class="paperList" id="listGenres"></div>
</div> </div>
@ -193,7 +193,7 @@
${People} ${People}
</h2> </h2>
<button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}"> <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
<div id="peopleList" class="paperList"> <div id="peopleList" class="paperList">
</div> </div>
@ -203,7 +203,7 @@
${Studios} ${Studios}
</h2> </h2>
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}"> <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
<div class="paperList" id="listStudios"></div> <div class="paperList" id="listStudios"></div>
</div> </div>
@ -212,7 +212,7 @@
${Tags} ${Tags}
</h2> </h2>
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}"> <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
<div class="paperList" id="listTags"></div> <div class="paperList" id="listTags"></div>
</div> </div>

2
src/components/metadataeditor/personeditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${Edit} ${Edit}
</h3> </h3>

6
src/components/multiselect/multiselect.js
View file

@ -126,11 +126,11 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
var html = ""; var html = "";
html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><i class="material-icons">close</i></button>'; html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><span class="material-icons close"></span></button>';
html += '<h1 class="itemSelectionCount"></h1>'; html += '<h1 class="itemSelectionCount"></h1>';
var moreIcon = "&#xE5D3;"; const moreIcon = "more_horiz";
html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="material-icons">' + moreIcon + '</i></button>'; html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ' + moreIcon + '"></span></button>';
selectionCommandsPanel.innerHTML = html; selectionCommandsPanel.innerHTML = html;

63
src/components/nowplayingbar/nowplayingbar.js
View file

@ -42,31 +42,31 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
// The onclicks are needed due to the return false above // The onclicks are needed due to the return false above
html += '<div class="nowPlayingBarCenter">'; html += '<div class="nowPlayingBarCenter">';
html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><i class="material-icons skip_previous"></i></button>'; html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><span class="material-icons skip_previous"></span></button>';
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="material-icons">pause</i></button>'; html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></span></button>';
html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><i class="material-icons">stop</i></button>'; html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><span class="material-icons stop"></span></button>';
html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="material-icons skip_next"></i></button>'; html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
html += '<div class="nowPlayingBarCurrentTime"></div>'; html += '<div class="nowPlayingBarCurrentTime"></div>';
html += '</div>'; html += '</div>';
html += '<div class="nowPlayingBarRight">'; html += '<div class="nowPlayingBarRight">';
html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="material-icons"></i></button>'; html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><span class="material-icons volume_up"></span></button>';
html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:9em;vertical-align:middle;display:inline-flex;">'; html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:9em;vertical-align:middle;display:inline-flex;">';
html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarVolumeSlider"/>'; html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarVolumeSlider"/>';
html += '</div>'; html += '</div>';
html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><i class="material-icons">repeat</i></button>'; html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><span class="material-icons repeat"></span></button>';
html += '<div class="nowPlayingBarUserDataButtons">'; html += '<div class="nowPlayingBarUserDataButtons">';
html += '</div>'; html += '</div>';
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="material-icons">pause</i></button>'; html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></span></button>';
html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><i class="material-icons more_vert"></i></button>'; html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><span class="material-icons more_vert"></span></button>';
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
@ -134,12 +134,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
}); });
var i;
var length;
playPauseButtons = elem.querySelectorAll('.playPauseButton'); playPauseButtons = elem.querySelectorAll('.playPauseButton');
for (i = 0, length = playPauseButtons.length; i < length; i++) { playPauseButtons.forEach((button) => {
playPauseButtons[i].addEventListener('click', onPlayPauseClick); button.addEventListener('click', onPlayPauseClick);
} });
elem.querySelector('.nextTrackButton').addEventListener('click', function () { elem.querySelector('.nextTrackButton').addEventListener('click', function () {
@ -174,7 +172,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
}); });
toggleRepeatButtonIcon = toggleRepeatButton.querySelector('i'); toggleRepeatButtonIcon = toggleRepeatButton.querySelector('.material-icons');
volumeSlider = elem.querySelector('.nowPlayingBarVolumeSlider'); volumeSlider = elem.querySelector('.nowPlayingBarVolumeSlider');
volumeSliderContainer = elem.querySelector('.nowPlayingBarVolumeSliderContainer'); volumeSliderContainer = elem.querySelector('.nowPlayingBarVolumeSliderContainer');
@ -281,22 +279,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function updatePlayPauseState(isPaused) { function updatePlayPauseState(isPaused) {
var i;
var length;
if (playPauseButtons) { if (playPauseButtons) {
if (isPaused) { playPauseButtons.forEach((button) => {
const icon = button.querySelector('.material-icons');
for (i = 0, length = playPauseButtons.length; i < length; i++) { icon.classList.remove('play_arrow', 'pause');
playPauseButtons[i].querySelector('i').innerHTML = '&#xE037;'; icon.classList.add(isPaused ? 'play_arrow' : 'pause');
} });
} else {
for (i = 0, length = playPauseButtons.length; i < length; i++) {
playPauseButtons[i].querySelector('i').innerHTML = 'pause';
}
}
} }
} }
@ -340,15 +328,16 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function updateRepeatModeDisplay(repeatMode) { function updateRepeatModeDisplay(repeatMode) {
toggleRepeatButtonIcon.classList.remove('repeat', 'repeat_one');
if (repeatMode === 'RepeatAll') { if (repeatMode === 'RepeatAll') {
toggleRepeatButtonIcon.innerHTML = "repeat"; toggleRepeatButtonIcon.classList.add('repeat');
toggleRepeatButton.classList.add('repeatButton-active'); toggleRepeatButton.classList.add('repeatButton-active');
} else if (repeatMode === 'RepeatOne') { } else if (repeatMode === 'RepeatOne') {
toggleRepeatButtonIcon.innerHTML = "repeat_one"; toggleRepeatButtonIcon.classList.add('repeat_one');
toggleRepeatButton.classList.add('repeatButton-active'); toggleRepeatButton.classList.add('repeatButton-active');
} else { } else {
toggleRepeatButtonIcon.innerHTML = "repeat"; toggleRepeatButtonIcon.classList.add('repeat');
toggleRepeatButton.classList.remove('repeatButton-active'); toggleRepeatButton.classList.remove('repeatButton-active');
} }
} }
@ -397,11 +386,9 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
showMuteButton = false; showMuteButton = false;
} }
if (isMuted) { const muteButtonIcon = muteButton.querySelector('.material-icons');
muteButton.querySelector('i').innerHTML = '&#xE04F;'; muteButtonIcon.classList.remove('volume_off', 'volume_up');
} else { muteButtonIcon.classList.add(isMuted ? 'volume_off' : 'volume_up');
muteButton.querySelector('i').innerHTML = '&#xE050;';
}
if (supportedCommands.indexOf('SetVolume') === -1) { if (supportedCommands.indexOf('SetVolume') === -1) {
showVolumeSlider = false; showVolumeSlider = false;
@ -564,7 +551,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
queue: false, queue: false,
positionTo: contextButton positionTo: contextButton
}; };
nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>'; nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>';
apiClient.getCurrentUser().then(function(user) { apiClient.getCurrentUser().then(function(user) {
contextButton.addEventListener('click', function () { contextButton.addEventListener('click', function () {
itemContextMenu.show(Object.assign({ itemContextMenu.show(Object.assign({

4
src/components/playback/brightnessosd.js
View file

@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
function getOsdElementHtml() { function getOsdElementHtml() {
var html = ''; var html = '';
html += '<i class="material-icons iconOsdIcon brightness_high"></i>'; html += '<span class="material-icons iconOsdIcon brightness_high"></span>';
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>'; html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
@ -32,7 +32,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
elem.classList.add('brightnessOsd'); elem.classList.add('brightnessOsd');
elem.innerHTML = getOsdElementHtml(); elem.innerHTML = getOsdElementHtml();
iconElement = elem.querySelector('i'); iconElement = elem.querySelector('.material-icons');
progressElement = elem.querySelector('.iconOsdProgressInner'); progressElement = elem.querySelector('.iconOsdProgressInner');
document.body.appendChild(elem); document.body.appendChild(elem);

7
src/components/playback/volumeosd.js
View file

@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
function getOsdElementHtml() { function getOsdElementHtml() {
var html = ''; var html = '';
html += '<i class="material-icons iconOsdIcon"></i>'; html += '<span class="material-icons iconOsdIcon volume_up"></span>';
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>'; html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>';
@ -32,7 +32,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
elem.classList.add('volumeOsd'); elem.classList.add('volumeOsd');
elem.innerHTML = getOsdElementHtml(); elem.innerHTML = getOsdElementHtml();
iconElement = elem.querySelector('i'); iconElement = elem.querySelector('.material-icons');
progressElement = elem.querySelector('.iconOsdProgressInner'); progressElement = elem.querySelector('.iconOsdProgressInner');
document.body.appendChild(elem); document.body.appendChild(elem);
@ -101,7 +101,8 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
function updatePlayerVolumeState(isMuted, volume) { function updatePlayerVolumeState(isMuted, volume) {
if (iconElement) { if (iconElement) {
iconElement.innerHTML = isMuted ? '&#xE04F;' : '&#xE050;'; iconElement.classList.remove('volume_off', 'volume_up');
iconElement.classList.add(isMuted ? 'volume_off' : 'volume_up');
} }
if (progressElement) { if (progressElement) {
progressElement.style.width = (volume || 0) + '%'; progressElement.style.width = (volume || 0) + '%';

2
src/components/playerstats/playerstats.js
View file

@ -18,7 +18,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'playMeth
if (layoutManager.tv) { if (layoutManager.tv) {
button = ''; button = '';
} else { } else {
button = '<button type="button" is="paper-icon-button-light" class="playerStats-closeButton"><i class="material-icons">close</i></button>'; button = '<button type="button" is="paper-icon-button-light" class="playerStats-closeButton"><span class="material-icons close"></span></button>';
} }
var contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content'; var contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content';

2
src/components/playlisteditor/playlisteditor.js
View file

@ -228,7 +228,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
var title = globalize.translate('HeaderAddToPlaylist'); var title = globalize.translate('HeaderAddToPlaylist');
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">'; html += '<h3 class="formDialogHeaderTitle">';
html += title; html += title;
html += '</h3>'; html += '</h3>';

2
src/components/prompt/prompt.template.html
View file

@ -1,6 +1,6 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<i class="material-icons arrow_back"></i> <span class="material-icons arrow_back"></span>
</button> </button>
<h3 class="formDialogHeaderTitle"></h3> <h3 class="formDialogHeaderTitle"></h3>
</div> </div>

2
src/components/recordingcreator/recordingbutton.js
View file

@ -22,7 +22,7 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
} }
function setButtonIcon(button, icon) { function setButtonIcon(button, icon) {
var inner = button.querySelector('i'); var inner = button.querySelector('.material-icons');
inner.classList.remove('fiber_smart_record'); inner.classList.remove('fiber_smart_record');
inner.classList.remove('fiber_manual_record'); inner.classList.remove('fiber_manual_record');
inner.classList.add(icon); inner.classList.add(icon);

2
src/components/recordingcreator/recordingcreator.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"></h3> <h3 class="formDialogHeaderTitle"></h3>
</div> </div>
<div class="formDialogContent smoothScrollY"> <div class="formDialogContent smoothScrollY">

2
src/components/recordingcreator/recordingeditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${HeaderRecordingOptions} ${HeaderRecordingOptions}
</h3> </h3>

4
src/components/recordingcreator/recordingfields.js
View file

@ -151,7 +151,7 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
var apiClient = connectionManager.getApiClient(options.serverId); var apiClient = connectionManager.getApiClient(options.serverId);
var button = dom.parentWithTag(e.target, 'BUTTON'); var button = dom.parentWithTag(e.target, 'BUTTON');
var isChecked = !button.querySelector('i').classList.contains('recordingIcon-active'); var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
var hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled'; var hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
@ -191,7 +191,7 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
var apiClient = connectionManager.getApiClient(options.serverId); var apiClient = connectionManager.getApiClient(options.serverId);
var button = dom.parentWithTag(e.target, 'BUTTON'); var button = dom.parentWithTag(e.target, 'BUTTON');
var isChecked = !button.querySelector('i').classList.contains('recordingIcon-active'); var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
if (isChecked) { if (isChecked) {
options.parent.querySelector('.recordSeriesContainer').classList.remove('hide'); options.parent.querySelector('.recordSeriesContainer').classList.remove('hide');

4
src/components/recordingcreator/recordingfields.template.html
View file

@ -2,7 +2,7 @@
<div class="recordSeriesContainer recordingFields-buttons flex align-items-center hide"> <div class="recordSeriesContainer recordingFields-buttons flex align-items-center hide">
<div> <div>
<button is="emby-button" type="button" class="raised recordingButton seriesRecordingButton"> <button is="emby-button" type="button" class="raised recordingButton seriesRecordingButton">
<i class="material-icons recordingIcon fiber_smart_record"></i> <span class="material-icons recordingIcon fiber_smart_record"></span>
<span class="buttonText">${RecordSeries}</span> <span class="buttonText">${RecordSeries}</span>
</button> </button>
</div> </div>
@ -14,7 +14,7 @@
<div class="recordingFields-buttons flex align-items-center"> <div class="recordingFields-buttons flex align-items-center">
<div> <div>
<button is="emby-button" type="button" class="raised recordingButton singleRecordingButton"> <button is="emby-button" type="button" class="raised recordingButton singleRecordingButton">
<i class="material-icons recordingIcon fiber_manual_record"></i> <span class="material-icons recordingIcon fiber_manual_record"></span>
<span class="buttonText">${Record}</span> <span class="buttonText">${Record}</span>
</button> </button>
</div> </div>

2
src/components/recordingcreator/seriesrecordingeditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${HeaderSeriesOptions} ${HeaderSeriesOptions}
</h3> </h3>

2
src/components/refreshdialog/refreshdialog.js
View file

@ -110,7 +110,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
var title = globalize.translate('RefreshMetadata'); var title = globalize.translate('RefreshMetadata');
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">'; html += '<h3 class="formDialogHeaderTitle">';
html += title; html += title;
html += '</h3>'; html += '</h3>';

4
src/components/remotecontrol/remotecontrol.css
View file

@ -152,7 +152,7 @@
color: inherit !important; color: inherit !important;
} }
.contextMenuList i.listItemIcon { .contextMenuList .material-icons.listItemIcon {
font-size: x-large; font-size: x-large;
} }
@ -643,7 +643,7 @@
display: none !important; display: none !important;
} }
.navigationSection .collapseContent i { .navigationSection .collapseContent .material-icons {
font-size: 4em; font-size: 4em;
} }
} }

45
src/components/remotecontrol/remotecontrol.js
View file

@ -124,8 +124,8 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
artistName = item.ArtistItems[0].Name; artistName = item.ArtistItems[0].Name;
context.querySelector(".nowPlayingAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}">${albumName}</a>`; context.querySelector(".nowPlayingAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}">${albumName}</a>`;
context.querySelector(".nowPlayingArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}">${artistName}</a>`; context.querySelector(".nowPlayingArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}">${artistName}</a>`;
context.querySelector(".contextMenuAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons album"></i> ` + globalize.translate("ViewAlbum") + '</a>'; context.querySelector(".contextMenuAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}"><span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons album"></span> ` + globalize.translate("ViewAlbum") + '</a>';
context.querySelector(".contextMenuArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons person"></i> ` + globalize.translate("ViewArtist") + '</a>'; context.querySelector(".contextMenuArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}"><span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons person"></span> ` + globalize.translate("ViewArtist") + '</a>';
} else { } else {
artistName = item.Artists; artistName = item.Artists;
context.querySelector(".nowPlayingAlbum").innerHTML = albumName; context.querySelector(".nowPlayingAlbum").innerHTML = albumName;
@ -171,8 +171,8 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
var userData = fullItem.UserData || {}; var userData = fullItem.UserData || {};
var likes = null == userData.Likes ? "" : userData.Likes; var likes = null == userData.Likes ? "" : userData.Likes;
context.querySelector(".nowPlayingPageUserDataButtonsTitle").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>'; context.querySelector(".nowPlayingPageUserDataButtonsTitle").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>'; context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
}); });
} else { } else {
backdrop.clear(); backdrop.clear();
@ -196,7 +196,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
context.querySelector(".nowPlayingPageImage").classList.remove("nowPlayingPageImageAudio"); context.querySelector(".nowPlayingPageImage").classList.remove("nowPlayingPageImageAudio");
} }
} else { } else {
imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardContent-button cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><i class="cardImageIcon material-icons">album</i></button></div>'; imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardContent-button cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>';
} }
} }
@ -319,13 +319,13 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
var toggleRepeatButton = context.querySelector(".repeatToggleButton"); var toggleRepeatButton = context.querySelector(".repeatToggleButton");
if ("RepeatAll" == repeatMode) { if ("RepeatAll" == repeatMode) {
toggleRepeatButton.innerHTML = "<i class='material-icons'>repeat</i>"; toggleRepeatButton.innerHTML = "<span class='material-icons repeat'></span>";
toggleRepeatButton.classList.add("repeatButton-active"); toggleRepeatButton.classList.add("repeatButton-active");
} else if ("RepeatOne" == repeatMode) { } else if ("RepeatOne" == repeatMode) {
toggleRepeatButton.innerHTML = "<i class='material-icons repeat_one'></i>"; toggleRepeatButton.innerHTML = "<span class='material-icons repeat_one'></span>";
toggleRepeatButton.classList.add("repeatButton-active"); toggleRepeatButton.classList.add("repeatButton-active");
} else { } else {
toggleRepeatButton.innerHTML = "<i class='material-icons'>repeat</i>"; toggleRepeatButton.innerHTML = "<span class='material-icons repeat'></span>";
toggleRepeatButton.classList.remove("repeatButton-active"); toggleRepeatButton.classList.remove("repeatButton-active");
} }
} }
@ -349,18 +349,23 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
showVolumeSlider = false; showVolumeSlider = false;
} }
const buttonMute = view.querySelector(".buttonMute");
const buttonMuteIcon = buttonMute.querySelector(".material-icons");
buttonMuteIcon.classList.remove("volume_off", "volume_up");
if (isMuted) { if (isMuted) {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute")); buttonMute.setAttribute("title", globalize.translate("Unmute"));
view.querySelector(".buttonMute i").innerHTML = "&#xE04F;"; buttonMuteIcon.classList.add("volume_off");
} else { } else {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute")); buttonMute.setAttribute("title", globalize.translate("Mute"));
view.querySelector(".buttonMute i").innerHTML = "&#xE050;"; buttonMuteIcon.classList.add("volume_up");
} }
if (showMuteButton) { if (showMuteButton) {
view.querySelector(".buttonMute").classList.remove("hide"); buttonMute.classList.remove("hide");
} else { } else {
view.querySelector(".buttonMute").classList.add("hide"); buttonMute.classList.add("hide");
} }
var nowPlayingVolumeSlider = context.querySelector(".nowPlayingVolumeSlider"); var nowPlayingVolumeSlider = context.querySelector(".nowPlayingVolumeSlider");
@ -382,7 +387,11 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
function updatePlayPauseState(isPaused, isActive) { function updatePlayPauseState(isPaused, isActive) {
var context = dlg; var context = dlg;
var btnPlayPause = context.querySelector(".btnPlayPause"); var btnPlayPause = context.querySelector(".btnPlayPause");
btnPlayPause.querySelector("i").innerHTML = isPaused ? "&#xE038;" : "&#xE035;"; const btnPlayPauseIcon = btnPlayPause.querySelector(".material-icons");
btnPlayPauseIcon.classList.remove("play_circle_filled", "pause_circle_filled");
btnPlayPauseIcon.classList.add(isPaused ? "play_circle_filled" : "pause_circle_filled");
buttonVisible(btnPlayPause, isActive); buttonVisible(btnPlayPause, isActive);
} }
@ -417,7 +426,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
action: "setplaylistindex", action: "setplaylistindex",
enableUserDataButtons: false, enableUserDataButtons: false,
rightButtons: [{ rightButtons: [{
icon: "&#xE15D;", icon: "remove_circle_outline",
title: globalize.translate("ButtonRemove"), title: globalize.translate("ButtonRemove"),
id: "remove" id: "remove"
}], }],
@ -755,9 +764,9 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
} }
function init(ownerView, context) { function init(ownerView, context) {
let contextmenuHtml = `<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=${globalize.translate('ButtonToggleContextMenu')}><i class="material-icons more_vert"></i></button>`; let contextmenuHtml = `<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=${globalize.translate('ButtonToggleContextMenu')}><span class="material-icons more_vert"></span></button>`;
let volumecontrolHtml = '<div class="volumecontrol flex align-items-center flex-wrap-wrap justify-content-center">'; let volumecontrolHtml = '<div class="volumecontrol flex align-items-center flex-wrap-wrap justify-content-center">';
volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><i class="xlargePaperIconButton material-icons"></i></button>`; volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`;
volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>'; volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
volumecontrolHtml += '</div>'; volumecontrolHtml += '</div>';
if (!layoutManager.mobile) { if (!layoutManager.mobile) {

2
src/components/search/searchfields.template.html
View file

@ -1,5 +1,5 @@
<div class="searchFieldsInner flex align-items-center justify-content-center"> <div class="searchFieldsInner flex align-items-center justify-content-center">
<i class="searchfields-icon material-icons">search</i> <span class="searchfields-icon material-icons search"></span>
<div class="inputContainer flex-grow" style="margin-bottom: 0;"> <div class="inputContainer flex-grow" style="margin-bottom: 0;">
<input is="emby-input" class="searchfields-txtSearch" type="text" data-keyboard="false" placeholder="${Search}" autocomplete="off" maxlength="40" autofocus /> <input is="emby-input" class="searchfields-txtSearch" type="text" data-keyboard="false" placeholder="${Search}" autocomplete="off" maxlength="40" autofocus />
</div> </div>

8
src/components/slideshow/slideshow.js
View file

@ -92,7 +92,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
function getIcon(icon, cssClass, canFocus, autoFocus) { function getIcon(icon, cssClass, canFocus, autoFocus) {
var tabIndex = canFocus ? '' : ' tabindex="-1"'; var tabIndex = canFocus ? '' : ' tabindex="-1"';
autoFocus = autoFocus ? ' autofocus' : ''; autoFocus = autoFocus ? ' autofocus' : '';
return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="material-icons slideshowButtonIcon ' + icon + '"></i></button>'; return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><span class="material-icons slideshowButtonIcon ' + icon + '"></span></button>';
} }
/** /**
@ -224,7 +224,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Handles OSD changes when the autoplay is started. * Handles OSD changes when the autoplay is started.
*/ */
function onAutoplayStart() { function onAutoplayStart() {
var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause i'); var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
if (btnSlideshowPause) { if (btnSlideshowPause) {
btnSlideshowPause.classList.replace("play_arrow", "pause"); btnSlideshowPause.classList.replace("play_arrow", "pause");
} }
@ -234,7 +234,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Handles OSD changes when the autoplay is stopped. * Handles OSD changes when the autoplay is stopped.
*/ */
function onAutoplayStop() { function onAutoplayStop() {
var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause i'); var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
if (btnSlideshowPause) { if (btnSlideshowPause) {
btnSlideshowPause.classList.replace("pause", "play_arrow"); btnSlideshowPause.classList.replace("pause", "play_arrow");
} }
@ -418,7 +418,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Toggles the autoplay feature of the Swiper instance. * Toggles the autoplay feature of the Swiper instance.
*/ */
function playPause() { function playPause() {
var paused = !dialog.querySelector('.btnSlideshowPause i').classList.contains("pause"); var paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains("pause");
if (paused) { if (paused) {
play(); play();
} else { } else {

2
src/components/sortmenu/sortmenu.js
View file

@ -66,7 +66,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
var html = ''; var html = '';
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">${Sort}</h3>'; html += '<h3 class="formDialogHeaderTitle">${Sort}</h3>';
html += '</div>'; html += '</div>';

8
src/components/subtitleeditor/subtitleeditor.js
View file

@ -132,7 +132,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">'; itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
itemHtml += '<i class="listItemIcon material-icons closed_caption"></i>'; itemHtml += '<span class="listItemIcon material-icons closed_caption"></span>';
itemHtml += '<div class="listItemBody two-line">'; itemHtml += '<div class="listItemBody two-line">';
@ -149,7 +149,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
if (!layoutManager.tv) { if (!layoutManager.tv) {
if (s.Path) { if (s.Path) {
itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('Delete') + '" class="btnDelete listItemButton"><i class="material-icons">delete</i></button>'; itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('Delete') + '" class="btnDelete listItemButton"><span class="material-icons delete"></span></button>';
} }
} }
@ -248,7 +248,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">'; html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
html += '<i class="listItemIcon material-icons closed_caption"></i>'; html += '<span class="listItemIcon material-icons closed_caption"></span>';
var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line'; var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
@ -281,7 +281,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '</div>'; html += '</div>';
if (!layoutManager.tv) { if (!layoutManager.tv) {
html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><i class="material-icons file_download"></i></button>'; html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><span class="material-icons file_download"></span></button>';
} }
html += '</' + tagName + '>'; html += '</' + tagName + '>';

6
src/components/subtitleeditor/subtitleeditor.template.html
View file

@ -1,8 +1,8 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle">${Subtitles}</h3> <h3 class="formDialogHeaderTitle">${Subtitles}</h3>
<a is="emby-linkbutton" data-autohide="true" class="button-link btnHelp flex align-items-center" href="https://docs.jellyfin.org/general/server/media/subtitles.html" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="${Help}"><i class="material-icons">info</i><span style="margin-left:.25em;">${Help}</span></a> <a is="emby-linkbutton" data-autohide="true" class="button-link btnHelp flex align-items-center" href="https://docs.jellyfin.org/general/server/media/subtitles.html" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="${Help}"><span class="material-icons info"></span><span style="margin-left:.25em;">${Help}</span></a>
</div> </div>
<div class="formDialogContent smoothScrollY"> <div class="formDialogContent smoothScrollY">
@ -18,7 +18,7 @@
<div class="selectContainer flex-grow" style="margin-bottom: 0;"> <div class="selectContainer flex-grow" style="margin-bottom: 0;">
<select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}" autofocus></select> <select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}" autofocus></select>
</div> </div>
<button type="submit" is="paper-icon-button-light" title="${Search}" class="btnSearchSubtitles flex-shrink-zero emby-select-iconbutton"><i class="material-icons">search</i></button> <button type="submit" is="paper-icon-button-light" title="${Search}" class="btnSearchSubtitles flex-shrink-zero emby-select-iconbutton"><span class="material-icons search"></span></button>
</div> </div>
<button is="emby-button" type="submit" class="raised btnSubmit block button-submit">${Search}</button> <button is="emby-button" type="submit" class="raised btnSubmit block button-submit">${Search}</button>
</form> </form>

2
src/components/subtitlesync/subtitlesync.template.html
View file

@ -1,5 +1,5 @@
<div class="subtitleSyncContainer"> <div class="subtitleSyncContainer">
<button type="button" is="paper-icon-button-light" class="subtitleSync-closeButton"><i class="material-icons">close</i></button> <button type="button" is="paper-icon-button-light" class="subtitleSync-closeButton"><span class="material-icons close"></span></button>
<div class="subtitleSyncTextField" contenteditable="true" spellcheck="false">0s</div> <div class="subtitleSyncTextField" contenteditable="true" spellcheck="false">0s</div>
<div class="sliderContainer subtitleSyncSliderContainer"> <div class="sliderContainer subtitleSyncSliderContainer">
<input is="emby-slider" type="range" step="1" min="0" max="100" value="50" class="subtitleSyncSlider" /> <input is="emby-slider" type="range" step="1" min="0" max="100" value="50" class="subtitleSyncSlider" />

3
src/components/tabbedview/itemstab.js
View file

@ -181,7 +181,8 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
return; return;
} }
btnSortIcon.innerHTML = values.sortOrder === 'Descending' ? '&#xE5DB;' : '&#xE5D8;'; btnSortIcon.classList.remove('arrow_downward', 'arrow_upward');
btnSortIcon.classList.add(values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward');
} }
function bindAll(elems, eventName, fn) { function bindAll(elems, eventName, fn) {

4
src/components/tunerpicker.js
View file

@ -41,7 +41,7 @@ define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize"
html += '<div class="cardScalable visualCardBox-cardScalable">'; html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="' + padderClass + '"></div>'; html += '<div class="' + padderClass + '"></div>';
html += '<div class="cardContent searchImage">'; html += '<div class="cardContent searchImage">';
html += '<div class="cardImageContainer coveredImage"><i class="cardImageIcon material-icons">dvr</i></div>'; html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
html += "</div>"; html += "</div>";
html += "</div>"; html += "</div>";
html += '<div class="cardFooter visualCardBox-cardFooter">'; html += '<div class="cardFooter visualCardBox-cardFooter">';
@ -128,7 +128,7 @@ define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize"
dlg.classList.add("formDialog"); dlg.classList.add("formDialog");
var html = ""; var html = "";
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">'; html += '<h3 class="formDialogHeaderTitle">';
html += globalize.translate("HeaderLiveTvTunerSetup"); html += globalize.translate("HeaderLiveTvTunerSetup");
html += "</h3>"; html += "</h3>";

2
src/components/tvproviders/xmltv.template.html
View file

@ -12,7 +12,7 @@
<div style="flex-grow:1;"> <div style="flex-grow:1;">
<input is="emby-input" class="txtPath" label="${LabelFileOrUrl}" required="required" autocomplete="off" /> <input is="emby-input" class="txtPath" label="${LabelFileOrUrl}" required="required" autocomplete="off" />
</div> </div>
<button type="button" is="paper-icon-button-light" id="btnSelectPath" class="emby-input-iconbutton"><i class="material-icons">search</i></button> <button type="button" is="paper-icon-button-light" id="btnSelectPath" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div> </div>
<div class="fieldDescription">${XmlTvPathHelp}</div> <div class="fieldDescription">${XmlTvPathHelp}</div>
</div> </div>

2
src/components/userdatabuttons/userdatabuttons.js
View file

@ -30,7 +30,7 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
iconCssClass += 'material-icons'; iconCssClass += 'material-icons';
return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><i class="' + iconCssClass + '">' + icon + '</i></button>'; return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>';
} }
function onContainerClick(e) { function onContainerClick(e) {

2
src/components/viewsettings/viewsettings.js
View file

@ -77,7 +77,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
var html = ''; var html = '';
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">${Settings}</h3>'; html += '<h3 class="formDialogHeaderTitle">${Settings}</h3>';
html += '</div>'; html += '</div>';

2
src/controllers/auth/selectserver.js
View file

@ -18,7 +18,7 @@ define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focu
var cardImageContainer; var cardImageContainer;
if (item.showIcon) { if (item.showIcon) {
cardImageContainer = '<i class="cardImageIcon material-icons">' + item.icon + "</i>"; cardImageContainer = '<span class="cardImageIcon material-icons ' + item.icon + '"></span>';
} else { } else {
cardImageContainer = '<div class="cardImage" style="' + item.cardImageStyle + '"></div>'; cardImageContainer = '<div class="cardImage" style="' + item.cardImageStyle + '"></div>';
} }

20
src/controllers/dashboard/dashboard.js
View file

@ -303,16 +303,16 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
html += '<div class="sessionCardButtons flex align-items-center justify-content-center">'; html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';
var btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? "" : " hide"; var btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? "" : " hide";
var playIcon = session.PlayState.IsPaused ? 'pause' : 'play'; const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><i class="material-icons">' + playIcon + '</i></button>'; html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionStop paper-icon-button-light ' + btnCssClass + '"><i class="material-icons">stop</i></button>'; html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionStop paper-icon-button-light ' + btnCssClass + '"><span class="material-icons stop"></span></button>';
btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? "" : " hide"; btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? "" : " hide";
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("ViewPlaybackInfo") + '"><i class="material-icons">info</i></button>'; html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("ViewPlaybackInfo") + '"><span class="material-icons info"></span></button>';
btnCssClass = session.ServerId && -1 !== session.SupportedCommands.indexOf("DisplayMessage") && session.DeviceId !== connectionManager.deviceId() ? "" : " hide"; btnCssClass = session.ServerId && -1 !== session.SupportedCommands.indexOf("DisplayMessage") && session.DeviceId !== connectionManager.deviceId() ? "" : " hide";
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("SendMessage") + '"><i class="material-icons">message</i></button>'; html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("SendMessage") + '"><span class="material-icons message"></span></button>';
html += "</div>"; html += "</div>";
html += '<div class="sessionNowPlayingStreamInfo" style="padding:.5em 0 1em;">'; html += '<div class="sessionNowPlayingStreamInfo" style="padding:.5em 0 1em;">';
@ -368,7 +368,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
html += progress + "%"; html += progress + "%";
html += "</progress>"; html += "</progress>";
html += "<span style='color:#00a4dc;margin-left:5px;margin-right:5px;'>" + progress + "%</span>"; html += "<span style='color:#00a4dc;margin-left:5px;margin-right:5px;'>" + progress + "%</span>";
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonStop") + '" onclick="DashboardPage.stopTask(this, \'' + task.Id + '\');" class="autoSize"><i class="material-icons">cancel</i></button>'; html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonStop") + '" onclick="DashboardPage.stopTask(this, \'' + task.Id + '\');" class="autoSize"><span class="material-icons cancel"></span></button>';
} else if (task.State === "Cancelling") { } else if (task.State === "Cancelling") {
html += '<span style="color:#cc0000;">' + globalize.translate("LabelStopping") + "</span>"; html += '<span style="color:#cc0000;">' + globalize.translate("LabelStopping") + "</span>";
} }
@ -571,11 +571,9 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
row.querySelector(".btnSessionStop").classList.add("hide"); row.querySelector(".btnSessionStop").classList.add("hide");
} }
if (session.PlayState && session.PlayState.IsPaused) { const btnSessionPlayPauseIcon = btnSessionPlayPause.querySelector(".material-icons");
btnSessionPlayPause.querySelector("i").innerHTML = "&#xE037;"; btnSessionPlayPauseIcon.classList.remove("play_arrow", "pause");
} else { btnSessionPlayPauseIcon.classList.add(session.PlayState && session.PlayState.IsPaused ? "play_arrow" : "pause");
btnSessionPlayPause.querySelector("i").innerHTML = "pause";
}
row.querySelector(".sessionNowPlayingStreamInfo").innerHTML = DashboardPage.getSessionNowPlayingStreamInfo(session); row.querySelector(".sessionNowPlayingStreamInfo").innerHTML = DashboardPage.getSessionNowPlayingStreamInfo(session);
row.querySelector(".sessionNowPlayingTime").innerHTML = DashboardPage.getSessionNowPlayingTime(session); row.querySelector(".sessionNowPlayingTime").innerHTML = DashboardPage.getSessionNowPlayingTime(session);

4
src/controllers/dashboard/devices/devices.js
View file

@ -80,7 +80,7 @@ define(["loading", "dom", "libraryMenu", "globalize", "scripts/imagehelper", "da
deviceHtml += '<div class="cardImage" style="background-image:url(\'' + iconUrl + "');background-size: auto 64%;background-position:center center;\">"; deviceHtml += '<div class="cardImage" style="background-image:url(\'' + iconUrl + "');background-size: auto 64%;background-position:center center;\">";
deviceHtml += "</div>"; deviceHtml += "</div>";
} else { } else {
deviceHtml += '<i class="cardImageIcon material-icons tablet_android"></i>'; deviceHtml += '<span class="cardImageIcon material-icons tablet_android"></span>';
} }
deviceHtml += "</a>"; deviceHtml += "</a>";
@ -89,7 +89,7 @@ define(["loading", "dom", "libraryMenu", "globalize", "scripts/imagehelper", "da
if (canEdit || canDelete(device.Id)) { if (canEdit || canDelete(device.Id)) {
deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">'; deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">';
deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate("Menu") + '" class="btnDeviceMenu"><i class="material-icons more_horiz"></i></button>'; deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate("Menu") + '" class="btnDeviceMenu"><span class="material-icons more_horiz"></span></button>';
deviceHtml += "</div>"; deviceHtml += "</div>";
} }

22
src/controllers/dashboard/dlna/dlnaprofile.js
View file

@ -76,12 +76,12 @@ define(["jQuery", "loading", "globalize", "fnchecked", "emby-select", "emby-butt
var index = 0; var index = 0;
var html = '<div class="paperList">' + headers.map(function (h) { var html = '<div class="paperList">' + headers.map(function (h) {
var li = '<div class="listItem">'; var li = '<div class="listItem">';
li += '<i class="material-icons listItemIcon">info</i>'; li += '<span class="material-icons listItemIcon info"></span>';
li += '<div class="listItemBody">'; li += '<div class="listItemBody">';
li += '<h3 class="listItemBodyText">' + h.Name + ": " + (h.Value || "") + "</h3>"; li += '<h3 class="listItemBodyText">' + h.Name + ": " + (h.Value || "") + "</h3>";
li += '<div class="listItemBodyText secondary">' + (h.Match || "") + "</div>"; li += '<div class="listItemBodyText secondary">' + (h.Match || "") + "</div>";
li += "</div>"; li += "</div>";
li += '<button type="button" is="paper-icon-button-light" class="btnDeleteIdentificationHeader listItemButton" data-index="' + index + '"><i class="material-icons">delete</i></button>'; li += '<button type="button" is="paper-icon-button-light" class="btnDeleteIdentificationHeader listItemButton" data-index="' + index + '"><span class="material-icons delete"></span></button>';
li += "</div>"; li += "</div>";
index++; index++;
return li; return li;
@ -132,11 +132,11 @@ define(["jQuery", "loading", "globalize", "fnchecked", "emby-select", "emby-butt
function renderXmlDocumentAttributes(page, attribute) { function renderXmlDocumentAttributes(page, attribute) {
var html = '<div class="paperList">' + attribute.map(function (h) { var html = '<div class="paperList">' + attribute.map(function (h) {
var li = '<div class="listItem">'; var li = '<div class="listItem">';
li += '<i class="material-icons listItemIcon">info</i>'; li += '<span class="material-icons listItemIcon info"></span>';
li += '<div class="listItemBody">'; li += '<div class="listItemBody">';
li += '<h3 class="listItemBodyText">' + h.Name + " = " + (h.Value || "") + "</h3>"; li += '<h3 class="listItemBodyText">' + h.Name + " = " + (h.Value || "") + "</h3>";
li += "</div>"; li += "</div>";
li += '<button type="button" is="paper-icon-button-light" class="btnDeleteXmlAttribute listItemButton" data-index="0"><i class="material-icons">delete</i></button>'; li += '<button type="button" is="paper-icon-button-light" class="btnDeleteXmlAttribute listItemButton" data-index="0"><span class="material-icons delete"></span></button>';
return li += "</div>"; return li += "</div>";
}).join("") + "</div>"; }).join("") + "</div>";
var elem = $(".xmlDocumentAttributeList", page).html(html).trigger("create"); var elem = $(".xmlDocumentAttributeList", page).html(html).trigger("create");
@ -174,11 +174,11 @@ define(["jQuery", "loading", "globalize", "fnchecked", "emby-select", "emby-butt
var index = 0; var index = 0;
var html = '<div class="paperList">' + profiles.map(function (h) { var html = '<div class="paperList">' + profiles.map(function (h) {
var li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">'; var li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">';
li += '<i class="material-icons listItemIcon">info</i>'; li += '<span class="material-icons listItemIcon info"></span>';
li += '<div class="listItemBody">'; li += '<div class="listItemBody">';
li += '<h3 class="listItemBodyText">' + (h.Format || "") + "</h3>"; li += '<h3 class="listItemBodyText">' + (h.Format || "") + "</h3>";
li += "</div>"; li += "</div>";
li += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-index="' + index + '"><i class="material-icons">delete</i></button>'; li += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-index="' + index + '"><span class="material-icons delete"></span></button>';
li += "</div>"; li += "</div>";
index++; index++;
return li; return li;
@ -270,7 +270,7 @@ define(["jQuery", "loading", "globalize", "fnchecked", "emby-select", "emby-butt
} }
html += "</a>"; html += "</a>";
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons">delete</i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><span class="material-icons delete"></span></button>';
html += "</div>"; html += "</div>";
} }
@ -331,7 +331,7 @@ define(["jQuery", "loading", "globalize", "fnchecked", "emby-select", "emby-butt
} }
html += "</a>"; html += "</a>";
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons">delete</i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><span class="material-icons delete"></span></button>';
html += "</div>"; html += "</div>";
} }
@ -415,7 +415,7 @@ define(["jQuery", "loading", "globalize", "fnchecked", "emby-select", "emby-butt
} }
html += "</a>"; html += "</a>";
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons">delete</i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><span class="material-icons delete"></span></button>';
html += "</div>"; html += "</div>";
} }
@ -487,7 +487,7 @@ define(["jQuery", "loading", "globalize", "fnchecked", "emby-select", "emby-butt
} }
html += "</a>"; html += "</a>";
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons">delete</i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><span class="material-icons delete"></span></button>';
html += "</div>"; html += "</div>";
} }
@ -567,7 +567,7 @@ define(["jQuery", "loading", "globalize", "fnchecked", "emby-select", "emby-butt
} }
html += "</a>"; html += "</a>";
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons">delete</i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><span class="material-icons delete"></span></button>';
html += "</div>"; html += "</div>";
} }

4
src/controllers/dashboard/dlna/dlnaprofiles.js
View file

@ -32,7 +32,7 @@ define(["jQuery", "globalize", "loading", "libraryMenu", "listViewStyle", "emby-
for (var i = 0, length = profiles.length; i < length; i++) { for (var i = 0, length = profiles.length; i < length; i++) {
var profile = profiles[i]; var profile = profiles[i];
html += '<div class="listItem listItem-border">'; html += '<div class="listItem listItem-border">';
html += '<i class="listItemIcon material-icons live_tv"></i>'; html += '<span class="listItemIcon material-icons live_tv"></span>';
html += '<div class="listItemBody two-line">'; html += '<div class="listItemBody two-line">';
html += "<a is='emby-linkbutton' style='padding:0;margin:0;' data-ripple='false' class='clearLink' href='dlnaprofile.html?id=" + profile.Id + "'>"; html += "<a is='emby-linkbutton' style='padding:0;margin:0;' data-ripple='false' class='clearLink' href='dlnaprofile.html?id=" + profile.Id + "'>";
html += "<div>" + profile.Name + "</div>"; html += "<div>" + profile.Name + "</div>";
@ -40,7 +40,7 @@ define(["jQuery", "globalize", "loading", "libraryMenu", "listViewStyle", "emby-
html += "</div>"; html += "</div>";
if ("User" == profile.Type) { if ("User" == profile.Type) {
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + globalize.translate("ButtonDelete") + '"><i class="material-icons">delete</i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + globalize.translate("ButtonDelete") + '"><span class="material-icons delete"></span></button>';
} }
html += "</div>"; html += "</div>";

6
src/controllers/dashboard/medialibrarypage.js
View file

@ -268,7 +268,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
hasCardImageContainer = true; hasCardImageContainer = true;
} else if (!virtualFolder.showNameWithIcon) { } else if (!virtualFolder.showNameWithIcon) {
html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;">'; html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;">';
html += '<i class="cardImageIcon-small material-icons">' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + "</i>"; html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
hasCardImageContainer = true; hasCardImageContainer = true;
} }
@ -281,7 +281,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
if (!imgUrl && virtualFolder.showNameWithIcon) { if (!imgUrl && virtualFolder.showNameWithIcon) {
html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">'; html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">';
html += '<i class="cardImageIcon-small material-icons">' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + "</i>"; html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
if (virtualFolder.showNameWithIcon) { if (virtualFolder.showNameWithIcon) {
html += '<div style="margin:1em 0;position:width:100%;">'; html += '<div style="margin:1em 0;position:width:100%;">';
@ -298,7 +298,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
if (virtualFolder.showMenu !== false) { if (virtualFolder.showMenu !== false) {
html += '<div style="text-align:right; float:right;padding-top:5px;">'; html += '<div style="text-align:right; float:right;padding-top:5px;">';
html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><i class="material-icons more_horiz"></i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_horiz"></span></button>';
html += "</div>"; html += "</div>";
} }

6
src/controllers/dashboard/notifications/notifications.js
View file

@ -31,14 +31,14 @@ define(["loading", "libraryMenu", "globalize", "listViewStyle", "emby-button"],
} }
itemHtml += '<a class="listItem listItem-border" is="emby-linkbutton" data-ripple="false" href="notificationsetting.html?type=' + notification.Type + '">'; itemHtml += '<a class="listItem listItem-border" is="emby-linkbutton" data-ripple="false" href="notificationsetting.html?type=' + notification.Type + '">';
if (notification.Enabled) { if (notification.Enabled) {
itemHtml += '<i class="listItemIcon material-icons notifications_active"></i>'; itemHtml += '<span class="listItemIcon material-icons notifications_active"></span>';
} else { } else {
itemHtml += '<i class="listItemIcon material-icons notifications_off" style="background-color:#999;"></i>'; itemHtml += '<span class="listItemIcon material-icons notifications_off" style="background-color:#999;"></span>';
} }
itemHtml += '<div class="listItemBody">'; itemHtml += '<div class="listItemBody">';
itemHtml += '<div class="listItemBodyText">' + notification.Name + "</div>"; itemHtml += '<div class="listItemBodyText">' + notification.Name + "</div>";
itemHtml += "</div>"; itemHtml += "</div>";
itemHtml += '<button type="button" is="paper-icon-button-light"><i class="material-icons mode_edit"></i></button>'; itemHtml += '<button type="button" is="paper-icon-button-light"><span class="material-icons mode_edit"></span></button>';
itemHtml += "</a>"; itemHtml += "</a>";
return itemHtml; return itemHtml;
}).join(""); }).join("");

2
src/controllers/dashboard/plugins/available.js
View file

@ -98,7 +98,7 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby
html += '<div class="cardScalable visualCardBox-cardScalable">'; html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>'; html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + ">"; html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + ">";
html += '<i class="cardImageIcon material-icons">folder</i>'; html += '<span class="cardImageIcon material-icons folder"></span>';
html += "</a>"; html += "</a>";
html += "</div>"; html += "</div>";
html += '<div class="cardFooter">'; html += '<div class="cardFooter">';

4
src/controllers/dashboard/plugins/installed.js
View file

@ -42,12 +42,12 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
html += '<div class="cardScalable">'; html += '<div class="cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>'; html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer">'; html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer">';
html += '<i class="cardImageIcon material-icons">folder</i>'; html += '<span class="cardImageIcon material-icons folder"></span>';
html += configPageUrl ? "</a>" : "</div>"; html += configPageUrl ? "</a>" : "</div>";
html += "</div>"; html += "</div>";
html += '<div class="cardFooter">'; html += '<div class="cardFooter">';
html += '<div style="text-align:right; float:right;padding-top:5px;">'; html += '<div style="text-align:right; float:right;padding-top:5px;">';
html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><i class="material-icons more_horiz"></i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_horiz"></span></button>';
html += "</div>"; html += "</div>";
html += "<div class='cardText'>"; html += "<div class='cardText'>";
html += configPage.DisplayName || plugin.Name; html += configPage.DisplayName || plugin.Name;

4
src/controllers/dashboard/scheduledtasks/scheduledtask.js
View file

@ -49,7 +49,7 @@ define(["jQuery", "loading", "datetime", "dom", "globalize", "emby-input", "emby
var trigger = task.Triggers[i]; var trigger = task.Triggers[i];
html += '<div class="listItem listItem-border">'; html += '<div class="listItem listItem-border">';
html += '<i class="material-icons listItemIcon">schedule</i>'; html += '<span class="material-icons listItemIcon schedule"></span>';
if (trigger.MaxRuntimeMs) { if (trigger.MaxRuntimeMs) {
html += '<div class="listItemBody two-line">'; html += '<div class="listItemBody two-line">';
} else { } else {
@ -68,7 +68,7 @@ define(["jQuery", "loading", "datetime", "dom", "globalize", "emby-input", "emby
} }
html += "</div>"; html += "</div>";
html += '<button class="btnDeleteTrigger" data-index="' + i + '" type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDelete") + '"><i class="material-icons">delete</i></button>'; html += '<button class="btnDeleteTrigger" data-index="' + i + '" type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDelete") + '"><span class="material-icons delete"></span></button>';
html += "</div>"; html += "</div>";
} }

8
src/controllers/dashboard/scheduledtasks/scheduledtasks.js
View file

@ -40,7 +40,7 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "date
} }
html += '<div class="listItem listItem-border scheduledTaskPaperIconItem" data-status="' + task.State + '">'; html += '<div class="listItem listItem-border scheduledTaskPaperIconItem" data-status="' + task.State + '">';
html += "<a is='emby-linkbutton' style='margin:0;padding:0;' class='clearLink listItemIconContainer' href='scheduledtask.html?id=" + task.Id + "'>"; html += "<a is='emby-linkbutton' style='margin:0;padding:0;' class='clearLink listItemIconContainer' href='scheduledtask.html?id=" + task.Id + "'>";
html += '<i class="material-icons listItemIcon">schedule</i>'; html += '<span class="material-icons listItemIcon schedule"></span>';
html += "</a>"; html += "</a>";
html += '<div class="listItemBody two-line">'; html += '<div class="listItemBody two-line">';
html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:left;' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>"; html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:left;' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";
@ -49,9 +49,9 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "date
html += "</a>"; html += "</a>";
html += "</div>"; html += "</div>";
if (task.State === "Running") { if (task.State === "Running") {
html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStopTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStop") + '"><i class="material-icons stop"></i></button>'; html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStopTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStop") + '"><span class="material-icons stop"></span></button>';
} else if (task.State === "Idle") { } else if (task.State === "Idle") {
html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStart") + '"><i class="material-icons play_arrow"></i></button>'; html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStart") + '"><span class="material-icons play_arrow"></span></button>';
} }
html += "</div>"; html += "</div>";
} }
@ -94,7 +94,7 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "date
} }
function setTaskButtonIcon(button, icon) { function setTaskButtonIcon(button, icon) {
var inner = button.querySelector("i"); var inner = button.querySelector(".material-icons");
inner.classList.remove("stop", "play_arrow"); inner.classList.remove("stop", "play_arrow");
inner.classList.add(icon); inner.classList.add(icon);
} }

2
src/controllers/favorites.js
View file

@ -248,7 +248,7 @@ define(["appRouter", "cardBuilder", "dom", "globalize", "connectionManager", "ap
html += '<h2 class="sectionTitle sectionTitle-cards">'; html += '<h2 class="sectionTitle sectionTitle-cards">';
html += globalize.translate(section.name); html += globalize.translate(section.name);
html += "</h2>"; html += "</h2>";
html += '<i class="material-icons chevron_right"></i>'; html += '<span class="material-icons chevron_right"></span>';
html += "</a>"; html += "</a>";
} }

3
src/controllers/itemdetailpage.js
View file

@ -1736,7 +1736,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
html += '<h2 class="sectionTitle sectionTitle-cards">'; html += '<h2 class="sectionTitle sectionTitle-cards">';
html += "<span>" + type.name + "</span>"; html += "<span>" + type.name + "</span>";
html += "</h2>"; html += "</h2>";
html += '<button class="btnAddToCollection sectionTitleButton" type="button" is="paper-icon-button-light" style="margin-left:1em;"><i class="material-icons" icon="add">add</i></button>'; html += '<button class="btnAddToCollection sectionTitleButton" type="button" is="paper-icon-button-light" style="margin-left:1em;"><span class="material-icons add"></span></button>';
html += "</div>"; html += "</div>";
html += '<div is="emby-itemscontainer" class="itemsContainer collectionItemsContainer vertical-wrap padded-left padded-right">'; html += '<div is="emby-itemscontainer" class="itemsContainer collectionItemsContainer vertical-wrap padded-left padded-right">';
var shape = "MusicAlbum" == type.type ? getSquareShape(false) : getPortraitShape(false); var shape = "MusicAlbum" == type.type ? getSquareShape(false) : getPortraitShape(false);
@ -2065,7 +2065,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
bindAll(view, ".btnCancelTimer", "click", onCancelTimerClick); bindAll(view, ".btnCancelTimer", "click", onCancelTimerClick);
bindAll(view, ".btnDeleteItem", "click", onDeleteClick); bindAll(view, ".btnDeleteItem", "click", onDeleteClick);
bindAll(view, ".btnDownload", "click", onDownloadClick); bindAll(view, ".btnDownload", "click", onDownloadClick);
view.querySelector(".btnMoreCommands i").innerHTML = "&#xE5D3;";
view.querySelector(".trackSelections").addEventListener("submit", onTrackSelectionsSubmit); view.querySelector(".trackSelections").addEventListener("submit", onTrackSelectionsSubmit);
view.querySelector(".btnSplitVersions").addEventListener("click", function () { view.querySelector(".btnSplitVersions").addEventListener("click", function () {
splitVersions(self, view, apiClient, params); splitVersions(self, view, apiClient, params);

8
src/controllers/livetvstatus.js
View file

@ -26,11 +26,11 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
html += '<div class="cardScalable visualCardBox-cardScalable">'; html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="' + padderClass + '"></div>'; html += '<div class="' + padderClass + '"></div>';
html += '<div class="cardContent searchImage">'; html += '<div class="cardContent searchImage">';
html += '<div class="cardImageContainer coveredImage"><i class="cardImageIcon material-icons">dvr</i></div>'; html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
html += "</div>"; html += "</div>";
html += "</div>"; html += "</div>";
html += '<div class="cardFooter visualCardBox-cardFooter">'; html += '<div class="cardFooter visualCardBox-cardFooter">';
html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><i class="material-icons more_horiz"></i></button>'; html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><span class="material-icons more_horiz"></span></button>';
html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + "</div>"; html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + "</div>";
html += '<div class="cardText cardText-secondary">'; html += '<div class="cardText cardText-secondary">';
html += device.Url || "&nbsp;"; html += device.Url || "&nbsp;";
@ -101,7 +101,7 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
for (var i = 0, length = providers.length; i < length; i++) { for (var i = 0, length = providers.length; i < length; i++) {
var provider = providers[i]; var provider = providers[i];
html += '<div class="listItem">'; html += '<div class="listItem">';
html += '<i class="listItemIcon material-icons">dvr</i>'; html += '<span class="listItemIcon material-icons dvr"></span>';
html += '<div class="listItemBody two-line">'; html += '<div class="listItemBody two-line">';
html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + "&id=" + provider.Id + '">'; html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + "&id=" + provider.Id + '">';
html += '<h3 class="listItemBodyText">'; html += '<h3 class="listItemBodyText">';
@ -112,7 +112,7 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
html += "</div>"; html += "</div>";
html += "</a>"; html += "</a>";
html += "</div>"; html += "</div>";
html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><i class="material-icons listItemAside more_horiz"></i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><span class="material-icons listItemAside more_horiz"></span></button>';
html += "</div>"; html += "</div>";
} }

4
src/controllers/movies/moviegenres.js
View file

@ -121,7 +121,7 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
}); });
} }
if (result.Items.length >= query.Limit) { if (result.Items.length >= query.Limit) {
tabContent.querySelector(".btnMoreFromGenre" + id + " i").classList.remove("hide"); tabContent.querySelector(".btnMoreFromGenre" + id + " .material-icons").classList.remove("hide");
} }
}); });
} }
@ -145,7 +145,7 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
html += '<h2 class="sectionTitle sectionTitle-cards">'; html += '<h2 class="sectionTitle sectionTitle-cards">';
html += item.Name; html += item.Name;
html += "</h2>"; html += "</h2>";
html += '<i class="material-icons hide chevron_right"></i>'; html += '<span class="material-icons hide chevron_right"></span>';
html += "</a>"; html += "</a>";
html += "</div>"; html += "</div>";
if (enableScrollX()) { if (enableScrollX()) {

44
src/controllers/playback/videoosd.js
View file

@ -515,12 +515,17 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
} }
function updateFullscreenIcon() { function updateFullscreenIcon() {
const button = view.querySelector(".btnFullscreen");
const icon = button.querySelector(".material-icons");
icon.classList.remove("fullscreen_exit", "fullscreen");
if (playbackManager.isFullscreen(currentPlayer)) { if (playbackManager.isFullscreen(currentPlayer)) {
view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("ExitFullscreen")); button.setAttribute("title", globalize.translate("ExitFullscreen") + " (f)");
view.querySelector(".btnFullscreen i").innerHTML = "&#xE5D1;"; icon.classList.add("fullscreen_exit");
} else { } else {
view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("Fullscreen") + " (f)"); button.setAttribute("title", globalize.translate("Fullscreen") + " (f)");
view.querySelector(".btnFullscreen i").innerHTML = "fullscreen"; icon.classList.add("fullscreen");
} }
} }
@ -718,13 +723,17 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
} }
function updatePlayPauseState(isPaused) { function updatePlayPauseState(isPaused) {
var button = view.querySelector(".btnPause i"); const btnPlayPause = view.querySelector(".btnPause");
const btnPlayPauseIcon = btnPlayPause.querySelector(".material-icons");
btnPlayPauseIcon.classList.remove("play_arrow", "pause");
if (isPaused) { if (isPaused) {
button.innerHTML = "&#xE037;"; btnPlayPauseIcon.classList.add("play_arrow");
button.setAttribute("title", globalize.translate("ButtonPlay") + " (k)"); btnPlayPause.setAttribute("title", globalize.translate("ButtonPlay") + " (k)");
} else { } else {
button.innerHTML = "pause"; btnPlayPauseIcon.classList.add("pause");
button.setAttribute("title", globalize.translate("ButtonPause") + " (k)"); btnPlayPause.setAttribute("title", globalize.translate("ButtonPause") + " (k)");
} }
} }
@ -855,18 +864,23 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
showVolumeSlider = false; showVolumeSlider = false;
} }
const buttonMute = view.querySelector(".buttonMute");
const buttonMuteIcon = buttonMute.querySelector(".material-icons");
buttonMuteIcon.classList.remove("volume_off", "volume_up");
if (isMuted) { if (isMuted) {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute") + " (m)"); buttonMute.setAttribute("title", globalize.translate("Unmute") + " (m)");
view.querySelector(".buttonMute i").innerHTML = "&#xE04F;"; buttonMuteIcon.classList.add("volume_off");
} else { } else {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute") + " (m)"); buttonMute.setAttribute("title", globalize.translate("Mute") + " (m)");
view.querySelector(".buttonMute i").innerHTML = "&#xE050;"; buttonMuteIcon.classList.add("volume_up");
} }
if (showMuteButton) { if (showMuteButton) {
view.querySelector(".buttonMute").classList.remove("hide"); buttonMute.classList.remove("hide");
} else { } else {
view.querySelector(".buttonMute").classList.add("hide"); buttonMute.classList.add("hide");
} }
if (nowPlayingVolumeSlider) { if (nowPlayingVolumeSlider) {

4
src/controllers/shows/tvgenres.js
View file

@ -121,7 +121,7 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
}); });
} }
if (result.Items.length >= query.Limit) { if (result.Items.length >= query.Limit) {
tabContent.querySelector(".btnMoreFromGenre" + id + " i").classList.remove("hide"); tabContent.querySelector(".btnMoreFromGenre" + id + " .material-icons").classList.remove("hide");
} }
}); });
} }
@ -144,7 +144,7 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
html += '<h2 class="sectionTitle sectionTitle-cards">'; html += '<h2 class="sectionTitle sectionTitle-cards">';
html += item.Name; html += item.Name;
html += "</h2>"; html += "</h2>";
html += '<i class="material-icons hide chevron_right"></i>'; html += '<span class="material-icons hide chevron_right"></span>';
html += "</a>"; html += "</a>";
html += "</div>"; html += "</div>";
if (enableScrollX()) { if (enableScrollX()) {

4
src/controllers/userparentalcontrol.js
View file

@ -108,7 +108,7 @@ define(["jQuery", "datetime", "loading", "libraryMenu", "globalize", "listViewSt
li += h; li += h;
li += "</h3>"; li += "</h3>";
li += "</div>"; li += "</div>";
li += '<button type="button" is="paper-icon-button-light" class="blockedTag btnDeleteTag listItemButton" data-tag="' + h + '"><i class="material-icons">delete</i></button>'; li += '<button type="button" is="paper-icon-button-light" class="blockedTag btnDeleteTag listItemButton" data-tag="' + h + '"><span class="material-icons delete"></span></button>';
return li += "</div>"; return li += "</div>";
}).join(""); }).join("");
@ -143,7 +143,7 @@ define(["jQuery", "datetime", "loading", "libraryMenu", "globalize", "listViewSt
itemHtml += "</h3>"; itemHtml += "</h3>";
itemHtml += '<div class="listItemBodyText secondary">' + getDisplayTime(a.StartHour) + " - " + getDisplayTime(a.EndHour) + "</div>"; itemHtml += '<div class="listItemBodyText secondary">' + getDisplayTime(a.StartHour) + " - " + getDisplayTime(a.EndHour) + "</div>";
itemHtml += "</div>"; itemHtml += "</div>";
itemHtml += '<button type="button" is="paper-icon-button-light" class="btnDelete listItemButton" data-index="' + index + '"><i class="material-icons">delete</i></button>'; itemHtml += '<button type="button" is="paper-icon-button-light" class="btnDelete listItemButton" data-index="' + index + '"><span class="material-icons delete"></span></button>';
itemHtml += "</div>"; itemHtml += "</div>";
index++; index++;
return itemHtml; return itemHtml;

8
src/controllers/userprofilespage.js
View file

@ -104,7 +104,7 @@ define(["loading", "dom", "globalize", "date-fns", "dfnshelper", "paper-icon-but
html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + "');\">"; html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + "');\">";
} else { } else {
html += '<div class="' + imageClass + ' flex align-items-center justify-content-center">'; html += '<div class="' + imageClass + ' flex align-items-center justify-content-center">';
html += '<i class="material-icons cardImageIcon">person</i>'; html += '<span class="material-icons cardImageIcon person"></span>';
} }
html += "</div>"; html += "</div>";
@ -115,7 +115,7 @@ define(["loading", "dom", "globalize", "date-fns", "dfnshelper", "paper-icon-but
html += '<div class="flex-grow" style="overflow:hidden;text-overflow:ellipsis;">'; html += '<div class="flex-grow" style="overflow:hidden;text-overflow:ellipsis;">';
html += user.Name; html += user.Name;
html += "</div>"; html += "</div>";
html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu flex-shrink-zero"><i class="material-icons more_horiz"></i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu flex-shrink-zero"><span class="material-icons more_horiz"></span></button>';
html += "</div>"; html += "</div>";
html += '<div class="cardText cardText-secondary">'; html += '<div class="cardText cardText-secondary">';
var lastSeen = getLastSeenText(user.LastActivityDate); var lastSeen = getLastSeenText(user.LastActivityDate);
@ -182,14 +182,14 @@ define(["loading", "dom", "globalize", "date-fns", "dfnshelper", "paper-icon-but
html += '<div class="cardImage" style="background-image:url(\'' + user.ImageUrl + "');\">"; html += '<div class="cardImage" style="background-image:url(\'' + user.ImageUrl + "');\">";
html += "</div>"; html += "</div>";
} else { } else {
html += '<i class="cardImageIcon material-icons">person</i>'; html += '<span class="cardImageIcon material-icons person"></span>';
} }
html += "</a>"; html += "</a>";
html += "</div>"; html += "</div>";
html += '<div class="cardFooter visualCardBox-cardFooter">'; html += '<div class="cardFooter visualCardBox-cardFooter">';
html += '<div class="cardText" style="text-align:right; float:right;padding:0;">'; html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu"><i class="material-icons more_horiz"></i></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu"><span class="material-icons more_horiz"></span></button>';
html += "</div>"; html += "</div>";
html += '<div class="cardText" style="padding-top:10px;padding-bottom:10px;">'; html += '<div class="cardText" style="padding-top:10px;padding-bottom:10px;">';
html += user.UserName; html += user.UserName;

10
src/dashboard.html
View file

@ -5,7 +5,7 @@
<div class="dashboardSection"> <div class="dashboardSection">
<a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton"> <a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton">
<h3>${TabServer}</h3> <h3>${TabServer}</h3>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
<div class="paperList" style="padding: 1em;"> <div class="paperList" style="padding: 1em;">
@ -34,7 +34,7 @@
<div class="dashboardSection"> <div class="dashboardSection">
<a is="emby-linkbutton" href="devices.html" class="button-flat sectionTitleTextButton"> <a is="emby-linkbutton" href="devices.html" class="button-flat sectionTitleTextButton">
<h3>${HeaderActiveDevices}</h3> <h3>${HeaderActiveDevices}</h3>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
<div class="activeDevices itemsContainer vertical-wrap"> <div class="activeDevices itemsContainer vertical-wrap">
</div> </div>
@ -45,7 +45,7 @@
<div class="dashboardSection"> <div class="dashboardSection">
<a is="emby-linkbutton" href="serveractivity.html?useractivity=true" class="button-flat sectionTitleTextButton"> <a is="emby-linkbutton" href="serveractivity.html?useractivity=true" class="button-flat sectionTitleTextButton">
<h3>${HeaderActivity}</h3> <h3>${HeaderActivity}</h3>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
<div class="paperList userActivityItems" data-activitylimit="7" data-useractivity="true"> <div class="paperList userActivityItems" data-activitylimit="7" data-useractivity="true">
</div> </div>
@ -62,7 +62,7 @@
<div class="dashboardSection serverActivitySection hide activityContainer"> <div class="dashboardSection serverActivitySection hide activityContainer">
<a is="emby-linkbutton" href="serveractivity.html?useractivity=false" class="button-flat sectionTitleTextButton"> <a is="emby-linkbutton" href="serveractivity.html?useractivity=false" class="button-flat sectionTitleTextButton">
<h3>${Alerts}</h3> <h3>${Alerts}</h3>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
<div class="paperList serverActivityItems" data-activitylimit="4" data-useractivity="false"> <div class="paperList serverActivityItems" data-activitylimit="4" data-useractivity="false">
</div> </div>
@ -71,7 +71,7 @@
<div class="dashboardSection"> <div class="dashboardSection">
<a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton"> <a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton">
<h3>${HeaderPaths}</h3> <h3>${HeaderPaths}</h3>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
<div class="paperList"> <div class="paperList">
<div class="listItem listItem-border"> <div class="listItem listItem-border">

4
src/dashboardgeneral.html
View file

@ -39,7 +39,7 @@
<div style="flex-grow:1;"> <div style="flex-grow:1;">
<input is="emby-input" id="txtCachePath" label="${LabelCachePath}" autocomplete="off" /> <input is="emby-input" id="txtCachePath" label="${LabelCachePath}" autocomplete="off" />
</div> </div>
<button type="button" is="paper-icon-button-light" id="btnSelectCachePath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><i class="material-icons">search</i></button> <button type="button" is="paper-icon-button-light" id="btnSelectCachePath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div> </div>
<div class="fieldDescription">${LabelCachePathHelp}</div> <div class="fieldDescription">${LabelCachePathHelp}</div>
</div> </div>
@ -49,7 +49,7 @@
<div style="flex-grow:1;"> <div style="flex-grow:1;">
<input is="emby-input" id="txtMetadataPath" label="${LabelMetadataPath}" autocomplete="off" /> <input is="emby-input" id="txtMetadataPath" label="${LabelMetadataPath}" autocomplete="off" />
</div> </div>
<button type="button" is="paper-icon-button-light" id="btnSelectMetadataPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><i class="material-icons">search</i></button> <button type="button" is="paper-icon-button-light" id="btnSelectMetadataPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div> </div>
<div class="fieldDescription">${LabelMetadataPathHelp}</div> <div class="fieldDescription">${LabelMetadataPathHelp}</div>
<input type="hidden" id="txtMetadataNetworkPath" /> <input type="hidden" id="txtMetadataNetworkPath" />

4
src/dlnaprofile.html
View file

@ -98,7 +98,7 @@
<div> <div>
<h2 style="vertical-align:middle;display:inline-block;">${HeaderHttpHeaders}</h2> <h2 style="vertical-align:middle;display:inline-block;">${HeaderHttpHeaders}</h2>
<button is="emby-button" type="button" class="fab btnAddIdentificationHttpHeader submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAdd}"> <button is="emby-button" type="button" class="fab btnAddIdentificationHttpHeader submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAdd}">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
</div> </div>
<div class="httpHeaderIdentificationList"></div> <div class="httpHeaderIdentificationList"></div>
@ -221,7 +221,7 @@
<div> <div>
<h2 style="vertical-align:middle;display:inline-block;">${HeaderXmlDocumentAttributes}</h2> <h2 style="vertical-align:middle;display:inline-block;">${HeaderXmlDocumentAttributes}</h2>
<button is="emby-button" type="button" class="fab btnAddXmlDocumentAttribute submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAdd}"> <button is="emby-button" type="button" class="fab btnAddXmlDocumentAttribute submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAdd}">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
</div> </div>
<div class="xmlDocumentAttributeList"></div> <div class="xmlDocumentAttributeList"></div>

2
src/dlnaprofiles.html
View file

@ -9,7 +9,7 @@
<div class="sectionTitleContainer flex align-items-center"> <div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${HeaderCustomDlnaProfiles}</h2> <h2 class="sectionTitle">${HeaderCustomDlnaProfiles}</h2>
<a is="emby-linkbutton" href="dlnaprofile.html" class="fab submit" style="margin:0 0 0 1em"> <a is="emby-linkbutton" href="dlnaprofile.html" class="fab submit" style="margin:0 0 0 1em">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</a> </a>
<a style="margin-left:2em!important;" is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Dlna-profiles">${Help}</a> <a style="margin-left:2em!important;" is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Dlna-profiles">${Help}</a>
</div> </div>

6
src/elements/emby-button/emby-button.css
View file

@ -59,12 +59,12 @@
text-decoration: underline; text-decoration: underline;
} }
.emby-button > i { .emby-button > .material-icons {
/* For non-fab buttons that have icons */ /* For non-fab buttons that have icons */
font-size: 1.36em; font-size: 1.36em;
} }
.button-link > i { .button-link > .material-icons {
font-size: 1em; font-size: 1em;
} }
@ -137,7 +137,7 @@
cursor: default; cursor: default;
} }
.paper-icon-button-light > i { .paper-icon-button-light > .material-icons {
font-size: 1.66956521739130434em; font-size: 1.66956521739130434em;
/* Make sure its on top of the ripple */ /* Make sure its on top of the ripple */

4
src/elements/emby-checkbox/emby-checkbox.js
View file

@ -57,8 +57,8 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
var checkedIcon = this.getAttribute('data-checkedicon') || 'check'; var checkedIcon = this.getAttribute('data-checkedicon') || 'check';
var uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
var checkHtml = '<i class="material-icons checkboxIcon checkboxIcon-checked">' + checkedIcon + '</i>'; var checkHtml = '<span class="material-icons checkboxIcon checkboxIcon-checked ' + checkedIcon + '"></span>';
var uncheckedHtml = '<i class="material-icons checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + '</i>'; var uncheckedHtml = '<span class="material-icons checkboxIcon checkboxIcon-unchecked ' + uncheckedIcon + '"></span>';
labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>'); labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
labelTextElement.classList.add('checkboxLabel'); labelTextElement.classList.add('checkboxLabel');

6
src/elements/emby-collapse/emby-collapse.js
View file

@ -24,7 +24,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
elem.style.height = 'auto'; elem.style.height = 'auto';
}, 300); }, 300);
var icon = button.querySelector('i'); var icon = button.querySelector('.material-icons');
//icon.innerHTML = 'expand_less'; //icon.innerHTML = 'expand_less';
icon.classList.add('emby-collapse-expandIconExpanded'); icon.classList.add('emby-collapse-expandIconExpanded');
} }
@ -46,7 +46,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
} }
}, 300); }, 300);
var icon = button.querySelector('i'); var icon = button.querySelector('.material-icons');
//icon.innerHTML = 'expand_more'; //icon.innerHTML = 'expand_more';
icon.classList.remove('emby-collapse-expandIconExpanded'); icon.classList.remove('emby-collapse-expandIconExpanded');
} }
@ -80,7 +80,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
var title = this.getAttribute('title'); var title = this.getAttribute('title');
var html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><i class="material-icons emby-collapse-expandIcon expand_more"></i></button>'; var html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><span class="material-icons emby-collapse-expandIcon expand_more"></span></button>';
this.insertAdjacentHTML('afterbegin', html); this.insertAdjacentHTML('afterbegin', html);

2
src/elements/emby-playstatebutton/emby-playstatebutton.js
View file

@ -41,7 +41,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
function setState(button, played, updateAttribute) { function setState(button, played, updateAttribute) {
var icon = button.iconElement; var icon = button.iconElement;
if (!icon) { if (!icon) {
button.iconElement = button.querySelector('i'); button.iconElement = button.querySelector('.material-icons');
icon = button.iconElement; icon = button.iconElement;
} }

10
src/elements/emby-ratingbutton/emby-ratingbutton.js
View file

@ -57,12 +57,12 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
function setState(button, likes, isFavorite, updateAttribute) { function setState(button, likes, isFavorite, updateAttribute) {
var icon = button.querySelector('i'); var icon = button.querySelector('.material-icons');
if (isFavorite) { if (isFavorite) {
if (icon) { if (icon) {
icon.innerHTML = 'favorite'; icon.classList.add('favorite');
icon.classList.add('ratingbutton-icon-withrating'); icon.classList.add('ratingbutton-icon-withrating');
} }
@ -71,7 +71,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
} else if (likes) { } else if (likes) {
if (icon) { if (icon) {
icon.innerHTML = 'favorite'; icon.classList.add('favorite');
icon.classList.remove('ratingbutton-icon-withrating'); icon.classList.remove('ratingbutton-icon-withrating');
//icon.innerHTML = 'thumb_up'; //icon.innerHTML = 'thumb_up';
} }
@ -80,7 +80,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
} else if (likes === false) { } else if (likes === false) {
if (icon) { if (icon) {
icon.innerHTML = 'favorite'; icon.classList.add('favorite');
icon.classList.remove('ratingbutton-icon-withrating'); icon.classList.remove('ratingbutton-icon-withrating');
//icon.innerHTML = 'thumb_down'; //icon.innerHTML = 'thumb_down';
} }
@ -89,7 +89,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
} else { } else {
if (icon) { if (icon) {
icon.innerHTML = 'favorite'; icon.classList.add('favorite');
icon.classList.remove('ratingbutton-icon-withrating'); icon.classList.remove('ratingbutton-icon-withrating');
//icon.innerHTML = 'thumbs_up_down'; //icon.innerHTML = 'thumbs_up_down';
} }

2
src/elements/emby-scrollbuttons/emby-scrollbuttons.css
View file

@ -12,7 +12,7 @@
display: flex; display: flex;
} }
.emby-scrollbuttons-button > i { .emby-scrollbuttons-button > .material-icons {
min-width: 24px; min-width: 24px;
min-height: 24px; min-height: 24px;
display: block; display: block;

4
src/elements/emby-scrollbuttons/emby-scrollbuttons.js
View file

@ -7,10 +7,10 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
function getScrollButtonHtml(direction) { function getScrollButtonHtml(direction) {
var html = ''; var html = '';
var icon = direction === 'left' ? '&#xE5CB;' : '&#xE5CC;'; var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">'; html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
html += '<i class="material-icons">' + icon + '</i>'; html += '<span class="material-icons ' + icon + '"></span>';
html += '</button>'; html += '</button>';
return html; return html;

2
src/elements/emby-select/emby-select.js
View file

@ -144,7 +144,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
this.parentNode.insertBefore(label, this); this.parentNode.insertBefore(label, this);
if (this.classList.contains('emby-select-withcolor')) { if (this.classList.contains('emby-select-withcolor')) {
this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;display:none;">0</div><i class="selectArrow material-icons keyboard_arrow_down"></i></div>'); this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;display:none;">0</div><span class="selectArrow material-icons keyboard_arrow_down"></span></div>');
} }
}; };

4
src/encodingsettings.html
View file

@ -96,7 +96,7 @@
<div style="flex-grow:1;"> <div style="flex-grow:1;">
<input is="emby-input" class="txtEncoderPath" label="${LabelffmpegPath}" autocomplete="off" /> <input is="emby-input" class="txtEncoderPath" label="${LabelffmpegPath}" autocomplete="off" />
</div> </div>
<button type="button" is="paper-icon-button-light" id="btnSelectEncoderPath" class="emby-input-iconbutton"><i class="material-icons">search</i></button> <button type="button" is="paper-icon-button-light" id="btnSelectEncoderPath" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div> </div>
<div class="fieldDescription"> <div class="fieldDescription">
<div>${LabelffmpegPathHelp}</div> <div>${LabelffmpegPathHelp}</div>
@ -107,7 +107,7 @@
<div style="flex-grow:1;"> <div style="flex-grow:1;">
<input is="emby-input" id="txtTranscodingTempPath" label="${LabelTranscodePath}" autocomplete="off" /> <input is="emby-input" id="txtTranscodingTempPath" label="${LabelTranscodePath}" autocomplete="off" />
</div> </div>
<button type="button" is="paper-icon-button-light" id="btnSelectTranscodingTempPath" class="emby-input-iconbutton"><i class="material-icons">search</i></button> <button type="button" is="paper-icon-button-light" id="btnSelectTranscodingTempPath" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div> </div>
<div class="fieldDescription">${LabelTranscodingTempPathHelp}</div> <div class="fieldDescription">${LabelTranscodingTempPathHelp}</div>
</div> </div>

28
src/itemdetails.html
View file

@ -1,7 +1,7 @@
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage noBackdrop" data-backbutton="true"> <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage noBackdrop" data-backbutton="true">
<div id="itemBackdrop" class="itemBackdrop"> <div id="itemBackdrop" class="itemBackdrop">
<button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume"> <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
<i class="material-icons play_arrow"></i> <span class="material-icons play_arrow"></span>
</button> </button>
</div> </div>
@ -17,91 +17,91 @@
<div class="mainDetailButtons"> <div class="mainDetailButtons">
<button is="emby-button" type="button" class="button-flat btnResume hide detailButton detailButtonHideonMobile" data-mode="resume"> <button is="emby-button" type="button" class="button-flat btnResume hide detailButton detailButtonHideonMobile" data-mode="resume">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon play_arrow"></i> <span class="material-icons detailButton-icon play_arrow"></span>
<div class="detailButton-text">${ButtonResume}</div> <div class="detailButton-text">${ButtonResume}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnPlay hide detailButton detailButtonHideonMobile" data-mode="play"> <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton detailButtonHideonMobile" data-mode="play">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon play_arrow"></i> <span class="material-icons detailButton-icon play_arrow"></span>
<div class="detailButton-text">${ButtonPlay}</div> <div class="detailButton-text">${ButtonPlay}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnDownload hide detailButton"> <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon get_app"></i> <span class="material-icons detailButton-icon get_app"></span>
<div class="detailButton-text">${ButtonDownload}</div> <div class="detailButton-text">${ButtonDownload}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton"> <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon">theaters</i> <span class="material-icons detailButton-icon theaters"></span>
<div class="detailButton-text">${ButtonTrailer}</div> <div class="detailButton-text">${ButtonTrailer}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton"> <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon">explore</i> <span class="material-icons detailButton-icon explore"></span>
<div class="detailButton-text">${HeaderInstantMix}</div> <div class="detailButton-text">${HeaderInstantMix}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton"> <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon">shuffle</i> <span class="material-icons detailButton-icon shuffle"></span>
<div class="detailButton-text">${ButtonShuffle}</div> <div class="detailButton-text">${ButtonShuffle}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton"> <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon">delete</i> <span class="material-icons detailButton-icon delete"></span>
<div class="detailButton-text">${CancelSeries}</div> <div class="detailButton-text">${CancelSeries}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton"> <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon">stop</i> <span class="material-icons detailButton-icon stop"></span>
<div class="detailButton-text">${StopRecording}</div> <div class="detailButton-text">${StopRecording}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton"> <button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon">delete</i> <span class="material-icons detailButton-icon delete"></span>
<div class="detailButton-text">${Delete}</div> <div class="detailButton-text">${Delete}</div>
</div> </div>
</button> </button>
<button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton"> <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon">check</i> <span class="material-icons detailButton-icon check"></span>
<div class="detailButton-text button-text"></div> <div class="detailButton-text button-text"></div>
</div> </div>
</button> </button>
<button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton"> <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon">favorite</i> <span class="material-icons detailButton-icon favorite"></span>
<div class="detailButton-text button-text">${Rate}</div> <div class="detailButton-text button-text">${Rate}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton"> <button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon call_split"></i> <span class="material-icons detailButton-icon call_split"></span>
<div class="detailButton-text">${ButtonSplit}</div> <div class="detailButton-text">${ButtonSplit}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton"> <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton">
<div class="detailButton-content"> <div class="detailButton-content">
<i class="material-icons detailButton-icon"></i> <span class="material-icons detailButton-icon more_horiz"></span>
<div class="detailButton-text">${ButtonMore}</div> <div class="detailButton-text">${ButtonMore}</div>
</div> </div>
</button> </button>

18
src/list.html
View file

@ -7,45 +7,45 @@
<span>${HeaderPlayAll}</span> <span>${HeaderPlayAll}</span>
</button> </button>
<button is="paper-icon-button-light" class="btnPlay listIconButton-autohide"> <button is="paper-icon-button-light" class="btnPlay listIconButton-autohide">
<i class="material-icons play_arrow"></i> <span class="material-icons play_arrow"></span>
</button> </button>
<button is="emby-button" class="btnQueue button-flat hide listTextButton-autohide"> <button is="emby-button" class="btnQueue button-flat hide listTextButton-autohide">
<span>${Queue}</span> <span>${Queue}</span>
</button> </button>
<button is="paper-icon-button-light" class="btnQueue hide listIconButton-autohide"> <button is="paper-icon-button-light" class="btnQueue hide listIconButton-autohide">
<i class="material-icons playlist_add"></i> <span class="material-icons playlist_add"></span>
</button> </button>
<button is="emby-button" class="btnShuffle button-flat hide listTextButton-autohide"> <button is="emby-button" class="btnShuffle button-flat hide listTextButton-autohide">
<span>${Shuffle}</span> <span>${Shuffle}</span>
</button> </button>
<button is="paper-icon-button-light" class="btnShuffle hide listIconButton-autohide"> <button is="paper-icon-button-light" class="btnShuffle hide listIconButton-autohide">
<i class="material-icons">shuffle</i> <span class="material-icons shuffle"></span>
</button> </button>
<button is="emby-button" class="btnNewItem hide button-flat listTextButton-autohide"> <button is="emby-button" class="btnNewItem hide button-flat listTextButton-autohide">
<span>${New}</span> <span>${New}</span>
</button> </button>
<button is="paper-icon-button-light" class="btnNewItem hide listIconButton-autohide"> <button is="paper-icon-button-light" class="btnNewItem hide listIconButton-autohide">
<i class="material-icons">add</i> <span class="material-icons add"></span>
</button> </button>
<button is="emby-button" class="btnSort hide button-flat listTextButton-autohide"> <button is="emby-button" class="btnSort hide button-flat listTextButton-autohide">
<span class="btnSortText"></span> <span class="btnSortText"></span>
<i class="material-icons btnSortIcon arrow_upward"></i> <span class="material-icons btnSortIcon arrow_upward"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnSort hide listIconButton-autohide"> <button is="paper-icon-button-light" class="btnSort hide listIconButton-autohide">
<i class="material-icons">sort</i> <span class="material-icons sort"></span>
</button> </button>
<button is="emby-button" class="btnFilter button-flat listTextButton-autohide"> <button is="emby-button" class="btnFilter button-flat listTextButton-autohide">
<span>${Filter}</span> <span>${Filter}</span>
</button> </button>
<button is="paper-icon-button-light" class="btnFilter listIconButton-autohide" data-ripple="false" style="overflow:visible;"> <button is="paper-icon-button-light" class="btnFilter listIconButton-autohide" data-ripple="false" style="overflow:visible;">
<i class="material-icons filter_list"></i> <span class="material-icons filter_list"></span>
</button> </button>
<button is="emby-button" class="btnViewSettings button-flat listTextButton-autohide"> <button is="emby-button" class="btnViewSettings button-flat listTextButton-autohide">
<i class="material-icons more_horiz"></i> <span class="material-icons more_horiz"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnViewSettings listIconButton-autohide"> <button is="paper-icon-button-light" class="btnViewSettings listIconButton-autohide">
<i class="material-icons more_horiz"></i> <span class="material-icons more_horiz"></span>
</button> </button>
</div> </div>
<div is="emby-itemscontainer" class="vertical-wrap itemsContainer centered" style="padding: 0 0 10vh 0;"> <div is="emby-itemscontainer" class="vertical-wrap itemsContainer centered" style="padding: 0 0 10vh 0;">

16
src/livetv.html
View file

@ -7,7 +7,7 @@
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left"> <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsAiring=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs"> <a href="list.html?type=Programs&IsAiring=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderOnNow}</h2> <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderOnNow}</h2>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
</div> </div>
<div is="emby-itemscontainer" class="activeProgramItems itemsContainer padded-left padded-right"></div> <div is="emby-itemscontainer" class="activeProgramItems itemsContainer padded-left padded-right"></div>
@ -16,7 +16,7 @@
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left"> <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsSeries=true&IsMovie=false&IsNews=false" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs"> <a href="list.html?type=Programs&IsSeries=true&IsMovie=false&IsNews=false" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${TabShows}</h2> <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${TabShows}</h2>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
</div> </div>
<div is="emby-itemscontainer" class="upcomingEpisodeItems itemsContainer padded-left padded-right"></div> <div is="emby-itemscontainer" class="upcomingEpisodeItems itemsContainer padded-left padded-right"></div>
@ -25,7 +25,7 @@
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left"> <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsMovie=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs"> <a href="list.html?type=Programs&IsMovie=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderMovies}</h2> <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderMovies}</h2>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
</div> </div>
<div is="emby-itemscontainer" class="upcomingTvMovieItems itemsContainer padded-left padded-right"></div> <div is="emby-itemscontainer" class="upcomingTvMovieItems itemsContainer padded-left padded-right"></div>
@ -34,7 +34,7 @@
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left"> <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsSports=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs"> <a href="list.html?type=Programs&IsSports=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Sports}</h2> <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Sports}</h2>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
</div> </div>
<div is="emby-itemscontainer" class="upcomingSportsItems itemsContainer padded-left padded-right"></div> <div is="emby-itemscontainer" class="upcomingSportsItems itemsContainer padded-left padded-right"></div>
@ -43,7 +43,7 @@
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left"> <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsKids=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs"> <a href="list.html?type=Programs&IsKids=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderForKids}</h2> <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderForKids}</h2>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
</div> </div>
<div is="emby-itemscontainer" class="upcomingKidsItems itemsContainer padded-left padded-right"></div> <div is="emby-itemscontainer" class="upcomingKidsItems itemsContainer padded-left padded-right"></div>
@ -52,7 +52,7 @@
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left"> <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsNews=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs"> <a href="list.html?type=Programs&IsNews=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${News}</h2> <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${News}</h2>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</a> </a>
</div> </div>
<div is="emby-itemscontainer" class="upcomingNewsItems itemsContainer padded-left padded-right"></div> <div is="emby-itemscontainer" class="upcomingNewsItems itemsContainer padded-left padded-right"></div>
@ -63,7 +63,7 @@
<div class="pageTabContent" id="channelsTab" data-index="2"> <div class="pageTabContent" id="channelsTab" data-index="2">
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div> <div class="paging"></div>
<button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${ButtonFilter}"><i class="material-icons filter_list"></i></button> <button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${ButtonFilter}"><span class="material-icons filter_list"></span></button>
</div> </div>
<div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap padded-left padded-right"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap padded-left padded-right"></div>
</div> </div>
@ -72,7 +72,7 @@
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left"> <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<button type="button" is="emby-button" class="button-flat button-flat-mini sectionTitleTextButton more" data-type="latest"> <button type="button" is="emby-button" class="button-flat button-flat-mini sectionTitleTextButton more" data-type="latest">
<h2 class="sectionTitle sectionTitle-cards">${HeaderLatestRecordings}</h2> <h2 class="sectionTitle sectionTitle-cards">${HeaderLatestRecordings}</h2>
<i class="material-icons chevron_right"></i> <span class="material-icons chevron_right"></span>
</button> </button>
</div> </div>
<div is="emby-itemscontainer" class="recordingItems itemsContainer padded-left padded-right"></div> <div is="emby-itemscontainer" class="recordingItems itemsContainer padded-left padded-right"></div>

Some files were not shown because too many files have changed in this diff Show more