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

Video player updates

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

125
dashboard-ui/css/mediaplayer-video.css
View file

@ -52,10 +52,40 @@
margin-top: 0px; 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 { #videoControls .currentTime {
margin-top: 25px; 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 /* Fullscreen
***************************************/ ***************************************/
@ -95,6 +125,17 @@
display: none!important 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 /* Media queries
***************************************/ ***************************************/
@ -165,87 +206,63 @@
/****************************************/ /****************************************/
@media all and (max-width: 1200px), all and (max-height: 720px) { @media all and (max-width: 1200px), all and (max-height: 720px) {
#mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton { #videoControls .nowPlayingMediaInfo {
display: none!important; display: none;
} }
#mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton { #videoControls .currentTime {
display: initial!important; margin-right: 0;
} }
#mediaPlayer.showVideoMenu .nowPlayingMediaInfo { #videoControls #video-advanced-controls {
display: none!important; width: 350px;
} }
} }
@media all and (max-width: 960px), all and (max-height: 550px) { @media all and (max-width: 960px), all and (max-height: 550px) {
#mediaPlayer .nowPlayingBarImage, #mediaPlayer .qualityButton, #mediaPlayer .audioTracksButton, #mediaPlayer .chaptersButton { #videoControls #video-advanced-controls {
display: none!important; width: 275px;
}
#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;
} }
} }
@media all and (max-width: 800px), all and (max-height: 460px) { @media all and (max-width: 800px), all and (max-height: 460px) {
#mediaPlayer .muteButton, #mediaPlayer .unmuteButton, #mediaPlayer .nowPlayingMediaInfo { #mediaPlayer #videoPlayer {
display: none!important;
}
#mediaPlayer .volumeButton, #mediaPlayer .volumeSliderContainer {
display: inline-block!important;
}
#mediaPlayer.showVideoMenu #videoPlayer {
margin-top: -180px; margin-top: -180px;
} }
#mediaPlayer.showVideoMenu .itemVideo { #mediaPlayer .itemVideo {
margin-bottom: 120px; margin-bottom: 120px;
} }
#mediaPlayer.showVideoMenu #videoControls { #mediaPlayer #videoControls {
height: 120px; height: 120px;
} }
#mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton { #mediaPlayer #video-basic-controls {
display: initial!important; 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) { @media all and (max-width: 640px), all and (max-height: 365px) {
#mediaPlayer .fullscreenButton, #mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .qualityButton, #mediaPlayer .subtitleButton { #mediaPlayer #videoPlayer {
display: none!important;
}
#mediaPlayer .currentTime {
margin-top: 15px;
}
#mediaPlayer .volumeSliderContainer {
vertical-align: middle;
margin-top: -5px;
}
#mediaPlayer.showVideoMenu #videoPlayer {
margin-top: -135px; margin-top: -135px;
} }
#mediaPlayer.showVideoMenu .itemVideo { #mediaPlayer #video-advanced-controls {
margin-bottom: 120px; width: 150px;
}
#mediaPlayer.showVideoMenu #videoControls {
height: 120px;
}
#mediaPlayer.showVideoMenu .fullscreenButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .subtitleButton {
display: initial!important;
} }
} }

37
dashboard-ui/css/mediaplayer.css
View file

