@openeventkit/event-site 2.0.122 → 2.0.123-beta.2

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.122",
+  "version": "2.0.123-beta.2",
   "author": "Tipit LLC",
   "dependencies": {
+    "@emotion/cache": "^11.13.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mdx-js/react": "^3.0.1",
     "@mdx-js/runtime": "^1.6.22",
     "@mui/base": "^5.0.0-beta.40",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/system": "^5.16.7",
     "@mux/mux-player-react": "^1.14.1",
     "@ncwidgets/file-relation": "^0.8.0",
     "@ncwidgets/id": "^0.8.1",
@@ -28,7 +32,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/AvatarEditorModal/index.js

@@ -0,0 +1,251 @@
+import React, { useState, useRef, useEffect } from "react";
+import AvatarEditor from "react-avatar-editor";
+import { Box, Typography, Slider, Modal } from "@mui/material";
+import { Button, IconButton } from "../ui";
+import { styled } from "@mui/system";
+import {
+  //Close as CloseIcon,
+  CameraAlt as CameraAltIcon,
+  RotateLeft as RotateLeftIcon,
+  RotateRight as RotateRightIcon,
+} from "@mui/icons-material";
+import { create_UUID } from "@utils/uuidGenerator";
+
+const CustomSlider = styled(Slider)(({ theme }) => ({
+  color: "var(--color-primary)"
+}));
+
+const AvatarEditorModal = ({
+  userProfile,
+  open,
+  changePicture,
+  handleClose
+}) => {
+  const editorRef = useRef(null);
+  const fileInputRef = useRef(null);
+
+  const [image, setImage] = useState(userProfile.picture || null);
+  const [position, setPosition] = useState({ x: 0.5, y: 0.5 });
+  const [scale, setScale] = useState(1);
+  const [rotate, setRotate] = useState(0);
+  const [newImage, setNewImage] = useState(false);
+
+  useEffect(() => {
+    setImage(userProfile.picture);
+  }, [userProfile.picture]);
+
+  const handleNewImage = (e) => {
+    setImage(e.target.files[0]);
+    setNewImage(true);
+  };
+
+  const handleScale = (e, newValue) => {
+    setScale(newValue);
+    setNewImage(true);
+  };
+
+  const handlePositionChange = (newPosition) => {
+    setPosition(newPosition);
+    setNewImage(true);
+  };
+
+  const rotateLeft = () => {
+    setRotate((prev) => prev - 22.5);
+    setNewImage(true);
+  };
+
+  const rotateRight = () => {
+    setRotate((prev) => prev + 22.5);
+    setNewImage(true);
+  };
+
+  const handleSave = () => {
+    if (editorRef.current && newImage) {
+      const canvas = editorRef.current.getImage().toDataURL();
+      fetch(canvas)
+        .then((res) => res.blob())
+        .then((blob) => {
+          const file = new File([blob], `${create_UUID()}.png`, { type: blob.type });
+          changePicture(file);
+        });
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="avatar-modal-title"
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Box
+        sx={{
+          width: { xs: "100%", sm: 400 },
+          bgcolor: "var(--color_background_light)",
+          color: "var(--color_text_dark)",
+          display: "flex",
+          flexDirection: "column",
+          position: "relative",
+          border: "1px solid #dbdbdb"
+        }}
+      >
+        <Box
+          sx={{
+            padding: "7.5px 15px",
+            display: "flex",
+            alignItems: "center",
+            borderBottom: "1px solid #dbdbdb"
+          }}
+        >
+          <Typography
+            id="avatar-modal-title"
+            component="h2"
+            sx={{
+              fontWeight: "bold",
+              color: "var(--color_text_dark)",
+              fontFamily: "var(--font_family)",
+              fontSize: "18px"
+            }}
+          >
+            Edit Profile Picture
+          </Typography>
+          <IconButton
+            onClick={handleClose}
+            sx={{
+              ml: "auto",
+              fontSize: "16px",
+              padding: 0
+            }}
+          >
+            <i className="fa fa-times" />
+          </IconButton>
+        </Box>
+        <Box
+          sx={{
+            padding: "20px",
+            textAlign: "center",
+            position: "relative"
+          }}
+        >
+          <AvatarEditor
+            ref={editorRef}
+            image={image}
+            width={200}
+            height={200}
+            border={50}
+            color={[0, 0, 0, 0.8]}
+            position={position}
+            onPositionChange={handlePositionChange}
+            scale={scale}
+            rotate={rotate}
+            crossOrigin={"anonymous"}
+          />
+          <IconButton
+            onClick={() => fileInputRef.current.click()}
+            sx={{
+              position: "absolute",
+              top: "79.5%",
+              right: "44%",
+              color: "#fff"
+            }}
+          >
+            <CameraAltIcon fontSize="inherit" />
+          </IconButton>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".jpg,.jpeg,.png"
+            style={{ display: "none" }}
+            onChange={handleNewImage}
+          />
+        </Box>
+        <Box
+          sx={{
+            px: "20px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px"
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: "20px",
+              justifyContent: "center"
+            }}
+          >
+            <Typography
+              sx={{
+                fontSize: "1.5rem",
+                fontFamily: "var(--font_family)"
+              }
+            }>
+              Zoom
+            </Typography>
+            <CustomSlider
+              value={scale}
+              min={0}
+              max={2}
+              step={0.01}
+              onChange={handleScale}
+              sx={{ flex: 1, mx: 2 }}
+            />
+          </Box>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center"
+            }}
+          >
+            <Typography
+              sx={{
+                fontSize: "1.5rem",
+                fontFamily: "var(--font_family)"
+              }}
+            >
+              Rotate
+            </Typography>
+            <Box
+              sx={{
+                display: "flex",
+                flex: 1,
+                justifyContent: "center",
+                gap: "20px"
+              }}
+            >
+              <IconButton onClick={rotateLeft}>
+                <RotateLeftIcon fontSize="inherit" />
+              </IconButton>
+              <IconButton onClick={rotateRight}>
+                <RotateRightIcon fontSize="inherit" />
+              </IconButton>
+            </Box>
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            backgroundColor: "var(--color_background_light)",
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "20px",
+            gap: "20px"
+          }}
+        >
+          <Button onClick={handleClose}>
+            Discard
+          </Button>
+          <Button onClick={handleSave} disabled={!newImage}>
+            Update
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default AvatarEditorModal;

