@openeventkit/event-site 2.0.122 → 2.0.123

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.122",
+  "version": "2.0.123",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -28,7 +28,7 @@
     "@vimeo/player": "^2.16.3",
     "ably": "^1.2.34",
     "assert": "^2.1.0",
-    "attendee-to-attendee-widget": "3.1.1-beta.29",
+    "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/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

@@ -440,42 +440,50 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
                                     </div>
                                 </div>
                             </div>
+                            <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 on public profile
+                                        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 on public profile
+                                        Show email
                                     </label>
                                     <br />
                                     <label className={styles.checkbox}>
                                         <input type="checkbox" checked={showTelephone} onChange={e => setShowTelephone(e.target.checked)} />
-                                        Show telephone number on public profile                                        
+                                        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?
+                                        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 on public profile
+                                        Show picture
                                     </label>
                                     <br />
                                     <label className={styles.checkbox}>
                                         <input type="checkbox" checked={showBio} onChange={e => setShowBio(e.target.checked)} />
-                                        Show bio on public profile
+                                        Show bio
                                     </label>
                                     <br />
                                     <label className={styles.checkbox}>
                                         <input type="checkbox" checked={showSocialMedia} onChange={e => setShowSocialMedia(e.target.checked)} />
-                                        Show social media info on public profile
+                                        Show social media info
                                     </label>
                                 </div>
                             </div>
@@ -644,7 +652,7 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
                     closePopup={() => handleTogglePopup(!showProfile)}
                 />
             }
-            <AccessTracker/>
+            <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]}`;
+}