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

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.122",
+  "version": "2.0.123-beta.1",
   "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,249 @@
+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";
+
+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], "profile-pic.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}
+          />
+          <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={1}
+              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] &&

package/src/components/ui/Button/index.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Button as BaseButton } from "@mui/base";
+import { styled } from "@mui/system";
+
+const StyledButton = styled(BaseButton)({
+  width: "100%",
+  height: "5.5rem",
+  color: "var(--color_input_text_color)",
+  backgroundColor: "var(--color_input_background_color)",
+  borderColor: "var(--color_input_border_color)",
+  borderStyle: "solid",
+  borderWidth: 1,
+  borderRadius: 4,
+  fontSize: "1.5rem",
+  fontFamily: "var(--font_family)",
+  justifyContent: "center",
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  padding: "calc(0.5em - 1px) 1em",
+  display: "inline-flex",
+  alignItems: "center",
+  lineHeight: 1.5,
+  ":disabled": {
+    opacity: 0.65
+  }
+});
+
+const Button = ({
+  children,
+  ...rest
+}) => {
+  return (
+    <StyledButton 
+      {...rest}
+    >
+      {children}
+    </StyledButton>
+  );
+};
+
+export default Button;

package/src/components/ui/IconButton/index.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { IconButton as BaseIconButton } from "@mui/material";
+import { styled } from "@mui/system";
+
+const IconButtonStyled = styled(BaseIconButton)(({ theme }) => ({
+  color: "var(--color_background_dark)",
+  fontSize: "2.5rem",
+  borderRadius: 4,
+  "&:hover": {
+    backgroundColor: "transparent"
+  },
+  "& .MuiTouchRipple-root span": {
+    backgroundColor: "transparent",
+    borderRadius: 4,
+    animation: "none"
+  }
+}))
+
+const IconButton = ({
+  children,
+  ...rest
+}) => {
+  return (
+    <IconButtonStyled 
+      {...rest}
+    >
+      {children}
+    </IconButtonStyled>
+  );
+};
+
+export default IconButton;

package/src/components/ui/index.js

@@ -0,0 +1,7 @@
+import Button from "./Button";
+import IconButton from "./IconButton";
+
+export {
+ Button,
+ IconButton
+};

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

@@ -14,7 +14,7 @@ import Layout from '../components/Layout'
 import withOrchestra from "../utils/widgetOrchestra";
 
 import LiteScheduleComponent from '../components/LiteScheduleComponent'
-import ProfilePopupComponent from '../components/ProfilePopupComponent'
+import AvatarEditorModal from '../components/AvatarEditorModal'
 import ChangePasswordComponent from '../components/ChangePasswordComponent';
 import AccessTracker from "../components/AttendeeToAttendeeWidgetComponent";
 
@@ -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>
@@ -634,17 +642,15 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
                 </div>
             </div>
             {showProfile &&
-                <ProfilePopupComponent
-                    userProfile={user.idpProfile}
-                    showProfile={showProfile}
-                    idpLoading={user.loadingIDP}
-                    fromFullProfile={true}
-                    changePicture={(pic) => handlePictureUpdate(pic)}
-                    changeProfile={(profile) => handleProfileUpdate(profile)}
-                    closePopup={() => handleTogglePopup(!showProfile)}
-                />
+            <AvatarEditorModal
+              userProfile={user.idpProfile}
+              open={showProfile}
+              idpLoading={user.loadingIDP}
+              changePicture={handlePictureUpdate}
+              handleClose={() => handleTogglePopup(false)}
+            />
             }
