fix: left controls being squished by chapter and right controls overf…

…lowing
YouTube-Enhancer · Jan 22, 2024 · bfaa2c4 · bfaa2c4
1 parent 5236283
commit bfaa2c4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/public/contentStyle.css b/public/contentStyle.css
@@ -18,9 +18,11 @@ body.no-scroll .yte-button-tooltip {
 	padding: 8px 9px !important;
 	transform: translate(-50%, -75%) !important;
 }
+
 .maximized_chapter {
 	width: 100% !important;
 }
+
 .maximized_video {
 	width: 100vw !important;
 	height: 100vh !important;
@@ -29,6 +31,7 @@ body.no-scroll .yte-button-tooltip {
 	object-fit: contain !important;
 	background: black !important;
 }
+
 .maximized_video_container {
 	position: fixed !important;
 	top: 0 !important;
@@ -37,10 +40,12 @@ body.no-scroll .yte-button-tooltip {
 	height: 100vh !important;
 	z-index: 2020 !important;
 }
+
 .maximized_controls {
 	width: 97vw !important;
 	right: 12px !important;
 }
+
 .yte-maximize-player-button {
 	opacity: 0.9;
 	display: inline-block;
@@ -51,3 +56,11 @@ body.no-scroll .yte-button-tooltip {
 	transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
 	overflow: hidden;
 }
+
+.ytp-chapter-container {
+	flex: 1 !important;
+}
+
+.ytp-right-controls {
+	display: flex !important;
+}
diff --git a/src/features/buttonPlacement/utils.ts b/src/features/buttonPlacement/utils.ts
@@ -35,8 +35,6 @@ export function makeFeatureButton<Name extends FeaturesThatHaveButtons, Placemen
 ) {
 	if (placement === "feature_menu") throw new Error("Cannot make a feature button for the feature menu");
 	const buttonExists = document.querySelector(`button#${getFeatureButtonId(featureName)}`) !== null;
-	// TODO: fix left controls chapter container shrinking buttons
-	// TODO: fix right controls button making control buttons overflow
 	const button = createStyledElement({
 		classlist: ["ytp-button"],
 		elementId: `${getFeatureButtonId(featureName)}`,
@@ -131,7 +129,9 @@ export function placeButton(button: HTMLButtonElement, placement: Exclude<Button
 		case "player_controls_left": {
 			const leftControls = document.querySelector<HTMLDivElement>(".ytp-left-controls");
 			if (!leftControls) return;
-			leftControls.append(button);
+			const timeDisplay = leftControls.querySelector<HTMLDivElement>(".ytp-time-display");
+			if (!timeDisplay) return;
+			timeDisplay.insertAdjacentElement("beforebegin", button);
 			break;
 		}
 		case "player_controls_right": {