web: Extension shouldn't set options that are default

web/packages/extension/src/content.ts

@@ -108,6 +108,8 @@ function isXMLDocument(): boolean {
 
 (async () => {
     const options = await utils.getOptions();
+    const explicitOptions = await utils.getExplicitOptions();
+
     const pageOptout = checkPageOptout();
     const shouldLoad =
         !isXMLDocument() &&
@@ -171,7 +173,7 @@ function isXMLDocument(): boolean {
     await sendMessageToPage({
         type: "load",
         config: {
-            ...options,
+            ...explicitOptions,
             autoplay: options.autostart ? "on" : "auto",
             unmuteOverlay: options.autostart ? "hidden" : "visible",
             splashScreen: !options.autostart,

web/packages/extension/src/player.ts

@@ -24,7 +24,7 @@ window.addEventListener("DOMContentLoaded", async () => {
     player.id = "player";
     document.getElementById("main")!.append(player);
 
-    const options = await utils.getOptions();
+    const options = await utils.getExplicitOptions();
 
     player.load({
         ...options,

web/packages/extension/src/utils.ts

@@ -145,3 +145,22 @@ export async function getOptions(): Promise<Options> {
     // Copy over default options if they don't exist yet.
     return { ...DEFAULT_OPTIONS, ...options };
 }
+
+/**
+ * Gets the options that are explicitly different from the defaults.
+ *
+ * In the future we should just not store options we don't want to set.
+ */
+export async function getExplicitOptions(): Promise<Options> {
+    const options = await getOptions();
+    const defaultOptions = DEFAULT_OPTIONS;
+    for (const key in defaultOptions) {
+        // @ts-expect-error: Element implicitly has an any type
+        if (key in options && defaultOptions[key] === options[key]) {
+            // @ts-expect-error: Element implicitly has an any type
+            delete options[key];
+        }
+    }
+
+    return options;
+}