policies create from state.

client/src/components/RoomsCreate.vue

@@ -257,60 +257,58 @@
 
         <v-row align="center" no-gutters class="mt-3">
           <h2 class="my-3">
-            Browser policies <small>(experimental)</small>
+            Browser policy
           </h2>
           <v-checkbox
-            v-model="policiesEnabled"
+            v-model="browserPolicyEnabled"
+            :disabled="!browserPolicyConfig"
             hide-details
             class="shrink ml-2 mt-0"
           ></v-checkbox>
         </v-row>
 
-        <v-row align="center" no-gutters class="mt-0">
-          <v-col>
-            <v-select
-              v-model="policies.extensions"
-              label="Extensions (chromium only now)"
-              :items="[
-                {
-                  text: 'uBlock Origin',
-                  value: { id: 'cjpalhdlnbpafiamejdnhcphjbkeiagm' },
-                },
-                {
-                  text: 'NordVPN',
-                  value: { id: 'fjoaledfpmneenckfbpdfhkmimnjocfa' },
-                },
-                {
-                  text: 'SponsorBlock for YouTube',
-                  value: { id: 'mnjggcdmjocbbbhaepdhchncahnbgone' },
-                }
-              ]"
-              multiple
-              :disabled="!policiesEnabled"
-            ></v-select>
-          </v-col>
-        </v-row>
+        <template v-if="browserPolicyConfig">
+          <v-row align="center" no-gutters class="mt-0">
+            <v-col>
+              <v-select
+                v-model="browserPolicyContent.extensions"
+                label="Extensions"
+                :items="browserPolicyExtensions"
+                multiple
+                :disabled="!browserPolicyEnabled"
+              ></v-select>
+            </v-col>
+          </v-row>
 
-        <v-row align="center">
-          <v-col>
-            <v-checkbox
-              v-model="policies.developer_tools"
-              label="Enable developer tools"
-              hide-details
-              class="shrink ml-2 mt-0"
-              :disabled="!policiesEnabled"
-            ></v-checkbox>
-          </v-col>
-          <v-col>
-            <v-checkbox
-              v-model="policies.persistent_data"
-              label="Allow persistent data"
-              hide-details
-              class="shrink ml-2 mt-0"
-              :disabled="!policiesEnabled"
-            ></v-checkbox>
-          </v-col>
-        </v-row>
+          <v-row align="center">
+            <v-col>
+              <v-checkbox
+                v-model="browserPolicyContent.developer_tools"
+                label="Enable developer tools"
+                hide-details
+                class="shrink ml-2 mt-0"
+                :disabled="!browserPolicyEnabled"
+              ></v-checkbox>
+            </v-col>
+            <v-col>
+              <v-checkbox
+                v-model="browserPolicyContent.persistent_data"
+                label="Allow persistent data"
+                hide-details
+                class="shrink ml-2 mt-0"
+                :disabled="!browserPolicyEnabled"
+              ></v-checkbox>
+            </v-col>
+          </v-row>
+        </template>
+        <v-alert
+          border="left"
+          type="info"
+          v-else
+        >
+          <p><strong>Not available!</strong></p>
+          <p class="mb-0">Browser policy is not available for this image.</p>
+        </v-alert>
       </v-form>
     </v-card-text>
     <v-card-actions>
@@ -339,7 +337,9 @@ import { Vue, Component, Ref } from 'vue-property-decorator'
 
 import {
   RoomSettings,
-  Policies,
+  BrowserPolicyContent,
+  BrowserPolicyExtension,
+  BrowserPolicyTypeEnum,
 } from '@/api/index'
 
 export type VForm = Vue & {
@@ -365,11 +365,11 @@ export default class RoomsCreate extends Vue {
   private videoPipelineEnabled = false
   private audioPipelineEnabled = false
   private broadcastPipelineEnabled = false
-  private policiesEnabled = false
+  private browserPolicyEnabled = false
 
   private loading = false
   private data: RoomSettings = { ...this.$store.state.defaultRoomSettings }
-  private policies: Policies = { ...this.$store.state.defaultPolicies }
+  private browserPolicyContent: BrowserPolicyContent = { ...this.$store.state.defaultBrowserPolicyContent }
   private envList: { key: string; val: string }[] = []
 
   // eslint-disable-next-line
@@ -431,6 +431,28 @@ export default class RoomsCreate extends Vue {
     ]
   }
 
+  get browserPolicyConfig() {
+    const nekoImage = this.data.neko_image
+    if (!nekoImage) return undefined
+  
+    return this.$store.state.browserPolicyConfig.find(({ images }: { images: string[] }): boolean => images.includes(nekoImage))
+  }
+
+  get browserPolicyExtensions() {
+    const config = this.browserPolicyConfig
+    if (!config) return []
+  
+    return this.$store.state.browserPolicyExtensions.map(({ text, value }: {
+      text: string;
+      value: Record<BrowserPolicyTypeEnum, BrowserPolicyExtension>;
+    }) => {
+      return {
+        text,
+        value: value[config.type as BrowserPolicyTypeEnum],
+      }
+    })
+  }
+
   addEnv() {
     Vue.set(this, 'envList', [ ...this.envList, { key: '', val: '' } ])
   }
@@ -469,7 +491,12 @@ export default class RoomsCreate extends Vue {
         // eslint-disable-next-line
         broadcast_pipeline: this.broadcastPipelineEnabled ? this.data.broadcast_pipeline : '',
         envs,
-        policies: this.policiesEnabled ? this.policies : undefined,
+        // eslint-disable-next-line
+        browser_policy: this.browserPolicyEnabled && this.browserPolicyConfig ? {
+          type: this.browserPolicyConfig.type,
+          path: this.browserPolicyConfig.path,
+          content: this.browserPolicyContent
+        } : undefined,
       })
       this.Clear()
       this.$emit('finished', true)
