Skip to content

Commit 6fa4b38

Browse files
DutchJavaDevDutchJavaDev
authored
Feature206 partial content nginx (#67)
* test in the field * test * setup for nginx * set extension for source
1 parent 4ab423c commit 6fa4b38

File tree

14 files changed

+147
-45
lines changed

14 files changed

+147
-45
lines changed

‎MyMusicBoxApi/configuration/util.go‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ var Config models.Config
1111
func LoadConfiguration() {
1212
flag.StringVar(&Config.DevPort, "port", "", "-port=8081")
1313
flag.BoolVar(&Config.UseDevUrl, "devurl", false, "-devurl")
14+
flag.BoolVar(&Config.UsePlayUrl, "usePlayUrl", false, "-usePlayUrl")
15+
flag.BoolVar(&Config.UseImageUrl, "useImageUrl", false, "-useImageUrl")
1416
flag.StringVar(&Config.SourceFolder, "sourceFolder", "music", "-sourceFolder=/path to source folder/")
1517
flag.StringVar(&Config.OutputExtension, "outputExtension", "opus", "-outputExtension=opus,mp3,mp4 etc")
1618
flag.Parse()

‎MyMusicBoxApi/http/v1.go‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,12 @@ func V1Endpoints(apiv1Group *gin.RouterGroup) {
2727

2828
apiv1Group.GET("/playlist", playlistHandler.FetchPlaylists)
2929
apiv1Group.GET("/playlist/:playlistId", playlistSongHandler.FetchPlaylistSongs)
30-
apiv1Group.GET("/play/:sourceId", Play)
30+
31+
// If nginx is not configured to handle http 206
32+
if configuration.Config.UsePlayUrl {
33+
apiv1Group.GET("/play/:sourceId", Play)
34+
}
35+
3136
apiv1Group.GET("/tasklogs", taskLogHandler.FetchParentTaskLogs)
3237
apiv1Group.GET("/tasklogs/:parentId", taskLogHandler.FetchChildTaskLogs)
3338

@@ -38,6 +43,9 @@ func V1Endpoints(apiv1Group *gin.RouterGroup) {
3843
apiv1Group.DELETE("/playlist/:playlistId", playlistHandler.DeletePlaylist)
3944
apiv1Group.DELETE("playlistsong/:playlistId/:songId", playlistSongHandler.DeletePlaylistSong)
4045

41-
// Serving static files
42-
apiv1Group.Static("/images", filepath.Join(configuration.Config.SourceFolder, "images"))
46+
// If nginx is not configured to handle it
47+
if configuration.Config.UseImageUrl {
48+
// Serving static files
49+
apiv1Group.Static("/images", filepath.Join(configuration.Config.SourceFolder, "images"))
50+
}
4351
}

‎MyMusicBoxApi/models/configuration.go‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ package models
22

33
type Config struct {
44
UseDevUrl bool
5+
UsePlayUrl bool
6+
UseImageUrl bool
57
DevPort string
68
SourceFolder string
79
OutputExtension string

‎MyMusicBoxApi/nginx_snippets‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Serve only .opus files under /play
2+
location ~ ^/play/(.*.opus)$ {
3+
alias [path_to_file_location]/$1; # $1 is filename from url, must end with .opus
4+
5+
# Tell browsers and CDNs to cache for 30 days
6+
expires 30d;
7+
add_header Cache-Control "public, max-age=2592000, immutable";
8+
9+
add_header Accept-Ranges bytes;
10+
}
11+
12+
# Serve only .opus files under /play
13+
location ~ ^/image/(.*.jpg)$ {
14+
alias [path_to_file_location]/$1; # $1 is filename from url, must end with .jgp
15+
16+
# Tell browsers and CDNs to cache for 30 days
17+
expires 30d;
18+
add_header Cache-Control "public, max-age=2592000, immutable";
19+
}

‎MyMusicClientSveltePwa/src/App.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@
4949

5050
<!-- Sticky Bottom Bar -->
5151
<footer class="bottom-bar">
52-
<div class="row w-100">
53-
<div class="col-6">
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">
5454
<button aria-label="empty storage" class="btn btn-dark w-100" on:click={refresh}><i class="fa-solid fa-arrows-rotate"></i></button>
5555
</div>
56-
<div class="col-6">
56+
<div class="col-4 col-lg-4 col-md-4 col-sm-4">
5757
<button aria-label="home" class="btn btn-dark w-100" on:click={() => navigateTo("/Home")}><i class="fa-solid fa-house"></i></button>
5858
</div>
5959
</div>

‎MyMusicClientSveltePwa/src/app.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,7 @@ body {
2121
font-size: 1.1rem;
2222
}
2323
}
24+
25+
.cursor {
26+
cursor: default;
27+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
<img loading="lazy" class="img-fluid border border-1 rounded rounded-2 mt-1" src={getImageUrl($currentSong.thumbnail_path)} alt="404" />
5555
</div>
5656
<div class="col-12">
57-
<input type="range" on:change={seekEvent} class="form-range mt-5" value={$playPercentage} min="0" max="100" step="1" />
57+
<input type="range" on:change={seekEvent} class="form-range mt-5" value={$playPercentage} min="0" max="100" step="0.3" />
5858
</div>
5959
<div class="col-12">
6060
<div class="row mt-4">

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<div class="container-fluid player-bar mb-2 rounded rounded-5">
1919
<div class="row space-between">
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}%);">
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}%);">
2121
<button type="button" class="btn clickable-text rounded-end rounded-end-0 rounded-5" data-bs-toggle="{$currentSong ? "modal" : ""}" data-bs-target="{$currentSong ? "#songControlModal" : ""}">
2222
{#if $currentSong}
2323
{$currentSong.name}
@@ -26,8 +26,8 @@
2626
{/if}
2727
</button>
2828
</div>
29-
<div class="col-3 border-start border-2">
30-
<button on:click={togglePlay} class="btn btn-dark border border-1 border-white play-button rounded-end rounded-end-5 w-100">
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">
3131
{#if $currentSong && $isPlaying && !$isLoading}
3232
<i class="fa-solid fa-pause"></i>
3333
{:else if !$isLoading && !$isPlaying}

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

Lines changed: 60 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,89 @@
11
<script>
2-
// @ts-nocheck
2+
// @ts-nocheck
33
import { getImageUrl } from "../scripts/api";
44
import { navigateTo } from "../scripts/routeService.js";
5+
import { playOrPauseSong, setPlaylists } from "../scripts/playbackService";
56
// @ts-nocheck
67
export let playlist = null;
78
8-
async function viewPlaylist() {
9-
navigateTo(`/Playlist`, { playlistId : playlist.id });
9+
function viewPlaylist() {
10+
navigateTo(`/Playlist`, { playlistId: playlist.id });
11+
}
12+
13+
function playPlaylist() {
14+
setPlaylists(playlist.id);
15+
playOrPauseSong(null);
1016
}
1117
</script>
1218

1319
<div class="playlist-component">
1420
{#if playlist}
15-
<button on:click={viewPlaylist} class="playlist-item btn w-100 border border-3" style="--url: url({getImageUrl(playlist.thumbnailPath)}); {true ? "border-color: #5bbd99 !important;" : ""}">
16-
<h3>{playlist.name}</h3>
17-
<p>{playlist.description}</p>
18-
</button>
21+
<div class="row me-1">
22+
<button aria-label="play button" on:click={playPlaylist} class="col-2 play-btn">
23+
<i class="fa-solid fa-play"></i>
24+
</button>
25+
<button aria-label="playlist button" on:click={viewPlaylist} class="playlist-item btn border border-3 col-10" style="--url: url({getImageUrl(playlist.thumbnailPath)});"> </button>
26+
<div class="text-start col-12 cursor">
27+
<p>#{playlist.name}<br />{playlist.description}</p>
28+
</div>
29+
</div>
1930
{:else}
2031
<p>No playlist available.</p>
2132
{/if}
2233
</div>
2334

2435
<style>
36+
p {
37+
font-size: 0.7rem !important;
38+
}
39+
2540
.playlist-item {
2641
background-image: var(--url);
2742
background-size: cover;
2843
background-position: center;
44+
border-color: transparent !important;
2945
font-weight: bolder;
3046
color: white;
31-
height: 10rem;
47+
min-height: 5rem;
48+
transform: scale(1);
49+
transition: transform 0.5s;
50+
}
51+
52+
.playlist-item:hover {
53+
transform: scale(1.05);
54+
transition: transform 0.5s;
55+
}
56+
57+
.play-btn {
58+
font-size: 1.8rem;
59+
background-color: rgba(131, 131, 131, 0.068) !important;
60+
border: none !important;
61+
color: #1cc558 !important;
62+
border-top-left-radius: 10px;
63+
border-bottom-left-radius: 10px;
64+
border-left: #1cc558 3px solid !important;
65+
transform: scale(1);
66+
transition: transform 0.5s;
67+
}
68+
69+
.play-btn:hover {
70+
transform: scale(1.05);
71+
transition: transform 0.5s;
3272
}
3373
3474
.playlist-component {
3575
margin-top: 10px;
3676
}
77+
78+
.row{
79+
border: #1cc55711 2px solid;
80+
border-radius: 10px;
81+
}
82+
83+
.row:hover{
84+
transition: background-color 0.4s;
85+
background-color: rgba(128, 128, 128, 0.096);
86+
border-radius: 15px;
87+
border-bottom: #1cc557 3px solid;
88+
}
3789
</style>

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

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
// @ts-nocheck
2+
// @ts-nocheck
33
44
import { getContext, onMount, setContext } from "svelte";
55
import { currentSong, isPlaying, isLoading } from "../scripts/playbackService";
@@ -19,25 +19,22 @@
1919

2020
{#if song}
2121
<div class="row mb-3 song-component">
22-
<div class="col-10 border border-1 rounded rounded-2" style={$currentSong && $currentSong.id === song.id ? "border-color:#1CC558 !important;" : ""}>
23-
<div class="text-lg-start">
24-
<p style={$currentSong && $currentSong.id === song.id ? "color:#1CC558;" : ""}>{song.name}</p>
25-
</div>
26-
</div>
2722
<div class="col-2">
28-
<button
29-
on:click={() => playOrPauseSong(song.id)}
30-
class="btn btn-dark play-button"
31-
>
23+
<button on:click={() => playOrPauseSong(song.id)} class="btn btn-dark w-100 play-button">
3224
{#if $currentSong && $currentSong.id === song.id && $isPlaying}
3325
<i class="fa-solid fa-pause"></i>
3426
{:else if $isLoading && $currentSong.id === song.id}
35-
<i class="fa-solid fa-spinner fa-spin"></i>
27+
<i class="fa-solid fa-spinner fa-spin"></i>
3628
{:else}
3729
<i class="fa-solid fa-play"></i>
3830
{/if}
3931
</button>
4032
</div>
33+
<div class="col-10 border border-1 rounded rounded-2 cursor" style={$currentSong && $currentSong.id === song.id ? "border-color:#1CC558 !important;" : "border-color: gray !important;"}>
34+
<div class="text-lg-start">
35+
<p style={$currentSong && $currentSong.id === song.id ? "color:#1CC558;" : ""}>{song.name}</p>
36+
</div>
37+
</div>
4138
</div>
4239
{:else}
4340
<p>No song available.</p>
@@ -46,7 +43,7 @@
4643
<style>
4744
.song-component {
4845
height: 2.5rem;
49-
color: white;
46+
color: #B3B3B3;
5047
font-weight: bolder;
5148
}
5249
@@ -66,8 +63,16 @@
6663
width: 3rem;
6764
height: 3rem;
6865
display: flex;
69-
color: #1CC558;
66+
color: #1cc558;
67+
background-color: transparent !important;
68+
border: none !important;
7069
align-items: center;
7170
justify-content: center;
71+
border-left: #1CC558 2px solid !important;
72+
}
73+
74+
.play-button:hover {
75+
background-color: rgba(28, 197, 88, 0.1) !important;
76+
transition: background-color 0.3s ease;
7277
}
7378
</style>

0 commit comments

Comments
 (0)