Merged PR 2269: added link for streaming events
added link for streaming events Related work items: #22423
This commit is contained in:
Robert Bond
+118
-82
@@ -3,6 +3,10 @@ import { setCurrentPage } from "../../store/currentView/action";
|
||||
import { connect } from "react-redux";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { formatDates } from "../utils";
|
||||
import {
|
||||
getLivePublishedEvent,
|
||||
isEventLiveNow
|
||||
} from "./summary/utils/liveEvent";
|
||||
|
||||
const EventsDetails = (props) => {
|
||||
let { t } = useTranslation();
|
||||
@@ -23,8 +27,6 @@ const EventsDetails = (props) => {
|
||||
return obj.hasOwnProperty(property) && obj[property] !== null;
|
||||
}
|
||||
|
||||
//console.log(eventsArr.length > 0);
|
||||
|
||||
return (
|
||||
eventsArr.length > 0 && (
|
||||
<div className="govuk-grid-row">
|
||||
@@ -63,76 +65,26 @@ const EventsDetails = (props) => {
|
||||
{item.pinswg_eventname}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="eventColumn">
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_eventaddressline1"
|
||||
) && (
|
||||
<>
|
||||
<div>
|
||||
<b>
|
||||
{t(
|
||||
"case:event-address-label"
|
||||
)}
|
||||
</b>
|
||||
:
|
||||
</div>
|
||||
<div>
|
||||
{
|
||||
item.pinswg_eventaddressline1
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_eventaddressline2"
|
||||
[
|
||||
"pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
) && (
|
||||
<div>
|
||||
<b>
|
||||
{t(
|
||||
"case:event-type-of-event-label"
|
||||
)}
|
||||
</b>
|
||||
:{" "}
|
||||
{
|
||||
item.pinswg_eventaddressline2
|
||||
item[
|
||||
"pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_eventaddresstown"
|
||||
) && (
|
||||
<div>
|
||||
{
|
||||
item.pinswg_eventaddresstown
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_eventaddresscounty"
|
||||
) && (
|
||||
<div>
|
||||
{
|
||||
item.pinswg_eventaddresscounty
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_eventaddresscounty"
|
||||
) && (
|
||||
<div>
|
||||
{
|
||||
item.pinswg_eventaddresspostcode
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* type of event
|
||||
start date date of event - end date of event
|
||||
|
||||
if virtual event no address showNoOfRecords
|
||||
show event address */}
|
||||
<div className="eventColumn">
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_dateeventrequested"
|
||||
@@ -171,25 +123,109 @@ const EventsDetails = (props) => {
|
||||
<div className="eventColumn">
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
[
|
||||
"pinswg_typeofevent@OData.Community.Display.V1.FormattedValue",
|
||||
]
|
||||
"pinswg_eventaddressline1"
|
||||
) && (
|
||||
<div>
|
||||
<b>
|
||||
{t(
|
||||
"case:event-type-of-event-label"
|
||||
)}
|
||||
</b>
|
||||
:{" "}
|
||||
{
|
||||
item[
|
||||
"pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</div>
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: "flex"
|
||||
}}
|
||||
>
|
||||
<b>
|
||||
{t(
|
||||
"case:event-address-label"
|
||||
)}
|
||||
</b>
|
||||
:
|
||||
<div
|
||||
style={{
|
||||
display:
|
||||
"flex",
|
||||
marginLeft:
|
||||
"10px",
|
||||
flexDirection:
|
||||
"column"
|
||||
}}
|
||||
>
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_eventaddressline1"
|
||||
) && (
|
||||
<span>
|
||||
{
|
||||
item.pinswg_eventaddressline1
|
||||
}
|
||||
</span>
|
||||
)}
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_eventaddressline2"
|
||||
) && (
|
||||
<span>
|
||||
{
|
||||
item.pinswg_eventaddressline2
|
||||
}
|
||||
</span>
|
||||
)}
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_eventaddresstown"
|
||||
) && (
|
||||
<span>
|
||||
{
|
||||
item.pinswg_eventaddresstown
|
||||
}
|
||||
</span>
|
||||
)}
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_eventaddresscounty"
|
||||
) && (
|
||||
<span>
|
||||
{
|
||||
item.pinswg_eventaddresscounty
|
||||
}
|
||||
</span>
|
||||
)}
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_eventaddresscounty"
|
||||
) && (
|
||||
<span>
|
||||
{
|
||||
item.pinswg_eventaddresspostcode
|
||||
}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* type of event
|
||||
start date date of event - end date of event
|
||||
|
||||
if virtual event no address showNoOfRecords
|
||||
show event address */}
|
||||
|
||||
{hasOwnPropertyAndNotNull(
|
||||
item,
|
||||
"pinswg_linktotheevent"
|
||||
) &&
|
||||
isEventLiveNow(item) && (
|
||||
<div className="eventColumn">
|
||||
<a
|
||||
href={
|
||||
item.pinswg_linktotheevent
|
||||
}
|
||||
className="govuk-link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Watch live stream
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
@@ -203,7 +239,7 @@ const EventsDetails = (props) => {
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
...state,
|
||||
...state
|
||||
};
|
||||
};
|
||||
|
||||
@@ -214,7 +250,7 @@ const mapDispatchToProps = (dispatch) => {
|
||||
},
|
||||
setCurrentPage: (currentPage) => {
|
||||
dispatch(setCurrentPage(currentPage));
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -32,6 +32,10 @@ import {
|
||||
import { signIn, useSession } from "next-auth/react";
|
||||
import { destroyCookie, parseCookies, setCookie } from "nookies";
|
||||
import { getFormCollectionByID, getDetailsProxy } from "../utils";
|
||||
import {
|
||||
getLivePublishedEvent,
|
||||
isEventLiveNow
|
||||
} from "./summary/utils/liveEvent";
|
||||
|
||||
import * as CaseTypes from "./summaryTypes"; // ✅ must match filename exactly
|
||||
import {
|
||||
@@ -321,6 +325,10 @@ const CaseSummary = (props) => {
|
||||
Array.isArray(props.mediaObj?.value) &&
|
||||
props.mediaObj.value.length > 0;
|
||||
|
||||
const livePublishedEvent = hasEventsTabData
|
||||
? getLivePublishedEvent(props.eventsObj)
|
||||
: null;
|
||||
|
||||
let point = {};
|
||||
let siteCoords = {};
|
||||
let center = {};
|
||||
@@ -359,6 +367,45 @@ const CaseSummary = (props) => {
|
||||
showDetails == true ? (
|
||||
<>
|
||||
<div className="govuk-frontend-supported">
|
||||
{livePublishedEvent && (
|
||||
<div
|
||||
className="govuk-notification-banner govuk-!-margin-bottom-6"
|
||||
role="region"
|
||||
aria-labelledby="live-event-title"
|
||||
data-module="govuk-notification-banner"
|
||||
>
|
||||
<div className="govuk-notification-banner__header">
|
||||
<h2
|
||||
className="govuk-notification-banner__title"
|
||||
id="live-event-title"
|
||||
>
|
||||
Live event
|
||||
</h2>
|
||||
</div>
|
||||
<div className="govuk-notification-banner__content">
|
||||
<p className="govuk-notification-banner__heading">
|
||||
A live streamed event is happening now.
|
||||
</p>
|
||||
|
||||
{livePublishedEvent.pinswg_eventname && (
|
||||
<p className="govuk-body">
|
||||
{livePublishedEvent.pinswg_eventname}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<a
|
||||
href={
|
||||
livePublishedEvent.pinswg_linktotheevent
|
||||
}
|
||||
className="govuk-link govuk-link--no-visited-state"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Watch live stream
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
|
||||
@@ -373,6 +420,7 @@ const CaseSummary = (props) => {
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-tabs" data-module="govuk-tabs">
|
||||
<h2 className="govuk-tabs__title">Contents</h2>
|
||||
<ul className="govuk-tabs__list">
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
export function isEventLiveNow(item) {
|
||||
if (!item?.pinswg_dateeventrequested) return false;
|
||||
|
||||
const now = new Date();
|
||||
const start = new Date(item.pinswg_dateeventrequested);
|
||||
|
||||
if (isNaN(start.getTime())) return false;
|
||||
|
||||
if (item.pinswg_enddateoftheevent) {
|
||||
const end = new Date(item.pinswg_enddateoftheevent);
|
||||
if (isNaN(end.getTime())) return false;
|
||||
return now >= start && now <= end;
|
||||
}
|
||||
|
||||
const endOfStartDay = new Date(start);
|
||||
endOfStartDay.setHours(23, 59, 59, 999);
|
||||
|
||||
return now >= start && now <= endOfStartDay;
|
||||
}
|
||||
|
||||
export function getLivePublishedEvent(eventsObj) {
|
||||
const eventsArr = eventsObj?.value || [];
|
||||
|
||||
return eventsArr.find(
|
||||
(item) =>
|
||||
item.pinswg_eventpublishflag &&
|
||||
item.pinswg_linktotheevent &&
|
||||
isEventLiveNow(item)
|
||||
);
|
||||
}
|
||||
@@ -3121,6 +3121,7 @@ ul.subFieldList {
|
||||
border-bottom: 1px solid $lightgrey_semi;
|
||||
padding-bottom: 10px;
|
||||
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
@@ -3128,7 +3129,13 @@ ul.subFieldList {
|
||||
|
||||
.eventColumn {
|
||||
line-height: 1.5;
|
||||
width: 25%;
|
||||
min-width: 33%;
|
||||
|
||||
div {
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user