Merge pull request #68 from ww24/feat/open-option-page-after-recording

feat(settings): add a flag that open the option page after recording

src/configuration.ts

@@ -19,6 +19,7 @@ export class Configuration {
     enableBugTracking: boolean
     updatedAt: number
     userId: string
+    openOptionPage: boolean
     constructor() {
         this.windowSize = {
             width: 1920,
@@ -38,6 +39,7 @@ export class Configuration {
         this.enableBugTracking = true
         this.updatedAt = 0
         this.userId = ''
+        this.openOptionPage = true
     }
     static restoreDefault({ userId }: Configuration): Configuration {
         const config = new Configuration()

src/element/settings.ts

@@ -118,6 +118,11 @@ export class Settings extends LitElement {
         <md-filled-text-field class="video-format-input" label="audio bitrate" type="number" min="1" suffix-text="Kbps" .value=${live(this.config.videoFormat.audioBitrate / 1024)} @input=${this.updateProp('videoFormat', 'audioBitrate')}></md-filled-text-field>
         <md-filled-text-field class="video-format-input" label="video bitrate" type="number" min="0" step="0.1" supporting-text="0 means auto (number of pixels * 8 bps)" suffix-text="Mbps" .value=${live(this.config.videoFormat.videoBitrate / 1024 / 1024)} @input=${this.updateProp('videoFormat', 'videoBitrate')}></md-filled-text-field>
         <md-filled-text-field class="mime-type-input" label="MIME type" type="text" .value=${live(this.config.videoFormat.mimeType)} @input=${this.updateProp('videoFormat', 'mimeType')}></md-filled-text-field>
+        <h2>Option</h2>
+        <label style="line-height: 32px; font-size: 1.5em">
+            Open the option page after recording
+            <md-switch ?selected=${live(this.config.openOptionPage)} @input=${this.updateProp('openOptionPage')}></md-switch>
+        </label>
         <h2>Privacy</h2>
         <label style="line-height: 32px; font-size: 1.5em">
             Bug Tracking
@@ -145,7 +150,7 @@ export class Settings extends LitElement {
         }
         await chrome.runtime.sendMessage(msg)
     }
-    private updateProp(key1: 'windowSize' | 'screenRecordingSize' | 'videoFormat' | 'enableBugTracking', key2?: string) {
+    private updateProp(key1: 'windowSize' | 'screenRecordingSize' | 'videoFormat' | 'enableBugTracking' | 'openOptionPage', key2?: string) {
         return async (e: Event) => {
             const oldVal = { ...this.config }
 
@@ -192,6 +197,7 @@ export class Settings extends LitElement {
                     }
                     break
                 case 'enableBugTracking':
+                case 'openOptionPage':
                     if (!(e.target instanceof MdSwitch)) return
                     this.config[key1] = e.target.selected
                     break

src/service_worker.ts

@@ -14,12 +14,12 @@ chrome.runtime.onInstalled.addListener(async () => {
     await getOrCreateOffscreenDocument()
 
     const defaultConfig = new Configuration()
-    const remoteConfig = (await storage.get(Configuration.key)) as Configuration
+    const remoteConfig = await getRemoteConfiguration()
     // for backward compatibility
     if (remoteConfig != null && remoteConfig.screenRecordingSize.auto != true) {
         remoteConfig.screenRecordingSize.auto = false
     }
-    const config = deepMerge(defaultConfig, remoteConfig)
+    const config = remoteConfig == null ? defaultConfig : deepMerge(defaultConfig, remoteConfig)
     if (config.userId === '') {
         config.userId = uuidv7()
     }
@@ -90,7 +90,7 @@ async function startRecording(tab: chrome.tabs.Tab) {
     await chrome.runtime.sendMessage(msg)
 
     await chrome.action.setIcon({ path: recordingIcon })
-};
+}
 
 async function stopRecording() {
     const msg: OffscreenStopRecordingMessage = {
@@ -99,7 +99,10 @@ async function stopRecording() {
     }
     await chrome.runtime.sendMessage(msg)
     await chrome.action.setIcon({ path: notRecordingIcon })
-};
+
+    const config = await getConfiguration()
+    if (config.openOptionPage) await chrome.runtime.openOptionsPage()
+}
 
 chrome.runtime.onMessage.addListener(async (message: Message) => {
     try {
@@ -116,13 +119,15 @@ chrome.runtime.onMessage.addListener(async (message: Message) => {
                 await storage.set(Configuration.key, message.data)
                 return
             case 'fetch-config':
-                const data = await storage.get(Configuration.key)
-                if (data == null || !(Configuration.key in data)) return
-                console.debug('fetch:', data[Configuration.key])
+                const defaultConfig = new Configuration()
+                const remoteConfig = await getRemoteConfiguration()
+                if (remoteConfig == null) return
+                const config = deepMerge(defaultConfig, remoteConfig)
+                console.debug('fetch:', config)
                 const msg: OptionSyncConfigMessage = {
                     target: 'option',
                     type: 'sync-config',
-                    data: data[Configuration.key] as Configuration,
+                    data: config,
                 }
                 await chrome.runtime.sendMessage(msg)
                 return
@@ -146,7 +151,17 @@ async function resizeWindow({ width, height }: Resolution) {
         state: 'normal',
     }
     await chrome.windows.update(window.id, updateInfo)
-};
+}
+
+async function getRemoteConfiguration(): Promise<Configuration | null> {
+    return (await storage.get(Configuration.key)) as Configuration | null
+}
+
+async function getConfiguration(): Promise<Configuration> {
+    const defaultConfig = new Configuration()
+    const remoteConfig = await getRemoteConfiguration()
+    return remoteConfig == null ? defaultConfig : deepMerge(defaultConfig, remoteConfig)
+}
 
 // remote configuration change log
 chrome.storage.onChanged.addListener((changes, namespace) => {