Skip to content

Commit 6e08687

Browse files
pauldambrapauldambra
committed
fix
1 parent 4a64676 commit 6e08687

File tree

1 file changed

+98
-43
lines changed
  • playground/nextjs/pages/replay-examples

1 file changed

+98
-43
lines changed

‎playground/nextjs/pages/replay-examples/media.tsx‎

Lines changed: 98 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,51 @@
11
import Hls from 'hls.js'
2-
import { useEffect, useRef } from 'react'
2+
import { useEffect, useRef, useState } from 'react'
3+
4+
function generateBase64PNG(width: number, height: number, complexity: number): string {
5+
const canvas = document.createElement('canvas')
6+
canvas.width = width
7+
canvas.height = height
8+
const ctx = canvas.getContext('2d')!
9+
10+
const gradient = ctx.createLinearGradient(0, 0, width, height)
11+
gradient.addColorStop(0, `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`)
12+
gradient.addColorStop(1, `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`)
13+
ctx.fillStyle = gradient
14+
ctx.fillRect(0, 0, width, height)
15+
16+
for (let i = 0; i < complexity; i++) {
17+
ctx.fillStyle = `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},${Math.random()})`
18+
ctx.fillRect(Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() * 100)
19+
}
20+
21+
ctx.font = 'bold 48px Arial'
22+
ctx.fillStyle = 'white'
23+
ctx.strokeStyle = 'black'
24+
ctx.lineWidth = 3
25+
ctx.textAlign = 'center'
26+
ctx.textBaseline = 'middle'
27+
const dataUrl = canvas.toDataURL('image/png')
28+
const sizeKB = Math.round((dataUrl.length * 0.75) / 1024)
29+
ctx.strokeText(`${sizeKB}KB`, width / 2, height / 2)
30+
ctx.fillText(`${sizeKB}KB`, width / 2, height / 2)
31+
32+
return canvas.toDataURL('image/png')
33+
}
334

