diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index f4f198325b..50cb41021b 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -30,7 +30,7 @@ opacity: 0; } -.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) { +.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton):not(.headerSyncButton) { display: none; } diff --git a/src/components/htmlaudioplayer/plugin.js b/src/components/htmlaudioplayer/plugin.js index c3a5484aca..2580481051 100644 --- a/src/components/htmlaudioplayer/plugin.js +++ b/src/components/htmlaudioplayer/plugin.js @@ -171,6 +171,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp elem.addEventListener('pause', onPause); elem.addEventListener('playing', onPlaying); elem.addEventListener('play', onPlay); + elem.addEventListener('waiting', onWaiting); } function unBindEvents(elem) { @@ -180,6 +181,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp elem.removeEventListener('pause', onPause); elem.removeEventListener('playing', onPlaying); elem.removeEventListener('play', onPlay); + elem.removeEventListener('waiting', onWaiting); } self.stop = function (destroyPlayer) { @@ -294,6 +296,10 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp events.trigger(self, 'pause'); } + function onWaiting() { + events.trigger(self, 'waiting'); + } + function onError() { var errorCode = this.error ? (this.error.code || 0) : 0; @@ -450,6 +456,21 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp return false; }; + HtmlAudioPlayer.prototype.setPlaybackRate = function (value) { + var mediaElement = this._mediaElement; + if (mediaElement) { + mediaElement.playbackRate = value; + } + }; + + HtmlAudioPlayer.prototype.getPlaybackRate = function () { + var mediaElement = this._mediaElement; + if (mediaElement) { + return mediaElement.playbackRate; + } + return null; + }; + HtmlAudioPlayer.prototype.setVolume = function (val) { var mediaElement = this._mediaElement; if (mediaElement) { @@ -493,5 +514,26 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp }; + var supportedFeatures; + + function getSupportedFeatures() { + var list = []; + var audio = document.createElement('audio'); + + if (typeof audio.playbackRate === "number") { + list.push("PlaybackRate"); + } + + return list; + } + + HtmlAudioPlayer.prototype.supports = function (feature) { + if (!supportedFeatures) { + supportedFeatures = getSupportedFeatures(); + } + + return supportedFeatures.indexOf(feature) !== -1; + }; + return HtmlAudioPlayer; }); diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index f87fd19462..064e4155ee 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -785,6 +785,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa videoElement.removeEventListener('play', onPlay); videoElement.removeEventListener('click', onClick); videoElement.removeEventListener('dblclick', onDblClick); + videoElement.removeEventListener('waiting', onWaiting); videoElement.parentNode.removeChild(videoElement); } @@ -915,6 +916,10 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa events.trigger(self, 'pause'); } + function onWaiting() { + events.trigger(self, 'waiting'); + } + function onError() { var errorCode = this.error ? (this.error.code || 0) : 0; var errorMessage = this.error ? (this.error.message || '') : ''; @@ -1348,6 +1353,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa videoElement.addEventListener('play', onPlay); videoElement.addEventListener('click', onClick); videoElement.addEventListener('dblclick', onDblClick); + videoElement.addEventListener('waiting', onWaiting); document.body.insertBefore(dlg, document.body.firstChild); videoDialog = dlg; @@ -1436,6 +1442,10 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa list.push('AirPlay'); } + if (typeof video.playbackRate === "number") { + list.push("PlaybackRate"); + } + list.push('SetBrightness'); list.push('SetAspectRatio'); @@ -1656,6 +1666,21 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa return false; }; + HtmlVideoPlayer.prototype.setPlaybackRate = function (value) { + var mediaElement = this._mediaElement; + if (mediaElement) { + mediaElement.playbackRate = value; + } + }; + + HtmlVideoPlayer.prototype.getPlaybackRate = function () { + var mediaElement = this._mediaElement; + if (mediaElement) { + return mediaElement.playbackRate; + } + return null; + }; + HtmlVideoPlayer.prototype.setVolume = function (val) { var mediaElement = this._mediaElement; if (mediaElement) { diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js index ee85f9acb1..923092cd3d 100644 --- a/src/components/playback/playbackmanager.js +++ b/src/components/playback/playbackmanager.js @@ -3777,6 +3777,24 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla } }; + PlaybackManager.prototype.setPlaybackRate = function (value, player) { + player = player || this._currentPlayer; + + if (player) { + player.setPlaybackRate(value); + } + }; + + PlaybackManager.prototype.getPlaybackRate = function (player) { + player = player || this._currentPlayer; + + if (player) { + return player.getPlaybackRate(val); + } + + return null; + }; + PlaybackManager.prototype.instantMix = function (item, player) { player = player || this._currentPlayer; @@ -3887,6 +3905,9 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla if (player.supports('SetAspectRatio')) { list.push('SetAspectRatio'); } + if (player.supports('PlaybackRate')) { + list.push('PlaybackRate'); + } } return list; diff --git a/src/components/playerstats/playerstats.js b/src/components/playerstats/playerstats.js index c0fb369c6c..ad4ce960bf 100644 --- a/src/components/playerstats/playerstats.js +++ b/src/components/playerstats/playerstats.js @@ -1,4 +1,4 @@ -define(['events', 'globalize', 'playbackManager', 'connectionManager', 'playMethodHelper', 'layoutManager', 'serverNotifications', 'paper-icon-button-light', 'css!./playerstats'], function (events, globalize, playbackManager, connectionManager, playMethodHelper, layoutManager, serverNotifications) { +define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncplayManager', 'playMethodHelper', 'layoutManager', 'serverNotifications', 'paper-icon-button-light', 'css!./playerstats'], function (events, globalize, playbackManager, connectionManager, syncplayManager, playMethodHelper, layoutManager, serverNotifications) { 'use strict'; function init(instance) { @@ -327,6 +327,28 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'playMeth return sessionStats; } + function getSyncplayStats() { + var syncStats = []; + var stats = syncplayManager.getStats(); + + syncStats.push({ + label: globalize.translate("LabelSyncplayTimeDiff"), + value: stats.TimeDiff + "ms" + }); + + syncStats.push({ + label: globalize.translate("LabelSyncplayPlaybackDiff"), + value: stats.PlaybackDiff + "ms" + }); + + syncStats.push({ + label: globalize.translate("LabelSyncplaySyncMethod"), + value: stats.SyncMethod + }); + + return syncStats; + } + function getStats(instance, player) { var statsPromise = player.getStats ? player.getStats() : Promise.resolve({}); @@ -383,6 +405,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'playMeth name: 'Original Media Info' }); + if (syncplayManager.isSyncplayEnabled()) { + categories.push({ + stats: getSyncplayStats(), + name: 'Syncplay Info' + }); + } + return Promise.resolve(categories); }); } diff --git a/src/components/serverNotifications.js b/src/components/serverNotifications.js index e60f98475b..9776c88bd3 100644 --- a/src/components/serverNotifications.js +++ b/src/components/serverNotifications.js @@ -1,4 +1,4 @@ -define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focusManager', 'appRouter'], function (connectionManager, playbackManager, events, inputManager, focusManager, appRouter) { +define(['connectionManager', 'playbackManager', 'syncplayManager', 'events', 'inputManager', 'focusManager', 'appRouter'], function (connectionManager, playbackManager, syncplayManager, events, inputManager, focusManager, appRouter) { 'use strict'; var serverNotifications = {}; @@ -187,6 +187,10 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]); } } + } else if (msg.MessageType === "SyncplayCommand") { + syncplayManager.processCommand(msg.Data, apiClient); + } else if (msg.MessageType === "SyncplayGroupUpdate") { + syncplayManager.processGroupUpdate(msg.Data, apiClient); } else { events.trigger(serverNotifications, msg.MessageType, [apiClient, msg.Data]); } diff --git a/src/components/syncplay/groupSelectionMenu.js b/src/components/syncplay/groupSelectionMenu.js new file mode 100644 index 0000000000..01141741c1 --- /dev/null +++ b/src/components/syncplay/groupSelectionMenu.js @@ -0,0 +1,140 @@ +define(['events', 'loading', 'connectionManager', 'playbackManager', 'syncplayManager', 'globalize', 'datetime'], function (events, loading, connectionManager, playbackManager, syncplayManager, globalize, datetime) { + 'use strict'; + + function getActivePlayerId() { + var info = playbackManager.getPlayerInfo(); + return info ? info.id : null; + } + + function emptyCallback() { + // avoid console logs about uncaught promises + } + + function showNewJoinGroupSelection(button) { + var apiClient = connectionManager.currentApiClient(); + var sessionId = getActivePlayerId(); + sessionId = sessionId ? sessionId : "none"; + + loading.show(); + + apiClient.sendSyncplayCommand(sessionId, "ListGroups").then(function (response) { + response.json().then(function (groups) { + var inSession = sessionId !== "none"; + + var menuItems = groups.map(function (group) { + var name = datetime.getDisplayRunningTime(group.PositionTicks); + if (!inSession) { + name = group.PlayingItemName + } + return { + name: name, + icon: "group", + id: group.GroupId, + selected: false, + secondaryText: group.Partecipants.join(", ") + } + }); + + if (inSession) { + menuItems.push({ + name: globalize.translate('LabelSyncplayNewGroup'), + icon: "add", + id: "new-group", + selected: true, + secondaryText: globalize.translate('LabelSyncplayNewGroupDescription') + }); + } + + if (menuItems.length === 0) { + require(['toast'], function (alert) { + alert({ + title: globalize.translate('MessageSyncplayNoGroupsAvailable'), + text: globalize.translate('MessageSyncplayNoGroupsAvailable') + }); + }); + loading.hide(); + return; + } + + require(['actionsheet'], function (actionsheet) { + + loading.hide(); + + var menuOptions = { + title: globalize.translate('HeaderSyncplaySelectGroup'), + items: menuItems, + positionTo: button, + resolveOnClick: true, + border: true + }; + + actionsheet.show(menuOptions).then(function (id) { + + if (id == "new-group") { + apiClient.sendSyncplayCommand(sessionId, "NewGroup"); + } else { + apiClient.sendSyncplayCommand(sessionId, "JoinGroup", { + GroupId: id + }); + } + }, emptyCallback); + }); + }); + }).catch(function (error) { + loading.hide(); + console.error(error); + }); + } + + function showLeaveGroupSelection(button) { + var apiClient = connectionManager.currentApiClient(); + var sessionId = getActivePlayerId(); + + loading.show(); + + var menuItems = [{ + name: globalize.translate('LabelSyncplayLeaveGroup'), + icon: "meeting_room", + id: "leave-group", + selected: true, + secondaryText: globalize.translate('LabelSyncplayLeaveGroupDescription') + }]; + + require(['actionsheet'], function (actionsheet) { + + loading.hide(); + + var menuOptions = { + title: globalize.translate('HeaderSyncplayEnabled'), + items: menuItems, + positionTo: button, + resolveOnClick: true, + border: true + }; + + actionsheet.show(menuOptions).then(function (id) { + if (id == "leave-group") { + apiClient.sendSyncplayCommand(sessionId, "LeaveGroup"); + } + }, emptyCallback); + }); + } + + function showGroupSelection(button) { + if (syncplayEnabled) { + showLeaveGroupSelection(button); + } else { + showNewJoinGroupSelection(button); + } + } + + var syncplayEnabled = false; + + events.on(syncplayManager, 'SyncplayEnabled', function (e, enabled) { + syncplayEnabled = enabled; + }); + + return { + show: showGroupSelection + }; +}); diff --git a/src/components/syncplay/syncplaymanager.js b/src/components/syncplay/syncplaymanager.js new file mode 100644 index 0000000000..bde47a9d44 --- /dev/null +++ b/src/components/syncplay/syncplaymanager.js @@ -0,0 +1,600 @@ +define(['events', 'globalize', 'loading', 'connectionManager', 'playbackManager'], function (events, globalize, loading, connectionManager, playbackManager) { + 'use strict'; + + function waitForEvent(emitter, eventType) { + return new Promise(function (resolve) { + var callback = function () { + events.off(emitter, eventType, callback); + resolve(arguments); + } + events.on(emitter, eventType, callback); + }); + } + + function displaySyncplayUpdate(message) { + require(['toast'], function (alert) { + alert({ + title: message.Header, + text: message.Text + }); + }); + } + + function getActivePlayerId() { + var info = playbackManager.getPlayerInfo(); + return info ? info.id : null; + } + + function millisecondsToTicks(milliseconds) { + return milliseconds * 10000; + } + + function ticksToMilliseconds(ticks) { + return ticks / 10000; + } + + function SyncplayManager() { + + var self = this; + + function onPlayerChange() { + bindToPlayer(playbackManager.getCurrentPlayer()); + events.trigger(self, "PlayerChange", [self.currentPlayer]); + } + + function onPlayPauseStateChanged(e) { + events.trigger(self, "PlayPauseStateChange", [self.currentPlayer]); + } + + self.playbackRateSupported = false; + self.syncEnabled = false; + self.maxAcceptedDelaySpeedToSync = 50; // milliseconds + self.maxAcceptedDelaySkipToSync = 300; // milliseconds + self.syncMethodThreshold = 2000; // milliseconds + self.speedUpToSyncTime = 1000; // milliseconds + self.playbackDiffMillis = 0; // used for stats + self.syncMethod = "None"; // used for stats + + function onTimeUpdate(e) { + events.trigger(self, "TimeUpdate", [e]); + + if (self.lastCommand && self.lastCommand.Command === 'Play' && !self.isBuffering()) { + var currentTime = new Date(); + var playAtTime = self.lastCommand.When; + + var state = playbackManager.getPlayerState().PlayState; + // Estimate PositionTicks on server + var ServerPositionTicks = self.lastCommand.PositionTicks + ((currentTime - playAtTime) - self.timeDiff) * 10000; + // Measure delay that needs to be recovered + // diff might be caused by the player internally starting the playback + var diff = ServerPositionTicks - state.PositionTicks; + var diffMillis = diff / 10000; + + self.playbackDiffMillis = diffMillis; + + // console.debug("Syncplay onTimeUpdate", diffMillis, state.PositionTicks, ServerPositionTicks); + + if (self.syncEnabled) { + var absDiffMillis = Math.abs(diffMillis); + // TODO: SpeedToSync sounds bad on songs + if (self.playbackRateSupported && absDiffMillis > self.maxAcceptedDelaySpeedToSync && absDiffMillis < self.syncMethodThreshold) { + // SpeedToSync method + var speed = 1 + diffMillis / self.speedUpToSyncTime; + + self.currentPlayer.setPlaybackRate(speed); + self.syncEnabled = false; + self.showSyncIcon("SpeedToSync (x" + speed + ")"); + + self.syncTimeout = setTimeout(() => { + self.currentPlayer.setPlaybackRate(1); + self.syncEnabled = true; + self.clearSyncIcon(); + }, self.speedUpToSyncTime); + } else if (absDiffMillis > self.maxAcceptedDelaySkipToSync) { + // SkipToSync method + playbackManager.syncplay_seek(ServerPositionTicks); + self.syncEnabled = false; + self.showSyncIcon("SkipToSync"); + + self.syncTimeout = setTimeout(() => { + self.syncEnabled = true; + self.clearSyncIcon(); + }, self.syncMethodThreshold / 2); + } + } + } + } + + self.lastPlaybackWaiting = null; // used to determine if player's buffering + self.minBufferingThresholdMillis = 1000; + + // TODO: implement group wait + function onPlaying() { + self.lastPlaybackWaiting = null; + events.trigger(self, "PlayerPlaying"); + } + + // TODO: implement group wait + function onWaiting() { + if (!self.lastPlaybackWaiting) { + self.lastPlaybackWaiting = new Date(); + } + events.trigger(self, "PlayerWaiting"); + } + + self.isBuffering = function () { + if (self.lastPlaybackWaiting === null) return false; + return (new Date() - self.lastPlaybackWaiting) > self.minBufferingThresholdMillis; + } + + function bindToPlayer(player) { + if (player !== self.currentPlayer) { + releaseCurrentPlayer(); + self.currentPlayer = player; + if (!player) return; + } + events.on(player, "pause", onPlayPauseStateChanged); + events.on(player, "unpause", onPlayPauseStateChanged); + events.on(player, "timeupdate", onTimeUpdate); + events.on(player, "playing", onPlaying); + events.on(player, "waiting", onWaiting); + self.playbackRateSupported = player.supports("PlaybackRate"); + } + + function releaseCurrentPlayer() { + var player = self.currentPlayer; + if (player) { + events.off(player, "pause", onPlayPauseStateChanged); + events.off(player, "unpause", onPlayPauseStateChanged); + events.off(player, "timeupdate", onTimeUpdate); + events.off(player, "playing", onPlaying); + events.off(player, "waiting", onWaiting); + if (self.playbackRateSupported) { + player.setPlaybackRate(1); + } + self.currentPlayer = null; + self.playbackRateSupported = false; + } + } + + self.currentPlayer = null; + + events.on(playbackManager, "playerchange", onPlayerChange); + bindToPlayer(playbackManager.getCurrentPlayer()); + + self.syncplayEnabledAt = null; // Server time of when Syncplay has been enabled + self.syncplayReady = false; // Syncplay is ready after first ping to server + + self.processGroupUpdate = function (cmd, apiClient) { + switch (cmd.Type) { + case 'PrepareSession': + var serverId = apiClient.serverInfo().Id; + playbackManager.play({ + ids: cmd.Data.ItemIds, + startPositionTicks: cmd.Data.StartPositionTicks, + mediaSourceId: cmd.Data.MediaSourceId, + audioStreamIndex: cmd.Data.AudioStreamIndex, + subtitleStreamIndex: cmd.Data.SubtitleStreamIndex, + startIndex: cmd.Data.StartIndex, + serverId: serverId + }).then(function () { + waitForEvent(self, "PlayerChange").then(function () { + playbackManager.pause(); + var sessionId = getActivePlayerId(); + if (!sessionId) { + console.error("Missing sessionId!"); + displaySyncplayUpdate({ + Text: "Failed to enable Syncplay!" + }); + return; + } + // Sometimes JoinGroup fails, maybe because server hasn't been updated yet + setTimeout(() => { + apiClient.sendSyncplayCommand(sessionId, "JoinGroup", { + GroupId: cmd.GroupId + }); + }, 500); + }); + }); + break; + case 'UserJoined': + displaySyncplayUpdate({ + Text: globalize.translate('MessageSyncplayUserJoined', cmd.Data), + }); + break; + case 'UserLeft': + displaySyncplayUpdate({ + Text: globalize.translate('MessageSyncplayUserLeft', cmd.Data), + }); + break; + case 'GroupJoined': + displaySyncplayUpdate({ + Text: globalize.translate('MessageSyncplayEnabled'), + }); + // Enable Syncplay + self.syncplayEnabledAt = new Date(cmd.Data); + self.syncplayReady = false; + events.trigger(self, "SyncplayEnabled", [true]); + waitForEvent(self, "SyncplayReady").then(function () { + self.processCommand(self.queuedCommand, apiClient); + self.queuedCommand = null; + }); + self.injectPlaybackManager(); + self.startPing(); + break; + case 'NotInGroup': + case 'GroupLeft': + displaySyncplayUpdate({ + Text: globalize.translate('MessageSyncplayDisabled'), + }); + // Disable Syncplay + self.syncplayEnabledAt = null; + self.syncplayReady = false; + events.trigger(self, "SyncplayEnabled", [false]); + self.restorePlaybackManager(); + self.stopPing(); + break; + case 'GroupWait': + displaySyncplayUpdate({ + Text: globalize.translate('MessageSyncplayGroupWait', cmd.Data), + }); + break; + case 'KeepAlive': + break; + default: + console.error('processSyncplayGroupUpdate does not recognize: ' + cmd.Type); + break; + } + } + + self.lastCommand = null; + self.queuedCommand = null; + + self.processCommand = function (cmd, apiClient) { + if (cmd === null) return; + + if (!self.isSyncplayEnabled()) { + console.debug("Syncplay processCommand: ignoring command", cmd); + return; + } + + if (!self.syncplayReady) { + console.debug("Syncplay processCommand: queued command", cmd); + self.queuedCommand = cmd; + return; + } + + cmd.When = new Date(cmd.When); + + if (cmd.When < self.syncplayEnabledAt) { + console.debug("Syncplay processCommand: ignoring old command", cmd); + return; + } + + // Check if new command differs from last one + if (self.lastCommand && + self.lastCommand.When === cmd.When && + self.lastCommand.PositionTicks === cmd.PositionTicks && + self.Command === cmd.Command + ) { + console.debug("Syncplay processCommand: ignoring duplicate command", cmd); + return; + } + + self.lastCommand = cmd; + console.log("Syncplay will", cmd.Command, "at", cmd.When, "PositionTicks", cmd.PositionTicks); + + switch (cmd.Command) { + case 'Play': + self.schedulePlay(cmd.When, cmd.PositionTicks); + break; + case 'Pause': + self.schedulePause(cmd.When, cmd.PositionTicks); + break; + case 'Seek': + self.scheduleSeek(cmd.When, cmd.PositionTicks); + break; + default: + console.error('processSyncplayCommand does not recognize: ' + cmd.Type); + break; + } + } + + self.scheduledCommand = null; + self.syncTimeout = null; + + self.schedulePlay = function (playAtTime, positionTicks) { + self.clearScheduledCommand(); + var currentTime = new Date(); + var playAtTimeLocal = self.serverDateToLocal(playAtTime); + + if (playAtTimeLocal > currentTime) { + var playTimeout = (playAtTimeLocal - currentTime) - self.playerDelay; + playbackManager.syncplay_seek(positionTicks); + + self.scheduledCommand = setTimeout(() => { + playbackManager.syncplay_unpause(); + + self.syncTimeout = setTimeout(() => { + self.syncEnabled = true + }, self.syncMethodThreshold / 2); + + }, playTimeout); + + // console.debug("Syncplay schedulePlay:", playTimeout); + } else { + // Group playback already started + var serverPositionTicks = positionTicks + (currentTime - playAtTimeLocal) * 10000; + playbackManager.syncplay_unpause(); + playbackManager.syncplay_seek(serverPositionTicks); + + self.syncTimeout = setTimeout(() => { + self.syncEnabled = true + }, self.syncMethodThreshold / 2); + } + } + + self.schedulePause = function (pauseAtTime, positionTicks) { + self.clearScheduledCommand(); + var currentTime = new Date(); + var pauseAtTimeLocal = self.serverDateToLocal(pauseAtTime); + + if (pauseAtTimeLocal > currentTime) { + var pauseTimeout = (pauseAtTimeLocal - currentTime) - self.playerDelay; + + self.scheduledCommand = setTimeout(() => { + playbackManager.syncplay_pause(); + setTimeout(() => { + playbackManager.syncplay_seek(positionTicks); + }, 800); + + }, pauseTimeout); + } else { + playbackManager.syncplay_pause(); + setTimeout(() => { + playbackManager.syncplay_seek(positionTicks); + }, 800); + } + } + + self.scheduleSeek = function (seekAtTime, positionTicks) { + self.schedulePause(seekAtTime, positionTicks); + } + + self.clearScheduledCommand = function () { + clearTimeout(self.scheduledCommand); + clearTimeout(self.syncTimeout); + + self.syncEnabled = false; + if (self.currentPlayer) { + self.currentPlayer.setPlaybackRate(1); + } + self.clearSyncIcon(); + } + + self.injectPlaybackManager = function () { + if (!self.isSyncplayEnabled()) return; + if (playbackManager.syncplayEnabled) return; + + playbackManager.syncplay_unpause = playbackManager.unpause; + playbackManager.syncplay_pause = playbackManager.pause; + playbackManager.syncplay_seek = playbackManager.seek; + + playbackManager.unpause = self.playRequest; + playbackManager.pause = self.pauseRequest; + playbackManager.seek = self.seekRequest; + playbackManager.syncplayEnabled = true; + } + + self.restorePlaybackManager = function () { + if (self.isSyncplayEnabled()) return; + if (!playbackManager.syncplayEnabled) return; + + playbackManager.unpause = playbackManager.syncplay_unpause; + playbackManager.pause = playbackManager.syncplay_pause; + playbackManager.seek = playbackManager.syncplay_seek; + playbackManager.syncplayEnabled = false; + } + + self.playRequest = function (player) { + var apiClient = connectionManager.currentApiClient(); + var sessionId = getActivePlayerId(); + apiClient.sendSyncplayCommand(sessionId, "PlayRequest"); + } + + self.pauseRequest = function (player) { + var apiClient = connectionManager.currentApiClient(); + var sessionId = getActivePlayerId(); + apiClient.sendSyncplayCommand(sessionId, "PauseRequest"); + // Pause locally as well, to give the user some little control + playbackManager.syncplay_pause(); + } + + self.seekRequest = function (PositionTicks, player) { + var apiClient = connectionManager.currentApiClient(); + var sessionId = getActivePlayerId(); + apiClient.sendSyncplayCommand(sessionId, "SeekRequest", { + PositionTicks: PositionTicks + }); + } + + self.pingIntervalTimeoutGreedy = 1000; + self.pingIntervalTimeoutLowProfile = 60000; + self.greedyPingCount = 3; + + self.pingStop = true; + self.pingIntervalTimeout = self.pingIntervalTimeoutGreedy; + self.pingInterval = null; + self.initTimeDiff = 0; // number of pings + self.timeDiff = 0; // local time minus server time + self.roundTripDuration = 0; + self.notifySyncplayReady = false; + + self.updateTimeDiff = function (pingStartTime, pingEndTime, serverTime) { + self.roundTripDuration = (pingEndTime - pingStartTime); + // The faster the response, the closer we are to the real timeDiff value + // localTime = pingStartTime + roundTripDuration / 2 + // newTimeDiff = localTime - serverTime + var newTimeDiff = (pingStartTime - serverTime) + (self.roundTripDuration / 2); + + // Initial setup + if (self.initTimeDiff === 0) { + self.timeDiff = newTimeDiff; + self.initTimeDiff++ + return; + } + + // As response time gets better, absolute value should decrease + var distanceFromZero = Math.abs(newTimeDiff); + var oldDistanceFromZero = Math.abs(self.timeDiff); + if (distanceFromZero < oldDistanceFromZero) { + self.timeDiff = newTimeDiff; + } + + // Avoid overloading server + if (self.initTimeDiff >= self.greedyPingCount) { + self.pingIntervalTimeout = self.pingIntervalTimeoutLowProfile; + } else { + self.initTimeDiff++; + } + + // console.debug("Syncplay updateTimeDiff:", serverTime, self.timeDiff, self.roundTripDuration, newTimeDiff); + } + + self.requestPing = function () { + if (self.pingInterval === null && !self.pingStop) { + self.pingInterval = setTimeout(() => { + self.pingInterval = null; + + var apiClient = connectionManager.currentApiClient(); + var sessionId = getActivePlayerId(); + + var pingStartTime = new Date(); + apiClient.sendSyncplayCommand(sessionId, "GetUtcTime").then(function (response) { + var pingEndTime = new Date(); + response.text().then(function (utcTime) { + var serverTime = new Date(utcTime); + self.updateTimeDiff(pingStartTime, pingEndTime, serverTime); + + // Alert user that ping is high + if (Math.abs(self.roundTripDuration) >= 1000) { + events.trigger(self, "SyncplayError", [true]); + } else { + events.trigger(self, "SyncplayError", [false]); + } + + // Notify server of ping + apiClient.sendSyncplayCommand(sessionId, "KeepAlive", { + Ping: (self.roundTripDuration / 2) + self.playerDelay + }); + + if (self.notifySyncplayReady) { + self.syncplayReady = true; + events.trigger(self, "SyncplayReady"); + self.notifySyncplayReady = false; + } + + self.requestPing(); + }); + }); + + }, self.pingIntervalTimeout); + } + } + + self.startPing = function () { + self.notifySyncplayReady = true; + self.pingStop = false; + self.initTimeDiff = self.initTimeDiff > self.greedyPingCount ? 1 : self.initTimeDiff; + self.pingIntervalTimeout = self.pingIntervalTimeoutGreedy; + + self.requestPing(); + } + + self.stopPing = function () { + self.pingStop = true; + if (self.pingInterval !== null) { + clearTimeout(self.pingInterval); + self.pingInterval = null; + } + } + + self.serverDateToLocal = function (server) { + // local - server = diff + return new Date(server.getTime() + self.timeDiff); + } + + self.localDateToServer = function (local) { + // local - server = diff + return new Date(local.getTime() - self.timeDiff); + } + + // THIS FEATURE IS CURRENTLY DISABLED + // Mainly because SpeedToSync seems to do the job + // Also because the delay is unreliable and different every time + self.playerDelay = 0; + self.playerDelayMeasured = true; // disable this feature + self.measurePlayerDelay = function (positionTicks) { + if (self.playerDelayMeasured) { + playbackManager.syncplay_seek(positionTicks); + } else { + // Measure playerDelay by issuing a play command + // followed by a pause command after one second + // PositionTicks should be at 1 second minus two times the player delay + loading.show(); + self.currentPlayer.setPlaybackRate(1); + playbackManager.syncplay_seek(0); + // Wait for player to seek + setTimeout(() => { + playbackManager.syncplay_unpause(); + // Play one second of media + setTimeout(() => { + playbackManager.syncplay_pause(); + // Wait for state to get update + setTimeout(() => { + var state = playbackManager.getPlayerState().PlayState; + var delayTicks = millisecondsToTicks(1000) - state.PositionTicks; + var delayMillis = ticksToMilliseconds(delayTicks); + self.playerDelay = delayMillis / 2; + // Make sure delay is not negative + self.playerDelay = self.playerDelay > 0 ? self.playerDelay : 0; + self.playerDelayMeasured = true; + // console.debug("Syncplay PlayerDelay:", self.playerDelay); + // Restore player + setTimeout(() => { + playbackManager.syncplay_seek(positionTicks); + loading.hide(); + }, 800); + }, 1000); + }, 1000); + }, 2000); + } + } + + // Stats + self.isSyncplayEnabled = function () { + return self.syncplayEnabledAt !== null ? true : false; + } + + self.getStats = function () { + return { + TimeDiff: self.timeDiff, + PlaybackDiff: self.playbackDiffMillis, + SyncMethod: self.syncMethod + } + } + + // UI + self.showSyncIcon = function (syncMethod) { + self.syncMethod = syncMethod; + events.trigger(self, "SyncplayError", [true]); + } + + self.clearSyncIcon = function () { + self.syncMethod = "None"; + events.trigger(self, "SyncplayError", [false]); + } + } + + return new SyncplayManager(); +}); diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js index 81a381bff2..8afe5f10f1 100644 --- a/src/scripts/librarymenu.js +++ b/src/scripts/librarymenu.js @@ -1,4 +1,4 @@ -define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', 'viewManager', 'libraryBrowser', 'appRouter', 'apphost', 'playbackManager', 'browser', 'globalize', 'scripts/imagehelper', 'paper-icon-button-light', 'material-icons', 'scrollStyles', 'flexStyles'], function (dom, layoutManager, inputManager, connectionManager, events, viewManager, libraryBrowser, appRouter, appHost, playbackManager, browser, globalize, imageHelper) { +define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', 'viewManager', 'libraryBrowser', 'appRouter', 'apphost', 'playbackManager', 'syncplayManager', 'browser', 'globalize', 'scripts/imagehelper', 'paper-icon-button-light', 'material-icons', 'scrollStyles', 'flexStyles'], function (dom, layoutManager, inputManager, connectionManager, events, viewManager, libraryBrowser, appRouter, appHost, playbackManager, syncplayManager, browser, globalize, imageHelper) { 'use strict'; function renderHeader() { @@ -12,6 +12,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', ' html += ''; html += '
'; html += ''; + html += ''; html += ''; html += ''; html += ''; @@ -30,6 +31,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', ' headerCastButton = skinHeader.querySelector('.headerCastButton'); headerAudioPlayerButton = skinHeader.querySelector('.headerAudioPlayerButton'); headerSearchButton = skinHeader.querySelector('.headerSearchButton'); + headerSyncButton = skinHeader.querySelector('.headerSyncButton'); lazyLoadViewMenuBarImages(); bindMenuEvents(); @@ -93,6 +95,8 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', ' } } + headerSyncButton.classList.remove("hide"); + requiresUserRefresh = false; } @@ -147,6 +151,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', ' } headerAudioPlayerButton.addEventListener('click', showAudioPlayer); + headerSyncButton.addEventListener('click', onSyncButtonClicked); if (layoutManager.mobile) { initHeadRoom(skinHeader); @@ -177,6 +182,32 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', ' }); } + function onSyncButtonClicked() { + var btn = this; + + require(["groupSelectionMenu"], function (groupSelectionMenu) { + groupSelectionMenu.show(btn); + }); + } + + function updateSyncplayIcon(event, enabled) { + var icon = headerSyncButton.querySelector("i"); + if (enabled) { + icon.innerHTML = "sync"; + } else { + icon.innerHTML = "sync_disabled"; + } + } + + function updateSyncplayErrorIcon(event, show_error) { + var icon = headerSyncButton.querySelector("i"); + if (show_error) { + icon.innerHTML = "sync_problem"; + } else { + icon.innerHTML = "sync"; + } + } + function getItemHref(item, context) { return appRouter.getRouteUrl(item, { context: context @@ -799,6 +830,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', ' var headerCastButton; var headerSearchButton; var headerAudioPlayerButton; + var headerSyncButton; var enableLibraryNavDrawer = layoutManager.desktop; var skinHeader = document.querySelector('.skinHeader'); var requiresUserRefresh = true; @@ -931,6 +963,8 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', ' updateUserInHeader(); }); events.on(playbackManager, 'playerchange', updateCastIcon); + events.on(syncplayManager, 'SyncplayEnabled', updateSyncplayIcon); + events.on(syncplayManager, 'SyncplayError', updateSyncplayErrorIcon); loadNavDrawer(); return LibraryMenu; }); diff --git a/src/scripts/site.js b/src/scripts/site.js index c00169d224..3a2ba13156 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -817,6 +817,7 @@ var AppInfo = {}; define('playbackSettings', [componentsPath + '/playbacksettings/playbacksettings'], returnFirstDependency); define('homescreenSettings', [componentsPath + '/homescreensettings/homescreensettings'], returnFirstDependency); define('playbackManager', [componentsPath + '/playback/playbackmanager'], getPlaybackManager); + define('syncplayManager', [componentsPath + '/syncplay/syncplaymanager'], returnFirstDependency); define('layoutManager', [componentsPath + '/layoutManager', 'apphost'], getLayoutManager); define('homeSections', [componentsPath + '/homesections/homesections'], returnFirstDependency); define('playMenu', [componentsPath + '/playmenu'], returnFirstDependency); diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 9895bbc05c..c7611333f0 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -491,6 +491,8 @@ "HeaderSubtitleProfile": "Subtitle Profile", "HeaderSubtitleProfiles": "Subtitle Profiles", "HeaderSubtitleProfilesHelp": "Subtitle profiles describe the subtitle formats supported by the device.", + "HeaderSyncplaySelectGroup": "Join a group", + "HeaderSyncplayEnabled": "Syncplay enabled", "HeaderSystemDlnaProfiles": "System Profiles", "HeaderTags": "Tags", "HeaderTaskTriggers": "Task Triggers", @@ -853,6 +855,13 @@ "LabelSubtitlePlaybackMode": "Subtitle mode:", "LabelSubtitles": "Subtitles", "LabelSupportedMediaTypes": "Supported Media Types:", + "LabelSyncplayTimeDiff": "Time difference with server:", + "LabelSyncplayPlaybackDiff": "Playback time difference:", + "LabelSyncplaySyncMethod": "Sync method:", + "LabelSyncplayNewGroup": "New group", + "LabelSyncplayNewGroupDescription": "Create a new group", + "LabelSyncplayLeaveGroup": "Leave group", + "LabelSyncplayLeaveGroupDescription": "Disable Syncplay", "LabelTVHomeScreen": "TV mode home screen:", "LabelTag": "Tag:", "LabelTagline": "Tagline:", @@ -1016,6 +1025,12 @@ "MessageUnableToConnectToServer": "We're unable to connect to the selected server right now. Please ensure it is running and try again.", "MessageUnsetContentHelp": "Content will be displayed as plain folders. For best results use the metadata manager to set the content types of sub-folders.", "MessageYouHaveVersionInstalled": "You currently have version {0} installed.", + "MessageSyncplayEnabled": "Syncplay enabled.", + "MessageSyncplayDisabled": "Syncplay disabled.", + "MessageSyncplayUserJoined": "{0} joined group.", + "MessageSyncplayUserLeft": "{0} left group.", + "MessageSyncplayGroupWait": "{0} is buffering...", + "MessageSyncplayNoGroupsAvailable": "No groups available.", "Metadata": "Metadata", "MetadataManager": "Metadata Manager", "MetadataSettingChangeHelp": "Changing metadata settings will affect new content that is added going forward. To refresh existing content, open the detail screen and click the refresh button, or perform bulk refreshes using the metadata manager.",