\n \n {ENTER_USERNAME}\n \n \n
\n );\n};\n\nexport default Form;\n","import React from 'react';\nimport { withFormik } from 'formik';\nimport * as Yup from 'yup';\nimport Form from './Form';\nimport {translation} from '../../../assets/translation';\n\nconst REQUIRED = translation[\"required\"];\n\nconst ValidatedForm = props => {\n const {handleSubmit, clearAuthFail} = props;\n const ValidatedFormWithFormik = withFormik({\n mapPropsToValues: (props) => {\n const {formFields = {}} = props;\n return {\n username: formFields.username || '',\n password: formFields.password || ''\n };\n },\n\n validationSchema: Yup.object().shape({\n username: Yup.string().required(REQUIRED),\n password: Yup.string().required(REQUIRED),\n }),\n\n handleSubmit: handleSubmit\n })(Form);\n\n return \n \n
\n )\n};\n\nexport default LogoutParticipant;\n","import {createSelector} from 'reselect';\n\nconst rootSelector = state => state.auth;\n\nexport const selectRole = createSelector(\n [rootSelector],\n state => state.userRole\n);\n\nexport const selectUsername = createSelector(\n [rootSelector],\n state => state.userName\n);\n\nexport const selectImageUrl = createSelector(\n [rootSelector],\n state => state.imageUrl\n);\n\nexport const selectSubRole = createSelector(\n [rootSelector],\n state => state.subRole\n);\n","import React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport IdleTimer from 'react-idle-timer'\nimport { logoutUser } from '../../../../redux/pages/Login/actions';\nimport styles from './Header.module.scss';\nimport HomeIcon from '../../../../assets/images/homeIcon.svg';\nimport MenuDocument from '../../../../assets/images/menuDocument.svg';\nimport SequenceIcon from '../../../../assets/images/sequenceIcon.svg';\nimport LogoutPopup from './LogoutPopup/LogoutPopup';\nimport LogoutParticipant from './LogoutParticipant/LogoutParticipant';\nimport { selectRole, selectUsername, selectImageUrl, selectSubRole } from './selectors';\nimport { translation } from '../../../../assets/translation';\nimport Avatar from '@material-ui/core/Avatar';\nimport { browserHistory } from \"../../../../../src/browserHistory\";\nimport { Typography, makeStyles } from '@material-ui/core';\nimport { USER_ROLE } from '../../../../constants'\n\nconst DASHBOARD = translation[\"header.dashboard\"];\nconst PATIENTS = translation[\"header.patients\"];\nconst THERAPISTS = translation[\"header.therapists\"];\nconst SEQUENCES = translation[\"header.sequences\"];\nconst ADMIN = 'ADMIN';\nconst THERAPIST = 'THERAPIST';\nconst PARTICIPANT = 'PARTICIPANT';\nconst DEFAULT_TIMEOUT = 30; // min\n\nexport const useStyles = makeStyles(theme => ({\n userName: {\n fontSize: 14,\n lineHeight: \"17px\",\n letterSpacing: \"0.02em\",\n color: \"#FFFFFF\",\n },\n}));\n\nconst adminMenuItems = [\n {\n title: THERAPISTS,\n img: MenuDocument,\n url: '/therapists',\n isDisabled: false\n }\n];\n\nconst therapistMenuItems = [\n {\n title: PATIENTS,\n img: MenuDocument,\n url: '/participants',\n isDisabled: false\n },\n {\n title: SEQUENCES,\n img: SequenceIcon,\n url: '/sequences',\n isDisabled: false\n },\n];\n\nconst therapistWithAdminMenuItems = [\n {\n title: THERAPISTS,\n img: MenuDocument,\n url: '/therapists',\n isDisabled: false\n }\n];\n\nconst participantMenuItems = [\n {\n title: DASHBOARD,\n img: HomeIcon,\n url: '/home',\n isDisabled: false\n }\n]\n\nconst handleClick = (event, isDisabled) => {\n isDisabled && event.preventDefault()\n}\n\nconst Header = ({isShowMenu = true, asideButton = null}) => {\n const classes = useStyles();\n const dispatch = useDispatch();\n const role = useSelector(selectRole);\n const subRole = useSelector(selectSubRole);\n const username = useSelector(selectUsername);\n const imageUrl = useSelector(selectImageUrl);\n const logoutHandler = () => {\n dispatch(logoutUser());\n }\n const menuItems = (() => {\n switch (role) {\n case ADMIN:\n return adminMenuItems;\n case THERAPIST:\n return (\n subRole === ADMIN\n ? [...therapistMenuItems, ...therapistWithAdminMenuItems]\n : therapistMenuItems\n );\n default:\n return browserHistory.location.pathname === '/learning-pages' ? participantMenuItems : [];\n }\n })();\n\n return (\n \n {translation[\"header.logout\"]}\n
\n \n \n
\n )\n};\n\nexport default Header;\n","import React from 'react';\nimport styled from 'styled-components';\n\nexport const Body = ({flexDirection = 'row', children}) => (\n \n \n\n {isShowMenu &&\n
\n {asideButton &&\n browserHistory.location.pathname !== '/training' &&\n asideButton}\n {!asideButton &&\n browserHistory.location.pathname !== '/training' &&\n - \n {menuItems.map(item => (\n
- \n \n\n \n
\n {item.title}\n
\n ))}\n
\n {localStorage.getItem(USER_ROLE) !== PARTICIPANT &&\n \n {username}\n \n {(localStorage.getItem(USER_ROLE) !== PARTICIPANT) ? browserHistory.push(`/login`)}\n debounce={250}\n />\n
\n }\n \n \n \n \n \n {currentParticipants.map(({ id, userName }, index) => {\n const isItemSelected = isSelected(id);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleCheckRow(id, selected, setSelected)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={id}\n selected={isItemSelected}\n >\n \n \n \n {userName}\n \n \n );\n })}\n\n \n \n setPage(page)}\n />\n \n \n
\n );\n};\n\nconst mapStateToProps = createStructuredSelector({\n participants: selectSequencesParticipants(),\n});\n\nconst mapDispatchToProps = {\n getSequencesParticipantsAction: getSequenceParticipants,\n assignSequenceToParticipantsAction: assignSequenceToParticipants,\n};\n\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TabParticipants);\n","import React, { useState, useEffect } from 'react';\nimport {useSelector, useDispatch} from 'react-redux';\nimport { Link, useParams, withRouter } from 'react-router-dom';\nimport { get } from 'lodash';\nimport { Breadcrumbs, Grid, IconButton, makeStyles, Tabs, Tab, Typography } from '@material-ui/core';\nimport { translation } from '../../../../../assets/translation';\nimport { TabSessions, TabMaterials } from '../index';\nimport { Edit } from \"@material-ui/icons\";\nimport TabParticipants from '../TabParticipants';\nimport {getCurrentSequence} from '../../actions';\nimport {selectCurrentSequences} from '../../selectors';\n\nconst useStyles = makeStyles(theme => ({\n breadcrumb: {\n color: theme.palette.secondary.main,\n textDecoration: 'none',\n },\n descriptionWrap: {\n flexWrap: 'nowrap',\n background: theme.palette.white.main,\n padding: \"20px 25px\",\n marginBottom: 20,\n marginTop: 15,\n minHeight: 125,\n },\n descriptionLeft: {\n marginRight: 20,\n width: 180,\n },\n descriptionRight: {\n marginRight: 10,\n },\n editButton: {\n transform: 'translate(12px, -12px)',\n marginLeft: 'auto',\n },\n tabBodyWrap: {\n minHeight: 300,\n padding: 20,\n background: theme.palette.white.main,\n },\n}));\n\nconst tabs = [\n {\n id: 'tab-1',\n label: translation[\"sequences.details.tabs.title_1\"],\n },\n {\n id: 'tab-2',\n label: translation[\"sequences.details.tabs.title_2\"],\n },\n {\n id: 'tab-3',\n label: translation[\"sequences.details.tabs.title_3\"],\n },\n]\n\nconst DetailsSequence = ({ onEdit }) => {\n const dispatch = useDispatch();\n const classes = useStyles();\n const [value, setValue] = useState(0);\n const { id: sequenceId } = useParams();\n const currentSequences=useSelector(selectCurrentSequences);\n useEffect(() => {\n sequenceId && dispatch(getCurrentSequence(sequenceId))\n }, [sequenceId])\n const tabsData = [\n { component: \n \n
\n ) : (\n <>\n \n \n dispatch(removePhoto())}\n >\n
\n onSelectElement(l)}\n data-grid={getDataGrid(l, isStatic)}\n className={'displayedElements'}\n style={{\n border: outline,\n position: 'absolute',\n zIndex: 120,\n backgroundColor: isStatic && '#fff',\n backgroundImage: `url(${fullUrl})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: \"contain\",\n backgroundPositionX: 'center',\n backgroundPositionY: 'center',\n }}\n >\n
\n );\n }\n if (l.type === translation[\"slide.properties.button.label.media\"]) {\n const urlLink = l.mediaLink && l.mediaLink.slice(4);\n const ext = urlLink && urlLink.split('.').pop();\n const isAudio = Boolean(urlLink && AUDIO_FILES.includes(ext));\n\n return l.isPictureWrapped ?\n (\n onSelectElement(l)}\n data-grid={getDataGrid(l, isStatic)}\n className={'displayedElements'}\n style={{\n backgroundColor: isAudio ? (isStatic && '#fff') : 'transparent',\n outline: outline,\n outlineOffset: '-5px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n zIndex: 120,\n background: isAudio ? `#988F8F` : 'transparent',\n padding: 0\n }}\n >\n onSelectElement(l)}\n />\n
\n );\n }\n });\n };\n\n const generateDOMWithoutMoving = () => {\n const element = getPictureWrappedElement(currentDisplayingElement);\n const collection = element ? [...elements, element] : elements;\n return map(collection, (l, i) => {\n const isWhiteBorder = (l.borderColor.r === 255) && (l.borderColor.g === 255) && (l.borderColor.b === 255);\n const border = selectedElement === l.id\n ? '1px solid #003560'\n : `1px solid rgba(${l.borderColor.r}, ${l.borderColor.g}, ${l.borderColor.b}, ${l.borderColor.a})`;\n\n if (l.type === translation[\"slide.properties.button.label.text\"]) {\n const w = () => (742 * l.coordinates.w) / 1000 - 11;\n const h = () => 11 * l.coordinates.h - 10;\n const x = () => (742 * l.coordinates.x) / 1000 + 10;\n const y = () => 11 * l.coordinates.y + 10;\n const isChecked = isParticipantLayout && selectedElement.includes(l.id);\n const {isAnswer} = l;\n\n return l.isEmbedAudio ? (\n \n {console.log('playing==', Boolean(isParticipantLayout && l.isStartAuto))}\n
\n \n \n );\n }\n });\n };\n\n\n return (\n \n {generateDOMWithoutMoving()}\n
\n {!isParticipantLayout && (\n \n \n {translation[\"sequences.wrong.answers\"]}\n \n \n {correctElements.map(item => {\n if (item.type === \"TEXT\") {\n return (\n \n \n )\n }\n if (item.type === \"IMAGE\") {\n return (\n \n \n )\n\n }\n return null;\n })}\n \n
\n );\n};\n\nexport default MultipleAnswers;\n\nconst WrongAnswer = styled(Typography)`\n font-size: 22px;\n color: #ec913d;\n padding: 5px;\n text-transform: uppercase;\n display: inline-flex;\n align-items: center;\n margin-bottom: 30px;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { Grid, makeStyles, Typography, Button } from '@material-ui/core';\nimport { withStyles } from '@material-ui/core/styles';\nimport { connect } from 'react-redux';\nimport { compose } from 'redux';\nimport Check from '../../../../../assets/images/check.svg';\nimport Repeat from '../../../../../assets/images/repeat.svg';\nimport { translation } from '../../../../../assets/translation';\nimport { API_BASE_ADDRESS } from '../../../../../api/api';\nimport { createStructuredSelector } from 'reselect';\nimport { selectIsLoading } from '../../../../../containers/Main/selectors';\nimport MultipleAnswers from './MultipleAnswers';\n\nconst useStyles = makeStyles(theme => ({\n wrapper: {\n padding: '100px',\n },\n nextButton: {\n fontSize: '16px'\n }\n}));\n\nexport const convertObjectToColorString = (data, styleName) => {\n const stylesObject = JSON.parse(data)[styleName];\n return `rgba(${Object.values(stylesObject).join(',')})`\n}\n\nconst ColorButton = withStyles((theme) => ({\n root: {\n color: '#FFF',\n backgroundColor: '#003560',\n '&:hover': {\n backgroundColor: '#003560',\n },\n minWidth: '175px',\n minHeight: '50px',\n marginTop: '50px',\n },\n}))(Button);\n\nconst SlideResult = ({feedbackForAnswer, onCloseResult, isLoading}) => {\n const classes = useStyles();\n const {correctElements, sessionId} = feedbackForAnswer;\n const getHTML = (propertiesData) => {\n const formatPropertiesData = JSON.parse(propertiesData);\n return formatPropertiesData.text;\n };\n const getImage = (propertiesData) => {\n const formatPropertiesData = JSON.parse(propertiesData);\n const urlLink = formatPropertiesData.imageLink && formatPropertiesData.imageLink.slice(4);\n const fullUrl = `${API_BASE_ADDRESS}${urlLink}`;\n return fullUrl;\n }\n return (\n \n
\n \n
\n \n {!isLoading && \n {feedbackForAnswer.previousIsCorrect ? (\n \n \n 
\n \n {(feedbackForAnswer.correctElements && feedbackForAnswer.correctElements.length > 1) ? translation[\"sequences.correct.answers\"] : translation[\"sequences.correct.answer\"]} \n \n onCloseResult(sessionId)}>\n {translation[\"slide.answer.more\"]} \n \n \n \n ) : (\n \n \n 
\n \n\n {(correctElements.length === 1) ?\n \n \n {translation[\"sequences.wrong.answer\"]}\n \n \n {correctElements[0] && correctElements[0].type === \"TEXT\" &&\n \n : \n onCloseResult(sessionId)}>\n {translation[\"slide.answer.more\"]} \n \n \n \n )}\n }\n
\n )\n};\n\nconst AnswerWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`\n\nconst CorrectAnswer = styled(Typography)`\n font-size: 22px;\n color: #5bca3f;\n text-transform: uppercase;\n`;\n\nconst WrongAnswer = styled(Typography)`\n font-size: 22px;\n line-height: 1.6;\n color: #ec913d;\n text-transform: uppercase;\n display: inline-flex;\n align-items: center;\n`;\n\nconst ImgWrapper = styled(Grid)`\n text-align: center;\n margin-bottom: 50px;\n`;\n\nconst mapStateToProps = createStructuredSelector({\n isLoading: selectIsLoading(),\n});\n\nconst withConnect = connect(\n mapStateToProps\n);\n\nexport default compose(\n withConnect,\n)(SlideResult);\n","import { makeStyles } from '@material-ui/core';\n\nexport const useStyles = makeStyles(() => ({\n placeholder: {\n width: 100,\n height: 100,\n position: 'relative'\n },\n // lockedLayer: {\n // position: 'fixed',\n // top: 0,\n // bottom: 0,\n // right: 0,\n // left: 0,\n // zIndex: 30,\n // cursor: 'not-allowed',\n // },\n buttonPlay: {\n width: 100,\n height: 100,\n background: '#92C13E',\n borderRadius: 0,\n '& svg': {\n fill: '#FFFFFF',\n width: 80,\n height: 80,\n },\n '&:hover': {\n backgroundColor: '#9cc751',\n },\n '&:disabled': {\n background: '#92C13E',\n },\n position: 'absolute',\n zIndex: '100',\n },\n hiddenButton: {\n width: 100,\n height: 100,\n opacity: 0,\n cursor: 'auto',\n pointerEvents: 'none',\n }\n}));\n","import React, { useRef, useEffect } from \"react\";\nimport { PlayArrow, Pause } from '@material-ui/icons';\nimport { IconButton } from '@material-ui/core';\nimport { useStyles } from './styles';\nimport {API_BASE_ADDRESS} from '../../../../../api/api';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { selectAudioId, selectIsPlayingAudioButton } from '../../selectors';\nimport { setIsPlayingAudioButton } from '../../actions';\n\nconst AudioPlayButton = ({elements}) => {\n const pictureWrappedElement = elements && elements.find(item => item.isPictureWrapped);\n const classes = useStyles();\n const audio = useRef(null);\n const audioPlayingLink = useSelector(selectAudioId);\n const isPlaying = useSelector(selectIsPlayingAudioButton);\n const dispatch = useDispatch();\n\n const onPlay = e => {\n e.preventDefault();\n const { current: aud } = audio;\n\n if (isPlaying) {\n aud.pause();\n dispatch(setIsPlayingAudioButton(!isPlaying));\n } else {\n if (!audioPlayingLink) {\n aud.play();\n dispatch(setIsPlayingAudioButton(!isPlaying));\n }\n }\n };\n\n const autoStartPlaying = () => {\n const { current: aud } = audio;\n aud.currentTime = 0;\n aud.play();\n dispatch(setIsPlayingAudioButton(!isPlaying));\n }\n\n useEffect(() => {\n if (pictureWrappedElement && pictureWrappedElement.isStartAuto) {\n if (!isPlaying) {\n autoStartPlaying();\n }\n }\n }, [pictureWrappedElement]);\n\n const onEnded = () => {\n dispatch(setIsPlayingAudioButton(false));\n };\n\n const urlLink = pictureWrappedElement && pictureWrappedElement.mediaLink && pictureWrappedElement.mediaLink.slice(4);\n const fullUrl = `${API_BASE_ADDRESS}${urlLink}`;\n\n const getCursorType = () => audioPlayingLink ? 'not-allowed' : 'pointer';\n\n return (\n \n {/**/}\n \n
\n )\n};\n\nexport default AudioPlayButton;\n","import React, { useEffect, useState } from 'react';\nimport { compose } from 'redux';\nimport { connect } from 'react-redux';\nimport { createStructuredSelector } from 'reselect';\nimport { Link } from 'react-router-dom';\nimport { Grid, IconButton } from '@material-ui/core';\nimport { ArrowForward, ArrowBack } from \"@material-ui/icons\";\nimport HomeIcon from '../../../assets/images/homeIcon.svg';\nimport Header from '../../../containers/MainLayout/components/Header/Header';\nimport GridLayout from '../../../containers/Sequence/components/GridLayout';\nimport { translation } from '../../../assets/translation';\nimport { getCurrentSlide, writeAnswerSlide, getPrewSlide, setSlideData } from './actions';\nimport { selectSlideElements, selectSlideId, selectCurrentSlide, selectSessionId } from './selectors';\nimport { browserHistory } from '../../../browserHistory';\nimport {useStyles} from './styles';\nimport SlideResult from './components/SlideResult';\nimport { isNull } from \"lodash\";\nimport AudioPlayButton from './components/AudioPlayButton';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {selectAudioId, selectIsPlayingAudioButton} from './selectors';\nimport { setPlayingAudioId, setIsPlayingAudioButton } from './actions';\nimport { get } from 'lodash';\n\nconst CURRENT_SESSION = 'CURRENT_SESSION';\n\nconst Training = ({\n elements,\n getCurrentSlideAction,\n slideId,\n writeAnswerSlideAction,\n getPrewSlideAction,\n setSlideDataAction,\n currentSlide,\n sessionId,\n ...props\n }) => {\n const [selectedElement, setSelectedElement] = useState([]);\n const [feedbackForAnswer, setFeedbackForAnswer] = useState({\n visible: false,\n previousIsCorrect: null,\n correctElements: null,\n sessionId: null\n });\n const [isExceptionFeedback, setIsExceptionFeedback] = useState(false);\n const classes = useStyles();\n const dispatch = useDispatch();\n const audioPlayingLink = useSelector(selectAudioId);\n const isPlayingAudioButton = useSelector(selectIsPlayingAudioButton);\n\n const checkAnswerFromMultiple = (id, selectedArr) => {\n const selectedIndex = (selectedArr || []).indexOf(id);\n let newSelected = [];\n if (selectedIndex === -1) {\n newSelected = newSelected.concat(selectedArr, id);\n } else if (selectedIndex === 0) {\n newSelected = newSelected.concat(selectedArr.slice(1));\n } else if (selectedIndex === selectedArr.length - 1) {\n newSelected = newSelected.concat(selectedArr.slice(0, -1));\n } else if (selectedIndex > 0) {\n newSelected = newSelected.concat(\n selectedArr.slice(0, selectedIndex),\n selectedArr.slice(selectedIndex + 1),\n );\n }\n ;\n return newSelected;\n }\n\n const handleSelectElement = ({id, isAnswer}) => {\n if (!isAnswer) {\n return;\n }\n const {canBack, multipleChoiseOfAnswers, showResult} = currentSlide;\n if (canBack) {\n const selected = multipleChoiseOfAnswers ? checkAnswerFromMultiple(id, selectedElement) : [id];\n setSelectedElement(selected);\n } else {\n setSelectedElement([id]);\n if (showResult) {\n setFeedbackForAnswer({\n ...feedbackForAnswer,\n visible: true\n });\n writeAnswerSlideAction(slideId, [id]);\n } else {\n browserHistory.push('/training', {\n prevPath: '/training'\n })\n writeAnswerSlideAction(slideId, [id]);\n }\n }\n };\n\n useEffect(() => {\n localStorage.removeItem(CURRENT_SESSION);\n }, [])\n\n useEffect(() => {\n getCurrentSlideAction();\n }, [getCurrentSlideAction]);\n\n useEffect(() => {\n if (!slideId) return;\n setSelectedElement([]);\n }, [slideId]);\n\n useEffect(() => {\n }, [selectedElement]);\n\n useEffect(() => {\n setFeedbackForAnswer({\n ...feedbackForAnswer,\n previousIsCorrect: currentSlide.previousIsCorrect,\n correctElements: currentSlide.correctElements,\n sessionId: currentSlide.session && currentSlide.session.id\n })\n }, [currentSlide])\n\n useEffect(() => {\n if (currentSlide && (!currentSlide.showResult) && sessionId && get(browserHistory.location.state, 'prevPath') !== '/home') {\n browserHistory.push('/home')\n }\n if (currentSlide && isExceptionFeedback && sessionId && get(browserHistory.location.state, 'prevPath') !== '/home') {\n browserHistory.push('/home')\n }\n if (currentSlide && (!currentSlide.showResult) && isNull(sessionId) && get(browserHistory.location.state, 'prevPath') !== '/home') {\n if (!feedbackForAnswer.visible) {\n browserHistory.push('/home');\n }\n }\n }, [sessionId])\n\n const handlePrevSlide = () => {\n if (audioPlayingLink) {\n dispatch(setPlayingAudioId(null));\n }\n if (isPlayingAudioButton) {\n dispatch(setIsPlayingAudioButton(false));\n }\n browserHistory.push('/training', {\n prevPath: '/training'\n })\n getPrewSlideAction(slideId)\n }\n const handleNextSlide = () => {\n if (audioPlayingLink) {\n dispatch(setPlayingAudioId(null));\n }\n if (isPlayingAudioButton) {\n dispatch(setIsPlayingAudioButton(false));\n }\n const {showResult, elements} = currentSlide;\n const answerIndex = elements.findIndex(element => element.isAnswer);\n browserHistory.push('/training', {\n prevPath: '/training'\n });\n if (showResult && answerIndex > -1) {\n setFeedbackForAnswer({\n ...feedbackForAnswer,\n visible: true\n });\n setIsExceptionFeedback(false);\n }\n // if (showResult && answerIndex === -1) {\n // setIsExceptionFeedback(true);\n // }\n if (answerIndex === -1) {\n setIsExceptionFeedback(true);\n }\n writeAnswerSlideAction(slideId, selectedElement)\n }\n\n const handleCloseResult = (sessionId) => {\n setFeedbackForAnswer({\n ...feedbackForAnswer,\n visible: false\n });\n const storedSession = localStorage.getItem(CURRENT_SESSION);\n if (isNull(sessionId)) {\n localStorage.removeItem(CURRENT_SESSION);\n setSlideDataAction({});\n browserHistory.push('/home');\n }\n if (isNull(storedSession)) {\n localStorage.setItem(CURRENT_SESSION, sessionId);\n } else {\n if (Number(storedSession) !== sessionId) {\n localStorage.setItem(CURRENT_SESSION, sessionId);\n browserHistory.push('/home');\n }\n }\n }\n\n return (\n \n \n {\n dispatch(setPlayingAudioId(null));\n dispatch(setIsPlayingAudioButton(false));\n }}\n >\n ![{translation[\"slides.button.home\"]}]({HomeIcon})
\n \n \n \n
\n )}\n {!feedbackForAnswer.visible && (\n \n \n {slides\n .sort((a, b) => a.index === b.index ? a.id - b.id : a.index - b.index)\n .map((slide, index) => {\n return (\n \n onSelected(slide.id)}\n className={slide.id === Number(selected) ? \"selected\" : \"\"}\n >\n {`${index < 9 ? '0' : ''}${index + 1}: `} \n {slide.title} \n onEditSlide(slide)}\n disableRipple\n disableFocusRipple\n className={classes.iconButton}\n >\n \n );\n })}\n \n
\n \n
\n ) : (\n <>\n \n \n
\n \n \n
\n \n {children}\n
\n )\n};\n\nexport default AudioWrapper;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { translation } from '../../../assets/translation';\nimport { useDispatch } from 'react-redux';\nimport { setMediaSrc } from '../actions';\nimport api from '../../../api';\nimport { makeStyles, IconButton, Button, Typography } from '@material-ui/core';\nimport DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';\nimport PicturePlus from '../../../assets/images/picturePlus.svg';\nimport Switch from '@material-ui/core/Switch';\nimport { ItemWrapper } from './styles';\nimport { API_BASE_ADDRESS } from '../../../api/api';\nimport AudioWrapper from './AudioWrapper';\n\nconst AUDIO_FILES = ['m4a', 'mp3', 'wav', 'pcm', 'aac', 'ogg', 'wma', 'flac'];\n\nexport const MediaProperties = ({\n currentDisplayingElement,\n setCurrentDisplayingElement,\n elements\n }) => {\n const dispatch = useDispatch();\n const hasPictureWrapped = elements.findIndex(item => item.isPictureWrapped) > -1;\n let uploadInput = React.createRef();\n const uploadFile = () => {\n uploadInput.click();\n }\n\n const handleUserMedia = data => {\n if (!data) {\n return;\n }\n\n api.file.uploadFile(data)\n .then(res => {\n dispatch(setMediaSrc(res));\n setCurrentDisplayingElement(\n [\n {\n ...currentDisplayingElement[0],\n mediaLink: res.staticUrl,\n }\n ]\n )\n })\n .catch(err => console.log(err));\n }\n\n\n const setMedia = (file, e) => {\n if (!file) {\n return;\n }\n e.preventDefault();\n const formData = new FormData();\n formData.append('file', file);\n handleUserMedia(formData);\n }\n\n const resetMediaLink = () => {\n setCurrentDisplayingElement(\n [\n {\n ...currentDisplayingElement[0],\n mediaLink: null,\n }\n ]\n )\n }\n\n const setIsStartAuto = () => {\n setCurrentDisplayingElement(\n [\n {\n ...currentDisplayingElement[0],\n isStartAuto: !(currentDisplayingElement[0] && currentDisplayingElement[0].isStartAuto),\n }\n ]\n )\n }\n\n const setIsPictureWrapped = () => {\n const isPictureWrapped = (currentDisplayingElement[0] && currentDisplayingElement[0].isPictureWrapped);\n setCurrentDisplayingElement(\n [\n {\n ...currentDisplayingElement[0],\n isPictureWrapped: !isPictureWrapped,\n }\n ]\n )\n }\n\n const getMediaLink = (url) => {\n const urlLink = url && url.mediaLink && url.mediaLink.slice(4);\n const fullUrl = urlLink ? `${API_BASE_ADDRESS}${urlLink}` : null;\n return fullUrl;\n }\n\n const checkDisabled = (currentDisplayingElement, hasPictureWrapped) => {\n if (hasPictureWrapped) {\n return true;\n }\n const url = currentDisplayingElement && currentDisplayingElement[0] && currentDisplayingElement[0].mediaLink;\n const ext = url && url.split('.').pop();\n const isAudio = Boolean(AUDIO_FILES.includes(ext));\n return (!isAudio && Boolean(ext)) || (currentDisplayingElement[0] && currentDisplayingElement[0].isCorrectAnswer) || (currentDisplayingElement[0] && currentDisplayingElement[0].isAnswer);\n }\n\n const useStyles = makeStyles(theme => ({\n photoUpload: {\n width: '13.5vw',\n height: '13vh',\n borderStyle: 'dashed',\n borderWidth: '2px',\n borderColor: theme.palette.secondary.main,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n photoWrapper: {\n width: '13.5vw',\n height: '13vh',\n borderStyle: 'solid',\n borderWidth: '2px',\n borderColor: theme.palette.secondary.main,\n backgroundSize: 'cover',\n backgroundPosition: 'center'\n },\n deleteWrapper: {\n display: 'flex',\n height: '13vh',\n justifyContent: 'flex-end',\n alignItems: 'flex-end',\n },\n uploadText: {\n color: theme.palette.secondary.main,\n fontWeight: '500',\n fontSize: '15px',\n letterSpacing: '0.15px',\n textTransform: 'none'\n },\n img: {\n marginRight: 5\n },\n hidden: {\n display: 'none'\n },\n }));\n const classes = useStyles();\n return (\n <>\n \n
\n ) : (\n <>\n \n \n
\n \n \n
\n \n \n \n
\n ) : (\n <>\n \n \n
\n \n \n
\n