From be896389be57aa1a1739eb6a319c64e937c221a5 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Thu, 2 May 2024 18:59:25 +1200
Subject: [PATCH] more fixes

---
 materialious/src/lib/MiniPlayer.svelte | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/materialious/src/lib/MiniPlayer.svelte b/materialious/src/lib/MiniPlayer.svelte
index cdd13d6a..37492524 100644
--- a/materialious/src/lib/MiniPlayer.svelte
+++ b/materialious/src/lib/MiniPlayer.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { _ } from 'svelte-i18n';
 	import { miniPlayerSrcStore } from '../store';
-	import { cleanNumber, proxyVideoUrl } from './misc';
+	import { proxyVideoUrl } from './misc';
 
 	let currentTime: number = 0;
 
@@ -29,21 +28,24 @@
 
 {#if $miniPlayerSrcStore}
 	<nav class="bottom no-padding">
-		<article class="surface-variant">
+		<article class="surface-bright">
+			<button on:click={() => miniPlayerSrcStore.set(null)} class="s circle transparent no-margin">
+				<i>close</i>
+			</button>
 			<div class="flex-container">
 				<div style="display: flex;">
-					<p class="bold truncate align-right">
+					<p class="bold truncate">
 						{$miniPlayerSrcStore.video.title}
 					</p>
 					<button
 						on:click={() => miniPlayerSrcStore.set(null)}
-						class="circle transparent no-margin"
-						style="margin-right: 1em;"
+						class="m l circle transparent no-margin"
 					>
 						<i>close</i>
 					</button>
 				</div>
-				<p class="align-right">{cleanNumber($miniPlayerSrcStore.video.viewCount)} {$_('views')}</p>
+				<progress class="s" value={currentTime} max={$miniPlayerSrcStore.video.lengthSeconds}
+				></progress>
 			</div>
 			<video
 				crossorigin="anonymous"
@@ -52,6 +54,7 @@
 					miniPlayerSrcStore.set(null);
 				}}
 				id="video"
+				style="cursor: pointer;"
 				bind:currentTime
 				on:loadedmetadata={setTime}
 				controls={false}
@@ -85,17 +88,13 @@
 	.flex-container {
 		flex: 1;
 		overflow: hidden;
-		max-width: 300px;
 	}
 
 	.truncate {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-	}
-
-	.align-right {
-		text-align: right;
+		max-width: 270px;
 	}
 
 	@media screen and (max-width: 590px) {
@@ -112,10 +111,10 @@
 
 		article {
 			align-items: start;
-			justify-content: space-between;
 			width: 100%;
 			flex-direction: row;
 			padding: 0 !important;
+			justify-content: center;
 		}
 
 		nav video {