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 { useEffect, useMemo, useState } from "react";
|
||||||
import useTranslation from "next-translate/useTranslation";
|
import useTranslation from "next-translate/useTranslation";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
import { getBilingualText } from "./summary/utils/helpers";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* MediaDetails
|
* MediaDetails
|
||||||
@@ -546,14 +149,22 @@ const MediaDetails = ({ mediaObj, whichTab, title, useNoCookie = true }) => {
|
|||||||
{selected && (
|
{selected && (
|
||||||
<div className="govuk-!-margin-bottom-4">
|
<div className="govuk-!-margin-bottom-4">
|
||||||
<div className="govuk-body">
|
<div className="govuk-body">
|
||||||
<b>{t("case:event-name-label")}</b>:{" "}
|
<b>{t("case:event-recording-name-label")}</b>:{" "}
|
||||||
{selected.name}
|
{selected.name}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!!selected.description && (
|
{!!selected.description && (
|
||||||
<div className="govuk-body">
|
<div className="govuk-body">
|
||||||
<b>{t("case:event-event-name-label")}</b>:{" "}
|
<b>
|
||||||
{selected.description}
|
{t(
|
||||||
|
"case:event-recording-description-label"
|
||||||
|
)}
|
||||||
|
</b>
|
||||||
|
:{" "}
|
||||||
|
{getBilingualText(
|
||||||
|
selected.description,
|
||||||
|
router.locale
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -169,5 +169,7 @@
|
|||||||
"summary-case-submission-date-label": "Dyddiad Cyflwyno'r Achos",
|
"summary-case-submission-date-label": "Dyddiad Cyflwyno'r Achos",
|
||||||
"summary-pre-examination-needed-label": "Angen Cyfarfod Cyn-arholiad",
|
"summary-pre-examination-needed-label": "Angen Cyfarfod Cyn-arholiad",
|
||||||
"summary-consultation-publicity-deadline-label": "Dyddiad Cau ar gyfer Ymgynghori/Cyhoeddusrwydd",
|
"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-case-submission-date-label": "Case Submission Date",
|
||||||
"summary-pre-examination-needed-label": "Pre-Examination Meeting Needed",
|
"summary-pre-examination-needed-label": "Pre-Examination Meeting Needed",
|
||||||
"summary-consultation-publicity-deadline-label": "Consultation/Publicity Deadline",
|
"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