Skip to content

Commit 0513a41

Browse files
DutchJavaDevgithub-actions[bot]
DutchJavaDev
and
github-actions[bot]
authored
Mergefix (#58)
* lazy load images * fixes galore * chore: bump version * really * fix --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent a418f7d commit 0513a41

8 files changed

Lines changed: 114 additions & 42 deletions

File tree

‎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.7",
4+
"version": "0.1.8",
55
"type": "module",
66
"scripts": {
77
"dev": "vite --host",

‎MyMusicClientSveltePwa/src/App.svelte‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,12 @@
2626
2727
// This is a temporary function to handle refresh logic.
2828
// It can be replaced with a more specific implementation later.
29-
async function refresh() {}
29+
async function refresh() {
30+
window.location.reload();
31+
}
3032
</script>
3133

32-
<div class="app-layout bg-dark">
34+
<div class="app-layout">
3335
<!-- Sticky Top Bar -->
3436
<header class="top-bar">
3537
<div class="container-fluid h-100">{$pathName} <span style="font-size: 0.8rem;">(v{version})</span></div>
@@ -49,7 +51,7 @@
4951
<footer class="bottom-bar">
5052
<div class="row w-100">
5153
<div class="col-6">
52-
<button aria-label="empty storage" class="btn btn-dark w-100" on:click={refresh}><i class="fa-solid fa-trash"></i></button>
54+
<button aria-label="empty storage" class="btn btn-dark w-100" on:click={refresh}><i class="fa-solid fa-arrows-rotate"></i></button>
5355
</div>
5456
<div class="col-6">
5557
<button aria-label="home" class="btn btn-dark w-100" on:click={() => navigateTo("/Home")}><i class="fa-solid fa-house"></i></button>
@@ -68,6 +70,7 @@
6870
flex-direction: column;
6971
height: 100vh;
7072
width: 100vw;
73+
background-color: #121212;
7174
}
7275
7376
.bottom-bar button {
@@ -84,7 +87,7 @@
8487
top: 0;
8588
z-index: 10;
8689
text-align: center;
87-
border-bottom: 0.2rem solid #5bbd99;
90+
border-bottom: 0.2rem solid #1CC558;
8891
border-bottom-left-radius: 1.5rem;
8992
border-bottom-right-radius: 1.5rem;
9093
}
@@ -94,6 +97,7 @@
9497
overflow-y: auto;
9598
-webkit-overflow-scrolling: touch;
9699
padding: 1rem 1rem 3rem; /* 👈 Important: bottom padding to make space for bottom bar */
100+
background-color: #121212;
97101
}
98102
99103
.bottom-bar {
@@ -104,15 +108,15 @@
104108
z-index: 10;
105109
display: flex;
106110
justify-content: center;
107-
border-top: 0.2rem solid #5bbd99;
111+
border-top: 0.2rem solid #1CC558;
108112
border-top-left-radius: 1.5rem;
109113
border-top-right-radius: 1.5rem;
110114
height: 3.8rem; /* Optional: define fixed height if needed for padding calc */
111115
}
112116
113117
.bottom-bar button {
114118
font-weight: bolder;
115-
border: 0.1rem solid #5bbd99 !important;
119+
border: 0.1rem solid #1CC558 !important;
116120
background-color: #343a40 !important;
117121
}
118122
</style>

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

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
nextSong, previousSong,
77
isShuffledEnabled, isLoopingEnabled,
88
toggleShuffle, playOrPauseSong,
9-
toggleLoop } from "../scripts/playbackService";
9+
toggleLoop, isLoading } from "../scripts/playbackService";
1010
import { getImageUrl } from "../scripts/api";
1111
import { get } from "svelte/store";
1212
import { isTimerEnabled, timeLeft, toggleSleepTimer } from "../scripts/sleeptimerService";
@@ -18,6 +18,7 @@
1818
$: $isLoopingEnabled;
1919
$: $isTimerEnabled;
2020
$: $timeLeft;
21+
$: $isLoading
2122
2223
function togglePlay() {
2324
playOrPauseSong(get(currentSong).id);
@@ -40,7 +41,7 @@
4041
{#if $currentSong && $currentSong.id !== -999} <!-- Ensure currentSong is valid -->
4142
<div class="modal fade" id="songControlModal" tabindex="-1" aria-labelledby="songControlModalLabel" aria-hidden="false">
4243
<div class="modal-dialog modal-fullscreen-sm-down">
43-
<div class="modal-content bg-dark">
44+
<div class="modal-content">
4445
<div class="modal-body">
4546
<div>
4647
<div class="row">
@@ -50,31 +51,33 @@
5051
</div>
5152
</div>
5253
<div class="col-12 text-center">
53-
<img 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 border border-1 rounded rounded-2 mt-1" src={getImageUrl($currentSong.thumbnail_path)} alt="404" />
5455
</div>
5556
<div class="col-12">
5657
<input type="range" on:change={seekEvent} class="form-range mt-5" value={$playPercentage} min="0" max="100" step="1" />
5758
</div>
5859
<div class="col-12">
5960
<div class="row mt-4">
6061
<div class="col-4">
61-
<button aria-label="previous song" on:click={previousSong} class="btn btn-dark w-100">
62+
<button aria-label="previous song" on:click={previousSong} class="btn w-100">
6263
<i class="fa-solid fa-backward fa-2xl"></i>
6364
</button>
6465
</div>
6566

6667
<div class="col-4">
67-
<button on:click={togglePlay} class="btn btn-dark w-100">
68+
<button on:click={togglePlay} class="btn w-100">
6869
{#if $isPlaying}
6970
<i class="fa-solid fa-pause fa-2xl"></i>
71+
{:else if $isLoading}
72+
<i class="fa-solid fa-spinner fa-spin fa-2xl"></i>
7073
{:else}
7174
<i class="fa-solid fa-play fa-2xl"></i>
7275
{/if}
7376
</button>
7477
</div>
7578

7679
<div class="col-4">
77-
<button aria-label="next song" on:click={nextSong} class="btn btn-dark w-100">
80+
<button aria-label="next song" on:click={nextSong} class="btn w-100">
7881
<i class="fa-solid fa-forward fa-2xl"></i>
7982
</button>
8083
</div>
@@ -84,8 +87,8 @@
8487
<div class="col-12">
8588
<div class="row mt-5">
8689
<div class="col-4">
87-
<button on:click={toggleSleepTimer} aria-label="sleep timer" type="button" class="btn btn-dark w-100">
88-
<i class="fa-solid fa-stopwatch-20" style="{$isTimerEnabled ? "color: #5bbd99;" : "color:white;"}">
90+
<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;"}">
8992
<span style="font-size: 0.8rem;">
9093
&nbsp;{$isTimerEnabled ? $timeLeft : ""}
9194
</span>
@@ -94,13 +97,13 @@
9497
</div>
9598

9699
<div class="col-4">
97-
<button on:click={toggleShuffle} aria-label="shuffle playlist" type="button" class="btn btn-dark w-100">
98-
<i class="fa-solid fa-shuffle" style="{$isShuffledEnabled ? "color: #5bbd99;" : "color:white;"}"></i>
100+
<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>
99102
</button>
100103
</div>
101104
<div class="col-4">
102-
<button on:click={toggleLoop} aria-label="repeat song" type="button" class="btn btn-dark w-100">
103-
<i class="fa-solid fa-repeat" style="{$isLoopingEnabled ? "color: #5bbd99;" : "color:white;"}"></i>
105+
<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>
104107
</button>
105108
</div>
106109
</div>
@@ -120,7 +123,7 @@
120123
img {
121124
height: 10rem;
122125
object-fit: contain;
123-
border-color: #5bbd99 !important;
126+
border-color: #1CC558 !important;
124127
}
125128
126129
p{
@@ -131,7 +134,7 @@
131134
}
132135
133136
i{
134-
color: #5bbd99;
137+
color: #1CC558;
135138
font-weight: bolder;
136139
}
137140
@@ -140,11 +143,29 @@
140143
}
141144
142145
.modal-footer button {
143-
border-color: #5bbd99 !important;
144-
background-color: #343a40 !important;
146+
border-color: #1CC558 !important;
147+
background-color: #343a4000 !important;
145148
}
146149
150+
147151
input[type="range"]::-webkit-slider-thumb {
148-
background-color: #5bbd99;
152+
background-color: #1CC558;
153+
}
154+
155+
input[type="range"]::-webkit-slider-runnable-track {
156+
background-color: #ACACAC;
149157
}
158+
159+
.modal-content {
160+
background-color: #121212 !important;
161+
color: white;
162+
}
163+
164+
.modal-body {
165+
padding: 1rem;
166+
}
167+
168+
.form-range {
169+
color: #1CC558;
170+
}
150171
</style>

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script>
22
// @ts-nocheck
33
import { get } from "svelte/store";
4-
import { isPlaying, currentSong, playOrPauseSong, playPercentage } from "../scripts/playbackService";
4+
import { isPlaying, currentSong, playOrPauseSong, playPercentage, isLoading } from "../scripts/playbackService";
55
66
$: $currentSong;
77
$: $isPlaying;
88
$: $playPercentage;
9+
$: $isLoading;
910
1011
function togglePlay() {
1112
if(get(currentSong)){
@@ -16,7 +17,7 @@
1617

1718
<div class="container-fluid player-bar mb-2 rounded rounded-5">
1819
<div class="row space-between">
19-
<div class="col-9 rounded-end rounded-end-0 rounded-5 border border-1 border-white" style="background: linear-gradient(to right, gray {$playPercentage}%, #5bbd99 {$playPercentage}%);">
20+
<div class="col-9 rounded-end rounded-end-0 rounded-5 border border-1 border-white" style="background: linear-gradient(to right, gray {$playPercentage}%, #1CC558 {$playPercentage}%);">
2021
<button type="button" class="btn clickable-text rounded-end rounded-end-0 rounded-5" data-bs-toggle="{$currentSong ? "modal" : ""}" data-bs-target="{$currentSong ? "#songControlModal" : ""}">
2122
{#if $currentSong}
2223
{$currentSong.name}
@@ -27,10 +28,12 @@
2728
</div>
2829
<div class="col-3 border-start border-2">
2930
<button on:click={togglePlay} class="btn btn-dark border border-1 border-white play-button rounded-end rounded-end-5 w-100">
30-
{#if $currentSong && $isPlaying}
31+
{#if $currentSong && $isPlaying && !$isLoading}
3132
<i class="fa-solid fa-pause"></i>
32-
{:else}
33+
{:else if !$isLoading && !$isPlaying}
3334
<i class="fa-solid fa-play"></i>
35+
{:else if $isLoading}
36+
<i class="fa-solid fa-spinner fa-spin"></i>
3437
{/if}
3538
</button>
3639
</div>
@@ -55,7 +58,7 @@
5558
}
5659
5760
.player-bar {
58-
background-color: gray !important;
61+
background-color: rgb(0, 0, 0) !important;
5962
}
6063
6164
.play-button {
@@ -65,7 +68,7 @@
6568
height: 100%;
6669
display: block !important;
6770
margin: 0;
68-
color: #5bbd99;
71+
color: #1CC558;
6972
font-weight: bolder;
7073
}
7174

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// @ts-nocheck
33
44
import { getContext, onMount, setContext } from "svelte";
5-
import { currentSong, isPlaying } from "../scripts/playbackService";
5+
import { currentSong, isPlaying, isLoading } from "../scripts/playbackService";
66
77
export let song;
88
@@ -14,13 +14,14 @@
1414
1515
$: $isPlaying;
1616
$: $currentSong;
17+
$: $isLoading;
1718
</script>
1819

1920
{#if song}
2021
<div class="row mb-3 song-component">
21-
<div class="col-10 bg-dark border border-1 rounded rounded-2" style={$currentSong && $currentSong.id === song.id ? "border-color:#5bbd99 !important;" : ""}>
22+
<div class="col-10 border border-1 rounded rounded-2" style={$currentSong && $currentSong.id === song.id ? "border-color:#1CC558 !important;" : ""}>
2223
<div class="text-lg-start">
23-
<p style={$currentSong && $currentSong.id === song.id ? "color:#5bbd99;" : ""}>{song.name}</p>
24+
<p style={$currentSong && $currentSong.id === song.id ? "color:#1CC558;" : ""}>{song.name}</p>
2425
</div>
2526
</div>
2627
<div class="col-2">
@@ -30,6 +31,8 @@
3031
>
3132
{#if $currentSong && $currentSong.id === song.id && $isPlaying}
3233
<i class="fa-solid fa-pause"></i>
34+
{:else if $isLoading && $currentSong.id === song.id}
35+
<i class="fa-solid fa-spinner fa-spin"></i>
3336
{:else}
3437
<i class="fa-solid fa-play"></i>
3538
{/if}
@@ -63,7 +66,7 @@
6366
width: 3rem;
6467
height: 3rem;
6568
display: flex;
66-
color: #5bbd99;
69+
color: #1CC558;
6770
align-items: center;
6871
justify-content: center;
6972
}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
import { playOrPauseSong, setPlaylists, updateCurrentPlaylist } from "../scripts/playbackService";
77
import SongComponent from "../components/SongComponent.svelte";
88
9-
const updateIntervalTimeOut = 1000; // Update every second
9+
const updateIntervalTimeOut = 1500; // Update every second
1010
let intervalId
11+
let updating = false
1112
1213
export let playlistId = -1;
1314
@@ -18,8 +19,12 @@
1819
setContext("playOrPauseSong", playOrPause);
1920
2021
intervalId = setInterval(() => {
22+
23+
if (updating) return; // Prevent multiple updates at the same time
24+
updating = true;
2125
songs.set(getCachedPlaylistSongs(playlistId));
2226
updateCurrentPlaylist(playlistId);
27+
updating = false;
2328
}, updateIntervalTimeOut);
2429
});
2530

0 commit comments

Comments
 (0)