-            <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]}`;
+}

package/src/components/ProfilePopupComponent.js

@@ -1,369 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react'
-import AvatarEditor from 'react-avatar-editor'
-import AjaxLoader from "openstack-uicore-foundation/lib/components/ajaxloader";
-import { create_UUID } from '../utils/uuidGenerator'
-import Link from "./Link";
-
-import styles from '../styles/profile.module.scss'
-
-
-const ProfilePopupComponent = ({ userProfile, idpLoading, closePopup, showProfile, changePicture, changeProfile, fromFullProfile }) => {
-
-  const editorRef = useRef(null);
-  const modalHeaderRef = useRef(null)
-  const modalRef = useRef(null)
-  const fileInput = useRef(null)
-
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-  const [company, setCompany] = useState("");
-  const [bio, setBio] = useState('');
-  const [jobTitle, setJobTitle] = useState('');
-  const [github, setGithub] = useState('');
-  const [irc, setIRC] = useState('');
-  const [linkedin, setLinkedin] = useState('');
-  const [twitter, setTwitter] = useState('');
-
-  const [image, setImage] = useState(null);
-  const [newImage, setNewImage] = useState(false);
-  const [position, setPosition] = useState({ x: 0.5, y: 0.5 });
-  const [scale, setScale] = useState(1);
-  const [rotate, setRotate] = useState(0);
-  const width = 200;
-  const height = 200;
-
-  useEffect(() => {
-    setFirstName(userProfile.given_name || '');
-    setLastName(userProfile.family_name || '');
-    setCompany(userProfile.company || '');
-    setBio(userProfile.bio || '');
-    setJobTitle(userProfile.job_title || '');
-    setImage(userProfile.picture || '');
-    setGithub(userProfile.github_user || '');
-    setIRC(userProfile.irc || '');
-    setLinkedin(userProfile.linked_in_profile || '');
-    setTwitter(userProfile.twitter_name || '');
-
-    return () => {
-      setFirstName('');
-      setLastName('');
-      setCompany('');
-      setBio('');
-      setJobTitle('');
-      setGithub('');
-      setIRC('');
-      setLinkedin('');
-      setTwitter('');
-    };
-  }, [
-              userProfile.given_name,
-              userProfile.family_name,
-              userProfile.company,
-              userProfile.picture,
-              userProfile.bio,
-              userProfile.job_title,
-              userProfile.github,
-              userProfile.irc,
-              userProfile.linkedin,
-              userProfile.twitter_name
-  ]);
-
-  useEffect(() => {
-    if (modalHeaderRef) {
-      window.setTimeout(function () {
-        modalHeaderRef.current.focus();
-      }, 0);
-    }
-  }, [modalHeaderRef])
-
-  useEffect(() => {
-    window.addEventListener('keydown', handleUserKeyPress);
-
-    return () => {
-      window.removeEventListener('keydown', handleUserKeyPress);
-    };
-  }, []);
-
-  const handleUserKeyPress = (e) => {
-    const focusable = modalRef.current.querySelectorAll('button, input, a, textarea, select, [tabindex]:not([tabindex="-1"])');
-    const firstFocusable = focusable[0];
-    const lastFocusable = focusable[focusable.length - 1];
-    const KEYCODE_TAB = 9;
-    const KEYCODE_ESC = 27;
-    const isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB);
-    const isEscapePressed = (e.key === 'Escape' || e.keyCode === KEYCODE_ESC);
-
-    if (isEscapePressed) {
-      closePopup();
-    }
-
-    if (!isTabPressed) {
-      return;
-    }
-
-    if ( e.shiftKey ) /* shift + tab */ {
-      if (document.activeElement === firstFocusable) {
-        lastFocusable.focus();
-        e.preventDefault();
-      }
-    } else /* tab */ {
-      if (document.activeElement === lastFocusable) {
-        firstFocusable.focus();
-        e.preventDefault();
-      }
-    }
-  }
-
-
-  const handleNewImage = (e) => {
-    setImage(e.target.files[0]);
-    setNewImage(true);
-  };
-
-  const urltoFile = (url, filename, mimeType) => {
-    mimeType = mimeType || (url.match(/^data:([^;]+);/) || '')[1];
-    filename = filename || create_UUID();
-    return (fetch(url)
-            .then(function (res) { return res.arrayBuffer(); })
-            .then(function (buf) { return new File([buf], filename, { type: mimeType }); })
-    );
-  };
-
-  const handleScale = (e) => {
-    const scale = parseFloat(e.target.value);
-    setScale(scale);
-    setNewImage(true);
-  };
-
-  const handlePositionChange = (position) => {
-    setPosition(position);
-    setNewImage(true);
-  };
-
-  const rotateLeft = (e) => {
-    e.preventDefault();
-    setRotate(rotate - 90);
-    setNewImage(true);
-  };
-
-  const rotateRight = (e) => {
-    e.preventDefault();
-    setRotate(rotate + 90);
-    setNewImage(true);
-  };
-
-  const onClickSave = () => {
-    if (editorRef.current && newImage) {
-      const canvas = editorRef.current?.getImage()?.toDataURL();
-      if(canvas) {
-        urltoFile(canvas, image.name)
-            .then(file => changePicture(file));
-      }
-    }
-    if (userProfile.given_name !== firstName ||
-        userProfile.family_name !== lastName ||
-        userProfile.company !== company ||
-        userProfile.bio !== bio ||
-        userProfile.job_title !== jobTitle ||
-        userProfile.github_user !== github ||
-        userProfile.irc !== irc ||
-        userProfile.linked_in_profile !== linkedin ||
-        userProfile.twitter_name != twitter) {
-      const newProfile = {
-        first_name: firstName,
-        last_name: lastName,
-        company: company,
-        bio: bio,
-        job_title: jobTitle,
-        github_user: github,
-        irc: irc,
-        linked_in_profile: linkedin,
-        twitter_name: twitter,
-      };
-      changeProfile(newProfile);
-    }
-  };
-
-  return (
-      <div className={`${styles.modal} ${showProfile ? styles.isActive : ''}`} ref={modalRef}>
-        <div className={`${styles.modalCard} ${styles.profilePopup}`}>
-          <AjaxLoader relative={true} color={'#ffffff'} show={idpLoading} size={120} />
-          <header className={`${styles.modalCardHead}`}>
-            <h2 className={`${styles.modalCardTitle}`} tabIndex='-1' ref={modalHeaderRef}>Edit profile</h2>
-            <button className="link" onClick={() => closePopup()}>
-              <i className={`${styles.closeIcon} fa fa-times icon`} />
-            </button>
-          </header>
-          <section className={`${styles.modalCardBody}`}>
-            <div className={styles.modalCardPicture}>
-              <div className={styles.title}>Profile picture</div>
-              <div className={styles.picture}>
-                <AvatarEditor
-                    ref={editorRef}
-                    image={image}
-                    width={width}
-                    height={height}
-                    border={50}
-                    color={[0, 0, 0, 0.8]} // RGBA
-                    position={position}
-                    onPositionChange={handlePositionChange}
-                    scale={scale}
-                    borderRadius={5}
-                    rotate={parseFloat(rotate)}
-                />
-                <div className={styles.imageUpload} tabIndex="0" onKeyPress={() => {fileInput.current.click()}}>
-                    <label htmlFor="file-input" >
-                      <i className={`${styles.pictureIcon} fa fa-2x fa-camera icon is-large`} />
-                    </label>
-                  <input ref={fileInput} name="newImage" id="file-input" type="file" accept=".jpg,.jpeg,.png" onChange={handleNewImage} />
-                </div>
-                <div>
-                  <div className={`columns ${styles.inputRow}`}>
-                  <span id="zoomLabel" className='column is-one-quarter'>Zoom:</span>
-                  <div className='column is-two-thirds'>
-                    <input
-                      name="scale"
-                      type="range"
-                      aria-labelledby='zoomLabel'
-                      max="2"
-                      onChange={(e) => handleScale(e)}
-                      step="0.01"
-                      defaultValue="1"
-                    />
-                    </div>
-                  </div>
-                  <div className={`columns ${styles.inputRow}`}>
-                    <div className='column is-one-quarter'>Rotate:</div>
-                    <div className='column is-two-thirds'>
-                      <button className={`button is-large ${styles.button}`} onClick={rotateLeft}>
-                        <i className={`fa fa-undo icon is-large`} />Left
-                      </button>
-                      <button className={`button is-large ${styles.button}`} onClick={rotateRight}>
-                        <i className={`fa fa-undo icon is-large`} />Right
-                      </button>
-                    </div>
-                  </div>
-                </div>
-
-              </div>
-            </div>
-            {!fromFullProfile &&
-            <div className={styles.modalCardForm}>
-              <div className={styles.title}>Profile Info</div>
-              <div className={styles.form}>
-                <div className={`columns is-mobile ${styles.inputRow}`}>
-                  <div className='column is-one-quarter'>First Name</div>
-                  <div className='column is-two-thirds'>
-                    <input
-                        className={`${styles.input} ${styles.isMedium}`}
-                        type="text"
-                        placeholder="First Name"
-                        onChange={e => setFirstName(e.target.value)}
-                        value={firstName} />
-                  </div>
-                </div>
-                <div className={`columns is-mobile ${styles.inputRow}`}>
-                  <div className='column is-one-quarter'>Last Name</div>
-                  <div className='column is-two-thirds'>
-                    <input
-                        className={`${styles.input} ${styles.isMedium}`}
-                        type="text"
-                        placeholder="Last Name"
-                        onChange={e => setLastName(e.target.value)}
-                        value={lastName} />
-                  </div>
-                </div>
-                <div className={`columns is-mobile ${styles.inputRow}`}>
-                  <div className='column is-one-quarter'>Company</div>
-                  <div className='column is-two-thirds'>
-                    <input
-                        className={`${styles.input} ${styles.isMedium}`}
-                        type="text"
-                        placeholder="Company"
-                        onChange={e => setCompany(e.target.value)}
-                        value={company}
-                    />
-                  </div>
-                </div>
-                <div className={`columns is-mobile ${styles.inputRow}`}>
-                  <div className='column is-one-quarter'>Bio</div>
-                  <div className='column is-two-thirds'>
-                      <textarea
-                          className={`textarea ${styles.textarea}`}
-                          placeholder=''
-                          rows="6"
-                          onChange={e => setBio(e.target.value)}
-                          value={bio}
-                      >
-                      </textarea>
-                  </div>
-                </div>
-                <div className={`columns is-mobile ${styles.inputRow}`}>
-                  <div className='column is-one-quarter'>Job Title</div>
-                  <div className='column is-two-thirds'>
-                    <input
-                        className={`${styles.input} ${styles.isMedium}`}
-                        type="text"
-                        placeholder="Job Title"
-                        onChange={e => setJobTitle(e.target.value)}
-                        value={jobTitle} />
-                  </div>
-                </div>
-                <div className={`columns is-mobile ${styles.inputRow}`}>
-                  <div className='column is-one-quarter'>Github</div>
-                  <div className='column is-two-thirds'>
-                    <input
-                        className={`${styles.input} ${styles.isMedium}`}
-                        type="text"
-                        placeholder="Github"
-                        onChange={e => setGithub(e.target.value)}
-                         value={github} />
-                  </div>
-                </div>
-                <div className={`columns is-mobile ${styles.inputRow}`}>
-                  <div className='column is-one-quarter'>IRC</div>
-                  <div className='column is-two-thirds'>
-                    <input
-                        className={`${styles.input} ${styles.isMedium}`}
-                        type="text"
-                        placeholder="IRC"
-                        onChange={e => setIRC(e.target.value)}
-                        value={irc} />
-                  </div>
-                </div>
-                <div className={`columns is-mobile ${styles.inputRow}`}>
-                  <div className='column is-one-quarter'>LinkedIn</div>
-                  <div className='column is-two-thirds'>
-                    <input
-                        className={`${styles.input} ${styles.isMedium}`}
-                        type="text"
-                        placeholder="LinkedIn"
-                        onChange={e => setLinkedin(e.target.value)}
-                        value={linkedin} />
-                  </div>
-                </div>
-                <div className={`columns is-mobile ${styles.inputRow}`}>
-                  <div className='column is-one-quarter'>X</div>
-                  <div className='column is-two-thirds'>
-                    <input
-                        className={`${styles.input} ${styles.isMedium}`}
-                        type="text"
-                        placeholder="Twitter/X"
-                        onChange={e => setTwitter(e.target.value)}
-                        value={twitter} />
-                  </div>
-                </div>
-              </div>
-            </div>
-            }
-          </section>
-          <footer className={`${styles.modalCardFoot}`}>
-            <button onClick={() => closePopup()} className="button is-large">Discard</button>
-            <button onClick={() => onClickSave()} className="button is-large">Update</button>
-          </footer>
-        </div>
-      </div>
-  )
-};
-
-export default ProfilePopupComponent