Add video playback to validation dialog and graph legend

gvelez17 · claude · gvelez17 · commit 936c22aeb82c · 2026-01-02T22:22:48.000-07:00
ValidationDetailsDialog: - Video plays at top of dialog when attestation has video - Cleaner, minimal layout with responsive sizing - Supports both media array and legacy mediaUrl GraphLegend: - Collapsible legend in bottom-left of graph view - Shows edge type colors (Validated, Rated, Impact, Same as) - Small info button expands to show legend Types: - Add MediaItem interface and media array to Validation type 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/src/components/Certificate/ValidationDetailsDialog.tsx b/src/components/Certificate/ValidationDetailsDialog.tsx
@@ -1,199 +1,123 @@
 import React from 'react'
-import { Dialog, DialogContent, IconButton, Box, Typography, Link as MuiLink } from '@mui/material'
+import { Dialog, DialogContent, IconButton, Box, Typography, Link as MuiLink, Chip } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import VideocamIcon from '@mui/icons-material/Videocam'
 import { ValidationDetailsDialogProps } from '../../types/certificate'
 import { useTheme, useMediaQuery } from '@mui/material'
 
 const ValidationDetailsDialog: React.FC<ValidationDetailsDialogProps> = ({ open, onClose, validation }) => {
   const theme = useTheme()
-  const isXs = useMediaQuery(theme.breakpoints.down('sm'))
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
 
   if (!validation) return null
 
+  // Get video from media array or legacy mediaUrl
+  const videoUrl = validation.media?.find(m => m.type === 'video')?.url || validation.mediaUrl
+  const hasVideo = !!videoUrl
+
   return (
     <Dialog
       open={open}
       onClose={onClose}
-      maxWidth={false}
+      maxWidth='sm'
+      fullWidth
       sx={{
         '& .MuiDialog-paper': {
-          width: { xs: '95%', sm: '90%', md: '85%' },
-          maxWidth: '800px',
-          maxHeight: { xs: '95vh', sm: '90vh' },
-          borderRadius: { xs: '8px', sm: '10px', md: '12px' },
-          backgroundColor: '#FFFFFF',
-          overflowY: 'auto'
+          borderRadius: 3,
+          maxHeight: '90vh'
         }
       }}
     >
-      <DialogContent sx={{ p: 0, position: 'relative' }}>
+      <DialogContent sx={{ p: 0 }}>
+        {/* Close button */}
         <IconButton
           onClick={onClose}
           sx={{
             position: 'absolute',
-            right: { xs: 6, sm: 8 },
-            top: { xs: 6, sm: 8 },
-            color: '#212529',
+            right: 8,
+            top: 8,
             zIndex: 1,
-            padding: { xs: '4px', sm: '8px' }
+            bgcolor: 'background.paper',
+            '&:hover': { bgcolor: 'action.hover' }
           }}
-          size={isXs ? 'small' : 'medium'}
+          size='small'
         >
-          <CloseIcon fontSize={isXs ? 'small' : 'medium'} />
+          <CloseIcon fontSize='small' />
         </IconButton>
-        <Box sx={{ padding: { xs: 2, sm: 2.5, md: 3 } }}>
-          <Box sx={{ marginBottom: { xs: 2, sm: 2.5, md: 3 } }}>
-            {validation.subject && (
-              <Box
-                sx={{
-                  fontSize: { xs: '16px', sm: '18px', md: '20px' },
-                  fontWeight: 500,
-                  color: '#2D6A4F',
-                  marginBottom: { xs: 1.5, sm: 2 },
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px',
-                  flexWrap: 'wrap'
-                }}
-              >
-                <MuiLink
-                  href={validation.sourceURI}
-                  target='_blank'
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '4px',
-                    color: 'inherit',
-                    textDecoration: 'none',
-                    '&:hover': {
-                      textDecoration: 'underline'
-                    },
-                    wordBreak: 'break-word'
-                  }}
-                >
-                  {validation.sourceURI}
-                  <OpenInNewIcon sx={{ fontSize: { xs: 16, sm: 18, md: 20 } }} />
-                </MuiLink>
-              </Box>
-            )}
-            <Typography
-              sx={{
-                fontSize: { xs: '18px', sm: '20px', md: '24px' },
-                fontWeight: 500,
-                color: '#2D6A4F',
-                marginBottom: { xs: 1.5, sm: 2 }
-              }}
-            >
-              {validation.issuer_name}
+
+        {/* Video section */}
+        {hasVideo && (
+          <Box sx={{ bgcolor: 'black', width: '100%' }}>
+            <video
+              controls
+              style={{ width: '100%', maxHeight: isMobile ? 200 : 300, display: 'block' }}
+              src={videoUrl}
+            />
+          </Box>
+        )}
+
+        {/* Content */}
+        <Box sx={{ p: 3 }}>
+          {/* Issuer name */}
+          <Typography variant='h6' fontWeight={600} gutterBottom>
+            {validation.issuer_name}
+          </Typography>
+
+          {/* How known chip */}
+          {validation.howKnown && (
+            <Chip
+              label={validation.howKnown.replace(/_/g, ' ').toLowerCase()}
+              size='small'
+              variant='outlined'
+              sx={{ mb: 2, textTransform: 'capitalize' }}
+            />
+          )}
+
+          {/* Statement */}
+          {validation.statement && (
+            <Typography variant='body1' color='text.secondary' sx={{ mb: 2, lineHeight: 1.6 }}>
+              "{validation.statement}"
             </Typography>
-            <Typography
-              sx={{
-                fontSize: { xs: '14px', sm: '15px', md: '16px' },
-                color: '#212529',
-                marginBottom: { xs: 1.5, sm: 2 },
-                lineHeight: 1.6
-              }}
-            >
-              {validation.statement}
+          )}
+
+          {/* Date */}
+          {validation.effectiveDate && (
+            <Typography variant='body2' color='text.secondary' sx={{ mb: 2 }}>
+              {new Date(validation.effectiveDate).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+              })}
             </Typography>
