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) {
|
||||
|
||||
.cardBox {
|
||||
margin: 2px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,6 +62,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bottomPaddedCard .cardBox {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.visualFooterCard .outerCardFooter {
|
||||
background: #111;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.visualCardBox {
|
||||
padding: 5px;
|
||||
-moz-border-radius: 2px;
|
||||
|
|
@ -195,6 +204,10 @@
|
|||
padding: 0 5px 4px;
|
||||
}
|
||||
|
||||
.outerCardFooter .cardText + .cardText {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
|
||||
.packageReviewText {
|
||||
|
|
@ -362,6 +375,14 @@
|
|||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1800px) {
|
||||
|
||||
.squareCard {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1920px) {
|
||||
|
||||
.portraitCard {
|
||||
|
|
@ -450,7 +471,7 @@
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 540px) {
|
||||
@media all and (min-width: 640px) {
|
||||
|
||||
.homePageBackdropCard {
|
||||
width: 33.3%;
|
||||
|
|
@ -572,4 +593,4 @@
|
|||
.homePageSmallBackdropCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@
|
|||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.libraryPage {
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
.backdropPage {
|
||||
background-color: rgba(15, 15,15, .94) !important;
|
||||
}
|
||||
|
|
@ -49,8 +53,8 @@
|
|||
|
||||
.listHeader {
|
||||
margin-top: .7em;
|
||||
margin-bottom: 0;
|
||||
padding-left: 4px;
|
||||
margin-bottom: .15em;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.firstListHeader {
|
||||
|
|
@ -58,17 +62,9 @@
|
|||
}
|
||||
|
||||
.ehsContent {
|
||||
padding: 0;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ehsContent td {
|
||||
padding: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.homePageSection + .homePageSection {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
|
@ -103,20 +99,6 @@
|
|||
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) {
|
||||
|
||||
.ehsContent {
|
||||
|
|
@ -908,7 +890,7 @@ a.itemTag:hover {
|
|||
width: 27px;
|
||||
z-index: 1000;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
display: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
@ -917,6 +899,7 @@ a.itemTag:hover {
|
|||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 1px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.alphabetPicker a:not(.selectedCharacter) {
|
||||
|
|
@ -979,7 +962,7 @@ a.itemTag:hover {
|
|||
}
|
||||
|
||||
.itemsContainerWithAlphaPicker {
|
||||
margin-right: 15px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -245,7 +245,7 @@
|
|||
background-image: url(images/items/folders/homevideos.png);
|
||||
}
|
||||
|
||||
.generalViewMenu, .boxsetsViewMenu {
|
||||
.generalViewMenu, .boxsetsViewMenu, .playlistsViewMenu {
|
||||
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 {
|
||||
font-weight: 300 !important;
|
||||
font-size: 28px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.libraryPage h1, .libraryPage h1 a {
|
||||
font-weight: 100 !important;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.ui-loader h1 {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
background: #1e1e1e;
|
||||
padding: 10px 7px 5px;
|
||||
margin: 3px 0;
|
||||
font-weight: normal!important;
|
||||
font-weight: normal !important;
|
||||
display: block;
|
||||
position: relative;
|
||||
-webkit-transition: all 500ms ease;
|
||||
|
|
@ -399,3 +399,124 @@
|
|||
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="listTopPaging">
|
||||
</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 id="items" class="itemsContainer"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,11 @@
|
|||
<div class="viewSettings">
|
||||
<div class="listTopPaging">
|
||||
</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 id="items" class="itemsContainer"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,11 @@
|
|||
<div class="viewSettings">
|
||||
<div class="listTopPaging">
|
||||
</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 id="items" class="itemsContainer"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,11 @@
|
|||
<div class="viewSettings">
|
||||
<div class="listTopPaging">
|
||||
</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 id="items" class="itemsContainer"></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) {
|
||||
|
||||
if (item.Type == 'BoxSet') {
|
||||
if (item.Type == 'BoxSet' || item.Type == 'Playlist') {
|
||||
$('#fldDelete', page).show();
|
||||
}
|
||||
else if (user.Configuration.EnableContentDeletion &&
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
html += pagingHtml;
|
||||
|
||||
$('.itemsContainer', page).html(html).trigger('create').createCardMenus().trigger('itemsrendered');
|
||||
$('.itemsContainer', page).html(html).trigger('create').createCardMenus();
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
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('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('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 }
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@
|
|||
case "channels":
|
||||
imgUrl = "css/images/items/folders/channels.png";
|
||||
break;
|
||||
case "boxsets":
|
||||
default:
|
||||
imgUrl = "css/images/items/folders/folder.png";
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -607,7 +607,8 @@
|
|||
centerText: item.Type != "MusicAlbum",
|
||||
showTitle: item.Type == "MusicAlbum" || item.Type == "Game",
|
||||
borderless: item.Type == "Game",
|
||||
context: context
|
||||
context: context,
|
||||
overlayText: item.Type != "MusicAlbum"
|
||||
});
|
||||
|
||||
$('#similarContent', page).html(html).createCardMenus();
|
||||
|
|
|
|||
|
|
@ -98,17 +98,38 @@
|
|||
|
||||
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) {
|
||||
|
||||
childText = item.MovieCount == 1 ? "1 Movie" : item.MovieCount + " Movies";
|
||||
childText = item.MovieCount == 1 ? "1 movie" : item.MovieCount + " movies";
|
||||
|
||||
counts.push(childText);
|
||||
}
|
||||
if (item.TrailerCount) {
|
||||
|
||||
childText = item.TrailerCount == 1 ? "1 Trailer" : item.TrailerCount + " Trailers";
|
||||
childText = item.TrailerCount == 1 ? "1 trailer" : item.TrailerCount + " trailers";
|
||||
|
||||
counts.push(childText);
|
||||
}
|
||||
|
|
@ -117,13 +138,13 @@
|
|||
|
||||
if (item.SeriesCount) {
|
||||
|
||||
childText = item.SeriesCount == 1 ? "1 Show" : item.SeriesCount + " Shows";
|
||||
childText = item.SeriesCount == 1 ? "1 show" : item.SeriesCount + " shows";
|
||||
|
||||
counts.push(childText);
|
||||
}
|
||||
if (item.EpisodeCount) {
|
||||
|
||||
childText = item.EpisodeCount == 1 ? "1 Episode" : item.EpisodeCount + " Episodes";
|
||||
childText = item.EpisodeCount == 1 ? "1 episode" : item.EpisodeCount + " episodes";
|
||||
|
||||
counts.push(childText);
|
||||
}
|
||||
|
|
@ -132,7 +153,7 @@
|
|||
|
||||
if (item.GameCount) {
|
||||
|
||||
childText = item.GameCount == 1 ? "1 Game" : item.GameCount + " Games";
|
||||
childText = item.GameCount == 1 ? "1 game" : item.GameCount + " games";
|
||||
|
||||
counts.push(childText);
|
||||
}
|
||||
|
|
@ -140,19 +161,19 @@
|
|||
|
||||
if (item.AlbumCount) {
|
||||
|
||||
childText = item.AlbumCount == 1 ? "1 Album" : item.AlbumCount + " Albums";
|
||||
childText = item.AlbumCount == 1 ? "1 album" : item.AlbumCount + " albums";
|
||||
|
||||
counts.push(childText);
|
||||
}
|
||||
if (item.SongCount) {
|
||||
|
||||
childText = item.SongCount == 1 ? "1 Song" : item.SongCount + " Songs";
|
||||
childText = item.SongCount == 1 ? "1 song" : item.SongCount + " songs";
|
||||
|
||||
counts.push(childText);
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
|
@ -360,7 +381,7 @@
|
|||
href += context;
|
||||
}
|
||||
|
||||
if (topParentId == null) {
|
||||
if (topParentId == null && context != 'playlists') {
|
||||
topParentId = LibraryMenu.getTopParentId();
|
||||
}
|
||||
|
||||
|
|
@ -420,10 +441,16 @@
|
|||
if (item.CollectionType == 'games') {
|
||||
return 'gamesrecommended.html?topParentId=' + item.Id;
|
||||
}
|
||||
if (item.CollectionType == 'playlists') {
|
||||
return 'playlists.html?topParentId=' + item.Id;
|
||||
}
|
||||
if (item.Type == 'CollectionFolder') {
|
||||
return 'itemlist.html?topParentId=' + item.Id + '&parentid=' + item.Id;
|
||||
}
|
||||
|
||||
if (item.Type == "Playlist") {
|
||||
return "playlistedit.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "TvChannel") {
|
||||
return "livetvchannel.html?id=" + id;
|
||||
}
|
||||
|
|
@ -576,6 +603,12 @@
|
|||
|
||||
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 groupTitle = '';
|
||||
|
||||
|
|
@ -583,15 +616,17 @@
|
|||
|
||||
var html = '';
|
||||
|
||||
var itemGroupTitle = LibraryBrowser.getListViewIndex(item, options.sortBy);
|
||||
if (options.showIndex !== false) {
|
||||
var itemGroupTitle = LibraryBrowser.getListViewIndex(item, options.sortBy);
|
||||
|
||||
if (itemGroupTitle != groupTitle) {
|
||||
if (itemGroupTitle != groupTitle) {
|
||||
|
||||
html += '<li data-role="list-divider">';
|
||||
html += itemGroupTitle;
|
||||
html += '</li>';
|
||||
html += '<li data-role="list-divider">';
|
||||
html += itemGroupTitle;
|
||||
html += '</li>';
|
||||
|
||||
groupTitle = itemGroupTitle;
|
||||
groupTitle = itemGroupTitle;
|
||||
}
|
||||
}
|
||||
|
||||
var dataAttributes = LibraryBrowser.getItemDataAttributes(item, options);
|
||||
|
|
@ -642,10 +677,18 @@
|
|||
textlines.push(LibraryBrowser.getPosterViewDisplayName(item));
|
||||
|
||||
if (item.Type == 'Game') {
|
||||
textlines.push(item.GameSystem || 'Unknown Gane System');
|
||||
textlines.push(item.GameSystem || 'Unknown Game System');
|
||||
}
|
||||
|
||||
textlines.push(LibraryBrowser.getMiscInfoHtml(item));
|
||||
else if (item.Type == 'MusicGenre') {
|
||||
textlines.push('Music genre');
|
||||
}
|
||||
else if (item.Type == 'MusicArtist') {
|
||||
textlines.push('Music artist');
|
||||
}
|
||||
else {
|
||||
textlines.push(LibraryBrowser.getMiscInfoHtml(item));
|
||||
}
|
||||
|
||||
html += '<h3>';
|
||||
html += textlines[0];
|
||||
|
|
@ -730,7 +773,7 @@
|
|||
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');
|
||||
}
|
||||
|
||||
|
|
@ -738,6 +781,10 @@
|
|||
itemCommands.push('shuffle');
|
||||
}
|
||||
|
||||
if (PlaylistManager.supportsPlaylists(item)) {
|
||||
itemCommands.push('playlist');
|
||||
}
|
||||
|
||||
return itemCommands;
|
||||
},
|
||||
|
||||
|
|
@ -900,7 +947,18 @@
|
|||
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;
|
||||
width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
|
||||
|
|
@ -1000,6 +1058,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
if (options.showTitle && !options.overlayText) {
|
||||
cssClass += ' bottomPaddedCard';
|
||||
}
|
||||
|
||||
var dataAttributes = LibraryBrowser.getItemDataAttributes(item, options);
|
||||
|
||||
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>';
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
if (options.overlayText || (forceName && !options.showTitle)) {
|
||||
html += footerText;
|
||||
html += LibraryBrowser.getCardFooterText(item, options, imgUrl, forceName, 'cardFooter', progressHtml);
|
||||
footerOverlayed = true;
|
||||
}
|
||||
else if (progressHtml) {
|
||||
html += '<div class="cardFooter">';
|
||||
html += "<div class='cardProgress cardText'>";
|
||||
html += progressHtml;
|
||||
html += "</div>";
|
||||
//cardFooter
|
||||
html += "</div>";
|
||||
|
||||
progressHtml = '';
|
||||
}
|
||||
|
||||
// cardContent
|
||||
html += '</div>';
|
||||
|
|
@ -1074,93 +1147,12 @@
|
|||
html += '</div>';
|
||||
|
||||
if (!options.overlayText && !footerOverlayed) {
|
||||
html += footerText;
|
||||
html += LibraryBrowser.getCardFooterText(item, options, imgUrl, forceName, 'cardFooter outerCardFooter', progressHtml);
|
||||
}
|
||||
|
||||
// cardBox
|
||||
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>";
|
||||
|
||||
}
|
||||
|
|
@ -1168,22 +1160,11 @@
|
|||
return html;
|
||||
},
|
||||
|
||||
getCardFooterText: function (item, options, imgUrl, forceName) {
|
||||
getCardFooterText: function (item, options, imgUrl, forceName, footerClass, progressHtml) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<div class="cardFooter">';
|
||||
|
||||
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>";
|
||||
}
|
||||
}
|
||||
html += '<div class="' + footerClass + '">';
|
||||
|
||||
var name = LibraryBrowser.getPosterViewDisplayName(item, options.displayAsSpecial);
|
||||
|
||||
|
|
@ -1231,7 +1212,7 @@
|
|||
lines.push(item.ProductionYear || '');
|
||||
}
|
||||
|
||||
html += LibraryBrowser.getPosterItemTextLines(lines, cssClass, !options.overlayText);
|
||||
html += LibraryBrowser.getCardTextLines(lines, cssClass, !options.overlayText);
|
||||
|
||||
if (options.overlayText) {
|
||||
|
||||
|
|
@ -1248,7 +1229,7 @@
|
|||
return html;
|
||||
},
|
||||
|
||||
getPosterItemTextLines: function (lines, cssClass, forceLines) {
|
||||
getCardTextLines: function (lines, cssClass, forceLines) {
|
||||
|
||||
var html = '';
|
||||
|
||||
|
|
|
|||
|
|
@ -149,6 +149,18 @@
|
|||
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() {
|
||||
|
||||
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>';
|
||||
}
|
||||
|
||||
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 += '</div>';
|
||||
|
|
@ -299,6 +315,7 @@
|
|||
$('.btnInstantMix', elem).on('click', onInstantMixButtonClick);
|
||||
$('.btnShuffle', elem).on('click', onShuffleButtonClick);
|
||||
$('.btnPlayTrailer', elem).on('click', onTrailerButtonClick);
|
||||
$('.btnAddToPlaylist', elem).on('click', onAddToPlaylistButtonClick);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -504,7 +521,8 @@
|
|||
return this.off('.cardHoverMenu')
|
||||
.on('mouseenter.cardHoverMenu', elems, onHoverIn)
|
||||
.on('mouseleave.cardHoverMenu', elems, onHoverOut)
|
||||
.on("touchstart.cardHoverMenu", elems, preventTouchHover);
|
||||
.on("touchstart.cardHoverMenu", elems, preventTouchHover)
|
||||
.trigger('itemsrendered');
|
||||
};
|
||||
|
||||
function toggleSelections(page) {
|
||||
|
|
@ -613,10 +631,31 @@
|
|||
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 () {
|
||||
|
||||
var page = this;
|
||||
|
||||
$('.btnAddToPlaylist', page).on('click', function () {
|
||||
addToPlaylist(page);
|
||||
});
|
||||
|
||||
$('.btnMergeVersions', page).on('click', function () {
|
||||
combineVersions(page);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -231,7 +231,7 @@
|
|||
|
||||
function getTopParentId() {
|
||||
|
||||
return getParameterByName('topParentId') || sessionStore.getItem('topParentId') || null;
|
||||
return getParameterByName('topParentId') /*|| sessionStore.getItem('topParentId')*/ || null;
|
||||
}
|
||||
|
||||
window.LibraryMenu = {
|
||||
|
|
@ -298,18 +298,22 @@
|
|||
|
||||
});
|
||||
|
||||
$('.scopedLibraryViewNav a', page).each(function () {
|
||||
var context = getParameterByName('context');
|
||||
|
||||
var src = this.href;
|
||||
if (context !== 'playlists') {
|
||||
$('.scopedLibraryViewNav a', page).each(function () {
|
||||
|
||||
if (src.indexOf('#') != -1) {
|
||||
return;
|
||||
}
|
||||
var src = this.href;
|
||||
|
||||
src = replaceQueryString(src, 'topParentId', id);
|
||||
if (src.indexOf('#') != -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.href = src;
|
||||
});
|
||||
src = replaceQueryString(src, 'topParentId', id);
|
||||
|
||||
this.href = src;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateContextText(page) {
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
for (var i = 0, length = users.length; i < length; 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">';
|
||||
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -347,14 +347,10 @@
|
|||
var firstItem = items[0];
|
||||
var promise;
|
||||
|
||||
if (firstItem.IsFolder) {
|
||||
if (firstItem.Type == "Playlist") {
|
||||
|
||||
promise = self.getItemsForPlayback({
|
||||
ParentId: firstItem.Id,
|
||||
Filters: "IsNotFolder",
|
||||
Recursive: true,
|
||||
SortBy: "SortName",
|
||||
MediaTypes: "Audio,Video"
|
||||
});
|
||||
}
|
||||
else if (firstItem.Type == "MusicArtist") {
|
||||
|
|
@ -378,6 +374,16 @@
|
|||
MediaTypes: "Audio"
|
||||
});
|
||||
}
|
||||
else if (firstItem.IsFolder) {
|
||||
|
||||
promise = self.getItemsForPlayback({
|
||||
ParentId: firstItem.Id,
|
||||
Filters: "IsNotFolder",
|
||||
Recursive: true,
|
||||
SortBy: "SortName",
|
||||
MediaTypes: "Audio,Video"
|
||||
});
|
||||
}
|
||||
|
||||
if (promise) {
|
||||
promise.done(function (result) {
|
||||
|
|
@ -801,11 +807,7 @@
|
|||
SortBy: "Random"
|
||||
};
|
||||
|
||||
if (item.IsFolder) {
|
||||
query.ParentId = id;
|
||||
|
||||
}
|
||||
else if (item.Type == "MusicArtist") {
|
||||
if (item.Type == "MusicArtist") {
|
||||
|
||||
query.MediaTypes = "Audio";
|
||||
query.Artists = item.Name;
|
||||
|
|
@ -816,7 +818,12 @@
|
|||
query.MediaTypes = "Audio";
|
||||
query.Genres = item.Name;
|
||||
|
||||
} else {
|
||||
}
|
||||
else if (item.IsFolder) {
|
||||
query.ParentId = id;
|
||||
|
||||
}
|
||||
else {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
$('.noItemsMessage', page).show();
|
||||
}
|
||||
|
||||
$('.itemsContainer', page).html(html).trigger('create').createCardMenus().trigger('itemsrendered');
|
||||
$('.itemsContainer', page).html(html).trigger('create').createCardMenus();
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
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) {
|
||||
|
||||
var url = ApiClient.getUrl("Collections", {
|
||||
|
|
@ -355,16 +366,9 @@
|
|||
Dashboard.hideLoadingMsg();
|
||||
|
||||
var id = result.Id;
|
||||
var destination = 'itemdetails.html?id=' + id;
|
||||
|
||||
var context = getParameterByName('context');
|
||||
|
||||
if (context) {
|
||||
destination += "&context=" + context;
|
||||
}
|
||||
|
||||
$('.newCollectionPanel', page).panel('toggle');
|
||||
Dashboard.navigate(destination);
|
||||
redirectToCollection(id);
|
||||
|
||||
});
|
||||
}
|
||||
|
|
@ -384,19 +388,10 @@
|
|||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
var destination = 'itemdetails.html?id=' + id;
|
||||
|
||||
var context = getParameterByName('context');
|
||||
|
||||
if (context) {
|
||||
destination += "&context=" + context;
|
||||
}
|
||||
|
||||
$('.newCollectionPanel', page).panel('toggle');
|
||||
Dashboard.navigate(destination);
|
||||
redirectToCollection(id);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
window.BoxSetEditor = {
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@
|
|||
|
||||
html += pagingHtml;
|
||||
|
||||
$('.itemsContainer', page).html(html).trigger('create').createCardMenus().trigger('itemsrendered');
|
||||
$('.itemsContainer', page).html(html).trigger('create').createCardMenus();
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@
|
|||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
viewButton: true,
|
||||
showLimit: false
|
||||
showLimit: false,
|
||||
addSelectionButton: true
|
||||
});
|
||||
|
||||
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||
|
|
@ -56,7 +57,8 @@
|
|||
showTitle: true,
|
||||
coverImage: true,
|
||||
centerText: true,
|
||||
lazy: true
|
||||
lazy: true,
|
||||
selectionPanel: true
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,8 @@
|
|||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
viewButton: true,
|
||||
showLimit: false
|
||||
showLimit: false,
|
||||
addSelectionButton: true
|
||||
});
|
||||
|
||||
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||
|
|
@ -48,7 +49,8 @@
|
|||
context: 'music',
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
lazy: true
|
||||
lazy: true,
|
||||
selectionPanel: true
|
||||
});
|
||||
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
||||
}
|
||||
|
|
@ -69,7 +71,8 @@
|
|||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
timeline: true,
|
||||
lazy: true
|
||||
lazy: true,
|
||||
selectionPanel: true
|
||||
});
|
||||
$('.itemsContainer', page).addClass('timelineItemsContainer');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@
|
|||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
viewButton: true,
|
||||
showLimit: false
|
||||
showLimit: false,
|
||||
addSelectionButton: true
|
||||
});
|
||||
|
||||
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||
|
|
@ -56,7 +57,8 @@
|
|||
showTitle: true,
|
||||
coverImage: true,
|
||||
centerText: true,
|
||||
lazy: true
|
||||
lazy: true,
|
||||
selectionPanel: true
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@
|
|||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
viewButton: true,
|
||||
showLimit: false
|
||||
showLimit: false,
|
||||
addSelectionButton: true
|
||||
});
|
||||
|
||||
$('.listTopPaging', page).html(pagingHtml).trigger('create');
|
||||
|
|
@ -46,7 +47,8 @@
|
|||
context: 'music',
|
||||
showItemCounts: true,
|
||||
centerText: true,
|
||||
lazy: true
|
||||
lazy: true,
|
||||
selectionPanel: true
|
||||
});
|
||||
|
||||
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 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="cardScalable">';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue