Skip to content

Commit

Permalink
feat: Improve first user journey
Browse files Browse the repository at this point in the history
  • Loading branch information
TimSusa committed Dec 29, 2020
1 parent ac7922e commit 4f6e159
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 42 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "midi-bricks",
"author": "[email protected]",
"description": "MIDI Bricks was invented for usage as interactive MIDI-Controller-Interface or even for Touch-Device purposes. We use the native MIDI API, which is exposed from chrome browser. Please note, that because of a sad story MIDI functionality is not provided on mobile devices. Therefore, in most cases our users provide them selves with some kind of extra physical Touch Device, which can be wired via USB to your Desktop or Laptop.",
"version": "1.3.44-alpha.7",
"version": "1.3.44-alpha.8",
"main": "./src/app/electron.js",
"homepage": "./",
"private": false,
Expand Down
62 changes: 39 additions & 23 deletions src/components/channel-strip-list/ChannelStripListCmp.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,14 @@ function ChannelStripListCmp() {
channel: 'None'
}
const hasPages = useSelector((state) => Object.keys(state.pages).length > 1)
const isPageEmpty = useSelector(
(state) => Object.values(state.pages)[0].sliderList.length < 1
)
const hasDrivers = useSelector(
(state) =>
Object.keys(state.viewSettings.availableDrivers.inputs).length > 1 ||
Object.keys(state.viewSettings.availableDrivers.outputs).length > 1
)
const theme = useTheme()
const classes = makeStyles(styles.bind(this, theme))()

Expand Down Expand Up @@ -182,32 +190,40 @@ function ChannelStripListCmp() {
<Typography variant='h4' className={classes.noMidiTypography}>
<br />
<br />

<Button
variant='outlined'
onClick={async () => {
await dispatch(thunkLoadFile(preset, preset.presetName))
}
}
>
LOAD EXAMPLE
</Button>
{hasDrivers && isPageEmpty && (
<Typography>
Great! Feel free to add now elements like sliders or buttons via
changing to layout mode and clicking the plus button in the top
right corner of this app!
</Typography>
)}
{!hasDrivers && (
<Button
variant='outlined'
onClick={async () => {
await dispatch(thunkLoadFile(preset, preset.presetName))
}}
>
LOAD EXAMPLE
</Button>
)}
<br />
<br />
{!hasDrivers && (
<Button
variant='outlined'
onClick={() =>
dispatch(
togglePage({
pageType: PAGE_TYPES.MIDI_DRIVER_MODE
})
)
}
>
ENABLE MIDI DRIVER
</Button>
)}

<Button
variant='outlined'
onClick={

()=> dispatch(
togglePage({
pageType: PAGE_TYPES.MIDI_DRIVER_MODE
})
)
}
>
ENABLE MIDI DRIVER
</Button>
<br />
<br />

Expand Down
37 changes: 19 additions & 18 deletions src/components/menu-app-bar/MenuAppBarCmp.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ const {
selectCc,
selectMidiDriverInput,
//selectMidiChannelInput,
addMidiCcListener
addMidiCcListener,
togglePage
} = { ...ViewSettingsAction, ...MidiSlidersAction }

export const MenuAppBar = MenuAppBarCmp
Expand Down Expand Up @@ -103,7 +104,7 @@ function MenuAppBarCmp(props) {
</Typography>
)}
{isLayoutMode && (
<>
<React.Fragment>
<Typography className={classes.typoColorStyle}>
Layout Mode Running...
</Typography>
Expand Down Expand Up @@ -145,10 +146,10 @@ function MenuAppBarCmp(props) {
icon={<CancelIcon />}
isInvisible={!isLayoutMode}
/>
</>
</React.Fragment>
)}
{pageType === PAGE_TYPES.GLOBAL_MODE && (
<>
<React.Fragment>
<Typography className={classes.typoColorStyle}>
{presetName || ''}
</Typography>
Expand All @@ -166,34 +167,34 @@ function MenuAppBarCmp(props) {
>
Trigger All MIDI
</Button>
</>
</React.Fragment>
)}
{[PAGE_TYPES.MIDI_DRIVER_MODE, PAGE_TYPES.GLOBAL_MODE].includes(
pageType
) && (
<>
<React.Fragment>
<Button
className={classes.resetButton}
variant='contained'
onClick={async () => await dispatch(initApp())}
>
Detect Driver
</Button>
<Button
className={classes.resetButton}
variant='contained'
onClick={() => window.location.reload()}
onClick={() =>
dispatch(
togglePage({
pageType: PAGE_TYPES.HOME_MODE
})
)
}
>
Reload
Go Back To Main View
</Button>

<Button
className={classes.resetButton}
variant='contained'
onClick={() => window.localStorage.clear()}
onClick={async () => await dispatch(initApp())}
>
Clear Cache
Detect Driver
</Button>
</>
</React.Fragment>
)}
{[PAGE_TYPES.HOME_MODE].includes(pageType) && (
<Fragment>
Expand Down

1 comment on commit 4f6e159

@vercel
Copy link

@vercel vercel bot commented on 4f6e159 Dec 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.