-            <Typography
+          )}
+
+          {/* Source link */}
+          {validation.sourceURI && (
+            <MuiLink
+              href={validation.sourceURI}
+              target='_blank'
+              rel='noopener noreferrer'
               sx={{
-                fontSize: { xs: '12px', sm: '13px', md: '14px' },
-                color: '#495057',
-                display: 'flex',
+                display: 'inline-flex',
                 alignItems: 'center',
-                gap: '8px'
+                gap: 0.5,
+                fontSize: '0.875rem',
+                color: 'primary.main'
               }}
             >
-              {validation.effectiveDate &&
-                new Date(validation.effectiveDate).toLocaleDateString('en-US', {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric'
-                })}
-            </Typography>
-          </Box>
-          <Box sx={{ marginTop: { xs: 2, sm: 2.5, md: 3 } }}>
-            {validation.howKnown && (
-              <Box sx={{ marginBottom: { xs: 1.5, sm: 2 } }}>
-                <Typography
-                  sx={{
-                    fontWeight: 500,
-                    color: '#495057',
-                    minWidth: { xs: '120px', sm: '140px', md: '150px' },
-                    display: { xs: 'block', sm: 'inline-block' },
-                    fontSize: { xs: '13px', sm: '14px' }
-                  }}
-                >
-                  How Known:
-                </Typography>
-                <Typography
-                  sx={{
-                    color: '#212529',
-                    fontSize: { xs: '13px', sm: '14px' }
-                  }}
-                >
-                  {validation.howKnown.replace(/_/g, ' ')}
-                </Typography>
-              </Box>
-            )}
-            {validation.sourceURI && (
-              <Box sx={{ marginBottom: { xs: 1.5, sm: 2 } }}>
-                <Typography
-                  sx={{
-                    fontWeight: 500,
-                    color: '#495057',
-                    minWidth: { xs: '120px', sm: '140px', md: '150px' },
-                    display: { xs: 'block', sm: 'inline-block' },
-                    fontSize: { xs: '13px', sm: '14px' }
-                  }}
-                >
-                  Source:
-                </Typography>
-                <Typography>
-                  <MuiLink
-                    href={validation.sourceURI}
-                    target='_blank'
-                    sx={{
-                      color: '#2D6A4F',
-                      textDecoration: 'none',
-                      fontSize: { xs: '13px', sm: '14px' },
-                      '&:hover': {
-                        textDecoration: 'underline'
-                      },
-                      wordBreak: 'break-word'
-                    }}
-                  >
-                    {validation.sourceURI}
-                  </MuiLink>
-                </Typography>
-              </Box>
-            )}
-            {validation.confidence !== undefined && (
-              <Box sx={{ marginBottom: { xs: 1.5, sm: 2 } }}>
-                <Typography
-                  sx={{
-                    fontWeight: 500,
-                    color: '#495057',
-                    minWidth: { xs: '120px', sm: '140px', md: '150px' },
-                    display: { xs: 'block', sm: 'inline-block' },
-                    fontSize: { xs: '13px', sm: '14px' }
-                  }}
-                >
-                  Confidence:
-                </Typography>
-                <Typography
-                  sx={{
-                    color: '#212529',
-                    fontSize: { xs: '13px', sm: '14px' }
-                  }}
-                >
-                  {validation.confidence}
-                </Typography>
-              </Box>
-            )}
-          </Box>
+              View source
+              <OpenInNewIcon sx={{ fontSize: 16 }} />
+            </MuiLink>
+          )}
+
+          {/* Video indicator if video exists but is above */}
+          {hasVideo && (
+            <Box sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1, color: 'text.secondary' }}>
+              <VideocamIcon fontSize='small' />
+              <Typography variant='body2'>Video testimony</Typography>
+            </Box>
+          )}
         </Box>
       </DialogContent>
     </Dialog>
