@openeventkit/event-site 2.0.121 → 2.0.123

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.121",
+  "version": "2.0.123",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -21,14 +21,14 @@
     "@sentry/integrations": "^7.39.0",
     "@sentry/react": "^7.39.0",
     "@sentry/webpack-plugin": "^1.20.0",
-    "@supabase/supabase-js": "^1.35.6",
+    "@supabase/supabase-js": "2.45.1",
     "@types/googlemaps": "^3.39.9",
     "@types/markerclustererplus": "^2.1.33",
     "@types/react": "^16.9.42",
     "@vimeo/player": "^2.16.3",
     "ably": "^1.2.34",
     "assert": "^2.1.0",
-    "attendee-to-attendee-widget": "3.1.0",
+    "attendee-to-attendee-widget": "3.1.1-beta.32",
     "autoprefixer": "10.4.14",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "axios": "^0.19.2",

package/src/actions/event-actions.js

@@ -29,23 +29,14 @@ export const setEventLastUpdate = (lastUpdate) => (dispatch) => {
 
 /**
  * @param eventId
- * @param checkLocal
  * @returns {(function(*, *): Promise<*>)|*}
  */
 export const getEventById = (
     eventId
-) => async (dispatch, getState) => {
+) => async (dispatch) => {
 
     dispatch(startLoading());
-    // if we have it on the reducer , provide that first
-    let {allSchedulesState: {allEvents}} = getState();
-    const event = allEvents.find(ev => ev.id === parseInt(eventId));
-
-    if (event) {
-        dispatch(createAction(GET_EVENT_DATA)({event}));
-    }
 
-    // then refresh from api
     let accessToken;
     try {
         accessToken = await getAccessToken();

package/src/components/AttendeeToAttendeeWidgetComponent.js

@@ -59,7 +59,13 @@ const AttendeesWidgetComponent = ({ user, event, chatSettings }) => {
     linked_in_profile,
     twitter_name,
     wechat_user,
-    public_profile_show_fullname } = idpProfile || {};
+    public_profile_show_fullname,
+    public_profile_show_email,
+    public_profile_allow_chat_with_me,
+    public_profile_show_photo,
+    public_profile_show_social_media_info,
+    public_profile_show_bio
+  } = idpProfile || {};
 
   useEffect(() => {
     if (!user || !userProfile || !idpProfile) return;
@@ -127,6 +133,12 @@ const AttendeesWidgetComponent = ({ user, event, chatSettings }) => {
           .flatMap((st) => st.badge.features)
           .filter((v, i, a) => a.map((item) => item.id).indexOf(v.id) === i),
       bio: bio,
+      showEmail: public_profile_show_email === true,
+      allowChatWithMe: public_profile_allow_chat_with_me === true,
+      showFullName: public_profile_show_fullname === true,
+      showProfilePic: public_profile_show_photo === true,
+      showSocialInfo: public_profile_show_social_media_info === true,
+      showBio: public_profile_show_bio === true,
       hasPermission: (permission) => {
         const isAdmin =  groups &&
             groups.map((g) => g.slug).filter((g) => adminGroups.includes(g))
@@ -186,6 +198,20 @@ const mapState = ({ settingState }) => ({
 export const AttendeesWidget = connect(mapState)(AttendeesWidgetComponent);
 
 const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
+  const chatProps = {
+    streamApiKey: getEnvVariable(STREAM_IO_API_KEY),
+    apiBaseUrl: getEnvVariable(IDP_BASE_URL),
+    chatApiBaseUrl: getEnvVariable(CHAT_API_BASE_URL),
+    onAuthError: (err, res) => console.log(err),
+    openDir: "left",
+    activity: null,
+    getAccessToken: async () => {
+      const accessToken = await getAccessToken();
+      //console.log("AttendeesList->getAccessToken", accessToken);
+      return accessToken;
+    },
+  };
+  
   const trackerRef = useRef();
 
   const handleLogout = useCallback(() => {
@@ -237,11 +263,15 @@ const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
     wechat_user,
     public_profile_show_fullname,
     public_profile_show_email,
-    public_profile_allow_chat_with_me
+    public_profile_allow_chat_with_me,
+    public_profile_show_photo,
+    public_profile_show_social_media_info,
+    public_profile_show_bio
   } = user.idpProfile;
 
   const widgetProps = {
     user: {
+      id: sub,
       idpUserId: sub,
       fullName: public_profile_show_fullname ? `${given_name} ${family_name}` : `${given_name}`,
       email: email,
@@ -260,11 +290,17 @@ const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
           .flatMap((st) => st.badge.features)
           .filter((v, i, a) => a.map((item) => item.id).indexOf(v.id) === i),
       bio: bio,
-      showEmail: public_profile_show_email,
-      allowChatWithMe: public_profile_allow_chat_with_me ?? true
+      showEmail: public_profile_show_email === true,
+      allowChatWithMe: public_profile_allow_chat_with_me === true,
+      showFullName: public_profile_show_fullname === true,
+      showProfilePic: public_profile_show_photo === true,
+      showSocialInfo: public_profile_show_social_media_info === true,
+      showBio: public_profile_show_bio === true
     },
     summitId: parseInt(getEnvVariable(SUMMIT_ID)),
-    ...sbAuthProps,
+    keepAliveEnabled: true,
+    ...chatProps,
+    ...sbAuthProps
   };
 
   if (!chatSettings.enabled) return null;

package/src/components/SyncWordsPlayer.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {getSynchWordsVideoFrameDdFromSrc} from "../utils/videoUtils";
+
+
+class SynchWordsPlayer extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  render() {
+    const { video, className, autoplay } = this.props;
+    const id = getSynchWordsVideoFrameDdFromSrc(video);
+    console.log(`SynchWordsPlayer::render with id ${id}`);
+    let allow = "encrypted-media";
+    if(autoplay) allow = allow +';autoplay'
+    return (
+      <div className={className}>
+        <iframe id={id}
+                src={video}
+                frameBorder="0"
+                scrolling="no"
+                allow={allow}
+                allowFullScreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen
+                >
+        </iframe>
+      </div>
+    );
+  }
+}
+
+SynchWordsPlayer.propTypes = {
+    /**
+     * a video URL.
+     */
+    video: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+  /**
+   * CSS className for the player element.
+   */
+  className: PropTypes.string,
+  /**
+   * Automatically start playback of the video. Note that this won’t work on
+   * some devices.
+   */
+  autoplay: PropTypes.bool,
+};
+
+export default SynchWordsPlayer;

package/src/components/VideoComponent.js

@@ -4,7 +4,8 @@ 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';
+import { isMuxVideo, isVimeoVideo, isYouTubeVideo, isSynchWordsVideo } from '../utils/videoUtils';
+import SynchWordsPlayer from "./SyncWordsPlayer";
 
 /**
  * @param url
@@ -48,6 +49,14 @@ const VideoComponent = ({ url, title, namespace, isLive, firstHalf, autoPlay, st
                 />
             );
         };
+        // synch words player
+        if(isSynchWordsVideo(url)){
+            return (<SynchWordsPlayer
+              video={url}
+              autoplay={autoPlay}
+              className={styles.synchWordsPlayer}
+            />);
+        }
 
         const defaultVideoJsOptions = isYouTubeVideo(url) ? {
             techOrder: ["youtube"],
@@ -99,7 +108,7 @@ VideoComponent.propTypes = {
     isLive: PropTypes.bool,
     firstHalf: PropTypes.bool,
     autoPlay: PropTypes.bool,
-    start: PropTypes.number,    
+    start: PropTypes.number,
     tokens: PropTypes.object,
     onError: PropTypes.func,
 };
@@ -108,7 +117,7 @@ VideoComponent.defaultProps = {
     title: '',
     namespace: '',
     firstHalf: true,
-    autoPlay: false,    
+    autoPlay: false,
     tokens: null,
 };
 

package/src/components/summit-my-orders-tickets/components/TicketPopup/TicketPopupEditDetailsForm/TicketPopupEditDetailsForm.js

@@ -319,6 +319,11 @@ export const TicketPopupEditDetailsForm = ({
                         onBlur={formik.handleBlur}
                         onChange={!!initialValues[TicketKeys.company].name ? noop : formik.handleChange}
                         disabled={!!initialValues[TicketKeys.company].name}
+                        menuPortalTarget={document.body}
+                        menuPosition="fixed"
+                        styles={{
+                            menuPortal: (base) => ({ ...base, zIndex: 9999 }),                            
+                        }}
                         tabSelectsValue={false}
                     />
                     {(formik.touched[TicketKeys.company] || triedSubmitting) && formik.errors[TicketKeys.company] &&

package/src/styles/full-profile.module.scss

@@ -113,6 +113,9 @@
                 margin: -3px 8px 0px;
                 vertical-align: middle;
             }
+            &:hover {
+                color: var(--color_text_dark);
+            }
         }
 
         .buttons {

package/src/styles/video.module.scss

@@ -16,4 +16,24 @@
     width: 100%;
     height: 100%;
   }
-}
+}
+
+.synchWordsPlayer{
+  /* 16:9 */
+  --video--width: 960;
+  --video--height: 540;
+
+  position: relative;
+  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 56.25% */
+  overflow: hidden;
+  max-width: 100%;
+  background: black;
+
+  iframe, object, embed{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -16,6 +16,7 @@ import withOrchestra from "../utils/widgetOrchestra";
 import LiteScheduleComponent from '../components/LiteScheduleComponent'
 import ProfilePopupComponent from '../components/ProfilePopupComponent'
 import ChangePasswordComponent from '../components/ChangePasswordComponent';
+import AccessTracker from "../components/AttendeeToAttendeeWidgetComponent";
 
 import { updateProfilePicture, updateProfile, getIDPProfile, updatePassword } from '../actions/user-actions'
 
@@ -46,6 +47,10 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
     const [showFullName, setShowFullName] = useState(false);
     const [allowChatWithMe, setAllowChatWithMe] = useState(false)
     const [showEmail, setShowEmail] = useState(false);
+    const [showPicture, setShowPicture] = useState(false);
+    const [showBio, setShowBio] = useState(false);
+    const [showSocialMedia, setShowSocialMedia] = useState(false);
+    const [showTelephone, setShowTelephone] = useState(false);
     const [bio, setBio] = useState('');
     const [statementOfInterest, setStatementOfInterest] = useState('');
 
@@ -88,6 +93,10 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
             setShowFullName(user.idpProfile.public_profile_show_fullname);
             setAllowChatWithMe(user.idpProfile.public_profile_allow_chat_with_me);
             setShowEmail(user.idpProfile.public_profile_show_email);
+            setShowPicture(user.idpProfile.public_profile_show_photo);
+            setShowBio(user.idpProfile.public_profile_show_bio);
+            setShowSocialMedia(user.idpProfile.public_profile_show_social_media_info);
+            setShowTelephone(user.idpProfile.public_profile_show_telephone_number);
             setBio(user.idpProfile.bio || '');
             setStatementOfInterest(user.idpProfile.statement_of_interest || '');
             setAddress({
@@ -139,6 +148,10 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
                     public_profile_show_fullname: showFullName,
                     public_profile_allow_chat_with_me: allowChatWithMe,
                     public_profile_show_email: showEmail,
+                    public_profile_show_photo: showPicture,
+                    public_profile_show_bio: showBio,
+                    public_profile_show_social_media_info: showSocialMedia,
+                    public_profile_show_telephone_number: showTelephone,
                     bio: bio,
                     statement_of_interest: statementOfInterest,
                     address1: address.street,
@@ -204,6 +217,10 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
                 setShowFullName(user.idpProfile.public_profile_show_fullname);
                 setAllowChatWithMe(user.idpProfile.public_profile_allow_chat_with_me);
                 setShowEmail(user.idpProfile.public_profile_show_email);
+                setShowPicture(user.idpProfile.public_profile_show_photo);
+                setShowBio(user.idpProfile.public_profile_show_bio);
+                setShowSocialMedia(user.idpProfile.public_profile_show_social_media_info);
+                setShowTelephone(user.idpProfile.public_profile_show_telephone_number);
                 break;
             case 'bio':
                 setBio(user.idpProfile.bio || '');
@@ -423,20 +440,53 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
                                     </div>
                                 </div>
                             </div>
-                            <label className={styles.checkbox}>
-                                <input type="checkbox" checked={showFullName} onChange={e => setShowFullName(e.target.checked)} />
-                                Show full name on public profile
-                            </label>
-                            <br />
-                            <label className={styles.checkbox}>
-                                <input type="checkbox" checked={showEmail} onChange={e => setShowEmail(e.target.checked)} />
-                                Show email on public profile
-                            </label>
-                            <br />
-                            <label className={styles.checkbox}>
-                                <input type="checkbox" checked={allowChatWithMe} onChange={e => setAllowChatWithMe(e.target.checked)} />
-                                Allow people to chat with me?
-                            </label>
+                            <div className={`columns is-mobile`}>
+                                <div className={`column is-full`}>
+                                    <span>
+                                        By electing to show your information you are indicating that other attendees at the 
+                                        event(s) you are registered for will be able to see this information.
+                                    </span>
+                                </div>
+                            </div>
+                            <div className={`columns is-mobile`}>
+                                <div className={`column is-half`}>
+                                    <label className={styles.checkbox}>
+                                        <input type="checkbox" checked={showFullName} onChange={e => setShowFullName(e.target.checked)} />
+                                        Show full name (first name is always shown)
+                                    </label>
+                                    <br />
+                                    <label className={styles.checkbox}>
+                                        <input type="checkbox" checked={showEmail} onChange={e => setShowEmail(e.target.checked)} />
+                                        Show email
+                                    </label>
+                                    <br />
+                                    <label className={styles.checkbox}>
+                                        <input type="checkbox" checked={showTelephone} onChange={e => setShowTelephone(e.target.checked)} />
+                                        Show telephone number
+                                    </label>
+                                    <br />
+                                    <label className={styles.checkbox}>
+                                        <input type="checkbox" checked={allowChatWithMe} onChange={e => setAllowChatWithMe(e.target.checked)} />
+                                        Allow people to chat with me
+                                    </label>
+                                </div>
+                                <div className={`column is-half`}>
+                                    <label className={styles.checkbox}>
+                                        <input type="checkbox" checked={showPicture} onChange={e => setShowPicture(e.target.checked)} />
+                                        Show picture
+                                    </label>
+                                    <br />
+                                    <label className={styles.checkbox}>
+                                        <input type="checkbox" checked={showBio} onChange={e => setShowBio(e.target.checked)} />
+                                        Show bio
+                                    </label>
+                                    <br />
+                                    <label className={styles.checkbox}>
+                                        <input type="checkbox" checked={showSocialMedia} onChange={e => setShowSocialMedia(e.target.checked)} />
+                                        Show social media info
+                                    </label>
+                                </div>
+                            </div>
                             <div className={`columns is-mobile ${styles.buttons}`}>
                                 <div className={`column is-half`}>
                                     <button className={`button is-large ${styles.profileButton}`} onClick={() => discardChanges('profile')}>Discard</button>
@@ -602,6 +652,7 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
                     closePopup={() => handleTogglePopup(!showProfile)}
                 />
             }
+            <AccessTracker />
         </React.Fragment>
     )
 };

package/src/utils/videoUtils.js

@@ -1,4 +1,5 @@
 const IS_MUX_VIDEO_REGEX = /https:\/\/stream.mux.com\/(.*).m3u8/;
+const IS_SYNC_WORDS_VIDEO_REGEX = /https:\/\/player.syncwords.com\/iframe\/live\/(.*)\/(.*)/g;
 
 export const getMUXPlaybackId = (url) => {
     if(!url) return null;
@@ -25,3 +26,20 @@ export const isMuxVideo = (url) => {
     if(!url) return false;
     return url.match(IS_MUX_VIDEO_REGEX)
 }
+
+export const isSynchWordsVideo = (url) => {
+    if(!url) return false;
+    return url.match(IS_SYNC_WORDS_VIDEO_REGEX);
+}
+
+/**
+ * @param src
+ * @returns {string|null}
+ */
+export const getSynchWordsVideoFrameDdFromSrc = (src) => {
+    const m = [...src.matchAll(IS_SYNC_WORDS_VIDEO_REGEX)];
+    if(!m?.length) return null;
+    const parts = m[0];
+    if(parts.length < 3) return null;
+    return `${parts[1]}-live-${parts[2]}`;
+}