diff --git a/ui/src/playlist/PlaylistList.js b/ui/src/playlist/PlaylistList.js index 1baf9015f..434c8cd20 100644 --- a/ui/src/playlist/PlaylistList.js +++ b/ui/src/playlist/PlaylistList.js @@ -12,6 +12,7 @@ import { } from 'react-admin' import Switch from '@material-ui/core/Switch' import { DurationField, List, Writable, isWritable } from '../common' +import { useMediaQuery } from '@material-ui/core' const PlaylistFilter = (props) => ( @@ -55,24 +56,34 @@ const TogglePublicInput = ({ permissions, resource, record = {}, source }) => { ) } -const PlaylistList = ({ permissions, ...props }) => ( - }> - isWritable(r && r.owner)}> - - - - - - - - - - - -) +const PlaylistList = ({ permissions, ...props }) => { + const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) + const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md')) + + return ( + }> + isWritable(r && r.owner)} + > + + + {isDesktop && } + {isDesktop && } + {isDesktop && } + {!isXsmall && ( + + )} + + + + + + ) +} export default PlaylistList