Revert "refactor(EditSong): reverted many parts of design refresh from over a month ago"

This reverts commit a1af96ea21a47551c0b8170a7fa95e5655faaadf.

frontend/src/components/modals/EditSong/index.vue

@@ -5,7 +5,16 @@
 				<div class="left-section">
 					<div class="top-section">
 						<div class="player-section">
-							<div id="editSongPlayer" />
+							<div id="video-container">
+								<div
+									id="editSongPlayer"
+									style="
+										width: 100%;
+										height: 100%;
+										min-height: 200px;
+									"
+								/>
+							</div>
 
 							<div v-show="youtubeError" class="player-error">
 								<h2>{{ youtubeErrorMessage }}</h2>
@@ -66,7 +75,7 @@
 									</button>
 								</div>
 								<div class="player-footer-center">
-									<!-- <img src="/assets/social/youtube.svg" /> -->
+									<img src="/assets/social/youtube.svg" />
 									<span>
 										<span>
 											{{ youtubeVideoCurrentTime }}
@@ -116,13 +125,6 @@
 								</div>
 							</div>
 						</div>
-						<img
-							class="thumbnail-preview"
-							:src="song.thumbnail"
-							onerror="this.src='/assets/notes-transparent.png'"
-							ref="thumbnailElement"
-							v-if="songDataLoaded"
-						/>
 					</div>
 
 					<div class="edit-section" v-if="songDataLoaded">
@@ -191,10 +193,17 @@
 							</div>
 						</div>
 
-						<div class="control is-grouped">
-							<div class="album-art-container">
-								<label class="label">Album art</label>
-
+						<div class="control is-grouped album-art-container">
+							<label class="label">Album art</label>
+
+							<div>
+								<img
+									class="thumbnail-preview"
+									:src="song.thumbnail"
+									onerror="this.src='/assets/notes-transparent.png'"
+									ref="thumbnailElement"
+									v-if="songDataLoaded"
+								/>
 								<p class="control has-addons">
 									<input
 										class="input"
@@ -941,8 +950,8 @@ export default {
 							this.video.player = new window.YT.Player(
 								"editSongPlayer",
 								{
-									height: 298,
-									width: 530,
+									height: 270,
+									width: 480,
 									videoId: this.song.youtubeId,
 									host: "https://www.youtube-nocookie.com",
 									playerVars: {
@@ -1584,6 +1593,16 @@ export default {
 };
 </script>
 
+<style lang="scss">
+#editSongPlayer {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+</style>
+
 <style lang="scss" scoped>
 .night-mode {
 	.edit-section,
@@ -1620,15 +1639,13 @@ export default {
 .song-modal {
 	&::v-deep {
 		.modal-card {
-			width: 1160px;
+			width: 1300px;
 			height: 100%;
-			// width: 1300px;
 
 			.modal-card-body {
 				display: flex;
-				// column-gap: 16px;
-				// row-gap: 16px;
-				padding: 16px;
+				column-gap: 16px;
+				row-gap: 16px;
 
 				@media screen and (max-width: 1000px) {
 					flex-wrap: wrap;
@@ -1636,7 +1653,7 @@ export default {
 
 				> div {
 					display: flex;
-					// flex-grow: 1;
+					flex-grow: 1;
 					height: 100%;
 					overflow: auto;
 				}
@@ -1653,53 +1670,51 @@ export default {
 	}
 }
 
-// #video-container {
-// 	position: relative;
-// 	padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
-// 	height: 0;
-// 	overflow: hidden;
-
-// 	.player-cannot-autoplay {
-// 		position: relative;
-// 		width: 100%;
-// 		height: 100%;
-// 		bottom: calc(100% + 5px);
-// 		background-color: var(--primary-color);
-// 		display: flex;
-// 		align-items: center;
-// 		justify-content: center;
-
-// 		p {
-// 			color: var(--white);
-// 			font-size: 26px;
-// 			text-align: center;
-// 		}
-// 	}
-// }
+#video-container {
+	position: relative;
+	padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
+	height: 0;
+	overflow: hidden;
+
+	.player-cannot-autoplay {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		bottom: calc(100% + 5px);
+		background-color: var(--primary-color);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		p {
+			color: var(--white);
+			font-size: 26px;
+			text-align: center;
+		}
+	}
+}
 
 .left-section {
 	display: flex;
 	flex-direction: column;
-	margin-right: 16px;
-	// flex-grow: 0 !important;
-	// height: inherit !important;
+	flex-grow: 0 !important;
+	height: inherit !important;
 
-	// @media screen and (max-width: 1245px) {
-	// 	flex-grow: 1 !important;
-	// }
+	@media screen and (max-width: 1245px) {
+		flex-grow: 1 !important;
+	}
 
 	.top-section {
 		display: flex;
-		// flex-direction: column;
+		flex-direction: column;
 
 		.player-section {
-			width: 530px;
 			display: flex;
 			flex-direction: column;
 
 			.player-error {
 				height: 318px;
-				width: 530px;
+				// width: 530px;
 				display: block;
 				border: 1px rgba(163, 224, 255, 0.75) solid;
 				border-radius: 5px 5px 0px 0px;
@@ -1714,26 +1729,22 @@ export default {
 				}
 			}
 
-			// #durationCanvas {
-			// 	max-width: 100%;
-			// }
+			#durationCanvas {
+				max-width: 100%;
+			}
 
 			.player-footer {
 				border: 1px solid var(--light-grey-3);
 				border-radius: 0px 0px 3px 3px;
 				display: flex;
 				justify-content: space-between;
-				height: 54px;
-				padding-left: 10px;
-				padding-right: 10px;
-				// padding: 10px;
-				// width: 100%;
-				// background-color: var(--white);
-				// flex-direction: column;
-				// flex-flow: wrap;
+				padding: 10px;
+				width: 100%;
+				background-color: var(--white);
+				flex-direction: column;
+				flex-flow: wrap;
 
 				> * {
-					width: 33.3%;
 					display: flex;
 					align-items: center;
 				}
@@ -1754,7 +1765,7 @@ export default {
 					justify-content: center;
 					align-items: center;
 					flex: 2;
-					font-size: 18px;
+					font-size: 21px;
 					font-weight: 400;
 					width: 200px;
 					margin: 0 5px;
@@ -1875,18 +1886,10 @@ export default {
 				}
 			}
 		}
-
-		.thumbnail-preview {
-			width: 189px;
-			height: 189px;
-			margin-left: 16px;
-		}
 	}
 
 	.edit-section {
-		width: 735px;
 		border: 1px solid var(--light-grey-3);
-		flex: 1;
 		margin-top: 16px;
 		border-radius: 3px;
 
@@ -1948,27 +1951,26 @@ export default {
 		}
 
 		.album-art-container {
-			width: 100%;
-			// display: flex;
-			// flex-direction: column;
+			display: flex;
+			flex-direction: column;
 
-			// div {
-			// 	display: flex;
-			// 	flex-direction: row;
-			// 	align-items: center;
+			div {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
 
-			// 	.thumbnail-preview {
-			// 		border: 1px solid var(--light-grey-3);
+				.thumbnail-preview {
+					border: 1px solid var(--light-grey-3);
 
-			// 		width: 75px;
-			// 		height: 75px;
-			// 	}
+					width: 75px;
+					height: 75px;
+				}
 
-			// 	.control {
-			// 		margin-left: 20px;
-			// 		width: 100%;
-			// 	}
-			// }
+				.control {
+					margin-left: 20px;
+					width: 100%;
+				}
+			}
 		}
 
 		.artists-container {
@@ -2089,23 +2091,18 @@ export default {
 .right-section {
 	display: flex;
 	flex-wrap: wrap;
-	// flex-basis: 450px;
-	// overflow-y: auto;
+	flex-basis: 450px;
+	overflow-y: auto;
 
-	// @media screen and (max-width: 1245px) {
-	// 	height: inherit !important;
-	// }
+	@media screen and (max-width: 1245px) {
+		height: inherit !important;
+	}
 
 	#tabs-container {
-		width: 376px;
-		background-color: var(--light-grey);
-		border: 1px rgba(163, 224, 255, 0.75) solid;
-		border-radius: 5px;
-		// padding: 16px;
 		overflow: auto;
-		// display: flex;
-		// flex-direction: column;
-		// flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
 
 		#tab-selection {
 			display: flex;