Skip to content

Commit 35b7ec9

Browse files
DutchJavaDevgithub-actions[bot]
DutchJavaDev
and
github-actions[bot]
authored
Frontend/dark theme UI additions (#69)
* poc ui * update theme * chore: bump version --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 615d9d1 commit 35b7ec9

File tree

18 files changed

+372
-242
lines changed

18 files changed

+372
-242
lines changed

‎MyMusicClientSveltePwa/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎MyMusicClientSveltePwa/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "mymusicclientsveltepwa",
33
"private": true,
4-
"version": "0.1.8",
4+
"version": "0.1.9",
55
"type": "module",
66
"scripts": {
77
"dev": "vite --host",

‎MyMusicClientSveltePwa/src/App.svelte‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
<!-- App.svelte -->
22
<script>
3+
// @ts-nocheck
4+
35
import { onMount, onDestroy } from "svelte";
6+
import { writable } from "svelte/store";
47
import { initializeRouteService, pathName, navigateTo, component, componentParams } from "./lib/scripts/routeService.js";
5-
import PlayerBarComponent from "./lib/components/PlayerBarComponent.svelte";
8+
import PlayerBar from "./lib/components/PlayerBar.svelte";
69
import Modals from "./lib/components/Modals.svelte";
710
import { initializePlaylistService } from "./lib/scripts/playlistService.js";
811
import { initializePlaybackService } from "./lib/scripts/playbackService.js";
912
import { initializeMediaSessionService } from "./lib/scripts/mediasessionService.js";
13+
import { searchQuery } from "./lib/scripts/util.js";
14+
import SearchBar from "./lib/components/SearchBar.svelte";
1015
1116
$: $pathName;
1217
$: $component;
1318
1419
// @ts-ignore
15-
const version = __APP_VERSION__;
20+
export const version = __APP_VERSION__;
1621
1722
onMount(() => {
1823
async function initializeServices() {
@@ -34,7 +39,13 @@
3439
<div class="app-layout">
3540
<!-- Sticky Top Bar -->
3641
<header class="top-bar">
37-
<div class="container-fluid h-100">{$pathName} <span style="font-size: 0.8rem;">(v{version})</span></div>
42+
<div class="top-bar-title text-center">MyMusicBox<span style="font-size: 0.8rem;">(v{version})</span></div>
43+
<div class="row">
44+
<div class="col-12 mt-2">
45+
<!-- Search Bar -->
46+
<SearchBar />
47+
</div>
48+
</div>
3849
</header>
3950

4051
<!-- Scrollable Content -->
@@ -45,17 +56,20 @@
4556
</main>
4657

4758
<!-- Sticky Player Bar -->
48-
<PlayerBarComponent />
59+
<PlayerBar />
4960

5061
<!-- Sticky Bottom Bar -->
5162
<footer class="bottom-bar">
52-
<div class="row w-100 justify-content-center align-items-center">
53-
<div class="col-4 col-lg-4 col-md-4 col-sm-4">
54-
<button aria-label="empty storage" class="btn btn-dark w-100" on:click={refresh}><i class="fa-solid fa-arrows-rotate"></i></button>
63+
<div class="row w-100 justify-content-center">
64+
<div class="col-3 col-lg-2 col-md-2 col-sm-2">
65+
<button aria-label="empty storage" class="btn btn-dark w-100 text-center" on:click={refresh}><i class="fa-solid fa-arrows-rotate"></i></button>
5566
</div>
56-
<div class="col-4 col-lg-4 col-md-4 col-sm-4">
67+
<div class="col-3 col-lg-2 col-md-2 col-sm-2">
5768
<button aria-label="home" class="btn btn-dark w-100" on:click={() => navigateTo("/Home")}><i class="fa-solid fa-house"></i></button>
5869
</div>
70+
<div class="col-3 col-lg-2 col-md-2 col-sm-2">
71+
<button aria-label="home" class="btn btn-dark w-100" on:click={() => navigateTo("/Settings")}><i class="fa-solid fa-gear"></i></button>
72+
</div>
5973
</div>
6074
</footer>
6175
</div>
@@ -70,34 +84,25 @@
7084
flex-direction: column;
7185
height: 100vh;
7286
width: 100vw;
73-
background-color: #121212;
87+
background-color: #1e1e1e;
7488
}
7589
7690
.bottom-bar button {
77-
font-size: 1.2rem;
91+
font-size: 0.6rem;
7892
max-height: 3rem;
7993
border: none !important;
8094
}
81-
82-
.top-bar {
83-
flex: 0 0 auto;
84-
padding: 1rem;
85-
position: sticky;
86-
height: 3.5rem;
87-
top: 0;
88-
z-index: 10;
89-
text-align: center;
90-
border-bottom: 0.2rem solid #1CC558;
91-
border-bottom-left-radius: 1.5rem;
92-
border-bottom-right-radius: 1.5rem;
95+
.top-bar-title {
96+
font-size: 1.3rem;
97+
font-weight: bold;
98+
color: #b3b3b3;
9399
}
94100
95101
.scrollable-content {
96102
flex: 1 1 auto;
97103
overflow-y: auto;
98104
-webkit-overflow-scrolling: touch;
99105
padding: 1rem 1rem 3rem; /* 👈 Important: bottom padding to make space for bottom bar */
100-
background-color: #121212;
101106
}
102107
103108
.bottom-bar {
@@ -108,15 +113,13 @@
108113
z-index: 10;
109114
display: flex;
110115
justify-content: center;
111-
border-top: 0.2rem solid #1CC558;
112-
border-top-left-radius: 1.5rem;
113-
border-top-right-radius: 1.5rem;
114-
height: 3.8rem; /* Optional: define fixed height if needed for padding calc */
116+
border-top: 0.1rem solid #867878;
117+
background-color: unset;
118+
height: 3.2rem; /* Optional: define fixed height if needed for padding calc */
115119
}
116120
117121
.bottom-bar button {
118122
font-weight: bolder;
119-
border: 0.1rem solid #1CC558 !important;
120-
background-color: #343a40 !important;
123+
background-color: #2c2c2c !important;
121124
}
122125
</style>

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</div>
5252
</div>
5353
<div class="col-12 text-center">
54-
<img loading="lazy" class="img-fluid border border-1 rounded rounded-2 mt-1" src={getImageUrl($currentSong.thumbnail_path)} alt="404" />
54+
<img loading="lazy" class="img-fluid rounded rounded-2 mt-1" src={getImageUrl($currentSong.thumbnail_path)} alt="404" />
5555
</div>
5656
<div class="col-12">
5757
<input type="range" on:change={seekEvent} class="form-range mt-5" value={$playPercentage} min="0" max="100" step="0.3" />
@@ -88,7 +88,7 @@
8888
<div class="row mt-5">
8989
<div class="col-4">
9090
<button on:click={toggleSleepTimer} aria-label="sleep timer" type="button" class="btn w-100">
91-
<i class="fa-solid fa-stopwatch-20" style="{$isTimerEnabled ? "color: #1CC558;" : "color:white;"}">
91+
<i class="fa-solid fa-stopwatch-20" style="{$isTimerEnabled ? "color: #1CC558;" : "color:#ACACAC;"}">
9292
<span style="font-size: 0.8rem;">
9393
&nbsp;{$isTimerEnabled ? $timeLeft : ""}
9494
</span>
@@ -98,12 +98,12 @@
9898

9999
<div class="col-4">
100100
<button on:click={toggleShuffle} aria-label="shuffle playlist" type="button" class="btn w-100">
101-
<i class="fa-solid fa-shuffle" style="{$isShuffledEnabled ? "color: #1CC558;" : "color:white;"}"></i>
101+
<i class="fa-solid fa-shuffle" style="{$isShuffledEnabled ? "color: #1CC558;" : "color:#ACACAC;"}"></i>
102102
</button>
103103
</div>
104104
<div class="col-4">
105105
<button on:click={toggleLoop} aria-label="repeat song" type="button" class="btn w-100">
106-
<i class="fa-solid fa-repeat" style="{$isLoopingEnabled ? "color: #1CC558;" : "color:white;"}"></i>
106+
<i class="fa-solid fa-repeat" style="{$isLoopingEnabled ? "color: #1CC558;" : "color:#ACACAC;"}"></i>
107107
</button>
108108
</div>
109109
</div>
@@ -112,7 +112,7 @@
112112
</div>
113113
</div>
114114
<div class="modal-footer">
115-
<button type="button" class="btn btn-dark fw-bolder w-100 text-white border border-2" data-bs-dismiss="modal">Close</button>
115+
<button type="button" class="btn btn-dark w-100 text-white" data-bs-dismiss="modal">Close</button>
116116
</div>
117117
</div>
118118
</div>
@@ -123,7 +123,8 @@
123123
img {
124124
height: 10rem;
125125
object-fit: contain;
126-
border-color: #1CC558 !important;
126+
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
127+
border: 1px solid rgba(0, 0, 0, 0.35);
127128
}
128129
129130
p{
@@ -134,7 +135,8 @@
134135
}
135136
136137
i{
137-
color: #1CC558;
138+
font-size: 1.2rem;
139+
color: #ACACAC;
138140
font-weight: bolder;
139141
}
140142
@@ -143,21 +145,20 @@
143145
}
144146
145147
.modal-footer button {
146-
border-color: #1CC558 !important;
147-
background-color: #343a4000 !important;
148+
background-color: #2c2c2c !important;
148149
}
149150
150151
151152
input[type="range"]::-webkit-slider-thumb {
152-
background-color: #1CC558;
153+
background-color: #1DB954;
153154
}
154155
155156
input[type="range"]::-webkit-slider-runnable-track {
156157
background-color: #ACACAC;
157158
}
158159
159160
.modal-content {
160-
background-color: #121212 !important;
161+
background-color: #1e1e1e !important;
161162
color: white;
162163
}
163164
@@ -166,6 +167,6 @@ input[type="range"]::-webkit-slider-runnable-track {
166167
}
167168
168169
.form-range {
169-
color: #1CC558;
170+
color: #1DB954;
170171
}
171172
</style>

MyMusicClientSveltePwa/src/lib/components/PlayerBarComponent.svelte renamed to MyMusicClientSveltePwa/src/lib/components/PlayerBar.svelte

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// @ts-nocheck
33
import { get } from "svelte/store";
44
import { isPlaying, currentSong, playOrPauseSong, playPercentage, isLoading } from "../scripts/playbackService";
5+
import { getImageUrl } from "../scripts/api";
56
67
$: $currentSong;
78
$: $isPlaying;
@@ -15,19 +16,22 @@
1516
}
1617
</script>
1718

18-
<div class="container-fluid player-bar mb-2 rounded rounded-5">
19+
<div class="container-fluid player-bar mb-2">
1920
<div class="row space-between">
20-
<div class="col-9 col-md-10 col-lg-11 rounded-end rounded-end-0 rounded-5" style="background: linear-gradient(to right, gray {$playPercentage}%, #1CC558 {$playPercentage}%);">
21-
<button type="button" class="btn clickable-text rounded-end rounded-end-0 rounded-5" data-bs-toggle="{$currentSong ? "modal" : ""}" data-bs-target="{$currentSong ? "#songControlModal" : ""}">
21+
<div class="image-placeholder col-2 col-md-2 col-lg-2" style="--url: url({getImageUrl($currentSong.thumbnail_path)});">
22+
&nbsp;
23+
</div>
24+
<div class="col-8 col-md-8 col-lg-9" style="background: linear-gradient(to right, #1DB954 {$playPercentage}%, #2c2c2c {$playPercentage}%);">
25+
<button type="button" class="btn clickable-text" data-bs-toggle="{$currentSong ? "modal" : ""}" data-bs-target="{$currentSong ? "#songControlModal" : ""}">
2226
{#if $currentSong}
2327
{$currentSong.name}
2428
{:else}
2529
No song playing
2630
{/if}
2731
</button>
2832
</div>
29-
<div class="col-3 col-md-2 col-lg-1 border-start border-2">
30-
<button on:click={togglePlay} class="btn btn-dark play-button rounded-end rounded-end-5 w-100">
33+
<div class="col-2 col-md-2 col-lg-1">
34+
<button on:click={togglePlay} class="btn play-button w-100">
3135
{#if $currentSong && $isPlaying && !$isLoading}
3236
<i class="fa-solid fa-pause"></i>
3337
{:else if !$isLoading && !$isPlaying}
@@ -42,7 +46,7 @@
4246

4347
<style>
4448
.player-bar .clickable-text {
45-
font-size: 0.85rem;
49+
font-size: 0.65rem;
4650
max-height: 2.8rem;
4751
min-height: 2.8rem;
4852
width: 100%;
@@ -58,7 +62,14 @@
5862
}
5963
6064
.player-bar {
61-
background-color: rgb(0, 0, 0) !important;
65+
background-color: transparent;
66+
}
67+
68+
.image-placeholder{
69+
background-image: var(--url);
70+
background-size: cover;
71+
background-position: center;
72+
background-repeat: no-repeat;
6273
}
6374
6475
.play-button {
@@ -68,15 +79,18 @@
6879
height: 100%;
6980
display: block !important;
7081
margin: 0;
71-
color: #1CC558;
82+
color: #1DB954;
7283
font-weight: bolder;
84+
background-color: #2c2c2c;
85+
border: none !important;
86+
border-radius: 0 !important;
7387
}
7488
75-
.player-bar .col-9 {
89+
.player-bar .col-8 {
7690
padding: 0 !important;
7791
}
7892
79-
.player-bar .col-3 {
93+
.player-bar .col-2 {
8094
padding: 0 !important;
8195
}
8296
</style>

0 commit comments

Comments
 (0)