webui: display chromcast devices

crates/graphql/src/schema/device.rs

···
         let client = reqwest::Client::new();
         let url = format!("{}/devices/{}", rockbox_url(), id);
         let response = client.get(&url).send().await?;
+
+        if response.status() == 404 {
+            return Ok(None);
+        }
+
         let response = response.json::<Option<Device>>().await?;
         Ok(response)
     }

crates/rpc/src/device.rs

···
             .send()
             .await
             .map_err(|e| tonic::Status::internal(e.to_string()))?;
+
+        if response.status() == 404 {
+            return Ok(tonic::Response::new(GetDeviceResponse { device: None }));
+        }
+
         let response = response
             .json::<Option<rockbox_types::device::Device>>()
             .await

crates/server/src/handlers/devices.rs

···
 
 pub async fn get_device(ctx: &Context, req: &Request, res: &mut Response) -> Result<(), Error> {
     let id = &req.params[0];
+    if id == "current" {
+        let current_device = ctx.current_device.lock().unwrap();
+        if let Some(device) = current_device.as_ref() {
+            res.json(&device.clone());
+            return Ok(());
+        }
+        res.set_status(404);
+        return Ok(());
+    }
+
     let devices = ctx.devices.lock().unwrap();
     let device = devices.iter().find(|d| d.id == *id);
 

crates/server/src/handlers/player.rs

···
 use std::env;
 
-use crate::http::{Context, Request, Response};
+use crate::{
+    http::{Context, Request, Response},
+    GLOBAL_MUTEX,
+};
 use anyhow::Error;
 use local_ip_addr::get_local_ip_address;
 use rand::seq::SliceRandom;
+use rockbox_chromecast::Chromecast;
 use rockbox_sys::{
     self as rb,
     types::{audio_status::AudioStatus, mp3_entry::Mp3Entry},
···
     if player.is_none() {
         res.set_status(404);
         return Ok(());
+    }
+
+    let mut current_device = ctx.current_device.lock().unwrap();
+    let devices = ctx.devices.lock().unwrap();
+    let device = devices
+        .iter()
+        .find(|d| d.id == *current_device.as_ref().unwrap().id);
+    if let Some(device) = device {
+        let mut mutex = GLOBAL_MUTEX.lock().unwrap();
+        *mutex = 1;
+        *player = Chromecast::connect(device.clone())?;
+        *current_device = Some(device.clone());
     }
 
     let player = player.as_deref_mut().unwrap();

crates/server/src/handlers/playlists.rs

···
+use std::env;
+
 use crate::http::{Context, Request, Response};
 use anyhow::Error;
+use local_ip_addr::get_local_ip_address;
 use rand::seq::SliceRandom;
 use rockbox_graphql::read_files;
 use rockbox_library::repo;
 use rockbox_sys::{
-    self as rb, types::playlist_amount::PlaylistAmount, PLAYLIST_INSERT_LAST,
-    PLAYLIST_INSERT_LAST_SHUFFLED,
+    self as rb,
+    types::{playlist_amount::PlaylistAmount, playlist_info::PlaylistInfo},
+    PLAYLIST_INSERT_LAST, PLAYLIST_INSERT_LAST_SHUFFLED,
 };
+use rockbox_traits::types::track::Track;
 use rockbox_types::{DeleteTracks, InsertTracks, NewPlaylist, StatusCode};
 
 pub async fn create_playlist(
···
     Ok(())
 }
 
-pub async fn insert_tracks(_ctx: &Context, req: &Request, res: &mut Response) -> Result<(), Error> {
+pub async fn insert_tracks(ctx: &Context, req: &Request, res: &mut Response) -> Result<(), Error> {
     let req_body = req.body.as_ref().unwrap();
     let mut tracklist: InsertTracks = serde_json::from_str(&req_body).unwrap();
     let amount = rb::playlist::amount();
 
+    let mut player = ctx.player.lock().unwrap();
+
+    if let Some(player) = player.as_deref_mut() {
+        let kv = ctx.kv.lock().unwrap();
+        let rockbox_addr =
+            env::var("ROCKBOX_ADDR").unwrap_or_else(|_| get_local_ip_address().unwrap());
+        let rockbox_port = env::var("ROCKBOX_GRAPHQL_PORT").unwrap_or_else(|_| "6062".to_string());
+
+        let tracks = tracklist
+            .tracks
+            .iter()
+            .filter(|t| kv.get(*t).is_some())
+            .map(|t| {
+                let track = kv.get(t).unwrap();
+                Track {
+                    id: track.id.clone(),
+                    title: track.title.clone(),
+                    artist: track.artist.clone(),
+                    album: track.album.clone(),
+                    album_artist: Some(track.album_artist.clone()),
+                    artist_id: Some(track.artist_id.clone()),
+                    album_id: Some(track.album_id.clone()),
+                    album_cover: track.album_art.clone().map(|cover| {
+                        format!("http://{}:{}/covers/{}", rockbox_addr, rockbox_port, cover)
+                    }),
+                    track_number: track.track_number,
+                    path: track.path.clone(),
+                    uri: format!(
+                        "http://{}:{}/tracks/{}",
+                        rockbox_addr, rockbox_port, track.id
+                    ),
+                    disc_number: track.disc_number,
+                    duration: Some(track.length as f32 / 1000.0),
+                    ..Default::default()
+                }
+            })
+            .collect::<Vec<Track>>();
+
+        for track in tracks {
+            player.play_next(track).await?;
+        }
+
+        res.text("0");
+        return Ok(());
+    }
+
     if let Some(dir) = &tracklist.directory {
         tracklist.tracks = read_files(dir.clone()).await?;
     }
···
     Ok(())
 }
 
-pub async fn remove_tracks(_ctx: &Context, req: &Request, res: &mut Response) -> Result<(), Error> {
+pub async fn remove_tracks(ctx: &Context, req: &Request, res: &mut Response) -> Result<(), Error> {
+    let player = ctx.player.lock().unwrap();
+
+    if let Some(_) = player.as_deref() {
+        res.text("0");
+        return Ok(());
+    }
+
     let req_body = req.body.as_ref().unwrap();
     let params = serde_json::from_str::<DeleteTracks>(&req_body)?;
     let mut ret = 0;
···
 }
 
 pub async fn get_playlist(ctx: &Context, _req: &Request, res: &mut Response) -> Result<(), Error> {
+    let mut player = ctx.player.lock().unwrap();
+
+    if let Some(player) = player.as_deref_mut() {
+        let current_playback = player.get_current_playback().await?;
+        let tracks = current_playback.items;
+        let index = match tracks.len() >= 2 {
+            true => tracks.len() - 2,
+            false => 0,
+        } as i32;
+
+        let result = PlaylistInfo {
+            amount: tracks.len() as i32,
+            index,
+            entries: tracks.into_iter().map(|(t, _)| t.into()).collect(),
+            ..Default::default()
+        };
+        res.json(&result);
+        return Ok(());
+    }
+
     let mut metadata_cache = ctx.metadata_cache.lock().await;
     let mut result = rb::playlist::get_current();
     let mut entries = vec![];

crates/server/src/player_events.rs

···
 };
 
 use rockbox_graphql::{
-    schema::objects::{audio_status::AudioStatus, track::Track},
+    schema::objects::{audio_status::AudioStatus, playlist::Playlist, track::Track},
     simplebroker::SimpleBroker,
 };
 use rockbox_library::repo;
+use rockbox_sys::types::mp3_entry::Mp3Entry;
 use rockbox_traits::Player;
 use sqlx::{Pool, Sqlite};
 use url::Url;
···
                                     true => 1,
                                     false => 3,
                                 },
+                            });
+
+                            let tracks = current_playback.items;
+                            let index = match tracks.len() >= 2 {
+                                true => tracks.len() - 2,
+                                false => 0,
+                            } as i32;
+
+                            let tracks: Vec<Mp3Entry> =
+                                tracks.into_iter().map(|(t, _)| t.into()).collect();
+                            SimpleBroker::publish(Playlist {
+                                amount: tracks.len() as i32,
+                                index,
+                                tracks: tracks.into_iter().map(|t| t.into()).collect(),
+                                ..Default::default()
                             });
                         }
                     }

