feat: updates

packages/web/components/Airplay.tsx

@@ -0,0 +1,67 @@
+import player from '@/web/states/player'
+import { css, cx } from '@emotion/css'
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { useSnapshot } from 'valtio'
+
+const useAirplayDevices = () => {
+  return useQuery(['useAirplayDevices'], () =>
+    window.ipcRenderer?.invoke('airplay-scan-devices')
+  )
+}
+
+const Airplay = () => {
+  const [showPanel, setShowPanel] = useState(false)
+  const { data: devices, isLoading } = useAirplayDevices()
+  const { remoteDevice } = useSnapshot(player)
+  const selectedAirplayDeviceID =
+    remoteDevice?.protocol === 'airplay' ? remoteDevice?.id : ''
+
+  return (
+    <div
+      className={cx(
+        'fixed z-20',
+        css`
+          top: 46px;
+          right: 256px;
+        `
+      )}
+    >
+      <div
+        onClick={() => setShowPanel(!showPanel)}
+        className='flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-24 text-white'
+      >
+        A
+      </div>
+
+      {showPanel && (
+        <div
+          className={cx(
+            'absolute  rounded-24 border border-white/10 bg-black/60 p-2 backdrop-blur-xl',
+            css`
+              width: 256px;
+              height: 256px;
+            `
+          )}
+        >
+          {devices?.devices?.map(device => (
+            <div
+              key={device.identifier}
+              className={cx(
+                'rounded-12 p-2 hover:bg-white/10',
+                device.identifier === selectedAirplayDeviceID
+                  ? 'text-brand-500'
+                  : 'text-white'
+              )}
+              onClick={() => player.switchToAirplayDevice(device.identifier)}
+            >
+              {device.name}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Airplay