Fixed some layouting issues (#222)

Author: NikkelM

CHANGELOG.md

@@ -1,11 +1,16 @@
 # Changelog
 
-## v2.2.3
+## v2.2.4
 
 <!--Releasenotes start-->
+- Fixed an alignment issue of the shuffle button on channel pages that was introduced with the latest update to the YouTube UI.
+- Fixed some issues with the display of the shuffle button if the shuffle icon is not loaded in time.
+<!--Releasenotes end-->
+
+## v2.2.3
+
 - Error messages now include the current channel ID to help with reporting an issue.
 - Some changes in how data that is sent to the database is handled, to prepare for a future security update.
-<!--Releasenotes end-->
 
 ## v2.2.2
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "random-youtube-video",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Play a random video uploaded on the current YouTube channel.",
   "scripts": {
 		"dev": "concurrently \"npm run dev:chromium\" \"npm run dev:firefox\"",

src/buildShuffleButton.js

@@ -8,7 +8,7 @@ export function buildShuffleButton(pageType, channelId, clickHandler) {
 	let buttonDivID = "youtube-random-video-shuffle-button";
 	let buttonDivExtraStyle = "";
 	let buttonDivOwner = null;
-	let buttonDivPrepend = true;
+	let buttonDivAppend = true;
 
 	// Depending on the type of page we're on, we might need to change certain parts of the button
 	switch (pageType) {
@@ -20,7 +20,6 @@ export function buildShuffleButton(pageType, channelId, clickHandler) {
 			buttonDivID = "youtube-random-video-shuffle-button-video";
 			buttonDivExtraStyle = "margin-left: 8px;";
 			buttonDivOwner = document.getElementById("above-the-fold").children.namedItem("top-row").children.namedItem("owner");
-			buttonDivPrepend = false;
 			break;
 		default:
 			console.warn(`Cannot build button: Unknown page type: ${pageType}`);
@@ -69,11 +68,11 @@ export function buildShuffleButton(pageType, channelId, clickHandler) {
 	</div>`;
 	buttonDiv = new DOMParser().parseFromString(buttonDiv, "text/html").body.firstChild;
 
-	// Depending on the page we're on, we wat to prepend or append the button to the owner
-	if (buttonDivPrepend) {
-		buttonDivOwner.prepend(buttonDiv);
-	} else {
+	// Depending on the page we're on, we may want to prepend or append the button to the parent
+	if (buttonDivAppend) {
 		buttonDivOwner.appendChild(buttonDiv);
+	} else {
+		buttonDivOwner.prepend(buttonDiv);
 	}
 
 	// Wait for the button renderer to get the child elements defined by the element type
@@ -117,7 +116,7 @@ function finalizeButton(pageType, channelId, clickHandler) {
 	<button
 		class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m"
 		aria-label="Shuffle from this channel">
-			<span class="material-symbols-outlined">
+			<span class="material-symbols-outlined" style="width: 24.01px; overflow: hidden;">
 				shuffle
 			</span>
 			<div class="cbox yt-spec-button-shape-next--button-text-content">

static/manifest.json

@@ -1,7 +1,7 @@
 {
 	"name": "Random YouTube Video",
 	"description": "Play a random video uploaded on the current YouTube channel.",
-	"version": "2.2.3",
+	"version": "2.2.4",
 	"manifest_version": 3,
 	"content_scripts": [
 		{