mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update video player layout
This commit is contained in:
Luke Pulverenti
parent
ae50805ba4
commit
eab5e1812e
20 changed files with 593 additions and 772 deletions
|
|
@ -47,7 +47,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="popup" data-transition="slidefade" class="popup episodeCorrectionPopup">
|
||||
<div data-role="popup" class="popup episodeCorrectionPopup">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3>${HeaderEpisodeOrganization}</h3>
|
||||
|
|
|
|||
|
|
@ -1,105 +0,0 @@
|
|||
.itemContextMenu {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
z-index: 10000;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
*border-right-width: 2px;
|
||||
*border-bottom-width: 2px;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contextMenuInner {
|
||||
padding: .5em 0;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.contextMenuOption {
|
||||
display: block;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
padding: .35em 1em;
|
||||
}
|
||||
|
||||
.contextMenuOption:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
background-color: #0088cc;
|
||||
background-color: #0081c2;
|
||||
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
|
||||
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.contextMenuHeader {
|
||||
font-weight: bold;
|
||||
margin: .5em 0;
|
||||
padding: 0 1em;
|
||||
color: #999;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contextMenuDivider {
|
||||
margin: .75em 0;
|
||||
height: 1px;
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
.itemContextMenu:before, .dropdown-context-up:before {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 9px;
|
||||
display: inline-block;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #ccc;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
content: '';
|
||||
}
|
||||
.dropdown-context:after, .dropdown-context-up:after {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 10px;
|
||||
display: inline-block;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #ffffff;
|
||||
border-left: 6px solid transparent;
|
||||
content: '';
|
||||
}
|
||||
.dropdown-context-up:before, .dropdown-context-up:after {
|
||||
top: auto;
|
||||
bottom: -7px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.dropdown-context-up:before {
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid #ccc;
|
||||
border-bottom: none;
|
||||
border-left: 7px solid transparent;
|
||||
}
|
||||
.dropdown-context-up:after {
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #ffffff;
|
||||
border-left: 6px solid transparent;
|
||||
border-bottom: none;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 138 KiB After Width: | Height: | Size: 135 KiB |
|
|
@ -1,9 +1,6 @@
|
|||
#mediaPlayer .mediaPlayerFlyout {
|
||||
bottom: 64px;
|
||||
}
|
||||
|
||||
#videoBackdrop {
|
||||
z-index: 99990;
|
||||
.videoBackdrop {
|
||||
/* Allows popups to be closed, because their z-index is 1099 */
|
||||
z-index: 1098;
|
||||
position: fixed;
|
||||
background-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
|
|
@ -16,60 +13,49 @@
|
|||
#videoPlayer {
|
||||
z-index: 99997;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -170px;
|
||||
margin-top: -115px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
background-color: #000;
|
||||
margin: 0 0 70px;
|
||||
width: 320px;
|
||||
height: 181px;
|
||||
}
|
||||
|
||||
#videoControls {
|
||||
z-index: 99999;
|
||||
padding: 0 5px 0;
|
||||
height: 75px;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
#videoControls .positionSliderContainer .ui-slider-track {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#videoControls .positionSliderContainer {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 0px;
|
||||
}
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#videoControls #video-basic-controls {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 10px;
|
||||
width: 600px;
|
||||
display: inline-block;
|
||||
}
|
||||
.videoControls {
|
||||
padding: 0 .5em;
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 99998;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#videoControls #video-advanced-controls {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 10px;
|
||||
width: 400px;
|
||||
display: inline-block;
|
||||
}
|
||||
.videoTopControls {
|
||||
padding: .7em 1em;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 99998;
|
||||
}
|
||||
|
||||
#videoControls .currentTime {
|
||||
.videoAdvancedControls {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.videoControls .currentTime {
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
#slider-tooltip {
|
||||
z-index: 99999;
|
||||
|
|
@ -83,11 +69,46 @@
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
.nowPlayingInfo {
|
||||
position: fixed;
|
||||
bottom: 8px;
|
||||
left: 10px;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingInfo img {
|
||||
height: auto !important;
|
||||
max-width: 100px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingText {
|
||||
font-weight: normal;
|
||||
margin: 0 0 0 5px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.videoTopControlsLogo {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.videoTopControlsLogo img {
|
||||
max-height: 40px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
/* Fullscreen
|
||||
***************************************/
|
||||
|
||||
#videoPlayer.fullscreenVideo,
|
||||
#videoPlayer.fullscreenVideo .itemVideo {
|
||||
#videoPlayer,
|
||||
#videoPlayer .itemVideo {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
|
|
@ -106,174 +127,45 @@
|
|||
height: 2px!important;
|
||||
}
|
||||
|
||||
#mediaPlayer .ui-slider-handle, .nowPlayingBar .ui-slider-handle, .nowPlayingPage .ui-slider-handle {
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo #videoControls {
|
||||
opacity: 0.8;
|
||||
background-color: #1d1d1d;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo .inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo:hover .active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#mediaPlayer #videoControls #video-subtitleButton:disabled, #mediaPlayer #videoControls #video-muteButton:disabled, #mediaPlayer #videoControls #video-unmuteButton:disabled {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
#mediaPlayer #video-advanced-controls {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#mediaPlayer #videoControls .mediaPlayerFlyout {
|
||||
text-align: left;
|
||||
margin-left: 0;
|
||||
right: 0;
|
||||
bottom: 70px;
|
||||
}
|
||||
|
||||
#mediaPlayer .volumeSliderContainer {
|
||||
#mediaPlayer .sliderContainer {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
/* Media queries
|
||||
***************************************/
|
||||
|
||||
@media all and (min-width: 640px) and (min-height: 360px) {
|
||||
#mediaPlayer .itemVideo:not(.fullscreenVideo) {
|
||||
width: 480px;
|
||||
height: 271px;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
margin-left: -250px;
|
||||
margin-top: -160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) and (min-height: 450px) {
|
||||
#mediaPlayer .itemVideo:not(.fullscreenVideo) {
|
||||
width: 640px;
|
||||
height: 362px;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
margin-left: -330px;
|
||||
margin-top: -205px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 960px) and (min-height: 540px) {
|
||||
#mediaPlayer .itemVideo:not(.fullscreenVideo) {
|
||||
width: 720px;
|
||||
height: 406px;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
margin-left: -370px;
|
||||
margin-top: -228px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) and (min-height: 720px) {
|
||||
#mediaPlayer .itemVideo:not(.fullscreenVideo) {
|
||||
width: 1080px;
|
||||
height: 610px;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
margin-left: -550px;
|
||||
margin-top: -329px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1440px) and (min-height: 720px) {
|
||||
#mediaPlayer .itemVideo:not(.fullscreenVideo) {
|
||||
width: 1080px;
|
||||
height: 610px;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
margin-left: -550px;
|
||||
margin-top: -329px;
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************/
|
||||
|
||||
@media all and (max-width: 1200px), all and (max-height: 720px) {
|
||||
#videoControls .currentTime {
|
||||
.videoControls .currentTime {
|
||||
margin-right: 0;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
#videoControls #video-advanced-controls {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
#videoControls .nowPlayingText {
|
||||
.videoControls .nowPlayingText {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 960px), all and (max-height: 550px) {
|
||||
#videoControls #video-advanced-controls {
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
#videoControls .nowPlayingText {
|
||||
.videoControls .nowPlayingText {
|
||||
max-width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px), all and (max-height: 460px) {
|
||||
#mediaPlayer #videoPlayer {
|
||||
margin-top: -180px;
|
||||
}
|
||||
|
||||
#mediaPlayer .itemVideo {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
#mediaPlayer #videoControls {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#mediaPlayer #video-basic-controls {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#mediaPlayer #video-basic-controls, #mediaPlayer #video-advanced-controls {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#mediaPlayer #videoControls .mediaPlayerFlyout {
|
||||
bottom: 150px;
|
||||
}
|
||||
|
||||
#mediaPlayer .nowPlayingImage, #mediaPlayer .nowPlayingText {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mediaPlayer .volumeSliderContainer {
|
||||
#mediaPlayer .sliderContainer {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 640px), all and (max-height: 365px) {
|
||||
#mediaPlayer #videoPlayer {
|
||||
margin-top: -135px;
|
||||
}
|
||||
@media all and (max-width: 1000px), all and (max-height: 460px) {
|
||||
|
||||
#mediaPlayer #video-advanced-controls {
|
||||
width: 150px;
|
||||
#mediaPlayer .nowPlayingImage, #mediaPlayer .nowPlayingText {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -281,6 +173,23 @@
|
|||
#mediaPlayer .previousTrackButton, #mediaPlayer .nextTrackButton {
|
||||
display: none!important;
|
||||
}
|
||||
.videoTopControlsLogo {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
.videoControls .positionSliderContainer {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
#videoPlayer .nowPlayingInfo img {
|
||||
height: auto !important;
|
||||
max-width: 150px;
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************/
|
||||
|
|
@ -362,89 +271,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
.cursor-inactive {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.mediaFlyoutContainer {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mediaPlayerFlyout {
|
||||
.videoPlayerPopupContent {
|
||||
width: 200px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.videoChaptersPopup .videoPlayerPopupContent {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.videoChapterPopupImage {
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
bottom: 78px;
|
||||
margin-left: -125px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chaptersFlyout, .audioTracksFlyout {
|
||||
width: 250px;
|
||||
margin-left: -150px;
|
||||
}
|
||||
|
||||
.mediaFlyoutOption {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mediaFlyoutOption:hover, .mediaFlyoutOption:focus {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.selectedMediaFlyoutOption {
|
||||
background-color: #d9F4FF;
|
||||
background-image: url(images/media/selected.png);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
background-size: 16px 16px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionImage {
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
vertical-align: middle;
|
||||
.videoPlayerPopupScroller {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 85%;
|
||||
@media all and (min-height: 500px) {
|
||||
.videoPlayerPopupScroller {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.chaptersFlyout .mediaFlyoutOptionImage {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.chaptersFlyout .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
|
||||
width: 60%;
|
||||
|
||||
@media all and (min-height: 600px) {
|
||||
.videoPlayerPopupScroller {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionName {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionSecondaryText {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
font-weight: normal;
|
||||
margin-top: 3px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -151,13 +151,6 @@ input[type="range"]::-ms-fill-upper {
|
|||
}
|
||||
}
|
||||
|
||||
/*@media all and (min-width: 800px) {
|
||||
|
||||
.nowPlayingBar {
|
||||
text-align: center;
|
||||
}
|
||||
}*/
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
#nowPlayingBar .positionSliderContainer {
|
||||
width: 300px;
|
||||
|
|
|
|||
|
|
@ -64,6 +64,10 @@ body {
|
|||
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.bodyWithPopupOpen {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.textlink {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -170,7 +174,6 @@ pre, textarea.pre {
|
|||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
.ui-popup-container {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
|
@ -681,7 +684,9 @@ h1 .imageLink {
|
|||
bottom: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
z-index: 99997;
|
||||
|
||||
/* Above everything, except for the video player and popup overlays */
|
||||
z-index: 1097;
|
||||
color: #fff;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -305,7 +305,7 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<div data-role="popup" data-transition="slidefade" id="popupEditDirectPlayProfile" class="popup">
|
||||
<div data-role="popup" id="popupEditDirectPlayProfile" class="popup">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3>${HeaderDirectPlayProfile}</h3>
|
||||
|
|
@ -353,7 +353,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div data-role="popup" data-transition="slidefade" id="transcodingProfilePopup" class="popup">
|
||||
<div data-role="popup" id="transcodingProfilePopup" class="popup">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3>${HeaderTranscodingProfile}</h3>
|
||||
|
|
@ -431,7 +431,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div data-role="popup" data-transition="slidefade" id="containerProfilePopup" class="popup">
|
||||
<div data-role="popup" id="containerProfilePopup" class="popup">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3>${HeaderContainerProfile}</h3>
|
||||
|
|
@ -481,7 +481,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div data-role="popup" data-transition="slidefade" id="codecProfilePopup" class="popup">
|
||||
<div data-role="popup" id="codecProfilePopup" class="popup">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3>${HeaderCodecProfile}</h3>
|
||||
|
|
@ -519,7 +519,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div data-role="popup" data-transition="slidefade" id="responseProfilePopup" class="popup">
|
||||
<div data-role="popup" id="responseProfilePopup" class="popup">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3>${HeaderResponseProfile}</h3>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="popup" data-transition="slidefade" class="popupIdentify popup" data-theme="a">
|
||||
<div data-role="popup" class="popupIdentify popup" data-theme="a">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3>${HeaderAddTitles}
|
||||
|
|
|
|||
|
|
@ -26,10 +26,10 @@
|
|||
<div style="margin: -25px 0 1em;">
|
||||
|
||||
<div style="display: inline-block;">
|
||||
<a class="lnkBrowseImages lnkBrowseAllImages hide" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="cloud" data-mini="true" data-transition="pop">Browse Images</a>
|
||||
<a class="lnkBrowseImages lnkBrowseAllImages hide" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="cloud" data-mini="true">Browse Images</a>
|
||||
</div>
|
||||
<div style="display: inline-block;">
|
||||
<a href="#popupUpload" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="plus" data-mini="true" data-transition="pop">Upload</a>
|
||||
<a href="#popupUpload" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="plus" data-mini="true">Upload</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -379,7 +379,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div data-role="popup" data-transition="slidefade" id="popupConfirmDelete" class="popup" data-theme="a">
|
||||
<div data-role="popup" id="popupConfirmDelete" class="popup" data-theme="a">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3>Confirm Deletion</h3>
|
||||
|
|
@ -409,7 +409,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div data-role="popup" data-transition="slidefade" class="popupIdentify popup" data-theme="a">
|
||||
<div data-role="popup" class="popupIdentify popup" data-theme="a">
|
||||
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
|
||||
|
|
@ -456,7 +456,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div data-role="popup" data-transition="slidefade" id="popupEditPerson" class="popup" data-theme="a">
|
||||
<div data-role="popup" id="popupEditPerson" class="popup" data-theme="a">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3 style="margin: .5em;">Person Info</h3>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-role="popup" data-transition="slidefade" id="popupEnterText" class="popup">
|
||||
<div data-role="popup" id="popupEnterText" class="popup">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3></h3>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
options.header = options.header || Globalize.translate('HeaderSelectMediaPath');
|
||||
options.instruction = options.instruction || "";
|
||||
|
||||
var html = '<div data-transition="fade" data-role="popup" id="popupDirectoryPicker" class="popup" style="min-width:65%;">';
|
||||
var html = '<div data-role="popup" id="popupDirectoryPicker" class="popup" style="min-width:65%;">';
|
||||
|
||||
html += '<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">';
|
||||
html += '<h3>' + options.header + '</h3>';
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@
|
|||
|
||||
function getPromise() {
|
||||
|
||||
var id = getParameterByName('id');
|
||||
|
||||
if (id) {
|
||||
return ApiClient.getItem(Dashboard.getCurrentUserId(), id);
|
||||
}
|
||||
|
||||
var name = getParameterByName('person');
|
||||
|
||||
if (name) {
|
||||
|
|
@ -64,7 +70,7 @@
|
|||
|
||||
currentItem = item;
|
||||
|
||||
renderHeader(page, item);
|
||||
renderHeader(page, item, context);
|
||||
|
||||
var name = item.Name;
|
||||
|
||||
|
|
@ -72,8 +78,8 @@
|
|||
|
||||
$('.itemName', page).html(name);
|
||||
|
||||
renderDetails(page, item);
|
||||
renderTabs(page, item);
|
||||
renderDetails(page, item, context);
|
||||
renderTabs(page, item, context);
|
||||
|
||||
$(page).trigger('displayingitem', [{
|
||||
|
||||
|
|
@ -105,9 +111,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
function renderHeader(page, item) {
|
||||
|
||||
var context = getParameterByName('context');
|
||||
function renderHeader(page, item, context) {
|
||||
|
||||
$('.itemTabs', page).hide();
|
||||
|
||||
|
|
@ -149,7 +153,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
function renderTabs(page, item) {
|
||||
function renderTabs(page, item, context) {
|
||||
|
||||
var html = '<fieldset data-role="controlgroup" data-type="horizontal" class="libraryTabs">';
|
||||
|
||||
|
|
@ -209,7 +213,6 @@
|
|||
|
||||
bindRadioEvents(page);
|
||||
|
||||
var context = getParameterByName('context');
|
||||
var selectedRadio = null;
|
||||
|
||||
if (context) {
|
||||
|
|
@ -316,7 +319,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
function renderDetails(page, item) {
|
||||
function renderDetails(page, item, context) {
|
||||
|
||||
LibraryBrowser.renderDetailPageBackdrop(page, item);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), item);
|
||||
|
|
@ -324,7 +327,7 @@
|
|||
renderUserDataIcons(page, item);
|
||||
LibraryBrowser.renderLinks($('#itemLinks', page), item);
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), item, getParameterByName('context'));
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
|
||||
|
||||
if (item.Type == "Person" && item.PremiereDate) {
|
||||
|
||||
|
|
|
|||
|
|
@ -1352,7 +1352,7 @@
|
|||
|
||||
var cast = casts[i];
|
||||
|
||||
html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">';
|
||||
html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&id=' + cast.Id + '">';
|
||||
|
||||
var imgUrl;
|
||||
|
||||
|
|
|
|||
|
|
@ -219,8 +219,7 @@
|
|||
html += '<tr>';
|
||||
|
||||
html += '<td class="detailTableButtonsCell">';
|
||||
html += '<button class="btnPlay" data-icon="play" type="button" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', \'Audio\');" data-inline="true" title="Play">Play</button>';
|
||||
html += '<button class="btnQueue" data-icon="plus" type="button" data-iconpos="notext" onclick="MediaController.queue(\'' + item.Id + '\');" data-inline="true" title="Queue">Queue</button>';
|
||||
html += '<button class="btnPlay" data-icon="play" type="button" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', false, \'Audio\');" data-inline="true" title="Play">Play</button>';
|
||||
html += '</td>';
|
||||
|
||||
html += '<td class="desktopColumn">' + (item.ParentIndexNumber || "") + '</td>';
|
||||
|
|
@ -301,21 +300,13 @@
|
|||
|
||||
$('.playFlyout').popup("close").remove();
|
||||
|
||||
var html = '<div data-role="popup" class="playFlyout" data-transition="fade" data-history="false">';
|
||||
var html = '<div data-role="popup" class="playFlyout" data-history="false">';
|
||||
|
||||
html += '<ul data-role="listview" style="min-width: 180px;">';
|
||||
html += '<li data-role="list-divider">Play Menu</li>';
|
||||
|
||||
html += '<li><a href="#" onclick="MediaController.play(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
|
||||
|
||||
if (itemType == "Audio" || itemType == "MusicAlbum" || itemType == "MusicArtist" || itemType == "MusicGenre") {
|
||||
html += '<li><a href="#" onclick="MediaController.instantMix(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Instant Mix</a></li>';
|
||||
}
|
||||
|
||||
if (isFolder || itemType == "MusicArtist" || itemType == "MusicGenre") {
|
||||
html += '<li><a href="#" onclick="MediaController.shuffle(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Shuffle</a></li>';
|
||||
}
|
||||
|
||||
if (resumePositionTicks) {
|
||||
html += '<li><a href="#" onclick="MediaController.play({ids:[\'' + itemId + '\'],startPositionTicks:' + resumePositionTicks + '});LibraryBrowser.closePlayMenu();">Resume</a></li>';
|
||||
}
|
||||
|
|
@ -324,6 +315,14 @@
|
|||
html += '<li><a href="#" onclick="MediaController.queue(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Queue</a></li>';
|
||||
}
|
||||
|
||||
if (itemType == "Audio" || itemType == "MusicAlbum" || itemType == "MusicArtist" || itemType == "MusicGenre") {
|
||||
html += '<li><a href="#" onclick="MediaController.instantMix(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Instant Mix</a></li>';
|
||||
}
|
||||
|
||||
if (isFolder || itemType == "MusicArtist" || itemType == "MusicGenre") {
|
||||
html += '<li><a href="#" onclick="MediaController.shuffle(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Shuffle</a></li>';
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -432,26 +431,26 @@
|
|||
return "itemdetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "Genre") {
|
||||
return "itembynamedetails.html?genre=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "MusicGenre") {
|
||||
return "itembynamedetails.html?musicgenre=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "GameGenre") {
|
||||
return "itembynamedetails.html?gamegenre=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "Studio") {
|
||||
return "itembynamedetails.html?studio=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "Person") {
|
||||
return "itembynamedetails.html?person=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "Recording") {
|
||||
return "livetvrecording.html?id=" + id;
|
||||
}
|
||||
|
||||
if (item.Type == "MusicArtist") {
|
||||
return "itembynamedetails.html?musicartist=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
|
||||
if (item.IsFolder) {
|
||||
|
|
@ -1993,7 +1992,7 @@
|
|||
if (typeof (index) == "undefined") index = 0;
|
||||
|
||||
html += '<div class="galleryImageContainer">';
|
||||
html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||
html += '<a href="#pop_' + index + '_' + tag + '" data-rel="popup" data-position-to="window">';
|
||||
|
||||
html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
|
||||
maxWidth: screenWidth,
|
||||
|
|
|
|||
|
|
@ -114,11 +114,6 @@
|
|||
|
||||
html += '<button type="button" data-mini="true" data-inline="true" data-icon="play" data-iconpos="notext" title="' + Globalize.translate('ButtonPlay') + '" onclick="' + onPlayClick + '" style="' + buttonMargin + '">' + Globalize.translate('ButtonPlay') + '</button>';
|
||||
buttonCount++;
|
||||
|
||||
if (item.MediaType == "Audio" || item.Type == "MusicAlbum") {
|
||||
html += '<button type="button" data-mini="true" data-inline="true" data-icon="plus" data-iconpos="notext" title="' + Globalize.translate('ButtonQueue') + '" onclick="MediaController.queue(\'' + item.Id + '\');return false;" style="' + buttonMargin + '">' + Globalize.translate('ButtonQueue') + '</button>';
|
||||
buttonCount++;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.LocalTrailerCount && item.PlayAccess == 'Full') {
|
||||
|
|
|
|||
|
|
@ -29,14 +29,12 @@
|
|||
|
||||
self.remoteFullscreen = function () {
|
||||
|
||||
var videoControls = $("#videoControls");
|
||||
|
||||
if (remoteFullscreen) {
|
||||
exitFullScreenToWindow();
|
||||
videoControls.removeClass("inactive");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
} else {
|
||||
enterFullScreen();
|
||||
videoControls.addClass("inactive");
|
||||
$('.hiddenOnIdle').addClass("inactive");
|
||||
}
|
||||
|
||||
remoteFullscreen = !remoteFullscreen;
|
||||
|
|
@ -65,9 +63,8 @@
|
|||
self.resetEnhancements = function () {
|
||||
$("#mediaPlayer").hide();
|
||||
$('#videoPlayer').removeClass('fullscreenVideo');
|
||||
$("#videoControls").removeClass("inactive");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
$("video").remove();
|
||||
$("html").css("cursor", "default");
|
||||
};
|
||||
|
||||
self.exitFullScreen = function () {
|
||||
|
|
@ -90,53 +87,38 @@
|
|||
|
||||
self.showSubtitleMenu = function () {
|
||||
|
||||
var flyout = $('#video-subtitleFlyout');
|
||||
var elem = $('.videoSubtitlePopup').html(getSubtitleTracksHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoSubtitleButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
|
||||
flyout.html(getSubtitleTracksHtml()).trigger('create').scrollTop(0);
|
||||
toggleFlyout(flyout, '#video-subtitleButton');
|
||||
|
||||
} else {
|
||||
toggleFlyout(flyout, '#video-subtitleButton');
|
||||
}
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.showQualityFlyout = function () {
|
||||
|
||||
var flyout = $('.video-qualityFlyout');
|
||||
var elem = $('.videoQualityPopup').html(getQualityFlyoutHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoQualityButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
flyout.html(getQualityFlyoutHtml()).scrollTop(0);
|
||||
}
|
||||
|
||||
toggleFlyout(flyout, '.video-qualityButton');
|
||||
|
||||
//$('.videoQualityPopup').html(getQualityFlyoutHtml()).trigger('create').popup('open');
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.showChaptersFlyout = function () {
|
||||
|
||||
var flyout = $('#video-chaptersFlyout');
|
||||
var elem = $('.videoChaptersPopup').html(getChaptersFlyoutHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoChaptersButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
flyout.html(getChaptersFlyoutHtml()).scrollTop(0);
|
||||
}
|
||||
|
||||
toggleFlyout(flyout, '#video-chaptersButton');
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.showAudioTracksFlyout = function () {
|
||||
|
||||
var flyout = $('#video-audioTracksFlyout');
|
||||
var elem = $('.videoAudioPopup').html(getAudioTracksHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoAudioButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
|
||||
flyout.html(getAudioTracksHtml()).trigger('create').scrollTop(0);
|
||||
toggleFlyout(flyout, '#video-audioTracksButton');
|
||||
} else {
|
||||
toggleFlyout(flyout, '#video-audioTracksButton');
|
||||
}
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.setAudioStreamIndex = function (index) {
|
||||
|
|
@ -250,6 +232,84 @@
|
|||
});
|
||||
};
|
||||
|
||||
self.updateNowPlayingInfo = function (item) {
|
||||
|
||||
if (!item) {
|
||||
throw new Error('item cannot be null');
|
||||
}
|
||||
|
||||
var mediaControls = $("#videoPlayer");
|
||||
|
||||
var state = self.getPlayerStateInternal(self.currentMediaElement, item, self.currentMediaSource);
|
||||
|
||||
var url = "";
|
||||
|
||||
if (state.NowPlayingItem.PrimaryImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
width: 150,
|
||||
tag: state.NowPlayingItem.PrimaryImageTag
|
||||
});
|
||||
}
|
||||
else if (state.NowPlayingItem.PrimaryImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
width: 150,
|
||||
tag: state.NowPlayingItem.PrimaryImageTag
|
||||
});
|
||||
}
|
||||
else if (state.NowPlayingItem.BackdropImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.BackdropItemId, {
|
||||
type: "Backdrop",
|
||||
height: 300,
|
||||
tag: state.NowPlayingItem.BackdropImageTag,
|
||||
index: 0
|
||||
});
|
||||
|
||||
}
|
||||
else if (state.NowPlayingItem.ThumbImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.ThumbImageItemId, {
|
||||
type: "Thumb",
|
||||
height: 300,
|
||||
tag: state.NowPlayingItem.ThumbImageTag
|
||||
});
|
||||
}
|
||||
|
||||
var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
|
||||
var nameHtml = self.getNowPlayingNameHtml(state);
|
||||
|
||||
if (nameHtml.indexOf('<br/>') != -1) {
|
||||
nowPlayingTextElement.addClass('nowPlayingDoubleText');
|
||||
} else {
|
||||
nowPlayingTextElement.removeClass('nowPlayingDoubleText');
|
||||
}
|
||||
|
||||
if (url) {
|
||||
$('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
|
||||
} else {
|
||||
$('.nowPlayingImage', mediaControls).html('');
|
||||
}
|
||||
|
||||
if (state.NowPlayingItem.LogoItemId) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.LogoItemId, {
|
||||
type: "Logo",
|
||||
height: 40,
|
||||
tag: state.NowPlayingItem.LogoImageTag
|
||||
});
|
||||
|
||||
$('.videoTopControlsLogo', mediaControls).html('<img src="' + url + '" />');
|
||||
} else {
|
||||
$('.videoTopControlsLogo', mediaControls).html('');
|
||||
}
|
||||
|
||||
nowPlayingTextElement.html(nameHtml);
|
||||
};
|
||||
|
||||
function onPositionSliderChange() {
|
||||
|
||||
isPositionSliderActive = false;
|
||||
|
|
@ -282,40 +342,40 @@
|
|||
self.setVolume(vol * 100);
|
||||
});
|
||||
|
||||
$('#video-chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoChaptersPopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
var ticks = parseInt(this.getAttribute('data-positionticks'));
|
||||
|
||||
self.changeStream(ticks);
|
||||
|
||||
hideFlyout($('#video-chaptersFlyout'));
|
||||
$('.videoChaptersPopup').popup('close');
|
||||
});
|
||||
|
||||
$('#video-audioTracksFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoAudioPopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||
if (!$(this).hasClass('selectedMediaPopupOption')) {
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
self.setAudioStreamIndex(index);
|
||||
}
|
||||
|
||||
hideFlyout($('#video-audioTracksFlyout'));
|
||||
$('.videoAudioPopup').popup('close');
|
||||
});
|
||||
|
||||
$('#video-subtitleFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoSubtitlePopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||
if (!$(this).hasClass('selectedMediaPopupOption')) {
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
self.setSubtitleStreamIndex(index);
|
||||
}
|
||||
|
||||
hideFlyout($('#video-subtitleFlyout'));
|
||||
$('.videoSubtitlePopup').popup('close');
|
||||
});
|
||||
|
||||
$('.video-qualityFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoQualityPopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||
if (!$(this).hasClass('selectedMediaPopupOption')) {
|
||||
|
||||
var maxWidth = parseInt(this.getAttribute('data-maxwidth'));
|
||||
var bitrate = parseInt(this.getAttribute('data-bitrate'));
|
||||
|
|
@ -329,14 +389,14 @@
|
|||
});
|
||||
}
|
||||
|
||||
hideFlyout($('.video-qualityFlyout'));
|
||||
$('.videoQualityPopup').popup('close');
|
||||
});
|
||||
|
||||
var trackChange = false;
|
||||
|
||||
var tooltip = $('<div id="slider-tooltip"></div>');
|
||||
|
||||
$("#videoControls .positionSliderContainer .slider").on("change", function (e) {
|
||||
$(".videoControls .positionSliderContainer .slider").on("change", function (e) {
|
||||
if (!trackChange) return;
|
||||
|
||||
var pct = $(this).val();
|
||||
|
|
@ -352,7 +412,7 @@
|
|||
}).on("slidestart", function (e) {
|
||||
trackChange = true;
|
||||
|
||||
var handle = $("#videoControls .positionSliderContainer .ui-slider-handle");
|
||||
var handle = $(".videoControls .positionSliderContainer .ui-slider-handle");
|
||||
|
||||
handle.after(tooltip);
|
||||
}).on("slidestop", function (e) {
|
||||
|
|
@ -361,32 +421,42 @@
|
|||
tooltip.remove();
|
||||
});
|
||||
|
||||
$('.video-qualityButton').on('click', function () {
|
||||
$('.videoSubtitleButton').on('click', function () {
|
||||
|
||||
self.showSubtitleMenu();
|
||||
});
|
||||
|
||||
$('.videoQualityButton').on('click', function () {
|
||||
|
||||
self.showQualityFlyout();
|
||||
});
|
||||
|
||||
$('.videoAudioButton').on('click', function () {
|
||||
|
||||
self.showAudioTracksFlyout();
|
||||
});
|
||||
|
||||
$('.videoChaptersButton').on('click', function () {
|
||||
|
||||
self.showChaptersFlyout();
|
||||
});
|
||||
});
|
||||
|
||||
function idleHandler() {
|
||||
|
||||
var video = $(".itemVideo");
|
||||
var videoControls = $("#videoControls");
|
||||
|
||||
if (timeout) {
|
||||
window.clearTimeout(timeout);
|
||||
}
|
||||
|
||||
if (idleState == true) {
|
||||
video.removeClass("cursor-inactive");
|
||||
videoControls.removeClass("inactive").addClass("active");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
}
|
||||
|
||||
idleState = false;
|
||||
|
||||
timeout = window.setTimeout(function () {
|
||||
idleState = true;
|
||||
video.addClass("cursor-inactive");
|
||||
videoControls.removeClass("active").addClass("inactive");
|
||||
$('.hiddenOnIdle').addClass("inactive");
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
|
|
@ -434,99 +504,76 @@
|
|||
|
||||
}
|
||||
|
||||
function toggleFlyout(flyout, button) {
|
||||
|
||||
$(document.body).off("mousedown.mediaflyout").on("mousedown.mediaflyout", function (e) {
|
||||
|
||||
var elem = $(e.target);
|
||||
|
||||
var flyoutId = flyout[0].id;
|
||||
var safeItems = button + ',#' + flyoutId;
|
||||
|
||||
if (!elem.is(safeItems) && !elem.parents(safeItems).length) {
|
||||
|
||||
hideFlyout(flyout);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var visible = $(flyout).is(":visible");
|
||||
|
||||
if (!visible) {
|
||||
|
||||
flyout.slideDown();
|
||||
|
||||
} else {
|
||||
|
||||
$(button).blur();
|
||||
|
||||
hideFlyout(flyout);
|
||||
}
|
||||
}
|
||||
|
||||
function hideFlyout(flyout) {
|
||||
|
||||
flyout.slideUp().empty();
|
||||
|
||||
$(document.body).off("mousedown.hidesearchhints");
|
||||
}
|
||||
|
||||
|
||||
function getChaptersFlyoutHtml() {
|
||||
|
||||
var html = '';
|
||||
|
||||
var item = self.currentItem;
|
||||
var currentTicks = self.getCurrentTicks();
|
||||
var chapters = item.Chapters || [];
|
||||
|
||||
var chapters = self.currentItem.Chapters || [];
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Scenes</li>';
|
||||
html += '</ul>';
|
||||
|
||||
for (var i = 0, length = chapters.length; i < length; i++) {
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
var chapter = chapters[i];
|
||||
var index = 0;
|
||||
|
||||
var isSelected = false;
|
||||
html += chapters.map(function (chapter) {
|
||||
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
var selected = false;
|
||||
|
||||
if (currentTicks >= chapter.StartPositionTicks) {
|
||||
|
||||
var nextChapter = chapters[i + 1];
|
||||
|
||||
isSelected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
|
||||
var nextChapter = chapters[index + 1];
|
||||
selected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
|
||||
}
|
||||
|
||||
if (isSelected) {
|
||||
html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
|
||||
} else {
|
||||
html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption">';
|
||||
}
|
||||
var optionHtml = '<li><a data-positionticks="' + chapter.StartPositionTicks + '" class="' + cssClass + '" href="#" style="padding-top:0;padding-bottom:0;">';
|
||||
|
||||
var imgUrl;
|
||||
var imgUrl = "css/images/media/chapterflyout.png";
|
||||
|
||||
if (chapter.ImageTag) {
|
||||
|
||||
imgUrl = ApiClient.getScaledImageUrl(self.currentItem.Id, {
|
||||
maxWidth: 100,
|
||||
optionHtml += '<img src="' + imgUrl + '" style="visibility:hidden;" />';
|
||||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
width: 160,
|
||||
tag: chapter.ImageTag,
|
||||
type: "Chapter",
|
||||
index: i
|
||||
index: index
|
||||
});
|
||||
optionHtml += '<div class="videoChapterPopupImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
|
||||
|
||||
} else {
|
||||
imgUrl = "css/images/media/chapterflyout.png";
|
||||
optionHtml += '<img src="' + imgUrl + '" />';
|
||||
}
|
||||
|
||||
html += '<img class="mediaFlyoutOptionImage" src="' + imgUrl + '" />';
|
||||
// TODO: Add some indicator if selected = true
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
optionHtml += '<p style="margin:12px 0 0;">';
|
||||
|
||||
var name = chapter.Name || "Chapter " + (i + 1);
|
||||
var textLines = [];
|
||||
textLines.push(chapter.Name);
|
||||
textLines.push(Dashboard.getDisplayTime(chapter.StartPositionTicks));
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName">' + name + '</div>';
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + Dashboard.getDisplayTime(chapter.StartPositionTicks) + '</div>';
|
||||
optionHtml += textLines.join('<br/>');
|
||||
|
||||
optionHtml += '</p>';
|
||||
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
index++;
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
@ -540,61 +587,73 @@
|
|||
var currentIndex = getParameterByName('AudioStreamIndex', self.currentMediaElement.currentSrc);
|
||||
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Audio Tracks</li>';
|
||||
html += '</ul>';
|
||||
|
||||
for (var i = 0, length = streams.length; i < length; i++) {
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
var stream = streams[i];
|
||||
html += streams.map(function (stream) {
|
||||
|
||||
if (stream.Index == currentIndex) {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
|
||||
} else {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
var selected = stream.Index == currentIndex;
|
||||
|
||||
if (selected) {
|
||||
cssClass += ' selectedMediaPopupOption';
|
||||
}
|
||||
|
||||
html += '<img class="mediaFlyoutOptionImage" src="css/images/media/audioflyout.png" />';
|
||||
var optionHtml = '<li><a data-index="' + stream.Index + '" class="' + cssClass + '" href="#">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
optionHtml += '<p style="margin:0;">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName">' + (stream.Language || 'Unknown language') + '</div>';
|
||||
if (selected) {
|
||||
optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
|
||||
}
|
||||
|
||||
var options = [];
|
||||
var textLines = [];
|
||||
textLines.push(stream.Language || 'Unknown language');
|
||||
|
||||
var attributes = [];
|
||||
|
||||
if (stream.Codec) {
|
||||
options.push(stream.Codec);
|
||||
attributes.push(stream.Codec);
|
||||
}
|
||||
if (stream.Profile) {
|
||||
options.push(stream.Profile);
|
||||
attributes.push(stream.Profile);
|
||||
}
|
||||
|
||||
if (stream.BitRate) {
|
||||
options.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
|
||||
attributes.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
|
||||
}
|
||||
|
||||
if (stream.Channels) {
|
||||
options.push(stream.Channels + ' ch');
|
||||
attributes.push(stream.Channels + ' ch');
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
}
|
||||
|
||||
options = [];
|
||||
|
||||
if (stream.IsDefault) {
|
||||
options.push('Default');
|
||||
}
|
||||
if (stream.IsForced) {
|
||||
options.push('Forced');
|
||||
attributes.push('(D)');
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
if (attributes.length) {
|
||||
textLines.push(attributes.join(' • '));
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
optionHtml += textLines.join('<br/>');
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
optionHtml += '</p>';
|
||||
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
@ -607,75 +666,80 @@
|
|||
|
||||
var currentIndex = self.currentSubtitleStreamIndex || -1;
|
||||
|
||||
var html = '';
|
||||
|
||||
streams.unshift({
|
||||
Index: -1,
|
||||
Language: "Off"
|
||||
});
|
||||
|
||||
for (var i = 0, length = streams.length; i < length; i++) {
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Subtitles</li>';
|
||||
html += '</ul>';
|
||||
|
||||
var stream = streams[i];
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
if (stream.Index == currentIndex) {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
|
||||
} else {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
|
||||
html += streams.map(function (stream) {
|
||||
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
var selected = stream.Index == currentIndex;
|
||||
|
||||
if (selected) {
|
||||
cssClass += ' selectedMediaPopupOption';
|
||||
}
|
||||
|
||||
if (stream.Index != -1) {
|
||||
html += '<img class="mediaFlyoutOptionImage" src="css/images/media/subtitleflyout.png" />';
|
||||
} else {
|
||||
html += '<div class="mediaFlyoutOptionImage"></div>';
|
||||
var optionHtml = '<li><a data-index="' + stream.Index + '" class="' + cssClass + '" href="#">';
|
||||
|
||||
optionHtml += '<p style="margin:0;">';
|
||||
|
||||
if (selected) {
|
||||
optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
|
||||
}
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
|
||||
var options = [];
|
||||
|
||||
if (stream.Language == "Off") {
|
||||
options.push(' ');
|
||||
}
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName">' + (stream.Language || 'Unknown language') + '</div>';
|
||||
var textLines = [];
|
||||
textLines.push(stream.Language || 'Unknown language');
|
||||
|
||||
if (stream.Codec) {
|
||||
options.push(stream.Codec);
|
||||
textLines.push(stream.Codec);
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
}
|
||||
|
||||
options = [];
|
||||
var attributes = [];
|
||||
|
||||
if (stream.IsDefault) {
|
||||
options.push('Default');
|
||||
attributes.push('Default');
|
||||
}
|
||||
if (stream.IsForced) {
|
||||
options.push('Forced');
|
||||
attributes.push('Forced');
|
||||
}
|
||||
if (stream.IsExternal) {
|
||||
options.push('External');
|
||||
attributes.push('External');
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
if (attributes.length) {
|
||||
textLines.push(attributes.join(' • '));
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
optionHtml += textLines.join('<br/>');
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
optionHtml += '</p>';
|
||||
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function getQualityFlyoutHtml() {
|
||||
|
||||
var html = '';
|
||||
|
||||
var currentSrc = self.currentMediaElement.currentSrc.toLowerCase();
|
||||
var isStatic = currentSrc.indexOf('static=true') != -1;
|
||||
|
||||
|
|
@ -689,27 +753,45 @@
|
|||
options[0].name = "Direct";
|
||||
}
|
||||
|
||||
for (var i = 0, length = options.length; i < length; i++) {
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Video Quality</li>';
|
||||
html += '</ul>';
|
||||
|
||||
var option = options[i];
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
var cssClass = "mediaFlyoutOption";
|
||||
html += options.map(function (option) {
|
||||
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
if (option.selected) {
|
||||
cssClass += " selectedMediaFlyoutOption";
|
||||
cssClass += ' selectedMediaPopupOption';
|
||||
}
|
||||
|
||||
html += '<div data-maxwidth="' + option.maxWidth + '" data-bitrate="' + option.bitrate + '" class="' + cssClass + '">';
|
||||
var optionHtml = '<li><a data-maxwidth="' + option.maxWidth + '" data-bitrate="' + option.bitrate + '" class="' + cssClass + '" href="#">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
optionHtml += '<p style="margin:0;">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName" style="padding:.5em;">' + option.name + '</div>';
|
||||
|
||||
html += "</div>";
|
||||
|
||||
html += "</div>";
|
||||
if (option.selected) {
|
||||
optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
|
||||
}
|
||||
|
||||
optionHtml += option.name;
|
||||
|
||||
optionHtml += '</p>';
|
||||
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
|
|
@ -805,7 +887,8 @@
|
|||
$('.itemVideo').on('mousemove.videoplayer keydown.videoplayer scroll.videoplayer', idleHandler).trigger('mousemove');
|
||||
|
||||
} else {
|
||||
$('#videoControls').removeClass("active inactive");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
|
||||
exitFullScreenToWindow();
|
||||
}
|
||||
|
||||
|
|
@ -897,7 +980,7 @@
|
|||
|
||||
self.startTimeTicksOffset = isStatic ? 0 : startPosition || 0;
|
||||
|
||||
var seekParam = isStatic && startPosition ? '#t=' + (startPosition / 10000000) : '';
|
||||
var seekParam = startPosition ? '#t=' + (startPosition / 10000000) : '';
|
||||
|
||||
var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
|
||||
Static: isStatic,
|
||||
|
|
@ -911,7 +994,9 @@
|
|||
|
||||
// None of the browsers seem to like this
|
||||
EnableAutoStreamCopy: false
|
||||
})) + seekParam;
|
||||
}));
|
||||
|
||||
if (isStatic) mp4VideoUrl += seekParam;
|
||||
|
||||
var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
||||
VideoCodec: 'vpx',
|
||||
|
|
@ -920,9 +1005,28 @@
|
|||
videoBitrate: webmQuality.videoBitrate,
|
||||
audioBitrate: webmQuality.audioBitrate,
|
||||
EnableAutoStreamCopy: false
|
||||
}));
|
||||
|
||||
if (isStatic) webmVideoUrl += seekParam;
|
||||
|
||||
var hlsVideoUrl;
|
||||
|
||||
if (item.RunTimeTicks) {
|
||||
hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/master.m3u8', $.extend({}, baseParams, {
|
||||
timeStampOffsetMs: 0,
|
||||
maxWidth: m3U8Quality.maxWidth,
|
||||
videoBitrate: m3U8Quality.videoBitrate,
|
||||
audioBitrate: m3U8Quality.audioBitrate,
|
||||
VideoCodec: m3U8Quality.videoCodec,
|
||||
AudioCodec: m3U8Quality.audioCodec,
|
||||
profile: 'baseline',
|
||||
level: '3',
|
||||
StartTimeTicks: 0
|
||||
|
||||
})) + seekParam;
|
||||
|
||||
var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
|
||||
} else {
|
||||
hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
|
||||
timeStampOffsetMs: 0,
|
||||
maxWidth: m3U8Quality.maxWidth,
|
||||
videoBitrate: m3U8Quality.videoBitrate,
|
||||
|
|
@ -932,25 +1036,19 @@
|
|||
profile: 'baseline',
|
||||
level: '3'
|
||||
})) + seekParam;
|
||||
}
|
||||
|
||||
//======================================================================================>
|
||||
|
||||
// Show loading animation
|
||||
$("html").css("cursor", "wait");
|
||||
|
||||
// Create video player
|
||||
var html = '';
|
||||
|
||||
var requiresControls = $.browser.msie || $.browser.android || ($.browser.webkit && !$.browser.chrome);
|
||||
var requiresNativeControls = $.browser.msie || $.browser.mobile;
|
||||
|
||||
// Can't autoplay in these browsers so we need to use the full controls
|
||||
if (requiresControls) {
|
||||
if ($.browser.msie) {
|
||||
if (requiresNativeControls) {
|
||||
html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay="autoplay" controls="controls">';
|
||||
} else {
|
||||
html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay controls>';
|
||||
}
|
||||
} else {
|
||||
|
||||
// Chrome 35 won't play with preload none
|
||||
html += '<video class="itemVideo" id="itemVideo" preload="metadata" autoplay>';
|
||||
|
|
@ -991,10 +1089,9 @@
|
|||
html += '</video>';
|
||||
|
||||
var mediaPlayerContainer = $("#mediaPlayer").show();
|
||||
var videoControls = $('#videoControls', mediaPlayerContainer);
|
||||
var videoControls = $('.videoControls', mediaPlayerContainer);
|
||||
|
||||
//show stop button
|
||||
$('#video-stopButton', videoControls).show();
|
||||
$('#video-playButton', videoControls).hide();
|
||||
$('#video-pauseButton', videoControls).show();
|
||||
$('#video-previousTrackButton', videoControls).hide();
|
||||
|
|
@ -1002,35 +1099,50 @@
|
|||
|
||||
var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html);
|
||||
|
||||
$('.video-qualityButton', videoControls).show();
|
||||
$('.videoQualityButton', videoControls).show();
|
||||
|
||||
if (mediaStreams.filter(function (s) {
|
||||
return s.Type == "Audio";
|
||||
}).length) {
|
||||
$('#video-audioTracksButton', videoControls).show();
|
||||
$('.videoAudioButton').show();
|
||||
} else {
|
||||
$('#video-audioTracksButton', videoControls).hide();
|
||||
$('.videoAudioButton').hide();
|
||||
}
|
||||
|
||||
if (subtitleStreams.length) {
|
||||
$('#video-subtitleButton', videoControls).show().prop("disabled", false);
|
||||
$('.videoSubtitleButton').show();
|
||||
} else {
|
||||
$('#video-subtitleButton', videoControls).hide().prop("disabled", true);
|
||||
;
|
||||
$('.videoSubtitleButton').hide();
|
||||
}
|
||||
|
||||
if (item.Chapters && item.Chapters.length) {
|
||||
$('#video-chaptersButton', videoControls).show();
|
||||
$('.videoChaptersButton').show();
|
||||
} else {
|
||||
$('#video-chaptersButton', videoControls).hide();
|
||||
$('.videoChaptersButton').hide();
|
||||
}
|
||||
|
||||
if (requiresControls) {
|
||||
if (requiresNativeControls) {
|
||||
$('#video-fullscreenButton', videoControls).hide();
|
||||
} else {
|
||||
$('#video-fullscreenButton', videoControls).show();
|
||||
}
|
||||
|
||||
if ($.browser.mobile) {
|
||||
$('.volumeSliderContainer', videoControls).addClass('hide');
|
||||
$('.muteButton', videoControls).addClass('hide');
|
||||
$('.unmuteButton', videoControls).addClass('hide');
|
||||
} else {
|
||||
$('.volumeSliderContainer', videoControls).removeClass('hide');
|
||||
$('.muteButton', videoControls).removeClass('hide');
|
||||
$('.unmuteButton', videoControls).removeClass('hide');
|
||||
}
|
||||
|
||||
if (requiresNativeControls) {
|
||||
videoControls.addClass('hide');
|
||||
} else {
|
||||
videoControls.removeClass('hide');
|
||||
}
|
||||
|
||||
var video = $("video", videoElement);
|
||||
|
||||
initialVolume = self.getSavedVolume();
|
||||
|
|
@ -1089,7 +1201,6 @@
|
|||
|
||||
self.clearPauseStop();
|
||||
|
||||
$("html").css("cursor", "default");
|
||||
self.resetEnhancements();
|
||||
|
||||
var errorCode = this.error ? this.error.code : '';
|
||||
|
|
@ -1118,22 +1229,6 @@
|
|||
|
||||
self.toggleFullscreen();
|
||||
|
||||
}).on("seeking.mediaplayerevent", function (e) {
|
||||
|
||||
$("html").css("cursor", "wait");
|
||||
|
||||
}).on("seeked.mediaplayerevent", function (e) {
|
||||
|
||||
$("html").css("cursor", "default");
|
||||
|
||||
}).on("loadstart.mediaplayerevent", function () {
|
||||
|
||||
$("html").css("cursor", "progress");
|
||||
|
||||
}).on("canplay.mediaplayerevent", function () {
|
||||
|
||||
$("html").css("cursor", "default");
|
||||
|
||||
}).on("ended.playbackstopped", function () {
|
||||
|
||||
currentTimeElement.empty();
|
||||
|
|
@ -1152,6 +1247,8 @@
|
|||
|
||||
self.currentSubtitleStreamIndex = mediaSource.DefaultSubtitleStreamIndex;
|
||||
|
||||
$('body').addClass('bodyWithPopupOpen');
|
||||
|
||||
return video[0];
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -504,67 +504,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
self.updateNowPlayingInfo = function (item) {
|
||||
|
||||
if (!item) {
|
||||
throw new Error('item cannot be null');
|
||||
}
|
||||
|
||||
var mediaControls = $("#videoControls");
|
||||
|
||||
var state = self.getPlayerStateInternal(self.currentMediaElement, item, self.currentMediaSource);
|
||||
|
||||
var url = "";
|
||||
|
||||
if (state.NowPlayingItem.PrimaryImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
height: 40,
|
||||
tag: state.NowPlayingItem.PrimaryImageTag
|
||||
});
|
||||
}
|
||||
else if (state.NowPlayingItem.BackdropImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.BackdropItemId, {
|
||||
type: "Backdrop",
|
||||
height: 40,
|
||||
tag: state.NowPlayingItem.BackdropImageTag,
|
||||
index: 0
|
||||
});
|
||||
|
||||
} else if (state.NowPlayingItem.ThumbImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.ThumbImageItemId, {
|
||||
type: "Thumb",
|
||||
height: 40,
|
||||
tag: state.NowPlayingItem.ThumbImageTag
|
||||
});
|
||||
}
|
||||
|
||||
else if (item.Type == "TvChannel" || item.Type == "Recording") {
|
||||
url = "css/images/items/detail/tv.png";
|
||||
}
|
||||
else if (item.MediaType == "Audio") {
|
||||
url = "css/images/items/detail/audio.png";
|
||||
}
|
||||
else {
|
||||
url = "css/images/items/detail/video.png";
|
||||
}
|
||||
|
||||
var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
|
||||
var nameHtml = self.getNowPlayingNameHtml(state);
|
||||
|
||||
if (nameHtml.indexOf('<br/>') != -1) {
|
||||
nowPlayingTextElement.addClass('nowPlayingDoubleText');
|
||||
} else {
|
||||
nowPlayingTextElement.removeClass('nowPlayingDoubleText');
|
||||
}
|
||||
|
||||
$('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
|
||||
nowPlayingTextElement.html(nameHtml);
|
||||
};
|
||||
|
||||
self.getNowPlayingNameHtml = function (playerState) {
|
||||
|
||||
var nowPlayingItem = playerState.NowPlayingItem;
|
||||
|
|
@ -1044,7 +983,12 @@
|
|||
|
||||
var imageTags = item.ImageTags || {};
|
||||
|
||||
if (imageTags.Primary) {
|
||||
if (item.SeriesPrimaryImageTag) {
|
||||
|
||||
nowPlayingItem.PrimaryImageItemId = item.SeriesId;
|
||||
nowPlayingItem.PrimaryImageTag = item.SeriesPrimaryImageTag;
|
||||
}
|
||||
else if (imageTags.Primary) {
|
||||
|
||||
nowPlayingItem.PrimaryImageItemId = item.Id;
|
||||
nowPlayingItem.PrimaryImageTag = imageTags.Primary;
|
||||
|
|
@ -1071,6 +1015,17 @@
|
|||
nowPlayingItem.ThumbItemId = item.Id;
|
||||
nowPlayingItem.ThumbImageTag = imageTags.Thumb;
|
||||
}
|
||||
|
||||
if (imageTags.Logo) {
|
||||
|
||||
nowPlayingItem.LogoItemId = item.Id;
|
||||
nowPlayingItem.LogoImageTag = imageTags.Logo;
|
||||
}
|
||||
else if (item.ParentLogoImageTag) {
|
||||
|
||||
nowPlayingItem.LogoItemId = item.ParentLogoItemId;
|
||||
nowPlayingItem.LogoImageTag = item.ParentLogoImageTag;
|
||||
}
|
||||
}
|
||||
|
||||
return state;
|
||||
|
|
@ -1106,6 +1061,8 @@
|
|||
|
||||
self.onPlaybackStopped = function () {
|
||||
|
||||
$('body').removeClass('bodyWithPopupOpen');
|
||||
|
||||
self.clearPauseStop();
|
||||
|
||||
var playerElement = this;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ var Dashboard = {
|
|||
//$.mobile.listview.prototype.options.dividerTheme = "b";
|
||||
|
||||
//$.mobile.popup.prototype.options.theme = "c";
|
||||
//$.mobile.popup.prototype.options.transition = "none";
|
||||
$.mobile.popup.prototype.options.transition = "fade";
|
||||
$.mobile.defaultPageTransition = "none";
|
||||
//$.mobile.collapsible.prototype.options.contentTheme = "a";
|
||||
},
|
||||
|
|
@ -364,7 +364,7 @@ var Dashboard = {
|
|||
|
||||
$('.confirmFlyout').popup("close").remove();
|
||||
|
||||
var html = '<div data-role="popup" data-transition="slidefade" class="confirmFlyout" style="max-width:500px;" data-theme="a">';
|
||||
var html = '<div data-role="popup" class="confirmFlyout" style="max-width:500px;" data-theme="a">';
|
||||
|
||||
html += '<div class="ui-bar-a" style="text-align:center;">';
|
||||
html += '<h3>' + title + '</h3>';
|
||||
|
|
@ -1211,34 +1211,53 @@ $(function () {
|
|||
|
||||
var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
|
||||
|
||||
videoPlayerHtml += '<div id="videoBackdrop">';
|
||||
videoPlayerHtml += '<div class="videoBackdrop">';
|
||||
videoPlayerHtml += '<div id="videoPlayer">';
|
||||
videoPlayerHtml += '<div id="videoElement">';
|
||||
|
||||
videoPlayerHtml += '<div id="videoElement">';
|
||||
videoPlayerHtml += '<div id="play" class="status"></div>';
|
||||
videoPlayerHtml += '<div id="pause" class="status"></div>';
|
||||
|
||||
videoPlayerHtml += '</div>';
|
||||
|
||||
videoPlayerHtml += '<div class="videoTopControls hiddenOnIdle">';
|
||||
videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
|
||||
videoPlayerHtml += '<div class="videoAdvancedControls">';
|
||||
|
||||
videoPlayerHtml += '<button class="imageButton mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="imageButton mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton videoQualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="delete" data-iconpos="notext" data-inline="true">Stop</button>';
|
||||
|
||||
videoPlayerHtml += '</div>'; // videoAdvancedControls
|
||||
videoPlayerHtml += '</div>'; // videoTopControls
|
||||
|
||||
// Create controls
|
||||
videoPlayerHtml += '<div id="videoControls" class="videoControls">';
|
||||
videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
|
||||
|
||||
videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
|
||||
videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
|
||||
videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
|
||||
videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
|
||||
|
||||
videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">';
|
||||
videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
|
||||
videoPlayerHtml += '</div>';
|
||||
|
||||
videoPlayerHtml += '<div id="video-basic-controls">';
|
||||
|
||||
videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
|
||||
videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
|
||||
videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
|
||||
|
||||
videoPlayerHtml += '<button id="video-stopButton" class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="stop" data-iconpos="notext" data-inline="true">Stop</button>';
|
||||
videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
|
||||
|
||||
videoPlayerHtml += '<div class="currentTime"></div>';
|
||||
|
||||
videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
|
||||
videoPlayerHtml += '<div class="nowPlayingImage"></div>';
|
||||
videoPlayerHtml += '<div class="nowPlayingText"></div>';
|
||||
videoPlayerHtml += '</div>'; // nowPlayingInfo
|
||||
|
||||
videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">Mute</button>';
|
||||
videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">Unmute</button>';
|
||||
|
|
@ -1247,26 +1266,8 @@ $(function () {
|
|||
videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
|
||||
videoPlayerHtml += '</div>';
|
||||
|
||||
videoPlayerHtml += '</div>'; // video-basic-controls
|
||||
videoPlayerHtml += '<div id="video-advanced-controls">';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton video-qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
||||
//videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-transition="flip"></div>';
|
||||
videoPlayerHtml += '<div style="display:none;" id="video-qualityFlyout" class="video-qualityFlyout mediaPlayerFlyout"></div>';
|
||||
|
||||
videoPlayerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="video-audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
|
||||
videoPlayerHtml += '<div id="video-audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout audioTracksFlyout"></div>';
|
||||
|
||||
videoPlayerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="video-subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
|
||||
videoPlayerHtml += '<div id="video-subtitleFlyout" style="display:none;" class="mediaPlayerFlyout subtitleFlyout"></div>';
|
||||
|
||||
videoPlayerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="video-chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
|
||||
videoPlayerHtml += '<div id="video-chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div>';
|
||||
|
||||
videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="expand" data-iconpos="notext" data-inline="true">Fullscreen</button>';
|
||||
|
||||
videoPlayerHtml += '</div>'; // video-advanced-controls
|
||||
|
||||
videoPlayerHtml += '</div>'; // videoControls
|
||||
|
||||
videoPlayerHtml += '</div>'; // videoPlayer
|
||||
|
|
@ -1299,6 +1300,22 @@ $(function () {
|
|||
});
|
||||
});
|
||||
|
||||
$.fn.openPopup = function () {
|
||||
|
||||
this.one('popupbeforeposition', function () {
|
||||
|
||||
//$("body").on("touchmove.popup", false);
|
||||
//$('body').addClass('bodyWithPopupOpen');
|
||||
|
||||
}).one('popupafterclose', function () {
|
||||
//$("body").off("touchmove.popup");
|
||||
|
||||
//$('body').removeClass('bodyWithPopupOpen');
|
||||
});
|
||||
|
||||
return this.popup('open');
|
||||
};
|
||||
|
||||
Dashboard.jQueryMobileInit();
|
||||
|
||||
$(document).on('pagebeforeshow', ".page", function () {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</div>
|
||||
<p><a href="https://github.com/MediaBrowser/MediaBrowser/wiki/Library-Structure" target="_blank">${ReferToMediaLibraryWiki}</a></p>
|
||||
|
||||
<div data-role="popup" data-transition="slidefade" id="popupEnterText" class="popup">
|
||||
<div data-role="popup" id="popupEnterText" class="popup">
|
||||
|
||||
<div class="ui-corner-top ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3></h3>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue