From 026f6ef05569fb4d409ad96005831ff4a45acebe Mon Sep 17 00:00:00 2001 From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com> Date: Tue, 14 Oct 2025 06:40:58 +0000 Subject: [PATCH] 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 --- client/src/pages/Report.tsx | 269 ++++++++++-------------------------- 1 file changed, 71 insertions(+), 198 deletions(-) diff --git a/client/src/pages/Report.tsx b/client/src/pages/Report.tsx index 1ad8508..2b7b9e1 100644 --- a/client/src/pages/Report.tsx +++ b/client/src/pages/Report.tsx @@ -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 = { +pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`; + +const reportContent: Record = { '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(null); + const [loading, setLoading] = useState(true); + const canvasRef = useRef(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: ( -
-
-
-

Born

-

June 15, 1992

-
-
-

Birthplace

-

Nagrig, Basyoun, Egypt

-
-
-
-

Full Name

-

Mohamed Salah Hamed Mahrous Ghaly

-
-

- 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. -

-
- ) - }, - { - title: "Education & Early Football Training", - content: ( -
-
-

Extraordinary Commute

-

- 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. -

-
- "I missed quite a lot of school because it was the only way that I could get to training on time..." -
-
-
- ) - }, - { - title: "European Career Progression", - content: ( -
-
-

FC Basel (2012-2014)

-

79 Games | 20 Goals | Swiss Golden Player award

-
-
-

Chelsea FC (2014-2015)

-

19 Games | 2 Goals | Limited opportunities

-
-
-

AS Roma (2015-2017)

-

83 Games | 34 Goals | Roma Player of the Year 2016

-
-
- ) - }, - { - title: "Liverpool Achievements", - content: ( -
-
-
-
180+
-
Liverpool PL era goals
-
-
-
32
-
Goals in single PL season (2017-18 record)
-
-
-
-

Major Honours

-
    -
  • UEFA Champions League winner (2019)
    • -
  • Premier League champion (2019-20)
    • -
  • 3× Premier League Golden Boot (2017-18, 2018-19, 2021-22)
    • -
  • All-time leading foreign goalscorer in Premier League history
    • -
-
-
- ) - }, - { - title: "Business Ventures & Investments", - content: ( -
-
-

Investment Portfolio

-
    -
  • MOS Real Estate Ltd - UK-based property development
    • -
  • Salah UK Commercial - £25 million in assets (2024)
    • -
  • Dubai Property - Luxury real estate near Burj Khalifa
    • -
-
-
-
$90M
-
Estimated Net Worth (2025)
-
-
- ) - }, - { - title: "Personal Life & Family", - content: ( -
-
-
-

Wife

-

Magi Sadeq (married 2013)

-

Childhood sweetheart

-
-
-

Children

-

Makka (2014) & Kayan (2020)

-
-
-
-

- Despite global fame, Salah prioritizes family life. The family resides in a modest Liverpool suburb, emphasizing simplicity over ostentation. -

-
-
- ) - }, - { - title: "Social Impact & Charity Work", - content: ( -
-
-

Major Charitable Initiatives

-

- Salah has funded numerous projects in his hometown of Nagrig, including schools, youth centers, and medical equipment. -

-
$3M+
-

- Donated to National Cancer Institute in Cairo -

-
-
- ) - }, - { - title: "Legacy & The Salah Effect", - content: ( -
-
-

The Salah Effect

-

- Research from Stanford University documented how his prominence at Liverpool led to a 16% decrease in hate crimes and Islamophobia in Merseyside. -

-
-
-
- 1. -

First Egyptian to win the Premier League and Champions League

-
-
- 2. -

Major investments in healthcare, education and infrastructure in Egypt

-
-
-
- ) - } - ]; + 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 ( +
+

Loading slides...

+
+ ); + } return (
- - -
-

- {slides[currentSlide].title} -

- {slides[currentSlide].subtitle && ( -

{slides[currentSlide].subtitle}

- )} - {slides[currentSlide].content && ( -
- {slides[currentSlide].content} -
- )} -
+ + +
@@ -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 -
- Slide {currentSlide + 1} of {slides.length} -
+ + Slide {currentSlide + 1} of {numPages} +