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

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

12
dashboard-ui/scripts/mediaplayer.js
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");

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 += '</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