[READ-ONLY] Mirror of https://github.com/probablykasper/mr-tagger. Music file tagging app for Mac, Linux and Windows
audio
linux
macos
music
tagger
tauri
windows
Drag-and-drop replace cover
+44
-29
+4
-5
src/App.svelte
+4
-5
src/App.svelte
···
36
36
await runCmd<App>('open_files', { paths })
37
37
getApp()
38
38
}
39
+
let extensions = ['mp3', 'aiff', 'wav', 'm4a', 'mp4', 'm4p', 'm4b', 'm4r', 'm4v']
39
40
async function openDialog() {
40
41
let paths = await dialog.open({
41
-
filters: [{ name: 'Audio file', extensions: ['mp3', 'm4a', 'wav', 'aiff'] }],
42
+
filters: [{ name: 'Audio file', extensions }],
42
43
multiple: true,
43
44
directory: false,
44
45
})
···
107
108
</div>
108
109
{/each}
109
110
</div>
110
-
<FileDrop
111
-
fileExtensions={['mp3', 'aiff', 'wav', 'm4a', 'mp4', 'm4p', 'm4b', 'm4r', 'm4v']}
112
-
handleFiles={openFiles}
113
-
msg="" />
111
+
<FileDrop fileExtensions={extensions} handleFiles={openFiles} msg="" />
114
112
</div>
115
113
<div class="main">
116
114
{#if page}
···
163
161
align-items: center
164
162
justify-content: center
165
163
width: 6px
164
+
min-width: 6px
166
165
margin-left: 6px
167
166
margin-right: 4px
168
167
.x
+5
-1
src/components/FileDrop.svelte
+5
-1
src/components/FileDrop.svelte
···
7
7
export let msg = 'Drop files'
8
8
let droppable = false
9
9
export let fileExtensions: string[] = []
10
-
export let handleFiles: (files: string[]) => void
10
+
export let handleFiles: (files: string[]) => void = () => {}
11
+
export let handleOneFile: (file: string) => void = () => {}
11
12
12
13
function getValidPaths(paths: string[]) {
13
14
let validPaths = []
···
37
38
droppable = false
38
39
}
39
40
handleFiles(validPaths)
41
+
if (validPaths.length === 1) {
42
+
handleOneFile(validPaths[0])
43
+
}
40
44
})
41
45
return extractUnlistener(unlisten)
42
46
})
+35
-23
src/components/Item.svelte
+35
-23
src/components/Item.svelte
···
21
21
import { createEventDispatcher } from 'svelte'
22
22
import { runCmd } from '../scripts/helpers'
23
23
import { dialog } from '@tauri-apps/api'
24
+
import FileDrop from './FileDrop.svelte'
24
25
25
26
export let item: Page
26
27
···
53
54
dispatch('appRefresh')
54
55
}
55
56
}
57
+
async function setArtwork(path: string) {
58
+
if (image) {
59
+
await runCmd('replace_image', { index: image.index, path })
60
+
getImage(image.index)
61
+
dispatch('appRefresh')
62
+
}
63
+
}
64
+
let svgWidth = 0
56
65
</script>
57
66
58
67
<main>
59
68
<div class="left">
60
-
{#if image}
61
-
<div class="cover">
69
+
<div class="cover">
70
+
{#if image}
62
71
<img src={'data:' + image.mime_type + ';base64,' + image.data} alt="" />
63
-
</div>
64
-
{:else}
65
-
<div class="svg-cover">
66
-
<svg
67
-
xmlns="http://www.w3.org/2000/svg"
68
-
preserveAspectRatio="xMidYMin meet"
69
-
width="24"
70
-
height="24"
71
-
viewBox="0 0 24 24">
72
-
<path
73
-
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" />
74
-
</svg>
75
-
</div>
76
-
{/if}
72
+
{:else}
73
+
<div class="svg-cover" bind:clientWidth={svgWidth} style={'height:' + svgWidth + 'px'}>
74
+
<svg
75
+
xmlns="http://www.w3.org/2000/svg"
76
+
preserveAspectRatio="xMidYMin meet"
77
+
viewBox="0 0 24 24">
78
+
<path
79
+
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" />
80
+
</svg>
81
+
</div>
82
+
{/if}
83
+
<FileDrop fileExtensions={['jpeg', 'jpg', 'png', 'bmp']} handleOneFile={setArtwork} msg="" />
84
+
</div>
77
85
{#if image}
78
86
<div>
79
87
<button on:click={removeArtwork}>Remove</button>
···
108
116
font-size: 14px
109
117
.left
110
118
margin-right: 12px
111
-
min-width: 150px
112
-
width: 20%
119
+
min-width: 160px
120
+
width: calc(50% - 160px)
121
+
max-width: 250px
122
+
.right
123
+
width: 0px
124
+
flex-grow: 1
113
125
img
126
+
display: block
114
127
width: 100%
115
128
min-height: 80px
116
129
object-fit: contain
130
+
.cover
131
+
position: relative
117
132
.svg-cover
118
-
width: 100%
119
-
padding-bottom: 100%
120
-
svg
121
-
width: 100%
122
-
height: 100%
123
133
padding: 28%
124
134
box-sizing: border-box
125
135
background-color: #2b2c31
136
+
svg
137
+
box-sizing: border-box
126
138
fill: #45464a
127
139
</style>