mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
fixes #791 - Support server-side playlists
This commit is contained in:
Luke Pulverenti
parent
cd1e583fa7
commit
ba247c8a15
33 changed files with 1131 additions and 716 deletions
|
|
@ -51,7 +51,7 @@
|
||||||
@media all and (max-width: 800px) {
|
@media all and (max-width: 800px) {
|
||||||
|
|
||||||
.cardBox {
|
.cardBox {
|
||||||
margin: 2px;
|
margin: 0 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -62,6 +62,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bottomPaddedCard .cardBox {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visualFooterCard .outerCardFooter {
|
||||||
|
background: #111;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.visualCardBox {
|
.visualCardBox {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
-moz-border-radius: 2px;
|
-moz-border-radius: 2px;
|
||||||
|
|
@ -195,6 +204,10 @@
|
||||||
padding: 0 5px 4px;
|
padding: 0 5px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.outerCardFooter .cardText + .cardText {
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (max-width: 600px) {
|
@media all and (max-width: 600px) {
|
||||||
|
|
||||||
.packageReviewText {
|
.packageReviewText {
|
||||||
|
|
@ -362,6 +375,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media all and (min-width: 1800px) {
|
||||||
|
|
||||||
|
.squareCard {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@media all and (min-width: 1920px) {
|
@media all and (min-width: 1920px) {
|
||||||
|
|
||||||
.portraitCard {
|
.portraitCard {
|
||||||
|
|
@ -450,7 +471,7 @@
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 540px) {
|
@media all and (min-width: 640px) {
|
||||||
|
|
||||||
.homePageBackdropCard {
|
.homePageBackdropCard {
|
||||||
width: 33.3%;
|
width: 33.3%;
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,10 @@
|
||||||
margin-left: .5em;
|
margin-left: .5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.libraryPage {
|
||||||
|
background-color: #202020;
|
||||||
|
}
|
||||||
|
|
||||||
.backdropPage {
|
.backdropPage {
|
||||||
background-color: rgba(15, 15,15, .94) !important;
|
background-color: rgba(15, 15,15, .94) !important;
|
||||||
}
|
}
|
||||||
|
|
@ -49,8 +53,8 @@
|
||||||
|
|
||||||
.listHeader {
|
.listHeader {
|
||||||
margin-top: .7em;
|
margin-top: .7em;
|
||||||
margin-bottom: 0;
|
margin-bottom: .15em;
|
||||||
padding-left: 4px;
|
padding-left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.firstListHeader {
|
.firstListHeader {
|
||||||
|
|
@ -58,17 +62,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.ehsContent {
|
.ehsContent {
|
||||||
padding: 0;
|
|
||||||
border-spacing: 0;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ehsContent td {
|
|
||||||
padding: 0;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.homePageSection + .homePageSection {
|
.homePageSection + .homePageSection {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
@ -103,20 +99,6 @@
|
||||||
top: 3px;
|
top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 800px) {
|
|
||||||
|
|
||||||
.ehsContent {
|
|
||||||
width: 770px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 1000px) {
|
|
||||||
|
|
||||||
.ehsContent {
|
|
||||||
width: 900px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 1200px) {
|
@media all and (min-width: 1200px) {
|
||||||
|
|
||||||
.ehsContent {
|
.ehsContent {
|
||||||
|
|
@ -908,7 +890,7 @@ a.itemTag:hover {
|
||||||
width: 27px;
|
width: 27px;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
display: none;
|
display: none;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -917,6 +899,7 @@ a.itemTag:hover {
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 1px 0;
|
padding: 1px 0;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphabetPicker a:not(.selectedCharacter) {
|
.alphabetPicker a:not(.selectedCharacter) {
|
||||||
|
|
@ -979,7 +962,7 @@ a.itemTag:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemsContainerWithAlphaPicker {
|
.itemsContainerWithAlphaPicker {
|
||||||
margin-right: 15px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -245,7 +245,7 @@
|
||||||
background-image: url(images/items/folders/homevideos.png);
|
background-image: url(images/items/folders/homevideos.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.generalViewMenu, .boxsetsViewMenu {
|
.generalViewMenu, .boxsetsViewMenu, .playlistsViewMenu {
|
||||||
background-image: url(images/items/folders/folder.png);
|
background-image: url(images/items/folders/folder.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,506 +0,0 @@
|
||||||
.posterItem {
|
|
||||||
margin: 5px 5px;
|
|
||||||
text-shadow: none;
|
|
||||||
font-weight: normal !important;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
color: #fff !important;
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: left;
|
|
||||||
-webkit-transition: all 500ms ease;
|
|
||||||
-moz-transition: all 500ms ease;
|
|
||||||
-o-transition: all 500ms ease;
|
|
||||||
-ms-transition: all 500ms ease;
|
|
||||||
transition: all 500ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemOverlayTarget {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: rgba(0, 0, 0, .85);
|
|
||||||
z-index: 999;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemOverlayInner {
|
|
||||||
padding: 11px 12px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemOverlayInner button:last-child {
|
|
||||||
margin-right: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemOverlayInner p {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemImage {
|
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center bottom;
|
|
||||||
background-color: #000;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#scenesContent .posterItemImage {
|
|
||||||
background-position-y: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItem:hover .posterItemImage {
|
|
||||||
-moz-box-shadow: 0 0 0 5px #38c;
|
|
||||||
-webkit-box-shadow: 0 0 0 5px #38c;
|
|
||||||
box-shadow: 0 0 0 5px #38c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coveredPosterItemImage {
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.transparentPosterItem .posterItemImage {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.defaultPosterItemImage {
|
|
||||||
background-color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemStoreText {
|
|
||||||
font-weight: normal;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
text-wrap: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-shadow: none;
|
|
||||||
padding-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemText {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
text-wrap: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 5px 4px 4px;
|
|
||||||
text-shadow: none;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemTextOverlay {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
|
|
||||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemTextOverlay .posterItemText {
|
|
||||||
background-color: transparent;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding: 0 5px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemTextOverlay .posterItemText:last-child:not(.posterItemProgress) {
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemTextCentered {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemText + .posterItemProgress {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemDefaultText {
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storeReviewCount {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallBackdropPosterItem .posterItemOverlayInner > div {
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.myLibraryPosterItem {
|
|
||||||
width: 42%;
|
|
||||||
min-width: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.myLibraryPosterItem .posterItemImage {
|
|
||||||
height: 34px;
|
|
||||||
background-position: 9px center;
|
|
||||||
background-size: 14px 14px;
|
|
||||||
background-color: rgba(51, 136, 204, 0.7);
|
|
||||||
background-color: rgba(82, 181, 75, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.myLibraryPosterItem .posterItemDefaultText {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
line-height: 34px;
|
|
||||||
text-align: left;
|
|
||||||
padding: 0 0 0 34px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.moviesPosterItem .posterItemImage, .trailersPosterItem .posterItemImage {
|
|
||||||
background-color: rgba(176, 94, 81, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.musicPosterItem .posterItemImage {
|
|
||||||
background-color: rgba(217, 145, 67, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tvshowsPosterItem .posterItemImage {
|
|
||||||
background-color: rgba(77, 88, 164, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gamesPosterItem .posterItemImage {
|
|
||||||
background-color: rgba(183, 202, 72, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.channelsPosterItem .posterItemImage {
|
|
||||||
background-color: rgba(51, 136, 204, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.livetvPosterItem .posterItemImage {
|
|
||||||
background-color: rgba(255, 233, 127, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.homevideosPosterItem .posterItemImage {
|
|
||||||
background-color: rgba(110, 52, 32, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.adultvideosPosterItem .posterItemImage {
|
|
||||||
background-color: rgba(184, 83, 116, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.photosPosterItem .posterItemImage {
|
|
||||||
background-color: rgba(127, 0, 0, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.musicvideosPosterItem .posterItemImage {
|
|
||||||
background-color: rgba(143, 54, 168, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.squarePosterItem {
|
|
||||||
width: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.squarePosterItem .posterItemImage {
|
|
||||||
height: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem {
|
|
||||||
width: 128px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem .posterItemImage {
|
|
||||||
height: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallBackdropPosterItem {
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallBackdropPosterItem .posterItemImage {
|
|
||||||
height: 67.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miniBackdropPosterItem {
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miniBackdropPosterItem .posterItemImage {
|
|
||||||
height: 67.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portraitPosterItem {
|
|
||||||
width: 96px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portraitPosterItem .posterItemImage {
|
|
||||||
height: 144px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bannerPosterItem {
|
|
||||||
width: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bannerPosterItem .posterItemImage {
|
|
||||||
height: 51.8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemProgress {
|
|
||||||
line-height: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posterItemProgress .itemProgressBar {
|
|
||||||
height: 7px;
|
|
||||||
width: 100%;
|
|
||||||
opacity: .8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miniPosterItemProgress {
|
|
||||||
/* Make sure it's on top of the fade gradient '*/
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miniPosterItemProgress .itemProgressBar {
|
|
||||||
height: 6px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionPosterItem .posterItemText:not(.posterItemName) {
|
|
||||||
color: #000;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionPosterItem .posterItemName {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionPosterItem .posterItemDefaultText {
|
|
||||||
color: #000 !important;
|
|
||||||
font-weight: normal !important;
|
|
||||||
top: 42%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 1200px) {
|
|
||||||
|
|
||||||
.portraitPosterItem .posterItemOverlayInner {
|
|
||||||
padding-left: 7px;
|
|
||||||
padding-right: 7px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 360px) {
|
|
||||||
|
|
||||||
.myLibraryPosterItem {
|
|
||||||
width: 45%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem {
|
|
||||||
width: 148px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem .posterItemImage {
|
|
||||||
height: 83.25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallBackdropPosterItem {
|
|
||||||
width: 157px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallBackdropPosterItem .posterItemImage {
|
|
||||||
height: 88.3125px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miniBackdropPosterItem {
|
|
||||||
width: 148px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miniBackdropPosterItem .posterItemImage {
|
|
||||||
height: 83.25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 540px) {
|
|
||||||
|
|
||||||
.backdropPosterItem {
|
|
||||||
width: 246px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem .posterItemImage {
|
|
||||||
height: 138.375px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallBackdropPosterItem {
|
|
||||||
width: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallBackdropPosterItem .posterItemImage {
|
|
||||||
height: 101.25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 600px) {
|
|
||||||
|
|
||||||
|
|
||||||
.portraitPosterItem {
|
|
||||||
width: 118px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portraitPosterItem .posterItemImage {
|
|
||||||
height: 177px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 650px) {
|
|
||||||
|
|
||||||
.smallBackdropPosterItem {
|
|
||||||
width: 190px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallBackdropPosterItem .posterItemImage {
|
|
||||||
height: 113.625px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bannerPosterItem {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bannerPosterItem .posterItemImage {
|
|
||||||
height: 55.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 600px) {
|
|
||||||
|
|
||||||
.myLibraryPosterItem {
|
|
||||||
width: 30%;
|
|
||||||
/* Specify a min width just in case the container doesn't have a width */
|
|
||||||
min-width: 160px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 750px) {
|
|
||||||
|
|
||||||
.bannerPosterItem {
|
|
||||||
width: 330px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bannerPosterItem .posterItemImage {
|
|
||||||
height: 61.05px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 1000px) {
|
|
||||||
|
|
||||||
.myLibraryPosterItem {
|
|
||||||
width: 23%;
|
|
||||||
/* Specify a min width just in case the container doesn't have a width */
|
|
||||||
min-width: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem {
|
|
||||||
width: 290px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem .posterItemImage {
|
|
||||||
height: 163.125px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallBackdropPosterItem {
|
|
||||||
width: 290px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallBackdropPosterItem .posterItemImage {
|
|
||||||
height: 163.125px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miniBackdropPosterItem {
|
|
||||||
width: 190px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miniBackdropPosterItem .posterItemImage {
|
|
||||||
height: 106.875px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 1200px) {
|
|
||||||
|
|
||||||
.portraitPosterItem {
|
|
||||||
width: 122px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portraitPosterItem .posterItemImage {
|
|
||||||
height: 183px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storeReviewCount {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bannerPosterItem {
|
|
||||||
width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bannerPosterItem .posterItemImage {
|
|
||||||
height: 92.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem {
|
|
||||||
width: 320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem .posterItemImage {
|
|
||||||
height: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portraitPosterItem {
|
|
||||||
width: 156px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portraitPosterItem .posterItemImage {
|
|
||||||
height: 234px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.squarePosterItem {
|
|
||||||
width: 190px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.squarePosterItem .posterItemImage {
|
|
||||||
height: 190px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 1440px) {
|
|
||||||
|
|
||||||
.myLibraryPosterItem {
|
|
||||||
width: 19%;
|
|
||||||
/* Specify a min width just in case the container doesn't have a width */
|
|
||||||
min-width: 220px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 1600px) {
|
|
||||||
|
|
||||||
.backdropPosterItem {
|
|
||||||
width: 290px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem .posterItemImage {
|
|
||||||
height: 163.125px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portraitPosterItem {
|
|
||||||
width: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portraitPosterItem .posterItemImage {
|
|
||||||
height: 240px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.scalableItem {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -85,12 +85,11 @@ body {
|
||||||
|
|
||||||
h1, h1 a {
|
h1, h1 a {
|
||||||
font-weight: 300 !important;
|
font-weight: 300 !important;
|
||||||
font-size: 28px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryPage h1, .libraryPage h1 a {
|
.libraryPage h1, .libraryPage h1 a {
|
||||||
font-weight: 100 !important;
|
font-weight: 100 !important;
|
||||||
font-size: 28px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-loader h1 {
|
.ui-loader h1 {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
padding: 10px 7px 5px;
|
padding: 10px 7px 5px;
|
||||||
margin: 3px 0;
|
margin: 3px 0;
|
||||||
font-weight: normal!important;
|
font-weight: normal !important;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
-webkit-transition: all 500ms ease;
|
-webkit-transition: all 500ms ease;
|
||||||
|
|
@ -399,3 +399,124 @@
|
||||||
height: 140px;
|
height: 140px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.posterItem {
|
||||||
|
margin: 5px 5px;
|
||||||
|
text-shadow: none;
|
||||||
|
font-weight: normal !important;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
color: #fff !important;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: left;
|
||||||
|
-webkit-transition: all 500ms ease;
|
||||||
|
-moz-transition: all 500ms ease;
|
||||||
|
-o-transition: all 500ms ease;
|
||||||
|
-ms-transition: all 500ms ease;
|
||||||
|
transition: all 500ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posterItemText {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
text-wrap: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 5px 4px 4px;
|
||||||
|
text-shadow: none;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posterItemImage {
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center bottom;
|
||||||
|
background-color: #000;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posterItemDefaultText {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myLibraryPosterItem {
|
||||||
|
width: 42%;
|
||||||
|
min-width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myLibraryPosterItem .posterItemImage {
|
||||||
|
height: 34px;
|
||||||
|
background-position: 9px center;
|
||||||
|
background-size: 14px 14px;
|
||||||
|
background-color: rgba(51, 136, 204, 0.7);
|
||||||
|
background-color: rgba(82, 181, 75, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.myLibraryPosterItem .posterItemDefaultText {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
line-height: 34px;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0 0 0 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moviesPosterItem .posterItemImage, .trailersPosterItem .posterItemImage {
|
||||||
|
background-color: rgba(176, 94, 81, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.musicPosterItem .posterItemImage {
|
||||||
|
background-color: rgba(217, 145, 67, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tvshowsPosterItem .posterItemImage {
|
||||||
|
background-color: rgba(77, 88, 164, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gamesPosterItem .posterItemImage {
|
||||||
|
background-color: rgba(183, 202, 72, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.channelsPosterItem .posterItemImage {
|
||||||
|
background-color: rgba(51, 136, 204, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.livetvPosterItem .posterItemImage {
|
||||||
|
background-color: rgba(255, 233, 127, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.homevideosPosterItem .posterItemImage {
|
||||||
|
background-color: rgba(110, 52, 32, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.adultvideosPosterItem .posterItemImage {
|
||||||
|
background-color: rgba(184, 83, 116, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.photosPosterItem .posterItemImage {
|
||||||
|
background-color: rgba(127, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.musicvideosPosterItem .posterItemImage {
|
||||||
|
background-color: rgba(143, 54, 168, 0.7);
|
||||||
|
}
|
||||||
|
@media all and (min-width: 600px) {
|
||||||
|
|
||||||
|
.myLibraryPosterItem {
|
||||||
|
width: 31%;
|
||||||
|
/* Specify a min width just in case the container doesn't have a width */
|
||||||
|
min-width: 160px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (min-width: 1000px) {
|
||||||
|
|
||||||
|
.myLibraryPosterItem {
|
||||||
|
width: 24%;
|
||||||
|
/* Specify a min width just in case the container doesn't have a width */
|
||||||
|
min-width: 220px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -21,6 +21,11 @@
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="selectionCommands" style="display: none;">
|
||||||
|
<div data-role="controlgroup" data-type="horizontal" class="selectionCommandsControlGroup">
|
||||||
|
<button class="btnAddToPlaylist" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToPlaylist}">${ButtonAddToPlaylist}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer"></div>
|
<div id="items" class="itemsContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,11 @@
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="selectionCommands" style="display: none;">
|
||||||
|
<div data-role="controlgroup" data-type="horizontal" class="selectionCommandsControlGroup">
|
||||||
|
<button class="btnAddToPlaylist" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToPlaylist}">${ButtonAddToPlaylist}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer"></div>
|
<div id="items" class="itemsContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,11 @@
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="selectionCommands" style="display: none;">
|
||||||
|
<div data-role="controlgroup" data-type="horizontal" class="selectionCommandsControlGroup">
|
||||||
|
<button class="btnAddToPlaylist" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToPlaylist}">${ButtonAddToPlaylist}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer"></div>
|
<div id="items" class="itemsContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,11 @@
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="selectionCommands" style="display: none;">
|
||||||
|
<div data-role="controlgroup" data-type="horizontal" class="selectionCommandsControlGroup">
|
||||||
|
<button class="btnAddToPlaylist" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToPlaylist}">${ButtonAddToPlaylist}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer"></div>
|
<div id="items" class="itemsContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
45
dashboard-ui/playlistedit.html
Normal file
45
dashboard-ui/playlistedit.html
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>${TitleMediaBrowser}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="playlistEditorPage" data-role="page" class="page libraryPage" data-theme="b">
|
||||||
|
|
||||||
|
<div class="libraryViewNav scopedLibraryViewNav">
|
||||||
|
<a href="playlists.html" class="ui-btn-active">${TabPlaylists}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-role="content">
|
||||||
|
<div class="viewSettings">
|
||||||
|
|
||||||
|
<div class="listTopPaging">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="items" class="itemsContainer"></div>
|
||||||
|
<div class="noItemsMessage" style="display: none; text-align: center;">
|
||||||
|
<p>${MessageNoPlaylistItemsAvailable}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
|
||||||
|
<form>
|
||||||
|
|
||||||
|
<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
|
||||||
|
<a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tabView viewTab">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="selectPageSize">${LabelPageSize}</label>
|
||||||
|
<select id="selectPageSize"></select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
94
dashboard-ui/playlists.html
Normal file
94
dashboard-ui/playlists.html
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>${TitleMediaBrowser}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="playlistsPage" data-role="page" class="page libraryPage" data-theme="b">
|
||||||
|
|
||||||
|
<div class="libraryViewNav scopedLibraryViewNav">
|
||||||
|
<a href="#" class="ui-btn-active">${TabPlaylists}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-role="content">
|
||||||
|
<div class="viewSettings">
|
||||||
|
|
||||||
|
<div class="listTopPaging">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="items" class="itemsContainer"></div>
|
||||||
|
<div class="noItemsMessage" style="display: none; text-align: center;">
|
||||||
|
<p>${MessageNoPlaylistsAvailable}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
|
||||||
|
<form>
|
||||||
|
|
||||||
|
<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
|
||||||
|
<a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
|
||||||
|
<a href="#" data-role="button" class="viewTabButton" data-tab="tabSort">${TabSort}</a>
|
||||||
|
<a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tabView viewTab">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="selectView">${LabelView}</label>
|
||||||
|
<select id="selectView">
|
||||||
|
<option value="Poster">${OptionPoster}</option>
|
||||||
|
<option value="List">${OptionList}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div>
|
||||||
|
<label for="selectPageSize">${LabelPageSize}</label>
|
||||||
|
<select id="selectPageSize"></select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="tabFilter viewTab">
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>${HeaderFilters}</legend>
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
|
||||||
|
<label for="chkIsFavorite">${OptionFavorite}</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
|
||||||
|
<label for="chkLikes">${OptionLikes}</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
|
||||||
|
<label for="chkDislikes">${OptionDislikes}</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="tabSort viewTab">
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
${HeaderSortBy}
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
|
||||||
|
<label for="radioSortName">${OptionNameSort}</label>
|
||||||
|
|
||||||
|
<input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated" data-mini="true">
|
||||||
|
<label for="radioDateCreated">${OptionDateAdded}</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
${HeaderSortOrder}
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
|
||||||
|
<label for="radioAscending">${OptionAscending}</label>
|
||||||
|
|
||||||
|
<input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
|
||||||
|
<label for="radioDescending">${OptionDescending}</label>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
|
|
||||||
Dashboard.getCurrentUser().done(function (user) {
|
Dashboard.getCurrentUser().done(function (user) {
|
||||||
|
|
||||||
if (item.Type == 'BoxSet') {
|
if (item.Type == 'BoxSet' || item.Type == 'Playlist') {
|
||||||
$('#fldDelete', page).show();
|
$('#fldDelete', page).show();
|
||||||
}
|
}
|
||||||
else if (user.Configuration.EnableContentDeletion &&
|
else if (user.Configuration.EnableContentDeletion &&
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@
|
||||||
|
|
||||||
html += pagingHtml;
|
html += pagingHtml;
|
||||||
|
|
||||||
$('.itemsContainer', page).html(html).trigger('create').createCardMenus().trigger('itemsrendered');
|
$('.itemsContainer', page).html(html).trigger('create').createCardMenus();
|
||||||
|
|
||||||
$('.btnNextPage', page).on('click', function () {
|
$('.btnNextPage', page).on('click', function () {
|
||||||
query.StartIndex += query.Limit;
|
query.StartIndex += query.Limit;
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
{ name: Globalize.translate('HeaderFavoriteMovies'), types: "Movie", id: "favoriteMovies", shape: 'homePageBackdrop', preferThumb: true, showTitle: false },
|
{ name: Globalize.translate('HeaderFavoriteMovies'), types: "Movie", id: "favoriteMovies", shape: 'homePageBackdrop', preferThumb: true, showTitle: false },
|
||||||
{ name: Globalize.translate('HeaderFavoriteShows'), types: "Series", id: "favoriteShows", shape: 'homePageBackdrop', preferThumb: true, showTitle: false },
|
{ name: Globalize.translate('HeaderFavoriteShows'), types: "Series", id: "favoriteShows", shape: 'homePageBackdrop', preferThumb: true, showTitle: false },
|
||||||
{ name: Globalize.translate('HeaderFavoriteEpisodes'), types: "Episode", id: "favoriteEpisode", shape: 'homePageBackdrop', preferThumb: false, showTitle: true, showParentTitle: true },
|
{ name: Globalize.translate('HeaderFavoriteEpisodes'), types: "Episode", id: "favoriteEpisode", shape: 'homePageBackdrop', preferThumb: false, showTitle: true, showParentTitle: true },
|
||||||
{ name: Globalize.translate('HeaderFavoriteGames'), types: "Game", id: "favoriteGames", shape: 'auto', preferThumb: false, showTitle: true },
|
{ name: Globalize.translate('HeaderFavoriteGames'), types: "Game", id: "favoriteGames", shape: 'autohome', preferThumb: false, showTitle: true },
|
||||||
{ name: Globalize.translate('HeaderFavoriteAlbums'), types: "MusicAlbum", id: "favoriteAlbums", shape: 'homePageSquare', preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true }
|
{ name: Globalize.translate('HeaderFavoriteAlbums'), types: "MusicAlbum", id: "favoriteAlbums", shape: 'homePageSquare', preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,6 @@
|
||||||
case "channels":
|
case "channels":
|
||||||
imgUrl = "css/images/items/folders/channels.png";
|
imgUrl = "css/images/items/folders/channels.png";
|
||||||
break;
|
break;
|
||||||
case "boxsets":
|
|
||||||
default:
|
default:
|
||||||
imgUrl = "css/images/items/folders/folder.png";
|
imgUrl = "css/images/items/folders/folder.png";
|
||||||
break;
|
break;
|
||||||
|
|
|
||||||
|
|
@ -607,7 +607,8 @@
|
||||||
centerText: item.Type != "MusicAlbum",
|
centerText: item.Type != "MusicAlbum",
|
||||||
showTitle: item.Type == "MusicAlbum" || item.Type == "Game",
|
showTitle: item.Type == "MusicAlbum" || item.Type == "Game",
|
||||||
borderless: item.Type == "Game",
|
borderless: item.Type == "Game",
|
||||||
context: context
|
context: context,
|
||||||
|
overlayText: item.Type != "MusicAlbum"
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#similarContent', page).html(html).createCardMenus();
|
$('#similarContent', page).html(html).createCardMenus();
|
||||||
|
|
|
||||||
|
|
@ -98,17 +98,38 @@
|
||||||
|
|
||||||
var childText;
|
var childText;
|
||||||
|
|
||||||
if (options.context == "movies") {
|
if (item.Type == 'Playlist') {
|
||||||
|
|
||||||
|
childText = '';
|
||||||
|
|
||||||
|
if (item.CumulativeRunTimeTicks) {
|
||||||
|
|
||||||
|
var minutes = item.CumulativeRunTimeTicks / 600000000;
|
||||||
|
|
||||||
|
minutes = minutes || 1;
|
||||||
|
|
||||||
|
childText += Math.round(minutes) + " min";
|
||||||
|
|
||||||
|
} else {
|
||||||
|
childText += '0 min';
|
||||||
|
}
|
||||||
|
|
||||||
|
//childText += item.ChildCount == 1 ? "1 item" : item.ChildCount + " items";
|
||||||
|
|
||||||
|
counts.push(childText);
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (options.context == "movies") {
|
||||||
|
|
||||||
if (item.MovieCount) {
|
if (item.MovieCount) {
|
||||||
|
|
||||||
childText = item.MovieCount == 1 ? "1 Movie" : item.MovieCount + " Movies";
|
childText = item.MovieCount == 1 ? "1 movie" : item.MovieCount + " movies";
|
||||||
|
|
||||||
counts.push(childText);
|
counts.push(childText);
|
||||||
}
|
}
|
||||||
if (item.TrailerCount) {
|
if (item.TrailerCount) {
|
||||||
|
|
||||||
childText = item.TrailerCount == 1 ? "1 Trailer" : item.TrailerCount + " Trailers";
|
childText = item.TrailerCount == 1 ? "1 trailer" : item.TrailerCount + " trailers";
|
||||||
|
|
||||||
counts.push(childText);
|
counts.push(childText);
|
||||||
}
|
}
|
||||||
|
|
@ -117,13 +138,13 @@
|
||||||
|
|
||||||
if (item.SeriesCount) {
|
if (item.SeriesCount) {
|
||||||
|
|
||||||
childText = item.SeriesCount == 1 ? "1 Show" : item.SeriesCount + " Shows";
|
childText = item.SeriesCount == 1 ? "1 show" : item.SeriesCount + " shows";
|
||||||
|
|
||||||
counts.push(childText);
|
counts.push(childText);
|
||||||
}
|
}
|
||||||
if (item.EpisodeCount) {
|
if (item.EpisodeCount) {
|
||||||
|
|
||||||
childText = item.EpisodeCount == 1 ? "1 Episode" : item.EpisodeCount + " Episodes";
|
childText = item.EpisodeCount == 1 ? "1 episode" : item.EpisodeCount + " episodes";
|
||||||
|
|
||||||
counts.push(childText);
|
counts.push(childText);
|
||||||
}
|
}
|
||||||
|
|
@ -132,7 +153,7 @@
|
||||||
|
|
||||||
if (item.GameCount) {
|
if (item.GameCount) {
|
||||||
|
|
||||||
childText = item.GameCount == 1 ? "1 Game" : item.GameCount + " Games";
|
childText = item.GameCount == 1 ? "1 game" : item.GameCount + " games";
|
||||||
|
|
||||||
counts.push(childText);
|
counts.push(childText);
|
||||||
}
|
}
|
||||||
|
|
@ -140,19 +161,19 @@
|
||||||
|
|
||||||
if (item.AlbumCount) {
|
if (item.AlbumCount) {
|
||||||
|
|
||||||
childText = item.AlbumCount == 1 ? "1 Album" : item.AlbumCount + " Albums";
|
childText = item.AlbumCount == 1 ? "1 album" : item.AlbumCount + " albums";
|
||||||
|
|
||||||
counts.push(childText);
|
counts.push(childText);
|
||||||
}
|
}
|
||||||
if (item.SongCount) {
|
if (item.SongCount) {
|
||||||
|
|
||||||
childText = item.SongCount == 1 ? "1 Song" : item.SongCount + " Songs";
|
childText = item.SongCount == 1 ? "1 song" : item.SongCount + " songs";
|
||||||
|
|
||||||
counts.push(childText);
|
counts.push(childText);
|
||||||
}
|
}
|
||||||
if (item.MusicVideoCount) {
|
if (item.MusicVideoCount) {
|
||||||
|
|
||||||
childText = item.MusicVideoCount == 1 ? "1 Music Video" : item.MusicVideoCount + " Music Videos";
|
childText = item.MusicVideoCount == 1 ? "1 music video" : item.MusicVideoCount + " music videos";
|
||||||
|
|
||||||
counts.push(childText);
|
counts.push(childText);
|
||||||
}
|
}
|
||||||
|
|
@ -360,7 +381,7 @@
|
||||||
href += context;
|
href += context;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (topParentId == null) {
|
if (topParentId == null && context != 'playlists') {
|
||||||
topParentId = LibraryMenu.getTopParentId();
|
topParentId = LibraryMenu.getTopParentId();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -420,10 +441,16 @@
|
||||||
if (item.CollectionType == 'games') {
|
if (item.CollectionType == 'games') {
|
||||||
return 'gamesrecommended.html?topParentId=' + item.Id;
|
return 'gamesrecommended.html?topParentId=' + item.Id;
|
||||||
}
|
}
|
||||||
|
if (item.CollectionType == 'playlists') {
|
||||||
|
return 'playlists.html?topParentId=' + item.Id;
|
||||||
|
}
|
||||||
if (item.Type == 'CollectionFolder') {
|
if (item.Type == 'CollectionFolder') {
|
||||||
return 'itemlist.html?topParentId=' + item.Id + '&parentid=' + item.Id;
|
return 'itemlist.html?topParentId=' + item.Id + '&parentid=' + item.Id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (item.Type == "Playlist") {
|
||||||
|
return "playlistedit.html?id=" + id;
|
||||||
|
}
|
||||||
if (item.Type == "TvChannel") {
|
if (item.Type == "TvChannel") {
|
||||||
return "livetvchannel.html?id=" + id;
|
return "livetvchannel.html?id=" + id;
|
||||||
}
|
}
|
||||||
|
|
@ -576,6 +603,12 @@
|
||||||
|
|
||||||
outerHtml += '<ul data-role="listview" class="itemsListview">';
|
outerHtml += '<ul data-role="listview" class="itemsListview">';
|
||||||
|
|
||||||
|
if (options.title) {
|
||||||
|
outerHtml += '<li data-role="list-divider">';
|
||||||
|
outerHtml += options.title;
|
||||||
|
outerHtml += '</li>';
|
||||||
|
}
|
||||||
|
|
||||||
var index = 0;
|
var index = 0;
|
||||||
var groupTitle = '';
|
var groupTitle = '';
|
||||||
|
|
||||||
|
|
@ -583,6 +616,7 @@
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
|
if (options.showIndex !== false) {
|
||||||
var itemGroupTitle = LibraryBrowser.getListViewIndex(item, options.sortBy);
|
var itemGroupTitle = LibraryBrowser.getListViewIndex(item, options.sortBy);
|
||||||
|
|
||||||
if (itemGroupTitle != groupTitle) {
|
if (itemGroupTitle != groupTitle) {
|
||||||
|
|
@ -593,6 +627,7 @@
|
||||||
|
|
||||||
groupTitle = itemGroupTitle;
|
groupTitle = itemGroupTitle;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var dataAttributes = LibraryBrowser.getItemDataAttributes(item, options);
|
var dataAttributes = LibraryBrowser.getItemDataAttributes(item, options);
|
||||||
|
|
||||||
|
|
@ -642,10 +677,18 @@
|
||||||
textlines.push(LibraryBrowser.getPosterViewDisplayName(item));
|
textlines.push(LibraryBrowser.getPosterViewDisplayName(item));
|
||||||
|
|
||||||
if (item.Type == 'Game') {
|
if (item.Type == 'Game') {
|
||||||
textlines.push(item.GameSystem || 'Unknown Gane System');
|
textlines.push(item.GameSystem || 'Unknown Game System');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
else if (item.Type == 'MusicGenre') {
|
||||||
|
textlines.push('Music genre');
|
||||||
|
}
|
||||||
|
else if (item.Type == 'MusicArtist') {
|
||||||
|
textlines.push('Music artist');
|
||||||
|
}
|
||||||
|
else {
|
||||||
textlines.push(LibraryBrowser.getMiscInfoHtml(item));
|
textlines.push(LibraryBrowser.getMiscInfoHtml(item));
|
||||||
|
}
|
||||||
|
|
||||||
html += '<h3>';
|
html += '<h3>';
|
||||||
html += textlines[0];
|
html += textlines[0];
|
||||||
|
|
@ -730,7 +773,7 @@
|
||||||
itemCommands.push('trailer');
|
itemCommands.push('trailer');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.Type == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist" || item.Type == "MusicGenre") {
|
if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist" || item.Type == "MusicGenre") {
|
||||||
itemCommands.push('instantmix');
|
itemCommands.push('instantmix');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -738,6 +781,10 @@
|
||||||
itemCommands.push('shuffle');
|
itemCommands.push('shuffle');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (PlaylistManager.supportsPlaylists(item)) {
|
||||||
|
itemCommands.push('playlist');
|
||||||
|
}
|
||||||
|
|
||||||
return itemCommands;
|
return itemCommands;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -900,7 +947,18 @@
|
||||||
tag: item.ImageTags.Primary
|
tag: item.ImageTags.Primary
|
||||||
});
|
});
|
||||||
|
|
||||||
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
}
|
||||||
|
else if (item.ParentPrimaryImageTag) {
|
||||||
|
|
||||||
|
height = 400;
|
||||||
|
|
||||||
|
imgUrl = ApiClient.getImageUrl(item.ParentPrimaryImageItemId, {
|
||||||
|
type: "Primary",
|
||||||
|
height: height,
|
||||||
|
tag: item.ParentPrimaryImageTag
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||||
|
|
||||||
height = 220;
|
height = 220;
|
||||||
width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
|
width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
|
||||||
|
|
@ -1000,6 +1058,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (options.showTitle && !options.overlayText) {
|
||||||
|
cssClass += ' bottomPaddedCard';
|
||||||
|
}
|
||||||
|
|
||||||
var dataAttributes = LibraryBrowser.getItemDataAttributes(item, options);
|
var dataAttributes = LibraryBrowser.getItemDataAttributes(item, options);
|
||||||
|
|
||||||
html += '<a' + dataAttributes + ' class="' + cssClass + '" href="' + href + '">';
|
html += '<a' + dataAttributes + ' class="' + cssClass + '" href="' + href + '">';
|
||||||
|
|
@ -1059,13 +1121,24 @@
|
||||||
html += '<div class="itemSelectionPanel" onclick="return false;" style="display:none;"><div class="ui-checkbox ui-mini"><label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off" for="' + chkItemSelectId + '">Select</label><input id="' + chkItemSelectId + '" type="checkbox" class="chkItemSelect" data-enhanced="true" /></div></div>';
|
html += '<div class="itemSelectionPanel" onclick="return false;" style="display:none;"><div class="ui-checkbox ui-mini"><label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off" for="' + chkItemSelectId + '">Select</label><input id="' + chkItemSelectId + '" type="checkbox" class="chkItemSelect" data-enhanced="true" /></div></div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
var footerText = LibraryBrowser.getCardFooterText(item, options, imgUrl, forceName);
|
var progressHtml = options.showProgress === false || item.IsFolder ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
|
||||||
|
|
||||||
var footerOverlayed = false;
|
var footerOverlayed = false;
|
||||||
|
|
||||||
if (options.overlayText || (forceName && !options.showTitle)) {
|
if (options.overlayText || (forceName && !options.showTitle)) {
|
||||||
html += footerText;
|
html += LibraryBrowser.getCardFooterText(item, options, imgUrl, forceName, 'cardFooter', progressHtml);
|
||||||
footerOverlayed = true;
|
footerOverlayed = true;
|
||||||
}
|
}
|
||||||
|
else if (progressHtml) {
|
||||||
|
html += '<div class="cardFooter">';
|
||||||
|
html += "<div class='cardProgress cardText'>";
|
||||||
|
html += progressHtml;
|
||||||
|
html += "</div>";
|
||||||
|
//cardFooter
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
progressHtml = '';
|
||||||
|
}
|
||||||
|
|
||||||
// cardContent
|
// cardContent
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
@ -1074,93 +1147,12 @@
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
if (!options.overlayText && !footerOverlayed) {
|
if (!options.overlayText && !footerOverlayed) {
|
||||||
html += footerText;
|
html += LibraryBrowser.getCardFooterText(item, options, imgUrl, forceName, 'cardFooter outerCardFooter', progressHtml);
|
||||||
}
|
}
|
||||||
|
|
||||||
// cardBox
|
// cardBox
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
//var progressHtml = options.showProgress === false || item.IsFolder ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
|
|
||||||
|
|
||||||
//if (!options.overlayText) {
|
|
||||||
|
|
||||||
// if (progressHtml) {
|
|
||||||
// html += '<div class="posterItemTextOverlay">';
|
|
||||||
// html += "<div class='posterItemProgress miniPosterItemProgress'>";
|
|
||||||
// html += progressHtml || " ";
|
|
||||||
// html += "</div>";
|
|
||||||
// html += "</div>";
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
//html += '</div>';
|
|
||||||
|
|
||||||
//var name = LibraryBrowser.getPosterViewDisplayName(item, options.displayAsSpecial);
|
|
||||||
|
|
||||||
//if (!imgUrl && !options.showTitle) {
|
|
||||||
// html += "<div class='posterItemDefaultText'>";
|
|
||||||
// html += htmlEncode(name);
|
|
||||||
// html += "</div>";
|
|
||||||
//}
|
|
||||||
|
|
||||||
//var overlayText = options.overlayText || (forceName && !options.showTitle);
|
|
||||||
|
|
||||||
//if (overlayText) {
|
|
||||||
// html += '<div class="posterItemTextOverlay">';
|
|
||||||
//}
|
|
||||||
|
|
||||||
//cssClass = options.centerText ? "posterItemText posterItemTextCentered" : "posterItemText";
|
|
||||||
|
|
||||||
//var lines = [];
|
|
||||||
|
|
||||||
//if (options.showParentTitle) {
|
|
||||||
|
|
||||||
// lines.push(item.EpisodeTitle ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || ""));
|
|
||||||
//}
|
|
||||||
|
|
||||||
//if (options.showTitle || forceName) {
|
|
||||||
|
|
||||||
// lines.push(htmlEncode(name));
|
|
||||||
//}
|
|
||||||
|
|
||||||
//if (options.showItemCounts) {
|
|
||||||
|
|
||||||
// var itemCountHtml = LibraryBrowser.getItemCountsHtml(options, item);
|
|
||||||
|
|
||||||
// lines.push(itemCountHtml);
|
|
||||||
//}
|
|
||||||
|
|
||||||
//if (options.showPremiereDate && item.PremiereDate) {
|
|
||||||
|
|
||||||
// try {
|
|
||||||
|
|
||||||
// lines.push(LibraryBrowser.getPremiereDateText(item));
|
|
||||||
|
|
||||||
// } catch (err) {
|
|
||||||
// lines.push('');
|
|
||||||
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
||||||
//if (options.showYear) {
|
|
||||||
|
|
||||||
// lines.push(item.ProductionYear || '');
|
|
||||||
//}
|
|
||||||
|
|
||||||
//html += LibraryBrowser.getPosterItemTextLines(lines, cssClass, !options.overlayText);
|
|
||||||
|
|
||||||
//if (options.overlayText) {
|
|
||||||
|
|
||||||
// if (progressHtml) {
|
|
||||||
// html += "<div class='posterItemText posterItemProgress'>";
|
|
||||||
// html += progressHtml || " ";
|
|
||||||
// html += "</div>";
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
||||||
//if (overlayText) {
|
|
||||||
// html += "</div>";
|
|
||||||
//}
|
|
||||||
|
|
||||||
html += "</a>";
|
html += "</a>";
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1168,22 +1160,11 @@
|
||||||
return html;
|
return html;
|
||||||
},
|
},
|
||||||
|
|
||||||
getCardFooterText: function (item, options, imgUrl, forceName) {
|
getCardFooterText: function (item, options, imgUrl, forceName, footerClass, progressHtml) {
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
html += '<div class="cardFooter">';
|
html += '<div class="' + footerClass + '">';
|
||||||
|
|
||||||
var progressHtml = options.showProgress === false || item.IsFolder ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
|
|
||||||
|
|
||||||
if (!options.overlayText) {
|
|
||||||
|
|
||||||
if (progressHtml) {
|
|
||||||
html += "<div class='cardProgress miniCardProgress'>";
|
|
||||||
html += (progressHtml || " ");
|
|
||||||
html += "</div>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var name = LibraryBrowser.getPosterViewDisplayName(item, options.displayAsSpecial);
|
var name = LibraryBrowser.getPosterViewDisplayName(item, options.displayAsSpecial);
|
||||||
|
|
||||||
|
|
@ -1231,7 +1212,7 @@
|
||||||
lines.push(item.ProductionYear || '');
|
lines.push(item.ProductionYear || '');
|
||||||
}
|
}
|
||||||
|
|
||||||
html += LibraryBrowser.getPosterItemTextLines(lines, cssClass, !options.overlayText);
|
html += LibraryBrowser.getCardTextLines(lines, cssClass, !options.overlayText);
|
||||||
|
|
||||||
if (options.overlayText) {
|
if (options.overlayText) {
|
||||||
|
|
||||||
|
|
@ -1248,7 +1229,7 @@
|
||||||
return html;
|
return html;
|
||||||
},
|
},
|
||||||
|
|
||||||
getPosterItemTextLines: function (lines, cssClass, forceLines) {
|
getCardTextLines: function (lines, cssClass, forceLines) {
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -149,6 +149,18 @@
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onAddToPlaylistButtonClick() {
|
||||||
|
|
||||||
|
var id = this.getAttribute('data-itemid');
|
||||||
|
|
||||||
|
PlaylistManager.showPanel([id]);
|
||||||
|
|
||||||
|
// Used by the tab menu, not the slide up
|
||||||
|
$('.tapHoldMenu').popup('close');
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
function onShuffleButtonClick() {
|
function onShuffleButtonClick() {
|
||||||
|
|
||||||
var id = this.getAttribute('data-itemid');
|
var id = this.getAttribute('data-itemid');
|
||||||
|
|
@ -281,6 +293,10 @@
|
||||||
html += '<li data-icon="recycle"><a href="#" class="btnShuffle" data-itemid="' + itemId + '">' + Globalize.translate('ButtonShuffle') + '</a></li>';
|
html += '<li data-icon="recycle"><a href="#" class="btnShuffle" data-itemid="' + itemId + '">' + Globalize.translate('ButtonShuffle') + '</a></li>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (commands.indexOf('playlist') != -1) {
|
||||||
|
html += '<li data-icon="plus"><a href="#" class="btnAddToPlaylist" data-itemid="' + itemId + '">' + Globalize.translate('ButtonAddToPlaylist') + '</a></li>';
|
||||||
|
}
|
||||||
|
|
||||||
html += '</ul>';
|
html += '</ul>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
@ -299,6 +315,7 @@
|
||||||
$('.btnInstantMix', elem).on('click', onInstantMixButtonClick);
|
$('.btnInstantMix', elem).on('click', onInstantMixButtonClick);
|
||||||
$('.btnShuffle', elem).on('click', onShuffleButtonClick);
|
$('.btnShuffle', elem).on('click', onShuffleButtonClick);
|
||||||
$('.btnPlayTrailer', elem).on('click', onTrailerButtonClick);
|
$('.btnPlayTrailer', elem).on('click', onTrailerButtonClick);
|
||||||
|
$('.btnAddToPlaylist', elem).on('click', onAddToPlaylistButtonClick);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -504,7 +521,8 @@
|
||||||
return this.off('.cardHoverMenu')
|
return this.off('.cardHoverMenu')
|
||||||
.on('mouseenter.cardHoverMenu', elems, onHoverIn)
|
.on('mouseenter.cardHoverMenu', elems, onHoverIn)
|
||||||
.on('mouseleave.cardHoverMenu', elems, onHoverOut)
|
.on('mouseleave.cardHoverMenu', elems, onHoverOut)
|
||||||
.on("touchstart.cardHoverMenu", elems, preventTouchHover);
|
.on("touchstart.cardHoverMenu", elems, preventTouchHover)
|
||||||
|
.trigger('itemsrendered');
|
||||||
};
|
};
|
||||||
|
|
||||||
function toggleSelections(page) {
|
function toggleSelections(page) {
|
||||||
|
|
@ -613,10 +631,31 @@
|
||||||
BoxSetEditor.showPanel(page, selection);
|
BoxSetEditor.showPanel(page, selection);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addToPlaylist(page) {
|
||||||
|
|
||||||
|
var selection = getSelectedItems(page);
|
||||||
|
|
||||||
|
if (selection.length < 1) {
|
||||||
|
|
||||||
|
Dashboard.alert({
|
||||||
|
message: Globalize.translate('MessagePleaseSelectOneItem'),
|
||||||
|
title: Globalize.translate('HeaderError')
|
||||||
|
});
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
PlaylistManager.showPanel(selection);
|
||||||
|
}
|
||||||
|
|
||||||
$(document).on('pageinit', ".libraryPage", function () {
|
$(document).on('pageinit', ".libraryPage", function () {
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
||||||
|
$('.btnAddToPlaylist', page).on('click', function () {
|
||||||
|
addToPlaylist(page);
|
||||||
|
});
|
||||||
|
|
||||||
$('.btnMergeVersions', page).on('click', function () {
|
$('.btnMergeVersions', page).on('click', function () {
|
||||||
combineVersions(page);
|
combineVersions(page);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -231,7 +231,7 @@
|
||||||
|
|
||||||
function getTopParentId() {
|
function getTopParentId() {
|
||||||
|
|
||||||
return getParameterByName('topParentId') || sessionStore.getItem('topParentId') || null;
|
return getParameterByName('topParentId') /*|| sessionStore.getItem('topParentId')*/ || null;
|
||||||
}
|
}
|
||||||
|
|
||||||
window.LibraryMenu = {
|
window.LibraryMenu = {
|
||||||
|
|
@ -298,6 +298,9 @@
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var context = getParameterByName('context');
|
||||||
|
|
||||||
|
if (context !== 'playlists') {
|
||||||
$('.scopedLibraryViewNav a', page).each(function () {
|
$('.scopedLibraryViewNav a', page).each(function () {
|
||||||
|
|
||||||
var src = this.href;
|
var src = this.href;
|
||||||
|
|
@ -311,6 +314,7 @@
|
||||||
this.href = src;
|
this.href = src;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function updateContextText(page) {
|
function updateContextText(page) {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -126,7 +126,7 @@
|
||||||
for (var i = 0, length = users.length; i < length; i++) {
|
for (var i = 0, length = users.length; i < length; i++) {
|
||||||
var user = users[i];
|
var user = users[i];
|
||||||
|
|
||||||
html += '<div class="card squareCard alternateHover"><div class="cardBox visualCardBox">';
|
html += '<div class="card squareCard alternateHover bottomPaddedCard"><div class="cardBox visualCardBox">';
|
||||||
|
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -201,7 +201,7 @@
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (itemType == "MusicGenre" || itemType == "Season" || itemType == "Series" || itemType == "BoxSet" || itemType == "MusicAlbum" || itemType == "MusicArtist") {
|
if (itemType == "MusicGenre" || itemType == "Season" || itemType == "Series" || itemType == "BoxSet" || itemType == "MusicAlbum" || itemType == "MusicArtist" || itemType == "Playlist") {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -347,14 +347,10 @@
|
||||||
var firstItem = items[0];
|
var firstItem = items[0];
|
||||||
var promise;
|
var promise;
|
||||||
|
|
||||||
if (firstItem.IsFolder) {
|
if (firstItem.Type == "Playlist") {
|
||||||
|
|
||||||
promise = self.getItemsForPlayback({
|
promise = self.getItemsForPlayback({
|
||||||
ParentId: firstItem.Id,
|
ParentId: firstItem.Id,
|
||||||
Filters: "IsNotFolder",
|
|
||||||
Recursive: true,
|
|
||||||
SortBy: "SortName",
|
|
||||||
MediaTypes: "Audio,Video"
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (firstItem.Type == "MusicArtist") {
|
else if (firstItem.Type == "MusicArtist") {
|
||||||
|
|
@ -378,6 +374,16 @@
|
||||||
MediaTypes: "Audio"
|
MediaTypes: "Audio"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
else if (firstItem.IsFolder) {
|
||||||
|
|
||||||
|
promise = self.getItemsForPlayback({
|
||||||
|
ParentId: firstItem.Id,
|
||||||
|
Filters: "IsNotFolder",
|
||||||
|
Recursive: true,
|
||||||
|
SortBy: "SortName",
|
||||||
|
MediaTypes: "Audio,Video"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (promise) {
|
if (promise) {
|
||||||
promise.done(function (result) {
|
promise.done(function (result) {
|
||||||
|
|
@ -801,11 +807,7 @@
|
||||||
SortBy: "Random"
|
SortBy: "Random"
|
||||||
};
|
};
|
||||||
|
|
||||||
if (item.IsFolder) {
|
if (item.Type == "MusicArtist") {
|
||||||
query.ParentId = id;
|
|
||||||
|
|
||||||
}
|
|
||||||
else if (item.Type == "MusicArtist") {
|
|
||||||
|
|
||||||
query.MediaTypes = "Audio";
|
query.MediaTypes = "Audio";
|
||||||
query.Artists = item.Name;
|
query.Artists = item.Name;
|
||||||
|
|
@ -816,7 +818,12 @@
|
||||||
query.MediaTypes = "Audio";
|
query.MediaTypes = "Audio";
|
||||||
query.Genres = item.Name;
|
query.Genres = item.Name;
|
||||||
|
|
||||||
} else {
|
}
|
||||||
|
else if (item.IsFolder) {
|
||||||
|
query.ParentId = id;
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -81,7 +81,7 @@
|
||||||
$('.noItemsMessage', page).show();
|
$('.noItemsMessage', page).show();
|
||||||
}
|
}
|
||||||
|
|
||||||
$('.itemsContainer', page).html(html).trigger('create').createCardMenus().trigger('itemsrendered');
|
$('.itemsContainer', page).html(html).trigger('create').createCardMenus();
|
||||||
|
|
||||||
$('.btnNextPage', page).on('click', function () {
|
$('.btnNextPage', page).on('click', function () {
|
||||||
query.StartIndex += query.Limit;
|
query.StartIndex += query.Limit;
|
||||||
|
|
@ -333,6 +333,17 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function redirectToCollection(id) {
|
||||||
|
|
||||||
|
var context = getParameterByName('context');
|
||||||
|
|
||||||
|
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
|
||||||
|
|
||||||
|
Dashboard.navigate(LibraryBrowser.getHref(item, context));
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function createCollection(page) {
|
function createCollection(page) {
|
||||||
|
|
||||||
var url = ApiClient.getUrl("Collections", {
|
var url = ApiClient.getUrl("Collections", {
|
||||||
|
|
@ -355,16 +366,9 @@
|
||||||
Dashboard.hideLoadingMsg();
|
Dashboard.hideLoadingMsg();
|
||||||
|
|
||||||
var id = result.Id;
|
var id = result.Id;
|
||||||
var destination = 'itemdetails.html?id=' + id;
|
|
||||||
|
|
||||||
var context = getParameterByName('context');
|
|
||||||
|
|
||||||
if (context) {
|
|
||||||
destination += "&context=" + context;
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.newCollectionPanel', page).panel('toggle');
|
$('.newCollectionPanel', page).panel('toggle');
|
||||||
Dashboard.navigate(destination);
|
redirectToCollection(id);
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -384,19 +388,10 @@
|
||||||
|
|
||||||
Dashboard.hideLoadingMsg();
|
Dashboard.hideLoadingMsg();
|
||||||
|
|
||||||
var destination = 'itemdetails.html?id=' + id;
|
|
||||||
|
|
||||||
var context = getParameterByName('context');
|
|
||||||
|
|
||||||
if (context) {
|
|
||||||
destination += "&context=" + context;
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.newCollectionPanel', page).panel('toggle');
|
$('.newCollectionPanel', page).panel('toggle');
|
||||||
Dashboard.navigate(destination);
|
redirectToCollection(id);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.BoxSetEditor = {
|
window.BoxSetEditor = {
|
||||||
|
|
|
||||||
|
|
@ -103,7 +103,7 @@
|
||||||
|
|
||||||
html += pagingHtml;
|
html += pagingHtml;
|
||||||
|
|
||||||
$('.itemsContainer', page).html(html).trigger('create').createCardMenus().trigger('itemsrendered');
|
$('.itemsContainer', page).html(html).trigger('create').createCardMenus();
|
||||||
|
|
||||||
$('.btnNextPage', page).on('click', function () {
|
$('.btnNextPage', page).on('click', function () {
|
||||||
query.StartIndex += query.Limit;
|
query.StartIndex += query.Limit;
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,8 @@
|
||||||
limit: query.Limit,
|
limit: query.Limit,
|
||||||
totalRecordCount: result.TotalRecordCount,
|
totalRecordCount: result.TotalRecordCount,
|
||||||
viewButton: true,
|
viewButton: true,
|
||||||
showLimit: false
|
showLimit: false,
|
||||||
|
addSelectionButton: true
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||||
|
|
@ -56,7 +57,8 @@
|
||||||
showTitle: true,
|
showTitle: true,
|
||||||
coverImage: true,
|
coverImage: true,
|
||||||
centerText: true,
|
centerText: true,
|
||||||
lazy: true
|
lazy: true,
|
||||||
|
selectionPanel: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,8 @@
|
||||||
limit: query.Limit,
|
limit: query.Limit,
|
||||||
totalRecordCount: result.TotalRecordCount,
|
totalRecordCount: result.TotalRecordCount,
|
||||||
viewButton: true,
|
viewButton: true,
|
||||||
showLimit: false
|
showLimit: false,
|
||||||
|
addSelectionButton: true
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||||
|
|
@ -48,7 +49,8 @@
|
||||||
context: 'music',
|
context: 'music',
|
||||||
showTitle: true,
|
showTitle: true,
|
||||||
showParentTitle: true,
|
showParentTitle: true,
|
||||||
lazy: true
|
lazy: true,
|
||||||
|
selectionPanel: true
|
||||||
});
|
});
|
||||||
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
||||||
}
|
}
|
||||||
|
|
@ -69,7 +71,8 @@
|
||||||
showTitle: true,
|
showTitle: true,
|
||||||
showParentTitle: true,
|
showParentTitle: true,
|
||||||
timeline: true,
|
timeline: true,
|
||||||
lazy: true
|
lazy: true,
|
||||||
|
selectionPanel: true
|
||||||
});
|
});
|
||||||
$('.itemsContainer', page).addClass('timelineItemsContainer');
|
$('.itemsContainer', page).addClass('timelineItemsContainer');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,8 @@
|
||||||
limit: query.Limit,
|
limit: query.Limit,
|
||||||
totalRecordCount: result.TotalRecordCount,
|
totalRecordCount: result.TotalRecordCount,
|
||||||
viewButton: true,
|
viewButton: true,
|
||||||
showLimit: false
|
showLimit: false,
|
||||||
|
addSelectionButton: true
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||||
|
|
@ -56,7 +57,8 @@
|
||||||
showTitle: true,
|
showTitle: true,
|
||||||
coverImage: true,
|
coverImage: true,
|
||||||
centerText: true,
|
centerText: true,
|
||||||
lazy: true
|
lazy: true,
|
||||||
|
selectionPanel: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,8 @@
|
||||||
limit: query.Limit,
|
limit: query.Limit,
|
||||||
totalRecordCount: result.TotalRecordCount,
|
totalRecordCount: result.TotalRecordCount,
|
||||||
viewButton: true,
|
viewButton: true,
|
||||||
showLimit: false
|
showLimit: false,
|
||||||
|
addSelectionButton: true
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||||
|
|
@ -46,7 +47,8 @@
|
||||||
context: 'music',
|
context: 'music',
|
||||||
showItemCounts: true,
|
showItemCounts: true,
|
||||||
centerText: true,
|
centerText: true,
|
||||||
lazy: true
|
lazy: true,
|
||||||
|
selectionPanel: true
|
||||||
});
|
});
|
||||||
|
|
||||||
html += pagingHtml;
|
html += pagingHtml;
|
||||||
|
|
|
||||||
154
dashboard-ui/scripts/playlistedit.js
Normal file
154
dashboard-ui/scripts/playlistedit.js
Normal file
|
|
@ -0,0 +1,154 @@
|
||||||
|
(function ($, document) {
|
||||||
|
|
||||||
|
var view = LibraryBrowser.getDefaultItemsView('List', 'List');
|
||||||
|
|
||||||
|
// The base query options
|
||||||
|
var query = {
|
||||||
|
|
||||||
|
Recursive: true,
|
||||||
|
Fields: "PrimaryImageAspectRatio",
|
||||||
|
StartIndex: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
function getSavedQueryKey() {
|
||||||
|
|
||||||
|
return 'playlists' + (query.ParentId || '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadItems(page) {
|
||||||
|
|
||||||
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
|
query.ParentId = getParameterByName('id');
|
||||||
|
|
||||||
|
var promise1 = ApiClient.getJSON(ApiClient.getUrl('Playlists/' + query.ParentId + '/Items', { userId: Dashboard.getCurrentUserId() }));
|
||||||
|
var promise2 = Dashboard.getCurrentUser();
|
||||||
|
var promise3 = ApiClient.getItem(Dashboard.getCurrentUserId(), query.ParentId);
|
||||||
|
|
||||||
|
$.when(promise1, promise2, promise3).done(function (response1, response2, response3) {
|
||||||
|
|
||||||
|
var result = response1[0];
|
||||||
|
var user = response2[0];
|
||||||
|
var item = response3[0];
|
||||||
|
|
||||||
|
// Scroll back up so they can see the results from the beginning
|
||||||
|
$(document).scrollTop(0);
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
|
||||||
|
startIndex: query.StartIndex,
|
||||||
|
limit: query.Limit,
|
||||||
|
totalRecordCount: result.TotalRecordCount,
|
||||||
|
viewButton: true,
|
||||||
|
showLimit: false
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||||
|
|
||||||
|
updateFilterControls(page);
|
||||||
|
|
||||||
|
if (result.TotalRecordCount) {
|
||||||
|
|
||||||
|
if (view == "List") {
|
||||||
|
|
||||||
|
html = LibraryBrowser.getListViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
context: 'playlists',
|
||||||
|
sortBy: query.SortBy,
|
||||||
|
showIndex: false,
|
||||||
|
title: item.Name
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
html += pagingHtml;
|
||||||
|
$('.noItemsMessage', page).hide();
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
$('.noItemsMessage', page).show();
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.itemsContainer', page).html(html).trigger('create').createCardMenus();
|
||||||
|
|
||||||
|
$('.btnNextPage', page).on('click', function () {
|
||||||
|
query.StartIndex += query.Limit;
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.btnPreviousPage', page).on('click', function () {
|
||||||
|
query.StartIndex -= query.Limit;
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
||||||
|
|
||||||
|
Dashboard.hideLoadingMsg();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateFilterControls(page) {
|
||||||
|
|
||||||
|
// Reset form values using the last used query
|
||||||
|
$('.radioSortBy', page).each(function () {
|
||||||
|
|
||||||
|
this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('.radioSortOrder', page).each(function () {
|
||||||
|
|
||||||
|
this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('.chkStandardFilter', page).each(function () {
|
||||||
|
|
||||||
|
var filters = "," + (query.Filters || "");
|
||||||
|
var filterName = this.getAttribute('data-filter');
|
||||||
|
|
||||||
|
this.checked = filters.indexOf(',' + filterName) != -1;
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('#selectView', page).val(view).selectmenu('refresh');
|
||||||
|
|
||||||
|
$('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).on('pageinit', "#playlistEditorPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
$('#selectPageSize', page).on('change', function () {
|
||||||
|
query.Limit = parseInt(this.value);
|
||||||
|
query.StartIndex = 0;
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
}).on('pagebeforeshow', "#playlistEditorPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
query.ParentId = LibraryMenu.getTopParentId();
|
||||||
|
|
||||||
|
var limit = LibraryBrowser.getDefaultPageSize();
|
||||||
|
|
||||||
|
// If the default page size has changed, the start index will have to be reset
|
||||||
|
if (limit != query.Limit) {
|
||||||
|
query.Limit = limit;
|
||||||
|
query.StartIndex = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
var viewkey = getSavedQueryKey();
|
||||||
|
|
||||||
|
LibraryBrowser.loadSavedQueryValues(viewkey, query);
|
||||||
|
reloadItems(page);
|
||||||
|
|
||||||
|
}).on('pageshow', "#playlistEditorPage", function () {
|
||||||
|
|
||||||
|
updateFilterControls(this);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery, document);
|
||||||
243
dashboard-ui/scripts/playlistmanager.js
Normal file
243
dashboard-ui/scripts/playlistmanager.js
Normal file
|
|
@ -0,0 +1,243 @@
|
||||||
|
(function ($, document) {
|
||||||
|
|
||||||
|
var lastPlaylistId = '';
|
||||||
|
|
||||||
|
function redirectToPlaylist(id) {
|
||||||
|
|
||||||
|
var context = getParameterByName('context');
|
||||||
|
|
||||||
|
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
|
||||||
|
|
||||||
|
Dashboard.navigate(LibraryBrowser.getHref(item, context));
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onAddToPlaylistFormSubmit() {
|
||||||
|
|
||||||
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
|
var panel = $(this).parents('.newPlaylistPanel');
|
||||||
|
|
||||||
|
var playlistId = $('select.selectPlaylistToAddTo', panel).val();
|
||||||
|
|
||||||
|
if (playlistId) {
|
||||||
|
lastPlaylistId = playlistId;
|
||||||
|
addToPlaylist(panel, playlistId);
|
||||||
|
} else {
|
||||||
|
createPlaylist(panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getNewPlaylistPanel() {
|
||||||
|
|
||||||
|
$('.newPlaylistPanel').panel('destroy').remove();
|
||||||
|
|
||||||
|
var html = '<div data-role="panel" data-position="right" data-display="overlay" class="newPlaylistPanel" data-position-fixed="true" data-theme="a">';
|
||||||
|
|
||||||
|
html += '<h3>' + Globalize.translate('HeaderAddToPlaylist') + '</h3>';
|
||||||
|
|
||||||
|
html += '<br />';
|
||||||
|
|
||||||
|
html += '<form class="addToPlaylistForm">';
|
||||||
|
|
||||||
|
var selectId = 'selectPlaylistToAddTo' + new Date().getTime();
|
||||||
|
|
||||||
|
html += '<div>';
|
||||||
|
html += '<label for="' + selectId + '">' + Globalize.translate('LabelSelectPlaylist') + '</label>';
|
||||||
|
html += '<select id="' + selectId + '" class="selectPlaylistToAddTo" data-mini="true">';
|
||||||
|
html += '</select>';
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
html += '<br />';
|
||||||
|
|
||||||
|
html += '<div class="fldNewPlaylist" style="display:none;">';
|
||||||
|
html += '<label for="txtNewPlaylistName">' + Globalize.translate('LabelName') + '</label>';
|
||||||
|
html += '<input type="text" id="txtNewPlaylistName" />';
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
html += '<p>';
|
||||||
|
html += '<input class="fldSelectedItemIds" type="hidden" />';
|
||||||
|
html += '<button type="submit" data-icon="plus" data-mini="true" data-theme="b">' + Globalize.translate('ButtonSubmit') + '</button>';
|
||||||
|
html += '</p>';
|
||||||
|
|
||||||
|
html += '</form>';
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
$(document.body).append(html);
|
||||||
|
|
||||||
|
var elem = $('.newPlaylistPanel').panel({}).trigger('create').on("panelclose", function () {
|
||||||
|
|
||||||
|
$(this).off("panelclose").remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
var select = $('#' + selectId, elem).on('change', function () {
|
||||||
|
|
||||||
|
if (this.value) {
|
||||||
|
$('.fldNewPlaylist', elem).hide();
|
||||||
|
$('input', elem).removeAttr('required');
|
||||||
|
} else {
|
||||||
|
$('.fldNewPlaylist', elem).show();
|
||||||
|
$('input', elem).attr('required', 'required');
|
||||||
|
}
|
||||||
|
|
||||||
|
}).trigger('change');
|
||||||
|
|
||||||
|
ApiClient.getItems(Dashboard.getCurrentUserId(), {
|
||||||
|
|
||||||
|
IncludeItemTypes: 'Playlist',
|
||||||
|
recursive: true,
|
||||||
|
SortBy: 'SortName'
|
||||||
|
|
||||||
|
}).done(function (result) {
|
||||||
|
|
||||||
|
var selectHtml = '<option value="">' + Globalize.translate('OptionNewPlaylist') + '</option>';
|
||||||
|
selectHtml += result.Items.map(function (o) {
|
||||||
|
|
||||||
|
return '<option value="' + o.Id + '">' + o.Name + '</option>';
|
||||||
|
|
||||||
|
}).join('');
|
||||||
|
|
||||||
|
select.html(selectHtml).selectmenu('refresh');
|
||||||
|
|
||||||
|
select.val(lastPlaylistId || '').selectmenu('refresh').trigger('change');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('form', elem).on('submit', onAddToPlaylistFormSubmit);
|
||||||
|
|
||||||
|
return elem;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showNewPlaylistPanel(items) {
|
||||||
|
|
||||||
|
var panel = getNewPlaylistPanel().panel('toggle');
|
||||||
|
|
||||||
|
$('.fldSelectedItemIds', panel).val(items.join(','));
|
||||||
|
|
||||||
|
populatePlaylists(panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
function populatePlaylists(panel) {
|
||||||
|
|
||||||
|
var select = $('select.selectPlaylistToAddTo', panel);
|
||||||
|
|
||||||
|
if (!select.length) {
|
||||||
|
|
||||||
|
$('#txtNewPlaylistName', panel).val('').focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.newPlaylistInfo', panel).hide();
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
|
||||||
|
Recursive: true,
|
||||||
|
IncludeItemTypes: "Playlist"
|
||||||
|
};
|
||||||
|
|
||||||
|
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
html += '<option value="">' + Globalize.translate('OptionNewPlaylist') + '</option>';
|
||||||
|
|
||||||
|
html += result.Items.map(function (i) {
|
||||||
|
|
||||||
|
return '<option value="' + i.Id + '">' + i.Name + '</option>';
|
||||||
|
});
|
||||||
|
|
||||||
|
select.html(html).val('').selectmenu('refresh').trigger('change');
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//$(document).on('pageinit', ".playlistEditorPage", function () {
|
||||||
|
|
||||||
|
// var page = this;
|
||||||
|
|
||||||
|
// $('.itemsContainer', page).on('itemsrendered', function () {
|
||||||
|
|
||||||
|
// $('.btnNewPlaylist', page).off('click.newplaylistpanel').on('click.newplaylistpanel', function () {
|
||||||
|
|
||||||
|
// showNewPlaylistPanel(page, []);
|
||||||
|
// });
|
||||||
|
|
||||||
|
// });
|
||||||
|
|
||||||
|
// $('#selectPlaylistToAddTo', page).on('change', function () {
|
||||||
|
|
||||||
|
// if (this.value) {
|
||||||
|
// $('.newPlaylistInfo', page).hide();
|
||||||
|
// $('#txtNewPlaylistName', page).removeAttr('required');
|
||||||
|
// } else {
|
||||||
|
// $('.newPlaylistInfo', page).show();
|
||||||
|
// $('#txtNewPlaylistName', page).attr('required', 'required');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
//});
|
||||||
|
|
||||||
|
function createPlaylist(panel) {
|
||||||
|
|
||||||
|
var url = ApiClient.getUrl("Playlists", {
|
||||||
|
|
||||||
|
Name: $('#txtNewPlaylistName', panel).val(),
|
||||||
|
Ids: $('.fldSelectedItemIds', panel).val() || '',
|
||||||
|
userId: Dashboard.getCurrentUserId()
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
ApiClient.ajax({
|
||||||
|
type: "POST",
|
||||||
|
url: url,
|
||||||
|
dataType: "json"
|
||||||
|
|
||||||
|
}).done(function (result) {
|
||||||
|
|
||||||
|
Dashboard.hideLoadingMsg();
|
||||||
|
|
||||||
|
var id = result.Id;
|
||||||
|
|
||||||
|
panel.panel('toggle');
|
||||||
|
redirectToPlaylist(id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addToPlaylist(panel, id) {
|
||||||
|
|
||||||
|
var url = ApiClient.getUrl("Playlists/" + id + "/Items", {
|
||||||
|
|
||||||
|
Ids: $('.fldSelectedItemIds', panel).val() || ''
|
||||||
|
});
|
||||||
|
|
||||||
|
ApiClient.ajax({
|
||||||
|
type: "POST",
|
||||||
|
url: url
|
||||||
|
|
||||||
|
}).done(function () {
|
||||||
|
|
||||||
|
Dashboard.hideLoadingMsg();
|
||||||
|
|
||||||
|
panel.panel('toggle');
|
||||||
|
Dashboard.alert(Globalize.translate('MessageAddedToPlaylistSuccess'));
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.PlaylistManager = {
|
||||||
|
|
||||||
|
showPanel: function (items) {
|
||||||
|
showNewPlaylistPanel(items);
|
||||||
|
},
|
||||||
|
|
||||||
|
supportsPlaylists: function (item) {
|
||||||
|
|
||||||
|
if (item.Type == 'Playlist') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return item.MediaType == "Audio" || item.MediaType == "Video" || item.Type == "MusicAlbum" || item.Type == "MusicArtist" || item.Type == "MusicGenre" || item.Type == "Series" || item.Type == "Season";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery, document);
|
||||||
206
dashboard-ui/scripts/playlists.js
Normal file
206
dashboard-ui/scripts/playlists.js
Normal file
|
|
@ -0,0 +1,206 @@
|
||||||
|
(function ($, document) {
|
||||||
|
|
||||||
|
var view = LibraryBrowser.getDefaultItemsView('Poster', 'List');
|
||||||
|
|
||||||
|
// The base query options
|
||||||
|
var query = {
|
||||||
|
|
||||||
|
SortBy: "SortName",
|
||||||
|
SortOrder: "Ascending",
|
||||||
|
IncludeItemTypes: "Playlist",
|
||||||
|
Recursive: true,
|
||||||
|
Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks",
|
||||||
|
StartIndex: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
function getSavedQueryKey() {
|
||||||
|
|
||||||
|
return 'playlists' + (query.ParentId || '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadItems(page) {
|
||||||
|
|
||||||
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
|
var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
|
||||||
|
var promise2 = Dashboard.getCurrentUser();
|
||||||
|
|
||||||
|
$.when(promise1, promise2).done(function (response1, response2) {
|
||||||
|
|
||||||
|
var result = response1[0];
|
||||||
|
var user = response2[0];
|
||||||
|
|
||||||
|
// Scroll back up so they can see the results from the beginning
|
||||||
|
$(document).scrollTop(0);
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
|
||||||
|
startIndex: query.StartIndex,
|
||||||
|
limit: query.Limit,
|
||||||
|
totalRecordCount: result.TotalRecordCount,
|
||||||
|
viewButton: true,
|
||||||
|
showLimit: false
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||||
|
|
||||||
|
updateFilterControls(page);
|
||||||
|
|
||||||
|
if (result.TotalRecordCount) {
|
||||||
|
|
||||||
|
if (view == "List") {
|
||||||
|
|
||||||
|
html = LibraryBrowser.getListViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
context: 'playlists',
|
||||||
|
sortBy: query.SortBy
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (view == "Poster") {
|
||||||
|
html = LibraryBrowser.getPosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
shape: "square",
|
||||||
|
context: 'playlists',
|
||||||
|
showTitle: true,
|
||||||
|
lazy: true,
|
||||||
|
coverImage: true,
|
||||||
|
showItemCounts: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
html += pagingHtml;
|
||||||
|
$('.noItemsMessage', page).hide();
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
$('.noItemsMessage', page).show();
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.itemsContainer', page).html(html).trigger('create').createCardMenus();
|
||||||
|
|
||||||
|
$('.btnNextPage', page).on('click', function () {
|
||||||
|
query.StartIndex += query.Limit;
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.btnPreviousPage', page).on('click', function () {
|
||||||
|
query.StartIndex -= query.Limit;
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
||||||
|
|
||||||
|
Dashboard.hideLoadingMsg();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateFilterControls(page) {
|
||||||
|
|
||||||
|
// Reset form values using the last used query
|
||||||
|
$('.radioSortBy', page).each(function () {
|
||||||
|
|
||||||
|
this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('.radioSortOrder', page).each(function () {
|
||||||
|
|
||||||
|
this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('.chkStandardFilter', page).each(function () {
|
||||||
|
|
||||||
|
var filters = "," + (query.Filters || "");
|
||||||
|
var filterName = this.getAttribute('data-filter');
|
||||||
|
|
||||||
|
this.checked = filters.indexOf(',' + filterName) != -1;
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('#selectView', page).val(view).selectmenu('refresh');
|
||||||
|
|
||||||
|
$('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).on('pageinit', "#playlistsPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
$('.radioSortBy', this).on('click', function () {
|
||||||
|
query.SortBy = this.getAttribute('data-sortby');
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.radioSortOrder', this).on('click', function () {
|
||||||
|
query.SortOrder = this.getAttribute('data-sortorder');
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.chkStandardFilter', this).on('change', function () {
|
||||||
|
|
||||||
|
var filterName = this.getAttribute('data-filter');
|
||||||
|
var filters = query.Filters || "";
|
||||||
|
|
||||||
|
filters = (',' + filters).replace(',' + filterName, '').substring(1);
|
||||||
|
|
||||||
|
if (this.checked) {
|
||||||
|
filters = filters ? (filters + ',' + filterName) : filterName;
|
||||||
|
}
|
||||||
|
|
||||||
|
query.StartIndex = 0;
|
||||||
|
query.Filters = filters;
|
||||||
|
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#selectView', this).on('change', function () {
|
||||||
|
|
||||||
|
view = this.value;
|
||||||
|
|
||||||
|
reloadItems(page);
|
||||||
|
|
||||||
|
LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#selectPageSize', page).on('change', function () {
|
||||||
|
query.Limit = parseInt(this.value);
|
||||||
|
query.StartIndex = 0;
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
}).on('pagebeforeshow', "#playlistsPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
query.ParentId = LibraryMenu.getTopParentId();
|
||||||
|
|
||||||
|
var limit = LibraryBrowser.getDefaultPageSize();
|
||||||
|
|
||||||
|
// If the default page size has changed, the start index will have to be reset
|
||||||
|
if (limit != query.Limit) {
|
||||||
|
query.Limit = limit;
|
||||||
|
query.StartIndex = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
var viewkey = getSavedQueryKey();
|
||||||
|
|
||||||
|
LibraryBrowser.loadSavedQueryValues(viewkey, query);
|
||||||
|
|
||||||
|
LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
|
||||||
|
|
||||||
|
if (val) {
|
||||||
|
$('#selectView', page).val(val).selectmenu('refresh').trigger('change');
|
||||||
|
} else {
|
||||||
|
reloadItems(page);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}).on('pageshow', "#playlistsPage", function () {
|
||||||
|
|
||||||
|
updateFilterControls(this);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery, document);
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
var href = plugin.externalUrl ? plugin.externalUrl : "addplugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid;
|
var href = plugin.externalUrl ? plugin.externalUrl : "addplugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid;
|
||||||
var target = plugin.externalUrl ? ' target="_blank"' : '';
|
var target = plugin.externalUrl ? ' target="_blank"' : '';
|
||||||
|
|
||||||
html += "<div class='card backdropCard alternateHover'>";
|
html += "<div class='card backdropCard alternateHover bottomPaddedCard'>";
|
||||||
|
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue