Merge pull request #289 from VampireChicken12/dev

Dev

CHANGELOG.md

@@ -1,3 +1,22 @@
+## [1.21.1](https://github.com/VampireChicken12/youtube-enhancer/compare/v1.21.0...v1.21.1) (2024-01-22)
+
+
+### Bug Fixes
+
+* left controls being squished by chapter and right controls overflowing ([bfaa2c4](https://github.com/VampireChicken12/youtube-enhancer/commit/bfaa2c43a94899a641b28a4deffc27fa6fea91c7))
+
+
+
+
+
+## Release Artifacts
+| File Name | SHA-256 Hash |
+| :--- | :---: |
+| youtube-enhancer-v1.21.1-Chrome.zip | cb35875b8d434551303cc3a782ca5416bad0d089326d4cc454a75cee62c33c48 |
+| youtube-enhancer-v1.21.1-Chromium.zip | cb35875b8d434551303cc3a782ca5416bad0d089326d4cc454a75cee62c33c48 |
+| youtube-enhancer-v1.21.1-Edge.zip | cb35875b8d434551303cc3a782ca5416bad0d089326d4cc454a75cee62c33c48 |
+| youtube-enhancer-v1.21.1-Firefox.zip | 8fa17342f857edb20b06320f3fbc454a9ccca5512d62fdf948550428c5c838a8 |
+
 # [1.21.0](https://github.com/VampireChicken12/youtube-enhancer/compare/v1.20.1...v1.21.0) (2024-01-22)
 
 

package.json

@@ -4,7 +4,7 @@
     "name": "VampireChicken12"
   },
   "displayName": "YouTube Enhancer",
-  "version": "1.21.0",
+  "version": "1.21.1",
   "description": "YouTube Enhancer is a simple extension that adds some useful features to YouTube.",
   "license": "MIT",
   "repository": {

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;
+}

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": {