mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update fonts
This commit is contained in:
parent
9401f38a57
commit
41b77b9673
7 changed files with 69 additions and 524 deletions
|
@ -16,12 +16,12 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"version": "1.1.43",
|
"version": "1.1.44",
|
||||||
"_release": "1.1.43",
|
"_release": "1.1.44",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "1.1.43",
|
"tag": "1.1.44",
|
||||||
"commit": "60618e198cf85828ca47a719b31074f73d8d734b"
|
"commit": "b1b66d4e81e6abad2f5369b442107577d0dac74e"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
|
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
|
||||||
"_target": "~1.1.5",
|
"_target": "~1.1.5",
|
||||||
|
|
|
@ -111,6 +111,62 @@
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||||
}
|
}
|
||||||
/* cyrillic-ext */
|
/* cyrillic-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: local('Open Sans'), local('OpenSans'), url(K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||||
|
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
|
||||||
|
}
|
||||||
|
/* cyrillic */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: local('Open Sans'), local('OpenSans'), url(RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||||
|
unicode-range: U+0500-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
|
}
|
||||||
|
/* greek-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: local('Open Sans'), local('OpenSans'), url(LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||||
|
unicode-range: U+1F00-1FFF;
|
||||||
|
}
|
||||||
|
/* greek */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: local('Open Sans'), local('OpenSans'), url(xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||||
|
unicode-range: U+0370-03FF;
|
||||||
|
}
|
||||||
|
/* vietnamese */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: local('Open Sans'), local('OpenSans'), url(59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||||
|
unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
|
||||||
|
}
|
||||||
|
/* latin-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: local('Open Sans'), local('OpenSans'), url(u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||||
|
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: local('Open Sans'), local('OpenSans'), url(cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||||
|
}
|
||||||
|
/* cyrillic-ext */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
|
@ -32,14 +32,14 @@
|
||||||
"web-component-tester": "^4.0.0",
|
"web-component-tester": "^4.0.0",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/PolymerElements/iron-icon",
|
"homepage": "https://github.com/polymerelements/iron-icon",
|
||||||
"_release": "1.0.8",
|
"_release": "1.0.8",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.8",
|
"tag": "v1.0.8",
|
||||||
"commit": "f36b38928849ef3853db727faa8c9ef104d611eb"
|
"commit": "f36b38928849ef3853db727faa8c9ef104d611eb"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-icon.git",
|
"_source": "git://github.com/polymerelements/iron-icon.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/iron-icon"
|
"_originalSource": "polymerelements/iron-icon"
|
||||||
}
|
}
|
|
@ -36,7 +36,7 @@
|
||||||
"tag": "v1.2.5",
|
"tag": "v1.2.5",
|
||||||
"commit": "06bd256eacfd70f959c4aed8c03c221f01074c0f"
|
"commit": "06bd256eacfd70f959c4aed8c03c221f01074c0f"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
"_source": "git://github.com/polymerelements/iron-selector.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/iron-selector"
|
"_originalSource": "polymerelements/iron-selector"
|
||||||
}
|
}
|
|
@ -268,7 +268,7 @@
|
||||||
.metascore {
|
.metascore {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 12px;
|
font-size: 84%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 1px 6px 0;
|
padding: 1px 6px 0;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
@ -315,8 +315,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.criticRatingScore {
|
.criticRatingScore {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -515,7 +513,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||||
}
|
}
|
||||||
|
|
||||||
.parentName {
|
.parentName {
|
||||||
font-size: 14px;
|
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
}
|
}
|
||||||
|
@ -977,7 +974,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||||
display: block;
|
display: block;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
font-size: 16px;
|
font-size: 120%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoAttribute {
|
.mediaInfoAttribute {
|
||||||
|
@ -1181,7 +1178,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 13px;
|
font-size: 90%;
|
||||||
display: none;
|
display: none;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
@ -1512,12 +1509,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tapHoldMenu li a, .playFlyout li a {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
color: #000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.userProfileSettingsForm {
|
.userProfileSettingsForm {
|
||||||
max-width: 700px;
|
max-width: 700px;
|
||||||
}
|
}
|
||||||
|
@ -1553,270 +1544,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailsMenu {
|
|
||||||
width: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 360px) {
|
|
||||||
|
|
||||||
.detailsMenu {
|
|
||||||
width: 320px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 400px) {
|
|
||||||
|
|
||||||
.detailsMenu {
|
|
||||||
width: 340px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 500px) {
|
|
||||||
|
|
||||||
.detailsMenu {
|
|
||||||
width: 440px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 600px) {
|
|
||||||
|
|
||||||
.detailsMenu {
|
|
||||||
width: 540px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 700px) {
|
|
||||||
|
|
||||||
.detailsMenu {
|
|
||||||
width: 640px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width:800px) {
|
|
||||||
|
|
||||||
.detailsMenu {
|
|
||||||
width: 740px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuLeftButton {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
padding: 32px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuRightButton {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
padding: 32px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuHeaderWithLogo .detailsMenuLeftButton, .detailsMenuHeaderWithLogo .detailsMenuRightButton {
|
|
||||||
padding-top: 30px;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuContentInner {
|
|
||||||
height: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuOverview {
|
|
||||||
max-height: 30px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuButtons {
|
|
||||||
padding: 1em 0 .5em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuButtons .btn {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuButtonContainer {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: .5em;
|
|
||||||
margin-right: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuButtonContainer span {
|
|
||||||
padding-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenu h3 {
|
|
||||||
padding: .7em 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuHeaderWithLogo h3 {
|
|
||||||
padding: 0 30px;
|
|
||||||
line-height: .5;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-height:500px) {
|
|
||||||
|
|
||||||
.detailsMenuUserData {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-height:500px) {
|
|
||||||
|
|
||||||
.detailsMenuContentInner {
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuOverview {
|
|
||||||
max-height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-height:540px) {
|
|
||||||
|
|
||||||
.detailsMenuContentInner {
|
|
||||||
height: 340px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuOverview {
|
|
||||||
max-height: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-height:600px) {
|
|
||||||
|
|
||||||
.detailsMenuContentInner {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsMenuOverview {
|
|
||||||
max-height: 160px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.slideshowContainer {
|
|
||||||
background: #000;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slideshowImage {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 1001;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slideshowImage.cover {
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slideshowImageText {
|
|
||||||
position: fixed;
|
|
||||||
bottom: .25em;
|
|
||||||
right: .5em;
|
|
||||||
color: #fff;
|
|
||||||
z-index: 1002;
|
|
||||||
font-size: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btnStopSlideshow {
|
|
||||||
position: fixed;
|
|
||||||
top: 1em;
|
|
||||||
right: 1em;
|
|
||||||
color: #fff;
|
|
||||||
z-index: 1002;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btnStopSlideshow {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width:1200px) {
|
|
||||||
|
|
||||||
.slideshowImageText {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes spin {
|
|
||||||
0% {
|
|
||||||
-moz-transform: rotateZ(0deg);
|
|
||||||
-webkit-transform: rotateZ(0deg);
|
|
||||||
-o-transform: rotateZ(0deg);
|
|
||||||
-ms-transform: rotateZ(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-moz-transform: rotateZ(360deg);
|
|
||||||
-webkit-transform: rotateZ(360deg);
|
|
||||||
-o-transform: rotateZ(360deg);
|
|
||||||
-ms-transform: rotateZ(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-moz-keyframes spin {
|
|
||||||
0% {
|
|
||||||
-moz-transform: rotateZ(0deg);
|
|
||||||
-webkit-transform: rotateZ(0deg);
|
|
||||||
-o-transform: rotateZ(0deg);
|
|
||||||
-ms-transform: rotateZ(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-moz-transform: rotateZ(360deg);
|
|
||||||
-webkit-transform: rotateZ(360deg);
|
|
||||||
-o-transform: rotateZ(360deg);
|
|
||||||
-ms-transform: rotateZ(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-o-keyframes spin {
|
|
||||||
0% {
|
|
||||||
-moz-transform: rotateZ(0deg);
|
|
||||||
-webkit-transform: rotateZ(0deg);
|
|
||||||
-o-transform: rotateZ(0deg);
|
|
||||||
-ms-transform: rotateZ(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-moz-transform: rotateZ(360deg);
|
|
||||||
-webkit-transform: rotateZ(360deg);
|
|
||||||
-o-transform: rotateZ(360deg);
|
|
||||||
-ms-transform: rotateZ(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-ms-keyframes spin {
|
|
||||||
0% {
|
|
||||||
-moz-transform: rotateZ(0deg);
|
|
||||||
-webkit-transform: rotateZ(0deg);
|
|
||||||
-o-transform: rotateZ(0deg);
|
|
||||||
-ms-transform: rotateZ(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-moz-transform: rotateZ(360deg);
|
|
||||||
-webkit-transform: rotateZ(360deg);
|
|
||||||
-o-transform: rotateZ(360deg);
|
|
||||||
-ms-transform: rotateZ(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#criticReviewsContent.hiddenScrollX {
|
#criticReviewsContent.hiddenScrollX {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
|
@ -336,17 +336,9 @@ h1, h1 a {
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-weight: 400;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*a, a.ui-link {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-controlgroup a, a.ui-btn {
|
|
||||||
font-weight: bold;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
.ui-btn {
|
.ui-btn {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: 500 !important;
|
font-weight: 500 !important;
|
||||||
|
|
|
@ -1,230 +0,0 @@
|
||||||
(function () {
|
|
||||||
|
|
||||||
function showMenu() {
|
|
||||||
|
|
||||||
var menuItems = [];
|
|
||||||
|
|
||||||
menuItems.push({
|
|
||||||
name: Globalize.translate('OptionBackdropSlideshow'),
|
|
||||||
id: 'backdrops',
|
|
||||||
ironIcon: 'video-library'
|
|
||||||
});
|
|
||||||
|
|
||||||
menuItems.push({
|
|
||||||
name: Globalize.translate('OptionPhotoSlideshow'),
|
|
||||||
id: 'photos',
|
|
||||||
ironIcon: 'photo-library'
|
|
||||||
});
|
|
||||||
|
|
||||||
require(['actionsheet'], function (actionsheet) {
|
|
||||||
|
|
||||||
actionsheet.show({
|
|
||||||
items: menuItems,
|
|
||||||
callback: function (id) {
|
|
||||||
|
|
||||||
switch (id) {
|
|
||||||
|
|
||||||
case 'backdrops':
|
|
||||||
start({
|
|
||||||
|
|
||||||
ImageTypes: "Backdrop",
|
|
||||||
EnableImageTypes: "Backdrop",
|
|
||||||
IncludeItemTypes: "Movie,Series,MusicArtist,Game"
|
|
||||||
|
|
||||||
}, {
|
|
||||||
showTitle: true,
|
|
||||||
cover: true
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'photos':
|
|
||||||
start({
|
|
||||||
|
|
||||||
ImageTypes: "Primary",
|
|
||||||
EnableImageTypes: "Primary",
|
|
||||||
MediaTypes: "Photo"
|
|
||||||
|
|
||||||
}, {
|
|
||||||
showTitle: false
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createElements() {
|
|
||||||
|
|
||||||
var elem = document.querySelector('.slideshowContainer');
|
|
||||||
|
|
||||||
if (elem) {
|
|
||||||
return elem;
|
|
||||||
}
|
|
||||||
|
|
||||||
elem = document.createElement('div');
|
|
||||||
elem.classList.add('slideshowContainer');
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
html += '<div class="slideshowImage"></div><div class="slideshowImageText"></div>';
|
|
||||||
html += '<paper-icon-button icon="cancel" class="btnStopSlideshow" onclick="SlideShow.stop();"></paper-icon-button>';
|
|
||||||
|
|
||||||
elem.innerHTML = html;
|
|
||||||
|
|
||||||
document.body.appendChild(elem);
|
|
||||||
}
|
|
||||||
|
|
||||||
function start(query, options) {
|
|
||||||
|
|
||||||
query = $.extend({
|
|
||||||
|
|
||||||
SortBy: "Random",
|
|
||||||
Recursive: true,
|
|
||||||
Fields: "Taglines",
|
|
||||||
ImageTypeLimit: 1,
|
|
||||||
EnableImageTypes: "Primary",
|
|
||||||
StartIndex: 0,
|
|
||||||
Limit: 200
|
|
||||||
|
|
||||||
}, query);
|
|
||||||
|
|
||||||
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
|
|
||||||
|
|
||||||
if (result.Items.length) {
|
|
||||||
createElements();
|
|
||||||
|
|
||||||
startInterval(result.Items, options);
|
|
||||||
} else {
|
|
||||||
Dashboard.alert({
|
|
||||||
message: Globalize.translate('NoSlideshowContentFound')
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var currentInterval;
|
|
||||||
function startInterval(items, options) {
|
|
||||||
|
|
||||||
stopInterval();
|
|
||||||
|
|
||||||
var index = 1;
|
|
||||||
|
|
||||||
var changeImage = function () {
|
|
||||||
|
|
||||||
if (index >= items.length) {
|
|
||||||
index = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
showItemImage(items[index], options);
|
|
||||||
index++;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
currentInterval = setInterval(changeImage, 5000);
|
|
||||||
|
|
||||||
changeImage();
|
|
||||||
document.body.classList.add('bodyWithPopupOpen');
|
|
||||||
}
|
|
||||||
|
|
||||||
function showItemImage(item, options) {
|
|
||||||
|
|
||||||
var imgUrl;
|
|
||||||
|
|
||||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
|
||||||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
|
||||||
type: "Backdrop",
|
|
||||||
maxWidth: screen.availWidth,
|
|
||||||
tag: item.BackdropImageTags[0]
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
|
||||||
type: "Primary",
|
|
||||||
maxWidth: Math.min(screen.availWidth, 1280),
|
|
||||||
tag: item.ImageTags.Primary
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var cardImageContainer = document.querySelector('.slideshowImage');
|
|
||||||
|
|
||||||
var newCardImageContainer = document.createElement('div');
|
|
||||||
newCardImageContainer.className = cardImageContainer.className;
|
|
||||||
|
|
||||||
if (options.cover) {
|
|
||||||
newCardImageContainer.classList.add('cover');
|
|
||||||
}
|
|
||||||
|
|
||||||
newCardImageContainer.style.backgroundImage = "url('" + imgUrl + "')";
|
|
||||||
|
|
||||||
if (options.showTitle) {
|
|
||||||
document.querySelector('.slideshowImageText').innerHTML = item.Name;
|
|
||||||
} else {
|
|
||||||
document.querySelector('.slideshowImageText').innerHTML = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
cardImageContainer.parentNode.appendChild(newCardImageContainer);
|
|
||||||
|
|
||||||
var onAnimationFinished = function () {
|
|
||||||
|
|
||||||
var parentNode = cardImageContainer.parentNode;
|
|
||||||
if (parentNode) {
|
|
||||||
parentNode.removeChild(cardImageContainer);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (newCardImageContainer.animate) {
|
|
||||||
var keyframes = [
|
|
||||||
{ opacity: '0', offset: 0 },
|
|
||||||
{ opacity: '1', offset: 1 }];
|
|
||||||
var timing = { duration: 1200, iterations: 1 };
|
|
||||||
newCardImageContainer.animate(keyframes, timing).onfinish = onAnimationFinished;
|
|
||||||
} else {
|
|
||||||
onAnimationFinished();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopInterval() {
|
|
||||||
if (currentInterval) {
|
|
||||||
clearInterval(currentInterval);
|
|
||||||
currentInterval = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function stop() {
|
|
||||||
stopInterval();
|
|
||||||
|
|
||||||
var elem = document.querySelector('.slideshowContainer');
|
|
||||||
|
|
||||||
if (elem) {
|
|
||||||
|
|
||||||
var onAnimationFinish = function () {
|
|
||||||
elem.parentNode.removeChild(elem);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (elem.animate) {
|
|
||||||
var animation = fadeOut(elem, 1);
|
|
||||||
animation.onfinish = onAnimationFinish;
|
|
||||||
} else {
|
|
||||||
onAnimationFinish();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.body.classList.remove('bodyWithPopupOpen');
|
|
||||||
}
|
|
||||||
|
|
||||||
function fadeOut(elem, iterations) {
|
|
||||||
var keyframes = [
|
|
||||||
{ opacity: '1', offset: 0 },
|
|
||||||
{ opacity: '0', offset: 1 }];
|
|
||||||
var timing = { duration: 500, iterations: iterations };
|
|
||||||
return elem.animate(keyframes, timing);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.SlideShow = {
|
|
||||||
showMenu: showMenu,
|
|
||||||
stop: stop
|
|
||||||
};
|
|
||||||
|
|
||||||
})();
|
|
Loading…
Add table
Add a link
Reference in a new issue