Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Default settings #56

Open
wants to merge 4 commits into
base: trunk
Choose a base branch
from
Open

Default settings #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b2acdb
added button set default
tikitiki2 Jan 12, 2024
ba9c7bd
created style for set default button
tikitiki2 Jan 12, 2024
e8f03f9
added storage permissions
tikitiki2 Jan 12, 2024
df42a00
added set default functionality
tikitiki2 Jan 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
},
"permissions": [
"activeTab",
"webNavigation"
"webNavigation","storage"
],
"browser_action": {
"default_icon": "icon.svg",
Expand Down
13 changes: 13 additions & 0 deletions popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,19 @@ label input[type=number] {
.element-reset:active {
background: rgba(69, 69, 69, .3);
}
label input[type=number], .element-default {
background: transparent;
color: inherit;
border-radius: 5px;
border: 1px solid #aaa;
padding: .2em .5em;
}
.element-default:focus {
outline: 1px solid;
}
.element-default:active {
background: rgba(69, 69, 69, .3);
}
.header-row {
display: flex;
align-content: space-between;
Expand Down
109 changes: 65 additions & 44 deletions popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,71 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="popup.css">
<meta charset="utf-8" />
<link rel="stylesheet" href="popup.css" />
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No reformatting please!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops i didn't realize i made this change it was the IDE i was using auto formatted it


<div id="elements-pane">
<header>
<h1>SoundFixer</h1>
<a href="https://patreon.com/valpackett" class="info-opener" target="_blank"><img src="patreon.svg" alt="" title="Support on Patreon"></a>
<a href="https://github.com/valpackett/soundfixer" class="info-opener" target="_blank"><img src="github.svg" alt="" title="View on GitHub"></a>
</header>
<template id="elements-tpl">
<div class="header-row">
<div class="element-label"></div>
<button class="element-reset">Reset</button>
</div>
<label>
<span>Gain</span>
<input type="range" class="element-gain" min="0" max="5" step="0.05" />
<input type="number" class="element-gain-num" value="1" min="0" max="69" step="0.05">
</label>
<label>
<span>Pan</span>
<input type="range" class="element-pan" min="-1" max="1" step="0.05" />
<input type="number" class="element-pan-num" value="0" min="-1" max="1" step="0.05">
</label>
<div class="checkboxes">
<label>
<span>Mono</span>
<input type="checkbox" class="element-mono" />
</label>
<label>
<span>Flip L/R</span>
<input type="checkbox" class="element-flip" />
</label>
</div>
</template>
<div id="all-elements">
</div>
<details id="individual-elements">
<summary>Control individual media elements</summary>
<ul id="elements-list">
</ul>
</details>
<p class="info">
Note: if you get silence after touching a control, that means this extension can't do anything on this site
because the site uses cross-domain media. Because Security™ :(
</p>
<header>
<h1>SoundFixer</h1>
<a href="https://patreon.com/valpackett" class="info-opener" target="_blank"
><img src="patreon.svg" alt="" title="Support on Patreon"
/></a>
<a
href="https://github.com/valpackett/soundfixer"
class="info-opener"
target="_blank"
><img src="github.svg" alt="" title="View on GitHub"
/></a>
</header>
<template id="elements-tpl">
<div class="header-row">
<div class="element-label"></div>
<button class="element-reset">Reset</button>
<button class="element-default">Set-Default</button>
</div>
<label>
<span>Gain</span>
<input type="range" class="element-gain" min="0" max="5" step="0.05" />
<input
type="number"
class="element-gain-num"
value="1"
min="0"
max="69"
step="0.05"
/>
</label>
<label>
<span>Pan</span>
<input type="range" class="element-pan" min="-1" max="1" step="0.05" />
<input
type="number"
class="element-pan-num"
value="0"
min="-1"
max="1"
step="0.05"
/>
</label>
<div class="checkboxes">
<label>
<span>Mono</span>
<input type="checkbox" class="element-mono" />
</label>
<label>
<span>Flip L/R</span>
<input type="checkbox" class="element-flip" />
</label>
</div>
</template>
<div id="all-elements"></div>
<details id="individual-elements">
<summary>Control individual media elements</summary>
<ul id="elements-list"></ul>
</details>
<p class="info">
Note: if you get silence after touching a control, that means this extension
can't do anything on this site because the site uses cross-domain media.
Because Security™ :(
</p>
</div>

<script src="popup.js"></script>
89 changes: 86 additions & 3 deletions popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,32 @@ const elementsList = document.getElementById('elements-list')
const allElements = document.getElementById('all-elements')
const indivElements = document.getElementById('individual-elements')
const elementsTpl = document.getElementById('elements-tpl')

function storageAvailable(type) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The checking is completely unnecessary, it's safe to assume that storing 4 numbers will never ever exceed the quota. (Also would testing window["localStorage"] even work?! When the object is browser.storage.local)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's a good point lol its not storing much i just saw it suggested to check for that. im not sure if window["localstorage"] would work first time really using JS.

let storage;
try {
storage = window[type];
const x = "__storage_test__";
storage.setItem(x, x);
storage.removeItem(x);
return true;
} catch (e) {
return (
e instanceof DOMException &&

(e.code === 22 ||

e.code === 1014 ||

e.name === "QuotaExceededError" ||

e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&

storage &&
storage.length !== 0
);
}
}

function applySettings (fid, elid, newSettings) {
return browser.tabs.executeScript(tid, { frameId: fid, code: `(function () {
const el = document.querySelector('[data-x-soundfixer-id="${elid}"]')
Expand Down Expand Up @@ -149,20 +174,24 @@ browser.tabs.query({ currentWindow: true, active: true }).then(tabs => {
flip.checked = false
applySettings(fid, elid, { gain: 1, pan: 0, mono: false, flip: false })
}

elementsList.appendChild(node)
elCount += 1
}
}
if (elCount == 0) {
allElements.innerHTML = 'No audio/video found in the current tab. Note that some websites do not work because of cross-domain security restrictions.'
allElements.innerHTML = 'No audio/video found in the current tab. Note that some websites do not work because of cross-domain security restrictions. ok'
indivElements.remove()
} else {

const node = document.createElement('div')
node.appendChild(document.importNode(elementsTpl.content, true))
node.querySelector('.element-label').textContent = `All media on the page`
const gain = node.querySelector('.element-gain')
const gainNumberInput = node.querySelector('.element-gain-num')
gain.value = 1



gainNumberInput.value = '' + gain.value
function applyGain (value) {
for (const [fid, els] of frameMap) {
Expand Down Expand Up @@ -231,6 +260,7 @@ browser.tabs.query({ currentWindow: true, active: true }).then(tabs => {
}
})
node.querySelector('.element-reset').onclick = function () {
browser.storage.local.clear()
gain.value = 1
gain.parentElement.querySelector('.element-gain-num').value = '' + gain.value
pan.value = 0
Expand All @@ -251,6 +281,59 @@ browser.tabs.query({ currentWindow: true, active: true }).then(tabs => {
}
}
}
node.querySelector('.element-default').onclick = function (){
if(storageAvailable("localStorage")){

let gainstore=gainNumberInput.value
let panstore=panNumberInput.value
let monostore=mono.checked
let flipstore=flip.checked
browser.storage.local.set({"gain":gainstore , "pan":panstore, "mono":monostore,"flip":flipstore})
}
else{
//browser does not support storage very unlikely
// idk what to do here
alert("Your browser does not support local storage. Please use a different browser or enable local storage.");
}


}
let defaultgain=1
let defaultpan=0
let defaultmono=false
let defaultflip=false
// default setting code here
function onGot(item) {

if (Object.keys(item).length === 0) {
console.log("Storage is empty");
gain.value = defaultgain;
pan.value= defaultpan
mono.checked=defaultmono
flip.checked=defaultflip
applyPan(pan.value)
applyGain(gain.value)
} else {
gain.value = parseFloat(item["gain"]);
pan.value=parseFloat(item["pan"]);
mono.checked=item["mono"]
flip.checked=item["flip"]
applyPan(pan.value)
applyGain(gain.value)
}
}

function onError(error) {
//error setting default value
console.log(`Error: ${error}`)
//clear storage
browser.storage.local.clear()

}
let getitem= browser.storage.local.get();
getitem.then(onGot).catch(onError).then(
()=>console.log("done")
);
allElements.appendChild(node)
}
})