diff --git a/src/components/playerstats/playerstats.js b/src/components/playerstats/playerstats.js index 4bd49ba5c1..404baab7eb 100644 --- a/src/components/playerstats/playerstats.js +++ b/src/components/playerstats/playerstats.js @@ -332,8 +332,8 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncplay var stats = syncplayManager.getStats(); syncStats.push({ - label: globalize.translate("LabelSyncplayTimeDiff"), - value: stats.TimeDiff + "ms" + label: globalize.translate("LabelSyncplayTimeOffset"), + value: stats.TimeOffset + "ms" }); syncStats.push({ diff --git a/src/components/syncplay/syncplayManager.js b/src/components/syncplay/syncplayManager.js index 86b7ec34af..de1424b89f 100644 --- a/src/components/syncplay/syncplayManager.js +++ b/src/components/syncplay/syncplayManager.js @@ -8,6 +8,7 @@ import events from 'events'; import connectionManager from 'connectionManager'; import playbackManager from 'playbackManager'; +import timeSyncManager from 'timeSyncManager'; import toast from 'toast'; import globalize from 'globalize'; @@ -80,11 +81,7 @@ class SyncplayManager { this.scheduledCommand = null; this.syncTimeout = null; - this.pingStop = true; - this.pingIntervalTimeout = PingIntervalTimeoutGreedy; - this.pingInterval = null; - this.initTimeDiff = 0; // number of pings - this.timeDiff = 0; // local time minus server time + this.timeOffsetWithServer = 0; // server time minus local time this.roundTripDuration = 0; this.notifySyncplayReady = false; @@ -101,6 +98,17 @@ class SyncplayManager { events.on(this, "TimeUpdate", (event) => { this.syncPlaybackTime(); }); + + events.on(timeSyncManager, "Update", (event, timeOffset, ping) => { + this.timeOffsetWithServer = timeOffset; + this.roundTripDuration = ping * 2; + + if (this.notifySyncplayReady) { + this.syncplayReady = true; + events.trigger(this, "SyncplayReady"); + this.notifySyncplayReady = false; + } + }); } /** @@ -377,14 +385,17 @@ class SyncplayManager { */ enableSyncplay (apiClient, enabledAt, showMessage = false) { this.syncplayEnabledAt = enabledAt; - this.syncplayReady = false; + this.injectPlaybackManager(); events.trigger(this, "SyncplayEnabled", [true]); + waitForEvent(this, "SyncplayReady").then(() => { this.processCommand(this.queuedCommand, apiClient); this.queuedCommand = null; }); - this.injectPlaybackManager(); - this.startPing(); + this.syncplayReady = false; + this.notifySyncplayReady = true; + + timeSyncManager.forceUpdate(); if (showMessage) { toast({ @@ -405,7 +416,6 @@ class SyncplayManager { this.syncEnabled = false; events.trigger(this, "SyncplayEnabled", [false]); this.restorePlaybackManager(); - this.stopPing(); this.stopSyncWatcher(); if (showMessage) { @@ -431,7 +441,7 @@ class SyncplayManager { schedulePlay (playAtTime, positionTicks) { this.clearScheduledCommand(); var currentTime = new Date(); - var playAtTimeLocal = this.serverDateToLocal(playAtTime); + var playAtTimeLocal = timeSyncManager.serverDateToLocal(playAtTime); if (playAtTimeLocal > currentTime) { var playTimeout = playAtTimeLocal - currentTime; @@ -469,7 +479,7 @@ class SyncplayManager { schedulePause (pauseAtTime, positionTicks) { this.clearScheduledCommand(); var currentTime = new Date(); - var pauseAtTimeLocal = this.serverDateToLocal(pauseAtTime); + var pauseAtTimeLocal = timeSyncManager.serverDateToLocal(pauseAtTime); if (pauseAtTimeLocal > currentTime) { var pauseTimeout = pauseAtTimeLocal - currentTime; @@ -575,126 +585,6 @@ class SyncplayManager { }); } - /** - * Computes time difference between this client's time and server's time. - * @param {Date} pingStartTime Local time when ping request started. - * @param {Date} pingEndTime Local time when ping request ended. - * @param {Date} serverTime Server UTC time at ping request. - */ - updateTimeDiff (pingStartTime, pingEndTime, serverTime) { - this.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) + (this.roundTripDuration / 2); - - // Initial setup - if (this.initTimeDiff === 0) { - this.timeDiff = newTimeDiff; - this.initTimeDiff++ - return; - } - - // As response time gets better, absolute value should decrease - var distanceFromZero = Math.abs(newTimeDiff); - var oldDistanceFromZero = Math.abs(this.timeDiff); - if (distanceFromZero < oldDistanceFromZero) { - this.timeDiff = newTimeDiff; - } - - // Avoid overloading server - if (this.initTimeDiff >= GreedyPingCount) { - this.pingIntervalTimeout = PingIntervalTimeoutLowProfile; - } else { - this.initTimeDiff++; - } - - // console.debug("Syncplay updateTimeDiff:", serverTime, this.timeDiff, this.roundTripDuration, newTimeDiff); - } - - /** - * Schedules a ping request to the server. Used to compute time difference between client and server. - */ - requestPing () { - if (this.pingInterval === null && !this.pingStop) { - this.pingInterval = setTimeout(() => { - this.pingInterval = null; - - var apiClient = connectionManager.currentApiClient(); - var sessionId = getActivePlayerId(); - - if (!sessionId) { - this.signalError(); - toast({ - // TODO: translate - text: "Syncplay error occured." - }); - return; - } - - var pingStartTime = new Date(); - apiClient.sendSyncplayCommand(sessionId, "GetUtcTime").then((response) => { - var pingEndTime = new Date(); - response.text().then((utcTime) => { - var serverTime = new Date(utcTime); - this.updateTimeDiff(pingStartTime, pingEndTime, serverTime); - - // Alert user that ping is high - if (Math.abs(this.roundTripDuration) >= 1000) { - events.trigger(this, "SyncplayError", [true]); - } else { - events.trigger(this, "SyncplayError", [false]); - } - - // Notify server of ping - apiClient.sendSyncplayCommand(sessionId, "KeepAlive", { - Ping: this.roundTripDuration / 2 - }); - - if (this.notifySyncplayReady) { - this.syncplayReady = true; - events.trigger(this, "SyncplayReady"); - this.notifySyncplayReady = false; - } - - this.requestPing(); - }); - }).catch((error) => { - console.error(error); - this.signalError(); - toast({ - // TODO: translate - text: "Syncplay error occured." - }); - }); - - }, this.pingIntervalTimeout); - } - } - - /** - * Starts the keep alive poller. - */ - startPing () { - this.notifySyncplayReady = true; - this.pingStop = false; - this.initTimeDiff = this.initTimeDiff > this.greedyPingCount ? 1 : this.initTimeDiff; - this.pingIntervalTimeout = PingIntervalTimeoutGreedy; - - this.requestPing(); - } - - /** - * Stops the keep alive poller. - */ - stopPing () { - this.pingStop = true; - if (this.pingInterval !== null) { - clearTimeout(this.pingInterval); - this.pingInterval = null; - } - } - /** * Attempts to sync playback time with estimated server time. * @@ -722,7 +612,7 @@ class SyncplayManager { const CurrentPositionTicks = playbackManager.currentTime(); // Estimate PositionTicks on server - const ServerPositionTicks = this.lastCommand.PositionTicks + ((currentTime - playAtTime) - this.timeDiff) * 10000; + const ServerPositionTicks = this.lastCommand.PositionTicks + ((currentTime - playAtTime) + this.timeOffsetWithServer) * 10000; // Measure delay that needs to be recovered // diff might be caused by the player internally starting the playback const diff = ServerPositionTicks - CurrentPositionTicks; @@ -848,33 +738,13 @@ class SyncplayManager { } } - /** - * Converts server time to local time. - * @param {Date} server The time to convert. - * @returns {Date} Local time. - */ - serverDateToLocal (server) { - // local - server = diff - return new Date(server.getTime() + this.timeDiff); - } - - /** - * Converts local time to server time. - * @param {Date} local The time to convert. - * @returns {Date} Server time. - */ - localDateToServer (local) { - // local - server = diff - return new Date(local.getTime() - this.timeDiff); - } - /** * Gets Syncplay stats. * @returns {Object} The Syncplay stats. */ getStats () { return { - TimeDiff: this.timeDiff, + TimeOffset: this.timeOffsetWithServer, PlaybackDiff: this.playbackDiffMillis, SyncMethod: this.syncMethod } diff --git a/src/components/syncplay/timeSyncManager.js b/src/components/syncplay/timeSyncManager.js new file mode 100644 index 0000000000..e526aa5fa4 --- /dev/null +++ b/src/components/syncplay/timeSyncManager.js @@ -0,0 +1,209 @@ +/* eslint-disable indent */ + +/** + * Module that manages time syncing with server. + * @module components/syncplay/timeSyncManager + */ + +import events from 'events'; +import connectionManager from 'connectionManager'; + +/** + * Time estimation + */ +const NumberOfTrackedMeasurements = 8; +const PollingIntervalGreedy = 1000; // milliseconds +const PollingIntervalLowProfile = 60000; // milliseconds +const GreedyPingCount = 3; + +/** + * Class that stores measurement data. + */ +class Measurement { + /** + * Creates a new measurement. + * @param {Date} t0 Client's timestamp of the request transmission + * @param {Date} t1 Server's timestamp of the request reception + * @param {Date} t2 Server's timestamp of the response transmission + * @param {Date} t3 Client's timestamp of the response reception + */ + constructor(t0, t1, t2, t3) { + this.t0 = t0.getTime(); + this.t1 = t1.getTime(); + this.t2 = t2.getTime(); + this.t3 = t3.getTime(); + } + + /** + * Time offset from server. + */ + getOffset () { + return ((this.t1 - this.t0) + (this.t2 - this.t3)) / 2; + } + + /** + * Get round-trip delay. + */ + getDelay () { + return (this.t3 - this.t0) - (this.t2 - this.t1); + } + + /** + * Get ping time. + */ + getPing () { + return this.getDelay() / 2; + } +} + +/** + * Class that manages time syncing with server. + */ +class TimeSyncManager { + constructor() { + this.pingStop = true; + this.pollingInterval = PollingIntervalGreedy; + this.poller = null; + this.pings = 0; // number of pings + this.measurement = null; // current time sync + this.measurements = []; + + this.startPing(); + } + + /** + * Gets status of time sync. + * @returns {boolean} _true_ if a measurement has been done, _false_ otherwise. + */ + isReady() { + return this.measurement ? true : false; + } + + /** + * Gets time offset with server. + * @returns {number} The time offset. + */ + getTimeOffset () { + return this.measurement ? this.measurement.getOffset() : 0; + } + + /** + * Gets ping time to server. + * @returns {number} The ping time. + */ + getPing () { + return this.measurement ? this.measurement.getPing() : 0; + } + + /** + * Updates time offset between server and client. + * @param {Measurement} measurement The new measurement. + */ + updateTimeOffset(measurement) { + this.measurements.push(measurement); + if (this.measurements.length > NumberOfTrackedMeasurements) { + this.measurements.shift(); + } + + // Pick measurement with minimum delay + const sortedMeasurements = this.measurements.slice(0); + sortedMeasurements.sort((a, b) => a.getDelay() - b.getDelay()); + this.measurement = sortedMeasurements[0]; + } + + /** + * Schedules a ping request to the server. Triggers time offset update. + */ + requestPing() { + if (!this.poller) { + this.poller = setTimeout(() => { + this.poller = null; + const apiClient = connectionManager.currentApiClient(); + const t0 = new Date(); // pingStartTime + apiClient.getServerTime().then((response) => { + const t3 = new Date(); // pingEndTime + response.json().then((data) => { + const t1 = new Date(data.RequestReceptionTime); // request received + const t2 = new Date(data.ResponseTransmissionTime); // response sent + + const measurement = new Measurement(t0, t1, t2, t3); + this.updateTimeOffset(measurement); + + // Avoid overloading server + if (this.pings >= GreedyPingCount) { + this.pollingInterval = PollingIntervalLowProfile; + } else { + this.pings++; + } + + events.trigger(this, "Update", [this.getTimeOffset(), this.getPing()]); + }); + }).catch((error) => { + console.error(error); + events.trigger(this, "Error", [error]); + }).finally(() => { + this.requestPing(); + }); + + }, this.pollingInterval); + } + } + + /** + * Drops accumulated measurements. + */ + resetMeasurements () { + this.measurement = null; + this.measurements = []; + } + + /** + * Starts the time poller. + */ + startPing() { + this.requestPing(); + } + + /** + * Stops the time poller. + */ + stopPing() { + if (this.poller) { + clearTimeout(this.poller); + this.poller = null; + } + } + + /** + * Resets poller into greedy mode. + */ + forceUpdate() { + this.stopPing(); + this.pollingInterval = PollingIntervalGreedy; + this.pings = 0; + this.startPing(); + } + + /** + * Converts server time to local time. + * @param {Date} server The time to convert. + * @returns {Date} Local time. + */ + serverDateToLocal(server) { + // server - local = offset + return new Date(server.getTime() + this.getTimeOffset()); + } + + /** + * Converts local time to server time. + * @param {Date} local The time to convert. + * @returns {Date} Server time. + */ + localDateToServer(local) { + // server - local = offset + return new Date(local.getTime() - this.getTimeOffset()); + } +} + +/** TimeSyncManager singleton. */ +export default new TimeSyncManager(); diff --git a/src/scripts/site.js b/src/scripts/site.js index 3954b153a4..ecfeb27349 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -824,6 +824,7 @@ var AppInfo = {}; define('playbackSettings', [componentsPath + '/playbacksettings/playbacksettings'], returnFirstDependency); define('homescreenSettings', [componentsPath + '/homescreensettings/homescreensettings'], returnFirstDependency); define('playbackManager', [componentsPath + '/playback/playbackmanager'], getPlaybackManager); + define('timeSyncManager', [componentsPath + '/syncplay/timeSyncManager'], returnDefault); define('syncplayManager', [componentsPath + '/syncplay/syncplaymanager'], returnDefault); define('playbackPermissionManager', [componentsPath + '/syncplay/playbackPermissionManager'], returnDefault); define('layoutManager', [componentsPath + '/layoutManager', 'apphost'], getLayoutManager); diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 136a015430..43b5f14148 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -855,7 +855,7 @@ "LabelSubtitlePlaybackMode": "Subtitle mode:", "LabelSubtitles": "Subtitles", "LabelSupportedMediaTypes": "Supported Media Types:", - "LabelSyncplayTimeDiff": "Time difference with server:", + "LabelSyncplayTimeOffset": "Time offset with server:", "LabelSyncplayPlaybackDiff": "Playback time difference:", "LabelSyncplaySyncMethod": "Sync method:", "LabelSyncplayNewGroup": "New group",