From 89ed0d075bee66e7859af1e38cd254422de684ae Mon Sep 17 00:00:00 2001
From: Nikkel Mollenhauer <57323886+NikkelM@users.noreply.github.com>
Date: Fri, 27 Oct 2023 19:11:51 +0200
Subject: [PATCH] Fixed some layouting issues (#222)

---
 CHANGELOG.md              |  9 +++++++--
 package.json              |  2 +-
 src/buildShuffleButton.js | 13 ++++++-------
 static/manifest.json      |  2 +-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4ffc0f4..e135a555 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/package.json b/package.json
index d69694ca..613e8f34 100644
--- a/package.json
+++ b/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\"",
diff --git a/src/buildShuffleButton.js b/src/buildShuffleButton.js
index 45706a5f..f838f177 100644
--- a/src/buildShuffleButton.js
+++ b/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">
diff --git a/static/manifest.json b/static/manifest.json
index 60cab42a..e7b24a6e 100644
--- a/static/manifest.json
+++ b/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": [
 		{