Rockbox open source high quality audio player as a Music Player Daemon
mpris
rockbox
mpd
libadwaita
audio
rust
zig
deno
Preload device list and current device
Move device initialization from DeviceListWithData into
ControlBarWithData
to preload devices and the current device on mount so the device popup
opens instantly. Remove the duplicated effect and unused setter in
DeviceListWithData.
+30
-23
+28
webui/rockbox/src/Components/ControlBar/ControlBarWithData.tsx
+28
webui/rockbox/src/Components/ControlBar/ControlBarWithData.tsx
···
4
4
import {
5
5
useCurrentlyPlayingSongSubscription,
6
6
useGetCurrentTrackQuery,
7
+
useGetDeviceQuery,
8
+
useGetDevicesQuery,
7
9
useGetGlobalSettingsQuery,
8
10
useGetLikedAlbumsQuery,
9
11
useGetLikedTracksQuery,
···
26
28
import { settingsState } from "../Settings/SettingsState";
27
29
import ControlBar from "./ControlBar";
28
30
import { controlBarState } from "./ControlBarState";
31
+
import { deviceState } from "./DeviceList/DeviceState";
29
32
30
33
const ControlBarWithData: FC = () => {
31
34
const [{ nowPlaying, locked, resumeIndex }, setControlBarState] =
32
35
useRecoilState(controlBarState);
36
+
const [, setDeviceState] = useRecoilState(deviceState);
37
+
38
+
// Preload device list and current device on mount so the popup shows
39
+
// instantly without a loading delay.
40
+
useGetDevicesQuery();
41
+
const { data: currentDevice } = useGetDeviceQuery({ id: "current" });
42
+
43
+
useEffect(() => {
44
+
if (!currentDevice) return;
45
+
if (!currentDevice.device) {
46
+
setDeviceState({ currentDevice: null });
47
+
return;
48
+
}
49
+
setDeviceState({
50
+
currentDevice: {
51
+
id: currentDevice.device.id || "",
52
+
name: currentDevice.device.name || "",
53
+
type: currentDevice.device.app || "",
54
+
isConnected: currentDevice.device.isConnected || false,
55
+
isCurrentDevice: currentDevice.device.isCurrentDevice ?? true,
56
+
},
57
+
});
58
+
// eslint-disable-next-line react-hooks/exhaustive-deps
59
+
}, [currentDevice]);
60
+
33
61
const { data, isLoading } = useGetCurrentTrackQuery();
34
62
const { data: playback } = useGetPlaybackStatusQuery();
35
63
const { mutate: pause } = usePauseMutation();
+2
-23
webui/rockbox/src/Components/ControlBar/DeviceList/DeviceListWithData.tsx
+2
-23
webui/rockbox/src/Components/ControlBar/DeviceList/DeviceListWithData.tsx
···
1
-
import { FC, useEffect, useMemo } from "react";
1
+
import { FC, useMemo } from "react";
2
2
import DeviceList from "./DeviceList";
3
3
import {
4
4
useConnectToDeviceMutation,
···
16
16
17
17
const DeviceListWithData: FC<DeviceListWithDataProps> = ({ close }) => {
18
18
const [, setControlBarState] = useRecoilState(controlBarState);
19
-
const [device, setDeviceState] = useRecoilState(deviceState);
19
+
const [device] = useRecoilState(deviceState);
20
20
const { data: currentDevice, refetch: refetchCurrentDevice } = useGetDeviceQuery({ id: "current" });
21
21
const { data, isLoading, refetch: refetchDevices } = useGetDevicesQuery();
22
22
const { mutateAsync: connectAsync } = useConnectToDeviceMutation();
···
33
33
isCurrentDevice: x.isCurrentDevice ?? false,
34
34
}));
35
35
}, [data, isLoading]);
36
-
37
-
useEffect(() => {
38
-
if (currentDevice) {
39
-
if (!currentDevice.device) {
40
-
setDeviceState({
41
-
currentDevice: null,
42
-
});
43
-
return;
44
-
}
45
-
setDeviceState({
46
-
currentDevice: {
47
-
id: currentDevice.device.id || "",
48
-
name: currentDevice.device.name || "",
49
-
type: currentDevice.device.app || "",
50
-
isConnected: currentDevice.device.isConnected || false,
51
-
isCurrentDevice: currentDevice.device.isCurrentDevice ?? true,
52
-
},
53
-
});
54
-
}
55
-
// eslint-disable-next-line react-hooks/exhaustive-deps
56
-
}, [currentDevice]);
57
36
58
37
const connectToCastDevice = async (id: string) => {
59
38
await connectAsync({ id });