[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
Use message popup for cover errors
+26
-17
+26
-17
src/components/Cover.svelte
+26
-17
src/components/Cover.svelte
···
1
1
<script lang="ts">
2
2
import { paths } from '@/lib/data'
3
3
import type { Track } from '../../ferrum-addon'
4
-
import { join_paths } from '@/lib/window'
4
+
import { ipc_renderer, join_paths } from '@/lib/window'
5
5
6
6
export let track: Track
7
7
$: src =
···
29
29
/>
30
30
</svg>
31
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
-
>
32
+
{@const error_msg = error.message}
33
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
34
+
<!-- svelte-ignore a11y-no-static-element-interactions -->
43
35
<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"
36
+
class="h-full cursor-pointer"
37
+
title={error.message}
38
+
on:mousedown|stopPropagation
39
+
on:click={() => {
40
+
ipc_renderer.invoke('showMessageBox', false, {
41
+
type: 'error',
42
+
message: 'Failed to load cover',
43
+
detail: error_msg,
44
+
})
45
+
}}
45
46
>
46
-
{error.message}
47
+
<svg
48
+
class="cover error"
49
+
xmlns="http://www.w3.org/2000/svg"
50
+
height="24px"
51
+
width="24px"
52
+
viewBox="0 0 24 24"
53
+
fill="#e8eaed"
54
+
><path d="M0 0h24v24H0z" fill="none" /><path
55
+
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"
56
+
/></svg
57
+
>
47
58
</div>
48
59
{/if}
49
60
{:else}
···
96
107
fill: #ef4444
97
108
background: transparent
98
109
padding: 3px
99
-
:global(.image:hover) .error-msg
100
-
scale: 1
101
-
opacity: 100
110
+
display: inline-block
102
111
</style>