';
- html += '
";
- return html += "';
- html += chapter.Name;
- html += "
";
- html += '
');
- }
- }
-
- osdPoster.innerHTML = "";
- }
-
- function showOsd() {
- slideDownToShow(headerElement);
- showMainOsdControls();
- startOsdHideTimer();
- }
-
- function hideOsd() {
- slideUpToHide(headerElement);
- hideMainOsdControls();
- }
-
- function toggleOsd() {
- if ("osd" === currentVisibleMenu) {
- hideOsd();
- } else {
- if (!currentVisibleMenu) {
- showOsd();
- }
- }
- }
-
- function startOsdHideTimer() {
- stopOsdHideTimer();
- osdHideTimeout = setTimeout(hideOsd, 5e3);
- }
-
- function stopOsdHideTimer() {
- if (osdHideTimeout) {
- clearTimeout(osdHideTimeout);
- osdHideTimeout = null;
- }
- }
-
- function slideDownToShow(elem) {
- elem.classList.remove("osdHeader-hidden");
- }
-
- function slideUpToHide(elem) {
- elem.classList.add("osdHeader-hidden");
- }
-
- function clearHideAnimationEventListeners(elem) {
- dom.removeEventListener(elem, transitionEndEventName, onHideAnimationComplete, {
- once: true
- });
- }
-
- function onHideAnimationComplete(e) {
- var elem = e.target;
- elem.classList.add("hide");
- dom.removeEventListener(elem, transitionEndEventName, onHideAnimationComplete, {
- once: true
- });
- }
-
- function showMainOsdControls() {
- if (!currentVisibleMenu) {
- var elem = osdBottomElement;
- currentVisibleMenu = "osd";
- clearHideAnimationEventListeners(elem);
- elem.classList.remove("hide");
- elem.offsetWidth;
- elem.classList.remove("videoOsdBottom-hidden");
-
- if (!layoutManager.mobile) {
- setTimeout(function () {
- focusManager.focus(elem.querySelector(".btnPause"));
- }, 50);
- }
- }
- }
-
- function hideMainOsdControls() {
- if ("osd" === currentVisibleMenu) {
- var elem = osdBottomElement;
- clearHideAnimationEventListeners(elem);
- elem.offsetWidth;
- elem.classList.add("videoOsdBottom-hidden");
- dom.addEventListener(elem, transitionEndEventName, onHideAnimationComplete, {
- once: true
- });
- currentVisibleMenu = null;
- }
- }
-
- function onPointerMove(e) {
- if ("mouse" === (e.pointerType || (layoutManager.mobile ? "touch" : "mouse"))) {
- var eventX = e.screenX || 0;
- var eventY = e.screenY || 0;
- var obj = lastPointerMoveData;
-
- if (!obj) {
- return void (lastPointerMoveData = {
- x: eventX,
- y: eventY
- });
- }
-
- if (Math.abs(eventX - obj.x) < 10 && Math.abs(eventY - obj.y) < 10) {
- return;
- }
-
- obj.x = eventX;
- obj.y = eventY;
- showOsd();
- }
- }
-
- function onInputCommand(e) {
- var player = currentPlayer;
-
- switch (e.detail.command) {
- case "left":
- if ("osd" === currentVisibleMenu) {
- showOsd();
- } else {
- if (!currentVisibleMenu) {
- e.preventDefault();
- playbackManager.rewind(player);
+ if (item.ParentThumbImageTag) {
+ options.tag = item.ParentThumbImageTag;
+ return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
}
- }
-
- break;
-
- case "right":
- if ("osd" === currentVisibleMenu) {
- showOsd();
- } else if (!currentVisibleMenu) {
- e.preventDefault();
- playbackManager.fastForward(player);
- }
-
- break;
-
- case "pageup":
- playbackManager.nextChapter(player);
- break;
-
- case "pagedown":
- playbackManager.previousChapter(player);
- break;
-
- case "up":
- case "down":
- case "select":
- case "menu":
- case "info":
- case "play":
- case "playpause":
- case "pause":
- case "fastforward":
- case "rewind":
- case "next":
- case "previous":
- showOsd();
- break;
-
- case "record":
- onRecordingCommand();
- showOsd();
- break;
-
- case "togglestats":
- toggleStats();
- }
- }
-
- function onRecordingCommand() {
- var btnRecord = view.querySelector(".btnRecord");
-
- if (!btnRecord.classList.contains("hide")) {
- btnRecord.click();
- }
- }
-
- function updateFullscreenIcon() {
- if (playbackManager.isFullscreen(currentPlayer)) {
- view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("ExitFullscreen"));
- view.querySelector(".btnFullscreen i").innerHTML = "";
- } else {
- view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("Fullscreen"));
- view.querySelector(".btnFullscreen i").innerHTML = "";
- }
- }
-
- function onPlayerChange() {
- bindToPlayer(playbackManager.getCurrentPlayer());
- }
-
- function onStateChanged(event, state) {
- var player = this;
-
- if (state.NowPlayingItem) {
- isEnabled = true;
- updatePlayerStateInternal(event, player, state);
- updatePlaylist(player);
- enableStopOnBack(true);
- }
- }
-
- function onPlayPauseStateChanged(e) {
- if (isEnabled) {
- updatePlayPauseState(this.paused());
- }
- }
-
- function onVolumeChanged(e) {
- if (isEnabled) {
- var player = this;
- updatePlayerVolumeState(player, player.isMuted(), player.getVolume());
- }
- }
-
- function onPlaybackStart(e, state) {
- console.log("nowplaying event: " + e.type);
- var player = this;
- onStateChanged.call(player, e, state);
- resetUpNextDialog();
- }
-
- function resetUpNextDialog() {
- comingUpNextDisplayed = false;
- var dlg = currentUpNextDialog;
-
- if (dlg) {
- dlg.destroy();
- currentUpNextDialog = null;
- }
- }
-
- function onPlaybackStopped(e, state) {
- currentRuntimeTicks = null;
- resetUpNextDialog();
- console.log("nowplaying event: " + e.type);
-
- if ("Video" !== state.NextMediaType) {
- view.removeEventListener("viewbeforehide", onViewHideStopPlayback);
- Emby.Page.back();
- }
- }
-
- function onMediaStreamsChanged(e) {
- var player = this;
- var state = playbackManager.getPlayerState(player);
- onStateChanged.call(player, {
- type: "init"
- }, state);
- }
-
- function bindToPlayer(player) {
- if (player !== currentPlayer && (releaseCurrentPlayer(), currentPlayer = player, player)) {
- var state = playbackManager.getPlayerState(player);
- onStateChanged.call(player, {
- type: "init"
- }, state);
- events.on(player, "playbackstart", onPlaybackStart);
- events.on(player, "playbackstop", onPlaybackStopped);
- events.on(player, "volumechange", onVolumeChanged);
- events.on(player, "pause", onPlayPauseStateChanged);
- events.on(player, "unpause", onPlayPauseStateChanged);
- events.on(player, "timeupdate", onTimeUpdate);
- events.on(player, "fullscreenchange", updateFullscreenIcon);
- events.on(player, "mediastreamschange", onMediaStreamsChanged);
- resetUpNextDialog();
- }
- }
-
- function releaseCurrentPlayer() {
- destroyStats();
- resetUpNextDialog();
- var player = currentPlayer;
-
- if (player) {
- events.off(player, "playbackstart", onPlaybackStart);
- events.off(player, "playbackstop", onPlaybackStopped);
- events.off(player, "volumechange", onVolumeChanged);
- events.off(player, "pause", onPlayPauseStateChanged);
- events.off(player, "unpause", onPlayPauseStateChanged);
- events.off(player, "timeupdate", onTimeUpdate);
- events.off(player, "fullscreenchange", updateFullscreenIcon);
- events.off(player, "mediastreamschange", onMediaStreamsChanged);
- currentPlayer = null;
- }
- }
-
- function onTimeUpdate(e) {
- if (isEnabled) {
- var now = new Date().getTime();
-
- if (!(now - lastUpdateTime < 700)) {
- lastUpdateTime = now;
- var player = this;
- currentRuntimeTicks = playbackManager.duration(player);
- var currentTime = playbackManager.currentTime(player);
- updateTimeDisplay(currentTime, currentRuntimeTicks, playbackManager.playbackStartTime(player), playbackManager.getBufferedRanges(player));
- var item = currentItem;
- refreshProgramInfoIfNeeded(player, item);
- showComingUpNextIfNeeded(player, item, currentTime, currentRuntimeTicks);
- }
- }
- }
-
- function showComingUpNextIfNeeded(player, currentItem, currentTimeTicks, runtimeTicks) {
- if (runtimeTicks && currentTimeTicks && !comingUpNextDisplayed && !currentVisibleMenu && "Episode" === currentItem.Type && userSettings.enableNextVideoInfoOverlay()) {
- var showAtSecondsLeft = runtimeTicks >= 3e10 ? 40 : runtimeTicks >= 24e9 ? 35 : 30;
- var showAtTicks = runtimeTicks - 1e3 * showAtSecondsLeft * 1e4;
- var timeRemainingTicks = runtimeTicks - currentTimeTicks;
-
- if (currentTimeTicks >= showAtTicks && runtimeTicks >= 6e9 && timeRemainingTicks >= 2e8) {
- showComingUpNext(player);
- }
- }
- }
-
- function onUpNextHidden() {
- if ("upnext" === currentVisibleMenu) {
- currentVisibleMenu = null;
- }
- }
-
- function showComingUpNext(player) {
- require(["upNextDialog"], function (UpNextDialog) {
- if (!(currentVisibleMenu || currentUpNextDialog)) {
- currentVisibleMenu = "upnext";
- comingUpNextDisplayed = true;
- playbackManager.nextItem(player).then(function (nextItem) {
- currentUpNextDialog = new UpNextDialog({
- parent: view.querySelector(".upNextContainer"),
- player: player,
- nextItem: nextItem
- });
- events.on(currentUpNextDialog, "hide", onUpNextHidden);
- }, onUpNextHidden);
- }
- });
- }
-
- function refreshProgramInfoIfNeeded(player, item) {
- if ("TvChannel" === item.Type) {
- var program = item.CurrentProgram;
-
- if (program && program.EndDate) {
- try {
- var endDate = datetime.parseISO8601Date(program.EndDate);
-
- if (new Date().getTime() >= endDate.getTime()) {
- console.log("program info needs to be refreshed");
- var state = playbackManager.getPlayerState(player);
- onStateChanged.call(player, {
- type: "init"
- }, state);
- }
- } catch (e) {
- console.log("Error parsing date: " + program.EndDate);
- }
- }
- }
- }
-
- function updatePlayPauseState(isPaused) {
- view.querySelector(".btnPause i").innerHTML = isPaused ? "" : "";
- }
-
- function updatePlayerStateInternal(event, player, state) {
- var playState = state.PlayState || {};
- updatePlayPauseState(playState.IsPaused);
- var supportedCommands = playbackManager.getSupportedCommands(player);
- currentPlayerSupportedCommands = supportedCommands;
- supportsBrightnessChange = -1 !== supportedCommands.indexOf("SetBrightness");
- updatePlayerVolumeState(player, playState.IsMuted, playState.VolumeLevel);
-
- if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) {
- nowPlayingPositionSlider.disabled = !playState.CanSeek;
- }
-
- btnFastForward.disabled = !playState.CanSeek;
- btnRewind.disabled = !playState.CanSeek;
- var nowPlayingItem = state.NowPlayingItem || {};
- playbackStartTimeTicks = playState.PlaybackStartTimeTicks;
- updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playState.PlaybackStartTimeTicks, playState.BufferedRanges || []);
- updateNowPlayingInfo(player, state);
-
- if (state.MediaSource && state.MediaSource.SupportsTranscoding && -1 !== supportedCommands.indexOf("SetMaxStreamingBitrate")) {
- view.querySelector(".btnVideoOsdSettings").classList.remove("hide");
- } else {
- view.querySelector(".btnVideoOsdSettings").classList.add("hide");
- }
-
- var isProgressClear = state.MediaSource && null == state.MediaSource.RunTimeTicks;
- nowPlayingPositionSlider.setIsClear(isProgressClear);
-
- if (-1 === supportedCommands.indexOf("ToggleFullscreen") || player.isLocalPlayer && layoutManager.tv && playbackManager.isFullscreen(player)) {
- view.querySelector(".btnFullscreen").classList.add("hide");
- } else {
- view.querySelector(".btnFullscreen").classList.remove("hide");
- }
-
- if (-1 === supportedCommands.indexOf("PictureInPicture")) {
- view.querySelector(".btnPip").classList.add("hide");
- } else {
- view.querySelector(".btnPip").classList.remove("hide");
- }
-
- updateFullscreenIcon();
- }
-
- function getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, currentTimeMs) {
- return (currentTimeMs - programStartDateMs) / programRuntimeMs * 100;
- }
-
- function updateTimeDisplay(positionTicks, runtimeTicks, playbackStartTimeTicks, bufferedRanges) {
- if (enableProgressByTimeOfDay) {
- if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) {
- if (programStartDateMs && programEndDateMs) {
- var currentTimeMs = (playbackStartTimeTicks + (positionTicks || 0)) / 1e4;
- var programRuntimeMs = programEndDateMs - programStartDateMs;
-
- if (nowPlayingPositionSlider.value = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, currentTimeMs), bufferedRanges.length) {
- var rangeStart = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].start || 0)) / 1e4);
- var rangeEnd = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].end || 0)) / 1e4);
- nowPlayingPositionSlider.setBufferedRanges([{
- start: rangeStart,
- end: rangeEnd
- }]);
- } else {
- nowPlayingPositionSlider.setBufferedRanges([]);
- }
- } else {
- nowPlayingPositionSlider.value = 0;
- nowPlayingPositionSlider.setBufferedRanges([]);
- }
}
- nowPlayingPositionText.innerHTML = "";
- nowPlayingDurationText.innerHTML = "";
- } else {
- if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) {
- if (runtimeTicks) {
- var pct = positionTicks / runtimeTicks;
- pct *= 100;
- nowPlayingPositionSlider.value = pct;
- } else {
- nowPlayingPositionSlider.value = 0;
- }
-
- if (runtimeTicks && null != positionTicks && currentRuntimeTicks && !enableProgressByTimeOfDay && currentItem.RunTimeTicks && "Recording" !== currentItem.Type) {
- endsAtText.innerHTML = " - " + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
- } else {
- endsAtText.innerHTML = "";
- }
- }
-
- if (nowPlayingPositionSlider) {
- nowPlayingPositionSlider.setBufferedRanges(bufferedRanges, runtimeTicks, positionTicks);
- }
-
- updateTimeText(nowPlayingPositionText, positionTicks);
- updateTimeText(nowPlayingDurationText, runtimeTicks, true);
- }
- }
-
- function updatePlayerVolumeState(player, isMuted, volumeLevel) {
- var supportedCommands = currentPlayerSupportedCommands;
- var showMuteButton = true;
- var showVolumeSlider = true;
- var volumeSlider = view.querySelector('.osdVolumeSliderContainer');
- var progressElement = volumeSlider.querySelector('.mdl-slider-background-lower');
-
-
- if (-1 === supportedCommands.indexOf("Mute")) {
- showMuteButton = false;
- }
-
- if (-1 === supportedCommands.indexOf("SetVolume")) {
- showVolumeSlider = false;
- }
-
- if (player.isLocalPlayer && appHost.supports("physicalvolumecontrol")) {
- showMuteButton = false;
- showVolumeSlider = false;
- }
-
- if (isMuted) {
- view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute"));
- view.querySelector(".buttonMute i").innerHTML = "";
- } else {
- view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute"));
- view.querySelector(".buttonMute i").innerHTML = "";
- }
-
- if (progressElement) {
- progressElement.style.width = (volumeLevel || 0) + '%';
- }
-
- if (showMuteButton) {
- view.querySelector(".buttonMute").classList.remove("hide");
- } else {
- view.querySelector(".buttonMute").classList.add("hide");
- }
-
- if (nowPlayingVolumeSlider) {
- if (showVolumeSlider) {
- nowPlayingVolumeSliderContainer.classList.remove("hide");
- } else {
- nowPlayingVolumeSliderContainer.classList.add("hide");
- }
-
- // TODO: Find out why this is causing the slider to not update properly
- if (!nowPlayingVolumeSlider.dragging) {
- nowPlayingVolumeSlider.value = volumeLevel || 0;
- }
- }
- }
-
- function updatePlaylist(player) {
- var btnPreviousTrack = view.querySelector(".btnPreviousTrack");
- var btnNextTrack = view.querySelector(".btnNextTrack");
- btnPreviousTrack.classList.remove("hide");
- btnNextTrack.classList.remove("hide");
- btnNextTrack.disabled = false;
- btnPreviousTrack.disabled = false;
- }
-
- function updateTimeText(elem, ticks, divider) {
- if (null == ticks) {
- return void (elem.innerHTML = "");
- }
-
- var html = datetime.getDisplayRunningTime(ticks);
-
- if (divider) {
- html = " / " + html;
- }
-
- elem.innerHTML = html;
- }
-
- function onSettingsButtonClick(e) {
- var btn = this;
-
- require(["playerSettingsMenu"], function (playerSettingsMenu) {
- var player = currentPlayer;
-
- if (player) {
- playerSettingsMenu.show({
- mediaType: "Video",
- player: player,
- positionTo: btn,
- stats: true,
- onOption: onSettingsOption
- });
- }
- });
- }
-
- function onSettingsOption(selectedOption) {
- if ("stats" === selectedOption) {
- toggleStats();
- }
- }
-
- function toggleStats() {
- require(["playerStats"], function (PlayerStats) {
- var player = currentPlayer;
-
- if (player) {
- if (statsOverlay) {
- statsOverlay.toggle();
- } else {
- statsOverlay = new PlayerStats({
- player: player
- });
- }
- }
- });
- }
-
- function destroyStats() {
- if (statsOverlay) {
- statsOverlay.destroy();
- statsOverlay = null;
- }
- }
-
- function showAudioTrackSelection() {
- var player = currentPlayer;
- var audioTracks = playbackManager.audioTracks(player);
- var currentIndex = playbackManager.getAudioStreamIndex(player);
- var menuItems = audioTracks.map(function (stream) {
- var opt = {
- name: stream.DisplayTitle,
- id: stream.Index
- };
-
- if (stream.Index === currentIndex) {
- opt.selected = true;
- }
-
- return opt;
- });
- var positionTo = this;
-
- require(["actionsheet"], function (actionsheet) {
- actionsheet.show({
- items: menuItems,
- title: globalize.translate("Audio"),
- positionTo: positionTo
- }).then(function (id) {
- var index = parseInt(id);
-
- if (index !== currentIndex) {
- playbackManager.setAudioStreamIndex(index, player);
- }
- });
- });
- }
-
- function showSubtitleTrackSelection() {
- var player = currentPlayer;
- var streams = playbackManager.subtitleTracks(player);
- var currentIndex = playbackManager.getSubtitleStreamIndex(player);
-
- if (null == currentIndex) {
- currentIndex = -1;
- }
-
- streams.unshift({
- Index: -1,
- DisplayTitle: globalize.translate("Off")
- });
- var menuItems = streams.map(function (stream) {
- var opt = {
- name: stream.DisplayTitle,
- id: stream.Index
- };
-
- if (stream.Index === currentIndex) {
- opt.selected = true;
- }
-
- return opt;
- });
- var positionTo = this;
-
- require(["actionsheet"], function (actionsheet) {
- actionsheet.show({
- title: globalize.translate("Subtitles"),
- items: menuItems,
- positionTo: positionTo
- }).then(function (id) {
- var index = parseInt(id);
-
- if (index !== currentIndex) {
- playbackManager.setSubtitleStreamIndex(index, player);
- }
- });
- });
- }
-
- function onWindowKeyDown(e) {
- if (!currentVisibleMenu && (32 === e.keyCode || 13 === e.keyCode)) {
- playbackManager.playPause(currentPlayer);
- return void showOsd();
- }
-
- switch (e.key) {
- case "f":
- if (!e.ctrlKey) {
- playbackManager.toggleFullscreen(currentPlayer);
- }
-
- break;
-
- case "m":
- playbackManager.toggleMute(currentPlayer);
- break;
-
- case "ArrowLeft":
- case "Left":
- case "NavigationLeft":
- case "GamepadDPadLeft":
- case "GamepadLeftThumbstickLeft":
- if (e.shiftKey) {
- playbackManager.rewind(currentPlayer);
- }
-
- break;
-
- case "ArrowRight":
- case "Right":
- case "NavigationRight":
- case "GamepadDPadRight":
- case "GamepadLeftThumbstickRight":
- if (e.shiftKey) {
- playbackManager.fastForward(currentPlayer);
- }
-
- }
- }
-
- function getImgUrl(item, chapter, index, maxWidth, apiClient) {
- if (chapter.ImageTag) {
- return apiClient.getScaledImageUrl(item.Id, {
- maxWidth: maxWidth,
- tag: chapter.ImageTag,
- type: "Chapter",
- index: index
- });
- }
-
- return null;
- }
-
- function getChapterBubbleHtml(apiClient, item, chapters, positionTicks) {
- var chapter;
- var index = -1;
-
- for (var i = 0, length = chapters.length; i < length; i++) {
- var currentChapter = chapters[i];
-
- if (positionTicks >= currentChapter.StartPositionTicks) {
- chapter = currentChapter;
- index = i;
- }
- }
-
- if (!chapter) {
return null;
- }
-
- var src = getImgUrl(item, chapter, index, 400, apiClient);
-
- if (src) {
- var html = '');
+ }
+ }
+
+ osdPoster.innerHTML = "";
+ }
+
+ function showOsd() {
+ slideDownToShow(headerElement);
+ showMainOsdControls();
+ startOsdHideTimer();
+ }
+
+ function hideOsd() {
+ slideUpToHide(headerElement);
+ hideMainOsdControls();
+ }
+
+ function toggleOsd() {
+ if ("osd" === currentVisibleMenu) {
+ hideOsd();
+ } else {
+ if (!currentVisibleMenu) {
+ showOsd();
+ }
+ }
+ }
+
+ function startOsdHideTimer() {
+ stopOsdHideTimer();
+ osdHideTimeout = setTimeout(hideOsd, 5e3);
+ }
+
+ function stopOsdHideTimer() {
+ if (osdHideTimeout) {
+ clearTimeout(osdHideTimeout);
+ osdHideTimeout = null;
+ }
+ }
+
+ function slideDownToShow(elem) {
+ elem.classList.remove("osdHeader-hidden");
+ }
+
+ function slideUpToHide(elem) {
+ elem.classList.add("osdHeader-hidden");
+ }
+
+ function clearHideAnimationEventListeners(elem) {
+ dom.removeEventListener(elem, transitionEndEventName, onHideAnimationComplete, {
+ once: true
+ });
+ }
+
+ function onHideAnimationComplete(e) {
+ var elem = e.target;
+ elem.classList.add("hide");
+ dom.removeEventListener(elem, transitionEndEventName, onHideAnimationComplete, {
+ once: true
+ });
+ }
+
+ function showMainOsdControls() {
+ if (!currentVisibleMenu) {
+ var elem = osdBottomElement;
+ currentVisibleMenu = "osd";
+ clearHideAnimationEventListeners(elem);
+ elem.classList.remove("hide");
+ elem.offsetWidth;
+ elem.classList.remove("videoOsdBottom-hidden");
+
+ if (!layoutManager.mobile) {
+ setTimeout(function () {
+ focusManager.focus(elem.querySelector(".btnPause"));
+ }, 50);
+ }
+ }
+ }
+
+ function hideMainOsdControls() {
+ if ("osd" === currentVisibleMenu) {
+ var elem = osdBottomElement;
+ clearHideAnimationEventListeners(elem);
+ elem.offsetWidth;
+ elem.classList.add("videoOsdBottom-hidden");
+ dom.addEventListener(elem, transitionEndEventName, onHideAnimationComplete, {
+ once: true
+ });
+ currentVisibleMenu = null;
+ }
+ }
+
+ function onPointerMove(e) {
+ if ("mouse" === (e.pointerType || (layoutManager.mobile ? "touch" : "mouse"))) {
+ var eventX = e.screenX || 0;
+ var eventY = e.screenY || 0;
+ var obj = lastPointerMoveData;
+
+ if (!obj) {
+ return void (lastPointerMoveData = {
+ x: eventX,
+ y: eventY
+ });
+ }
+
+ if (Math.abs(eventX - obj.x) < 10 && Math.abs(eventY - obj.y) < 10) {
+ return;
+ }
+
+ obj.x = eventX;
+ obj.y = eventY;
+ showOsd();
+ }
+ }
+
+ function onInputCommand(e) {
+ var player = currentPlayer;
+
+ switch (e.detail.command) {
+ case "left":
+ if ("osd" === currentVisibleMenu) {
+ showOsd();
+ } else {
+ if (!currentVisibleMenu) {
+ e.preventDefault();
+ playbackManager.rewind(player);
+ }
+ }
+
+ break;
+
+ case "right":
+ if ("osd" === currentVisibleMenu) {
+ showOsd();
+ } else if (!currentVisibleMenu) {
+ e.preventDefault();
+ playbackManager.fastForward(player);
+ }
+
+ break;
+
+ case "pageup":
+ playbackManager.nextChapter(player);
+ break;
+
+ case "pagedown":
+ playbackManager.previousChapter(player);
+ break;
+
+ case "up":
+ case "down":
+ case "select":
+ case "menu":
+ case "info":
+ case "play":
+ case "playpause":
+ case "pause":
+ case "fastforward":
+ case "rewind":
+ case "next":
+ case "previous":
+ showOsd();
+ break;
+
+ case "record":
+ onRecordingCommand();
+ showOsd();
+ break;
+
+ case "togglestats":
+ toggleStats();
+ }
+ }
+
+ function onRecordingCommand() {
+ var btnRecord = view.querySelector(".btnRecord");
+
+ if (!btnRecord.classList.contains("hide")) {
+ btnRecord.click();
+ }
+ }
+
+ function updateFullscreenIcon() {
+ if (playbackManager.isFullscreen(currentPlayer)) {
+ view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("ExitFullscreen"));
+ view.querySelector(".btnFullscreen i").innerHTML = "";
+ } else {
+ view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("Fullscreen"));
+ view.querySelector(".btnFullscreen i").innerHTML = "";
+ }
+ }
+
+ function onPlayerChange() {
+ bindToPlayer(playbackManager.getCurrentPlayer());
+ }
+
+ function onStateChanged(event, state) {
+ var player = this;
+
+ if (state.NowPlayingItem) {
+ isEnabled = true;
+ updatePlayerStateInternal(event, player, state);
+ updatePlaylist(player);
+ enableStopOnBack(true);
+ }
+ }
+
+ function onPlayPauseStateChanged(e) {
+ if (isEnabled) {
+ updatePlayPauseState(this.paused());
+ }
+ }
+
+ function onVolumeChanged(e) {
+ if (isEnabled) {
+ var player = this;
+ updatePlayerVolumeState(player, player.isMuted(), player.getVolume());
+ }
+ }
+
+ function onPlaybackStart(e, state) {
+ console.log("nowplaying event: " + e.type);
+ var player = this;
+ onStateChanged.call(player, e, state);
+ resetUpNextDialog();
+ }
+
+ function resetUpNextDialog() {
+ comingUpNextDisplayed = false;
+ var dlg = currentUpNextDialog;
+
+ if (dlg) {
+ dlg.destroy();
+ currentUpNextDialog = null;
+ }
+ }
+
+ function onPlaybackStopped(e, state) {
+ currentRuntimeTicks = null;
+ resetUpNextDialog();
+ console.log("nowplaying event: " + e.type);
+
+ if ("Video" !== state.NextMediaType) {
+ view.removeEventListener("viewbeforehide", onViewHideStopPlayback);
+ Emby.Page.back();
+ }
+ }
+
+ function onMediaStreamsChanged(e) {
+ var player = this;
+ var state = playbackManager.getPlayerState(player);
+ onStateChanged.call(player, {
+ type: "init"
+ }, state);
+ }
+
+ function bindToPlayer(player) {
+ if (player !== currentPlayer && (releaseCurrentPlayer(), currentPlayer = player, player)) {
+ var state = playbackManager.getPlayerState(player);
+ onStateChanged.call(player, {
+ type: "init"
+ }, state);
+ events.on(player, "playbackstart", onPlaybackStart);
+ events.on(player, "playbackstop", onPlaybackStopped);
+ events.on(player, "volumechange", onVolumeChanged);
+ events.on(player, "pause", onPlayPauseStateChanged);
+ events.on(player, "unpause", onPlayPauseStateChanged);
+ events.on(player, "timeupdate", onTimeUpdate);
+ events.on(player, "fullscreenchange", updateFullscreenIcon);
+ events.on(player, "mediastreamschange", onMediaStreamsChanged);
+ resetUpNextDialog();
+ }
+ }
+
+ function releaseCurrentPlayer() {
+ destroyStats();
+ resetUpNextDialog();
+ var player = currentPlayer;
+
+ if (player) {
+ events.off(player, "playbackstart", onPlaybackStart);
+ events.off(player, "playbackstop", onPlaybackStopped);
+ events.off(player, "volumechange", onVolumeChanged);
+ events.off(player, "pause", onPlayPauseStateChanged);
+ events.off(player, "unpause", onPlayPauseStateChanged);
+ events.off(player, "timeupdate", onTimeUpdate);
+ events.off(player, "fullscreenchange", updateFullscreenIcon);
+ events.off(player, "mediastreamschange", onMediaStreamsChanged);
+ currentPlayer = null;
+ }
+ }
+
+ function onTimeUpdate(e) {
+ if (isEnabled) {
+ var now = new Date().getTime();
+
+ if (!(now - lastUpdateTime < 700)) {
+ lastUpdateTime = now;
+ var player = this;
+ currentRuntimeTicks = playbackManager.duration(player);
+ var currentTime = playbackManager.currentTime(player);
+ updateTimeDisplay(currentTime, currentRuntimeTicks, playbackManager.playbackStartTime(player), playbackManager.getBufferedRanges(player));
+ var item = currentItem;
+ refreshProgramInfoIfNeeded(player, item);
+ showComingUpNextIfNeeded(player, item, currentTime, currentRuntimeTicks);
+ }
+ }
+ }
+
+ function showComingUpNextIfNeeded(player, currentItem, currentTimeTicks, runtimeTicks) {
+ if (runtimeTicks && currentTimeTicks && !comingUpNextDisplayed && !currentVisibleMenu && "Episode" === currentItem.Type && userSettings.enableNextVideoInfoOverlay()) {
+ var showAtSecondsLeft = runtimeTicks >= 3e10 ? 40 : runtimeTicks >= 24e9 ? 35 : 30;
+ var showAtTicks = runtimeTicks - 1e3 * showAtSecondsLeft * 1e4;
+ var timeRemainingTicks = runtimeTicks - currentTimeTicks;
+
+ if (currentTimeTicks >= showAtTicks && runtimeTicks >= 6e9 && timeRemainingTicks >= 2e8) {
+ showComingUpNext(player);
+ }
+ }
+ }
+
+ function onUpNextHidden() {
+ if ("upnext" === currentVisibleMenu) {
+ currentVisibleMenu = null;
+ }
+ }
+
+ function showComingUpNext(player) {
+ require(["upNextDialog"], function (UpNextDialog) {
+ if (!(currentVisibleMenu || currentUpNextDialog)) {
+ currentVisibleMenu = "upnext";
+ comingUpNextDisplayed = true;
+ playbackManager.nextItem(player).then(function (nextItem) {
+ currentUpNextDialog = new UpNextDialog({
+ parent: view.querySelector(".upNextContainer"),
+ player: player,
+ nextItem: nextItem
+ });
+ events.on(currentUpNextDialog, "hide", onUpNextHidden);
+ }, onUpNextHidden);
+ }
+ });
+ }
+
+ function refreshProgramInfoIfNeeded(player, item) {
+ if ("TvChannel" === item.Type) {
+ var program = item.CurrentProgram;
+
+ if (program && program.EndDate) {
+ try {
+ var endDate = datetime.parseISO8601Date(program.EndDate);
+
+ if (new Date().getTime() >= endDate.getTime()) {
+ console.log("program info needs to be refreshed");
+ var state = playbackManager.getPlayerState(player);
+ onStateChanged.call(player, {
+ type: "init"
+ }, state);
+ }
+ } catch (e) {
+ console.log("Error parsing date: " + program.EndDate);
+ }
+ }
+ }
+ }
+
+ function updatePlayPauseState(isPaused) {
+ view.querySelector(".btnPause i").innerHTML = isPaused ? "" : "";
+ }
+
+ function updatePlayerStateInternal(event, player, state) {
+ var playState = state.PlayState || {};
+ updatePlayPauseState(playState.IsPaused);
+ var supportedCommands = playbackManager.getSupportedCommands(player);
+ currentPlayerSupportedCommands = supportedCommands;
+ supportsBrightnessChange = -1 !== supportedCommands.indexOf("SetBrightness");
+ updatePlayerVolumeState(player, playState.IsMuted, playState.VolumeLevel);
+
+ if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) {
+ nowPlayingPositionSlider.disabled = !playState.CanSeek;
+ }
+
+ btnFastForward.disabled = !playState.CanSeek;
+ btnRewind.disabled = !playState.CanSeek;
+ var nowPlayingItem = state.NowPlayingItem || {};
+ playbackStartTimeTicks = playState.PlaybackStartTimeTicks;
+ updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playState.PlaybackStartTimeTicks, playState.BufferedRanges || []);
+ updateNowPlayingInfo(player, state);
+
+ if (state.MediaSource && state.MediaSource.SupportsTranscoding && -1 !== supportedCommands.indexOf("SetMaxStreamingBitrate")) {
+ view.querySelector(".btnVideoOsdSettings").classList.remove("hide");
+ } else {
+ view.querySelector(".btnVideoOsdSettings").classList.add("hide");
+ }
+
+ var isProgressClear = state.MediaSource && null == state.MediaSource.RunTimeTicks;
+ nowPlayingPositionSlider.setIsClear(isProgressClear);
+
+ if (-1 === supportedCommands.indexOf("ToggleFullscreen") || player.isLocalPlayer && layoutManager.tv && playbackManager.isFullscreen(player)) {
+ view.querySelector(".btnFullscreen").classList.add("hide");
+ } else {
+ view.querySelector(".btnFullscreen").classList.remove("hide");
+ }
+
+ if (-1 === supportedCommands.indexOf("PictureInPicture")) {
+ view.querySelector(".btnPip").classList.add("hide");
+ } else {
+ view.querySelector(".btnPip").classList.remove("hide");
+ }
+
+ updateFullscreenIcon();
+ }
+
+ function getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, currentTimeMs) {
+ return (currentTimeMs - programStartDateMs) / programRuntimeMs * 100;
+ }
+
+ function updateTimeDisplay(positionTicks, runtimeTicks, playbackStartTimeTicks, bufferedRanges) {
+ if (enableProgressByTimeOfDay) {
+ if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) {
+ if (programStartDateMs && programEndDateMs) {
+ var currentTimeMs = (playbackStartTimeTicks + (positionTicks || 0)) / 1e4;
+ var programRuntimeMs = programEndDateMs - programStartDateMs;
+
+ if (nowPlayingPositionSlider.value = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, currentTimeMs), bufferedRanges.length) {
+ var rangeStart = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].start || 0)) / 1e4);
+ var rangeEnd = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].end || 0)) / 1e4);
+ nowPlayingPositionSlider.setBufferedRanges([{
+ start: rangeStart,
+ end: rangeEnd
+ }]);
+ } else {
+ nowPlayingPositionSlider.setBufferedRanges([]);
+ }
+ } else {
+ nowPlayingPositionSlider.value = 0;
+ nowPlayingPositionSlider.setBufferedRanges([]);
+ }
+ }
+
+ nowPlayingPositionText.innerHTML = "";
+ nowPlayingDurationText.innerHTML = "";
+ } else {
+ if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) {
+ if (runtimeTicks) {
+ var pct = positionTicks / runtimeTicks;
+ pct *= 100;
+ nowPlayingPositionSlider.value = pct;
+ } else {
+ nowPlayingPositionSlider.value = 0;
+ }
+
+ if (runtimeTicks && null != positionTicks && currentRuntimeTicks && !enableProgressByTimeOfDay && currentItem.RunTimeTicks && "Recording" !== currentItem.Type) {
+ endsAtText.innerHTML = " - " + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
+ } else {
+ endsAtText.innerHTML = "";
+ }
+ }
+
+ if (nowPlayingPositionSlider) {
+ nowPlayingPositionSlider.setBufferedRanges(bufferedRanges, runtimeTicks, positionTicks);
+ }
+
+ updateTimeText(nowPlayingPositionText, positionTicks);
+ updateTimeText(nowPlayingDurationText, runtimeTicks, true);
+ }
+ }
+
+ function updatePlayerVolumeState(player, isMuted, volumeLevel) {
+ var supportedCommands = currentPlayerSupportedCommands;
+ var showMuteButton = true;
+ var showVolumeSlider = true;
+ var volumeSlider = view.querySelector('.osdVolumeSliderContainer');
+ var progressElement = volumeSlider.querySelector('.mdl-slider-background-lower');
+
+
+ if (-1 === supportedCommands.indexOf("Mute")) {
+ showMuteButton = false;
+ }
+
+ if (-1 === supportedCommands.indexOf("SetVolume")) {
+ showVolumeSlider = false;
+ }
+
+ if (player.isLocalPlayer && appHost.supports("physicalvolumecontrol")) {
+ showMuteButton = false;
+ showVolumeSlider = false;
+ }
+
+ if (isMuted) {
+ view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute"));
+ view.querySelector(".buttonMute i").innerHTML = "";
+ } else {
+ view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute"));
+ view.querySelector(".buttonMute i").innerHTML = "";
+ }
+
+ if (progressElement) {
+ progressElement.style.width = (volumeLevel || 0) + '%';
+ }
+
+ if (showMuteButton) {
+ view.querySelector(".buttonMute").classList.remove("hide");
+ } else {
+ view.querySelector(".buttonMute").classList.add("hide");
+ }
+
+ if (nowPlayingVolumeSlider) {
+ if (showVolumeSlider) {
+ nowPlayingVolumeSliderContainer.classList.remove("hide");
+ } else {
+ nowPlayingVolumeSliderContainer.classList.add("hide");
+ }
+
+ // TODO: Find out why this is causing the slider to not update properly
+ if (!nowPlayingVolumeSlider.dragging) {
+ nowPlayingVolumeSlider.value = volumeLevel || 0;
+ }
+ }
+ }
+
+ function updatePlaylist(player) {
+ var btnPreviousTrack = view.querySelector(".btnPreviousTrack");
+ var btnNextTrack = view.querySelector(".btnNextTrack");
+ btnPreviousTrack.classList.remove("hide");
+ btnNextTrack.classList.remove("hide");
+ btnNextTrack.disabled = false;
+ btnPreviousTrack.disabled = false;
+ }
+
+ function updateTimeText(elem, ticks, divider) {
+ if (null == ticks) {
+ return void (elem.innerHTML = "");
+ }
+
+ var html = datetime.getDisplayRunningTime(ticks);
+
+ if (divider) {
+ html = " / " + html;
+ }
+
+ elem.innerHTML = html;
+ }
+
+ function onSettingsButtonClick(e) {
+ var btn = this;
+
+ require(["playerSettingsMenu"], function (playerSettingsMenu) {
+ var player = currentPlayer;
+
+ if (player) {
+ playerSettingsMenu.show({
+ mediaType: "Video",
+ player: player,
+ positionTo: btn,
+ stats: true,
+ onOption: onSettingsOption
+ });
+ }
+ });
+ }
+
+ function onSettingsOption(selectedOption) {
+ if ("stats" === selectedOption) {
+ toggleStats();
+ }
+ }
+
+ function toggleStats() {
+ require(["playerStats"], function (PlayerStats) {
+ var player = currentPlayer;
+
+ if (player) {
+ if (statsOverlay) {
+ statsOverlay.toggle();
+ } else {
+ statsOverlay = new PlayerStats({
+ player: player
+ });
+ }
+ }
+ });
+ }
+
+ function destroyStats() {
+ if (statsOverlay) {
+ statsOverlay.destroy();
+ statsOverlay = null;
+ }
+ }
+
+ function showAudioTrackSelection() {
+ var player = currentPlayer;
+ var audioTracks = playbackManager.audioTracks(player);
+ var currentIndex = playbackManager.getAudioStreamIndex(player);
+ var menuItems = audioTracks.map(function (stream) {
+ var opt = {
+ name: stream.DisplayTitle,
+ id: stream.Index
+ };
+
+ if (stream.Index === currentIndex) {
+ opt.selected = true;
+ }
+
+ return opt;
+ });
+ var positionTo = this;
+
+ require(["actionsheet"], function (actionsheet) {
+ actionsheet.show({
+ items: menuItems,
+ title: globalize.translate("Audio"),
+ positionTo: positionTo
+ }).then(function (id) {
+ var index = parseInt(id);
+
+ if (index !== currentIndex) {
+ playbackManager.setAudioStreamIndex(index, player);
+ }
+ });
+ });
+ }
+
+ function showSubtitleTrackSelection() {
+ var player = currentPlayer;
+ var streams = playbackManager.subtitleTracks(player);
+ var currentIndex = playbackManager.getSubtitleStreamIndex(player);
+
+ if (null == currentIndex) {
+ currentIndex = -1;
+ }
+
+ streams.unshift({
+ Index: -1,
+ DisplayTitle: globalize.translate("Off")
+ });
+ var menuItems = streams.map(function (stream) {
+ var opt = {
+ name: stream.DisplayTitle,
+ id: stream.Index
+ };
+
+ if (stream.Index === currentIndex) {
+ opt.selected = true;
+ }
+
+ return opt;
+ });
+ var positionTo = this;
+
+ require(["actionsheet"], function (actionsheet) {
+ actionsheet.show({
+ title: globalize.translate("Subtitles"),
+ items: menuItems,
+ positionTo: positionTo
+ }).then(function (id) {
+ var index = parseInt(id);
+
+ if (index !== currentIndex) {
+ playbackManager.setSubtitleStreamIndex(index, player);
+ }
+ });
+ });
+ }
+
+ function onWindowKeyDown(e) {
+ if (!currentVisibleMenu && (32 === e.keyCode || 13 === e.keyCode)) {
+ playbackManager.playPause(currentPlayer);
+ return void showOsd();
+ }
+
+ switch (e.key) {
+ case "f":
+ if (!e.ctrlKey) {
+ playbackManager.toggleFullscreen(currentPlayer);
+ }
+
+ break;
+
+ case "m":
+ playbackManager.toggleMute(currentPlayer);
+ break;
+
+ case "ArrowLeft":
+ case "Left":
+ case "NavigationLeft":
+ case "GamepadDPadLeft":
+ case "GamepadLeftThumbstickLeft":
+ if (e.shiftKey) {
+ playbackManager.rewind(currentPlayer);
+ }
+
+ break;
+
+ case "ArrowRight":
+ case "Right":
+ case "NavigationRight":
+ case "GamepadDPadRight":
+ case "GamepadLeftThumbstickRight":
+ if (e.shiftKey) {
+ playbackManager.fastForward(currentPlayer);
+ }
+
+ }
+ }
+
+ function getImgUrl(item, chapter, index, maxWidth, apiClient) {
+ if (chapter.ImageTag) {
+ return apiClient.getScaledImageUrl(item.Id, {
+ maxWidth: maxWidth,
+ tag: chapter.ImageTag,
+ type: "Chapter",
+ index: index
+ });
+ }
+
+ return null;
+ }
+
+ function getChapterBubbleHtml(apiClient, item, chapters, positionTicks) {
+ var chapter;
+ var index = -1;
+
+ for (var i = 0, length = chapters.length; i < length; i++) {
+ var currentChapter = chapters[i];
+
+ if (positionTicks >= currentChapter.StartPositionTicks) {
+ chapter = currentChapter;
+ index = i;
+ }
+ }
+
+ if (!chapter) {
+ return null;
+ }
+
+ var src = getImgUrl(item, chapter, index, 400, apiClient);
+
+ if (src) {
+ var html = '