mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Video player updates
* All buttons shown all the time * Added time feedback when dragging position slider
This commit is contained in:
Tim Hobbs
parent
bb54d12ca8
commit
47d87ccfe8
5 changed files with 132 additions and 95 deletions
|
|
@ -52,10 +52,40 @@
|
|||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#videoControls #video-basic-controls {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 20px;
|
||||
bottom: 0;
|
||||
width: 600px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#videoControls #video-advanced-controls {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 20px;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#videoControls .currentTime {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
#slider-tooltip {
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
background-color: #eee;
|
||||
border: 1px solid #333;
|
||||
color: #333;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Fullscreen
|
||||
***************************************/
|
||||
|
||||
|
|
@ -95,6 +125,17 @@
|
|||
display: none!important
|
||||
}
|
||||
|
||||
#mediaPlayer #video-advanced-controls {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#mediaPlayer #videoControls .mediaPlayerFlyout {
|
||||
text-align: left;
|
||||
margin-left: 0;
|
||||
right: 0;
|
||||
bottom: 83px;
|
||||
}
|
||||
|
||||
/* Media queries
|
||||
***************************************/
|
||||
|
||||
|
|
@ -165,87 +206,63 @@
|
|||
/****************************************/
|
||||
|
||||
@media all and (max-width: 1200px), all and (max-height: 720px) {
|
||||
#mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton {
|
||||
display: none!important;
|
||||
#videoControls .nowPlayingMediaInfo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton {
|
||||
display: initial!important;
|
||||
#videoControls .currentTime {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu .nowPlayingMediaInfo {
|
||||
display: none!important;
|
||||
#videoControls #video-advanced-controls {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 960px), all and (max-height: 550px) {
|
||||
#mediaPlayer .nowPlayingBarImage, #mediaPlayer .qualityButton, #mediaPlayer .audioTracksButton, #mediaPlayer .chaptersButton {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton {
|
||||
display: initial!important;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu .nowPlayingMediaInfo {
|
||||
display: none!important;
|
||||
#videoControls #video-advanced-controls {
|
||||
width: 275px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px), all and (max-height: 460px) {
|
||||
#mediaPlayer .muteButton, #mediaPlayer .unmuteButton, #mediaPlayer .nowPlayingMediaInfo {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
#mediaPlayer .volumeButton, #mediaPlayer .volumeSliderContainer {
|
||||
display: inline-block!important;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu #videoPlayer {
|
||||
#mediaPlayer #videoPlayer {
|
||||
margin-top: -180px;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu .itemVideo {
|
||||
#mediaPlayer .itemVideo {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu #videoControls {
|
||||
#mediaPlayer #videoControls {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton {
|
||||
display: initial!important;
|
||||
#mediaPlayer #video-basic-controls {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#mediaPlayer #video-basic-controls .volumeSliderContainer {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#mediaPlayer #video-basic-controls, #mediaPlayer #video-advanced-controls {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#mediaPlayer #videoControls .mediaPlayerFlyout {
|
||||
bottom: 148px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 640px), all and (max-height: 365px) {
|
||||
#mediaPlayer .fullscreenButton, #mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .qualityButton, #mediaPlayer .subtitleButton {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
#mediaPlayer .currentTime {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#mediaPlayer .volumeSliderContainer {
|
||||
vertical-align: middle;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu #videoPlayer {
|
||||
#mediaPlayer #videoPlayer {
|
||||
margin-top: -135px;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu .itemVideo {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu #videoControls {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#mediaPlayer.showVideoMenu .fullscreenButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .subtitleButton {
|
||||
display: initial!important;
|
||||
#mediaPlayer #video-advanced-controls {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -79,6 +79,10 @@
|
|||
width: 130px;
|
||||
}
|
||||
|
||||
#nowPlayingBar .positionSliderContainer {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.volumeSliderContainer {
|
||||
width: 90px;
|
||||
}
|
||||
|
|
@ -123,41 +127,41 @@ input[type="range"]::-ms-fill-upper {
|
|||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
.volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo {
|
||||
display: none!important;
|
||||
#nowPlayingBar .volumeButton, #nowPlayingBar .volumeSliderContainer, #nowPlayingBar .muteButton, #nowPlayingBar .unmuteButton, #nowPlayingBar .nowPlayingMediaInfo {
|
||||
display: none; /*!important;*/
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 650px) {
|
||||
.nowPlayingMediaInfo {
|
||||
#nowPlayingBar .nowPlayingMediaInfo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
.chaptersButton, .audioTracksButton {
|
||||
display: none!important;
|
||||
#nowPlayingBar .chaptersButton, #nowPlayingBar .audioTracksButton {
|
||||
display: none; /*!important;*/
|
||||
}
|
||||
|
||||
.positionSliderContainer, .currentTime {
|
||||
#nowPlayingBar .positionSliderContainer, #nowPlayingBar .currentTime {
|
||||
top: 0!important;
|
||||
position: relative!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
.positionSliderContainer {
|
||||
#nowPlayingBar .positionSliderContainer {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.previousTrackButton, .nextTrackButton {
|
||||
display: none!important;
|
||||
#nowPlayingBar .previousTrackButton, #nowPlayingBar .nextTrackButton {
|
||||
display: none; /*!important;*/
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 400px) {
|
||||
.playlistButton {
|
||||
display: none!important;
|
||||
#nowPlayingBar .playlistButton {
|
||||
display: none; /*!important;*/
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -173,18 +177,15 @@ input[type="range"]::-ms-fill-upper {
|
|||
position: absolute;
|
||||
z-index: 99999;
|
||||
bottom: 78px;
|
||||
margin-left: -50px;
|
||||
margin-left: -125px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chaptersFlyout {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.audioTracksFlyout {
|
||||
.chaptersFlyout,.audioTracksFlyout {
|
||||
width: 250px;
|
||||
margin-left: -150px;
|
||||
}
|
||||
|
||||
.mediaFlyoutOption {
|
||||
|
|
@ -248,7 +249,7 @@ input[type="range"]::-ms-fill-upper {
|
|||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.positionSliderContainer {
|
||||
#nowPlayingBar .positionSliderContainer {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -140,21 +140,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
self.toggleVideoPlayerMenu = function () {
|
||||
|
||||
var mediaPlayer = $("#mediaPlayer");
|
||||
|
||||
if (videoMenuVisible) {
|
||||
$(mediaPlayer).removeClass("showVideoMenu");
|
||||
} else {
|
||||
$(mediaPlayer).addClass("showVideoMenu");
|
||||
}
|
||||
|
||||
videoMenuVisible = !videoMenuVisible;
|
||||
|
||||
console.log("show vid click");
|
||||
};
|
||||
|
||||
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e) {
|
||||
|
||||
var videoControls = $('#videoControls');
|
||||
|
|
@ -227,6 +212,35 @@
|
|||
idleHandler(this);
|
||||
|
||||
});
|
||||
|
||||
var trackChange = false;
|
||||
|
||||
var tooltip = $('<div id="slider-tooltip"></div>');
|
||||
|
||||
$("#videoControls .positionSliderContainer .slider").on("change", function (e) {
|
||||
if (!trackChange) return;
|
||||
|
||||
var pct = $(this).val();
|
||||
|
||||
var time = self.curentDurationTicks * (Number(pct) * .01);
|
||||
|
||||
var tooltext = Dashboard.getDisplayTime(time)
|
||||
|
||||
tooltip.text(tooltext);
|
||||
|
||||
console.log("slidin", pct, self.curentDurationTicks, time);
|
||||
|
||||
}).on("slidestart", function (e) {
|
||||
trackChange = true;
|
||||
|
||||
var handle = $("#videoControls .positionSliderContainer .ui-slider-handle");
|
||||
|
||||
handle.after(tooltip);
|
||||
}).on("slidestop", function (e) {
|
||||
trackChange = false;
|
||||
|
||||
tooltip.remove();
|
||||
});
|
||||
});
|
||||
|
||||
function idleHandler() {
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
var currentProgressInterval;
|
||||
var currentItem;
|
||||
var currentMediaSource;
|
||||
var curentDurationTicks;
|
||||
var canClientSeek;
|
||||
var currentPlaylistIndex = 0;
|
||||
|
||||
self.curentDurationTicks = null;
|
||||
self.currentTimeElement = null;
|
||||
self.unmuteButton = null;
|
||||
self.muteButton = null;
|
||||
|
|
@ -200,12 +200,12 @@
|
|||
|
||||
var timeText = Dashboard.getDisplayTime(ticks);
|
||||
|
||||
if (curentDurationTicks) {
|
||||
if (self.curentDurationTicks) {
|
||||
|
||||
timeText += " / " + Dashboard.getDisplayTime(curentDurationTicks);
|
||||
timeText += " / " + Dashboard.getDisplayTime(self.curentDurationTicks);
|
||||
|
||||
if (updateSlider) {
|
||||
var percent = ticks / curentDurationTicks;
|
||||
var percent = ticks / self.curentDurationTicks;
|
||||
percent *= 100;
|
||||
|
||||
self.positionSlider.val(percent).slider('enable').slider('refresh');
|
||||
|
|
@ -446,7 +446,7 @@
|
|||
|
||||
videoPlayer(self, item, currentMediaSource, startPosition, user);
|
||||
mediaElement = self.initVideoPlayer();
|
||||
curentDurationTicks = currentMediaSource.RunTimeTicks;
|
||||
self.curentDurationTicks = currentMediaSource.RunTimeTicks;
|
||||
|
||||
mediaControls = $("#videoControls");
|
||||
|
||||
|
|
@ -458,7 +458,7 @@
|
|||
mediaElement = playAudio(item, currentMediaSource, startPosition);
|
||||
mediaControls.show();
|
||||
|
||||
curentDurationTicks = currentMediaSource.RunTimeTicks;
|
||||
self.curentDurationTicks = currentMediaSource.RunTimeTicks;
|
||||
|
||||
} else {
|
||||
throw new Error("Unrecognized media type");
|
||||
|
|
|
|||
|
|
@ -1288,6 +1288,8 @@ $(function () {
|
|||
videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
|
||||
videoPlayerHtml += '</div>';
|
||||
|
||||
videoPlayerHtml += '<div id="video-basic-controls">';
|
||||
|
||||
videoPlayerHtml += '<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>';
|
||||
|
|
@ -1306,7 +1308,8 @@ $(function () {
|
|||
videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
|
||||
videoPlayerHtml += '</div>';
|
||||
|
||||
videoPlayerHtml += '<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 += '</div>'; // video-basic-controls
|
||||
videoPlayerHtml += '<div id="video-advanced-controls">';
|
||||
|
||||
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>';
|
||||
|
|
@ -1322,7 +1325,9 @@ $(function () {
|
|||
|
||||
videoPlayerHtml += '<button onclick="CastPlayer.initializeLocalPlayer();CastPlayer.playMedia();" id="video-ccastButton" class="mediaButton videoCCastButton" title="Cast" type="button" data-icon="ccast" data-iconpos="notext" data-inline="true" style="display: none;">Cast</button>';
|
||||
|
||||
videoPlayerHtml += '<button onclick="MediaPlayer.toggleVideoPlayerMenu();" id="video-videoPlayerMenuButton" class="mediaButton videoPlayerMenuButton" title="Menu" type="button" data-icon="bars" data-iconpos="notext" data-inline="true">Menu</button>';
|
||||
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 += '</div>'; // video-advanced-controls
|
||||
|
||||
videoPlayerHtml += '</div>'; // videoControls
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue