Skip to content

Commit 062bd41

Browse files
frederickobrienfrederickobrien
committed
Tidying
1 parent 51defe7 commit 062bd41

File tree

12 files changed

+215
-238
lines changed

12 files changed

+215
-238
lines changed

‎dashboard/src/lib/components/forms/AddTrackToReleaseForm.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<script lang="ts">
22
import { addTrackToRelease } from "$lib/remote-functions/music.remote";
3-
import type { Release, Track } from "../../../../../shared/types/core";
3+
import type { Track } from "../../../../../shared/types/core";
4+
import type { ReleaseHydrated } from "../../../../../shared/types/hydrated";
45
56
const {
67
releases,
78
tracks,
89
}: {
9-
releases: Release[];
10+
releases: ReleaseHydrated[];
1011
tracks: Track[];
1112
} = $props();
1213
</script>

‎dashboard/src/lib/components/forms/ArtistProfileForm.svelte‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { updateArtistDetails } from "$lib/remote-functions/artist.remote";
33
import { makeImageLink } from "$lib/utils";
44
5-
const {
5+
let {
66
artistId,
77
artistName,
88
currentArtistImageCID,
@@ -15,15 +15,12 @@
1515
artistBio?: string;
1616
artistWebsite?: string;
1717
} = $props();
18-
19-
console.log("artistId: ", artistId);
20-
console.log("artistName: ", artistName);
21-
console.log("currentArtistImageCID: ", currentArtistImageCID);
22-
console.log("artistBio: ", artistBio);
23-
console.log("artistWebsite: ", artistWebsite);
2418
</script>
2519

26-
<form {...updateArtistDetails} enctype="multipart/form-data">
20+
<form
21+
{...updateArtistDetails.enhance(({ submit }) => submit())}
22+
enctype="multipart/form-data"
23+
>
2724
<input {...updateArtistDetails.fields.artistId.as("hidden", artistId)} />
2825
<input {...updateArtistDetails.fields.artistName.as("hidden", artistName)} />
2926
{#if currentArtistImageCID}
@@ -58,7 +55,9 @@
5855
{#each updateArtistDetails.fields.artistWebsite.issues() as issue}
5956
<div class="issue">{issue.message}</div>
6057
{/each}
61-
<button type="submit" onclick={() => console.log("Updating profile...")}
62-
>Update profile</button
58+
<button
59+
type="submit"
60+
disabled={!!updateArtistDetails.pending}
61+
data-sveltekit-reload>Update profile</button
6362
>
6463
</form>

‎dashboard/src/lib/components/Card.svelte‎ renamed to ‎dashboard/src/lib/components/layout/Card.svelte‎

File renamed without changes.

‎dashboard/src/lib/components/views/music/MusicView.svelte‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<script lang="ts">
2+
import Card from "../../layout/Card.svelte";
3+
import AddReleaseForm from "../../forms/AddReleaseForm.svelte";
4+
import AddTrackToReleaseForm from "../../forms/AddTrackToReleaseForm.svelte";
5+
import UploadTrackForm from "../../forms/UploadTrackForm.svelte";
6+
import ReleaseInfo from "./ReleaseInfo.svelte";
7+
import type { Artist, Track } from "../../../../../../shared/types/core";
8+
import type { ReleaseHydrated } from "../../../../../../shared/types/hydrated";
9+
import TrackInfo from "./TrackInfo.svelte";
10+
11+
const {
12+
activeArtist,
13+
activeArtistSongs,
14+
activeArtistReleases,
15+
}: {
16+
activeArtist: Artist;
17+
activeArtistSongs: Track[];
18+
activeArtistReleases: ReleaseHydrated[];
19+
} = $props();
20+
</script>
21+
22+
<div class="dashboard">
23+
<div class="releases-list">
24+
<h2>
25+
Releases ({activeArtistReleases.length})
26+
</h2>
27+
{#each activeArtistReleases as release}
28+
<Card>
29+
<ReleaseInfo {release} />
30+
</Card>
31+
{/each}
32+
</div>
33+
<div class="songs-list">
34+
<h2>
35+
Songs ({activeArtistSongs.length})
36+
</h2>
37+
{#each activeArtistSongs as song}
38+
<Card>
39+
<TrackInfo {song} />
40+
</Card>
41+
{/each}
42+
</div>
43+
<div>
44+
<h2>Manage</h2>
45+
<div class="forms">
46+
<Card>
47+
<UploadTrackForm
48+
artistId={activeArtist.id}
49+
artistName={activeArtist.name}
50+
artistGroup={activeArtist.pinata_group_id}
51+
/>
52+
</Card>
53+
<Card>
54+
<AddReleaseForm artistId={activeArtist.id} />
55+
</Card>
56+
<Card>
57+
<AddTrackToReleaseForm
58+
releases={activeArtistReleases}
59+
tracks={activeArtistSongs}
60+
/>
61+
</Card>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<style>
67+
.dashboard {
68+
display: flex;
69+
flex-direction: row;
70+
justify-content: space-around;
71+
gap: 2rem;
72+
}
73+
.releases-list,
74+
.songs-list {
75+
min-width: 300px;
76+
max-width: 500px;
77+
}
78+
.releases-list {
79+
flex: 2;
80+
}
81+
.songs-list {
82+
flex: 1;
83+
}
84+
.forms {
85+
display: flex;
86+
flex-direction: column;
87+
gap: 1rem;
88+
flex: 1;
89+
}
90+
</style>

‎dashboard/src/lib/components/ReleaseInfo.svelte‎ renamed to ‎dashboard/src/lib/components/views/music/ReleaseInfo.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script lang="ts">
22
import { deleteRelease } from "$lib/remote-functions/music.remote";
33
import { makeImageLink } from "$lib/utils";
4-
import type { ReleaseHydrated } from "../../../../shared/types/hydrated";
5-
import { formatReleaseType } from "../../../../shared/utils";
6-
import BinIcon from "./icons/BinIcon.svelte";
7-
import ButtonWrapper from "./layout/ButtonWrapper.svelte";
4+
import type { ReleaseHydrated } from "../../../../../../shared/types/hydrated";
5+
import { formatReleaseType } from "../../../../../../shared/utils";
6+
import BinIcon from "../../icons/BinIcon.svelte";
7+
import ButtonWrapper from "../../layout/ButtonWrapper.svelte";
88
99
const {
1010
release,

‎dashboard/src/lib/components/views/music/TrackInfo.svelte‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script lang="ts">
2+
import { deleteTrack } from "$lib/remote-functions/music.remote";
3+
import type { Track } from "../../../../../../shared/types/core";
4+
import { prettifyDuration } from "../../../../../../shared/utils";
5+
import BinIcon from "../../icons/BinIcon.svelte";
6+
import ButtonWrapper from "../../layout/ButtonWrapper.svelte";
7+
8+
const { song }: { song: Track } = $props();
9+
</script>
10+
11+
<div class="song-wrapper">
12+
<div class="song-details-wrapper">
13+
<div>{song.title}</div>
14+
<div>
15+
<small>{prettifyDuration(song.duration_seconds)}</small>
16+
</div>
17+
</div>
18+
<ButtonWrapper onClickFunction={() => deleteTrack(song.id)}>
19+
<BinIcon />
20+
</ButtonWrapper>
21+
</div>
22+
23+
<style>
24+
.song-wrapper {
25+
display: flex;
26+
flex-direction: row;
27+
justify-content: space-between;
28+
gap: 0.5rem;
29+
}
30+
.song-details-wrapper {
31+
display: flex;
32+
justify-content: space-between;
33+
align-items: center;
34+
width: 100%;
35+
}
36+
small {
37+
font-weight: 500;
38+
font-size: 70%;
39+
}
40+
</style>

‎dashboard/src/lib/components/ProfileSummary.svelte‎ renamed to ‎dashboard/src/lib/components/views/profile/ProfileView.svelte‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<script lang="ts">
2-
import { enhance } from "$app/forms";
3-
import { makeImageLink } from "$lib/utils";
4-
import type { Artist } from "../../../../shared/types/core";
5-
import ArtistProfileForm from "./forms/ArtistProfileForm.svelte";
2+
import type { Artist } from "../../../../../../shared/types/core";
3+
import ArtistProfileForm from "../../forms/ArtistProfileForm.svelte";
64
75
let { activeArtist }: { activeArtist: Artist } = $props();
86
</script>

‎dashboard/src/lib/components/views/stats/StatsView.svelte‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script lang="ts">
2+
import type { StreamLog } from "../../../../../../shared/types/core";
3+
4+
const { streams }: { streams: StreamLog[] } = $props();
5+
6+
const calculateAveragePayout = (streams: StreamLog[]) => {
7+
const total = streams.reduce((acc, stream) => acc + stream.tokens_used, 0);
8+
return total / streams.length || 0;
9+
};
10+
11+
const calculateTotalEarnings = (
12+
streams: StreamLog[],
13+
outputFormat: "readable-string" | "raw"
14+
) => {
15+
const total = streams.reduce((acc, stream) => acc + stream.tokens_used, 0);
16+
return outputFormat === "readable-string"
17+
? `£${(total / 100).toFixed(2)}`
18+
: total / 100;
19+
};
20+
</script>
21+
22+
<div class="artist-stats">
23+
<h2>Stats</h2>
24+
<div><strong>Total streams:</strong> {streams.length}</div>
25+
<div>
26+
<strong>Average payout per stream:</strong>
27+
{calculateAveragePayout(streams).toFixed(2)}p
28+
</div>
29+
<div>
30+
<strong>Total earnings:</strong>
31+
{calculateTotalEarnings(streams, "readable-string")}
32+
</div>
33+
</div>

0 commit comments

Comments
 (0)