Skip to content

Commit 351e9f7

Browse files
gvelez17gvelez17
authored
Merge pull request #591 from Whats-Cookin/video-fixes
Video fixes
2 parents 4199858 + 813941c commit 351e9f7

File tree

6 files changed

+706
-103
lines changed

6 files changed

+706
-103
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import Present from './components/Present'
2626
import RequestRating from './components/RequestRating'
2727
import BadgeEmbed from './components/BadgeEmbed'
2828
import BadgeView from './components/BadgeView'
29+
import BadgeGallery from './components/BadgeGallery'
2930
import './App.css'
3031

3132
const App = () => {
@@ -195,6 +196,7 @@ const App = () => {
195196
<Route path='/present/:id' element={<Present />} />
196197
<Route path='/badge-embed/:id' element={<BadgeEmbed />} />
197198
<Route path='/badge' element={<BadgeView />} />
199+
<Route path='/badge-gallery' element={<BadgeGallery />} />
198200
<Route
199201
path='/request-rating'
200202
element={

‎src/components/BadgeGallery/index.tsx‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
import React from 'react'
2+
import { Container, Typography, Box, Grid, Paper, Divider, Chip } from '@mui/material'
3+
import VideoBadge from '../VideoBadge'
4+
import VideoBadgeEnhanced from '../VideoBadge/VideoBadgeEnhanced'
5+
import { BACKEND_BASE_URL } from '../../utils/settings'
6+
7+
/**
8+
* Gallery page to preview all badge variations
9+
* Route: /badge-gallery
10+
*/
11+
const BadgeGallery: React.FC = () => {
12+
// Example claim URIs for demonstration
13+
const exampleClaims = {
14+
withVideo: `${BACKEND_BASE_URL}/claims/124446`, // Replace with actual claim with video
15+
rated: `${BACKEND_BASE_URL}/claims/124446`, // Example rated claim
16+
achievement: `${BACKEND_BASE_URL}/claims/124446` // Example achievement
17+
}
18+
19+
return (
20+
<Container maxWidth='xl' sx={{ py: 6 }}>
21+
<Typography variant='h3' sx={{ mb: 2, fontWeight: 700 }}>
22+
Video Badge Design Gallery
23+
</Typography>
24+
<Typography variant='body1' sx={{ mb: 3, color: 'text.secondary' }}>
25+
Preview all badge variations and sizes. Use this to test designs before deployment.
26+
</Typography>
27+
<Box sx={{ mb: 6, p: 3, backgroundColor: '#f0f7ff', borderRadius: 2 }}>
28+
<Typography variant='h6' sx={{ mb: 1 }}>
29+
Comparing Designs
30+
</Typography>
31+
<Typography variant='body2' sx={{ color: 'text.secondary' }}>
32+
<strong>Enhanced Version:</strong> Polished design with better hierarchy, animations, and visual appeal
33+
<br />
34+
<strong>Original Version:</strong> Current production version for comparison
35+
</Typography>
36+
</Box>
37+
38+
{/* Enhanced vs Original Comparison */}
39+
<Box sx={{ mb: 8 }}>
40+
<Typography variant='h4' sx={{ mb: 3, fontWeight: 600 }}>
41+
Enhanced Design (NEW)
42+
</Typography>
43+
<Grid container spacing={4}>
44+
<Grid item xs={12} md={6}>
45+
<Paper sx={{ p: 3, textAlign: 'center' }}>
46+
<Chip label='NEW - Enhanced' color='primary' size='small' sx={{ mb: 2 }} />
47+
<Typography variant='h6' sx={{ mb: 2 }}>
48+
Standard (600px)
49+
</Typography>
50+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
51+
<VideoBadgeEnhanced claimUri={exampleClaims.withVideo} />
52+
</Box>
53+
</Paper>
54+
</Grid>
55+
<Grid item xs={12} md={6}>
56+
<Paper sx={{ p: 3, textAlign: 'center' }}>
57+
<Chip label='NEW - Enhanced' color='primary' size='small' sx={{ mb: 2 }} />
58+
<Typography variant='h6' sx={{ mb: 2 }}>
59+
Compact (320px)
60+
</Typography>
61+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
62+
<VideoBadgeEnhanced claimUri={exampleClaims.withVideo} compact={true} />
63+
</Box>
64+
</Paper>
65+
</Grid>
66+
</Grid>
67+
</Box>
68+
69+
<Divider sx={{ my: 6 }} />
70+
71+
{/* Original for Comparison */}
72+
<Box sx={{ mb: 8 }}>
73+
<Typography variant='h4' sx={{ mb: 3, fontWeight: 600 }}>
74+
Original Design (for comparison)
75+
</Typography>
76+
<Grid container spacing={4}>
77+
<Grid item xs={12} md={6}>
78+
<Paper sx={{ p: 3, textAlign: 'center' }}>
79+
<Chip label='Current' variant='outlined' size='small' sx={{ mb: 2 }} />
80+
<Typography variant='h6' sx={{ mb: 2 }}>
81+
Standard
82+
</Typography>
83+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
84+
<VideoBadge claimUri={exampleClaims.withVideo} />
85+
</Box>
86+
</Paper>
87+
</Grid>
88+
<Grid item xs={12} md={6}>
89+
<Paper sx={{ p: 3, textAlign: 'center' }}>
90+
<Chip label='Current' variant='outlined' size='small' sx={{ mb: 2 }} />
91+
<Typography variant='h6' sx={{ mb: 2 }}>
92+
Compact
93+
</Typography>
94+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
95+
<VideoBadge claimUri={exampleClaims.withVideo} compact={true} />
96+
</Box>
97+
</Paper>
98+
</Grid>
99+
</Grid>
100+
</Box>
101+
102+
<Divider sx={{ my: 6 }} />
103+
104+
{/* Theme Variations - Enhanced */}
105+
<Box sx={{ mb: 8 }}>
106+
<Typography variant='h4' sx={{ mb: 3, fontWeight: 600 }}>
107+
Theme Variations (Enhanced)
108+
</Typography>
109+
<Grid container spacing={4}>
110+
<Grid item xs={12} md={6}>
111+
<Paper sx={{ p: 3, backgroundColor: '#f5f5f5' }}>
112+
<Typography variant='h6' sx={{ mb: 2 }}>
113+
Light Theme
114+
</Typography>
115+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
116+
<VideoBadgeEnhanced claimUri={exampleClaims.withVideo} theme='light' />
117+
</Box>
118+
</Paper>
119+
</Grid>
120+
<Grid item xs={12} md={6}>
121+
<Paper sx={{ p: 3, backgroundColor: '#0a0a0a' }}>
122+
<Typography variant='h6' sx={{ mb: 2, color: 'white' }}>
123+
Dark Theme
124+
</Typography>
125+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
126+
<VideoBadgeEnhanced claimUri={exampleClaims.withVideo} theme='dark' />
127+
</Box>
128+
</Paper>
129+
</Grid>
130+
</Grid>
131+
</Box>
132+
133+
<Divider sx={{ my: 6 }} />
134+
135+
{/* Claim Type Variations */}
136+
<Box sx={{ mb: 8 }}>
137+
<Typography variant='h4' sx={{ mb: 3, fontWeight: 600 }}>
138+
Claim Type Variations
139+
</Typography>
140+
<Grid container spacing={4}>
141+
<Grid item xs={12} md={6}>
142+
<Paper sx={{ p: 3 }}>
143+
<Typography variant='h6' sx={{ mb: 2 }}>
144+
Rated Claim (with stars)
145+
</Typography>
146+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
147+
<VideoBadge claimUri={exampleClaims.rated} />
148+
</Box>
149+
</Paper>
150+
</Grid>
151+
<Grid item xs={12} md={6}>
152+
<Paper sx={{ p: 3 }}>
153+
<Typography variant='h6' sx={{ mb: 2 }}>
154+
Achievement Claim
155+
</Typography>
156+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
157+
<VideoBadge claimUri={exampleClaims.achievement} />
158+
</Box>
159+
</Paper>
160+
</Grid>
161+
</Grid>
162+
</Box>
163+
164+
<Divider sx={{ my: 6 }} />
165+
166+
{/* Usage Instructions */}
167+
<Box>
168+
<Typography variant='h4' sx={{ mb: 3, fontWeight: 600 }}>
169+
Usage
170+
</Typography>
171+
<Paper sx={{ p: 4, backgroundColor: '#f8f9fa' }}>
172+
<Typography variant='h6' sx={{ mb: 2 }}>
173+
Direct Link:
174+
</Typography>
175+
<Typography variant='body2' sx={{ mb: 3, fontFamily: 'monospace', color: 'text.secondary' }}>
176+
/badge?claim=https://live.linkedtrust.us/claims/ID&compact=true&theme=dark
177+
</Typography>
178+
179+
<Typography variant='h6' sx={{ mb: 2 }}>
180+
Component Usage:
181+
</Typography>
182+
<Paper sx={{ p: 2, backgroundColor: '#1e1e1e', color: '#d4d4d4', fontFamily: 'monospace', fontSize: 14 }}>
183+
<pre style={{ margin: 0 }}>
184+
{`import VideoBadge from './components/VideoBadge'
185+
186+
<VideoBadge
187+
claimUri="https://live.linkedtrust.us/claims/124446"
188+
compact={false}
189+
theme="light"
190+
/>`}
191+
</pre>
192+
</Paper>
193+
</Paper>
194+
</Box>
195+
</Container>
196+
)
197+
}
198+
199+
export default BadgeGallery

‎src/components/Endorse/index.test.tsx‎

Lines changed: 22 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,31 @@ describe('Endorse Component', () => {
2727
claim: 'ACHIEVEMENT',
2828
statement: 'Completed the project successfully',
2929
subject: 'https://example.com/person/john',
30-
issuer: {
31-
name: 'John Doe',
32-
image: 'https://example.com/avatar.jpg'
33-
}
30+
effectiveDate: '2026-02-14'
31+
}
32+
33+
const mockReportResponse = {
34+
claim: mockClaim,
35+
validations: [],
36+
summary: { totalValidations: 0, averageConfidence: 0, consensusValid: false }
37+
}
38+
39+
const commonProps = {
40+
toggleSnackbar: vi.fn(),
41+
setSnackbarMessage: vi.fn(),
42+
setLoading: vi.fn()
3443
}
3544

3645
beforeEach(() => {
3746
vi.clearAllMocks()
3847
})
3948

4049
test('shows video suggestion alert when video=true parameter is present', async () => {
41-
vi.mocked(api.getClaim).mockResolvedValue({ data: { claim: mockClaim } })
42-
vi.mocked(api.getClaimReport).mockResolvedValue({ data: { validations: [] } })
50+
vi.mocked(api.getClaim).mockResolvedValue({ data: { claim: mockClaim } } as any)
51+
vi.mocked(api.getClaimReport).mockResolvedValue({ data: mockReportResponse } as any)
4352

4453
const claimUri = 'https://live.linkedtrust.us/claims/123'
45-
renderWithRouter(<Endorse />, {
54+
renderWithRouter(<Endorse {...commonProps} />, {
4655
route: `/endorse?claim=${encodeURIComponent(claimUri)}&video=true`
4756
})
4857

@@ -52,11 +61,11 @@ describe('Endorse Component', () => {
5261
})
5362

5463
test('does not show video suggestion alert when video parameter is missing', async () => {
55-
vi.mocked(api.getClaim).mockResolvedValue({ data: { claim: mockClaim } })
56-
vi.mocked(api.getClaimReport).mockResolvedValue({ data: { validations: [] } })
64+
vi.mocked(api.getClaim).mockResolvedValue({ data: { claim: mockClaim } } as any)
65+
vi.mocked(api.getClaimReport).mockResolvedValue({ data: mockReportResponse } as any)
5766

5867
const claimUri = 'https://live.linkedtrust.us/claims/123'
59-
renderWithRouter(<Endorse />, {
68+
renderWithRouter(<Endorse {...commonProps} />, {
6069
route: `/endorse?claim=${encodeURIComponent(claimUri)}`
6170
})
6271

@@ -67,46 +76,17 @@ describe('Endorse Component', () => {
6776
expect(screen.queryByText(/A video endorsement would be especially valuable/i)).not.toBeInTheDocument()
6877
})
6978

70-
test('shows friendly header with issuer name', async () => {
71-
vi.mocked(api.getClaim).mockResolvedValue({ data: { claim: mockClaim } })
72-
vi.mocked(api.getClaimReport).mockResolvedValue({ data: { validations: [] } })
73-
74-
const claimUri = 'https://live.linkedtrust.us/claims/123'
75-
renderWithRouter(<Endorse />, {
76-
route: `/endorse?claim=${encodeURIComponent(claimUri)}`
77-
})
78-
79-
await waitFor(() => {
80-
expect(screen.getByText(/John Doe has requested your endorsement/i)).toBeInTheDocument()
81-
})
82-
})
83-
8479
test('works with subject parameter (backward compatibility)', async () => {
85-
vi.mocked(api.getClaim).mockResolvedValue({ data: { claim: mockClaim } })
86-
vi.mocked(api.getClaimReport).mockResolvedValue({ data: { validations: [] } })
80+
vi.mocked(api.getClaim).mockResolvedValue({ data: { claim: mockClaim } } as any)
81+
vi.mocked(api.getClaimReport).mockResolvedValue({ data: mockReportResponse } as any)
8782

8883
const claimUri = 'https://live.linkedtrust.us/claims/123'
89-
renderWithRouter(<Endorse />, {
84+
renderWithRouter(<Endorse {...commonProps} />, {
9085
route: `/endorse?subject=${encodeURIComponent(claimUri)}`
9186
})
9287

9388
await waitFor(() => {
9489
expect(screen.getByText(/Endorse This Claim/i)).toBeInTheDocument()
9590
})
9691
})
97-
98-
test('shows default header when issuer name is missing', async () => {
99-
const claimNoIssuer = { ...mockClaim, issuer: {} }
100-
vi.mocked(api.getClaim).mockResolvedValue({ data: { claim: claimNoIssuer } })
101-
vi.mocked(api.getClaimReport).mockResolvedValue({ data: { validations: [] } })
102-
103-
const claimUri = 'https://live.linkedtrust.us/claims/123'
104-
renderWithRouter(<Endorse />, {
105-
route: `/endorse?claim=${encodeURIComponent(claimUri)}`
106-
})
107-
108-
await waitFor(() => {
109-
expect(screen.getByText(/Endorse This Claim/i)).toBeInTheDocument()
110-
})
111-
})
11292
})

0 commit comments

Comments
 (0)