feat: add buttons to feed page
This commit is contained in:
parent
4f108263bc
commit
990b3e473c
|
@ -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/*
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
-cp src
|
||||
-main Main
|
||||
-D js_es=6
|
||||
--macro Init.init()
|
||||
|
||||
-resource assets/yt.svg@icon
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
}
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
23
src/Main.hx
23
src/Main.hx
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue