-
-
-
-
-
-
- {(config.lastFMEnabled || config.listenBrainzEnabled) && (
-
+const useStyles = makeStyles({
+ apiKeyField: {
+ marginTop: '16px',
+ marginBottom: '8px',
+ },
+ generateButton: {
+ marginTop: '16px',
+ marginBottom: '8px',
+ },
+ copyButton: {
+ padding: 4,
+ },
+})
+
+const ApiKeySection = () => {
+ const record = useRecordContext()
+ const recordId = record ? record.id : null
+ const initialApiKey = record ? record.apiKey : null
+
+ const classes = useStyles()
+ const notify = useNotify()
+ const [showApiKey, setShowApiKey] = useState(false)
+ const [loading, setLoading] = useState(false)
+ const [apiKey, setApiKey] = useState(initialApiKey)
+
+ const generateApiKey = useCallback(async () => {
+ if (!recordId) {
+ notify('Player ID not available', 'error')
+ return
+ }
+
+ try {
+ setLoading(true)
+ const { json } = await httpClient(
+ `${REST_URL}/player/${recordId}/apiKey`,
+ {
+ method: 'POST',
+ },
+ )
+ setApiKey(json.apiKey)
+ setShowApiKey(true)
+ notify('message.apiKeyGenerated', 'info')
+ } catch (error) {
+ notify(error.message || 'Error generating API key', 'error')
+ } finally {
+ setLoading(false)
+ }
+ }, [recordId, notify])
+
+ const copyToClipboard = () => {
+ if (apiKey) {
+ navigator.clipboard.writeText(apiKey)
+ notify('API key copied to clipboard', 'info')
+ }
+ }
+
+ if (!recordId) {
+ return <>>
+ }
+
+ return (
+
+ {apiKey ? (
+
+
+ setShowApiKey(!showApiKey)}
+ size="small"
+ >
+ {showApiKey ? : }
+
+
+
+
+
+
+
+
+ ),
+ }}
+ style={{ width: 320, color: 'black' }}
+ />
+ ) : (
+ !loading && (
+
+ )
)}
-
-
-
-
-)
+
+ }
+ variant="outlined"
+ disabled={loading}
+ />
+
+ )
+}
+
+const PlayerEdit = (props) => {
+ return (
+ } {...props}>
+
+
+
+
+
+
+
+ {(config.lastFMEnabled || config.listenBrainzEnabled) && (
+
+ )}
+
+
+
+
+
+
+ )
+}
export default PlayerEdit
diff --git a/ui/src/player/index.js b/ui/src/player/index.js
index aaa3d58d7..6e356266e 100644
--- a/ui/src/player/index.js
+++ b/ui/src/player/index.js
@@ -1,8 +1,10 @@
import { BsFillMusicPlayerFill } from 'react-icons/bs'
import PlayerList from './PlayerList'
import PlayerEdit from './PlayerEdit'
+import PlayerCreate from './PlayerCreate.jsx'
export default {
+ create: PlayerCreate,
list: PlayerList,
edit: PlayerEdit,
icon: BsFillMusicPlayerFill,