Fix submission menu on layout with description on right

ajayyy · Mar 3, 2024 · b71a738 · b71a738
1 parent 331d8e2
commit b71a738
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/public/content.css b/public/content.css
@@ -255,6 +255,7 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c
     width: 100%;
     border-radius: 5px;
     line-height: normal;
+    cursor: default;
 }
 
 .submissionMenuInner {

diff --git a/src/submission/SubmissionComponent.tsx b/src/submission/SubmissionComponent.tsx
@@ -160,7 +160,9 @@ export const SubmissionComponent = (props: SubmissionComponentProps) => {
 
     const thumbnailSubmissions = [...defaultThumbnails, ...extraUnsubmittedThumbnails, ...downloadedThumbnails];
     return (
-        <div className="submissionMenuInner">
+        <div className="submissionMenuInner"
+            onClick={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}>
             <BrandingPreviewComponent
                 submissions={props.submissions}
                 titles={titles}

diff --git a/src/submission/submitButton.tsx b/src/submission/submitButton.tsx
@@ -80,6 +80,16 @@ export class SubmitButton {
 
     close(): void {
         if (this.container) {
+            // Experimental YouTube layout with description on right
+            const isOnDescriptionOnRightLayout = document.querySelector("#title #description");
+            if (isOnDescriptionOnRightLayout) {
+                // Undo preventing color from changing on hover
+                const title = document.querySelector("#above-the-fold #title") as HTMLElement | null;
+                if (title) {
+                    title.style.removeProperty("background");
+                }
+            }
+
             this.root?.unmount?.();
             this.root = null;
             this.container.remove();
@@ -108,6 +118,9 @@ export class SubmitButton {
 
                 if (isOnDescriptionOnRightLayout) {
                     this.container.style.marginTop = referenceNode.parentElement?.offsetHeight + "px";
+
+                    // Prevent color from changing on hover
+                    referenceNode.parentElement!.parentElement!.style.background = "transparent";
                 }
 
                 this.root = createRoot(this.container);