Auto-detect embedded media links

src/_locales/de/messages.json

@@ -83,15 +83,18 @@
   "optionsReplayNotifications": {
     "message": "Wiederholungsbenachrichtigung"
   },
+  "optionsAutoDetectEmbeddedMediaLinks": {
+    "message": "Eingebettete Media-Links automatisch erkennen"
+  },
+  "optionsExperimental": {
+    "message": "Experimentell"
+  },
   "optionsReloadInfo": {
     "message": "Es kann sein, dass du die Extension neu laden musst, wenn du Einstellungen geändert hast:"
   },
   "optionsReloadButton": {
     "message": "Extension neu laden"
   },
-  "optionsExperimental": {
-    "message": "Experimentell"
-  },
   "menuPlay": {
     "message": "► Abspielen"
   },

src/_locales/en/messages.json

@@ -68,12 +68,12 @@
   "footerOptions": {
     "message": "Options"
   },
-  "optionsUser": {
-    "message": "User"
-  },
   "optionsDeviceName": {
     "message": "Device name"
   },
+  "optionsUser": {
+    "message": "User"
+  },
   "optionsPassword": {
     "message": "Password"
   },
@@ -83,15 +83,18 @@
   "optionsReplayNotifications": {
     "message": "Replay notification"
   },
+  "optionsAutoDetectEmbeddedMediaLinks": {
+    "message": "Auto-detect embedded media links"
+  },
   "optionsExperimental": {
+    "message": "Experimental"
+  },
+  "optionsReloadInfo": {
     "message": "You may have to reload the extension if you changed a setting:"
   },
   "optionsReloadButton": {
     "message": "Reload extension"
   },
-  "optionsFirefoxBug": {
-    "message": "Experimental"
-  },
   "menuPlay": {
     "message": "► Play"
   },

src/modules/Options.js

@@ -16,6 +16,7 @@ export default class Options {
       },
     ];
     this.replayNotification = false; // Opt-in (requires optional permission)
+    this.autoDetectEmbeddedMediaLinks = true;
   }
 
   async getFormStorage() {
@@ -27,7 +28,8 @@ export default class Options {
       this.devices[0].port = options.devices[0].port || WEBSOCKET_DEFAULT_PORT;
       this.devices[0].user = options.devices[0].user || '';
       this.devices[0].password = options.devices[0].password || '';
-      this.replayNotification = options.replayNotification;
+      this.replayNotification = options.replayNotification || false;
+      this.autoDetectEmbeddedMediaLinks = options.autoDetectEmbeddedMediaLinks || true;
     } catch (e) {
       // There are no options set yet.
       // Since we provide default `null` values this is okay.
@@ -39,6 +41,7 @@ export default class Options {
       options: {
         devices: this.devices,
         replayNotification: this.replayNotification,
+        autoDetectEmbeddedMediaLinks: this.autoDetectEmbeddedMediaLinks,
       },
     });
 

src/modules/plugins/EmbeddedMediaLink.js

@@ -0,0 +1,32 @@
+import WebPlugin from './WebPlugin.js';
+import { executeScriptInActiveTab } from './../utils/tabs.js';
+
+/**
+ * TODO Integrate this as part of a UI change?
+ * Maybe we can auto-detect all mp3s and other streams and then
+ * add them to a new tab in the extension pop-up. Or we could
+ * add found links to the "Play"-button drop-down menu.
+ * Adding this as a part of the normal plugins-logic makes
+ * existing things way too complicated. (I tried it...)
+ */
+class EmbeddedMediaLink extends WebPlugin {
+  constructor() {
+    super();
+
+    this.domains = ['.*'];
+  }
+
+  async getPluginPath({ url }) {
+    const links = await this.searchMediaLinks();
+    console.debug(links);
+    return links;
+  }
+
+  async searchMediaLinks() {
+    return await executeScriptInActiveTab(
+      `try { document.querySelector('a[href$=".mp3"]').getAttribute('href'); } catch (e) {}`
+    );
+  }
+}
+
+export default EmbeddedMediaLink;

src/modules/views/main/options.js

@@ -8,16 +8,34 @@ export default (store, i18n) => {
 
   return html`
     <div class="c-options c-section__content">
+      <!-- TODO Use more visually appealing on-off switches:
+         https://material.angular.io/components/slide-toggle/overview -->
       <table cellspacing="0" cellpadding="0">
         <tbody>
+          <tr>
+            <th>
+              <label for="detect_embedded_media">${i18n.getMessage('optionsAutoDetectEmbeddedMediaLinks')}</label>
+              <small>${i18n.getMessage('optionsExperimental')}</small>
+            </th>
+            <td>
+              <input
+                @change="${store.actions.updateOptions}"
+                type="checkbox"
+                id="detect_embedded_media"
+                data-option="autoDetectEmbeddedMediaLinks"
+                role="switch"
+                .checked=${store.options.autoDetectEmbeddedMediaLinks}
+                ?checked=${store.options.autoDetectEmbeddedMediaLinks}
+                aria-checked="${store.options.autoDetectEmbeddedMediaLinks ? 'true' : 'false'}"
+              />
+            </td>
+          </tr>
           <tr>
             <th>
               <label for="replay_notification">${i18n.getMessage('optionsReplayNotifications')}</label>
               <small>${i18n.getMessage('optionsExperimental')}</small>
             </th>
             <td>
-              <!-- TODO Use a more visually appealing on-off switch:
-                   https://material.angular.io/components/slide-toggle/overview -->
               <input
                 @change="${store.actions.updateOptions}"
                 type="checkbox"

src/pages/popup/main.css

@@ -441,7 +441,7 @@ p, pre {
 }
 .c-options table th,
 .c-options table td {
-  padding: 0;
+  padding: 0 0 10px 0;
 }
 .c-options table th {
   font-weight: normal;