@@ -499,9 +526,7 @@ export default class RoomsCreate extends Vue {
       // eslint-disable-next-line
       neko_image: this.nekoImages[0],
     }
-    this.policies = {
-      ...this.$store.state.defaultPolicies,
-    }
+    this.browserPolicyContent = { ...this.$store.state.defaultBrowserPolicyContent }
     this.envList = Object.entries({...this.data.envs}).map(([ key, val ]) => ({ key, val, }))
   }
 

client/src/store/state.ts

@@ -2,10 +2,30 @@ import {
   RoomsConfig,
   RoomEntry,
   RoomSettings,
-  Policies,
+  BrowserPolicyContent,
+  BrowserPolicyTypeEnum,
+  BrowserPolicyExtension,
 } from '@/api/index'
 
+export interface BrowserPolicyConfig {
+  type: BrowserPolicyTypeEnum;
+  path: string;
+  profile: string;
+  images: string[];
+}
+
+export interface BrowserPolicyExtensions {
+  type: BrowserPolicyTypeEnum;
+  path: string;
+  profile: string;
+  images: string[];
+}
+
 export const state = {
+  //
+  // rooms
+  //
+
   roomsConfig: {} as RoomsConfig,
   rooms: [] as RoomEntry[],
   defaultRoomSettings: {
@@ -44,14 +64,6 @@ export const state = {
     // eslint-disable-next-line
     mounts: [],
   } as RoomSettings,
-  defaultPolicies: {
-    homepage: "https://google.com/?hl=en",
-    extensions: [],
-    // eslint-disable-next-line
-    developer_tools: false,
-    // eslint-disable-next-line
-    persistent_data: false,
-  } as Policies,
   videoCodecs: [
     "VP8",
     "VP9",
@@ -104,6 +116,89 @@ export const state = {
     "640x400@60",
     "640x360@60"
   ] as string[],
+
+  //
+  // browser policy
+  //
+
+  browserPolicyConfig: [
+    {
+      type: BrowserPolicyTypeEnum.firefox,
+      path: '/usr/lib/firefox/distribution/policies.json',
+      profile: '/home/neko/.mozilla/firefox/profile.default',
+      images: [ 'm1k1o/neko:latest', 'm1k1o/neko:firefox' ],
+    },
+    {
+      type: BrowserPolicyTypeEnum.firefox,
+      path: '/usr/lib/firefox-esr/distribution/policies.json',
+      profile: '/home/neko/.mozilla/firefox/profile.default',
+      images: [ 'm1k1o/neko:arm-firefox' ],
+    },
+    {
+      type: BrowserPolicyTypeEnum.chromium,
+      path: '/etc/chromium/policies/managed/policies.json',
+      profile: '/home/neko/.config/chromium',
+      images: [ 'm1k1o/neko:chromium', 'm1k1o/neko:arm-chromium', 'm1k1o/neko:ungoogled-chromium' ],
+    },
+    {
+      type: BrowserPolicyTypeEnum.chromium,
+      path: '/etc/opt/chrome/policies/managed/policies.json',
+      profile: '/home/neko/.config/google-chrome',
+      images: [ 'm1k1o/neko:google-chrome' ],
+    },
+    {
+      type: BrowserPolicyTypeEnum.chromium,
+      path: '/etc/brave/policies/managed/policies.json',
+      profile: '/home/neko/.config/brave',
+      images: [ 'm1k1o/neko:brave' ],
+    },
+  ] as BrowserPolicyConfig[],
+  browserPolicyExtensions: [
+    {
+      text: 'uBlock Origin',
+      value: {
+        [BrowserPolicyTypeEnum.firefox]: {
+          id: 'uBlock0@raymondhill.net',
+          url: 'https://addons.mozilla.org/firefox/downloads/latest/ublock-origin/latest.xpi',
+        } as BrowserPolicyExtension,
+        [BrowserPolicyTypeEnum.chromium]: {
+          id: 'cjpalhdlnbpafiamejdnhcphjbkeiagm',
+        } as BrowserPolicyExtension,
+      },
+    },
+    {
+      text: 'NordVPN',
+      value: {
+        [BrowserPolicyTypeEnum.firefox]: {
+          id: 'nordvpnproxy@nordvpn.com',
+          url: 'https://addons.mozilla.org/firefox/downloads/latest/nordvpn-proxy-extension/latest.xpi',
+        } as BrowserPolicyExtension,
+        [BrowserPolicyTypeEnum.chromium]: {
+          id: 'fjoaledfpmneenckfbpdfhkmimnjocfa',
+        } as BrowserPolicyExtension,
+      },
+    },
+    {
+      text: 'SponsorBlock for YouTube',
+      value: {
+        [BrowserPolicyTypeEnum.firefox]: {
+          id: 'sponsorBlocker@ajay.app',
+          url: 'https://addons.mozilla.org/firefox/downloads/latest/sponsorblock/latest.xpi',
+        } as BrowserPolicyExtension,
+        [BrowserPolicyTypeEnum.chromium]: {
+          id: 'mnjggcdmjocbbbhaepdhchncahnbgone',
+        } as BrowserPolicyExtension,
+      },
+    },
+  ],
+  defaultBrowserPolicyContent: {
+    homepage: "https://google.com/?hl=en",
+    extensions: [],
+    // eslint-disable-next-line
+    developer_tools: false,
+    // eslint-disable-next-line
+    persistent_data: false,
+  } as BrowserPolicyContent,
 }
 
 export type State = typeof state