mirror of
https://codeberg.org/Nero/InviTube.git
synced 2024-11-21 15:23:40 +00:00
feat: improve ui and logic
This commit is contained in:
CSF
parent
d2723183a4
commit
82d922b04a
6 changed files with 135 additions and 136 deletions
BIN
InviTube.zip
Normal file
BIN
InviTube.zip
Normal file
Binary file not shown.
|
|
@ -1,12 +1,11 @@
|
|||
let tabWhitelist = [];
|
||||
|
||||
// Einstellungen ziehen, ContentScript registrieren
|
||||
browser.storage.local.get(
|
||||
{
|
||||
browser.storage.local.get({
|
||||
activated: true,
|
||||
instance: "yewtu.be",
|
||||
}
|
||||
).then((storage) => {
|
||||
})
|
||||
.then((storage) => {
|
||||
if (storage.activated) {
|
||||
activateBlocker();
|
||||
} else {
|
||||
|
|
@ -14,12 +13,12 @@ browser.storage.local.get(
|
|||
}
|
||||
|
||||
registerCS(storage.instance);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// ContentScript für aktuelle Instanz registrieren
|
||||
async function registerCS(url) {
|
||||
return await browser.contentScripts.register({
|
||||
function registerCS(url) {
|
||||
browser.contentScripts.register({
|
||||
js: [{ file: "content.js" }],
|
||||
matches: ["*://" + url + "/*"]
|
||||
});
|
||||
|
|
@ -27,7 +26,7 @@ async function registerCS(url) {
|
|||
|
||||
// pageAction anzeigen
|
||||
browser.runtime.onMessage.addListener((data, sender) => {
|
||||
if (data.type == "showYoutubePageAction") {
|
||||
if (data === "showYoutubePageAction") {
|
||||
browser.pageAction.setIcon({
|
||||
tabId: sender.tab.id,
|
||||
path: "icons/youtube.png"
|
||||
|
|
@ -36,7 +35,8 @@ browser.runtime.onMessage.addListener((data, sender) => {
|
|||
tabId: sender.tab.id,
|
||||
title: "Open on YouTube"
|
||||
});
|
||||
} else if (data.type == "showInvidiousPageAction") {
|
||||
|
||||
} else if (data === "showInvidiousPageAction") {
|
||||
browser.pageAction.setIcon({
|
||||
tabId: sender.tab.id,
|
||||
path: "icons/invidious.png"
|
||||
|
|
@ -126,25 +126,27 @@ browser.webRequest.onBeforeRequest.addListener(async (details) => {
|
|||
|
||||
// URL Icon Click --> Open on YouTube/Invidious
|
||||
browser.pageAction.onClicked.addListener((tab) => {
|
||||
browser.storage.local.get({ activated: true, instance: "yewtu.be" }).then(async (storage) => {
|
||||
if (tab.url.startsWith("https://www.youtube.com")) {
|
||||
browser.storage.local.get({
|
||||
activated: true,
|
||||
instance: "yewtu.be"
|
||||
})
|
||||
.then(async (storage) => {
|
||||
if (tab.url.includes("youtube")) {
|
||||
browser.tabs.create({
|
||||
url: "https://" + storage.instance + "/" + tab.url.split("/")[3]
|
||||
});
|
||||
} else {
|
||||
let newTab = await browser.tabs.create({
|
||||
const newTab = await browser.tabs.create({
|
||||
url: "https://www.youtube.com/" + tab.url.split("/")[3]
|
||||
});
|
||||
if (!tabWhitelist.includes(newTab.id)) {
|
||||
if (!tabWhitelist.includes(newTab.id))
|
||||
tabWhitelist.push(newTab.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Close tab -> Remove from whitelist
|
||||
browser.tabs.onRemoved.addListener((tabId) => {
|
||||
if (tabWhitelist.includes(tabId)) {
|
||||
if (tabWhitelist.includes(tabId))
|
||||
tabWhitelist.splice(tabWhitelist.indexOf(tabId), 1);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
if (location.href.startsWith("https://www.youtube.com")) {
|
||||
browser.runtime.sendMessage({ type: "showInvidiousPageAction" });
|
||||
browser.runtime.sendMessage("showInvidiousPageAction");
|
||||
} else {
|
||||
browser.runtime.sendMessage({ type: "showYoutubePageAction" });
|
||||
browser.runtime.sendMessage("showYoutubePageAction");
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
"manifest_version": 2,
|
||||
"name": "InviTube",
|
||||
"author": "Indogermane",
|
||||
"version": "1.1",
|
||||
"version": "1.2",
|
||||
"description": "Redirect YouTube to Invidious.",
|
||||
"background": {
|
||||
"scripts": [
|
||||
|
|
|
|||
|
|
@ -1,95 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 23px;
|
||||
margin: 1.5em 1em;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
border-radius: 34px;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
border-radius: 34px;
|
||||
content: "";
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
left: 4px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #009EE0;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #009EE0;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.4em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.textfield {
|
||||
text-align: center;
|
||||
background-color: #131313;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
outline: none;
|
||||
margin: 1.5em 1em;
|
||||
}
|
||||
|
||||
#saveBtn {
|
||||
margin: 1.5em 0;
|
||||
border-radius: 0;
|
||||
font-size: 1em;
|
||||
padding: .5em 1em;
|
||||
border: none;
|
||||
background-color: #131313;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body bgcolor="202023" style="padding: 2em">
|
||||
<form>
|
||||
<p>
|
||||
Instance URL:
|
||||
<input id="instance" class="textfield" placeholder="piped.kavin.rocks"/>
|
||||
<br>
|
||||
<button id="saveBtn" type="submit">Save</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #23222b;
|
||||
padding-top: 2em;
|
||||
padding-left: 5em;
|
||||
padding-right: 5em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
input[type="button"] {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
input[type="button"]:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid #006699;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-left: 1em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.red-border {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
table input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mt-12 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<label for="instance">Instance URL</label>
|
||||
<input id="instance" placeholder="yewtu.be" class="rounded" />
|
||||
<input id="saveBtn" type="button" class="rounded mt-2" value="Save" />
|
||||
<script src="options.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,23 +1,29 @@
|
|||
// Save options
|
||||
document.querySelector("form").addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
let instance = document.querySelector("#instance").value.trim();
|
||||
instance = instance.replace(/^https?:?\/?\/?/, '').replace('\/$');
|
||||
if (!instance) {
|
||||
return alert("Please fill out the fields!");
|
||||
}
|
||||
|
||||
browser.storage.local.set({
|
||||
instance: instance,
|
||||
}).then(() => alert("Saved!"));
|
||||
});
|
||||
|
||||
|
||||
// Restore options
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
browser.storage.local.get({
|
||||
instance: "yewtu.be",
|
||||
}).then((item) => {
|
||||
document.querySelector("#instance").value = item.instance;
|
||||
}).then((storage) => {
|
||||
document.querySelector("#instance").value = storage.instance;
|
||||
});
|
||||
});
|
||||
|
||||
// Save options
|
||||
const saveBtn = document.getElementById("saveBtn");
|
||||
|
||||
saveBtn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
const instance = document.querySelector("#instance").value.trim().replace(/^https?:\/\/*|\/$/g, '');
|
||||
if (!instance) return alert("Please fill out the fields!");
|
||||
|
||||
browser.storage.local.set({
|
||||
instance,
|
||||
}).then(() => {
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.value = "Saved!";
|
||||
setTimeout(() => {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.value = "Save";
|
||||
}, 3000)
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue