Added custom flags and custom video player to extension settings and generted mpv:// URLs, updated README

Chrome/common.js

@@ -13,6 +13,13 @@ class Option {
                 });
                 break;
             case "checkbox":
+                document.getElementsByName(this.name).forEach(el => el.checked = value);
+                break;
+            case "select":
+                document.getElementsByName(this.name).forEach(el => el.value = value);
+                break;
+            case "text":
+                document.getElementsByName(this.name).forEach(el => el.value = value);
                 break;
         }
     }
@@ -22,19 +29,26 @@ class Option {
             case "radio":
                 return document.querySelector(`input[name="${this.name}"]:checked`).value;
             case "checkbox":
-                break;
+                return document.querySelector(`input[name="${this.name}"]`).checked;
+            case "select":
+                return document.querySelector(`select[name="${this.name}"]`).value;
+            case "text":
+                return document.querySelector(`select[name="${this.name}"]`).value;
         }
     }
 }
 
-const options = [
+const _options = [
     new Option("iconAction", "radio", "clickOnly"),
     new Option("iconActionOption", "radio", "direct"),
+    new Option("mpvPlayer", "select", "mpv"),
+    new Option("useCustomFlags", "checkbox", false),
+    new Option("customFlags", "text", "")
 ];
 
 export function getOptions(callback) {
     const getDict = {};
-    options.forEach((item) => {
+    _options.forEach((item) => {
         getDict[item.name] = item.defaultValue;
     })
     chrome.storage.sync.get(getDict, callback);
@@ -42,7 +56,7 @@ export function getOptions(callback) {
 
 export function saveOptions() {
     const saveDict = {};
-    options.forEach((item) => {
+    _options.forEach((item) => {
         saveDict[item.name] = item.getValue();
     })
     chrome.storage.sync.set(saveDict);
@@ -50,7 +64,7 @@ export function saveOptions() {
 
 export function restoreOptions() {
     getOptions((items) => {
-        options.forEach((option) => {
+        _options.forEach((option) => {
             option.setValue(items[option.name]);
         });
     });
@@ -58,7 +72,9 @@ export function restoreOptions() {
 
 export function openInMPV(tabId, url, options = {}) {
     const baseURL = `mpv:///open?`;
+    // Encode video URL
     const params = [`url=${encodeURIComponent(url)}`];
+    // Add playback options
     switch (options.mode) {
         case "fullScreen":
             params.push("full_screen=1"); break;
@@ -67,9 +83,16 @@ export function openInMPV(tabId, url, options = {}) {
         case "enqueue":
             params.push("enqueue=1"); break;
     }
+    // Add new window option
     if (options.newWindow) {
         params.push("new_window=1");
     }
+    // Add alternative player and user-defined custom flags
+    getOptions(items => {
+        params.push(`player=${items["mpvPlayer"]}`)
+        if (items["useCustomFlags"])
+            params.push(`flags=${encodeURIComponent(items["customFlags"])}`);
+    })
     const code = `
         var link = document.createElement('a');
         link.href='${baseURL}${params.join("&")}';

Chrome/options.css

@@ -0,0 +1,52 @@
+body {
+    font-family: 'Inter', Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.container {
+    width: 90%;
+    max-width: 880px;
+    margin: 1rem auto;
+    background: #f4f4f4;
+    border-radius: 6px;
+    box-shadow: 0 0 16px rgba(0,0,0,.2);
+}
+
+.title {
+    padding: 1rem;
+    margin: 0;
+}
+
+.option {
+    padding: 1rem;
+}
+
+.option:not(:last-child) {
+    border-top: 1px solid #e4e4e4;
+    border-bottom: 1px solid #e4e4e4;
+}
+
+.option .option-title {
+    font-weight: bold;
+}
+
+.option .option-details {
+    margin-top: 0.5rem;
+    padding-left: 1rem;
+}
+
+select {
+    margin: 0.1rem;
+    padding: 0.2rem;
+    border-radius: 6px;
+    background-color: #fff;
+}
+
+input[type="text"] {
+    font-family: monospace;
+    border: 1px solid rgb(169, 169, 169);
+    margin: 0.1rem;
+    padding: 0.2rem;
+    border-radius: 6px;
+}

Chrome/options.html

@@ -6,40 +6,27 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Options</title>
     <script src="common.js" type="module"></script>
-    <style>
+    <link rel="stylesheet" href="options.css">
-        body {
-            font-size: 14px;
-            line-height: 1.4;
-        }
-        .container {
-            width: 90%;
-            max-width: 880px;
-            margin: 1rem auto;
-            background: #f4f4f4;
-            border-radius: 6px;
-            box-shadow: 0 0 16px rgba(0,0,0,.2);
-        }
-        .title {
-            padding: 1rem;
-            margin: 0;
-        }
-        .option {
-            padding: 1rem;
-        }
-        .option:not(:last-child) {
-            border-top: 1px solid #e4e4e4;
-            border-bottom: 1px solid #e4e4e4;
-        }
-        .option .option-title {
-            font-weight: bold;
-        }
-        .option .option-details {
-            margin-top: 0.5rem;
-            padding-left: 1rem;
-        }
-    </style>
 </head>
 <body>
+    <div class="container">
+        <h2 class="title">Player options:</h2>
+        <div class="option">
+            <label class="option-title"> Select the mpv-based player to use</label>
+            <br>
+            <select name="mpvPlayer">
+                <option value="mpv">mpv</option>
+                <option value="celluloid">Celluloid</option>
+            </select>
+        </div>
+        <div class="option">
+            <label class="option-title"><input type="checkbox" name="useCustomFlags"> Use custom command line flags</label>
+            <div class="option-details" id="customFlagsContainer">
+                <input type="text" name="customFlags">
+                <p style="color: rgb(70, 70, 70);"> Note: do include hyphens (e.g.<span style="font-family: monospace;">'--fs'</span>)</p>
+            </div>
+        </div>
+    </div>
     <div class="container">
         <h2 class="title">When clicking on the extension icon:</h2>
         <div class="option">

README.md

@@ -13,3 +13,23 @@ sudo make install
 
 ### The `mpv://` protocol
 `open-in-mpv install-protocol` will create a custom `xdg-open` desktop file with a scheme handler for the `mpv://` protocol. This lets `xdg-open` call `open-in-mpv` with an encoded URI, so that it can be parsed and the information can be relayed to `mpv` - this logic follows how `iina` parses and opens custom URIs with the `iina://` protocol on Mac. `install-protocol.sh` has the same functionality.
+
+The table below is a simple documentation of the URL query keys and values used to let the `open-in-mpv` executable what to do:
+
+| Key           | Example value                          | Description |
+|---------------|----------------------------------------|---------------|
+| `url`         | `https%3A%2F%2Fyoutu.be%2FdQw4w9WgXcQ` | The actual file URL to be played, URL-encoded |
+| `full_screen` | `1`                                    | Controls whether the video is played in fullscreen mode |
+| `pip`         | `1`                                    | Simulates a picture-in-picture mode (only works with mpv for now) |
+| `enqueue`     | `1`                                    | Adds a video to the queue (see below) |
+| `new_window`  | `1`                                    | Forcibly starts a video in a new window even if one is already open |
+| `player`      | `celluloid`                            | :warning: WIP, starts any arbitrary video player (only mpv-based ones are recommended, such as [Celluloid](https://celluloid-player.github.io/)) |
+| `flags`       | `--vo%3Dgpu`                           | Custom command options and flags to be passed to the video player |
+
+### Playlist and `enqueue` functionality
+For `enqueue` to work properly with any mpv-based player, the playes has to be able to read commands from a `fifo` name pipe. This can be achieved by adding the following lines to any of the user's startup utilities/files, e.g. `.bashrc`, `.zshrc` or `.profile`.
+
+```sh
+mpvsocket=/tmp/mpvsocket
+[[ ! -p /tmp/mpvsocket ]] && mkfifo /tmp/mpvsocket
+```