Rockbox open source high quality audio player as a Music Player Daemon
mpris
rockbox
mpd
libadwaita
audio
rust
zig
deno
webui: handle empty music library
+106
-89
+1
webui/rockbox/deno.lock
+1
webui/rockbox/deno.lock
···
6496
6496
"npm:@graphql-codegen/typescript-operations@4.3.0",
6497
6497
"npm:@graphql-codegen/typescript-react-apollo@4.3.2",
6498
6498
"npm:@graphql-codegen/typescript@4.1.0",
6499
+
"npm:@mui/material@^6.1.4",
6499
6500
"npm:@storybook/addon-essentials@^8.3.4",
6500
6501
"npm:@storybook/addon-interactions@^8.3.4",
6501
6502
"npm:@storybook/addon-links@^8.3.4",
+20
-16
webui/rockbox/src/Components/Albums/Albums.tsx
+20
-16
webui/rockbox/src/Components/Albums/Albums.tsx
···
24
24
<ControlBar />
25
25
<Scrollable>
26
26
<Title>Albums</Title>
27
-
<FilterContainer>
28
-
<Filter placeholder="Search albums" onChange={() => {}} />
29
-
</FilterContainer>
30
-
<div style={{ marginBottom: 100 }}>
31
-
<Grid
32
-
gridColumns={[2, 4, 5]}
33
-
gridMargins={[20, 20, 20]}
34
-
gridGutters={[25, 25, 25]}
35
-
>
36
-
{albums.map((item) => (
37
-
<Cell key={item.id}>
38
-
<Album album={item} />
39
-
</Cell>
40
-
))}
41
-
</Grid>
42
-
</div>
27
+
{props.albums.length > 0 && (
28
+
<>
29
+
<FilterContainer>
30
+
<Filter placeholder="Search albums" onChange={() => {}} />
31
+
</FilterContainer>
32
+
<div style={{ marginBottom: 100 }}>
33
+
<Grid
34
+
gridColumns={[2, 4, 5]}
35
+
gridMargins={[20, 20, 20]}
36
+
gridGutters={[25, 25, 25]}
37
+
>
38
+
{albums.map((item) => (
39
+
<Cell key={item.id}>
40
+
<Album album={item} />
41
+
</Cell>
42
+
))}
43
+
</Grid>
44
+
</div>
45
+
</>
46
+
)}
43
47
</Scrollable>
44
48
</MainView>
45
49
</Container>
+36
-32
webui/rockbox/src/Components/Artists/Artists.tsx
+36
-32
webui/rockbox/src/Components/Artists/Artists.tsx
···
32
32
<ControlBar />
33
33
<Scrollable>
34
34
<Title>Artists</Title>
35
-
<FilterContainer>
36
-
<Filter placeholder="Search artists" onChange={() => {}} />
37
-
</FilterContainer>
38
-
<div style={{ marginBottom: 100 }}>
39
-
<Grid
40
-
gridColumns={[2, 3, 4]}
41
-
gridMargins={[18, 18, 18]}
42
-
gridGutters={[10, 10, 10]}
43
-
>
44
-
{artists.map((item) => (
45
-
<Cell key={item.id} align={"center"}>
46
-
<Link
47
-
to={`/artists/${item.id}`}
48
-
style={{ textDecoration: "none" }}
49
-
>
50
-
{item.cover && (
51
-
<ArtistCover
52
-
src={item.cover}
53
-
onClick={() => onClickArtist(item)}
54
-
/>
55
-
)}
56
-
{!item.cover && (
57
-
<NoArtistCover onClick={() => onClickArtist(item)}>
58
-
<Artist width={75} height={75} color="#a4a3a3" />
59
-
</NoArtistCover>
60
-
)}
61
-
<ArtistName>{item.name}</ArtistName>
62
-
</Link>
63
-
</Cell>
64
-
))}
65
-
</Grid>
66
-
</div>
35
+
{props.artists.length > 0 && (
36
+
<>
37
+
<FilterContainer>
38
+
<Filter placeholder="Search artists" onChange={() => {}} />
39
+
</FilterContainer>
40
+
<div style={{ marginBottom: 100 }}>
41
+
<Grid
42
+
gridColumns={[2, 3, 4]}
43
+
gridMargins={[18, 18, 18]}
44
+
gridGutters={[10, 10, 10]}
45
+
>
46
+
{artists.map((item) => (
47
+
<Cell key={item.id} align={"center"}>
48
+
<Link
49
+
to={`/artists/${item.id}`}
50
+
style={{ textDecoration: "none" }}
51
+
>
52
+
{item.cover && (
53
+
<ArtistCover
54
+
src={item.cover}
55
+
onClick={() => onClickArtist(item)}
56
+
/>
57
+
)}
58
+
{!item.cover && (
59
+
<NoArtistCover onClick={() => onClickArtist(item)}>
60
+
<Artist width={75} height={75} color="#a4a3a3" />
61
+
</NoArtistCover>
62
+
)}
63
+
<ArtistName>{item.name}</ArtistName>
64
+
</Link>
65
+
</Cell>
66
+
))}
67
+
</Grid>
68
+
</div>
69
+
</>
70
+
)}
67
71
</Scrollable>
68
72
</MainView>
69
73
</Container>
+33
-29
webui/rockbox/src/Components/Likes/Likes.tsx
+33
-29
webui/rockbox/src/Components/Likes/Likes.tsx
···
188
188
<ControlBar />
189
189
<ContentWrapper ref={containerRef}>
190
190
<Title>Likes</Title>
191
-
<HeaderWrapper>
192
-
<ButtonGroup>
193
-
<Button onClick={props.onPlayAll} kind="primary">
194
-
<Label>
195
-
<Play small color="#fff" />
196
-
<div style={{ marginLeft: 7 }}>Play</div>
197
-
</Label>
198
-
</Button>
199
-
<Separator />
200
-
<Button onClick={props.onShuffleAll} kind="secondary">
201
-
<Label>
202
-
<Shuffle color="#fe099c" />
203
-
<div style={{ marginLeft: 7 }}>Shuffle</div>
204
-
</Label>
205
-
</Button>
206
-
</ButtonGroup>
207
-
<FilterContainer>
208
-
<Filter placeholder="Search song" onChange={() => {}} />
209
-
</FilterContainer>
210
-
</HeaderWrapper>
211
-
<div style={{ marginBottom: 60 }}>
212
-
{props.tracks.length > 0 && (
213
-
<Table
214
-
columns={columns as any}
215
-
tracks={props.tracks}
216
-
containerRef={containerRef}
217
-
/>
218
-
)}
219
-
</div>
191
+
{props.tracks.length > 0 && (
192
+
<>
193
+
<HeaderWrapper>
194
+
<ButtonGroup>
195
+
<Button onClick={props.onPlayAll} kind="primary">
196
+
<Label>
197
+
<Play small color="#fff" />
198
+
<div style={{ marginLeft: 7 }}>Play</div>
199
+
</Label>
200
+
</Button>
201
+
<Separator />
202
+
<Button onClick={props.onShuffleAll} kind="secondary">
203
+
<Label>
204
+
<Shuffle color="#fe099c" />
205
+
<div style={{ marginLeft: 7 }}>Shuffle</div>
206
+
</Label>
207
+
</Button>
208
+
</ButtonGroup>
209
+
<FilterContainer>
210
+
<Filter placeholder="Search song" onChange={() => {}} />
211
+
</FilterContainer>
212
+
</HeaderWrapper>
213
+
<div style={{ marginBottom: 60 }}>
214
+
{props.tracks.length > 0 && (
215
+
<Table
216
+
columns={columns as any}
217
+
tracks={props.tracks}
218
+
containerRef={containerRef}
219
+
/>
220
+
)}
221
+
</div>
222
+
</>
223
+
)}
220
224
</ContentWrapper>
221
225
</MainView>
222
226
</Container>
+16
-12
webui/rockbox/src/Components/Tracks/Tracks.tsx
+16
-12
webui/rockbox/src/Components/Tracks/Tracks.tsx
···
180
180
<ControlBar />
181
181
<ContentWrapper ref={containerRef}>
182
182
<Title>Songs</Title>
183
-
<FilterContainer>
184
-
<Filter placeholder="Search song" onChange={() => {}} />
185
-
</FilterContainer>
186
-
<div style={{ marginBottom: 60 }}>
187
-
{props.tracks.length > 0 && (
188
-
<Table
189
-
columns={columns as any}
190
-
tracks={props.tracks}
191
-
containerRef={containerRef}
192
-
/>
193
-
)}
194
-
</div>
183
+
{props.tracks.length > 0 && (
184
+
<>
185
+
<FilterContainer>
186
+
<Filter placeholder="Search song" onChange={() => {}} />
187
+
</FilterContainer>
188
+
<div style={{ marginBottom: 60 }}>
189
+
{props.tracks.length > 0 && (
190
+
<Table
191
+
columns={columns as any}
192
+
tracks={props.tracks}
193
+
containerRef={containerRef}
194
+
/>
195
+
)}
196
+
</div>
197
+
</>
198
+
)}
195
199
</ContentWrapper>
196
200
</MainView>
197
201
</Container>