Fix category pill disappearing on mobile

This commit is contained in:
Ajay
2022-12-25 00:38:49 -05:00
parent 89b210ffd5
commit 06a112a030

View File

@@ -27,33 +27,24 @@ export class CategoryPill {
await waitFor(() => getYouTubeTitleNode()); await waitFor(() => getYouTubeTitleNode());
if (referenceNode && !referenceNode.contains(this.container)) { if (referenceNode && !referenceNode.contains(this.container)) {
if (!this.container) {
this.container = document.createElement('span'); this.container = document.createElement('span');
this.container.id = "categoryPill"; this.container.id = "categoryPill";
this.container.style.display = "relative"; this.container.style.display = "relative";
referenceNode.prepend(this.container);
referenceNode.style.display = "flex";
if (this.ref.current) {
this.unsavedState = this.ref.current.state;
}
this.root = createRoot(this.container); this.root = createRoot(this.container);
this.root.render(<CategoryPillComponent ref={this.ref} vote={vote} />); this.root.render(<CategoryPillComponent ref={this.ref} vote={vote} />);
if (this.unsavedState) {
waitFor(() => this.ref.current).then(() => {
this.ref.current?.setState(this.unsavedState);
this.unsavedState = null;
});
}
if (onMobileYouTube) { if (onMobileYouTube) {
if (this.mutationObserver) { if (this.mutationObserver) {
this.mutationObserver.disconnect(); this.mutationObserver.disconnect();
} }
this.mutationObserver = new MutationObserver(() => this.attachToPage(onMobileYouTube, onInvidious, vote)); this.mutationObserver = new MutationObserver((changes) => {
if (changes.some((change) => change.removedNodes.length > 0)) {
this.attachToPage(onMobileYouTube, onInvidious, vote);
}
});
this.mutationObserver.observe(referenceNode, { this.mutationObserver.observe(referenceNode, {
childList: true, childList: true,
@@ -61,6 +52,16 @@ export class CategoryPill {
}); });
} }
} }
if (this.unsavedState) {
waitFor(() => this.ref.current).then(() => {
this.ref.current?.setState(this.unsavedState);
});
}
referenceNode.prepend(this.container);
referenceNode.style.display = "flex";
}
} }
close(): void { close(): void {
@@ -79,6 +80,8 @@ export class CategoryPill {
} else { } else {
this.unsavedState = newState; this.unsavedState = newState;
} }
console.log(this.unsavedState, this.ref.current?.state, "visible");
} }
async setSegment(segment: SponsorTime): Promise<void> { async setSegment(segment: SponsorTime): Promise<void> {