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 */
.nowPlayingBar {
padding: 6px 0 24px 0;
border-top: 2px solid green;
}
.nowPlayingBar .highPosition {
z-index: 99999;
position: relative;
opacity: 0.5;
}
.nowPlayingBar .highPosition:hover:not(.barBackground ) {
opacity: 0.9;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.nowPlayingBar .barBackground {
border-top: 2px solid green;
position: absolute;
margin: -8px -0.5em -26px !important;
width: 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 ) {
position: relative;
}
@ -39,6 +45,15 @@
position: relative;
}
.fullscreenVideo #mediaElement {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.nowPlayingMediaInfo div {
display: inline-block;
}
@ -49,15 +64,17 @@
.nowPlayingMediaInfo {
position: relative;
display: inline-block;
margin-top: 3px;
vertical-align: top;
}
.nowPlayingText {
position: relative;
top: -3px;
margin-left: 3px;
margin-right: 2em;
margin: 0 2em 0 5px;
font-weight: normal;
top: -7px;
}
@media all and (max-width: 650px) {
@ -75,7 +92,6 @@
background: #000;
border: 1px solid #444;
width: 320px;
cursor: pointer;
margin: 20px;
position: fixed;
top: 50%;
@ -112,7 +128,6 @@
z-index: 99997;
background: #1d1d1d;
position: fixed;
overflow: hidden;
border: 1px solid green;
top: 50%;
left: 50%;
@ -130,14 +145,11 @@
width: 100% !important;
height: 100% !important;
border: 0 !important;
z-index: 999999 !important;
margin: 0 !important;
}
#videoPlayer #mediaElement {
position: absolute;
top: 0;
left: 0;
.fullscreenVideo .itemVideo {
z-index: 99996;
}
#videoPlayer .itemVideo {
@ -147,19 +159,23 @@
}
#videoPlayer .nowPlayingBar {
z-index: 99999;
padding: 0;
border: none !important;
height: 40px;
overflow: hidden;
height: 50px;
background-color: #1d1d1d;
position: absolute;
top: initial;
right: 0;
bottom: 10px;
bottom: 0;
left: 0;
}
#videoPlayer .nowPlayingBar .barBackground {
display: none;
border-width: 0;
}
#videoPlayer.fullscreenVideo .nowPlayingBar .barBackground {
border-width: 2px;
}
.currentTime {
@ -181,6 +197,7 @@
.sliderContainer {
display: inline-block;
margin-top: 10px;
}
.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) {
.chaptersButton, .audioTracksButton, .sendMediaButton {
display: none!important;
}
.positionSliderContainer, .currentTime {
.positionSliderContainer {
top: 0!important;
position: relative!important;
}
}
@media all and (max-width: 500px) {
.positionSliderContainer {
width: 80px;
}
.previousTrackButton, .nextTrackButton {
display: none!important;
@ -278,13 +298,31 @@ input[type="range"]::-ms-fill-upper {
border: 1px solid #999;
position: absolute;
z-index: 99999;
bottom: 78px;
bottom: 64px;
margin-left: -50px;
max-height: 300px;
overflow-y: auto;
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 {
width: 250px;
}
@ -421,3 +459,80 @@ input[type="range"]::-ms-fill-upper {
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;
color: #fff;
border: 0 !important;
height: 50px;
}
.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 () {
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="nowPlayingBar" class="nowPlayingBar" style="display:none;">';
footerHtml += '<div class="barBackground ui-bar-b"></div>';
footerHtml += '<div id="mediaElement"></div>';
footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar">';
footerHtml += '<div class="barBackground ui-bar-b">';
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 += '<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="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="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 += '</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 += '<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 += '<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 += '</div>';
footerHtml += '<div id="footerNotifications"></div>';
footerHtml += '</div>';
footerHtml += '</div>';
$(document.body).append(footerHtml);
@ -1359,7 +1362,7 @@ $(function () {
var footerElem = $('#footer', document.body);
footerElem.trigger('create');
$(window).on("beforeunload", function () {
$(window).on("beforeunload popstate", function () {
// Close the connection gracefully when possible
if (ApiClient.isWebSocketOpen() && !MediaPlayer.isPlaying()) {