Skip to content

Commit be81f59

Browse files
DutchJavaDevDutchJavaDev
committed
wip ui
1 parent d060f8c commit be81f59

4 files changed

Lines changed: 112 additions & 29 deletions

File tree

‎MyMusicClientSveltePwa/src/lib/components/PlayerBar.svelte‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
}
1717
</script>
1818

19-
<div class="container-fluid player-bar mb-2">
19+
<div class="container-fluid border-3 border-bottom border-top player-bar mb-2 rounded rounded-1">
2020
<div class="row space-between">
2121
<div class="image-placeholder col-2 col-md-2 col-lg-2" style="--url: url({$currentSong.id !== -999 ? getImageUrl($currentSong.thumbnail_path) : "" });">
2222
&nbsp;
2323
</div>
24-
<div class="col-8 col-md-8 col-lg-9" style="background: linear-gradient(to right, #1DB954 {($currentSong && $currentSong.id !== -999) ? $playPercentage:0}%, #2c2c2c {($currentSong && $currentSong.id !== -999) ? $playPercentage:0}%);">
24+
<div class="col-8 col-md-8 col-lg-9" style="background: linear-gradient(to right, #1DB954 {($currentSong && $currentSong.id !== -999) ? $playPercentage:0}%, #1E1E1E {($currentSong && $currentSong.id !== -999) ? $playPercentage:0}%);">
2525
<button type="button" class="btn clickable-text" data-bs-toggle="{($currentSong && $currentSong.id !== -999) ? "modal" : ""}" data-bs-target="{($currentSong && $currentSong.id !== -999) ? "#songControlModal" : ""}">
2626
{#if $currentSong && $currentSong.id !== -999}
2727
{$currentSong.name}
@@ -30,7 +30,7 @@
3030
{/if}
3131
</button>
3232
</div>
33-
<div class="col-2 col-md-2 col-lg-1">
33+
<div class="col-2 col-md-2 col-lg-1 border border-dark rounded rounded-0" style="border-color: #2A2A2A !important;">
3434
<button on:click={togglePlay} class="btn play-button w-100">
3535
{#if ($currentSong && $currentSong.id !== -999) && $isPlaying && !$isLoading}
3636
<i class="fa-solid fa-pause"></i>
@@ -51,7 +51,7 @@
5151
min-height: 2.8rem;
5252
width: 100%;
5353
font-weight: bold;
54-
color: white;
54+
color: rgba(255, 255, 255, 0.77);
5555
display: -webkit-box;
5656
-webkit-line-clamp: 2;
5757
line-clamp: 2;
@@ -62,7 +62,9 @@
6262
}
6363
6464
.player-bar {
65-
background-color: transparent;
65+
background-color: #1E1E1E !important;
66+
max-width: calc(100vw - 17vw);
67+
border-color: #969696 !important;
6668
}
6769
6870
.image-placeholder{

‎MyMusicClientSveltePwa/src/lib/components/SearchBar.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { searchQuery } from "../scripts/util";
44
</script>
55

6-
<div class="search" role="search" aria-label="Search music">
6+
<div class="search border border-1 border-dark" role="search" aria-label="Search music">
77
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
88
<path stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35" />
99
<circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
@@ -26,7 +26,7 @@
2626
align-items: center;
2727
gap: 12px;
2828
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4);
29-
width: 95%;
29+
width: 95vw;
3030
margin: 0px auto;
3131
}
3232
.search svg {

‎MyMusicClientSveltePwa/src/lib/components/Song.svelte‎

Lines changed: 92 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@
4646
</script>
4747

4848
{#if song}
49-
<div class="song" style="--url: url({getImageUrl(song.thumbnail_path)});">
49+
<!-- <div class="song" style="--url: url({getImageUrl(song.thumbnail_path)});">
5050
<div class="blur"></div>
51-
<div class="row align-items-center mt-3 content">
51+
<div class="row align-items-center content">
5252
<div class="col-2">
5353
<button on:click={() => playOrPauseSong(song.id)} style="background-color: transparent; border: none; color: #1db954;">
5454
{#if $currentSong && $currentSong.id === song.id && $isPlaying}
@@ -69,6 +69,25 @@
6969
</button>
7070
</div>
7171
</div>
72+
</div> -->
73+
74+
<div class="row song m-1 rounded rounded-1" style="--url: url({getImageUrl(song.thumbnail_path)});">
75+
<div class="col-12 blur">
76+
</div>
77+
<div class="col-12">
78+
<!-- svelte-ignore a11y_click_events_have_key_events -->
79+
<!-- svelte-ignore a11y_no_static_element_interactions -->
80+
<div class="row content" aria-label="bsd" aria-roledescription="action" type="button" on:click={() => playOrPauseSong(song.id)} style="cursor: pointer; align-items: center; padding: 10px;">
81+
<div class="col-10">
82+
<div class="title {($currentSong && $currentSong.id === song.id && $isPlaying) ? "iamcute" : ""}">{song.name}</div>
83+
</div>
84+
<div class="col-2">
85+
<button on:click={deleteSong} class="text-center" aria-label="settings" style="background-color: transparent; border: none; font-size: 1rem;">
86+
<i class="fa-solid fa-trash text-danger"></i>
87+
</button>
88+
</div>
89+
</div>
90+
</div>
7291
</div>
7392
{:else}
7493
<p>No song available.</p>
@@ -79,22 +98,22 @@
7998
position: relative;
8099
background: #2c2c2c;
81100
border-radius: 10px;
82-
padding: 0px 10px;
83101
margin-bottom: 10px;
84102
min-height: 80px;
85-
box-shadow: 0 4px 12px rgba(90, 89, 89, 0.4);
86103
background-image: var(--url);
87104
background-size: cover;
88105
background-position: center;
89106
overflow: hidden;
90107
transition: transform 0.2s ease;
108+
border-radius: 2px;
109+
margin: auto;
91110
}
92111
93112
.song:hover {
94113
transform: translateY(-3px);
95114
}
96115
97-
.song-info {
116+
/* .song-info {
98117
flex: 1;
99118
margin: 0 12px;
100119
display: flex;
@@ -105,15 +124,14 @@
105124
-webkit-box-orient: vertical;
106125
overflow: hidden;
107126
text-overflow: ellipsis;
108-
}
127+
} */
109128
.title {
110-
color: #ffffff;
111-
font-weight: bold;
112-
font-size: 0.5rem;
113-
margin: 5px;
129+
color: #b3b3b3;
130+
font-size: 0.7rem;
131+
margin-top: 5px;
114132
display: -webkit-box;
115-
-webkit-line-clamp: 2;
116-
line-clamp: 2;
133+
-webkit-line-clamp: 3;
134+
line-clamp: 3;
117135
-webkit-box-orient: vertical;
118136
overflow: hidden;
119137
text-overflow: ellipsis;
@@ -122,15 +140,74 @@
122140
.blur {
123141
position: absolute;
124142
inset: 0;
125-
background-color: rgba(0, 0, 0, 0.6);
126-
backdrop-filter: blur(5px);
143+
background-color: #2c2c2c76;
144+
backdrop-filter: blur(10px);
127145
z-index: 1;
128-
border-radius: 5px;
146+
/* border-radius: 5px; */
129147
}
130148
131149
/* Keep content visible above blur */
132150
.content {
133151
position: relative;
134152
z-index: 2;
135153
}
154+
155+
@keyframes lights {
156+
0% {
157+
color: #1DB954;
158+
text-shadow:
159+
0 0 0.35em hsla(140, 80%, 50%, 0.25),
160+
0 0 0.1em hsla(140, 80%, 60%, 0.2);
161+
}
162+
163+
30% {
164+
color: #1db954b5;
165+
text-shadow:
166+
0 0 0.45em hsla(140, 80%, 50%, 0.35),
167+
0 0 0.15em hsla(140, 80%, 60%, 0.25),
168+
-0.15em -0.05em 0.15em hsla(60, 90%, 60%, 0.15),
169+
0.15em 0.05em 0.15em hsla(200, 100%, 60%, 0.2);
170+
}
171+
172+
40% {
173+
color: #1db9549d;
174+
text-shadow:
175+
0 0 0.4em hsla(140, 80%, 50%, 0.3),
176+
0 0 0.12em hsla(140, 80%, 80%, 0.25),
177+
-0.1em -0.05em 0.1em hsla(60, 90%, 60%, 0.12),
178+
0.1em 0.05em 0.1em hsla(200, 100%, 60%, 0.15);
179+
}
180+
181+
70% {
182+
color: #1db95464;
183+
text-shadow:
184+
0 0 0.35em hsla(140, 80%, 50%, 0.25),
185+
0 0 0.1em hsla(140, 80%, 60%, 0.2),
186+
0.15em -0.05em 0.12em hsla(60, 90%, 60%, 0.12),
187+
-0.15em 0.05em 0.12em hsla(200, 100%, 60%, 0.18);
188+
}
189+
190+
100% {
191+
color: #1DB954;
192+
text-shadow:
193+
0 0 0.35em hsla(140, 80%, 50%, 0.25),
194+
0 0 0.1em hsla(140, 80%, 60%, 0.2);
195+
}
196+
}
197+
198+
/* body {
199+
margin: 0;
200+
font: 100% / 1.5 Raleway, sans-serif;
201+
color: hsl(230, 100%, 95%);
202+
background: linear-gradient(135deg, hsl(230, 40%, 12%), hsl(230, 20%, 7%));
203+
height: 100vh;
204+
display: flex;
205+
} */
206+
207+
.iamcute {
208+
/* margin: auto;
209+
font-size: 3.5rem;
210+
font-weight: 300; */
211+
animation: lights 2s 500ms linear infinite;
212+
}
136213
</style>

‎MyMusicClientSveltePwa/src/lib/pages/Playlists.svelte‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
// @ts-nocheck
33
import { get, writable } from "svelte/store";
4-
import { onDestroy, onMount, setContext } from "svelte";
4+
import { getContext, onDestroy, onMount, setContext } from "svelte";
55
import { getCachedPlaylistSongs } from "../scripts/storageService";
66
import { playOrPauseSong, setPlaylists, updateCurrentPlaylist } from "../scripts/playbackService";
77
import SongComponent from "../components/Song.svelte";
@@ -25,6 +25,9 @@
2525
let readableSongs = [];
2626
2727
onMount(() => {
28+
let auto = getContext("preventAutoScroll");
29+
auto(null);
30+
2831
songs.set(getCachedPlaylistSongs(playlistId));
2932
setContext("playOrPauseSong", playOrPause);
3033
readableSongs = getCachedPlaylistSongs(playlistId);
@@ -51,7 +54,7 @@
5154

5255
{#if readableSongs.length > 0}
5356
<!-- <p>showing items {start}-{end}</p> -->
54-
<div class='container overflow-hidden'>
57+
<div class='container-cs border border-dark'>
5558
<VirtualList items={readableSongs} bind:start bind:end let:item>
5659
<SongComponent song={item} {playlistId} />
5760
</VirtualList>
@@ -61,11 +64,12 @@
6164
{/if}
6265

6366
<style>
64-
.container {
65-
/* border-top: 1px solid #333;
66-
border-bottom: 1px solid #333; */
67-
min-height: 60vh;
68-
height: calc(100vh - 15em);
67+
.container-cs {
68+
background: #2a2a2a;
69+
border-top: 1px solid #333;
70+
border-bottom: 1px solid #333;
71+
/* min-height: calc(100vh - 30vh); */
72+
height: calc(100vh - 35vh);
6973
padding-right: unset;
7074
padding-left: unset;
7175
}

0 commit comments

Comments
 (0)