"use client"; import React, { useEffect, useRef, useState } from "react"; import { Swiper } from "swiper@6.8.4/bundle"; export default function PhotoVideoGallery({ playlist, section }) { const rootRef = useRef(null); const [landscape, setLandscape] = useState({}); const pl = playlist; const items = pl?._embedded?.PlaylistItems ?? []; const pcf = pl?._embedded?.CustomFields; useEffect(() => { const root = rootRef.current; const el = root?.querySelector(".photo-and-video"); if (!el) return undefined; // Legacy settings (app-min.js: photoAndVideoSwiper), with the controls scoped to this skin. const swiper = new Swiper(el, { slidesPerView: "auto", spaceBetween: 14, centeredSlides: false, pagination: { el: root.querySelector(".swiper-pagination-photo-and-video"), type: "progressbar" }, navigation: { nextEl: root.querySelector(".ps-next-photo-and-video"), prevEl: root.querySelector(".ps-prev-photo-and-video"), }, breakpoints: { 768: { spaceBetween: 20 }, 769: { spaceBetween: 30 } }, }); return () => swiper?.destroy?.(true, true); }, [items.length]); // Legacy app-min.js (DOMContentLoaded): a slide whose picture is wider than tall also gets "video-slide". useEffect(() => { let cancelled = false; items.forEach((item, i) => { const src = item?._embedded?.Article?._embedded?.Picture?.SourcePath; if (!src) return; const probe = new Image(); probe.onload = () => { if (!cancelled && probe.width > probe.height) setLandscape((prev) => ({ ...prev, [i]: true })); }; probe.src = src; }); return () => { cancelled = true; }; }, [items.length]); return (

{pcf?.Title}

{items.length > 4 && (

)}

{items.map((item, i) => { const article = item?._embedded?.Article; if (!article) return null; const picture = article._embedded?.Picture; const cf = article._embedded?.CustomFields; return article.ArticleLinkUrl ? (

{picture?.SourcePath && ( {picture.Description

)}

{article.Title}

) : (

{picture?.SourcePath && ( {picture.Description

)}

{article.Title}

); })}

{pcf?.ButtonLink && (

{pcf?.ButtonTitle}

)}

); }

Deree - Official website

Lorem ipsum