Merged PR 2481: updated labels and added welsh language description
updated labels and added welsh language description Related work items: #24302
This commit is contained in:
Robert Bond
+12
-401
@@ -1,404 +1,7 @@
|
||||
// // 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";
|
||||
import { getBilingualText } from "./summary/utils/helpers";
|
||||
|
||||
/**
|
||||
* MediaDetails
|
||||
@@ -546,14 +149,22 @@ const MediaDetails = ({ mediaObj, whichTab, title, useNoCookie = true }) => {
|
||||
{selected && (
|
||||
<div className="govuk-!-margin-bottom-4">
|
||||
<div className="govuk-body">
|
||||
<b>{t("case:event-name-label")}</b>:{" "}
|
||||
<b>{t("case:event-recording-name-label")}</b>:{" "}
|
||||
{selected.name}
|
||||
</div>
|
||||
|
||||
{!!selected.description && (
|
||||
<div className="govuk-body">
|
||||
<b>{t("case:event-event-name-label")}</b>:{" "}
|
||||
{selected.description}
|
||||
<b>
|
||||
{t(
|
||||
"case:event-recording-description-label"
|
||||
)}
|
||||
</b>
|
||||
:{" "}
|
||||
{getBilingualText(
|
||||
selected.description,
|
||||
router.locale
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -169,5 +169,7 @@
|
||||
"summary-case-submission-date-label": "Dyddiad Cyflwyno'r Achos",
|
||||
"summary-pre-examination-needed-label": "Angen Cyfarfod Cyn-arholiad",
|
||||
"summary-consultation-publicity-deadline-label": "Dyddiad Cau ar gyfer Ymgynghori/Cyhoeddusrwydd",
|
||||
"summary-endof-examination-label": "Diwedd yr Arholiad/Dechrau'r Adrodd"
|
||||
"summary-endof-examination-label": "Diwedd yr Arholiad/Dechrau'r Adrodd",
|
||||
"event-recording-name-label": "Enw'r recordiad digwyddiad",
|
||||
"event-recording-description-label": "Disgrifiad"
|
||||
}
|
||||
@@ -170,5 +170,7 @@
|
||||
"summary-case-submission-date-label": "Case Submission Date",
|
||||
"summary-pre-examination-needed-label": "Pre-Examination Meeting Needed",
|
||||
"summary-consultation-publicity-deadline-label": "Consultation/Publicity Deadline",
|
||||
"summary-endof-examination-label": "End of Examination/Start of Reporting"
|
||||
"summary-endof-examination-label": "End of Examination/Start of Reporting",
|
||||
"event-recording-name-label": "Event recording name",
|
||||
"event-recording-description-label": "Description"
|
||||
}
|
||||
Reference in New Issue
Block a user