From 67e1e86edbe852ed35e082186e5752e1c3b5e304 Mon Sep 17 00:00:00 2001 From: Sebastian Streich Date: Wed, 21 Aug 2024 21:43:41 +0100 Subject: [PATCH] Polish: Get Time from the VPN client (#32) > [!NOTE] > Depends on https://github.com/mozilla-mobile/mozilla-vpn-client/pull/9776/files Pulls the connection timestamp from the VPN state, allowing them to sync. ![image](https://github.com/user-attachments/assets/9d138d03-3fa3-44ab-a996-f8656eea0f56) --- src/background/vpncontroller/states.js | 10 ++++- src/background/vpncontroller/vpncontroller.js | 9 ++++- src/components/vpncard.js | 37 +++---------------- src/ui/browserAction/popupPage.js | 1 + 4 files changed, 24 insertions(+), 33 deletions(-) diff --git a/src/background/vpncontroller/states.js b/src/background/vpncontroller/states.js index 1c1705c..d02e836 100644 --- a/src/background/vpncontroller/states.js +++ b/src/background/vpncontroller/states.js @@ -42,6 +42,10 @@ export class VPNState { /** @type {ServerCountry | undefined } */ exitServerCountry = new ServerCountry(); + /** + * Timestamp since the VPN connection was established + */ + connectedSince = 0; /** * Constructs state of another state, moving * non essential data. @@ -130,16 +134,20 @@ export class StateVPNEnabled extends VPNState { * @param {VPNState} other - * @param {string|boolean} aloophole - False if loophole is not supported, */ - constructor(other, aloophole) { + constructor(other, aloophole, connectedSince) { super(other); if (other) { this.loophole = other.loophole; this.exitServerCity = other.exitServerCity; this.exitServerCountry = other.exitServerCountry; + this.connectedSince = other.connectedSince; } if (aloophole) { this.loophole = aloophole; } + if (connectedSince) { + this.connectedSince = connectedSince; + } } state = "Enabled"; diff --git a/src/background/vpncontroller/vpncontroller.js b/src/background/vpncontroller/vpncontroller.js index 27bb80f..b25fa69 100644 --- a/src/background/vpncontroller/vpncontroller.js +++ b/src/background/vpncontroller/vpncontroller.js @@ -145,6 +145,12 @@ export class VPNController extends Component { case "status": const status = response.status; const controllerState = status.vpn; + const connectedSince = (() => { + if (!status.connectedSince) { + return 0; + } + return parseInt(status.connectedSince); + })(); const exit_city_name = status.location["exit_city_name"]; const exit_country_code = status.location["exit_country_code"]; const exitServerCountry = this.#mState.value.servers.find( @@ -163,7 +169,8 @@ export class VPNController extends Component { if (controllerState === "StateOn") { this.#mState.value = new StateVPNEnabled( next_state, - status.localProxy?.url + status.localProxy?.url, + connectedSince ); return; } diff --git a/src/components/vpncard.js b/src/components/vpncard.js index 1c0f7e4..5de361f 100644 --- a/src/components/vpncard.js +++ b/src/components/vpncard.js @@ -27,10 +27,9 @@ export class VPNCard extends LitElement { constructor() { super(); this.enabled = false; - this.connectedSince = Date.now(); - this.cityName = ""; this.countryFlag = ""; + this.connectedSince = 0; } #intervalHandle = null; @@ -78,9 +77,11 @@ export class VPNCard extends LitElement { formatSingle(secs) ); } - const timeString = this.enabled - ? html`

${formatTime(Date.now() - this.connectedSince)}

` - : html``; + //console.log(`Connected Since ${this.connectedSince}`) + const time = Date.now() - this.connectedSince; + //console.log(`Elapsed Time: ${time}`) + + const timeString = this.enabled ? html`

${formatTime(time)}

` : html``; const subLine = this.enabled ? "Secure and private" @@ -222,31 +223,5 @@ export class VPNCard extends LitElement { border-radius: 6px; } `; - - /** - * Returns the Properties this element should have based on a VPN State - * @param {VPNState} vpnState - * @returns {VPNCard.properties} - */ - static propertiesFrom(vpnState) { - return { - enabled: vpnState.connected, - cityName: vpnState.exitServerCity?.name, - countryFlag: vpnState.exitServerCountry?.code, - connectedSince: Date.now(), // TODO: We actually dont send this from the client - }; - } - /** - * Returns the Properties this element should have based on a VPN State - * @param {VPNState} vpnState - * @returns {void} - */ - apply(vpnState) { - const bag = VPNCard.propertiesFrom(vpnState); - this.enabled = bag.enabled; - this.cityName = bag.cityName; - this.countryFlag = bag.countryFlag; - this.connectedSince = bag.connectedSince; - } } customElements.define("vpn-card", VPNCard); diff --git a/src/ui/browserAction/popupPage.js b/src/ui/browserAction/popupPage.js index 393c41b..f8b5a92 100644 --- a/src/ui/browserAction/popupPage.js +++ b/src/ui/browserAction/popupPage.js @@ -114,6 +114,7 @@ export class BrowserActionPopup extends LitElement { .enabled=${this.vpnState?.connected} .cityName=${this.vpnState?.exitServerCity?.name} .countryFlag=${this.vpnState?.exitServerCountry?.code} + .connectedSince=${this.vpnState?.connectedSince} > ${this.locationSettings()}