@openeventkit/event-site 2.0.58 → 2.0.59

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.58",
+  "version": "2.0.59",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
+    "@mux/mux-player-react": "^1.14.1",
     "@ncwidgets/file-relation": "^0.8.0",
     "@ncwidgets/id": "^0.8.1",
     "@react-pdf/renderer": "^3.1.12",

package/src/actions/event-actions-definitions.js

@@ -1,4 +1,5 @@
 export const GET_EVENT_DATA = 'GET_EVENT_DATA';
 export const GET_EVENT_DATA_ERROR = 'GET_EVENT_DATA_ERROR';
 export const SET_EVENT_LAST_UPDATE = 'SET_EVENT_LAST_UPDATE';
-export const RELOAD_EVENT_STATE = 'RELOAD_EVENT_STATE';
+export const RELOAD_EVENT_STATE = 'RELOAD_EVENT_STATE';
+export const GET_EVENT_TOKENS='GET_EVENT_TOKENS';

package/src/actions/event-actions.js

@@ -12,7 +12,12 @@ import {
 import { customErrorHandler } from '../utils/customErrorHandler';
 
 import {LOGOUT_USER} from "openstack-uicore-foundation/lib/security/actions";
-import {GET_EVENT_DATA, GET_EVENT_DATA_ERROR, SET_EVENT_LAST_UPDATE, RELOAD_EVENT_STATE} from './event-actions-definitions';
+import {
+    GET_EVENT_DATA,
+    GET_EVENT_DATA_ERROR,
+    GET_EVENT_TOKENS,
+    SET_EVENT_LAST_UPDATE,
+} from './event-actions-definitions';
 
 export const handleResetReducers = () => (dispatch) => {
     dispatch(createAction(LOGOUT_USER)({}));
@@ -23,7 +28,6 @@ export const setEventLastUpdate = (lastUpdate) => (dispatch) => {
 }
 
 /**
- *
  * @param eventId
  * @param checkLocal
  * @returns {(function(*, *): Promise<*>)|*}
@@ -75,4 +79,44 @@ export const getEventById = (
         clearAccessToken();
         return (e);
     });
-};
+};
+
+/**
+ * @param eventId
+ * @param checkLocal
+ * @returns {(function(*, *): Promise<*>)|*}
+ */
+export const getEventTokensById = (
+    eventId
+) => async (dispatch, getState) => {
+
+    // then refresh from api
+
+    let accessToken;
+    try {
+        accessToken = await getAccessToken();
+    } catch (e) {
+        console.log('getAccessToken error: ', e);
+        return Promise.reject();
+    }
+
+    let params = {
+        access_token: accessToken
+    };
+
+    return getRequest(
+        null,
+        createAction(GET_EVENT_TOKENS),
+        `${window.SUMMIT_API_BASE_URL}/api/v1/summits/${window.SUMMIT_ID}/events/${eventId}/published/tokens`,
+        customErrorHandler,
+        {},
+        true)
+    (params)(dispatch).then((payload) => {
+        return payload
+    }).catch(e => {
+        dispatch(createAction(GET_EVENT_DATA_ERROR)(e));
+        console.log('ERROR: ', e);
+        clearAccessToken();
+        return (e);
+    });
+};

package/src/actions/user-actions.js

@@ -20,7 +20,7 @@ import QuestionsSet from 'openstack-uicore-foundation/lib/utils/questions-set'
 import Swal from 'sweetalert2';
 import axios from "axios";
 import { navigate } from 'gatsby';
-import { customErrorHandler, customBadgeHandler } from '../utils/customErrorHandler';
+import { customErrorHandler, customBadgeHandler, voidErrorHandler } from '../utils/customErrorHandler';
 import { getEnvVariable, SUMMIT_API_BASE_URL, SUMMIT_ID } from "../utils/envVariables";
 
 export const GET_DISQUS_SSO = 'GET_DISQUS_SSO';
@@ -570,7 +570,7 @@ export const doVirtualCheckIn = (attendee) => async (dispatch, getState) => {
     createAction(UPDATE_EXTRA_QUESTIONS),
     `${window.API_BASE_URL}/api/v1/summits/${attendee.summit_id}/attendees/${attendee.id}/virtual-check-in`,
     {},
-    customErrorHandler
+    voidErrorHandler
   )(params)(dispatch).catch((e) => {
     console.log('ERROR: ', e);
     clearAccessToken();

package/src/components/VideoComponent.js

@@ -3,29 +3,26 @@ import PropTypes from 'prop-types';
 
 import VideoJSPlayer from './VideoJSPlayer';
 import VimeoPlayer from "./VimeoPlayer";
-
+import VideoMUXPlayer from './VideoMUXPlayer';
 import styles from '../styles/video.module.scss';
+import { isMuxVideo, isVimeoVideo, isYouTubeVideo } from '../utils/videoUtils';
 
-const checkLiveVideo = (url) => {
-    let isLiveVideo = null;
-    url.match(/.m3u8/) ? isLiveVideo = true : isLiveVideo = false;
-    return isLiveVideo;
-};
-
-const checkVimeoVideo = (url) => {
-    // this is get from vimeo dash board
-    return url.match(/https:\/\/(www\.)?(player\.)?vimeo.com\/(.*)/);
-};
-
-function checkYouTubeVideo(url) {
-    return url.match(/^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/);
-}
+const VideoComponent = ({ url, title, namespace, isLive, firstHalf, autoPlay, start, tokens }) => {
 
-const VideoComponent = ({ url, title, namespace, firstHalf, autoPlay, start }) => {
-    console.log({ url, title, namespace, firstHalf, autoPlay, start });
     if (url) {
+        // using mux player
+        if(isMuxVideo(url)) {
+            const muxOptions = {
+                muted: !!autoPlay,
+                startTime: start,
+            };
+            return (
+                <VideoMUXPlayer isLive={isLive ? "live" : "on-demand"} autoPlay={autoPlay}
+                    title={title} namespace={namespace} videoSrc={url} tokens={tokens} {...muxOptions} />
+            );
+        }
         // vimeo player
-        if (checkVimeoVideo(url)) {
+        if (isVimeoVideo(url)) {
             return (
                 <VimeoPlayer
                     video={url}
@@ -35,31 +32,8 @@ const VideoComponent = ({ url, title, namespace, firstHalf, autoPlay, start }) =
                 />
             );
         };
-        // default mux live
-        if (checkLiveVideo(url)) {
-            const videoJsOptions = {
-                autoplay: autoPlay,
-                /*
-                 TIP: If you want to use autoplay and improve the chances of it working, use the muted attribute
-                 (or the muted option, with Video.js).
-                 @see https://blog.videojs.com/autoplay-best-practices-with-video-js/
-                 */
-                muted: !!autoPlay,
-                controls: true,
-                fluid: true,
-                playsInline: true,
-                start: start,
-                sources: [{
-                    src: url,
-                    type: 'application/x-mpegURL'
-                }],
-            };
-            return (
-                <VideoJSPlayer title={title} namespace={namespace} firstHalf={firstHalf} {...videoJsOptions} />
-            );
-        };
 
-        const customOptions = checkYouTubeVideo(url) ? {
+        const defaultVideoJsOptions = isYouTubeVideo(url) ? {
             techOrder: ["youtube"],
             sources: [{
                 type: "video/youtube",
@@ -70,12 +44,6 @@ const VideoComponent = ({ url, title, namespace, firstHalf, autoPlay, start }) =
                 iv_load_policy: 1
             },
         }: {
-            sources: [{
-                src: url
-            }],
-        };
-
-        const videoJsOptions = {
             autoplay: autoPlay,
             /*
              TIP: If you want to use autoplay and improve the chances of it working, use the muted attribute
@@ -86,11 +54,23 @@ const VideoComponent = ({ url, title, namespace, firstHalf, autoPlay, start }) =
             controls: true,
             fluid: true,
             playsInline: true,
-            ...customOptions
+            start: isLive ? start : null,
+            sources: isLive ?
+            [{
+                src: url,
+                type: 'application/x-mpegURL'
+            }]
+            :
+            [{
+                src: url
+            }]
+            ,
         };
 
+        const firstHalfProp = isLive ? {firstHalf: firstHalf} : {}
+
         return (
-            <VideoJSPlayer title={title} namespace={namespace} {...videoJsOptions} />
+            <VideoJSPlayer title={title} namespace={namespace} {...firstHalfProp} {...defaultVideoJsOptions} />
         );
     }
     return (<span className="no-video">No video URL Provided</span>);
@@ -100,15 +80,19 @@ VideoComponent.propTypes = {
     url: PropTypes.string.isRequired,
     title: PropTypes.string,
     namespace: PropTypes.string,
+    isLive: PropTypes.bool,
     firstHalf: PropTypes.bool,
     autoPlay: PropTypes.bool,
+    start: PropTypes.number,    
+    tokens: PropTypes.object
 };
 
 VideoComponent.defaultProps = {
     title: '',
     namespace: '',
     firstHalf: true,
-    autoPlay: false,
+    autoPlay: false,    
+    tokens: null,
 };
 
 export default VideoComponent;

package/src/components/VideoMUXPlayer.js

@@ -0,0 +1,58 @@
+import React, { useState, useRef } from 'react'
+import PropTypes from 'prop-types';
+import MuxPlayer from '@mux/mux-player-react';
+import Swal from 'sweetalert2';
+
+import { getEnvVariable, MUX_ENV_KEY } from '../utils/envVariables'
+import { getMUXPlaybackId } from '../utils/videoUtils';
+
+const VideoMUXPlayer = ({ title, namespace, videoSrc, streamType, tokens, autoPlay, ...muxOptions }) => {
+
+  const playerRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(autoPlay);
+
+  const handleVideoEnded = () => {
+    if (streamType === "live") {
+      setIsPlaying(false);
+    }    
+  }
+
+  const secureProps = tokens ? { tokens: {
+    playback: tokens?.playback_token,
+    thumbnail: tokens?.thumbnail_token,
+    storyboard: tokens?.storyboard_token,
+  }} : {}
+
+  return (
+    <MuxPlayer
+      ref={playerRef}
+      streamType={streamType}
+      envKey={getEnvVariable(MUX_ENV_KEY)}
+      playbackId={getMUXPlaybackId(videoSrc)}
+      onError={(err) => {
+        Swal.fire('Error', 'This video stream will begin momentarily. Please standby.', "warning");
+        console.log(err);
+      }}
+      onEnded={handleVideoEnded}
+      autoPlay={isPlaying}
+      metadata={{
+        video_title: { title },
+        sub_property_id: { namespace },
+      }}
+      style={{ aspectRatio: 16/9 }}
+      {...secureProps}
+      {...muxOptions}
+    />
+  );
+}
+
+VideoMUXPlayer.propTypes = {
+  videoSrc: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  namespace: PropTypes.string,
+  streamType: PropTypes.oneOfType(["live", "on-demand"]),
+  autoPlay: PropTypes.bool,
+  tokens: PropTypes.object
+};
+
+export default VideoMUXPlayer;

package/src/reducers/event-reducer.js

@@ -1,12 +1,13 @@
 import { START_LOADING, STOP_LOADING } from "openstack-uicore-foundation/lib/utils/actions";
 import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
-import {GET_EVENT_DATA, GET_EVENT_DATA_ERROR, RELOAD_EVENT_STATE, SET_EVENT_LAST_UPDATE} from "../actions/event-actions-definitions";
+import {GET_EVENT_DATA, GET_EVENT_DATA_ERROR, RELOAD_EVENT_STATE, SET_EVENT_LAST_UPDATE, GET_EVENT_TOKENS} from "../actions/event-actions-definitions";
 import {RESET_STATE} from "../actions/base-actions-definitions";
 
 const DEFAULT_STATE = {
   loading: false,
   event: null,
-  lastUpdate: null
+  lastUpdate: null,
+  tokens:null,
 };
 
 const eventReducer = (state = DEFAULT_STATE, action) => {
@@ -25,11 +26,12 @@ const eventReducer = (state = DEFAULT_STATE, action) => {
       return { ...state, loading: true };
     case STOP_LOADING:
       return { ...state, loading: false };
-    case GET_EVENT_DATA:
+    case GET_EVENT_DATA: {
       const event = payload?.response ?? payload.event;
       // check if we need to update the current event or do we need to just use the new one
       const updatedEvent = event.id  === state?.event?.id ? {...state, ...event} : event;
       return { ...state, loading: false, event: updatedEvent };
+    }
     case GET_EVENT_DATA_ERROR: {
       return { ...state, loading: false, event: null }
     }
@@ -37,6 +39,10 @@ const eventReducer = (state = DEFAULT_STATE, action) => {
     case RELOAD_EVENT_STATE:{
       return {...state, loading:false, event: payload};
     }
+    case GET_EVENT_TOKENS:{
+      const { tokens } = payload.response
+      return {...state, tokens: tokens};
+    }
     default:
       return state;
   }

package/src/routes/WithBadgeRoute.js

@@ -2,9 +2,11 @@ import React, {useEffect} from "react";
 import { connect } from "react-redux";
 import { isAuthorizedBadge } from "../utils/authorizedGroups";
 import HeroComponent from "../components/HeroComponent";
-import {getEventById} from "../actions/event-actions";
+import {getEventById, getEventTokensById} from "../actions/event-actions";
+import { isMuxVideo } from "../utils/videoUtils";
+import {navigate} from "gatsby";
 
-const WithBadgeRoute = ({ children, location, eventId, event, loading, userProfile, hasTicket, isAuthorized, getEventById }) => {
+const WithBadgeRoute = ({ children, location, eventId, event, loading, userProfile, hasTicket, isAuthorized, getEventById, getEventTokensById }) => {
   // if user is Authorized then bypass the badge checking
   const hasBadgeForEvent = isAuthorized || (eventId && userProfile && isAuthorizedBadge(event, userProfile.summit_tickets));
   const userIsAuthz = hasTicket || isAuthorized;
@@ -21,9 +23,20 @@ const WithBadgeRoute = ({ children, location, eventId, event, loading, userProfi
 
   useEffect(() => {
     if (event === null || parseInt(eventId) !== parseInt(event.id)) {
-      getEventById(eventId);
+      getEventById(eventId).then((res) => {
+        const { response, err }  = res;
+        // check error
+        if(err && err?.status === 404){
+           navigate('/a/schedule');
+        }
+        if(response && response?.stream_is_secure && isMuxVideo(response?.streaming_url)){
+          getEventTokensById(eventId)
+        }
+      }).catch(err => {
+        console.log(err);
+      });
     }
-  }, [eventId, getEventById, event]);
+  }, [eventId, getEventById, event, getEventTokensById]);
 
   if (loading || needsToLoadEvent) {
     return <HeroComponent title="Loading event" />;
@@ -44,4 +57,4 @@ const mapStateToProps = ({ userState, eventState }) => ({
   loading: eventState.loading,
 });
 
-export default connect(mapStateToProps, {getEventById})(WithBadgeRoute);
+export default connect(mapStateToProps, {getEventById, getEventTokensById})(WithBadgeRoute);

package/src/templates/event-page.js

@@ -1,10 +1,8 @@
 import * as React from "react";
 import PropTypes from "prop-types";
-import {navigate} from "gatsby";
 import {connect} from "react-redux";
 import { isEqual } from "lodash";
 import Layout from "../components/Layout";
-//import EventHeroComponent from "../components/EventHeroComponent";
 import DisqusComponent from "../components/DisqusComponent";
 import AdvertiseComponent from "../components/AdvertiseComponent";
 import Etherpad from "../components/Etherpad";
@@ -21,9 +19,10 @@ import AccessTracker, {AttendeesWidget} from "../components/AttendeeToAttendeeWi
 import AttendanceTrackerComponent from "../components/AttendanceTrackerComponent";
 import EventFeedbackComponent from "../components/EventFeedbackComponent"
 import {PHASES} from "../utils/phasesUtils";
-import { getEventById } from "../actions/event-actions";
+import { getEventById, getEventTokensById } from "../actions/event-actions";
 import URI from "urijs";
 import useMarketingSettings, { MARKETING_SETTINGS_KEYS } from "@utils/useMarketingSettings";
+import { checkMuxTokens, isMuxVideo } from "../utils/videoUtils";
 /**
  * @type {EventPageTemplate}
  */
@@ -31,21 +30,14 @@ export const EventPageTemplate = class extends React.Component {
 
   constructor(props) {
     super(props);
-    this.onEventChange = this.onEventChange.bind(this);
     this.canRenderVideo = this.canRenderVideo.bind(this);
   }
 
-  onEventChange(ev) {
-    const {eventId} = this.props;
-    if (parseInt(eventId) !== parseInt(ev.id)) {
-      navigate(`/a/event/${ev.id}`);
-    }
-  }
-
   shouldComponentUpdate(nextProps, nextState) {
-    const {eventId, event, eventsPhases, lastDataSync} = this.props;
+    const {eventId, event, eventTokens, eventsPhases, lastDataSync} = this.props;
     if (eventId !== nextProps.eventId) return true;
     if (!isEqual(event, nextProps.event)) return true;
+    if (!isEqual(eventTokens, nextProps.eventTokens)) return true;
     // a synch did happened!
     if(lastDataSync !== nextProps.lastDataSync) return true;
     // compare current event phase with next one
@@ -67,20 +59,28 @@ export const EventPageTemplate = class extends React.Component {
     const {eventId: prevEventId} = prevProps;
     // event id could come as param at uri
     if (parseInt(eventId) !== parseInt(prevEventId) || parseInt(event?.id) !== parseInt(eventId)) {
-      this.props.getEventById(eventId);
+      this.props.getEventById(eventId).then((res) => {
+        const { response }  = res;
+        if(response && response?.stream_is_secure && isMuxVideo(response?.streaming_url)) // todo check
+          this.props.getEventTokensById(eventId)
+      });
     }
   }
 
   componentDidMount() {
     const {eventId, event } = this.props;
     if (parseInt(event?.id) !== parseInt(eventId)) {
-      this.props.getEventById(eventId);
+      this.props.getEventById(eventId).then((res) => {
+        const { response }  = res;
+        if(response && response?.stream_is_secure && isMuxVideo(response?.streaming_url)) // todo check stream url is mux
+          this.props.getEventTokensById(eventId)
+      });
     }
   }
 
   render() {
 
-    const {event, user, loading, nowUtc, summit, eventsPhases, eventId, lastDataSync, activityCtaText} = this.props;
+    const {event, eventTokens, user, loading, nowUtc, summit, eventsPhases, eventId, lastDataSync, activityCtaText} = this.props;
     // get current event phase
     const currentPhaseInfo = eventsPhases.find((e) => parseInt(e.id) === parseInt(eventId));
     const currentPhase = currentPhaseInfo?.phase;
@@ -100,21 +100,26 @@ export const EventPageTemplate = class extends React.Component {
       return <HeroComponent title="Event not found" redirectTo="/a/schedule"/>;
     }
 
+    if(isMuxVideo(event?.streaming_url) && event?.stream_is_secure && ! checkMuxTokens(eventTokens)){
+      return <HeroComponent title="Loading secure event"/>;
+    }
+
     return (
       <React.Fragment>
-        {/* <EventHeroComponent /> */}
         <section className="section px-0 py-0">
           <div className="columns is-gapless">
             {this.canRenderVideo(currentPhase) ? (
               <div className="column is-three-quarters px-0 py-0">
-                <VideoComponent
-                  url={event.streaming_url}
-                  title={event.title}
-                  namespace={summit.name}
-                  firstHalf={firstHalf}
-                  autoPlay={autoPlay}
-                  start={startTime}
-                />
+                    <VideoComponent
+                        url={event.streaming_url}
+                        tokens={eventTokens}
+                        isLive={event.streaming_type === "LIVE"}
+                        title={event.title}
+                        namespace={summit.name}
+                        firstHalf={firstHalf}
+                        autoPlay={autoPlay}
+                        start={startTime}
+                    />
                 {event.meeting_url && <VideoBanner event={event} ctaText={activityCtaText} />}
               </div>
             ) : (
@@ -211,11 +216,13 @@ const EventPage = ({
    location,
    loading,
    event,
+   eventTokens,
    eventId,
    user,
    eventsPhases,
    nowUtc,
    getEventById,
+   getEventTokensById,
    lastUpdate,
    lastDataSync
 }) => {
@@ -235,6 +242,7 @@ const EventPage = ({
       <EventPageTemplate
         summit={summit}
         event={event}
+        eventTokens={eventTokens}
         eventId={eventId}
         loading={loading}
         user={user}
@@ -242,6 +250,7 @@ const EventPage = ({
         nowUtc={nowUtc}
         location={location}
         getEventById={getEventById}
+        getEventTokensById={getEventTokensById}
         lastUpdate={lastUpdate}
         activityCtaText={activityCtaText}
         lastDataSync={lastDataSync}
@@ -253,21 +262,25 @@ const EventPage = ({
 EventPage.propTypes = {
   loading: PropTypes.bool,
   event: PropTypes.object,
+  eventTokens: PropTypes.object,
   lastUpdate: PropTypes.object,
   eventId: PropTypes.string,
   user: PropTypes.object,
   eventsPhases: PropTypes.array,
   getEventById: PropTypes.func,
+  getEventTokensById: PropTypes.func,
 };
 
 EventPageTemplate.propTypes = {
   event: PropTypes.object,
+  eventTokens: PropTypes.object,
   lastUpdate: PropTypes.object,
   loading: PropTypes.bool,
   eventId: PropTypes.string,
   user: PropTypes.object,
   eventsPhases: PropTypes.array,
   getEventById: PropTypes.func,
+  getEventTokensById: PropTypes.func,
   activityCtaText: PropTypes.string,
 };
 
@@ -280,6 +293,7 @@ const mapStateToProps = ({
 }) => ({
   loading: eventState.loading,
   event: eventState.event,
+  eventTokens: eventState.tokens,
   user: userState,
   summit: summitState.summit,
   eventsPhases: clockState.events_phases,
@@ -290,4 +304,5 @@ const mapStateToProps = ({
 
 export default connect(mapStateToProps, {
   getEventById,
+  getEventTokensById,
 })(EventPage);

package/src/utils/customErrorHandler.js

@@ -25,6 +25,20 @@ export const customErrorHandler = (err, res) => (dispatch, state) => {
   }
 }
 
+export const voidErrorHandler = (err, res) => (dispatch, state) => {
+  let code = err.status;
+  dispatch(stopLoading());
+  let msg = '';
+  switch (code) {
+    case 401:
+      console.log('authErrorHandler 401 - re login');
+      expiredToken(err);
+      break;
+    default:
+      break;
+  }
+}
+
 export const customBadgeHandler = (err, res) => (dispatch, state) => {
   let code = err.status;
   dispatch(stopLoading());

package/src/utils/videoUtils.js

@@ -0,0 +1,23 @@
+const IS_MUX_VIDEO_REGEX = /https:\/\/stream.mux.com\/(.*).m3u8/;
+
+export const getMUXPlaybackId = (url) => {
+    const fileMatch = url.match(IS_MUX_VIDEO_REGEX);
+    return fileMatch ? fileMatch[1] : null;
+}
+
+export const checkMuxTokens = (tokens) => {
+    return tokens && tokens.playback_token && tokens.thumbnail_token && tokens.storyboard_token;
+}
+
+export const isVimeoVideo = (url) => {
+    // this is get from vimeo dash board
+    return url.match(/https:\/\/(www\.)?(player\.)?vimeo.com\/(.*)/);
+};
+
+export const isYouTubeVideo = (url) => {
+    return url.match(/^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/);
+}
+
+export const isMuxVideo = (url) => {
+    return url.match(IS_MUX_VIDEO_REGEX)
+}