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

Major video player overhaul

Updates, enhancements and some bug fixes too.
This commit is contained in:
Tim Hobbs 2014-03-08 00:09:45 -08:00
parent 4b43d4c9e7
commit 97e9b8ceea
7 changed files with 1287 additions and 1013 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

View file

@ -1,27 +1,33 @@
/* Now playing bar */ /* Now playing bar */
.nowPlayingBar { .nowPlayingBar {
padding: 6px 0 24px 0; position: absolute;
border-top: 2px solid green; top: 0;
right: 0;
bottom: 0;
left: 0;
} }
.nowPlayingBar .highPosition {
z-index: 99999;
position: relative;
opacity: 0.5;
}
.nowPlayingBar .highPosition:hover:not(.barBackground ) {
opacity: 0.9;
}
.nowPlayingBar .barBackground { .nowPlayingBar .barBackground {
border-top: 2px solid green; 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;
-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 .nowPlayingBar {
top: 95% !important;
}
.nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) { .nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
position: relative; position: relative;
} }
@ -39,6 +45,15 @@
position: relative; position: relative;
} }
.fullscreenVideo #mediaElement {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.nowPlayingMediaInfo div { .nowPlayingMediaInfo div {
display: inline-block; display: inline-block;
} }
@ -49,15 +64,17 @@
.nowPlayingMediaInfo { .nowPlayingMediaInfo {
position: relative;
display: inline-block; display: inline-block;
margin-top: 3px;
vertical-align: top;
} }
.nowPlayingText { .nowPlayingText {
position: relative; position: relative;
top: -3px; margin: 0 2em 0 5px;
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) {
@ -75,7 +92,6 @@
background: #000; background: #000;
border: 1px solid #444; border: 1px solid #444;
width: 320px; width: 320px;
cursor: pointer;
margin: 20px; margin: 20px;
position: fixed; position: fixed;
top: 50%; top: 50%;
@ -112,7 +128,6 @@
z-index: 99997; z-index: 99997;
background: #1d1d1d; background: #1d1d1d;
position: fixed; position: fixed;
overflow: hidden;
border: 1px solid green; border: 1px solid green;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -130,15 +145,12 @@
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
border: 0 !important; border: 0 !important;
z-index: 999999 !important;
margin: 0 !important; margin: 0 !important;
} }
#videoPlayer #mediaElement { .fullscreenVideo .itemVideo {
position: absolute; z-index: 99996;
top: 0; }
left: 0;
}
#videoPlayer .itemVideo { #videoPlayer .itemVideo {
position: static; position: static;
@ -147,19 +159,23 @@
} }
#videoPlayer .nowPlayingBar { #videoPlayer .nowPlayingBar {
z-index: 99999;
padding: 0; padding: 0;
border: none !important; height: 50px;
height: 40px;
overflow: hidden;
background-color: #1d1d1d; background-color: #1d1d1d;
position: absolute; position: absolute;
top: initial;
right: 0; right: 0;
bottom: 10px; bottom: 0;
left: 0; left: 0;
} }
#videoPlayer .nowPlayingBar .barBackground { #videoPlayer .nowPlayingBar .barBackground {
display: none; border-width: 0;
}
#videoPlayer.fullscreenVideo .nowPlayingBar .barBackground {
border-width: 2px;
} }
.currentTime { .currentTime {
@ -181,6 +197,7 @@
.sliderContainer { .sliderContainer {
display: inline-block; display: inline-block;
margin-top: 10px;
} }
.positionSliderContainer { .positionSliderContainer {
@ -240,21 +257,24 @@ input[type="range"]::-ms-fill-upper {
} }
} }
@media all and (max-width: 640px) {
.positionSliderContainer {
width: 80px;
}
}
@media all and (max-width: 600px) { @media all and (max-width: 600px) {
.chaptersButton, .audioTracksButton, .sendMediaButton { .chaptersButton, .audioTracksButton, .sendMediaButton {
display: none!important; display: none!important;
} }
.positionSliderContainer, .currentTime { .positionSliderContainer {
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;
@ -278,13 +298,31 @@ 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: 78px; bottom: 64px;
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;
ss}
.chaptersFlyout { .chaptersFlyout {
width: 250px; width: 250px;
} }
@ -420,4 +458,81 @@ input[type="range"]::-ms-fill-upper {
.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;
}
} }

View file

@ -683,6 +683,7 @@ h1 .imageLink {
z-index: 99997; z-index: 99997;
color: #fff; color: #fff;
border: 0 !important; border: 0 !important;
height: 50px;
} }
.footerNotification { .footerNotification {

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

@ -1304,18 +1304,18 @@ $(ApiClient).on("websocketmessage", Dashboard.onWebSocketMessageReceived);
$(function () { $(function () {
var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b" style="display: none;">';
var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b">'; footerHtml += '<div id="mediaElement"></div>';
footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar" style="display:none;">';
footerHtml += '<div class="barBackground ui-bar-b"></div>'; footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar">';
footerHtml += '<div class="barBackground ui-bar-b">';
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>';
@ -1333,6 +1333,8 @@ $(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>';
@ -1345,13 +1347,14 @@ $(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 id="footerNotifications"></div>'; footerHtml += '<div id="footerNotifications"></div>';
footerHtml += '</div>';
footerHtml += '</div>'; footerHtml += '</div>';
$(document.body).append(footerHtml); $(document.body).append(footerHtml);
@ -1359,7 +1362,7 @@ $(function () {
var footerElem = $('#footer', document.body); var footerElem = $('#footer', document.body);
footerElem.trigger('create'); footerElem.trigger('create');
$(window).on("beforeunload", function () { $(window).on("beforeunload popstate", function () {
// Close the connection gracefully when possible // Close the connection gracefully when possible
if (ApiClient.isWebSocketOpen() && !MediaPlayer.isPlaying()) { if (ApiClient.isWebSocketOpen() && !MediaPlayer.isPlaying()) {