Skip to content

G
gslides-poc-frontend
Commit 577849c5 by Farhaan Khan
Options

modified changes

parent 3c1cab51
Showing with 67 additions and 43 deletions
package-lock.json
...@@ -16,12 +16,10 @@ ...@@ -16,12 +16,10 @@
"tesseract.js": "^6.0.1" "tesseract.js": "^6.0.1"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/axios": "^0.9.36", "@types/axios": "^0.9.36",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"tailwindcss": "^4",
"typescript": "^5" "typescript": "^5"
} }
}, },
......
package.json
...@@ -17,12 +17,10 @@ ...@@ -17,12 +17,10 @@
"tesseract.js": "^6.0.1" "tesseract.js": "^6.0.1"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/axios": "^0.9.36", "@types/axios": "^0.9.36",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"tailwindcss": "^4",
"typescript": "^5" "typescript": "^5"
} }
} }
pages/components/slideviewer.tsx
...@@ -51,7 +51,7 @@ export default function SlideViewer({ ...@@ -51,7 +51,7 @@ export default function SlideViewer({
useEffect(() => { useEffect(() => {
resetAudio(); resetAudio();
setShowVideo(false); // Reset video when slide changes setShowVideo(false);
if (audioRef.current) { if (audioRef.current) {
audioRef.current.load(); audioRef.current.load();
audioRef.current.play().catch(() => {}); audioRef.current.play().catch(() => {});
......
pages/editor.tsx
...@@ -86,7 +86,7 @@ const EditorPage = () => { ...@@ -86,7 +86,7 @@ const EditorPage = () => {
const handleInsert = (index: number, before = false) => { const handleInsert = (index: number, before = false) => {
const newSlide: SlideFormData = { const newSlide: SlideFormData = {
slideNumber: 0, // will be reset slideNumber: 0,
imageUrl: '', imageUrl: '',
audioUrl: null, audioUrl: null,
videoUrl: null videoUrl: null
...@@ -112,7 +112,6 @@ const EditorPage = () => { ...@@ -112,7 +112,6 @@ const EditorPage = () => {
await Promise.all(slides.map(async (slide, index) => { await Promise.all(slides.map(async (slide, index) => {
const slideIndex = index + 1; const slideIndex = index + 1;
// Slide image
if (slide.newImageFile) { if (slide.newImageFile) {
formData.append('slide', new File( formData.append('slide', new File(
[slide.newImageFile], [slide.newImageFile],
...@@ -129,7 +128,6 @@ const EditorPage = () => { ...@@ -129,7 +128,6 @@ const EditorPage = () => {
)); ));
} }
// Audio
if (slide.newAudioFile) { if (slide.newAudioFile) {
formData.append('audio', new File( formData.append('audio', new File(
[slide.newAudioFile], [slide.newAudioFile],
...@@ -146,7 +144,6 @@ const EditorPage = () => { ...@@ -146,7 +144,6 @@ const EditorPage = () => {
)); ));
} }
// Video
if (slide.newVideoFile) { if (slide.newVideoFile) {
formData.append('video', new File( formData.append('video', new File(
[slide.newVideoFile], [slide.newVideoFile],
...@@ -169,7 +166,6 @@ const EditorPage = () => { ...@@ -169,7 +166,6 @@ const EditorPage = () => {
if ((res.data as any).success) { if ((res.data as any).success) {
alert("Slides saved successfully"); alert("Slides saved successfully");
// ✅ Update localStorage after successful save
const updatedSlides = slides.map((slide, index) => { const updatedSlides = slides.map((slide, index) => {
const slideNumber = index + 1; const slideNumber = index + 1;
const baseName = `slide${slideNumber}`; const baseName = `slide${slideNumber}`;
......
pages/index.tsx
...@@ -21,19 +21,16 @@ export default function Home() { ...@@ -21,19 +21,16 @@ export default function Home() {
return; return;
} }
const formData = new FormData(); const formData = new FormData();
formData.append('pdf', pdfFile); formData.append('pdf', pdfFile);
formData.append('zip', zipFile); formData.append('zip', zipFile);
try { try {
setLoading(true); setLoading(true);
const res = await axios.post<Slide[]>('http://localhost:3001/upload', formData, { const res = await axios.post<Slide[]>('http://localhost:3001/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }, headers: { 'Content-Type': 'multipart/form-data' },
timeout: 60000, // 60 seconds for large files timeout: 60000,
}); });
console.log(res.data,'res.data')
localStorage.setItem('slides', JSON.stringify(res.data)); localStorage.setItem('slides', JSON.stringify(res.data));
router.push('/player'); router.push('/player');
} catch (err) { } catch (err) {
...@@ -45,65 +42,102 @@ export default function Home() { ...@@ -45,65 +42,102 @@ export default function Home() {
}; };
return ( return (
<div style={styles.container}> <div style={styles.page}>
<h1 style={styles.heading}>Upload Slides & Media</h1> <div style={styles.card}>
<h1 style={styles.heading}>📤 Upload Slides & Media</h1>
<div style={styles.formGroup}> <div style={styles.formGroup}>
<label style={styles.label}>Upload PDF file:</label> <label style={styles.label}>Upload PDF file</label>
<input type="file" accept=".pdf" onChange={(e) => setPdfFile(e.target.files?.[0] || null)} /> <input
type="file"
accept=".pdf"
style={styles.input}
onChange={(e) => setPdfFile(e.target.files?.[0] || null)}
/>
</div> </div>
<div style={styles.formGroup}> <div style={styles.formGroup}>
<label style={styles.label}>Upload Media ZIP (mp3/mp4):</label> <label style={styles.label}>Upload Media ZIP (mp3/mp4)</label>
<input type="file" accept=".zip" onChange={(e) => setZipFile(e.target.files?.[0] || null)} /> <input
type="file"
accept=".zip"
style={styles.input}
onChange={(e) => setZipFile(e.target.files?.[0] || null)}
/>
</div> </div>
<button onClick={handleUpload} style={styles.uploadButton} disabled={loading}> <button
onClick={handleUpload}
style={{
...styles.uploadButton,
...(loading ? styles.disabledButton : {}),
}}
disabled={loading}
>
{loading ? 'Uploading...' : 'Start Upload'} {loading ? 'Uploading...' : 'Start Upload'}
</button> </button>
</div> </div>
</div>
); );
} }
const styles: { [key: string]: React.CSSProperties } = { const styles: { [key: string]: React.CSSProperties } = {
container: { page: {
padding: '2rem', backgroundColor: '#f3f4f6',
background: '#f9fafb',
minHeight: '100vh', minHeight: '100vh',
display: 'flex', display: 'flex',
flexDirection: 'column', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
fontFamily: 'Segoe UI, sans-serif', padding: '1rem',
},
card: {
backgroundColor: '#ffffff',
padding: '2rem 3rem',
borderRadius: '1rem',
boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)',
maxWidth: '450px',
width: '100%',
textAlign: 'center',
}, },
heading: { heading: {
fontSize: '2.5rem', fontSize: '2rem',
color: '#1f2937',
marginBottom: '2rem', marginBottom: '2rem',
textAlign: 'center', color: '#111827',
fontWeight: 600,
}, },
formGroup: { formGroup: {
marginBottom: '1.5rem', marginBottom: '1.5rem',
display: 'flex', textAlign: 'left',
flexDirection: 'column',
width: '100%',
maxWidth: '400px',
}, },
label: { label: {
display: 'block',
marginBottom: '0.5rem', marginBottom: '0.5rem',
fontSize: '1rem',
color: '#374151', color: '#374151',
fontSize: '1rem',
fontWeight: 500,
},
input: {
width: '100%',
padding: '0.5rem',
border: '1px solid #d1d5db',
borderRadius: '0.5rem',
fontSize: '1rem',
backgroundColor: '#f9fafb',
}, },
uploadButton: { uploadButton: {
marginTop: '1rem', width: '100%',
padding: '0.75rem 2rem', padding: '0.75rem',
fontSize: '1rem', fontSize: '1rem',
backgroundColor: '#2563eb', backgroundColor: '#2563eb',
color: '#ffffff', color: '#ffffff',
border: 'none', border: 'none',
borderRadius: 8, borderRadius: '0.5rem',
cursor: 'pointer',
fontWeight: 'bold', fontWeight: 'bold',
transition: 'background-color 0.2s ease-in-out', cursor: 'pointer',
transition: 'all 0.3s ease',
},
disabledButton: {
backgroundColor: '#93c5fd',
cursor: 'not-allowed',
}, },
}; };
pages/player.tsx
...@@ -36,13 +36,11 @@ export default function Player() { ...@@ -36,13 +36,11 @@ export default function Player() {
if (Array.isArray(parsedSlides) && parsedSlides.length > 0) { if (Array.isArray(parsedSlides) && parsedSlides.length > 0) {
setSlides(parsedSlides); setSlides(parsedSlides);
// Extract quiz slide numbers
const quizSlides: number[] = parsedSlides const quizSlides: number[] = parsedSlides
.filter((s: Slide) => s.imageUrl.toLowerCase().includes('quiz')) .filter((s: Slide) => s.imageUrl.toLowerCase().includes('quiz'))
.map((s: Slide) => s.slideNumber) .map((s: Slide) => s.slideNumber)
.sort((a, b) => a - b); .sort((a, b) => a - b);
// Build redirect map
const redirectMap: { [key: number]: number } = {}; const redirectMap: { [key: number]: number } = {};
for (let i = 0; i < quizSlides.length; i++) { for (let i = 0; i < quizSlides.length; i++) {
const currentQuiz = quizSlides[i]; const currentQuiz = quizSlides[i];
......
utils/api.ts
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import axios from 'axios'; import axios from 'axios';
const API = axios.create({ const API = axios.create({
baseURL: 'http://localhost:3001', // <-- Your backend URL here baseURL: 'http://localhost:3001',
timeout: 80000, timeout: 80000,
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment