external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-09-20 04:53:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

Make category pill work on invidious and mobile youtube

Browse source
This commit is contained in:
Ajay 2022-01-05 15:13:42 -05:00
parent 388b9179ac
commit 040bce2638
2 changed files with 26 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/content.ts
View file

@ -647,7 +647,7 @@ function setupCategoryPill() {
categoryPill = new CategoryPill();
}
categoryPill.attachToPage();
categoryPill.attachToPage(onMobileYouTube);
}
async function sponsorsLookup(id: string, keepOldSubmissions = true) {

29
src/render/CategoryPill.tsx
View file

@ -9,15 +9,19 @@ export class CategoryPill {
ref: React.RefObject<CategoryPillComponent>;
unsavedState: CategoryPillState;
mutationObserver?: MutationObserver;
constructor() {
this.ref = React.createRef();
}
async attachToPage(): Promise<void> {
// TODO: Mobile and invidious
const referenceNode = await GenericUtils.wait(() => document.querySelector(".ytd-video-primary-info-renderer.title") as HTMLElement);
async attachToPage(onMobileYouTube: boolean): Promise<void> {
const referenceNode =
await GenericUtils.wait(() =>
// YouTube, Mobile YouTube, Invidious
document.querySelector(".ytd-video-primary-info-renderer.title, .slim-video-information-title, #player-container + .h-box > h1") as HTMLElement);
if (referenceNode && !referenceNode.contains(this.container)) {
this.container = document.createElement('span');
this.container.id = "categoryPill";
@ -26,6 +30,10 @@ export class CategoryPill {
referenceNode.prepend(this.container);
referenceNode.style.display = "flex";
if (this.ref.current) {
this.unsavedState = this.ref.current.state;
}
ReactDOM.render(
<CategoryPillComponent ref={this.ref} />,
this.container
@ -35,6 +43,19 @@ export class CategoryPill {
this.ref.current?.setState(this.unsavedState);
this.unsavedState = null;
}
if (onMobileYouTube) {
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
this.mutationObserver = new MutationObserver(() => this.attachToPage(onMobileYouTube));
this.mutationObserver.observe(referenceNode, {
childList: true,
subtree: true
});
}
}
}