Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-14 15:37:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix category pill disappearing on mobile youtube

Browse Source
This commit is contained in:
Ajay
2023-02-13 03:22:55 -05:00
parent d3117d603f
commit c4619aee51
1 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/render/CategoryPill.tsx
View File

@@ -8,14 +8,19 @@ import { Tooltip } from "./Tooltip";
import { waitFor } from "@ajayyy/maze-utils"; import { waitFor } from "@ajayyy/maze-utils";
import { getYouTubeTitleNode } from "@ajayyy/maze-utils/lib/elements"; import { getYouTubeTitleNode } from "@ajayyy/maze-utils/lib/elements";
const id = "categoryPill";
export class CategoryPill { export class CategoryPill {
container: HTMLElement; container: HTMLElement;
ref: React.RefObject<CategoryPillComponent>; ref: React.RefObject<CategoryPillComponent>;
root: Root; root: Root;
unsavedState: CategoryPillState; lastState: CategoryPillState;
mutationObserver?: MutationObserver; mutationObserver?: MutationObserver;
onMobileYouTube: boolean;
onInvidious: boolean;
vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
constructor() { constructor() {
this.ref = React.createRef(); this.ref = React.createRef();
@@ -23,26 +28,35 @@ export class CategoryPill {
async attachToPage(onMobileYouTube: boolean, onInvidious: boolean, async attachToPage(onMobileYouTube: boolean, onInvidious: boolean,
vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>): Promise<void> { vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>): Promise<void> {
this.onMobileYouTube = onMobileYouTube;
this.onInvidious = onInvidious;
this.vote = vote;
this.attachToPageInternal();
}
private async attachToPageInternal(): Promise<void> {
const referenceNode = const referenceNode =
await waitFor(() => getYouTubeTitleNode()); await waitFor(() => getYouTubeTitleNode());
if (referenceNode && !referenceNode.contains(this.container)) { if (referenceNode && !referenceNode.contains(this.container)) {
if (!this.container) { if (!this.container) {
this.container = document.createElement('span'); this.container = document.createElement('span');
this.container.id = "categoryPill"; this.container.id = id;
this.container.style.display = "relative"; this.container.style.display = "relative";
this.root = createRoot(this.container); this.root = createRoot(this.container);
this.root.render(<CategoryPillComponent ref={this.ref} vote={vote} />); this.ref = React.createRef();
this.root.render(<CategoryPillComponent ref={this.ref} vote={this.vote} />);
if (onMobileYouTube) { if (this.onMobileYouTube) {
if (this.mutationObserver) { if (this.mutationObserver) {
this.mutationObserver.disconnect(); this.mutationObserver.disconnect();
} }
this.mutationObserver = new MutationObserver((changes) => { this.mutationObserver = new MutationObserver((changes) => {
if (changes.some((change) => change.removedNodes.length > 0)) { if (changes.some((change) => change.removedNodes.length > 0)) {
this.attachToPage(onMobileYouTube, onInvidious, vote); this.attachToPageInternal();
} }
}); });
@@ -53,13 +67,18 @@ export class CategoryPill {
} }
} }
if (this.unsavedState) { if (this.lastState) {
waitFor(() => this.ref.current).then(() => { waitFor(() => this.ref.current).then(() => {
this.ref.current?.setState(this.unsavedState); this.ref.current?.setState(this.lastState);
}); });
} }
referenceNode.prepend(this.container); // Use a parent because YouTube does weird things to the top level object
// react would have to rerender if container was the top level
const parent = document.createElement("span");
parent.appendChild(this.container);
referenceNode.prepend(parent);
referenceNode.style.display = "flex"; referenceNode.style.display = "flex";
} }
} }
@@ -75,11 +94,8 @@ export class CategoryPill {
open: show ? this.ref.current?.state.open : false open: show ? this.ref.current?.state.open : false
}; };
if (this.ref.current) { this.ref.current?.setState(newState);
this.ref.current?.setState(newState); this.lastState = newState;
} else {
this.unsavedState = newState;
}
} }
async setSegment(segment: SponsorTime): Promise<void> { async setSegment(segment: SponsorTime): Promise<void> {
@@ -90,11 +106,8 @@ export class CategoryPill {
open: false open: false
}; };
if (this.ref.current) { this.ref.current?.setState(newState);
this.ref.current?.setState(newState); this.lastState = newState;
} else {
this.unsavedState = newState;
}
if (!Config.config.categoryPillUpdate) { if (!Config.config.categoryPillUpdate) {
Config.config.categoryPillUpdate = true; Config.config.categoryPillUpdate = true;
@@ -113,5 +126,9 @@ export class CategoryPill {
} }
} }
} }
if (this.onMobileYouTube && !document.contains(this.container)) {
this.attachToPageInternal();
}
} }
} }