define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', 'layoutManager', 'playbackManager', 'nowPlayingHelper', 'apphost', 'dom', 'connectionManager', 'itemContextMenu', 'paper-icon-button-light', 'emby-ratingbutton'], function (require, datetime, itemHelper, events, browser, imageLoader, layoutManager, playbackManager, nowPlayingHelper, appHost, dom, connectionManager, itemContextMenu) { 'use strict'; var currentPlayer; var currentPlayerSupportedCommands = []; var currentTimeElement; var nowPlayingImageElement; var nowPlayingTextElement; var nowPlayingUserData; var muteButton; var volumeSlider; var volumeSliderContainer; var playPauseButtons; var positionSlider; var toggleRepeatButton; var toggleRepeatButtonIcon; var lastUpdateTime = 0; var lastPlayerState = {}; var isEnabled; var currentRuntimeTicks = 0; var isVisibilityAllowed = true; function getNowPlayingBarHtml() { var html = ''; html += '
'; return html; } function onSlideDownComplete() { this.classList.add('hide'); } function slideDown(elem) { // trigger reflow void elem.offsetWidth; elem.classList.add('nowPlayingBar-hidden'); dom.addEventListener(elem, dom.whichTransitionEvent(), onSlideDownComplete, { once: true }); } function slideUp(elem) { dom.removeEventListener(elem, dom.whichTransitionEvent(), onSlideDownComplete, { once: true }); elem.classList.remove('hide'); // trigger reflow void elem.offsetWidth; elem.classList.remove('nowPlayingBar-hidden'); } function onPlayPauseClick() { playbackManager.playPause(currentPlayer); } function bindEvents(elem) { currentTimeElement = elem.querySelector('.nowPlayingBarCurrentTime'); nowPlayingImageElement = elem.querySelector('.nowPlayingImage'); nowPlayingTextElement = elem.querySelector('.nowPlayingBarText'); nowPlayingUserData = elem.querySelector('.nowPlayingBarUserDataButtons'); positionSlider = elem.querySelector('.nowPlayingBarPositionSlider'); muteButton = elem.querySelector('.muteButton'); playPauseButtons = elem.querySelectorAll('.playPauseButton'); toggleRepeatButton = elem.querySelector('.toggleRepeatButton'); volumeSlider = elem.querySelector('.nowPlayingBarVolumeSlider'); volumeSliderContainer = elem.querySelector('.nowPlayingBarVolumeSliderContainer'); muteButton.addEventListener('click', function () { if (currentPlayer) { playbackManager.toggleMute(currentPlayer); } }); elem.querySelector('.stopButton').addEventListener('click', function () { if (currentPlayer) { playbackManager.stop(currentPlayer); } }); playPauseButtons.forEach((button) => { button.addEventListener('click', onPlayPauseClick); }); elem.querySelector('.nextTrackButton').addEventListener('click', function () { if (currentPlayer) { playbackManager.nextTrack(currentPlayer); } }); elem.querySelector('.previousTrackButton').addEventListener('click', function (e) { if (currentPlayer) { if (currentPlayer.id === 'htmlaudioplayer' && (currentPlayer._currentTime >= 5 || !playbackManager.previousTrack(currentPlayer))) { // Cancel this event if doubleclick is fired if (e.detail > 1 && playbackManager.previousTrack(currentPlayer)) { return; } playbackManager.seekPercent(0, currentPlayer); // This is done automatically by playbackManager, however, setting this here gives instant visual feedback positionSlider.value = 0; } else { playbackManager.previousTrack(currentPlayer); } } }); elem.querySelector('.previousTrackButton').addEventListener('dblclick', function () { if (currentPlayer) { playbackManager.previousTrack(currentPlayer); } }); elem.querySelector('.btnShuffle').addEventListener('click', function () { if (currentPlayer) { if (playbackManager.getPlaylistShuffleMode(currentPlayer) === 'Sorted') { playbackManager.setPlaylistShuffleMode('Shuffle', currentPlayer); } else { playbackManager.setPlaylistShuffleMode('Sorted', currentPlayer); } } }); toggleRepeatButton = elem.querySelector('.toggleRepeatButton'); toggleRepeatButton.addEventListener('click', function () { if (currentPlayer) { switch (playbackManager.getRepeatMode(currentPlayer)) { case 'RepeatAll': playbackManager.setRepeatMode('RepeatOne', currentPlayer); break; case 'RepeatOne': playbackManager.setRepeatMode('RepeatNone', currentPlayer); break; default: playbackManager.setRepeatMode('RepeatAll', currentPlayer); break; } } }); toggleRepeatButtonIcon = toggleRepeatButton.querySelector('.material-icons'); if (appHost.supports('physicalvolumecontrol')) { volumeSliderContainer.classList.add('hide'); } else { volumeSliderContainer.classList.remove('hide'); } function setVolume() { if (currentPlayer) { currentPlayer.setVolume(this.value); } } volumeSlider.addEventListener('change', setVolume); volumeSlider.addEventListener('mousemove', setVolume); volumeSlider.addEventListener('touchmove', setVolume); positionSlider.addEventListener('change', function () { if (currentPlayer) { var newPercent = parseFloat(this.value); playbackManager.seekPercent(newPercent, currentPlayer); } }); positionSlider.getBubbleText = function (value) { var state = lastPlayerState; if (!state || !state.NowPlayingItem || !currentRuntimeTicks) { return '--:--'; } var ticks = currentRuntimeTicks; ticks /= 100; ticks *= value; return datetime.getDisplayRunningTime(ticks); }; elem.addEventListener('click', function (e) { if (!dom.parentWithTag(e.target, ['BUTTON', 'INPUT'])) { showRemoteControl(); } }); } function showRemoteControl() { require(['appRouter'], function (appRouter) { appRouter.showNowPlaying(); }); } var nowPlayingBarElement; function getNowPlayingBar() { if (nowPlayingBarElement) { return Promise.resolve(nowPlayingBarElement); } return new Promise(function (resolve, reject) { require(['appFooter-shared', 'itemShortcuts', 'css!./nowPlayingBar.css', 'emby-slider'], function (appfooter, itemShortcuts) { var parentContainer = appfooter.element; nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar'); if (nowPlayingBarElement) { resolve(nowPlayingBarElement); return; } parentContainer.insertAdjacentHTML('afterbegin', getNowPlayingBarHtml()); nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar'); if (layoutManager.mobile) { hideButton(nowPlayingBarElement.querySelector('.shuffle')); } if (browser.safari && browser.slow) { // Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc. nowPlayingBarElement.classList.add('noMediaProgress'); } itemShortcuts.on(nowPlayingBarElement); bindEvents(nowPlayingBarElement); resolve(nowPlayingBarElement); }); }); } function showButton(button) { button.classList.remove('hide'); } function hideButton(button) { button.classList.add('hide'); } function updatePlayPauseState(isPaused) { if (playPauseButtons) { playPauseButtons.forEach((button) => { const icon = button.querySelector('.material-icons'); icon.classList.remove('play_arrow', 'pause'); icon.classList.add(isPaused ? 'play_arrow' : 'pause'); }); } } function updatePlayerStateInternal(event, state, player) { showNowPlayingBar(); lastPlayerState = state; var playerInfo = playbackManager.getPlayerInfo(); var playState = state.PlayState || {}; updatePlayPauseState(playState.IsPaused); var supportedCommands = playerInfo.supportedCommands; currentPlayerSupportedCommands = supportedCommands; if (supportedCommands.indexOf('SetRepeatMode') === -1) { toggleRepeatButton.classList.add('hide'); } else { toggleRepeatButton.classList.remove('hide'); } updateRepeatModeDisplay(playState.RepeatMode); onPlaylistShuffleModeChange(); updatePlayerVolumeState(playState.IsMuted, playState.VolumeLevel); if (positionSlider && !positionSlider.dragging) { positionSlider.disabled = !playState.CanSeek; // determines if both forward and backward buffer progress will be visible var isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null; positionSlider.setIsClear(isProgressClear); } var nowPlayingItem = state.NowPlayingItem || {}; updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playbackManager.getBufferedRanges(player)); updateNowPlayingInfo(state); } function updateRepeatModeDisplay(repeatMode) { toggleRepeatButtonIcon.classList.remove('repeat', 'repeat_one'); if (repeatMode === 'RepeatAll') { toggleRepeatButtonIcon.classList.add('repeat'); toggleRepeatButton.classList.add('repeatButton-active'); } else if (repeatMode === 'RepeatOne') { toggleRepeatButtonIcon.classList.add('repeat_one'); toggleRepeatButton.classList.add('repeatButton-active'); } else { toggleRepeatButtonIcon.classList.add('repeat'); toggleRepeatButton.classList.remove('repeatButton-active'); } } function updateTimeDisplay(positionTicks, runtimeTicks, bufferedRanges) { // See bindEvents for why this is necessary if (positionSlider && !positionSlider.dragging) { if (runtimeTicks) { var pct = positionTicks / runtimeTicks; pct *= 100; positionSlider.value = pct; } else { positionSlider.value = 0; } } if (positionSlider) { positionSlider.setBufferedRanges(bufferedRanges, runtimeTicks, positionTicks); } if (currentTimeElement) { var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks); if (runtimeTicks) { timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks); } currentTimeElement.innerHTML = timeText; } } function updatePlayerVolumeState(isMuted, volumeLevel) { var supportedCommands = currentPlayerSupportedCommands; var showMuteButton = true; var showVolumeSlider = true; if (supportedCommands.indexOf('ToggleMute') === -1) { showMuteButton = false; } const muteButtonIcon = muteButton.querySelector('.material-icons'); muteButtonIcon.classList.remove('volume_off', 'volume_up'); muteButtonIcon.classList.add(isMuted ? 'volume_off' : 'volume_up'); if (supportedCommands.indexOf('SetVolume') === -1) { showVolumeSlider = false; } if (currentPlayer.isLocalPlayer && appHost.supports('physicalvolumecontrol')) { showMuteButton = false; showVolumeSlider = false; } if (showMuteButton) { showButton(muteButton); } else { hideButton(muteButton); } // See bindEvents for why this is necessary if (volumeSlider) { if (showVolumeSlider) { volumeSliderContainer.classList.remove('hide'); } else { volumeSliderContainer.classList.add('hide'); } if (!volumeSlider.dragging) { volumeSlider.value = volumeLevel || 0; } } } function getTextActionButton(item, text) { if (!text) { text = itemHelper.getDisplayName(item); } return `${text}`; } function seriesImageUrl(item, options) { if (!item) { throw new Error('item cannot be null!'); } if (item.Type !== 'Episode') { return null; } options = options || {}; options.type = options.type || 'Primary'; if (options.type === 'Primary') { if (item.SeriesPrimaryImageTag) { options.tag = item.SeriesPrimaryImageTag; return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); } } if (options.type === 'Thumb') { if (item.SeriesThumbImageTag) { options.tag = item.SeriesThumbImageTag; return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); } if (item.ParentThumbImageTag) { options.tag = item.ParentThumbImageTag; return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); } } return null; } function imageUrl(item, options) { if (!item) { throw new Error('item cannot be null!'); } options = options || {}; options.type = options.type || 'Primary'; if (item.ImageTags && item.ImageTags[options.type]) { options.tag = item.ImageTags[options.type]; return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); } if (item.AlbumId && item.AlbumPrimaryImageTag) { options.tag = item.AlbumPrimaryImageTag; return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); } return null; } var currentImgUrl; function updateNowPlayingInfo(state) { var nowPlayingItem = state.NowPlayingItem; var textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : []; if (textLines.length > 1) { textLines[1].secondary = true; } nowPlayingTextElement.innerHTML = textLines.map(function (nowPlayingName) { var cssClass = nowPlayingName.secondary ? ' class="nowPlayingBarSecondaryText"' : ''; if (nowPlayingName.item) { var nowPlayingText = getTextActionButton(nowPlayingName.item, nowPlayingName.text); return `