Skip to content

Commit

Permalink
rewrote the option page to look better for the webstore release
Browse files Browse the repository at this point in the history
  • Loading branch information
@jangxx
jangxx committed Apr 16, 2024
1 parent f83ff6d commit d0ac5a5
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 39 deletions.
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"manifest_version": 3,
"name": "New Netflix 1080p",
"description": "Forces 1080p and 5.1 playback for Netflix as well as other QoL improvements.",
"version": "1.30.0",
"version": "1.31.0",
"author": "jangxx (original by truedread)",
"action": {
"default_icon": "img/icon128.png"
Expand Down
71 changes: 51 additions & 20 deletions pages/options.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>New Netflix 1080p Options</title>
<link rel="stylesheet" href="picnic.min.css">
<style>
html {
height: auto;
}

<head>
<title>Netflix 1080p Options</title>
</head>

<body>
<input type="checkbox" id="use51"><label for="use51">Use 5.1 audio when available</label>
<br>
<input type="checkbox" id="setMaxBitrate"><label for="setMaxBitrate">Automatically select best bitrate available</label>
<br>
<input type="checkbox" id="disableVP9"><label for="disableVP9">Disable VP9 codec</label>
<br>
<input type="checkbox" id="disableAVChigh"><label for="disableAVChigh">Disable AVChigh codec</label>
<br>
<input type="checkbox" id="showAllSubs"><label for="showAllSubs">Show all subtitle tracks</label>

<div id="status"></div>
<button id="save">Save</button>

<script src="options.js"></script>
</body>
body {
margin: 20px;
}
</style>
</head>
<body>
<div class="flex">
<div class="full">
<label>
<input type="checkbox" id="use-51" />
<span class="checkable">Use 5.1 audio when available.</span>
</label>
</div>
<div class="full">
<label>
<input type="checkbox" id="set-max-bitrate" />
<span class="checkable">Automatically select best bitrate available</span>
</label>
</div>
<div class="full">
<label>
<input type="checkbox" id="disable-vp9" />
<span class="checkable">Disable VP9 codec</span>
</label>
</div>
<div class="full">
<label>
<input type="checkbox" id="disable-avchigh" />
<span class="checkable">Disable AVChigh codec</span>
</label>
</div>
<div class="full">
<label>
<input type="checkbox" id="show-all-subs" />
<span class="checkable">Show all subtitle tracks</span>
</label>
</div>
<div class="full">
<button id="save">Save</button>
<span id="options-saved" class="label success" style="font-size: 16px; display: none">Options saved!</span>
</div>
</div>

<script src="options.js"></script>
</body>
</html>
47 changes: 29 additions & 18 deletions pages/options.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
function save_options() {
const use6Channels = document.getElementById("use51").checked;
const setMaxBitrate = document.getElementById("setMaxBitrate").checked;
const disableVP9 = document.getElementById("disableVP9").checked;
const disableAVChigh = document.getElementById("disableAVChigh").checked;
const showAllSubs = document.getElementById("showAllSubs").checked;
const use6ChannelsCheckbox = document.getElementById("use-51");
const setMaxBitrateCheckbox = document.getElementById("set-max-bitrate");
const disableVP9Checkbox = document.getElementById("disable-vp9");
const disableAVChighCheckbox = document.getElementById("disable-avchigh");
const showAllSubsCheckbox = document.getElementById("show-all-subs");

const optionsSavedLabel = document.getElementById("options-saved");

function saveOptions() {
const use6Channels = use6ChannelsCheckbox.checked;
const setMaxBitrate = setMaxBitrateCheckbox.checked;
const disableVP9 = disableVP9Checkbox.checked;
const disableAVChigh = disableAVChighCheckbox.checked;
const showAllSubs = showAllSubsCheckbox.checked;

chrome.storage.sync.set({
use6Channels,
Expand All @@ -12,28 +20,31 @@ function save_options() {
disableAVChigh,
showAllSubs,
}, function() {
var status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(function() {
status.textContent = '';
}, 750);
optionsSavedLabel.style.display = "inline-block";
});
}

function restore_options() {
function restoreOptions() {
chrome.storage.sync.get({
use6Channels: true,
setMaxBitrate: true,
disableVP9: false,
disableAVChigh: false,
showAllSubs: false,
}, function(items) {
document.getElementById("use51").checked = items.use6Channels;
document.getElementById("setMaxBitrate").checked = items.setMaxBitrate;
document.getElementById("disableVP9").checked = items.disableVP9;
document.getElementById("disableAVChigh").checked = items.disableAVChigh;
use6ChannelsCheckbox.checked = items.use6Channels;
setMaxBitrateCheckbox.checked = items.setMaxBitrate;
disableVP9Checkbox.checked = items.disableVP9;
disableAVChighCheckbox.checked = items.disableAVChigh;
showAllSubsCheckbox.checked = items.showAllSubs;
});
}

document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);
document.getElementById("save").addEventListener("click", saveOptions);
use6ChannelsCheckbox.addEventListener("change", () => optionsSavedLabel.style.display = "none");
setMaxBitrateCheckbox.addEventListener("change", () => optionsSavedLabel.style.display = "none");
disableVP9Checkbox.addEventListener("change", () => optionsSavedLabel.style.display = "none");
disableAVChighCheckbox.addEventListener("change", () => optionsSavedLabel.style.display = "none");
showAllSubsCheckbox.addEventListener("change", () => optionsSavedLabel.style.display = "none");

restoreOptions();
1 change: 1 addition & 0 deletions pages/picnic.min.css
View file

Large diffs are not rendered by default.

0 comments on commit d0ac5a5

Please sign in to comment.