crates/server/src/scan.rs

···
             let services = discover(CHROMECAST_SERVICE_NAME);
             tokio::pin!(services);
             while let Some(info) = services.next().await {
-                devices.lock().unwrap().push(Device::from(info.clone()));
+                let mut devices = devices.lock().unwrap();
+                if devices
+                    .iter()
+                    .any(|d| d.id == info.get_fullname().to_owned())
+                {
+                    continue;
+                }
+                devices.push(Device::from(info.clone()));
                 SimpleBroker::<Device>::publish(Device::from(info.clone()));
             }
         });

webui/rockbox/graphql.schema.json

···
       },
       {
         "kind": "OBJECT",
+        "name": "Device",
+        "description": null,
+        "fields": [
+          {
+            "name": "app",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "baseUrl",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "host",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "id",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "ip",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "isCastDevice",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "isConnected",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "isCurrentDevice",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "isSourceDevice",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "name",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "port",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Int",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "service",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "inputFields": null,
+        "interfaces": [],
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "OBJECT",
         "name": "Entry",
         "description": null,
         "fields": [
···
               "ofType": {
                 "kind": "SCALAR",
                 "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "connect",
+            "description": null,
+            "args": [
+              {
+                "name": "id",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "disconnect",
+            "description": null,
+            "args": [
+              {
+                "name": "id",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
                 "ofType": null
               }
             },
···
             "description": null,
             "type": {
               "kind": "SCALAR",
-              "name": "Boolean",
+              "name": "Int",
               "ofType": null
             },
             "defaultValue": null,
···
               "kind": "OBJECT",
               "name": "Track",
               "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "device",
+            "description": null,
+            "args": [
+              {
+                "name": "id",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "OBJECT",
+              "name": "Device",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "devices",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "OBJECT",
+                    "name": "Device",
+                    "ofType": null
+                  }
+                }
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
···
               "name": null,
               "ofType": {
                 "kind": "SCALAR",
-                "name": "Boolean",
+                "name": "Int",
                 "ofType": null
               }
             },

webui/rockbox/src/Components/AlbumDetails/__snapshots__/AlbumDetails.test.tsx.snap

···
             <button
               aria-expanded="false"
               aria-haspopup="true"
+              style="cursor: pointer;"
+            >
+              <svg
+                aria-hidden="true"
+                class="StyledIconBase-sc-ea9ulj-0 dmvaRK"
+                color="#000"
+                fill="currentColor"
+                focusable="false"
+                height="18"
+                viewBox="0 0 16 16"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"
+                />
+                <path
+                  d="M8 4.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM8 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-3.5 1.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
               class="css-174s4i9"
             >
               <svg

webui/rockbox/src/Components/Albums/__snapshots__/Albums.test.tsx.snap

···
             <button
               aria-expanded="false"
               aria-haspopup="true"
+              style="cursor: pointer;"
+            >
+              <svg
+                aria-hidden="true"
+                class="StyledIconBase-sc-ea9ulj-0 dmvaRK"
+                color="#000"
+                fill="currentColor"
+                focusable="false"
+                height="18"
+                viewBox="0 0 16 16"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"
+                />
+                <path
+                  d="M8 4.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM8 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-3.5 1.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
               class="css-174s4i9"
             >
               <svg

webui/rockbox/src/Components/ArtistDetails/__snapshots__/ArtistDetails.test.tsx.snap

···
             <button
               aria-expanded="false"
               aria-haspopup="true"
+              style="cursor: pointer;"
+            >
+              <svg
+                aria-hidden="true"
+                class="StyledIconBase-sc-ea9ulj-0 dmvaRK"
+                color="#000"
+                fill="currentColor"
+                focusable="false"
+                height="18"
+                viewBox="0 0 16 16"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"
+                />
+                <path
+                  d="M8 4.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM8 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-3.5 1.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
               class="css-174s4i9"
             >
               <svg

webui/rockbox/src/Components/Artists/__snapshots__/Artists.test.tsx.snap

···
             <button
               aria-expanded="false"
               aria-haspopup="true"
+              style="cursor: pointer;"
+            >
+              <svg
+                aria-hidden="true"
+                class="StyledIconBase-sc-ea9ulj-0 dmvaRK"
+                color="#000"
+                fill="currentColor"
+                focusable="false"
+                height="18"
+                viewBox="0 0 16 16"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"
+                />
+                <path
+                  d="M8 4.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM8 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-3.5 1.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
               class="css-174s4i9"
             >
               <svg

webui/rockbox/src/Components/ControlBar/DeviceList/DeviceList.tsx

···
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ListItem, ListItemLabel } from "baseui/list";
+import { FC } from "react";
+import { MusicPlayer } from "@styled-icons/bootstrap";
+import { Laptop } from "@styled-icons/ionicons-outline";
+import { Kodi, Airplayaudio, Chromecast } from "@styled-icons/simple-icons";
+import { Speaker } from "@styled-icons/remix-fill";
+import {
+  Container,
+  CurrentDevice,
+  CurrentDeviceName,
+  CurrentDeviceWrapper,
+  Disconnect,
+  Icon,
+  IconWrapper,
+  List,
+  Placeholder,
+  Title,
+} from "./styles";
+
+export type Device = {
+  id: string;
+  name: string;
+  type: string;
+  isConnected: boolean;
+};
+
+export type ArtworkProps = {
+  icon?: string;
+  color?: string;
+};
+
+const Artwork: FC<ArtworkProps> = (
+  { icon, color } = {
+    icon: "music-player",
+  }
+) => {
+  const theme = useTheme();
+  return (
+    <Icon color={color}>
+      {icon === "music-player" && <MusicPlayer size={18} color="#28fce3" />}
+      {icon === "xbmc" && <Kodi size={18} color="#28cbfc" />}
+      {icon === "airplay" && <Airplayaudio size={18} color={"#ff00c3"} />}
+      {icon === "chromecast" && (
+        <Chromecast size={18} color={theme.colors.text} />
+      )}
+      {icon === "dlna" && <Speaker size={18} color={"#ff00c3"} />}
+    </Icon>
+  );
+};
+
+const DeviceName = styled.div`
+  font-size: 14px;
+  color: "#fe099c";
+`;
+
+export type DeviceListProps = {
+  currentCastDevice?: Device | null;
+  castDevices: Device[];
+  connectToCastDevice: (deviceId: string) => void;
+  disconnectFromCastDevice: () => void;
+  close: () => void;
+  loading: boolean;
+};
+
+const DeviceList: FC<DeviceListProps> = ({
+  castDevices,
+  close,
+  connectToCastDevice,
+  disconnectFromCastDevice,
+  currentCastDevice,
+  loading,
+}) => {
+  const theme = useTheme();
+  const colors: {
+    [key: string]: string;
+  } = {
+    "music-player": "rgba(40, 252, 227, 0.088)",
+    xbmc: "rgba(40, 203, 252, 0.082)",
+    airplay: "rgba(255, 0, 195, 0.063)",
+    dlna: "rgba(255, 0, 195, 0.063)",
+  };
+
+  const _onConnectToCastDevice = (deviceId: string) => {
+    connectToCastDevice(deviceId);
+    close();
+  };
+
+  const _onDisconnectFromCastDevice = () => {
+    disconnectFromCastDevice();
+    close();
+  };
+
+  return (
+    <Container>
+      <CurrentDeviceWrapper>
+        <IconWrapper>
+          <Laptop size={30} color={"#fe099c"} />
+        </IconWrapper>
+        <div style={{ flex: 1 }}>
+          <CurrentDevice>Current device</CurrentDevice>
+          <CurrentDeviceName>
+            {currentCastDevice ? currentCastDevice.name : "Rockbox"}
+          </CurrentDeviceName>
+        </div>
+        {currentCastDevice && (
+          <Disconnect onClick={_onDisconnectFromCastDevice}>
+            disconnect
+          </Disconnect>
+        )}
+      </CurrentDeviceWrapper>
+      {!loading && <Title>Select another output device</Title>}
+      <List>
+        {castDevices.length === 0 && !loading && (
+          <Placeholder>
+            No devices found. Please make sure your device is connected to the
+            same network as this device.
+          </Placeholder>
+        )}
+        {castDevices.map((device) => (
+          <div
+            key={device.id}
+            onClick={() => _onConnectToCastDevice(device.id)}
+          >
+            <ListItem
+              key={device.id}
+              artwork={() => (
+                <Artwork icon={device.type} color={colors[device.type]} />
+              )}
+              overrides={{
+                Root: {
+                  style: {
+                    cursor: "pointer",
+                    ":hover": {
+                      backgroundColor: theme.colors.hover,
+                    },
+                    borderRadius: "5px",
+                  },
+                },
+                Content: {
+                  style: {
+                    borderBottom: "none",
+                  },
+                },
+              }}
+            >
+              <ListItemLabel>
+                <DeviceName>{device.name}</DeviceName>
+              </ListItemLabel>
+            </ListItem>
+          </div>
+        ))}
+      </List>
+    </Container>
+  );
+};
+
+export default DeviceList;

webui/rockbox/src/Components/ControlBar/DeviceList/DeviceListWithData.tsx

···
+import { FC, useEffect, useMemo } from "react";
+import DeviceList from "./DeviceList";
+import {
+  useConnectToDeviceMutation,
+  useDisconnectFromDeviceMutation,
+  useGetDeviceQuery,
+  useGetDevicesQuery,
+} from "../../../Hooks/GraphQL";
+import { useRecoilState } from "recoil";
+import { deviceState } from "./DeviceState";
+import { controlBarState } from "../ControlBarState";
+
+export type DeviceListWithDataProps = {
+  close: () => void;
+};
+
+const DeviceListWithData: FC<DeviceListWithDataProps> = ({ close }) => {
+  const [, setControlBarState] = useRecoilState(controlBarState);
+  const [device, setDeviceState] = useRecoilState(deviceState);
+  const { data: currentDevice } = useGetDeviceQuery({
+    variables: { id: "current" },
+    fetchPolicy: "network-only",
+  });
+  const { data, loading } = useGetDevicesQuery();
+  const [connect] = useConnectToDeviceMutation();
+  const [disconnect] = useDisconnectFromDeviceMutation();
+  const devices = useMemo(() => {
+    if (loading || !data) {
+      return [];
+    }
+    return (data.devices || []).map((x) => ({
+      id: x.id,
+      name: x.name,
+      type: x.app,
+      isConnected: x.isConnected,
+    }));
+  }, [data, loading]);
+
+  useEffect(() => {
+    if (currentDevice) {
+      if (!currentDevice.device) {
+        setDeviceState({
+          currentDevice: null,
+        });
+        return;
+      }
+      setDeviceState({
+        currentDevice: {
+          id: currentDevice.device.id || "",
+          name: currentDevice.device.name || "",
+          type: currentDevice.device.app || "",
+          isConnected: currentDevice.device.isConnected || false,
+        },
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentDevice]);
+
+  const connectToCastDevice = async (id: string) => {
+    await connect({ variables: { id } });
+    setControlBarState((state) => ({
+      ...state,
+      nowPlaying: undefined,
+    }));
+  };
+
+  const disconnectDevice = async () => {
+    await disconnect({ variables: { id: currentDevice?.device?.id || "" } });
+    // reload page to reset the state
+    window.location.reload();
+  };
+
+  return (
+    <>
+      {
+        <DeviceList
+          loading={loading}
+          castDevices={devices}
+          connectToCastDevice={connectToCastDevice}
+          disconnectFromCastDevice={disconnectDevice}
+          close={close}
+          currentCastDevice={device.currentDevice}
+        />
+      }
+    </>
+  );
+};
+
+export default DeviceListWithData;

webui/rockbox/src/Components/ControlBar/DeviceList/DeviceState.tsx

···
+import { atom } from "recoil";
+import { Device } from "./DeviceList";
+
+export const deviceState = atom<{
+  currentDevice: Device | null;
+}>({
+  key: "deviceState",
+  default: {
+    currentDevice: null,
+  },
+});

webui/rockbox/src/Components/ControlBar/DeviceList/index.tsx

···
-import { css, useTheme } from "@emotion/react";
-import styled from "@emotion/styled";
-import { ListItem, ListItemLabel } from "baseui/list";
-import { FC } from "react";
-import { MusicPlayer } from "@styled-icons/bootstrap";
-import { Laptop } from "@styled-icons/ionicons-outline";
-import { Kodi, Airplayaudio, Chromecast } from "@styled-icons/simple-icons";
-import { Speaker } from "@styled-icons/remix-fill";
-
-export type Device = {
-  id: string;
-  name: string;
-  type: string;
-  isConnected: boolean;
-};
-
-const Container = styled.div`
-  max-height: calc(100vh - 153px); /* - 90px */
-  padding-top: 15px;
-  padding-bottom: 15px;
-  overflow-y: auto;
-  width: 370px;
-  min-height: 200px;
-`;
-
-const List = styled.div`
-  max-height: calc(100vh - 273px); /* - 210px */
-  padding-left: 15px;
-  padding-right: 15px;
-  overflow-y: auto;
-  min-height: 200px;
-`;
-
-const Icon = styled.div`
-  height: 40px;
-  width: 40px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${(props) => props.theme.colors.cover};
-  ${(props) =>
-    props.color &&
-    css`
-      background-color: ${props.color};
-    `}
-`;
-
-const Title = styled.div`
-  margin: 10px;
-  margin-left: 25px;
-  margin-right: 25px;
-  font-family: "RockfordSansBold";
-`;
-
-const CurrentDeviceWrapper = styled.div`
-  height: 60px;
-  display: flex;
-  margin-left: 25px;
-  margin-right: 25px;
-  align-items: center;
-`;
-
-const CurrentDevice = styled.div`
-  font-size: 18px;
-`;
-
-const CurrentDeviceName = styled.div`
-  color: #fe099c;
-  font-size: 14px;
-`;
-
-const IconWrapper = styled.div`
-  margin-top: 3px;
-  margin-right: 16px;
-`;
-
-const Disconnect = styled.button`
-  background-color: #000;
-  border: none;
-  color: #fff;
-  height: 21px;
-  border-radius: 12px;
-  font-family: "RockfordSansRegular";
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  padding-bottom: 4px;
-  cursor: pointer;
-`;
-
-const Placeholder = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 300px;
-  text-align: center;
-  padding-left: 20px;
-  padding-right: 20px;
-  font-size: 14px;
-`;
-
-export type ArtworkProps = {
-  icon?: string;
-  color?: string;
-};
-
-const Artwork: FC<ArtworkProps> = ({ icon, color }) => {
-  const theme = useTheme();
-  return (
-    <Icon color={color}>
-      {icon === "music-player" && <MusicPlayer size={18} color="#28fce3" />}
-      {icon === "xbmc" && <Kodi size={18} color="#28cbfc" />}
-      {icon === "airplay" && <Airplayaudio size={18} color={"#ff00c3"} />}
-      {icon === "chromecast" && (
-        <Chromecast size={18} color={theme.colors.text} />
-      )}
-      {icon === "dlna" && <Speaker size={18} color={"#ff00c3"} />}
-    </Icon>
-  );
-};
-
-Artwork.defaultProps = {
-  icon: "music-player",
-};
-
-const DeviceName = styled.div`
-  font-size: 14px;
-  color: "#fe099c";
-`;
-
-export type DeviceListProps = {
-  currentCastDevice?: Device;
-  castDevices: Device[];
-  connectToCastDevice: (deviceId: string) => void;
-  disconnectFromCastDevice: () => void;
-  close: () => void;
-};
-
-const DeviceList: FC<DeviceListProps> = ({
-  castDevices,
-  close,
-  connectToCastDevice,
-  disconnectFromCastDevice,
-  currentCastDevice,
-}) => {
-  const theme = useTheme();
-  const colors: {
-    [key: string]: string;
-  } = {
-    "music-player": "rgba(40, 252, 227, 0.088)",
-    xbmc: "rgba(40, 203, 252, 0.082)",
-    airplay: "rgba(255, 0, 195, 0.063)",
-    dlna: "rgba(255, 0, 195, 0.063)",
-  };
-
-  const _onConnectToCastDevice = (deviceId: string) => {
-    connectToCastDevice(deviceId);
-    close();
-  };
-
-  const _onDisconnectFromCastDevice = () => {
-    disconnectFromCastDevice();
-    close();
-  };
-
-  return (
-    <Container>
-      <CurrentDeviceWrapper>
-        <IconWrapper>
-          <Laptop size={30} color={"#fe099c"} />
-        </IconWrapper>
-        <div style={{ flex: 1 }}>
-          <CurrentDevice>Current device</CurrentDevice>
-          <CurrentDeviceName>
-            {currentCastDevice ? currentCastDevice.name : "Rockbox"}
-          </CurrentDeviceName>
-        </div>
-        {currentCastDevice && (
-          <Disconnect onClick={_onDisconnectFromCastDevice}>
-            disconnect
-          </Disconnect>
-        )}
-      </CurrentDeviceWrapper>
-      <Title>Select another output device</Title>
-      <List>
-        {castDevices.length === 0 && (
-          <Placeholder>
-            No devices found. Please make sure your device is connected to the
-            same network as this device.
-          </Placeholder>
-        )}
-        {castDevices.map((device) => (
-          <div
-            key={device.id}
-            onClick={() => _onConnectToCastDevice(device.id)}
-          >
-            <ListItem
-              key={device.id}
-              artwork={() => (
-                <Artwork icon={device.type} color={colors[device.type]} />
-              )}
-              overrides={{
-                Root: {
-                  style: {
-                    cursor: "pointer",
-                    ":hover": {
-                      backgroundColor: theme.colors.hover,
-                    },
-                    borderRadius: "5px",
-                  },
-                },
-                Content: {
-                  style: {
-                    borderBottom: "none",
-                  },
-                },
-              }}
-            >
-              <ListItemLabel>
-                <DeviceName>{device.name}</DeviceName>
-              </ListItemLabel>
-            </ListItem>
-          </div>
-        ))}
-      </List>
-    </Container>
-  );
-};
+import DeviceListWithData from "./DeviceListWithData";
 
-DeviceList.defaultProps = {};
-
-export default DeviceList;
+export default DeviceListWithData;

webui/rockbox/src/Components/ControlBar/DeviceList/styles.ts

···
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+export const Container = styled.div`
+  max-height: calc(100vh - 153px); /* - 90px */
+  padding-top: 15px;
+  padding-bottom: 15px;
+  overflow-y: auto;
+  width: 370px;
+  min-height: 200px;
+`;
+
+export const List = styled.div`
+  max-height: calc(100vh - 273px); /* - 210px */
+  padding-left: 15px;
+  padding-right: 15px;
+  overflow-y: auto;
+  min-height: 200px;
+`;
+
+export const Icon = styled.div`
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(props) => props.theme.colors.cover};
+  ${(props) =>
+    props.color &&
+    css`
+      background-color: ${props.color};
+    `}
+`;
+
+export const Title = styled.div`
+  margin: 10px;
+  margin-left: 25px;
+  margin-right: 25px;
+  font-family: "RockfordSansBold";
+`;
+
+export const CurrentDeviceWrapper = styled.div`
+  height: 60px;
+  display: flex;
+  margin-left: 25px;
+  margin-right: 25px;
+  align-items: center;
+`;
+
+export const CurrentDevice = styled.div`
+  font-size: 18px;
+`;
+
+export const CurrentDeviceName = styled.div`
+  color: #fe099c;
+  font-size: 14px;
+`;
+
+export const IconWrapper = styled.div`
+  margin-top: 3px;
+  margin-right: 16px;
+`;
+
+export const Disconnect = styled.button`
+  background-color: #000;
+  border: none;
+  color: #fff;
+  height: 21px;
+  border-radius: 12px;
+  font-family: "RockfordSansRegular";
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  padding-bottom: 4px;
+  cursor: pointer;
+`;
+
+export const Placeholder = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  text-align: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-size: 14px;
+`;

webui/rockbox/src/Components/ControlBar/RightMenu/RightMenu.tsx

···
       <Volume />
       <StatefulPopover
         placement="bottom"
-        content={({ close }) => (
-          <DeviceList
-            castDevices={[]}
-            connectToCastDevice={() => {}}
-            disconnectFromCastDevice={() => {}}
-            close={close}
-          />
-        )}
+        content={({ close }) => <DeviceList close={close} />}
         overrides={{
           Body: {
             style: {
+              top: "10px",
               left: "-70px",
             },
           },

webui/rockbox/src/Components/ControlBar/__snapshots__/ControlBar.test.tsx.snap

···
         <button
           aria-expanded="false"
           aria-haspopup="true"
+          style="cursor: pointer;"
+        >
+          <svg
+            aria-hidden="true"
+            class="StyledIconBase-sc-ea9ulj-0 dmvaRK"
+            color="#000"
+            fill="currentColor"
+            focusable="false"
+            height="18"
+            viewBox="0 0 16 16"
+            width="18"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"
+            />
+            <path
+              d="M8 4.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM8 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-3.5 1.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"
+            />
+          </svg>
+        </button>
+        <button
+          aria-expanded="false"
+          aria-haspopup="true"
           class="css-174s4i9"
         >
           <svg

webui/rockbox/src/Components/Files/__snapshots__/Files.test.tsx.snap

···
             <button
               aria-expanded="false"
               aria-haspopup="true"
+              style="cursor: pointer;"
+            >
+              <svg
+                aria-hidden="true"
+                class="StyledIconBase-sc-ea9ulj-0 dmvaRK"
+                color="#000"
+                fill="currentColor"
+                focusable="false"
+                height="18"
+                viewBox="0 0 16 16"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"
+                />
+                <path
+                  d="M8 4.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM8 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-3.5 1.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
               class="css-174s4i9"
             >
               <svg

webui/rockbox/src/Components/Tracks/__snapshots__/Tracks.test.tsx.snap

···
             <button
               aria-expanded="false"
               aria-haspopup="true"
+              style="cursor: pointer;"
+            >
+              <svg
+                aria-hidden="true"
+                class="StyledIconBase-sc-ea9ulj-0 dmvaRK"
+                color="#000"
+                fill="currentColor"
+                focusable="false"
+                height="18"
+                viewBox="0 0 16 16"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"
+                />
+                <path
+                  d="M8 4.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM8 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-3.5 1.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
               class="css-174s4i9"
             >
               <svg

webui/rockbox/src/GraphQL/Device/Mutation.ts

···
+import { gql } from "@apollo/client";
+
+export const CONNECT_TO_DEVICE = gql`
+  mutation ConnectToDevice($id: String!) {
+    connect(id: $id)
+  }
+`;
+
+export const DISCONNECT_FROM_DEVICE = gql`
+  mutation DisconnectFromDevice($id: String!) {
+    disconnect(id: $id)
+  }
+`;

webui/rockbox/src/GraphQL/Device/Query.ts

···
+import { gql } from "@apollo/client";
+
+export const GET_DEVICES = gql`
+  query GetDevices {
+    devices {
+      id
+      name
+      app
+      ip
+      host
+      port
+      isCastDevice
+      service
+      isConnected
+    }
+  }
+`;
+
+export const GET_DEVICE = gql`
+  query GetDevice($id: String!) {
+    device(id: $id) {
+      id
+      name
+      app
+      ip
+      host
+      port
+      isCastDevice
+      service
+      isConnected
+    }
+  }
+`;

webui/rockbox/src/Hooks/GraphQL.tsx

···
   threshold: Scalars['Int']['output'];
 };
 
+export type Device = {
+  __typename?: 'Device';
+  app: Scalars['String']['output'];
+  baseUrl?: Maybe<Scalars['String']['output']>;
+  host: Scalars['String']['output'];
+  id: Scalars['String']['output'];
+  ip: Scalars['String']['output'];
+  isCastDevice: Scalars['Boolean']['output'];
+  isConnected: Scalars['Boolean']['output'];
+  isCurrentDevice: Scalars['Boolean']['output'];
+  isSourceDevice: Scalars['Boolean']['output'];
+  name: Scalars['String']['output'];
+  port: Scalars['Int']['output'];
+  service: Scalars['String']['output'];
+};
+
 export type Entry = {
   __typename?: 'Entry';
   attr: Scalars['Int']['output'];
···
   __typename?: 'Mutation';
   adjustVolume: Scalars['Int']['output'];
   beepPlay: Scalars['String']['output'];
+  connect: Scalars['Boolean']['output'];
+  disconnect: Scalars['Boolean']['output'];
   fastForwardRewind: Scalars['Int']['output'];
   flushAndReloadTracks: Scalars['Int']['output'];
   hardStop: Scalars['Int']['output'];
···
 
 export type MutationAdjustVolumeArgs = {
   steps: Scalars['Int']['input'];
+};
+
+
+export type MutationConnectArgs = {
+  id: Scalars['String']['input'];
+};
+
+
+export type MutationDisconnectArgs = {
+  id: Scalars['String']['input'];
 };
 
 
···
   surroundBalance?: InputMaybe<Scalars['Int']['input']>;
   surroundEnabled?: InputMaybe<Scalars['Boolean']['input']>;
   surroundFx1?: InputMaybe<Scalars['Int']['input']>;
-  surroundFx2?: InputMaybe<Scalars['Boolean']['input']>;
+  surroundFx2?: InputMaybe<Scalars['Int']['input']>;
   treble?: InputMaybe<Scalars['Int']['input']>;
   trebleCutoff?: InputMaybe<Scalars['Int']['input']>;
 };
···
   artist?: Maybe<Artist>;
   artists: Array<Artist>;
   currentTrack?: Maybe<Track>;
+  device?: Maybe<Device>;
+  devices: Array<Device>;
   getDisplayIndex: Scalars['String']['output'];
   getFilePosition: Scalars['Int']['output'];
   getFirstIndex: Scalars['String']['output'];
···
 
 
 export type QueryArtistArgs = {
+  id: Scalars['String']['input'];
+};
+
+
+export type QueryDeviceArgs = {
   id: Scalars['String']['input'];
 };
 
···
   surroundBalance: Scalars['Int']['output'];
   surroundEnabled: Scalars['Int']['output'];
   surroundFx1: Scalars['Int']['output'];
-  surroundFx2: Scalars['Boolean']['output'];
+  surroundFx2: Scalars['Int']['output'];
   surroundMethod2: Scalars['Boolean']['output'];
   surroundMix: Scalars['Int']['output'];
   tagcacheAutoupdate: Scalars['Boolean']['output'];
···
 
 export type GetEntriesQuery = { __typename?: 'Query', treeGetEntries: Array<{ __typename?: 'Entry', name: string, attr: number, timeWrite: number }> };
 
+export type ConnectToDeviceMutationVariables = Exact<{
+  id: Scalars['String']['input'];
+}>;
+
+
+export type ConnectToDeviceMutation = { __typename?: 'Mutation', connect: boolean };
+
+export type DisconnectFromDeviceMutationVariables = Exact<{
+  id: Scalars['String']['input'];
+}>;
+
+
+export type DisconnectFromDeviceMutation = { __typename?: 'Mutation', disconnect: boolean };
+
+export type GetDevicesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetDevicesQuery = { __typename?: 'Query', devices: Array<{ __typename?: 'Device', id: string, name: string, app: string, ip: string, host: string, port: number, isCastDevice: boolean, service: string, isConnected: boolean }> };
+
+export type GetDeviceQueryVariables = Exact<{
+  id: Scalars['String']['input'];
+}>;
+
+
+export type GetDeviceQuery = { __typename?: 'Query', device?: { __typename?: 'Device', id: string, name: string, app: string, ip: string, host: string, port: number, isCastDevice: boolean, service: string, isConnected: boolean } | null };
+
 export type LikeTrackMutationVariables = Exact<{
   trackId: Scalars['String']['input'];
 }>;
···
 export type GetGlobalSettingsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetGlobalSettingsQuery = { __typename?: 'Query', globalSettings: { __typename?: 'UserSettings', musicDir: string, volume: number, playlistShuffle: boolean, repeatMode: number, bass: number, bassCutoff: number, treble: number, trebleCutoff: number, crossfade: number, fadeOnStop: boolean, crossfadeFadeInDelay: number, crossfadeFadeInDuration: number, crossfadeFadeOutDelay: number, crossfadeFadeOutDuration: number, crossfadeFadeOutMixmode: number, balance: number, stereoWidth: number, stereoswMode: number, surroundEnabled: number, surroundBalance: number, surroundFx1: number, surroundFx2: boolean, partyMode: boolean, ditheringEnabled: boolean, channelConfig: number, playerName: string, eqEnabled: boolean, eqBandSettings: Array<{ __typename?: 'EqBandSetting', q: number, cutoff: number, gain: number }>, replaygainSettings: { __typename?: 'ReplaygainSettings', noclip: boolean, type: number, preamp: number } } };
+export type GetGlobalSettingsQuery = { __typename?: 'Query', globalSettings: { __typename?: 'UserSettings', musicDir: string, volume: number, playlistShuffle: boolean, repeatMode: number, bass: number, bassCutoff: number, treble: number, trebleCutoff: number, crossfade: number, fadeOnStop: boolean, crossfadeFadeInDelay: number, crossfadeFadeInDuration: number, crossfadeFadeOutDelay: number, crossfadeFadeOutDuration: number, crossfadeFadeOutMixmode: number, balance: number, stereoWidth: number, stereoswMode: number, surroundEnabled: number, surroundBalance: number, surroundFx1: number, surroundFx2: number, partyMode: boolean, ditheringEnabled: boolean, channelConfig: number, playerName: string, eqEnabled: boolean, eqBandSettings: Array<{ __typename?: 'EqBandSetting', q: number, cutoff: number, gain: number }>, replaygainSettings: { __typename?: 'ReplaygainSettings', noclip: boolean, type: number, preamp: number } } };
 
 export type AdjustVolumeMutationVariables = Exact<{
   steps: Scalars['Int']['input'];
···
 export type GetEntriesLazyQueryHookResult = ReturnType<typeof useGetEntriesLazyQuery>;
 export type GetEntriesSuspenseQueryHookResult = ReturnType<typeof useGetEntriesSuspenseQuery>;
 export type GetEntriesQueryResult = Apollo.QueryResult<GetEntriesQuery, GetEntriesQueryVariables>;
+export const ConnectToDeviceDocument = gql`
+    mutation ConnectToDevice($id: String!) {
+  connect(id: $id)
+}
+    `;
+export type ConnectToDeviceMutationFn = Apollo.MutationFunction<ConnectToDeviceMutation, ConnectToDeviceMutationVariables>;
+
+/**
+ * __useConnectToDeviceMutation__
+ *
+ * To run a mutation, you first call `useConnectToDeviceMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useConnectToDeviceMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [connectToDeviceMutation, { data, loading, error }] = useConnectToDeviceMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useConnectToDeviceMutation(baseOptions?: Apollo.MutationHookOptions<ConnectToDeviceMutation, ConnectToDeviceMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<ConnectToDeviceMutation, ConnectToDeviceMutationVariables>(ConnectToDeviceDocument, options);
+      }
+export type ConnectToDeviceMutationHookResult = ReturnType<typeof useConnectToDeviceMutation>;
+export type ConnectToDeviceMutationResult = Apollo.MutationResult<ConnectToDeviceMutation>;
+export type ConnectToDeviceMutationOptions = Apollo.BaseMutationOptions<ConnectToDeviceMutation, ConnectToDeviceMutationVariables>;
+export const DisconnectFromDeviceDocument = gql`
+    mutation DisconnectFromDevice($id: String!) {
+  disconnect(id: $id)
+}
+    `;
+export type DisconnectFromDeviceMutationFn = Apollo.MutationFunction<DisconnectFromDeviceMutation, DisconnectFromDeviceMutationVariables>;
+
+/**
+ * __useDisconnectFromDeviceMutation__
+ *
+ * To run a mutation, you first call `useDisconnectFromDeviceMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDisconnectFromDeviceMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [disconnectFromDeviceMutation, { data, loading, error }] = useDisconnectFromDeviceMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useDisconnectFromDeviceMutation(baseOptions?: Apollo.MutationHookOptions<DisconnectFromDeviceMutation, DisconnectFromDeviceMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DisconnectFromDeviceMutation, DisconnectFromDeviceMutationVariables>(DisconnectFromDeviceDocument, options);
+      }
+export type DisconnectFromDeviceMutationHookResult = ReturnType<typeof useDisconnectFromDeviceMutation>;
+export type DisconnectFromDeviceMutationResult = Apollo.MutationResult<DisconnectFromDeviceMutation>;
+export type DisconnectFromDeviceMutationOptions = Apollo.BaseMutationOptions<DisconnectFromDeviceMutation, DisconnectFromDeviceMutationVariables>;
+export const GetDevicesDocument = gql`
+    query GetDevices {
+  devices {
+    id
+    name
+    app
+    ip
+    host
+    port
+    isCastDevice
+    service
+    isConnected
+  }
+}
+    `;
+
+/**
+ * __useGetDevicesQuery__
+ *
+ * To run a query within a React component, call `useGetDevicesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetDevicesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetDevicesQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetDevicesQuery(baseOptions?: Apollo.QueryHookOptions<GetDevicesQuery, GetDevicesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetDevicesQuery, GetDevicesQueryVariables>(GetDevicesDocument, options);
+      }
+export function useGetDevicesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetDevicesQuery, GetDevicesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetDevicesQuery, GetDevicesQueryVariables>(GetDevicesDocument, options);
+        }
+export function useGetDevicesSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions<GetDevicesQuery, GetDevicesQueryVariables>) {
+          const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<GetDevicesQuery, GetDevicesQueryVariables>(GetDevicesDocument, options);
+        }
+export type GetDevicesQueryHookResult = ReturnType<typeof useGetDevicesQuery>;
+export type GetDevicesLazyQueryHookResult = ReturnType<typeof useGetDevicesLazyQuery>;
+export type GetDevicesSuspenseQueryHookResult = ReturnType<typeof useGetDevicesSuspenseQuery>;
+export type GetDevicesQueryResult = Apollo.QueryResult<GetDevicesQuery, GetDevicesQueryVariables>;
+export const GetDeviceDocument = gql`
+    query GetDevice($id: String!) {
+  device(id: $id) {
+    id
+    name
+    app
+    ip
+    host
+    port
+    isCastDevice
+    service
+    isConnected
+  }
+}
+    `;
+
+/**
+ * __useGetDeviceQuery__
+ *
+ * To run a query within a React component, call `useGetDeviceQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetDeviceQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetDeviceQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useGetDeviceQuery(baseOptions: Apollo.QueryHookOptions<GetDeviceQuery, GetDeviceQueryVariables> & ({ variables: GetDeviceQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetDeviceQuery, GetDeviceQueryVariables>(GetDeviceDocument, options);
+      }
+export function useGetDeviceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetDeviceQuery, GetDeviceQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetDeviceQuery, GetDeviceQueryVariables>(GetDeviceDocument, options);
+        }
+export function useGetDeviceSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions<GetDeviceQuery, GetDeviceQueryVariables>) {
+          const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<GetDeviceQuery, GetDeviceQueryVariables>(GetDeviceDocument, options);
+        }
+export type GetDeviceQueryHookResult = ReturnType<typeof useGetDeviceQuery>;
+export type GetDeviceLazyQueryHookResult = ReturnType<typeof useGetDeviceLazyQuery>;
+export type GetDeviceSuspenseQueryHookResult = ReturnType<typeof useGetDeviceSuspenseQuery>;
+export type GetDeviceQueryResult = Apollo.QueryResult<GetDeviceQuery, GetDeviceQueryVariables>;
 export const LikeTrackDocument = gql`
     mutation LikeTrack($trackId: String!) {
   likeTrack(id: $trackId)

webui/rockbox/src/Hooks/usePlayQueue.tsx

···
 import _ from "lodash";
 import { useRecoilValue } from "recoil";
 import { controlBarState } from "../Components/ControlBar/ControlBarState";
+import { deviceState } from "../Components/ControlBar/DeviceList/DeviceState";
 
 export const usePlayQueue = () => {
+  const { currentDevice } = useRecoilValue(deviceState);
   const { resumeIndex } = useRecoilValue(controlBarState);
   const { data: playlistSubscription } = usePlaylistChangedSubscription({
     fetchPolicy: "network-only",
···
   const previousTracks = useMemo(() => {
     if (playlistSubscription?.playlistChanged) {
       const currentTrackIndex =
-        resumeIndex > -1
+        resumeIndex > -1 && currentDevice === null
           ? resumeIndex
           : _.get(playlistSubscription, "playlistChanged.index", 0);
       const tracks = _.get(playlistSubscription, "playlistChanged.tracks", []);
···
         ...x,
         id: index.toString(),
         cover: x.albumArt
-          ? `http://localhost:6062/covers/${x.albumArt}`
+          ? x.albumArt.startsWith("http")
+            ? x.albumArt
+            : `http://localhost:6062/covers/${x.albumArt}`
           : undefined,
       }));
     }
···
       ...x,
       id: index.toString(),
       cover: x.albumArt
-        ? `http://localhost:6062/covers/${x.albumArt}`
+        ? x.albumArt.startsWith("http")
+          ? x.albumArt
+          : `http://localhost:6062/covers/${x.albumArt}`
         : undefined,
     }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, playlistSubscription, resumeIndex]);
 
   const nextTracks = useMemo(() => {
···
         ...x,
         id: index.toString(),
         cover: x.albumArt
-          ? `http://localhost:6062/covers/${x.albumArt}`
+          ? x.albumArt.startsWith("http")
+            ? x.albumArt
+            : `http://localhost:6062/covers/${x.albumArt}`
           : undefined,
       }));
     }
···
       ...x,
       id: index.toString(),
       cover: x.albumArt
-        ? `http://localhost:6062/covers/${x.albumArt}`
+        ? x.albumArt.startsWith("http")
+          ? x.albumArt
+          : `http://localhost:6062/covers/${x.albumArt}`
         : undefined,
     }));
   }, [data, playlistSubscription, resumeIndex]);