@ -79,6 +79,10 @@
width: 130px; width: 130px;
} }
#nowPlayingBar .positionSliderContainer {
margin-top: 8px;
}
.volumeSliderContainer { .volumeSliderContainer {
width: 90px; width: 90px;
} }
@ -123,41 +127,41 @@ input[type="range"]::-ms-fill-upper {
} }
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
.volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo { #nowPlayingBar .volumeButton, #nowPlayingBar .volumeSliderContainer, #nowPlayingBar .muteButton, #nowPlayingBar .unmuteButton, #nowPlayingBar .nowPlayingMediaInfo {
display: none!important; display: none; /*!important;*/
} }
} }
@media all and (max-width: 650px) { @media all and (max-width: 650px) {
.nowPlayingMediaInfo { #nowPlayingBar .nowPlayingMediaInfo {
display: none; display: none;
} }
} }
@media all and (max-width: 600px) { @media all and (max-width: 600px) {
.chaptersButton, .audioTracksButton { #nowPlayingBar .chaptersButton, #nowPlayingBar .audioTracksButton {
display: none!important; display: none; /*!important;*/
} }
.positionSliderContainer, .currentTime { #nowPlayingBar .positionSliderContainer, #nowPlayingBar .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 { #nowPlayingBar .positionSliderContainer {
width: 80px; width: 80px;
} }
.previousTrackButton, .nextTrackButton { #nowPlayingBar .previousTrackButton, #nowPlayingBar .nextTrackButton {
display: none!important; display: none; /*!important;*/
} }
} }
@media all and (max-width: 400px) { @media all and (max-width: 400px) {
.playlistButton { #nowPlayingBar .playlistButton {
display: none!important; display: none; /*!important;*/
} }
} }
@ -173,18 +177,15 @@ input[type="range"]::-ms-fill-upper {
position: absolute; position: absolute;
z-index: 99999; z-index: 99999;
bottom: 78px; bottom: 78px;
margin-left: -50px; margin-left: -125px;
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
font-size: 13px; font-size: 13px;
} }
.chaptersFlyout { .chaptersFlyout,.audioTracksFlyout {
width: 250px;
}
.audioTracksFlyout {
width: 250px; width: 250px;
margin-left: -150px;
} }
.mediaFlyoutOption { .mediaFlyoutOption {
@ -248,7 +249,7 @@ input[type="range"]::-ms-fill-upper {
} }
@media (min-width: 1440px) { @media (min-width: 1440px) {
.positionSliderContainer { #nowPlayingBar .positionSliderContainer {
width: 300px; width: 300px;
} }
} }

44
dashboard-ui/scripts/mediaplayer-video.js
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) { $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e) {
var videoControls = $('#videoControls'); var videoControls = $('#videoControls');
@ -227,6 +212,35 @@
idleHandler(this); 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() { function idleHandler() {

12
dashboard-ui/scripts/mediaplayer.js
View file

@ -9,10 +9,10 @@
var currentProgressInterval; var currentProgressInterval;
var currentItem; var currentItem;
var currentMediaSource; var currentMediaSource;
var curentDurationTicks;
var canClientSeek; var canClientSeek;
var currentPlaylistIndex = 0; var currentPlaylistIndex = 0;
self.curentDurationTicks = null;
self.currentTimeElement = null; self.currentTimeElement = null;
self.unmuteButton = null; self.unmuteButton = null;
self.muteButton = null; self.muteButton = null;
@ -200,12 +200,12 @@
var timeText = Dashboard.getDisplayTime(ticks); var timeText = Dashboard.getDisplayTime(ticks);
if (curentDurationTicks) { if (self.curentDurationTicks) {
timeText += " / " + Dashboard.getDisplayTime(curentDurationTicks); timeText += " / " + Dashboard.getDisplayTime(self.curentDurationTicks);
if (updateSlider) { if (updateSlider) {
var percent = ticks / curentDurationTicks; var percent = ticks / self.curentDurationTicks;
percent *= 100; percent *= 100;
self.positionSlider.val(percent).slider('enable').slider('refresh'); self.positionSlider.val(percent).slider('enable').slider('refresh');
@ -446,7 +446,7 @@
videoPlayer(self, item, currentMediaSource, startPosition, user); videoPlayer(self, item, currentMediaSource, startPosition, user);
mediaElement = self.initVideoPlayer(); mediaElement = self.initVideoPlayer();
curentDurationTicks = currentMediaSource.RunTimeTicks; self.curentDurationTicks = currentMediaSource.RunTimeTicks;
mediaControls = $("#videoControls"); mediaControls = $("#videoControls");
@ -458,7 +458,7 @@
mediaElement = playAudio(item, currentMediaSource, startPosition); mediaElement = playAudio(item, currentMediaSource, startPosition);
mediaControls.show(); mediaControls.show();
curentDurationTicks = currentMediaSource.RunTimeTicks; self.curentDurationTicks = currentMediaSource.RunTimeTicks;
} else { } else {
throw new Error("Unrecognized media type"); throw new Error("Unrecognized media type");

9
dashboard-ui/scripts/site.js
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 += '<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>';
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 += '<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-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-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 += '<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 += '</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 += '<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 += '<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="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 videoPlayerHtml += '</div>'; // videoControls