mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Media player updates
* Separate code for video player * Audio player code reverted to pre-video player updates
This commit is contained in:
Tim Hobbs
parent
4721d3722f
commit
c806ef8d65
5 changed files with 816 additions and 861 deletions
284
dashboard-ui/css/mediaplayer-video.css
Normal file
284
dashboard-ui/css/mediaplayer-video.css
Normal file
|
|
@ -0,0 +1,284 @@
|
||||||
|
#mediaPlayer .mediaPlayerFlyout {
|
||||||
|
bottom: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoBackdrop {
|
||||||
|
z-index: 99990;
|
||||||
|
position: fixed;
|
||||||
|
background-color: transparent;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoPlayer {
|
||||||
|
z-index: 99997;
|
||||||
|
background-color: #1d1d1d;
|
||||||
|
position: fixed;
|
||||||
|
border: 1px solid #333;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -170px;
|
||||||
|
margin-top: -115px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemVideo {
|
||||||
|
background-color: #000;
|
||||||
|
margin: 20px 20px 80px;
|
||||||
|
width: 320px;
|
||||||
|
height: 181px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoControls {
|
||||||
|
z-index: 99999;
|
||||||
|
padding: 0 20px 10px;
|
||||||
|
height: 80px;
|
||||||
|
position: absolute;
|
||||||
|
top: auto;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoControls .positionSliderContainer .ui-slider-track {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoControls .positionSliderContainer {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoControls .currentTime {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fullscreen
|
||||||
|
***************************************/
|
||||||
|
|
||||||
|
#videoPlayer.fullscreenVideo,
|
||||||
|
#videoPlayer.fullscreenVideo .itemVideo {
|
||||||
|
position: fixed !important;
|
||||||
|
top: 0 !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
right: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
border: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoPlayer.fullscreenVideo #videoControls {
|
||||||
|
opacity: 0.3;
|
||||||
|
background-color: #1d1d1d;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoPlayer.fullscreenVideo #videoControls:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoPlayer.fullscreenVideo .inactive {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoPlayer.fullscreenVideo:hover .active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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) {
|
||||||
|
#mediaPlayer .volumeSliderContainer, #mediaPlayer .sendMediaButton {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 960px), all and (max-height: 550px) {
|
||||||
|
#mediaPlayer .volumeSliderContainer, #mediaPlayer .audioTracksButton, #mediaPlayer .chaptersButton, #mediaPlayer .sendMediaButton {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 800px), all and (max-height: 460px) {
|
||||||
|
#mediaPlayer .volumeButton, #mediaPlayer .volumeSliderContainer, #mediaPlayer .muteButton, #mediaPlayer .unmuteButton, #mediaPlayer .nowPlayingMediaInfo, #mediaPlayer .sendMediaButton {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 640px), all and (max-height: 365px) {
|
||||||
|
#mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .qualityButton, #mediaPlayer .subtitleButton {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mediaPlayer .currentTime {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 500px) {
|
||||||
|
#mediaPlayer .previousTrackButton, #mediaPlayer .nextTrackButton {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 400px) {
|
||||||
|
#mediaPlayer .playlistButton {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/****************************************/
|
||||||
|
|
||||||
|
.status {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-top: -75px;
|
||||||
|
margin-left: -75px;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
z-index: 99999;
|
||||||
|
}
|
||||||
|
|
||||||
|
#play {
|
||||||
|
background-image: url(images/media/play.png);
|
||||||
|
opacity: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pause {
|
||||||
|
background-image: url(images/media/pause.png);
|
||||||
|
opacity: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fadeOut {
|
||||||
|
animation-name: fadeOut;
|
||||||
|
-webkit-animation-name: fadeOut;
|
||||||
|
animation-duration: .25s;
|
||||||
|
-webkit-animation-duration: .25s;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeOut {
|
||||||
|
0% {
|
||||||
|
transform: scale(.25);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
transform: scale(.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
transform: scale(.75);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeOut {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(.25);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
-webkit-transform: scale(.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
-webkit-transform: scale(.75);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor-active {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor-inactive {
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
|
@ -1,36 +1,17 @@
|
||||||
/* Now playing bar */
|
/* Now playing bar */
|
||||||
.nowPlayingBar {
|
.nowPlayingBar {
|
||||||
position: absolute;
|
padding: 6px 0 24px 0;
|
||||||
top: 0;
|
border-top: 2px solid green;
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingBar .barBackground {
|
.nowPlayingBar .barBackground {
|
||||||
border-top: 2px solid #08b;
|
border-top: 2px solid green;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
margin: -8px -0.5em -26px !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#videoPlayer.fullscreenVideo .nowPlayingBar {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer.fullscreenVideo .inactive {
|
|
||||||
-webkit-transition: top 0.6s ease-in-out;
|
|
||||||
-moz-transition: top 0.6s ease-in-out;
|
|
||||||
-o-transition: top 0.6s ease-in-out;
|
|
||||||
transition: top 0.6s ease-in-out;
|
|
||||||
top: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer.fullscreenVideo:hover .active {
|
|
||||||
top: 95% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
.nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -48,20 +29,6 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreenVideo #mediaElement {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mediaPlayer {
|
|
||||||
min-height: 50px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nowPlayingMediaInfo div {
|
.nowPlayingMediaInfo div {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
@ -72,17 +39,15 @@
|
||||||
|
|
||||||
|
|
||||||
.nowPlayingMediaInfo {
|
.nowPlayingMediaInfo {
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 3px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingText {
|
.nowPlayingText {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 2em 0 5px;
|
top: -3px;
|
||||||
|
margin-left: 3px;
|
||||||
|
margin-right: 2em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
top: -7px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 650px) {
|
@media all and (max-width: 650px) {
|
||||||
|
|
@ -95,100 +60,6 @@
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemVideo {
|
|
||||||
z-index: 99998;
|
|
||||||
background: #000;
|
|
||||||
min-width: 241px;
|
|
||||||
max-width: 320px;
|
|
||||||
max-height: 181px;
|
|
||||||
margin: 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -160px;
|
|
||||||
margin-top: -90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullscreenVideo {
|
|
||||||
position: fixed;
|
|
||||||
top: 0 !important;
|
|
||||||
bottom: 0 !important;
|
|
||||||
right: 0 !important;
|
|
||||||
left: 0 !important;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: 0;
|
|
||||||
z-index: 99996;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoBackdrop {
|
|
||||||
z-index: 99990;
|
|
||||||
position: fixed;
|
|
||||||
background-color: transparent;
|
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer {
|
|
||||||
z-index: 99997;
|
|
||||||
background: #1d1d1d;
|
|
||||||
position: fixed;
|
|
||||||
border: 1px solid #333;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -170px;
|
|
||||||
margin-top: -115px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer.fullscreenVideo,
|
|
||||||
#videoPlayer.fullscreenVideo .itemVideo {
|
|
||||||
position: fixed !important;
|
|
||||||
top: 0 !important;
|
|
||||||
bottom: 0 !important;
|
|
||||||
right: 0 !important;
|
|
||||||
left: 0 !important;
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
border: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullscreenVideo .itemVideo {
|
|
||||||
z-index: 99996;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer .itemVideo {
|
|
||||||
position: static;
|
|
||||||
margin: 0;
|
|
||||||
margin: 20px 20px 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer .nowPlayingBar {
|
|
||||||
z-index: 99999;
|
|
||||||
padding: 0;
|
|
||||||
height: 50px;
|
|
||||||
background-color: #1d1d1d;
|
|
||||||
position: absolute;
|
|
||||||
top: auto;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer .nowPlayingBar .barBackground {
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer.fullscreenVideo .nowPlayingBar .barBackground {
|
|
||||||
border-width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.currentTime {
|
.currentTime {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -208,7 +79,6 @@
|
||||||
|
|
||||||
.sliderContainer {
|
.sliderContainer {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.positionSliderContainer {
|
.positionSliderContainer {
|
||||||
|
|
@ -227,10 +97,6 @@
|
||||||
margin-left: 15px !important;
|
margin-left: 15px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.highPosition .ui-slider-track {
|
|
||||||
z-index: 100000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volumeSliderContainer .ui-slider-track {
|
.volumeSliderContainer .ui-slider-track {
|
||||||
margin-left: 5px !important;
|
margin-left: 5px !important;
|
||||||
}
|
}
|
||||||
|
|
@ -262,40 +128,27 @@ input[type="range"]::-ms-fill-upper {
|
||||||
display: none; /* display and visibility only */
|
display: none; /* display and visibility only */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 1200px) {
|
|
||||||
.volumeSliderContainer, .sendMediaButton {
|
|
||||||
display: none!important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 960px) {
|
|
||||||
.volumeSliderContainer, .audioTracksButton, .chaptersButton, .sendMediaButton {
|
|
||||||
display: none!important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 800px) {
|
@media all and (max-width: 800px) {
|
||||||
.volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo, .sendMediaButton {
|
.volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo {
|
||||||
display: none!important;
|
display: none!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 640px) {
|
@media all and (max-width: 600px) {
|
||||||
.positionSliderContainer {
|
.chaptersButton, .audioTracksButton, .sendMediaButton {
|
||||||
width: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chaptersButton, .audioTracksButton, .qualityButton, .subtitleButton {
|
|
||||||
display: none!important;
|
display: none!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.positionSliderContainer {
|
.positionSliderContainer, .currentTime {
|
||||||
top: 0!important;
|
top: 0!important;
|
||||||
position: relative!important;
|
position: relative!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 500px) {
|
@media all and (max-width: 500px) {
|
||||||
|
.positionSliderContainer {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
.previousTrackButton, .nextTrackButton {
|
.previousTrackButton, .nextTrackButton {
|
||||||
display: none!important;
|
display: none!important;
|
||||||
|
|
@ -319,31 +172,13 @@ input[type="range"]::-ms-fill-upper {
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
bottom: 64px;
|
bottom: 78px;
|
||||||
margin-left: -50px;
|
margin-left: -50px;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreenVideo .mediaPlayerFlyout {
|
|
||||||
-webkit-transition: top 0.6s ease-in-out;
|
|
||||||
-moz-transition: top 0.6s ease-in-out;
|
|
||||||
-o-transition: top 0.6s ease-in-out;
|
|
||||||
transition: top 0.6s ease-in-out;
|
|
||||||
top: 100%;
|
|
||||||
bottom: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer.fullscreenVideo:hover .mediaPlayerFlyout {
|
|
||||||
-webkit-transition: top 0.6s ease-out;
|
|
||||||
-moz-transition: top 0.6s ease-out;
|
|
||||||
-o-transition: top 0.6s ease-out;
|
|
||||||
transition: top 0.6s ease-out;
|
|
||||||
top: -303px !important;
|
|
||||||
bottom: -3px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chaptersFlyout {
|
.chaptersFlyout {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
|
|
@ -412,166 +247,8 @@ input[type="range"]::-ms-fill-upper {
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) and (min-height: 360px) {
|
@media (min-width: 1440px) {
|
||||||
.itemVideo:not(.fullscreenVideo) {
|
|
||||||
min-width: 361px;
|
|
||||||
max-width: 480px;
|
|
||||||
max-height: 271px;
|
|
||||||
margin-left: -240px;
|
|
||||||
margin-top: -135px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer {
|
|
||||||
margin-left: -250px;
|
|
||||||
margin-top: -160px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 800px) and (min-height: 450px) {
|
|
||||||
.itemVideo:not(.fullscreenVideo) {
|
|
||||||
min-width: 481px;
|
|
||||||
max-width: 640px;
|
|
||||||
max-height: 362px;
|
|
||||||
margin-left: -320px;
|
|
||||||
margin-top: -181px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer {
|
|
||||||
margin-left: -330px;
|
|
||||||
margin-top: -205px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 960px) and (min-height: 540px) {
|
|
||||||
.itemVideo:not(.fullscreenVideo) {
|
|
||||||
min-width: 541px;
|
|
||||||
max-width: 720px;
|
|
||||||
max-height: 406px;
|
|
||||||
margin-left: -360px;
|
|
||||||
margin-top: -203px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer {
|
|
||||||
margin-left: -370px;
|
|
||||||
margin-top: -228px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) and (min-height: 720px) {
|
|
||||||
.itemVideo:not(.fullscreenVideo) {
|
|
||||||
min-width: 812px;
|
|
||||||
max-width: 1080px;
|
|
||||||
max-height: 610px;
|
|
||||||
margin-left: -540px;
|
|
||||||
margin-top: -305px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer {
|
|
||||||
margin-left: -550px;
|
|
||||||
margin-top: -329px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1440px) and (min-height: 720px) {
|
|
||||||
.itemVideo:not(.fullscreenVideo) {
|
|
||||||
min-width: 812px;
|
|
||||||
max-width: 1080px;
|
|
||||||
max-height: 610px;
|
|
||||||
margin-left: -540px;
|
|
||||||
margin-top: -305px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#videoPlayer {
|
|
||||||
margin-left: -550px;
|
|
||||||
margin-top: -329px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.positionSliderContainer {
|
.positionSliderContainer {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin-top: -75px;
|
|
||||||
margin-left: -75px;
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
z-index: 99999;
|
|
||||||
}
|
|
||||||
|
|
||||||
#play {
|
|
||||||
background-image: url(images/media/play.png);
|
|
||||||
opacity: 0;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pause {
|
|
||||||
background-image: url(images/media/pause.png);
|
|
||||||
opacity: 0;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOut {
|
|
||||||
animation-name: fadeOut;
|
|
||||||
-webkit-animation-name: fadeOut;
|
|
||||||
animation-duration: .25s;
|
|
||||||
-webkit-animation-duration: .25s;
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
-webkit-animation-timing-function: ease-in-out;
|
|
||||||
visibility: visible !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeOut {
|
|
||||||
0% {
|
|
||||||
transform: scale(.25);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
transform: scale(.5);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: scale(.75);
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes fadeOut {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: scale(.25);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
-webkit-transform: scale(.5);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
-webkit-transform: scale(.75);
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cursor-active {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cursor-inactive {
|
|
||||||
cursor: none;
|
|
||||||
}
|
|
||||||
|
|
@ -18,12 +18,12 @@
|
||||||
var timeout;
|
var timeout;
|
||||||
var video;
|
var video;
|
||||||
var culturesPromise;
|
var culturesPromise;
|
||||||
|
var initialVolume;
|
||||||
var fullscreenExited = false;
|
var fullscreenExited = false;
|
||||||
var idleState = true;
|
var idleState = true;
|
||||||
|
|
||||||
self.initVideoPlayer = function () {
|
self.initVideoPlayer = function () {
|
||||||
video = playVideo(item, startPosition, user);
|
video = playVideo(item, startPosition, user);
|
||||||
enhancePlayer();
|
|
||||||
return video;
|
return video;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -41,33 +41,10 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
self.resetEnhancements = function () {
|
self.resetEnhancements = function () {
|
||||||
|
$("#mediaPlayer").hide();
|
||||||
var footer = $("#footer");
|
$("video").remove();
|
||||||
|
|
||||||
var mediaPlayer = $("#mediaPlayer", footer);
|
|
||||||
|
|
||||||
var mediaElement = $("#mediaElement", mediaPlayer);
|
|
||||||
|
|
||||||
var nowPlayingBar = $("#nowPlayingBar", mediaPlayer);
|
|
||||||
|
|
||||||
footer.css("top", null);
|
|
||||||
|
|
||||||
mediaElement.html(""); // remove play/pause
|
|
||||||
|
|
||||||
mediaPlayer.hide().append(nowPlayingBar); // put elements back where they belong
|
|
||||||
|
|
||||||
$("#videoBackdrop", footer).hide();
|
|
||||||
|
|
||||||
if (!$("#footerNotifications", footer).html()) { // only hide footer if no notifications
|
|
||||||
|
|
||||||
footer.hide();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
$("html").css("cursor", "default");
|
$("html").css("cursor", "default");
|
||||||
|
|
||||||
$(".ui-loader").hide();
|
$(".ui-loader").hide();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
self.exitFullScreen = function() {
|
self.exitFullScreen = function() {
|
||||||
|
|
@ -90,7 +67,7 @@
|
||||||
|
|
||||||
self.showSubtitleMenu = function () {
|
self.showSubtitleMenu = function () {
|
||||||
|
|
||||||
var flyout = $('#subtitleFlyout');
|
var flyout = $('#video-subtitleFlyout');
|
||||||
|
|
||||||
if (!flyout.is(':visible')) {
|
if (!flyout.is(':visible')) {
|
||||||
|
|
||||||
|
|
@ -101,39 +78,39 @@
|
||||||
culturesPromise.done(function (cultures) {
|
culturesPromise.done(function (cultures) {
|
||||||
$("html").css("cursor", "default");
|
$("html").css("cursor", "default");
|
||||||
flyout.html(getSubtitleTracksHtml(currentItem, cultures)).trigger('create').scrollTop(0);
|
flyout.html(getSubtitleTracksHtml(currentItem, cultures)).trigger('create').scrollTop(0);
|
||||||
toggleFlyout(flyout, '#subtitleButton');
|
toggleFlyout(flyout, '#video-subtitleButton');
|
||||||
});
|
});
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
toggleFlyout(flyout, '#subtitleButton');
|
toggleFlyout(flyout, '#video-subtitleButton');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
self.showQualityFlyout = function () {
|
self.showQualityFlyout = function () {
|
||||||
|
|
||||||
var flyout = $('#qualityFlyout');
|
var flyout = $('#video-qualityFlyout');
|
||||||
|
|
||||||
if (!flyout.is(':visible')) {
|
if (!flyout.is(':visible')) {
|
||||||
flyout.html(getQualityFlyoutHtml(currentItem)).scrollTop(0);
|
flyout.html(getQualityFlyoutHtml(currentItem)).scrollTop(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleFlyout(flyout, '#qualityButton');
|
toggleFlyout(flyout, '#video-qualityButton');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.showChaptersFlyout = function () {
|
self.showChaptersFlyout = function () {
|
||||||
|
|
||||||
var flyout = $('#chaptersFlyout');
|
var flyout = $('#video-chaptersFlyout');
|
||||||
|
|
||||||
if (!flyout.is(':visible')) {
|
if (!flyout.is(':visible')) {
|
||||||
flyout.html(getChaptersFlyoutHtml(currentItem)).scrollTop(0);
|
flyout.html(getChaptersFlyoutHtml(currentItem)).scrollTop(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleFlyout(flyout, '#chaptersButton');
|
toggleFlyout(flyout, '#video-chaptersButton');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.showAudioTracksFlyout = function () {
|
self.showAudioTracksFlyout = function () {
|
||||||
|
|
||||||
var flyout = $('#audioTracksFlyout');
|
var flyout = $('#video-audioTracksFlyout');
|
||||||
|
|
||||||
if (!flyout.is(':visible')) {
|
if (!flyout.is(':visible')) {
|
||||||
|
|
||||||
|
|
@ -144,15 +121,15 @@
|
||||||
culturesPromise.done(function (cultures) {
|
culturesPromise.done(function (cultures) {
|
||||||
$("html").css("cursor", "default");
|
$("html").css("cursor", "default");
|
||||||
flyout.html(getAudioTracksHtml(currentItem, cultures)).trigger('create').scrollTop(0);
|
flyout.html(getAudioTracksHtml(currentItem, cultures)).trigger('create').scrollTop(0);
|
||||||
toggleFlyout(flyout, '#audioTracksButton');
|
toggleFlyout(flyout, '#video-audioTracksButton');
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
toggleFlyout(flyout, '#audioTracksButton');
|
toggleFlyout(flyout, '#video-audioTracksButton');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () {
|
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () {
|
||||||
var nowPlayingBar = $('#nowPlayingBar');
|
var videoControls = $('#videoControls');
|
||||||
|
|
||||||
$('.itemVideo').off('mousemove keydown scroll', idleHandler);
|
$('.itemVideo').off('mousemove keydown scroll', idleHandler);
|
||||||
|
|
||||||
|
|
@ -161,22 +138,22 @@
|
||||||
idleState = true;
|
idleState = true;
|
||||||
$('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove');
|
$('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove');
|
||||||
} else {
|
} else {
|
||||||
nowPlayingBar.removeClass("highPosition");
|
videoControls.removeClass("active inactive");
|
||||||
exitFullScreenToWindow();
|
exitFullScreenToWindow();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
$('#chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
|
$('#video-chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||||
|
|
||||||
var ticks = parseInt(this.getAttribute('data-positionticks'));
|
var ticks = parseInt(this.getAttribute('data-positionticks'));
|
||||||
|
|
||||||
self.changeStream(ticks);
|
self.changeStream(ticks);
|
||||||
|
|
||||||
hideFlyout($('#chaptersFlyout'));
|
hideFlyout($('#video-chaptersFlyout'));
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#audioTracksFlyout').on('click', '.mediaFlyoutOption', function () {
|
$('#video-audioTracksFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||||
|
|
||||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||||
var index = parseInt(this.getAttribute('data-index'));
|
var index = parseInt(this.getAttribute('data-index'));
|
||||||
|
|
@ -184,10 +161,10 @@
|
||||||
self.changeStream(self.getCurrentTicks(), { AudioStreamIndex: index });
|
self.changeStream(self.getCurrentTicks(), { AudioStreamIndex: index });
|
||||||
}
|
}
|
||||||
|
|
||||||
hideFlyout($('#audioTracksFlyout'));
|
hideFlyout($('#video-audioTracksFlyout'));
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#subtitleFlyout').on('click', '.mediaFlyoutOption', function () {
|
$('#video-subtitleFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||||
|
|
||||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||||
var index = parseInt(this.getAttribute('data-index'));
|
var index = parseInt(this.getAttribute('data-index'));
|
||||||
|
|
@ -195,10 +172,10 @@
|
||||||
self.changeStream(self.getCurrentTicks(), { SubtitleStreamIndex: index });
|
self.changeStream(self.getCurrentTicks(), { SubtitleStreamIndex: index });
|
||||||
}
|
}
|
||||||
|
|
||||||
hideFlyout($('#subtitleFlyout'));
|
hideFlyout($('#video-subtitleFlyout'));
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#qualityFlyout').on('click', '.mediaFlyoutOption', function () {
|
$('#video-qualityFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||||
|
|
||||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||||
|
|
||||||
|
|
@ -214,10 +191,10 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
hideFlyout($('#qualityFlyout'));
|
hideFlyout($('#video-qualityFlyout'));
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#footer").on("mousemove", "#videoPlayer.fullscreenVideo #itemVideo", function () {
|
$("body").on("mousemove", "#videoPlayer.fullscreenVideo #itemVideo", function () {
|
||||||
|
|
||||||
idleHandler(this);
|
idleHandler(this);
|
||||||
|
|
||||||
|
|
@ -226,7 +203,7 @@
|
||||||
|
|
||||||
function idleHandler() {
|
function idleHandler() {
|
||||||
var video = $(".itemVideo");
|
var video = $(".itemVideo");
|
||||||
var nowPlayingBar = $("#nowPlayingBar");
|
var videoControls = $("#videoControls");
|
||||||
|
|
||||||
if (timeout) {
|
if (timeout) {
|
||||||
window.clearTimeout(timeout);
|
window.clearTimeout(timeout);
|
||||||
|
|
@ -234,7 +211,7 @@
|
||||||
|
|
||||||
if (idleState == true) {
|
if (idleState == true) {
|
||||||
video.removeClass("cursor-inactive").addClass("cursor-active");
|
video.removeClass("cursor-inactive").addClass("cursor-active");
|
||||||
nowPlayingBar.removeClass("inactive").addClass("active");
|
videoControls.removeClass("inactive").addClass("active");
|
||||||
}
|
}
|
||||||
|
|
||||||
idleState = false;
|
idleState = false;
|
||||||
|
|
@ -242,9 +219,9 @@
|
||||||
timeout = window.setTimeout(function () {
|
timeout = window.setTimeout(function () {
|
||||||
idleState = true;
|
idleState = true;
|
||||||
video.removeClass("cursor-active").addClass("cursor-inactive");
|
video.removeClass("cursor-active").addClass("cursor-inactive");
|
||||||
nowPlayingBar.removeClass("active").addClass("inactive");
|
videoControls.removeClass("active").addClass("inactive");
|
||||||
}, 4000);
|
}, 4000);
|
||||||
}
|
};
|
||||||
|
|
||||||
function requestFullScreen(element) {
|
function requestFullScreen(element) {
|
||||||
// Supports most browsers and their versions.
|
// Supports most browsers and their versions.
|
||||||
|
|
@ -255,118 +232,6 @@
|
||||||
} else {
|
} else {
|
||||||
enterFullScreen();
|
enterFullScreen();
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function enhancePlayer() {
|
|
||||||
// Show loading animation
|
|
||||||
$(".ui-loader").show();
|
|
||||||
$("html").css("cursor", "wait");
|
|
||||||
|
|
||||||
var footer = $("#footer");
|
|
||||||
var nowPlayingBar = $("#nowPlayingBar", footer);
|
|
||||||
var mediaElement = $("#mediaElement", footer);
|
|
||||||
|
|
||||||
var play = $("<div id='play' class='status'></div>");
|
|
||||||
var pause = $("<div id='pause' class='status'></div>");
|
|
||||||
|
|
||||||
mediaElement.append(play).append(pause);
|
|
||||||
|
|
||||||
$("#videoBackdrop", footer).show();
|
|
||||||
|
|
||||||
footer.css("top", "101%");
|
|
||||||
|
|
||||||
var videoPlayer = $("#videoPlayer", footer)
|
|
||||||
.append(nowPlayingBar);
|
|
||||||
|
|
||||||
// Stop playback on browser back button nav
|
|
||||||
$(window).on("popstate", function () {
|
|
||||||
|
|
||||||
self.stop();
|
|
||||||
|
|
||||||
return;
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
$(video)
|
|
||||||
.on("click", function (e) {
|
|
||||||
|
|
||||||
if (this.paused) {
|
|
||||||
|
|
||||||
self.unpause();
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
self.pause();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
.on("dblclick", function () {
|
|
||||||
|
|
||||||
self.toggleFullscreen();
|
|
||||||
|
|
||||||
})
|
|
||||||
.on("seeking", function (e) {
|
|
||||||
|
|
||||||
$("html").css("cursor", "wait");
|
|
||||||
|
|
||||||
})
|
|
||||||
.on("seeked", function (e) {
|
|
||||||
|
|
||||||
$("html").css("cursor", "default");
|
|
||||||
|
|
||||||
})
|
|
||||||
.on("loadstart", function () {
|
|
||||||
|
|
||||||
$("html").css("cursor", "progress");
|
|
||||||
|
|
||||||
})
|
|
||||||
.on("canplay", function () {
|
|
||||||
|
|
||||||
$(".ui-loader").hide();
|
|
||||||
|
|
||||||
$("html").css("cursor", "default");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".mediaFlyoutContainer").on("click", "a", function (e) {
|
|
||||||
|
|
||||||
if (confirm("This option will close the video player. Proceed?")) {
|
|
||||||
|
|
||||||
self.stop();
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
changeHandler("fullscreenchange");
|
|
||||||
changeHandler("mozfullscreenchange");
|
|
||||||
changeHandler("webkitfullscreenchange");
|
|
||||||
changeHandler("msfullscreenchange");
|
|
||||||
|
|
||||||
$(document).on("keyup.enhancePlayer", function (e) {
|
|
||||||
if (fullscreenExited) {
|
|
||||||
|
|
||||||
videoPlayer.removeClass("fullscreenVideo");
|
|
||||||
|
|
||||||
fullscreenExited = false;
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.keyCode == 27) {
|
|
||||||
|
|
||||||
self.stop();
|
|
||||||
|
|
||||||
$(this).unbind("keyup.enhancePlayer");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
fullscreenExited = false;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function changeHandler(event) {
|
function changeHandler(event) {
|
||||||
|
|
@ -375,7 +240,7 @@
|
||||||
fullscreenExited = self.isFullScreen() == false;
|
fullscreenExited = self.isFullScreen() == false;
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
};
|
||||||
|
|
||||||
function enterFullScreen() {
|
function enterFullScreen() {
|
||||||
|
|
||||||
|
|
@ -391,7 +256,7 @@
|
||||||
|
|
||||||
player.removeClass("fullscreenVideo");
|
player.removeClass("fullscreenVideo");
|
||||||
|
|
||||||
}
|
};
|
||||||
|
|
||||||
function toggleFlyout(flyout, button) {
|
function toggleFlyout(flyout, button) {
|
||||||
|
|
||||||
|
|
@ -421,14 +286,14 @@
|
||||||
|
|
||||||
hideFlyout(flyout);
|
hideFlyout(flyout);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
function hideFlyout(flyout) {
|
function hideFlyout(flyout) {
|
||||||
|
|
||||||
flyout.slideUp().empty();
|
flyout.slideUp().empty();
|
||||||
|
|
||||||
$(document.body).off("mousedown.hidesearchhints");
|
$(document.body).off("mousedown.hidesearchhints");
|
||||||
}
|
};
|
||||||
|
|
||||||
function getChaptersFlyoutHtml(item) {
|
function getChaptersFlyoutHtml(item) {
|
||||||
|
|
||||||
|
|
@ -487,7 +352,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
}
|
};
|
||||||
|
|
||||||
function getAudioTracksHtml(item, cultures) {
|
function getAudioTracksHtml(item, cultures) {
|
||||||
|
|
||||||
|
|
@ -570,7 +435,7 @@
|
||||||
html += '<div style="padding: 5px;"><a data-role="button" data-icon="gear" href="usersettings.html?userid=' + Dashboard.getCurrentUserId() + '" data-mini="true" data-theme="a">Preferences</a></div>';
|
html += '<div style="padding: 5px;"><a data-role="button" data-icon="gear" href="usersettings.html?userid=' + Dashboard.getCurrentUserId() + '" data-mini="true" data-theme="a">Preferences</a></div>';
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
}
|
};
|
||||||
|
|
||||||
function getSubtitleTracksHtml(item, cultures) {
|
function getSubtitleTracksHtml(item, cultures) {
|
||||||
|
|
||||||
|
|
@ -657,7 +522,7 @@
|
||||||
html += '<div style="padding: 5px;"><a data-role="button" data-icon="gear" href="usersettings.html?userid=' + Dashboard.getCurrentUserId() + '" data-mini="true" data-theme="a">Preferences</a></div>';
|
html += '<div style="padding: 5px;"><a data-role="button" data-icon="gear" href="usersettings.html?userid=' + Dashboard.getCurrentUserId() + '" data-mini="true" data-theme="a">Preferences</a></div>';
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
}
|
};
|
||||||
|
|
||||||
function getQualityFlyoutHtml(item) {
|
function getQualityFlyoutHtml(item) {
|
||||||
|
|
||||||
|
|
@ -698,7 +563,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
}
|
};
|
||||||
|
|
||||||
function getInitialSubtitleStreamIndex(mediaStreams, user) {
|
function getInitialSubtitleStreamIndex(mediaStreams, user) {
|
||||||
|
|
||||||
|
|
@ -737,7 +602,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
};
|
||||||
|
|
||||||
function getInitialAudioStreamIndex(mediaStreams, user) {
|
function getInitialAudioStreamIndex(mediaStreams, user) {
|
||||||
|
|
||||||
|
|
@ -760,7 +625,7 @@
|
||||||
|
|
||||||
// Just use the first audio stream
|
// Just use the first audio stream
|
||||||
return audioStreams.length ? audioStreams[0].Index : null;
|
return audioStreams.length ? audioStreams[0].Index : null;
|
||||||
}
|
};
|
||||||
|
|
||||||
function getVideoQualityOptions(item) {
|
function getVideoQualityOptions(item) {
|
||||||
|
|
||||||
|
|
@ -836,7 +701,7 @@
|
||||||
options[selectedIndex].selected = true;
|
options[selectedIndex].selected = true;
|
||||||
|
|
||||||
return options;
|
return options;
|
||||||
}
|
};
|
||||||
|
|
||||||
function playVideo(item, startPosition, user) {
|
function playVideo(item, startPosition, user) {
|
||||||
|
|
||||||
|
|
@ -909,6 +774,13 @@
|
||||||
|
|
||||||
})) + seekParam;
|
})) + seekParam;
|
||||||
|
|
||||||
|
//======================================================================================>
|
||||||
|
|
||||||
|
// Show loading animation
|
||||||
|
$(".ui-loader").show();
|
||||||
|
$("html").css("cursor", "wait");
|
||||||
|
|
||||||
|
// Create video player
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
var requiresControls = $.browser.msie || $.browser.android || ($.browser.webkit && !$.browser.chrome);
|
var requiresControls = $.browser.msie || $.browser.android || ($.browser.webkit && !$.browser.chrome);
|
||||||
|
|
@ -937,52 +809,54 @@
|
||||||
html += '<source type="video/webm" src="' + webmVideoUrl + '" />';
|
html += '<source type="video/webm" src="' + webmVideoUrl + '" />';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</video';
|
html += '</video>';
|
||||||
|
|
||||||
|
var mediaPlayer = $("#mediaPlayer").show();
|
||||||
|
var videoPlayer = $("#videoPlayer", mediaPlayer);
|
||||||
|
var videoControls = $('#videoControls', mediaPlayer);
|
||||||
|
|
||||||
var footer = $("#footer").show();
|
|
||||||
var nowPlayingBar = $('#nowPlayingBar');
|
|
||||||
//show stop button
|
//show stop button
|
||||||
$('#stopButton', nowPlayingBar).show();
|
$('#video-stopButton', videoControls).show();
|
||||||
$('#playButton', nowPlayingBar).hide();
|
$('#video-playButton', videoControls).hide();
|
||||||
$('#pauseButton', nowPlayingBar).show();
|
$('#video-pauseButton', videoControls).show();
|
||||||
$('#playlistButton', nowPlayingBar).hide();
|
$('#video-playlistButton', videoControls).hide();
|
||||||
$('#previousTrackButton', nowPlayingBar).hide();
|
$('#video-previousTrackButton', videoControls).hide();
|
||||||
$('#nextTrackButton', nowPlayingBar).hide();
|
$('#video-nextTrackButton', videoControls).hide();
|
||||||
var mediaElement = $('#mediaElement', footer).html(html);
|
var videoElement = $('#videoElement', mediaPlayer).prepend(html);
|
||||||
|
|
||||||
$('#qualityButton', nowPlayingBar).show();
|
$('#video-qualityButton', videoControls).show();
|
||||||
|
|
||||||
if (mediaStreams.filter(function (i) {
|
if (mediaStreams.filter(function (i) {
|
||||||
return i.Type == "Audio";
|
return i.Type == "Audio";
|
||||||
}).length) {
|
}).length) {
|
||||||
$('#audioTracksButton', nowPlayingBar).show();
|
$('#video-audioTracksButton', videoControls).show();
|
||||||
} else {
|
} else {
|
||||||
$('#audioTracksButton', nowPlayingBar).hide();
|
$('#video-audioTracksButton', videoControls).hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (mediaStreams.filter(function (i) {
|
if (mediaStreams.filter(function (i) {
|
||||||
return i.Type == "Subtitle";
|
return i.Type == "Subtitle";
|
||||||
}).length) {
|
}).length) {
|
||||||
$('#subtitleButton', nowPlayingBar).show();
|
$('#video-subtitleButton', videoControls).show();
|
||||||
} else {
|
} else {
|
||||||
$('#subtitleButton', nowPlayingBar).hide();
|
$('#video-subtitleButton', videoControls).hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.Chapters && item.Chapters.length) {
|
if (item.Chapters && item.Chapters.length) {
|
||||||
$('#chaptersButton', nowPlayingBar).show();
|
$('#video-chaptersButton', videoControls).show();
|
||||||
} else {
|
} else {
|
||||||
$('#chaptersButton', nowPlayingBar).hide();
|
$('#video-chaptersButton', videoControls).hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (requiresControls) {
|
if (requiresControls) {
|
||||||
$('#fullscreenButton', nowPlayingBar).hide();
|
$('#video-fullscreenButton', videoControls).hide();
|
||||||
} else {
|
} else {
|
||||||
$('#fullscreenButton', nowPlayingBar).show();
|
$('#video-fullscreenButton', videoControls).show();
|
||||||
}
|
}
|
||||||
|
|
||||||
var videoElement = $("video", mediaElement);
|
var videoElement = $("video", videoElement);
|
||||||
|
|
||||||
var initialVolume = localStorage.getItem("volume") || 0.5;
|
initialVolume = localStorage.getItem("volume") || 0.5;
|
||||||
|
|
||||||
videoElement.each(function () {
|
videoElement.each(function () {
|
||||||
this.volume = initialVolume;
|
this.volume = initialVolume;
|
||||||
|
|
@ -1021,20 +895,20 @@
|
||||||
|
|
||||||
}).on("pause", function (e) {
|
}).on("pause", function (e) {
|
||||||
|
|
||||||
$('#playButton', nowPlayingBar).show();
|
$('#video-playButton', videoControls).show();
|
||||||
$('#pauseButton', nowPlayingBar).hide();
|
$('#video-pauseButton', videoControls).hide();
|
||||||
$("#pause", mediaElement).show().addClass("fadeOut");
|
$("#pause", videoElement).show().addClass("fadeOut");
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
$("#pause", mediaElement).hide().removeClass("fadeOut");
|
$("#pause", videoElement).hide().removeClass("fadeOut");
|
||||||
}, 300);
|
}, 300);
|
||||||
|
|
||||||
}).on("playing", function (e) {
|
}).on("playing", function (e) {
|
||||||
|
|
||||||
$('#playButton', nowPlayingBar).hide();
|
$('#video-playButton', videoControls).hide();
|
||||||
$('#pauseButton', nowPlayingBar).show();
|
$('#video-pauseButton', videoControls).show();
|
||||||
$("#play", mediaElement).show().addClass("fadeOut");
|
$("#play", videoElement).show().addClass("fadeOut");
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
$("#play", mediaElement).hide().removeClass("fadeOut");
|
$("#play", videoElement).hide().removeClass("fadeOut");
|
||||||
}, 300);
|
}, 300);
|
||||||
|
|
||||||
}).on("timeupdate", function () {
|
}).on("timeupdate", function () {
|
||||||
|
|
@ -1044,14 +918,14 @@
|
||||||
self.setCurrentTime(self.getCurrentTicks(this), item, true);
|
self.setCurrentTime(self.getCurrentTicks(this), item, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
}).on("error", function (e) {
|
}).on("error", function () {
|
||||||
|
|
||||||
$("html").css("cursor", "default");
|
$("html").css("cursor", "default");
|
||||||
$(".ui-loader").hide();
|
$(".ui-loader").hide();
|
||||||
self.resetEnhancements();
|
self.resetEnhancements();
|
||||||
|
|
||||||
var errorCode = this.error ? this.error.code : '';
|
var errorCode = this.error ? this.error.code : '';
|
||||||
console.log('Html5 Video error code: ' + errorCode, JSON.stringify(e));
|
console.log('Html5 Video error code: ' + errorCode);
|
||||||
|
|
||||||
var errorMsg = 'There was an error playing the video.';
|
var errorMsg = 'There was an error playing the video.';
|
||||||
|
|
||||||
|
|
@ -1064,9 +938,74 @@
|
||||||
message: errorMsg
|
message: errorMsg
|
||||||
});
|
});
|
||||||
|
|
||||||
|
}).on("click", function (e) {
|
||||||
|
|
||||||
|
if (this.paused) {
|
||||||
|
self.unpause();
|
||||||
|
} else {
|
||||||
|
self.pause();
|
||||||
|
}
|
||||||
|
|
||||||
|
}).on("dblclick", function () {
|
||||||
|
|
||||||
|
self.toggleFullscreen();
|
||||||
|
|
||||||
|
}).on("seeking", function (e) {
|
||||||
|
|
||||||
|
$("html").css("cursor", "wait");
|
||||||
|
|
||||||
|
}).on("seeked", function (e) {
|
||||||
|
|
||||||
|
$("html").css("cursor", "default");
|
||||||
|
|
||||||
|
}).on("loadstart", function () {
|
||||||
|
|
||||||
|
$("html").css("cursor", "progress");
|
||||||
|
|
||||||
|
}).on("canplay", function () {
|
||||||
|
|
||||||
|
$(".ui-loader").hide();
|
||||||
|
$("html").css("cursor", "default");
|
||||||
|
|
||||||
}).on("ended.playbackstopped", self.onPlaybackStopped)
|
}).on("ended.playbackstopped", self.onPlaybackStopped)
|
||||||
.on('ended.playnext', self.playNextAfterEnded);
|
.on('ended.playnext', self.playNextAfterEnded);
|
||||||
|
|
||||||
|
// Stop playback on browser back button nav
|
||||||
|
$(window).on("popstate", function () {
|
||||||
|
self.stop();
|
||||||
|
return;
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".mediaFlyoutContainer").on("click", "a", function (e) {
|
||||||
|
if (confirm("This option will close the video player. Proceed?")) {
|
||||||
|
self.stop();
|
||||||
|
} else {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
changeHandler("fullscreenchange");
|
||||||
|
changeHandler("mozfullscreenchange");
|
||||||
|
changeHandler("webkitfullscreenchange");
|
||||||
|
changeHandler("msfullscreenchange");
|
||||||
|
|
||||||
|
$(document).on("keyup.enhancePlayer", function (e) {
|
||||||
|
if (fullscreenExited) {
|
||||||
|
videoPlayer.removeClass("fullscreenVideo");
|
||||||
|
fullscreenExited = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.keyCode == 27) {
|
||||||
|
self.stop();
|
||||||
|
$(this).unbind("keyup.enhancePlayer");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
mediaPlayer.trigger("create");
|
||||||
|
|
||||||
|
fullscreenExited = false;
|
||||||
|
|
||||||
currentItem = item;
|
currentItem = item;
|
||||||
|
|
||||||
return videoElement[0];
|
return videoElement[0];
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,15 @@
|
||||||
var testableVideoElement = document.createElement('video');
|
var testableVideoElement = document.createElement('video');
|
||||||
var currentMediaElement;
|
var currentMediaElement;
|
||||||
var currentProgressInterval;
|
var currentProgressInterval;
|
||||||
var positionSlider;
|
|
||||||
var currentTimeElement;
|
|
||||||
var currentItem;
|
var currentItem;
|
||||||
var muteButton;
|
|
||||||
var unmuteButton;
|
|
||||||
var curentDurationTicks;
|
var curentDurationTicks;
|
||||||
var canClientSeek;
|
var canClientSeek;
|
||||||
var currentPlaylistIndex = 0;
|
var currentPlaylistIndex = 0;
|
||||||
|
|
||||||
|
self.currentTimeElement;
|
||||||
|
self.unmuteButton;
|
||||||
|
self.muteButton;
|
||||||
|
self.positionSlider;
|
||||||
self.isPositionSliderActive;
|
self.isPositionSliderActive;
|
||||||
self.volumeSlider;
|
self.volumeSlider;
|
||||||
self.startTimeTicksOffset;
|
self.startTimeTicksOffset;
|
||||||
|
|
@ -24,52 +24,28 @@
|
||||||
self.updateCanClientSeek = function (elem) {
|
self.updateCanClientSeek = function (elem) {
|
||||||
var duration = elem.duration;
|
var duration = elem.duration;
|
||||||
canClientSeek = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
|
canClientSeek = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
|
||||||
}
|
};
|
||||||
|
|
||||||
$(window).on("beforeunload popstate", function () {
|
|
||||||
|
|
||||||
var item = currentItem;
|
|
||||||
var media = currentMediaElement;
|
|
||||||
|
|
||||||
// Try to report playback stopped before the browser closes
|
|
||||||
if (item && media && currentProgressInterval) {
|
|
||||||
|
|
||||||
var endTime = currentMediaElement.currentTime;
|
|
||||||
|
|
||||||
var position = Math.floor(10000000 * endTime) + self.startTimeTicksOffset;
|
|
||||||
|
|
||||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function replaceQueryString(url, param, value) {
|
|
||||||
var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
|
|
||||||
if (url.match(re))
|
|
||||||
return url.replace(re, '$1' + param + "=" + value + '$2');
|
|
||||||
else
|
|
||||||
return url + '&' + param + "=" + value;
|
|
||||||
}
|
|
||||||
|
|
||||||
self.updateVolumeButtons = function (vol) {
|
self.updateVolumeButtons = function (vol) {
|
||||||
|
|
||||||
if (vol) {
|
if (vol) {
|
||||||
muteButton.show();
|
self.muteButton.show();
|
||||||
unmuteButton.hide();
|
self.unmuteButton.hide();
|
||||||
} else {
|
} else {
|
||||||
muteButton.hide();
|
self.muteButton.hide();
|
||||||
unmuteButton.show();
|
self.unmuteButton.show();
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
self.getCurrentTicks = function (mediaElement) {
|
self.getCurrentTicks = function (mediaElement) {
|
||||||
return Math.floor(10000000 * (mediaElement || currentMediaElement).currentTime) + self.startTimeTicksOffset;
|
return Math.floor(10000000 * (mediaElement || currentMediaElement).currentTime) + self.startTimeTicksOffset;
|
||||||
}
|
};
|
||||||
|
|
||||||
self.onPlaybackStopped = function () {
|
self.onPlaybackStopped = function () {
|
||||||
|
|
||||||
$(this).off('ended.playbackstopped');
|
$(this).off('ended.playbackstopped');
|
||||||
|
|
||||||
currentTimeElement.empty();
|
self.currentTimeElement.empty();
|
||||||
|
|
||||||
var endTime = this.currentTime;
|
var endTime = this.currentTime;
|
||||||
|
|
||||||
|
|
@ -79,8 +55,6 @@
|
||||||
|
|
||||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
|
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
|
||||||
|
|
||||||
$("#mediaPlayer").hide();
|
|
||||||
|
|
||||||
if (currentItem.MediaType == "Video") {
|
if (currentItem.MediaType == "Video") {
|
||||||
ApiClient.stopActiveEncodings();
|
ApiClient.stopActiveEncodings();
|
||||||
if (self.isFullScreen()) {
|
if (self.isFullScreen()) {
|
||||||
|
|
@ -88,14 +62,14 @@
|
||||||
}
|
}
|
||||||
self.resetEnhancements();
|
self.resetEnhancements();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
self.playNextAfterEnded = function () {
|
self.playNextAfterEnded = function () {
|
||||||
|
|
||||||
$(this).off('ended.playnext');
|
$(this).off('ended.playnext');
|
||||||
|
|
||||||
self.nextTrack();
|
self.nextTrack();
|
||||||
}
|
};
|
||||||
|
|
||||||
self.startProgressInterval = function (itemId) {
|
self.startProgressInterval = function (itemId) {
|
||||||
|
|
||||||
|
|
@ -110,25 +84,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
}, intervalTime);
|
}, intervalTime);
|
||||||
}
|
};
|
||||||
|
|
||||||
function sendProgressUpdate(itemId) {
|
|
||||||
|
|
||||||
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, self.getCurrentTicks(), currentMediaElement.paused, currentMediaElement.volume == 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearProgressInterval() {
|
|
||||||
|
|
||||||
if (currentProgressInterval) {
|
|
||||||
clearTimeout(currentProgressInterval);
|
|
||||||
currentProgressInterval = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function canPlayWebm() {
|
|
||||||
|
|
||||||
return testableVideoElement.canPlayType('video/webm').replace(/no/, '');
|
|
||||||
}
|
|
||||||
|
|
||||||
self.getTranscodingExtension = function () {
|
self.getTranscodingExtension = function () {
|
||||||
|
|
||||||
|
|
@ -146,7 +102,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return '.mp4';
|
return '.mp4';
|
||||||
}
|
};
|
||||||
|
|
||||||
self.changeStream = function (ticks, params) {
|
self.changeStream = function (ticks, params) {
|
||||||
|
|
||||||
|
|
@ -211,49 +167,7 @@
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
function onPositionSliderChange() {
|
|
||||||
|
|
||||||
self.isPositionSliderActive = false;
|
|
||||||
|
|
||||||
var newPercent = parseInt(this.value);
|
|
||||||
|
|
||||||
var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks;
|
|
||||||
|
|
||||||
self.changeStream(Math.floor(newPositionTicks));
|
|
||||||
}
|
|
||||||
|
|
||||||
$(function () {
|
|
||||||
|
|
||||||
muteButton = $('#muteButton');
|
|
||||||
unmuteButton = $('#unmuteButton');
|
|
||||||
|
|
||||||
currentTimeElement = $('.currentTime');
|
|
||||||
|
|
||||||
self.volumeSlider = $('.volumeSlider').on('slidestop', function () {
|
|
||||||
|
|
||||||
var vol = this.value;
|
|
||||||
|
|
||||||
self.updateVolumeButtons(vol);
|
|
||||||
currentMediaElement.volume = vol;
|
|
||||||
});
|
|
||||||
|
|
||||||
positionSlider = $(".positionSlider").on('slidestart', function () {
|
|
||||||
|
|
||||||
self.isPositionSliderActive = true;
|
|
||||||
|
|
||||||
}).on('slidestop', onPositionSliderChange);
|
|
||||||
});
|
|
||||||
|
|
||||||
function endsWith(text, pattern) {
|
|
||||||
|
|
||||||
text = text.toLowerCase();
|
|
||||||
pattern = pattern.toLowerCase();
|
|
||||||
|
|
||||||
var d = text.length - pattern.length;
|
|
||||||
return d >= 0 && text.lastIndexOf(pattern) === d;
|
|
||||||
}
|
|
||||||
|
|
||||||
self.setCurrentTime = function (ticks, item, updateSlider) {
|
self.setCurrentTime = function (ticks, item, updateSlider) {
|
||||||
|
|
||||||
|
|
@ -270,156 +184,15 @@
|
||||||
var percent = ticks / curentDurationTicks;
|
var percent = ticks / curentDurationTicks;
|
||||||
percent *= 100;
|
percent *= 100;
|
||||||
|
|
||||||
positionSlider.val(percent).slider('enable').slider('refresh');
|
self.positionSlider.val(percent).slider('enable').slider('refresh');
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
positionSlider.slider('disable').slider('refresh');
|
self.positionSlider.slider('disable').slider('refresh');
|
||||||
}
|
}
|
||||||
|
|
||||||
currentTimeElement.html(timeText);
|
self.currentTimeElement.html(timeText);
|
||||||
}
|
|
||||||
|
|
||||||
function playAudio(item, startPositionTicks) {
|
|
||||||
|
|
||||||
startPositionTicks = startPositionTicks || 0;
|
|
||||||
|
|
||||||
var baseParams = {
|
|
||||||
audioChannels: 2,
|
|
||||||
audioBitrate: 128000,
|
|
||||||
StartTimeTicks: startPositionTicks
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var mp3Url = ApiClient.getUrl('Audio/' + item.Id + '/stream.mp3', $.extend({}, baseParams, {
|
|
||||||
audioCodec: 'mp3'
|
|
||||||
}));
|
|
||||||
|
|
||||||
var aacUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.aac', $.extend({}, baseParams, {
|
|
||||||
audioCodec: 'aac'
|
|
||||||
}));
|
|
||||||
|
|
||||||
var webmUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
|
||||||
audioCodec: 'Vorbis'
|
|
||||||
}));
|
|
||||||
|
|
||||||
var mediaStreams = item.MediaStreams || [];
|
|
||||||
|
|
||||||
var isStatic = false;
|
|
||||||
var seekParam = isStatic && startPositionTicks ? '#t=' + (startPositionTicks / 10000000) : '';
|
|
||||||
|
|
||||||
for (var i = 0, length = mediaStreams.length; i < length; i++) {
|
|
||||||
|
|
||||||
var stream = mediaStreams[i];
|
|
||||||
|
|
||||||
if (stream.Type == "Audio") {
|
|
||||||
|
|
||||||
// Stream statically when possible
|
|
||||||
if (endsWith(item.Path, ".aac") && stream.BitRate <= 256000) {
|
|
||||||
aacUrl += "&static=true" + seekParam;
|
|
||||||
isStatic = true;
|
|
||||||
}
|
|
||||||
else if (endsWith(item.Path, ".mp3") && stream.BitRate <= 256000) {
|
|
||||||
mp3Url += "&static=true" + seekParam;
|
|
||||||
isStatic = true;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
self.startTimeTicksOffset = isStatic ? 0 : startPositionTicks;
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
var requiresControls = $.browser.android || ($.browser.webkit && !$.browser.chrome);
|
|
||||||
|
|
||||||
// Can't autoplay in these browsers so we need to use the full controls
|
|
||||||
if (requiresControls) {
|
|
||||||
html += '<audio preload="auto" autoplay controls>';
|
|
||||||
} else {
|
|
||||||
html += '<audio preload="auto" style="display:none;" autoplay>';
|
|
||||||
}
|
|
||||||
html += '<source type="audio/mpeg" src="' + mp3Url + '" />';
|
|
||||||
html += '<source type="audio/aac" src="' + aacUrl + '" />';
|
|
||||||
html += '<source type="audio/webm" src="' + webmUrl + '" />';
|
|
||||||
html += '</audio';
|
|
||||||
|
|
||||||
var footer = $("#footer").show();
|
|
||||||
var nowPlayingBar = $('#nowPlayingBar');
|
|
||||||
//show stop button
|
|
||||||
$('#stopButton', nowPlayingBar).show();
|
|
||||||
$('#playButton', nowPlayingBar).hide();
|
|
||||||
$('#pauseButton', nowPlayingBar).show();
|
|
||||||
$('#fullscreenButton', nowPlayingBar).hide();
|
|
||||||
|
|
||||||
$('#previousTrackButton', nowPlayingBar).show();
|
|
||||||
$('#nextTrackButton', nowPlayingBar).show();
|
|
||||||
$('#playlistButton', nowPlayingBar).show();
|
|
||||||
|
|
||||||
$('#qualityButton', nowPlayingBar).hide();
|
|
||||||
$('#audioTracksButton', nowPlayingBar).hide();
|
|
||||||
$('#subtitleButton', nowPlayingBar).hide();
|
|
||||||
$('#chaptersButton', nowPlayingBar).hide();
|
|
||||||
|
|
||||||
$("#mediaPlayer", nowPlayingBar).show();
|
|
||||||
|
|
||||||
var mediaElement = $('#mediaElement', footer).html(html);
|
|
||||||
var audioElement = $("audio", mediaElement);
|
|
||||||
|
|
||||||
var initialVolume = localStorage.getItem("volume") || 0.5;
|
|
||||||
|
|
||||||
audioElement.each(function () {
|
|
||||||
this.volume = initialVolume;
|
|
||||||
});
|
|
||||||
|
|
||||||
self.volumeSlider.val(initialVolume).slider('refresh');
|
|
||||||
self.updateVolumeButtons(initialVolume);
|
|
||||||
|
|
||||||
audioElement.on("volumechange", function () {
|
|
||||||
|
|
||||||
var vol = this.volume;
|
|
||||||
|
|
||||||
localStorage.setItem("volume", vol);
|
|
||||||
|
|
||||||
self.updateVolumeButtons(vol);
|
|
||||||
|
|
||||||
}).on("play.once", function () {
|
|
||||||
|
|
||||||
if (!requiresControls) {
|
|
||||||
audioElement.hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
self.updateCanClientSeek(this);
|
|
||||||
|
|
||||||
audioElement.off("play.once");
|
|
||||||
|
|
||||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id, true, item.MediaType);
|
|
||||||
|
|
||||||
self.startProgressInterval(item.Id);
|
|
||||||
|
|
||||||
}).on("pause", function () {
|
|
||||||
|
|
||||||
$('#playButton', nowPlayingBar).show();
|
|
||||||
$('#pauseButton', nowPlayingBar).hide();
|
|
||||||
|
|
||||||
}).on("playing", function () {
|
|
||||||
|
|
||||||
$('#playButton', nowPlayingBar).hide();
|
|
||||||
$('#pauseButton', nowPlayingBar).show();
|
|
||||||
|
|
||||||
}).on("timeupdate", function () {
|
|
||||||
|
|
||||||
if (!self.isPositionSliderActive) {
|
|
||||||
|
|
||||||
self.setCurrentTime(self.getCurrentTicks(this), item, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
}).on("ended.playbackstopped", self.onPlaybackStopped).on('ended.playnext', self.playNextAfterEnded);
|
|
||||||
|
|
||||||
currentItem = item;
|
|
||||||
curentDurationTicks = item.RunTimeTicks;
|
|
||||||
|
|
||||||
return audioElement[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
self.canPlayVideoDirect = function (item, videoStream, audioStream, subtitleStream, maxWidth, bitrate) {
|
self.canPlayVideoDirect = function (item, videoStream, audioStream, subtitleStream, maxWidth, bitrate) {
|
||||||
|
|
||||||
if (item.VideoType != "VideoFile" || item.LocationType != "FileSystem") {
|
if (item.VideoType != "VideoFile" || item.LocationType != "FileSystem") {
|
||||||
|
|
@ -462,30 +235,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return extension.toLowerCase() == 'mp4';
|
return extension.toLowerCase() == 'mp4';
|
||||||
}
|
};
|
||||||
|
|
||||||
function canPlayAudioStreamDirect(audioStream) {
|
|
||||||
|
|
||||||
var audioCodec = (audioStream.Codec || '').toLowerCase().replace('-', '');
|
|
||||||
|
|
||||||
if (audioCodec.indexOf('aac') == -1 &&
|
|
||||||
audioCodec.indexOf('mp3') == -1 &&
|
|
||||||
audioCodec.indexOf('mpeg') == -1) {
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (audioStream.Channels == null) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// IE won't play at all if more than two channels
|
|
||||||
if (audioStream.Channels > 2 && $.browser.msie) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
self.getFinalVideoParams = function (item, maxWidth, bitrate, audioStreamIndex, subtitleStreamIndex, transcodingExtension) {
|
self.getFinalVideoParams = function (item, maxWidth, bitrate, audioStreamIndex, subtitleStreamIndex, transcodingExtension) {
|
||||||
|
|
||||||
|
|
@ -660,7 +410,7 @@
|
||||||
|
|
||||||
var mediaElement;
|
var mediaElement;
|
||||||
|
|
||||||
$("#mediaPlayer").show();
|
var mediaControls = $('#nowPlayingBar');
|
||||||
|
|
||||||
if (item.MediaType === "Video") {
|
if (item.MediaType === "Video") {
|
||||||
|
|
||||||
|
|
@ -668,10 +418,13 @@
|
||||||
mediaElement = self.initVideoPlayer();
|
mediaElement = self.initVideoPlayer();
|
||||||
currentItem = item;
|
currentItem = item;
|
||||||
curentDurationTicks = item.RunTimeTicks;
|
curentDurationTicks = item.RunTimeTicks;
|
||||||
|
mediaControls = $("#videoControls");
|
||||||
|
|
||||||
} else if (item.MediaType === "Audio") {
|
} else if (item.MediaType === "Audio") {
|
||||||
|
|
||||||
mediaElement = playAudio(item, startPosition);
|
mediaElement = playAudio(item, startPosition);
|
||||||
|
mediaControls.show();
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
throw new Error("Unrecognized media type");
|
throw new Error("Unrecognized media type");
|
||||||
}
|
}
|
||||||
|
|
@ -751,32 +504,9 @@
|
||||||
"' title='" + htmlTitle + "' src='" + url + "' style='height:40px;display:inline-block;' /></a></div>";
|
"' title='" + htmlTitle + "' src='" + url + "' style='height:40px;display:inline-block;' /></a></div>";
|
||||||
html += "<div class='nowPlayingText' title='" + htmlTitle + "'>" + titleHtml(nowPlayingText) + "</div>";
|
html += "<div class='nowPlayingText' title='" + htmlTitle + "'>" + titleHtml(nowPlayingText) + "</div>";
|
||||||
|
|
||||||
var nowPlayingBar = $('#nowPlayingBar');
|
$('.nowPlayingMediaInfo', mediaControls).html(html);
|
||||||
$('.nowPlayingMediaInfo', nowPlayingBar).html(html);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function trunc(string, len) {
|
|
||||||
if (string.length > 0 && string.length < len) return string;
|
|
||||||
var trimmed = $.trim(string).substring(0, len).split(" ").slice(0, -1).join(" ");
|
|
||||||
if (trimmed) {
|
|
||||||
trimmed += "...";
|
|
||||||
} else {
|
|
||||||
trimmed = "---"
|
|
||||||
}
|
|
||||||
return trimmed;
|
|
||||||
}
|
|
||||||
|
|
||||||
function trimTitle(title) {
|
|
||||||
return title.replace("\n---", "");
|
|
||||||
}
|
|
||||||
|
|
||||||
function titleHtml(title) {
|
|
||||||
var titles = title.split("\n");
|
|
||||||
return (trunc(titles[0], 30) + "<br />" + trunc(titles[1], 30)).replace("---", " ");
|
|
||||||
}
|
|
||||||
|
|
||||||
var getItemFields = "MediaStreams,Chapters,Path";
|
|
||||||
|
|
||||||
self.getItemsForPlayback = function (query) {
|
self.getItemsForPlayback = function (query) {
|
||||||
|
|
||||||
var userId = Dashboard.getCurrentUserId();
|
var userId = Dashboard.getCurrentUserId();
|
||||||
|
|
@ -1133,16 +863,13 @@
|
||||||
|
|
||||||
}).trigger("ended");
|
}).trigger("ended");
|
||||||
|
|
||||||
$("#mediaPlayer").hide();
|
|
||||||
|
|
||||||
if (currentItem.MediaType == "Video") {
|
if (currentItem.MediaType == "Video") {
|
||||||
if (self.isFullScreen()) {
|
if (self.isFullScreen()) {
|
||||||
self.exitFullScreen();
|
self.exitFullScreen();
|
||||||
}
|
}
|
||||||
self.resetEnhancements();
|
self.resetEnhancements();
|
||||||
} else {
|
} else {
|
||||||
var footer = $("#footer");
|
$('#nowPlayingBar').hide();
|
||||||
footer.hide();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -1157,6 +884,286 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
self.bindPositionSlider = function () {
|
||||||
|
self.positionSlider.on('slidestart', function (e) {
|
||||||
|
|
||||||
|
self.isPositionSliderActive = true;
|
||||||
|
|
||||||
|
}).on('slidestop', onPositionSliderChange);
|
||||||
|
};
|
||||||
|
|
||||||
|
self.bindVolumeSlider = function () {
|
||||||
|
self.volumeSlider.on('slidestop', function () {
|
||||||
|
|
||||||
|
console.log("slideStop");
|
||||||
|
|
||||||
|
var vol = this.value;
|
||||||
|
|
||||||
|
self.updateVolumeButtons(vol);
|
||||||
|
currentMediaElement.volume = vol;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$(window).on("beforeunload popstate", function () {
|
||||||
|
|
||||||
|
var item = currentItem;
|
||||||
|
var media = currentMediaElement;
|
||||||
|
|
||||||
|
// Try to report playback stopped before the browser closes
|
||||||
|
if (item && media && currentProgressInterval) {
|
||||||
|
|
||||||
|
var endTime = currentMediaElement.currentTime;
|
||||||
|
|
||||||
|
var position = Math.floor(10000000 * endTime) + self.startTimeTicksOffset;
|
||||||
|
|
||||||
|
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
initPlayer();
|
||||||
|
});
|
||||||
|
|
||||||
|
function initPlayer() {
|
||||||
|
self.muteButton = $('.muteButton');
|
||||||
|
self.unmuteButton = $('.unmuteButton');
|
||||||
|
self.currentTimeElement = $('.currentTime');
|
||||||
|
self.volumeSlider = $('.volumeSlider');
|
||||||
|
self.positionSlider = $(".positionSlider");
|
||||||
|
|
||||||
|
self.bindVolumeSlider();
|
||||||
|
self.bindPositionSlider();
|
||||||
|
};
|
||||||
|
|
||||||
|
function replaceQueryString(url, param, value) {
|
||||||
|
var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
|
||||||
|
if (url.match(re))
|
||||||
|
return url.replace(re, '$1' + param + "=" + value + '$2');
|
||||||
|
else
|
||||||
|
return url + '&' + param + "=" + value;
|
||||||
|
};
|
||||||
|
|
||||||
|
function sendProgressUpdate(itemId) {
|
||||||
|
|
||||||
|
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, self.getCurrentTicks(), currentMediaElement.paused, currentMediaElement.volume == 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
function clearProgressInterval() {
|
||||||
|
|
||||||
|
if (currentProgressInterval) {
|
||||||
|
clearTimeout(currentProgressInterval);
|
||||||
|
currentProgressInterval = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function canPlayWebm() {
|
||||||
|
|
||||||
|
return testableVideoElement.canPlayType('video/webm').replace(/no/, '');
|
||||||
|
};
|
||||||
|
|
||||||
|
function onPositionSliderChange() {
|
||||||
|
|
||||||
|
self.isPositionSliderActive = false;
|
||||||
|
|
||||||
|
var newPercent = parseInt(this.value);
|
||||||
|
|
||||||
|
var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks;
|
||||||
|
|
||||||
|
self.changeStream(Math.floor(newPositionTicks));
|
||||||
|
};
|
||||||
|
|
||||||
|
function endsWith(text, pattern) {
|
||||||
|
|
||||||
|
text = text.toLowerCase();
|
||||||
|
pattern = pattern.toLowerCase();
|
||||||
|
|
||||||
|
var d = text.length - pattern.length;
|
||||||
|
return d >= 0 && text.lastIndexOf(pattern) === d;
|
||||||
|
};
|
||||||
|
|
||||||
|
function playAudio(item, startPositionTicks) {
|
||||||
|
|
||||||
|
startPositionTicks = startPositionTicks || 0;
|
||||||
|
|
||||||
|
var baseParams = {
|
||||||
|
audioChannels: 2,
|
||||||
|
audioBitrate: 128000,
|
||||||
|
StartTimeTicks: startPositionTicks
|
||||||
|
};
|
||||||
|
|
||||||
|
var mp3Url = ApiClient.getUrl('Audio/' + item.Id + '/stream.mp3', $.extend({}, baseParams, {
|
||||||
|
audioCodec: 'mp3'
|
||||||
|
}));
|
||||||
|
|
||||||
|
var aacUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.aac', $.extend({}, baseParams, {
|
||||||
|
audioCodec: 'aac'
|
||||||
|
}));
|
||||||
|
|
||||||
|
var webmUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
||||||
|
audioCodec: 'Vorbis'
|
||||||
|
}));
|
||||||
|
|
||||||
|
var mediaStreams = item.MediaStreams || [];
|
||||||
|
|
||||||
|
var isStatic = false;
|
||||||
|
var seekParam = isStatic && startPositionTicks ? '#t=' + (startPositionTicks / 10000000) : '';
|
||||||
|
|
||||||
|
for (var i = 0, length = mediaStreams.length; i < length; i++) {
|
||||||
|
|
||||||
|
var stream = mediaStreams[i];
|
||||||
|
|
||||||
|
if (stream.Type == "Audio") {
|
||||||
|
|
||||||
|
// Stream statically when possible
|
||||||
|
if (endsWith(item.Path, ".aac") && stream.BitRate <= 256000) {
|
||||||
|
aacUrl += "&static=true" + seekParam;
|
||||||
|
isStatic = true;
|
||||||
|
}
|
||||||
|
else if (endsWith(item.Path, ".mp3") && stream.BitRate <= 256000) {
|
||||||
|
mp3Url += "&static=true" + seekParam;
|
||||||
|
isStatic = true;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
self.startTimeTicksOffset = isStatic ? 0 : startPositionTicks;
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
var requiresControls = $.browser.android || ($.browser.webkit && !$.browser.chrome);
|
||||||
|
|
||||||
|
// Can't autoplay in these browsers so we need to use the full controls
|
||||||
|
if (requiresControls) {
|
||||||
|
html += '<audio preload="auto" autoplay controls>';
|
||||||
|
} else {
|
||||||
|
html += '<audio preload="auto" style="display:none;" autoplay>';
|
||||||
|
}
|
||||||
|
html += '<source type="audio/mpeg" src="' + mp3Url + '" />';
|
||||||
|
html += '<source type="audio/aac" src="' + aacUrl + '" />';
|
||||||
|
html += '<source type="audio/webm" src="' + webmUrl + '" />';
|
||||||
|
html += '</audio>';
|
||||||
|
|
||||||
|
var nowPlayingBar = $('#nowPlayingBar').show();
|
||||||
|
//show stop button
|
||||||
|
$('#stopButton', nowPlayingBar).show();
|
||||||
|
$('#playButton', nowPlayingBar).hide();
|
||||||
|
$('#pauseButton', nowPlayingBar).show();
|
||||||
|
$('#fullscreenButton', nowPlayingBar).hide();
|
||||||
|
|
||||||
|
$('#previousTrackButton', nowPlayingBar).show();
|
||||||
|
$('#nextTrackButton', nowPlayingBar).show();
|
||||||
|
$('#playlistButton', nowPlayingBar).show();
|
||||||
|
|
||||||
|
$('#qualityButton', nowPlayingBar).hide();
|
||||||
|
$('#audioTracksButton', nowPlayingBar).hide();
|
||||||
|
$('#subtitleButton', nowPlayingBar).hide();
|
||||||
|
$('#chaptersButton', nowPlayingBar).hide();
|
||||||
|
|
||||||
|
$('#mediaElement', nowPlayingBar).html(html);
|
||||||
|
var audioElement = $("audio", mediaElement);
|
||||||
|
|
||||||
|
var initialVolume = localStorage.getItem("volume") || 0.5;
|
||||||
|
|
||||||
|
audioElement.each(function () {
|
||||||
|
this.volume = initialVolume;
|
||||||
|
});
|
||||||
|
|
||||||
|
self.volumeSlider.val(initialVolume).slider('refresh');
|
||||||
|
self.updateVolumeButtons(initialVolume);
|
||||||
|
|
||||||
|
audioElement.on("volumechange", function () {
|
||||||
|
|
||||||
|
var vol = this.volume;
|
||||||
|
|
||||||
|
localStorage.setItem("volume", vol);
|
||||||
|
|
||||||
|
self.updateVolumeButtons(vol);
|
||||||
|
|
||||||
|
}).on("play.once", function () {
|
||||||
|
|
||||||
|
if (!requiresControls) {
|
||||||
|
audioElement.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
self.updateCanClientSeek(this);
|
||||||
|
|
||||||
|
audioElement.off("play.once");
|
||||||
|
|
||||||
|
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id, true, item.MediaType);
|
||||||
|
|
||||||
|
self.startProgressInterval(item.Id);
|
||||||
|
|
||||||
|
}).on("pause", function () {
|
||||||
|
|
||||||
|
$('#playButton', nowPlayingBar).show();
|
||||||
|
$('#pauseButton', nowPlayingBar).hide();
|
||||||
|
|
||||||
|
}).on("playing", function () {
|
||||||
|
|
||||||
|
$('#playButton', nowPlayingBar).hide();
|
||||||
|
$('#pauseButton', nowPlayingBar).show();
|
||||||
|
|
||||||
|
}).on("timeupdate", function () {
|
||||||
|
|
||||||
|
if (!self.isPositionSliderActive) {
|
||||||
|
|
||||||
|
self.setCurrentTime(self.getCurrentTicks(this), item, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
}).on("ended.playbackstopped", self.onPlaybackStopped).on('ended.playnext', self.playNextAfterEnded);
|
||||||
|
|
||||||
|
currentItem = item;
|
||||||
|
curentDurationTicks = item.RunTimeTicks;
|
||||||
|
|
||||||
|
return audioElement[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
function canPlayAudioStreamDirect(audioStream) {
|
||||||
|
|
||||||
|
var audioCodec = (audioStream.Codec || '').toLowerCase().replace('-', '');
|
||||||
|
|
||||||
|
if (audioCodec.indexOf('aac') == -1 &&
|
||||||
|
audioCodec.indexOf('mp3') == -1 &&
|
||||||
|
audioCodec.indexOf('mpeg') == -1) {
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (audioStream.Channels == null) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// IE won't play at all if more than two channels
|
||||||
|
if (audioStream.Channels > 2 && $.browser.msie) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
function trunc(string, len) {
|
||||||
|
if (string.length > 0 && string.length < len) return string;
|
||||||
|
var trimmed = $.trim(string).substring(0, len).split(" ").slice(0, -1).join(" ");
|
||||||
|
if (trimmed) {
|
||||||
|
trimmed += "...";
|
||||||
|
} else {
|
||||||
|
trimmed = "---"
|
||||||
|
}
|
||||||
|
return trimmed;
|
||||||
|
};
|
||||||
|
|
||||||
|
function trimTitle(title) {
|
||||||
|
return title.replace("\n---", "");
|
||||||
|
};
|
||||||
|
|
||||||
|
function titleHtml(title) {
|
||||||
|
var titles = title.split("\n");
|
||||||
|
return (trunc(titles[0], 30) + "<br />" + trunc(titles[1], 30)).replace("---", " ");
|
||||||
|
};
|
||||||
|
|
||||||
|
var getItemFields = "MediaStreams,Chapters,Path";
|
||||||
}
|
}
|
||||||
|
|
||||||
window.MediaPlayer = new mediaPlayer();
|
window.MediaPlayer = new mediaPlayer();
|
||||||
|
|
|
||||||
|
|
@ -1313,28 +1313,81 @@ $(ApiClient).on("websocketmessage", Dashboard.onWebSocketMessageReceived);
|
||||||
|
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b" style="display: none;">';
|
|
||||||
|
|
||||||
footerHtml += '<div id="mediaPlayer" style="display: none;">';
|
var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
|
||||||
|
|
||||||
footerHtml += '<div id="videoBackdrop" style="display: none;">';
|
videoPlayerHtml += '<div id="videoBackdrop">';
|
||||||
|
videoPlayerHtml += '<div id="videoPlayer">';
|
||||||
|
videoPlayerHtml += '<div id="videoElement">';
|
||||||
|
|
||||||
footerHtml += '<div id="videoPlayer">';
|
videoPlayerHtml += '<div id="play" class="status"></div>';
|
||||||
footerHtml += '<div id="mediaElement"></div>';
|
videoPlayerHtml += '<div id="pause" class="status"></div>';
|
||||||
footerHtml += '</div>';
|
|
||||||
|
|
||||||
footerHtml += '</div>';
|
videoPlayerHtml += '</div>';
|
||||||
|
|
||||||
footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar">';
|
// Create controls
|
||||||
|
videoPlayerHtml += '<div id="videoControls" class="videoControls">';
|
||||||
|
|
||||||
footerHtml += '<div class="barBackground ui-bar-b">';
|
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 += '<a id="video-playlistButton" class="mediaButton playlistButton" href="playlist.videoPlayerHtml" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="Playlist">Playlist</a>';
|
||||||
|
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="nowPlayingMediaInfo"></div>';
|
||||||
|
|
||||||
|
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 += '<div class="volumeSliderContainer sliderContainer">';
|
||||||
|
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 += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
|
||||||
|
|
||||||
|
videoPlayerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="video-qualityButton" class="mediaButton qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
||||||
|
videoPlayerHtml += '<div class="mediaFlyoutContainer"><div id="video-qualityFlyout" style="display:none;" class="mediaPlayerFlyout"></div></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 class="mediaFlyoutContainer"><div id="video-audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout audioTracksFlyout"></div></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 class="mediaFlyoutContainer"><div id="video-subtitleFlyout" style="display:none;" class="mediaPlayerFlyout subtitleFlyout"></div></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 class="mediaFlyoutContainer"><div id="video-chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
|
||||||
|
|
||||||
|
videoPlayerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="video-sendMediaButton" class="mediaButton sendMediaButton" title="Remote" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Remote</button>';
|
||||||
|
|
||||||
|
videoPlayerHtml += '</div>'; // videoControls
|
||||||
|
|
||||||
|
videoPlayerHtml += '</div>'; // videoPlayer
|
||||||
|
videoPlayerHtml += '</div>'; // videoBackdrop
|
||||||
|
videoPlayerHtml += '</div>'; // mediaPlayer
|
||||||
|
|
||||||
|
$(document.body).append(videoPlayerHtml);
|
||||||
|
|
||||||
|
var mediaPlayerElem = $('#mediaPlayer', document.body);
|
||||||
|
mediaPlayerElem.trigger('create');
|
||||||
|
|
||||||
|
var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b">';
|
||||||
|
footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar" style="display:none;">';
|
||||||
|
footerHtml += '<div class="barBackground ui-bar-b"></div>';
|
||||||
footerHtml += '<div style="display:inline-block;width:12px;"></div>';
|
footerHtml += '<div style="display:inline-block;width:12px;"></div>';
|
||||||
footerHtml += '<a id="playlistButton" class="mediaButton playlistButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="Playlist">Playlist</a>';
|
footerHtml += '<a id="playlistButton" class="mediaButton playlistButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="Playlist">Playlist</a>';
|
||||||
footerHtml += '<button id="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>';
|
footerHtml += '<button id="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>';
|
||||||
footerHtml += '<button id="playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
|
footerHtml += '<button id="playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
|
||||||
footerHtml += '<button id="pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
|
footerHtml += '<button id="pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
|
||||||
|
|
||||||
|
footerHtml += '<div id="mediaElement"></div>';
|
||||||
|
|
||||||
footerHtml += '<button id="stopButton" class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="stop" data-iconpos="notext" data-inline="true">Stop</button>';
|
footerHtml += '<button id="stopButton" class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="stop" data-iconpos="notext" data-inline="true">Stop</button>';
|
||||||
footerHtml += '<button id="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>';
|
footerHtml += '<button id="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>';
|
||||||
|
|
||||||
|
|
@ -1352,8 +1405,6 @@ $(function () {
|
||||||
footerHtml += '<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" />';
|
footerHtml += '<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" />';
|
||||||
footerHtml += '</div>';
|
footerHtml += '</div>';
|
||||||
|
|
||||||
footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
|
|
||||||
|
|
||||||
footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="mediaButton qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="mediaButton qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
||||||
footerHtml += '<div class="mediaFlyoutContainer"><div id="qualityFlyout" style="display:none;" class="mediaPlayerFlyout"></div></div>';
|
footerHtml += '<div class="mediaFlyoutContainer"><div id="qualityFlyout" style="display:none;" class="mediaPlayerFlyout"></div></div>';
|
||||||
|
|
||||||
|
|
@ -1366,16 +1417,13 @@ $(function () {
|
||||||
footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
|
footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
|
||||||
footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
|
footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
|
||||||
|
|
||||||
|
footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
|
||||||
|
|
||||||
footerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="sendMediaButton" class="mediaButton sendMediaButton" title="Remote" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Remote</button>';
|
footerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="sendMediaButton" class="mediaButton sendMediaButton" title="Remote" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Remote</button>';
|
||||||
|
|
||||||
footerHtml += '</div>';
|
footerHtml += '</div>';
|
||||||
|
|
||||||
footerHtml += '</div>';
|
|
||||||
|
|
||||||
footerHtml += '</div>';
|
|
||||||
|
|
||||||
footerHtml += '<div id="footerNotifications"></div>';
|
footerHtml += '<div id="footerNotifications"></div>';
|
||||||
|
|
||||||
footerHtml += '</div>';
|
footerHtml += '</div>';
|
||||||
|
|
||||||
$(document.body).append(footerHtml);
|
$(document.body).append(footerHtml);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue