From 53540911ccf926774817a8aa5adec2c23bb6417a Mon Sep 17 00:00:00 2001
From: robbond <rob@rdbsolutions.co.uk>
Date: Wed, 4 Feb 2026 11:22:11 +0000
Subject: [PATCH] 21254 youtube media player

---
 components/case/media.js               | 646 +++++++++++++++++++++++++
 middleware.js                          |  12 +-
 pages/case/[ticketnumber].js           |  24 +-
 styles/sass/welshgov/_application.scss | 104 ++++
 4 files changed, 774 insertions(+), 12 deletions(-)
 create mode 100644 components/case/media.js

diff --git a/components/case/media.js b/components/case/media.js
new file mode 100644
index 00000000..558f919e
--- /dev/null
+++ b/components/case/media.js
@@ -0,0 +1,646 @@
+// // 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 mediaArr = 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 (mediaArr || [])
+            .filter((x) => x?.pinswg_publishtoweb)
+            .map((item) => {
+                const link = isWelsh
+                    ? item.pinswg_mediaLinkCY
+                    : item.pinswg_mediaLinkEN;
+
+                const videoId = extractYouTubeId(link);
+                if (!videoId) return null;
+
+                return {
+                    key:
+                        item.pinswg_documentid ||
+                        item.pinswg_mediaid ||
+                        `${item.pinswg_name}-${videoId}`,
+                    videoId,
+                    name: item.pinswg_name || "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);
+    }, [mediaArr, 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;
diff --git a/middleware.js b/middleware.js
index de7a6db7..8f004a94 100644
--- a/middleware.js
+++ b/middleware.js
@@ -9,12 +9,12 @@ export function middleware(request) {
             process.env.NODE_ENV === "production" ? "" : `'unsafe-eval'`
         };
         style-src 'self' 'unsafe-eval' 'unsafe-inline';
-        img-src 'self' 'unsafe-inline'  https://www.gov.wales https://gov.wales https://fonts.gstatic.com https://www.googletagmanager.com  blob: data:;
+        img-src 'self' 'unsafe-inline'  https://www.gov.wales https://gov.wales https://fonts.gstatic.com https://www.googletagmanager.com  blob: data: https://img.youtube.com;
         connect-src 'self' http://127.0.0.1 https://uksouth-1.in.applicationinsights.azure.com https://ukwest-0.in.applicationinsights.azure.com https://js.monitor.azure.com https://region1.google-analytics.com;
         font-src 'self'  https://pro.fontawesome.com/ https://fonts.gstatic.com/ ;
         object-src 'none';
         base-uri 'self';
-        frame-src https://datamap.gov.wales/;
+        frame-src https://datamap.gov.wales/ https://www.youtube.com https://www.youtube-nocookie.com;
         form-action 'self' ` +
         process.env.NEXTAUTH_URL +
         `;
@@ -49,7 +49,7 @@ export function middleware(request) {
     // CSP policy
     requestHeaders.set(
         "Content-Security-Policy",
-        contentSecurityPolicyHeaderValue
+        contentSecurityPolicyHeaderValue,
     );
 
     const response = NextResponse.next({
@@ -59,7 +59,7 @@ export function middleware(request) {
     });
     response.headers.set(
         "Content-Security-Policy",
-        contentSecurityPolicyHeaderValue
+        contentSecurityPolicyHeaderValue,
     );
 
     // XSS protection (legacy)
@@ -77,13 +77,13 @@ export function middleware(request) {
     // Permissions lockdown
     response.headers.set(
         "Permissions-Policy",
-        "geolocation=(), camera=(), microphone=(), fullscreen=(self)"
+        "geolocation=(), camera=(), microphone=(), fullscreen=(self)",
     );
 
     // Enforce HTTPS via HSTS
     response.headers.set(
         "Strict-Transport-Security",
-        "max-age=63072000; includeSubDomains; preload"
+        "max-age=63072000; includeSubDomains; preload",
     );
 
     return response;
diff --git a/pages/case/[ticketnumber].js b/pages/case/[ticketnumber].js
index 85d30e91..2605b89c 100644
--- a/pages/case/[ticketnumber].js
+++ b/pages/case/[ticketnumber].js
@@ -10,6 +10,7 @@ import {
     getPersonalAccount,
     getPortalLogin,
     getSIPSEvents,
+    getSIPSMedia,
 } from "../../actions";
 import Breadcrumbs from "../../components/breadcrumbs";
 import Case from "../../components/case";
@@ -24,6 +25,7 @@ import {
     setEventDetails,
     setSearchDetails,
     setSearchResults,
+    setMediaDetails,
 } from "../../store/searchOutput/action";
 import { wrapper } from "../../store/store";
 import ServiceBanner from "../../components/servicebanner";
@@ -104,11 +106,12 @@ const CaseHome = (props) => {
                         representationsObj={
                             props.searchResultsObj.representationsObj
                         }
-                        showLoginCheck={true}
+                        showLoginCheck={props.showLoginCheck}
                         messagesObj={props.messagesObj}
                         showFilteredDocs={props.showFilteredDocs}
                         showMaps={props.showMaps}
                         eventsObj={props.searchResultsObj.eventsObj}
+                        mediaObj={props.searchResultsObj.mediaObj}
                     />
                 </div>
                 <Footer
@@ -159,14 +162,22 @@ export const getServerSideProps = wrapper.getServerSideProps(
         const searchDetailsObj = await getSearchDetails(searchResultsObj);
 
         var eventsObj = {};
+        var mediaObj = {};
 
         if (searchResultsObj.value[0].pinswg_appealcasetype == 846040002) {
             eventsObj = await getSIPSEvents(
-                searchDetailsObj[0].value[0].pinswg_sipsid
+                searchDetailsObj[0].value[0].pinswg_sipsid,
             );
             store.dispatch(setEventDetails(eventsObj));
         }
 
+        if (searchResultsObj.value[0].pinswg_appealcasetype == 846040002) {
+            mediaObj = await getSIPSMedia(
+                searchDetailsObj[0].value[0].pinswg_sipsid,
+            );
+            store.dispatch(setMediaDetails(mediaObj));
+        }
+
         //console.log(
         //     "\n======================================\n",
         //     searchResultsObj,
@@ -182,7 +193,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
         console.log(
             searchResultsObj["@odata.count"] > 1 ||
-                searchResultsObj["@odata.count"] < 1
+                searchResultsObj["@odata.count"] < 1,
         );
 
         if (searchResultsObj["@odata.count"] < 1) {
@@ -223,7 +234,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
                                   searchDetailsObj[0].value[0]
                                       .pinswg_specialistcaseprocess
                                 : "",
-                    })
+                    }),
                 );
             }
         }
@@ -234,17 +245,18 @@ export const getServerSideProps = wrapper.getServerSideProps(
                     searchResultsObj: searchResultsObj,
                     searchDetailsObj: searchDetailsObj,
                     eventsObj: eventsObj,
+                    mediaObj: mediaObj,
                 },
                 currentType: "directResultsObj",
                 docsOffline: process.env.DOCAPI_OFFLINE || false,
                 messagesObj: await getCaseMessage(
-                    searchResultsObj.value[0].incidentid
+                    searchResultsObj.value[0].incidentid,
                 ),
                 showFilteredDocs: process.env.SHOWFILTERDOCS || false,
                 showMaps: process.env.SHOWMAPS,
             },
         };
-    }
+    },
 );
 
 const mapStateToProps = (state) => {
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 14f802ae..e6eec86b 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -3164,4 +3164,108 @@ ul.subFieldList {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
     line-height: 1.4;
+}
+
+#case-media {
+    .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;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .watchedBadge {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        background: #00703c;
+        color: white;
+        font-size: 11px;
+        padding: 2px 6px;
+        border-radius: 3px;
+    }
+
+    .videoTitle {
+        font-weight: 600;
+    }
+
+    @media (max-width: 40.0625em) {
+        .thumbnailWrapper {
+            width: 90px;
+        }
+    }
 }
\ No newline at end of file