1
0
Fork 0
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 2014-03-31 14:39:12 -07:00
parent bb54d12ca8
commit 47d87ccfe8
5 changed files with 132 additions and 95 deletions

View file

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

View file

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

View file

@ -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() {

View file

@ -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");

View file

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