feat: add buttons to feed page
This commit is contained in:
parent
4f108263bc
commit
990b3e473c
|
@ -1,6 +1,6 @@
|
||||||
// ==UserScript==
|
// ==UserScript==
|
||||||
// @name PipedYT
|
// @name PipedYT
|
||||||
// @version 0.1.0
|
// @version 0.2.0
|
||||||
// @description Add a youtube link to piped's UI
|
// @description Add a youtube link to piped's UI
|
||||||
// @author LordMZTE
|
// @author LordMZTE
|
||||||
// @include http*://piped.kavin.rocks/*
|
// @include http*://piped.kavin.rocks/*
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
-cp src
|
-cp src
|
||||||
-main Main
|
-main Main
|
||||||
-D js_es=6
|
|
||||||
--macro Init.init()
|
--macro Init.init()
|
||||||
|
|
||||||
-resource assets/yt.svg@icon
|
-resource assets/yt.svg@icon
|
||||||
|
|
10
src/BigPipedytButton.hx
Normal file
10
src/BigPipedytButton.hx
Normal 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");
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,42 +3,64 @@ import js.Browser.window;
|
||||||
import js.Browser.document;
|
import js.Browser.document;
|
||||||
import js.Browser.console;
|
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() {
|
function addButton() {
|
||||||
console.log("looking for places to put PipedYT buttons...");
|
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()) {
|
function addButtonToVideoPage() {
|
||||||
return;
|
var buttonBar = document.querySelector("#app .w-full .flex .ml-auto");
|
||||||
}
|
|
||||||
|
|
||||||
if (buttonBar == null) {
|
if (buttonBar == null) {
|
||||||
console.warn("Button bar not found!");
|
console.warn("Button bar not found!");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (document.getElementById("pipedyt-button") != null) {
|
if (document.querySelector(".pipedyt-button") != null) {
|
||||||
console.log("PipedYT button already exists, not adding another.");
|
console.log("PipedYT button already exists, not adding another.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var button = document.createAnchorElement();
|
|
||||||
|
|
||||||
var urlSuffix = window.location.pathname + window.location.search;
|
var urlSuffix = window.location.pathname + window.location.search;
|
||||||
|
var url = 'https://youtube.com$urlSuffix';
|
||||||
|
|
||||||
button.href = 'https://youtube.com$urlSuffix';
|
buttonBar.appendChild(new BigPipedytButton(url));
|
||||||
button.target = "_blank";
|
console.log('Added PipedYT button to $url');
|
||||||
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}');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function isVideoPage():Bool {
|
function addButtonToFeedPage() {
|
||||||
return window.location.pathname == "/watch" && StringTools.startsWith(window.location.search, "?v=");
|
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 ButtonAdder.addButton;
|
||||||
import js.Browser.window;
|
import js.Browser.window;
|
||||||
import js.Browser.document;
|
import js.Browser.document;
|
||||||
|
|
||||||
class Main {
|
function main() {
|
||||||
static function main() {
|
window.addEventListener("load", onload);
|
||||||
window.addEventListener("load", addButton);
|
new LocationChangeListener(addButton).register(document.body);
|
||||||
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
15
src/PipedytButton.hx
Normal 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");
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue