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

update video player layout

Browse source
This commit is contained in:
Luke Pulverenti 2014-06-28 15:35:30 -04:00
parent ae50805ba4
commit eab5e1812e
20 changed files with 593 additions and 772 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard-ui/autoorganizelog.html
View file

@ -47,7 +47,7 @@
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderEpisodeOrganization}</h3> <h3>${HeaderEpisodeOrganization}</h3>

105
dashboard-ui/css/contextmenu.css
View file

@ -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;
}

BIN
dashboard-ui/css/images/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 135 KiB

Before After
Before After

384
dashboard-ui/css/mediaplayer-video.css
View file

@ -1,9 +1,6 @@
#mediaPlayer .mediaPlayerFlyout { .videoBackdrop {
bottom: 64px; /* Allows popups to be closed, because their z-index is 1099 */
} z-index: 1098;
#videoBackdrop {
z-index: 99990;
position: fixed; position: fixed;
background-color: transparent; background-color: transparent;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
@ -16,60 +13,49 @@
#videoPlayer { #videoPlayer {
z-index: 99997; z-index: 99997;
position: fixed; position: fixed;
top: 50%; top: 0;
left: 50%; left: 0;
margin-left: -170px; right: 0;
margin-top: -115px; bottom: 0;
background-color: #222;
} }
.itemVideo { .itemVideo {
background-color: #000; background-color: #000;
margin: 0 0 70px; width: 100%;
width: 320px; height: auto;
height: 181px;
} }
#videoControls { .videoControls {
z-index: 99999; padding: 0 .5em;
padding: 0 5px 0; background-color: rgba(0, 0, 0, .8);
height: 75px; position: fixed;
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0; left: 0;
background-color: #222; bottom: 0;
right: 0;
z-index: 99998;
text-align: center;
} }
#videoControls .positionSliderContainer .ui-slider-track { .videoTopControls {
margin: 0 !important; padding: .7em 1em;
} background-color: rgba(0, 0, 0, .5);
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 99998;
}
#videoControls .positionSliderContainer { .videoAdvancedControls {
display: block; text-align: right;
width: 100%; vertical-align: top;
margin-top: 0px; float: right;
} }
#videoControls #video-basic-controls { .videoControls .currentTime {
position: absolute; margin-top: 25px;
top: 25px; }
left: 10px;
width: 600px;
display: inline-block;
}
#videoControls #video-advanced-controls {
position: absolute;
top: 25px;
right: 10px;
width: 400px;
display: inline-block;
}
#videoControls .currentTime {
margin-top: 25px;
}
#slider-tooltip { #slider-tooltip {
z-index: 99999; z-index: 99999;
@ -83,11 +69,46 @@
padding: 5px; 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 /* Fullscreen
***************************************/ ***************************************/
#videoPlayer.fullscreenVideo, #videoPlayer,
#videoPlayer.fullscreenVideo .itemVideo { #videoPlayer .itemVideo {
position: fixed !important; position: fixed !important;
top: 0 !important; top: 0 !important;
bottom: 0 !important; bottom: 0 !important;
@ -106,174 +127,45 @@
height: 2px!important; 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 { #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; display: none!important;
} }
#mediaPlayer #video-advanced-controls { #mediaPlayer .sliderContainer {
text-align: right;
}
#mediaPlayer #videoControls .mediaPlayerFlyout {
text-align: left;
margin-left: 0;
right: 0;
bottom: 70px;
}
#mediaPlayer .volumeSliderContainer {
position: relative; position: relative;
top: 5px; 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) { @media all and (max-width: 1200px), all and (max-height: 720px) {
#videoControls .currentTime { .videoControls .currentTime {
margin-right: 0; margin-right: 0;
min-width: 120px; min-width: 120px;
} }
#videoControls #video-advanced-controls { .videoControls .nowPlayingText {
width: 350px;
}
#videoControls .nowPlayingText {
max-width: 160px; max-width: 160px;
} }
} }
@media all and (max-width: 960px), all and (max-height: 550px) { @media all and (max-width: 960px), all and (max-height: 550px) {
#videoControls #video-advanced-controls { .videoControls .nowPlayingText {
width: 275px;
}
#videoControls .nowPlayingText {
max-width: 90px; max-width: 90px;
} }
} }
@media all and (max-width: 800px), all and (max-height: 460px) { @media all and (max-width: 800px), all and (max-height: 460px) {
#mediaPlayer #videoPlayer {
margin-top: -180px;
}
#mediaPlayer .itemVideo { #mediaPlayer .sliderContainer {
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 {
margin-top: 8px; margin-top: 8px;
} }
} }
@media all and (max-width: 640px), all and (max-height: 365px) { @media all and (max-width: 1000px), all and (max-height: 460px) {
#mediaPlayer #videoPlayer {
margin-top: -135px;
}
#mediaPlayer #video-advanced-controls { #mediaPlayer .nowPlayingImage, #mediaPlayer .nowPlayingText {
width: 150px; display: none;
} }
} }
@ -281,6 +173,23 @@
#mediaPlayer .previousTrackButton, #mediaPlayer .nextTrackButton { #mediaPlayer .previousTrackButton, #mediaPlayer .nextTrackButton {
display: none!important; 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 { .videoPlayerPopupContent {
cursor: none;
}
.mediaFlyoutContainer {
display: inline-block;
}
.mediaPlayerFlyout {
width: 200px; width: 200px;
color: #000; }
background-color: #fff;
border: 1px solid #999; .videoChaptersPopup .videoPlayerPopupContent {
width: 300px;
}
.videoChapterPopupImage {
position: absolute; position: absolute;
z-index: 99999; top: 0;
bottom: 78px; left: 0;
margin-left: -125px; width: 80px;
max-height: 300px; height: 80px;
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);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right top; background-size: cover;
background-size: 16px 16px; background-position: center center;
} }
.mediaFlyoutOptionImage { .videoPlayerPopupScroller {
display: inline-block; overflow-y: auto;
width: 15%; overflow-x: hidden;
vertical-align: middle; max-height: 180px;
} }
.mediaFlyoutOptionImage + .mediaFlyoutOptionContent { @media all and (min-height: 500px) {
vertical-align: top; .videoPlayerPopupScroller {
display: inline-block; max-height: 300px;
width: 85%;
} }
.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;
} }

7
dashboard-ui/css/mediaplayer.css
View file

@ -151,13 +151,6 @@ input[type="range"]::-ms-fill-upper {
} }
} }
/*@media all and (min-width: 800px) {
.nowPlayingBar {
text-align: center;
}
}*/
@media (min-width: 1440px) { @media (min-width: 1440px) {
#nowPlayingBar .positionSliderContainer { #nowPlayingBar .positionSliderContainer {
width: 300px; width: 300px;

9
dashboard-ui/css/site.css
View file

@ -64,6 +64,10 @@ body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: 'Open Sans', Arial, Helvetica, sans-serif;
} }
.bodyWithPopupOpen {
overflow-y: hidden !important;
}
.textlink { .textlink {
text-decoration: none; text-decoration: none;
} }
@ -170,7 +174,6 @@ pre, textarea.pre {
margin-left: 5px; margin-left: 5px;
} }
.ui-popup-container { .ui-popup-container {
z-index: 99999; z-index: 99999;
} }
@ -681,7 +684,9 @@ h1 .imageLink {
bottom: -2px; bottom: -2px;
left: -2px; left: -2px;
right: -2px; right: -2px;
z-index: 99997;
/* Above everything, except for the video player and popup overlays */
z-index: 1097;
color: #fff; color: #fff;
border: 0 !important; border: 0 !important;
} }

10
dashboard-ui/dlnaprofile.html
View file

@ -305,7 +305,7 @@
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderDirectPlayProfile}</h3> <h3>${HeaderDirectPlayProfile}</h3>
@ -353,7 +353,7 @@
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderTranscodingProfile}</h3> <h3>${HeaderTranscodingProfile}</h3>
@ -431,7 +431,7 @@
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderContainerProfile}</h3> <h3>${HeaderContainerProfile}</h3>
@ -481,7 +481,7 @@
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderCodecProfile}</h3> <h3>${HeaderCodecProfile}</h3>
@ -519,7 +519,7 @@
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderResponseProfile}</h3> <h3>${HeaderResponseProfile}</h3>

2
dashboard-ui/editcollectionitems.html
View file

@ -35,7 +35,7 @@
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderAddTitles} <h3>${HeaderAddTitles}

4
dashboard-ui/edititemimages.html
View file

@ -26,10 +26,10 @@
<div style="margin: -25px 0 1em;"> <div style="margin: -25px 0 1em;">
<div style="display: inline-block;"> <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>
<div style="display: inline-block;"> <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>
</div> </div>

6
dashboard-ui/edititemmetadata.html
View file

@ -379,7 +379,7 @@
</form> </form>
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>Confirm Deletion</h3> <h3>Confirm Deletion</h3>
@ -409,7 +409,7 @@
</div> </div>
</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> <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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
@ -456,7 +456,7 @@
</div> </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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3 style="margin: .5em;">Person Info</h3> <h3 style="margin: .5em;">Person Info</h3>

2
dashboard-ui/library.html
View file

@ -32,7 +32,7 @@
</div> </div>
</div> </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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3></h3> <h3></h3>

2
dashboard-ui/scripts/directorybrowser.js
View file

@ -93,7 +93,7 @@
options.header = options.header || Globalize.translate('HeaderSelectMediaPath'); options.header = options.header || Globalize.translate('HeaderSelectMediaPath');
options.instruction = options.instruction || ""; 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 += '<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">';
html += '<h3>' + options.header + '</h3>'; html += '<h3>' + options.header + '</h3>';

23
dashboard-ui/scripts/itembynamedetailpage.js
View file

@ -5,6 +5,12 @@
function getPromise() { function getPromise() {
var id = getParameterByName('id');
if (id) {
return ApiClient.getItem(Dashboard.getCurrentUserId(), id);
}
var name = getParameterByName('person'); var name = getParameterByName('person');
if (name) { if (name) {
@ -64,7 +70,7 @@
currentItem = item; currentItem = item;
renderHeader(page, item); renderHeader(page, item, context);
var name = item.Name; var name = item.Name;
@ -72,8 +78,8 @@
$('.itemName', page).html(name); $('.itemName', page).html(name);
renderDetails(page, item); renderDetails(page, item, context);
renderTabs(page, item); renderTabs(page, item, context);
$(page).trigger('displayingitem', [{ $(page).trigger('displayingitem', [{
@ -105,9 +111,7 @@
}); });
} }
function renderHeader(page, item) { function renderHeader(page, item, context) {
var context = getParameterByName('context');
$('.itemTabs', page).hide(); $('.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">'; var html = '<fieldset data-role="controlgroup" data-type="horizontal" class="libraryTabs">';
@ -209,7 +213,6 @@
bindRadioEvents(page); bindRadioEvents(page);
var context = getParameterByName('context');
var selectedRadio = null; var selectedRadio = null;
if (context) { if (context) {
@ -316,7 +319,7 @@
}); });
} }
function renderDetails(page, item) { function renderDetails(page, item, context) {
LibraryBrowser.renderDetailPageBackdrop(page, item); LibraryBrowser.renderDetailPageBackdrop(page, item);
LibraryBrowser.renderOverview($('.itemOverview', page), item); LibraryBrowser.renderOverview($('.itemOverview', page), item);
@ -324,7 +327,7 @@
renderUserDataIcons(page, item); renderUserDataIcons(page, item);
LibraryBrowser.renderLinks($('#itemLinks', 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) { if (item.Type == "Person" && item.PremiereDate) {

2
dashboard-ui/scripts/itemdetailpage.js
View file

@ -1352,7 +1352,7 @@
var cast = casts[i]; 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; var imgUrl;

35
dashboard-ui/scripts/librarybrowser.js
View file

@ -219,8 +219,7 @@
html += '<tr>'; html += '<tr>';
html += '<td class="detailTableButtonsCell">'; 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="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 += '<button class="btnQueue" data-icon="plus" type="button" data-iconpos="notext" onclick="MediaController.queue(\'' + item.Id + '\');" data-inline="true" title="Queue">Queue</button>';
html += '</td>'; html += '</td>';
html += '<td class="desktopColumn">' + (item.ParentIndexNumber || "") + '</td>'; html += '<td class="desktopColumn">' + (item.ParentIndexNumber || "") + '</td>';
@ -301,21 +300,13 @@
$('.playFlyout').popup("close").remove(); $('.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 += '<ul data-role="listview" style="min-width: 180px;">';
html += '<li data-role="list-divider">Play Menu</li>'; html += '<li data-role="list-divider">Play Menu</li>';
html += '<li><a href="#" onclick="MediaController.play(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></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) { if (resumePositionTicks) {
html += '<li><a href="#" onclick="MediaController.play({ids:[\'' + itemId + '\'],startPositionTicks:' + resumePositionTicks + '});LibraryBrowser.closePlayMenu();">Resume</a></li>'; 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>'; 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 += '</ul>';
html += '</div>'; html += '</div>';
@ -432,26 +431,26 @@
return "itemdetails.html?id=" + id; return "itemdetails.html?id=" + id;
} }
if (item.Type == "Genre") { if (item.Type == "Genre") {
return "itembynamedetails.html?genre=" + ApiClient.encodeName(item.Name); return "itembynamedetails.html?id=" + id;
} }
if (item.Type == "MusicGenre") { if (item.Type == "MusicGenre") {
return "itembynamedetails.html?musicgenre=" + ApiClient.encodeName(item.Name); return "itembynamedetails.html?id=" + id;
} }
if (item.Type == "GameGenre") { if (item.Type == "GameGenre") {
return "itembynamedetails.html?gamegenre=" + ApiClient.encodeName(item.Name); return "itembynamedetails.html?id=" + id;
} }
if (item.Type == "Studio") { if (item.Type == "Studio") {
return "itembynamedetails.html?studio=" + ApiClient.encodeName(item.Name); return "itembynamedetails.html?id=" + id;
} }
if (item.Type == "Person") { if (item.Type == "Person") {
return "itembynamedetails.html?person=" + ApiClient.encodeName(item.Name); return "itembynamedetails.html?id=" + id;
} }
if (item.Type == "Recording") { if (item.Type == "Recording") {
return "livetvrecording.html?id=" + id; return "livetvrecording.html?id=" + id;
} }
if (item.Type == "MusicArtist") { if (item.Type == "MusicArtist") {
return "itembynamedetails.html?musicartist=" + ApiClient.encodeName(item.Name); return "itembynamedetails.html?id=" + id;
} }
if (item.IsFolder) { if (item.IsFolder) {
@ -1993,7 +1992,7 @@
if (typeof (index) == "undefined") index = 0; if (typeof (index) == "undefined") index = 0;
html += '<div class="galleryImageContainer">'; 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, { html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
maxWidth: screenWidth, maxWidth: screenWidth,

5
dashboard-ui/scripts/librarylist.js
View file

@ -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>'; 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++; 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') { if (item.LocalTrailerCount && item.PlayAccess == 'Full') {

601
dashboard-ui/scripts/mediaplayer-video.js
View file

@ -29,14 +29,12 @@
self.remoteFullscreen = function () { self.remoteFullscreen = function () {
var videoControls = $("#videoControls");
if (remoteFullscreen) { if (remoteFullscreen) {
exitFullScreenToWindow(); exitFullScreenToWindow();
videoControls.removeClass("inactive"); $('.hiddenOnIdle').removeClass("inactive");
} else { } else {
enterFullScreen(); enterFullScreen();
videoControls.addClass("inactive"); $('.hiddenOnIdle').addClass("inactive");
} }
remoteFullscreen = !remoteFullscreen; remoteFullscreen = !remoteFullscreen;
@ -65,9 +63,8 @@
self.resetEnhancements = function () { self.resetEnhancements = function () {
$("#mediaPlayer").hide(); $("#mediaPlayer").hide();
$('#videoPlayer').removeClass('fullscreenVideo'); $('#videoPlayer').removeClass('fullscreenVideo');
$("#videoControls").removeClass("inactive"); $('.hiddenOnIdle').removeClass("inactive");
$("video").remove(); $("video").remove();
$("html").css("cursor", "default");
}; };
self.exitFullScreen = function () { self.exitFullScreen = function () {
@ -90,53 +87,38 @@
self.showSubtitleMenu = function () { self.showSubtitleMenu = function () {
var flyout = $('#video-subtitleFlyout'); var elem = $('.videoSubtitlePopup').html(getSubtitleTracksHtml())
.trigger('create')
.popup("option", "positionTo", $('.videoSubtitleButton'));
if (!flyout.is(':visible')) { elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
flyout.html(getSubtitleTracksHtml()).trigger('create').scrollTop(0);
toggleFlyout(flyout, '#video-subtitleButton');
} else {
toggleFlyout(flyout, '#video-subtitleButton');
}
}; };
self.showQualityFlyout = function () { self.showQualityFlyout = function () {
var flyout = $('.video-qualityFlyout'); var elem = $('.videoQualityPopup').html(getQualityFlyoutHtml())
.trigger('create')
.popup("option", "positionTo", $('.videoQualityButton'));
if (!flyout.is(':visible')) { elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
flyout.html(getQualityFlyoutHtml()).scrollTop(0);
}
toggleFlyout(flyout, '.video-qualityButton');
//$('.videoQualityPopup').html(getQualityFlyoutHtml()).trigger('create').popup('open');
}; };
self.showChaptersFlyout = function () { self.showChaptersFlyout = function () {
var flyout = $('#video-chaptersFlyout'); var elem = $('.videoChaptersPopup').html(getChaptersFlyoutHtml())
.trigger('create')
.popup("option", "positionTo", $('.videoChaptersButton'));
if (!flyout.is(':visible')) { elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
flyout.html(getChaptersFlyoutHtml()).scrollTop(0);
}
toggleFlyout(flyout, '#video-chaptersButton');
}; };
self.showAudioTracksFlyout = function () { self.showAudioTracksFlyout = function () {
var flyout = $('#video-audioTracksFlyout'); var elem = $('.videoAudioPopup').html(getAudioTracksHtml())
.trigger('create')
.popup("option", "positionTo", $('.videoAudioButton'));
if (!flyout.is(':visible')) { elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
flyout.html(getAudioTracksHtml()).trigger('create').scrollTop(0);
toggleFlyout(flyout, '#video-audioTracksButton');
} else {
toggleFlyout(flyout, '#video-audioTracksButton');
}
}; };
self.setAudioStreamIndex = function (index) { 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() { function onPositionSliderChange() {
isPositionSliderActive = false; isPositionSliderActive = false;
@ -282,40 +342,40 @@
self.setVolume(vol * 100); self.setVolume(vol * 100);
}); });
$('#video-chaptersFlyout').on('click', '.mediaFlyoutOption', function () { $('.videoChaptersPopup').on('click', '.mediaPopupOption', function () {
var ticks = parseInt(this.getAttribute('data-positionticks')); var ticks = parseInt(this.getAttribute('data-positionticks'));
self.changeStream(ticks); 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')); var index = parseInt(this.getAttribute('data-index'));
self.setAudioStreamIndex(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')); var index = parseInt(this.getAttribute('data-index'));
self.setSubtitleStreamIndex(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 maxWidth = parseInt(this.getAttribute('data-maxwidth'));
var bitrate = parseInt(this.getAttribute('data-bitrate')); var bitrate = parseInt(this.getAttribute('data-bitrate'));
@ -329,14 +389,14 @@
}); });
} }
hideFlyout($('.video-qualityFlyout')); $('.videoQualityPopup').popup('close');
}); });
var trackChange = false; var trackChange = false;
var tooltip = $('<div id="slider-tooltip"></div>'); var tooltip = $('<div id="slider-tooltip"></div>');
$("#videoControls .positionSliderContainer .slider").on("change", function (e) { $(".videoControls .positionSliderContainer .slider").on("change", function (e) {
if (!trackChange) return; if (!trackChange) return;
var pct = $(this).val(); var pct = $(this).val();
@ -352,7 +412,7 @@
}).on("slidestart", function (e) { }).on("slidestart", function (e) {
trackChange = true; trackChange = true;
var handle = $("#videoControls .positionSliderContainer .ui-slider-handle"); var handle = $(".videoControls .positionSliderContainer .ui-slider-handle");
handle.after(tooltip); handle.after(tooltip);
}).on("slidestop", function (e) { }).on("slidestop", function (e) {
@ -361,32 +421,42 @@
tooltip.remove(); tooltip.remove();
}); });
$('.video-qualityButton').on('click', function () { $('.videoSubtitleButton').on('click', function () {
self.showSubtitleMenu();
});
$('.videoQualityButton').on('click', function () {
self.showQualityFlyout(); self.showQualityFlyout();
}); });
$('.videoAudioButton').on('click', function () {
self.showAudioTracksFlyout();
});
$('.videoChaptersButton').on('click', function () {
self.showChaptersFlyout();
});
}); });
function idleHandler() { function idleHandler() {
var video = $(".itemVideo");
var videoControls = $("#videoControls");
if (timeout) { if (timeout) {
window.clearTimeout(timeout); window.clearTimeout(timeout);
} }
if (idleState == true) { if (idleState == true) {
video.removeClass("cursor-inactive"); $('.hiddenOnIdle').removeClass("inactive");
videoControls.removeClass("inactive").addClass("active");
} }
idleState = false; idleState = false;
timeout = window.setTimeout(function () { timeout = window.setTimeout(function () {
idleState = true; idleState = true;
video.addClass("cursor-inactive"); $('.hiddenOnIdle').addClass("inactive");
videoControls.removeClass("active").addClass("inactive");
}, 4000); }, 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() { function getChaptersFlyoutHtml() {
var html = ''; var item = self.currentItem;
var currentTicks = self.getCurrentTicks(); 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) { if (currentTicks >= chapter.StartPositionTicks) {
var nextChapter = chapters[index + 1];
var nextChapter = chapters[i + 1]; selected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
isSelected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
} }
if (isSelected) { var optionHtml = '<li><a data-positionticks="' + chapter.StartPositionTicks + '" class="' + cssClass + '" href="#" style="padding-top:0;padding-bottom:0;">';
html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
} else {
html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption">';
}
var imgUrl; var imgUrl = "css/images/media/chapterflyout.png";
if (chapter.ImageTag) { if (chapter.ImageTag) {
imgUrl = ApiClient.getScaledImageUrl(self.currentItem.Id, { optionHtml += '<img src="' + imgUrl + '" style="visibility:hidden;" />';
maxWidth: 100, imgUrl = ApiClient.getScaledImageUrl(item.Id, {
width: 160,
tag: chapter.ImageTag, tag: chapter.ImageTag,
type: "Chapter", type: "Chapter",
index: i index: index
}); });
optionHtml += '<div class="videoChapterPopupImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
} else { } 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>'; optionHtml += textLines.join('<br/>');
html += '<div class="mediaFlyoutOptionSecondaryText">' + Dashboard.getDisplayTime(chapter.StartPositionTicks) + '</div>';
html += '</div>'; optionHtml += '</p>';
html += "</div>"; optionHtml += '</a></li>';
}
index++;
return optionHtml;
}).join('');
html += '</ul>';
html += '</div>';
html += '</div>';
return html; return html;
} }
@ -540,61 +587,73 @@
var currentIndex = getParameterByName('AudioStreamIndex', self.currentMediaElement.currentSrc); var currentIndex = getParameterByName('AudioStreamIndex', self.currentMediaElement.currentSrc);
var html = ''; 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) { var cssClass = "mediaPopupOption";
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
} else { var selected = stream.Index == currentIndex;
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
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) { if (stream.Codec) {
options.push(stream.Codec); attributes.push(stream.Codec);
} }
if (stream.Profile) { if (stream.Profile) {
options.push(stream.Profile); attributes.push(stream.Profile);
} }
if (stream.BitRate) { if (stream.BitRate) {
options.push((Math.floor(stream.BitRate / 1000)) + ' kbps'); attributes.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
} }
if (stream.Channels) { if (stream.Channels) {
options.push(stream.Channels + ' ch'); attributes.push(stream.Channels + ' ch');
} }
if (options.length) {
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
}
options = [];
if (stream.IsDefault) { if (stream.IsDefault) {
options.push('Default'); attributes.push('(D)');
}
if (stream.IsForced) {
options.push('Forced');
} }
if (options.length) { if (attributes.length) {
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>'; textLines.push(attributes.join('&nbsp;&#149;&nbsp;'));
} }
html += "</div>"; optionHtml += textLines.join('<br/>');
html += "</div>"; optionHtml += '</p>';
}
optionHtml += '</a></li>';
return optionHtml;
}).join('');
html += '</ul>';
html += '</div>';
html += '</div>';
return html; return html;
} }
@ -607,75 +666,80 @@
var currentIndex = self.currentSubtitleStreamIndex || -1; var currentIndex = self.currentSubtitleStreamIndex || -1;
var html = '';
streams.unshift({ streams.unshift({
Index: -1, Index: -1,
Language: "Off" 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 += streams.map(function (stream) {
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
} else { var cssClass = "mediaPopupOption";
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
var selected = stream.Index == currentIndex;
if (selected) {
cssClass += ' selectedMediaPopupOption';
} }
if (stream.Index != -1) { var optionHtml = '<li><a data-index="' + stream.Index + '" class="' + cssClass + '" href="#">';
html += '<img class="mediaFlyoutOptionImage" src="css/images/media/subtitleflyout.png" />';
} else { optionHtml += '<p style="margin:0;">';
html += '<div class="mediaFlyoutOptionImage"></div>';
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 textLines = [];
textLines.push(stream.Language || 'Unknown language');
var options = [];
if (stream.Language == "Off") {
options.push('&nbsp;');
}
html += '<div class="mediaFlyoutOptionName">' + (stream.Language || 'Unknown language') + '</div>';
if (stream.Codec) { if (stream.Codec) {
options.push(stream.Codec); textLines.push(stream.Codec);
} }
if (options.length) { var attributes = [];
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
}
options = [];
if (stream.IsDefault) { if (stream.IsDefault) {
options.push('Default'); attributes.push('Default');
} }
if (stream.IsForced) { if (stream.IsForced) {
options.push('Forced'); attributes.push('Forced');
} }
if (stream.IsExternal) { if (stream.IsExternal) {
options.push('External'); attributes.push('External');
} }
if (options.length) { if (attributes.length) {
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>'; textLines.push(attributes.join('&nbsp;&#149;&nbsp;'));
} }
html += "</div>"; optionHtml += textLines.join('<br/>');
html += "</div>"; optionHtml += '</p>';
}
optionHtml += '</a></li>';
return optionHtml;
}).join('');
html += '</ul>';
html += '</div>';
html += '</div>';
return html; return html;
} }
function getQualityFlyoutHtml() { function getQualityFlyoutHtml() {
var html = '';
var currentSrc = self.currentMediaElement.currentSrc.toLowerCase(); var currentSrc = self.currentMediaElement.currentSrc.toLowerCase();
var isStatic = currentSrc.indexOf('static=true') != -1; var isStatic = currentSrc.indexOf('static=true') != -1;
@ -689,26 +753,44 @@
options[0].name = "Direct"; 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) { 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>'; if (option.selected) {
optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
}
html += "</div>"; optionHtml += option.name;
html += "</div>"; optionHtml += '</p>';
}
optionHtml += '</a></li>';
return optionHtml;
}).join('');
html += '</ul>';
html += '</div>';
html += '</div>';
return html; return html;
} }
@ -805,7 +887,8 @@
$('.itemVideo').on('mousemove.videoplayer keydown.videoplayer scroll.videoplayer', idleHandler).trigger('mousemove'); $('.itemVideo').on('mousemove.videoplayer keydown.videoplayer scroll.videoplayer', idleHandler).trigger('mousemove');
} else { } else {
$('#videoControls').removeClass("active inactive"); $('.hiddenOnIdle').removeClass("inactive");
exitFullScreenToWindow(); exitFullScreenToWindow();
} }
@ -897,7 +980,7 @@
self.startTimeTicksOffset = isStatic ? 0 : startPosition || 0; 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, { var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
Static: isStatic, Static: isStatic,
@ -911,7 +994,9 @@
// None of the browsers seem to like this // None of the browsers seem to like this
EnableAutoStreamCopy: false EnableAutoStreamCopy: false
})) + seekParam; }));
if (isStatic) mp4VideoUrl += seekParam;
var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, { var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
VideoCodec: 'vpx', VideoCodec: 'vpx',
@ -920,36 +1005,49 @@
videoBitrate: webmQuality.videoBitrate, videoBitrate: webmQuality.videoBitrate,
audioBitrate: webmQuality.audioBitrate, audioBitrate: webmQuality.audioBitrate,
EnableAutoStreamCopy: false EnableAutoStreamCopy: false
})) + seekParam; }));
var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, { if (isStatic) webmVideoUrl += seekParam;
timeStampOffsetMs: 0,
maxWidth: m3U8Quality.maxWidth, var hlsVideoUrl;
videoBitrate: m3U8Quality.videoBitrate,
audioBitrate: m3U8Quality.audioBitrate, if (item.RunTimeTicks) {
VideoCodec: m3U8Quality.videoCodec, hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/master.m3u8', $.extend({}, baseParams, {
AudioCodec: m3U8Quality.audioCodec, timeStampOffsetMs: 0,
profile: 'baseline', maxWidth: m3U8Quality.maxWidth,
level: '3' videoBitrate: m3U8Quality.videoBitrate,
})) + seekParam; audioBitrate: m3U8Quality.audioBitrate,
VideoCodec: m3U8Quality.videoCodec,
AudioCodec: m3U8Quality.audioCodec,
profile: 'baseline',
level: '3',
StartTimeTicks: 0
})) + seekParam;
} else {
hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
timeStampOffsetMs: 0,
maxWidth: m3U8Quality.maxWidth,
videoBitrate: m3U8Quality.videoBitrate,
audioBitrate: m3U8Quality.audioBitrate,
VideoCodec: m3U8Quality.videoCodec,
AudioCodec: m3U8Quality.audioCodec,
profile: 'baseline',
level: '3'
})) + seekParam;
}
//======================================================================================> //======================================================================================>
// Show loading animation
$("html").css("cursor", "wait");
// Create video player // Create video player
var html = ''; 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 // Can't autoplay in these browsers so we need to use the full controls
if (requiresControls) { if (requiresNativeControls) {
if ($.browser.msie) { html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay="autoplay" controls="controls">';
html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay="autoplay" controls="controls">';
} else {
html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay controls>';
}
} else { } else {
// Chrome 35 won't play with preload none // Chrome 35 won't play with preload none
@ -991,10 +1089,9 @@
html += '</video>'; html += '</video>';
var mediaPlayerContainer = $("#mediaPlayer").show(); var mediaPlayerContainer = $("#mediaPlayer").show();
var videoControls = $('#videoControls', mediaPlayerContainer); var videoControls = $('.videoControls', mediaPlayerContainer);
//show stop button //show stop button
$('#video-stopButton', videoControls).show();
$('#video-playButton', videoControls).hide(); $('#video-playButton', videoControls).hide();
$('#video-pauseButton', videoControls).show(); $('#video-pauseButton', videoControls).show();
$('#video-previousTrackButton', videoControls).hide(); $('#video-previousTrackButton', videoControls).hide();
@ -1002,35 +1099,50 @@
var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html); var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html);
$('.video-qualityButton', videoControls).show(); $('.videoQualityButton', videoControls).show();
if (mediaStreams.filter(function (s) { if (mediaStreams.filter(function (s) {
return s.Type == "Audio"; return s.Type == "Audio";
}).length) { }).length) {
$('#video-audioTracksButton', videoControls).show(); $('.videoAudioButton').show();
} else { } else {
$('#video-audioTracksButton', videoControls).hide(); $('.videoAudioButton').hide();
} }
if (subtitleStreams.length) { if (subtitleStreams.length) {
$('#video-subtitleButton', videoControls).show().prop("disabled", false); $('.videoSubtitleButton').show();
} else { } else {
$('#video-subtitleButton', videoControls).hide().prop("disabled", true); $('.videoSubtitleButton').hide();
;
} }
if (item.Chapters && item.Chapters.length) { if (item.Chapters && item.Chapters.length) {
$('#video-chaptersButton', videoControls).show(); $('.videoChaptersButton').show();
} else { } else {
$('#video-chaptersButton', videoControls).hide(); $('.videoChaptersButton').hide();
} }
if (requiresControls) { if (requiresNativeControls) {
$('#video-fullscreenButton', videoControls).hide(); $('#video-fullscreenButton', videoControls).hide();
} else { } else {
$('#video-fullscreenButton', videoControls).show(); $('#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); var video = $("video", videoElement);
initialVolume = self.getSavedVolume(); initialVolume = self.getSavedVolume();
@ -1089,7 +1201,6 @@
self.clearPauseStop(); self.clearPauseStop();
$("html").css("cursor", "default");
self.resetEnhancements(); self.resetEnhancements();
var errorCode = this.error ? this.error.code : ''; var errorCode = this.error ? this.error.code : '';
@ -1118,22 +1229,6 @@
self.toggleFullscreen(); 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 () { }).on("ended.playbackstopped", function () {
currentTimeElement.empty(); currentTimeElement.empty();
@ -1152,6 +1247,8 @@
self.currentSubtitleStreamIndex = mediaSource.DefaultSubtitleStreamIndex; self.currentSubtitleStreamIndex = mediaSource.DefaultSubtitleStreamIndex;
$('body').addClass('bodyWithPopupOpen');
return video[0]; return video[0];
}; };
} }

