Skip to content

Commit

Permalink
app: Allow now playing themes to define available settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@evanpurkhiser
evanpurkhiser committed Dec 14, 2020
1 parent 037a8e7 commit e6c51a3
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 70 deletions.
8 changes: 6 additions & 2 deletions src/overlay/overlays/nowPlaying/ThemeAsot.tsx
View file
Expand Up @@ -6,7 +6,7 @@ import {observer} from 'mobx-react';
import {PlayedTrack} from 'src/shared/store';

import {Tags, tagsConfig} from './tags';
import {NowPlayingConfig} from '.';
import {NowPlayingConfig, ThemeDescriptor} from '.';

type MotionDivProps = React.ComponentProps<typeof motion.div>;

Expand Down Expand Up @@ -251,4 +251,8 @@ const CurrentWrapper = styled('div')`
}
`;

export default ThemeAsot;
export default {
label: 'A State of Overlays',
component: ThemeAsot,
enabledConfigs: ['alignRight', 'tags'],
} as ThemeDescriptor;
8 changes: 6 additions & 2 deletions src/overlay/overlays/nowPlaying/ThemeModern.tsx
View file
Expand Up @@ -9,7 +9,7 @@ import TimeTicker from 'src/shared/components/TimeTicker';
import {PlayedTrack} from 'src/shared/store';

import {Tags, tagsConfig} from './tags';
import {NowPlayingConfig} from '.';
import {NowPlayingConfig, ThemeDescriptor} from '.';

const artToSrc = (d: Buffer | undefined) =>
d && d.length > 0
Expand Down Expand Up @@ -408,4 +408,8 @@ const CurrentWrapper = styled('div')`
}
`;

export default ThemeModern;
export default {
label: 'Track List',
component: ThemeModern,
enabledConfigs: ['alignRight', 'hideArtwork', 'historyCount', 'tags'],
} as ThemeDescriptor;
164 changes: 98 additions & 66 deletions src/overlay/overlays/nowPlaying/index.tsx
View file
Expand Up @@ -9,16 +9,16 @@ import Text from 'app/components/form/Text';
import {OverlayDescriptor} from 'src/overlay';
import LiveHistoryIndicator from 'src/overlay/components/liveHistoryIndicator';
import Select from 'src/renderer/components/form/Select';
import store from 'src/shared/store';
import store, {PlayedTrack} from 'src/shared/store';
import useRandomHistory from 'src/utils/useRandomHistory';

import {availableTags, Tags} from './tags';
import ThemeAsot from './ThemeAsot';
import ThemeModern from './ThemeModern';
import themeAsot from './ThemeAsot';
import themeModern from './ThemeModern';

const themes = {
tracklist: {label: 'Track List', component: ThemeModern},
asot: {label: 'A State of Overlays', component: ThemeAsot},
tracklist: themeModern,
asot: themeAsot,
} as const;

type Theme = keyof typeof themes;
Expand All @@ -28,6 +28,11 @@ type TaggedNowPlaying = {
config: NowPlayingConfig;
};

type ThemeComponentProps = {
config: NowPlayingConfig;
history: PlayedTrack[];
};

export type NowPlayingConfig = {
/**
* The selected theme to use
Expand All @@ -51,6 +56,21 @@ export type NowPlayingConfig = {
tags?: Tags;
};

export type ThemeDescriptor = {
/**
* The display name of the theme
*/
label: string;
/**
* The component used to render the 'now playing' indicator
*/
component: React.ComponentType<ThemeComponentProps>;
/**
* Enabled settings for this theme
*/
enabledConfigs: Exclude<keyof NowPlayingConfig, 'theme'>[];
};

