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

update now playing bar

Browse source
This commit is contained in:
Luke Pulverenti 2017-01-05 15:21:07 -05:00
parent 62590fc268
commit 8ab940f95a
3 changed files with 34 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

6
dashboard-ui/components/remotecontrol.js
View file

@ -517,6 +517,8 @@
if (player) { if (player) {
events.off(player, 'playbackstart', onPlaybackStart); events.off(player, 'playbackstart', onPlaybackStart);
events.off(player, 'statechange', onPlaybackStart);
events.off(player, 'repeatmodechange', onPlaybackStart);
events.off(player, 'playbackstop', onPlaybackStopped); events.off(player, 'playbackstop', onPlaybackStopped);
events.off(player, 'volumechange', onVolumeChanged); events.off(player, 'volumechange', onVolumeChanged);
events.off(player, 'pause', onPlayPauseStateChanged); events.off(player, 'pause', onPlayPauseStateChanged);
@ -543,6 +545,10 @@
}); });
events.on(player, 'playbackstart', onPlaybackStart); events.on(player, 'playbackstart', onPlaybackStart);
events.on(player, 'statechange', onPlaybackStart);
// TODO: Replace this with smaller changes on repeatmodechange.
// For now go cheap and just refresh the entire component
events.on(player, 'repeatmodechange', onPlaybackStart);
events.on(player, 'playbackstop', onPlaybackStopped); events.on(player, 'playbackstop', onPlaybackStopped);
events.on(player, 'volumechange', onVolumeChanged); events.on(player, 'volumechange', onVolumeChanged);
events.on(player, 'pause', onPlayPauseStateChanged); events.on(player, 'pause', onPlayPauseStateChanged);

6
dashboard-ui/css/nowplayingbar.css
View file

@ -259,11 +259,7 @@
@media all and (min-width: 800px) { @media all and (min-width: 800px) {
.nowPlayingBarRight .pauseButton { .nowPlayingBarRight .playPauseButton {
display: none;
}
.nowPlayingBarRight .unpauseButton {
display: none; display: none;
} }
} }

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