81
dashboard-ui/scripts/mediaplayer.js
View file

@ -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) { self.getNowPlayingNameHtml = function (playerState) {
var nowPlayingItem = playerState.NowPlayingItem; var nowPlayingItem = playerState.NowPlayingItem;
@ -1044,7 +983,12 @@
var imageTags = item.ImageTags || {}; 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.PrimaryImageItemId = item.Id;
nowPlayingItem.PrimaryImageTag = imageTags.Primary; nowPlayingItem.PrimaryImageTag = imageTags.Primary;
@ -1071,6 +1015,17 @@
nowPlayingItem.ThumbItemId = item.Id; nowPlayingItem.ThumbItemId = item.Id;
nowPlayingItem.ThumbImageTag = imageTags.Thumb; 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; return state;
@ -1106,6 +1061,8 @@
self.onPlaybackStopped = function () { self.onPlaybackStopped = function () {
$('body').removeClass('bodyWithPopupOpen');
self.clearPauseStop(); self.clearPauseStop();
var playerElement = this; var playerElement = this;

83
dashboard-ui/scripts/site.js
View file

@ -42,7 +42,7 @@ var Dashboard = {
//$.mobile.listview.prototype.options.dividerTheme = "b"; //$.mobile.listview.prototype.options.dividerTheme = "b";
//$.mobile.popup.prototype.options.theme = "c"; //$.mobile.popup.prototype.options.theme = "c";
//$.mobile.popup.prototype.options.transition = "none"; $.mobile.popup.prototype.options.transition = "fade";
$.mobile.defaultPageTransition = "none"; $.mobile.defaultPageTransition = "none";
//$.mobile.collapsible.prototype.options.contentTheme = "a"; //$.mobile.collapsible.prototype.options.contentTheme = "a";
}, },
@ -364,7 +364,7 @@ var Dashboard = {
$('.confirmFlyout').popup("close").remove(); $('.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 += '<div class="ui-bar-a" style="text-align:center;">';
html += '<h3>' + title + '</h3>'; html += '<h3>' + title + '</h3>';
@ -1211,34 +1211,53 @@ $(function () {
var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">'; 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="videoPlayer">';
videoPlayerHtml += '<div id="videoElement">';
videoPlayerHtml += '<div id="videoElement">';
videoPlayerHtml += '<div id="play" class="status"></div>'; videoPlayerHtml += '<div id="play" class="status"></div>';
videoPlayerHtml += '<div id="pause" class="status"></div>'; videoPlayerHtml += '<div id="pause" class="status"></div>';
videoPlayerHtml += '</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 // 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 += '<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 += '<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>';
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="currentTime"></div>';
videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
videoPlayerHtml += '<div class="nowPlayingImage"></div>'; videoPlayerHtml += '<div class="nowPlayingImage"></div>';
videoPlayerHtml += '<div class="nowPlayingText"></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-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>'; 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 += '<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>';
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 += '<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>'; // videoControls
videoPlayerHtml += '</div>'; // videoPlayer 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(); Dashboard.jQueryMobileInit();
$(document).on('pagebeforeshow', ".page", function () { $(document).on('pagebeforeshow', ".page", function () {

2
dashboard-ui/wizardlibrary.html
View file

@ -21,7 +21,7 @@
</div> </div>
<p><a href="https://github.com/MediaBrowser/MediaBrowser/wiki/Library-Structure" target="_blank">${ReferToMediaLibraryWiki}</a></p> <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;"> <div class="ui-corner-top ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3></h3> <h3></h3>