435
export default function Media() {
536
const hlsVideoEl = useRef<HTMLVideoElement>(null)
37+
const [images, setImages] = useState<Record<string, string>>({})
38+
39+
useEffect(() => {
40+
setImages({
41+
small: generateBase64PNG(400, 400, 0),
42+
medium: generateBase64PNG(400, 400, 200),
43+
large: generateBase64PNG(400, 400, 1000),
44+
veryLarge: generateBase64PNG(800, 800, 1000),
45+
extraLarge: generateBase64PNG(1200, 1200, 1000),
46+
huge: generateBase64PNG(1600, 1600, 1000),
47+
})
48+
}, [])
649

750
useEffect(() => {
851
const videoEl = hlsVideoEl.current
@@ -55,67 +98,79 @@ export default function Media() {
5598
</div>
5699

57100
<h1>Base64 Images</h1>
58-
<p>Testing for Replay image processing with different file sizes (all 400x400px)</p>
101+
<p>Testing for Replay image processing with different file sizes</p>
59102
<div style={{ display: 'flex', flexDirection: 'row', gap: 10, flexWrap: 'wrap' }}>
60103
<div style={{ margin: 10 }}>
61-
<h3>Small JPEG (~5KB)</h3>
62-
<p className="max-w-64">400x400 base64 encoded JPEG (low quality)</p>
63-
<img
64-
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,0,0);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(0,0,255);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='400' fill='url(%23g)' /%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-size='24' fill='white'%3E5KB%3C/text%3E%3C/svg%3E"
65-
alt="Small test image"
66-
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
67-
/>
104+
<h3>Small PNG (~7KB)</h3>
105+
<p className="max-w-64">400x400 base64 encoded PNG</p>
106+
{images.small && (
107+
<img
108+
src={images.small}
109+
alt="Small test image"
110+
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
111+
/>
112+
)}
68113
<p style={{ fontSize: '12px', color: '#666' }}>400x400px (displayed at 200x200)</p>
69114
</div>
70115
<div style={{ margin: 10 }}>
71116
<h3>Medium PNG (~50KB)</h3>
72-
<p className="max-w-64">400x400 base64 encoded PNG (medium quality)</p>
73-
<img
74-
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgb(0,255,0);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(255,255,0);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='400' fill='url(%23g2)' /%3E%3Ccircle cx='200' cy='200' r='100' fill='rgba(255,255,255,0.3)' /%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-size='24' fill='black'%3E50KB%3C/text%3E%3C/svg%3E"
75-
alt="Medium test image"
76-
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
77-
/>
117+
<p className="max-w-64">400x400 base64 encoded PNG</p>
118+
{images.medium && (
119+
<img
120+
src={images.medium}
121+
alt="Medium test image"
122+
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
123+
/>
124+
)}
78125
<p style={{ fontSize: '12px', color: '#666' }}>400x400px (displayed at 200x200)</p>
79126
</div>
80127
<div style={{ margin: 10 }}>
81-
<h3>Large JPEG (~200KB)</h3>
82-
<p className="max-w-64">400x400 base64 encoded JPEG (high quality)</p>
83-
<img
84-
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3CradialGradient id='g3'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,0,255);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgb(0,255,255);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(255,128,0);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='400' height='400' fill='url(%23g3)' /%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-size='24' fill='white' stroke='black' stroke-width='1'%3E200KB%3C/text%3E%3C/svg%3E"
85-
alt="Large test image"
86-
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
87-
/>
128+
<h3>Large PNG (~200KB)</h3>
129+
<p className="max-w-64">400x400 base64 encoded PNG</p>
130+
{images.large && (
131+
<img
132+
src={images.large}
133+
alt="Large test image"
134+
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
135+
/>
136+
)}
88137
<p style={{ fontSize: '12px', color: '#666' }}>400x400px (displayed at 200x200)</p>
89138
</div>
90139
<div style={{ margin: 10 }}>
91140
<h3>Very Large (~500KB)</h3>
92-
<p className="max-w-64">400x400 base64 encoded image</p>
93-
<img
94-
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3ClinearGradient id='g4' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,128,0);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(128,0,255);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='400' fill='url(%23g4)' /%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-size='24' fill='white' stroke='black' stroke-width='1'%3E500KB%3C/text%3E%3C/svg%3E"
95-
alt="Very large test image"
96-
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
97-
/>
98-
<p style={{ fontSize: '12px', color: '#666' }}>400x400px (displayed at 200x200)</p>
141+
<p className="max-w-64">800x800 base64 encoded PNG</p>
142+
{images.veryLarge && (
143+
<img
144+
src={images.veryLarge}
145+
alt="Very large test image"
146+
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
147+
/>
148+
)}
149+
<p style={{ fontSize: '12px', color: '#666' }}>800x800px (displayed at 200x200)</p>
99150
</div>
100151
<div style={{ margin: 10 }}>
101152
<h3>Extra Large (~999KB)</h3>
102-
<p className="max-w-64">400x400 base64 encoded image</p>
103-
<img
104-
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3CradialGradient id='g5'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,255,0);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(255,0,0);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='400' height='400' fill='url(%23g5)' /%3E%3Ccircle cx='200' cy='200' r='150' fill='none' stroke='white' stroke-width='3' /%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-size='24' fill='black' stroke='white' stroke-width='1'%3E999KB%3C/text%3E%3C/svg%3E"
105-
alt="Extra large test image"
106-
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
107-
/>
108-
<p style={{ fontSize: '12px', color: '#666' }}>400x400px (displayed at 200x200)</p>
153+
<p className="max-w-64">1200x1200 base64 encoded PNG</p>
154+
{images.extraLarge && (
155+
<img
156+
src={images.extraLarge}
157+
alt="Extra large test image"
158+
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
159+
/>
160+
)}
161+
<p style={{ fontSize: '12px', color: '#666' }}>1200x1200px (displayed at 200x200)</p>
109162
</div>
110163
<div style={{ margin: 10 }}>
111164
<h3>Huge (~1.5MB)</h3>
112-
<p className="max-w-64">400x400 base64 encoded image</p>
113-
<img
114-
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3ClinearGradient id='g6' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:rgb(0,128,255);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgb(128,255,0);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(255,0,128);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='400' fill='url(%23g6)' /%3E%3Crect x='100' y='100' width='200' height='200' fill='none' stroke='white' stroke-width='4' /%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-size='24' fill='white' stroke='black' stroke-width='2'%3E1.5MB%3C/text%3E%3C/svg%3E"
115-
alt="Huge test image"
116-
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
117-
/>
118-
<p style={{ fontSize: '12px', color: '#666' }}>400x400px (displayed at 200x200)</p>
165+
<p className="max-w-64">1600x1600 base64 encoded PNG</p>
166+
{images.huge && (
167+
<img
168+
src={images.huge}
169+
alt="Huge test image"
170+
style={{ border: '1px solid #ccc', width: '200px', height: '200px' }}
171+
/>
172+
)}
173+
<p style={{ fontSize: '12px', color: '#666' }}>1600x1600px (displayed at 200x200)</p>
119174
</div>
120175
</div>
121176

0 commit comments

Comments
 (0)