| 1 | "use client"; |
| 2 | |
| 3 | import StaticPresentationEditor from "@/components/notebook/presentation/editor/presentation-editor-static"; |
| 4 | import { type PlateSlide } from "@/components/notebook/presentation/utils/parser"; |
| 5 | import { useSlideContentScaling } from "@/hooks/presentation/useSlideContentScaling"; |
| 6 | import { DEFAULT_PRESENTATION_SLIDE_ASPECT_RATIO } from "@/lib/presentation/aspect-ratio"; |
| 7 | |
| 8 | interface SlidePreviewProps { |
| 9 | slide: PlateSlide; |
| 10 | containerRef: React.RefObject<HTMLDivElement | null>; |
| 11 | } |
| 12 | |
| 13 | export function SlidePreview({ slide, containerRef }: SlidePreviewProps) { |
| 14 | const formatCategory = slide.formatCategory ?? "presentation"; |
| 15 | const aspectRatio = |
| 16 | slide.aspectRatio ?? DEFAULT_PRESENTATION_SLIDE_ASPECT_RATIO; |
| 17 | const slideWidth = slide.width ?? "M"; |
| 18 | |
| 19 | const scalingConfig = useSlideContentScaling( |
| 20 | slideWidth as "S" | "M" | "L", |
| 21 | false, // not presenting |
| 22 | formatCategory, |
| 23 | aspectRatio, |
| 24 | containerRef, |
| 25 | ); |
| 26 | |
| 27 | const { contentRef, scaledHeight } = scalingConfig; |
| 28 | const scaledWidth = Math.round( |
| 29 | scalingConfig.slideWidth * Math.max(scalingConfig.scale, 0.1), |
| 30 | ); |
| 31 | |
| 32 | return ( |
| 33 | <div className="flex w-full justify-center pb-6"> |
| 34 | <div |
| 35 | style={{ |
| 36 | height: scaledHeight ? `${scaledHeight}px` : undefined, |
| 37 | width: `${scaledWidth}px`, |
| 38 | }} |
| 39 | className="relative max-w-full" |
| 40 | > |
| 41 | <div |
| 42 | ref={contentRef} |
| 43 | className="relative origin-[top_left]" |
| 44 | style={{ |
| 45 | width: `${scalingConfig.slideWidth}px`, |
| 46 | transform: `scale(${scalingConfig.scale})`, |
| 47 | fontSize: "16px", |
| 48 | }} |
| 49 | > |
| 50 | <div className="relative"> |
| 51 | <StaticPresentationEditor |
| 52 | initialContent={slide} |
| 53 | className="rounded-md" |
| 54 | id={slide.id} |
| 55 | /> |
| 56 | </div> |
| 57 | </div> |
| 58 | </div> |
| 59 | </div> |
| 60 | ); |
| 61 | } |
| 62 |