feat: add buttons to feed page

This commit is contained in:
LordMZTE 2022-10-13 18:57:30 +02:00
parent 4f108263bc
commit 990b3e473c
Signed by: LordMZTE
GPG Key ID: B64802DC33A64FF6
6 changed files with 86 additions and 27 deletions

View File

@ -1,6 +1,6 @@
// ==UserScript==
// @name PipedYT
// @version 0.1.0
// @version 0.2.0
// @description Add a youtube link to piped's UI
// @author LordMZTE
// @include http*://piped.kavin.rocks/*

View File

@ -1,6 +1,5 @@
-cp src
-main Main
-D js_es=6
--macro Init.init()
-resource assets/yt.svg@icon

10
src/BigPipedytButton.hx Normal file
View File

@ -0,0 +1,10 @@
import js.html.AnchorElement;
@:forward
abstract BigPipedytButton(PipedytButton) to AnchorElement {
public function new(href:String) {
this = new PipedytButton(href);
this.classList.add("btn");
this.classList.add("flex-col");
}
}

View File

@ -3,42 +3,64 @@ import js.Browser.window;
import js.Browser.document;
import js.Browser.console;
enum PageType {
Video;
Feed;
Other;
}
function getPageType():PageType {
if (window.location.pathname == "/watch" && StringTools.startsWith(window.location.search, "?v=")) {
return PageType.Video;
} else if (window.location.pathname == "/feed") {
return PageType.Feed;
}
return PageType.Other;
}
function addButton() {
console.log("looking for places to put PipedYT buttons...");
var buttonBar = document.querySelector("#app .w-full .flex .ml-auto");
switch (getPageType()) {
case PageType.Video: addButtonToVideoPage();
case PageType.Feed: addButtonToFeedPage();
case _: {};
}
}
if (!isVideoPage()) {
return;
}
function addButtonToVideoPage() {
var buttonBar = document.querySelector("#app .w-full .flex .ml-auto");
if (buttonBar == null) {
console.warn("Button bar not found!");
return;
}
if (document.getElementById("pipedyt-button") != null) {
if (document.querySelector(".pipedyt-button") != null) {
console.log("PipedYT button already exists, not adding another.");
return;
}
var button = document.createAnchorElement();
var urlSuffix = window.location.pathname + window.location.search;
var url = 'https://youtube.com$urlSuffix';
button.href = 'https://youtube.com$urlSuffix';
button.target = "_blank";
button.id = "pipedyt-button";
button.classList.add("btn");
button.classList.add("flex-col");
button.innerHTML = Resource.getString("icon");
buttonBar.appendChild(button);
console.log('Added PipedYT button to ${button.href}');
buttonBar.appendChild(new BigPipedytButton(url));
console.log('Added PipedYT button to $url');
}
function isVideoPage():Bool {
return window.location.pathname == "/watch" && StringTools.startsWith(window.location.search, "?v=");
function addButtonToFeedPage() {
var videoGrid = document.querySelector(".video-grid");
if (videoGrid == null)
return;
for (child in videoGrid.children) {
if (child.querySelector(".pipedyt-button") != null)
continue;
var urlSuffix = child.getElementsByTagName("a")[0].getAttribute("href");
var url = 'https://youtube.com$urlSuffix';
child.querySelector("div.float-right").appendChild(new PipedytButton(url));
}
}

View File

@ -1,10 +1,23 @@
import js.html.MutationObserver;
import ButtonAdder.addButton;
import js.Browser.window;
import js.Browser.document;
class Main {
static function main() {
window.addEventListener("load", addButton);
new LocationChangeListener(addButton).register(document.body);
}
function main() {
window.addEventListener("load", onload);
new LocationChangeListener(addButton).register(document.body);
}
function onload() {
var videoGrid = document.querySelector(".video-grid");
if (videoGrid != null) {
var observer = new MutationObserver((_, _) -> addButton());
var conf = {
childList: true,
subtree: true,
};
observer.observe(videoGrid, conf);
}
addButton();
}

15
src/PipedytButton.hx Normal file
View File

@ -0,0 +1,15 @@
import haxe.Resource;
import js.html.AnchorElement;
import js.Browser.document;
@:forward
abstract PipedytButton(AnchorElement) to AnchorElement {
public function new(href:String) {
this = document.createAnchorElement();
this.href = href;
this.target = "_blank";
this.classList.add("pipedyt-button");
this.innerHTML = Resource.getString("icon");
}
}