Added first part of player

app/components/Player/index.vue

@@ -1,22 +1,45 @@
 <script setup lang="tsx">
-const widthFixer = useTemplateRef("width-fixer")
+const widthFixerRef = useTemplateRef("width-fixer")
-const player = useTemplateRef("player")
+const playerRef = useTemplateRef("player")
 
 onMounted(() => {
-	const resizeObserver = new ResizeObserver((entries) => {
+	const resizePlayer = () => {
-		for (const entry of entries) {
+		if (playerRef.value && widthFixerRef.value)
-			if (player.value)
+			playerRef.value.style.width = `calc(${widthFixerRef.value.clientWidth}px + 2rem)`
-				player.value.style.width = `${entry.target.clientWidth}px`
 	}
+
+	const resizeObserver = new ResizeObserver(() => {
+		resizePlayer()
 	})
 
-	if (widthFixer.value) resizeObserver.observe(widthFixer.value)
+	if (widthFixerRef.value) resizeObserver.observe(widthFixerRef.value)
+	resizePlayer()
 })
+
+const song = useSong()
 </script>
 
 <template>
 	<div id="width-fixer" ref="width-fixer"></div>
-	<article class="player" ref="player"></article>
+	<article class="player" ref="player" :class="{ active: song }">
+		<template v-if="song">
+			<div class="track">
+				<NuxtImg
+					:src="GET_FILE(song.album.file)"
+					:alt="song.name"
+					:height="56"
+					:width="56"
+				/>
+
+				<div class="details">
+					<p>{{ song.name }}</p>
+					<ArtistName :artists="song.artists" class="artists" />
+				</div>
+			</div>
+			<div class="controls"></div>
+			<div class="misc-btns"></div>
+		</template>
+	</article>
 </template>
 
 <style lang="scss" scoped>
@@ -29,9 +52,48 @@ onMounted(() => {
 .player {
 	position: fixed;
 	bottom: 1rem;
+	margin: 0 -1rem;
 
 	height: 72px;
 
 	border-radius: $border-radius-standard;
+	border: 1px solid $color-border;
+
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 1rem;
+
+	padding: 0.5rem 2rem;
+
+	transform: translateY(150%);
+	transition: transform 0.2s ease-out;
+
+	&.active {
+		transform: translateY(0);
+	}
+}
+
+.track,
+.controls,
+.misc-btns {
+	display: flex;
+	width: 100%;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+.details {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	line-height: 1.375;
+}
+
+img {
+	height: 100%;
+	border-radius: $border-radius-standard;
 }
 </style>