Update Mohamed Salah's profile to display PDF content as slides
Integrate pdf.js to render PDF pages as individual slides for the Mohamed Salah report page, replacing static slide data. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/yjv3HO6
This commit is contained in:
kimjaehyeon0101
@ -7,12 +7,15 @@ import { Input } from "@/components/ui/input";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import type { MediaOutlet } from "@shared/schema";
|
||||
import Footer from "@/components/Footer";
|
||||
import SearchModal from "@/components/SearchModal";
|
||||
import * as pdfjsLib from 'pdfjs-dist';
|
||||
|
||||
const reportContent: Record<string, { htmlPath: string; pptPath?: string; customComponent?: boolean }> = {
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;
|
||||
|
||||
const reportContent: Record<string, { htmlPath: string; pdfPath?: string; pptPath?: string; customComponent?: boolean }> = {
|
||||
'chayan-asli': {
|
||||
htmlPath: '/attached_assets/chayan asli report_1759208054055.html',
|
||||
pptPath: '/attached_assets/chayan asli slides_1759213492580.pptx'
|
||||
@ -23,207 +26,77 @@ const reportContent: Record<string, { htmlPath: string; pptPath?: string; custom
|
||||
},
|
||||
'mohamed-salah': {
|
||||
htmlPath: '/attached_assets/Mohamed Salah_Report_en_1760420154846.html',
|
||||
pdfPath: '/attached_assets/mohamed_salah_pdf_en_1760419721874.pdf',
|
||||
customComponent: true
|
||||
}
|
||||
};
|
||||
|
||||
function MohamedSalahSlides() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [numPages, setNumPages] = useState(0);
|
||||
const [pdfDoc, setPdfDoc] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
title: "MOHAMED SALAH",
|
||||
subtitle: "The Complete Biography: Life, Career, and Legacy of Egypt's Football King",
|
||||
content: null,
|
||||
bgColor: "bg-gradient-to-br from-red-600 to-red-800"
|
||||
},
|
||||
{
|
||||
title: "Early Life & Birth Details",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div data-testid="info-born">
|
||||
<p className="text-sm text-gray-500 mb-1" data-testid="label-born">Born</p>
|
||||
<p className="text-lg font-semibold" data-testid="text-birth-date">June 15, 1992</p>
|
||||
</div>
|
||||
<div data-testid="info-birthplace">
|
||||
<p className="text-sm text-gray-500 mb-1" data-testid="label-birthplace">Birthplace</p>
|
||||
<p className="text-lg font-semibold" data-testid="text-birthplace">Nagrig, Basyoun, Egypt</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-testid="info-fullname">
|
||||
<p className="text-sm text-gray-500 mb-1" data-testid="label-fullname">Full Name</p>
|
||||
<p className="text-lg font-semibold" data-testid="text-fullname">Mohamed Salah Hamed Mahrous Ghaly</p>
|
||||
</div>
|
||||
<p className="text-gray-700 mt-4" data-testid="text-early-life-description">
|
||||
Born to a middle-class Egyptian family in a small farming village north of Cairo, Mohamed Salah grew up in modest surroundings that gave no indication of the football stardom that awaited him.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Education & Early Football Training",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-yellow-50 p-4 rounded-lg" data-testid="section-extraordinary-commute">
|
||||
<h3 className="font-semibold mb-2" data-testid="heading-commute">Extraordinary Commute</h3>
|
||||
<p className="text-gray-700 mb-3" data-testid="text-commute-description">
|
||||
At age 14, Salah made a 4.5-hour journey (each way) five days a week from his village to train with El Mokawloon in Cairo.
|
||||
</p>
|
||||
<blockquote className="italic border-l-4 border-yellow-400 pl-3 text-gray-600 text-sm" data-testid="quote-school-miss">
|
||||
"I missed quite a lot of school because it was the only way that I could get to training on time..."
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "European Career Progression",
|
||||
content: (
|
||||
<div className="space-y-3">
|
||||
<div className="border-l-4 border-blue-500 pl-4" data-testid="career-basel">
|
||||
<h3 className="font-semibold" data-testid="heading-basel">FC Basel (2012-2014)</h3>
|
||||
<p className="text-sm text-gray-600" data-testid="text-basel-stats">79 Games | 20 Goals | Swiss Golden Player award</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-blue-700 pl-4" data-testid="career-chelsea">
|
||||
<h3 className="font-semibold" data-testid="heading-chelsea">Chelsea FC (2014-2015)</h3>
|
||||
<p className="text-sm text-gray-600" data-testid="text-chelsea-stats">19 Games | 2 Goals | Limited opportunities</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-purple-600 pl-4" data-testid="career-roma">
|
||||
<h3 className="font-semibold" data-testid="heading-roma">AS Roma (2015-2017)</h3>
|
||||
<p className="text-sm text-gray-600" data-testid="text-roma-stats">83 Games | 34 Goals | Roma Player of the Year 2016</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Liverpool Achievements",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-red-50 p-4 rounded-lg text-center" data-testid="stat-liverpool-goals">
|
||||
<div className="text-3xl font-bold text-red-600" data-testid="text-liverpool-goals-number">180+</div>
|
||||
<div className="text-sm text-gray-600" data-testid="text-liverpool-goals-label">Liverpool PL era goals</div>
|
||||
</div>
|
||||
<div className="bg-red-50 p-4 rounded-lg text-center" data-testid="stat-season-record">
|
||||
<div className="text-3xl font-bold text-red-600" data-testid="text-season-record-number">32</div>
|
||||
<div className="text-sm text-gray-600" data-testid="text-season-record-label">Goals in single PL season (2017-18 record)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<h3 className="font-semibold mb-2" data-testid="heading-major-honours">Major Honours</h3>
|
||||
<ul className="list-disc list-inside text-sm space-y-1 text-gray-700">
|
||||
<li data-testid="honour-champions-league">UEFA Champions League winner (2019)</li>
|
||||
<li data-testid="honour-premier-league">Premier League champion (2019-20)</li>
|
||||
<li data-testid="honour-golden-boot">3× Premier League Golden Boot (2017-18, 2018-19, 2021-22)</li>
|
||||
<li data-testid="honour-foreign-scorer">All-time leading foreign goalscorer in Premier League history</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Business Ventures & Investments",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-green-50 p-4 rounded-lg" data-testid="section-investment-portfolio">
|
||||
<h3 className="font-semibold mb-2" data-testid="heading-investments">Investment Portfolio</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li data-testid="investment-mos-real-estate"><strong>MOS Real Estate Ltd</strong> - UK-based property development</li>
|
||||
<li data-testid="investment-salah-commercial"><strong>Salah UK Commercial</strong> - £25 million in assets (2024)</li>
|
||||
<li data-testid="investment-dubai-property"><strong>Dubai Property</strong> - Luxury real estate near Burj Khalifa</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="text-center" data-testid="section-net-worth">
|
||||
<div className="text-3xl font-bold text-green-600" data-testid="text-net-worth-value">$90M</div>
|
||||
<div className="text-sm text-gray-600" data-testid="text-net-worth-label">Estimated Net Worth (2025)</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Personal Life & Family",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div data-testid="info-wife">
|
||||
<p className="text-sm text-gray-500 mb-1" data-testid="label-wife">Wife</p>
|
||||
<p className="font-semibold" data-testid="text-wife-name">Magi Sadeq (married 2013)</p>
|
||||
<p className="text-sm text-gray-600" data-testid="text-wife-note">Childhood sweetheart</p>
|
||||
</div>
|
||||
<div data-testid="info-children">
|
||||
<p className="text-sm text-gray-500 mb-1" data-testid="label-children">Children</p>
|
||||
<p className="font-semibold" data-testid="text-children-names">Makka (2014) & Kayan (2020)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-blue-50 p-4 rounded-lg" data-testid="section-family-values">
|
||||
<p className="text-sm text-gray-700" data-testid="text-family-description">
|
||||
Despite global fame, Salah prioritizes family life. The family resides in a modest Liverpool suburb, emphasizing simplicity over ostentation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Social Impact & Charity Work",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-purple-50 p-4 rounded-lg" data-testid="section-charity">
|
||||
<h3 className="font-semibold mb-2" data-testid="heading-charity">Major Charitable Initiatives</h3>
|
||||
<p className="text-sm text-gray-700 mb-2" data-testid="text-charity-description">
|
||||
Salah has funded numerous projects in his hometown of Nagrig, including schools, youth centers, and medical equipment.
|
||||
</p>
|
||||
<div className="text-2xl font-bold text-purple-600 text-center" data-testid="text-donation-amount">$3M+</div>
|
||||
<p className="text-sm text-gray-600 text-center" data-testid="text-donation-target">
|
||||
Donated to National Cancer Institute in Cairo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Legacy & The Salah Effect",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-gradient-to-r from-yellow-50 to-orange-50 p-4 rounded-lg" data-testid="section-salah-effect">
|
||||
<h3 className="font-semibold mb-2" data-testid="heading-salah-effect">The Salah Effect</h3>
|
||||
<p className="text-sm text-gray-700" data-testid="text-salah-effect-description">
|
||||
Research from Stanford University documented how his prominence at Liverpool led to a 16% decrease in hate crimes and Islamophobia in Merseyside.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm" data-testid="section-legacy-achievements">
|
||||
<div className="flex items-start space-x-2" data-testid="legacy-item-1">
|
||||
<span className="font-bold text-blue-600" data-testid="legacy-number-1">1.</span>
|
||||
<p data-testid="text-legacy-1">First Egyptian to win the Premier League and Champions League</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-2" data-testid="legacy-item-2">
|
||||
<span className="font-bold text-blue-600" data-testid="legacy-number-2">2.</span>
|
||||
<p data-testid="text-legacy-2">Major investments in healthcare, education and infrastructure in Egypt</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
useEffect(() => {
|
||||
const loadPdf = async () => {
|
||||
try {
|
||||
const loadingTask = pdfjsLib.getDocument('/attached_assets/mohamed_salah_pdf_en_1760419721874.pdf');
|
||||
const pdf = await loadingTask.promise;
|
||||
setPdfDoc(pdf);
|
||||
setNumPages(pdf.numPages);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('Error loading PDF:', error);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
loadPdf();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pdfDoc || !canvasRef.current) return;
|
||||
|
||||
const renderPage = async () => {
|
||||
const page = await pdfDoc.getPage(currentSlide + 1);
|
||||
const canvas = canvasRef.current!;
|
||||
const context = canvas.getContext('2d')!;
|
||||
|
||||
const containerWidth = canvas.parentElement?.clientWidth || 800;
|
||||
const viewport = page.getViewport({ scale: 1 });
|
||||
const scale = containerWidth / viewport.width;
|
||||
const scaledViewport = page.getViewport({ scale });
|
||||
|
||||
canvas.width = scaledViewport.width;
|
||||
canvas.height = scaledViewport.height;
|
||||
|
||||
await page.render({
|
||||
canvasContext: context,
|
||||
viewport: scaledViewport
|
||||
}).promise;
|
||||
};
|
||||
|
||||
renderPage();
|
||||
}, [pdfDoc, currentSlide]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-96">
|
||||
<p data-testid="text-loading-slides">Loading slides...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="w-full relative overflow-hidden" style={{ paddingTop: '56.25%' }} data-testid="slide-container-16-9">
|
||||
<Card className={`${slides[currentSlide].bgColor || 'bg-white'} absolute inset-0`}>
|
||||
<CardContent className={`p-6 h-full ${slides[currentSlide].bgColor ? 'text-white' : 'text-gray-900'} overflow-auto`}>
|
||||
<div className="h-full flex flex-col justify-center">
|
||||
<h2 className="text-2xl font-bold mb-2" data-testid="text-slide-title">
|
||||
{slides[currentSlide].title}
|
||||
</h2>
|
||||
{slides[currentSlide].subtitle && (
|
||||
<p className="text-base opacity-90 mb-3">{slides[currentSlide].subtitle}</p>
|
||||
)}
|
||||
{slides[currentSlide].content && (
|
||||
<div className={slides[currentSlide].bgColor ? 'bg-white/10 backdrop-blur p-3 rounded-lg text-sm' : 'text-sm'}>
|
||||
{slides[currentSlide].content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Card className="absolute inset-0 bg-white">
|
||||
<CardContent className="p-0 h-full w-full flex items-center justify-center">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
data-testid="canvas-pdf-slide"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@ -233,17 +106,17 @@ function MohamedSalahSlides() {
|
||||
variant="outline"
|
||||
onClick={() => setCurrentSlide(Math.max(0, currentSlide - 1))}
|
||||
disabled={currentSlide === 0}
|
||||
data-testid="button-prev-slide"
|
||||
data-testid="button-previous-slide"
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<div className="text-sm text-gray-600">
|
||||
Slide {currentSlide + 1} of {slides.length}
|
||||
</div>
|
||||
<span className="text-sm text-gray-600" data-testid="text-slide-counter">
|
||||
Slide {currentSlide + 1} of {numPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setCurrentSlide(Math.min(slides.length - 1, currentSlide + 1))}
|
||||
disabled={currentSlide === slides.length - 1}
|
||||
onClick={() => setCurrentSlide(Math.min(numPages - 1, currentSlide + 1))}
|
||||
disabled={currentSlide === numPages - 1}
|
||||
data-testid="button-next-slide"
|
||||
>
|
||||
Next
|
||||
|
||||
Reference in New Issue
Block a user