From d931a9c144ceb9c40cb2cd14e931d37c82bc458a Mon Sep 17 00:00:00 2001 From: John Livingston Date: Fri, 14 Jun 2024 15:07:15 +0200 Subject: [PATCH] Share url element: restore and save state. --- client/common/lib/elements/livechat.ts | 2 + .../common/videowatch/elements/share-chat.ts | 53 +++++++++++++++++-- 2 files changed, 52 insertions(+), 3 deletions(-) diff --git a/client/common/lib/elements/livechat.ts b/client/common/lib/elements/livechat.ts index 08e6f6d1..16ffda76 100644 --- a/client/common/lib/elements/livechat.ts +++ b/client/common/lib/elements/livechat.ts @@ -15,6 +15,7 @@ export class LivechatElement extends LitElement { public readonly ptOptions: RegisterClientOptions public readonly ptTranslate: RegisterClientOptions['peertubeHelpers']['translate'] public readonly ptNotifier: RegisterClientOptions['peertubeHelpers']['notifier'] + public readonly logger: ReturnType constructor () { super() @@ -22,6 +23,7 @@ export class LivechatElement extends LitElement { this.ptOptions = this.ptContext.ptOptions this.ptNotifier = this.ptOptions.peertubeHelpers.notifier this.ptTranslate = this.ptOptions.peertubeHelpers.translate + this.logger = this.ptContext.logger.createLogger(this.tagName.toLowerCase()) } protected override createRenderRoot = (): Element | ShadowRoot => { diff --git a/client/common/videowatch/elements/share-chat.ts b/client/common/videowatch/elements/share-chat.ts index a53eee5e..3141d93c 100644 --- a/client/common/videowatch/elements/share-chat.ts +++ b/client/common/videowatch/elements/share-chat.ts @@ -11,6 +11,10 @@ import { tplShareChatCopy, tplShareChatTips, tplShareChatTabs, tplShareChatOptio import { isAutoColorsAvailable } from 'shared/lib/autocolors' import { getIframeUri, getXMPPAddr, UriOptions } from '../uri' +const validTabNames = ['peertube', 'embed', 'xmpp'] as const + +type ValidTabNames = typeof validTabNames[number] + /** * Results of the ShareChatElement.computeUrl method. */ @@ -48,7 +52,7 @@ export class ShareChatElement extends LivechatElement { * The current tab. */ @property({ attribute: false }) - public currentTab: 'peertube' | 'embed' | 'xmpp' = 'peertube' + public currentTab: ValidTabNames = 'peertube' /** * Should we render the XMPP tab? @@ -103,7 +107,8 @@ export class ShareChatElement extends LivechatElement { protected override updated (changedProperties: PropertyValues): void { super.updated(changedProperties) - this.logger.info('Update!') + this.logger.log('Updated was triggered, saving current state.') + this._saveCurrentState() } protected override render = (): TemplateResult => { @@ -118,7 +123,32 @@ export class ShareChatElement extends LivechatElement { } protected _restorePreviousState (): void { - // TODO: restore previous state. + if (!window.localStorage) { + this.logger.warn('No localStorage, can\'t restore state.') + return + } + const s = window.localStorage.getItem('peertube-plugin-livechat-shareurl') + if (!s) { + return + } + try { + const v = JSON.parse(s) + if (!v || (typeof v !== 'object') || v.version !== 2) { + this.logger.warn('Stored information are invalid, dropping') + return + } + this.logger.log('Restoring previous state') + if (validTabNames.includes(v.currentTab)) { + this.currentTab = v.currentTab + } + this.embedIFrame = !!v.embedIFrame + this.embedReadOnly = !!v.embedReadOnly + this.embedReadOnlyScrollbar = !!v.embedReadOnlyScrollbar + this.embedReadOnlyTransparentBackground = !!v.embedReadOnlyTransparentBackground + this.embedAutocolors = !!v.embedAutocolors + } catch (err) { + this.logger.error(err as string) + } // Some sanity checks, to not be in an impossible state. if (!this.xmppUriEnabled && this.currentTab === 'xmpp') { @@ -126,6 +156,23 @@ export class ShareChatElement extends LivechatElement { } } + protected _saveCurrentState (): void { + if (!window.localStorage) { + this.logger.warn('No localStorage, can\'t save state.') + return + } + const v = { + version: 2, // in case we add incompatible values in a near feature + currentTab: this.currentTab, + embedIFrame: this.embedIFrame, + embedReadOnly: this.embedReadOnly, + embedReadOnlyScrollbar: this.embedReadOnlyScrollbar, + embedReadOnlyTransparentBackground: this.embedReadOnlyTransparentBackground, + embedAutocolors: this.embedAutocolors + } + window.localStorage.setItem('peertube-plugin-livechat-shareurl', JSON.stringify(v)) + } + public computeUrl (): ComputedUrl { switch (this.currentTab) { case 'peertube': return this._computeUrlPeertube()