@openeventkit/event-site 2.0.143 → 2.0.144

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.143",
+  "version": "2.0.144",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -30,7 +30,7 @@
     "@vimeo/player": "^2.16.3",
     "ably": "^1.2.34",
     "assert": "^2.1.0",
-    "attendee-to-attendee-widget": "3.1.1-beta.34",
+    "attendee-to-attendee-widget": "3.2.0",
     "autoprefixer": "10.4.14",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "axios": "^0.19.2",
@@ -78,7 +78,7 @@
     "jsdom": "^24.1.0",
     "klaro": "^0.7.21",
     "lite-schedule-widget": "3.0.3",
-    "live-event-widget": "4.0.2",
+    "live-event-widget": "4.0.4",
     "lodash": "^4.17.19",
     "lz-string": "^1.4.4",
     "markdown-it": "^12.0.0",
@@ -130,10 +130,10 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "5.0.37",
+    "summit-registration-lite": "5.0.40",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
-    "upcoming-events-widget": "3.0.5",
+    "upcoming-events-widget": "3.0.7",
     "urijs": "^1.19.2",
     "use-fit-text": "^2.4.0",
     "uuid": "^7.0.0",

package/src/actions/fetch-entities-actions.js

@@ -181,7 +181,21 @@ export const fetchSpeakerById = async(summitId, speakerId, accessToken = null) =
 export const fetchSummitById =  async(summitId, accessToken = null) => {
     let apiUrl = URI(`${process.env.GATSBY_SUMMIT_API_BASE_URL}/api/public/v1/summits/${summitId}`);
 
-    apiUrl.addQuery('expand', 'event_types,tracks,track_groups,presentation_levels,locations.rooms,locations.floors,order_extra_questions.values,schedule_settings,schedule_settings.filters,schedule_settings.pre_filters');
+    const expand = [
+        'event_types',
+        'tracks',
+        'tracks.subtracks',
+        'track_groups',
+        'presentation_levels',
+        'locations.rooms',
+        'locations.floors',
+        'order_extra_questions.values',
+        'schedule_settings',
+        'schedule_settings.filters',
+        'schedule_settings.pre_filters',
+    ]
+
+    apiUrl.addQuery('expand', expand.join(','));
 
     return fetch(apiUrl.toString(), {
         method: 'GET'

package/src/components/AttendeeToAttendeeWidgetComponent.js

@@ -197,7 +197,7 @@ const mapState = ({ settingState }) => ({
 
 export const AttendeesWidget = connect(mapState)(AttendeesWidgetComponent);
 
-const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
+const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings, updateChatProfileEnabled=false }) => {
   const chatProps = {
     streamApiKey: getEnvVariable(STREAM_IO_API_KEY),
     apiBaseUrl: getEnvVariable(IDP_BASE_URL),
@@ -299,6 +299,7 @@ const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
     },
     summitId: parseInt(getEnvVariable(SUMMIT_ID)),
     keepAliveEnabled: true,
+    updateChatProfileEnabled: updateChatProfileEnabled,
     ...chatProps,
     ...sbAuthProps
   };

package/src/components/ClockComponent.js

@@ -1,20 +1,17 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import Clock from 'openstack-uicore-foundation/lib/components/clock';
-import { updateClock } from '../actions/clock-actions';
+import React from "react";
+import { connect } from "react-redux";
+import Clock from "openstack-uicore-foundation/lib/components/clock";
+import { updateClock } from "../actions/clock-actions";
 
 const ClockComponent = ({
   active,
   summit,
   updateClock
 }) => {
+  if (!active || !summit) return null;
   return (
-    <div>
-      {active && summit &&
-      <Clock onTick={(timestamp) => updateClock(timestamp)} timezone={summit.time_zone_id} />
-      }
-    </div>
+    <Clock onTick={(timestamp) => updateClock(timestamp)} timezone={summit.time_zone_id} />
   );
 }
 
-export default connect(null, { updateClock })(ClockComponent);
+export default connect(null, { updateClock })(ClockComponent);

package/src/components/FullSchedule.js

@@ -27,7 +27,7 @@ const FullSchedule = ({
   ...rest
 }) => {
   const { getSettingByKey } = useMarketingSettings();
-  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.schedultDefaultImage);
+  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.scheduleDefaultImage);
   const summitLogoPrint = getSettingByKey(MARKETING_SETTINGS_KEYS.fullScheduleSummitLogoPrint);
   const componentProps = {
     title: "Schedule",

package/src/components/Interstitial/index.js

@@ -0,0 +1,61 @@
+import React, { useEffect } from "react";
+import { navigate } from "gatsby";
+import { Box, Typography } from "@mui/material";
+
+const containerStyles = (contained) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  width: "100%",
+  height: contained ? "100%" : "100vh"
+});
+
+const titleStyle = {
+  color: "var(--color_text_dark)",
+  fontFamily: "var(--font_family)",
+  fontSize: "2rem",
+  fontWeight: 600,
+  lineHeight: 1.125,
+};
+
+const subtitleStyle = {
+  color: "var(--color_text_dark)",
+  fontFamily: "var(--font_family)",
+  fontSize: "1.25rem",
+  fontWeight: 400,
+  lineHeight: 1.25,
+};
+
+const Interstitial = ({
+  children,
+  title,
+  subtitle,
+  navigateTo,
+  navigateOptions = {},
+  timeout = 3000,
+  contained = false
+}) => {
+  useEffect(() => {
+    if (navigateTo) {
+      const timer = setTimeout(() => navigate(navigateTo, navigateOptions), timeout);
+      return () => clearTimeout(timer);
+    }
+  }, [navigateTo, navigateOptions, timeout]);
+
+  return (
+    <Box sx={containerStyles(contained)}>
+      {children ? (
+        children
+      ) : (
+        <Box sx={{ width: "100%", textAlign: "center" }}>
+          <Typography sx={titleStyle} gutterBottom>
+            {title}
+          </Typography>
+          <Typography sx={subtitleStyle}>{subtitle}</Typography>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default Interstitial;

package/src/components/LiteScheduleComponent.js

@@ -5,7 +5,7 @@ import {connect} from "react-redux";
 // these two libraries are client-side only
 import LiteSchedule from "lite-schedule-widget/dist";
 import "lite-schedule-widget/dist/index.css";
-// awesome-bootstrap-checkbox css dependency 
+// awesome-bootstrap-checkbox css dependency
 // https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.2/awesome-bootstrap-checkbox.min.css
 // injected through HeadComponents
 
@@ -26,7 +26,7 @@ const LiteScheduleComponent = ({
    ...rest
 }) => {
   const { getSettingByKey } = useMarketingSettings();
-  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.schedultDefaultImage);
+  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.scheduleDefaultImage);
   const scheduleState = schedules?.find( s => s.key === schedKey);
 
   const componentProps = {

package/src/components/LiveEventWidgetComponent.js

@@ -5,7 +5,7 @@ import {connect} from "react-redux";
 // these two libraries are client-side only
 import LiveEventWidget from 'live-event-widget/dist/index.js';
 import 'live-event-widget/dist/index.css';
-// awesome-bootstrap-checkbox css dependency 
+// awesome-bootstrap-checkbox css dependency
 // https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.2/awesome-bootstrap-checkbox.min.css
 // injected through HeadComponents
 
@@ -20,9 +20,8 @@ const LiveEventWidgetComponent = ({
   ...rest
 }) => {
   const { getSettingByKey } = useMarketingSettings();
-  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.schedultDefaultImage);
+  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.scheduleDefaultImage);
   const scheduleState = schedules?.find( s => s.key === 'schedule-main');
-
   const widgetProps = {
     title: "",
     defaultImage: defaultImage,

package/src/components/PrePostEventSlide/index.js

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Box, Typography } from "@mui/material";
+import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
+import { PHASES } from "@utils/phasesUtils";
+
+const containerStyles = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  color: "var(--color_text_light)",
+  backgroundColor: "var(--color_secondary)",
+  aspectRatio: "auto 16/9",
+  px: 3,
+  py: 5
+};
+
+const titleStyle = {
+  color: "var(--color_text_light)",
+  fontFamily: "var(--font_family)",
+  fontSize: "42px",
+  fontWeight: 600,
+  lineHeight: 1.125
+};
+
+const subtitleStyle = {
+  color: "var(--color_text_light)",
+  fontFamily: "var(--font_family)",
+  fontSize: "36px",
+  fontWeight: 400,
+  lineHeight: 1.25
+};
+
+const getSubtitle = (eventClassName, eventPhase, streamingUrl, startDate, timeZoneId) => {
+  if (eventClassName !== "Presentation") {
+    return "Next session will start soon...";
+  }
+
+  if (eventPhase === PHASES.AFTER && !streamingUrl) {
+    return "Session is over. Recording will be available soon.";
+  }
+
+  if (eventPhase < PHASES.DURING || !streamingUrl) {
+    const formattedTime = epochToMomentTimeZone(startDate, timeZoneId).format("MMMM D hh:mm A (z)");
+    return `This session will be available on ${formattedTime}`;
+  }
+
+  return "";
+};
+
+const PrePostEventSlide = ({ summit, event, eventPhase }) => {
+  const { title, class_name: eventClassName, start_date: startDate, streaming_url: streamingUrl } = event;
+  const { time_zone_id: timeZoneId } = summit;
+
+  const subtitle = getSubtitle(eventClassName, eventPhase, streamingUrl, startDate, timeZoneId);
+
+  return (
+    <Box sx={containerStyles}>
+      <Typography gutterBottom sx={titleStyle}>
+        {title}
+      </Typography>
+      <Typography sx={subtitleStyle}>{subtitle}</Typography>
+    </Box>
+  );
+};
+
+export default PrePostEventSlide;

package/src/components/UpcomingEventsComponent.js

@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 // these two libraries are client-side only
 import UpcomingEvents from "upcoming-events-widget/dist";
 import "upcoming-events-widget/dist/index.css";
-// awesome-bootstrap-checkbox css dependency 
+// awesome-bootstrap-checkbox css dependency
 // https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.2/awesome-bootstrap-checkbox.min.css
 // injected through HeadComponents
 
@@ -27,7 +27,7 @@ const UpcomingEventsComponent = ({
 }) => {
   const wrapperClass = page === "marketing-site" ? "schedule-container-marketing" : "schedule-container";
   const { getSettingByKey } = useMarketingSettings();
-  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.schedultDefaultImage);
+  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.scheduleDefaultImage);
   const scheduleState = schedules?.find( s => s.key === 'schedule-main');
 
   const componentProps = {

package/src/components/VimeoPlayer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Player from '@vimeo/player';
+import * as Sentry from "@sentry/react";
 import eventNames from './VimeoPlayerEventNames';
 import Swal from 'sweetalert2';
 
@@ -387,6 +388,7 @@ VimeoPlayer.defaultProps = {
     onError: (error) => {
         Swal.fire('Error', 'This video stream will begin momentarily. Please standby.', "warning");
         console.log(error);
+        Sentry.captureException(error)
     }
 };
 

package/src/pages/maintenance.js

@@ -1,14 +1,12 @@
 import React from "react";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 import useSiteSettings from "@utils/useSiteSettings";
 
-import "../styles/bulma.scss";
-
 const MaintenancePage = () => {
   const { maintenanceMode: { title, subtitle } } = useSiteSettings();
 
   return (
-    <HeroComponent
+    <Interstitial
       title={title}
       subtitle={subtitle}
     />

package/src/routes/ShowOpenRoute.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 
 import { PHASES } from "../utils/phasesUtils";
 import { requireExtraQuestions, doVirtualCheckIn } from "../actions/user-actions";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 import  FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parser";
 import moment from "moment-timezone";
 
@@ -37,7 +37,7 @@ const ShowOpenRoute = ({
       if(attendee)
         doVirtualCheckIn(attendee);
     }
-  },[summitPhase, hasTicket, userProfile, doVirtualCheckIn]);
+  }, [summitPhase, hasTicket, userProfile, doVirtualCheckIn]);
 
   const userCanByPassAuthz = () => {
     return isAuthorized;
@@ -61,14 +61,14 @@ const ShowOpenRoute = ({
 
   // if summit didnt started yet ...
   if (!shouldBypassCheck && !userCanByPassAuthz() && summitPhase === PHASES.BEFORE) {
-    return <HeroComponent title="You are now logged in. Additional event info is now available on the website." redirectTo="/" />;
+    return <Interstitial title="You are now logged in. Additional event info is now available on the website." navigateTo="/" />;
   }
 
   if (requireExtraQuestions()) {
     return (
-      <HeroComponent
+      <Interstitial
         title="You need to complete some extra questions before entering the event"
-        redirectTo="/a/extra-questions"
+        navigateTo="/a/extra-questions"
       />
     );
   }

package/src/routes/WithAuthzRoute.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { navigate } from "gatsby";
 import { pick } from "@gatsbyjs/reach-router";
 import { getUserProfile, requireExtraQuestions } from "../actions/user-actions";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "@utils/authorizedGroups";
 
 const pathsRequiringVirtualBadge = [
@@ -79,20 +79,20 @@ const WithAuthzRoute = ({
     }, [fetchedUserProfile, isLoggedIn, hasTicket, isAuthorized, userProfile, getUserProfile, userIsAuthz]);
 
     if (!isLoggedIn) {
-        navigate("/", {state: {backUrl: `${location.pathname}`,},});
+        navigate("/", { state: { backUrl: `${location.pathname}` } });
         return null;
     }
 
     // we are checking credentials if userProfile is being loading yet or
     // if we are re-fetching the user profile to check new data ( user currently is not a authz
     if (!userIsReady() || checkingCredentials()) {
-        return <HeroComponent title="Checking credentials..."/>;
+        return <Interstitial title="Checking credentials..."/>;
     }
 
     // has no ticket -> redirect
     if (!userIsAuthz) {
-        const options = { state: { error: !hasTicket ? 'no-ticket' : 'no-virtual-access' } };
-        return <HeroComponent title="Checking credentials..." redirectTo="/authz/ticket" options={options}/>;
+        const options = { state: { error: !hasTicket ? "no-ticket" : "no-virtual-access" } };
+        return <Interstitial title="Checking credentials..." navigateTo="/authz/ticket" navigateOptions={options} />;
     }
 
     return children;

package/src/routes/WithBadgeRoute.js

@@ -1,8 +1,8 @@
 import React, {useEffect} from "react";
 import { connect } from "react-redux";
 import { isAuthorizedBadge } from "../utils/authorizedGroups";
-import HeroComponent from "../components/HeroComponent";
-import {getEventById, getEventStreamingInfoById} from "../actions/event-actions";
+import Interstitial from "../components/Interstitial";
+import { getEventById, getEventStreamingInfoById } from "../actions/event-actions";
 import { isMuxVideo } from "../utils/videoUtils";
 import {navigate} from "gatsby";
 
@@ -26,7 +26,7 @@ const WithBadgeRoute = ({ children, location, eventId, event, loading, userProfi
       getEventById(eventId).then((res) => {
         const { err }  = res;
         // check error
-        if(err && err?.status === 404){
+        if (err && err?.status === 404){
            navigate('/a/schedule');
         }        
         getEventStreamingInfoById(eventId)
@@ -37,11 +37,11 @@ const WithBadgeRoute = ({ children, location, eventId, event, loading, userProfi
   }, [eventId, getEventById, event, getEventStreamingInfoById]);
 
   if (loading || needsToLoadEvent) {
-    return <HeroComponent title="Loading event" />;
+    return <Interstitial title="Loading event" />;
   }
 
   if (!userIsAuthz || !hasBadgeForEvent) {
-    return <HeroComponent title={getTitle()} redirectTo={location.state?.previousUrl || "/"}/>;
+    return <Interstitial title={getTitle()} navigateTo={location.state?.previousUrl || "/"} />;
   }
 
   return children;

package/src/routes/WithTicketRoute.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 
 const WithTicketRoute = ({ children, location, userProfile, hasTicket, isAuthorized }) => {
   const userIsAuthz = hasTicket || isAuthorized;
@@ -13,7 +13,7 @@ const WithTicketRoute = ({ children, location, userProfile, hasTicket, isAuthori
   };
 
   if (!userIsAuthz || !userProfile) {
-    return <HeroComponent title={getTitle()} redirectTo={location.state?.previousUrl || "/"} />;
+    return <Interstitial title={getTitle()} navigateTo={location.state?.previousUrl || "/"} />;
   }
 
   return children;
@@ -22,7 +22,7 @@ const WithTicketRoute = ({ children, location, userProfile, hasTicket, isAuthori
 const mapStateToProps = ({ userState }) => ({
   userProfile: userState.userProfile,
   hasTicket: userState.hasTicket,
-  isAuthorized: userState.isAuthorized,
+  isAuthorized: userState.isAuthorized
 });
 
 export default connect(mapStateToProps)(WithTicketRoute);

package/src/routes/authorization-callback-route.js

@@ -18,7 +18,7 @@ import { Redirect } from "@gatsbyjs/reach-router";
 import { connect } from "react-redux";
 import AbstractAuthorizationCallbackRoute from "openstack-uicore-foundation/lib/security/abstract-auth-callback-route";
 import { getUserProfile, addToSchedule, removeFromSchedule } from "../actions/user-actions";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 import { getEnvVariable, IDP_BASE_URL, OAUTH2_CLIENT_ID } from "@utils/envVariables";
 import { getPendingAction } from "@utils/schedule";
 
@@ -58,7 +58,7 @@ class AuthorizationCallbackRoute extends AbstractAuthorizationCallbackRoute {
             error.includes("access_denied") ||
             error.includes("consent_required")
         ) return <Redirect to={"/"} noThrow />;
-        return <Redirect to={`/error?error=${error}`} noThrow/>;
+        return <Redirect to={`/error?error=${error}`} noThrow />;
     }
 
     render() {
@@ -75,13 +75,13 @@ class AuthorizationCallbackRoute extends AbstractAuthorizationCallbackRoute {
         if (!id_token_is_valid) {
             return this._redirect2Error("token_validation_error");
         }
-        return <HeroComponent title="Checking credentials..."/>;
+        return <Interstitial title="Checking credentials..." />;
     }
 }
 
 
 const mapStateToProps = ({ userState }) => ({
-    userProfile: userState.userProfile,
+    userProfile: userState.userProfile
 });
 
 export default connect(mapStateToProps, {

package/src/styles/style.scss

@@ -120,10 +120,6 @@ footer {
   padding-top: 12px;
 }
 
-#content-wrapper {
-  min-height: 95vh;
-}
-
 div.login-form {
   display: block;
   background-color: #f5f5f5;
@@ -204,26 +200,12 @@ h2 {
 .talk {
   color: var(--color_text_dark);
 
-  &__break {
-    background-color: var(--color_secondary);
-    width: 100%;
-    aspect-ratio: auto 16 / 9;
-
-    h1,
-    h2 {
-      color: var(--color_text_light);
-      font-size: 42px;
-    }
-  }
-
   h1 {
     font-size: 40px;
-    color: var(--color_text_dark);
   }
 
   &__date {
     font-weight: bold;
-    color: var(--color_text_dark);
   }
 
   &__speaker, &__moderator {

package/src/templates/event-page.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import PropTypes from "prop-types";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
 import { isEqual } from "lodash";
 import Layout from "../components/Layout";
 import DisqusComponent from "../components/DisqusComponent";
@@ -11,14 +11,14 @@ import TalkComponent from "../components/TalkComponent";
 import DocumentsComponent from "../components/DocumentsComponent";
 import VideoBanner from "../components/VideoBanner";
 import SponsorComponent from "../components/SponsorComponent";
-import NoTalkComponent from "../components/NoTalkComponent";
-import HeroComponent from "../components/HeroComponent";
+import PrePostEventSlide from "../components/PrePostEventSlide";
+import Interstitial from "../components/Interstitial";
 import UpcomingEventsComponent from "../components/UpcomingEventsComponent";
 import Link from "../components/Link";
 import AccessTracker, {AttendeesWidget} from "../components/AttendeeToAttendeeWidgetComponent"
 import AttendanceTrackerComponent from "../components/AttendanceTrackerComponent";
 import EventFeedbackComponent from "../components/EventFeedbackComponent"
-import {PHASES} from "../utils/phasesUtils";
+import { PHASES } from "../utils/phasesUtils";
 import { getEventById, getEventStreamingInfoById } from "../actions/event-actions";
 import URI from "urijs";
 import useMarketingSettings, { MARKETING_SETTINGS_KEYS } from "@utils/useMarketingSettings";
@@ -41,7 +41,7 @@ export const EventPageTemplate = class extends React.Component {
     if (!isEqual(event, nextProps.event)) return true;
     if (!isEqual(eventTokens, nextProps.eventTokens)) return true;
     // a synch did happened!
-    if(lastDataSync !== nextProps.lastDataSync) return true;
+    if (lastDataSync !== nextProps.lastDataSync) return true;
     // compare current event phase with next one
     const currentPhase = eventsPhases.find((e) => parseInt(e.id) === parseInt(eventId))?.phase;
     const nextCurrentPhase = nextProps.eventsPhases.find(
@@ -92,15 +92,15 @@ export const EventPageTemplate = class extends React.Component {
 
     // if event is loading or we are still calculating the current phase ...
     if (loading || currentPhase === undefined || currentPhase === null) {
-      return <HeroComponent title="Loading event"/>;
+      return <Interstitial title="Loading event" contained />;
     }
 
     if (!event) {
-      return <HeroComponent title="Event not found" redirectTo="/a/schedule"/>;
+      return <Interstitial title="Event not found" navigateTo="/a/schedule" contained />;
     }
 
-    if(isMuxVideo(event?.streaming_url) && event?.stream_is_secure && ! checkMuxTokens(eventTokens)){
-      return <HeroComponent title="Loading secure event"/>;
+    if (isMuxVideo(event?.streaming_url) && event?.stream_is_secure && !checkMuxTokens(eventTokens)) {
+      return <Interstitial title="Loading secure event" contained />;
     }
 
     return (
@@ -109,25 +109,25 @@ export const EventPageTemplate = class extends React.Component {
           <div className="columns is-gapless">
             {this.canRenderVideo(currentPhase) ? (
               <div className="column is-three-quarters px-0 py-0">
-                    <VideoComponent
-                        url={event.streaming_url}
-                        tokens={eventTokens}
-                        isLive={event.streaming_type === "LIVE"}
-                        title={event.title}
-                        namespace={summit.name}
-                        firstHalf={firstHalf}
-                        autoPlay={autoPlay}
-                        start={startTime}
-                        onError={this.onError}
-                    />
+                <VideoComponent
+                  url={event.streaming_url}
+                  tokens={eventTokens}
+                  isLive={event.streaming_type === "LIVE"}
+                  title={event.title}
+                  namespace={summit.name}
+                  firstHalf={firstHalf}
+                  autoPlay={autoPlay}
+                  start={startTime}
+                  onError={this.onError}
+                />
                 {event.meeting_url && <VideoBanner event={event} ctaText={activityCtaText} />}
               </div>
             ) : (
               <div className="column is-three-quarters px-0 py-0 is-full-mobile">
-                <NoTalkComponent
-                  currentEventPhase={currentPhase}
-                  event={event}
+                <PrePostEventSlide
                   summit={summit}
+                  event={event}
+                  eventPhase={currentPhase}
                 />
               </div>
             )}
@@ -151,9 +151,8 @@ export const EventPageTemplate = class extends React.Component {
             <div className="column is-three-quarters is-full-mobile">
               <div className="px-5 py-5">
                 <TalkComponent
-                  currentEventPhase={currentPhase}
-                  event={event}
                   summit={summit}
+                  event={event}
                 />
               </div>
               { event.allow_feedback &&

package/src/templates/extra-questions-page.js

@@ -17,9 +17,10 @@ import ExtraQuestionsForm from 'openstack-uicore-foundation/lib/components/extra
 
 import { DefaultScrollBehaviour as ScrollBehaviour } from '@utils/scroll';
 
-import styles from '../styles/extra-questions.module.scss';
 import { getAttendeeData } from '../actions/extra-questions-actions';
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
+
+import styles from '../styles/extra-questions.module.scss';
 
 const noOpFn = () => {};
 
@@ -146,7 +147,7 @@ export const ExtraQuestionsPageTemplate = ({ user, summit, extraQuestions, atten
     };
 
     if ((!ticket && !attendeeId) || (attendeeId && someoneElseLoaded === false)) {
-        return <HeroComponent title={"Sorry. You don't have a ticket for this event."} redirectTo={"/"} />;
+        return <Interstitial title={"Sorry. You don't have a ticket for this event."} navigateTo={"/"} contained />;
     }
 
     const getAttendeeFullname = (attendee) => {

package/src/templates/full-profile-page.js

@@ -650,7 +650,7 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
               handleClose={() => handleTogglePopup(false)}
             />
             }
-            <AccessTracker />
+            <AccessTracker updateChatProfileEnabled={true} />
         </React.Fragment>
     )
 };

package/src/templates/poster-detail-page.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { navigate } from 'gatsby';
 
 import Layout from "../components/Layout";
-import HeroComponent from '../components/HeroComponent';
+import Interstitial from '../components/Interstitial';
 import DisqusComponent from '../components/DisqusComponent';
 import VideoComponent from '../components/VideoComponent';
 import PosterButton from '../components/PosterButton';
@@ -140,12 +140,12 @@ export const PosterDetailPage = ({
 
   const { getSettingByKey } = useMarketingSettings();
 
-  if (loading) return <HeroComponent title="Loading poster" />;
+  if (loading) return <Interstitial title="Loading poster" contained />;
 
-  if (!poster) return <HeroComponent title="Poster not found" />;
+  if (!poster) return <Interstitial title="Poster not found" contained />;
 
   if (!posterViewable) {
-    return <HeroComponent title={"Sorry. You need a special badge to view this poster."} redirectTo={location.state?.previousUrl || '/a/'} />;
+    return <Interstitial title={"Sorry. You need a special badge to view this poster."} navigateTo={location.state?.previousUrl || "/a/"} contained />;
   }
 
   const mediaUpload = poster.media_uploads?.find((e) => e?.media_upload_type?.name === 'Poster');

package/src/templates/sponsor-page.js

@@ -12,7 +12,7 @@ import AdvertiseSponsorsComponent from '../components/AdvertiseSponsorsComponent
 import DocumentsComponent from '../components/DocumentsComponent'
 import DisqusComponent from '../components/DisqusComponent'
 import SponsorBanner from '../components/SponsorBanner'
-import HeroComponent from '../components/HeroComponent'
+import Interstitial from '../components/Interstitial'
 import Link from '../components/Link'
 import Layout from '../components/Layout'
 import { scanBadge } from '../actions/user-actions'
@@ -59,7 +59,7 @@ const SponsorPageTemplate = ({ sponsorId, sponsors, scanBadge, eventId, lastData
   };
 
   if (notFound) {
-    return <HeroComponent title="Sponsor not found" redirectTo="/a/sponsors" />
+    return <Interstitial title="Sponsor not found" navigateTo="/a/sponsors" ontained />
   }
 
   const {
@@ -70,7 +70,7 @@ const SponsorPageTemplate = ({ sponsorId, sponsors, scanBadge, eventId, lastData
   } = sponsorship || {};
 
   if (sponsorLoading) {
-    return <HeroComponent title="Loading..." />
+    return <Interstitial title="Loading..." contained />
   }
 
   return (

package/src/templates/ticket-error-page.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { Redirect } from "@gatsbyjs/reach-router";
 import { getEnvVariable, REGISTRATION_BASE_URL } from "../utils/envVariables";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 import { navigate } from "gatsby";
 
 export const TicketErrorPageTemplate = class extends React.Component {
@@ -94,7 +94,7 @@ export const TicketErrorPageTemplate = class extends React.Component {
         if (error) {
             this.redirect();
             return (
-                <HeroComponent
+                <Interstitial
                     title={this.getErrorMessage()}
                     subtitle={this.getRedirectMessage()}
                 />
@@ -117,11 +117,11 @@ const TicketErrorPage = ({ location, summit }) => (
 );
 
 TicketErrorPage.propTypes = {
-    location: PropTypes.object,
+    location: PropTypes.object
 };
 
 const mapStateToProps = ({ summitState }) => ({
-    summit: summitState.summit,
+    summit: summitState.summit
 });
 
 export default connect(mapStateToProps, null)(TicketErrorPage);

package/src/templates/token-expire-page.js

@@ -1,16 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-
-import URI from "urijs";
-import { handleResetReducers } from "../actions/event-actions";
+import URI from "urijs"
 import { doLogin } from "openstack-uicore-foundation/lib/security/methods";
-
+import { handleResetReducers } from "../actions/event-actions";
+import Interstitial from "../components/Interstitial";
+import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "@utils/authorizedGroups";
 import { getDefaultLocation } from "@utils/loginUtils";
 
-import HeroComponent from "../components/HeroComponent";
-import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "../utils/authorizedGroups";
-
 export const TokenExpirePageTemplate = class extends React.Component {
 
   componentDidMount() {
@@ -37,9 +34,7 @@ export const TokenExpirePageTemplate = class extends React.Component {
 
   render() {
     return (
-      <HeroComponent
-        title="Checking credentials..."
-      />
+      <Interstitial title="Checking credentials..." />
     )
   }
 }
@@ -47,7 +42,7 @@ export const TokenExpirePageTemplate = class extends React.Component {
 TokenExpirePageTemplate.propTypes = {
   loggedUser: PropTypes.object,
   location: PropTypes.object,
-  handleResetReducers: PropTypes.func,
+  handleResetReducers: PropTypes.func
 }
 
 const TokenExpirePage = ({ loggedUser, location, handleResetReducers, userProfile, eventRedirect }) => {
@@ -67,14 +62,14 @@ const TokenExpirePage = ({ loggedUser, location, handleResetReducers, userProfil
 TokenExpirePage.propTypes = {
   loggedUser: PropTypes.object,
   location: PropTypes.object,
-  handleResetReducers: PropTypes.func,
+  handleResetReducers: PropTypes.func
 }
 
 const mapStateToProps = ({ loggedUserState, settingState, userState  }) => ({
   loggedUser: loggedUserState,
   // TODO: move to site settings i/o marketing page settings
   eventRedirect: settingState.marketingPageSettings.eventRedirect,
-  userProfile: userState.userProfile,
+  userProfile: userState.userProfile
 })
 
 export default connect(mapStateToProps, { handleResetReducers })(TokenExpirePage);

package/src/utils/withScheduleData.js

@@ -1,9 +1,9 @@
 import React, {useEffect, useState} from "react";
 import { connect } from "react-redux";
-import {compose} from "redux";
+import { compose } from "redux";
 import { useLocation } from '@reach/router';
-import HeroComponent from "../components/HeroComponent";
-import {clearFilters, callAction, updateFilter, updateFiltersFromHash} from "../actions/schedule-actions";
+import Interstitial from "../components/Interstitial";
+import { clearFilters, callAction, updateFilter, updateFiltersFromHash } from "../actions/schedule-actions";
 import { reloadScheduleData } from '../actions/base-actions';
 
 // This HOC makes sure the schedules array in allSchedulesState is populated before render.
@@ -23,7 +23,7 @@ const componentWrapper = (WrappedComponent) => ({schedules, ...props}) => {
   }, [key, location.hash]);
 
   if (!loaded)
-    return <HeroComponent title="Loading schedule data" />;
+    return <Interstitial title="Loading schedule data" />;
 
   return <WrappedComponent {...props} scheduleState={scheduleState} />;
 };

package/src/components/EventHeroComponent.js

@@ -1,34 +0,0 @@
-import React from 'react'
-import { connect } from "react-redux";
-
-import styles from '../styles/event-hero.module.scss'
-
-const EventHeroComponent = ({marketingPageSettings}) => (
-  <section className="hero">
-    <div className={`${styles.heroEvents} columns`}>
-      <div className={'column is-12'}>
-        <div className={`${styles.heroBody} hero-body`}>
-          <div className={`${styles.heroEventContainer}`}>
-            <div>
-              <span className={styles.title}>
-                {marketingPageSettings.hero.title}
-              </span>
-              <span className={styles.subtitle}>
-              {marketingPageSettings.hero.subTitle}
-              </span>
-            </div>
-            <div className={styles.date}>
-              <span>{marketingPageSettings.hero.date}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-);
-
-const mapStateToProps = ({settingState}) => ({
-  marketingPageSettings: settingState.marketingPageSettings
-});
-
-export default connect(mapStateToProps, {})(EventHeroComponent);

package/src/components/HeroComponent.js

@@ -1,23 +0,0 @@
-import React, { useEffect } from 'react';
-import { navigate } from 'gatsby';
-import styles from '../styles/hero.scss'
-
-const HeroComponent = ({ title, subtitle, event, redirectTo, options = {} }) => {
-
-  useEffect(() => {
-    if (redirectTo) setTimeout(() => navigate(redirectTo, options), 3000);
-  }, [redirectTo]);
-
-  return (
-    <section className={`hero ${event ? 'talk__break' : 'is-fullheight'}`}>
-      <div className="hero-body hero-component">
-        <div className={`${event ? '' : 'container has-text-centered'}`}>
-          <h1 className="title">{title}</h1>
-          <h2 className="subtitle">{subtitle}</h2>
-        </div>
-      </div>
-    </section>
-  )
-};
-
-export default HeroComponent;

package/src/components/NoTalkComponent.js

@@ -1,33 +0,0 @@
-import React from "react"
-import HeroComponent from './HeroComponent'
-import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
-import { PHASES } from '../utils/phasesUtils';
-
-const NoTalkComponent = ({ event, currentEventPhase, summit }) => {
-
-  const { class_name, start_date, title } = event;
-  const { time_zone_id } = summit;
-
-  return (
-    <div className={`columns talk px-3 py-3`}>
-      <HeroComponent
-        title={title}
-        subtitle={
-          class_name !== 'Presentation' ?
-            'Next session will start soon...'
-            :
-              currentEventPhase === PHASES.AFTER && !event.streaming_url ?
-              'Session is over. Recording will be available soon.'
-              :
-                 currentEventPhase < PHASES.DURING || !event.streaming_url ?
-                `This session will be available on ${epochToMomentTimeZone(start_date, time_zone_id).format('MMMM D hh:mm A (z)')}`
-                :
-                ''
-        }
-        event={true}
-      />
-    </div>
-  )
-};
-
-export default NoTalkComponent;

package/src/styles/event-hero.module.scss

@@ -1,92 +0,0 @@
-@import "colors.scss";
-
-div.column:first-of-type {
-  background-color: var(--color_secondary_contrast);
-}
-
-.hero-events {
-  .hero-body {
-    display: flex;
-    background-color: black;
-    flex-direction: row;
-    text-transform: uppercase;
-    padding: 1rem 6rem;
-
-    .hero-event-container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-    }
-
-    .title {
-      font-size: 48px;
-      color: var(--color_text_light);
-      font-weight: bold;
-      letter-spacing: 0.5rem;
-      padding-left: 1rem;
-    }
-
-    .subtitle {
-      font-size: 38px;
-      color: var(--color_text_light);
-      padding-left: 1rem;
-    }
-
-    .date {
-      background-color: var(--color_secondary);
-      color: var(--color_text_light);
-      font-size: 32px;
-      letter-spacing: 0.5rem;
-      padding: 0.5rem 0;
-      transform: skew(-25deg);
-
-      span:before {
-        content: "";
-        margin-right: 1.1em;
-      }
-
-      span:after {
-        content: "";
-        margin-left: 1.2em;
-      }
-
-      span {
-        transform: skew(25deg);
-        display: inline-block;
-      }
-    }
-  }
-}
-
-@media (max-width: 1400px) {
-  .hero-events {
-    .hero-body {
-      padding: 2rem 1.5rem;
-
-      .hero-event-container {
-        flex-direction: column;
-
-        .subtitle {
-          display: inline-block;
-        }
-
-        .date {
-          text-align: center;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 890px) {
-  .hero-events {
-    .hero-body {
-      .hero-event-container {
-        .subtitle {
-          padding-left: 0;
-        }
-      }
-    }
-  }
-}