const Example: React.FC<{config?: NowPlayingConfig}> = observer(({config}) => {
const demoHistory = useRandomHistory({cutoff: 5, updateInterval: 5000});
const liveHistory = store.mixstatus.trackHistory;
Expand Down Expand Up @@ -104,67 +124,79 @@ const HistoryOverlay: React.FC<{config: NowPlayingConfig}> = observer(({config})
const valueTransform = <T extends readonly string[]>(t: T) =>
t.map(v => ({label: v, value: v}));

const ConfigInterface: React.FC<{config: NowPlayingConfig}> = observer(({config}) => (
<div>
<Field
noCenter
size="lg"
name="Overlay Theme"
description="Choose from various different looks and feels."
>
<Select
value={{value: config.theme, ...themes[config.theme]}}
options={Object.entries(themes).map(([value, theme]) => ({value, ...theme}))}
onChange={v => set(config, {theme: (v as {value: Theme}).value})}
/>
</Field>
<Field
size="sm"
name="Align to right side"
description="Display the history and now playing details aligned towards the right of the screen."
>
<Checkbox
checked={config.alignRight}
onChange={() => set(config, {alignRight: !config.alignRight})}
/>
</Field>
<Field
size="sm"
name="Don't show artwork"
description="Hides the artwork. Useful if you don't maintain artwork in your library."
>
<Checkbox
checked={config.hideArtwork}
onChange={() => set(config, {hideArtwork: !config.hideArtwork})}
/>
</Field>
<Field
size="sm"
name="History items shown"
description="Number of history items to show below the now playing metadata. You can set this to 0 to completely disable displaying history."
>
<Text
type="number"
style={{textAlign: 'center', appearance: 'textfield'}}
value={config.historyCount}
onChange={e => set(config, {historyCount: Math.max(0, Number(e.target.value))})}
/>
</Field>
<Field
size="full"
name="Additional Tags"
description="Select the additional tags you want to show in the metadata. Emptying the list will stop any attributes from showing"
>
<Select
isMulti
placeholder="Add metadata items to display..."
options={valueTransform(availableTags)}
value={valueTransform(config.tags ?? [])}
onChange={values => set(config, {tags: values?.map((v: any) => v.value) ?? []})}
/>
</Field>
</div>
));
const ConfigInterface: React.FC<{config: NowPlayingConfig}> = observer(({config}) => {
const {enabledConfigs} = themes[config.theme];

return (
<div>
<Field
noCenter
size="lg"
name="Overlay Theme"
description="Choose from various different looks and feels."
>
<Select
value={{value: config.theme, ...themes[config.theme]}}
options={Object.entries(themes).map(([value, theme]) => ({value, ...theme}))}
onChange={v => set(config, {theme: (v as {value: Theme}).value})}
/>
</Field>
{enabledConfigs.includes('alignRight') && (
<Field
size="sm"
name="Align to right side"
description="Display the history and now playing details aligned towards the right of the screen."
>
<Checkbox
checked={config.alignRight}
onChange={() => set(config, {alignRight: !config.alignRight})}
/>
</Field>
)}
{enabledConfigs.includes('hideArtwork') && (
<Field
size="sm"
name="Don't show artwork"
description="Hides the artwork. Useful if you don't maintain artwork in your library."
>
<Checkbox
checked={config.hideArtwork}
onChange={() => set(config, {hideArtwork: !config.hideArtwork})}
/>
</Field>
)}
{enabledConfigs.includes('historyCount') && (
<Field
size="sm"
name="History items shown"
description="Number of history items to show below the now playing metadata. You can set this to 0 to completely disable displaying history."
>
<Text
type="number"
style={{textAlign: 'center', appearance: 'textfield'}}
value={config.historyCount}
onChange={e =>
set(config, {historyCount: Math.max(0, Number(e.target.value))})
}
/>
</Field>
)}
<Field
size="full"
name="Additional Tags"
description="Select the additional tags you want to show in the metadata. Emptying the list will stop any attributes from showing"
>
<Select
isMulti
placeholder="Add metadata items to display..."
options={valueTransform(availableTags)}
value={valueTransform(config.tags ?? [])}
onChange={values => set(config, {tags: values?.map((v: any) => v.value) ?? []})}
/>
</Field>
</div>
);
});

const descriptor: OverlayDescriptor<TaggedNowPlaying> = {
type: 'nowPlaying',
Expand Down

0 comments on commit e6c51a3

Please sign in to comment.