Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-11 05:57:07 +03:00
Code Issues Packages Projects Releases 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
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 = new CategoryPill();
} }
categoryPill.attachToPage(); categoryPill.attachToPage(onMobileYouTube);
} }
async function sponsorsLookup(id: string, keepOldSubmissions = true) { async function sponsorsLookup(id: string, keepOldSubmissions = true) {

27
src/render/CategoryPill.tsx
View File

@@ -10,13 +10,17 @@ export class CategoryPill {
unsavedState: CategoryPillState; unsavedState: CategoryPillState;
mutationObserver?: MutationObserver;
constructor() { constructor() {
this.ref = React.createRef(); this.ref = React.createRef();
} }
async attachToPage(): Promise<void> { async attachToPage(onMobileYouTube: boolean): Promise<void> {
// TODO: Mobile and invidious const referenceNode =
const referenceNode = await GenericUtils.wait(() => document.querySelector(".ytd-video-primary-info-renderer.title") as HTMLElement); 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)) { if (referenceNode && !referenceNode.contains(this.container)) {
this.container = document.createElement('span'); this.container = document.createElement('span');
@@ -26,6 +30,10 @@ export class CategoryPill {
referenceNode.prepend(this.container); referenceNode.prepend(this.container);
referenceNode.style.display = "flex"; referenceNode.style.display = "flex";
if (this.ref.current) {
this.unsavedState = this.ref.current.state;
}
ReactDOM.render( ReactDOM.render(
<CategoryPillComponent ref={this.ref} />, <CategoryPillComponent ref={this.ref} />,
this.container this.container
@@ -35,6 +43,19 @@ export class CategoryPill {
this.ref.current?.setState(this.unsavedState); this.ref.current?.setState(this.unsavedState);
this.unsavedState = null; 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
});
}
} }
} }