fix song provider image url
Seto Elkahfi committed
Aug 3, 2024 at 01:00 UTC
855e1baaea20d3f3b9214a32bf485d5e7ba2b772
5 files changed
+48
-20
frontend/splitfire-desktop/app/_src/models/SongResponse.tsx
+1
-1
@@ -14,7 +14,7 @@ export interface SongProvider {
14
name: string,
15
provider_id: string,
16
provider_type: ProviderType,
17
- image_url: string,
17
+ image_url: string | null,
18
audio_file: AudioFile | null
19
}
20
frontend/splitfire-desktop/app/_ui/skeleton-card.tsx
+15
-9
@@ -34,10 +34,23 @@ export const SongProviderCard = ({
34
path: SongProviderPath;
35
}) => {
36
const router = useRouter();
37
- let queryString = `songProviderId=${songProvider.id}`
37
+ let queryString = `songProviderId=${songProvider.id}`;
38
if (path === SongProviderPath.PLAY && songProvider.audio_file) {
39
queryString = `audioFileId=${songProvider.audio_file.id}`;
40
}
41
+ const thumbnailView = songProvider.image_url ? (
42
+ <Image
43
+ src={songProvider.image_url}
44
+ alt={songProvider.name}
45
+ width="0"
46
+ height="0"
47
+ sizes="100vw"
48
+ className="w-full h-auto aspect-video"
49
+ />
50
+ ) : (
51
+ <div className="h-14 rounded-lg bg-gray-700" />
52
+ );
53
+
54
return (
55
<button
56
className={clsx("rounded-2xl bg-gray-900/80 p-4", {
@@ -47,14 +60,7 @@ export const SongProviderCard = ({
60
onClick={() => router.push(`/${path}?${queryString}`)}
61
>
62
<div className="space-y-3">
50
- <Image
51
- src={songProvider.image_url}
52
- alt={songProvider.name}
53
- width="0"
54
- height="0"
55
- sizes="100vw"
56
- className="w-full h-auto aspect-video"
57
- />
63
+ {thumbnailView}
64
<h3 className="w-11/12">{songProvider.name}</h3>
65
</div>
66
</button>
frontend/splitfire-desktop/app/split/_components/song-votes-image.tsx
new
+29
@@ -0,0 +1,29 @@
1
+
2
+import Image from "next/image";
3
+
4
+export default function SongVotesImage({
5
+ imagaeUrl: songProviderImageUrl,
6
+ name,
7
+}: {
8
+ imagaeUrl: string | null;
9
+ name: string;
10
+}) {
11
+ if (!songProviderImageUrl) {
12
+ return <div>
13
+ {name}
14
+ </div>;
15
+ }
16
+
17
+ return (
18
+ <>
19
+ <Image
20
+ src={songProviderImageUrl}
21
+ width={0}
22
+ height={0}
23
+ alt={name}
24
+ sizes="100vw"
25
+ className="w-full h-auto aspect-video"
26
+ />
27
+ </>
28
+ );
29
+}
\ No newline at end of file
frontend/splitfire-desktop/app/split/_components/song-votes.tsx
+2
-9
@@ -3,7 +3,7 @@
3
import { SongProvider } from "@/app/_src/models/SongResponse";
4
import { SongProviderVote } from "@/app/_src/models/SongVotesDetailResponse";
5
import UpDownVotesView from "./votes-view";
6
-import Image from "next/image";
6
+import SongVotesImage from "./song-votes-image";
7
8
export default function SongVotes({
9
songProvider,
@@ -20,14 +20,7 @@ export default function SongVotes({
20
songProviderId={songProvider.id}
21
audioFile={songProvider.audio_file}
22
/>
23
- <Image
24
- src={songProvider.image_url}
25
- width={0}
26
- height={0}
27
- alt={songProvider.name}
28
- sizes="100vw"
29
- className="w-full h-auto aspect-video"
30
- />
23
+ <SongVotesImage imagaeUrl={songProvider.image_url} name={songProvider.name} />
24
</>
25
);
26
}
frontend/splitfire-desktop/src-tauri/src/models/content.rs
+1
-1
@@ -24,7 +24,7 @@ pub struct SongProvider {
24
pub name: String,
25
pub provider_id: String,
26
pub provider_type: ProviderType,
27
- pub image_url: String,
27
+ pub image_url: Option<String>,
28
pub audio_file: Option<AudioFile>
29
}
30