647 lines
26 KiB
JavaScript
647 lines
26 KiB
JavaScript
// // import { setEventDetails } from "../../store/searchOutput/action";
|
|
// // import { setCurrentPage } from "../../store/currentView/action";
|
|
// // import { connect } from "react-redux";
|
|
// // import useTranslation from "next-translate/useTranslation";
|
|
// // import { formatDates } from "../utils";
|
|
|
|
// // const MediaDetails = (props) => {
|
|
// // let { t } = useTranslation();
|
|
|
|
// // const MediaView = (mediaArr) => {
|
|
// // mediaArr = mediaArr.value;
|
|
|
|
// // return mediaArr.map((item, key) => {
|
|
// // <div>{item.pinswg_name}</div>;
|
|
// // });
|
|
// // };
|
|
|
|
// // const mediaArr = props.mediaObj?.value || [];
|
|
|
|
// // // event publishiing flag set to true displa
|
|
|
|
// // function hasOwnPropertyAndNotNull(obj, property) {
|
|
// // return obj.hasOwnProperty(property) && obj[property] !== null;
|
|
// // }
|
|
|
|
// // //console.log(eventsArr.length > 0);
|
|
|
|
// // return (
|
|
// // mediaArr.length > 0 && (
|
|
// // <div className="govuk-grid-row">
|
|
// // <div className="card">
|
|
// // <div className="card-body">
|
|
// // <h2 className="govuk-heading-m ">
|
|
// // {t("case:event-title")}Media
|
|
// // </h2>
|
|
// // {mediaArr.map(
|
|
// // (item, key) =>
|
|
// // item.pinswg_publishtoweb && (
|
|
// // <>
|
|
// // {" "}
|
|
// // <div className="">
|
|
// // <div className="">
|
|
// // <div>
|
|
// // <b>
|
|
// // {" "}
|
|
// // {t(
|
|
// // "case:event-name-label",
|
|
// // )}
|
|
// // </b>
|
|
// // : {item.pinswg_name}
|
|
// // </div>
|
|
// // {hasOwnPropertyAndNotNull(
|
|
// // item,
|
|
// // "pinswg_description",
|
|
// // ) && (
|
|
// // <div>
|
|
// // <b>
|
|
// // {t(
|
|
// // "case:event-event-name-label",
|
|
// // )}
|
|
// // </b>
|
|
// // :{" "}
|
|
// // {
|
|
// // item.pinswg_description
|
|
// // }
|
|
// // </div>
|
|
// // )}
|
|
// // </div>
|
|
// // </div>
|
|
// // </>
|
|
// // ),
|
|
// // )}{" "}
|
|
// // </div>
|
|
// // </div>
|
|
// // </div>
|
|
// // )
|
|
// // );
|
|
// // };
|
|
|
|
// // const mapStateToProps = (state) => {
|
|
// // return {
|
|
// // ...state,
|
|
// // };
|
|
// // };
|
|
|
|
// // const mapDispatchToProps = (dispatch) => {
|
|
// // return {
|
|
// // setEventDetails: (mediaObj) => {
|
|
// // dispatch(setEventDetails(mediaObj));
|
|
// // },
|
|
// // setCurrentPage: (currentPage) => {
|
|
// // dispatch(setCurrentPage(currentPage));
|
|
// // },
|
|
// // };
|
|
// // };
|
|
|
|
// // export default connect(mapStateToProps, mapDispatchToProps)(MediaDetails);
|
|
// import { useEffect, useMemo, useState } from "react";
|
|
// import { connect } from "react-redux";
|
|
// import useTranslation from "next-translate/useTranslation";
|
|
// import { useRouter } from "next/router";
|
|
|
|
// const extractYouTubeId = (input) => {
|
|
// if (!input) return null;
|
|
// if (/^[a-zA-Z0-9_-]{11}$/.test(input)) return input;
|
|
|
|
// try {
|
|
// const url = new URL(input);
|
|
// if (url.hostname.includes("youtu.be"))
|
|
// return url.pathname.slice(1) || null;
|
|
|
|
// const v = url.searchParams.get("v");
|
|
// if (v) return v;
|
|
|
|
// const embedMatch = url.pathname.match(/\/embed\/([^/]+)/);
|
|
// if (embedMatch?.[1]) return embedMatch[1];
|
|
|
|
// const shortsMatch = url.pathname.match(/\/shorts\/([^/]+)/);
|
|
// if (shortsMatch?.[1]) return shortsMatch[1];
|
|
|
|
// return null;
|
|
// } catch {
|
|
// return null;
|
|
// }
|
|
// };
|
|
|
|
// export default function MediaDetails({ mediaObj, whichTab }) {
|
|
// const router = useRouter();
|
|
// const mediaArr = mediaObj?.value || [];
|
|
|
|
// const videoItems = useMemo(() => {
|
|
// const isWelsh = router.locale === "cy";
|
|
|
|
// return (mediaArr || [])
|
|
// .filter((x) => x?.pinswg_publishtoweb)
|
|
// .map((item) => {
|
|
// const url = isWelsh
|
|
// ? item.pinswg_mediaLinkCY
|
|
// : item.pinswg_mediaLinkEN;
|
|
// const videoId = extractYouTubeId(url);
|
|
// if (!videoId) return null;
|
|
|
|
// return {
|
|
// key:
|
|
// item.pinswg_documentid ||
|
|
// `${item.pinswg_name}-${videoId}`,
|
|
// videoId,
|
|
// name: item.pinswg_name || "Video",
|
|
// description: item.pinswg_description || "",
|
|
// thumbnail: `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`,
|
|
// };
|
|
// })
|
|
// .filter(Boolean);
|
|
// }, [mediaArr, router.locale]);
|
|
|
|
// const [watchedIds, setWatchedIds] = useState(new Set());
|
|
// const [selectedIndex, setSelectedIndex] = useState(0);
|
|
|
|
// // Forces a fresh iframe instance whenever we need to hard-stop playback
|
|
// const [playerInstance, setPlayerInstance] = useState(0);
|
|
|
|
// const isActive = whichTab === "case-media";
|
|
// const selected = videoItems[selectedIndex] || null;
|
|
|
|
// // When leaving the media tab, hard-stop playback by unmounting (and bumping instance)
|
|
// useEffect(() => {
|
|
// if (!isActive) {
|
|
// setPlayerInstance((n) => n + 1);
|
|
// }
|
|
// }, [isActive]);
|
|
|
|
// // When list/locale changes, reset to first (no autoplay)
|
|
// useEffect(() => {
|
|
// setSelectedIndex(0);
|
|
// setPlayerInstance((n) => n + 1);
|
|
// }, [videoItems.length, router.locale]);
|
|
|
|
// if (!videoItems.length) return null;
|
|
|
|
// const embedBase = "https://www.youtube-nocookie.com/embed";
|
|
|
|
// // IMPORTANT:
|
|
// // - autoplay=0 for initial load
|
|
// // - autoplay=1 only when user clicks an item
|
|
// const [autoplay, setAutoplay] = useState(false);
|
|
|
|
// useEffect(() => {
|
|
// // whenever we leave tab or reset player, don't autoplay next time
|
|
// if (!isActive) setAutoplay(false);
|
|
// }, [isActive]);
|
|
|
|
// const embedSrc = selected
|
|
// ? `${embedBase}/${selected.videoId}?rel=0&modestbranding=1&playsinline=1&autoplay=${autoplay ? "1" : "0"}`
|
|
// : "";
|
|
|
|
// return (
|
|
// <div className="govuk-grid-row">
|
|
// <div className="card">
|
|
// <div className="card-body">
|
|
// <h2 className="govuk-heading-m">Media</h2>
|
|
|
|
// {/* Player: only render when tab is active */}
|
|
// {isActive && (
|
|
// <div className="videoWrapper govuk-!-margin-bottom-4">
|
|
// <iframe
|
|
// key={`${selected?.videoId}-${playerInstance}`}
|
|
// src={embedSrc}
|
|
// title={selected?.name || "YouTube video"}
|
|
// frameBorder="0"
|
|
// allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
// allowFullScreen
|
|
// />
|
|
// </div>
|
|
// )}
|
|
|
|
// <h3 className="govuk-heading-s">Videos</h3>
|
|
// <ul className="govuk-list govuk-list--spaced">
|
|
// {videoItems.map((v, idx) => {
|
|
// const isSelected = idx === selectedIndex;
|
|
// return (
|
|
// <li key={v.key}>
|
|
// <button
|
|
// type="button"
|
|
// className={`videoTabButton ${isSelected ? "active" : ""}`}
|
|
// onClick={() => {
|
|
// setSelectedIndex(idx);
|
|
// setAutoplay(true); // play only on user action
|
|
// setPlayerInstance((n) => n + 1); // ensure clean switch / stop previous
|
|
// setWatchedIds((prev) =>
|
|
// new Set(prev).add(v.videoId),
|
|
// );
|
|
// }}
|
|
// >
|
|
// <div className="videoTabContent">
|
|
// <div className="thumbnailWrapper">
|
|
// <img
|
|
// src={v.thumbnail}
|
|
// alt=""
|
|
// className="videoThumbnail"
|
|
// loading="lazy"
|
|
// />
|
|
// <span
|
|
// className="playIcon"
|
|
// aria-hidden="true"
|
|
// >
|
|
// ▶
|
|
// </span>
|
|
|
|
// {/* Duration badge (see section 2) */}
|
|
// {v.duration && (
|
|
// <span className="durationBadge">
|
|
// {v.duration}
|
|
// </span>
|
|
// )}
|
|
|
|
// {/* Watched indicator (see section 3) */}
|
|
// {watchedIds.has(v.videoId) && (
|
|
// <span className="watchedBadge">
|
|
// Watched
|
|
// </span>
|
|
// )}
|
|
// </div>
|
|
|
|
// <span className="videoTitle">
|
|
// {v.name}
|
|
// </span>
|
|
// </div>
|
|
// </button>
|
|
// </li>
|
|
// );
|
|
// })}
|
|
// </ul>
|
|
// </div>
|
|
// </div>
|
|
|
|
// <style jsx>{`
|
|
// .videoWrapper {
|
|
// position: relative;
|
|
// padding-bottom: 56.25%;
|
|
// height: 0;
|
|
// overflow: hidden;
|
|
// border: 1px solid #b1b4b6;
|
|
// border-radius: 4px;
|
|
// }
|
|
// .videoWrapper iframe {
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// }
|
|
// .videoTabButton {
|
|
// width: 100%;
|
|
// text-align: left;
|
|
// background: transparent;
|
|
// border: 1px solid #b1b4b6;
|
|
// border-radius: 4px;
|
|
// padding: 10px 12px;
|
|
// cursor: pointer;
|
|
// }
|
|
// .videoTabButton:hover {
|
|
// background: #f3f2f1;
|
|
// }
|
|
// .videoTabButton.active {
|
|
// border-color: #1d70b8;
|
|
// box-shadow: inset 0 0 0 1px #1d70b8;
|
|
// background: #eef4ff;
|
|
// }
|
|
// .videoTabContent {
|
|
// display: flex;
|
|
// gap: 12px;
|
|
// align-items: center;
|
|
// }
|
|
|
|
// .videoThumbnail {
|
|
// width: 120px;
|
|
// aspect-ratio: 16 / 9;
|
|
// object-fit: cover;
|
|
// border-radius: 4px;
|
|
// border: 1px solid #b1b4b6;
|
|
// background: #000;
|
|
// }
|
|
|
|
// .videoTitle {
|
|
// font-weight: 600;
|
|
// }
|
|
|
|
// @media (max-width: 40.0625em) {
|
|
// .videoThumbnail {
|
|
// width: 90px;
|
|
// }
|
|
// }
|
|
// .thumbnailWrapper {
|
|
// position: relative;
|
|
// width: 120px;
|
|
// flex-shrink: 0;
|
|
// }
|
|
|
|
// .videoThumbnail {
|
|
// width: 100%;
|
|
// aspect-ratio: 16 / 9;
|
|
// object-fit: cover;
|
|
// border-radius: 4px;
|
|
// border: 1px solid #b1b4b6;
|
|
// background: #000;
|
|
// }
|
|
|
|
// /* ▶ Play icon */
|
|
// .playIcon {
|
|
// position: absolute;
|
|
// inset: 0;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
// font-size: 32px;
|
|
// color: white;
|
|
// text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
|
|
// pointer-events: none;
|
|
// }
|
|
|
|
// /* ⏱ Duration badge */
|
|
// .durationBadge {
|
|
// position: absolute;
|
|
// bottom: 6px;
|
|
// right: 6px;
|
|
// background: rgba(0, 0, 0, 0.8);
|
|
// color: white;
|
|
// font-size: 12px;
|
|
// padding: 2px 6px;
|
|
// border-radius: 3px;
|
|
// }
|
|
|
|
// /* 👁 Watched badge */
|
|
// .watchedBadge {
|
|
// position: absolute;
|
|
// top: 6px;
|
|
// left: 6px;
|
|
// background: #00703c; /* GOV green */
|
|
// color: white;
|
|
// font-size: 11px;
|
|
// padding: 2px 6px;
|
|
// border-radius: 3px;
|
|
// }
|
|
|
|
// .videoTabContent {
|
|
// display: flex;
|
|
// gap: 12px;
|
|
// align-items: center;
|
|
// }
|
|
|
|
// .videoTitle {
|
|
// font-weight: 600;
|
|
// }
|
|
// `}</style>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import { useRouter } from "next/router";
|
|
|
|
/**
|
|
* MediaDetails
|
|
* - Renders a YouTube player + a list of videos from mediaObj.value
|
|
* - Loads first item by default (no autoplay)
|
|
* - Plays only when user selects an item
|
|
* - Stops playback when leaving the "case-media" parent tab (pass whichTab)
|
|
* - Shows thumbnail with play overlay
|
|
* - Optional duration badge (if you supply v.duration)
|
|
* - "Watched" badge once a video has been played (session only)
|
|
*/
|
|
|
|
const extractYouTubeId = (input) => {
|
|
if (!input) return null;
|
|
|
|
// Already looks like a YouTube ID?
|
|
if (/^[a-zA-Z0-9_-]{11}$/.test(input)) return input;
|
|
|
|
try {
|
|
const url = new URL(input);
|
|
|
|
// youtu.be/<id>
|
|
if (url.hostname.includes("youtu.be")) {
|
|
return url.pathname.replace("/", "") || null;
|
|
}
|
|
|
|
// youtube.com/watch?v=<id>
|
|
const v = url.searchParams.get("v");
|
|
if (v) return v;
|
|
|
|
// youtube.com/embed/<id>
|
|
const embedMatch = url.pathname.match(/\/embed\/([^/]+)/);
|
|
if (embedMatch?.[1]) return embedMatch[1];
|
|
|
|
// youtube.com/shorts/<id>
|
|
const shortsMatch = url.pathname.match(/\/shorts\/([^/]+)/);
|
|
if (shortsMatch?.[1]) return shortsMatch[1];
|
|
|
|
return null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const MediaDetails = ({ mediaObj, whichTab, title, useNoCookie = true }) => {
|
|
const { t } = useTranslation();
|
|
const router = useRouter();
|
|
|
|
const sourceMedia = mediaObj?.value;
|
|
const isActive = whichTab ? whichTab === "case-media" : true;
|
|
|
|
// Build list of playable items (publishable only)
|
|
const videoItems = useMemo(() => {
|
|
const isWelsh = router.locale === "cy";
|
|
|
|
return (sourceMedia || [])
|
|
.filter((x) => x?.pinswg_publishtoweb)
|
|
.map((item) => {
|
|
const link = isWelsh
|
|
? item.pinswg_videoplatformurlwelsh
|
|
: item.pinswg_videoplatformurl;
|
|
|
|
const videoId = extractYouTubeId(link);
|
|
if (!videoId) return null;
|
|
|
|
return {
|
|
key:
|
|
item.pinswg_documentid ||
|
|
item.pinswg_mediaid ||
|
|
`${item.pinswg_eventrecordingid}-${videoId}`,
|
|
videoId,
|
|
name: item.pinswg_eventrecordingname || "Video",
|
|
description: item.pinswg_description || "",
|
|
// If you later store duration in CRM, map it here (e.g. "03:42")
|
|
duration: item.pinswg_duration || null,
|
|
thumbnailHQ: `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`,
|
|
thumbnailMax: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
|
|
raw: item
|
|
};
|
|
})
|
|
.filter(Boolean);
|
|
}, [sourceMedia, router.locale]);
|
|
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
|
|
// Default false so first item loads but does not play.
|
|
const [autoplay, setAutoplay] = useState(false);
|
|
|
|
// Bump this to force iframe remount (hard stop playback).
|
|
const [playerInstance, setPlayerInstance] = useState(0);
|
|
|
|
// Track which videos have been played (session only).
|
|
const [watchedIds, setWatchedIds] = useState(() => new Set());
|
|
|
|
// When list or locale changes: reset selection and do not autoplay
|
|
useEffect(() => {
|
|
setSelectedIndex(0);
|
|
setAutoplay(false);
|
|
setPlayerInstance((n) => n + 1);
|
|
}, [videoItems.length, router.locale]);
|
|
|
|
// When leaving the media tab: hard stop playback
|
|
useEffect(() => {
|
|
if (!isActive) {
|
|
setAutoplay(false);
|
|
setPlayerInstance((n) => n + 1);
|
|
}
|
|
}, [isActive]);
|
|
|
|
const selected = videoItems[selectedIndex] || null;
|
|
|
|
const domain = useNoCookie
|
|
? "https://www.youtube-nocookie.com"
|
|
: "https://www.youtube.com";
|
|
|
|
const embedSrc = selected
|
|
? `${domain}/embed/${selected.videoId}?rel=0&modestbranding=1&playsinline=1&autoplay=${
|
|
autoplay ? "1" : "0"
|
|
}`
|
|
: "";
|
|
|
|
if (!videoItems.length) return null;
|
|
|
|
return (
|
|
<div className="govuk-grid-row">
|
|
<div className="card">
|
|
<div className="card-body">
|
|
<h2 className="govuk-heading-m">{t("case:media-title")}</h2>
|
|
|
|
{/* Player: unmount when not active (guarantees playback stops) */}
|
|
{isActive && (
|
|
<div className="videoWrapper govuk-!-margin-bottom-4">
|
|
<iframe
|
|
key={`${selected?.videoId}-${playerInstance}`}
|
|
src={embedSrc}
|
|
title={selected?.name || "YouTube video"}
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Selected info */}
|
|
{selected && (
|
|
<div className="govuk-!-margin-bottom-4">
|
|
<div className="govuk-body">
|
|
<b>{t("case:event-name-label")}</b>:{" "}
|
|
{selected.name}
|
|
</div>
|
|
|
|
{!!selected.description && (
|
|
<div className="govuk-body">
|
|
<b>{t("case:event-event-name-label")}</b>:{" "}
|
|
{selected.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Video list */}
|
|
<h3 className="govuk-heading-s">
|
|
{t("case:video-heading")}
|
|
</h3>
|
|
|
|
<ul className="govuk-list govuk-list--spaced">
|
|
{videoItems.map((v, idx) => {
|
|
const isSelected = idx === selectedIndex;
|
|
|
|
return (
|
|
<li key={v.key}>
|
|
<button
|
|
type="button"
|
|
className={`videoTabButton ${
|
|
isSelected ? "active" : ""
|
|
}`}
|
|
aria-current={
|
|
isSelected ? "true" : undefined
|
|
}
|
|
onClick={() => {
|
|
setSelectedIndex(idx);
|
|
|
|
// Start playback only when user selects
|
|
setAutoplay(true);
|
|
|
|
// Force remount to stop previous + start clean
|
|
setPlayerInstance((n) => n + 1);
|
|
|
|
// Mark watched
|
|
setWatchedIds((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(v.videoId);
|
|
return next;
|
|
});
|
|
}}
|
|
>
|
|
<div className="videoTabContent">
|
|
<div className="thumbnailWrapper">
|
|
<img
|
|
src={v.thumbnailMax}
|
|
onError={(e) => {
|
|
// fallback for videos without maxres
|
|
e.currentTarget.src =
|
|
v.thumbnailHQ;
|
|
}}
|
|
alt=""
|
|
className="videoThumbnail"
|
|
loading="lazy"
|
|
/>
|
|
<span
|
|
className="playIcon"
|
|
aria-hidden="true"
|
|
>
|
|
▶
|
|
</span>
|
|
|
|
{!!v.duration && (
|
|
<span className="durationBadge">
|
|
{v.duration}
|
|
</span>
|
|
)}
|
|
|
|
{watchedIds.has(v.videoId) && (
|
|
<span className="watchedBadge">
|
|
Watched
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<span className="videoTitle">
|
|
{v.name}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MediaDetails;
|