From 742a790209c3090a0ddf246f58598465f37d8111 Mon Sep 17 00:00:00 2001 From: Jason Lampel Date: Mon, 31 Aug 2020 12:30:00 -0600 Subject: [PATCH 01/17] Details: media: init structure --- src/components/SimpleDialog.tsx | 1 + src/components/details/DetailsPanel.tsx | 5 + src/components/details/Media.tsx | 140 ++++++++++++++++++++++++ 3 files changed, 146 insertions(+) create mode 100644 src/components/details/Media.tsx diff --git a/src/components/SimpleDialog.tsx b/src/components/SimpleDialog.tsx index f02e1d85..41c6fb94 100644 --- a/src/components/SimpleDialog.tsx +++ b/src/components/SimpleDialog.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' + import { Dialog, DialogContent, DialogProps } from '@material-ui/core' import { DialogCloseBtn } from 'components' diff --git a/src/components/details/DetailsPanel.tsx b/src/components/details/DetailsPanel.tsx index 6757e99d..94fc5ac6 100644 --- a/src/components/details/DetailsPanel.tsx +++ b/src/components/details/DetailsPanel.tsx @@ -7,6 +7,7 @@ import { GlobalContext } from 'components' import { LegendSwatch } from 'components/legend' import { RecordDescription } from 'components/results' import { isURL, correctDropboxURL, prettyTruncateList } from '../../utils' +import { Media } from './Media' // TODO: cell strength bars for Size // import { COMM_SIZE_COL_MAP } from 'components/results/config' @@ -113,6 +114,9 @@ export const DetailsPanel: FC = () => { Description, // Size, // TODO: cell strength bars for Size Town, + Audio: audio, + Video: video, + 'Story Map': story, 'World Region': WorldRegion, } = selFeatAttribs const { detailsPanelHeading, intro, description, neighborhoods } = classes @@ -154,6 +158,7 @@ export const DetailsPanel: FC = () => { /> {/* TODO: cell strength bars for Size */} + diff --git a/src/components/details/Media.tsx b/src/components/details/Media.tsx new file mode 100644 index 00000000..ae4c066b --- /dev/null +++ b/src/components/details/Media.tsx @@ -0,0 +1,140 @@ +import React, { FC, useState } from 'react' +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' +import { Button } from '@material-ui/core' +import { FiVideo, FiMap } from 'react-icons/fi' +import { AiOutlineSound } from 'react-icons/ai' + +import { SimpleDialog } from 'components' + +type MediaKey = 'video' | 'audio' | 'story' + +type MediaProps = { + audio?: string + story?: string + video?: string +} + +type MediaChildProps = { + url: string +} + +type MediaListItemProps = { + label: string + icon: React.ReactNode + type: MediaKey + disabled?: boolean + handleClick: () => void +} + +type StyleProps = Pick + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + mediaRoot: { + display: 'flex', + listStyle: 'none', + padding: 0, + margin: 0, + justifyContent: 'center', + columnGap: '1rem', + }, + mediaLink: { + fontSize: '0.8em', + display: 'flex', + alignItems: 'center', + textTransform: 'none', + '& svg': { + marginRight: '0.5em', + }, + }, + endoModalRoot: { + // Cheap way to override `DialogContent` + '& .MuiDialogContent-root': { + alignItems: 'center', + display: 'flex', + flexDirection: 'column', + textAlign: 'center', + }, + }, + // Smaller than the default so that it is not as large as table modal + endoModalPaper: { + margin: `${theme.spacing(4)}px ${theme.spacing(3)}px`, + }, + }) +) + +const YouTubeVideo: FC = (props) => { + const { url } = props + + return
{url}
+} + +const SoundCloudAudio: FC = (props) => { + const { url } = props + + return
{url}
+} + +const StoryMap: FC = (props) => { + const { url } = props + + return
{url}
+} + +const MediaListItem: FC = (props) => { + const { label, icon, handleClick, disabled } = props + const classes = useStyles() + + return ( +
  • + +
    • + ) +} + +const config = [ + { label: 'Video', icon: , type: 'video' }, + { label: 'Audio', icon: , type: 'audio' }, + { label: 'Story Map', icon: , type: 'story' }, +] as Omit[] + +export const Media: FC = (props) => { + const { audio, video, story } = props + const classes = useStyles() + const [dialogContent, setDialogContent] = useState(null) + + return ( + <> + setDialogContent(null)} + PaperProps={{ + className: classes.endoModalPaper, + }} + > + {dialogContent === 'video' && video && } + {dialogContent === 'audio' && audio && } + {dialogContent === 'story' && story && } + +
      + {config.map((item) => ( + setDialogContent(item.type)} + /> + ))} +
    + + ) +} From f8b7cbade50a3c9c012940e6200e7984921b20a3 Mon Sep 17 00:00:00 2001 From: Jason Lampel Date: Mon, 31 Aug 2020 14:13:44 -0600 Subject: [PATCH 02/17] Details: video wired up and looking great; story maps: rm all references --- src/components/details/DetailsPanel.tsx | 3 +- src/components/details/Media.tsx | 115 +++++++++++++++++------- src/context/types.ts | 1 - 3 files changed, 82 insertions(+), 37 deletions(-) diff --git a/src/components/details/DetailsPanel.tsx b/src/components/details/DetailsPanel.tsx index 94fc5ac6..4ffb780f 100644 --- a/src/components/details/DetailsPanel.tsx +++ b/src/components/details/DetailsPanel.tsx @@ -116,7 +116,6 @@ export const DetailsPanel: FC = () => { Town, Audio: audio, Video: video, - 'Story Map': story, 'World Region': WorldRegion, } = selFeatAttribs const { detailsPanelHeading, intro, description, neighborhoods } = classes @@ -158,7 +157,7 @@ export const DetailsPanel: FC = () => { /> {/* TODO: cell strength bars for Size */} - + diff --git a/src/components/details/Media.tsx b/src/components/details/Media.tsx index ae4c066b..faf60aa8 100644 --- a/src/components/details/Media.tsx +++ b/src/components/details/Media.tsx @@ -1,20 +1,21 @@ import React, { FC, useState } from 'react' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' -import { Button } from '@material-ui/core' -import { FiVideo, FiMap } from 'react-icons/fi' +import { Container, Button, Typography } from '@material-ui/core' +import { FiVideo } from 'react-icons/fi' import { AiOutlineSound } from 'react-icons/ai' import { SimpleDialog } from 'components' -type MediaKey = 'video' | 'audio' | 'story' +type MediaKey = 'video' | 'audio' type MediaProps = { + language: string audio?: string - story?: string video?: string } type MediaChildProps = { + title?: string url: string } @@ -26,47 +27,82 @@ type MediaListItemProps = { handleClick: () => void } -type StyleProps = Pick - const useStyles = makeStyles((theme: Theme) => createStyles({ mediaRoot: { + columnGap: '1rem', display: 'flex', + justifyContent: 'center', listStyle: 'none', - padding: 0, margin: 0, - justifyContent: 'center', - columnGap: '1rem', + padding: 0, }, mediaLink: { - fontSize: '0.8em', - display: 'flex', alignItems: 'center', + display: 'flex', + fontSize: '0.8em', textTransform: 'none', '& svg': { marginRight: '0.5em', }, }, - endoModalRoot: { + modalRoot: { + textAlign: 'center', // Cheap way to override `DialogContent` '& .MuiDialogContent-root': { - alignItems: 'center', + justifyContent: 'center', display: 'flex', flexDirection: 'column', - textAlign: 'center', + [theme.breakpoints.only('xs')]: { + paddingLeft: 0, + paddingRight: 0, + }, }, }, - // Smaller than the default so that it is not as large as table modal - endoModalPaper: { - margin: `${theme.spacing(4)}px ${theme.spacing(3)}px`, + dialogContent: { + marginTop: '1em', + marginBottom: '1em', + }, + // CRED: this is almost a standard based on search results + videoContainer: { + height: 0, + paddingBottom: '56.25%', // 16:9 + paddingTop: 25, + position: 'relative', + '& iframe, object, embed': { + height: '100%', + left: 0, + position: 'absolute', + top: 0, + width: '100%', + }, }, }) ) const YouTubeVideo: FC = (props) => { - const { url } = props + const classes = useStyles() + const { url, title } = props + + // Proper syntax: + // https://www.youtube.com/embed/A6XUVjK9W4o + // https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG + const urlPrepped = url.replace( + 'https://www.youtube.com/playlist', + 'https://www.youtube.com/embed/videoseries' + ) - return
    {url}
    + return ( +
    +