package/src/components/Navbar/index.js

@@ -1,13 +1,9 @@
 import * as React from "react";
 import { useMemo } from "react";
 import { connect } from "react-redux";
+import { navigate } from "gatsby";
 import NavbarTemplate from "./template";
 
-import {
-  updateProfile,
-  updateProfilePicture
-} from "../../actions/user-actions";
-
 import { userHasAccessLevel, VirtualAccessLevel } from "@utils/authorizedGroups";
 import { getDefaultLocation } from "@utils/loginUtils";
 
@@ -21,11 +17,8 @@ const Navbar = ({
   summitPhase,
   summit,
   isLoggedUser,
-  idpLoading,
   idpProfile,
   userProfile,
-  updateProfile,
-  updateProfilePicture,
   eventRedirect
 }) => {
 
@@ -105,20 +98,21 @@ const Navbar = ({
            passPageRestriction;
   };
 
+  const handleLogoClick = () => navigate(isLoggedUser ? defaultPath : "/");
+
+  const handleProfileIconClick = () => navigate("/a/profile");
+
   return (
     <NavbarTemplate
-      data={navbarContent.items.filter(showItem)}
+      items={navbarContent.items.filter(showItem)}
       summit={summit}
+      logo={summit?.logo}
+      onLogoClick={handleLogoClick}
       isLoggedUser={isLoggedUser}
-      idpLoading={idpLoading}
       idpProfile={idpProfile}
-      hasVirtualBadge={hasVirtualBadge}
-      updateProfile={updateProfile}
-      updateProfilePicture={updateProfilePicture}
-      defaultPath={defaultPath}
-      logo={summit?.logo}
+      onProfileIconClick={handleProfileIconClick}
     />
-  )
+  );
 };
 
 
@@ -129,17 +123,13 @@ const mapStateToProps = ({
   loggedUserState,
   userState
 }) => ({
-  summitPhase: clockState.summit_phase,
   summit: summitState.summit,
+  summitPhase: clockState.summit_phase,
   isLoggedUser: loggedUserState.isLoggedUser,
   idpProfile: userState.idpProfile,
-  idpLoading: userState.loadingIDP,
   userProfile: userState.userProfile,
   // TODO: move to site settings i/o marketing page settings
   eventRedirect: settingState.marketingPageSettings.eventRedirect
 });
 
-export default connect(mapStateToProps, {
-  updateProfile,
-  updateProfilePicture
-})(Navbar);
+export default connect(mapStateToProps, {})(Navbar);

package/src/components/Navbar/template.js

@@ -1,108 +1,88 @@
 import React, { useState } from "react";
-
 import Link from "../Link";
