diff --git a/public/content.css b/public/content.css index 285ba11d..7dd3c33f 100644 --- a/public/content.css +++ b/public/content.css @@ -780,6 +780,18 @@ input::-webkit-inner-spin-button { line-height: 1.5em; } +/* Description on right layout */ +#title > #categoryPillParent { + font-size: 2rem; + font-weight: bold; + display: flex; + justify-content: center; + line-height: 2.8rem; +} +#title > #categoryPillParent > #categoryPill.cbPillOpen { + margin-bottom: 5px; +} + #categoryPillParent { height: fit-content; margin-top: auto; diff --git a/src/components/CategoryPillComponent.tsx b/src/components/CategoryPillComponent.tsx index 36e31b47..e4c5a3ed 100644 --- a/src/components/CategoryPillComponent.tsx +++ b/src/components/CategoryPillComponent.tsx @@ -23,12 +23,14 @@ export interface CategoryPillState { } class CategoryPillComponent extends React.Component { - + mainRef: React.MutableRefObject; tooltip?: Tooltip; constructor(props: CategoryPillProps) { super(props); + this.mainRef = React.createRef(); + this.state = { segment: null, show: false, @@ -43,13 +45,17 @@ class CategoryPillComponent extends React.Component this.toggleOpen(e)} onMouseEnter={() => this.openTooltip()} - onMouseLeave={() => this.closeTooltip()}> + onMouseLeave={() => this.closeTooltip()} + ref={this.mainRef}> { - const referenceNode = + let referenceNode = await waitFor(() => getYouTubeTitleNode()); + // Experimental YouTube layout with description on right + const isOnDescriptionOnRightLayout = document.querySelector("#title #description"); + if (isOnDescriptionOnRightLayout) { + referenceNode = referenceNode.parentElement; + } + if (referenceNode && !referenceNode.contains(this.container)) { if (!this.container) { this.container = document.createElement('span'); @@ -91,7 +97,9 @@ export class CategoryPill { parent.appendChild(this.container); referenceNode.prepend(parent); - referenceNode.style.display = "flex"; + if (!isOnDescriptionOnRightLayout) { + referenceNode.style.display = "flex"; + } } }