@ -12,8 +12,7 @@
var muteButton; var muteButton;
var volumeSlider; var volumeSlider;
var volumeSliderContainer; var volumeSliderContainer;
var unpauseButtons; var playPauseButtons;
var pauseButtons;
var positionSlider; var positionSlider;
var toggleRepeatButton; var toggleRepeatButton;
var toggleRepeatButtonIcon; var toggleRepeatButtonIcon;
@ -44,8 +43,7 @@
html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton autoSize"><i class="md-icon">skip_previous</i></button>'; html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton autoSize"><i class="md-icon">skip_previous</i></button>';
html += '<button is="paper-icon-button-light" class="unpauseButton mediaButton autoSize"><i class="md-icon">play_arrow</i></button>'; html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton autoSize"><i class="md-icon">pause</i></button>';
html += '<button is="paper-icon-button-light" class="pauseButton mediaButton autoSize"><i class="md-icon">pause</i></button>';
html += '<button is="paper-icon-button-light" class="stopButton mediaButton autoSize"><i class="md-icon">stop</i></button>'; html += '<button is="paper-icon-button-light" class="stopButton mediaButton autoSize"><i class="md-icon">stop</i></button>';
html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton autoSize"><i class="md-icon">skip_next</i></button>'; html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton autoSize"><i class="md-icon">skip_next</i></button>';
@ -67,8 +65,7 @@
html += '<div class="nowPlayingBarUserDataButtons">'; html += '<div class="nowPlayingBarUserDataButtons">';
html += '</div>'; html += '</div>';
html += '<button is="paper-icon-button-light" class="unpauseButton mediaButton autoSize"><i class="md-icon">play_arrow</i></button>'; html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton autoSize"><i class="md-icon">pause</i></button>';
html += '<button is="paper-icon-button-light" class="pauseButton mediaButton autoSize"><i class="md-icon">pause</i></button>';
html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton autoSize"><i class="md-icon">tablet_android</i></button>'; html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton autoSize"><i class="md-icon">tablet_android</i></button>';
html += '<button is="paper-icon-button-light" class="playlistButton mediaButton autoSize"><i class="md-icon">queue_music</i></button>'; html += '<button is="paper-icon-button-light" class="playlistButton mediaButton autoSize"><i class="md-icon">queue_music</i></button>';
@ -138,16 +135,8 @@
}); });
} }
function onPauseClick() { function onPlayPauseClick() {
if (currentPlayer) { playbackManager.playPause(currentPlayer);
currentPlayer.pause();
}
}
function onUnpauseClick() {
if (currentPlayer) {
currentPlayer.unpause();
}
} }
function bindEvents(elem) { function bindEvents(elem) {
@ -183,13 +172,9 @@
}); });
var i, length; var i, length;
pauseButtons = elem.querySelectorAll('.pauseButton'); playPauseButtons = elem.querySelectorAll('.playPauseButton');
for (i = 0, length = pauseButtons.length; i < length; i++) { for (i = 0, length = playPauseButtons.length; i < length; i++) {
pauseButtons[i].addEventListener('click', onPauseClick); playPauseButtons[i].addEventListener('click', onPlayPauseClick);
}
unpauseButtons = elem.querySelectorAll('.unpauseButton');
for (i = 0, length = unpauseButtons.length; i < length; i++) {
unpauseButtons[i].addEventListener('click', onUnpauseClick);
} }
elem.querySelector('.nextTrackButton').addEventListener('click', function () { elem.querySelector('.nextTrackButton').addEventListener('click', function () {
@ -341,20 +326,14 @@
if (isPaused) { if (isPaused) {
for (i = 0, length = pauseButtons.length; i < length; i++) { for (i = 0, length = playPauseButtons.length; i < length; i++) {
hideButton(pauseButtons[i]); playPauseButtons[i].querySelector('i').innerHTML = 'play_arrow';
}
for (i = 0, length = unpauseButtons.length; i < length; i++) {
showButton(unpauseButtons[i]);
} }
} else { } else {
for (i = 0, length = pauseButtons.length; i < length; i++) { for (i = 0, length = playPauseButtons.length; i < length; i++) {
showButton(pauseButtons[i]); playPauseButtons[i].querySelector('i').innerHTML = 'pause';
}
for (i = 0, length = unpauseButtons.length; i < length; i++) {
hideButton(unpauseButtons[i]);
} }
} }
} }
@ -421,13 +400,16 @@
} }
} }
var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks); if (currentTimeElement) {
if (runtimeTicks) { var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
timeText += " / " + datetime.getDisplayRunningTime(runtimeTicks);
if (runtimeTicks) {
timeText += " / " + datetime.getDisplayRunningTime(runtimeTicks);
}
currentTimeElement.innerHTML = timeText;
} }
currentTimeElement.innerHTML = timeText;
} }
function updatePlayerVolumeState(isMuted, volumeLevel) { function updatePlayerVolumeState(isMuted, volumeLevel) {
@ -709,6 +691,8 @@
if (player) { if (player) {
events.off(player, 'playbackstart', onPlaybackStart); events.off(player, 'playbackstart', onPlaybackStart);
events.off(player, 'statechange', onPlaybackStart);
events.off(player, 'repeatmodechange', onPlaybackStart);
events.off(player, 'playbackstop', onPlaybackStopped); events.off(player, 'playbackstop', onPlaybackStopped);
events.off(player, 'volumechange', onVolumeChanged); events.off(player, 'volumechange', onVolumeChanged);
events.off(player, 'pause', onPlayPauseStateChanged); events.off(player, 'pause', onPlayPauseStateChanged);
@ -751,6 +735,10 @@
}); });
events.on(player, 'playbackstart', onPlaybackStart); events.on(player, 'playbackstart', onPlaybackStart);
events.on(player, 'statechange', onPlaybackStart);
// TODO: Replace this with smaller changes on repeatmodechange.
// For now go cheap and just refresh the entire component
events.on(player, 'repeatmodechange', onPlaybackStart);
events.on(player, 'playbackstop', onPlaybackStopped); events.on(player, 'playbackstop', onPlaybackStopped);
events.on(player, 'volumechange', onVolumeChanged); events.on(player, 'volumechange', onVolumeChanged);
events.on(player, 'pause', onPlayPauseStateChanged); events.on(player, 'pause', onPlayPauseStateChanged);