colin/open-in-mpv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Baldomo
2020-12-04 10:52:58 +01:00
parent 86d8ea4f75
commit 81c10e755c
4 changed files with 120 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
Chrome/common.js
View File

@@ -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("&")}';

52
Chrome/options.css Normal file
View File

@@ -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;
}

51
Chrome/options.html
View File

@@ -6,40 +6,27 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Options</title>
<script src="common.js" type="module"></script>
<style>
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>
<link rel="stylesheet" href="options.css">
</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">

22
README.md
View File

@@ -12,4 +12,24 @@ 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.
`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
```