-import ProfilePopupComponent from "../ProfilePopupComponent";
 import LogoutButton from "../LogoutButton";
 
 import styles from "../../styles/navbar.module.scss";
 
 const NavbarTemplate = ({
-  data,
+  items,
+  logo,
   summit,
   isLoggedUser,
-  idpLoading,
   idpProfile,
-  updateProfile,
-  updateProfilePicture,
-  defaultPath,
-  logo
+  onLogoClick,
+  onProfileIconClick
 }) => {
   const [active, setActive] = useState(false);
-  const [showProfile, setShowProfile] = useState(false);
 
-  const toggleHamburger = () => {
-    // toggle the active boolean in the state
-    setActive(!active);
-  };
+  const toggleHamburger = () => setActive(!active);
+
+  const navBarActiveClass = active ? styles.isActive : "";
+
+  const renderLogo = () => {
+    if (!logo && !summit?.name) return null;
+
+    const logoContent = logo ? <img src={logo} alt={summit?.name || "Logo"} /> : <h4>{summit.name}</h4>;
 
-  const handleTogglePopup = () => {
-    if (showProfile) {
-      document.body.classList.remove("is-clipped");
-    } else {
-      document.body.classList.add("is-clipped");
-    }
-    setShowProfile(!showProfile);
+    return onLogoClick ? (
+      <button className={`link ${styles.navbarItem}`} onClick={onLogoClick}>
+        {logoContent}
+      </button>
+    ) : (
+      <div className={styles.navbarItem}>{logoContent}</div>
+    );
   };
 
-  const navBarActiveClass = active ? styles.isActive : "";
+  const renderProfileIcon = () => {
+    if (!isLoggedUser || !idpProfile?.picture) return null;
 
-  return (
-    <React.Fragment>
-      <nav
-        className={`${styles.navbar}`}
-        role="navigation"
-        aria-label="main navigation"
-      >
-        <div className={styles.navbarBrand}>
-          <Link
-            to={isLoggedUser ? defaultPath : "/"}
-            className={styles.navbarItem}
-          >
-            {logo && <img src={logo} alt={summit.name} />}
-          </Link>
+    const profilePic = (
+      <img alt={idpProfile?.name} className={styles.profilePic} src={idpProfile.picture} />
+    );
 
-          <button
-            className={`link ${styles.navbarBurger} ${styles.burger} ${navBarActiveClass}`}
-            aria-label="menu"
-            aria-expanded="false"
-            data-target="navbar"
-            onClick={() => toggleHamburger()}
-          >
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
-          </button>
-        </div>
+    return onProfileIconClick ? (
+      <div className={styles.navbarItem}>
+        <button className="link" onClick={onProfileIconClick}>
+          {profilePic}
+        </button>
+      </div>
+    ) : (
+      <div className={styles.navbarItem}>{profilePic}</div>
+    );
+  };
 
-        <div
-          id="navbar"
-          className={`${styles.navbarMenu} ${navBarActiveClass}`}
+  return (
+    <nav className={styles.navbar} role="navigation" aria-label="main navigation">
+      <div className={styles.navbarBrand}>
+        {renderLogo()}
+        <button
+          className={`link ${styles.navbarBurger} ${styles.burger} ${navBarActiveClass}`}
+          aria-label="menu"
+          aria-expanded="false"
+          data-target="navbar"
+          onClick={toggleHamburger}
         >
-          <div className={styles.navbarStart} />
-          <div className={styles.navbarEnd}>
-            {data.map((item, index) => (
-              <div className={styles.navbarItem} key={index}>
-                <Link to={item.link} className={styles.link}>
-                  <span>{item.title}</span>
-                </Link>
-              </div>
-            ))}
-            {isLoggedUser && (
-              <div className={styles.navbarItem}>
-                <button className="link" onClick={() => handleTogglePopup()}>
-                  <img
-                    alt="profile pic"
-                    className={styles.profilePic}
-                    src={idpProfile?.picture}
-                  />
-                </button>
-                {showProfile && (
-                  <ProfilePopupComponent
-                    userProfile={idpProfile}
-                    showProfile={showProfile}
-                    idpLoading={idpLoading}
-                    changePicture={updateProfilePicture}
-                    changeProfile={updateProfile}
-                    closePopup={() => handleTogglePopup()}
-                  />
-                )}
-              </div>
-            )}
-            <LogoutButton styles={styles} isLoggedUser={isLoggedUser} />
-          </div>
+          <span aria-hidden="true" />
+          <span aria-hidden="true" />
+          <span aria-hidden="true" />
+        </button>
+      </div>
+
+      <div id="navbar" className={`${styles.navbarMenu} ${navBarActiveClass}`}>
+        <div className={styles.navbarStart} />
+        <div className={styles.navbarEnd}>
+          {items?.map((item, index) => (
+            <div className={styles.navbarItem} key={index}>
+              <Link to={item.link} className={styles.link}>
+                <span>{item.title}</span>
+              </Link>
+            </div>
+          ))}
+          {renderProfileIcon()}
+          <LogoutButton styles={styles} isLoggedUser={isLoggedUser} />
         </div>
-      </nav>
-    </React.Fragment>
+      </div>
+    </nav>
   );
 };
 

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] &&