parent
8f9e3bd184
commit
9c661d67ee
10 changed files with 270 additions and 33 deletions
@ -0,0 +1,196 @@ |
|||||||
|
import React, { useEffect, useState } from 'react'; |
||||||
|
import { AppBar, Box, Button, Dialog, FormControl, FormControlLabel, IconButton, Link, List, ListItem, ListItemIcon, ListItemText, MenuItem, Radio, RadioGroup, Select, Tab, Tabs, TextField, Typography } from "@material-ui/core"; |
||||||
|
import { SongMetadata } from "./SongWindow"; |
||||||
|
import StoreLinkIcon, { ExternalStore, whichStore } from '../../common/StoreLinkIcon'; |
||||||
|
import CheckIcon from '@material-ui/icons/Check'; |
||||||
|
import CancelIcon from '@material-ui/icons/Cancel'; |
||||||
|
import OpenInNewIcon from '@material-ui/icons/OpenInNew'; |
||||||
|
import DeleteIcon from '@material-ui/icons/Delete'; |
||||||
|
import { $enum } from "ts-enum-util"; |
||||||
|
import { useIntegrations, IntegrationsState, IntegrationState } from '../../../lib/integration/useIntegrations'; |
||||||
|
import { IntegrationFeature, IntegrationSong } from '../../../lib/integration/Integration'; |
||||||
|
import { TabPanel } from '@material-ui/lab'; |
||||||
|
import { v1 } from 'uuid'; |
||||||
|
let _ = require('lodash') |
||||||
|
|
||||||
|
export function ProvideLinksWidget(props: { |
||||||
|
providers: IntegrationState[], |
||||||
|
metadata: SongMetadata, |
||||||
|
store: ExternalStore, |
||||||
|
onChange: (link: string | undefined) => void, |
||||||
|
}) { |
||||||
|
let [selectedProviderIdx, setSelectedProviderIdx] = useState<number | undefined>( |
||||||
|
props.providers.length > 0 ? 0 : undefined |
||||||
|
); |
||||||
|
let [query, setQuery] = useState<string>( |
||||||
|
`${props.metadata.title} ${props.metadata.artists && props.metadata.artists[0].name}` |
||||||
|
) |
||||||
|
let [results, setResults] = useState<IntegrationSong[]>([]); |
||||||
|
|
||||||
|
let selectedProvider: IntegrationState | undefined = selectedProviderIdx !== undefined ? |
||||||
|
props.providers[selectedProviderIdx] : undefined; |
||||||
|
|
||||||
|
let currentLink = props.metadata.storeLinks ? props.metadata.storeLinks.find( |
||||||
|
(l: string) => whichStore(l) === props.store |
||||||
|
) : undefined; |
||||||
|
|
||||||
|
return <Box display="flex" flexDirection="column"> |
||||||
|
<Box display="flex" alignItems="center"> |
||||||
|
<Select |
||||||
|
value={selectedProviderIdx} |
||||||
|
onChange={(e: any) => setSelectedProviderIdx(e.target.value)} |
||||||
|
> |
||||||
|
{props.providers.map((p: IntegrationState, idx: number) => { |
||||||
|
return <MenuItem value={idx}>{p.properties.name}</MenuItem> |
||||||
|
})} |
||||||
|
</Select> |
||||||
|
<TextField |
||||||
|
value={query} |
||||||
|
onChange={(e: any) => setQuery(e.target.value)} |
||||||
|
/> |
||||||
|
<Button |
||||||
|
onClick={() => { |
||||||
|
selectedProvider?.integration.searchSong(query, 10) |
||||||
|
.then((songs: IntegrationSong[]) => setResults(songs)) |
||||||
|
}} |
||||||
|
>Search</Button> |
||||||
|
</Box> |
||||||
|
<FormControl> |
||||||
|
<RadioGroup value={currentLink} onChange={(e: any) => props.onChange(e.target.value)}> |
||||||
|
{results.map((result: IntegrationSong, idx: number) => { |
||||||
|
let pretty = `"${result.title}"
|
||||||
|
${result.artist && ` by ${result.artist.name}`} |
||||||
|
${result.album && ` (${result.album.name})`}`;
|
||||||
|
return <FormControlLabel |
||||||
|
value={result.url || idx} |
||||||
|
control={<Radio checked={(result.url || idx) === currentLink} />} |
||||||
|
label={<Box display="flex" alignItems="center"> |
||||||
|
{pretty} |
||||||
|
<a href={result.url || ""} target="_blank"> |
||||||
|
<IconButton><OpenInNewIcon /></IconButton> |
||||||
|
</a> |
||||||
|
</Box>} |
||||||
|
/> |
||||||
|
})} |
||||||
|
</RadioGroup> |
||||||
|
</FormControl> |
||||||
|
</Box> |
||||||
|
} |
||||||
|
|
||||||
|
export function ExternalLinksEditor(props: { |
||||||
|
metadata: SongMetadata, |
||||||
|
onChange: (v: SongMetadata) => void, |
||||||
|
}) { |
||||||
|
let [selectedIdx, setSelectedIdx] = useState<number>(0); |
||||||
|
let integrations = useIntegrations(); |
||||||
|
|
||||||
|
let linksSet: Record<string, string | null> = |
||||||
|
$enum(ExternalStore).getValues().reduce((prev: any, store: string) => { |
||||||
|
var maybeLink: string | null = null; |
||||||
|
props.metadata.storeLinks && props.metadata.storeLinks.forEach((link: string) => { |
||||||
|
if (whichStore(link) === store) { |
||||||
|
maybeLink = link; |
||||||
|
} |
||||||
|
}) |
||||||
|
return { |
||||||
|
...prev, |
||||||
|
[store]: maybeLink, |
||||||
|
} |
||||||
|
}, {}) |
||||||
|
|
||||||
|
let store = $enum(ExternalStore).getValues()[selectedIdx]; |
||||||
|
let providers: IntegrationState[] = Array.isArray(integrations.state) ? |
||||||
|
integrations.state.filter( |
||||||
|
(iState: IntegrationState) => ( |
||||||
|
iState.integration.getFeatures().includes(IntegrationFeature.SearchSong) && |
||||||
|
iState.integration.providesStoreLink() === store |
||||||
|
) |
||||||
|
) : []; |
||||||
|
|
||||||
|
return <Box display="flex" width="100%"> |
||||||
|
<Box width="30%"> |
||||||
|
<List> |
||||||
|
|
||||||
|
{$enum(ExternalStore).getValues().map((store: string, idx: number) => { |
||||||
|
let maybeLink = linksSet[store]; |
||||||
|
return <ListItem |
||||||
|
selected={selectedIdx === idx} |
||||||
|
onClick={(e: any) => setSelectedIdx(idx)} |
||||||
|
button |
||||||
|
> |
||||||
|
<ListItemIcon>{linksSet[store] !== null ? <CheckIcon /> : <CancelIcon />}</ListItemIcon> |
||||||
|
<ListItemIcon><StoreLinkIcon whichStore={store} /></ListItemIcon> |
||||||
|
<ListItemText primary={store} /> |
||||||
|
{maybeLink && <a href={maybeLink} target="_blank"> |
||||||
|
<ListItemIcon><IconButton><OpenInNewIcon /></IconButton></ListItemIcon> |
||||||
|
</a>} |
||||||
|
{maybeLink && <ListItemIcon><IconButton |
||||||
|
onClick={() => { |
||||||
|
let newLinks = props.metadata.storeLinks?.filter( |
||||||
|
(l: string) => whichStore(l) !== store |
||||||
|
) |
||||||
|
props.onChange({ |
||||||
|
...props.metadata, |
||||||
|
storeLinks: newLinks, |
||||||
|
}); |
||||||
|
}} |
||||||
|
><DeleteIcon /> |
||||||
|
</IconButton></ListItemIcon>} |
||||||
|
</ListItem> |
||||||
|
})} |
||||||
|
</List> |
||||||
|
</Box> |
||||||
|
<Box ml={2} width="60%"> |
||||||
|
{providers.length === 0 ? |
||||||
|
<Typography>None of your configured integrations provides URL links for {store}.</Typography> : |
||||||
|
<ProvideLinksWidget |
||||||
|
providers={providers} |
||||||
|
metadata={props.metadata} |
||||||
|
store={store} |
||||||
|
onChange={(link: string | undefined) => { |
||||||
|
let removed = props.metadata.storeLinks?.filter( |
||||||
|
(link: string) => whichStore(link) !== store |
||||||
|
) || []; |
||||||
|
let newValue = link ? [...removed, link] : removed; |
||||||
|
if (!_.isEqual(new Set(newValue), new Set(props.metadata.storeLinks || []))) { |
||||||
|
props.onChange({ |
||||||
|
...props.metadata, |
||||||
|
storeLinks: newValue, |
||||||
|
}) |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
} |
||||||
|
</Box> |
||||||
|
</Box > |
||||||
|
} |
||||||
|
|
||||||
|
export default function EditSongDialog(props: { |
||||||
|
open: boolean, |
||||||
|
onClose: () => void, |
||||||
|
onSubmit: (v: SongMetadata) => void, |
||||||
|
id: number, |
||||||
|
metadata: SongMetadata, |
||||||
|
}) { |
||||||
|
enum EditSongTabs { |
||||||
|
Details = 0, |
||||||
|
ExternalLinks, |
||||||
|
} |
||||||
|
|
||||||
|
let [editingMetadata, setEditingMetadata] = useState<SongMetadata>(props.metadata); |
||||||
|
let [activeTab, setActiveTab] = useState<EditSongTabs>(EditSongTabs.Details); |
||||||
|
|
||||||
|
return <Dialog |
||||||
|
maxWidth="lg" |
||||||
|
fullWidth |
||||||
|
open={props.open} |
||||||
|
onClose={props.onClose} |
||||||
|
disableBackdropClick={true}> |
||||||
|
<ExternalLinksEditor |
||||||
|
metadata={editingMetadata} |
||||||
|
onChange={(v: SongMetadata) => setEditingMetadata(v)} |
||||||
|
/> |
||||||
|
{!_.isEqual(editingMetadata, props.metadata) && <Typography>Changed!</Typography>} |
||||||
|
</Dialog> |
||||||
|
|
||||||
|
} |
||||||
Loading…
Reference in new issue