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

fix sync container statuses

This commit is contained in:
Luke Pulverenti 2016-08-26 13:24:04 -04:00
parent f4473116d1
commit c32aa0dab1
23 changed files with 139 additions and 110 deletions

View file

@ -315,100 +315,100 @@
background-color: #F57F17;
}
.scalableCard.bannerCard {
.bannerCard-scalable {
width: 100%;
}
.scalableCard.backdropCard {
.backdropCard-scalable {
width: 100%;
}
.scalableCard.smallBackdropCard {
.smallBackdropCard-scalable {
width: 50%;
}
.scalableCard.squareCard {
.squareCard-scalable {
width: 50%;
}
.scalableCard.portraitCard {
.portraitCard-scalable {
width: 33.333333333333333333333333333333%;
}
.scalableCard.overflowPortraitCard {
.overflowPortraitCard-scalable {
width: 40%;
max-width: 200px;
}
.scalableCard.overflowBackdropCard {
.overflowBackdropCard-scalable {
width: 84%;
max-width: 400px;
}
.scalableCard.overflowSquareCard {
.overflowSquareCard-scalable {
width: 42%;
}
@media all and (min-width: 420px) {
.scalableCard.backdropCard {
.backdropCard-scalable {
width: 50%;
}
}
@media all and (min-width: 500px) {
.scalableCard.smallBackdropCard {
.smallBackdropCard-scalable {
width: 33.333333333333333333333333333333%;
}
.scalableCard.squareCard {
.squareCard-scalable {
width: 33.333333333333333333333333333333%;
}
}
@media all and (min-width: 640px) {
.scalableCard.portraitCard {
.portraitCard-scalable {
width: 25%;
}
.scalableCard.overflowPortraitCard {
.overflowPortraitCard-scalable {
width: 36%;
}
.scalableCard.overflowBackdropCard {
.overflowBackdropCard-scalable {
width: 60%;
}
.scalableCard.overflowSquareCard {
.overflowSquareCard-scalable {
width: 30%;
}
}
@media all and (min-width: 700px) {
.scalableCard.squareCard {
.squareCard-scalable {
width: 25%;
}
}
@media all and (min-width: 770px) {
.scalableCard.backdropCard {
.backdropCard-scalable {
width: 33.333333333333333333333333333333%;
}
}
@media all and (min-width: 800px) {
.scalableCard.bannerCard {
.bannerCard-scalable {
width: 50%;
}
.scalableCard.portraitCard {
.portraitCard-scalable {
width: 20%;
}
.scalableCard.smallBackdropCard {
.smallBackdropCard-scalable {
width: 25%;
}
}
@ -416,7 +416,7 @@
@media all and (min-width: 900px) {
.scalableCard.squareCard {
.squareCard-scalable {
width: 20%;
}
}
@ -424,42 +424,42 @@
@media all and (min-width: 1000px) {
.scalableCard.smallBackdropCard {
.smallBackdropCard-scalable {
width: 20%;
}
.scalableCard.overflowPortraitCard {
.overflowPortraitCard-scalable {
width: 23%;
}
.scalableCard.overflowBackdropCard {
.overflowBackdropCard-scalable {
width: 40%;
}
.scalableCard.overflowSquareCard {
.overflowSquareCard-scalable {
width: 22%;
}
}
@media all and (min-width: 1200px) {
.scalableCard.backdropCard {
.backdropCard-scalable {
width: 25%;
}
.scalableCard.squareCard {
.squareCard-scalable {
width: 16.666666666666666666666666666667%;
}
.scalableCard.bannerCard {
.bannerCard-scalable {
width: 33.333333333333333333333333333333%;
}
.scalableCard.portraitCard {
.portraitCard-scalable {
width: 16.666666666666666666666666666667%;
}
.scalableCard.smallBackdropCard {
.smallBackdropCard-scalable {
width: 16.666666666666666666666666666667%;
}
}
@ -467,15 +467,15 @@
@media all and (min-width: 1400px) {
.scalableCard.squareCard {
.squareCard-scalable {
width: 14.285714285714285714285714285714%;
}
.scalableCard.portraitCard {
.portraitCard-scalable {
width: 14.285714285714285714285714285714%;
}
.scalableCard.smallBackdropCard {
.smallBackdropCard-scalable {
width: 14.285714285714285714285714285714%;
}
}
@ -483,71 +483,71 @@
@media all and (min-width: 1600px) {
.scalableCard.scalableCard.portraitCard {
.portraitCard-scalable {
width: 12.5%;
}
.scalableCard.scalableCard.smallBackdropCard {
.smallBackdropCard-scalable {
width: 12.5%;
}
}
@media all and (min-width: 1800px) {
.scalableCard.squareCard {
.squareCard-scalable {
width: 12.5%;
}
.scalableCard.smallBackdropCard {
.smallBackdropCard-scalable {
width: 10%;
}
}
@media all and (min-width: 2100px) {
.scalableCard.squareCard {
.squareCard-scalable {
width: 11.111111111111111111111111111111%;
}
.scalableCard.backdropCard {
.backdropCard-scalable {
width: 20%;
}
.scalableCard.portraitCard {
.portraitCard-scalable {
width: 11.111111111111111111111111111111%;
}
}
@media all and (min-width: 2200px) {
.scalableCard.bannerCard {
.bannerCard-scalable {
width: 25%;
}
.scalableCard.portraitCard {
.portraitCard-scalable {
width: 10%;
}
}
@media all and (min-width: 2500px) {
.scalableCard.backdropCard {
.backdropCard-scalable {
width: 16.666666666666666666666666666667%;
}
}
.layout-tv .scalableCard.backdropCard {
.layout-tv .backdropCard-scalable {
width: 25%;
}
.layout-tv .scalableCard.squareCard {
.layout-tv .squareCard-scalable {
width: 16.66666666666666667%;
}
.layout-tv .scalableCard.portraitCard {
.layout-tv .portraitCard-scalable {
width: 16.66666666666666667%;
}
.layout-tv .scalableCard.personCard {
.layout-tv .personCard-scalable {
width: 14.285714285714285714285714285714%;
}

View file

@ -1014,7 +1014,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
var scalable = options.scalable !== false;
if (scalable) {
className += " scalableCard";
className += " scalableCard " + options.shape + "Card-scalable";
}
var imgInfo = getCardImageUrl(item, apiClient, options);

View file

@ -19,6 +19,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts', 'layout
}
className += ' ' + shape + 'Card';
className += ' ' + shape + 'Card-scalable';
if (options.block || options.rows) {
className += ' block';

View file

@ -51,7 +51,8 @@ define(['imageLoader', 'itemShortcuts', 'connectionManager', 'layoutManager'], f
function buildPersonCard(person, apiClient, serverId, options, className) {
className += " itemAction scalableCard";
className += " itemAction scalableCard personCard-scalable";
className += " " + (options.shape || 'portrait') + 'Card-scalable';
var imgUrl = getImgUrl(person, options.width, apiClient);

View file

@ -116,3 +116,7 @@
display: flex;
margin: .5em 0;
}
.checkboxList-paperList {
padding: 1em!important;
}

View file

@ -176,13 +176,13 @@
var cssClass = "card scalableCard";
if (currentItemType == "Episode") {
cssClass += " backdropCard";
cssClass += " backdropCard backdropCard-scalable";
}
else if (currentItemType == "MusicAlbum" || currentItemType == "MusicArtist") {
cssClass += " squareCard";
cssClass += " squareCard squareCard-scalable";
}
else {
cssClass += " portraitCard";
cssClass += " portraitCard portraitCard-scalable";
}
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';

View file

@ -1,4 +1,4 @@
<div id="cinemaModeConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Cinema-Mode" data-require="dashboard/cinemamodeconfiguration,paper-checkbox,emby-input,emby-button">
<div id="cinemaModeConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Cinema-Mode" data-require="dashboard/cinemamodeconfiguration,emby-checkbox,emby-input,emby-button">
<div data-role="content">
<div class="content-primary">
@ -7,47 +7,67 @@
<p>${CinemaModeConfigurationHelp}</p>
<div style="margin-top: 2em;">
<div class="paperListLabel">${LabelEnableCinemaModeFor}</div>
<div class="paperCheckboxList">
<paper-checkbox class="chkMovies">${OptionMovies}</paper-checkbox>
<paper-checkbox class="chkEpisodes">${OptionEpisodes}</paper-checkbox>
<h3 class="checkboxListLabel">${LabelEnableCinemaModeFor}</h3>
<div class="paperList checkboxList-paperList">
<label>
<input is="emby-checkbox" type="checkbox" class="chkMovies" />
<span>${OptionMovies}</span>
</label>
<label>
<input is="emby-checkbox" type="checkbox" class="chkEpisodes" />
<span>${OptionEpisodes}</span>
</label>
</div>
</div>
<br />
<div>
<div class="paperListLabel">${LabelSelectInternetTrailersForCinemaMode}</div>
<div class="paperCheckboxList">
<paper-checkbox class="chkUpcomingTheaterTrailers">${OptionUpcomingMoviesInTheaters}</paper-checkbox>
<paper-checkbox class="chkUpcomingDvdTrailers">${OptionUpcomingDvdMovies}</paper-checkbox>
<paper-checkbox class="chkUpcomingStreamingTrailers">${OptionUpcomingStreamingMovies}</paper-checkbox>
<paper-checkbox class="chkOtherTrailers">${OptionOtherTrailers}</paper-checkbox>
<h3 class="checkboxListLabel">${LabelSelectInternetTrailersForCinemaMode}</h3>
<div class="paperList checkboxList-paperList">
<label>
<input is="emby-checkbox" type="checkbox" class="chkUpcomingTheaterTrailers" />
<span>${OptionUpcomingMoviesInTheaters}</span>
</label>
<label>
<input is="emby-checkbox" type="checkbox" class="chkUpcomingDvdTrailers" />
<span>${OptionUpcomingDvdMovies}</span>
</label>
<label>
<input is="emby-checkbox" type="checkbox" class="chkUpcomingStreamingTrailers" />
<span>${OptionUpcomingStreamingMovies}</span>
</label>
<label>
<input is="emby-checkbox" type="checkbox" class="chkOtherTrailers" />
<span>${OptionOtherTrailers}</span>
</label>
</div>
<div class="fieldDescription paperCheckboxFieldDescription"><a class="lnkSupporterLearnMore" href="http://emby.media/premiere" target="_blank">${LabelTheseFeaturesRequireSubscriptionHelpAndTrailers}</a></div>
<div class="fieldDescription"><a class="lnkSupporterLearnMore" href="http://emby.media/premiere" target="_blank">${LabelTheseFeaturesRequireSubscriptionHelpAndTrailers}</a></div>
</div>
<br />
<div>
<paper-checkbox class="chkMyMovieTrailers">${OptionTrailersFromMyMovies}</paper-checkbox>
<div class="fieldDescription paperCheckboxFieldDescription">${OptionTrailersFromMyMoviesHelp}</div>
<div class="fieldDescription paperCheckboxFieldDescription">
<br /><br />
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" class="chkMyMovieTrailers" />
<span>${OptionTrailersFromMyMovies}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionTrailersFromMyMoviesHelp}</div>
<div class="fieldDescription checkboxFieldDescription">
<a href="http://emby.media/community/index.php?/topic/674-media-files-folders-structure/" target="_blank">${ButtonLearnMore}</a>
</div>
</div>
<br />
<br />
<div class="inputContainer">
<input is="emby-input" type="number" id="txtNumTrailers" min="1" max="10" step="1" label="${LabelNumberTrailerToPlay}" />
</div>
<br />
<div>
<paper-checkbox class="chkEnableParentalControl">${LabelEnableIntroParentalControl}</paper-checkbox>
<div class="fieldDescription paperCheckboxFieldDescription">${LabelEnableIntroParentalControlHelp}</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" class="chkEnableParentalControl" />
<span>${LabelEnableIntroParentalControl}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelEnableIntroParentalControlHelp}</div>
</div>
<br />
<div>
<paper-checkbox class="chkUnwatchedOnly">${LabelLimitIntrosToUnwatchedContent}</paper-checkbox>
</div>
<br />
<br />
<label class="checkboxContainer">
<input is="emby-checkbox" type="checkbox" class="chkUnwatchedOnly" />
<span>${LabelLimitIntrosToUnwatchedContent}</span>
</label>
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">

View file

@ -151,6 +151,10 @@ define(['appStorage', 'browser'], function (appStorage, browser) {
features.push('htmlvideoautoplay');
}
if (window.SyncRegistered) {
//features.push('sync');
}
return features.indexOf(command.toLowerCase()) != -1;
},
unlockedFeatures: function () {

View file

@ -8,7 +8,7 @@
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" class="chkEnableRealtimeMonitor" checked />
<input type="checkbox" is="emby-checkbox" class="chkEnableRealtimeMonitor" />
<span>${LabelEnableRealtimeMonitor}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelEnableRealtimeMonitorHelp}</div>

View file

@ -982,15 +982,15 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
@media all and (min-width: 1000px) {
.itemDetailPage .scalableCard.portraitCard {
.itemDetailPage .portraitCard-scalable {
width: 25% !important;
}
.itemDetailPage .scalableCard.squareCard {
.itemDetailPage .squareCard-scalable {
width: 25% !important;
}
.itemDetailPage .scalableCard.backdropCard, .itemDetailPage .scalableCard.smallBackdropCard {
.itemDetailPage .backdropCard-scalable, .itemDetailPage .smallBackdropCard-scalable {
width: 33.3333333333333333% !important;
}
@ -1003,6 +1003,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
background: #673AB7 !important;
}
.btnSyncComplete i {
border-radius: 1000px;
}
.btnSyncComplete i {
border-radius: 1000px;
}

View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) {
define(['jQuery', 'fnchecked'], function ($) {
function loadPage(page, config) {

View file

@ -43,7 +43,7 @@ body:not(.dashboardDocument) .mainDrawerButton {
.emby-tab-button {
font-weight: 400;
text-transform: none!important;
text-transform: none !important;
border-color: transparent !important;
border-width: 0 !important;
}
@ -135,6 +135,6 @@ h1, h1 a {
margin-right: 5%;
}
.categorySyncButton {
.categorySyncButton, .btnSync {
display: none !important;
}

View file

@ -30,7 +30,7 @@
var page = this;
page.querySelector('#btnConnectionHelp').addEventListener('click', onConnectionHelpClick);
page.querySelector('.btnConnectionHelp').addEventListener('click', onConnectionHelpClick);
},
onPageShow: function () {
@ -322,7 +322,7 @@
var nowPlayingItem = session.NowPlayingItem;
var className = nowPlayingItem ? 'scalableCard card activeSession backdropCard' : 'scalableCard card activeSession backdropCard';
var className = nowPlayingItem ? 'scalableCard card activeSession backdropCard backdropCard-scalable' : 'scalableCard card activeSession backdropCard backdropCard-scalable';
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
className += ' transcodingSession';

View file

@ -1820,7 +1820,7 @@
var item = items[i];
var cssClass = "card backdropCard scalableCard";
var cssClass = "card backdropCard scalableCard backdropCard-scalable";
var href = "itemdetails.html?id=" + item.Id;

View file

@ -136,12 +136,14 @@
posterOptions.shape = "backdrop";
posterOptions.centerText = true;
posterOptions.overlayText = false;
posterOptions.overlayMoreButton = true;
html = cardBuilder.getCardsHtml(posterOptions);
} else {
// Poster
posterOptions.showTitle = context == 'photos' ? 'auto' : true;
posterOptions.overlayText = context == 'photos';
posterOptions.overlayMoreButton = true;
html = cardBuilder.getCardsHtml(posterOptions);
}

View file

@ -131,7 +131,7 @@
for (var i = 0, length = users.length; i < length; i++) {
var user = users[i];
html += '<div class="card squareCard scalableCard"><div class="cardBox cardBox-bottompadded visualCardBox">';
html += '<div class="card squareCard scalableCard squareCard-scalable"><div class="cardBox cardBox-bottompadded visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';

View file

@ -297,7 +297,7 @@
style += "min-width:33.3%;";
}
html += '<div class="card backdropCard scalableCard" style="' + style + '" data-index="' + index + '">';
html += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '">';
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';

View file

@ -188,7 +188,7 @@
}
var target = plugin.externalUrl ? ' target="_blank"' : '';
html += "<div class='card backdropCard scalableCard'>";
html += "<div class='card backdropCard scalableCard backdropCard-scalable'>";
html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';

View file

@ -43,7 +43,7 @@
configPageUrl :
null;
html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard scalableCard'>";
html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard scalableCard backdropCard-scalable'>";
html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';

View file

@ -192,7 +192,7 @@
function getCard(img, target, shape) {
shape = shape || 'backdropCard';
var html = '<div class="card scalableCard ' + shape + '"><div class="cardBox"><div class="cardScalable"><div class="cardPadder cardPadder-backdrop"></div>';
var html = '<div class="card scalableCard ' + shape + ' ' + shape + '-scalable"><div class="cardBox"><div class="cardScalable"><div class="cardPadder cardPadder-backdrop"></div>';
if (target) {
html += '<a class="cardContent" href="' + target + '" target="_blank">';

View file

@ -679,7 +679,8 @@ var Dashboard = {
if (setQuality) {
var quality = 90;
if ((options.type || '').toLowerCase() == 'backdrop') {
var isBackdrop = (options.type || '').toLowerCase() == 'backdrop';
if (isBackdrop) {
quality -= 10;
}
@ -687,15 +688,9 @@ var Dashboard = {
quality -= 40;
}
if (AppInfo.hasLowImageBandwidth) {
if (AppInfo.hasLowImageBandwidth && !isBackdrop) {
// The native app can handle a little bit more than safari
if (AppInfo.isNativeApp) {
quality -= 10;
} else {
quality -= 20;
}
quality -= 10;
}
options.quality = quality;
}
@ -2806,7 +2801,9 @@ var AppInfo = {};
}).then(function (reg) {
// https://github.com/WICG/BackgroundSync/blob/master/explainer.md
return reg.sync.register('emby-sync');
return reg.sync.register('emby-sync').then(function() {
window.SyncRegistered = Dashboard.isConnectMode();
});
});
} catch (err) {

View file

@ -85,7 +85,7 @@
var html = '';
var cssClass = "card squareCard scalableCard";
var cssClass = "card squareCard scalableCard squareCard-scalable";
if (user.Policy.IsDisabled) {
cssClass += ' grayscale';

View file

@ -1184,7 +1184,7 @@
"CinemaModeConfigurationHelp": "Cinema mode brings the theater experience straight to your living room with the ability to play trailers and custom intros before the main feature.",
"OptionTrailersFromMyMovies": "Include trailers from movies in my library",
"OptionUpcomingMoviesInTheaters": "Include trailers from new and upcoming movies",
"LabelLimitIntrosToUnwatchedContent": "Only use trailers from unwatched content",
"LabelLimitIntrosToUnwatchedContent": "Only play trailers from unwatched content",
"LabelEnableIntroParentalControl": "Enable smart parental control",
"LabelEnableIntroParentalControlHelp": "Trailers will only be selected with a parental rating equal to or less than the content being watched.",
"LabelTheseFeaturesRequireSubscriptionHelpAndTrailers": "These features require an active Emby Premiere subscription and installation of the Trailer channel plugin.",