Finalize Details, maybe fix endo issue?

README.md

@@ -92,3 +92,18 @@ To learn React, check out the [React documentation](https://reactjs.org/).
 
 - Anything in _package.json_
 - [Country flags](https://github.com/hjnilsson/country-flags)
+
+## TODOs
+
+### Fonts documentation
+
+1. How it all works
+2. MB Studio uploads vs. UI
+3. Truly img-only instances (ASL, maybe Mongolian, etc.) w/SVG fallback
+4. If it works: `@font-face` in CSS, and using it in _theme.ts_.
+5. Relationship betwee img-only (the dataset col) and how code checks for it: if `Font Image Alt` is empty then use Endonym, otherwise use img. Places in code that use this: Details, table, popups, tooltips (others?)
+6. Probably something I'm missing.
+
+### Development
+
+Set up [quicker debugging](https://code.visualstudio.com/updates/v1_48#_debug-open-link-command).

package.json

@@ -16,6 +16,7 @@
     "@types/react-map-gl": "^5.2.7",
     "@types/react-router-dom": "^5.1.5",
     "@types/react-window": "^1.8.2",
+    "@types/webfontloader": "^1.6.32",
     "jest-canvas-mock": "^2.2.0",
     "match-sorter": "^4.2.0",
     "material-table": "^1.66.0",
@@ -29,7 +30,8 @@
     "react-scripts": "3.4.1",
     "react-share": "^4.2.1",
     "react-window": "^1.8.5",
-    "typescript": "3.9.5"
+    "typescript": "3.9.5",
+    "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^3.6.0",

public/index.html

@@ -35,10 +35,6 @@
       content="https://raw.githubusercontent.com/Language-Mapping/config/master/img/twitter.png"
     />
     <meta name="twitter:card" content="summary_large_image" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Gentium+Basic:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap"
-      rel="stylesheet"
-    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

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'
 
@@ -22,6 +23,8 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
+// TODO: don't make close go back in history, or some other smooth way:
+// https://stackoverflow.com/questions/47409586
 export const SimpleDialog: FC<DialogProps> = (props) => {
   const classes = useStyles()
   const { onClose, children } = props

src/components/details/DetailsPanel.tsx

@@ -6,7 +6,9 @@ import { Typography } from '@material-ui/core'
 import { GlobalContext } from 'components'
 import { LegendSwatch } from 'components/legend'
 import { RecordDescription } from 'components/results'
-import { isURL, correctDropboxURL, prettyTruncateList } from '../../utils'
+import { correctDropboxURL } from '../../utils' // TODO: put back if needed
+import { Media } from './Media'
+
 // TODO: cell strength bars for Size
 // import { COMM_SIZE_COL_MAP } from 'components/results/config'
 
@@ -18,12 +20,14 @@ type EndoImageComponent = {
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     intro: {
-      padding: '1em 0',
+      padding: '0.65em 0 0.3em',
       textAlign: 'center',
       borderBottom: `solid 1px ${theme.palette.divider}`,
+      marginBottom: '1em',
     },
     // Gross but it makes `Anashinaabemowin` fit
     detailsPanelHeading: {
+      // TODO: cool if you can make this work: position: 'sticky', top: '3rem',
       fontSize: '2.4rem',
       [theme.breakpoints.up('sm')]: {
         fontSize: '3rem',
@@ -34,17 +38,43 @@ const useStyles = makeStyles((theme: Theme) =>
       maxWidth: '95%',
     },
     neighborhoods: {
-      fontSize: '0.8rem',
+      fontSize: '0.75em',
+      color: theme.palette.text.secondary,
       fontStyle: 'italic',
     },
     description: {
       fontSize: theme.typography.caption.fontSize,
       padding: '0 0.25rem',
-      marginBottom: '2.4rem',
+      // marginBottom: '2.4rem', // bad for Explore on mobile!
+    },
+    region: {
+      display: 'inline-flex',
+      justifyContent: 'center',
+      padding: '0.25rem 4.5em',
+      paddingBottom: 0,
+      marginTop: '0.45em',
+      borderTop: `dashed 1px ${theme.palette.divider}`,
     },
-    prettyFlex: {
+    countriesList: {
+      padding: 0,
+      margin: 0,
+      listStyle: 'none',
+      // fontSize: theme.typography.caption.fontSize,
+      fontSize: '0.75em',
       display: 'flex',
+      columnGap: '0.5em',
+      alignItems: 'center',
       justifyContent: 'center',
+      fontStyle: 'italic',
+      color: theme.palette.text.secondary,
+      '& > * + *': {
+        marginLeft: '0.5em',
+      },
+      '& li': {
+        marginTop: 0,
+        fontSize: '0.85em',
+        color: theme.palette.text.secondary,
+      },
     },
   })
 )
@@ -113,10 +143,13 @@ export const DetailsPanel: FC = () => {
     Description,
     // Size, // TODO: cell strength bars for Size
     Town,
+    Countries,
+    Audio: audio,
+    Video: video,
+    'Font Image Alt': altImage,
     'World Region': WorldRegion,
   } = selFeatAttribs
   const { detailsPanelHeading, intro, description, neighborhoods } = classes
-  const isImage = isURL(Endonym)
   const regionSwatchColor =
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -131,7 +164,7 @@ export const DetailsPanel: FC = () => {
   return (
     <>
       <div className={intro}>
-        {(isImage && <EndoImageWrap url={Endonym} alt={Language} />) || (
+        {(altImage && <EndoImageWrap url={altImage} alt={Language} />) || (
           <Typography variant="h3" className={detailsPanelHeading}>
             {Endonym}
           </Typography>
@@ -143,9 +176,9 @@ export const DetailsPanel: FC = () => {
         )}
         {/* TODO: make "+4 more clickable to toggle popover" */}
         <Typography className={neighborhoods}>
-          {Neighborhoods ? prettyTruncateList(Neighborhoods) : Town}
+          {Neighborhoods || Town}
         </Typography>
-        <div className={classes.prettyFlex}>
+        <div className={classes.region}>
           <LegendSwatch
             legendLabel={WorldRegion}
             component="div"
@@ -154,6 +187,9 @@ export const DetailsPanel: FC = () => {
           />
           {/* TODO: cell strength bars for Size */}
         </div>
+        {/* <CountriesWithFlags countries={Countries} /> */}
+        <div className={classes.countriesList}>{Countries}</div>
+        <Media {...{ audio, video, language: Language }} />
       </div>
       <Typography variant="body2" className={description}>
         <RecordDescription text={Description} />

src/components/details/Media.tsx

@@ -0,0 +1,200 @@
+import React, { FC, useState } from 'react'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+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'
+
+type MediaProps = {
+  language: string
+  audio?: string
+  video?: string
+}
+
+type MediaChildProps = {
+  title?: string
+  url: string
+}
+
+type MediaListItemProps = {
+  label: string
+  icon: React.ReactNode
+  type: MediaKey
+  disabled?: boolean
+  handleClick: () => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    mediaRoot: {
+      columnGap: '1rem',
+      display: 'flex',
+      justifyContent: 'center',
+      listStyle: 'none',
+      margin: 0,
+      padding: 0,
+    },
+    mediaLink: {
+      alignItems: 'center',
+      display: 'flex',
+      fontSize: '0.8em',
+      textTransform: 'none',
+      '& svg': {
+        marginRight: '0.5em',
+      },
+    },
+    modalRoot: {
+      textAlign: 'center',
+      // Cheap way to override `DialogContent`
+      '& .MuiDialogContent-root': {
+        justifyContent: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        [theme.breakpoints.only('xs')]: {
+          paddingLeft: 0,
+          paddingRight: 0,
+        },
+      },
+    },
+    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<MediaChildProps> = (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 (
+    <div className={classes.videoContainer}>
+      <iframe
+        title={title}
+        src={urlPrepped}
+        frameBorder="0"
+        allow="encrypted-media"
+        allowFullScreen
+      />
+    </div>
+  )
+}
+
+const Audio: FC<MediaChildProps> = (props) => {
+  const { url } = props
+
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    <audio controls src={url}>
+      Your browser does not support the audio element.
+    </audio>
+  )
+}
+
+const MediaListItem: FC<MediaListItemProps> = (props) => {
+  const { label, icon, handleClick, disabled } = props
+  const classes = useStyles()
+  let title = ''
+
+  if (label === 'Audio') {
+    title = 'Listen to audio for this community'
+  } else if (label === 'Video') {
+    title = 'Watch video for this community'
+  }
+
+  return (
+    <li>
+      <Button
+        size="small"
+        color="primary"
+        className={classes.mediaLink}
+        disabled={disabled}
+        title={disabled ? '' : title}
+        onClick={(e: React.MouseEvent) => handleClick()}
+      >
+        {icon}
+        {label}
+      </Button>
+    </li>
+  )
+}
+
+const config = [
+  { label: 'Video', icon: <FiVideo />, type: 'video' },
+  { label: 'Audio', icon: <AiOutlineSound />, type: 'audio' },
+] as Omit<MediaListItemProps, 'setDialogContent'>[]
+
+export const Media: FC<MediaProps> = (props) => {
+  const { audio, video, language } = props
+  const classes = useStyles()
+  const [dialogContent, setDialogContent] = useState<MediaKey | null>(null)
+
+  // TODO: not full width dialog for audio
+  return (
+    <>
+      <SimpleDialog
+        fullScreen={dialogContent !== 'audio'}
+        maxWidth={dialogContent === 'audio' ? 'md' : 'xl'}
+        open={dialogContent !== null}
+        className={classes.modalRoot}
+        onClose={() => setDialogContent(null)}
+      >
+        <Typography variant="h3">{language}</Typography>
+        <Container
+          maxWidth="lg"
+          disableGutters
+          className={classes.dialogContent}
+        >
+          {dialogContent === 'video' && video && (
+            <YouTubeVideo title={language} url={video} />
+          )}
+          {dialogContent === 'audio' && audio && <Audio url={audio} />}
+        </Container>
+        <div>
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={() => setDialogContent(null)}
+          >
+            Back to map
+          </Button>
+        </div>
+      </SimpleDialog>
+      <ul className={classes.mediaRoot}>
+        {config.map((item) => (
+          <MediaListItem
+            key={item.label}
+            disabled={props[item.type] === ''}
+            {...item}
+            handleClick={() => setDialogContent(item.type)}
+          />
+        ))}
+      </ul>
+    </>
+  )
+}