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

replace sliders

Browse source
This commit is contained in:
Luke Pulverenti 2015-06-27 15:53:36 -04:00
parent 09d4af3357
commit 1b74dbdfbf
13 changed files with 1359 additions and 1439 deletions
Download patch file Download diff file Expand all files Collapse all files

112
dashboard-ui/scripts/nowplayingbar.js
View file

@ -9,12 +9,9 @@
var unmuteButton;
var muteButton;
var volumeSlider;
var volumeSliderContainer;
var isVolumeSliderActive;
var unpauseButton;
var pauseButton;
var positionSlider;
var isPositionSliderActive;
var lastPlayerState;
@ -25,12 +22,17 @@
// add return false because on iOS clicking the bar often ends up clicking the content underneath.
html += '<div class="nowPlayingBar" style="display:none;">';
html += '<div class="nowPlayingBarPositionContainer">';
html += '<paper-slider pin step=".1" min="0" max="100" value="0" class="nowPlayingBarPositionSlider"></paper-slider>';
html += '</div>';
html += '<div class="nowPlayingBarInfoContainer">';
html += '<div class="nowPlayingImage"></div>';
html += '<div class="nowPlayingText"></div>';
html += '<div class="nowPlayingBarText"></div>';
html += '</div>';
// The onclicks are needed due to the return false above
html += '<paper-icon-button icon="tablet-android" onclick="Dashboard.navigate(\'nowplaying.html\', false);" class="mediaButton remoteControlButton"></paper-icon-button>';
html += '<paper-icon-button icon="view-list" onclick="Dashboard.navigate(\'nowplaying.html?tab=Playlist\', false);" class="mediaButton playlistButton"></paper-icon-button>';
html += '<div class="nowPlayingBarCenter">';
html += '<paper-icon-button icon="skip-previous" class="previousTrackButton mediaButton"></paper-icon-button>';
@ -41,23 +43,26 @@
html += '<paper-icon-button icon="skip-next" class="nextTrackButton mediaButton"></paper-icon-button>';
html += '<div id="mediaElement"></div>';
html += '<div class="positionSliderContainer sliderContainer">';
html += '<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" />';
html += '<div class="nowPlayingBarCurrentTime"></div>';
html += '</div>';
html += '<div class="currentTime"></div>';
html += '<div class="nowPlayingBarRight">';
html += '<paper-icon-button icon="volume-up" class="muteButton mediaButton"></paper-icon-button>';
html += '<paper-icon-button icon="volume-off" class="unmuteButton mediaButton"></paper-icon-button>';
html += '<div class="volumeSliderContainer sliderContainer">';
html += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
html += '</div>';
html += '<paper-slider pin step="1" min="0" max="100" value="0" class="nowPlayingBarVolumeSlider" style="width:100px;vertical-align:middle;"></paper-slider>';
html += '<div class="nowPlayingBarUserDataButtons">';
html += '</div>';
html += '<paper-icon-button icon="play-arrow" class="mediaButton unpauseButton"></paper-icon-button>';
html += '<paper-icon-button icon="pause" class="mediaButton pauseButton"></paper-icon-button>';
html += '<paper-icon-button icon="tablet-android" onclick="Dashboard.navigate(\'nowplaying.html\', false);" class="mediaButton remoteControlButton"></paper-icon-button>';
html += '<paper-icon-button icon="queue-music" onclick="Dashboard.navigate(\'nowplaying.html?tab=Playlist\', false);" class="mediaButton playlistButton"></paper-icon-button>';
html += '</div>';
html += '</div>';
return html;
@ -65,9 +70,9 @@
function bindEvents(elem) {
currentTimeElement = $('.currentTime', elem);
currentTimeElement = $('.nowPlayingBarCurrentTime', elem);
nowPlayingImageElement = $('.nowPlayingImage', elem);
nowPlayingTextElement = $('.nowPlayingText', elem);
nowPlayingTextElement = $('.nowPlayingBarText', elem);
nowPlayingUserData = $('.nowPlayingBarUserDataButtons', elem);
$(elem).on('swipeup', function () {
@ -123,28 +128,15 @@
}
});
volumeSlider = $('.volumeSlider', elem).on('slidestart', function () {
isVolumeSliderActive = true;
}).on('slidestop', function () {
isVolumeSliderActive = false;
volumeSlider = $('.nowPlayingBarVolumeSlider', elem).on('change', function () {
if (currentPlayer) {
currentPlayer.setVolume(this.value);
}
});
volumeSliderContainer = $('.volumeSliderContainer', elem);
})[0];
positionSlider = $('.positionSlider', elem).on('slidestart', function () {
isPositionSliderActive = true;
}).on('slidestop', function () {
isPositionSliderActive = false;
positionSlider = $('.nowPlayingBarPositionSlider', elem).on('change', function () {
if (currentPlayer && lastPlayerState) {
@ -153,7 +145,24 @@
currentPlayer.seek(Math.floor(newPositionTicks));
}
});
})[0];
positionSlider._setPinValue = function (value) {
var state = lastPlayerState;
if (!state || !state.NowPlayingItem || !state.NowPlayingItem.RunTimeTicks) {
this.pinValue = '--:--';
return;
}
var ticks = state.NowPlayingItem.RunTimeTicks;
ticks /= 100;
ticks *= value;
this.pinValue = Dashboard.getDisplayTime(ticks);
};
}
function getNowPlayingBar() {
@ -212,27 +221,21 @@
updatePlayerVolumeState(state, playerInfo);
var nowPlayingItem = state.NowPlayingItem || {};
if (!isPositionSliderActive) {
if (!positionSlider.dragging) {
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
var pct = playState.PositionTicks / nowPlayingItem.RunTimeTicks;
pct *= 100;
positionSlider.val(pct);
positionSlider.value = pct;
} else {
positionSlider.val(0);
positionSlider.value = 0;
}
if (playState.CanSeek) {
positionSlider.slider("enable");
} else {
positionSlider.slider("disable");
}
positionSlider.slider('refresh');
positionSlider.disabled = !playState.CanSeek;
}
var timeText = Dashboard.getDisplayTime(playState.PositionTicks);
@ -263,12 +266,6 @@
var showUnmuteButton = true;
var showVolumeSlider = true;
//if (supportedCommands.indexOf('SetVolume') == -1) {
// volumeSlider.prop('disabled', 'disabled');
//} else {
// volumeSlider.prop('disabled', '');
//}
if (supportedCommands.indexOf('Mute') == -1) {
showMuteButton = false;
}
@ -307,17 +304,11 @@
hideButton(unmuteButton);
}
if (showVolumeSlider) {
volumeSliderContainer.show();
} else {
volumeSliderContainer.hide();
}
$(volumeSlider).visible(showVolumeSlider);
if (!isVolumeSliderActive) {
volumeSlider.val(playState.VolumeLevel || 0);
if (!volumeSlider.dragging) {
volumeSlider.value = playState.VolumeLevel || 0;
}
volumeSlider.slider('refresh');
}
var currentImgUrl;
@ -338,7 +329,7 @@
nowPlayingTextElement.html(nameHtml);
var url;
var imgHeight = 60;
var imgHeight = 90;
var nowPlayingItem = state.NowPlayingItem;
@ -386,9 +377,6 @@
var imgHtml = '<img src="' + url + '" />';
if (state.NowPlayingItem.Id) {
imgHtml = '<a href="' + LibraryBrowser.getHref(state.NowPlayingItem) + '">' + imgHtml + '</a>';
}
nowPlayingImageElement.html(imgHtml);
if (nowPlayingItem.Id) {