-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(coscrad-frontend): move audio panel to a drawer (#342)
* WIP: building audio panel for index views * WIP: make changes from PR * WIP finish playlist detail presenter and index-to-detail flow * WIP: converted audio-panel to explicit return * fix issues after rebase * fix: type error * test(api): update stale snapshots --------- Co-authored-by: Aaron Plahn <[email protected]>
- Loading branch information
1 parent
9fce4f1
commit 05c565d
Showing
19 changed files
with
193 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
apps/coscrad-frontend/src/components/audio-panel/audio-panel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { MediaPlayer } from '@coscrad/media-player'; | ||
|
|
||
| interface AudioPanelProps { | ||
| url: string; | ||
| } | ||
|
|
||
| const AudioPanel = ({ url }: AudioPanelProps): JSX.Element => { | ||
| return <MediaPlayer audioUrl={url} />; | ||
| }; | ||
|
|
||
| export default AudioPanel; |
55 changes: 44 additions & 11 deletions
55
...scrad-frontend/src/components/resources/playlists/playlist-detail.full-view.presenter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,55 @@ | ||
| import { | ||
| ICategorizableDetailQueryResult, | ||
| IPlaylistEpisode, | ||
| IPlayListViewModel, | ||
| ResourceType, | ||
| } from '@coscrad/api-interfaces'; | ||
| import { Typography } from '@mui/material'; | ||
| import { useState } from 'react'; | ||
| import { ResourceDetailFullViewPresenter } from '../../../utils/generic-components/presenters/detail-views'; | ||
| import { EpisodePresenter } from './episode-presenter'; | ||
| import { HeadingLabel, IndexTable } from '../../../utils/generic-components/presenters/tables'; | ||
| import { CellRenderersDefinition } from '../../../utils/generic-components/presenters/tables/generic-index-table-presenter/types/cell-renderers-definition'; | ||
| import AudioPanel from '../../audio-panel/audio-panel'; | ||
| import { renderAggregateUrlCell } from '../utils/render-audio-preview'; | ||
|
|
||
| export const PlaylistDetailFullViewPresenter = ({ | ||
| name, | ||
| id, | ||
| episodes, | ||
| }: ICategorizableDetailQueryResult<IPlayListViewModel>): JSX.Element => ( | ||
| <ResourceDetailFullViewPresenter name={name} id={id} type={ResourceType.playlist}> | ||
| <Typography component={'div'}> | ||
| <Typography variant={'h5'}> Episodes </Typography> | ||
| {episodes.map((episode) => ( | ||
| <EpisodePresenter episode={episode} /> | ||
| ))} | ||
| </Typography> | ||
| </ResourceDetailFullViewPresenter> | ||
| ); | ||
| }: ICategorizableDetailQueryResult<IPlayListViewModel>): JSX.Element => { | ||
| const [url, setUrl] = useState<string | null>(null); | ||
|
|
||
| const headingLabels: HeadingLabel<IPlaylistEpisode>[] = [ | ||
| { | ||
| propertyKey: 'name', | ||
| headingLabel: 'Name', | ||
| }, | ||
| { | ||
| propertyKey: 'mediaItemUrl', | ||
| headingLabel: 'Audio', | ||
| }, | ||
| ]; | ||
|
|
||
| const cellRenderers: CellRenderersDefinition<IPlaylistEpisode> = { | ||
| // TODO Consider making the name property `MultilingualText` | ||
| // name: ({ name }) => renderMultilingualTextCell(name), | ||
| mediaItemUrl: ({ mediaItemUrl }) => | ||
| renderAggregateUrlCell(mediaItemUrl, (url: string) => setUrl(url)), | ||
| }; | ||
|
|
||
| return ( | ||
| <ResourceDetailFullViewPresenter name={name} id={id} type={ResourceType.playlist}> | ||
| <Typography component={'div'}> | ||
| <Typography variant={'h5'}> Episodes </Typography> | ||
| <IndexTable | ||
| headingLabels={headingLabels} | ||
| tableData={episodes} | ||
| cellRenderersDefinition={cellRenderers} | ||
| heading={'Episodes'} | ||
| filterableProperties={['name']} | ||
| /> | ||
| <AudioPanel url={url || ''} /> | ||
| </Typography> | ||
| </ResourceDetailFullViewPresenter> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
apps/coscrad-frontend/src/components/resources/utils/render-audio-preview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { PlayArrowRounded } from '@mui/icons-material'; | ||
| import { Button } from '@mui/material'; | ||
|
|
||
| export const renderAggregateUrlCell = (url: string, handleClick: (url: string) => void) => ( | ||
| <Button onClick={() => handleClick(url)}> | ||
| <PlayArrowRounded /> | ||
| </Button> | ||
| ); |
4 changes: 1 addition & 3 deletions
4
...ric-components/presenters/tables/generic-index-table-presenter/build-default-renderer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,4 @@ | ||
| import { IBaseViewModel } from '@coscrad/api-interfaces'; | ||
|
|
||
| export const buildDefaultRenderer = | ||
| <T extends IBaseViewModel>(propertyKey: keyof T) => | ||
| <T,>(propertyKey: keyof T) => | ||
| (input: T) => | ||
| <>{(JSON.stringify(input[propertyKey]) || '').replace(/"/g, '')}</>; |
Oops, something went wrong.