[READ-ONLY] Mirror of https://github.com/probablykasper/ferrum. Music library app for Mac, Linux and Windows
ferrum.kasper.space
electron
linux
macos
music
music-library
music-player
napi
windows
Show cover loading error messages
+66
-15
+58
-13
src/components/Cover.svelte
+58
-13
src/components/Cover.svelte
···
12
12
'&date_modified=' +
13
13
encodeURIComponent(track.dateModified)
14
14
15
-
let failed_src: string | null = null
16
-
let loaded = false
15
+
let error: { src: string; message: 404 | string | null } | false | null = null
17
16
</script>
18
17
19
-
{#if src === failed_src && failed_src !== null}
20
-
<svg class="cover" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
21
-
<path
22
-
d="M23 0l-15.996 3.585v13.04c-2.979-.589-6.004 1.671-6.004 4.154 0 2.137 1.671 3.221 3.485 3.221 2.155 0 4.512-1.528 4.515-4.638v-10.9l12-2.459v8.624c-2.975-.587-6 1.664-6 4.141 0 2.143 1.715 3.232 3.521 3.232 2.14 0 4.476-1.526 4.479-4.636v-17.364z"
23
-
/>
24
-
</svg>
18
+
{#if error}
19
+
{#if error.message === null || error.message === 404}
20
+
<svg
21
+
class="cover"
22
+
xmlns="http://www.w3.org/2000/svg"
23
+
width="24"
24
+
height="24"
25
+
viewBox="0 0 24 24"
26
+
>
27
+
<path
28
+
d="M23 0l-15.996 3.585v13.04c-2.979-.589-6.004 1.671-6.004 4.154 0 2.137 1.671 3.221 3.485 3.221 2.155 0 4.512-1.528 4.515-4.638v-10.9l12-2.459v8.624c-2.975-.587-6 1.664-6 4.141 0 2.143 1.715 3.232 3.521 3.232 2.14 0 4.476-1.526 4.479-4.636v-17.364z"
29
+
/>
30
+
</svg>
31
+
{:else}
32
+
<svg
33
+
class="cover error"
34
+
xmlns="http://www.w3.org/2000/svg"
35
+
height="24px"
36
+
width="24px"
37
+
viewBox="0 0 24 24"
38
+
fill="#e8eaed"
39
+
><path d="M0 0h24v24H0z" fill="none" /><path
40
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
41
+
/></svg
42
+
>
43
+
<div
44
+
class="error-msg duratin-100 pointer-events-none absolute fixed top-1/2 left-1/2 z-10 -translate-1/2 scale-95 rounded-md border border-white bg-black py-2 px-2.5 px-4 opacity-0 transition ease-out"
45
+
>
46
+
{error.message}
47
+
</div>
48
+
{/if}
25
49
{:else}
26
50
<img
27
51
class="cover"
28
-
class:invisible={!loaded}
52
+
class:invisible={error === null}
29
53
{src}
30
54
alt=""
31
55
on:load={() => {
32
-
loaded = true
33
-
failed_src = null
56
+
error = false
34
57
}}
35
-
on:error={() => {
36
-
failed_src = src
58
+
on:error={async () => {
59
+
// Yes this is dumb, but there's no way to get an error code from <img src="" />
60
+
error = { message: null, src }
61
+
try {
62
+
const response = await fetch(src)
63
+
if (src !== error.src) {
64
+
return
65
+
}
66
+
if (response.status === 404) {
67
+
error.message = 404
68
+
} else {
69
+
error.message = await response.text()
70
+
console.log(`Failed to load cover (${response.status}): ${error.message}`)
71
+
}
72
+
} catch (_) {
73
+
error.message = 'network'
74
+
}
37
75
}}
38
76
/>
39
77
{/if}
···
54
92
background: var(--empty-cover-bg-color)
55
93
fill: var(--empty-cover-color)
56
94
border-radius: 2px
95
+
.error
96
+
fill: #ef4444
97
+
background: transparent
98
+
padding: 3px
99
+
:global(.image:hover) .error-msg
100
+
scale: 1
101
+
opacity: 100
57
102
</style>
-1
src/components/Queue.svelte
-1
src/components/Queue.svelte
+8
-1
src/electron/main.ts
+8
-1
src/electron/main.ts
···
50
50
app.quit()
51
51
})
52
52
53
+
protocol.registerSchemesAsPrivileged([
54
+
{
55
+
scheme: 'trackimg',
56
+
privileges: { supportFetchAPI: true },
57
+
},
58
+
])
59
+
53
60
app.whenReady().then(async () => {
54
61
let main_window: BrowserWindow | null = new BrowserWindow({
55
62
width: 1305,
···
92
99
}
93
100
})
94
101
.catch((error) => {
95
-
resolve(new Response(null, { status: 500 }))
102
+
resolve(new Response(error, { status: 500 }))
96
103
console.log(`Could not read cover "${track_path}":`, error)
97
104
})
98
105
})