diff --git a/src/containers/Explore/GraphLegend.tsx b/src/containers/Explore/GraphLegend.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import { Box, Typography, IconButton, Collapse, useTheme } from '@mui/material'
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import CloseIcon from '@mui/icons-material/Close'
+import { edgeColors } from '../../theme/colors'
+
+const legendItems = [
+  { label: 'Validated', color: edgeColors.validated },
+  { label: 'Rated', color: edgeColors.rated },
+  { label: 'Impact', color: edgeColors.impact },
+  { label: 'Same as', color: edgeColors.same_as }
+]
+
+const GraphLegend: React.FC = () => {
+  const [open, setOpen] = useState(false)
+  const theme = useTheme()
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        bottom: 80,
+        left: 16,
+        zIndex: 1000
+      }}
+    >
+      {/* Toggle button */}
+      {!open && (
+        <IconButton
+          onClick={() => setOpen(true)}
+          size='small'
+          sx={{
+            bgcolor: theme.palette.background.paper,
+            boxShadow: 2,
+            '&:hover': { bgcolor: theme.palette.action.hover }
+          }}
+        >
+          <InfoOutlinedIcon fontSize='small' />
+        </IconButton>
+      )}
+
+      {/* Legend panel */}
+      <Collapse in={open}>
+        <Box
+          sx={{
+            bgcolor: theme.palette.background.paper,
+            borderRadius: 2,
+            boxShadow: 3,
+            p: 1.5,
+            minWidth: 120
+          }}
+        >
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+            <Typography variant='caption' fontWeight={600} color='text.secondary'>
+              Edge Types
+            </Typography>
+            <IconButton size='small' onClick={() => setOpen(false)} sx={{ p: 0.25 }}>
+              <CloseIcon sx={{ fontSize: 14 }} />
+            </IconButton>
+          </Box>
+
+          {legendItems.map(item => (
+            <Box key={item.label} sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 0.25 }}>
+              <Box
+                sx={{
+                  width: 16,
+                  height: 3,
+                  bgcolor: item.color,
+                  borderRadius: 1
+                }}
+              />
+              <Typography variant='caption' color='text.secondary'>
+                {item.label}
+              </Typography>
+            </Box>
+          ))}
+        </Box>
+      </Collapse>
+    </Box>
+  )
+}
+
+export default GraphLegend
diff --git a/src/containers/Explore/index.tsx b/src/containers/Explore/index.tsx
@@ -13,6 +13,7 @@ import cytoscapeNodeHtmlLabel from 'cytoscape-node-html-label'
 import './CustomNodeStyles.css'
 import GraphDetailModal from '../../components/GraphDetailModal'
 import CenterFocusStrongIcon from '@mui/icons-material/CenterFocusStrong'
+import GraphLegend from './GraphLegend'
 
 // Toggle SAME_AS node merging (set to false to see all nodes separately)
 const MERGE_SAME_AS_NODES = true
@@ -497,6 +498,7 @@ const Explore = (homeProps: IHomeProps) => {
         />
       </Box>
       <GraphinfButton />
+      <GraphLegend />
       <Tooltip title='Fit to Screen' placement='left'>
         <Fab
           color='primary'
diff --git a/src/types/certificate.ts b/src/types/certificate.ts
