{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *{...something}
--> is index 1 of Trans component\r\n *\r\n
\r\n ))}\r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default ImageCarousel\r\n","import React from 'react'\r\nimport { Form, Radio, Select, Row, Col, Card } from 'antd'\r\n\r\nconst { Option } = Select\r\n\r\nconst ImageTextForm = ({ form, includeText, isImageBeingGenerated }) => {\r\n const { getFieldDecorator } = form\r\n\r\n const textPositions = [\r\n { label: 'Top Left', key: 'top-left' },\r\n { label: 'Top Center', key: 'top-center' },\r\n { label: 'Top Right', key: 'top-right' },\r\n { label: 'Center', key: 'center' },\r\n { label: 'Bottom Left', key: 'bottom-left' },\r\n { label: 'Bottom Center', key: 'bottom-center' },\r\n { label: 'Bottom Right', key: 'bottom-right' }\r\n ]\r\n\r\n const fontSizes = [\r\n { value: 'big', label: 'Big' },\r\n { value: 'medium', label: 'Medium' },\r\n { value: 'small', label: 'Small' }\r\n ]\r\n\r\n const fontTypes = [\r\n 'Retro',\r\n 'Techy',\r\n 'Neon',\r\n 'Sketch',\r\n '3D',\r\n 'Comic Style',\r\n 'Anime Style',\r\n 'Illustration',\r\n 'Hand Written',\r\n 'Quirky',\r\n 'Chalk Board'\r\n ]\r\n\r\n const fontStyles = [\r\n { value: 'regular', label: 'Regular' },\r\n { value: 'bold', label: 'Bold' },\r\n { value: 'italic', label: 'Italic' },\r\n { value: 'thin', label: 'Thin' }\r\n ]\r\n\r\n const textColors = [\r\n 'Vibrant',\r\n 'Black & White',\r\n 'Gold Script',\r\n 'Rainbow Neon',\r\n 'Gradient'\r\n ]\r\n\r\n return (\r\n <>\r\n {includeText && (\r\n \r\n * Please note that AI-generated content may not always be accurate. Text\r\n placement and formatting, such as the addition of text, may sometimes be\r\n imprecise.\r\n
\r\n\r\n {aspectRatios.map(ratio => (\r\n !disabled && handleAspectRatioChange(ratio.value)}\r\n >\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {ratio.label}
\r\n \r\n ))}\r\n \r\n\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nconst ButtonWithTooltip = ({\r\n tooltip,\r\n onButtonClick,\r\n buttonText,\r\n showTooltip,\r\n ...props\r\n}) => {\r\n if (showTooltip) {\r\n return (\r\n \r\n
\r\n\r\n {generationStatus.status !== 'idle' && (\r\n \r\n {currentGeneratedImage.url && (\r\n \r\n {isUploading ? 'Uploading...' :\r\n selectedImage && selectedImage.link === upscaledImage\r\n ? 'Selected'\r\n : 'Select'}\r\n \r\n \r\n )}\r\n\r\n {!isImageBeingGenerated && !isImageBuilder && (\r\n
\r\n )}\r\n \r\n \r\n
\r\n )}\r\n\r\n {generationStatus.status === 'complete' && isImageBuilder && (\r\n {promptText}
\r\n\r\n \r\n setSelectedPosition(value)}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n {currentGeneratedImage.info && (\r\n
\r\n )}\r\n\r\n {generationStatus.status === 'running' && (\r\n \r\n handleOperationClick('generate')}\r\n buttonText=\"Generate variations\"\r\n />\r\n handleOperationClick('upscale')}\r\n buttonText=\"Upscale Image For Selection\"\r\n />\r\n
\r\n )}\r\n \r\n \r\n
\r\n )}\r\n\r\n {generationStatus.status === 'waiting-to-start' && (\r\n \r\n {generationStatus.isVariation\r\n ? 'Generating variations...'\r\n : 'Generating your image...'}\r\n
\r\nError generating.
}\r\n {upscaledImage && !isImageBeingGenerated && isImageBuilder && (\r\n <>\r\n\r\n
\r\n\r\n \r\n {isImageBuilder ? 'Upscaled Image' : 'AI Generated Image'}\r\n
\r\n\r\n \r\n Generate image using your own image idea\r\n \r\n
\r\n ⚡ AI Image Generation
\r\n\r\n
\r\n\r\n \r\n {messages.map((message, index) => (\r\n \r\n
\r\n ))}\r\n\r\n {revisedPrompt && !isReceivingMessage && (\r\n \r\n {message.user ? 
: 'AI'}\r\n
\r\n {message.message}
\r\n\r\n \r\n Generate Image Using Suggested Prompt\r\n \r\n \r\n
\r\n )}\r\n\r\n {isReceivingMessage && (\r\n \r\n Start New Chat\r\n
\r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n AI
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {\r\n setIsChatStarted(!isChatStarted)\r\n if (!isChatStarted) {\r\n handleStartNewChat()\r\n }\r\n }}\r\n type=\"primary\"\r\n ghost\r\n >\r\n {isChatStarted ? 'Stop Chat' : 'Start Chat'}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Form.create()(AiImages)\r\n","import AiImages from './AiImages'\r\n\r\nexport default AiImages\r\n","import React, { Component } from 'react'\r\nimport { Button, Modal } from 'antd'\r\nimport { DropzoneWrapper, DropzoneInner, DropzoneLoading } from './styled'\r\nimport { withTranslation } from 'react-i18next'\r\nimport AiImages from '../../nestedComponents/PageBuilder/Components/Image/components/AiImages'\r\n\r\nclass CourseDropzone extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n loading: false,\r\n isAiModal: false\r\n }\r\n }\r\n\r\n onDrop = files => {\r\n const { onDrop } = this.props\r\n const file = files[0]\r\n\r\n if (!file) {\r\n this.handleAfterUpload()\r\n return\r\n }\r\n\r\n onDrop(file, this.handleAfterUpload, this.handlebeforeUpload)\r\n }\r\n\r\n handleAfterUpload = () => {\r\n this.setState({ loading: false })\r\n }\r\n\r\n handlebeforeUpload = () => {\r\n this.setState({ loading: true })\r\n }\r\n\r\n onImage = item => {\r\n const { handleAiImage } = this.props\r\n handleAiImage(item)\r\n this.setState({ isAiModal: false })\r\n }\r\n\r\n render() {\r\n const { loading, isAiModal } = this.state\r\n\r\n const { cover, mode, error, app, t, loadImage } = this.props\r\n // console.log('load', loading, loadImage)\r\n return (\r\n <>\r\n {isAiModal && (\r\n Talk to AI about the image you want to generate
\r\n\r\n {isChatStarted && renderChat()}\r\n\r\n\r\n
\r\n \r\n )\r\n }\r\n}\r\n","import classNames from 'classnames'\r\n\r\nconst positionY = 400\r\nconst positionX = 40\r\nconst customContentClass = (node = null) => {\r\n\r\n if (node) {\r\n const { x, y } = node.params\r\n if (y > positionY && x < positionX) {\r\n return classNames({\r\n 'wrap-crop-image': true,\r\n 'left0-hw0': true\r\n\r\n })\r\n } else if (y < positionY && x < positionX) {\r\n return classNames({\r\n 'wrap-crop-image': true,\r\n 'right0-hw0': true\r\n\r\n })\r\n } else if (y < positionY && x > positionX) {\r\n return classNames({\r\n 'wrap-crop-image': true,\r\n 'left0-hw0': true\r\n\r\n })\r\n } else {\r\n return classNames({\r\n 'wrap-crop-image': true,\r\n 'hw0': true\r\n\r\n })\r\n }\r\n } else {\r\n return classNames({\r\n 'wrap-crop-image': true\r\n })\r\n }\r\n}\r\n\r\nexport {\r\n customContentClass\r\n}\r\n","const customContentStyle = {\r\n zIndex: 2,\r\n width: '460px'\r\n}\r\nexport { customContentStyle }\r\n","import React, { Component } from 'react'\r\nimport { Button } from 'antd'\r\nimport { Rnd } from 'react-rnd'\r\n\r\nimport ReactCrop from 'react-image-crop'\r\nimport 'react-image-crop/lib/ReactCrop.scss'\r\nimport { customContentClass } from '../ImageCrop/cropImage.ctrl'\r\nimport './styles.scss'\r\nimport TextOnImage from './TextOnImage'\r\nimport { customContentStyle } from '../Builder/Element/Element.ctrl'\r\nimport { T } from 'antd/lib/upload/utils'\r\nimport { withTranslation } from 'react-i18next'\r\n// import { Editor } from '../ImageEditor'\r\n\r\nclass EditImageContainer extends Component {\r\n state = {\r\n crop: {\r\n unit: '%', // default, can be 'px' or '%'\r\n x: 0,\r\n y: 0,\r\n aspect: this.props.circle ? 1 / 1 : 16 / 9,\r\n width: 100\r\n },\r\n croppedImageUrl: null,\r\n showTextModal: false,\r\n selectedContent: '',\r\n content: '',\r\n contentHTML: '',\r\n textPosition: {\r\n height: 200,\r\n width: 250,\r\n x: 516,\r\n y: 100\r\n },\r\n applyChanges: false\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const { showTextModal, contentHTML } = this.state\r\n if (!showTextModal && contentHTML) {\r\n const div = document.getElementById('showtext')\r\n\r\n div.innerHTML = contentHTML\r\n // div.addEventListener('mouseup', e => {\r\n // this.getCursorPosition(div, e)\r\n // })\r\n return div\r\n }\r\n }\r\n\r\n getCursorPosition(element, event) {\r\n const rect = element.getBoundingClientRect()\r\n const x = event.clientX - rect.left\r\n const y = event.clientY - rect.top\r\n this.setState({\r\n textPosition: { ...this.state.textPosition, x, y }\r\n })\r\n }\r\n\r\n onImageLoaded = image => {\r\n this.imageRef = image\r\n }\r\n\r\n onCropComplete = crop => {\r\n this.makeClientCrop(crop)\r\n }\r\n\r\n async makeClientCrop(crop) {\r\n if (this.imageRef && crop.width && crop.height) {\r\n const croppedImageUrl = await this.getCroppedImg(\r\n this.imageRef,\r\n crop,\r\n 'newFile.jpeg'\r\n )\r\n this.setState({ croppedImageUrl })\r\n }\r\n }\r\n\r\n getCroppedImg(image, crop, fileName, content, textPosition) {\r\n const canvas = document.createElement('canvas')\r\n const scaleX = image.naturalWidth / image.width\r\n const scaleY = image.naturalHeight / image.height\r\n canvas.width = crop.width\r\n canvas.height = crop.height\r\n const ctx = canvas.getContext('2d')\r\n\r\n ctx.drawImage(\r\n image,\r\n crop.x * scaleX,\r\n crop.y * scaleY,\r\n crop.width * scaleX,\r\n crop.height * scaleY,\r\n 0,\r\n 0,\r\n crop.width,\r\n crop.height\r\n )\r\n if (content && content.length > 0) {\r\n let font = '8px Arial'\r\n let color = 'black'\r\n let x = textPosition.x - 516\r\n let y = textPosition.y - crop.y\r\n let newYPixel = 10\r\n\r\n if (content.length === 1) {\r\n const str = content[0].insert.split('\\n')\r\n // let attributes = []\r\n // if (content[0].attributes) {\r\n // attributes = Object.entries(content[0].attributes)\r\n // }\r\n // attributes.length > 0 &&\r\n // attributes.map(a => {\r\n // if (a[0] === 'size') {\r\n // font = `${a[1]} Arial`\r\n // } else if (a[0] === 'color') {\r\n // color = a[1]\r\n // } else {\r\n // const newFont = font.replace(/^/, `${a[0]} `)\r\n // font = newFont\r\n // }\r\n // })\r\n str.forEach(s => {\r\n ctx.font = font\r\n ctx.fillStyle = color\r\n ctx.fillText(s, x, y)\r\n y = y + 10\r\n x = textPosition.x - 516\r\n })\r\n } else {\r\n content.forEach(each => {\r\n let attributes = []\r\n if (each.attributes) {\r\n attributes = Object.entries(each.attributes)\r\n }\r\n attributes.length > 0 &&\r\n attributes.forEach(a => {\r\n if (a[0] === 'size') {\r\n font = `${a[1]} Arial`\r\n const px = a[1].split('px')\r\n newYPixel =\r\n parseInt(px[0]) > 15 ? newYPixel + parseInt(px[0]) : newYPixel\r\n } else if (a[0] === 'color') {\r\n color = a[1]\r\n } else {\r\n const newFont = font.replace(/^/, `${a[0]} `)\r\n font = newFont\r\n }\r\n })\r\n\r\n ctx.font = font\r\n ctx.fillStyle = color\r\n ctx.fillText(each.insert, x, y)\r\n const textWidth = ctx.measureText(each.insert)\r\n if (each.insert.match(/\\n/g)) {\r\n y = y + newYPixel\r\n x = textPosition.x - 516\r\n } else {\r\n x = x + textWidth.width\r\n }\r\n })\r\n }\r\n }\r\n // resolve as base64\r\n return new Promise((resolve, reject) => {\r\n this.fileUrl = canvas.toDataURL('image/jpeg')\r\n resolve(this.fileUrl)\r\n })\r\n }\r\n\r\n handleBtnCropAction = async type => {\r\n const { file, handleUploadImage, handleClosePopup } = this.props\r\n // const { crop, selectedContent, applyChanges, textPosition } = this.state\r\n if (type === 'save') {\r\n const data = file\r\n data.croppedImage = this.fileUrl\r\n handleUploadImage(data)\r\n this.clearState()\r\n handleClosePopup(type)\r\n } else if (type === 'addText') {\r\n this.handleShowTextModal()\r\n } else {\r\n this.clearState()\r\n handleClosePopup(type)\r\n }\r\n }\r\n\r\n clearState = () => {\r\n this.setState({\r\n crop: {\r\n unit: '%', // default, can be 'px' or '%'\r\n x: 0,\r\n y: 0,\r\n aspect: this.props.circle ? 1 / 1 : 16 / 9,\r\n width: 100\r\n },\r\n croppedImageUrl: null,\r\n showTextModal: false,\r\n selectedContent: '',\r\n content: '',\r\n contentHTML: '',\r\n textPosition: {\r\n height: 200,\r\n width: 250,\r\n x: 516,\r\n y: 100\r\n },\r\n applyChanges: false\r\n })\r\n }\r\n\r\n onCropChange = newCrop => {\r\n this.setState({\r\n crop: newCrop,\r\n textPosition: {\r\n ...this.state.textPosition,\r\n y: newCrop.y\r\n }\r\n })\r\n }\r\n\r\n handleShowTextModal = () => {\r\n this.setState({ showTextModal: !this.state.showTextModal })\r\n }\r\n\r\n handleUploadChanges = editedFile => {\r\n console.log('handleUploadChanges', editedFile)\r\n const { file, handleUploadImage, handleClosePopup } = this.props\r\n const data = file\r\n data.croppedImage = editedFile\r\n handleUploadImage(data)\r\n this.handleShowTextModal()\r\n this.clearState()\r\n handleClosePopup('save')\r\n }\r\n\r\n setTextContent = (content, delta, source, editor) => {\r\n const selectedContent = editor.getContents().ops\r\n // const selectedText = editor.getText()\r\n const contentHTML = editor.getHTML()\r\n\r\n this.setState({\r\n content: content,\r\n // selectedText,\r\n selectedContent,\r\n contentHTML\r\n })\r\n }\r\n\r\n render() {\r\n const {\r\n crop,\r\n showTextModal,\r\n contentHTML,\r\n textPosition: { x, y, width, height },\r\n croppedImageUrl\r\n } = this.state\r\n const { image, node, circle, t } = this.props\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n this.setState({\r\n textPosition: { ...this.state.textPosition, x: d.x, y: d.y }\r\n })\r\n }}\r\n onResizeStop={(e, direction, ref, delta, position) => {\r\n this.setState({\r\n textPosition: {\r\n ...this.state.textPosition,\r\n width: ref.style.width,\r\n height: ref.style.height,\r\n ...position\r\n }\r\n })\r\n }}\r\n style={customContentStyle}\r\n >\r\n this.handleShowTextModal()}\r\n >\r\n
\r\n \r\n )}\r\n \r\n
\r\n {!showTextModal && contentHTML && (\r\n \r\n \r\n \r\n \r\n
\r\n {showTextModal && (\r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withTranslation('media')(Card)\r\n","import Card from './Card'\r\n\r\nexport default Card\r\n","import React, { Component, Fragment } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { withTranslation } from 'react-i18next'\r\nimport _ from 'lodash'\r\n\r\nimport './MediaFilter.scss'\r\n\r\nimport { general } from '../../../../constants'\r\n\r\nclass MediaFilter extends Component {\r\n static defaultProps = {\r\n lists: []\r\n }\r\n\r\n static propTypes = {\r\n ctrlHandleFilterChange: PropTypes.func\r\n }\r\n\r\n state = {\r\n mediaTypes: [\r\n {\r\n label: this.props.t('all'),\r\n value: general.ALL,\r\n selected: true\r\n },\r\n {\r\n label: this.props.t('media:video'),\r\n value: general.VIDEO,\r\n selected: false\r\n },\r\n {\r\n label: this.props.t('media:image'),\r\n value: `${general.IMAGE},${general.PEXEL_IMAGE}`,\r\n selected: false\r\n },\r\n {\r\n label: this.props.t('media:audio'),\r\n value: general.AUDIO,\r\n selected: false\r\n },\r\n {\r\n label: this.props.t('media:gif'),\r\n value: general.GIF,\r\n selected: false\r\n },\r\n {\r\n label: this.props.t('v4:pdf'),\r\n value: general.PDF,\r\n selected: false\r\n },\r\n {\r\n label: this.props.t('v4:txt'),\r\n value: general.TEXT,\r\n selected: false\r\n },\r\n {\r\n label: this.props.t('v2:ar_assets'),\r\n value: general.ARIMAGE,\r\n selected: false\r\n }\r\n ]\r\n }\r\n\r\n generateMediaType = mediaTypes => {\r\n const filterMediaType = _.filter(mediaTypes, item => item.selected)\r\n\r\n const mediaTypeParam = _.map(filterMediaType, 'value').toString()\r\n\r\n this.props.ctrlHandleFilterChange(mediaTypeParam)\r\n }\r\n\r\n hangeFilterChange = (value, ind) => {\r\n const { mediaTypes } = this.state\r\n\r\n let newJSON = [...mediaTypes]\r\n\r\n if (newJSON[ind].value === general.ALL && value) {\r\n newJSON = newJSON.map(item => ({\r\n ...item,\r\n selected: item.value === general.ALL\r\n }))\r\n } else {\r\n newJSON[ind].selected = value\r\n\r\n if (!newJSON.find(item => item.selected)) {\r\n newJSON[0].selected = true\r\n } else {\r\n newJSON[0].selected = false\r\n }\r\n }\r\n\r\n this.generateMediaType(newJSON)\r\n\r\n this.setState({\r\n mediaTypes: newJSON\r\n })\r\n }\r\n\r\n render() {\r\n const { mediaTypes } = this.state\r\n return (\r\n \r\n {item && item.ar_files && item.ar_files.length > 0 && (\r\n \r\n handleClickEdit(item)}\r\n style={{\r\n backgroundColor: '#2e2b2b94',\r\n fontSize: '16px',\r\n color: '#ffffff',\r\n zIndex: 1,\r\n position: 'absolute'\r\n }}\r\n theme=\"outlined\"\r\n />\r\n \r\n )}\r\n handleViewDetails(item)}\r\n >\r\n
\r\n \r\n {moment\r\n .duration(duration, 'seconds')\r\n .format(duration >= 3600 ? 'hh:mm:ss' : 'mm:ss', {\r\n trim: false\r\n })}\r\n
\r\n )}\r\n \r\n handleViewDetails(item)}\r\n >\r\n {item.title}\r\n
\r\n \r\n \r\n {this.checkIsDocx(item.media_mime_type)\r\n ? 'DOCX'\r\n : this.checkIsPPT(item.media_mime_type)\r\n ? 'PPT'\r\n : item.media_format === 'APPLICATION'\r\n ? 'PDF'\r\n : item.media_format === 'VIDEO_STREAM' ||\r\n item.media_format === 'VIDEO_ANTMEDIA'\r\n ? 'VIDEO'\r\n : item.media_format}\r\n \r\n {(item.media_format === 'APPLICATION' ||\r\n item.media_format === 'TEXT') && (\r\n \r\n {!allowMultiple && (\r\n \r\n {t('v4:share')}\r\n \r\n )}\r\n {isShareModal && (\r\n \r\n this.checkedCard(e, thumb)}\r\n />\r\n )}\r\n {allowMultiple && isPageBuilder && (\r\n ctrlCheckPdfCard(item, e)}\r\n />\r\n )}\r\n
\r\n \r\n {t('v4:share_text')} {item.filename}\r\n
\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.user &&\r\n this.props.user.info &&\r\n this.props.user.info.organization &&\r\n this.props.user.info.organization.enable_ai &&\r\n item &&\r\n item.is_ai_enabled && (\r\n \r\n \r\n
\r\n \r\n {allowUpdateStatus && tab !== 'Organization Library' && (\r\n this.updateCardStatus(item, thumb)}\r\n >\r\n \r\n \r\n this.updateCardStatus(item, thumb)}\r\n >\r\n \r\n \r\n this.updateCardStatus(item, thumb)}\r\n >\r\n \r\n 
\r\n {t('buttons:make_private')}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n\r\n {allowOrgAdminUpdateStatus &&\r\n !allowUpdateStatus &&\r\n tab === 'My Media' && (\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n {tab === 'Organization Library' && (\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n {mediaTypes &&\r\n mediaTypes.map((item, ind) => (\r\n \r\n ))}\r\n
\r\n \r\n
\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withTranslation()(UpdateStatusModal)\r\n","import { connect } from 'react-redux'\r\nimport UpdateStatusModal from './UpdateStatusModal'\r\n\r\nconst mapStateToProps = state => ({\r\n library: state.library\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n null\r\n)(UpdateStatusModal)\r\n","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport _ from 'lodash'\r\nimport { Select, Icon } from 'antd'\r\nimport { api } from '../../../../services'\r\nimport { withTranslation } from 'react-i18next'\r\nimport CreatableSelect from 'react-select/creatable'\r\nimport './AddTopicCard.scss'\r\n\r\nclass AddTopicCard extends Component {\r\n static propTypes = {\r\n topics: PropTypes.array,\r\n mediaLists: PropTypes.array,\r\n item: PropTypes.object,\r\n ctrlChangeTopic: PropTypes.func,\r\n keywords: PropTypes.string\r\n }\r\n\r\n static defaultProps = {\r\n topics: [],\r\n mediaLists: [],\r\n item: {},\r\n keywords: ''\r\n }\r\n\r\n constructor (props) {\r\n super(props)\r\n this.loadOptions = _.debounce(this.loadOptions, 500)\r\n this.state = {\r\n options: [],\r\n value: [],\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n }\r\n }\r\n\r\n handleChangeTopic = ind => {\r\n const { mediaLists, ctrlChangeTopic } = this.props\r\n const { value } = this.state\r\n const mediaList = Object.assign([], mediaLists)\r\n\r\n mediaList[ind].topic_value = _.map(value, 'label')\r\n mediaList[ind].topic_ids = _.map(value, 'id')\r\n mediaList[ind].topics = _.map(value, 'id')\r\n ctrlChangeTopic(mediaList)\r\n }\r\n\r\n handleChangeKeyword = (event, ind) => {\r\n const { mediaLists, ctrlChangeKeywords } = this.props\r\n const mediaList = Object.assign([], mediaLists)\r\n\r\n mediaList[ind].keywords = event\r\n ctrlChangeKeywords(mediaList)\r\n }\r\n\r\n componentDidMount () {\r\n const {\r\n item: { topics: topicList },\r\n item\r\n } = this.props\r\n this.getOldTopics(topicList)\r\n this.setState({\r\n keywords: item.keywords\r\n })\r\n }\r\n\r\n getOldTopics = topics => {\r\n const { topics: topicList } = this.props\r\n // if(!isFetching){\r\n const topic = topics.map(item =>\r\n _.head(topicList.filter(topic => topic.id === item))\r\n )\r\n const newValue = topic.map(item => item && this.createOption(item))\r\n this.setState({\r\n value: newValue\r\n })\r\n // }\r\n }\r\n\r\n createOptionList = list => {\r\n const options = list.map(topic => this.createOption(topic))\r\n this.setState({\r\n options,\r\n isTopicLoading: false\r\n })\r\n }\r\n\r\n handleChange = (newValue, actionMeta) => {\r\n if (actionMeta.removedValue) {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n const { item_index } = this.props\r\n this.handleChangeTopic(item_index)\r\n }\r\n )\r\n } else if (!_.isEmpty(newValue) && newValue.length > 3) {\r\n this.setState({\r\n isTopicsMax: true\r\n })\r\n } else {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n const { item_index } = this.props\r\n this.handleChangeTopic(item_index)\r\n }\r\n )\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n handleCreate = inputValue => {\r\n this.setState({ isTopicLoading: true })\r\n const { options, value } = this.state\r\n const topic = { title: inputValue }\r\n\r\n if (!_.isEmpty(value) && value.length >= 3) {\r\n this.setState({\r\n isTopicsMax: true,\r\n isTopicLoading: false\r\n })\r\n } else {\r\n api.topics.createTopics(topic).then(({ data }) => {\r\n if (!_.isEmpty(data[0])) {\r\n const newOption = this.createOption(data[0])\r\n this.props.updateTopicList(data[0])\r\n\r\n this.setState(\r\n {\r\n isTopicLoading: false,\r\n options: [...options, newOption],\r\n isTopicsMax: false,\r\n value: [...value, newOption],\r\n inputValue: ''\r\n },\r\n () => {\r\n const { item_index } = this.props\r\n this.handleChangeTopic(item_index)\r\n }\r\n )\r\n }\r\n })\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n createOption = topic => {\r\n const option = {\r\n label: topic.title,\r\n value: topic.title,\r\n id: topic.id\r\n }\r\n return option\r\n }\r\n\r\n loadOptions = inputValue => {\r\n if (inputValue.length > 0 && inputValue.length <= 50) {\r\n this.setState({\r\n isTopicLoading: true\r\n })\r\n const params = {\r\n search: inputValue.trim(),\r\n limit: 10,\r\n offset: 0\r\n }\r\n api.topics.getTopics(params).then(({ data }) => {\r\n this.setState({\r\n inputValue\r\n })\r\n this.createOptionList(data)\r\n })\r\n }\r\n }\r\n\r\n LoadingIndicator = () => (\r\n \r\n \r\n {mediaLists &&\r\n mediaLists.map((item, ind) => (\r\n
\r\n
\r\n {makeType === general.PUBLIC && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n {t('labels:disclaimer')}
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('v3:terms_agree')}{' '}\r\n {t('v3:terms_and_conditions')}.\r\n \r\n \r\n
\r\n \r\n {makeType === general.PUBLIC && (\r\n ctrlMakeMediaStatus(general.PUBLIC, mediaLists)}\r\n >\r\n {t('buttons:make_public')}\r\n \r\n )}\r\n {makeType === general.PRIVATE && (\r\n ctrlMakeMediaStatus(general.PRIVATE, mediaLists)}\r\n >\r\n {t('buttons:make_private')}\r\n \r\n )}\r\n {makeType === general.ORG && (\r\n ctrlMakeMediaStatus(general.ORG, mediaLists)}\r\n >\r\n {t('buttons:make_org')}\r\n \r\n )}\r\n
\r\n \r\n this.setState({ inputValue: '' })}\r\n onChange={this.handleChange}\r\n onCreateOption={this.handleCreate}\r\n onInputChange={this.loadOptions}\r\n options={options}\r\n value={value}\r\n />\r\n\r\n {isTopicsMax && (\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default withTranslation()(AddTopicCard)\r\n","import AddTopicCard from './AddTopicCard'\r\nimport { connect } from 'react-redux'\r\nimport { bindActionCreators } from 'redux'\r\nimport actions from '../../../../store/actions'\r\n\r\nconst mapStateToProps = state => ({})\r\n\r\nconst mapDispatchToProps = dispatch => bindActionCreators({\r\n updateTopicList: actions.topics.updateTopicList\r\n}, dispatch)\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(AddTopicCard)\r\n","import React, { Component } from 'react'\r\nimport className from 'classnames'\r\nimport './Spinner.scss'\r\n\r\nconst sizes = {\r\n small: 'small'\r\n}\r\n\r\nclass Spinner extends Component {\r\n render () {\r\n const { height, size } = this.props\r\n\r\n const classNames = className({\r\n 'spin': true,\r\n 'spin_small': size === sizes.small\r\n })\r\n\r\n return (\r\n \r\n 
\r\n
\r\n {t('errors:topics_max')}
\r\n )}\r\n \r\n this.handleChangeKeyword(event, item_index)}\r\n style={{ width: '100%' }}\r\n />\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Spinner\r\n","import React, { useRef, useEffect, useState } from 'react';\r\nimport _ from 'lodash'\r\nimport mapboxgl from 'mapbox-gl';\r\nimport MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';\r\nimport './Map.css';\r\nimport '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';\r\n\r\nmapboxgl.accessToken =\r\n 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';\r\n\r\nconst Map = (props) => {\r\n const mapContainerRef = useRef(null);\r\n let logitude;\r\n let latitude;\r\n let scale;\r\n\r\n if (!_.isEmpty(props.mediaDat.custom_data) && !_.isEmpty(props.mediaDat.custom_data.geoloc)) {\r\n logitude = props.mediaDat.custom_data.geoloc.log\r\n latitude = props.mediaDat.custom_data.geoloc.lat\r\n scale = props.mediaDat.custom_data.geoloc.scale\r\n } else {\r\n logitude = 0\r\n latitude = 0\r\n scale = 3\r\n }\r\n\r\n const [lng, setLng] = useState(logitude);\r\n const [lat, setLat] = useState(latitude);\r\n const [zoom, setZoom] = useState(scale);\r\n\r\n // Initialize map when component mounts\r\n useEffect(() => {\r\n const map = new mapboxgl.Map({\r\n container: mapContainerRef.current,\r\n style: 'mapbox://styles/mapbox/streets-v11',\r\n center: [lng, lat],\r\n zoom: zoom\r\n });\r\n\r\n const marker = new mapboxgl.Marker({\r\n draggable: true\r\n });\r\n\r\n const geocoder = new MapboxGeocoder({\r\n accessToken: mapboxgl.accessToken,\r\n mapboxgl: mapboxgl\r\n });\r\n\r\n map.addControl(\r\n geocoder\r\n );\r\n\r\n geocoder.on('results', (results) => {\r\n // setTimeout(() => {\r\n // console.log(\"Got results\", results)\r\n // const lngLat = marker.getLngLat();\r\n // const {lng, lat} = map.getCenter(); \r\n // setLng(lng);\r\n // setLat(lat);\r\n // setZoom(map.getZoom().toFixed(4));\r\n // marker.setLngLat([lng, lat]).addTo(map)\r\n // }, 15000)\r\n })\r\n\r\n // Add navigation control (the +/- zoom buttons)\r\n map.addControl(new mapboxgl.NavigationControl(), 'top-right');\r\n\r\n map.addControl(new mapboxgl.GeolocateControl({\r\n positionOptions: {\r\n enableHighAccuracy: true\r\n },\r\n trackUserLocation: true,\r\n showUserHeading: true\r\n }));\r\n\r\n // map.on('click', () => {\r\n // console.log('on move');\r\n // setLng(map.getCenter().lng.toFixed(8));\r\n // setLat(map.getCenter().lat.toFixed(8));\r\n // setZoom(map.getZoom().toFixed(4));\r\n // });\r\n\r\n const onDragEnd = () => {\r\n const { onGeoLocation } = props\r\n const lngLat = marker.getLngLat();\r\n setLng(lngLat.lng.toFixed(8));\r\n setLat(lngLat.lat.toFixed(8));\r\n setZoom(map.getZoom().toFixed(4));\r\n let geoloc = {\r\n log: lngLat.lng.toFixed(8),\r\n lat: lngLat.lat.toFixed(8),\r\n scale: map.getZoom().toFixed(4)\r\n }\r\n onGeoLocation(geoloc)\r\n }\r\n\r\n map.on('moveend', () => {\r\n console.log('A moveend event occurred.');\r\n const { lng, lat } = map.getCenter();\r\n setLng(lng);\r\n setLat(lat);\r\n setZoom(map.getZoom().toFixed(4));\r\n marker.setLngLat([lng, lat]).addTo(map)\r\n });\r\n\r\n map.on('zoomstart', () => {\r\n console.log('A zoomstart event occurred.');\r\n setZoom(map.getZoom().toFixed(4));\r\n });\r\n\r\n marker.on('drag', onDragEnd);\r\n // Clean up on unmount\r\n return () => map.remove();\r\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {/*
\r\n );\r\n};\r\n\r\nexport default Map;\r\n","import React, { useState, useEffect, useCallback } from 'react'\r\nimport Dropzone from 'react-dropzone'\r\nimport { useTranslation } from 'react-i18next'\r\nimport {\r\n Row,\r\n Col,\r\n Button,\r\n Progress,\r\n Input,\r\n Spin,\r\n Checkbox,\r\n Popover,\r\n InputNumber,\r\n Switch,\r\n Radio,\r\n Modal\r\n} from 'antd'\r\nimport { Unity, useUnityContext } from 'react-unity-webgl-latest'\r\nimport { QuestionCircleOutlined } from '@ant-design/icons'\r\nimport _ from 'lodash'\r\nimport className from 'classnames'\r\nimport { uploadMedia } from '../../../../internal/List/images'\r\nimport Map from './Map'\r\nimport { config } from '../../../../../../constants'\r\n\r\nconst View = props => {\r\n const [checkBoxValue, setCheckBoxValue] = useState(false)\r\n const [modalVisible, setModalVisible] = useState(false)\r\n const [switchInteractive, setSwitchInteractive] = useState(false)\r\n const { t } = useTranslation()\r\n const { TextArea } = Input\r\n const {\r\n mediaDat,\r\n zipLoading,\r\n imgLoading,\r\n isZip,\r\n submitLoading,\r\n imgPreviewLoading,\r\n audioLoading,\r\n selectedData,\r\n imageSizeCheck,\r\n zipSizeCheck,\r\n editAssets,\r\n onChangeTitle,\r\n onChangeDescription,\r\n onDropTargetImage,\r\n onDropppedZip,\r\n onDropppedAudio,\r\n onDropTargetPreviewImage,\r\n onClickUpdate,\r\n onClickSubmit,\r\n onChangeZipScale,\r\n isMarkerBased,\r\n onChangeMarkerBased,\r\n onGeoLocation,\r\n onUnitySaveClicked,\r\n distroyUnity\r\n } = props\r\n\r\n const enableSave = true\r\n\r\n const {\r\n unityProvider,\r\n isLoaded,\r\n loadingProgression,\r\n unload,\r\n sendMessage,\r\n addEventListener,\r\n removeEventListener\r\n } = useUnityContext({\r\n loaderUrl: '/arBuild/CreatorWithIntegration.loader.js',\r\n dataUrl: '/arBuild/CreatorWithIntegration.data',\r\n frameworkUrl: '/arBuild/CreatorWithIntegration.framework.js',\r\n codeUrl: '/arBuild/CreatorWithIntegration.wasm',\r\n cacheControl: handleCacheControl\r\n })\r\n\r\n // useEffect(() => {\r\n // return () => {+\r\n // unityProvider.setUnityInstance(null)\r\n // }\r\n // }, [])\r\n\r\n const handleCacheControl = () => {\r\n return 'no-store'\r\n }\r\n\r\n const unloadUnity = async () => {\r\n await unload()\r\n editAssets ? onClickUpdate() : onClickSubmit()\r\n }\r\n\r\n const index =\r\n mediaDat &&\r\n mediaDat.ar_files &&\r\n mediaDat.ar_files.findIndex(obj => {\r\n return obj.media_format === 'IMAGE'\r\n })\r\n\r\n const audioIndex =\r\n mediaDat &&\r\n mediaDat.ar_files &&\r\n mediaDat.ar_files.findIndex(obj => {\r\n return obj.media_format === 'AUDIO'\r\n })\r\n\r\n const compressedIndex =\r\n mediaDat &&\r\n mediaDat.ar_files &&\r\n mediaDat.ar_files.findIndex(obj => {\r\n return obj.media_format === 'COMPRESSED'\r\n })\r\n\r\n // const condn = (!editAssets && !mediaDat.hasOwnProperty('ar_files'))\r\n // const enableSave = ((isMarkerBased === 2) && mediaDat.hasOwnProperty('customData') && mediaDat.customData.hasOwnProperty('geoloc'))\r\n\r\n const onChangeInputScale = v => {\r\n console.log('onChangeInputScale: ', v)\r\n onChangeZipScale(v)\r\n }\r\n\r\n const onSwitchInteractionMode = () => {\r\n setSwitchInteractive(switchInteractive => !switchInteractive)\r\n //unityProvider.setUnityInstance(null)\r\n //await handleUnloadUnity()\r\n }\r\n\r\n // useEffect(() => {\r\n // const timer = setTimeout(() => {\r\n // setShowUnityUI(false);\r\n // }, 5000);\r\n // return () => {\r\n // console.log(\"killed timer\");\r\n // clearTimeout(timer);\r\n // };\r\n // }, [switchInteractive]);\r\n\r\n // async function handleUnloadUnity() {\r\n // if (!switchInteractive) {\r\n // console.log(\"I am unload here\");\r\n // await unload();\r\n // }\r\n // }\r\n\r\n // useEffect(() => {\r\n // if (!switchInteractive) {\r\n // async function handleClickBack() {\r\n // console.log(\"I am unload here\");\r\n // await unload();\r\n // }\r\n // handleClickBack()\r\n // }\r\n // }, [switchInteractive])\r\n\r\n useEffect(() => {\r\n const distroyUnityInstance = async () => {\r\n if (distroyUnity && isLoaded) {\r\n await unload()\r\n }\r\n }\r\n distroyUnityInstance()\r\n }, [distroyUnity])\r\n\r\n useEffect(() => {\r\n if (!checkBoxValue) {\r\n onChangeZipScale(0.15)\r\n }\r\n }, [checkBoxValue])\r\n\r\n useEffect(() => {\r\n console.log('MediaData useEffect', mediaDat)\r\n console.log('MediaData useEffect is_interactive', mediaDat.is_interactive)\r\n if (\r\n mediaDat &&\r\n mediaDat.hasOwnProperty('ar_files') &&\r\n editAssets &&\r\n !switchInteractive &&\r\n mediaDat.is_interactive === true &&\r\n _.has(mediaDat.custom_data, 'unity_coordinates')\r\n ) {\r\n onSwitchInteractionMode()\r\n }\r\n }, [mediaDat])\r\n\r\n useEffect(() => {\r\n if (\r\n mediaDat.hasOwnProperty('ar_files') &&\r\n isLoaded &&\r\n switchInteractive &&\r\n !editAssets\r\n ) {\r\n sendMessage(\r\n 'DataReceiver',\r\n 'StartCreator',\r\n `${config.s3BucketURL}/${mediaDat.ar_files[compressedIndex].key}`\r\n )\r\n }\r\n if (\r\n mediaDat &&\r\n mediaDat.hasOwnProperty('ar_files') &&\r\n editAssets &&\r\n isLoaded &&\r\n mediaDat.is_interactive === true &&\r\n _.has(mediaDat.custom_data, 'unity_coordinates') &&\r\n mediaDat.custom_data.unity_coordinates !== ''\r\n ) {\r\n console.log(\r\n 'edit mediaDat.custom_data.unity_coordinates',\r\n JSON.stringify(mediaDat.custom_data.unity_coordinates)\r\n )\r\n sendMessage(\r\n 'DataReceiver',\r\n 'EditQuiz',\r\n JSON.stringify(mediaDat.custom_data.unity_coordinates)\r\n )\r\n }\r\n // ELSE SHOW ERROR TODO\r\n }, [isLoaded])\r\n\r\n useEffect(() => {\r\n addEventListener('OpenModal', isModalOpenListener)\r\n return () => {\r\n removeEventListener('OpenModal', isModalOpenListener)\r\n }\r\n }, [addEventListener, removeEventListener, isModalOpenListener])\r\n\r\n const isModalOpenListener = useCallback(param => {\r\n console.log('isModalOpenListener : ', param)\r\n if (param === 1) {\r\n setModalVisible(true)\r\n return\r\n }\r\n setModalVisible(false)\r\n }, [])\r\n\r\n useEffect(() => {\r\n addEventListener('SendFinalJson', receiveDataListener)\r\n return () => {\r\n removeEventListener('SendFinalJson', receiveDataListener)\r\n }\r\n }, [addEventListener, removeEventListener, receiveDataListener])\r\n\r\n const receiveDataListener = useCallback(param => {\r\n console.log('receiveDataListener : ', param)\r\n console.log('receiveDataListener switchInteractive : ', switchInteractive)\r\n const sendJSON = {\r\n switchInteractive: editAssets ? mediaDat.is_interactive : true,\r\n json: param\r\n }\r\n onUnitySaveClicked(sendJSON)\r\n }, [])\r\n\r\n const onChangeAdvancedSetting = () => {\r\n setCheckBoxValue(prevCheck => !prevCheck)\r\n }\r\n\r\n const closeModal = () => {\r\n setModalVisible(false)\r\n sendMessage(\r\n 'DataReceiver',\r\n 'UploadDone',\r\n JSON.stringify({ url: '', isOpen: 0 })\r\n )\r\n }\r\n\r\n const onModelUpload = () => {\r\n setModalVisible(false)\r\n console.log('mediaDat.ar_files ', mediaDat.ar_files)\r\n console.log('mediaDat.ar_files ', mediaDat.ar_files[compressedIndex].key)\r\n sendMessage(\r\n 'DataReceiver',\r\n 'UploadDone',\r\n JSON.stringify({\r\n url: `${process.env.REACT_APP_S3_BUCKET_URL}/${mediaDat.ar_files[compressedIndex].key}`,\r\n isOpen: 1\r\n })\r\n )\r\n }\r\n\r\n const content = (\r\n \r\n
*/}\r\n \r\n \r\n Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}\r\n
\r\n \r\n
\r\n )\r\n return (\r\n <>\r\n \r\n This is 3D Model's Scale Value.
\r\n Change it only if you know what
\r\n you are doing.\r\n
\r\n
\r\n \r\n {({ getRootProps, getInputProps, isDragActive }) => (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n 
\r\n \r\n Upload 3D Zip {t('v2:drag_n_drop')}\r\n \r\n
\r\n {zipSizeCheck && (\r\n \r\n {t('v2:zip_size_should_not_exceed')}\r\n \r\n )}\r\n {!zipLoading && mediaDat.hasOwnProperty('ar_files') && (\r\n
\r\n \r\n {zipSizeCheck && (\r\n \r\n {t('v2:zip_size_should_not_exceed')}\r\n \r\n )}\r\n {!zipLoading && mediaDat.hasOwnProperty('ar_files') && (\r\n
\r\n \r\n \r\n {t('v2:content_attached')}\r\n \r\n
\r\n )}\r\n \r\n
\r\n {isMarkerBased === 2 ? 'Title' : t('v2:trigger_title')}\r\n
\r\n\r\n
\r\n
\r\n {isMarkerBased === 2 ? 'Description' : t('v2:trigger_description')}\r\n
\r\n\r\n
\r\n\r\n
\r\n {t('v2:_jpg_files')}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n {({ getRootProps, getInputProps, isDragActive }) => (\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {isMarkerBased === 2\r\n ? 'Upload Image'\r\n : t('v2:upload_trigger_image')}\r\n \r\n
\r\n {t('v2:drag_n_drop')}\r\n
\r\n {imageSizeCheck && (\r\n \r\n {t('v2:file_size_should_not_exceed')}\r\n \r\n )}\r\n \r\n
\r\n \r\n {t('v2:drag_n_drop')}\r\n
\r\n {imageSizeCheck && (\r\n \r\n {t('v2:file_size_should_not_exceed')}\r\n \r\n )}\r\n \r\n
\r\n
\r\n\r\n {isMarkerBased === 2 && (\r\n
\r\n Place marker to desired location on Map\r\n
\r\n\r\n
\r\n\r\n {!switchInteractive && (\r\n
\r\n {t('(Enable or disable 3D interaction)')}\r\n
\r\n \r\n\r\n
\r\n\r\n {!isLoaded && (\r\n
\r\n {switchInteractive\r\n ? t('v2:_3d_files_mp4_ar')\r\n : t('v2:_3d_files_mp4')}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n {({ getRootProps, getInputProps, isDragActive }) => (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {switchInteractive\r\n ? 'Upload 3D Zip'\r\n : 'Upload Zip/Video'}\r\n {' '}\r\n {t('v2:drag_n_drop')}\r\n \r\n
\r\n {zipSizeCheck && (\r\n \r\n {t('v2:zip_size_should_not_exceed')}\r\n \r\n )}\r\n {mediaDat.hasOwnProperty('ar_files') && (\r\n
\r\n \r\n {zipSizeCheck && (\r\n \r\n {t('v2:zip_size_should_not_exceed')}\r\n \r\n )}\r\n {mediaDat.hasOwnProperty('ar_files') && (\r\n
\r\n \r\n {isZip\r\n ? t('v2:content_attached')\r\n : t('v2:video_attached')}\r\n \r\n
\r\n )}\r\n \r\n
\r\n {mediaDat.hasOwnProperty('ar_files') && switchInteractive && (\r\n
\r\n Scale:{' '}\r\n
\r\n
\r\n {isZip && !switchInteractive && !zipLoading && (\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {({ getRootProps, getInputProps, isDragActive }) => (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n {t('v2:upload_audio')}{' '}\r\n {t('v2:drag_n_drop')}\r\n \r\n
\r\n {audioIndex > -1 &&\r\n mediaDat.hasOwnProperty('ar_files') && (\r\n
\r\n \r\n {audioIndex > -1 &&\r\n mediaDat.hasOwnProperty('ar_files') && (\r\n
\r\n \r\n {t('v2:audio_attached')}\r\n \r\n
\r\n )}\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {({ getRootProps, getInputProps, isDragActive }) => (\r\n
\r\n )}\r\n \r\n \r\n -1 &&\r\n mediaDat.ar_files[index].link\r\n }\r\n width=\"900\"\r\n height=\"189\"\r\n alt=\"\"\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {t('v2:upload_preview_image')}{' '}\r\n {t('v2:drag_n_drop')}\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {t('v2:model_title')}\r\n
\r\n\r\n
\r\n
\r\n {t('v2:model_description')}\r\n
\r\n\r\n
\r\n
\r\n {t('v2:_jpg_files')}\r\n
*/}\r\n\r\n
\r\n \r\n \r\n \r\n \r\n {({ isDragActive }) => (\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {t('v2:upload_model_image')}\r\n
\r\n {t('v2:drag_n_drop')}\r\n
\r\n {imageSizeCheck && (\r\n \r\n {t('v2:file_size_should_not_exceed')}\r\n \r\n )}\r\n \r\n
\r\n \r\n {t('v2:drag_n_drop')}\r\n
\r\n {imageSizeCheck && (\r\n \r\n {t('v2:file_size_should_not_exceed')}\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n {t('v2:maze_3d_files_mp4')}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n {({ isDragActive }) => (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n {t('v2:upload_3d_maze_zip')}{' '}\r\n {t('v2:drag_n_drop')}\r\n \r\n
\r\n {mediaDat.hasOwnProperty('ar_files') && (\r\n
\r\n \r\n {mediaDat.hasOwnProperty('ar_files') && (\r\n
\r\n \r\n \r\n {isZip\r\n ? t('v2:content_attached')\r\n : t('v2:video_attached')}\r\n \r\n
\r\n )}\r\n \r\n
\r\n
\r\n
{t('general:empty')}
\r\n \r\n } trigger='click'>\r\n \r\n {orgId && orgLogo ? (\r\n 
\r\n ) : orgId && activeOrg ? (\r\n \r\n {activeOrg.title.charAt(0).toUpperCase()}\r\n \r\n ) : picture ? (\r\n 
\r\n ) : (\r\n
\r\n \r\n \r\n {activeOrg ? activeOrg.title : name || username}\r\n \r\n {name || username}\r\n {email}\r\n
\r\n \r\n \r\n {!_.isEmpty(organizations) &&\r\n !_.isEmpty(organizations.rows) &&\r\n organizations.rows.map(({ id, title, logo }) => (\r\n this.switchAccount(id)}\r\n >\r\n \r\n {logo ? (\r\n })
\r\n ) : (\r\n \r\n {title.charAt(0).toUpperCase()}\r\n \r\n )}\r\n {/* */}\r\n \r\n \r\n \r\n \r\n {t('general:organization')}\r\n \r\n {title} \r\n \r\n \r\n {orgId != id && (\r\n {t('v4:switch')} \r\n )}\r\n \r\n ))}\r\n\r\n this.switchAccount(null)}\r\n >\r\n \r\n {picture ? (\r\n \r\n ) : (\r\n \r\n \r\n {t('general:personal')} \r\n {name} \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n return (\r\n Contexts
\r\n\r\n {context.map((item, index) => (\r\n
\r\n \r\n
\r\n ))}\r\n {index + 1}.
\r\n {item}\r\n\r\n {loading ? (\r\n
\r\n )\r\n}\r\n\r\nChatBotView.propTypes = {\r\n steps: PropTypes.object,\r\n triggerNextStep: PropTypes.func\r\n}\r\n\r\nChatBotView.defaultProps = {\r\n steps: undefined,\r\n triggerNextStep: undefined\r\n}\r\n\r\nexport default ChatBotView\r\n","import ChatBotView from './ChatBotView'\r\n\r\nexport default ChatBotView\r\n","import InformationModal from './informationModal'\r\n\r\nexport default InformationModal\r\n","import React from 'react'\r\nimport { Button, Modal } from 'antd'\r\nimport ReactPlayer from 'react-player'\r\nimport history from '../../../../../history'\r\nimport './styles.scss'\r\nimport { useTranslation, withTranslation } from 'react-i18next'\r\n\r\nconst InformationModal = props => {\r\n const { t } = useTranslation()\r\n console.log('infomodalprops', props)\r\n const {\r\n title,\r\n description1,\r\n description2,\r\n id,\r\n icon,\r\n videoURL,\r\n URL\r\n } = props.currentInfo\r\n\r\n return (\r\n <>\r\n \r\n
\r\n )}\r\n\r\n {botModal.visible && showModalContent()}\r\n {result.question || '-->'}
\r\n \r\n
\r\n \r\n
\r\n\r\n {!_.isEmpty(reference) && (\r\n {result.answer}
\r\n \r\n Reference
\r\n
\r\n )}\r\n \r\n
- \r\n {Object.keys(reference).map(item => {\r\n const fileItem = reference[item]\r\n return (\r\n
\r\n {\r\n props.closeModal()\r\n if (id === 5) {\r\n props.redirectVoice()\r\n } else {\r\n history.push(URL)\r\n }\r\n }}\r\n >\r\n {t('v4:get_started')}\r\n \r\n
\r\n \r\n \r\n )\r\n}\r\n\r\nexport default withTranslation()(InformationModal)\r\n","import Informations from './informations'\r\n\r\nexport default Informations\r\n","import React, { useState } from 'react'\r\nimport buildCourse from '../../images/build_course.svg'\r\nimport inviteUsers from '../../images/invite_users.svg'\r\nimport liveBroadcast from '../../images/live_broadcast.svg'\r\nimport uploadMedia from '../../images/upload_media.svg'\r\nimport viewReports from '../../images/view_reports.svg'\r\nimport voiceOver from '../../images/voice_over.svg'\r\nimport history from '../../../../history'\r\nimport { Button } from 'antd'\r\nimport PlayIcon from '../../../../assets/play_icon.png'\r\nimport InformationModal from './InformationModal'\r\nimport './styles.scss'\r\n\r\nconst Informations = props => {\r\n const { t } = props\r\n\r\n const [showInfoModal, setShowInfoModal] = useState(false)\r\n const [currentInfo, setCurrentInfo] = useState({})\r\n\r\n const modalInfos = [\r\n {\r\n id: 1,\r\n icon: buildCourse,\r\n URL: '/course-create',\r\n videoURL: 'https://youtu.be/cixP6V0nKsk',\r\n title: t('v4:build_course'),\r\n description1: '',\r\n description2: ''\r\n },\r\n {\r\n id: 2,\r\n icon: liveBroadcast,\r\n URL: '/events',\r\n videoURL: 'https://youtu.be/xQFX8xxh82M',\r\n title: t('v4:live_broadcast'),\r\n description1: t('v2:live_broadcast_description'),\r\n description2: t('v2:live_broadcast_subdescription')\r\n },\r\n {\r\n id: 3,\r\n icon: uploadMedia,\r\n URL: '/library/list',\r\n videoURL: 'https://youtu.be/HMxDugq_BQA',\r\n title: t('v4:upload_media'),\r\n description1: '',\r\n description2: ''\r\n },\r\n {\r\n id: 4,\r\n icon: inviteUsers,\r\n URL: '/management/users',\r\n videoURL: 'https://youtu.be/X6MwHdKHIUM',\r\n title: t('v4:invite_users'),\r\n description1: '',\r\n description2: ''\r\n },\r\n {\r\n id: 5,\r\n icon: voiceOver,\r\n URL: '',\r\n videoURL: 'https://www.youtube.com/watch?v=TPoWvKdQXxI',\r\n title: t('v4:build_voice_over'),\r\n description1: '',\r\n description2: ''\r\n },\r\n {\r\n id: 6,\r\n icon: viewReports,\r\n URL: '/reports',\r\n videoURL: 'https://youtu.be/JkC5OMxEQXs',\r\n title: t('v4:view_reports'),\r\n description1: '',\r\n description2: ''\r\n }\r\n ]\r\n\r\n const closeModal = () => {\r\n props.onMainMenu(false)\r\n }\r\n\r\n const redirectVoiceOver = () => {\r\n window.open('https://www.sharelookvoices.com/create-voice.html', '_blank')\r\n }\r\n\r\n const toggleInfoModal = value => {\r\n setShowInfoModal(!showInfoModal)\r\n modalInfos.forEach(item => {\r\n if (item.id === value) setCurrentInfo(item)\r\n })\r\n }\r\n\r\n return (\r\n <>\r\n \r\n 
\r\n
\r\n {title}
\r\n{description1}
\r\n{description2}
\r\n\r\n
\r\n \r\n {t('v4:title')}
\r\n\r\n \r\n {modalInfos.map(item => {\r\n return (\r\n
\r\n )\r\n })}\r\n \r\n {\r\n closeModal()\r\n if (item.id === 5) {\r\n redirectVoiceOver()\r\n } else {\r\n history.push(item.URL)\r\n }\r\n }}\r\n >\r\n
\r\n \r\n 
\r\n
\r\n {item.title}
\r\n\r\n toggleInfoModal(item.id)}\r\n type=\"text\"\r\n >\r\n {t('v2:how_to_use').toUpperCase()}\r\n \r\n 
\r\n
\r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {/* Language Selection */}\r\n\r\n
\r\n \r\n\r\n {/* Profile Menus */}\r\n \r\n {\r\n setActiveBotResource(val)\r\n }}\r\n />\r\n ),\r\n trigger: 'first'\r\n },\r\n {\r\n id: 'first',\r\n message: t('v3:sharebot_help_message'),\r\n trigger: 'search'\r\n },\r\n {\r\n id: 'search',\r\n user: true,\r\n trigger: '1'\r\n },\r\n {\r\n id: '1',\r\n asMessage: true,\r\n component: (\r\n \r\n chatBot && chatBot.current.triggerNextStep()\r\n }\r\n chatBot={chatBot}\r\n />\r\n ),\r\n waitAction: true,\r\n trigger: 'search'\r\n }\r\n ]}\r\n />\r\n \r\n
\r\n )}\r\n\r\n {showInfoModal && (\r\n \r\n {!isShowingKnowledgeCenter && (\r\n \r\n \r\n 
\r\n
\r\n \r\n )}\r\n\r\n {showBot && activeBotResource && (\r\n \r\n \r\n \r\n
\r\n }\r\n width=\"450px\"\r\n height=\"calc(100vh - 15rem)\"\r\n className=\"sharebot-container\"\r\n activeBotResource={activeBotResource}\r\n steps={[\r\n {\r\n id: 'customComponent',\r\n delay: 0,\r\n component: (\r\n {t('v3:sharebot')}
\r\n ×\r\n\r\n \r\n handleChangeOption(e)}\r\n suffixIcon={null}\r\n getPopupContainer={() =>\r\n document.getElementById('language_select')\r\n }\r\n >\r\n {languages.map(item => (\r\n \r\n ))}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n setShowMenu(!showMenu)}\r\n className=\"menu-toggle\"\r\n >\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {/* mobile responsive menu */}\r\n\r\n \r\n
\r\n \r\n \r\n )\r\n}\r\n\r\nconst ChatBotHeader = ({\r\n activeBotResource: defaultActiveBotResource,\r\n setActiveBotResource,\r\n chatBot,\r\n t\r\n}) => {\r\n const {\r\n props: { activeBotResource: changedActiveBotResource }\r\n } = chatBot.current\r\n\r\n const activeBotResource = changedActiveBotResource || defaultActiveBotResource\r\n return (\r\n \r\n
\r\n \r\n\r\n \r\n setShowMenu(!showMenu)}\r\n >\r\n \r\n
\r\n \r\n
\r\n - \r\n {!isJustSignedIn && (\r\n
- \r\n \r\n\r\n
\r\n \r\n {isShowingKnowledgeCenter\r\n ? t('v3:learning_center')\r\n : t('v3:knowledge_center')}\r\n \r\n \r\n )}\r\n\r\n {!isShowingKnowledgeCenter && (\r\n - \r\n \r\n\r\n
\r\n {t('v3:sharebot')}\r\n \r\n )}\r\n - \r\n \r\n\r\n \r\n
- \r\n \r\n\r\n\r\n\r\n \r\n
\r\n setActiveBotResource(shareBotResources.organization)}\r\n >\r\n {t('v3:my_organization')}\r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n getMediaListing = list => {\r\n return list ? list.rows : []\r\n }\r\n allowUpdateStatus = () => {\r\n const {\r\n user: {\r\n info: { isSuperAdmin }\r\n }\r\n } = this.props\r\n return isSuperAdmin\r\n }\r\n\r\n allowOrgAdminUpdateStatus = () => {\r\n const {\r\n user: {\r\n info: { isAdmin }\r\n }\r\n } = this.props\r\n return isAdmin\r\n }\r\n\r\n allowUpdateOrgMedia = () => {\r\n const {\r\n user: {\r\n info: { isSuperAdmin, isAdmin }\r\n }\r\n } = this.props\r\n return isSuperAdmin || isAdmin\r\n }\r\n\r\n allowDelete = type => {\r\n const {\r\n user: {\r\n info: { isSuperAdmin }\r\n }\r\n } = this.props\r\n if (type === general.PUBLIC_MEDIA) {\r\n return isSuperAdmin\r\n } else {\r\n return true\r\n }\r\n }\r\n\r\n handlePagination = (type, event) => {\r\n const { pageSize, pageSizePublic, pageSizeOrg } = this.state\r\n if (type === general.PUBLIC_MEDIA) {\r\n return this.onChangePagePublic(event, pageSizePublic)\r\n } else if (type === general.MY_MEDIA) {\r\n this.onChangePage(event, pageSize)\r\n } else {\r\n return this.onChangePageOrg(event, pageSizeOrg)\r\n }\r\n }\r\n\r\n getCurrent = type => {\r\n const { page, pagePublic, pageOrg } = this.state\r\n if (type === general.PUBLIC_MEDIA) {\r\n return pagePublic\r\n } else if (type === general.MY_MEDIA) {\r\n return page\r\n } else {\r\n return pageOrg\r\n }\r\n }\r\n\r\n getPageSize = type => {\r\n const { pageSizePublic, pageSize, pageSizeOrg } = this.state\r\n if (type === general.PUBLIC_MEDIA) {\r\n return pageSizePublic\r\n } else if (type === general.MY_MEDIA) {\r\n return pageSize\r\n } else {\r\n return pageSizeOrg\r\n }\r\n }\r\n\r\n getThumbnail = (files, ind, isScorm = false) => {\r\n const fileType = getFileType(files[ind] && files[ind].type)\r\n\r\n if (fileType === 'application') {\r\n const fileIcons = {\r\n 'application/pdf': pdfIcon,\r\n 'application/vnd.openxmlformats-officedocument.presentationml.presentation': pptImage,\r\n 'application/msword': wordIcon,\r\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': wordIcon\r\n }\r\n\r\n const fileIcon = fileIcons[files[ind] && files[ind].type] || textIcon\r\n\r\n return (\r\n \r\n
\r\n \r\n this.onSearch(e.target.value, type)}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n if (fileType === 'text') {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n if (fileType === 'image') {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n renderMedia = (mediaList, type) => {\r\n const { tab, editAssets } = this.state\r\n const {\r\n t,\r\n isPageBuilder,\r\n user: {\r\n info: { active_organization_id }\r\n }\r\n } = this.props\r\n const media = this.getMediaListing(mediaList)\r\n const currentPage = this.getCurrent(type)\r\n const currentPageSize = this.getPageSize(type)\r\n\r\n return (\r\n \r\n {t('media:no_media')}\r\n
\r\n ) : (\r\n \r\n {media &&\r\n media.map((item, ind) => (\r\n
\r\n \r\n \r\n this.handleUpdateLibraryStatus(item, thumb, ind)\r\n }\r\n ctrlHandleCheckCard={(val, thumb) => {\r\n this.handleCheckCard(val, thumb, ind)\r\n }}\r\n ctrlOrgLibrary={(item, thumb) =>\r\n this.handleOrgLibraryUpdate(item, thumb, ind)\r\n }\r\n isPageBuilder={isPageBuilder}\r\n // isSuperAdmin={isSuperAdmin}\r\n />\r\n
\r\n ))}\r\n \r\n this.handlePagination(type, event)}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {/*\r\n this.hangeFilterChange(value, tab)\r\n }\r\n />\r\n
\r\n {t('media:media_type')}
*/}\r\n\r\n {tab === general.MY_MEDIA && isSuperAdmin && (\r\n this.updateMediaStatus(general.PUBLIC)}\r\n >\r\n {t('buttons:make_public')}\r\n \r\n )}\r\n {(isSuperAdmin || isAdmin) && (\r\n this.updateMediaStatus(general.PRIVATE)}\r\n >\r\n {t('buttons:make_private')}\r\n \r\n )}\r\n {tab === general.MY_MEDIA && (\r\n this.setState({ showDeleteModal: true })}\r\n >\r\n {t('buttons:delete')}\r\n \r\n )}\r\n {(isSuperAdmin || isAdmin) &&\r\n (tab === general.MY_MEDIA || tab === general.PUBLIC) && (\r\n this.updateMediaStatus(general.ORG)}\r\n >\r\n {t('buttons:make_org')}\r\n \r\n )}\r\n
\r\n \r\n {/* */}\r\n this.onFilter(item.value, tab)}\r\n label={t('labels:sort_by')}\r\n // bordered\r\n />\r\n
\r\n \r\n )\r\n }\r\n\r\n getSelectedMedia = () => {\r\n const { data } = this.state\r\n let library = []\r\n if (!_.isEmpty(data.rows)) {\r\n library = _.map(\r\n _.filter(data.rows, item => {\r\n return item.is_checked\r\n }),\r\n 'filename'\r\n )\r\n }\r\n return library\r\n }\r\n\r\n onChangeUploadsTab = e => {\r\n this.setState({ enableProgress: false })\r\n\r\n const { clearUploadList } = this.props\r\n\r\n clearUploadList()\r\n }\r\n\r\n renderDropzone = type => {\r\n const isScormZipUpload = type === 'scorm'\r\n const droppableFiles = [\r\n 'video/AVI',\r\n 'video/WMV',\r\n 'video/MP4',\r\n 'video/MOV',\r\n 'video/FLV',\r\n 'video/*',\r\n 'audio/*',\r\n '.pdf',\r\n 'image/*',\r\n '.ppt',\r\n '.pptx',\r\n '.txt',\r\n '.docx'\r\n ]\r\n\r\n const {\r\n files,\r\n fileNotCompatible,\r\n isRemovingMedia,\r\n enableProgress,\r\n scormExtractedMedia\r\n } = this.state\r\n\r\n const { t, topics, library } = this.props\r\n const { uploadProgress, uploadFetching } = library\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n {!enableProgress && (\r\n
\r\n )}\r\n \r\n
\r\n \r\n {isScormZipUpload ? 'Upload Scorm Zip' : t('media:import_file')}\r\n
\r\n\r\n this.onDrop(dropped, isScormZipUpload)}\r\n >\r\n {({ isDragActive }) => (\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {isScormZipUpload\r\n ? t('v2:upload_3d_maze_zip')\r\n : t('media:upload_file')}\r\n {' '}\r\n {t('media:drag_drop')}\r\n
\r\n\r\n {fileNotCompatible && (\r\n
\r\n \r\n \r\n {t('buttons:cancel')}\r\n \r\n
\r\n )}\r\n\r\n {enableProgress && uploadProgress.length > 0 && (\r\n \r\n \r\n
\r\n\r\n \r\n {t('errors:upload_error')}\r\n
\r\n \r\n {uploadProgress.map((item, ind) => (\r\n
\r\n )}\r\n \r\n
\r\n ))}\r\n \r\n {this.getThumbnail(files, ind, type === 'scorm')}\r\n
\r\n \r\n \r\n {type === 'scorm'\r\n ? 'SCORM'\r\n : getFileType(files[ind] && files[ind].type)}\r\n \r\n \r\n {getFileExtension(files[ind] && files[ind].type)}\r\n \r\n \r\n {bytesToSize(files[ind] && files[ind].size)}\r\n \r\n
\r\n \r\n this.handleCancelUpload(item)}\r\n ctrlHandleRemove={() =>\r\n this.handleRemoveMedia(item.id, ind)\r\n }\r\n isScorm={type === 'scorm'}\r\n scormExtractedMedia={scormExtractedMedia}\r\n isUploading={uploadFetching}\r\n isUploadingComplete={this.checkedCompletUpload(item)}\r\n />\r\n
\r\n \r\n
\r\n\r\n {item.status !== general.CANCELED && (\r\n \r\n {this.checkedCompletUpload(item) && (\r\n \r\n {bytesToSize(item.loaded)} {t('of')}{' '}\r\n {bytesToSize(item.total)}\r\n \r\n )}\r\n {!this.checkedCompletUpload(item) && (\r\n \r\n {files[ind] && files[ind].removed\r\n ? t('general:removed')\r\n : `${t('general:completed')} ${\r\n type === 'scorm'\r\n ? `(${scormExtractedMedia.length} media files extracted)`\r\n : ''\r\n }`}\r\n \r\n )}\r\n
\r\n )}\r\n\r\n {item.status === general.CANCELED && (\r\n \r\n \r\n {t('general:canceled')}\r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n {t('buttons:close')}\r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n render() {\r\n const {\r\n modal,\r\n tab,\r\n // isFetching,\r\n data,\r\n publicLibrary,\r\n showStatusModal,\r\n mediaNoTopics,\r\n loadingModalButtion,\r\n showDeleteModal,\r\n orgLibrary,\r\n showMyMedia,\r\n editAssets,\r\n selectedData,\r\n distroyUnity\r\n } = this.state\r\n const { t, topics, library } = this.props\r\n const {\r\n uploadProgress,\r\n uploadFetching,\r\n isOrgFetching,\r\n isPublicFetching,\r\n isFetching\r\n } = library\r\n const selectedMedia = this.getSelectedMedia()\r\n\r\n const isKnowledgeCenter = window.location.pathname.includes(\r\n '/knowledge-center'\r\n )\r\n\r\n return (\r\n \r\n
\r\n \r\n {t('title')}
\r\n {t('subtitle')}
\r\n \r\n \r\n \r\n If you wish to remove the video's reference to Sharbot, please\r\n delete the corresponding transcript along with the video.\r\n \r\n \r\n Deleting the transcript will remove the associated video/audio\r\n reference to Sharebot, but the video will still appear in the\r\n media library/channel.\r\n \r\n \r\n
\r\n {t('media:delete_message')}
\r\n\r\n\r\n
\r\n ))}\r\n \r\n \r\n )}\r\n \r\n {index + 1}. {item}\r\n
\r\n \r\n {this.state.mediaTypes.map((item, ind) => (\r\n \r\n ))}\r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n getMediaListing = list => {\r\n return list ? list.rows : []\r\n }\r\n\r\n allowUpdateStatus = () => {\r\n const {\r\n user: {\r\n info: { isSuperAdmin }\r\n }\r\n } = this.props\r\n return isSuperAdmin\r\n }\r\n\r\n allowOrgAdminUpdateStatus = () => {\r\n const {\r\n user: {\r\n info: { isAdmin }\r\n }\r\n } = this.props\r\n return isAdmin\r\n }\r\n\r\n allowUpdateOrgMedia = () => {\r\n const {\r\n user: {\r\n info: { isSuperAdmin, isAdmin }\r\n }\r\n } = this.props\r\n return isSuperAdmin || isAdmin\r\n }\r\n\r\n handlePagination = (type, event) => {\r\n const { pageSize, pageSizePublic, pageSizeOrg } = this.state\r\n if (type === general.PUBLIC_MEDIA) {\r\n return this.onChangePagePublic(event, pageSizePublic)\r\n } else if (type === general.MY_MEDIA) {\r\n this.onChangePage(event, pageSize)\r\n } else {\r\n return this.onChangePageOrg(event, pageSizeOrg)\r\n }\r\n }\r\n\r\n getCurrent = type => {\r\n const { page, pagePublic, pageOrg } = this.state\r\n if (type === general.PUBLIC_MEDIA) {\r\n return pagePublic\r\n } else if (type === general.MY_MEDIA) {\r\n return page\r\n } else {\r\n return pageOrg\r\n }\r\n }\r\n\r\n getPageSize = type => {\r\n const { pageSizePublic, pageSize, pageSizeOrg } = this.state\r\n if (type === general.PUBLIC_MEDIA) {\r\n return pageSizePublic\r\n } else if (type === general.MY_MEDIA) {\r\n return pageSize\r\n } else {\r\n return pageSizeOrg\r\n }\r\n }\r\n\r\n handleOrgLibraryUpdate = async item => {\r\n const { updateOrgLib, user } = this.props\r\n const action = general.ORG\r\n const query = {\r\n action,\r\n organization_id: user.info.active_organization_id,\r\n library: [item.id]\r\n }\r\n\r\n await updateOrgLib(query)\r\n await this.getLibrary()\r\n this.setState(\r\n {\r\n isFetching: false,\r\n orgMediaLoaded: false\r\n },\r\n () => {\r\n notification(action)\r\n }\r\n )\r\n }\r\n\r\n renderFile = (mediaList, type) => {\r\n const { tab } = this.state\r\n const { t, isPageBuilder } = this.props\r\n const media = this.getMediaListing(mediaList)\r\n const currentPage = this.getCurrent(type)\r\n const currentPageSize = this.getPageSize(type)\r\n return (\r\n \r\n
\r\n \r\n this.onSearch(e.target.value, type)}\r\n />\r\n
\r\n {/* \r\n \r\n
*/}\r\n \r\n {t('media:no_media')}\r\n
\r\n ) : (\r\n \r\n {media &&\r\n media.map((item, ind) => (\r\n
\r\n \r\n \r\n this.handleUpdateLibraryStatus(item, thumb, ind)\r\n }\r\n ctrlHandleCheckCard={(val, thumb) =>\r\n this.handleCheckCard(val, thumb, ind)\r\n }\r\n ctrlOrgLibrary={(item, thumb) =>\r\n this.handleOrgLibraryUpdate(item, thumb, ind)\r\n }\r\n ctrlCheckPdfCard={this.handleMultipleFileDetails}\r\n isPageBuilder={isPageBuilder}\r\n allowMultiple={true}\r\n />\r\n
\r\n ))}\r\n \r\n
\r\n \r\n this.handlePagination(type, event)}\r\n />\r\n
\r\n \r\n {\r\n this.addSelected()\r\n }}\r\n style={{ margin: '5px' }}\r\n >\r\n {t('labels:done')}\r\n \r\n {\r\n this.clearSelected()\r\n }}\r\n style={{ margin: '5px' }}\r\n >\r\n {t('buttons:clear')}\r\n \r\n
\r\n \r\n {t('media:no_media')}\r\n
\r\n ) : (\r\n \r\n {media &&\r\n media.map((item, ind) => (\r\n
\r\n \r\n \r\n this.handleUpdateLibraryStatus(item, thumb, ind)\r\n }\r\n ctrlHandleCheckCard={(val, thumb) =>\r\n this.handleCheckCard(val, thumb, ind)\r\n }\r\n ctrlOrgLibrary={(item, thumb) =>\r\n this.handleOrgLibraryUpdate(item, thumb, ind)\r\n }\r\n isPageBuilder={isPageBuilder}\r\n // isSuperAdmin={isSuperAdmin}\r\n />\r\n
\r\n ))}\r\n \r\n this.handlePagination(type, event)}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n this.hangeFilterChange(value, tab)\r\n }\r\n />\r\n
\r\n {t('media:media_type')}
\r\n\r\n {tab === general.MY_MEDIA && isSuperAdmin && (\r\n this.updateMediaStatus(general.PUBLIC)}\r\n >\r\n {t('buttons:make_public')}\r\n \r\n )}\r\n {(isSuperAdmin || isAdmin) && (\r\n this.updateMediaStatus(general.PRIVATE)}\r\n >\r\n {t('buttons:make_private')}\r\n \r\n )}\r\n {tab === general.MY_MEDIA && (\r\n this.setState({ showDeleteModal: true })}\r\n >\r\n {t('buttons:delete')}\r\n \r\n )}\r\n {(isSuperAdmin || isAdmin) &&\r\n (tab === general.MY_MEDIA || tab === general.PUBLIC) && (\r\n this.updateMediaStatus(general.ORG)}\r\n >\r\n {t('buttons:make_org')}\r\n \r\n )}\r\n
\r\n \r\n {/* */}\r\n this.onFilter(item.value, tab)}\r\n label={t('labels:sort_by')}\r\n // bordered\r\n />\r\n
\r\n \r\n )\r\n }\r\n\r\n getSelectedMedia = () => {\r\n const { data } = this.state\r\n let library = []\r\n if (data && !_.isEmpty(data.rows)) {\r\n library = _.map(\r\n _.filter(data.rows, item => {\r\n return item.is_checked\r\n }),\r\n 'filename'\r\n )\r\n }\r\n return library\r\n }\r\n\r\n render() {\r\n const {\r\n modal,\r\n files,\r\n isFetching,\r\n data,\r\n publicLibrary,\r\n orgLibrary,\r\n fileNotCompatible,\r\n showStatusModal,\r\n mediaNoTopics,\r\n loadingModalButtion,\r\n isRemovingMedia,\r\n showDeleteModal,\r\n mazescenes,\r\n isFetchingMazeScenes,\r\n privateFiles,\r\n publicFiles,\r\n orgFiles\r\n } = this.state\r\n const {\r\n t,\r\n topics,\r\n library,\r\n isSendMail,\r\n isMazeCreate,\r\n imageDrop,\r\n droppedImage,\r\n handleUploadImage,\r\n handleClosePopup,\r\n file,\r\n isMazeBuilder = false,\r\n isGame = false\r\n } = this.props\r\n const { uploadProgress, uploadFetching } = library\r\n const { TabPane } = Tabs\r\n const selectedMedia = this.getSelectedMedia()\r\n\r\n return (\r\n \r\n
\r\n \r\n {t('title')}
\r\n {t('subtitle')}
\r\n \r\n
\r\n \r\n {droppedImage && (\r\n \r\n {/* {uploadProgress.length === 0 && ( */}\r\n
\r\n {/* )} */}\r\n \r\n \r\n {({ isDragActive }) => (\r\n \r\n
\r\n )}\r\n \r\n \r\n 
\r\n
\r\n {t('media:drop_files')}
\r\n{t('media:or')}
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n {t('media:import_file')}
\r\n\r\n \r\n {({ isDragActive }) => (\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n {t('media:upload_file')} {t('drag_drop')}\r\n
\r\n\r\n {fileNotCompatible && (\r\n
\r\n \r\n \r\n {t('buttons:cancel')}\r\n \r\n
\r\n )}\r\n\r\n {uploadProgress.length > 0 && (\r\n \r\n \r\n
\r\n\r\n \r\n {t('errors:upload_error')}\r\n
\r\n \r\n {uploadProgress.map((item, ind) => (\r\n
\r\n )}\r\n \r\n
\r\n ))}\r\n \r\n {getFileType(files[ind] && files[ind].type) ===\r\n 'image' ? (\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n {getFileType(files[ind] && files[ind].type)}\r\n \r\n \r\n {getFileExtension(\r\n files[ind] && files[ind].type\r\n )}\r\n \r\n \r\n {bytesToSize(files[ind] && files[ind].size)}\r\n \r\n
\r\n \r\n \r\n this.handleCancelUpload(item)\r\n }\r\n ctrlHandleRemove={() =>\r\n this.handleRemoveMedia(item.id, ind)\r\n }\r\n />\r\n
\r\n \r\n
\r\n\r\n {item.status !== general.CANCELED && (\r\n \r\n {this.checkedCompletUpload(item) && (\r\n \r\n {bytesToSize(item.loaded)} {t('of')}{' '}\r\n {bytesToSize(item.total)}\r\n \r\n )}\r\n {!this.checkedCompletUpload(item) && (\r\n \r\n {files[ind] && files[ind].removed\r\n ? t('general:removed')\r\n : t('general:completed')}\r\n \r\n )}\r\n
\r\n )}\r\n\r\n {item.status === general.CANCELED && (\r\n \r\n \r\n {t('general:canceled')}\r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n {t('buttons:close')}\r\n \r\n
\r\n \r\n \r\n {showStatusModal && (\r\n {t('media:delete_message')}
\r\n\r\n
\r\n ))}\r\n \r\n \r\n )}\r\n \r\n {index + 1}. {item}\r\n
\r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Stream\r\n","import Stream from './Stream'\r\n\r\nexport default Stream\r\n","import React, { Component, Fragment } from 'react'\r\nimport { Audio, Stream } from './components'\r\nimport { builder } from '../../../../constants'\r\nimport './Preview.scss'\r\nimport { pdfReader, pptImage, textIcon } from '../../internal/Gallery/images'\r\n\r\nconst { types } = builder\r\nconst ImagePreview = React.forwardRef((props, ref) => {\r\n const {\r\n library: { link }\r\n } = props\r\n\r\n return (\r\n \r\n
\r\n\r\n {stream_type === types.ASSESSMENT &&\r\n \r\n
\r\n }\r\n\r\n {/* {\r\n params.chat &&\r\n \r\n {duration > 0 &&\r\n
\r\n \r\n
\r\n }\r\n \r\n
\r\n }\r\n\r\n {activePoint.data.emotions[4]}
\r\n {activePoint.data.emotions[3]}
\r\n {activePoint.data.emotions[2]}
\r\n {activePoint.data.emotions[1]}
\r\n {activePoint.data.emotions[0]}
\r\n \r\n \r\n {[...Array(pointsCount).keys()].map((point, index) => {\r\n const isPoint = emotionsData.find(point => point.time === index * 5)\r\n return (\r\n {\r\n this.setState({ activePoint: isPoint ? { x: e.clientX, y: e.clientY, data: isPoint } : null })\r\n }}\r\n onMouseLeave={() => this.setState({ activePoint: null })}\r\n style={{ left: `${100 / pointsCount * index}%` }}\r\n />\r\n )\r\n })}\r\n
\r\n \r\n
\r\n } */}\r\n\r\n \r\n { isFetching\r\n ?
\r\n \r\n
)\r\n }\r\n \r\n
\r\n \r\n
\r\n { message.user.username }
\r\n { message.content }
\r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nclass Preview extends Component {\r\n constructor() {\r\n super()\r\n this.state = { text: '' }\r\n }\r\n\r\n componentDidMount() {\r\n const { library } = this.props\r\n if (library.media_format === types.TEXT && library.link) {\r\n this.fetchTextFile(library.link)\r\n }\r\n }\r\n\r\n fetchTextFile = transcribedLink => {\r\n fetch(transcribedLink)\r\n .then(response => {\r\n response.text().then(text => {\r\n this.setState({ text: text })\r\n })\r\n })\r\n .catch(err => {\r\n this.setState({ text: 'Text preview is not available.' })\r\n })\r\n }\r\n\r\n checkIsPPT = (fileMimeType = '') =>\r\n fileMimeType.includes('powerpoint') || fileMimeType.includes('presentation')\r\n\r\n checkIsDocx = (fileMimeType = '') =>\r\n fileMimeType.includes(\r\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'\r\n )\r\n\r\n render() {\r\n const { library } = this.props\r\n return (\r\n \r\n {imageTypes.some(item => item === library.media_format) && (\r\n \r\n \r\n )}\r\n {/* {library.media_format === types.PDF && (\r\n \r\n {\r\n \r\n \r\n }\r\n \r\n )} */}\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default React.forwardRef((props, ref) => (\r\n \r\n \r\n
\r\n )}\r\n {library.media_format === types.TEXT && (\r\n {this.state.text}
\r\n \r\n
\r\n )\r\n }\r\n return (\r\n \r\n {isFetching ? (\r\n
\r\n \r\n \r\n
\r\n \r\n {enableDownload && (\r\n \r\n (this.slider = slider)}\r\n lazyLoad\r\n >\r\n {libraries.map((library, index) => (\r\n this.changeMedia('next')}\r\n >\r\n
\r\n \r\n {isDownloading ? (\r\n \r\n \r\n )}\r\n
\r\n )}\r\n {enableDownload && (\r\n \r\n {isRemovingMedia ? (\r\n \r\n \r\n )}\r\n
\r\n \r\n )}\r\n \r\n this.changeMedia('previous')}\r\n >\r\n
\r\n \r\n \r\n {libraries.map((library, index) => (\r\n this.changeIndex(index)}\r\n >\r\n {(library.media_format === types.IMAGE ||\r\n library.media_format === types.ARIMAGE ||\r\n library.media_format === types.ICON ||\r\n library.media_format === types.LOGO ||\r\n library.media_format === types.CERTIFICATE ||\r\n library.media_format === types.BADGE ||\r\n library.media_format === 'GAME') && (\r\n })
\r\n )}\r\n {(library.media_format === types.VIDEO ||\r\n library.media_format === types.VIDEO_ANTMEDIA ||\r\n library.media_format === types.VIDEO_STREAM) && (\r\n 
\r\n )}\r\n {library.media_format === types.APPLICATION && (\r\n
\r\n ))}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {filename || title}\r\n \r\n this.copyToClipboard(link)}\r\n />\r\n \r\n
\r\n \r\n {media_format}\r\n \r\n {this.checkIsDocx(media_mime_type)\r\n ? 'docx'\r\n : this.checkIsPPT(media_mime_type)\r\n ? 'ppt'\r\n : this.checkIsPDF(media_mime_type)\r\n ? 'pdf'\r\n : media_mime_type && media_mime_type.split('/')[1]}{' '}\r\n \r\n
\r\n {bytesToSize(file_size)}
\r\n \r\n this.editTags('description', true)}\r\n >\r\n {description ? (\r\n
\r\n )}\r\n {t('labels:description')}
\r\n\r\n {!disable && (\r\n \r\n this.editTags('description', false)}\r\n />\r\n
\r\n )}\r\n {disable && (\r\n {description}
\r\n ) : (\r\n \r\n {t('placeholders:no_description')}\r\n
\r\n )}\r\n \r\n
\r\n \r\n this.editTags('topics', true)}\r\n >\r\n {isEditTopic && (\r\n \r\n {topicsArr.length > 0 ? (\r\n topicsArr.map((item, index) => (\r\n {item}\r\n ))\r\n ) : (\r\n
\r\n )}\r\n {t('labels:topic')}
\r\n \r\n this.editTags('topics', false)}\r\n />\r\n {isTopicsMax && (\r\n
\r\n )}\r\n {!isEditTopic && (\r\n \r\n {t('errors:topics_max')}\r\n
\r\n )}\r\n \r\n {t('placeholders:no_topics')}\r\n
\r\n )}\r\n \r\n {t('labels:uploaded_by')}\r\n {userName}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n )}\r\n {isDownload && (\r\n {t('placeholders:keyword')}
\r\n this.editTags('keywords', true)}>\r\n {isEditKeyword && (\r\n \r\n {keywordsArr.length > 0 ? (\r\n keywordsArr.map((item, index) => (\r\n {item}\r\n ))\r\n ) : (\r\n
\r\n )}\r\n \r\n this.editTags('keywords', false)}\r\n style={{ width: '100%' }}\r\n mode=\"tags\"\r\n autoFocus\r\n className=\"custom-select-tag\"\r\n dropdownClassName=\"disable-select-dropdown\"\r\n placeholder={t('placeholders:no_keyword')}\r\n onChange={this.handleChangeKeyword}\r\n defaultValue={keywordsArr}\r\n tokenSeparators={[',', '.', ';']}\r\n />\r\n
\r\n )}\r\n {!isEditKeyword && (\r\n \r\n {t('placeholders:no_keyword')}\r\n
\r\n )}\r\n \r\n {user.info.organization &&\r\n user.info.organization.enable_ai &&\r\n is_ai_enabled && (\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(withTranslation('media')(Gallery))\r\n","import { connect } from 'react-redux'\r\nimport { bindActionCreators } from 'redux'\r\nimport actions from '../../../../store/actions'\r\nimport Gallery from './Gallery'\r\n\r\nconst mapStateToProps = state => ({\r\n library: state.library,\r\n topics: state.topics,\r\n user: state.user\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => bindActionCreators({\r\n getLibraryList: actions.library.getLibraryList,\r\n getPublicList: actions.library.getPublicList,\r\n getOrgList: actions.library.getOrgList,\r\n download: actions.library.download,\r\n upload: actions.library.upload,\r\n clearUploadList: actions.library.clearUploadList,\r\n updateTopicList: actions.topics.updateTopicList\r\n}, dispatch)\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(Gallery)\r\n","const langOptions = [\r\n { name: 'Abkhaz', code: 'ab' },\r\n { name: 'Acehnese', code: 'ace' },\r\n { name: 'Acholi', code: 'ach' },\r\n { name: 'Afrikaans', code: 'af' },\r\n { name: 'Albanian', code: 'sq' },\r\n { name: 'Alur', code: 'alz' },\r\n { name: 'Amharic', code: 'am' },\r\n { name: 'Arabic', code: 'ar' },\r\n { name: 'Armenian', code: 'hy' },\r\n { name: 'Assamese', code: 'as' },\r\n { name: 'Awadhi', code: 'awa' },\r\n { name: 'Aymara', code: 'ay' },\r\n { name: 'Azerbaijani', code: 'az' },\r\n { name: 'Balinese', code: 'ban' },\r\n { name: 'Bambara', code: 'bm' },\r\n { name: 'Bashkir', code: 'ba' },\r\n { name: 'Basque', code: 'eu' },\r\n { name: 'Batak Karo', code: 'btx' },\r\n { name: 'Batak Simalungun', code: 'bts' },\r\n { name: 'Batak Toba', code: 'bbc' },\r\n { name: 'Belarusian', code: 'be' },\r\n { name: 'Bemba', code: 'bem' },\r\n { name: 'Bengali', code: 'bn' },\r\n { name: 'Betawi', code: 'bew' },\r\n { name: 'Bhojpuri', code: 'bho' },\r\n { name: 'Bikol', code: 'bik' },\r\n { name: 'Bosnian', code: 'bs' },\r\n { name: 'Breton', code: 'br' },\r\n { name: 'Bulgarian', code: 'bg' },\r\n { name: 'Buryat', code: 'bua' },\r\n { name: 'Cantonese', code: 'yue' },\r\n { name: 'Catalan', code: 'ca' },\r\n { name: 'Cebuano', code: 'ceb' },\r\n { name: 'Chichewa', code: 'ny' },\r\n { name: 'Chinese (Simplified)', code: 'zh-CN' },\r\n { name: 'Chinese (Traditional)', code: 'zh-TW' },\r\n { name: 'Chuvash', code: 'cv' },\r\n { name: 'Corsican', code: 'co' },\r\n { name: 'Crimean Tatar', code: 'crh' },\r\n { name: 'Croatian', code: 'hr' },\r\n { name: 'Czech', code: 'cs' },\r\n { name: 'Danish', code: 'da' },\r\n { name: 'Dinka', code: 'din' },\r\n { name: 'Divehi', code: 'dv' },\r\n { name: 'Dogri', code: 'doi' },\r\n { name: 'Dombe', code: 'dov' },\r\n { name: 'Dutch', code: 'nl' },\r\n { name: 'Dzongkha', code: 'dz' },\r\n { name: 'English', code: 'en' },\r\n { name: 'Esperanto', code: 'eo' },\r\n { name: 'Estonian', code: 'et' },\r\n { name: 'Ewe', code: 'ee' },\r\n { name: 'Fijian', code: 'fj' },\r\n { name: 'Filipino', code: 'fil' },\r\n { name: 'Finnish', code: 'fi' },\r\n { name: 'French', code: 'fr' },\r\n { name: 'French (French)', code: 'fr-FR' },\r\n { name: 'French (Canadian)', code: 'fr-CA' },\r\n { name: 'Frisian', code: 'fy' },\r\n { name: 'Fulfulde', code: 'ff' },\r\n { name: 'Ga', code: 'gaa' },\r\n { name: 'Galician', code: 'gl' },\r\n { name: 'Ganda', code: 'lg' },\r\n { name: 'Georgian', code: 'ka' },\r\n { name: 'German', code: 'de' },\r\n { name: 'Greek', code: 'el' },\r\n { name: 'Guarani', code: 'gn' },\r\n { name: 'Gujarati', code: 'gu' },\r\n { name: 'Haitian Creole', code: 'ht' },\r\n { name: 'Hakha Chin', code: 'cnh' },\r\n { name: 'Hausa', code: 'ha' },\r\n { name: 'Hawaiian', code: 'haw' },\r\n { name: 'Hebrew', code: 'he' },\r\n { name: 'Hiligaynon', code: 'hil' },\r\n { name: 'Hindi', code: 'hi' },\r\n { name: 'Hmong', code: 'hmn' },\r\n { name: 'Hungarian', code: 'hu' },\r\n { name: 'Hunsrik', code: 'hrx' },\r\n { name: 'Icelandic', code: 'is' },\r\n { name: 'Igbo', code: 'ig' },\r\n { name: 'Iloko', code: 'ilo' },\r\n { name: 'Indonesian', code: 'id' },\r\n { name: 'Irish', code: 'ga' },\r\n { name: 'Italian', code: 'it' },\r\n { name: 'Japanese', code: 'ja' },\r\n { name: 'Javanese', code: 'jv' },\r\n { name: 'Kannada', code: 'kn' },\r\n { name: 'Kapampangan', code: 'pam' },\r\n { name: 'Kazakh', code: 'kk' },\r\n { name: 'Khmer', code: 'km' },\r\n { name: 'Kiga', code: 'cgg' },\r\n { name: 'Kinyarwanda', code: 'rw' },\r\n { name: 'Kituba', code: 'ktu' },\r\n { name: 'Konkani', code: 'gom' },\r\n { name: 'Korean', code: 'ko' },\r\n { name: 'Krio', code: 'kri' },\r\n { name: 'Kurdish (Kurmanji)', code: 'ku' },\r\n { name: 'Kurdish (Sorani)', code: 'ckb' },\r\n { name: 'Kyrgyz', code: 'ky' },\r\n { name: 'Lao', code: 'lo' },\r\n { name: 'Latgalian', code: 'ltg' },\r\n { name: 'Latin', code: 'la' },\r\n { name: 'Latvian', code: 'lv' },\r\n { name: 'Ligurian', code: 'lij' },\r\n { name: 'Limburgan', code: 'li' },\r\n { name: 'Lingala', code: 'ln' },\r\n { name: 'Lithuanian', code: 'lt' },\r\n { name: 'Lombard', code: 'lmo' },\r\n { name: 'Luo', code: 'luo' },\r\n { name: 'Luxembourgish', code: 'lb' },\r\n { name: 'Macedonian', code: 'mk' },\r\n { name: 'Maithili', code: 'mai' },\r\n { name: 'Makassar', code: 'mak' },\r\n { name: 'Malagasy', code: 'mg' },\r\n { name: 'Malay', code: 'ms' },\r\n { name: 'Malay (Jawi)', code: 'ms-Arab' },\r\n { name: 'Malayalam', code: 'ml' },\r\n { name: 'Maltese', code: 'mt' },\r\n { name: 'Maori', code: 'mi' },\r\n { name: 'Marathi', code: 'mr' },\r\n { name: 'Meadow Mari', code: 'chm' },\r\n { name: 'Meiteilon', code: 'mni-Mtei' },\r\n { name: 'Minang', code: 'min' },\r\n { name: 'Mizo', code: 'lus' },\r\n { name: 'Mongolian', code: 'mn' },\r\n { name: 'Myanmar', code: 'my' },\r\n { name: 'Ndebele', code: 'nr' },\r\n { name: 'Nepalbhasa', code: 'new' },\r\n { name: 'Nepali', code: 'ne' },\r\n { name: 'Northern Sotho', code: 'nso' },\r\n { name: 'Norwegian', code: 'no' },\r\n { name: 'Nuer', code: 'nus' },\r\n { name: 'Occitan', code: 'oc' },\r\n { name: 'Odia', code: 'or' },\r\n { name: 'Oromo', code: 'om' },\r\n { name: 'Pangasinan', code: 'pag' },\r\n { name: 'Papiamento', code: 'pap' },\r\n { name: 'Pashto', code: 'ps' },\r\n { name: 'Persian', code: 'fa' },\r\n { name: 'Polish', code: 'pl' },\r\n { name: 'Portuguese', code: 'pt' },\r\n { name: 'Portuguese (Portugal)', code: 'pt-PT' },\r\n { name: 'Portuguese (Brazil)', code: 'pt-BR' },\r\n { name: 'Punjabi', code: 'pa' },\r\n { name: 'Punjabi (Shahmukhi)', code: 'pa-Arab' },\r\n { name: 'Quechua', code: 'qu' },\r\n { name: 'Romani', code: 'rom' },\r\n { name: 'Romanian', code: 'ro' },\r\n { name: 'Rundi', code: 'rn' },\r\n { name: 'Russian', code: 'ru' },\r\n { name: 'Samoan', code: 'sm' },\r\n { name: 'Sango', code: 'sg' },\r\n { name: 'Sanskrit', code: 'sa' },\r\n { name: 'Scots Gaelic', code: 'gd' },\r\n { name: 'Serbian', code: 'sr' },\r\n { name: 'Sesotho', code: 'st' },\r\n { name: 'Seychellois Creole', code: 'crs' },\r\n { name: 'Shan', code: 'shn' },\r\n { name: 'Shona', code: 'sn' },\r\n { name: 'Sicilian', code: 'scn' },\r\n { name: 'Silesian', code: 'szl' },\r\n { name: 'Sindhi', code: 'sd' },\r\n { name: 'Sinhala', code: 'si' },\r\n { name: 'Slovak', code: 'sk' },\r\n { name: 'Slovenian', code: 'sl' },\r\n { name: 'Somali', code: 'so' },\r\n { name: 'Spanish', code: 'es' },\r\n { name: 'Sundanese', code: 'su' },\r\n { name: 'Swahili', code: 'sw' },\r\n { name: 'Swati', code: 'ss' },\r\n { name: 'Swedish', code: 'sv' },\r\n { name: 'Tajik', code: 'tg' },\r\n { name: 'Tamil', code: 'ta' },\r\n { name: 'Tatar', code: 'tt' },\r\n { name: 'Telugu', code: 'te' },\r\n { name: 'Tetum', code: 'tet' },\r\n { name: 'Thai', code: 'th' },\r\n { name: 'Tigrinya', code: 'ti' },\r\n { name: 'Tsonga', code: 'ts' },\r\n { name: 'Tswana', code: 'tn' },\r\n { name: 'Turkish', code: 'tr' },\r\n { name: 'Turkmen', code: 'tk' },\r\n { name: 'Twi', code: 'ak' },\r\n { name: 'Ukrainian', code: 'uk' },\r\n { name: 'Urdu', code: 'ur' },\r\n { name: 'Uyghur', code: 'ug' },\r\n { name: 'Uzbek', code: 'uz' },\r\n { name: 'Vietnamese', code: 'vi' },\r\n { name: 'Welsh', code: 'cy' },\r\n { name: 'Xhosa', code: 'xh' },\r\n { name: 'Yiddish', code: 'yi' },\r\n { name: 'Yoruba', code: 'yo' },\r\n { name: 'Yucatec Maya', code: 'yua' },\r\n { name: 'Zulu', code: 'zu' }\r\n];\r\nexport default langOptions","import React, { Component, createRef } from 'react'\r\nimport _ from 'lodash'\r\nimport {\r\n Modal,\r\n Button,\r\n Input,\r\n Checkbox,\r\n Spin,\r\n Row,\r\n Col,\r\n Form,\r\n Icon,\r\n Progress,\r\n Select,\r\n message\r\n} from 'antd'\r\nimport { withTranslation, Trans } from 'react-i18next'\r\nimport api from '../../services/api'\r\nimport { config, general } from '../../constants'\r\nimport { ModalStyles } from './CloneModal.ctrl'\r\nimport CourseDropzone from '../../views/Courses/Create/internal/CourseDropzone'\r\nimport { EditImageContainer } from '../../components/TextOnImage'\r\nimport { PopupMedia } from '../../views/Library/internal'\r\nimport { Editor } from '../../components/ImageEditor'\r\nimport './CloneModal.scss'\r\nimport langOptions from './langOptions'\r\nconst { Option } = Select\r\n\r\nconst antIcon = \r\n this.downloadImage(size.type)}\r\n >\r\n {size.title}\r\n
\r\n ))}\r\n Download
\r\n {downloadSize.map(size => (\r\n \r\n
\r\n )}\r\n {(data || isCloning) && (\r\n \r\n {((!isMaze && data) || (isMaze && !isCloning)) && (\r\n
\r\n )}\r\n\r\n {image && (\r\n \r\n {t('labels:Title')}\r\n \r\n {getFieldDecorator('title', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('errors:title_course'),\r\n max: 100\r\n },\r\n {\r\n pattern: '.{3,}',\r\n message: t('errors:min_3char')\r\n }\r\n ],\r\n initialValue: text\r\n })(\r\n {\r\n this.handleTitle(e.target.value)\r\n }}\r\n />\r\n )}\r\n \r\n
\r\n )}\r\n {isTranslaton && !isCloning && (\r\n \r\n {t('v4:translateSelectLang')}\r\n \r\n {getFieldDecorator('lang', {\r\n initialValue: lang\r\n })(\r\n this.handleTranslateLanguage(e)}\r\n style={{ width: '100%' }}\r\n >\r\n {langOptions.map(item => (\r\n \r\n ))}\r\n \r\n )}\r\n \r\n
\r\n )}\r\n\r\n {isMaze && !isCloning && (\r\n \r\n \r\n \r\n
\r\n
\r\n )}\r\n\r\n {!isMaze && data && (\r\n \r\n
\r\n )}\r\n\r\n {isCloning && (\r\n \r\n this.handleCheckAll()}\r\n checked={isCheckAll}\r\n >\r\n {t('labels:Lessons')} ({data.totalLesson}):\r\n \r\n {this.getDisable(true) && (\r\n
\r\n\r\n \r\n
\r\n )}\r\n \r\n {data.courseLessons.map((lesson, index) => {\r\n return (\r\n {\r\n this.handleCheckOne(lesson)\r\n }}\r\n className=\"lesson-box\"\r\n key={index}\r\n checked={lesson.isChecked}\r\n >\r\n {t('labels:clone_of')} - {lesson.title}\r\n \r\n )\r\n })}\r\n
\r\n \r\n {/* \r\n {this.subTitleString(courseTitle)}\r\n \r\n ) : isMaze ? (\r\n \r\n {this.subTitleString(text)}\r\n \r\n ) : (\r\n \r\n {this.subTitleString(courseTitle)}\r\n \r\n )}\r\n \r\n )}\r\n
\r\n )}\r\n\r\n \r\n \r\n
\r\n \r\n this.handleCancel()}\r\n >\r\n {t('buttons:cancel')}\r\n \r\n this.handleClone()}\r\n >\r\n {t(`${this.getCloneBtn()}`)}\r\n \r\n
\r\n \r\n
\r\n {selectedItem && (\r\n \r\n \r\n {general.CANCEL}\r\n \r\n this.handleFileInsert(selectedItem)}\r\n >\r\n {general.INSERT}\r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Form.create()(withTranslation()(CloneModal))\r\n","/*\r\n * @Description: In User Settings Edit\r\n * @Author: your name\r\n * @Date: 2019-08-20 11:09:06\r\n * @LastEditTime: 2019-08-29 19:22:05\r\n * @LastEditors: Please set LastEditors\r\n */\r\nimport { connect } from 'react-redux'\r\nimport { bindActionCreators } from 'redux'\r\nimport CloneModal from './CloningModal'\r\nimport actions from '../../store/actions'\r\n\r\nconst mapStateToProps = state => ({\r\n user: state.user,\r\n courseCloningProgress: state.courses.courseCloningProgress\r\n})\r\n\r\nconst mapDispatchToProps = dispatch =>\r\n bindActionCreators(\r\n {\r\n initCloneSocket: actions.courses.initCloneSocket,\r\n showPopover: actions.courses.showPopover,\r\n clearCourseCloning: actions.courses.clearCourseCloning,\r\n upload: actions.library.upload\r\n },\r\n dispatch\r\n )\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CloneModal)\r\n","import styled, { css } from 'styled-components'\r\nimport ReactSVG from 'react-svg'\r\n\r\nimport { styleguide } from '../../constants'\r\n\r\nconst { colors } = styleguide\r\n\r\nexport const DropdownToggle = styled.a`\r\n height: 100%;\r\n line-height: 1;\r\n position: relative;\r\n padding-right: 2.5rem;\r\n text-decoration: none;\r\n\r\n ${props =>\r\n props.active &&\r\n css`\r\n ${IconArrow} {\r\n transform: translateY(-50%) rotate(0);\r\n }\r\n `}\r\n`\r\n\r\nexport const IconArrow = styled(ReactSVG)`\r\n position: absolute;\r\n // top: 50%;\r\n right: 1rem\r\n transform: translateY(-50%) rotate(180deg);\r\n transition: all 0.3s;\r\n\r\n svg {\r\n width: 1.2rem;\r\n height: 1.2rem;\r\n\r\n path {\r\n fill: ${colors.blakGray};\r\n stroke: ${colors.blakGray};\r\n }\r\n }\r\n`\r\n","import Dropdown from './Dropdown'\r\n\r\nexport default Dropdown\r\n","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Dropdown as AntDropdown } from 'antd'\r\nimport { DropdownToggle, IconArrow } from './styled'\r\nimport IconChevron from './images/chevron.svg'\r\n\r\nclass Dropdown extends Component {\r\n state = {\r\n isActive: false\r\n }\r\n\r\n handleClick = () => {\r\n const { isActive } = this.state\r\n\r\n document[!isActive ? 'addEventListener' : 'removeEventListener']('click', this.handleOutsideClick, false)\r\n\r\n this.setState({\r\n isActive: !isActive\r\n })\r\n }\r\n\r\n componentWillUnmount () {\r\n document.removeEventListener('click', this.handleOutsideClick, false)\r\n }\r\n\r\n handleOutsideClick = (e) => {\r\n if (this.node.contains(e.target)) return\r\n\r\n this.handleClick()\r\n }\r\n\r\n render () {\r\n const props = this.props\r\n const { children, list } = this.props\r\n const { isActive } = this.state\r\n\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default withTranslation('card')(ECard)\r\n","import Card from './Card'\r\n\r\nexport default Card\r\n","import styled from 'styled-components'\r\n\r\nimport { Menu } from 'antd'\r\n\r\nimport { styleguide } from '../../constants'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst FilterContainer = styled.div`\r\n display: flex;\r\n overflow-x: auto;\r\n align-items: center;\r\n justify-content: space-between;\r\n // margin-bottom: 2rem;\r\n width: 100%;\r\n padding: 1rem 0rem;\r\n\r\n ${props =>\r\n props.bordered &&\r\n `\r\n border: .1rem solid #ddd;\r\n padding: 1.5rem 2rem;\r\n `}\r\n\r\n ${props =>\r\n props.noIndent &&\r\n `\r\n margin-bottom: 0;\r\n `}\r\n`\r\n\r\nFilterContainer.Wrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n`\r\n\r\nFilterContainer.Label = styled.span`\r\n display: inline-block;\r\n font-size: 1.1rem;\r\n margin: 0 1.2rem;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n`\r\n\r\nFilterContainer.Menu = styled(Menu)`\r\n && {\r\n min-width: 18.2rem;\r\n border: 0.1rem solid ${colors.darkGreyThree};\r\n border-radius: 0;\r\n box-shadow: none;\r\n padding: 0;\r\n top: 1.5rem;\r\n right: -2.1rem;\r\n }\r\n`\r\n\r\nFilterContainer.Item = styled(Menu.Item)`\r\n && {\r\n padding: 0;\r\n\r\n &:not(:last-child) {\r\n border-bottom: 0.1rem solid ${colors.darkGreyThree};\r\n }\r\n }\r\n`\r\n\r\nFilterContainer.Link = styled.a`\r\n && {\r\n width: 100%;\r\n font-weight: 600;\r\n display: inline-block;\r\n padding: 1.1rem 1.3rem;\r\n margin: 0;\r\n\r\n &:hover {\r\n background-color: ${colors.darkGreyThree};\r\n }\r\n }\r\n`\r\n\r\nFilterContainer.Selected = styled.span`\r\n min-width: 12.2rem;\r\n display: block;\r\n color: ${colors.textDark};\r\n font-weight: 600;\r\n`\r\n\r\nexport { FilterContainer }\r\n","import React, { useState, useEffect } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Dropdown } from '../../components'\r\nimport { FilterContainer } from './styled'\r\nimport { useTranslation } from 'react-i18next'\r\nimport { useCallback } from 'react'\r\nimport { Input } from 'antd'\r\nimport { debounce } from 'lodash'\r\nimport './style.scss'\r\nconst { Search } = Input\r\n\r\nconst Filter = ({\r\n data,\r\n isWorkshop,\r\n children,\r\n defaultValue,\r\n label,\r\n noIndent,\r\n propKey = 'text',\r\n style,\r\n callback,\r\n onChangeSearch\r\n}) => {\r\n const { t } = useTranslation()\r\n const [selectedItem, setSelectedItem] = useState(defaultValue)\r\n\r\n useEffect(() => {\r\n setSelectedItem(defaultValue)\r\n }, [defaultValue])\r\n\r\n const handleChangeItem = item => {\r\n setSelectedItem(item[propKey])\r\n if (callback) {\r\n callback(item)\r\n }\r\n }\r\n const debouncedSearch = useCallback(\r\n debounce(value => onChangeSearch(value), 300),\r\n []\r\n )\r\n return (\r\n \r\n {t('labels:processing')} \r\n )}\r\n {(mode === 'past' || mode === 'webinar') &&\r\n data.video_links.length === 0 && (\r\n \r\n {data.is_recording ? t('v4:unavailable') : 'Not Recorded'}\r\n \r\n )}\r\n {data.start_date_time && (\r\n \r\n \r\n {moment(data.start_date_time).format('DD')}\r\n \r\n \r\n {moment(data.start_date_time).format('MMM')}\r\n \r\n \r\n )}\r\n\r\n {type === 'enroll' && lessonProgressPercent === 100 && (\r\n
\r\n\r\n \r\n {t('general:completed')}\r\n
\r\n )}\r\n {type === 'enroll' && data.type === 'Live Event' && (\r\n \r\n {t('general:enrolled')}\r\n
\r\n )}\r\n \r\n \r\n {t('general:by')}{' '}\r\n {data.creator} \r\n \r\n )}\r\n\r\n \r\n \r\n {\r\n handleLessonLoading(data.id, true)\r\n await bindLesson(data.id)\r\n }}\r\n >\r\n {t(getBtnLabel())}\r\n \r\n \r\n\r\n {false && (\r\n \r\n {t('general:details')}\r\n \r\n )}\r\n \r\n \r\n )}\r\n
\r\n \r\n {showTag && (\r\n \r\n {getTag()} \r\n {(data.type === 'Live Event' ||\r\n data.type === 'Live Assessment') &&\r\n data.soon && (\r\n {t('general:soon')} \r\n )}\r\n \r\n )}\r\n\r\n \r\n \r\n {`${data.lesson_completed_count} / ${data.lessons_count} ${t(\r\n 'completed'\r\n )}`}\r\n \r\n\r\n \r\n \r\n )}\r\n {(data.start_date_time || data.start_date || data.created_at) && (\r\n \r\n \r\n \r\n \r\n )}\r\n {data.type === 'Live Event' &&\r\n data.start_date_time &&\r\n data.event_type !== 'discussion_room' && (\r\n \r\n \r\n \r\n \r\n )}\r\n {data.type === 'Live Event' &&\r\n data.start_date_time &&\r\n data.event_type === 'discussion_room' && (\r\n \r\n {/* {data.discussion_room_type !== 'custom' ? ( */}\r\n \r\n \r\n \r\n \r\n {/* ) : (\r\n \r\n )} */}\r\n \r\n )}\r\n {type !== 'lesson' && (\r\n \r\n \r\n {t('general:by')}{' '}\r\n \r\n \r\n {data.host ? data.host.username : data.organiser}\r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n {type === 'lesson' && (\r\n <>\r\n {data.creator && (\r\n \r\n
\r\n\r\n {type === 'Course' && (\r\n {data.title || data.filename}
\r\n \r\n \r\n {isWorkshop && (\r\n debouncedSearch(e.target.value)}\r\n className=\"workshop-search\"\r\n style={{ width: 220 }}\r\n />\r\n )}\r\n {label} \r\n \r\n {data\r\n .filter(item => item[propKey] !== selectedItem)\r\n .map((item, index) => (\r\n \r\n handleChangeItem(item)}\r\n >\r\n {t(item[propKey])}\r\n \r\n \r\n ))}\r\n \r\n }\r\n >\r\n \r\n {t(selectedItem)}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n const messageToShow = useMemo(() => {\r\n if (!isPast) return messages\r\n\r\n const pastMessages = messages.filter(\r\n message => currentPlayTime >= message.time || isEnd\r\n )\r\n return pastMessages\r\n }, [isPast, messages, currentPlayTime, isEnd])\r\n return (\r\n {t('labels:live_chat')}
\r\n {t('labels:chat_available')}
\r\n \r\n
\r\n \r\n \r\n
\r\n ))}\r\n \r\n {messageToShow.map((message, index) => (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n setTextChat(e.target.value)}\r\n onKeyDown={e => {\r\n sendMessage(e)\r\n }}\r\n />\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nconst ChatProfileLogo = ({ message }) => {\r\n const photo = message.avatar ? message.avatar : UserImage\r\n return (\r\n \r\n 
\r\n
\r\n )\r\n}\r\n\r\nconst ChatMessageInfo = ({ user, message }) => {\r\n const isOwnChat = ({ info }, { user_name }) => user_name !== info.username\r\n const handleTimeStamp = ({ timeStamp }) => {\r\n if (timeStamp) {\r\n const newTimeStamp = moment(timeStamp).format()\r\n return moment(newTimeStamp).format('DD MMM YYYY HH:mm')\r\n }\r\n return ''\r\n }\r\n\r\n function urlify(text) {\r\n const urlRegex = /(https?:\\/\\/[^\\s]+)/g\r\n return text.split(urlRegex).map(part => {\r\n if (part.match(urlRegex)) {\r\n return (\r\n \r\n {part}\r\n \r\n )\r\n }\r\n return part\r\n })\r\n }\r\n\r\n if (isOwnChat(user, message)) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n return {urlify(message.content)}\r\n}\r\n\r\nexport default withTranslation()(Chat)\r\n","import { connect } from 'react-redux'\r\nimport { bindActionCreators } from 'redux'\r\nimport Chat from './Chat'\r\n\r\nconst mapStateToProps = state => ({\r\n user: state.user\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => bindActionCreators({}, dispatch)\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(Chat)\r\n","import styled from 'styled-components'\r\n\r\nimport { styleguide } from '../../constants'\r\n\r\nconst { colors, typography } = styleguide\r\n\r\nexport const PollBox = styled.div`\r\n border: 0.1rem solid ${colors.darkGreyThree};\r\n padding-bottom: 1rem;\r\n margin-top: 2rem;\r\n`\r\n\r\nPollBox.Title = styled.div`\r\n padding: 1.5rem;\r\n font-size: ${typography.h2FontSize};\r\n font-weight: ${typography.h3FontWeight};\r\n border-bottom: 0.1rem solid ${colors.darkGreyThree};\r\n`\r\n\r\nPollBox.Content = styled.div`\r\n min-height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n padding: 1.5rem; \r\n`\r\n\r\nPollBox.Question = styled.div`\r\n font-weight: ${typography.h2FontWeight}\r\n`\r\n\r\nPollBox.QuestionsBox = styled.div`\r\n margin-top: 1rem;\r\n`\r\n\r\nPollBox.SingleVariant = styled.div`\r\n font-size: 1.1rem;\r\n font-style: italic;\r\n font-weight: 300;\r\n border: 0.1rem solid ${colors.darkGreyThree};\r\n border-radius: 2rem;\r\n padding: 1.5rem;\r\n margin-bottom: 1rem;\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n &:after {\r\n display: block;\r\n content: '';\r\n background-color: ${colors.darkGreyThree};\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n z-index: -1;\r\n width: ${props => props.percent}%;\r\n }\r\n`\r\n","import React, { Component } from 'react'\r\n\r\nimport { PollBox } from './styled'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nclass Poll extends Component {\r\n render () {\r\n const { data, t } = this.props\r\n\r\n return (\r\n \r\n \r\n {handleTimeStamp(message)}\r\n \r\n
\r\n \r\n \r\n {message.user_name} :\r\n \r\n \r\n {' '}\r\n {urlify(message.content)}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {t('general:back_to')} {page}\r\n
\r\n \r\n handleChange(e, helpCenterItems)}\r\n />\r\n
\r\n {t('sidebar.title')}
\r\n\r\n {!info.id ? (\r\n
\r\n \r\n {node.type === types.IMAGE &&\r\n node.display &&\r\n node.display === 'LOGO' && (\r\n
\r\n )}\r\n\r\n \r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n
\r\n \r\n {isEditor ? (\r\n
\r\n \r\n \r\n \r\n {node.type === types.TEXT && (\r\n
\r\n ) : (\r\n \r\n \r\n {translationKeys.map(item => (\r\n \r\n ))}\r\n \r\n
\r\n \r\n \r\n {showValue && (\r\n \r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n {showValue && (\r\n
\r\n {!isHideSaveButton && (\r\n \r\n * {t('v2:please_copy_desired_content')}\r\n
\r\n )}\r\n \r\n\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n \r\n {t('buttons:save')}\r\n \r\n
\r\n \r\n handleViewDetails(id, data)}\r\n >\r\n \r\n \r\n {is_synthesized_audio && (\r\n \r\n \r\n
\r\n \r\n \r\n {type === general.MY_MEDIA_LIBRARY && (\r\n \r\n \r\n \r\n )}\r\n \r\n handleViewDetails(id, data)}\r\n >\r\n {title || filename}\r\n
\r\n {moment(created_at).format('DD MMM YYYY')}\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {t('v3:audio_popup_content')}
\r\n\r\n
\r\n )}\r\n \r\n \r\n )}\r\n\r\n {params.chat && (\r\n \r\n
\r\n\r\n {params.stream_type === 'OTHER' && (\r\n \r\n \r\n {duration > 0 && (\r\n \r\n \r\n
\r\n )}\r\n\r\n {/* \r\n {activePoint.data.emotions[4]}\r\n
\r\n \r\n {activePoint.data.emotions[3]}\r\n
\r\n \r\n {activePoint.data.emotions[2]}\r\n
\r\n \r\n {activePoint.data.emotions[1]}\r\n
\r\n \r\n {activePoint.data.emotions[0]}\r\n
\r\n \r\n \r\n {[...Array(pointsCount).keys()].map((point, index) => {\r\n const isPoint =\r\n emotionsData &&\r\n emotionsData.messages.find(\r\n point => point.time === index * 5\r\n )\r\n return (\r\n {\r\n console.log(\r\n e.clientY,\r\n this.graph.getBoundingClientRect().y\r\n )\r\n this.setState({\r\n activePoint: isPoint\r\n ? { x: e.clientX, y: e.clientY, data: isPoint }\r\n : null\r\n })\r\n }}\r\n onMouseLeave={() =>\r\n this.setState({ activePoint: null })\r\n }\r\n style={{ left: `${(100 / pointsCount) * index}%` }}\r\n />\r\n )\r\n })}\r\n
*/}\r\n \r\n \r\n {isFetching ? (\r\n \r\n
\r\n ))\r\n )}\r\n \r\n \r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Stream\r\n","import classNames from 'classnames'\r\n\r\nconst checkResize = (isText, isView) => {\r\n if (isView) {\r\n return false\r\n } else if (isText) {\r\n return true\r\n } else {\r\n return false\r\n }\r\n}\r\n\r\nconst customContentClass = (isText = false, isView = false) =>\r\n classNames({\r\n el__preview: true,\r\n el__triangle: checkResize(isText, isView)\r\n })\r\n\r\nexport { customContentClass }\r\n","import React, { Component } from 'react'\r\nimport { Icon } from 'antd'\r\nimport { Audio, Stream } from './components'\r\nimport { builder } from '../../../constants'\r\nimport './Preview.scss'\r\nimport { useTranslation } from 'react-i18next'\r\nimport { customContentClass } from './Preview.ctrl'\r\n// import annotationIcon from '../../../assets/annotation_icon.png'\r\n// import { marginLeft } from 'styled-system'\r\n\r\nconst { types, icons } = builder\r\n\r\nconst Placeholder = ({ type }) => {\r\n const { t } = useTranslation()\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {message.user.username}\r\n
\r\n \r\n {message.content}\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nconst TextPreview = props => {\r\n const {\r\n node: { params },\r\n scale = 1\r\n } = props\r\n\r\n const processContent = (htmlContent, scale) => {\r\n if (!htmlContent) return ''\r\n\r\n // First apply scaling to any existing font-size styles\r\n let processedContent = htmlContent.replace(\r\n /font-size:\\s*(\\d+(\\.\\d+)?)px/gi,\r\n (match, size) => {\r\n const scaledSize = parseFloat(size) * scale\r\n return `font-size: ${scaledSize}px`\r\n }\r\n )\r\n\r\n // Next, add a default font-size to text elements that don't have one\r\n if (scale !== 1) {\r\n // Only apply this when scaling is needed (not at normal size)\r\n // Parse the HTML using DOMParser\r\n const parser = new DOMParser()\r\n const doc = parser.parseFromString(processedContent, 'text/html')\r\n\r\n // Handle text nodes and elements without font-size\r\n const addDefaultFontSize = element => {\r\n // Skip elements that already have font-size style\r\n if (element.style && element.style.fontSize) {\r\n return\r\n }\r\n\r\n // Check if any parent already has font-size defined\r\n let parent = element.parentElement\r\n let hasFontSize = false\r\n while (parent && parent.tagName !== 'BODY') {\r\n if (parent.style && parent.style.fontSize) {\r\n hasFontSize = true\r\n break\r\n }\r\n parent = parent.parentElement\r\n }\r\n\r\n // If no parent has font-size, add the default scaled font-size\r\n if (\r\n !hasFontSize &&\r\n element.nodeType === 1 &&\r\n !['SCRIPT', 'STYLE', 'BR'].includes(element.tagName)\r\n ) {\r\n // Don't add font-size to elements that shouldn't have it\r\n if (element.textContent.trim().length > 0) {\r\n const defaultSize = 14 * scale\r\n element.style.fontSize = `${defaultSize}px`\r\n }\r\n }\r\n\r\n // Process child nodes recursively\r\n Array.from(element.childNodes).forEach(child => {\r\n if (child.nodeType === 1) {\r\n // Element node\r\n addDefaultFontSize(child)\r\n }\r\n })\r\n }\r\n\r\n // Process the root element's children\r\n Array.from(doc.body.children).forEach(child => {\r\n addDefaultFontSize(child)\r\n })\r\n\r\n // If there's any text directly in the body, wrap it in a paragraph with the default font size\r\n const textNodes = Array.from(doc.body.childNodes).filter(\r\n node => node.nodeType === 3 && node.textContent.trim().length > 0\r\n )\r\n\r\n textNodes.forEach(textNode => {\r\n const p = doc.createElement('p')\r\n p.style.fontSize = `${14 * scale}px`\r\n p.textContent = textNode.textContent\r\n textNode.parentNode.replaceChild(p, textNode)\r\n })\r\n\r\n // Get the processed HTML\r\n processedContent = doc.body.innerHTML\r\n }\r\n\r\n // Handle Markdown-style formatting\r\n return processedContent\r\n .replace(/\\*\\*(.*?)\\*\\*/g, '$1') // **bold** → \r\n .replace(/\\*(.*?)\\*/g, '$1') // *italic* → \r\n }\r\n\r\n const processedContent = processContent(params.content, scale)\r\n return (\r\n \r\n
\r\n \r\n {types[type] &&\r\n types[type].toLowerCase() +\r\n ` ${t('general:component').toLowerCase()}`}\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nconst ImagePreview = props => {\r\n const {\r\n node: { params }\r\n } = props\r\n return (\r\n \r\n
\r\n );\r\n } else {\r\n // For non-Vimeo videos (assuming direct video URLs)\r\n return (\r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nconst AnnotationPreview = props => {\r\n const {\r\n node: { params }\r\n } = props\r\n const { t } = useTranslation()\r\n return (\r\n \r\n {/* {t('labels:id_annotation')}: {params.content} */}\r\n {params.content}\r\n
\r\n )\r\n}\r\n// const AnnotationPreview = props => {\r\n// const {\r\n// node: {\r\n// params: { height, width }\r\n// }\r\n// } = props\r\n// return (\r\n// \r\n//
\r\n// )\r\n// }\r\n\r\nconst BackgroundPreview = props => {\r\n const {\r\n node: { params }\r\n } = props\r\n\r\n const backgroundOpacity = params.opacity || 1\r\n\r\n if (props.node.type === types.BACKGROUND_COLOR) {\r\n return (\r\n \r\n {params.isSimulation ? 'SimulationID' : t('labels:id_quiz')}:{' '}\r\n {params.content}\r\n
\r\n )\r\n}\r\n\r\nconst ScenarioPreview = props => {\r\n const {\r\n node: { params }\r\n } = props\r\n\r\n return (\r\n \r\n ScenarioID: {params.content}\r\n
\r\n )\r\n}\r\n\r\nexport default class Preview extends Component {\r\n render() {\r\n const {\r\n node,\r\n node: { params },\r\n isView,\r\n elementHeight,\r\n elementWidth,\r\n scale,\r\n autoPlay = false\r\n } = this.props\r\n\r\n const isLogoElement =\r\n node.type === types.IMAGE && node.display && node.display === 'LOGO'\r\n\r\n if (\r\n params &&\r\n !params.content &&\r\n node.type !== types.BACKGROUND_IMAGE &&\r\n node.type !== types.BACKGROUND_COLOR &&\r\n node.type !== types.BACKGROUND_IMAGE_AUTO\r\n ) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n if (isLogoElement) {\r\n return null\r\n }\r\n\r\n console.log('node', node)\r\n\r\n return (\r\n \r\n {node.type === types.TEXT &&
\r\n )\r\n }\r\n}\r\n","import Preview from './Preview'\r\n\r\nexport default Preview\r\n","import React, { Component, Fragment } from 'react'\r\nimport { api } from '../../../services'\r\nimport './Manager.scss'\r\nimport { Modal, Spin, Icon, Pagination, Input } from 'antd'\r\nimport className from 'classnames'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { general } from '../../../constants'\r\n\r\nconst icon = {\r\n AUDIO: 'sound',\r\n VIDEO: 'play-circle',\r\n IMAGE: 'picture'\r\n}\r\n\r\nconst Item = props => {\r\n const { item, type, handleSelect } = props\r\n\r\n if (type === general.AUDIO || type === general.VIDEO) {\r\n return (\r\n handleSelect(e, item)}>\r\n
\r\n )\r\n } else if (type === general.IMAGE) {\r\n return (\r\n \r\n
\r\n {/*\r\n * Library pagination\r\n */}\r\n\r\n \r\n \r\n {data.rows.map(item => (\r\n
\r\n \r\n {\r\n this.onHandleSearch(e)\r\n }}\r\n />\r\n
\r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n \r\n
\r\n {!isUploading && (\r\n \r\n
\r\n \r\n {node.params.content ? (\r\n \r\n
\r\n \r\n )}\r\n \r\n {isUploading ? (\r\n \r\n {t('general:uploading')} {this.getPercent(node)} %\r\n
\r\n ) : (\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n {node.params.content ? (\r\n
\r\n )}\r\n \r\n {isManager && (\r\n \r\n this.clearContent(e)}\r\n >\r\n {t('buttons:clear')}\r\n \r\n
\r\n ) : (\r\n \r\n this.openManager()}\r\n >\r\n {t('buttons:from_library')}\r\n \r\n
\r\n )}\r\n \r\n closeEditor()}\r\n >\r\n {t('buttons:save')}\r\n \r\n
\r\n \r\n
\r\n {!isUploading && (\r\n \r\n
\r\n \r\n {content ? (\r\n \r\n
\r\n \r\n )}\r\n \r\n {isUploading ? (\r\n \r\n {t('general:uploading')} {this.getPercent(node)} %\r\n
\r\n ) : (\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n {node.params.content ? (\r\n
\r\n )}\r\n \r\n {isManager && (\r\n \r\n this.clearContent(e)}\r\n >\r\n {t('buttons:clear')}\r\n \r\n
\r\n ) : (\r\n \r\n this.openManager()}\r\n >\r\n {t('buttons:from_library')}\r\n \r\n
\r\n )}\r\n \r\n closeEditor()}\r\n >\r\n {t('buttons:save')}\r\n \r\n
\r\n \r\n
\r\n {!isUploading && (\r\n \r\n
\r\n \r\n {node.params.content ? (\r\n \r\n ) : (\r\n \r\n
\r\n \r\n )}\r\n \r\n {isUploading ? (\r\n \r\n {t('general:uploading')} {this.getPercent(node)} %\r\n
\r\n ) : (\r\n \r\n
\r\n \r\n {t('buttons:upload_video')}\r\n
\r\n )}\r\n \r\n {node.params.content ? (\r\n
\r\n )}\r\n \r\n {isManager && (\r\n \r\n this.clearContent(e)}\r\n >\r\n {t('buttons:clear')}\r\n \r\n
\r\n ) : (\r\n \r\n this.openManager()}\r\n >\r\n {t('buttons:from_library')}\r\n \r\n
\r\n )}\r\n \r\n closeEditor()}\r\n >\r\n {t('buttons:save')}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {t('media:create_annotation')}\r\n
\r\n \r\n * {t('media:popup_over_lesson_text')}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {Object.keys(questionTypes).map(key => (\r\n setSelectedQuizType(key)}\r\n >\r\n {questionTypes[key]}\r\n
\r\n ))}\r\n \r\n )}\r\n \r\n \r\n {/* number of questions */}\r\n {getFieldDecorator('number_of_questions', {\r\n rules: [\r\n {\r\n validator: validateNumberOfQuestions\r\n }\r\n ]\r\n })()}\r\n \r\n
\r\n\r\n {/* \r\n Number of Questions to be generated
\r\n\r\n
\r\n \r\n
\r\n\r\n Select Quiz Page
\r\nWhich part of the lesson do you want to add this quiz?
\r\n\r\n setSelectedPosition(postions.end)}\r\n >\r\n 
\r\n
\r\n \r\n setSelectedPosition(postions.start)}\r\n >\r\n 
\r\n
\r\n At the Beginning of Lesson
\r\nEnd of Lesson
\r\nCurrently Active Page
\r\n \r\n \r\n\r\n\r\n \r\n Finish\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n {t('v4:create_quiz')}
\r\n\r\n \r\n
\r\n \r\n
\r\n {t('v4:quiz_setting')}
\r\n\r\n {t('v4:please_fill_quiz_setting')}\r\n
\r\n )}\r\n \r\n
\r\n\r\n {editQuestion && (\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n {t('v4:question_list')}
\r\n \r\n Total {quizQuestions && quizQuestions.length}{' '}\r\n {quizQuestions && quizQuestions.length > 1\r\n ? t('v3:items')\r\n : t('v2:item')}\r\n \r\n\r\n {quizQuestions &&\r\n quizQuestions.map((question, index) => (\r\n \r\n {index + 1}.\r\n \r\n onEditQuestion(question.uid)} />\r\n \r\n\r\n onRemoveQuestion(question.uid)}\r\n >\r\n \r\n \r\n \r\n
\r\n ))}\r\n \r\n {question.title}\r\n
\r\n\r\n\r\n \r\n {t('v4:add_quiz_to_page')}\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n\r\n {showQuizPositionModal && (\r\n \r\n
\r\n {t('v4:form_create_question')}
\r\n\r\n
\r\n \r\n {\r\n e.stopPropagation()\r\n this.setVisible('showMediaLibrary', true)\r\n }}\r\n >\r\n {t('buttons:select_media_library')}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n )}\r\n\r\n {viewType === viewTypes.general && \r\n General Quiz\r\n
\r\n \r\n Simulation Quiz\r\n
\r\n \r\n \r\n \r\n {({ zoomIn, zoomOut, resetTransform, setTransform }) => (\r\n
\r\n )}\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default ImagePreview\r\n","import React, { useState, useEffect } from 'react'\r\nimport { Modal, Button, Slider, Divider, Icon, Card } from 'antd'\r\nimport { ChromePicker } from 'react-color'\r\nimport ImagePreview from '../../../ImagePreview'\r\n\r\nconst BackgroundImageSettings = ({\r\n visible,\r\n onCancel,\r\n onRemove,\r\n onChangeImage,\r\n backgroundElement,\r\n handleParams,\r\n pageStructure\r\n}) => {\r\n const [opacity, setOpacity] = useState(1)\r\n\r\n useEffect(() => {\r\n if (backgroundElement && backgroundElement.params) {\r\n setOpacity(Number(backgroundElement.params.opacity) || 1)\r\n }\r\n }, [backgroundElement])\r\n\r\n const handleOpacityChange = value => {\r\n setOpacity(value)\r\n }\r\n\r\n const applyOpacity = () => {\r\n handleParams(backgroundElement.uid, {\r\n ...backgroundElement.params,\r\n opacity: opacity\r\n })\r\n\r\n onCancel()\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\r\n rotateClockwise()\r\n }}\r\n >\r\n {\r\n rotateCounterclockwise()\r\n }}\r\n >\r\n {\r\n resetRotation()\r\n resetTransform()\r\n }}\r\n >\r\n Reset\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n Current Image\r\n \r\n \r\n Change Image\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n ) : (\r\n \r\n {color}\r\n
\r\n \r\n \r\n )\r\n\r\n return (\r\n \r\n {(selectedColor || tempColor) && (\r\n
\r\n\r\n \r\n \r\n Color Preview\r\n \r\n
\r\n )}\r\n\r\n \r\n {selectedColor && (\r\n
\r\n \r\n \r\n Choose New Color\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default BackgroundColorSettings\r\n","// Toolbar.js\r\nimport React, { useState, useRef, useEffect } from 'react'\r\nimport { Icon, Switch, Tooltip, message, Popover, Modal, Button } from 'antd'\r\nimport { builder } from '../../../constants'\r\nimport nanoid from 'nanoid'\r\nimport './Toolbar.scss'\r\nimport className from 'classnames'\r\nimport { withTranslation } from 'react-i18next'\r\nimport customImages from './Images/index'\r\nimport ImagePreview from '../../ImagePreview'\r\nimport BackgroundImageSettings from './components/BackgroundImageSettings'\r\nimport BackgroundColorSettings from './components/BackgroundColorSettings'\r\n\r\nconst { toolbar, types } = builder\r\n\r\nconst Toolbar = ({\r\n handleChangeBackground,\r\n handleData,\r\n handleParams,\r\n pageStructure = [],\r\n mode,\r\n t,\r\n isLandScape,\r\n enableGrid,\r\n currentPage,\r\n pages = [],\r\n pages_landscape = [],\r\n handleLessonInput,\r\n onAutoBackgroundChange,\r\n lessonBckgrndImg,\r\n lessonBckgrndImgId,\r\n handleShowAnnotationImageModal,\r\n handleShowAnnotationTextModal,\r\n handleShowAnnotationVideoModal,\r\n handleShowAnnotationAudioModal,\r\n handleShowAnnotationModal,\r\n handleShowAudioModal,\r\n handleShowImageModal,\r\n handleShowVideoModal,\r\n handleShowTextModal,\r\n handleShowQuizModal,\r\n handleShowGrid,\r\n handleCoursePreview\r\n}) => {\r\n const [showOptions, setShowOptions] = useState(false)\r\n const [showImageModal, setShowImageModal] = useState(false)\r\n const [showColorModal, setShowColorModal] = useState(false)\r\n const [selectedColor, setSelectedColor] = useState(null)\r\n const [tempColor, setTempColor] = useState('#ffffff')\r\n const [isApplyingAutoBackground, setIsApplyingAutoBackground] = useState(\r\n false\r\n )\r\n\r\n useEffect(() => {\r\n const backgroundColor = pageStructure.find(\r\n node =>\r\n node.type === types.BACKGROUND_COLOR && node.params.content !== null\r\n )\r\n\r\n setSelectedColor(backgroundColor ? backgroundColor.params.content : null)\r\n setTempColor(backgroundColor ? backgroundColor.params.content : null)\r\n }, [pageStructure])\r\n\r\n const handleColorConfirm = () => {\r\n if (handleChangeBackground) {\r\n handleChangeBackground('color', tempColor)\r\n setSelectedColor(tempColor)\r\n }\r\n setShowColorModal(false)\r\n }\r\n\r\n const removeBackgroundElement = type => {\r\n if (handleData) {\r\n const data = pageStructure.filter(node => node.type !== type)\r\n handleData(data)\r\n }\r\n setShowImageModal(false)\r\n setShowColorModal(false)\r\n }\r\n\r\n const OptionsContent = () => (\r\n \r\n {\r\n const hasBackgroundImage = pageStructure.find(\r\n node => node.type === types.BACKGROUND_IMAGE\r\n )\r\n if (hasBackgroundImage) {\r\n setShowImageModal(true)\r\n } else {\r\n handleChangeBackground('image')\r\n }\r\n setShowOptions(false)\r\n }}\r\n >\r\n
\r\n \r\n {backgroundElement.type === types.BACKGROUND_IMAGE ? (\r\n
\r\n ) : (\r\n \r\n {getToolbarImage(types.BACKGROUND_IMAGE)}\r\n
\r\n )}\r\n {t('v4:background')}
\r\n \r\n )\r\n\r\n const addElement = type => {\r\n if (handleData) {\r\n const width = type === types.TEXT ? 450 : 400\r\n\r\n const data = {\r\n uid: nanoid(8),\r\n type: type,\r\n params: {\r\n content: '',\r\n width: width,\r\n height: 200,\r\n x: 0,\r\n y: 0\r\n }\r\n }\r\n\r\n handleData(data, true)\r\n }\r\n }\r\n\r\n const handleToolClick = ({ type }) => {\r\n const pageHasScenario = pageStructure.some(\r\n node => node.type === types.SCENARIO\r\n )\r\n\r\n if (pageHasScenario) {\r\n message.error(\r\n 'You cannot add other element in a scenario page. Please try other pages or remove the scenario from the page first.',\r\n 10\r\n )\r\n return\r\n }\r\n\r\n if (mode === types.ANNOTATION) {\r\n if (type === types.TEXT) {\r\n handleShowAnnotationTextModal()\r\n } else if (type === types.IMAGE) {\r\n handleShowAnnotationImageModal()\r\n } else if (type === types.VIDEO) {\r\n handleShowAnnotationVideoModal()\r\n } else if (type === types.AUDIO) {\r\n handleShowAnnotationAudioModal()\r\n }\r\n } else {\r\n if (type === types.AUDIO) {\r\n handleShowAudioModal()\r\n } else if (type === types.IMAGE) {\r\n handleShowImageModal(false)\r\n } else if (type === types.AR_IMAGE) {\r\n handleShowImageModal(true)\r\n } else if (type === types.VIDEO) {\r\n handleShowVideoModal()\r\n } else if (type === types.TEXT) {\r\n handleShowTextModal()\r\n } else if (type === types.ANNOTATION) {\r\n handleShowAnnotationModal()\r\n } else if (type === types.QUIZ) {\r\n handleShowQuizModal()\r\n } else if (type === types.GRID) {\r\n handleShowGrid()\r\n } else {\r\n addElement(type)\r\n }\r\n }\r\n }\r\n\r\n const onChangeAutoBgChange = () => {\r\n // Set flag to show the switch is turned on\r\n setIsApplyingAutoBackground(true)\r\n\r\n // Use setTimeout to add a small delay before applying the background change\r\n // This allows the switch to visually show the \"on\" state before disappearing\r\n setTimeout(() => {\r\n const pagesTemp = [...pages]\r\n const pagesLandscapeTemp = [...pages_landscape]\r\n const pageStructureTemp = [...pageStructure]\r\n\r\n // When enabling auto background, remove any existing background elements\r\n const filteredPageStructure = pageStructureTemp.filter(\r\n item =>\r\n item.type !== types.BACKGROUND_IMAGE &&\r\n item.type !== types.BACKGROUND_COLOR\r\n )\r\n\r\n // Create new background element with lesson background image\r\n if (lessonBckgrndImg !== null) {\r\n const newBackgroundData = {\r\n uid: nanoid(8),\r\n type: types.BACKGROUND_IMAGE,\r\n params: {\r\n content: lessonBckgrndImg,\r\n content_id: lessonBckgrndImgId,\r\n opacity: 1\r\n }\r\n }\r\n\r\n filteredPageStructure.push(newBackgroundData)\r\n\r\n // Update pages with the new structure\r\n pagesTemp[currentPage - 1].data = filteredPageStructure\r\n pagesLandscapeTemp[currentPage - 1].data = filteredPageStructure\r\n\r\n handleLessonInput('pages', pagesTemp)\r\n handleLessonInput('pages_landscape', pagesLandscapeTemp)\r\n\r\n // Call the callback to notify about background change\r\n if (onAutoBackgroundChange) {\r\n onAutoBackgroundChange()\r\n }\r\n }\r\n\r\n // Reset the flag\r\n setIsApplyingAutoBackground(false)\r\n }, 500) // 500ms delay for smooth transition\r\n }\r\n\r\n const getToolbarImage = type => {\r\n switch (type) {\r\n case types.ANNOTATION:\r\n return \r\n {mode !== types.ANNOTATION && (\r\n
\r\n {(!hasBackgroundElement || isApplyingAutoBackground) && hasAutoBackground && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n )\r\n })}\r\n \r\n - \r\n {items.map((item, index) => {\r\n if (item.type === types.BACKGROUND_IMAGE) {\r\n return (\r\n
- \r\n
\r\n \r\n \r\n )\r\n }\r\n return (\r\n - \r\n {!isLandScape && (\r\n \r\n {getToolbarImage(item.type) ||\r\n
}\r\n {item.name}\r\n
\r\n
\r\n )}\r\n\r\n {t('auto_background')}
\r\n\r\n
\r\n\r\n \r\n {logo ? (\r\n 
\r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n )\r\n}\r\n","import styled from 'styled-components'\r\nimport { NavLink } from 'react-router-dom'\r\nimport { styleguide } from '../../../../constants'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst Item = styled.div``\r\n\r\nItem.Link = styled(NavLink)`\r\n position: relative;\r\n direction: rtl;\r\n display: block;\r\n\r\n &:link,\r\n &:hover,\r\n &:visited {\r\n text-decoration: none;\r\n }\r\n`\r\n\r\nItem.Inner = styled.div`\r\n display: flex;\r\n align-items: center;\r\n`\r\n\r\nItem.Icon = styled.div`\r\n display: flex;\r\n flex-shrink: 0;\r\n align-items: center;\r\n justify-content: center;\r\n width: 7.2rem;\r\n height: 7.2rem;\r\n\r\n & > div,\r\n & > div > div {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n svg,\r\n path {\r\n transition: fill 0.25s;\r\n }\r\n`\r\n\r\nItem.Heading = styled.div`\r\n flex-shrink: 0;\r\n font-weight: 600;\r\n font-size: 1.4rem;\r\n padding: 1rem 1.4rem 1rem 0;\r\n color: ${colors.black};\r\n transition: color 0.25s;\r\n\r\n ${Item.Link}:hover &,\r\n ${Item.Link}.active & {\r\n color: ${colors.blue};\r\n }\r\n`\r\n\r\nexport { Item }\r\n","import React from 'react'\r\nimport { Item } from './styled'\r\n\r\nexport default (props) => {\r\n const { url, exact, heading } = props\r\n const to = url || '/'\r\n\r\n return (\r\n \r\n \r\n 0 ? 'file-uploaded' : ''\r\n }`}\r\n >\r\n {/* {uploadedFiles.length > 0 && (\r\n setShowFileSelectModal(true)}\r\n >\r\n \r\n setShowFileSelectModal(true)}\r\n >\r\n \r\n \r\n setShowMediaLibrary(false)}\r\n footer={null}\r\n width={'80%'}\r\n centered\r\n >\r\n setShowFileSelectModal(false)}\r\n className=\"custom-ant-modal\"\r\n destroyOnClose\r\n width={600}\r\n footer={null}\r\n centered\r\n >\r\n \r\n {({ getRootProps, getInputProps, isDragActive }) => (\r\n \r\n
\r\n )}\r\n \r\n \r\n )}\r\n \r\n \r\n {uploadProgress.length > 0 &&\r\n uploadSuccess.length !== uploadProgress.length &&\r\n uploadProgress.map((item, ind) =>\r\n item.percent < 100 ? (\r\n \r\n
\r\n )} */}\r\n \r\n {uploadedFiles.length > 0 &&\r\n uploadedFiles.map(item => (\r\n
\r\n\r\n {uploadedFiles.length > 0 && (\r\n \r\n
\r\n ))}\r\n \r\n \r\n {item.title}\r\n \r\n
\r\n \r\n window.open(item.link, '_blank').focus()}\r\n >\r\n {t('v3:view')}\r\n \r\n deleteItem(item.id)}\r\n >\r\n \r\n
\r\n {t('v3:attach_file')}
\r\n{t('v3:attach_des')}
\r\n \r\n \r\n \r\n\r\n
\r\n \r\n )}\r\n\r\n {showFileSelectModal && (\r\n \r\n \r\n {t('v4:upload_pdf')}\r\n \r\n {\r\n e.stopPropagation()\r\n setShowMediaLibrary(true)\r\n }}\r\n >\r\n {t('buttons:select_media_library')}\r\n \r\n
\r\n \r\n
\r\n ) : null\r\n )}\r\n \r\n
\r\n\r\n {item.status !== general.CANCELED && (\r\n \r\n
\r\n \r\n {checkedCompletUpload(item) && (\r\n \r\n {bytesToSize(item.loaded)} {t('of')}{' '}\r\n {bytesToSize(item.total)}\r\n \r\n )}\r\n {!checkedCompletUpload(item) && (\r\n \r\n {uploadedFiles[ind] && uploadedFiles[ind].removed\r\n ? t('general:removed')\r\n : t('general:completed')}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n
\r\n \r\n )}\r\n {podcast ? (\r\n \r\n {t('v2:how_rate_this')} {type}?\r\n
\r\n{t('v2:amazing_above_expectations')}
\r\n \r\n\r\n
\r\n ) : (\r\n \r\n
\r\n \r\n {avgRating && avgRating.toFixed(2)}\r\n
\r\n {/* \r\n \r\n Review\r\n \r\n
*/}\r\n \r\n {avgRate && !podcast && (\r\n
\r\n {reviews && reviews.length <= 0 && !isFetching && (\r\n \r\n
\r\n )}\r\n \r\n {reviews &&\r\n reviews.map(item => (\r\n
\r\n \r\n {podcast ? (\r\n \r\n \r\n ) : (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport const ReviewsButtonModal = Form.create()(ReviewsButton)\r\n\r\nexport default ReviewsList\r\n","import styled from 'styled-components'\r\nimport { styleguide } from '../../constants'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst Organization = styled.div`\r\n display: flex;\r\n align-items: center;\r\n padding: 1.6rem;\r\n border: 1px solid ${colors.darkGreyTwo};\r\n transition: border-color 0.2s;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n border-color: rgba(0, 104, 255, 0.5);\r\n }\r\n\r\n ${props =>\r\n props.active &&\r\n `\r\n border-color: ${colors.blue};\r\n\r\n &:hover {\r\n border-color: ${colors.blue};\r\n }\r\n `}\r\n\r\n ${props =>\r\n props.disabled &&\r\n `\r\n pointer-events: none;\r\n opacity: 0.4;\r\n `}\r\n`\r\n\r\nOrganization.Checkbox = styled.div`\r\n margin-right: 1.6rem;\r\n`\r\n\r\nOrganization.Image = styled.img`\r\n display: block;\r\n width: 4rem;\r\n height: 4rem;\r\n margin-right: 1.6rem;\r\n border-radius: 100%;\r\n`\r\n\r\nOrganization.DefaultImage = styled.div`\r\n display: block;\r\n width: 4rem;\r\n height: 4rem;\r\n margin-right: 1.6rem;\r\n border-radius: 100%;\r\n background: #2d6ff2;\r\n font-size: 28px;\r\n color: #fff;\r\n text-align: center;\r\n`\r\n\r\nOrganization.Name = styled.div`\r\n font-weight: 600;\r\n`\r\n\r\nconst Groups = styled.div`\r\n margin-bottom: 3.2rem;\r\n\r\n ${props =>\r\n props.disabled &&\r\n `\r\n pointer-events: none;\r\n opacity: 0.4;\r\n `}\r\n`\r\n\r\nGroups.List = styled.div``\r\n\r\nGroups.Item = styled.div`\r\n border-bottom: 1px solid #f8f8f8;\r\n`\r\n\r\nconst Group = styled.div`\r\n display: flex;\r\n align-items: center;\r\n padding: 1.6rem;\r\n cursor: pointer;\r\n\r\n ${props =>\r\n props.active &&\r\n `\r\n color: ${colors.blue};\r\n\r\n &:hover {\r\n color: ${colors.blue};\r\n }\r\n `}\r\n`\r\n\r\nGroup.Checkbox = styled.div`\r\n margin-right: 1.6rem;\r\n`\r\nGroup.Name = styled.div``\r\n\r\nexport { Organization, Groups, Group }\r\n","import React from 'react'\r\nimport { Checkbox } from 'antd'\r\nimport { isEmpty } from 'lodash'\r\nimport { Field, Row, Col } from '../../styles'\r\nimport {\r\n Organization,\r\n Groups,\r\n Group\r\n} from '../../styles/blocks/orgGroupSelector'\r\nimport { useTranslation } from 'react-i18next'\r\nimport { useSelector } from 'react-redux'\r\n\r\nfunction GroupPicker(props) {\r\n const handleChange = (id, orgId) => {\r\n const { onChange } = props\r\n\r\n if (onChange) {\r\n onChange(id, orgId)\r\n }\r\n }\r\n\r\n const handleSelectAll = organizationId => {\r\n const { onChangeAll } = props\r\n\r\n if (onChangeAll) {\r\n onChangeAll(organizationId)\r\n }\r\n }\r\n\r\n const { selectedGroups = [], activeOrgId } = props\r\n\r\n const orgList = useSelector(state => state.organizations.list.rows)\r\n const user = useSelector(state => state.user)\r\n const { t } = useTranslation()\r\n\r\n const { isSuperAdmin } = user.info\r\n\r\n const list =\r\n !isEmpty(orgList) &&\r\n orgList\r\n .filter(i => isSuperAdmin || (i.role && i.role.name === 'Admin'))\r\n .filter(i => (i.groups || []).length)\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {item.username}: \r\n {moment(item.updated_at).format('LL')}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {item.rating}\r\n \r\n
\r\n {isEdit === null && item.user_id === userId && (\r\n \r\n )}\r\n \r\n
\r\n )}\r\n {isEdit !== null ? (\r\n <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {item.username}: \r\n {moment(item.updated_at).format('DD MM YYYY')}\r\n
\r\n \r\n {isEdit === null && item.user_id === userId && (\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n ) : (\r\n {item.review}
\r\n )}\r\n \r\n {!isAdmin && (\r\n \r\n {label}\r\n \r\n )}\r\n {isAdmin && (\r\n \r\n {label}\r\n \r\n )}\r\n
\r\n {tooltip}
}\r\n \r\n
\r\n \r\n ))}\r\n\r\n {/* {item.heading}
\r\n )}\r\n \r\n
\r\n */}\r\n \r\n )\r\n }\r\n const defaultHeaderColorBg = `linear-gradient(180deg, #698BF2 0%, #5057D5 100%)`\r\n \r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default withRouter(withTranslation('navigation')(Navigation))\r\n","import styled from 'styled-components'\r\nimport ReactSVG from 'react-svg'\r\nimport { Button } from 'antd'\r\nimport { Filter } from '../../../../components'\r\nimport { Head } from '../../../../styles'\r\nimport { styleguide } from '../../../../constants'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst Page = styled.div`\r\n padding: 4rem 3.2rem;\r\n`\r\n\r\nPage.Head = styled(Head)`\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 0;\r\n`\r\n\r\nPage.Head.Button = styled(Button)`\r\n && {\r\n height: 4rem;\r\n padding: 0 2rem;\r\n margin-left: 10px;\r\n }\r\n`\r\n\r\nPage.Filter = styled(Filter)`\r\n && {\r\n justify-content: flex-start;\r\n }\r\n`\r\nconst Row = styled.div`\r\n flex-direction: row;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 0 auto;\r\n`\r\nconst Column = styled.div``\r\n\r\nconst Table = styled.div`\r\n margin: 3rem 0;\r\n`\r\n\r\nTable.Header = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n`\r\n\r\nTable.Head = styled.div`\r\n border-top: 0.1rem solid ${colors.darkGreyThree};\r\n border-bottom: 0.1rem solid ${colors.darkGreyThree};\r\n display: flex;\r\n align-items: center;\r\n padding: 1.3rem 0;\r\n margin-top: 1.5rem;\r\n`\r\n\r\nTable.Head.Column = styled.div`\r\n width: calc(50% - 5rem);\r\n font-weight: 700;\r\n\r\n &:not(:first-child) {\r\n padding-left: 1.5rem;\r\n }\r\n`\r\n\r\nTable.Label = styled.div`\r\n color: ${colors.blue};\r\n font-weight: 600;\r\n white-space: nowrap;\r\n`\r\n\r\nTable.Body = styled.div``\r\n\r\nTable.Column = styled.div`\r\n width: calc(50% - 5rem);\r\n display: flex;\r\n align-items: center;\r\n padding-right: 1.5rem;\r\n\r\n &:not(:first-child) {\r\n border-left: 0.1rem solid ${colors.darkGreyThree};\r\n padding-left: 1.5rem;\r\n }\r\n`\r\n\r\nTable.Item = styled.div`\r\n border-bottom: 0.1rem solid ${colors.darkGreyThree};\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: stretch;\r\n padding: 2rem 0;\r\n`\r\n\r\nTable.Item.Info = styled.div``\r\n\r\nTable.Item.Organisation = styled.span``\r\n\r\nTable.Events = styled.div`\r\n width: 10rem;\r\n border-left: 0.1rem solid ${colors.darkGreyThree};\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0 1.5rem;\r\n`\r\n\r\nTable.EventLink = styled.a`\r\n display: inline-block;\r\n margin: 0 1.2rem;\r\n`\r\n\r\nTable.EventIcon = styled(ReactSVG)`\r\n height: 1.7rem;\r\n\r\n svg {\r\n width: 1.5rem;\r\n\r\n path {\r\n fill: ${colors.blue};\r\n }\r\n }\r\n`\r\n\r\nexport { Page, Column, Table, Row }\r\n","import React, { Component } from 'react'\r\nimport { Button } from 'antd'\r\nimport ReactCrop from 'react-image-crop'\r\nimport { customContentClass } from './cropImage.ctrl'\r\nimport './styles.scss'\r\nimport 'react-image-crop/lib/ReactCrop.scss'\r\n\r\nclass ImageCropContainer extends Component {\r\n state = {\r\n crop: {\r\n unit: '%', // default, can be 'px' or '%'\r\n x: 0,\r\n y: 0,\r\n aspect: this.props.circle ? 1 : this.props.freeCrop ? undefined : 16 / 9,\r\n width: 100,\r\n ...(this.props.freeCrop && { height: '100' })\r\n },\r\n croppedImageUrl: null\r\n }\r\n\r\n onImageLoaded = image => {\r\n this.imageRef = image\r\n }\r\n\r\n onCropComplete = crop => {\r\n this.makeClientCrop(crop)\r\n }\r\n\r\n async makeClientCrop(crop) {\r\n if (this.imageRef && crop.width && crop.height) {\r\n const croppedImageUrl = await this.getCroppedImg(\r\n this.imageRef,\r\n crop,\r\n 'newFile.jpeg'\r\n )\r\n this.setState({ croppedImageUrl })\r\n }\r\n }\r\n\r\n getCroppedImg(image, crop, fileName) {\r\n const canvas = document.createElement('canvas')\r\n const scaleX = image.naturalWidth / image.width\r\n const scaleY = image.naturalHeight / image.height\r\n canvas.width = crop.width\r\n canvas.height = crop.height\r\n const ctx = canvas.getContext('2d')\r\n\r\n ctx.drawImage(\r\n image,\r\n crop.x * scaleX,\r\n crop.y * scaleY,\r\n crop.width * scaleX,\r\n crop.height * scaleY,\r\n 0,\r\n 0,\r\n crop.width,\r\n crop.height\r\n )\r\n // resolve as base64\r\n return new Promise((resolve, reject) => {\r\n this.fileUrl = canvas.toDataURL('image/jpeg')\r\n resolve(this.fileUrl)\r\n })\r\n }\r\n\r\n handleBtnCropAction = async type => {\r\n const { file, handleUploadImage, handleClosePopup } = this.props\r\n\r\n if (type === 'save') {\r\n const data = file\r\n data.croppedImage = this.fileUrl\r\n handleUploadImage(data)\r\n }\r\n handleClosePopup(type)\r\n }\r\n\r\n onCropChange = newCrop => {\r\n this.setState({\r\n crop: newCrop\r\n })\r\n }\r\n\r\n render() {\r\n const { crop } = this.state\r\n const { image, node, circle, t } = this.props\r\n console.log(image, node, circle)\r\n return (\r\n Go To Marketplace
\r\n )}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ImageCropContainer\r\n","import styled, { css } from 'styled-components'\r\nimport { Form, Icon } from 'antd'\r\nimport { Modal } from '../../../../../../components'\r\n\r\nimport { styleguide } from '../../../../../../constants'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst ModalOrganisations = styled(Modal)`\r\n && {\r\n .ant-form-item-label {\r\n label {\r\n font-weight: 600;\r\n font-size: 1.25rem;\r\n text-transform: none;\r\n color: #000000 !important;\r\n\r\n &.ant-form-item-required {\r\n &:before {\r\n display: none;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`\r\n\r\nModalOrganisations.Header = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 16px 0;\r\n margin-bottom: 16px;\r\n`\r\n\r\nModalOrganisations.Title = styled.h3`\r\n font-size: 2rem;\r\n font-weight: bold;\r\n color: ${colors.blue};\r\n`\r\n\r\nModalOrganisations.Close = styled.div`\r\n cursor: pointer;\r\n`\r\n\r\nModalOrganisations.Icon = styled(Icon)`\r\n && {\r\n svg {\r\n align-items: center;\r\n justify-content: center;\r\n width: 12px;\r\n height: 12px;\r\n }\r\n }\r\n`\r\nModalOrganisations.Container = styled.div`\r\n width: 100%;\r\n`\r\n\r\nModalOrganisations.Upload = styled.div`\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n .ant-spin-nested-loading {\r\n width: 100%;\r\n }\r\n`\r\n\r\nModalOrganisations.Dropzone = styled.div`\r\n height: 100%;\r\n width: 100%;\r\n border: 1px dashed ${colors.darkGreyTwo};\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 1rem 0 1.4rem 0;\r\n transition: border-color 0.2s;\r\n\r\n &:hover {\r\n border-color: ${colors.blue};\r\n }\r\n\r\n ${props =>\r\n props.active &&\r\n css`\r\n background: rgba(0, 104, 255, 0.1);\r\n border-color: ${colors.blue};\r\n `}\r\n\r\n ${props =>\r\n props.background &&\r\n css`\r\n height: 15rem;\r\n background: url(${props.background}) no-repeat center;\r\n background-size: cover;\r\n `}\r\n`\r\n\r\nModalOrganisations.Dropzone.Text = styled.div`\r\n font-weight: 700;\r\n font-size: 1.6rem;\r\n`\r\n\r\nModalOrganisations.Dropzone.Button = styled.div`\r\n border-radius: 5rem;\r\n border: 1px solid ${colors.darkGreyThree};\r\n display: flex;\r\n align-items: center;\r\n padding: 0.4rem 2.4rem;\r\n text-decoration: uppercase;\r\n transition: border-color 0.2s, color 0.2s, opacity 0.2s;\r\n\r\n i {\r\n margin-right: 0.8rem;\r\n }\r\n\r\n ${ModalOrganisations.Dropzone}:hover & {\r\n border-color: ${colors.blue};\r\n color: ${colors.blue};\r\n\r\n ${props =>\r\n props.hide &&\r\n css`\r\n background: rgba(0, 104, 255, 0.3);\r\n border-color: ${colors.white};\r\n color: ${colors.white};\r\n opacity: 1;\r\n `}\r\n }\r\n\r\n ${props =>\r\n props.hide &&\r\n css`\r\n opacity: 0;\r\n border-color: ${colors.white};\r\n color: ${colors.white};\r\n `}\r\n`\r\n\r\nModalOrganisations.BtnGroup = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 3rem 0 1.5rem 0;\r\n`\r\n\r\nconst FormItem = styled(Form.Item)`\r\n && {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n &::before,\r\n &::after {\r\n display: none;\r\n }\r\n width: 100%;\r\n margin-bottom: 0.5rem;\r\n\r\n .ant-calendar-picker,\r\n .ant-time-picker {\r\n width: 100%;\r\n }\r\n }\r\n`\r\n\r\nconst LargeFormItem = styled(FormItem)`\r\n && {\r\n align-items: flex-start;\r\n margin-top: 1rem;\r\n .ant-form-item-label {\r\n margin-top: 1rem !important;\r\n }\r\n }\r\n`\r\n\r\nexport { ModalOrganisations, FormItem, LargeFormItem }\r\n","import React, { useState, useEffect } from 'react'\r\nimport moment from 'moment'\r\nimport { Input, DatePicker, Spin, Button, Row, Col, Modal } from 'antd'\r\nimport { api } from '../../../../../../services/index'\r\nimport { FormItem } from './styled'\r\nimport { useTranslation } from 'react-i18next'\r\n\r\nconst ModalOrganisationScheduleTimeForm = props => {\r\n let initInterval = null\r\n const { isSuperAdmin, org, submitted } = props\r\n const [scheduleTime, setScheduleTime] = useState({\r\n schedule: null,\r\n ttl: 0,\r\n infinite: true\r\n })\r\n const [updatingSchedule, setUpdatingSchedule] = useState(false)\r\n const [updatingDuration, setUpdatingDuration] = useState(false)\r\n const [ready, setReady] = useState(false)\r\n const [showButton, setShowButton] = useState(false)\r\n const [visible, setVisible] = useState(false)\r\n const [voiceList, setVoiceList] = useState([])\r\n\r\n const [errors, setErrors] = useState({\r\n schedule: null,\r\n ttl: null\r\n })\r\n const updateData = async data => {\r\n try {\r\n const res = await api.user.updateScheduleTime(data)\r\n setScheduleTime(res.data)\r\n } catch (err) {\r\n console.log(err)\r\n } finally {\r\n setUpdatingSchedule(false)\r\n setUpdatingDuration(false)\r\n setErrors({\r\n schedule: null,\r\n ttl: null\r\n })\r\n }\r\n }\r\n const dateChange = async date => {\r\n if (!date) {\r\n setScheduleTime({\r\n ...scheduleTime,\r\n schedule: null\r\n })\r\n return\r\n }\r\n const unixDate = date.unix()\r\n setScheduleTime({\r\n ...scheduleTime,\r\n schedule: unixDate\r\n })\r\n }\r\n function disabledDate(current) {\r\n return current && current < moment().startOf('day')\r\n }\r\n // function range(start, end) {\r\n // const result = []\r\n // for (let i = start; i < end; i++) {\r\n // result.push(i)\r\n // }\r\n // return result\r\n // }\r\n const durationChange = async e => {\r\n if (parseInt(e.target.value) > 300 || parseInt(e.target.value) < 1) {\r\n setErrors({\r\n ...errors,\r\n ttl: 'Must be between 1 to 300 minutes.'\r\n })\r\n return\r\n } else {\r\n setErrors({\r\n ...errors,\r\n ttl: null\r\n })\r\n }\r\n setScheduleTime({\r\n ...scheduleTime,\r\n ttl: parseInt(e.target.value),\r\n infinite: false\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n const fetch = async () => {\r\n try {\r\n setUpdatingSchedule(true)\r\n setUpdatingDuration(true)\r\n const res = await api.user.getScheduleTime()\r\n setScheduleTime(res.data)\r\n const currentTime = moment()\r\n const scheduleTime = moment.unix(res.data.schedule)\r\n const scheduleTimeAfterDur = moment(\r\n scheduleTime.valueOf() + res.data.ttl * 60000\r\n )\r\n if (\r\n currentTime.isAfter(scheduleTime) &&\r\n currentTime.isBefore(scheduleTimeAfterDur)\r\n ) {\r\n setShowButton(true)\r\n initializeAudioSynthesizer()\r\n initInterval = setInterval(() => {\r\n initializeAudioSynthesizer()\r\n }, 120000)\r\n } else {\r\n setShowButton(false)\r\n }\r\n } catch (err) {\r\n console.log(err)\r\n } finally {\r\n setUpdatingSchedule(false)\r\n setUpdatingDuration(false)\r\n }\r\n }\r\n fetch()\r\n }, [org.id])\r\n\r\n const initializeAudioSynthesizer = () => {\r\n api.audioSynthesizer.getNewAudioAdminRes().then(res => {\r\n if (res.status === 200) {\r\n const responseData = res.data.data\r\n const responseDataArray = Object.entries(responseData).map(item => {\r\n return {\r\n ...item\r\n }\r\n })\r\n setVoiceList(responseDataArray)\r\n setReady(true)\r\n clearInterval(initInterval)\r\n }\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n const handleupdateSchedule = async () => {\r\n const msgReq = 'All fields are required.'\r\n if (!scheduleTime.schedule || !scheduleTime.ttl) {\r\n setErrors({\r\n ...errors,\r\n schedule: msgReq\r\n })\r\n\r\n return\r\n }\r\n setUpdatingSchedule(true)\r\n await updateData(scheduleTime)\r\n }\r\n if (submitted === true) {\r\n handleupdateSchedule()\r\n }\r\n }, [submitted, scheduleTime, updateData, setUpdatingSchedule])\r\n\r\n const showModal = () => {\r\n setVisible(true)\r\n }\r\n\r\n const handleCancel = () => {\r\n setVisible(false)\r\n }\r\n\r\n const { schedule, ttl } = scheduleTime\r\n const { t } = useTranslation()\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {isSuperAdmin && (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {showButton && (\r\n
\r\n )\r\n}\r\n\r\nexport default ModalOrganisationScheduleTimeForm\r\n","import React, { Component, Fragment, useEffect, useMemo, useState } from 'react'\r\nimport Dropzone from 'react-dropzone'\r\nimport _ from 'lodash'\r\nimport ImageCropContainer from '../../../../../../components/ImageCrop'\r\nimport ModalOrganisationScheduleTimeForm from './ScheduleTimeForm'\r\nimport {\r\n Form,\r\n Button,\r\n Input,\r\n Spin,\r\n Icon,\r\n Select,\r\n Row,\r\n Col,\r\n Radio,\r\n Divider,\r\n Card\r\n} from 'antd'\r\n\r\nimport { ModalOrganisations, FormItem, LargeFormItem } from './styled'\r\nimport { withTranslation, Trans } from 'react-i18next'\r\nimport { general, mediaServices } from '../../../../../../constants'\r\nimport { flexDirection } from 'styled-system'\r\nclass ModalAddOrganisations extends Component {\r\n state = {\r\n fetchUpload: false,\r\n logoLink: null,\r\n logoId: null,\r\n submitted: false,\r\n selectedColor: null,\r\n enableWhiteLabel: this.props.org\r\n ? this.props.org.enable_white_label\r\n : false,\r\n isWhiteLabelLogo: false\r\n }\r\n\r\n onCancel = () => {\r\n const { form, onCancel } = this.props\r\n\r\n form.resetFields()\r\n\r\n this.setState({\r\n logoId: null,\r\n logoLink: null\r\n })\r\n\r\n onCancel()\r\n }\r\n\r\n handleDrop = (dropped, isWhiteLabelLogo) => {\r\n if (!dropped) return\r\n\r\n const file = dropped[0]\r\n if (!file) {\r\n return\r\n }\r\n const image = URL.createObjectURL(file)\r\n this.setState({\r\n file,\r\n image,\r\n isWhiteLabelLogo: isWhiteLabelLogo\r\n })\r\n }\r\n\r\n handleUploadImage = data => {\r\n const { upload } = this.props\r\n const { isWhiteLabelLogo } = this.state\r\n const file = data\r\n\r\n const opts = {\r\n isPublic: false\r\n }\r\n if (isWhiteLabelLogo) {\r\n this.setState({ uploadWhiteLabelLogo: true })\r\n } else {\r\n this.setState({ fetchUpload: true })\r\n }\r\n\r\n return upload(file, opts).then(res => {\r\n if (isWhiteLabelLogo) {\r\n this.setState({\r\n isWhiteLabelLogo: false,\r\n uploadWhiteLabelLogo: false,\r\n whiteLabelLogoId: res.id,\r\n whiteLabelLogoLink: res.link\r\n })\r\n } else {\r\n this.setState({\r\n fetchUpload: false,\r\n logoId: res.id,\r\n logoLink: res.link\r\n })\r\n }\r\n })\r\n }\r\n\r\n handleClosePopup = type => {\r\n if (type === general.SAVE) {\r\n this.setState({\r\n image: null,\r\n isAvatarLoading: true\r\n })\r\n } else {\r\n this.setState({\r\n image: null,\r\n file: null,\r\n isAvatarLoading: false\r\n })\r\n }\r\n }\r\n\r\n handleSubmit = e => {\r\n e.preventDefault()\r\n const { form, onSubmit, org, isSuperAdmin } = this.props\r\n const { logoId, whiteLabelLogoId } = this.state\r\n\r\n const white_label_data = org && org.white_label_data\r\n const header = white_label_data && white_label_data.header\r\n const headerIconId = header && header.logo_id\r\n const setState = () => {\r\n this.setState({\r\n logoId: null,\r\n logoLink: '',\r\n whiteLabelLogoId: null,\r\n whiteLabelLogoLink: '',\r\n submitted: false\r\n })\r\n }\r\n form.validateFields((err, values) => {\r\n if (!err) {\r\n const data = {\r\n title: values.title,\r\n description: values.description,\r\n logo_id: logoId || (org && org.logo_id)\r\n }\r\n this.setState({\r\n ...this.state,\r\n submitted: true\r\n })\r\n if (isSuperAdmin) {\r\n console.log(`values`, values)\r\n data.media_service = values.media_service\r\n data.broadcast_limit = parseFloat(values.limit)\r\n data.transcribe_limit = parseFloat(values.transcribe_limit)\r\n data.enable_ai = values.enable_ai\r\n data.enable_maze = values.enable_maze\r\n data.enable_ai_course = values.enable_ai_course\r\n data.enable_white_label = values.enable_white_label\r\n data.enable_data = values.enable_data\r\n data.is_marketplace_enabled = values.is_marketplace_enabled\r\n data.enable_elevenlabs_maze = values.enable_elevenlabs_maze\r\n data.enable_cloned_voice_maze = values.enable_cloned_voice_maze\r\n data.white_label_data = values.enable_white_label\r\n ? {\r\n header: {\r\n color: values.header_color || (header && header.color),\r\n logo_id: whiteLabelLogoId || headerIconId\r\n }\r\n }\r\n : null\r\n onSubmit(data, !!org)\r\n setState()\r\n } else {\r\n onSubmit(data, !!org).then(() => {\r\n setState()\r\n })\r\n }\r\n }\r\n })\r\n }\r\n\r\n handleColorChange = color => {\r\n this.setState({ selectedColor: color })\r\n }\r\n\r\n render() {\r\n const {\r\n form,\r\n visible,\r\n loading,\r\n org,\r\n t,\r\n isSuperAdmin,\r\n editData\r\n } = this.props\r\n const {\r\n fetchUpload,\r\n logoLink,\r\n image,\r\n file,\r\n submitted,\r\n isWhiteLabelLogo = false,\r\n whiteLabelLogoLink,\r\n enableWhiteLabel,\r\n uploadWhiteLabelLogo = false,\r\n selectedColor\r\n } = this.state\r\n\r\n const orgLogo = org && org.logo ? org.logo.link : ''\r\n const usage = (org && org.total_usage) || 0\r\n const orgLimit = (org && org.broadcast_limit) || 0\r\n const limit = orgLimit - usage\r\n const transcribeUsage = (org && org.total_transcribe_usage) || 0\r\n const transcribeOrgLimit = (org && org.transcribe_limit) || 0\r\n const transcribe_limit = transcribeOrgLimit - transcribeUsage\r\n const whiteLabelHeader =\r\n org && org.white_label_data && org.white_label_data.header\r\n const whiteLabelLogo =\r\n whiteLabelHeader && whiteLabelHeader.logo && whiteLabelHeader.logo.link\r\n const whiteLabelHeaderColor = whiteLabelHeader && whiteLabelHeader.color\r\n\r\n console.log({ props: this.props, state: this.state })\r\n\r\n return (\r\n \r\n {ready ? (\r\n \r\n ) : (\r\n \r\n )}\r\n Close}\r\n >\r\n
\r\n )}\r\n \r\n )}\r\n \r\n {voiceList.map(item => {\r\n return (\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n })}\r\n \r\n {colorList.map((color, index) => (\r\n onChange(color)}\r\n />\r\n ))}\r\n
\r\n )\r\n}\r\n\r\nexport default Form.create()(\r\n withTranslation('management')(ModalAddOrganisations)\r\n)\r\n","import { connect } from 'react-redux'\r\n\r\nimport actions from '../../../../../../store/actions'\r\n\r\nimport ModalAddOrganisations from './ModalAddOrganisations'\r\n\r\nexport default connect(\r\n state => ({}),\r\n dispatch => ({\r\n upload: (file, opts) => dispatch(actions.library.upload(file, opts))\r\n })\r\n)(ModalAddOrganisations)\r\n","import React, { Component } from 'react'\r\nimport { Popconfirm, Spin, Pagination, Modal, Icon, Button } from 'antd'\r\nimport _ from 'lodash'\r\nimport { Page, Column, Table, Row } from './styled'\r\nimport { ModalAddOrganisations } from './internal'\r\n\r\nimport { Spinner, Search } from '../../../../components'\r\n\r\nimport { pencil, trash } from '../../images'\r\nimport { withTranslation } from 'react-i18next'\r\nimport './styles.scss'\r\n\r\nconst filterSort = [\r\n { value: 'asc', text: 'filters:ASC' },\r\n { value: 'desc', text: 'filters:DESC' }\r\n]\r\n\r\nclass Organisations extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.getOrganizationsList()\r\n }\r\n\r\n state = {\r\n isModalVisible: false,\r\n isModalUpdateLiveStream: false,\r\n isConfirmLoading: false,\r\n editData: null,\r\n isCreation: false,\r\n value: '',\r\n isEditing: false,\r\n sort: filterSort[0].value,\r\n deletedOrgId: null,\r\n activeOrg: null,\r\n page: 1,\r\n pageSize: 20\r\n }\r\n createOffset = (page, pageSize) => page * pageSize - pageSize\r\n\r\n componentDidMount() {}\r\n\r\n // onSearch = val => {\r\n // const search = val.target.value\r\n // if (_.isEmpty(search)) {\r\n // // this.props.resetUsersByOrganizationId()\r\n // }\r\n // this.setState({\r\n // value: search,\r\n // isLoading: true\r\n // })\r\n // }\r\n\r\n onSearch = _.debounce(\r\n val =>\r\n this.setState(\r\n {\r\n value: val\r\n // page: 1\r\n },\r\n () => {\r\n const { getOrganizations } = this.props\r\n const data = {\r\n search: val\r\n }\r\n getOrganizations(data)\r\n }\r\n ),\r\n 1000\r\n )\r\n\r\n getOrganizationsList = () => {\r\n const { getOrganizations } = this.props\r\n const { page, pageSize, sort } = this.state\r\n const data = {\r\n offset: this.createOffset(page, pageSize),\r\n limit: pageSize,\r\n sort: sort\r\n }\r\n getOrganizations(data)\r\n }\r\n\r\n setModalVisible = value => {\r\n this.setState({\r\n isModalVisible: value\r\n })\r\n }\r\n\r\n cancel = () => {\r\n this.setState({\r\n isCreation: false,\r\n editData: null,\r\n isModalVisible: false,\r\n activeOrg: null\r\n })\r\n }\r\n\r\n create = data => {\r\n const {\r\n getOrganizations,\r\n createOrganization,\r\n updateOrganizationsList\r\n } = this.props\r\n const { page, pageSize } = this.state\r\n const params = {\r\n offset: this.createOffset(page, pageSize),\r\n limit: pageSize\r\n }\r\n this.setState({\r\n isCreation: true\r\n })\r\n createOrganization(data).then(() => {\r\n this.setState({\r\n isModalVisible: false,\r\n isCreation: false,\r\n activeOrg: null\r\n })\r\n updateOrganizationsList()\r\n return getOrganizations(params)\r\n })\r\n }\r\n\r\n update = data => {\r\n const {\r\n getOrganizations,\r\n updateOrganization,\r\n updateOrganizationsList\r\n } = this.props\r\n const { activeOrg } = this.state\r\n const { page, pageSize } = this.state\r\n const params = {\r\n offset: this.createOffset(page, pageSize),\r\n limit: pageSize\r\n }\r\n this.setState({\r\n isEditing: true\r\n })\r\n return updateOrganization(activeOrg.id, data).then(() => {\r\n this.setState({\r\n isModalVisible: false,\r\n isModalUpdateLiveStream: false,\r\n isConfirmLoading: false,\r\n isEditing: false,\r\n activeOrg: null,\r\n editData: null\r\n })\r\n updateOrganizationsList()\r\n return getOrganizations(params)\r\n })\r\n }\r\n\r\n checkStreamLimit = data => {\r\n const {\r\n user: {\r\n info: { isSuperAdmin }\r\n }\r\n } = this.props\r\n if (isSuperAdmin) {\r\n this.setState({\r\n isModalUpdateLiveStream: true,\r\n isModalVisible: false,\r\n editData: data\r\n })\r\n } else {\r\n this.update(data)\r\n }\r\n }\r\n\r\n onConfirmModal = () => {\r\n this.setState({\r\n isConfirmLoading: true\r\n })\r\n this.update(this.state.editData)\r\n }\r\n onCancelModal = () => {\r\n this.setState({\r\n isModalUpdateLiveStream: false,\r\n isModalVisible: true\r\n })\r\n }\r\n\r\n deleteOrgById = (e, id) => {\r\n const {\r\n user: { info },\r\n updateOrganizationsList\r\n } = this.props\r\n\r\n e.stopPropagation()\r\n this.setState({\r\n deletedOrgId: id\r\n })\r\n this.props\r\n .deleteOrganizationById(id)\r\n .then(() => {\r\n this.setState({\r\n deletedOrgId: null\r\n })\r\n })\r\n .then(() => {\r\n this.getOrganizationsList()\r\n updateOrganizationsList()\r\n if (info.active_organization_id === id) {\r\n window.location.reload()\r\n }\r\n })\r\n }\r\n\r\n editOrg = activeOrg => {\r\n this.setState({\r\n activeOrg,\r\n isModalVisible: true\r\n })\r\n }\r\n\r\n onChangePage = (page, pageSize) => {\r\n this.setState(\r\n {\r\n page,\r\n pageSize,\r\n isFetching: true\r\n },\r\n this.getOrganizationsList\r\n )\r\n }\r\n\r\n render() {\r\n const {\r\n isModalVisible,\r\n isCreation,\r\n deletedOrgId,\r\n activeOrg,\r\n isEditing,\r\n pageSize,\r\n sort,\r\n page,\r\n isModalUpdateLiveStream,\r\n isConfirmLoading,\r\n editData\r\n } = this.state\r\n\r\n let {\r\n organizations: {\r\n autoComplete: { rows: list, count },\r\n isFetching\r\n },\r\n user: {\r\n info: { isSuperAdmin, isAdmin }\r\n },\r\n t,\r\n history\r\n } = this.props\r\n\r\n list = _.orderBy(list, org => org['title'], sort)\r\n let searchedList = [...list]\r\n\r\n // if (!_.isEmpty(value)) {\r\n // searchedList = list.filter(org => {\r\n // return org.title.toLowerCase().includes(value.toLowerCase())\r\n // })\r\n // }\r\n\r\n // console.log(`this.props`, this.props)\r\n // console.log(`this.state`, this.state)\r\n console.log(`searchedList`, searchedList)\r\n console.log('searrch', this.state)\r\n return (\r\n {t('organizations_title')}
\r\n{t('organizations_subtitle')}
\r\n\r\n {t('labels:title_modal_stream')}\r\n
\r\n \r\n {t('labels:des_warning_stream')} {activeOrg.title}'s\r\n
\r\n \r\n {t('labels:monthly_stream')}\r\n
\r\n \r\n \r\n {activeOrg.broadcast_limit}\r\n \r\n \r\n {t('labels:min_per_month')}\r\n \r\n
\r\n \r\n {t('v4:monthly_transcribe')}\r\n
\r\n \r\n \r\n {activeOrg.transcribe_limit}\r\n \r\n \r\n {t('labels:min_per_month')}\r\n \r\n
\r\n\r\n \r\n {t('v4:enable_ai')}\r\n
\r\n \r\n \r\n {activeOrg.enable_ai ? 'YES' : 'NO'}\r\n \r\n \r\n
\r\n\r\n \r\n {t('v4:enable_maze')}\r\n
\r\n \r\n \r\n {activeOrg.enable_maze ? 'YES' : 'NO'}\r\n \r\n \r\n
\r\n \r\n {t('v4:enable_marketplace')}\r\n
\r\n \r\n \r\n \r\n {activeOrg.is_marketplace_enabled ? 'YES' : 'NO'}\r\n \r\n \r\n \r\n
\r\n\r\n \r\n Enable Course Creation with AI\r\n
\r\n \r\n \r\n \r\n {activeOrg.enable_ai_course ? 'YES' : 'NO'}\r\n \r\n \r\n \r\n
\r\n\r\n \r\n {t('v4:media_service')}\r\n
\r\n \r\n \r\n {activeOrg.media_service}\r\n \r\n \r\n
\r\n\r\n \r\n \r\n {t('buttons:cancel')}\r\n \r\n \r\n {t('buttons:confirm')}\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n {t('v3:check_email')}\r\n {t('reports:report')}\r\n \r\n
\r\n ),\r\n width: '500px',\r\n okButtonProps: {\r\n shape: 'round'\r\n },\r\n centered: true,\r\n onOk() {}\r\n })\r\n }\r\n handleDataFromExcel = excelData => {\r\n let userList = []\r\n excelData.forEach(element => {\r\n const tmpUser = {\r\n name: element[0] && element[0].toString().trim(),\r\n email: element[1] && element[1].trim(),\r\n employeeId: element[2] && element[2].toString().trim(),\r\n organization: element[3] && element[3].toString().trim(),\r\n groups: [\r\n element[4] && element[4].toString().trim(),\r\n element[5] && element[5].toString().trim(),\r\n element[6] && element[6].toString().trim(),\r\n element[7] && element[7].toString().trim(),\r\n element[8] && element[8].toString().trim()\r\n ]\r\n }\r\n userList.push(tmpUser)\r\n })\r\n return _.filter(userList, (user, index) => index > 0)\r\n }\r\n\r\n fetchData = () => {\r\n const orgId = this.state.selectedOrgId\r\n const searchValue = this.state.search\r\n const searchType = this.state.searchType\r\n if (searchValue) {\r\n return api.organizations\r\n .searchUsersInOrganization({ orgId, searchType, searchValue })\r\n .then(res => {\r\n this.setState({\r\n userSearchList: res.data,\r\n loading: false\r\n })\r\n })\r\n }\r\n }\r\n\r\n handleSearchType = type => {\r\n if (type === 'name') {\r\n this.setState(\r\n {\r\n searchType: 'searchByname',\r\n groupValue: ''\r\n },\r\n () => this.fetchData()\r\n )\r\n } else if (type === 'id') {\r\n this.setState(\r\n {\r\n searchType: 'searchById',\r\n groupValue: ''\r\n },\r\n () => this.fetchData()\r\n )\r\n } else if (type === 'email') {\r\n this.setState(\r\n {\r\n searchType: 'searchByemail',\r\n groupValue: ''\r\n },\r\n () => this.fetchData()\r\n )\r\n } else if (type === 'group') {\r\n this.setState(\r\n {\r\n searchType: 'searchBygroup'\r\n },\r\n () => this.fetchData()\r\n )\r\n } else {\r\n this.setState(\r\n {\r\n searchType: 'search',\r\n groupValue: ''\r\n },\r\n () => this.fetchData()\r\n )\r\n }\r\n }\r\n\r\n onSearch = _.debounce(\r\n value =>\r\n this.setState(\r\n {\r\n search: value,\r\n page: 1\r\n },\r\n () => {\r\n this.fetchData(true)\r\n }\r\n ),\r\n 1000\r\n )\r\n\r\n render() {\r\n const {\r\n isModalVisible,\r\n selectedOrgId,\r\n selectedUser,\r\n deletedUserId,\r\n sortField,\r\n isModalMassUser,\r\n isExcelUploading,\r\n isErrorUploading,\r\n groupValue\r\n } = this.state\r\n\r\n const {\r\n organizations: {\r\n // isFetching: isOrgFetching,\r\n // list: {\r\n // rows: list,\r\n // },\r\n usersByOrganizationId: { list: usersList, isFetching }\r\n },\r\n user: {\r\n active_organization_id: activeOrganizationId,\r\n isSuperAdmin,\r\n isAdmin,\r\n id\r\n },\r\n t\r\n } = this.props\r\n const {\r\n searchList,\r\n isLoading,\r\n isActive,\r\n search,\r\n userSearchList,\r\n groupList\r\n } = this.state\r\n let orgList = []\r\n\r\n // if(!_.isEmpty(list)) {\r\n // orgList = isSuperAdmin\r\n // ? list\r\n // : list.filter(i => i.role && i.role.name === 'Admin')\r\n // }\r\n\r\n if (!_.isEmpty(searchList)) {\r\n orgList = isSuperAdmin\r\n ? searchList\r\n : searchList.filter(i => i.role && i.role.name === 'Admin')\r\n }\r\n\r\n let groups = groupList.length > 0 ? groupList : []\r\n console.log(\r\n 'searchlist',\r\n searchList,\r\n orgList,\r\n groups,\r\n 'userSearchList',\r\n userSearchList,\r\n 'groupValue',\r\n groupValue\r\n )\r\n\r\n const orgId =\r\n selectedOrgId ||\r\n activeOrganizationId ||\r\n (!!orgList.length && orgList[0].id)\r\n\r\n const selectedOrg = orgList.find(i => i.id === orgId) || {}\r\n\r\n const isOrgAdmin =\r\n selectedOrg && selectedOrg.role && selectedOrg.role.name === 'Admin'\r\n\r\n let sortedList\r\n if (search || groupValue) {\r\n sortedList = _.sortBy(\r\n this.getValidUser(userSearchList),\r\n user => user[sortField]\r\n )\r\n } else {\r\n sortedList = _.sortBy(\r\n this.getValidUser(usersList),\r\n user => user[sortField]\r\n )\r\n }\r\n\r\n return (\r\n {t('general:upload_successful_message')}
\r\n{t('users_title')}
\r\n\r\n {t('labels:organization')}\r\n
\r\n\r\n item.title}\r\n items={orgList}\r\n renderItem={(item, isHighlighted) => (\r\n \r\n {item.title}\r\n
\r\n )}\r\n renderInput={props => (\r\n \r\n
\r\n )}\r\n wrapperStyle={styles.AutoWrappper}\r\n menuStyle={styles.autoCompleteModal}\r\n value={this.state.value}\r\n onChange={e => this.searchOrg(e)}\r\n onSelect={(val, item) => this.onSelectOrg(item)}\r\n open={this.getOpenModal()}\r\n />\r\n \r\n \r\n {t('filters:group')}\r\n
\r\n\r\n item.title}\r\n items={groups}\r\n renderItem={(item, isHighlighted) => (\r\n \r\n {item.title}\r\n
\r\n )}\r\n wrapperStyle={styles.AutoWrappper}\r\n menuStyle={styles.autoCompleteModal}\r\n value={this.state.groupValue}\r\n // onChange={e => (value = e.target.value)}\r\n onSelect={(val, item) => this.onSelectGroup(item)}\r\n />\r\n \r\n \r\n \r\n \r\n {t('buttons:download_mass_user_tamplate')}\r\n \r\n \r\n \r\n {() => (\r\n \r\n {t('buttons:upload_excel_list')}\r\n \r\n )}\r\n \r\n
\r\n {isErrorUploading && (\r\n \r\n
\r\n )}\r\n \r\n\r\n {orgId && (\r\n \r\n \r\n {t('errors:title_excel')}\r\n \r\n
\r\n \r\n {t('errors:upload_excel')}\r\n
\r\n \r\n {t('errors:subtitle_excel')}\r\n
\r\n \r\n ![\"\"](\"/images/search-error-icon.png\")
\r\n
\r\n ) : (\r\n \r\n {t('management:select_org')}
\r\n {t('groups_title')}
\r\n\r\n{t('v4:manage_category')}
\r\n\r\n {t('labels:topics').toUpperCase()}\r\n
\r\n {t('errors:topics_max')}
\r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default TopicsInput\r\n","import TopicsInput from './TopicsInput'\r\n\r\nexport default TopicsInput\r\n","import styled, { css } from 'styled-components'\r\nimport Dropzone from 'react-dropzone'\r\nimport { Icon } from 'antd'\r\n\r\nimport { media } from '../../../styles'\r\nimport { styleguide } from '../../../constants'\r\n\r\nconst { colors, typography } = styleguide\r\n\r\n// ${props =>\r\n// props.cover &&\r\n// css`\r\n// background: no-repeat url(${props.cover}) center;\r\n// background-size: contain;\r\n// background-color: #f4f5fa;\r\n// `}\r\n\r\nexport const DropzoneWrapper = styled(Dropzone)`\r\n && {\r\n position: relative;\r\n width: 100%;\r\n\r\n \r\n border-width: 1.5px;\r\n border-color: #e3e3e3;\r\n border-style: solid;\r\n border-radius: 8px;\r\n min-height: 25rem;\r\n\r\n &.small{\r\n min-height: 25rem;\r\n }\r\n\r\n\r\n \r\n\r\n ${props =>\r\n props.error &&\r\n css`\r\n border: 1.5px solid ${colors.red};\r\n `}\r\n\r\n ${media.md`\r\n height: 20rem;\r\n `}\r\n\r\n ${props =>\r\n props.mode &&\r\n props.mode === 'builder' &&\r\n `\r\n border-color: #979797 !important;\r\n width: 100% !important;\r\n `}\r\n\r\n ${props =>\r\n props.disabled &&\r\n css`\r\n opacity: 0.5;\r\n pointer-events: none;\r\n `}\r\n }\r\n`\r\n\r\nexport const DropzoneImageWrapper = styled(Dropzone)`\r\n && {\r\n position: relative;\r\n width: 100%;\r\n // aspect-ratio:16/9;\r\n border-width: 1.5px;\r\n border-color: #e3e3e3;\r\n border-style: solid;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n min-height: 25rem;\r\n\r\n &.small {\r\n min-height: 25rem;\r\n }\r\n }\r\n`\r\n\r\nexport const DropzoneLoading = styled(Icon)`\r\n && {\r\n font-size: 3.6rem;\r\n color: ${colors.blue};\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n margin-top: -1.8rem;\r\n margin-top: -1.8rem;\r\n }\r\n`\r\n\r\nexport const DropzoneInner = styled.div`\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 14rem;\r\n height: 15rem;\r\n display: flex;\r\n // flex-direction: column;\r\n width: 100%;\r\n // justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n padding: 2rem;\r\n &.small {\r\n height: auto;\r\n }\r\n\r\n &.small button {\r\n margin-bottom: 1rem;\r\n }\r\n`\r\n\r\nexport const DropzoneText = styled.span`\r\n color: ${colors.darkGreyOne};\r\n font-weight: ${typography.h1FontWeight};\r\n font-size: 1.1rem;\r\n margin-left: 1rem;\r\n`\r\n\r\nexport const modal_style = {\r\n overflow: 'auto',\r\n top: 0,\r\n left: 0,\r\n bottom: 0,\r\n right: 0\r\n}\r\n","import React, { useEffect, useRef, useState } from 'react'\r\nimport {\r\n Button,\r\n Form,\r\n Modal,\r\n Menu,\r\n Dropdown,\r\n Spin,\r\n message,\r\n Tooltip\r\n} from 'antd'\r\nimport ImageCropContainer from '../../ImageCrop'\r\nimport { general, config } from '../../../constants'\r\nimport { useTranslation } from 'react-i18next'\r\nimport { useDispatch, useSelector } from 'react-redux'\r\nimport actions from '../../../store/actions'\r\nimport { PopupMedia } from '../../../views/Library/internal'\r\nimport _ from 'lodash'\r\nimport AiImages from '../../../views/Courses/Create/nestedComponents/PageBuilder/Components/Image/components/AiImages'\r\nimport {\r\n uploadImage,\r\n uploadMedia,\r\n uploadAi,\r\n uploadCanve\r\n} from '../../Core/ImageUpload/images'\r\nimport './imageSelect.scss'\r\nimport ReactSVG from 'react-svg'\r\nimport EditIcon from '../../../assets/edit.svg'\r\nimport { bindActionCreators } from 'redux'\r\nimport { connect } from 'react-redux'\r\nimport { api } from '../../../services'\r\nimport { DropzoneInner, DropzoneLoading, DropzoneWrapper } from './styled'\r\nimport { InfoCircleOutlined } from '@ant-design/icons'\r\nimport ImagePreview from '../../ImagePreview'\r\nimport { Delete } from '../../../views/Courses/Create/nestedComponents/PageBuilder/Components/Audio/images'\r\n\r\nfunction InsertMedia(props) {\r\n const {\r\n form,\r\n onCoverChange,\r\n opacity,\r\n isClearImage,\r\n onClearImage,\r\n coverInput,\r\n label,\r\n clearUploadList,\r\n tooltip,\r\n isBackground = false,\r\n required = true,\r\n isCropDisabled = false,\r\n } = props\r\n\r\n const [file, setFile] = useState(null)\r\n const [image, setImage] = useState(null)\r\n const [isImageLoading, setIsImageLoading] = useState(false)\r\n const [isMediaLibraryModalOpen, setIsMediaLibraryModalOpen] = useState(false)\r\n const [imageName, setImageName] = useState('')\r\n const [imageSize, setImageSize] = useState('')\r\n const [isAiModal, setAiModal] = useState(false)\r\n const [cover, setCover] = useState({\r\n id: null,\r\n link: '',\r\n file_size: '',\r\n filename: ''\r\n })\r\n const [isPreviewModal, setPreviewModal] = useState(false)\r\n const [imageSelected, setImageSelected] = useState(false)\r\n const [loading, setLoading] = useState(false)\r\n\r\n const inputFileRef = useRef(null)\r\n\r\n const user = useSelector(state => state.user)\r\n\r\n const dispatch = useDispatch()\r\n useEffect(() => {\r\n setImageName(coverInput && coverInput.filename)\r\n setImageSize(coverInput && coverInput.file_size)\r\n setCover({\r\n id: coverInput && coverInput.id,\r\n link: coverInput && coverInput.link\r\n })\r\n setImageSelected(!!coverInput)\r\n }, [coverInput])\r\n\r\n const onDrop = (dropped, handleAfterUpload, handlebeforeUpload) => {\r\n const file = dropped[0]\r\n if (!file) {\r\n return\r\n }\r\n\r\n if (isCropDisabled) {\r\n handleUploadImage(file)\r\n } else {\r\n const image = URL.createObjectURL(file)\r\n setImage(image)\r\n }\r\n setFile(file)\r\n setImageName(file.name)\r\n setImageSize(file.size)\r\n clearUploadList()\r\n handleAfterUpload = () => {\r\n setLoading(false)\r\n setImageSelected(true)\r\n }\r\n\r\n handlebeforeUpload = () => {\r\n setLoading(true)\r\n }\r\n }\r\n\r\n const { t } = useTranslation()\r\n\r\n const handleUploadImage = data => {\r\n setIsImageLoading(true)\r\n dispatch(actions.library.upload(data)).then(\r\n ({ id, link, file_size, filename, path }) => {\r\n setCover({ id, link, file_size, filename })\r\n onCoverChange({ id, link, file_size, filename, path })\r\n setImage(null)\r\n setFile(null)\r\n setIsImageLoading(false)\r\n setImageSelected(true)\r\n }\r\n )\r\n }\r\n\r\n const useCanva = () => {\r\n var script = document.createElement('script')\r\n const url = 'https://sdk.canva.com/designbutton/v2/api.js'\r\n script.src = url\r\n script.onload = () => {\r\n if (window.Canva && window.Canva.DesignButton) {\r\n window.Canva.DesignButton.initialize({\r\n apiKey: config.canvaKey\r\n }).then(api => {\r\n api.createDesign({\r\n design: {\r\n type: 'Presentation'\r\n },\r\n onDesignPublish: ({ exportUrl, designTitle }) => {\r\n handleImageUrl(exportUrl, designTitle)\r\n }\r\n })\r\n })\r\n }\r\n }\r\n document.body.appendChild(script)\r\n }\r\n\r\n /**\r\n * Fetches an image from a URL and sends it to a handleUploadImage function.\r\n * @param {string} url - The URL of the image to be fetched.\r\n * @param {string} title - The title of the image.\r\n */\r\n const handleImageUrl = async (url, title) => {\r\n try {\r\n const userData = user && user.info\r\n setIsImageLoading(true)\r\n\r\n const response = await api.imageGeneration.generateIdeogramImage({\r\n download_url: url,\r\n user_id: userData && userData.id,\r\n active_org_id: userData && userData.active_organization_id,\r\n is_public: true\r\n })\r\n\r\n console.log('response', response)\r\n if (response && response.data) {\r\n console.log('response', response.data)\r\n handleSelectedImage(response.data)\r\n }\r\n } catch (error) {\r\n console.log(error)\r\n message.error(error.message)\r\n } finally {\r\n setIsImageLoading(false)\r\n }\r\n }\r\n\r\n const handleClosePopup = type => {\r\n if (type === general.SAVE) {\r\n setImage(null)\r\n } else {\r\n setImage(null)\r\n setFile(null)\r\n }\r\n }\r\n\r\n const handleSelectedImage = image => {\r\n const newCover = {\r\n id: image.id,\r\n link: image.link,\r\n file_size: image.file_size,\r\n filename: image.filename,\r\n path: image.path,\r\n }\r\n setCover(newCover)\r\n onCoverChange(newCover)\r\n setIsMediaLibraryModalOpen(false)\r\n setAiModal(false)\r\n setImageSelected(true)\r\n setImageName(image.filename)\r\n setImageSize(image.file_size)\r\n }\r\n\r\n const handleFileInputClick = () => {\r\n if (inputFileRef.current) {\r\n inputFileRef.current.click()\r\n }\r\n }\r\n\r\n const handleFileChange = event => {\r\n const file = event.target.files[0]\r\n if (file) {\r\n onDrop([file])\r\n }\r\n }\r\n\r\n const onImage = item => {\r\n handleImageUrl(item.link, 'Presentation ai')\r\n setAiModal(false)\r\n }\r\n const menu = (\r\n \r\n )\r\n return (\r\n \r\n {isAiModal && (\r\n {\r\n e.preventDefault()\r\n setAiModal(false)\r\n }}\r\n width={'80%'}\r\n >\r\n \r\n {label || t('labels:picture')} \r\n {tooltip && (\r\n \r\n \r\n )}\r\n
\r\n }\r\n colon={false}\r\n required={false}\r\n >\r\n {imageSelected ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {imageName || 'N/A'}\r\n \r\n
\r\n \r\n \r\n \r\n {imageSize\r\n ? imageSize >= 1024 * 1024 // Check if size is >= 1 MB\r\n ? (imageSize / (1024 * 1024)).toFixed(1) + ' MB' // Convert to MB\r\n : (imageSize / 1024).toFixed(1) + ' KB' // Convert to KB\r\n : 'N/A'}\r\n \r\n
\r\n \r\n \r\n \r\n 
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n library: state.library\r\n})\r\n\r\nconst mapDispatchToProps = dispatch =>\r\n bindActionCreators(\r\n {\r\n clearUploadList: actions.library.clearUploadList\r\n },\r\n dispatch\r\n )\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(InsertMedia)\r\n","import ImageSelect from './ImageSelect'\r\n\r\nexport default ImageSelect\r\n","import React, { useEffect, useState } from 'react'\r\nimport { Form, Select } from 'antd'\r\nimport { useTranslation } from 'react-i18next'\r\nimport { useSelector } from 'react-redux'\r\nimport { api } from '../../../services'\r\n\r\nconst { Option } = Select\r\n\r\nfunction AllowAccess(props) {\r\n const { t } = useTranslation()\r\n\r\n const [emailList, setEmailList] = useState([])\r\n const [fetching, setFetching] = useState(false)\r\n const user = useSelector(state => state.user)\r\n\r\n useEffect(() => {\r\n fetchUserEmails()\r\n }, [])\r\n\r\n const handleChange = value => {\r\n const { onChange } = props\r\n if (onChange) {\r\n onChange(value)\r\n }\r\n }\r\n\r\n const fetchUserEmails = () => {\r\n const {\r\n info: { active_organization_id }\r\n } = user\r\n setFetching(true)\r\n api.organizations\r\n .getUsersByOrganizationId(active_organization_id)\r\n .then(({ data }) => {\r\n const userEmails =\r\n data &&\r\n data\r\n .filter(item => item.user !== null)\r\n .map(item => ({\r\n text: item.user.email,\r\n value: item.user.email,\r\n id: item.user.id\r\n }))\r\n\r\n setEmailList(userEmails)\r\n setFetching(false)\r\n })\r\n .catch(err => {\r\n setFetching(false)\r\n setEmailList([])\r\n })\r\n }\r\n\r\n const {\r\n form: { getFieldDecorator },\r\n defaultHostEmails = []\r\n } = props\r\n\r\n console.log({ defaultHostEmails })\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n handleDate = (val, type) => {\r\n if (type === 'from') {\r\n this.setState({ dateFrom: val })\r\n } else {\r\n this.setState({ dateTo: val })\r\n }\r\n }\r\n\r\n handleSearch = () => {\r\n this.setState(\r\n {\r\n groupDateOption: null\r\n },\r\n () => this.getReport()\r\n )\r\n }\r\n\r\n onSearch = text => {\r\n const { organisationList } = this.state\r\n this.setState({\r\n filteredOrgs: organisationList.filter(obj =>\r\n obj.text.toLowerCase().includes(text.toLowerCase())\r\n )\r\n })\r\n }\r\n\r\n handleUsersHeader = val => {\r\n var title = 'Total Users'\r\n var color = 'blue'\r\n\r\n if (val === 'inactive') {\r\n title = 'Non Signup Users'\r\n color = 'red'\r\n }\r\n\r\n if (val === 'active') {\r\n title = 'Active Users'\r\n color = 'green'\r\n }\r\n\r\n return (\r\n {val}
\r\n \r\n (hours)\r\n \r\n\r\n {!selectedOrg && (\r\n
\r\n \r\n \r\n
\r\n )}\r\n {selectedOrg && (\r\n \r\n {t('v4:select_org_report')}
\r\n \r\n 10 ? true : false}\r\n loading={groupsLoading}\r\n />\r\n
\r\n )}\r\n \r\n {selectedOrg && !isTableDataLoading && graphOptions && (\r\n 5 ? 30 : 0\r\n }\r\n },\r\n yAxis: { type: 'value', name: 'Hours' },\r\n series: [\r\n {\r\n type: 'bar',\r\n barMaxWidth: 30,\r\n itemStyle: {\r\n color: '#EE6666'\r\n }\r\n },\r\n {\r\n type: 'bar',\r\n barMaxWidth: 30,\r\n itemStyle: {\r\n color: '#FAC858'\r\n }\r\n }\r\n ],\r\n label: {\r\n show: true,\r\n position: 'top',\r\n color: 'black',\r\n fontSize: 12\r\n }\r\n }}\r\n />\r\n )}\r\n {selectedOrg && !isTableDataLoading && orgUserData && (\r\n 5 ? 30 : 0\r\n }\r\n },\r\n yAxis: { type: 'value', name: 'Users' },\r\n series: [\r\n {\r\n type: 'bar',\r\n barMaxWidth: 30,\r\n itemStyle: {\r\n color: '#5470C6'\r\n }\r\n },\r\n {\r\n type: 'bar',\r\n barMaxWidth: 30,\r\n itemStyle: {\r\n color: '#9DC988'\r\n }\r\n },\r\n {\r\n type: 'bar',\r\n barMaxWidth: 30,\r\n itemStyle: {\r\n color: '#ff6060'\r\n }\r\n }\r\n ],\r\n label: {\r\n show: true,\r\n position: 'top',\r\n color: 'black',\r\n fontSize: 12\r\n }\r\n }}\r\n />\r\n )}\r\n
\r\n {!isTableDataLoading &&\r\n groupGraphData &&\r\n groupGraphData.length > 0 && (\r\n \r\n
\r\n {openEmailModal && (\r\n \r\n \r\n {t('buttons:download')}\r\n \r\n
\r\n • {title}
\r\n \r\n {loading ? (\r\n
\r\n\r\n \r\n ![\"sharebot\"](\"/images/sharebot.png\")
\r\n
\r\n \r\n ) : (\r\n \r\n \r\n \r\n isSharebotFree(orgIdValue, data.customer.email)\r\n }\r\n >\r\n {t('v3:sharebot_intel_knowledge_cente')}\r\n \r\n
\r\n \r\n {` ${t('v3:sharebot_welcome_paragraph')}`}\r\n
\r\n\r\n {/* share bot expire ui */}\r\n \r\n {data.stripe_status === 'trial' && (\r\n \r\n \r\n
\r\n 15-Day Free Trial\r\n \r\n )}\r\n\r\n {(data.stripe_status === 'month' ||\r\n data.stripe_status === 'year') && (\r\n \r\n \r\n
\r\n isSharebotSubscribe()}\r\n >\r\n {data.stripe_status === 'month' ||\r\n data.stripe_status === 'year'\r\n ? t('v3:unsubscribe')\r\n : t('v3:subscribe_now')}\r\n \r\n
\r\n \r\n \r\n {trialDatePeroid(\r\n data.trial_start === data.trial_end\r\n ? moment(data.trial_start)\r\n .add(15, 'days')\r\n .format('DD-MM-YYYY')\r\n : moment(data.trial_end).format('DD-MM-YYYY')\r\n )\r\n ? t('v3:sharebot_expired')\r\n : t('v3:sharebot_active')}\r\n \r\n
\r\n 15-Day Free Trial\r\n \r\n )}\r\n\r\n {(data.stripe_status === 'month' ||\r\n data.stripe_status === 'year') && (\r\n \r\n \r\n \r\n {trialDatePeroid(\r\n moment(data.exp_date).format('DD-MM-YYYY')\r\n )\r\n ? t('v3:sharebot_expired')\r\n : t('v3:sharebot_active')}\r\n \r\n
\r\n \r\n $\r\n {data.stripe_status === 'year'\r\n ? `${data.price.unit_amount / 100}`\r\n : `${data.price.unit_amount / 100}`}\r\n
\r\n {data.stripe_status === 'year'\r\n ? t('v3:yearly_subscription')\r\n : t('v3:monthly_subscription')}\r\n \r\n )}\r\n {data.stripe_status === 'trial' && (\r\n\r\n \r\n {t('v3:sharebot_start_date')}\r\n {moment(data.trial_start).format('DD.MM.YYYY')}\r\n \r\n\r\n \r\n {t('v3:sharebot_end_date')}\r\n {data.trial_start === data.trial_end\r\n ? moment(data.trial_start)\r\n .add(15, 'days')\r\n .format('DD.MM.YYYY')\r\n : moment(data.trial_end).format('DD.MM.YYYY')}\r\n \r\n
\r\n )}\r\n\r\n {(data.stripe_status === 'month' ||\r\n data.stripe_status === 'year') && (\r\n \r\n \r\n {t('v3:sharebot_start_date')}\r\n {moment(data.start_date).format('DD.MM.YYYY')}\r\n \r\n\r\n \r\n {t('v3:sharebot_end_date')}{' '}\r\n {moment(data.exp_date).format('DD.MM.YYYY')}\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n )}\r\n \r\n \r\n {t('v3:sharebot_para')}\r\n
\r\n \r\n \r\n {[\r\n {\r\n id: 1,\r\n title: t('v3:sub_month'),\r\n\r\n price: `${data.price.unit_amount / 100}`\r\n },\r\n {\r\n id: 2,\r\n title: t('v3:sub_year'),\r\n\r\n price: `${data.price.unit_amount / 10}`\r\n }\r\n ].map(option => (\r\n \r\n
\r\n \r\n ))}\r\n \r\n\r\n {t('v3:sharebot_sure')}
\r\n\r\n {t('v3:sharebot_do_you_want')}\r\n {subOpen\r\n ? t('v3:subscribe_what')\r\n : unSubscriptionModal\r\n ? t('v3:unsubscribe_what')\r\n : t('v3:sharebot_start_free_trial')}\r\n
\r\n {subOpen && (\r\n <>\r\n\r\n \r\n {option.title} ${option.price}\r\n \r\n\r\n \r\n {`${t('v3:question_per_month')}`}\r\n
\r\n \r\n \r\n {t('buttons:cancel')}\r\n \r\n subscribeShareBot()}\r\n loading={isShareBotLoading}\r\n >\r\n {t('v3:confirm')}\r\n \r\n
\r\n \r\n )}\r\n {unSubscriptionModal && (\r\n <>\r\n \r\n \r\n {isActiveSharebot ? t('general:no') : t('buttons:cancel')}\r\n \r\n unSubConfirmBox()}\r\n loading={isShareBotLoading}\r\n >\r\n {isActiveSharebot ? t('general:yes') : t('v3:ai_confirm')}\r\n \r\n
\r\n \r\n )}\r\n {!subOpen && !unSubscriptionModal && (\r\n \r\n \r\n {isActiveSharebot ? t('general:no') : t('buttons:cancel')}\r\n \r\n \r\n isSharebotFree(orgIdValue, data.customer.email)\r\n }\r\n loading={isShareBotLoading}\r\n >\r\n {isActiveSharebot ? t('general:yes') : t('v3:ai_confirm')}\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n)\r\n\r\nexport default SharebotSubscription\r\n","import React from 'react'\r\nimport moment from 'moment'\r\nimport { Alert, Tag } from 'antd'\r\nimport { Spinner } from '../../components'\r\nimport { useTranslation } from 'react-i18next'\r\n\r\nimport './styles.scss'\r\n\r\n// const defaultState = {\r\n// data: [],\r\n// pagination: {}\r\n// }\r\n\r\nconst SharebotUnSubscription = React.memo(\r\n ({\r\n title,\r\n data,\r\n loading\r\n // orgIdValue,\r\n // cancelUnSubList,\r\n // onChangePagination,\r\n // onDeleteSubscription,\r\n // error\r\n }) => {\r\n // const [isOpen, setIsOpen] = useState(false)\r\n // const [isShareBotLoading, setIsShareBotLoading] = useState(false)\r\n // const [isActiveSharebot, setIsActiveSharebot] = useState(defaultState)\r\n // const [isTrialSharebot, setIsTrialSharebot] = useState(defaultState)\r\n // const [subOpen, setSubOpen] = useState(false)\r\n // const [subType, setSubType] = useState('')\r\n // const [subValue, setSubValue] = useState(1)\r\n // const [unSubscriptionModal, setUnSubscriptionModal] = useState(false)\r\n\r\n // const showModal = () => {\r\n // setIsOpen(true)\r\n // }\r\n\r\n // const handleCancel = () => {\r\n // setIsOpen(false)\r\n // setSubOpen(false)\r\n // }\r\n\r\n // const isSharebotFree = (OrgId, cusEmail) => {}\r\n\r\n // const isSharebotSubscribe = () => {\r\n // if (data.stripe_status === 'month' || data.stripe_status === 'year') {\r\n // console.log(orgIdValue, data.id, 'active org id......?')\r\n // setUnSubscriptionModal(true)\r\n // setIsOpen(true)\r\n // } else {\r\n // setIsOpen(true)\r\n // setSubOpen(true)\r\n // }\r\n // }\r\n\r\n // const unSubConfirmBox = () => {\r\n // setIsShareBotLoading(true)\r\n // }\r\n // const handleNewSubscription = e => {\r\n // setSubValue(e.target.value)\r\n // }\r\n\r\n // const subscribeShareBot = () => {\r\n // setIsShareBotLoading(true)\r\n // }\r\n\r\n // const trialDatePeroid = tPeroid => {\r\n // const tdate = moment(new Date()).format('DD-MM-YYYY')\r\n\r\n // const date1 = moment(tdate, 'DD-MM-YYYY').valueOf()\r\n // const date2 = moment(tPeroid, 'DD-MM-YYYY').valueOf()\r\n\r\n // if (date2 >= date1) {\r\n // return false\r\n // }\r\n // return true\r\n // }\r\n\r\n const { t } = useTranslation()\r\n\r\n return (\r\n <>\r\n • {title}
\r\n \r\n {loading ? (\r\n
\r\n \r\n )\r\n }\r\n)\r\n\r\nexport default SharebotUnSubscription\r\n","import React, { useCallback, useEffect, useState, useMemo } from 'react'\r\n\r\nimport './styles.scss'\r\nimport { api } from '../../services'\r\nimport { Spinner } from '../../components'\r\nimport moment from 'moment'\r\nimport { Alert, Button, Modal, Pagination, Radio, message } from 'antd'\r\nimport history from '../../history'\r\nimport SharebotSubscription from './SharebotSubscription'\r\nimport { useSelector } from 'react-redux'\r\nimport SharebotUnSubscription from './UnsubscriptionList'\r\nimport { useTranslation } from 'react-i18next'\r\n\r\nconst defaultState = {\r\n data: [],\r\n pagination: {}\r\n}\r\n\r\nconst PAGE_SIZE = 5\r\n\r\nfunction AccountSubscription() {\r\n const userInfo = useSelector(state => state.user.info)\r\n const [subscriptions, setSubscriptions] = useState(defaultState)\r\n const [unSubscriptions, setUnSubscriptions] = useState(defaultState)\r\n const [isSubscriptionLoading, setIsSubscriptionLoading] = useState(true)\r\n const [isUnSubscriptionLoading, setIsUnSubscriptionLoading] = useState(true)\r\n const [isShareBotLoading, setIsShareBotLoading] = useState(true)\r\n const [isShareBotData, setIsShareBotData] = useState({})\r\n const [cancelUnSubList, setCancelUnSubList] = useState([])\r\n const [error, setError] = useState({\r\n subscriptions: false,\r\n unSubscriptions: false\r\n })\r\n\r\n useEffect(() => {\r\n fetchData()\r\n }, [])\r\n\r\n const fetchSubscriptions = useCallback((page = 0) => {\r\n setIsSubscriptionLoading(true)\r\n api.channel\r\n .listSubscriptions({\r\n mode: 'subscription',\r\n offset: page * PAGE_SIZE,\r\n limit: PAGE_SIZE\r\n })\r\n .then(res => {\r\n setError(prev => ({ ...prev, subscriptions: false }))\r\n setSubscriptions(prevState => ({\r\n ...prevState,\r\n data: res.data.data,\r\n pagination: res.data.pagination\r\n }))\r\n })\r\n .catch(err => {\r\n setError(prev => ({ ...prev, subscriptions: true }))\r\n })\r\n .finally(() => setIsSubscriptionLoading(false))\r\n }, [])\r\n\r\n const fetchUnsubscriptions = useCallback((page = 0) => {\r\n setIsUnSubscriptionLoading(true)\r\n api.channel\r\n .listSubscriptions({\r\n mode: 'unsubscription',\r\n offset: page * PAGE_SIZE,\r\n limit: PAGE_SIZE\r\n })\r\n .then(res => {\r\n setError(prev => ({ ...prev, unSubscriptions: false }))\r\n setUnSubscriptions(prevState => ({\r\n ...prevState,\r\n data: res.data.data,\r\n pagination: res.data.pagination\r\n }))\r\n })\r\n .catch(err => {\r\n setError(prev => ({ ...prev, unSubscriptions: true }))\r\n })\r\n .finally(() => setIsUnSubscriptionLoading(false))\r\n }, [])\r\n\r\n const fetchShareBotSubscription = useCallback((page = 0) => {\r\n setIsShareBotLoading(true)\r\n console.log(userInfo.active_organization_id, 'checkckckckkckckc')\r\n api.sharebot\r\n .getSharebot(userInfo.active_organization_id)\r\n\r\n .then(res => {\r\n if (res.data) {\r\n setIsShareBotData(res.data)\r\n console.log('res-------------------->', res)\r\n }\r\n })\r\n .catch(err => {\r\n console.log('subscriptionUrl2------------------------->', err)\r\n })\r\n .finally(() => setIsShareBotLoading(false))\r\n }, [])\r\n\r\n const fetchShareBotUnsubscription = useCallback((page = 0) => {\r\n setIsShareBotLoading(true)\r\n console.log(userInfo.active_organization_id, 'checkckckckkckckc')\r\n api.sharebot\r\n .sharebotUnsubscribeList()\r\n .then(res => {\r\n if (res.data) {\r\n setCancelUnSubList(res.data.cancelled)\r\n }\r\n })\r\n .catch(err => {\r\n console.log('subscriptionUrl2------------------------->', err)\r\n })\r\n .finally(() => setIsShareBotLoading(false))\r\n }, [])\r\n\r\n const fetchData = useCallback(() => {\r\n fetchSubscriptions()\r\n fetchUnsubscriptions()\r\n fetchShareBotSubscription()\r\n fetchShareBotUnsubscription()\r\n }, [])\r\n\r\n const { t } = useTranslation()\r\n\r\n return (\r\n \r\n \r\n
\r\n )\r\n })}\r\n \r\n ) : (\r\n \r\n \r\n
\r\n \r\n {t('v3:sharebot_intel_knowledge_center')}\r\n
\r\n\r\n {`${t('v3:sharebot_welcome_paragraph')} `}\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n\r\n {/* isSharebotSubscribe()}\r\n >\r\n {item.stripe_status === 'month' ||\r\n item.stripe_status === 'year'\r\n ? 'Unsubscribe'\r\n : 'Subscribe Now'}\r\n */}\r\n
\r\n \r\n \r\n {t('v3:cancelled_date')}\r\n {moment(item.canceled_date).format('DD-MM-YYYY')}\r\n \r\n
\r\n \r\n\r\n {/* \r\n
\r\n )}\r\n \r\n
\r\n )\r\n}\r\n\r\nconst SubscriptionContent = React.memo(\r\n ({\r\n title,\r\n data: { data = [], pagination = {} },\r\n loading,\r\n onChangePagination,\r\n isActiveSubscriptions,\r\n onDeleteSubscription,\r\n error\r\n }) => {\r\n const [selectedChannelId, setSelectedChannelId] = useState(null)\r\n const [isSubscriptionUpdating, setIsSubscriptionUpdating] = useState(false)\r\n\r\n const getSubscriptionType = useMemo(\r\n () => obj => {\r\n if (obj && obj.type) {\r\n switch (obj.type) {\r\n case 'month':\r\n return 'Monthly Subscription'\r\n case 'year':\r\n return 'Yearly Subscription'\r\n case 'one_time':\r\n return 'One Time Buy'\r\n default:\r\n return ''\r\n }\r\n }\r\n },\r\n []\r\n )\r\n\r\n const showEndDate = useMemo(\r\n () => subscription => {\r\n if (subscription && subscription.type) {\r\n return subscription.type !== 'one_time'\r\n }\r\n return false\r\n },\r\n []\r\n )\r\n\r\n const handleChannelDelete = useCallback(\r\n id => {\r\n setIsSubscriptionUpdating(true)\r\n api.channel\r\n .deleteSubscription(id)\r\n .then(() => {\r\n onDeleteSubscription()\r\n setSelectedChannelId(null)\r\n })\r\n .catch(err => {\r\n message.error(`${t('v4:error_delete_channel')}`)\r\n })\r\n .finally(() => {\r\n setIsSubscriptionUpdating(false)\r\n })\r\n },\r\n [onDeleteSubscription]\r\n )\r\n\r\n const handleSubscription = useCallback(\r\n (id, subscription) => {\r\n setIsSubscriptionUpdating(true)\r\n\r\n const subscriptionItem = data.find(item => item.id === id)\r\n\r\n const priceId = getPriceId(\r\n subscriptionItem && subscriptionItem.prices,\r\n subscription\r\n )\r\n\r\n const subscriptionData = {\r\n cancel_at_period_end: true,\r\n owner_id: subscriptionItem && subscriptionItem.creator_id,\r\n price_id: priceId,\r\n price: subscription.value,\r\n payment_option: getPaymentOption(subscription.type)\r\n }\r\n\r\n api.channel\r\n .updateSubscription({\r\n channelId: id,\r\n data: subscriptionData\r\n })\r\n .then(res => {\r\n const redirectLink = res.data && res.data.url\r\n window.location.href = redirectLink\r\n })\r\n .catch(err => {\r\n message.error(`${t('v4:error_update_sub')}`)\r\n setIsSubscriptionUpdating(false)\r\n })\r\n },\r\n [data, onChangePagination]\r\n )\r\n\r\n const handleUnsubscribe = useCallback(\r\n value => {\r\n if (isActiveSubscriptions) {\r\n handleChannelDelete(selectedChannelId)\r\n } else {\r\n handleSubscription(selectedChannelId, value)\r\n }\r\n },\r\n [handleChannelDelete, handleSubscription, selectedChannelId]\r\n )\r\n\r\n const getPaymentOption = useCallback(subscription => {\r\n const options = {\r\n price_monthly: 'subscription',\r\n price_yearly: 'subscription',\r\n price_one_time: 'one_time'\r\n }\r\n return options[subscription.type] || null\r\n }, [])\r\n\r\n const getPriceId = (prices, subscription) => {\r\n switch (subscription.type) {\r\n case 'price_monthly':\r\n return prices.monthly_price_id\r\n case 'price_yearly':\r\n return prices.yearly_price_id\r\n case 'price_one_time':\r\n return prices.one_time_price_id\r\n default:\r\n return null\r\n }\r\n }\r\n\r\n const handleCancelUnsubscribe = useCallback(() => {\r\n setSelectedChannelId(null)\r\n }, [])\r\n\r\n const handleSelectChannel = useCallback(id => {\r\n setSelectedChannelId(id)\r\n }, [])\r\n\r\n const errorCondition = useMemo(() => {\r\n return (\r\n (isActiveSubscriptions && error.subscriptions) ||\r\n (!isActiveSubscriptions && error.unSubscriptions)\r\n )\r\n }, [error, isActiveSubscriptions])\r\n const { t } = useTranslation()\r\n return (\r\n <>\r\n • {title}
\r\n\r\n \r\n {loading ? (\r\n item.id === selectedChannelId)}\r\n isActiveSubscriptions={isActiveSubscriptions}\r\n onCancel={handleCancelUnsubscribe}\r\n onConfirm={handleUnsubscribe}\r\n isSubscriptionUpdating={isSubscriptionUpdating}\r\n />\r\n )}\r\n
\r\n \r\n )\r\n }\r\n)\r\n\r\nconst SubscriptionCard = React.memo(\r\n ({\r\n item,\r\n isActiveSubscriptions,\r\n showEndDate,\r\n getSubscriptionType,\r\n onSelectChannel\r\n }) => {\r\n const handleClick = useCallback(() => {\r\n onSelectChannel(item.id)\r\n }, [item.id, onSelectChannel])\r\n const { t } = useTranslation()\r\n return (\r\n \r\n
\r\n )}\r\n\r\n {!loading && data.length > 0 && pagination.total > PAGE_SIZE && (\r\n \r\n
\r\n )}\r\n\r\n {selectedChannelId && (\r\n \r\n 
\r\n\r\n
\r\n )\r\n }\r\n)\r\n\r\nconst UnsubscribeModal = React.memo(\r\n ({\r\n selectedChannelId,\r\n item,\r\n isActiveSubscriptions,\r\n onCancel,\r\n onConfirm,\r\n isSubscriptionUpdating\r\n }) => {\r\n const priceOptions = item.prices\r\n\r\n const getSubscriptionText = useCallback(key => {\r\n switch (key) {\r\n case 'price_monthly':\r\n return 'Subscription Monthly'\r\n case 'price_yearly':\r\n return 'Subscription Yearly'\r\n case 'price_one_time':\r\n return 'Buy One Time'\r\n default:\r\n return ''\r\n }\r\n }, [])\r\n\r\n const [newSubscription, setNewSubscription] = useState({\r\n type: '',\r\n value: ''\r\n })\r\n\r\n const handleNewSubscription = useCallback(\r\n e => {\r\n setNewSubscription({\r\n type: e.target.value,\r\n value: priceOptions[e.target.value]\r\n })\r\n },\r\n [priceOptions]\r\n )\r\n\r\n const handleConfirm = useCallback(() => {\r\n if (isActiveSubscriptions) {\r\n onConfirm(selectedChannelId)\r\n } else {\r\n onConfirm(newSubscription)\r\n }\r\n }, [newSubscription, onConfirm])\r\n const { t } = useTranslation()\r\n return (\r\n \r\n history.push(`/channel/${item.id}`)}\r\n >\r\n {item.title}\r\n \r\n
\r\n \r\n {item.description || t('v3:sharebot_no_available')}\r\n
\r\n\r\n \r\n \r\n \r\n {isActiveSubscriptions ? 'Unsubscribe' : 'Subscribe'}\r\n \r\n
\r\n ${item.subscription && item.subscription.price}
\r\n {getSubscriptionType(item.subscription)}\r\n \r\n {isActiveSubscriptions && (\r\n\r\n \r\n {t('v3:sharebot_start_date')}\r\n {moment(item.subscription.start_date).format('DD.MM.YYYY')}\r\n \r\n {showEndDate(item.subscription) && (\r\n \r\n {t('v3:sharebot_end_date')}\r\n {moment(item.subscription.exp_date).format('DD.MM.YYYY')}\r\n \r\n )}\r\n
\r\n )}\r\n\r\n \r\n \r\n {['price_monthly', 'price_yearly'].map(key => (\r\n \r\n {getSubscriptionText(key)} ${priceOptions[key]}\r\n \r\n ))}\r\n \r\n )}\r\n
\r\n \r\n )\r\n }\r\n)\r\n\r\nexport default AccountSubscription\r\n","import React, { Fragment, useMemo, useState } from 'react'\r\nimport Dropzone from 'react-dropzone'\r\nimport ReactPhoneInput from 'react-phone-input-2'\r\nimport { Row, Col } from '../../styles'\r\nimport { Input, Button, Form, Tag, Spin, Icon, Switch } from 'antd'\r\nimport { Page } from './styled'\r\nimport TimezoneSelect from 'react-timezone-select'\r\nimport BadgeIcon from './assets/badgeIcon.svg'\r\nimport CertificateIcon from './assets/certificateIcon.svg'\r\nimport { api } from '../../services'\r\nimport config from '../../constants/config'\r\nimport libphonenumber from 'google-libphonenumber'\r\nimport AccountSubscription from './AccountSubscription'\r\nimport stripeImage from './assets/stripe.svg'\r\nimport 'react-phone-input-2/lib/style.css'\r\nimport NewHeader from '../../components/NewHeader'\r\n\r\n// const phoneUtil = libphonenumber.PhoneNumberUtil.getInstance()\r\n\r\nconst viewTypes = {\r\n info: 'Info',\r\n subscription: 'Subscription'\r\n}\r\n\r\n/**\r\n * use for display username input-box in the page\r\n */\r\nconst UserNameRow = ({ App }) => {\r\n const {\r\n user: {\r\n info: { username }\r\n },\r\n t\r\n } = App.props\r\n return (\r\n \r\n
\r\n {!isActiveSubscriptions && (\r\n {t('v3:sharebot_sure')}
\r\n\r\n {t('v3:sharebot_do_you_want')}{' '}\r\n {isActiveSubscriptions ? t('v3:unsubscribe') : t('v3:subscribe')}?\r\n
\r\n\r\n {isActiveSubscriptions ? <>\r\n {t('general:no')}\r\n \r\n \r\n {t('general:yes')}\r\n : <>\r\n {t('buttons:cancel')}\r\n \r\n \r\n {t('v3:confirm')}\r\n }\r\n\r\n
\r\n \r\n
\r\n {t('title')}
\r\n {t('subtitle')}
\r\n {t('v2:are_sure_to_disale_zoom_integration')}
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n {data.type === 'Course' && (\r\n \r\n
\r\n \r\n {checkStatus(data, t)}\r\n
\r\n \r\n \r\n \r\n \r\n {data.title}\r\n \r\n
\r\n \r\n {data.type === 'Course' && data.course_type !== 'scorm' && (\r\n \r\n | {data.lessons_count || 0}{' '}\r\n {t('general:lessons')}\r\n
\r\n )}\r\n \r\n {t(`general:${eventType}`)}\r\n
\r\n {data.is_ai_generated && (\r\n \r\n AI\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n {data.avg_rating && (\r\n
\r\n\r\n {data.type !== 'Course' && (\r\n \r\n {data.avg_rating.toFixed(2)}\r\n
\r\n )}\r\n {data.type === 'Course' && data.is_translated && (\r\n <>\r\n \r\n {t('v4:isTranslated')}\r\n
\r\n \r\n {getLanguage(data.lang)}\r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {getTextByType(data.type, 'date', t, data)}\r\n \r\n {{ date }} \r\n \r\n \r\n )}\r\n
\r\n )}\r\n\r\n {isPublishedToMarketplace && canTogglePublish && (\r\n \r\n {t(`general:${eventType}`)}\r\n
\r\n {data.type === 'Maze' && !data.is_published && (\r\n \r\n Draft\r\n
\r\n )}\r\n {data.type === general.LIVE_EVENT && data.start_date_time && (\r\n \r\n \r\n
\r\n )}\r\n \r\n {t('created')} {moment(data.created_at).format(dateFormat)}\r\n
\r\n \r\n \r\n )\r\n}\r\n\r\nexport default withTranslation('course')(ECourse)\r\n","import React from 'react'\r\nimport { Course } from '../'\r\nimport { Card, Col, Row } from 'antd'\r\nimport { SearchOutlined } from '@ant-design/icons'\r\n\r\nexport default ({\r\n data,\r\n onRemove,\r\n onEdit,\r\n user,\r\n onClone,\r\n onTranslate,\r\n search,\r\n isLoading\r\n}) => {\r\n return (\r\n \r\n {search\r\n ? `No results found for \"${search}\"`\r\n : 'No items available'}\r\n
\r\n \r\n \r\n )}\r\n\r\n{t('new_discussion_room')}\r\n
\r\n\r\n*/\r\n\r\nfunction WorkshopCreateButton({ onClickPath, title }) {\r\n return (\r\n history.push(onClickPath)}>\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default CreateButtons\r\n","import React, { Component } from 'react'\r\nimport { withTranslation } from 'react-i18next'\r\nimport moment from 'moment'\r\nimport _ from 'lodash'\r\nimport { Row, Col } from 'antd'\r\nimport InfiniteScroll from 'react-infinite-scroller'\r\nimport { CoursesContainer } from './styled'\r\nimport { Courses } from './internal'\r\nimport { Filter, Tag, Spinner, CloneModal } from '../../components'\r\nimport api from '../../services/api'\r\nimport CreateButtons from './internal/components/CreateButtons'\r\nimport NewHeader from '../../components/NewHeader'\r\nimport './style.scss'\r\n\r\nconst filterData = [\r\n { value: 'created_at', text: 'filters:date' },\r\n // { value: 'relevance', text: 'filters:relevance' },\r\n { value: 'popularity', text: 'filters:popularity' }\r\n]\r\n\r\nconst tagsData = [\r\n { value: 'all', text: 'v4:tags_all' },\r\n { value: 'course', text: 'workshop:tags_course' },\r\n // { value: 'scorm', text: 'v4:tags_scorm' },\r\n { value: 'live_event', text: 'workshop:tags_live' },\r\n // { value: 'live_assessment', text: 'workshop:tags_assessment' },\r\n { value: 'maze', text: 'MetaMaze' },\r\n { value: 'skill_journey', text: 'v4:tags_skillJourney' },\r\n { value: 'channel', text: 'v3:channel' },\r\n { value: 'podcast', text: 'v3:podcast' }\r\n]\r\n\r\nclass MyWorkshopPage extends Component {\r\n state = {\r\n order: filterData[0].value,\r\n search: '',\r\n tags: [tagsData[0].value],\r\n courseCloneTemplate: null,\r\n isClone: false,\r\n isTranslaton: false,\r\n isFetchingMazeData: false\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchData(true, 'MOUNT')\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetMazeList()\r\n }\r\n\r\n fetchData = async (isOrder, isMount) => {\r\n const { getWorkshopData } = this.props\r\n const { order, search } = this.state\r\n await getWorkshopData(\r\n { limit: 10, order, search },\r\n isOrder,\r\n this.state.tags\r\n )\r\n }\r\n\r\n onFilter = order => {\r\n this.setState({ order }, () => this.fetchData(true))\r\n }\r\n onChangeSearch = async search => {\r\n const { getWorkshopData } = this.props\r\n const { order } = this.state\r\n this.setState({ search: search })\r\n await getWorkshopData({ limit: 10, order, search }, true, ['all'])\r\n }\r\n\r\n onRemove = async item => {\r\n try {\r\n const {\r\n coursesActions,\r\n deleteEvent,\r\n deletePodcast,\r\n // deleteAssessment,\r\n handleMazeData\r\n } = this.props\r\n\r\n let deletionPromise\r\n switch (item.type) {\r\n case 'Course':\r\n deletionPromise = coursesActions.removeCourseById(item.id)\r\n break\r\n case 'Live Event':\r\n deletionPromise = deleteEvent(item.id)\r\n break\r\n case 'Podcast':\r\n deletionPromise = deletePodcast(item.id)\r\n break\r\n // case 'Live Assessment':\r\n // deletionPromise = deleteAssessment(item.id)\r\n // break\r\n case 'Maze':\r\n const data = {\r\n params: { programme_id: item.id },\r\n action: 'delete_programme'\r\n }\r\n deletionPromise = handleMazeData(data)\r\n break\r\n case 'Skill':\r\n deletionPromise = api.skillJourney.deleteSkillJourney(item.id)\r\n break\r\n case 'Channel':\r\n deletionPromise = api.channel.deleteChannel(item.id)\r\n break\r\n default:\r\n break\r\n }\r\n\r\n if (deletionPromise) {\r\n await deletionPromise\r\n\r\n this.fetchData(true)\r\n }\r\n } catch (error) {\r\n console.error('Error deleting:', error)\r\n }\r\n }\r\n\r\n onEdit = item => {\r\n if (item.is_cloning) return\r\n\r\n if (item.type === 'Course') {\r\n if (item.course_type === 'scorm')\r\n return this.props.history.push(`/scorm/${item.id}/edit`)\r\n return this.props.history.push(`/courses/${item.id}/edit`)\r\n } else if (item.type === 'Live Event') {\r\n return this.props.history.push(`/events/${item.id}/edit`)\r\n } else if (item.type === 'Podcast') {\r\n return this.props.history.push(`/podcast/${item.id}/edit`)\r\n // } else if (item.type === 'Live Assessment') {\r\n // return this.props.history.push(`/assessments/${item.id}/edit`)\r\n } else if (item.type === 'Maze') {\r\n return this.props.history.push(`maze/${item.id}/edit`)\r\n } else if (item.type === 'Skill') {\r\n return this.props.history.push(`/skill-journey/edit/${item.id}`)\r\n } else if (item.type === 'Channel') {\r\n return this.props.history.push(`/channel/${item.id}/edit`)\r\n }\r\n }\r\n\r\n onClone = data => {\r\n if (data.type === 'Maze') {\r\n data.title = 'Copy of ' + data.title\r\n this.setState({\r\n isClone: true,\r\n cloneData: data\r\n })\r\n } else {\r\n const { courses } = this.props\r\n\r\n if (courses.courseCloningProgress) return\r\n\r\n this.setState(\r\n {\r\n isTranslaton: false,\r\n isClone: true,\r\n cloneData: null\r\n },\r\n () => {\r\n this.getCourseById(data)\r\n }\r\n )\r\n }\r\n }\r\n onTranslate = data => {\r\n const { courses } = this.props\r\n if (courses.courseCloningProgress) return\r\n\r\n this.setState(\r\n {\r\n isTranslaton: true,\r\n isClone: true,\r\n cloneData: null\r\n },\r\n () => {\r\n this.getCourseById(data)\r\n }\r\n )\r\n }\r\n\r\n getCourseById = data => {\r\n const { coursesActions, initCloneSocket, user } = this.props\r\n const { isTranslaton } = this.state\r\n const { id, title, lang } = data\r\n initCloneSocket({ courseId: id, user })\r\n\r\n coursesActions.getCourseById(id).then(({ courses_lessons }) => {\r\n const courseLessons = _.map(courses_lessons, ({ title, id }) => {\r\n const newLesson = {\r\n title,\r\n id,\r\n isChecked: true\r\n }\r\n return newLesson\r\n })\r\n this.setState({\r\n courseCloneTemplate: {\r\n courseId: id,\r\n courseLang: lang || 'en',\r\n courseTitle: isTranslaton ? title : `Copy of ${title}`,\r\n courseLessons,\r\n totalLesson: courseLessons.length\r\n }\r\n })\r\n })\r\n }\r\n\r\n handleTags = value => {\r\n const { tags } = this.state\r\n const updatedTags = tags.filter(i => i !== 'all')\r\n\r\n if (tags.includes(value)) {\r\n this.setState({\r\n tags: tags.filter(i => i !== value),\r\n search: ''\r\n })\r\n } else {\r\n if (value === 'all') {\r\n this.setState({\r\n tags: [tagsData[0].value],\r\n search: ''\r\n })\r\n } else {\r\n this.setState({\r\n tags: updatedTags.concat(value),\r\n search: ''\r\n })\r\n }\r\n }\r\n }\r\n\r\n checkIsAdmin = () => {\r\n const {\r\n user: { info }\r\n } = this.props\r\n return info.isSuperAdmin || info.isAdmin\r\n }\r\n\r\n render() {\r\n const {\r\n courses: {\r\n workshopCourses: {\r\n hasMore: coursesHasMore,\r\n list: courses,\r\n fetch: coursesFetch\r\n }\r\n },\r\n events: {\r\n workshopEvents: {\r\n hasMore: eventsHasMore,\r\n list: events,\r\n fetch: eventsFetch\r\n },\r\n workshopPodcasts: {\r\n hasMore: podcastsHasMore,\r\n list: podcasts,\r\n fetch: podcastsFetch\r\n }\r\n },\r\n // assessments: {\r\n // workshopAssessments: {\r\n // hasMore: assessmentsHasMore,\r\n // list: assessments,\r\n // fetch: assessmentsFetch\r\n // }\r\n // },\r\n skillJourney: {\r\n workshopSkillJourneys: {\r\n fetch: skillJourneysFetch,\r\n list: skillJourneysList,\r\n hasMore: skillJourneysHasMore\r\n }\r\n },\r\n maze: {\r\n workshopMazes: {\r\n fetch: mazesFetch,\r\n list: mazesList,\r\n hasMore: mazesHasMore\r\n }\r\n },\r\n channel: {\r\n workshopChannels: {\r\n fetch: channelsFetch,\r\n list: channelsList,\r\n hasMore: channelsHasMore\r\n }\r\n },\r\n user,\r\n user: {\r\n info: { organization }\r\n },\r\n t\r\n } = this.props\r\n\r\n const {\r\n tags,\r\n search,\r\n cloneData,\r\n courseCloneTemplate,\r\n isClone,\r\n isTranslaton\r\n } = this.state\r\n const mazeData =\r\n mazesList && mazesList.map(item => ({ ...item, type: 'Maze' }))\r\n const courseData = courses\r\n\r\n // const courseData =\r\n // courses && courses.filter(item => item.course_type === null)\r\n // const scormData =\r\n // courses && courses.filter(item => item.course_type === 'scorm')\r\n\r\n const skillsData =\r\n skillJourneysList &&\r\n skillJourneysList.map(item => ({ ...item, type: 'Skill' }))\r\n\r\n const channelData =\r\n channelsList &&\r\n channelsList.map(item => ({\r\n ...item,\r\n type: 'Channel'\r\n }))\r\n const includesTag = tag => tags.includes(tag) || tags.includes('all')\r\n\r\n var listData = [\r\n includesTag('course') ? courseData : [],\r\n includesTag('live_event') ? events : [],\r\n includesTag('podcast') ? podcasts : [],\r\n includesTag('skill_journey') ? skillsData : [],\r\n includesTag('channel') ? channelData : [],\r\n ...(organization && organization.enable_maze\r\n ? [includesTag('maze') ? mazeData : []]\r\n : [])\r\n ].flat()\r\n\r\n const sortedData = listData.sort((a, b) =>\r\n moment(b.created_at).diff(moment(a.created_at))\r\n )\r\n\r\n const tagList =\r\n this.checkIsAdmin() && organization && organization.enable_maze\r\n ? tagsData\r\n : this.checkIsAdmin() && !(organization && organization.enable_maze)\r\n ? tagsData.filter(item => item.value !== 'maze')\r\n : _.filter(\r\n tagsData,\r\n item => item.value !== 'live_assessment' || item.value !== 'maze'\r\n )\r\n\r\n return (\r\n {title}
\r\n \r\n
\r\n \r\n {t('title')}
\r\n {t('subtitle')}
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n {t('courses_title')}
\r\n {t('courses_subtitle')}
\r\n \r\n {finish ? (\r\n
\r\n ) : (\r\n \r\n \r\n {loading.questions || loading.score ? (\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n \r\n 
\r\n
\r\n {score.position === 0 ? (\r\n <>\r\n {t('v3:welcome')}
\r\n{t('v3:podcast_to')}
\r\n{t('v3:share_sphere')}
\r\n\r\n {t('v3:team_knowledge_quest')}\r\n
\r\n\r\n {!(loading.questions || loading.score) && (\r\n <>\r\n {score.score !== 0 ? (\r\n\r\n
\r\n ) : (\r\n <>\r\n \r\n {t('v3:your_score')} \r\n \r\n {score.score}\r\n \r\n
\r\n\r\n
{t('v3:start_playing')}
\r\n \r\n )}\r\n \r\n )}\r\n \r\n ) : (\r\n <>\r\n\r\n
{t('v3:share_sphere_complete')}
\r\n{t('v3:final_score')}
\r\n\r\n \r\n {score.points}/{questionList.length}\r\n \r\n
\r\n\r\n
\r\n \r\n )}\r\n \r\n Your Total Score \r\n {finishScore}\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n ShareSphere
\r\n \r\n
\r\n \r\n {t('v3:your_score')} \r\n \r\n {score.points}/{questionList.length}\r\n \r\n
\r\n\r\n \r\n x {t('v3:close')}\r\n
\r\n \r\n \r\n {score.position} / {questionList.length}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {question.question}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {question.answers.map((ans, i) => {\r\n const isCorrectAnswer = question.checked && ans.status\r\n const isWrongAnswer =\r\n question.checked && !ans.status && ans.checked\r\n return (\r\n checkAnswer(ans, i)}\r\n key={i}\r\n >\r\n {isCorrectAnswer && (\r\n
\r\n )\r\n })}\r\n\r\n {question.checked && (\r\n \r\n nextQuestion(question.idx)}\r\n >\r\n {question.idx === questionList.length\r\n ? t('buttons:finish')\r\n : t('v3:play_next')}\r\n \r\n
\r\n )}\r\n \r\n \r\n {\r\n navigateTo('back')\r\n }}\r\n style={{ borderRadius: 25 }}\r\n >\r\n {t('buttons:cancel')}\r\n \r\n \r\n {!loading && \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\r\n changeImage(e, 'answer_image')\r\n }}\r\n />\r\n \r\n {getFieldDecorator('answer_image', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('v3:select_image_answer')\r\n }\r\n ]\r\n })(<>)}\r\n \r\n
\r\n \r\n \r\n {t('v3:share_sphere')}
\r\n \r\n \r\n \r\n \r\n {t('reports:question')}\r\n \r\n }\r\n required\r\n >\r\n {getFieldDecorator('question', {\r\n rules: [\r\n {\r\n required: true,\r\n message: 'Please input your question!'\r\n }\r\n ]\r\n })(\r\n \r\n )}\r\n \r\n\r\n \r\n {getFieldDecorator('answer_option', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('v3:select_answer')\r\n }\r\n ]\r\n })(\r\n \r\n \r\n \r\n {getFieldDecorator('categories', {\r\n rules: [\r\n {\r\n required: true,\r\n message: 'Please select category(s)!'\r\n }\r\n ]\r\n })(\r\n \r\n {categoryList.map(item => (\r\n \r\n ))}\r\n \r\n )}\r\n \r\n \r\n \r\n {\r\n changeImage(e, 'question_image')\r\n }}\r\n />\r\n \r\n {getFieldDecorator('question_image', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('v3:select_question_image')\r\n }\r\n ]\r\n })(<>)}\r\n \r\n
\r\n \r\n \r\n {t('v3:select_question')}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {getFieldDecorator('option_one', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('v3:check_option_one')\r\n }\r\n ]\r\n })(\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {getFieldDecorator('option_two', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('v3:check_option_two')\r\n }\r\n ]\r\n })(\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {getFieldDecorator('option_three', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('v3:check_option_three')\r\n }\r\n ]\r\n })(\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n {getFieldDecorator('option_four', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('v3:check_option_four')\r\n }\r\n ]\r\n })(\r\n \r\n
\r\n \r\n {\r\n addFile('question_image')\r\n }}\r\n >\r\n
\r\n )}\r\n \r\n {t('v3:question_image')}\r\n
\r\n {imageFile.question_image_url ? (\r\n \r\n {\r\n removeImage('question_image')\r\n }}\r\n />\r\n
\r\n ) : (\r\n \r\n
\r\n \r\n
\r\n +
\r\n {t('buttons:upload_image')}
\r\n \r\n {\r\n addFile('answer_image')\r\n }}\r\n >\r\n
\r\n )}\r\n {t('v3:ans_image')}
\r\n {imageFile.answer_image_url ? (\r\n \r\n {\r\n removeImage('answer_image')\r\n }}\r\n />\r\n
\r\n ) : (\r\n \r\n
\r\n \r\n
\r\n +
\r\n {t('v3:upload_image_question')}
\r\n \r\n \r\n {isLoading ? (\r\n \r\n \r\n {triviaList.length > 0 ? (\r\n \r\n {triviaList.map((question, i) => {\r\n return (\r\n \r\n ) : (\r\n
\r\n )}\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default withTranslation('trivia')(TriviaList)\r\n","import React from 'react'\r\nimport TriviaGame from './Game/Game'\r\nimport TriviaAddEdit from './AddEdit/AddEdit'\r\nimport TriviaList from './List/List'\r\nimport NewHeader from '../../components/NewHeader'\r\nimport './style.scss'\r\n\r\nconst Trivia = props => {\r\n const currentRoute = window.location.pathname.split('/').pop()\r\n const isEdit = /^\\d+$/.test(currentRoute)\r\n return (\r\n <>\r\n \r\n \r\n \r\n {\r\n addEditQuestion('ADD')\r\n }}\r\n >\r\n +add a question\r\n
\r\n \r\n \r\n \r\n {t('v3:share_sphere')}
\r\n \r\n \r\n
\r\n \r\n )\r\n })}\r\n \r\n {i + 1}. {question.question}\r\n
\r\n \r\n {\r\n !loading && addEditQuestion('EDIT', question)\r\n }}\r\n className=\"question_body_action_edit\"\r\n style={{ color: '#256BF6' }}\r\n />\r\n \r\n \r\n !loading && deleteQuestion(question)\r\n }\r\n okText=\"Yes\"\r\n cancelText=\"No\"\r\n icon={false}\r\n >\r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n Travia question list is empty.\r\n
\r\n \r\n
\r\n \r\n {currentRoute === 'add' &&
\r\n \r\n )\r\n}\r\n\r\nexport default Trivia\r\n","\r\nimport { connect } from 'react-redux'\r\nimport { bindActionCreators } from 'redux'\r\n\r\nimport * as triviaActions from '../../store/actions/trivia'\r\nimport actions from '../../store/actions'\r\nimport Trivia from './Router'\r\nexport default connect(\r\n state => ({\r\n isLoading: state.trivia.isLoading,\r\n triviaList: state.trivia.triviaList\r\n }),\r\n dispatch => ({\r\n triviaActions: bindActionCreators(triviaActions, dispatch),\r\n getBucketNames: data => dispatch(actions.trivia.getBucketNames(data)),\r\n createQuitz: data => dispatch(actions.trivia.createQuitz(data)),\r\n updateQuitz: data => dispatch(actions.trivia.updateQuitz(data)),\r\n updateScore: data => dispatch(actions.trivia.updateScore(data)),\r\n getScore: data => dispatch(actions.trivia.getScore(data)),\r\n gameQuestions: data => dispatch(actions.trivia.gameQuestions(data)),\r\n fetchQuestions: data => dispatch(actions.trivia.fetchQuestions(data)),\r\n fetchQuestionDetail: data => dispatch(actions.trivia.fetchQuestionDetail(data)),\r\n deleteQuestion: data => dispatch(actions.trivia.deleteQuestion(data)),\r\n getCategories: () => dispatch(actions.organizations.getCategories()),\r\n })\r\n)(Trivia)\r\n","import Library from './Library'\r\n\r\nexport default Library","import React from 'react'\r\nimport { Switch, Route } from 'react-router-dom'\r\n\r\nimport { List, Gallery } from './internal'\r\n\r\nconst Library = () => (\r\n {t('page_title')}
\r\n{t('page_subtitle')}
\r\n\r\n
\r\n Calligraphy for Beginners
\r\n 5 lessons
\r\n \r\n {tabs.length > 0 && (\r\n {\r\n if (key <= currentStepIndex) {\r\n history.push(tabs[key].key.replace(':id', id))\r\n }\r\n }}\r\n >\r\n {tabs.map((i, index) => (\r\n \r\n {i.tab}\r\n \r\n }\r\n key={i.key}\r\n disabled={\r\n index !== currentStepIndex && !visitedSteps.includes(index)\r\n }\r\n />\r\n ))}\r\n \r\n )}\r\n
\r\n )\r\n}\r\n\r\nexport default withRouter(CourseCreateTopPanel)\r\n","import React, { Component } from 'react'\r\nimport _ from 'lodash'\r\nimport {\r\n Radio,\r\n Input,\r\n Button,\r\n Popover,\r\n Tabs,\r\n Slider,\r\n Spin,\r\n Popconfirm,\r\n InputNumber\r\n} from 'antd'\r\nimport { updateMedia } from '../../../../../../../services/api/library'\r\nimport './badge.scss'\r\n\r\nimport background from '../../../../../../../assets/background.svg'\r\nimport text from '../../../../../../../assets/text.svg'\r\nimport icon from '../../../../../../../assets/icon.svg'\r\nimport pencil from '../../../../../../../assets/pencil.svg'\r\nimport bin from '../../../../../../../assets/bin.svg'\r\nimport iconContainer from '../../../../../../../assets/icon_tsp.png'\r\n\r\nimport { SketchPicker } from 'react-color'\r\nimport {\r\n BoldOutlined,\r\n CloseOutlined,\r\n ItalicOutlined,\r\n VerticalAlignMiddleOutlined,\r\n ReloadOutlined,\r\n LoadingOutlined\r\n} from '@ant-design/icons'\r\nimport { VerticalIcon, HorizontalIcon } from '../../images'\r\n\r\nimport ReactSVG from 'react-svg'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nconst { TabPane } = Tabs\r\nconst antIcon = \r\n
\r\n )\r\n }\r\n\r\n icon = () => {\r\n return (\r\n \r\n 
\r\n
\r\n Background\r\n \r\n
\r\n )\r\n }\r\n\r\n text = () => {\r\n return (\r\n \r\n \r\n
\r\n Icon\r\n \r\n
\r\n )\r\n }\r\n\r\n clearIcon = () =>\r\n this.setState(\r\n { selectedIcon: null, isIconSelected: false, iconKey: null },\r\n () => {\r\n this.clearIconColor()\r\n }\r\n )\r\n\r\n clearText = () =>\r\n this.setState({ text: '', isTextAdded: false }, () => {\r\n this.clearAndDraw()\r\n })\r\n\r\n clearIconColor = () =>\r\n this.setState({ iconColor: null }, () => {\r\n this.clearAndDraw()\r\n })\r\n\r\n clearBackgroundFilled = () => {\r\n this.setState(\r\n {\r\n templateColor: ''\r\n },\r\n () => this.clearAndDraw()\r\n )\r\n }\r\n\r\n handleUserUpload = e => {\r\n let that = this\r\n var file = e.target.files[0]\r\n var reader = new FileReader()\r\n reader.onloadend = function() {\r\n that.uploadUserIcon(reader.result, file)\r\n }\r\n reader.readAsDataURL(file)\r\n }\r\n\r\n uploadUserIcon = (image, data) => {\r\n this.setState(\r\n {\r\n userUploadedIcon: image,\r\n selectedIcon: null,\r\n isIconSelected: true,\r\n imageFormat: 'ICON',\r\n iconLoading: true\r\n },\r\n () => {\r\n const { upload } = this.props\r\n const body = {\r\n croppedImage: image,\r\n lastModifiedDate: new Date().getTime(),\r\n name: data.name,\r\n type: data.type,\r\n size: data.size,\r\n imgFormat: 'ICON'\r\n }\r\n upload(body).then(res => {\r\n const { id } = res\r\n this.setState(\r\n {\r\n userUploadedIconId: id\r\n },\r\n () => {\r\n this.getUserImages('ICON')\r\n }\r\n )\r\n })\r\n }\r\n )\r\n }\r\n\r\n onSliderChange = value => {\r\n this.setState(\r\n {\r\n fontSize: value\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleIconSize = value => {\r\n this.setState(\r\n {\r\n iconScaleFactor: value\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n switchTextDecoration = async key => {\r\n const { textDecoration } = this.state\r\n let style = ''\r\n switch (key) {\r\n case 1:\r\n await this.setState({\r\n textDecoration: 'normal'\r\n })\r\n break\r\n case 2:\r\n if (textDecoration === 'bold') {\r\n style = 'normal'\r\n } else if (textDecoration.includes('bold')) {\r\n style = 'italic'\r\n } else if (textDecoration === 'italic') {\r\n style = `italic bold`\r\n } else {\r\n style = 'bold'\r\n }\r\n await this.setState({\r\n textDecoration: style\r\n })\r\n break\r\n case 3:\r\n if (textDecoration === 'italic') {\r\n style = 'normal'\r\n } else if (textDecoration.includes('italic')) {\r\n style = 'bold'\r\n } else if (textDecoration === 'bold') {\r\n style = `italic bold`\r\n } else {\r\n style = 'italic'\r\n }\r\n await this.setState({\r\n textDecoration: style\r\n })\r\n break\r\n default:\r\n break\r\n }\r\n this.clearAndDraw()\r\n }\r\n\r\n textCircle = (ctx, x, y) => {\r\n const { text, topSlant, textRadius } = this.state\r\n let space = Math.PI / 12 || 0\r\n var numRadsPerLetter = (Math.PI - space * 2) / text.length\r\n ctx.save()\r\n ctx.translate(x, y)\r\n var k = topSlant ? 1 : -1\r\n ctx.rotate(-k * ((Math.PI - numRadsPerLetter) / 2 - space))\r\n for (var i = 0; i < text.length; i++) {\r\n ctx.save()\r\n ctx.rotate(k * i * numRadsPerLetter)\r\n ctx.textAlign = 'center'\r\n ctx.textBaseline = !topSlant ? 'top' : 'bottom'\r\n ctx.fillText(text[i], 0, -k * textRadius)\r\n ctx.restore()\r\n }\r\n ctx.restore()\r\n }\r\n\r\n changeIconColor = color => {\r\n this.setState(\r\n {\r\n iconColor: color.hex\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleTextOffsetX = val => {\r\n this.setState(\r\n {\r\n textOffsetX: val\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleTextOffsetY = val => {\r\n this.setState(\r\n {\r\n textOffsetY: val\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleIconOffsetY = val => {\r\n this.setState(\r\n {\r\n iconOffsetY: val\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleIconOffsetX = val => {\r\n this.setState(\r\n {\r\n iconOffsetX: val\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleTextSlant = () => {\r\n this.setState(\r\n {\r\n curveText: !this.state.curveText\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleSlantDirection = () => {\r\n this.setState(\r\n {\r\n topSlant: !this.state.topSlant\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleTextRadius = val => {\r\n this.setState(\r\n {\r\n textRadius: val\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleBadgeName = e => {\r\n const inputValue = e.target.value\r\n if (inputValue.length <= 150) {\r\n this.setState({\r\n badgeName: inputValue\r\n })\r\n } else {\r\n this.setState({\r\n badgeName: inputValue.slice(0, 150)\r\n })\r\n }\r\n }\r\n\r\n handleBadgeDetails = e => {\r\n this.setState({\r\n badgeDetails: e.target.value\r\n })\r\n }\r\n\r\n clearCanvas = () => {\r\n this.setState(\r\n {\r\n templateColor: '',\r\n textColor: '#000000',\r\n iconScaleFactor: null,\r\n curveText: null,\r\n isIconSelected: null,\r\n isTextAdded: null,\r\n fontSize: 22,\r\n textDecoration: 'normal',\r\n textOffsetX: null,\r\n textOffsetY: null,\r\n textRadius: 60,\r\n iconOffsetX: null,\r\n iconOffsetY: null,\r\n iconColor: '',\r\n text: '',\r\n iconKey: null,\r\n templateKey: 1,\r\n topSlant: null,\r\n selectedBadgeTemplate: this.state.badgeTemplates[1],\r\n selectedIcon: null,\r\n badgeName: '',\r\n badgeDetails: '',\r\n toEditBadgeId: null,\r\n iconId: null\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n onTabChange = activeKey => {\r\n this.setState({ activeTab: activeKey })\r\n }\r\n\r\n render() {\r\n const {\r\n templateColor,\r\n textColor,\r\n iconScaleFactor,\r\n curveText,\r\n isIconSelected,\r\n isTextAdded,\r\n fontSize,\r\n textDecoration,\r\n textOffsetX,\r\n textOffsetY,\r\n textRadius,\r\n iconOffsetX,\r\n iconOffsetY,\r\n iconColor,\r\n icons,\r\n badgeTemplates,\r\n badgeFetching,\r\n historyBadges,\r\n badgeName,\r\n badgeDetails,\r\n activeTab,\r\n text\r\n } = this.state\r\n\r\n const { t } = this.props\r\n return (\r\n \r\n 
\r\n
\r\n Text\r\n \r\n
\r\n \r\n \r\n \r\n ) : null}\r\n\r\n {activeTab === '3' ? (\r\n {t('v4:create_badge')}
\r\n\r\n
\r\n \r\n this.switchTextDecoration(3)}\r\n >\r\n
\r\n \r\n
\r\n \r\n \r\n {/* Tab - Badge Template / Background */}\r\n\r\n \r\n \r\n {Object.entries(badgeTemplates).map(([key, val]) => (\r\n \r\n 
\r\n \r\n ))}\r\n \r\n \r\n\r\n {/* Tab - Text inside badge & text manipulation */}\r\n\r\n \r\n\r\n {/* Tab - Icons Selection */}\r\n\r\n \r\n \r\n {Object.entries(icons).map(([key, val]) => (\r\n \r\n \r\n \r\n ))}\r\n \r\n {!this.state.userIcons && (\r\n
\r\n )}\r\n \r\n \r\n \r\n {t('v4:change_bg')}\r\n
\r\n \r\n \r\n {this.state.userIcons &&\r\n this.state.userIcons.map(item => (\r\n this.onUserIconChange(item)}\r\n className=\"badge__icon\"\r\n value={item}\r\n key={item.id}\r\n >\r\n 
\r\n
\r\n ))}\r\n \r\n
\r\n \r\n
\r\n {activeTab === '2' ? (\r\n \r\n
\r\n \r\n {templateColor && (\r\n
\r\n \r\n {t('v4:background')}\r\n \r\n
\r\n )}\r\n {isIconSelected && (\r\n \r\n {t('v4:icon')}\r\n \r\n
\r\n )}\r\n {isTextAdded && (\r\n \r\n {t('v4:only_text')}\r\n \r\n
\r\n )}\r\n {iconColor && (\r\n \r\n {t('v4:icon_color')}\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n this.handleText(e.target.value)}\r\n placeholder={t('v4:leadership')}\r\n />\r\n
\r\n \r\n {t('v4:only_text')}\r\n \r\n {t('v4:charecters_fifteen_less')}\r\n \r\n
\r\n \r\n
\r\n \r\n {t('v4:font_size')}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {t('v4:text_radius')}\r\n
\r\n \r\n
\r\n \r\n {t('v4:text_arc')}\r\n
\r\n \r\n \r\n {t('v4:slant_text')}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {t('v4:horizontal')}
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n {t('v4:vertical')}
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n this.switchTextDecoration(2)}\r\n >\r\n
\r\n \r\n this.switchTextDecoration(1)}\r\n >\r\n {t('v4:normal')}\r\n
\r\n \r\n {t('v4:change_color')}\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n }\r\n title={t('v4:icon_size')}\r\n trigger=\"click\"\r\n className=\"font_size_picker\"\r\n >\r\n \r\n {t('v4:icon_size')}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {t('v4:horizontal')}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('v4:vertical')}
\r\n\r\n
\r\n \r\n
\r\n \r\n this.changeIconColor(val)}\r\n />\r\n }\r\n title=\"Change icon color\"\r\n trigger=\"click\"\r\n className=\"picker-container\"\r\n >\r\n \r\n
\r\n \r\n ) : null}\r\n\r\n {activeTab === '2' || activeTab === '3' ? null : (\r\n \r\n {t('v4:change_icon_color')}\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n\r\n {/* User History of Badge Creation */}\r\n\r\n \r\n
\r\n \r\n {t('v4:name_badges')}\r\n \r\n {t('v4:should_less_150')}{' '}\r\n \r\n
\r\n \r\n {t('general:details')}\r\n
\r\n \r\n this.clearCanvas()}\r\n >\r\n {t('v4:delete')}\r\n \r\n this.saveUserBadge()}\r\n style={{\r\n backgroundColor: '#00BE5E',\r\n cursor:\r\n badgeName && badgeDetails\r\n ? 'pointer'\r\n : 'no-drop'\r\n }}\r\n >\r\n {this.state.toEditBadgeId\r\n ? 'Update badge'\r\n : 'Save For Later'}\r\n \r\n
\r\n \r\n {activeTab === '2' || activeTab === '3' ? (\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n {t('v4:name_badges')}\r\n \r\n {t('v4:should_less_150')}\r\n \r\n
\r\n \r\n {t('general:details')}\r\n
\r\n \r\n this.clearCanvas()}\r\n >\r\n {t('v4:delete')}\r\n \r\n this.saveUserBadge()}\r\n style={{\r\n backgroundColor: '#00BE5E',\r\n cursor:\r\n badgeName && badgeDetails ? 'pointer' : 'no-drop'\r\n }}\r\n >\r\n {this.state.toEditBadgeId\r\n ? 'Update badge'\r\n : 'Save For Later'}\r\n \r\n
\r\n {t('v4:badge_history')}
\r\n \r\n {badgeFetching && \r\n this.deleteBadgeHistory(item)}\r\n okText=\"Yes\"\r\n cancelText=\"No\"\r\n icon={null}\r\n >\r\n
\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n this.putItemInCanvas(item)}\r\n >\r\n
\r\n \r\n
\r\n {item.filename}
\r\n{item.description}
\r\n\r\n this.editBadge(item)}\r\n >\r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n )\r\n\r\n return (\r\n \r\n Generating Certificate...
\r\n {!logoById && }\r\n {logoById && !userView && (\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {addSignature && (\r\n
\r\n \r\n )\r\n }\r\n}\r\n","import Template from './Template'\r\n\r\nexport default Template\r\n","import React, { Component } from 'react'\r\nimport { Radio, Button, Tabs, Spin, Popconfirm, Tooltip } from 'antd'\r\nimport {\r\n updateMedia,\r\n removeMedias\r\n} from '../../../../../../../services/api/library'\r\nimport './certificate.scss'\r\n\r\nimport template from '../../../../../../../assets/template.svg'\r\nimport icon from '../../../../../../../assets/icon.svg'\r\nimport logo from '../../../../../../../assets/logo.svg'\r\nimport pencil from '../../../../../../../assets/pencil.svg'\r\nimport bin from '../../../../../../../assets/bin.svg'\r\nimport signature from '../../../../../../../assets/signature.svg'\r\nimport Template from '../../../../../../../components/CertificateTemplate'\r\n\r\nimport { LoadingOutlined } from '@ant-design/icons'\r\nimport html2canvas from 'html2canvas'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { T } from 'antd/lib/upload/utils'\r\n\r\nconst { TabPane } = Tabs\r\nconst antIcon = \r\n
\r\n )}\r\n {!addSignature && (\r\n \r\n )}\r\n {certificateIcon && (\r\n \r\n {!signaturesById[1] && (\r\n \r\n )}\r\n {signaturesById && signaturesById[1] && !userView && (\r\n
\r\n _________________\r\n \r\n
\r\n \r\n
\r\n \r\n {userView && (\r\n
\r\n )}\r\n \r\n
\r\n \r\n {!signaturesById[0] && (\r\n \r\n )}\r\n {signaturesById && signaturesById[0] && !userView && (\r\n
\r\n _________________\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n 
\r\n \r\n\r\n {t('v4:templates')}\r\n
\r\n )\r\n }\r\n\r\n icon = () => {\r\n const { t } = this.props\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n {t('v4:icon')}\r\n
\r\n )\r\n }\r\n\r\n signature = () => {\r\n const { t } = this.props\r\n return (\r\n \r\n \r\n 
\r\n \r\n\r\n {t('v4:sign')}\r\n
\r\n )\r\n }\r\n\r\n logo = () => {\r\n const { t } = this.props\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n {t('v4:logo')}\r\n
\r\n )\r\n }\r\n\r\n onIconChange = e => {\r\n this.setState({\r\n selectedUserIcon: null,\r\n selectedUserIconId: null,\r\n selectedIcon: this.state.icons[e.target.value]\r\n })\r\n }\r\n\r\n onTemplateChange = e =>\r\n this.setState({ selectedTemplate: this.state.templates[e.target.value] })\r\n\r\n onUserImageChange = (item, type) => {\r\n this.setState({\r\n [`selectedUser${type}`]: item.link,\r\n [`selectedUser${type}Id`]: item.id,\r\n ...(type === 'Icon' && {\r\n [`selectedIcon`]: null\r\n })\r\n })\r\n }\r\n\r\n handleUserUpload = (e, type) => {\r\n let that = this\r\n var file = e.target.files[0]\r\n var reader = new FileReader()\r\n reader.onloadend = function () {\r\n that.uploadUserImage(reader.result, file, type)\r\n }\r\n reader.readAsDataURL(file)\r\n }\r\n\r\n uploadUserImage = (image, data, type) => {\r\n this.setState(\r\n {\r\n [`userUploaded${type}`]: image,\r\n [`is${type}Uploading`]: true\r\n },\r\n () => {\r\n const { upload } = this.props\r\n const format = type.toUpperCase()\r\n const body = {\r\n croppedImage: image,\r\n lastModifiedDate: new Date().getTime(),\r\n name: data.name,\r\n type: data.type,\r\n size: data.size,\r\n imgFormat: format\r\n }\r\n upload(body).then(res => {\r\n const { id } = res\r\n this.setState(\r\n {\r\n [`userUploaded${type}Id`]: id,\r\n [`is${type}Uploading`]: false\r\n },\r\n () => {\r\n this.getUserImages(type)\r\n }\r\n )\r\n })\r\n }\r\n )\r\n }\r\n\r\n handleCertificateText = item => {\r\n this.setState({\r\n [item.name]: item.value,\r\n certificateHistory: null\r\n })\r\n }\r\n\r\n handleImageInfo = () => {\r\n window.scrollTo(0, 0)\r\n const certificate = document.getElementById('certificate')\r\n const {\r\n selectedUserIconId,\r\n selectedIcon,\r\n selectedUserLogoId,\r\n signatures,\r\n selectedTemplate\r\n } = this.state\r\n\r\n const customTextData = this.getCustomTextData()\r\n\r\n return html2canvas(certificate).then(canvas => {\r\n var image = canvas.toDataURL('image/png', canvas.width, canvas.height)\r\n let y = [...image].slice(-1)[0] === '==' ? 2 : 1\r\n let x = image.length * (3 / 4) - y\r\n\r\n const body = {\r\n croppedImage: image,\r\n lastModifiedDate: new Date(),\r\n [`${this.state.toUpdateCertificateId ? 'filename' : 'name'}`]: this\r\n .state.certificateTitle,\r\n size: x,\r\n type: `image/png`,\r\n imgFormat: 'CERT',\r\n customData: {\r\n ...customTextData,\r\n selectedUserIconId,\r\n selectedIcon,\r\n selectedUserLogoId,\r\n signatures,\r\n selectedTemplate,\r\n saveHistory: true\r\n }\r\n }\r\n return body\r\n })\r\n }\r\n\r\n handleLineText = line => {\r\n const { toUpdateCertificateId, certificateHistory } = this.state\r\n var text\r\n if (toUpdateCertificateId) {\r\n text = String.raw(`this.state.${line}`) || certificateHistory.line || null\r\n } else {\r\n text = String.raw(`this.state.${line}`) || null\r\n }\r\n return text\r\n }\r\n\r\n getCustomTextData = () => {\r\n const { line1, line2, line4, line5, line6, line7, line8 } = this.state\r\n const textValues = {\r\n line1,\r\n line2,\r\n line4,\r\n line5,\r\n line6,\r\n line7,\r\n line8\r\n }\r\n return Object.keys(textValues)\r\n .filter(key => textValues[key] !== undefined)\r\n .reduce((obj, key) => {\r\n obj[key] = textValues[key]\r\n return obj\r\n }, {})\r\n }\r\n\r\n saveUserCertificate = () => {\r\n this.setState(\r\n {\r\n isCertificateUploading: true\r\n },\r\n async () => {\r\n const { upload } = this.props\r\n const imageData = await this.handleImageInfo()\r\n if (this.state.toUpdateCertificateId) {\r\n updateMedia(this.state.toUpdateCertificateId, imageData).then(() => {\r\n this.setState(\r\n {\r\n toUpdateCertificateId: null\r\n },\r\n () => {\r\n this.getUserImages(TYPES.CERTIFICATE)\r\n }\r\n )\r\n })\r\n } else {\r\n upload(imageData).then(() => {\r\n this.getUserImages(TYPES.CERTIFICATE)\r\n })\r\n }\r\n }\r\n )\r\n }\r\n\r\n clearCertificate = () =>\r\n this.setState({\r\n selectedTemplate: this.state.templates[0],\r\n certificateTitle: '',\r\n selectedIcon: null,\r\n selectedUserIcon: null,\r\n signatures: [],\r\n selectedUserLogo: null,\r\n selectedUserIconId: null,\r\n selectedUserLogoId: null,\r\n addSignature: false,\r\n certificateHistory: null,\r\n toUpdateCertificateId: null,\r\n clearCertificate: true\r\n })\r\n\r\n onClearImage = type => {\r\n switch (type) {\r\n case TYPES.ICON:\r\n this.setState({\r\n selectedIcon: null,\r\n selectedUserIcon: null,\r\n selectedUserIconId: null\r\n })\r\n break\r\n case TYPES.LOGO:\r\n this.setState({ selectedUserLogo: null, selectedUserLogoId: null })\r\n break\r\n case TYPES.SIGNATURE:\r\n if (this.state.addSignature) {\r\n this.setState({\r\n addSignature: false,\r\n currentIndex: 1,\r\n signatures: [this.state.signatures[1]]\r\n })\r\n } else {\r\n this.setState({\r\n addSignature: false,\r\n currentIndex: 0,\r\n signatures: []\r\n })\r\n }\r\n break\r\n case TYPES.SIGNATURE_TWO:\r\n this.setState({\r\n addSignature: false,\r\n currentIndex: 1,\r\n signatures: [this.state.signatures[0]]\r\n })\r\n break\r\n\r\n default:\r\n break\r\n }\r\n }\r\n\r\n onClear = () => this.setState({ clearCertificate: false })\r\n\r\n addSignature = () => this.setState({ addSignature: true })\r\n\r\n onUserSignatureSelect = item => {\r\n const { signatures, currentIndex, addSignature } = this.state\r\n var mySigns = [...signatures]\r\n var index = addSignature ? currentIndex : 0\r\n const data = { id: item.id, link: item.link }\r\n mySigns[index] = data\r\n index = (index + 1) % 2\r\n this.setState({\r\n signatures: mySigns,\r\n currentIndex: index\r\n })\r\n }\r\n\r\n putItemInCanvas = item => {\r\n const { custom_data } = item\r\n if (custom_data) console.log(custom_data)\r\n this.setState({\r\n selectedCertId: item.id,\r\n line1: custom_data.line1 || this.state.line1,\r\n line2: custom_data.line2 || this.state.line2,\r\n line4: custom_data.line4 || this.state.line4,\r\n line5: custom_data.line5 || this.state.line5,\r\n line6: custom_data.line6 || this.state.line6,\r\n line7: custom_data.line7 || this.state.line7,\r\n line8: custom_data.line8 || this.state.line8,\r\n selectedIcon: custom_data.selectedIcon || null,\r\n selectedUserIcon: custom_data.selectedUserIcon || null,\r\n selectedUserIconId: custom_data.selectedUserIconId || null,\r\n selectedUserLogo: custom_data.selectedUserLogo || null,\r\n selectedUserLogoId: custom_data.selectedUserLogoId || null,\r\n addSignature: custom_data.signatures.length === 2,\r\n signatures: custom_data.signatures || [],\r\n selectedTemplate: custom_data.selectedTemplate || null,\r\n certificateHistory: item.custom_data,\r\n certificateTitle: item.filename\r\n })\r\n }\r\n\r\n editCertificate = item => {\r\n this.setState(\r\n {\r\n toUpdateCertificateId: item.id,\r\n selectedCertId: item.id\r\n },\r\n () => {\r\n this.putItemInCanvas(item)\r\n }\r\n )\r\n }\r\n\r\n deleteCertificateHistory = item => {\r\n const { id } = item\r\n const data = {\r\n mediaIds: [id],\r\n custom_data: {\r\n ...item.custom_data,\r\n saveHistory: false\r\n }\r\n }\r\n\r\n this.setState({ isDeleting: true, toUpdateCertificateId: id }, () => {\r\n removeMedias(data)\r\n .then(() => {\r\n this.setState({\r\n toUpdateCertificateId: null,\r\n isDeleting: false,\r\n certificatesWithHistory: this.state.certificatesWithHistory.filter(\r\n cert => cert.id !== id\r\n )\r\n })\r\n })\r\n .catch(error => {\r\n console.error('Error deleting certificate:', error)\r\n this.setState({ isDeleting: false })\r\n })\r\n })\r\n }\r\n\r\n uploadCertificate = () => {\r\n this.setState(\r\n {\r\n isCertificateSaving: true\r\n },\r\n async () => {\r\n const { onUploadImage } = this.props\r\n const body = await this.handleImageInfo()\r\n onUploadImage(body)\r\n }\r\n )\r\n }\r\n\r\n getImageById = (params, type) => {\r\n if (params) {\r\n if (type === TYPES.LOGO) {\r\n const data = this.state.userLogos.filter(logo => logo.id === params)[0]\r\n return data && data.link\r\n } else if (type === TYPES.ICON) {\r\n const data = this.state.userIcons.filter(icon => icon.id === params)[0]\r\n return data && data.link\r\n } else {\r\n const data = params.map(item => {\r\n const signature = this.state.userSignatures.filter(\r\n signature => signature.id === item.id\r\n )\r\n if (signature.length !== 0) {\r\n return {\r\n id: signature[0].id,\r\n link: signature[0].link\r\n }\r\n } else return item\r\n })\r\n console.log(params, data)\r\n return data\r\n }\r\n }\r\n }\r\n\r\n handleCertName = e => {\r\n const inputValue = e.target.value\r\n if (inputValue.length <= 150) {\r\n this.setState({\r\n certificateTitle: inputValue\r\n })\r\n } else {\r\n this.setState({\r\n certificateTitle: inputValue.slice(0, 150)\r\n })\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n type,\r\n icons,\r\n templates,\r\n signatures,\r\n certificatesWithHistory,\r\n selectedCertId,\r\n selectedIcon,\r\n selectedUserIcon,\r\n selectedUserIconId,\r\n selectedUserLogo,\r\n selectedUserLogoId,\r\n certificateHistory,\r\n selectedTemplate,\r\n clearCertificate,\r\n addSignature\r\n } = this.state\r\n const iconById = this.getImageById(selectedUserIconId, TYPES.ICON)\r\n const logoById = this.getImageById(selectedUserLogoId, TYPES.LOGO)\r\n const signaturesById = this.getImageById(signatures, TYPES.SIGNATURE)\r\n const { t } = this.props\r\n return (\r\n \r\n
\r\n \r\n\r\n {/* User History of Certificate Creation */}\r\n\r\n \r\n {t('v4:create_certificate')}\r\n
\r\n\r\n\r\n
\r\n {/* \r\n \r\n this.handleUserUpload(e, TYPES.LOGO)}\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {this.state.userLogos && (\r\n
\r\n )}\r\n \r\n \r\n this.handleUserUpload(e, TYPES.ICON)}\r\n />\r\n \r\n \r\n \r\n\r\n \r\n {this.state.userSignatures && (\r\n
\r\n )}\r\n \r\n \r\n {/* Tab - Certificate Template / Background */}\r\n\r\n \r\n \r\n {Object.entries(templates).map(([key, val]) => (\r\n \r\n \r\n\r\n {/* Tab - Icons Selection */}\r\n\r\n \r\n \r\n {Object.entries(icons).map(([key, val]) => (\r\n \r\n \r\n \r\n ))}\r\n \r\n\r\n {this.state.userIcons && (\r\n
\r\n )}\r\n \r\n {' '}\r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n {this.state.userIcons &&\r\n this.state.userIcons.map(item => (\r\n \r\n this.onUserImageChange(item, TYPES.ICON)\r\n }\r\n className=\"certificate__icon\"\r\n value={item}\r\n key={item.id}\r\n >\r\n \r\n
\r\n ))}\r\n \r\n {this.state.userSignatures &&\r\n this.state.userSignatures.map(item => (\r\n \r\n this.onUserSignatureSelect(item)\r\n }\r\n className=\"certificate__icon\"\r\n value={item}\r\n key={item.id}\r\n >\r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.handleUserUpload(e, TYPES.SIGNATURE)\r\n }\r\n />\r\n \r\n \r\n
\r\n {!addSignature && signatures.length === 1 && (\r\n \r\n )}\r\n \r\n {this.state.userLogos &&\r\n this.state.userLogos.map(item => (\r\n \r\n this.onUserImageChange(item, TYPES.LOGO)\r\n }\r\n className=\"certificate__icon\"\r\n value={item}\r\n key={item.id}\r\n >\r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n \r\n\r\n \r\n
*/}\r\n \r\n {/*
\r\n \r\n \r\n \r\n \r\n Your Certificate
*/}\r\n\r\n
\r\n \r\n
\r\n \r\n {t('v4:name_of_cert')}\r\n \r\n {t('v4:should_less_150')}\r\n \r\n
\r\n \r\n \r\n {t('v4:delete')}\r\n \r\n this.saveUserCertificate()}\r\n disabled={!this.state.certificateTitle}\r\n style={{\r\n background:\r\n 'linear-gradient(180deg, #698bf2 0%, #5057d5 100%)'\r\n }}\r\n >\r\n {this.state.toUpdateCertificateId\r\n ? 'Update Certificate'\r\n : 'Save For Later'}\r\n \r\n
\r\n \r\n
\r\n \r\n ))}\r\n {t('v4:certificate_history')}
\r\n \r\n \r\n \r\n this.deleteCertificateHistory(item)\r\n }\r\n okText=\"Yes\"\r\n cancelText=\"No\"\r\n icon={null}\r\n >\r\n
\r\n \r\n this.putItemInCanvas(item)}\r\n >\r\n
\r\n \r\n \r\n \r\n
\r\n {item.filename}
\r\n\r\n this.editCertificate(item)}\r\n >\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {createCourseText}\r\n {isMarketPlace ? (\r\n <span className=\"corse-market-place\">\r\n {t('v4:market_place_space')}\r\n </span>\r\n ) : (\r\n ''\r\n )}\r\n \r\n
\r\n {!isRestricted && (\r\n {t('v4:created_course_plan')}
\r\n\r\n \r\n \r\n {isMarketPlace ? (\r\n <>Save & Continue\r\n ) : (\r\n <>\r\n
\r\n )}\r\n \r\n {showAiGenerationOption && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n )\r\n}\r\n\r\nexport { FormHeader }\r\n","import { Typography } from 'antd'\r\nimport React, { useState } from 'react'\r\n\r\nimport './index.css'\r\nconst { Text } = Typography\r\n\r\nconst CustomSwitch = ({ label, onChanged, value }) => {\r\n const [isOn, setIsOn] = useState(value)\r\n const toggleSwitch = () => {\r\n setIsOn(!isOn)\r\n onChanged(isOn)\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {label && (\r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport { CustomSwitch }\r\n","import styled from 'styled-components'\r\nimport { styleguide } from '../../constants'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst Page = styled.div``\r\n\r\nPage.Column = styled.div`\r\n margin-bottom: 2.4rem;\r\n`\r\n\r\nPage.Dropzone = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 0.3rem;\r\n border: 1px dashed ${colors.darkGreyTwo};\r\n transition: border-color 0.2s;\r\n cursor: pointer;\r\n height: 300px;\r\n width: 100%\r\n &:hover {\r\n border-color: ${colors.blue};\r\n }\r\n\r\n ${props =>\r\n props.active &&\r\n `\r\n background: rgba(0, 104, 255, 0.1);\r\n border-color: ${colors.blue};\r\n `}\r\n\r\n ${props =>\r\n props.background &&\r\n `\r\n background-image: url(${props.background});\r\n background-position: center;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n `}\r\n`\r\n\r\nPage.Dropzone.Text = styled.div`\r\n font-weight: 700;\r\n font-size: 1.6rem;\r\n`\r\nPage.Dropzone.Button = styled.div`\r\n padding: 0.4rem 2.4rem;\r\n text-decoration: uppercase;\r\n border: 1px solid ${colors.darkGreyThree};\r\n border-radius: 5rem;\r\n background: rgba(255, 255, 255, 0.8);\r\n\r\n display: flex;\r\n align-items: center;\r\n transition: border-color 0.2s, color 0.2s, opacity 0.2s;\r\n\r\n i {\r\n margin-right: 0.8rem;\r\n }\r\n\r\n ${Page.Dropzone}:hover & {\r\n border-color: ${colors.blue};\r\n color: ${colors.blue};\r\n\r\n ${props =>\r\n props.hide &&\r\n `\r\n background: rgba(255, 255, 255, 0.3);\r\n border-color: ${colors.white};\r\n color: ${colors.white};\r\n opacity: 1;\r\n `}\r\n }\r\n\r\n ${props =>\r\n props.hide &&\r\n `\r\n opacity: 0;\r\n border-color: ${colors.white};\r\n color: ${colors.white};\r\n `}\r\n`\r\n\r\nexport { Page }\r\n","import React from 'react'\r\nimport './styles.scss'\r\nimport { Page } from './styled.js'\r\nimport { Row, Col, Form, Input, Icon, Spin, Button, message } from 'antd'\r\nimport Dropzone from 'react-dropzone'\r\nimport ImageCropContainer from '../../components/ImageCrop'\r\nimport { general } from '../../constants'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { api } from '../../services'\r\nimport stripeImage from '../../views/Account/assets/stripe.svg'\r\n\r\nclass TrainerSection extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isAvatarLoading: false,\r\n isValueLoading: false,\r\n image: null,\r\n file: null,\r\n hasIntegratedStripe: false,\r\n courseId: this.props.courseId\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n user: { info }\r\n } = this.props\r\n\r\n const hasIntegratedStripe =\r\n info.stripe_connect && info.stripe_connect.status\r\n this.setState({ hasIntegratedStripe })\r\n }\r\n checkStripe = status => {\r\n this.setState({\r\n hasIntegratedStripe: status\r\n })\r\n }\r\n LoadingIndicator = props => (\r\n \r\n {label.toUpperCase()} \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n {t('v3:edit_permission').toUpperCase()}\r\n \r\n
\r\n {getFieldDecorator('priceToEdit', {\r\n initialValue: initialPriceToEditValue,\r\n rules: [\r\n {\r\n validator: (rule, value, cb) => {\r\n if (value > 0) {\r\n cb();\r\n } else {\r\n cb(t('v3:valid_price'));\r\n }\r\n },\r\n message: t('v3:valid_price'),\r\n },\r\n {\r\n validator: (rule, value, cb) => {\r\n if (Number(value) < Number(coursePrice)) {\r\n cb();\r\n } else {\r\n !courseIsFree && cb(t('v3:valid_edit_price'));\r\n }\r\n },\r\n message: t('v3:valid_edit_price'),\r\n },\r\n ],\r\n })(\r\n \r\n {getFieldDecorator('is_free', {\r\n initialValue: courseIsFree\r\n })(\r\n handleSwitch(e)}\r\n />\r\n )}\r\n
\r\n {t('v3:course_price_message')}
\r\n \r\n )\r\n}\r\n\r\nexport default PriceManagement\r\n","import React from 'react'\r\nimport { Col, Icon, Form, Input, TreeSelect } from 'antd'\r\nimport './index.css'\r\nimport { api } from '../../../../../../services'\r\nimport TrainerSection from '../../../../../../components/TrainerSection'\r\nimport PriceManagement from './PriceManagement'\r\n\r\nconst { TreeNode } = TreeSelect\r\n\r\nclass MarketPlaceMidSection extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isCourseFree: false,\r\n orgs: [],\r\n groups: [],\r\n categories: [],\r\n isLoading: false,\r\n value: '',\r\n isValueLoading: false\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n // this.fetchOrganization()\r\n this.fetchCategories()\r\n this.handleInitialSwitch()\r\n // this.handleGroupSelect()\r\n }\r\n\r\n // fetchOrganization = () => {\r\n // api.organizations.get().then(res => {\r\n // this.setState({\r\n // orgs: res.data.rows.map(item => ({\r\n // title: item.title,\r\n // orgId: item.id,\r\n // groups: item.groups\r\n // }))\r\n // })\r\n // this.fetchGroups()\r\n // })\r\n // }\r\n\r\n // fetchGroups = () => {\r\n // const {\r\n // courseBuilder: { courseOrganization, courseGroup }\r\n // } = this.props\r\n\r\n // if (courseOrganization) {\r\n // this.setState({\r\n // groups: this.state.orgs\r\n // .filter(item => courseOrganization === item.orgId)\r\n // .map(item => item.groups)[0]\r\n // .map(item => ({\r\n // id: item.id,\r\n // value: item.title,\r\n // label: item.title\r\n // }))\r\n // })\r\n // }\r\n\r\n // if (courseGroup) {\r\n // this.setState({\r\n // value: this.state.groups.filter(group => group.id === courseGroup)[0]\r\n // })\r\n // }\r\n\r\n // if (this.state.selectedGroup) {\r\n // this.setState({\r\n // value: this.state.groups.filter(\r\n // group => group.id === this.state.selectedGroup\r\n // )[0],\r\n // isValueLoading: false\r\n // })\r\n // }\r\n // }\r\n\r\n fetchCategories = () => {\r\n api.courses\r\n .fetchCategory()\r\n .then(res =>\r\n this.setState({\r\n categories: res.data\r\n })\r\n )\r\n .catch(() => {\r\n console.log('Error in fetching categories')\r\n })\r\n }\r\n\r\n // handleOrganizationSelect = id => {\r\n // const { onOrganizationSelect } = this.props\r\n // this.setState({\r\n // groups: this.state.orgs\r\n // .filter(item => id === item.orgId)\r\n // .map(item => item.groups)[0]\r\n // .map(item => ({\r\n // id: item.id,\r\n // value: item.title,\r\n // label: item.title\r\n // }))\r\n // })\r\n // onOrganizationSelect(id)\r\n // }\r\n\r\n LoadingIndicator = () => (\r\n \r\n \r\n {getFieldDecorator('category_id', {\r\n rules: [{ required: true, message: t('v4:select_category') }],\r\n initialValue: courseCategory\r\n })(\r\n \r\n {categories &&\r\n categories.map(category => (\r\n \r\n {category.children &&\r\n category.children.map(option => (\r\n \r\n {getFieldDecorator('video_link', {\r\n rules: [{ required: true, message: t('v4:input_video_link') }],\r\n initialValue: courseVideoLink\r\n })(\r\n onVideoLink(e.target.value)}\r\n />\r\n )}\r\n \r\n \r\n \r\n {getFieldDecorator('no_of_video', {\r\n rules: [{ required: true, message: t('v4:error_video') }],\r\n initialValue: courseNoOfVideos\r\n })(\r\n onNoOfVideo(e.target.value)}\r\n onChange={e => {\r\n const value = Math.abs(parseInt(e.target.value)) || 0\r\n e.target.value = value > 100 ? 100 : value\r\n onNoOfVideo(value)\r\n }}\r\n />\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n {getFieldDecorator('no_of_lesson', {\r\n rules: [{ required: true, message: t('v4:lessons') }],\r\n initialValue: courseNoOfLessons\r\n })(\r\n onNoOfLessons(e.target.value)}\r\n onChange={e => {\r\n const value = Math.abs(parseInt(e.target.value)) || 0\r\n e.target.value = value > 100 ? 100 : value\r\n onNoOfLessons(value)\r\n }}\r\n />\r\n )}\r\n \r\n \r\n
\r\n \r\n {/* \r\n {getFieldDecorator('organization_id', {\r\n initialValue: courseOrganization,\r\n rules: [{ required: true, message: t('v4:organization') }]\r\n })(\r\n \r\n {orgs &&\r\n orgs.map(org => (\r\n \r\n ))}\r\n \r\n )}\r\n \r\n */}\r\n
\r\n {/* \r\n
*/}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport { MarketPlaceMidSection }\r\n","import React from 'react'\r\nimport { Input, Form, Col, Select } from 'antd'\r\n\r\nimport './index.css'\r\n\r\nconst { Option } = Select\r\n\r\nconst MarketPlaceTopSection = ({ props, onChangeAuthor }) => {\r\n const {\r\n t,\r\n form: { getFieldDecorator },\r\n courseBuilder: { courseOrganiser, courseId }\r\n } = props\r\n return (\r\n \r\n {t('labels:group (for paid course/webinar)').toUpperCase()}\r\n
\r\n \r\n \r\n {getFieldDecorator('course_id', {\r\n initialValue: courseId\r\n })()}\r\n \r\n \r\n\r\n \r\n {/* {getFieldDecorator('status', {\r\n initialValue: 'pending'\r\n })( */}\r\n \r\n {/* )} */}\r\n \r\n \r\n\r\n \r\n {getFieldDecorator('organiser', {\r\n rules: [{ required: true, message: t('v4:author_name') }],\r\n initialValue: courseOrganiser\r\n })(\r\n onChangeAuthor(e.target.value)}\r\n />\r\n )}\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport { MarketPlaceTopSection }\r\n","import React from 'react'\r\nimport { Row, Col, Form, Input, Checkbox } from 'antd'\r\nimport './index.css'\r\n\r\nconst MarketPlaceBottomSection = props => {\r\n const {\r\n form: { getFieldDecorator },\r\n courseBuilder: {\r\n courseDescription,\r\n courseOutline,\r\n courseObjectives,\r\n courseMarketPlaceDescription,\r\n courseShareProfile\r\n },\r\n onDescription,\r\n onObjectives,\r\n onOutline,\r\n onShareProfile,\r\n onMarketPlaceDescription,\r\n isMarketPlace,\r\n t\r\n } = props\r\n\r\n const handleDescription = (val, field) => {\r\n switch (field) {\r\n case 'description':\r\n onDescription(val)\r\n break\r\n case 'course_obj':\r\n onObjectives(val)\r\n break\r\n case 'course_outline':\r\n onOutline(val)\r\n break\r\n case 'course_description':\r\n onMarketPlaceDescription(val)\r\n break\r\n default:\r\n break\r\n }\r\n }\r\n\r\n const generateEditor = (title, params, description, type) => {\r\n return (\r\n \r\n \r\n {getFieldDecorator(type, {\r\n rules: [\r\n {\r\n required: params === 'description' ? false : true,\r\n message: t(`errors:${params}`)\r\n }\r\n ],\r\n initialValue: description\r\n })(\r\n {\r\n if (\r\n e.keyCode === 32 &&\r\n (e.target.value.charAt(e.target.selectionStart - 1) === ' ' ||\r\n e.target.value.charAt(e.target.selectionStart) === ' ')\r\n ) {\r\n e.preventDefault()\r\n }\r\n }}\r\n onChange={e => handleDescription(e.target.value, type)}\r\n style={{ fontSize: '1.6rem', resize: 'none' }}\r\n wrap={'soft'}\r\n />\r\n )}\r\n \r\n
\r\n )\r\n }\r\n return (\r\n \r\n \r\n
\r\n {isMarketPlace && (\r\n \r\n \r\n {getFieldDecorator('is_shared_profile', {\r\n valuePropName: 'checked',\r\n initialValue: courseShareProfile\r\n })(\r\n onShareProfile(e.target.checked)}\r\n >\r\n {t('v3:allow_sharing_trainer_info')}\r\n \r\n )}\r\n \r\n \r\n
\r\n )}\r\n
\r\n )\r\n}\r\n\r\nexport { MarketPlaceBottomSection }\r\n","/*\r\n * @Author: your name\r\n * @Date: 2019-11-28 10:55:23\r\n * @LastEditTime: 2019-11-28 10:55:32\r\n * @LastEditors: your name\r\n * @Description: In User Settings Edit\r\n * @FilePath: /frontend/src/views/Events/Details/styled.js\r\n */\r\n\r\nimport { Icon } from 'antd'\r\nimport styled from 'styled-components'\r\nimport { Button, Collapse } from 'antd'\r\nimport { styleguide } from '../../../constants'\r\nimport { Filter } from '../../../components'\r\nimport { Head, Container } from '../../../styles'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst DropzoneLoading = styled(Icon)`\r\n && {\r\n font-size: 3.6rem;\r\n color: ${colors.blue};\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n margin-top: 12.8rem;\r\n }\r\n`\r\n\r\nconst modal_style = {\r\n overflow: 'auto',\r\n top: 0,\r\n left: 0,\r\n bottom: 0,\r\n right: 0\r\n}\r\n\r\nconst Page = styled.div`\r\n padding: 4rem 0.2rem;\r\n`\r\n\r\nPage.Head = styled(Head)`\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 0;\r\n`\r\n\r\nPage.Head.Button = styled(Button)`\r\n && {\r\n height: 4rem;\r\n padding: 0 4rem;\r\n &:not(:last-child) {\r\n margin-right: 1.5rem;\r\n }\r\n }\r\n`\r\nPage.Head.Search = styled.div`\r\n margin-right: 2rem;\r\n width: 530px;\r\n display: flex;\r\n align-items: center;\r\n .rounded-select {\r\n min-width: 140px;\r\n .ant-select-selection--single {\r\n display: flex;\r\n align-items: center;\r\n height: 4rem;\r\n padding: 0 4rem;\r\n border-radius: 50px;\r\n color: #fff;\r\n background-color: #0068ff;\r\n border-color: #0068ff;\r\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);\r\n -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);\r\n box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);\r\n padding: 0 10px;\r\n }\r\n svg {\r\n fill: white;\r\n }\r\n }\r\n`\r\nPage.Container = styled(Container)``\r\n\r\nconst Column = styled.div``\r\nconst Row = styled.div`\r\n flex-direction: row;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 0 auto;\r\n`\r\n\r\nPage.Filter = styled(Filter)`\r\n && {\r\n justify-content: flex-start;\r\n }\r\n`\r\nconst EventContainer = styled.div`\r\n width: 100%;\r\n padding: 3.2rem;\r\n padding-top: 0;\r\n`\r\n\r\nconst CollapseContainer = styled(Collapse)`\r\n && {\r\n & .ant-collapse-item {\r\n border: 0;\r\n margin-bottom: 0.5rem;\r\n\r\n & .ant-collapse-content {\r\n & .ant-collapse-content-box {\r\n padding: 0 3rem 1.5rem 2.3rem;\r\n display: block !important;\r\n }\r\n }\r\n }\r\n }\r\n`\r\nCollapseContainer.Panel = styled(Collapse.Panel)``\r\n\r\nexport {\r\n modal_style,\r\n DropzoneLoading,\r\n Page,\r\n Row,\r\n Column,\r\n EventContainer,\r\n CollapseContainer\r\n}\r\n","import React, { Component } from 'react'\r\nimport { Spin, Select, Tag, Checkbox, Button, Alert } from 'antd'\r\nimport { Page } from './../../styled'\r\nimport { Search } from '../../../../../components'\r\nimport './styles.scss'\r\n\r\nexport default class ShowContactsModal extends Component {\r\n state = {\r\n isFetching: this.props.fetching || false,\r\n users: [],\r\n search: '',\r\n searchType: 'search',\r\n inviteList: [],\r\n isGroupSelected: false,\r\n selectedGroupId: null,\r\n allSelected: false,\r\n hasMaxUsers: false,\r\n maxLength: ''\r\n }\r\n\r\n componentDidMount() {\r\n const { orgUsers = [], selectedEmails, tagValue } = this.props\r\n const userEmails = orgUsers\r\n .filter(item => item.user !== null)\r\n .map(item => item.user.email)\r\n\r\n this.setState({ users: userEmails, inviteList: selectedEmails })\r\n\r\n if (tagValue === 'conference') {\r\n this.setState({ maxLength: 24 })\r\n } else if (tagValue === 'webinar') {\r\n this.setState({ maxLength: 5 })\r\n } else if (tagValue === 'agora_conference') {\r\n this.setState({ maxLength: 10 })\r\n } else if (tagValue === 'live_assessment') {\r\n this.setState({ maxLength: 4 })\r\n } else if (tagValue === 'course') {\r\n this.setState({ maxLength: orgUsers.length })\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const { selectedEmails, tagValue, orgUsers, fetching } = this.props\r\n console.log('selectedEmails', selectedEmails)\r\n const { inviteList } = this.state\r\n if (selectedEmails !== prevProps.selectedEmails && selectedEmails) {\r\n const userList = []\r\n orgUsers.forEach(val => {\r\n if (val.user) {\r\n userList.push(val.user.email)\r\n }\r\n this.setState({ users: userList, inviteList: selectedEmails })\r\n })\r\n }\r\n\r\n if (prevState.inviteList !== inviteList && inviteList.length > 4) {\r\n if (tagValue === 'conference') {\r\n this.setState({\r\n hasMaxUsers: inviteList.length > 24 ? true : false,\r\n maxLength: 24\r\n })\r\n } else if (tagValue === 'webinar') {\r\n this.setState({\r\n hasMaxUsers: inviteList.length > 4 ? true : false,\r\n maxLength: 5\r\n })\r\n } else if (tagValue === 'agora_conference') {\r\n this.setState({\r\n hasMaxUsers: inviteList.length > 10 ? true : false,\r\n maxLength: 10\r\n })\r\n } else if (tagValue === 'live_assessment') {\r\n this.setState({\r\n hasMaxUsers: inviteList.length > 5 ? true : false,\r\n maxLength: 5\r\n })\r\n } else if (tagValue === 'course') {\r\n this.setState({\r\n hasMaxUsers: false,\r\n maxLength: orgUsers.length\r\n })\r\n }\r\n }\r\n\r\n if (fetching !== prevProps.fetching) {\r\n this.setState({ isFetching: fetching })\r\n }\r\n }\r\n\r\n addUser = e => {\r\n const { value, checked } = e.target\r\n const { encoderType, tagValue } = this.props\r\n const { users } = this.state\r\n\r\n if (encoderType !== 'peer2peer') {\r\n if (value === 'all') {\r\n this.setState({\r\n inviteList: checked\r\n ? users.filter((u, i) => {\r\n if (tagValue === 'conference') {\r\n if (i < 24) return true\r\n } else if (tagValue === 'agora_conference') {\r\n if (i < 10) return true\r\n } else if (tagValue === 'course') {\r\n return true\r\n } else {\r\n if (i < 5) return true\r\n }\r\n return false // Add this line to handle cases where no condition is met\r\n })\r\n : [],\r\n allSelected: checked ? true : false\r\n })\r\n return null\r\n }\r\n\r\n this.setState(prevState => {\r\n const prevList = prevState.inviteList\r\n if (!prevList.includes(value) && checked) {\r\n return {\r\n inviteList: [...prevList, value],\r\n allSelected: false\r\n }\r\n }\r\n return {\r\n inviteList: prevList.filter(p => p !== value),\r\n allSelected: false\r\n }\r\n })\r\n return\r\n }\r\n this.setState(prevState => {\r\n const prevList = prevState.inviteList\r\n if (checked) {\r\n return {\r\n inviteList: [value],\r\n allSelected: false\r\n }\r\n }\r\n return {\r\n inviteList: prevList.filter(p => p !== value),\r\n allSelected: false\r\n }\r\n })\r\n return\r\n }\r\n\r\n handleInvite = () => {\r\n const { inviteList } = this.state\r\n const { addEmails } = this.props\r\n addEmails(inviteList)\r\n // setTimeout(() => {\r\n // this.setState({inviteList:[], users: []})\r\n // }, 2000);\r\n }\r\n\r\n searchFilter = value => {\r\n const { orgUsers = [] } = this.props\r\n this.setState({\r\n search: value\r\n })\r\n const searchValue = value\r\n const newSearchType = this.state.searchType\r\n var searchList = []\r\n\r\n orgUsers.forEach(val => {\r\n if (val.user) {\r\n searchList.push(val.user)\r\n }\r\n this.setState({ users: searchList })\r\n })\r\n\r\n let filteredArray = []\r\n\r\n if (searchValue) {\r\n searchList.forEach(val => {\r\n if (\r\n val && newSearchType === 'id'\r\n ? val.id.toString().includes(searchValue)\r\n : newSearchType === 'name'\r\n ? val.username.toString().includes(searchValue)\r\n : newSearchType === 'group'\r\n ? val.groups.toString().includes(searchValue)\r\n : val.email.toString().includes(searchValue)\r\n ) {\r\n let index = searchList.indexOf(val)\r\n filteredArray.push(searchList[index].email)\r\n }\r\n })\r\n\r\n this.setState({ users: filteredArray })\r\n }\r\n\r\n if (!searchValue) {\r\n searchList = []\r\n orgUsers.forEach(val => {\r\n if (val.user) {\r\n searchList.push(val.user.email)\r\n }\r\n })\r\n this.setState({ users: searchList })\r\n }\r\n }\r\n\r\n handleSearchType = type => {\r\n if (type === 'group') {\r\n this.setState({\r\n searchType: type,\r\n isGroupSelected: true\r\n })\r\n } else {\r\n this.setState({\r\n searchType: type,\r\n isGroupSelected: false\r\n })\r\n }\r\n\r\n this.searchFilter()\r\n }\r\n\r\n handleSearchGroupType = groupId => {\r\n const { orgUsers } = this.props\r\n this.setState({\r\n search: groupId,\r\n selectedGroupId: groupId,\r\n page: 1\r\n })\r\n let groupUserList = []\r\n orgUsers.forEach(val => {\r\n if (val.user && val.user.groups.includes(groupId)) {\r\n groupUserList.push(val.user.email)\r\n }\r\n this.setState({ users: groupUserList })\r\n })\r\n }\r\n\r\n render() {\r\n const {\r\n isFetching,\r\n users,\r\n isGroupSelected,\r\n inviteList,\r\n allSelected,\r\n hasMaxUsers,\r\n maxLength\r\n } = this.state\r\n const { groupOptions, t, tagValue } = this.props\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {t('reports:all')} \r\n {t('reports:name')} \r\n \r\n {t('reports:id_number')}\r\n \r\n \r\n {t('reports:email')}\r\n \r\n {t('v4:group')} \r\n \r\n {isGroupSelected && (\r\n \r\n \r\n {t('v4:select_group')}\r\n \r\n {groupOptions.groups.map(g => (\r\n {g.title} \r\n ))}\r\n \r\n )}\r\n this.searchFilter(e.target.value)}\r\n />\r\n \r\n \r\n \r\n {users && users.length > 0 ? (\r\n <>\r\n \r\n {'All'}\r\n \r\n \r\n \r\n\r\n {hasMaxUsers && (\r\n \r\n
\r\n )\r\n }\r\n}\r\n","import React, { useState } from 'react'\r\nimport { api } from '../../../services'\r\nimport {\r\n Alert,\r\n Button,\r\n Divider,\r\n Form,\r\n Input,\r\n InputNumber,\r\n Radio,\r\n Spin\r\n} from 'antd'\r\nimport { useTranslation } from 'react-i18next'\r\nimport './AiCourseForm.scss'\r\n\r\nconst FormItem = Form.Item\r\nconst RadioGroup = Radio.Group\r\nconst { TextArea } = Input\r\n\r\nconst defaultErrorObj = {\r\n hasError: false,\r\n msg: ''\r\n}\r\n\r\nconst AiCourseForm = ({\r\n onFormSubmit,\r\n loading,\r\n courseTitle = '',\r\n courseId,\r\n isFromKnowledgeCenter,\r\n ...props\r\n}) => {\r\n const [isStandardRequired, setIsStandardRequired] = useState(false)\r\n const [isIndustrySpecific, setIsIndustrySpecific] = useState(false)\r\n const [isSubmitting, setIsSubmitting] = useState(false)\r\n const [error, setError] = useState(defaultErrorObj)\r\n\r\n const onStandardChange = e => {\r\n setIsStandardRequired(e.target.value === 'yes')\r\n }\r\n\r\n const onIndustryChange = e => {\r\n setIsIndustrySpecific(e.target.value === 'yes')\r\n }\r\n\r\n const handleSubmit = e => {\r\n e.preventDefault()\r\n props.form.validateFields((err, values) => {\r\n if (!err) {\r\n setIsSubmitting(true)\r\n const {\r\n courseTitle,\r\n learningObjective,\r\n standardDetails,\r\n standard,\r\n industry,\r\n industrySpecific,\r\n duration\r\n } = values\r\n\r\n api.courses\r\n .patchUpdateCourse(courseId, {\r\n duration: duration\r\n })\r\n .catch(err => {\r\n console.error(err)\r\n })\r\n\r\n api.courses\r\n .askAiCourseCreation({\r\n params: {\r\n prompt: JSON.stringify({\r\n course_title: courseTitle,\r\n learning_objective: learningObjective,\r\n standard_details: standardDetails,\r\n standard: standard,\r\n industry: industry,\r\n industry_specific: industrySpecific,\r\n duration: duration + ' minutes'\r\n }),\r\n context: []\r\n }\r\n })\r\n .then(res => {\r\n setIsSubmitting(false)\r\n onFormSubmit(values, res.data.body[0])\r\n setError(defaultErrorObj)\r\n })\r\n .catch(err => {\r\n setIsSubmitting(false)\r\n setError({ hasError: true, msg: err.message })\r\n })\r\n }\r\n })\r\n }\r\n\r\n const { getFieldDecorator } = props.form\r\n const { t } = useTranslation()\r\n\r\n return (\r\n \r\n {users.map(u => (\r\n \r\n \r\n {u}\r\n \r\n \r\n ))}\r\n
\r\n \r\n ) : (\r\n {t('v2:no_user_found')}
\r\n )}\r\n \r\n maxLength\r\n }\r\n onClick={() => this.handleInvite()}\r\n >\r\n {t('v2:invite').toUpperCase()}\r\n \r\n
\r\n \r\n
\r\n )}\r\n\r\n {t('v3:ai_course_creation')}
\r\n\r\n \r\n \r\n {t('v2:button_submit')}\r\n \r\n \r\n
\r\n \r\n SubTopic_Placeholder
',\r\n width: 975,\r\n height: 112,\r\n x: 24,\r\n y: 52,\r\n media_format: 'TEXT'\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'TEXT',\r\n display: 'CONTENT',\r\n params: {\r\n content:\r\n 'Generated_Content_Placeholder
',\r\n width: 977,\r\n height: 284,\r\n x: 23,\r\n y: 204,\r\n media_format: 'TEXT'\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'TEXT',\r\n display: 'SUB_CONTENT',\r\n params: {\r\n content:\r\n 'Generated_Content_Placeholder
',\r\n width: 460,\r\n height: 284,\r\n x: 23,\r\n y: 204,\r\n media_format: 'TEXT'\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'IMAGE',\r\n display: 'IMAGE',\r\n params: {\r\n content: null,\r\n width: 460,\r\n height: 284,\r\n x: 507,\r\n y: 204,\r\n content_id: null\r\n }\r\n }\r\n ]\r\n },\r\n // {\r\n // \"template_id\": 2,\r\n // \"content_id\": 1416982,\r\n // \"template\": \"https://cdn.v2.sharelookapp.com/public/8ea3c26c-c268-4896-a60b-089a385f12b6.png\",\r\n // \"template_data\": [\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"BACKGROUND_COLOR\",\r\n // \"params\": {\r\n // \"content\": null\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"BACKGROUND_IMAGE\",\r\n // \"params\": {\r\n // \"opacity\": 1,\r\n // \"content\": null,\r\n // \"content_id\": null\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"IMAGE\",\r\n // \"display\": \"LOGO\",\r\n // \"tstyle\": 2,\r\n // \"params\": {\r\n // \"content\": null,\r\n // \"width\": 158,\r\n // \"height\": 66,\r\n // \"x\": 466,\r\n // \"y\": 19,\r\n // \"content_id\": null\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"TEXT\",\r\n // \"display\": \"HEADING\",\r\n // \"tstyle\": 2,\r\n // \"params\": {\r\n // \"content\": \"SubTopic_Placeholder
\",\r\n // \"width\": 988,\r\n // \"height\": 136,\r\n // \"x\": 19,\r\n // \"y\": 114,\r\n // \"media_format\": \"TEXT\"\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"TEXT\",\r\n // \"display\": \"CONTENT\",\r\n // \"params\": {\r\n // \"content\": \"Generated_Content_Placeholder
\",\r\n // \"width\": 989,\r\n // \"height\": 343,\r\n // \"x\": 21,\r\n // \"y\": 277,\r\n // \"media_format\": \"TEXT\"\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"TEXT\",\r\n // \"display\": \"SUB_CONTENT\",\r\n // \"params\": {\r\n // \"content\": \"Generated_Content_Placeholder
\",\r\n // \"width\": 460,\r\n // \"height\": 343,\r\n // \"x\": 21,\r\n // \"y\": 277,\r\n // \"media_format\": \"TEXT\"\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"IMAGE\",\r\n // \"display\": \"IMAGE\",\r\n // \"params\": {\r\n // \"content\": null,\r\n // \"width\": 460,\r\n // \"height\": 343,\r\n // \"x\": 505,\r\n // \"y\": 277,\r\n // \"content_id\": null\r\n // }\r\n // }\r\n // ]\r\n // },\r\n {\r\n template_id: 2,\r\n content_id: 1416983,\r\n template: template3,\r\n template_data: [\r\n {\r\n uid: null,\r\n type: 'BACKGROUND_COLOR',\r\n params: {\r\n content: null\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'BACKGROUND_IMAGE',\r\n auto: false,\r\n params: {\r\n opacity: 1,\r\n content: null,\r\n content_id: null\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'TEXT',\r\n display: 'CONTENT',\r\n params: {\r\n content:\r\n 'Generated_Content_Placeholder
',\r\n width: 943,\r\n height: 393,\r\n x: 42,\r\n y: 221,\r\n media_format: 'TEXT'\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'TEXT',\r\n display: 'HEADING',\r\n tstyle: 3,\r\n params: {\r\n content:\r\n 'SubTopic_Placeholder
',\r\n width: 569,\r\n height: 124,\r\n x: 42,\r\n y: 49,\r\n media_format: 'TEXT'\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'IMAGE',\r\n display: 'LOGO',\r\n tstyle: 3,\r\n params: {\r\n content: null,\r\n width: 156,\r\n height: 67,\r\n x: 822,\r\n y: 48,\r\n content_id: null\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'TEXT',\r\n display: 'SUB_CONTENT',\r\n params: {\r\n content:\r\n 'Generated_Content_Placeholder
',\r\n width: 460,\r\n height: 393,\r\n x: 42,\r\n y: 221,\r\n media_format: 'TEXT'\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'IMAGE',\r\n display: 'IMAGE',\r\n params: {\r\n content: null,\r\n width: 460,\r\n height: 393,\r\n x: 526,\r\n y: 221,\r\n content_id: null\r\n }\r\n }\r\n ]\r\n },\r\n {\r\n template_id: 3,\r\n content_id: 1416984,\r\n template: template4,\r\n template_data: [\r\n {\r\n uid: null,\r\n type: 'BACKGROUND_COLOR',\r\n params: {\r\n content: null\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'BACKGROUND_IMAGE',\r\n auto: false,\r\n params: {\r\n opacity: 1,\r\n content: null,\r\n content_id: null\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'TEXT',\r\n display: 'HEADING',\r\n tstyle: 4,\r\n params: {\r\n content:\r\n 'SubTopic_Placeholder
',\r\n width: 579,\r\n height: 118,\r\n x: 423,\r\n y: 60,\r\n media_format: 'TEXT'\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'IMAGE',\r\n display: 'LOGO',\r\n tstyle: 4,\r\n params: {\r\n content: null,\r\n width: 143,\r\n height: 59,\r\n x: 29,\r\n y: 61,\r\n content_id: null\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'TEXT',\r\n display: 'CONTENT',\r\n params: {\r\n content:\r\n 'Generated_Content_Placeholder
',\r\n width: 972,\r\n height: 400,\r\n x: 29,\r\n y: 211,\r\n media_format: 'TEXT'\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'TEXT',\r\n display: 'SUB_CONTENT',\r\n params: {\r\n content:\r\n 'Generated_Content_Placeholder
',\r\n width: 460,\r\n height: 400,\r\n x: 29,\r\n y: 211,\r\n media_format: 'TEXT'\r\n }\r\n },\r\n {\r\n uid: null,\r\n type: 'IMAGE',\r\n display: 'IMAGE',\r\n params: {\r\n content: null,\r\n width: 460,\r\n height: 400,\r\n x: 513,\r\n y: 211,\r\n content_id: null\r\n }\r\n }\r\n ]\r\n }\r\n // {\r\n // \"template_id\": 5,\r\n // \"content_id\": 1416985,\r\n // \"template\": \"https://cdn.v2.sharelookapp.com/public/7aacde02-dd4e-4453-933a-f8053d75cf5d.png\",\r\n // \"template_data\": [\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"BACKGROUND_COLOR\",\r\n // \"params\": {\r\n // \"content\": null\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"BACKGROUND_IMAGE\",\r\n // \"auto\": false,\r\n // \"params\": {\r\n // \"opacity\": 1,\r\n // \"content\": null,\r\n // \"content_id\": null\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"IMAGE\",\r\n // \"display\": \"LOGO\",\r\n // \"tstyle\": 5,\r\n // \"params\": {\r\n // \"content\": null,\r\n // \"width\": 173,\r\n // \"height\": 71,\r\n // \"x\": 823,\r\n // \"y\": 452,\r\n // \"content_id\": null\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"TEXT\",\r\n // \"display\": \"HEADING\",\r\n // \"tstyle\": 5,\r\n // \"params\": {\r\n // \"content\": \"SubTopic_Placeholder
\",\r\n // \"width\": 562,\r\n // \"height\": 110,\r\n // \"x\": 26,\r\n // \"y\": 37,\r\n // \"media_format\": \"TEXT\"\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"TEXT\",\r\n // \"display\": \"CONTENT\",\r\n // \"params\": {\r\n // \"content\": \"Generated_Content_Placeholder
\",\r\n // \"width\": 969,\r\n // \"height\": 312,\r\n // \"x\": 28,\r\n // \"y\": 182,\r\n // \"media_format\": \"TEXT\"\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"TEXT\",\r\n // \"display\": \"SUB_CONTENT\",\r\n // \"params\": {\r\n // \"content\": \"Generated_Content_Placeholder
\",\r\n // \"width\": 460,\r\n // \"height\": 312,\r\n // \"x\": 28,\r\n // \"y\": 182,\r\n // \"media_format\": \"TEXT\"\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"IMAGE\",\r\n // \"display\": \"IMAGE\",\r\n // \"params\": {\r\n // \"content\": null,\r\n // \"width\": 460,\r\n // \"height\": 312,\r\n // \"x\": 512,\r\n // \"y\": 182,\r\n // \"content_id\": null\r\n // }\r\n // }\r\n // ]\r\n // },\r\n // {\r\n // \"template_id\": 6,\r\n // \"content_id\": 1416986,\r\n // \"template\": \"https://cdn.v2.sharelookapp.com/public/7b5fe0c9-f6b4-428b-b552-842258ae2d55.png\",\r\n // \"template_data\": [\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"BACKGROUND_COLOR\",\r\n // \"params\": {\r\n // \"content\": null\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"BACKGROUND_IMAGE\",\r\n // \"auto\": false,\r\n // \"params\": {\r\n // \"opacity\": 1,\r\n // \"content\": null,\r\n // \"content_id\": null\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"TEXT\",\r\n // \"display\": \"CONTENT\",\r\n // \"params\": {\r\n // \"content\": \"Generated_Content_Placeholder
\",\r\n // \"width\": 956,\r\n // \"height\": 306,\r\n // \"x\": 41,\r\n // \"y\": 197,\r\n // \"media_format\": \"TEXT\"\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"TEXT\",\r\n // \"display\": \"HEADING\",\r\n // \"tstyle\": 6,\r\n // \"params\": {\r\n // \"content\": \"SubTopic_Placeholder
\",\r\n // \"width\": 579,\r\n // \"height\": 112,\r\n // \"x\": 418,\r\n // \"y\": 45,\r\n // \"media_format\": \"TEXT\"\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"IMAGE\",\r\n // \"display\": \"LOGO\",\r\n // \"tstyle\": 6,\r\n // \"params\": {\r\n // \"content\": null,\r\n // \"width\": 163,\r\n // \"height\": 61,\r\n // \"x\": 41,\r\n // \"y\": 459,\r\n // \"content_id\": null\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"TEXT\",\r\n // \"display\": \"SUB_CONTENT\",\r\n // \"params\": {\r\n // \"content\": \"Generated_Content_Placeholder
\",\r\n // \"width\": 460,\r\n // \"height\": 306,\r\n // \"x\": 41,\r\n // \"y\": 197,\r\n // \"media_format\": \"TEXT\"\r\n // }\r\n // },\r\n // {\r\n // \"uid\": null,\r\n // \"type\": \"IMAGE\",\r\n // \"display\": \"IMAGE\",\r\n // \"params\": {\r\n // \"content\": null,\r\n // \"width\": 460,\r\n // \"height\": 306,\r\n // \"x\": 525,\r\n // \"y\": 197,\r\n // \"content_id\": null\r\n // }\r\n // }\r\n // ]\r\n // }\r\n]\r\nconst AiTemplateSelection = ({\r\n isGeneratingCourse,\r\n courseTemplateData,\r\n type,\r\n onConfirm,\r\n open,\r\n close,\r\n form,\r\n courrseContent\r\n}) => {\r\n // Initialize states\r\n const [templateData, setTemplateData] = useState({\r\n template_id: '',\r\n background_color: null,\r\n opacity: 1,\r\n background_id: null,\r\n logo_id: null,\r\n background_img: null,\r\n logo_img: null,\r\n tocs: [courrseContent]\r\n })\r\n\r\n const [backgroundType, setBackgroundType] = useState('IMAGE')\r\n const [loading, setLoading] = useState(false)\r\n\r\n // Important! Must use a distinct name from your typo\r\n const [templateList, setTemplateList] = useState([])\r\n\r\n // Load templates when modal opens\r\n useEffect(() => {\r\n if (open) {\r\n console.log('Modal opened, loading templates...')\r\n setLoading(true)\r\n\r\n // Simulate async loading (React state updates are asynchronous)\r\n setTimeout(() => {\r\n setTemplateList(STATIC_TEMPLATES)\r\n\r\n // Set default template_id if not already set\r\n if (!templateData.template_id && STATIC_TEMPLATES.length > 0) {\r\n setTemplateData(prev => ({\r\n ...prev,\r\n template_id: STATIC_TEMPLATES[0].template_id\r\n }))\r\n }\r\n\r\n setLoading(false)\r\n console.log('Templates loaded:', STATIC_TEMPLATES)\r\n }, 100)\r\n }\r\n }, [open])\r\n\r\n // Handle courseTemplateData updates\r\n useEffect(() => {\r\n if (type && courseTemplateData && courseTemplateData.template_id) {\r\n setTemplateData(prev => ({\r\n ...prev,\r\n background_img: courseTemplateData.background_img,\r\n opacity: courseTemplateData.opacity || 1,\r\n logo_img: courseTemplateData.logo_img,\r\n template_id: courseTemplateData.template_id,\r\n background_color: courseTemplateData.background_color,\r\n background_id: courseTemplateData.background_id,\r\n logo_id: courseTemplateData.logo_id\r\n }))\r\n\r\n setBackgroundType(courseTemplateData.background_color ? 'COLOR' : 'IMAGE')\r\n }\r\n }, [courseTemplateData, type])\r\n\r\n const onCoverChange = (cover, coverType) => {\r\n if (coverType === 'bg') {\r\n setTemplateData(prev => ({\r\n ...prev,\r\n background_id: cover.id,\r\n opacity: 1,\r\n background_img: cover\r\n }))\r\n } else {\r\n setTemplateData(prev => ({\r\n ...prev,\r\n logo_id: cover.id,\r\n logo_img: cover\r\n }))\r\n }\r\n }\r\n\r\n const onChange = e => {\r\n setTemplateData(prev => ({\r\n ...prev,\r\n background_color: null,\r\n opacity: 1,\r\n background_id: null,\r\n background_img: null\r\n }))\r\n setBackgroundType(e.target.value)\r\n }\r\n\r\n const handleChangeComplete = color => {\r\n setTemplateData(prev => ({\r\n ...prev,\r\n background_color: color.hex\r\n }))\r\n }\r\n\r\n const selectTemplate = () => {\r\n if (!templateData.template_id) {\r\n message.error('Please select a template layout')\r\n return\r\n }\r\n onConfirm(templateData)\r\n }\r\n\r\n const handleOpacityChange = value => {\r\n setTemplateData(prev => ({\r\n ...prev,\r\n opacity: value\r\n }))\r\n }\r\n\r\n // Function to manually reload templates\r\n const reloadTemplates = () => {\r\n console.log('Manually reloading templates...')\r\n setLoading(true)\r\n\r\n setTimeout(() => {\r\n setTemplateList(STATIC_TEMPLATES)\r\n setLoading(false)\r\n console.log('Templates reloaded, count:', STATIC_TEMPLATES.length)\r\n }, 100)\r\n }\r\n\r\n return (\r\n\r\n \r\n \r\n \r\n Background Image \r\n Background Color \r\n \r\n \r\n \r\n {\r\n setTemplateData(prev => ({\r\n ...prev,\r\n background_id: null,\r\n background_img: null,\r\n opacity: 1\r\n }))\r\n }}\r\n onCoverChange={cover => {\r\n onCoverChange(cover, 'bg')\r\n }}\r\n />\r\n {templateData.background_img && (\r\n \r\n \r\n )}\r\n \r\n ) : (\r\n Template Background Color
}\r\n colon={false}\r\n required={false}\r\n >\r\n \r\n Image Transparency\r\n
\r\n \r\n
\r\n \r\n Select a Template Layout\r\n {templateList.length === 0 && !loading && (\r\n \r\n (Reload templates)\r\n \r\n )}\r\n
\r\n \r\n {templateList.length > 0 ? (\r\n templateList.map((template, index) => (\r\n \r\n setTemplateData(prev => ({\r\n ...prev,\r\n template_id: template.template_id\r\n }))\r\n }\r\n >\r\n \r\n
\r\n \r\n
\r\n \r\n ))\r\n ) : (\r\n \r\n {!loading &&\r\n 'Template data unavailable. Click to reload.'}\r\n
\r\n \r\n )}\r\n {children}
\r\n})\r\n\r\nconst TopicsContainer = SortableContainer(({ children }) => {\r\n return (\r\n {children}
\r\n )\r\n})\r\n\r\nconst { TextArea } = Input\r\n\r\nconst TableOfContents = ({\r\n courseTitle,\r\n tableOfContent,\r\n onTableOfContentChange,\r\n onContentGenerationStarted,\r\n isFromKnowledgeCenter,\r\n courseId: aiCourseId,\r\n setIsContentGenerationCompleted\r\n}) => {\r\n const [content, setContent] = useState({})\r\n const [isAutoUpdate, setIsAutoUpdate] = useState(true)\r\n const [isModalVisible, setIsModalVisible] = useState(false)\r\n const [newLessonModalVisible, setNewLessonModalVisible] = useState(false)\r\n const [newTopicModalVisible, setNewTopicModalVisible] = useState(false)\r\n const [newLessonTitle, setNewLessonTitle] = useState('')\r\n const [currentSection, setCurrentSection] = useState(null)\r\n const [currentSubsection, setCurrentSubsection] = useState(null)\r\n const [newTitle, setNewTitle] = useState('')\r\n const [isGeneratingContent, setIsGeneratingContent] = useState(false)\r\n const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(\r\n false\r\n )\r\n const [editTopicIndex, setEditTopicIndex] = useState(-1)\r\n const [editTopicTopIndex, setEditTopicTopIndex] = useState(-1)\r\n const [editTopicStatus, setEditTopicStatus] = useState(false)\r\n\r\n const [generatedContentModal, setGeneratedContentModal] = useState({\r\n isVisible: false,\r\n content: '',\r\n title: ''\r\n })\r\n\r\n const [isSavingContent, setIsSavingContent] = useState(false)\r\n\r\n const socketRef = useRef()\r\n const user = useSelector(state => state.user)\r\n const [isGeneratingCourse, setIsGeneratingCourse] = useState(false)\r\n const [\r\n isAddingContentFromInternet,\r\n setIsAddingContentFromInternet\r\n ] = useState(null)\r\n const [showDocumentModal, setShowDocumentModal] = useState(false)\r\n const [openTemplateModal, setOpenTemplateModal] = useState(false)\r\n const [imagesModal, setImagesModal] = useState({\r\n isVisible: false,\r\n imgArray: []\r\n })\r\n\r\n const courseId = isFromKnowledgeCenter ? uuidv4() : aiCourseId\r\n\r\n useEffect(() => {\r\n return () => {\r\n socketRef.current && socketRef.current.close()\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (tableOfContent) {\r\n setContent(JSON.parse(tableOfContent.content))\r\n }\r\n }, [tableOfContent])\r\n\r\n const updateContent = newContent => {\r\n setContent(newContent)\r\n onTableOfContentChange({\r\n tableOfContent: JSON.stringify(newContent),\r\n id: tableOfContent.id\r\n })\r\n }\r\n\r\n const showNewLessonModal = () => {\r\n setNewLessonModalVisible(true)\r\n }\r\n\r\n useEffect(() => {\r\n if (isGeneratingContent || isFromKnowledgeCenter) return\r\n\r\n // if any subtopic has generatedContent property\r\n const hasGeneratedContent = Object.keys(content).some(section => {\r\n return Object.keys(content[section]).some(subtopic => {\r\n return (\r\n content[section][subtopic] &&\r\n content[section][subtopic].generatedContent\r\n )\r\n })\r\n })\r\n\r\n if (hasGeneratedContent && isAutoUpdate) {\r\n saveContentToDatabase()\r\n }\r\n }, [content])\r\n\r\n const handleDelete = (section, subsection) => {\r\n const newContent = { ...content }\r\n if (!subsection) {\r\n delete newContent[section]\r\n } else {\r\n delete newContent[section][subsection]\r\n }\r\n updateContent(newContent)\r\n }\r\n\r\n const handleEdit = (section, subsection = null, index, tindex, wstatus) => {\r\n setCurrentSection(section)\r\n setCurrentSubsection(subsection)\r\n setNewTitle(subsection ? subsection : section)\r\n setIsModalVisible(true)\r\n setEditTopicIndex(index)\r\n setEditTopicTopIndex(tindex)\r\n setEditTopicStatus(wstatus)\r\n }\r\n\r\n const handleSaveEdit = () => {\r\n if (newTitle && currentSection !== null) {\r\n const newContent = { ...content }\r\n\r\n if (currentSubsection === null) {\r\n // Editing lesson title without changing the order\r\n const lessonKeys = Object.keys(newContent)\r\n const lessonIndex = lessonKeys.indexOf(currentSection)\r\n const lessonTopics = newContent[currentSection]\r\n\r\n if (lessonIndex !== -1) {\r\n lessonKeys[lessonIndex] = newTitle\r\n }\r\n\r\n const updatedContent = {}\r\n lessonKeys.forEach(key => {\r\n updatedContent[key] = newContent[key]\r\n })\r\n\r\n updatedContent[newTitle] = lessonTopics\r\n\r\n updateContent(updatedContent)\r\n } else {\r\n // Editing topic title\r\n const topics = { ...newContent[currentSection] }\r\n const updatedTopics = {}\r\n\r\n // Iterate through the topics, update the title if it matches currentSubsection\r\n Object.keys(topics).forEach(topic => {\r\n if (topic === currentSubsection) {\r\n updatedTopics[newTitle] = topics[topic]\r\n } else {\r\n updatedTopics[topic] = topics[topic]\r\n }\r\n })\r\n\r\n newContent[currentSection] = updatedTopics\r\n updateContent(newContent)\r\n }\r\n }\r\n\r\n setIsModalVisible(false)\r\n setEditTopicIndex(-1)\r\n setEditTopicTopIndex(-1)\r\n setEditTopicStatus(false)\r\n }\r\n\r\n const handelCancleEdit = () => {\r\n setIsModalVisible(false)\r\n setEditTopicIndex(-1)\r\n setEditTopicTopIndex(-1)\r\n setEditTopicStatus(false)\r\n }\r\n\r\n const handleAddTopic = () => {\r\n if (newTitle && currentSection !== null) {\r\n const newContent = { ...content }\r\n\r\n if (!newContent[currentSection]) {\r\n newContent[currentSection] = {}\r\n }\r\n\r\n const currentSectionObject = newContent[currentSection]\r\n\r\n currentSectionObject[`${newTitle}`] = {}\r\n setNewTitle('')\r\n setNewTopicModalVisible(false)\r\n updateContent(newContent)\r\n }\r\n }\r\n\r\n const handleAddLesson = () => {\r\n if (newLessonTitle) {\r\n const newContent = { ...content }\r\n\r\n newContent[`${newLessonTitle}`] = {}\r\n setNewLessonTitle('')\r\n setNewLessonModalVisible(false)\r\n updateContent(newContent)\r\n }\r\n }\r\n\r\n const handleShowImages = array => {\r\n setImagesModal({\r\n isVisible: true,\r\n imgArray: array\r\n })\r\n }\r\n\r\n const renderActionItems = (\r\n sectionTitle,\r\n item = null,\r\n index = 0,\r\n tindex = 0,\r\n wstatus\r\n ) => {\r\n const itemForGeneratedContent = content[sectionTitle][item]\r\n\r\n const itemGeneratedContent =\r\n itemForGeneratedContent && itemForGeneratedContent.generatedContent\r\n\r\n const isGenerationError =\r\n itemForGeneratedContent && itemForGeneratedContent.status === 'error'\r\n\r\n const images = itemForGeneratedContent && itemForGeneratedContent.img_path\r\n\r\n const menu = (\r\n \r\n )\r\n\r\n return (\r\n \r\n {itemGeneratedContent && !isGenerationError && (\r\n // \r\n // \r\n \r\n \r\n setGeneratedContentModal({\r\n isVisible: true,\r\n content: itemGeneratedContent,\r\n lesson: sectionTitle,\r\n title: item\r\n })\r\n }\r\n >\r\n
\r\n \r\n )}\r\n\r\n \r\n //
\r\n // \r\n {imagesModal.imgArray.map((item, index) => (\r\n
\r\n ) : (\r\n \r\n
\r\n ))}\r\n Image {index + 1}
\r\n\r\n
\r\n \r\n handleDelete(sectionTitle, item)}\r\n >\r\n \r\n 
\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n )\r\n }\r\n\r\n const onSortTopicsEnd = ({ sectionTitle, oldIndex, newIndex }) => {\r\n if (oldIndex === newIndex) return\r\n const newContent = { ...content }\r\n const section = newContent[sectionTitle]\r\n const newTopics = mapObjectByOrder(section, oldIndex, newIndex)\r\n newContent[sectionTitle] = newTopics\r\n updateContent(newContent)\r\n }\r\n\r\n const mapObjectByOrder = (obj, oldIndex, newIndex) => {\r\n const keys = Object.keys(obj)\r\n const newKeys = arrayMove(keys, oldIndex, newIndex)\r\n const newObj = {}\r\n newKeys.forEach(key => {\r\n newObj[key] = obj[key]\r\n })\r\n return newObj\r\n }\r\n\r\n const convertToArrayOfObjects = jsonObject => {\r\n const result = []\r\n\r\n for (const topic in jsonObject) {\r\n if (jsonObject.hasOwnProperty(topic)) {\r\n const sub_topics = Object.keys(jsonObject[topic])\r\n const courseObject = {\r\n topic,\r\n sub_topics: sub_topics.length === 0 ? [topic] : sub_topics\r\n }\r\n result.push(courseObject)\r\n }\r\n }\r\n\r\n return result\r\n }\r\n\r\n const initializeWebsocket = () => {\r\n const { id, username } = user.info\r\n socketRef.current = new WebSocket(\r\n config.midJourneySocket +\r\n `?channel_type=COURSE&channel_id=${courseId}&user_id=${id}&user_name=${username}`\r\n )\r\n\r\n socketRef.current.onopen = () => {\r\n console.log('Websocket open')\r\n sendContentGenerationRequest()\r\n }\r\n\r\n socketRef.current.onclose = () => {\r\n console.log('Websocket closed')\r\n }\r\n\r\n socketRef.current.onmessage = event => {\r\n const data = JSON.parse(event.data)\r\n\r\n if (!data.content) return\r\n\r\n const receivedContent = [...data.content]\r\n\r\n if (\r\n (receivedContent && receivedContent.length === 0) ||\r\n (data && data.generate_status === 'error')\r\n ) {\r\n setIsGeneratingCourse(false)\r\n socketRef.current.close()\r\n handleGenerationCompletion(content) // Ensure this function name is correctly spelled\r\n return\r\n }\r\n\r\n const newContent = { ...content }\r\n\r\n Object.entries(content).forEach(([key, value]) => {\r\n receivedContent.forEach(item => {\r\n if (item.topic === key) {\r\n // Ensure value is an object and has sub_topic keys\r\n if (typeof value === 'object' && !Array.isArray(value)) {\r\n Object.keys(value).forEach(sub_topic => {\r\n if (sub_topic === item.sub_topic) {\r\n if (!newContent[key][sub_topic]) {\r\n newContent[key][sub_topic] = {}\r\n }\r\n\r\n console.log({\r\n key,\r\n sub_topic,\r\n item,\r\n newContent\r\n })\r\n\r\n // Update or initialize 'generatedContent' and 'status'\r\n newContent[key][sub_topic]['generatedContent'] =\r\n item.content_generated\r\n newContent[key][sub_topic]['status'] = item.generated_status\r\n newContent[key][sub_topic]['img_path'] = item.img_path\r\n }\r\n })\r\n }\r\n }\r\n })\r\n })\r\n\r\n console.log({ newContent })\r\n\r\n setContent(newContent)\r\n saveContentToDatabase(newContent)\r\n\r\n if (data.generate_status === 'completed') {\r\n socketRef.current.close()\r\n handleGenerationCompletion(newContent) // Ensure this function name is correctly spelled\r\n }\r\n }\r\n }\r\n\r\n const handleGenerationCompletion = newContent => {\r\n const contentToProcess = { ...newContent }\r\n\r\n Object.keys(contentToProcess).forEach(topic => {\r\n Object.keys(contentToProcess[topic]).forEach(sub_topic => {\r\n const contentObj =\r\n contentToProcess &&\r\n contentToProcess[topic] &&\r\n contentToProcess[topic][sub_topic]\r\n if (contentObj && contentObj.generatedContent) {\r\n contentObj.status = 'success'\r\n } else {\r\n contentObj.generatedContent = ''\r\n contentObj.status = 'error'\r\n }\r\n })\r\n })\r\n\r\n setIsGeneratingContent(false)\r\n\r\n // Return the modified content\r\n setContent(contentToProcess)\r\n saveContentToDatabase(contentToProcess)\r\n }\r\n\r\n function selectItemsWithGeneratedContentEmpty(data) {\r\n const selectedItems = {}\r\n\r\n for (const key in data) {\r\n const subtopics = data[key]\r\n for (const subtopicKey in subtopics) {\r\n const subtopic = subtopics[subtopicKey]\r\n if (\r\n !subtopic.generatedContent ||\r\n subtopic.generatedContent === '' ||\r\n (subtopic.status && subtopic.status === 'error')\r\n ) {\r\n if (!selectedItems[key]) {\r\n selectedItems[key] = {}\r\n }\r\n selectedItems[key][subtopicKey] = subtopic\r\n }\r\n }\r\n }\r\n\r\n return selectedItems\r\n }\r\n\r\n const saveContentToDatabase = data => {\r\n const contentToSave = JSON.stringify(data || content)\r\n\r\n const { active_organization_id } = user.info\r\n\r\n setIsSavingContent(true)\r\n api.courses\r\n .saveGeneratedContent({\r\n courseId: courseId,\r\n orgId: active_organization_id,\r\n table: { content: contentToSave }\r\n })\r\n .then(() => {\r\n setIsSavingContent(false)\r\n })\r\n .catch(err => {\r\n setIsSavingContent(false)\r\n console.log(err)\r\n })\r\n }\r\n\r\n const sendContentGenerationRequest = () => {\r\n const { active_organization_id } = user.info\r\n\r\n const contentToGenerate = selectItemsWithGeneratedContentEmpty(content)\r\n const structuredArray = convertToArrayOfObjects(contentToGenerate)\r\n\r\n api.courses\r\n .aiContentGenerationUrl({\r\n course_id: courseId,\r\n table_of_content: JSON.stringify(content),\r\n course_name: courseTitle,\r\n org_id: String(active_organization_id),\r\n table_of_contents: structuredArray\r\n })\r\n .then(res => {\r\n console.log({ res })\r\n })\r\n .catch(err => {\r\n setIsGeneratingContent(false)\r\n console.error(err)\r\n })\r\n }\r\n\r\n const handleGenerateCourseContent = () => {\r\n setIsConfirmationModalVisible(false)\r\n setIsGeneratingContent(true)\r\n onContentGenerationStarted()\r\n initializeWebsocket()\r\n }\r\n\r\n const progressStatus = useMemo(() => {\r\n if (!content) {\r\n return {\r\n totalSubtopics: 0,\r\n totalSubtopicsWithContent: 0,\r\n subTopicsWithError: 0\r\n }\r\n }\r\n\r\n // total subtopics inside the content\r\n const totalSubtopics = Object.keys(content).reduce((acc, section) => {\r\n return acc + Object.keys(content[section]).length\r\n }, 0)\r\n\r\n // total subtopics inside the content with generated content\r\n const totalSubtopicsWithContent = Object.keys(content).reduce(\r\n (acc, section) => {\r\n return (\r\n acc +\r\n Object.keys(content[section]).reduce((acc, subtopic) => {\r\n return acc + (content[section][subtopic].generatedContent ? 1 : 0)\r\n }, 0)\r\n )\r\n },\r\n 0\r\n )\r\n\r\n const subTopicsWithError = totalSubtopics - totalSubtopicsWithContent\r\n\r\n return {\r\n totalSubtopics,\r\n totalSubtopicsWithContent,\r\n subTopicsWithError\r\n }\r\n }, [content])\r\n\r\n function flattenJSON(data) {\r\n const result = []\r\n\r\n function flattenObject(obj, parentType = 'title') {\r\n for (const key in obj) {\r\n const content = obj[key].generatedContent\r\n\r\n if (typeof obj[key] === 'object' && Object.keys(obj[key]).length > 0) {\r\n result.push({ type: parentType, content: key })\r\n flattenObject(obj[key], 'subtopic')\r\n }\r\n\r\n if (content) {\r\n result.push({ type: 'content', content })\r\n }\r\n }\r\n }\r\n\r\n flattenObject(data)\r\n\r\n return result\r\n }\r\n\r\n function downloadDocx(docContent) {\r\n try {\r\n const transformedData = flattenJSON(docContent)\r\n const doc = new Document({\r\n sections: [\r\n {\r\n children: transformedData.map(({ type, content }) => {\r\n return new Paragraph({\r\n spacing: {\r\n after: type === 'title' ? 750 : type === 'content' ? 300 : 250\r\n },\r\n children: [\r\n new TextRun({\r\n text: content,\r\n bold: true,\r\n size: type === 'title' ? 28 : type === 'subtopic' ? 24 : 20,\r\n color: type === 'title' ? '#0003ff' : '#000000'\r\n })\r\n ]\r\n })\r\n })\r\n }\r\n ]\r\n })\r\n\r\n saveDocumentToFile(doc, `Course Document File for ${courseTitle}.docx`)\r\n } catch (error) {\r\n console.error('Error while generating and saving the document:', error)\r\n // Handle the error accordingly\r\n }\r\n }\r\n\r\n const downloadWithoutReferences = () => {\r\n const objWithoutRef = removeReferences(content)\r\n const referencesArray = extractReferences(content)\r\n\r\n downloadRefenceDocx(referencesArray)\r\n downloadDocx(objWithoutRef)\r\n }\r\n\r\n const downloadRefenceDocx = array => {\r\n try {\r\n const doc = new Document({\r\n sections: [\r\n {\r\n children: [\r\n new Paragraph({\r\n text: 'References',\r\n heading: HeadingLevel.HEADING_1\r\n }),\r\n ...array.map(reference => {\r\n return new Paragraph({\r\n spacing: {\r\n after: 200\r\n },\r\n children: [\r\n new TextRun({\r\n text: reference,\r\n bold: true\r\n })\r\n ]\r\n })\r\n })\r\n ]\r\n }\r\n ]\r\n })\r\n\r\n saveDocumentToFile(doc, `References File for ${courseTitle}.docx`)\r\n } catch (error) {\r\n console.error('Error while generating and saving the document:', error)\r\n }\r\n }\r\n\r\n function saveDocumentToFile(doc, fileName) {\r\n Packer.toBlob(doc).then(blob => {\r\n saveAs(blob, fileName)\r\n })\r\n }\r\n\r\n const handleSaveGeneratedContent = () => {\r\n // enabling auto update for content\r\n setIsAutoUpdate(true)\r\n const newContent = {\r\n ...content\r\n }\r\n\r\n const {\r\n content: generatedContent,\r\n title: subTopic,\r\n lesson\r\n } = generatedContentModal\r\n newContent[lesson][subTopic].generatedContent = generatedContent\r\n setContent(newContent)\r\n setGeneratedContentModal({\r\n isVisible: false,\r\n content: '',\r\n title: '',\r\n lesson: ''\r\n })\r\n }\r\n\r\n function convertContentToCourseData(data) {\r\n const dataArray = []\r\n\r\n for (const topic in data) {\r\n const subTopics = Object.entries(data[topic])\r\n .filter(([key, value]) => key !== 'generatedContent')\r\n .map(([sub_topic, { generatedContent, img_path }]) => ({\r\n sub_topic,\r\n generated_content: generatedContent,\r\n img_path\r\n }))\r\n dataArray.push({ topic, sub_topics: subTopics })\r\n }\r\n\r\n return dataArray\r\n }\r\n\r\n const confirmCreateCourse = templateData => {\r\n Modal.confirm({\r\n title: t('v4:confirm_creating_course'),\r\n content: t('v4:generate_content_automatically'),\r\n onOk() {\r\n handleCreateCourse(templateData)\r\n },\r\n centered: true,\r\n width: '500'\r\n })\r\n }\r\n\r\n const handleCreateCourse = templateData => {\r\n setIsGeneratingCourse(true)\r\n const contentWithRemovedRefs = removeReferences(content)\r\n const structuredArray = convertContentToCourseData(contentWithRemovedRefs)\r\n templateData.tocs = structuredArray\r\n\r\n // Create a queue of promises to process each topic one by one\r\n const processTopicsSequentially = async () => {\r\n try {\r\n for (let i = 0; i < structuredArray.length; i++) {\r\n // Create a new payload for each topic\r\n const singleTopicPayload = {\r\n ...templateData,\r\n position: i + 1,\r\n tocs: [structuredArray[i]] // Send only one topic at a time\r\n }\r\n\r\n // Log which topic is being processed (optional)\r\n console.log(\r\n `Processing topic ${i + 1}/${structuredArray.length}: ${\r\n structuredArray[i].topic\r\n }`\r\n )\r\n\r\n // Make the API call for this single topic\r\n await api.courses.generateAllAILessons(\r\n { courseId },\r\n singleTopicPayload\r\n )\r\n }\r\n\r\n // All topics processed successfully\r\n history.push(`/courses/${courseId}/edit`)\r\n } catch (err) {\r\n setIsGeneratingCourse(false)\r\n message.error(err.message)\r\n }\r\n }\r\n\r\n // Start the sequential processing\r\n processTopicsSequentially()\r\n }\r\n\r\n const handleAddContentFromInternet = () => {\r\n const { content: generatedContent, title, lesson } = generatedContentModal\r\n\r\n setIsAddingContentFromInternet({\r\n topic: lesson,\r\n sub_topic: title\r\n })\r\n\r\n const payload = {\r\n course_title: courseTitle,\r\n topic: lesson,\r\n sub_topic: title,\r\n database_content: generatedContent\r\n }\r\n // disabling auto saving for content generated from internet\r\n setIsAutoUpdate(false)\r\n api.courses\r\n .generateContentFromInternet(payload)\r\n .then(res => {\r\n const text = res.data\r\n setGeneratedContentModal(pre => ({\r\n ...pre,\r\n content: text\r\n }))\r\n setContent(pre => ({\r\n ...pre,\r\n [lesson]: {\r\n ...pre[lesson],\r\n [title]: {\r\n generatedContent: text\r\n }\r\n }\r\n }))\r\n })\r\n .finally(() => {\r\n setIsAddingContentFromInternet(null)\r\n })\r\n }\r\n\r\n const isContentGeneratedSuccessfully = useMemo(() => {\r\n if (isGeneratingContent) return false\r\n\r\n if (progressStatus.totalSubtopicsWithContent === 0) return false\r\n\r\n return (\r\n progressStatus.totalSubtopicsWithContent === progressStatus.totalSubtopics\r\n )\r\n }, [progressStatus, isGeneratingContent])\r\n\r\n const contentSuccessInAllSections = useMemo(() => {\r\n if (isGeneratingContent) return false\r\n\r\n const isSuccess = Object.keys(content).every(section =>\r\n Object.keys(content[section]).every(subsection => {\r\n const contentItem =\r\n content && content[section] && content[section][subsection]\r\n const generatedContent = contentItem && contentItem.generatedContent\r\n const status = contentItem && contentItem.status\r\n\r\n return generatedContent && status !== 'error'\r\n })\r\n )\r\n\r\n if (isSuccess) setIsContentGenerationCompleted(isSuccess)\r\n\r\n return isSuccess\r\n }, [isGeneratingContent, content])\r\n\r\n function removeReferences(inputObj) {\r\n // Remove references from each section\r\n const data = JSON.parse(JSON.stringify(inputObj))\r\n for (const section in data) {\r\n for (const subsection in data[section]) {\r\n const content = data[section][subsection].generatedContent\r\n let contentWithoutList = content.replace(/\\nReferences:.*$/gs, '')\r\n\r\n // Remove references within the text\r\n let contentWithoutReferences = contentWithoutList.replace(\r\n /\\[\\d+\\]/g,\r\n ''\r\n )\r\n\r\n contentWithoutReferences.trim()\r\n\r\n data[section][subsection].generatedContent = contentWithoutReferences\r\n }\r\n }\r\n\r\n // Convert the modified object back to JSON string and return\r\n return data\r\n }\r\n\r\n function extractReferences(data) {\r\n const referencesSet = new Set()\r\n\r\n // Loop through each section\r\n Object.values(data).forEach(section => {\r\n // Loop through each sub-section\r\n Object.values(section).forEach(subSection => {\r\n // Extract references from generated content\r\n const generatedContent = subSection.generatedContent\r\n const regex = /\\[([^\\]]+)\\] [^\\[]+/g // Regular expression to match references\r\n let match\r\n while ((match = regex.exec(generatedContent)) !== null) {\r\n let reference = match[0]\r\n // Remove trailing newline characters\r\n reference = reference.replace(/\\n$/, '')\r\n referencesSet.add(reference) // Add matched reference to the set\r\n }\r\n })\r\n })\r\n\r\n // Convert set to sorted array and return\r\n const references = Array.from(referencesSet).sort()\r\n return references\r\n }\r\n\r\n const toggleDocumentModal = () => setShowDocumentModal(!showDocumentModal)\r\n\r\n const checkError = () => {\r\n if (isGeneratingContent) return false\r\n\r\n return Object.values(content).some(section => {\r\n return Object.values(section).some(subsection => {\r\n return subsection.status === 'error'\r\n })\r\n })\r\n }\r\n const { t } = useTranslation()\r\n\r\n const showInternetContentLoading = useMemo(() => {\r\n if (!isAddingContentFromInternet) return false\r\n\r\n if (isAddingContentFromInternet) {\r\n console.log({\r\n generatedContentModal,\r\n isAddingContentFromInternet\r\n })\r\n const isSameTopic =\r\n generatedContentModal.lesson === isAddingContentFromInternet.topic\r\n const isSameSubTopic =\r\n generatedContentModal.title === isAddingContentFromInternet.sub_topic\r\n\r\n return isSameTopic && isSameSubTopic\r\n }\r\n\r\n return false\r\n }, [isAddingContentFromInternet, generatedContentModal])\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {isGeneratingContent && (\r\n {t('v3:ai_toc')}
\r\n \r\n {t('v3:ai_note_topic')}\r\n \r\n\r\n
\r\n )}\r\n \r\n {Object.entries(content).map(\r\n ([sectionTitle, subsections], nindex) => (\r\n {\r\n setCurrentSection(sectionTitle)\r\n setNewTopicModalVisible(true)\r\n }}\r\n >\r\n {t('v3:ai_add_topic')}\r\n \r\n )}\r\n
\r\n )\r\n )}\r\n \r\n \r\n {isModalVisible &&\r\n editTopicStatus &&\r\n editTopicTopIndex === nindex ? (\r\n setNewTitle(e.target.value)}\r\n />\r\n ) : (\r\n {sectionTitle} \r\n )}\r\n\r\n {renderActionItems(sectionTitle, null, -1, nindex, true)}\r\n \r\n
\r\n {!isGeneratingContent && (\r\n \r\n \r\n onSortTopicsEnd({ sectionTitle, oldIndex, newIndex })\r\n }\r\n useDragHandle={isGeneratingContent}\r\n lockAxis=\"y\"\r\n axis=\"y\"\r\n lockToContainerEdges={true}\r\n >\r\n {Object.keys(subsections).map((item, index) => (\r\n \r\n \r\n \r\n {isModalVisible &&\r\n editTopicTopIndex === nindex &&\r\n editTopicIndex === index ? (\r\n setNewTitle(e.target.value)}\r\n />\r\n ) : (\r\n item\r\n )}\r\n\r\n {subsections[item].generatedContent && (\r\n \r\n \r\n )}\r\n \r\n {isGeneratingContent &&\r\n !subsections[item].generatedContent ? (\r\n
\r\n \r\n ))}\r\n \r\n \r\n {contentSuccessInAllSections ? (\r\n <>\r\n {!isGeneratingContent && (\r\n <>\r\n \r\n {t('v3:ai_add_lesson')}\r\n \r\n \r\n )}\r\n {!isFromKnowledgeCenter && (\r\n saveContentToDatabase()}\r\n loading={isSavingContent}\r\n ghost\r\n >\r\n {t('v3:ai_save_later')}\r\n \r\n )}\r\n\r\n \r\n {t('v3:ai_download_word_doc')}\r\n \r\n\r\n {!isFromKnowledgeCenter && (\r\n setOpenTemplateModal(true)}\r\n loading={isGeneratingCourse}\r\n >\r\n Proceed to Template Selection\r\n
\r\n \r\n
\r\n )}\r\n \r\n {!isGeneratingContent && (\r\n <>\r\n \r\n {t('v3:ai_add_lesson')}\r\n \r\n \r\n )}\r\n setIsConfirmationModalVisible(true)}\r\n loading={isGeneratingContent}\r\n style={{ marginLeft: '10px' }}\r\n >\r\n {t('v3:ai_generate_course_content')}\r\n \r\n
\r\n\r\n {checkError() && (\r\n \r\n {/* two choices, download with references or download without references */}\r\n
\r\n \r\n\r\n \r\n or \r\n
\r\n \r\n downloadDocx(content)}\r\n >\r\n {t('v3:ai_download_ref')}\r\n \r\n\r\n
\r\n\r\n {t('v3:ai_download_ref_content')}
\r\n\r\n \r\n {t('v3:ai_download_without_ref')}\r\n \r\n\r\n
\r\n \r\n {t('v3:ai_download_two_word')}\r\n
\r\n {t('v3:ai_download_two_word_content_one')}\r\n
- {t('v3:ai_download_two_word_content_two')}\r\n
\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n\r\n \r\n \r\n setGeneratedContentModal(prev => ({\r\n ...prev,\r\n content: value\r\n }))\r\n }\r\n />\r\n
\r\n\r\n \r\n \r\n {t('v3:ai_add_content_from_internet')}\r\n \r\n
\r\n\r\n {generatedContentModal.title}
\r\n\r\n \r\n {t('general:save')}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {t('v3:attention')}
\r\n{t('v3:ai_undo_warning')}
\r\n\r\n
\r\n \r\n 
\r\n
\r\n\r\n {t('v3:before_varifying')}
\r\n{t('v3:ai_verified_content')}
\r\n{t('v3:ai_want_proceed')}
\r\n \r\n \r\n )\r\n}\r\n\r\nconst ViewContent = ({ text, onChange }) => {\r\n const [inputValue, setInputValue] = useState(text)\r\n const textRef = useRef(null)\r\n\r\n useEffect(() => {\r\n setInputValue(text)\r\n const mirroredEle = document.getElementById('mirror')\r\n if (mirroredEle) {\r\n mirroredEle.innerHTML = linkifyStr(text, {\r\n target: '_blank'\r\n })\r\n }\r\n }, [text])\r\n\r\n const handleChange = e => {\r\n const newValue = e.target.value\r\n setInputValue(newValue)\r\n onChange(newValue)\r\n }\r\n\r\n useEffect(() => {\r\n const containerEle = document.getElementById('container')\r\n const textarea = document.getElementById('textarea')\r\n\r\n const mirroredEle = document.createElement('div')\r\n mirroredEle.textContent = textarea.value\r\n mirroredEle.classList.add('container__mirror')\r\n mirroredEle.id = 'mirror'\r\n containerEle.appendChild(mirroredEle)\r\n\r\n const textareaStyles = window.getComputedStyle(textarea)\r\n ;[\r\n 'border',\r\n 'boxSizing',\r\n 'fontFamily',\r\n 'fontSize',\r\n 'fontWeight',\r\n 'letterSpacing',\r\n 'lineHeight',\r\n 'padding',\r\n 'textDecoration',\r\n 'textIndent',\r\n 'textTransform',\r\n 'whiteSpace',\r\n 'wordSpacing',\r\n 'wordWrap'\r\n ].forEach(property => {\r\n mirroredEle.style[property] = textareaStyles[property]\r\n })\r\n mirroredEle.style.borderColor = 'transparent'\r\n\r\n const parseValue = v =>\r\n v.endsWith('px') ? parseInt(v.slice(0, -2), 10) : 0\r\n const borderWidth = parseValue(textareaStyles.borderWidth)\r\n\r\n const ro = new ResizeObserver(() => {\r\n mirroredEle.style.width = `${textarea.clientWidth + 2 * borderWidth}px`\r\n mirroredEle.style.height = `${textarea.clientHeight + 2 * borderWidth}px`\r\n })\r\n ro.observe(textarea)\r\n\r\n textarea.addEventListener('scroll', () => {\r\n mirroredEle.scrollTop = textarea.scrollTop\r\n })\r\n\r\n const findLinks = () => {\r\n mirroredEle.innerHTML = linkifyStr(textarea.value, {\r\n target: '_blank'\r\n })\r\n }\r\n\r\n textarea.addEventListener('input', () => {\r\n findLinks()\r\n })\r\n\r\n findLinks()\r\n }, [])\r\n\r\n return (\r\n \r\n \r\n
\r\n )\r\n}\r\nexport default TableOfContents\r\n","import AiTableOfContent from './AiTableOfContent'\r\n\r\nexport default AiTableOfContent\r\n","import React, { Fragment, useEffect, useRef, useState } from 'react'\r\nimport { api } from '../../services'\r\nimport {\r\n Alert,\r\n Modal,\r\n Card,\r\n Input,\r\n Button,\r\n Icon,\r\n Avatar,\r\n Spin,\r\n Row,\r\n Col\r\n} from 'antd'\r\nimport './AiCourseCreation.scss'\r\nimport AiCourseForm from './AiCourseForm'\r\nimport AiTableOfContent from './AiTableOfContent'\r\nimport { useTranslation } from 'react-i18next'\r\nimport uuidv4 from 'uuid/v4'\r\nimport NewHeader from '../NewHeader'\r\nimport history from '../../history'\r\nimport { useSelector } from 'react-redux'\r\nimport { config } from '../../constants'\r\n\r\nconst { TextArea } = Input\r\nconst { confirm } = Modal\r\n\r\nconst defaultErrorObj = {\r\n hasError: false,\r\n msg: ''\r\n}\r\n\r\nconst defaultShowModal = {\r\n isVisible: false,\r\n content: {}\r\n}\r\n\r\nconst CourseCreation = props => {\r\n const [courseTitle, setCourseTitle] = useState('')\r\n const [conversation, setConversation] = useState([])\r\n const [chatText, setChatText] = useState('')\r\n const [isLoading, setIsLoading] = useState(false)\r\n const [error, setError] = useState(defaultErrorObj)\r\n const [isInitialForm, setIsInitialForm] = useState(true)\r\n const [isGeneratingTableOfContent, setIsGeneratingTableOfContent] = useState(\r\n false\r\n )\r\n const [isContentGenerationStarted, setIsContentGenerationStarted] = useState(\r\n false\r\n )\r\n const [showModal, setShowModal] = useState(defaultShowModal)\r\n const [isFetchingAiContent, setIsFetchingAiContent] = useState(false)\r\n const [aiContent, setAiContent] = useState(null)\r\n const [\r\n isContentGenerationCompleted,\r\n setIsContentGenerationCompleted\r\n ] = useState(false)\r\n\r\n const courseId = props.match.params.id\r\n const user = useSelector(state => state.user)\r\n const { t } = useTranslation()\r\n\r\n useEffect(() => {\r\n if (courseId) {\r\n getCourseTitle()\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (aiContent) {\r\n setShowModal({\r\n isVisible: true,\r\n content: {\r\n id: uuidv4(),\r\n content: aiContent\r\n }\r\n })\r\n setIsInitialForm(false)\r\n setIsContentGenerationStarted(true)\r\n }\r\n }, [aiContent])\r\n\r\n const getCourseTitle = () => {\r\n setIsFetchingAiContent(true)\r\n api.courses\r\n .getCourseById(courseId)\r\n .then(res => {\r\n setCourseTitle(res.data.title)\r\n if (res.data.is_ai_generated) {\r\n history.push(`/courses/${courseId}/edit`)\r\n } else {\r\n fetchContent()\r\n }\r\n })\r\n .catch(error => {\r\n console.error(error)\r\n setIsFetchingAiContent(false)\r\n history.push(`/courses/${courseId}/edit`)\r\n })\r\n }\r\n\r\n const fetchContent = () => {\r\n setIsFetchingAiContent(true)\r\n const activeOrganizationId = user.info.active_organization_id\r\n api.courses\r\n .getGeneratedContent({\r\n orgId: activeOrganizationId,\r\n courseId: courseId\r\n })\r\n .then(response => {\r\n if (response.data.content) {\r\n setAiContent(response.data.content)\r\n setIsInitialForm(false)\r\n }\r\n setIsFetchingAiContent(false)\r\n })\r\n .catch(() => {\r\n setIsFetchingAiContent(false)\r\n })\r\n }\r\n\r\n const handleChat = (prompt = '') => {\r\n if ((!prompt && !chatText) || isLoading) return\r\n\r\n const finalPrompt = prompt || chatText\r\n setChatText('')\r\n setIsLoading(true)\r\n\r\n const userMessage = { id: uuidv4(), role: 'user', questions: finalPrompt }\r\n\r\n const systemMessageId = uuidv4()\r\n const systeMessage = {\r\n id: systemMessageId,\r\n role: 'assistant',\r\n questions: ''\r\n }\r\n\r\n const newConversation = [...conversation, userMessage, systeMessage]\r\n setConversation(newConversation)\r\n\r\n const contextData = conversation.find(item =>\r\n item.hasOwnProperty('context')\r\n )\r\n\r\n const conversationPayload = [\r\n ...contextData.context,\r\n ...conversation,\r\n userMessage,\r\n systeMessage\r\n ]\r\n\r\n const conversationText = conversationPayload\r\n .map(msg => ({\r\n role: msg.role,\r\n content: msg.questions || msg.content\r\n }))\r\n .filter(i => i.content)\r\n\r\n console.log({\r\n conversationPayload,\r\n conversationText\r\n })\r\n\r\n const url = config.questionAnswerAiUrl\r\n const token = localStorage.getItem('accessToken')\r\n\r\n fetch(`${url}/?service=chat-stream`, {\r\n method: 'POST',\r\n headers: {\r\n Accept: 'text/event-stream',\r\n 'Content-Type': 'application/json',\r\n Authorization: `Bearer ${token}`\r\n },\r\n body: JSON.stringify({\r\n conversation_history: conversationText,\r\n suggestion_generate: true,\r\n toc_generate: false\r\n })\r\n })\r\n .then(response => {\r\n if (!response.body)\r\n throw new Error('ReadableStream not yet supported in this browser.')\r\n\r\n const reader = response.body.getReader()\r\n const decoder = new TextDecoder()\r\n let accumulatedText = ''\r\n\r\n function readStream() {\r\n return reader.read().then(({ done, value }) => {\r\n if (done) {\r\n setIsLoading(false)\r\n return\r\n }\r\n\r\n const chunk = decoder.decode(value, { stream: true })\r\n accumulatedText += chunk\r\n\r\n setConversation(prev =>\r\n prev.map(msg =>\r\n msg.id === systemMessageId\r\n ? { ...msg, questions: accumulatedText }\r\n : msg\r\n )\r\n )\r\n\r\n return readStream()\r\n })\r\n }\r\n\r\n return readStream()\r\n })\r\n .catch(error => {\r\n console.error('Streaming error:', error)\r\n setError({ hasError: true, msg: 'Error in streaming data' })\r\n setIsLoading(false)\r\n })\r\n }\r\n\r\n const handleFormSubmit = (values, data) => {\r\n console.log({\r\n values,\r\n data,\r\n newConvo: [\r\n {\r\n id: uuidv4(),\r\n formValues: values,\r\n role: 'user',\r\n isInitial: true\r\n },\r\n {\r\n id: uuidv4(),\r\n ...data,\r\n role: 'assistant'\r\n }\r\n ]\r\n })\r\n setIsInitialForm(false)\r\n setConversation([\r\n {\r\n id: uuidv4(),\r\n formValues: values,\r\n role: 'user',\r\n isInitial: true\r\n },\r\n {\r\n id: uuidv4(),\r\n ...data,\r\n role: 'assistant'\r\n }\r\n ])\r\n }\r\n\r\n const generateTableOfContent = () => {\r\n const contextData = conversation.find(item =>\r\n item.hasOwnProperty('context')\r\n )\r\n\r\n const conversationPayload = [...contextData.context, ...conversation]\r\n\r\n const conversationText = conversationPayload\r\n .map(msg => ({\r\n role: msg.role,\r\n content: msg.questions || msg.content\r\n }))\r\n .filter(i => i.content)\r\n\r\n setIsGeneratingTableOfContent(true)\r\n setChatText('')\r\n\r\n api.courses\r\n .generateStreaming({\r\n conversation_history: conversationText,\r\n suggestion_generate: false,\r\n toc_generate: true\r\n })\r\n .then(res => {\r\n setConversation(prev => [\r\n ...prev,\r\n {\r\n id: uuidv4(),\r\n table_of_content: res.data.table_of_content,\r\n promptId: prev[prev.length - 1].id,\r\n role: 'assistant'\r\n }\r\n ])\r\n setIsGeneratingTableOfContent(false)\r\n })\r\n .catch(err => {\r\n setIsGeneratingTableOfContent(false)\r\n setError({ hasError: true, msg: err.message })\r\n })\r\n }\r\n\r\n const handleSetupAgain = () => {\r\n confirm({\r\n title: t('v3:ai_creation_confirm_title'),\r\n content: t('v3:ai_creation_confirm_content'),\r\n centered: true,\r\n onOk() {\r\n setIsInitialForm(true)\r\n setConversation([])\r\n setShowModal({ isVisible: false, content: {} })\r\n setIsGeneratingTableOfContent(false)\r\n setIsLoading(false)\r\n setChatText('')\r\n setError(defaultErrorObj)\r\n },\r\n onCancel() {\r\n console.log('Cancel')\r\n }\r\n })\r\n }\r\n\r\n const handleGoBack = () => {\r\n if (isContentGenerationCompleted) {\r\n history.push(`/courses/${courseId}/edit`)\r\n return\r\n }\r\n confirm({\r\n title: t('v3:ai_creation_confirm_title'),\r\n content: t('v3:ai_creation_confirm_content'),\r\n centered: true,\r\n onOk() {\r\n history.push(`/courses/${courseId}/edit`)\r\n },\r\n onCancel() {\r\n console.log('Cancel')\r\n }\r\n })\r\n }\r\n\r\n const handleTableOfContentChange = ({ id, tableOfContent }) => {\r\n setConversation(prev =>\r\n prev.map(item =>\r\n item.id === id ? { ...item, table_of_content: tableOfContent } : item\r\n )\r\n )\r\n }\r\n\r\n const handleContentGenerationStarted = () => {\r\n setIsContentGenerationStarted(true)\r\n }\r\n\r\n const isFromKnowledgeCenter = window.location.pathname.includes(\r\n 'knowledge-center'\r\n )\r\n\r\n const handleCancel = () => {\r\n const hasContentGenerationStarted =\r\n isContentGenerationStarted && !isGeneratingTableOfContent\r\n if (hasContentGenerationStarted) {\r\n return\r\n }\r\n confirm({\r\n title: 'Are you sure you want to close?',\r\n content: `All your changes will be lost.`,\r\n onOk: () => {\r\n history.push(`/courses/${courseId}/edit`)\r\n }\r\n })\r\n }\r\n\r\n const renderCreationModalContent = () => {\r\n return (\r\n <>\r\n \r\n
\r\n\r\n {isInitialForm ? (\r\n isFromKnowledgeCenter ? (\r\n {t('v3:ai_course_creation')}
\r\n\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n {!isContentGenerationStarted && (\r\n \r\n \r\n
\r\n \r\n )}\r\n {showModal && showModal.isVisible && (\r\n \r\n
\r\n \r\n
\r\n {t('v4:course_assistance')}
\r\n\r\n
\r\n \r\n setChatText(e.target.value)}\r\n onPressEnter={e => {\r\n e.preventDefault()\r\n if (!chatText.trim()) return\r\n handleChat()\r\n }}\r\n value={chatText}\r\n style={{ width: '100%' }}\r\n />\r\n {\r\n if (!chatText.trim()) return\r\n handleChat()\r\n }}\r\n >\r\n
\r\n \r\n \r\n {t('v4:go_back')}\r\n \r\n
\r\n )}\r\n \r\n )\r\n }\r\n\r\n if (isFromKnowledgeCenter) {\r\n return (\r\n \r\n {renderCreationModalContent()}\r\n
\r\n )\r\n }\r\n\r\n return (\r\n ${escapeHtml(code)}${parseInlineMarkdown(\r\n blockquoteMatch[1]\r\n )}`\r\n }\r\n\r\n // Handle horizontal rules\r\n if (trimmedLine.match(/^([-*_]){3,}$/)) {\r\n return '
'\r\n }\r\n\r\n // Regular paragraph\r\n return `
${parseInlineMarkdown(trimmedLine)}
`\r\n })\r\n .filter(Boolean)\r\n\r\n // Handle any remaining list\r\n if (inList && listItems.length > 0) {\r\n processedLines.push(`<${listType}>${listItems.join('')}`)\r\n }\r\n\r\n return processedLines.join('\\n')\r\n }\r\n\r\n // Helper function to escape HTML special characters\r\n const escapeHtml = text => {\r\n const htmlEntities = {\r\n '&': '&',\r\n '<': '<',\r\n '>': '>',\r\n '\"': '"',\r\n \"'\": '''\r\n }\r\n return text.replace(/[&<>\"']/g, char => htmlEntities[char])\r\n }\r\n\r\n // Helper function to parse inline markdown elements\r\n const parseInlineMarkdown = text => {\r\n // Handle inline code first to prevent parsing markdown inside code\r\n text = text.replace(\r\n /`([^`]+)`/g,\r\n (match, code) => `${escapeHtml(code)}`\r\n )\r\n\r\n return (\r\n text\r\n // Bold (either ** or __)\r\n .replace(/(\\*\\*|__)(.*?)\\1/g, '$2')\r\n // Italic (either * or _)\r\n .replace(/(\\*|_)(.*?)\\1/g, '$2')\r\n // Strike-through\r\n .replace(/~~(.*?)~~/g, '')\r\n )\r\n }\r\n\r\n return (\r\n
\r\n {conversation.map((message, index) => {\r\n if (message.table_of_content) return null\r\n\r\n const isSystem = message.role === 'assistant'\r\n const isLastMessage = index === conversation.length - 1\r\n const isStreaming = isSystem && isLoading && isLastMessage\r\n\r\n let content = message.questions || ''\r\n if (isSystem && !isStreaming && !message.questions) {\r\n content = message.revised_prompt\r\n ? t('v3:ai_prompt_ready')\r\n : t('v3:ai_unable_respond')\r\n }\r\n\r\n return (\r\n \r\n {message.isInitial ? null : (\r\n \r\n \r\n {t('v3:ai_generate_toc_now')}\r\n \r\n )}\r\n
\r\n \r\n )}\r\n \r\n )\r\n })}\r\n \r\n \r\n )\r\n}\r\n\r\nconst AiCourseFormPreview = ({ message = {}, handleSetupAgain }) => {\r\n if (!message.formValues) return null\r\n\r\n const {\r\n industrySpecific,\r\n industry,\r\n standard,\r\n standardDetails,\r\n courseTitle,\r\n learningObjective,\r\n duration\r\n } = message.formValues\r\n const { t } = useTranslation()\r\n\r\n return (\r\n \r\n {isSystem ? (\r\n {t('v3:ai')}\r\n ) : user &&\r\n user.info &&\r\n user.info.avatar &&\r\n user.info.avatar.link ? (\r\n
\r\n \r\n {isStreaming && !message.questions ? (\r\n {\r\n const contentToShow = showTableOfContentButton(\r\n message.id\r\n )\r\n setShowModal(\r\n isShowingTableOfContent(message.id)\r\n ? defaultShowModal\r\n : {\r\n isVisible: true,\r\n content: {\r\n id: contentToShow.id,\r\n content: contentToShow.table_of_content\r\n }\r\n }\r\n )\r\n }}\r\n >\r\n {isShowingTableOfContent(message.id) ? (\r\n <>\r\n
\r\n )}\r\n {showGenerateTableOfContentButton(message.id) && !isLoading && (\r\n \r\n \r\n \r\n \r\n
\r\n ) : (\r\n \r\n \r\n \r\n {t('v3:setup_again')}\r\n \r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default CourseCreation\r\n","import AiCourseCreation from './AiCourseCreation'\r\n\r\nexport default AiCourseCreation\r\n","import React, { Component, createRef } from 'react'\r\nimport _ from 'lodash'\r\nimport {\r\n Form,\r\n Icon,\r\n Input,\r\n InputNumber,\r\n Button,\r\n Popconfirm,\r\n Spin,\r\n Modal,\r\n message,\r\n Select,\r\n Tooltip\r\n} from 'antd'\r\nimport { SearchOutlined } from '@ant-design/icons'\r\nimport { withTranslation } from 'react-i18next'\r\nimport CreatableSelect from 'react-select/creatable'\r\nimport {\r\n SortableContainer,\r\n SortableElement,\r\n sortableHandle,\r\n arrayMove\r\n} from 'react-sortable-hoc'\r\n\r\nimport api from '../../../../../services/api'\r\nimport { general } from '../../../../../constants'\r\nimport './CourseCreateMain.scss'\r\nimport Badge from './components/Badge'\r\nimport Certificate from './components/Certificate'\r\nimport ContentLoader from '../../internal/ContentLoader'\r\nimport { Row, Col } from '../../../../../styles'\r\nimport { Lessons } from '../../../../../styles/blocks'\r\nimport {\r\n FormHeader,\r\n MarketPlaceTopSection,\r\n MarketPlaceMidSection,\r\n MarketPlaceBottomSection\r\n} from './components'\r\nimport ShowContactsModal from '../../../../Events/Create/components/internal/ShowContactsModal'\r\nimport { FileUpload } from '../../../../../components'\r\nimport AiCourseCreation from '../../../../../components/AiCourseCreation/index.'\r\n\r\nimport history from '../../../../../history'\r\nimport ImageSelect from '../../../../../components/Form/ImageSelect/ImageSelect'\r\nimport AiTemplateSelection from '../../../../../components/AiCourseCreation/AiTemplateSelection/AiTemplateSelection'\r\nimport langOptions from '../../../../../components/CloningModal/langOptions'\r\n\r\nconst { Option } = Select\r\nconst { confirm } = Modal\r\n\r\nclass CourseCreateMain extends Component {\r\n search = window.location.search\r\n params = new URLSearchParams(this.search)\r\n isMarketPlaceQuery = this.params.get('mpquery')\r\n\r\n DragHandle = sortableHandle(() => )\r\n\r\n Page = SortableElement(({ children }) => {\r\n return \r\n
\r\n {t('v4:course_information')}
\r\n\r\n
\r\n \r\n
\r\n \r\n {t('v3:ai_creation_course_title')}\r\n
\r\n {courseTitle}
\r\n\r\n {t('v3:ai_creation_industry_specific')}\r\n
\r\n {industry && (\r\n {industrySpecific}
\r\n\r\n {t('v3:ai_creation_industry')}\r\n
\r\n )}\r\n {industry}
\r\n\r\n {t('v3:ai_creation_standard_needed')}\r\n
\r\n {standardDetails && (\r\n {standard}
\r\n\r\n {t('v3:ai_creation_standard_details')}\r\n
\r\n )}\r\n {standardDetails}
\r\n\r\n
\r\n \r\n {t('v3:ai_creation_estimated_duration')}\r\n
\r\n \r\n {duration} {t('v3:minutes')}\r\n
\r\n\r\n {t('v3:ai_creation_learning_objective')}\r\n
\r\n {learningObjective}
\r\n- {children}
\r\n
\r\n ),\r\n onCancel: () => {\r\n this.setState({ isGeneratingCourse: false })\r\n },\r\n onOk: () => {\r\n api.courses\r\n .updateAllAILessons({ courseId }, data)\r\n .then(async () => {\r\n data.logo_img = templateData.logo_img\r\n data.background_img = templateData.background_img\r\n await courseBuilderActions.handleCourseInput('templateData', data)\r\n this.setState({\r\n openTemplateModal: false,\r\n isGeneratingCourse: false\r\n })\r\n message.success('Course template updated successfully.')\r\n })\r\n .catch(err => {\r\n this.setState({ isGeneratingCourse: false })\r\n message.error(err.message)\r\n })\r\n }\r\n })\r\n }\r\n\r\n handleOpenSelectLibraryModal = e => {\r\n if (e) {\r\n e.stopPropagation()\r\n }\r\n this.setState({\r\n modalOpen: true\r\n })\r\n }\r\n\r\n handleOpenCanva = e => {\r\n if (e) {\r\n e.stopPropagation()\r\n }\r\n this.useCanva('Presentation')\r\n }\r\n\r\n onCoverChange = async coverObj => {\r\n const { courseBuilderActions } = this.props\r\n\r\n await courseBuilderActions.handleCourseInput('courseImg', coverObj)\r\n\r\n this.handleImageSuccess(coverObj)\r\n }\r\n\r\n render() {\r\n const {\r\n form: { getFieldDecorator, getFieldValue },\r\n courseBuilder: {\r\n courseTitle,\r\n courseOrganiser,\r\n courseImg,\r\n lessons,\r\n courseId,\r\n coursePassScore,\r\n courseBadgeId,\r\n courseCertId,\r\n courseAttachmentDetails,\r\n courseEmails,\r\n courseLang,\r\n courseCategories,\r\n templateData\r\n },\r\n course: { isFetching, item: course },\r\n history,\r\n rootPath,\r\n user: {\r\n info: {\r\n id: userId,\r\n isAdmin,\r\n active_organization_id: activeOrgId,\r\n is_super_admin: isSuperAdmin,\r\n organization\r\n }\r\n },\r\n\r\n organizations: { rows },\r\n t,\r\n form,\r\n orgCategoryList\r\n } = this.props\r\n const selectInput = document.getElementById('react-select-2-input')\r\n if (selectInput) {\r\n selectInput.maxLength = 50\r\n }\r\n const customStyles = {\r\n control: provided => ({\r\n ...provided,\r\n borderRadius: '8px',\r\n transition: 'transparent 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)',\r\n marginBottom: isTopicsMax ? '0px' : '24px'\r\n }),\r\n menu: provided => ({\r\n ...provided,\r\n maxHeight: '185px'\r\n }),\r\n menuList: provided => ({\r\n ...provided,\r\n maxHeight: '185px'\r\n })\r\n }\r\n const groupOptions = rows ? rows.filter(o => o.id === activeOrgId)[0] : {}\r\n\r\n const {\r\n isCoverLoading,\r\n isFinishing,\r\n isSaving,\r\n value,\r\n options,\r\n isTopicLoading,\r\n isTopicsMax,\r\n isMarketPlace,\r\n isBadgeLoading,\r\n isCertificateLoading,\r\n openBadgeModal,\r\n openCertificateModal,\r\n showContactModal,\r\n emailList,\r\n fetching,\r\n isCreator,\r\n isCreatingCourseByHuman,\r\n showAiCourseCreationModal,\r\n isFetchingAiContent,\r\n aiContent,\r\n openTemplateModal,\r\n isGeneratingCourse\r\n } = this.state\r\n const publishButtonCondition = course.is_restricted\r\n ? false\r\n : activeOrgId ||\r\n isCreator ||\r\n (course && course.host_ids && course.host_ids.includes(userId)) ||\r\n isSuperAdmin\r\n\r\n const { DragHandle, Page, Pages } = this\r\n return (\r\n \r\n This will automatically update the template for all the generated\r\n lessons and pages in your course.\r\n
\r\n\r\n Note: This process will change the course lesson layouts, which may\r\n affect the positions of audio, video, images, and other elements. If\r\n you have added new elements to an existing template on any page,\r\n their positions will remain unchanged.\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('buttons:save_for_later')}{' '}\r\n {courseId && ({t('general:autosaved')})}\r\n \r\n \r\n
\r\n \r\n {/* history.push(`/course/${courseId}/course-ai`, {\r\n aiContent,\r\n courseTitle,\r\n courseId\r\n }) */}\r\n {!isCreatingCourseByHuman ? (\r\n \r\n this.handleOpenModel()}\r\n disabled={!courseId}\r\n loading={isFetchingAiContent}\r\n type=\"primary\"\r\n className=\"rounded shl-primary-btn\"\r\n >\r\n {t('v4:tooltip_next')}\r\n \r\n ) : publishButtonCondition ? (\r\n \r\n this.finish(true)}\r\n loading={isFinishing}\r\n type=\"primary\"\r\n className=\"rounded\"\r\n disabled={!lessons.list.length}\r\n >\r\n {t('buttons:publish')}\r\n \r\n this.finish(false)}\r\n loading={isFinishing}\r\n type=\"primary\"\r\n className=\"rounded\"\r\n disabled={!lessons.list.length}\r\n >\r\n {t('buttons:finish')}\r\n \r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n {t('clone_lesson_modal_sub')}\r\n
\r\n )}\r\n \r\n
\r\n\r\n {t('title')}
\r\n {t('subtitle')}
\r\n \r\n \r\n this.onCreateLesson()}>\r\n {t('new_lesson')} \r\n {t('new_lesson_sub')} \r\n \r\n\r\n {/* {t('general:or')} */}\r\n\r\n this.setModalVisible(true)}>\r\n {t('existing_lesson')} \r\n {t('existing_lesson_sub')} \r\n \r\n\r\n {/* {t('general:or')} */}\r\n\r\n this.setModalVisible(true, true)}>\r\n {t('clone_lesson')} \r\n {t('clone_lesson_sub')} \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n history.push(rootPath)}\r\n >\r\n
\r\n - {children}
\r\n
\r\n {selectedItem && (\r\n \r\n \r\n {general.CANCEL}\r\n \r\n this.handleFileInsert(selectedItem)}\r\n >\r\n {general.INSERT}\r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n {\r\n handleLessonInput('currentPage', pages.length)\r\n history.push(`${rootPath}/page-constructor`)\r\n }}\r\n />\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n {t('select_layout')} \r\n\r\n \r\n {templateTypes.map(type => (\r\n \r\n this.addPage(type.template)}>\r\n \r\n \r\n {type.title} \r\n \r\n \r\n ))}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n history.push(`${rootPath}/lesson-create/${lessonId}`)\r\n }\r\n >\r\n {t('buttons:back_to_lesson')}\r\n \r\n
\r\n \r\n
\r\n \r\n 
{t('audio:modal_title')}\r\n
\r\n)\r\n\r\nconst ImageIcon = ({ t, isAR, isBackground }) => (\r\n \r\n 
{' '}\r\n {isBackground\r\n ? `${t('v4:background')} ${t('image:image')}`\r\n : !isAR\r\n ? t('image:modal_title')\r\n : 'AR Trigger Image'}\r\n
\r\n)\r\n\r\nconst VideoIcon = ({ t }) => (\r\n \r\n
\r\n)\r\n\r\nconst TextIcon = ({ t }) => (\r\n \r\n 
{t('video:modal_title')}\r\n 
\r\n
\r\n \r\n
\r\n)\r\n\r\nconst AudioModalTitleIcon = ({ t, isShowCreateAudioModal }) => {\r\n return (\r\n \r\n 
{' '}\r\n {t('text:modal_title')} \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport { AudioIcon, ImageIcon, VideoIcon, TextIcon, AudioModalTitleIcon }\r\n","import React from 'react'\r\nimport { Button } from 'antd'\r\n\r\nconst FooterActions = ({ t, onClickCancel, onClickTitle, title, loading, isDisabled }) => {\r\n return [\r\n \r\n 
\r\n
\r\n {isShowCreateAudioModal\r\n ? t('audio:create_audio_modal_title')\r\n : t('audio:edit_audio_modal_title')}\r\n \r\n {Object.keys(pageTypes).map(type => (\r\n handleClick(type)}\r\n >\r\n {pageTypes[type]}\r\n \r\n ))}\r\n
\r\n \r\n \r\n \r\n {saveOriginalContent && (\r\n \r\n Position of Story{' '}\r\n setStoryPosition(value)}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default StoryCreationForm\r\n","import React from 'react'\r\nimport ScenarioConfirmationImage from '../../img/scenario-paper.svg'\r\nimport { Button, Modal } from 'antd'\r\n\r\nimport './styles.scss'\r\n\r\nfunction ScenarioConfirmationModal({ onEdit, onCreate, onCancel }) {\r\n const handleClick = type => {\r\n const handler = type === 'edit' ? onEdit : onCreate\r\n if (handler) handler()\r\n }\r\n\r\n return (\r\n \r\n handleChange(e.target.value)}\r\n rows={10}\r\n >\r\n
\r\n\r\n \r\n
\r\n \r\n\r\n {!saveOriginalContent && (\r\n Save previous content on the pages
\r\n\r\n 
\r\n\r\n
\r\n \r\n Do you want to edit the existing scenario or to create a new\r\n scenario?. If you want to create a new scenario, you will loose the\r\n old scenario.\"\r\n
\r\n\r\n\r\n handleClick('edit')}\r\n >\r\n Edit\r\n \r\n handleClick('create')}\r\n >\r\n Create\r\n \r\n
\r\n \r\n
\r\n Showing Results:
\r\n\r\n
\r\n \r\n handleSelectAll(e.target.checked)}\r\n />\r\n \r\n
\r\n \r\n setYoutubeSearch(e.target.value)}\r\n onSearch={onYoutubeSearch}\r\n />\r\n
\r\n \r\n {videos.length === 0 ? (\r\n
\r\n \r\n handleSelection(item.etag, e.target.checked)}\r\n className=\"select-youtube-video\"\r\n />\r\n
\r\n ))\r\n )}\r\n \r\n {item.selected && (\r\n \r\n handleEnableAI(item.etag, e.target.checked)\r\n }\r\n >\r\n {t('v3:enable_ai')}\r\n \r\n )}\r\n\r\n {item.isAiEnabled && (\r\n \r\n handleAiLanguage(item.etag, lang)\r\n }\r\n />\r\n )}\r\n
\r\n \r\n\r\n \r\n {loading ? (\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default YoutubeVideosList\r\n","import YoutubeVideosList from './YoutubeVideosList'\r\n\r\nexport default YoutubeVideosList\r\n","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport _ from 'lodash'\r\nimport { Form, Button, Select, Input, Icon, Col } from 'antd'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { api } from '../../../../../../../../../../services'\r\nimport { updateMedia } from '../../../../../../../../../../services/api/library'\r\nimport CreatableSelect from 'react-select/creatable'\r\nimport { general } from '../../../../../../../../../../constants'\r\nimport './AddDetailVideo.scss'\r\n\r\nconst { TextArea } = Input\r\n\r\nclass AddDetailVideo extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n topics: [],\r\n keywords: '',\r\n description: '',\r\n isLoading: false,\r\n saveLabel: props.isFromCreateAudio\r\n ? props.t('buttons:insert')\r\n : props.t('buttons:save'),\r\n disableButton: false,\r\n options: [],\r\n value: [],\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n }\r\n this.loadOptions = _.debounce(this.loadOptions, 500)\r\n }\r\n\r\n enableInsertButton = () => {\r\n const { t, isFromCreateAudio } = this.props\r\n this.setState({\r\n saveLabel: isFromCreateAudio ? t('buttons:insert') : t('buttons:save'),\r\n disableButton: false\r\n })\r\n }\r\n\r\n handleChangeKeyword = value => {\r\n const keywords = value.join(',')\r\n this.setState({ keywords })\r\n this.enableInsertButton()\r\n }\r\n\r\n handleChangeDescription = e => {\r\n const description = e.target.value\r\n this.setState({ description })\r\n this.enableInsertButton()\r\n }\r\n\r\n handleSubmit = e => {\r\n e.preventDefault()\r\n const {\r\n getSelectedFile,\r\n upload,\r\n src,\r\n mediaId,\r\n handleFileUpload,\r\n t,\r\n isFromCreateAudio\r\n } = this.props\r\n const { value, description, keywords } = this.state\r\n\r\n this.props.form.validateFields(async err => {\r\n if (!err) {\r\n let tempMediaId = ''\r\n const data = {\r\n topics: _.map(value, 'id'),\r\n description,\r\n keywords,\r\n isSynthesizedAudio: !!isFromCreateAudio\r\n }\r\n this.setState({\r\n isLoading: true,\r\n saveLabel: isFromCreateAudio\r\n ? t('buttons:inserting')\r\n : t('buttons:saving')\r\n })\r\n if (mediaId) {\r\n tempMediaId = mediaId\r\n } else if (src !== undefined) {\r\n const upload_response = await upload(src)\r\n if (upload_response && upload_response.id) {\r\n tempMediaId = upload_response.id\r\n }\r\n } else {\r\n this.setState({\r\n isLoading: false,\r\n saveLabel: isFromCreateAudio\r\n ? t('buttons:insert')\r\n : t('buttons:save'),\r\n disableButton: false\r\n })\r\n return\r\n }\r\n\r\n if (tempMediaId) {\r\n const update_response = await updateMedia(tempMediaId, data)\r\n isFromCreateAudio\r\n ? handleFileUpload([update_response.data], true)\r\n : getSelectedFile([update_response.data])\r\n\r\n if (isFromCreateAudio) {\r\n let oldAudioData =\r\n JSON.parse(localStorage.getItem('audio_data')) || []\r\n const {\r\n audioSynthesizer: {\r\n selected: { selectedText, selectedVoice }\r\n }\r\n } = this.props\r\n\r\n const newAudioData = {\r\n text: selectedText,\r\n voice_type: selectedVoice,\r\n content_id: tempMediaId\r\n }\r\n oldAudioData.push(newAudioData)\r\n localStorage.setItem('audio_data', JSON.stringify(oldAudioData))\r\n }\r\n\r\n this.setState({\r\n isLoading: false,\r\n saveLabel: t('buttons:saved'),\r\n disableButton: true\r\n })\r\n }\r\n }\r\n })\r\n }\r\n\r\n createOptionList = list => {\r\n const options = list.map(topic => this.createOption(topic))\r\n this.setState({\r\n options,\r\n isTopicLoading: false\r\n })\r\n }\r\n\r\n handleChange = (newValue, actionMeta) => {\r\n if (actionMeta.removedValue) {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n this.enableInsertButton()\r\n }\r\n )\r\n } else if (!_.isEmpty(newValue) && newValue.length > 3) {\r\n this.setState({\r\n isTopicsMax: true\r\n })\r\n } else {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n this.enableInsertButton()\r\n }\r\n )\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n handleCreate = inputValue => {\r\n this.setState({ isTopicLoading: true })\r\n const { options, value } = this.state\r\n const topic = { title: inputValue }\r\n if (!_.isEmpty(value) && value.length >= 3) {\r\n this.setState({\r\n isTopicsMax: true,\r\n isTopicLoading: false\r\n })\r\n } else {\r\n api.topics.createTopics(topic).then(({ data }) => {\r\n if (!_.isEmpty(data[0])) {\r\n const newOption = this.createOption(data[0])\r\n this.props.updateTopicList(data[0])\r\n\r\n this.setState(\r\n {\r\n isTopicLoading: false,\r\n options: [...options, newOption],\r\n isTopicsMax: false,\r\n value: [...value, newOption],\r\n inputValue: ''\r\n },\r\n () => {\r\n this.enableInsertButton()\r\n }\r\n )\r\n }\r\n })\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n createOption = topic => {\r\n return {\r\n label: topic.title,\r\n value: topic.title,\r\n id: topic.id\r\n }\r\n }\r\n\r\n loadOptions = newValue => {\r\n const inputValue = newValue.replace(/\\W/g, '')\r\n if (inputValue.length > 0 && inputValue.length <= 50) {\r\n this.setState({\r\n isTopicLoading: true\r\n })\r\n const params = {\r\n search: inputValue,\r\n limit: 10,\r\n offset: 0\r\n }\r\n api.topics.getTopics(params).then(({ data }) => {\r\n this.setState({\r\n inputValue\r\n })\r\n this.createOptionList(data)\r\n })\r\n }\r\n }\r\n\r\n LoadingIndicator = () => (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {uploadProgress.length === 0 && (\r\n
\r\n )}\r\n\r\n \r\n \r\n {({ getRootProps, getInputProps, isDragActive }) => (\r\n \r\n
\r\n )}\r\n \r\n \r\n 
\r\n
\r\n {t('media:drop_files')}
\r\n{t('media:or')}
\r\n \r\n\r\n {fileNotCompatible && (\r\n
\r\n \r\n resetFileInCompatibleMessage()}\r\n >\r\n {t('buttons:ok')}\r\n \r\n
\r\n )}\r\n\r\n {fileSizeExceed && (\r\n \r\n \r\n
\r\n\r\n \r\n {t('errors:upload_error')}\r\n
\r\n \r\n resetFileInCompatibleMessage()}\r\n >\r\n {t('buttons:ok')}\r\n \r\n
\r\n )}\r\n\r\n {uploadProgress.length > 0 && (\r\n \r\n \r\n
\r\n\r\n \r\n {t('errors:file_size_exceed')}\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {item.status !== general.CANCELED && (\r\n \r\n {checkedCompleteUpload(item) && (\r\n
\r\n )}\r\n \r\n {bytesToSize(item.loaded)} {t('of')}{' '}\r\n {bytesToSize(item.total)}\r\n
\r\n )}\r\n {!checkedCompleteUpload(item) && (\r\n \r\n {t('general:completed')}\r\n \r\n )}\r\n \r\n
\r\n ) : (\r\n !_.isEmpty(data) &&\r\n data.map((item, ind) => (\r\n \r\n {item.isSelected && (\r\n
\r\n ))\r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withTranslation('audio')(ShowDetailVideo)\r\n","import ShowDetailVideo from './ShowDetailVideo'\r\n\r\nexport default ShowDetailVideo\r\n","import React, { Fragment } from 'react'\r\nimport { Col, Input, Row } from 'antd'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { Filter } from '../../../../../../../../../../components'\r\nimport './FilterVideo.scss'\r\n\r\nconst { Search } = Input\r\n\r\nconst FilterVideo = props => {\r\n const { t, type, onSearch, tab, onFilter } = props\r\n const filterData = [\r\n { value: 'NEWEST', text: t('filters:Newest_to_Oldest') },\r\n { value: 'OLDEST', text: t('filters:Oldest_to_Newest') },\r\n { value: 'ASC', text: t('filters:A_Z') },\r\n { value: 'DESC', text: t('filters:Z_A') }\r\n ]\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {videoId && (\r\n \r\n \r\n \r\n
\r\n )}\r\n - \r\n
- \r\n
\r\n \r\n
\r\n {/* - \r\n
\r\n
*/}\r\n
\r\n {item.title || item.filename}\r\n \r\n
\r\n \r\n
\r\n \r\n {t('video:mp4_video')} - {bytesToSize(item.file_size)}\r\n
\r\n{t('audio:created')}
\r\n \r\n{moment(item.created_at).format('DD MMM YYYY')}
\r\n \r\n{t('audio:duration')}
\r\n \r\n{duration ? durationToTime(duration) : '...'}
\r\n \r\n {showDetail && (\r\n\r\n
\r\n )}\r\n {t('audio:topic')}
\r\n \r\n\r\n {loading\r\n ? 'loading...'\r\n : topicList.length > 0\r\n ? topicList.join()\r\n : '...'}\r\n
\r\n \r\n\r\n{t('audio:description')}
\r\n \r\n\r\n {item.description ? item.description : '...'}\r\n
\r\n \r\n\r\n{t('audio:key_words_tag')}
\r\n \r\n{item.keywords ? item.keywords : '...'}
\r\n \r\n\r\n \r\n onSearch(e.target.value, type)}\r\n />\r\n \r\n
\r\n
\r\n \r\n
*/}\r\n \r\n onFilter(item.value, tab)}\r\n label={t('labels:sort_by')}\r\n />\r\n
\r\n \r\n \r\n handleViewDetails(id, vimeo_id, data)}\r\n >\r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {type === general.MY_MEDIA_LIBRARY && (\r\n \r\n \r\n \r\n )}\r\n\r\n \r\n handleViewDetails(id, vimeo_id, data)}\r\n >\r\n {title || filename}\r\n
\r\n {moment(created_at).format('DD MMM YYYY')}\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n const checkedCompletUpload = item => {\r\n const filterSuccessFiles = _.filter(\r\n uploadSuccess,\r\n ele => ele.id === item.id\r\n )\r\n\r\n if (uploadSuccess.length && filterSuccessFiles.length) {\r\n return false\r\n }\r\n return true\r\n }\r\n\r\n const handleCancelUpload = mediaItem => {\r\n if (mediaItem.source) {\r\n mediaItem.source.cancel()\r\n }\r\n }\r\n\r\n const handleRemoveMedia = async (mediaId, ind) => {\r\n setIsRemovingMedia(true)\r\n const data = {\r\n mediaIds: [mediaId]\r\n }\r\n try {\r\n await api.library.removeMedias(data)\r\n const updatedFiles = [...files]\r\n updatedFiles.splice(ind, 1)\r\n setFiles(updatedFiles)\r\n\r\n const updatedTempForUploadedFiles = [...tempForUploadedFiles]\r\n updatedTempForUploadedFiles.splice(ind, 1)\r\n setTempForUploadedFiles(updatedTempForUploadedFiles)\r\n\r\n setIsRemovingMedia(false)\r\n if (updatedFiles.length === files.length) {\r\n setFiles(updatedFiles)\r\n }\r\n\r\n setTempForUploadedFiles(\r\n tempForUploadedFiles.map((ele, index) => {\r\n if (index === ind) {\r\n ele.removed = true\r\n }\r\n return ele\r\n })\r\n )\r\n } catch (error) { }\r\n }\r\n\r\n const onConfirm = () => {\r\n onUploadedVideos(files)\r\n setFiles([])\r\n setTempForUploadedFiles([])\r\n }\r\n\r\n const enableCloseModal = (progress, isFetching) => {\r\n const filterCancelProgressUpload = _.filter(\r\n progress,\r\n item => item.status === general.CANCELED\r\n )\r\n const checkCancelUpload =\r\n filterCancelProgressUpload.length === progress.length\r\n\r\n if (isFetching) {\r\n return !checkCancelUpload\r\n } else if (isRemovingMedia) {\r\n return true\r\n }\r\n\r\n return false\r\n }\r\n\r\n const onChangeChanneId = async e => {\r\n const channelId = e.target.value\r\n setYoutubeChannelId(channelId)\r\n }\r\n\r\n const getVideosFromYoutubeChannel = (paramType = '', value) => {\r\n if (!youtubeChannelId) {\r\n message.error(t('v4:required_channel_id'))\r\n return\r\n }\r\n\r\n setIsYoutubeFetching(true)\r\n const isMore = paramType === 'MORE'\r\n const isSearchLoadMore = isMore && value\r\n\r\n let url = `${YOUTUBE_URL}search?part=snippet,id&channelId=${youtubeChannelId}&key=${config.youtubeApiKey}&type=video`\r\n\r\n if (isMore || isSearchLoadMore) {\r\n url += `&pageToken=${youtubeData.nextPageToken}`\r\n }\r\n\r\n if (value && value.trim()) {\r\n url += `&q=${value}`\r\n }\r\n\r\n fetch(url)\r\n .then(response => response.json())\r\n .then(res => {\r\n setIsYoutubeFetching(false)\r\n if (res.error) {\r\n setYoutubeApiError(true)\r\n return\r\n }\r\n setYoutubeData(prevData => {\r\n if (isMore) {\r\n return {\r\n ...res,\r\n items: [...prevData.items, ...res.items]\r\n }\r\n }\r\n return res\r\n })\r\n })\r\n .catch(err => {\r\n setIsYoutubeFetching(false)\r\n setYoutubeApiError(true)\r\n })\r\n }\r\n\r\n const handleSelection = (etag, isChecked) => {\r\n const newItems = youtubeData.items.map(item => {\r\n if (item.etag === etag) {\r\n return {\r\n ...item,\r\n selected: isChecked\r\n }\r\n }\r\n return item\r\n })\r\n\r\n setYoutubeData({\r\n ...youtubeData,\r\n items: newItems\r\n })\r\n }\r\n\r\n const handleSelectAll = isChecked => {\r\n const newItems = youtubeData.items.map(item => {\r\n return {\r\n ...item,\r\n selected: isChecked\r\n }\r\n })\r\n\r\n setYoutubeData({\r\n ...youtubeData,\r\n items: newItems\r\n })\r\n }\r\n\r\n const handleEnableAI = (etag, isChecked) => {\r\n const newItems = youtubeData.items.map(item => {\r\n if (item.etag === etag) {\r\n const newObject = {\r\n ...item,\r\n isAiEnabled: isChecked,\r\n ...(isChecked && {\r\n ai_language: 'en-US' // default language\r\n })\r\n }\r\n\r\n if (!isChecked) {\r\n delete newObject['isAiEnabled']\r\n delete newObject['ai_language']\r\n }\r\n\r\n return newObject\r\n }\r\n return item\r\n })\r\n\r\n setYoutubeData({\r\n ...youtubeData,\r\n items: newItems\r\n })\r\n }\r\n\r\n const handleInsertVideo = () => {\r\n const { onYoutubeVideos } = props\r\n const { items } = youtubeData\r\n\r\n const selectedVideos = items\r\n .filter(item => item.selected)\r\n .map(item => ({\r\n id: item.id.videoId,\r\n title: item.snippet.title,\r\n ...(item.isAiEnabled && {\r\n isAiEnabled: item.isAiEnabled,\r\n ai_language: item.ai_language\r\n })\r\n }))\r\n onYoutubeVideos(selectedVideos)\r\n }\r\n\r\n const onYoutubeSearch = useCallback(\r\n value => {\r\n getVideosFromYoutubeChannel('SEARCH', value)\r\n },\r\n [getVideosFromYoutubeChannel]\r\n )\r\n\r\n const showLoadMore = useMemo(() => {\r\n if (youtubeData) {\r\n const {\r\n items,\r\n pageInfo: { totalResults }\r\n } = youtubeData\r\n return items.length < totalResults\r\n }\r\n\r\n return false\r\n }, [youtubeData])\r\n\r\n const videosHasSelection = useMemo(() => {\r\n if (youtubeData) {\r\n const { items } = youtubeData\r\n return items.some(item => item.selected)\r\n }\r\n return false\r\n }, [youtubeData])\r\n\r\n const channelInfo = (\r\n \r\n 
\r\n
\r\n )\r\n\r\n const handleAiLanguage = useCallback(\r\n (etag, language) => {\r\n const newItems = youtubeData.items.map(item => {\r\n if (item.etag === etag) {\r\n return {\r\n ...item,\r\n ai_language: language\r\n }\r\n }\r\n return item\r\n })\r\n setYoutubeData({\r\n ...youtubeData,\r\n items: newItems\r\n })\r\n },\r\n [youtubeData]\r\n )\r\n const createOffset = (page, pageSize) => page * pageSize - pageSize\r\n\r\n const handleGetLibraryList = async () => {\r\n setIsFetching(true)\r\n setSelectedVideo({\r\n link: \"\",\r\n id: \"\",\r\n isLoading: false\r\n })\r\n let res = await api.library.getLibraryList({\r\n offset: createOffset(pagination.page, pagination.pageSize),\r\n limit: pagination.pageSize,\r\n search: pagination.search,\r\n sort: pagination.sortBy,\r\n type: pagination.libraryType\r\n })\r\n setMediaData(res.data)\r\n setIsFetching(false)\r\n }\r\n const getNotFoundMsg = (type) => {\r\n if (type === general.PUBLIC_MEDIA_LIBRARY) {\r\n return t('video:public_video_not_found')\r\n } else if (type === general.ORGANIZATION_LIBRARY) {\r\n return t('v4:org_video_not_found')\r\n } else {\r\n return t('video:private_video_not_found')\r\n }\r\n }\r\n const onChangePagination = (page) => {\r\n setPagination({ ...pagination, page: page })\r\n }\r\n const getMediaListing = list => {\r\n return list ? list.rows : []\r\n }\r\n\r\n const handleViewDetails = (id, vimeo_id, item) => {\r\n setFiles([item])\r\n setSelectedVideo({\r\n link: item.link,\r\n id: id,\r\n isLoading: false\r\n })\r\n }\r\n const renderVideo = (videoList, type) => {\r\n if (videoList === null) {\r\n return\r\n }\r\n const { rows } = videoList\r\n\r\n const NOT_FOUND_MESSAGE = getNotFoundMsg(type)\r\n const customClassNames = classNames(\r\n 'media',\r\n { 'media-page__item': !selectedVideo.id },\r\n { 'media-page__item-on-select': selectedVideo.id }\r\n )\r\n return (\r\n {NOT_FOUND_MESSAGE}
\r\n ) : selectedVideo.id ? (\r\n \r\n {getMediaListing(videoList).map(item => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n {selectedVideo.link && (\r\n
\r\n \r\n \r\n {getMediaListing(videoList).map(item => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n onChangePagination(page)}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {!enableProgress && (\r\n
\r\n )}\r\n \r\n
\r\n \r\n {t('media:import_file')}\r\n
\r\n\r\n \r\n {({ getRootProps, getInputProps, isDragActive }) => (\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n {t('media:upload_file')}{' '}\r\n {t('media:drag_drop')}\r\n
\r\n\r\n {fileNotCompatible && (\r\n
\r\n \r\n setFileNotCompatible(false)}\r\n >\r\n {t('buttons:cancel')}\r\n \r\n
\r\n )}\r\n\r\n {enableProgress && uploadProgress.length > 0 && (\r\n \r\n \r\n
\r\n\r\n \r\n {t('errors:upload_error')}\r\n
\r\n \r\n {uploadProgress.map((item, ind) => (\r\n
\r\n )}\r\n \r\n
\r\n ))}\r\n \r\n {getThumbnail(tempForUploadedFiles, ind)}\r\n
\r\n \r\n \r\n {getFileType(\r\n tempForUploadedFiles[ind] &&\r\n tempForUploadedFiles[ind].type\r\n )}\r\n \r\n \r\n {getFileExtension(\r\n tempForUploadedFiles[ind] &&\r\n tempForUploadedFiles[ind].type\r\n )}\r\n \r\n \r\n {bytesToSize(\r\n tempForUploadedFiles[ind] &&\r\n tempForUploadedFiles[ind].size\r\n )}\r\n \r\n
\r\n \r\n handleCancelUpload(item)}\r\n isRemovingMedia={isRemovingMedia}\r\n mediaRemoved={\r\n tempForUploadedFiles[ind] &&\r\n tempForUploadedFiles[ind].removed\r\n }\r\n ctrlHandleRemove={() =>\r\n handleRemoveMedia(item.id, ind)\r\n }\r\n />\r\n
\r\n \r\n
\r\n\r\n {item.status !== general.CANCELED && (\r\n \r\n {checkedCompletUpload(item) && (\r\n \r\n {bytesToSize(item.loaded)} {t('of')}{' '}\r\n {bytesToSize(item.total)}\r\n \r\n )}\r\n {!checkedCompletUpload(item) && (\r\n \r\n {tempForUploadedFiles[ind] &&\r\n tempForUploadedFiles[ind].removed\r\n ? t('general:removed')\r\n : t('general:completed')}\r\n \r\n )}\r\n
\r\n )}\r\n\r\n {item.status === general.CANCELED && (\r\n \r\n \r\n {t('general:canceled')}\r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n {t('general:confirm')}\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n {youtubeApiError && (\r\n \r\n {t('v3:channel_id')}{' '}\r\n getVideosFromYoutubeChannel('ALL')}\r\n >\r\n Send\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {t('v4:insert').toUpperCase()}\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n {t('v4:insert')}\r\n \r\n
\r\n \r\n {isAudio && (\r\n \r\n )}\r\n\r\n {isVideo && (\r\n 
}\r\n\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default MediaPreview\r\n","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport _ from 'lodash'\r\nimport { Form, Button, Select, Input, Icon, Col } from 'antd'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { api } from '../../../../../../../../../../services'\r\nimport { updateMedia } from '../../../../../../../../../../services/api/library'\r\nimport CreatableSelect from 'react-select/creatable'\r\nimport './AddDetailAudio.scss'\r\n\r\nconst { TextArea } = Input\r\n\r\nclass AddDetailAudio extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n topics: [],\r\n keywords: '',\r\n description: '',\r\n isLoading: false,\r\n saveLabel: props.isFromCreateAudio\r\n ? props.t('buttons:insert')\r\n : props.t('buttons:save'),\r\n disableButton: false,\r\n options: [],\r\n value: [],\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n }\r\n this.loadOptions = _.debounce(this.loadOptions, 500)\r\n }\r\n\r\n enableInsertButton = () => {\r\n const { t, isFromCreateAudio } = this.props\r\n this.setState({\r\n saveLabel: isFromCreateAudio ? t('buttons:insert') : t('buttons:save'),\r\n disableButton: false\r\n })\r\n }\r\n\r\n handleChangeKeyword = value => {\r\n const keywords = value.join(',')\r\n this.setState({ keywords })\r\n this.enableInsertButton()\r\n }\r\n\r\n handleChangeDescription = e => {\r\n const description = e.target.value\r\n this.setState({ description })\r\n this.enableInsertButton()\r\n }\r\n\r\n handleSubmit = e => {\r\n e.preventDefault()\r\n const {\r\n getSelectedFile,\r\n upload,\r\n src,\r\n mediaId,\r\n handleFileUpload,\r\n t,\r\n isFromCreateAudio\r\n } = this.props\r\n const { value, description, keywords } = this.state\r\n\r\n this.props.form.validateFields(async err => {\r\n if (!err) {\r\n let tempMediaId = ''\r\n const data = {\r\n topics: _.map(value, 'id'),\r\n description,\r\n keywords,\r\n isSynthesizedAudio: !!isFromCreateAudio\r\n }\r\n this.setState({\r\n isLoading: true,\r\n saveLabel: isFromCreateAudio\r\n ? t('buttons:inserting')\r\n : t('buttons:saving')\r\n })\r\n if (mediaId) {\r\n tempMediaId = mediaId\r\n } else if (src !== undefined) {\r\n const upload_response = await upload(src)\r\n if (upload_response && upload_response.id) {\r\n tempMediaId = upload_response.id\r\n }\r\n } else {\r\n this.setState({\r\n isLoading: false,\r\n saveLabel: isFromCreateAudio\r\n ? t('buttons:insert')\r\n : t('buttons:save'),\r\n disableButton: false\r\n })\r\n return\r\n }\r\n\r\n if (tempMediaId) {\r\n const update_response = await updateMedia(tempMediaId, data)\r\n isFromCreateAudio\r\n ? handleFileUpload([update_response.data], true)\r\n : getSelectedFile([update_response.data])\r\n\r\n if (isFromCreateAudio) {\r\n let oldAudioData =\r\n JSON.parse(localStorage.getItem('audio_data')) || []\r\n const {\r\n audioSynthesizer: {\r\n selected: { selectedText, selectedVoice }\r\n }\r\n } = this.props\r\n\r\n const newAudioData = {\r\n text: selectedText,\r\n voice_type: selectedVoice,\r\n content_id: tempMediaId\r\n }\r\n oldAudioData.push(newAudioData)\r\n localStorage.setItem('audio_data', JSON.stringify(oldAudioData))\r\n }\r\n\r\n this.setState({\r\n isLoading: false,\r\n saveLabel: t('buttons:saved'),\r\n disableButton: true\r\n })\r\n }\r\n }\r\n })\r\n }\r\n\r\n createOptionList = list => {\r\n const options = list.map(topic => this.createOption(topic))\r\n this.setState({\r\n options,\r\n isTopicLoading: false\r\n })\r\n }\r\n\r\n handleChange = (newValue, actionMeta) => {\r\n if (actionMeta.removedValue) {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n this.enableInsertButton()\r\n }\r\n )\r\n } else if (!_.isEmpty(newValue) && newValue.length > 3) {\r\n this.setState({\r\n isTopicsMax: true\r\n })\r\n } else {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n this.enableInsertButton()\r\n }\r\n )\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n handleCreate = inputValue => {\r\n this.setState({ isTopicLoading: true })\r\n const { options, value } = this.state\r\n const topic = { title: inputValue }\r\n if (!_.isEmpty(value) && value.length >= 3) {\r\n this.setState({\r\n isTopicsMax: true,\r\n isTopicLoading: false\r\n })\r\n } else {\r\n api.topics.createTopics(topic).then(({ data }) => {\r\n if (!_.isEmpty(data[0])) {\r\n const newOption = this.createOption(data[0])\r\n this.props.updateTopicList(data[0])\r\n\r\n this.setState(\r\n {\r\n isTopicLoading: false,\r\n options: [...options, newOption],\r\n isTopicsMax: false,\r\n value: [...value, newOption],\r\n inputValue: ''\r\n },\r\n () => {\r\n this.enableInsertButton()\r\n }\r\n )\r\n }\r\n })\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n createOption = topic => {\r\n return {\r\n label: topic.title,\r\n value: topic.title,\r\n id: topic.id\r\n }\r\n }\r\n\r\n loadOptions = newValue => {\r\n const inputValue = newValue.replace(/\\W/g, '')\r\n if (inputValue.length > 0 && inputValue.length <= 50) {\r\n this.setState({\r\n isTopicLoading: true\r\n })\r\n const params = {\r\n search: inputValue,\r\n limit: 10,\r\n offset: 0\r\n }\r\n api.topics.getTopics(params).then(({ data }) => {\r\n this.setState({\r\n inputValue\r\n })\r\n this.createOptionList(data)\r\n })\r\n }\r\n }\r\n\r\n LoadingIndicator = () => (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Default TTS \r\n Premium Voices \r\n \r\n\r\n \r\n {translationKeys.map(item => (\r\n \r\n ))}\r\n \r\n
\r\n \r\n \r\n {state.src && (\r\n \r\n {audioSynthesizer.isProcessing || state.processAudio\r\n ? t('media:processing_audio')\r\n : !_.isEmpty(state.src)\r\n ? t('v4:publish')\r\n : t('media:create')}\r\n \r\n ) : (\r\n \r\n {state.isGenerating\r\n ? t('media:processing_audio')\r\n : !_.isEmpty(state.src)\r\n ? t('v4:publish')\r\n : t('media:create')}\r\n \r\n )}\r\n
\r\n \r\n {renderVoiceList(allList)}\r\n
\r\n \r\n {renderVoiceList(maleList)}\r\n
\r\n \r\n {renderVoiceList(femaleList)}\r\n
\r\n \r\n {renderVoiceList(neuralList)}\r\n
\r\n \r\n {renderElevenLabsVoiceList()}\r\n
\r\n \r\n )}\r\n \r\n {state.sampleSrc && (\r\n
\r\n \r\n setShowUploadModal(false)}\r\n className=\"custom-ant-modal channel-video-modal\"\r\n destroyOnClose\r\n width={800}\r\n header={null}\r\n footer={null}\r\n >\r\n setShowVideoLibrary(false)}\r\n width={'80%'}\r\n footer={null}\r\n >\r\n
\r\n )\r\n}\r\n\r\nexport default Form.create()(ScenarioCreationForm)\r\n","import React, { useEffect, useState } from 'react'\r\nimport { Icon, Modal, Spin } from 'antd'\r\n\r\nimport beginningImage from '../../img/beginning_of_lesson.svg'\r\nimport endImage from '../../img/end_of_lesson.svg'\r\n\r\nimport './styles.scss'\r\n\r\nimport ScenarioCreationForm from './ScenarioCreationForm'\r\n\r\nimport {\r\n saveScenarioData,\r\n createScenarioData,\r\n getScenarioData\r\n} from '../../../../../../../../../services/api/courses'\r\n\r\nimport actions from '../../../../../../../../../store/actions'\r\nimport { useDispatch } from 'react-redux'\r\n\r\nimport nanoid from 'nanoid'\r\nimport _ from 'lodash'\r\n\r\nconst scenarioOptions = {\r\n beginning: {\r\n image: beginningImage,\r\n description: 'at the beginning'\r\n },\r\n end: {\r\n image: endImage,\r\n description: 'end of lesson'\r\n }\r\n}\r\n\r\nfunction ScenarioCreation({\r\n onCancel,\r\n scenarioId,\r\n setScenarioId,\r\n lessonId,\r\n courseId,\r\n pageStructureData,\r\n pages,\r\n lessonUpdate,\r\n scenarioData: scenarioDataFromProps,\r\n lessonBckgrndImg,\r\n lessonBckgrndImgId\r\n}) {\r\n const [selectedOption, setSelectedOption] = useState('beginning')\r\n const [isSaving, setIsSaving] = useState(false)\r\n const [isFetching, setIsFetching] = useState(false)\r\n const [scenarioData, setScenarioData] = useState({})\r\n\r\n const dispatch = useDispatch()\r\n\r\n const { handleLessonInput } = actions.lessonBuilder\r\n\r\n useEffect(() => {\r\n if (scenarioId) {\r\n fetchScenarioById(scenarioId)\r\n } else if (!_.isEmpty(scenarioDataFromProps)) {\r\n handleInitialScenarioData()\r\n }\r\n }, [])\r\n\r\n const handleInitialScenarioData = () => {\r\n const {\r\n scenario,\r\n options,\r\n correct_answer,\r\n feedback\r\n } = scenarioDataFromProps\r\n\r\n const newOptions = parseOptions(options, correct_answer)\r\n\r\n const data = {\r\n answers: newOptions,\r\n feedback\r\n }\r\n\r\n setScenarioData({ ...data, story: scenario })\r\n handleSubmit({ ...data, scenarioStory: scenario })\r\n }\r\n\r\n function parseOptions(optionsArray, correctAnswer) {\r\n const resultArray = []\r\n\r\n optionsArray.forEach((option, index) => {\r\n const isCorrect = String(correctAnswer) === String(index + 1)\r\n resultArray.push({\r\n index: nanoid(),\r\n answer: option,\r\n correct: isCorrect,\r\n rating: isCorrect ? 5 : 1\r\n })\r\n })\r\n\r\n return resultArray\r\n }\r\n\r\n const fetchScenarioById = id => {\r\n setIsFetching(true)\r\n\r\n getScenarioData(id)\r\n .then(res => {\r\n if (res && res.data) {\r\n const { position, ...data } = res.data\r\n setScenarioData(data)\r\n setSelectedOption(position)\r\n }\r\n })\r\n .catch(err => {\r\n console.log(err)\r\n })\r\n .finally(() => {\r\n setIsFetching(false)\r\n })\r\n }\r\n\r\n const handleSelection = key => {\r\n setSelectedOption(key)\r\n }\r\n\r\n const handleSubmit = (data, type) => {\r\n const {\r\n answers,\r\n scenarioName = '',\r\n scenarioStory,\r\n feedback,\r\n attemptsCount = 0,\r\n scenarioMediaId = null,\r\n audioId = null\r\n } = data\r\n\r\n const payload = {\r\n answers,\r\n name: scenarioName,\r\n story: scenarioStory,\r\n feedback,\r\n attempts_count: attemptsCount,\r\n media_id: scenarioMediaId,\r\n position: selectedOption,\r\n story_media_id: audioId,\r\n lesson_id: lessonId,\r\n course_id: courseId\r\n }\r\n\r\n let response = null\r\n\r\n setIsSaving(true)\r\n\r\n if (scenarioId) {\r\n response = saveScenarioData(scenarioId, payload)\r\n } else {\r\n response = createScenarioData(lessonId, payload)\r\n }\r\n\r\n let newScenarioId = null\r\n response\r\n .then(res => {\r\n newScenarioId = res.data.id\r\n setScenarioId(newScenarioId)\r\n dispatch(handleLessonInput('scenarioId', newScenarioId))\r\n })\r\n .catch(err => {\r\n console.log(err)\r\n })\r\n .finally(() => {\r\n setIsSaving(false)\r\n\r\n if (type === 'insert') {\r\n handleInsertScenario(newScenarioId)\r\n } else {\r\n removeScenario(newScenarioId)\r\n }\r\n })\r\n }\r\n\r\n const removeScenario = id => {\r\n const newData = [...pageStructureData]\r\n const index = newData.findIndex(page => {\r\n for (const element of page.data) {\r\n if (\r\n element.type === 'SCENARIO' &&\r\n element.params &&\r\n element.params.content !== id\r\n ) {\r\n return true\r\n }\r\n }\r\n\r\n return false\r\n })\r\n\r\n if (index === -1) return\r\n const newPages = [...pages]\r\n\r\n newPages.splice(index, 1)\r\n newData.splice(index, 1)\r\n\r\n dispatch(handleLessonInput('currentPage', 1))\r\n dispatch(handleLessonInput('pages_landscape', newData))\r\n dispatch(handleLessonInput('pages', newPages))\r\n lessonUpdate({ pages_landScape: newData, pages: newPages })\r\n }\r\n\r\n const handleInsertScenario = id => {\r\n const newPageData = {\r\n size: { width: 1024, height: 768 },\r\n orientation: 'landscape',\r\n data: [\r\n {\r\n uid: nanoid(8),\r\n type: 'SCENARIO',\r\n display: 'CONTENT',\r\n params: {\r\n content: id,\r\n x: 0,\r\n y: 0,\r\n width: 1023,\r\n height: 552\r\n }\r\n },\r\n {\r\n uid: nanoid(8),\r\n type: 'BACKGROUND_IMAGE',\r\n params: {\r\n content: lessonBckgrndImg,\r\n content_id: lessonBckgrndImgId,\r\n opacity: 1\r\n }\r\n }\r\n ]\r\n }\r\n\r\n const newPage = {\r\n data: [],\r\n orientation: 'portrait',\r\n size: { width: 1024, height: 768 }\r\n }\r\n\r\n const newData = [...pageStructureData]\r\n const newPages = [...pages]\r\n\r\n const index = newData.findIndex(page =>\r\n page.data.some(element => element.type === 'SCENARIO')\r\n )\r\n\r\n if (index !== -1) {\r\n newPages.splice(index, 1)\r\n newData.splice(index, 1)\r\n }\r\n\r\n switch (selectedOption) {\r\n case 'beginning':\r\n newData.unshift(newPageData)\r\n newPages.unshift(newPage)\r\n break\r\n\r\n case 'end':\r\n newData.push(newPageData)\r\n newPages.push(newPage)\r\n break\r\n\r\n default:\r\n break\r\n }\r\n\r\n dispatch(handleLessonInput('pages_landscape', newData))\r\n dispatch(handleLessonInput('pages', newPages))\r\n dispatch(handleLessonInput('currentPage', 1))\r\n lessonUpdate({ pages_landScape: newData, pages: newPages })\r\n onCancel()\r\n }\r\n\r\n console.log({ scenarioData })\r\n\r\n return (\r\n \r\n {\r\n e.stopPropagation()\r\n setShowUploadModal(true)\r\n }}\r\n >\r\n {t('buttons:upload_video')}\r\n \r\n {\r\n e.stopPropagation()\r\n setShowVideoLibrary(true)\r\n }}\r\n >\r\n {t('buttons:select_media_library')}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n Create Scenario AI
\r\n\r\n
\r\n\r\n \r\n {Object.entries(scenarioOptions).map(([key, values], index) => (\r\n handleSelection(key)}\r\n >\r\n
\r\n ))}\r\n \r\n 
\r\n {values.description}\r\n
\r\n ${isIntroduction ? 'INTRODUCTION' : 'SUMMARY'\r\n }
`,\r\n x: 57,\r\n y: 50,\r\n width: 900,\r\n height: 67,\r\n media_format: 'TEXT'\r\n }\r\n },\r\n {\r\n uid: nanoid(8),\r\n type: 'TEXT',\r\n display: 'CONTENT',\r\n params: {\r\n content: text,\r\n x: 57,\r\n y: 146,\r\n width: 900,\r\n height: 353\r\n }\r\n },\r\n backgroundItem,\r\n logoItem\r\n ].filter(Boolean)\r\n }\r\n\r\n console.log({ pageStructureData, backgroundItem, logoItem, newPageData })\r\n\r\n const newPage = {\r\n data: [],\r\n orientation: 'portrait',\r\n size: { width: 1024, height: 768 }\r\n }\r\n\r\n const newData = [...pageStructureData]\r\n const newPages = [...pages]\r\n\r\n if (isIntroduction) {\r\n newData.unshift(newPageData)\r\n newPages.unshift(newPage)\r\n } else {\r\n newData.push(newPageData)\r\n newPages.push(newPage)\r\n }\r\n\r\n dispatch(handleLessonInput('pages_landscape', newData))\r\n dispatch(handleLessonInput('pages', newPages))\r\n dispatch(handleLessonInput('currentPage', isIntroduction ? 1 : currentPage))\r\n lessonUpdate({ pages_landScape: newData, pages: newPages })\r\n\r\n message.success(\r\n isIntroduction\r\n ? 'Introduction added at the beginning of the lesson.'\r\n : 'Summary added at the end of the lesson.'\r\n )\r\n onCancel()\r\n }\r\n\r\n const getDescription = () => {\r\n if (isIntroduction) {\r\n return \"Generate an engaging introduction to capture your audience's attention and set the tone for your lesson.\"\r\n }\r\n return 'Create a comprehensive summary that reinforces key points and wraps up your lesson effectively.'\r\n }\r\n\r\n console.log({ props })\r\n\r\n return (\r\n\r\n
\r\n \r\n
\r\n \r\n }\r\n style={{ top: 20 }}\r\n >\r\n {isGenerating ? (\r\n \r\n {isIntroduction ? 'Introduction' : 'Summary'}\r\n
\r\n{getDescription()}
\r\n\r\n Generating {isIntroduction ? 'introduction' : 'summary'}...\r\n
\r\n\r\n This may take a few moments\r\n
\r\n \r\n ) : (\r\n\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default IntroOrSummary\r\n","import BulletPoints from './BulletPoints'\r\n\r\nexport default BulletPoints\r\n","import { Button, Icon, Input, Modal } from 'antd'\r\nimport React, { useEffect, useState } from 'react'\r\nimport { useDispatch, useSelector } from 'react-redux'\r\nimport { api } from '../../../../../../../../../services'\r\nimport actions from '../../../../../../../../../store/actions'\r\nimport nanoid from 'nanoid'\r\n\r\nconst BulletPoints = ({\r\n onCancel,\r\n extractedText,\r\n lessonTitle,\r\n pageStructureData,\r\n lessonUpdate,\r\n currentPage\r\n}) => {\r\n const [isGenerating, setIsGenerating] = useState(false)\r\n\r\n const [text, setText] = useState('')\r\n\r\n const [bulletPoints, setBulletPoints] = useState('')\r\n\r\n const { handleLessonInput } = actions.lessonBuilder\r\n\r\n const courseTitle = useSelector(state => state.courseBuilder.courseTitle)\r\n\r\n const dispatch = useDispatch()\r\n\r\n useEffect(() => {\r\n setText(extractedText)\r\n }, [extractedText])\r\n\r\n const startGeneration = () => {\r\n setIsGenerating(true)\r\n\r\n api.courses\r\n .generateIntroOrSummary({\r\n content: extractedText,\r\n isIntroduction: false,\r\n isSummary: true,\r\n course_name: courseTitle,\r\n topic: lessonTitle ? lessonTitle : 'Bullet Points'\r\n })\r\n .then(res => {\r\n if (res.data.body) {\r\n setBulletPoints(res.data.body)\r\n }\r\n })\r\n .catch(err => {\r\n console.log(err)\r\n })\r\n .finally(() => {\r\n setIsGenerating(false)\r\n })\r\n }\r\n\r\n function formatTextToHTML(text) {\r\n return text\r\n .split('\\n')\r\n .map(line => {\r\n let cleanedLine = line.replace(/^[-\\s]+/, '').trim() // Remove leading '-' and spaces\r\n if (cleanedLine === '') return '- ${cleanedLine}
\r\n addToCurrentPage()}\r\n >\r\n Add To Current Page\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n startGeneration()}\r\n loading={isGenerating}\r\n >\r\n Generate Bullet Points{' '}\r\n {!isGenerating &&
\r\n \r\n )}\r\n {children}
\r\n }),\r\n [isSelectable]\r\n )\r\n\r\n const PagesContainer = useMemo(\r\n () =>\r\n SortableContainer(({ children, className }) => {\r\n return (\r\n \r\n {children}\r\n
\r\n )\r\n }),\r\n [isSelectable]\r\n )\r\n\r\n return (\r\n \r\n {lessonTitle}\r\n \r\n {previewData &&\r\n previewData.map((page, index) => {\r\n if (!page) return null\r\n\r\n const currentPageStructure = page.data || []\r\n const isCurrentPage = !isSelectable && currentPage === index + 1\r\n const selected = isSelectable && page.pageSelected\r\n\r\n return (\r\n \r\n {\r\n handlePageClick(index)\r\n }}\r\n >\r\n
\r\n {/* delete page */}\r\n {!isSelectable && (\r\n toPage('new')}>\r\n
\r\n )}\r\n\r\n {isSelectable && (\r\n \r\n +\r\n
\r\n {t('buttons:add_page')}
\r\n\r\n \r\n {isStory\r\n ? t('v4:create_story')\r\n : isQuizAI\r\n ? t('v4:generate_quiz')\r\n : isScenario\r\n ? t('v3:generate_scenario')\r\n : t('v4:generate_summary')}\r\n \r\n
\r\n )}\r\n\r\n {showStoryCreationForm && (\r\n tags\r\n doc.querySelectorAll('p').forEach(p => {\r\n p.style.textAlign = isCenter ? 'center' : 'left'\r\n p.style.lineHeight = LINE_HEIGHT\r\n p.style.fontSize = isCenter ? `18px` : `16px`\r\n\r\n const allowedTags = [\r\n 'span',\r\n 'strong',\r\n 'em',\r\n 'b',\r\n 'i',\r\n 'u',\r\n 'mark',\r\n 'sup',\r\n 'sub',\r\n 'code',\r\n 'a',\r\n 'h1',\r\n 'h2',\r\n 'h3',\r\n 'h4',\r\n 'h5',\r\n 'h6'\r\n ] // Add more if needed\r\n\r\n // Select the first child inside
(assuming it's the parent container you want to replace)\r\n const parentContainer = p.firstElementChild\r\n\r\n // Replace the parent container with \r\n if (parentContainer) {\r\n const strongElement = document.createElement('strong')\r\n strongElement.innerHTML = parentContainer.innerHTML\r\n parentContainer.replaceWith(strongElement)\r\n }\r\n\r\n // Now select and update font size for all allowed children\r\n const children = p.querySelectorAll(allowedTags.join(', '))\r\n children.forEach(child => {\r\n child.style.fontSize = isCenter ? '18px' : '16px'\r\n child.style.textAlign = isCenter ? 'center' : 'left'\r\n })\r\n\r\n p.classList.add('ql-font-mulish')\r\n })\r\n\r\n // Serialize back to HTML\r\n const cleanedContent = doc.body.innerHTML\r\n\r\n return createElement('TEXT', 'CONTENT', {\r\n content: cleanedContent,\r\n x,\r\n y,\r\n width,\r\n height,\r\n media_format: 'TEXT'\r\n })\r\n}\r\n\r\n// Helper to create a logo image element\r\nconst logoImageElement = logoData => createElement('IMAGE', 'LOGO', logoData)\r\n\r\n/**\r\n * Helper for media elements.\r\n * - If mediaData is empty, returns an element with null content.\r\n * - If mediaData is an array, selects the item at the given index.\r\n * - Otherwise, returns a single media element.\r\n */\r\nconst mediaElement = (mediaData, x, y, width, height, isVideo, index = 0) => {\r\n if (_.isEmpty(mediaData)) {\r\n return createElement(isVideo ? 'VIDEO' : 'IMAGE', null, {\r\n content: null,\r\n x,\r\n y,\r\n width,\r\n height,\r\n media_format: isVideo ? 'VIDEO' : 'IMAGE'\r\n })\r\n }\r\n if (Array.isArray(mediaData) && isVideo) {\r\n const item = mediaData[index] || null\r\n return createElement('VIDEO', null, {\r\n content: item ? item.content : null,\r\n content_id: item ? item.content_id : null,\r\n x,\r\n y,\r\n width,\r\n height\r\n })\r\n }\r\n if (Array.isArray(mediaData) && !isVideo) {\r\n const item = mediaData[index] || null\r\n return createElement('IMAGE', null, {\r\n content: item ? item.content : null,\r\n content_id: item ? item.content_id : null,\r\n x,\r\n y,\r\n width,\r\n height,\r\n media_format: 'IMAGE'\r\n })\r\n }\r\n return createElement(isVideo ? 'VIDEO' : 'IMAGE', null, {\r\n content: mediaData,\r\n x,\r\n y,\r\n width,\r\n height,\r\n media_format: isVideo ? undefined : 'IMAGE',\r\n ...(isVideo && { content_id: 69142 })\r\n })\r\n}\r\n\r\n// Process media array data (works for both images and videos)\r\nconst processMediaArray = mediaData => {\r\n if (Array.isArray(mediaData) && mediaData.length > 0) {\r\n return mediaData.map(item => ({\r\n content: item.params ? item.params.content : item.content,\r\n content_id: item.params ? item.params.content_id : item.content_id\r\n }))\r\n }\r\n return mediaData\r\n}\r\n\r\n// -- Layout Data Generator --\r\nconst createLayoutData = (\r\n textData = '',\r\n mediaData = [],\r\n logoData = '',\r\n headingContent = '',\r\n isVideo = false\r\n) => {\r\n const processedMediaData = processMediaArray(mediaData)\r\n\r\n // Create headings with appropriate width settings\r\n const centeredHeading = baseHeading(headingContent, true, false) // Full width\r\n const leftAlignedHeading = baseHeading(headingContent, false, true) // Half width\r\n\r\n // Calculate the dynamic heading heights\r\n const fullWidthHeadingHeight = centeredHeading.params.height\r\n const halfWidthHeadingHeight = calculateHeadingHeight(headingContent, true)\r\n\r\n // Recalculate the layout dimensions based on dynamic heading height\r\n // For layouts 1 & 2:\r\n const firstElementY = PADDING + fullWidthHeadingHeight + GUTTER\r\n const availableHeight =\r\n CONTAINER_HEIGHT - 2 * PADDING - fullWidthHeadingHeight\r\n const twoRowHeight = (availableHeight - GUTTER) / 2\r\n\r\n // For the text column in layouts 5–8:\r\n const columnHeadingY = PADDING\r\n const columnHeadingHeight = halfWidthHeadingHeight\r\n const columnTextY = columnHeadingY + columnHeadingHeight + GUTTER\r\n const containerContentHeight = CONTAINER_HEIGHT - 2 * PADDING\r\n const columnTextHeight =\r\n containerContentHeight - (columnHeadingHeight + GUTTER)\r\n\r\n // For media in layouts 5–8:\r\n const mediaSingleHeight = containerContentHeight\r\n const mediaDoubleHeight = (containerContentHeight - GUTTER) / 2\r\n\r\n return [\r\n // Layout 1 – With dynamic heading height\r\n {\r\n img: Layout1,\r\n layoutStyle: 'layout-1',\r\n previewImages: [\r\n { img: Layout1ImagePreview, type: 'IMAGE' },\r\n { img: Layout1VideoPreview, type: 'VIDEO' }\r\n ],\r\n generateLayout: () => ({\r\n data: [\r\n centeredHeading,\r\n ...(_.isEmpty(logoData) ? [] : [logoImageElement(logoData)]),\r\n textElement(\r\n textData,\r\n PADDING,\r\n firstElementY,\r\n fullWidth,\r\n twoRowHeight,\r\n true\r\n ),\r\n mediaElement(\r\n processedMediaData,\r\n PADDING,\r\n firstElementY + twoRowHeight + GUTTER,\r\n fullWidth,\r\n twoRowHeight,\r\n isVideo,\r\n 0\r\n )\r\n ]\r\n })\r\n },\r\n // Layout 2 – With dynamic heading height\r\n {\r\n img: Layout2,\r\n layoutStyle: 'layout-2',\r\n previewImages: [\r\n { img: Layout2ImagePreview, type: 'IMAGE' },\r\n { img: Layout2VideoPreview, type: 'VIDEO' }\r\n ],\r\n generateLayout: () => ({\r\n data: [\r\n centeredHeading,\r\n ...(_.isEmpty(logoData) ? [] : [logoImageElement(logoData)]),\r\n textElement(\r\n textData,\r\n PADDING,\r\n firstElementY,\r\n fullWidth,\r\n twoRowHeight,\r\n true\r\n ),\r\n mediaElement(\r\n processedMediaData,\r\n PADDING,\r\n firstElementY + twoRowHeight + GUTTER,\r\n halfWidth,\r\n twoRowHeight,\r\n isVideo,\r\n 0\r\n ),\r\n mediaElement(\r\n processedMediaData,\r\n PADDING + halfWidth + GUTTER,\r\n firstElementY + twoRowHeight + GUTTER,\r\n halfWidth,\r\n twoRowHeight,\r\n isVideo,\r\n 1\r\n )\r\n ]\r\n })\r\n },\r\n // Layout 3 – With dynamic heading height\r\n {\r\n img: Layout3,\r\n layoutStyle: 'layout-3',\r\n previewImages: [\r\n { img: Layout3ImagePreview, type: 'IMAGE' },\r\n { img: Layout3VideoPreview, type: 'VIDEO' }\r\n ],\r\n generateLayout: () => ({\r\n data: [\r\n ...(_.isEmpty(logoData) ? [] : [logoImageElement(logoData)]),\r\n mediaElement(\r\n processedMediaData,\r\n PADDING,\r\n PADDING,\r\n fullWidth,\r\n twoRowHeight,\r\n isVideo,\r\n 0\r\n ),\r\n {\r\n ...centeredHeading,\r\n params: {\r\n ...centeredHeading.params,\r\n x: PADDING,\r\n y: PADDING + twoRowHeight + GUTTER,\r\n width: fullWidth,\r\n height: fullWidthHeadingHeight\r\n }\r\n },\r\n textElement(\r\n textData,\r\n PADDING,\r\n PADDING + twoRowHeight + GUTTER + fullWidthHeadingHeight + GUTTER,\r\n fullWidth,\r\n twoRowHeight,\r\n true\r\n )\r\n ]\r\n })\r\n },\r\n // Layout 4 – With dynamic heading height\r\n {\r\n img: Layout4,\r\n layoutStyle: 'layout-4',\r\n previewImages: [\r\n { img: Layout4ImagePreview, type: 'IMAGE' },\r\n { img: Layout4VideoPreview, type: 'VIDEO' }\r\n ],\r\n generateLayout: () => ({\r\n data: [\r\n ...(_.isEmpty(logoData) ? [] : [logoImageElement(logoData)]),\r\n mediaElement(\r\n processedMediaData,\r\n PADDING,\r\n PADDING,\r\n halfWidth,\r\n twoRowHeight,\r\n isVideo,\r\n 0\r\n ),\r\n mediaElement(\r\n processedMediaData,\r\n PADDING + halfWidth + GUTTER,\r\n PADDING,\r\n halfWidth,\r\n twoRowHeight,\r\n isVideo,\r\n 1\r\n ),\r\n {\r\n ...centeredHeading,\r\n params: {\r\n ...centeredHeading.params,\r\n x: PADDING,\r\n y: PADDING + twoRowHeight + GUTTER,\r\n width: fullWidth,\r\n height: fullWidthHeadingHeight\r\n }\r\n },\r\n textElement(\r\n textData,\r\n PADDING,\r\n PADDING + twoRowHeight + GUTTER + fullWidthHeadingHeight + GUTTER,\r\n fullWidth,\r\n twoRowHeight,\r\n true\r\n )\r\n ]\r\n })\r\n },\r\n // Layout 5 – With dynamic heading height for half-width column\r\n {\r\n img: Layout5,\r\n layoutStyle: 'layout-5',\r\n previewImages: [\r\n { img: Layout5ImagePreview, type: 'IMAGE' },\r\n { img: Layout5VideoPreview, type: 'VIDEO' }\r\n ],\r\n generateLayout: () => {\r\n // Create a half-width, left-aligned heading specifically for this layout\r\n const halfWidthHeading = createElement('TEXT', 'HEADING', {\r\n content: leftAlignedHeading.params.content,\r\n x: PADDING,\r\n y: columnHeadingY,\r\n width: halfWidth,\r\n height: halfWidthHeadingHeight,\r\n media_format: 'TEXT'\r\n })\r\n\r\n return {\r\n data: [\r\n // Left column: heading and text\r\n halfWidthHeading,\r\n ...(_.isEmpty(logoData) ? [] : [logoImageElement(logoData)]),\r\n textElement(\r\n textData,\r\n PADDING,\r\n columnTextY,\r\n halfWidth,\r\n columnTextHeight\r\n ),\r\n // Right column: single media element (full column height)\r\n mediaElement(\r\n processedMediaData,\r\n PADDING + halfWidth + GUTTER,\r\n PADDING,\r\n halfWidth,\r\n containerContentHeight,\r\n isVideo,\r\n 0\r\n )\r\n ]\r\n }\r\n }\r\n },\r\n // Layout 6 – With dynamic heading height for half-width column\r\n {\r\n img: Layout6,\r\n layoutStyle: 'layout-6',\r\n previewImages: [\r\n { img: Layout6ImagePreview, type: 'IMAGE' },\r\n { img: Layout6VideoPreview, type: 'VIDEO' }\r\n ],\r\n generateLayout: () => {\r\n // Create a half-width, left-aligned heading specifically for this layout\r\n const halfWidthHeading = createElement('TEXT', 'HEADING', {\r\n content: leftAlignedHeading.params.content,\r\n x: PADDING,\r\n y: columnHeadingY,\r\n width: halfWidth,\r\n height: halfWidthHeadingHeight,\r\n media_format: 'TEXT'\r\n })\r\n\r\n return {\r\n data: [\r\n // Left column: heading and text\r\n halfWidthHeading,\r\n ...(_.isEmpty(logoData) ? [] : [logoImageElement(logoData)]),\r\n textElement(\r\n textData,\r\n PADDING,\r\n columnTextY,\r\n halfWidth,\r\n columnTextHeight\r\n ),\r\n // Right column: two media elements stacked vertically\r\n mediaElement(\r\n processedMediaData,\r\n PADDING + halfWidth + GUTTER,\r\n PADDING,\r\n halfWidth,\r\n mediaDoubleHeight,\r\n isVideo,\r\n 0\r\n ),\r\n mediaElement(\r\n processedMediaData,\r\n PADDING + halfWidth + GUTTER,\r\n PADDING + mediaDoubleHeight + GUTTER,\r\n halfWidth,\r\n mediaDoubleHeight,\r\n isVideo,\r\n 1\r\n )\r\n ]\r\n }\r\n }\r\n },\r\n // Layout 7 – With dynamic heading height for half-width column\r\n {\r\n img: Layout7,\r\n layoutStyle: 'layout-7',\r\n previewImages: [\r\n { img: Layout7ImagePreview, type: 'IMAGE' },\r\n { img: Layout7VideoPreview, type: 'VIDEO' }\r\n ],\r\n generateLayout: () => {\r\n // Create a half-width, left-aligned heading specifically for this layout\r\n const halfWidthHeading = createElement('TEXT', 'HEADING', {\r\n content: leftAlignedHeading.params.content,\r\n x: PADDING + halfWidth + GUTTER,\r\n y: columnHeadingY,\r\n width: halfWidth,\r\n height: halfWidthHeadingHeight,\r\n media_format: 'TEXT'\r\n })\r\n\r\n return {\r\n data: [\r\n // Left column: single media element (full column height)\r\n mediaElement(\r\n processedMediaData,\r\n PADDING,\r\n PADDING,\r\n halfWidth,\r\n containerContentHeight,\r\n isVideo,\r\n 0\r\n ),\r\n // Right column: heading and text\r\n halfWidthHeading,\r\n ...(_.isEmpty(logoData) ? [] : [logoImageElement(logoData)]),\r\n textElement(\r\n textData,\r\n PADDING + halfWidth + GUTTER,\r\n columnTextY,\r\n halfWidth,\r\n columnTextHeight\r\n )\r\n ]\r\n }\r\n }\r\n },\r\n // Layout 8 – With dynamic heading height for half-width column\r\n {\r\n img: Layout8,\r\n layoutStyle: 'layout-8',\r\n previewImages: [\r\n { img: Layout8ImagePreview, type: 'IMAGE' },\r\n { img: Layout8VideoPreview, type: 'VIDEO' }\r\n ],\r\n generateLayout: () => {\r\n // Create a half-width, left-aligned heading specifically for this layout\r\n const halfWidthHeading = createElement('TEXT', 'HEADING', {\r\n content: leftAlignedHeading.params.content,\r\n x: PADDING + halfWidth + GUTTER,\r\n y: columnHeadingY,\r\n width: halfWidth,\r\n height: halfWidthHeadingHeight,\r\n media_format: 'TEXT'\r\n })\r\n\r\n return {\r\n data: [\r\n // Left column: two media elements stacked vertically\r\n mediaElement(\r\n processedMediaData,\r\n PADDING,\r\n PADDING,\r\n halfWidth,\r\n mediaDoubleHeight,\r\n isVideo,\r\n 0\r\n ),\r\n mediaElement(\r\n processedMediaData,\r\n PADDING,\r\n PADDING + mediaDoubleHeight + GUTTER,\r\n halfWidth,\r\n mediaDoubleHeight,\r\n isVideo,\r\n 1\r\n ),\r\n // Right column: heading and text\r\n halfWidthHeading,\r\n ...(_.isEmpty(logoData) ? [] : [logoImageElement(logoData)]),\r\n textElement(\r\n textData,\r\n PADDING + halfWidth + GUTTER,\r\n columnTextY,\r\n halfWidth,\r\n columnTextHeight\r\n )\r\n ]\r\n }\r\n }\r\n }\r\n ]\r\n}\r\n\r\nexport default createLayoutData\r\n","import React, { useCallback, useEffect, useMemo, useState } from 'react'\r\nimport { Alert, Button, Divider, Modal, Popover, Result, message } from 'antd'\r\nimport { useDispatch } from 'react-redux'\r\nimport { useTranslation } from 'react-i18next'\r\n\r\nimport actions from '../../../../../../../../store/actions'\r\n\r\nimport createLayoutData from './layoutData'\r\nimport { ImagePreview } from '../../../../../../../../components'\r\n\r\nconst LayoutOptions = props => {\r\n const { t } = useTranslation()\r\n const [selectedLayout, setSelectedLayout] = useState({\r\n layout: null,\r\n isVideo: false\r\n })\r\n const [showLayoutModal, setShowLayoutModal] = useState({\r\n visible: false,\r\n layoutStyle: null,\r\n isVideo: false\r\n })\r\n\r\n const { currentPage, pageStructureData, lessonUpdate, isUpdating } = props\r\n const dispatch = useDispatch()\r\n\r\n const getCurrentPageTextData = (currentPageData = {}) => {\r\n const pageData = currentPageData.data\r\n\r\n if (pageData) {\r\n const totalElements = pageData.filter(\r\n item => item.display !== 'HEADING' && item.type === 'TEXT'\r\n )\r\n\r\n if (totalElements.length > 1) {\r\n const combinedText = totalElements\r\n .map(item => item.params.content)\r\n .join(' ')\r\n return combinedText\r\n }\r\n\r\n return (totalElements[0] && totalElements[0].params.content) || ''\r\n }\r\n\r\n return ''\r\n }\r\n\r\n const getCurrentPageImages = (currentPageData = {}) => {\r\n const pageData = currentPageData.data\r\n\r\n if (pageData) {\r\n const imageItem = pageData.filter(\r\n item => item.type === 'IMAGE' && item.display !== 'LOGO'\r\n )\r\n\r\n return imageItem.map(item => ({\r\n content: item.params.content,\r\n content_id: item.params.content_id\r\n }))\r\n }\r\n\r\n return []\r\n }\r\n\r\n const getCurrentPageVideos = (currentPageData = {}) => {\r\n const pageData = currentPageData.data\r\n\r\n if (pageData) {\r\n const videoItem = pageData.filter(item => item.type === 'VIDEO')\r\n\r\n return videoItem.map(item => ({\r\n content: item.params.content,\r\n content_id: item.params.content_id\r\n }))\r\n }\r\n\r\n return []\r\n }\r\n\r\n function splitParagraph(paragraph) {\r\n if (!paragraph) return ['', '']\r\n const sentences = paragraph.split(/(?<=\\.|\\?|\\!)\\s/)\r\n const midpoint = Math.ceil(sentences.length / 2)\r\n const firstHalf = sentences.slice(0, midpoint).join(' ') || ''\r\n const secondHalf = sentences.slice(midpoint).join(' ') || ''\r\n return [firstHalf, secondHalf]\r\n }\r\n\r\n useEffect(() => {\r\n const currentPageData = pageStructureData[currentPage - 1]\r\n if (!currentPageData || !selectedLayout.layout) return\r\n\r\n const existingHeading = currentPageData.data.find(\r\n item => item.display === 'HEADING'\r\n )\r\n\r\n const existingBackground = currentPageData.data.find(\r\n item =>\r\n item.type === 'BACKGROUND_IMAGE' || item.type === 'BACKGROUND_COLOR'\r\n )\r\n const textData = getCurrentPageTextData(currentPageData)\r\n const mediaData = selectedLayout.isVideo\r\n ? getCurrentPageVideos(currentPageData)\r\n : getCurrentPageImages(currentPageData)\r\n const logoData = getCurrentPageLogo(currentPageData)\r\n\r\n const layoutArray = createLayoutData(\r\n textData,\r\n mediaData,\r\n logoData,\r\n existingHeading && existingHeading.params.content,\r\n selectedLayout.isVideo\r\n )\r\n const selectedLayoutData = layoutArray.find(\r\n layout => layout.layoutStyle === selectedLayout.layout\r\n )\r\n\r\n if (!selectedLayoutData) return\r\n\r\n let updatedPageData = {\r\n ...currentPageData,\r\n ...selectedLayoutData.generateLayout()\r\n }\r\n\r\n if (existingBackground) {\r\n updatedPageData = {\r\n ...updatedPageData,\r\n data: [...updatedPageData.data, existingBackground]\r\n }\r\n }\r\n\r\n const updatedData = [...pageStructureData]\r\n updatedData[currentPage - 1] = updatedPageData\r\n\r\n const { handleLessonInput } = actions.lessonBuilder\r\n dispatch(handleLessonInput('pages_landscape', updatedData))\r\n lessonUpdate({ pages_landScape: updatedData })\r\n }, [selectedLayout])\r\n\r\n const handleSelectLayout = (layout, mediaType) => {\r\n if (isUpdating) return\r\n\r\n const currentPageData = pageStructureData[currentPage - 1]\r\n const pageHasScenario =\r\n currentPageData &&\r\n currentPageData.data.some(node => node.type === 'SCENARIO')\r\n\r\n if (pageHasScenario) {\r\n message.error(\r\n 'You cannot change layout in a scenario page. Please try other pages or remove the scenario from the page first.',\r\n 10\r\n )\r\n return\r\n }\r\n\r\n setShowLayoutModal({\r\n visible: true,\r\n layoutStyle: layout,\r\n isVideo: mediaType === 'VIDEO'\r\n })\r\n }\r\n\r\n const onConfirmLayoutChange = () => {\r\n setSelectedLayout({\r\n layout: showLayoutModal.layoutStyle,\r\n isVideo: showLayoutModal.isVideo\r\n })\r\n setShowLayoutModal(pre => ({\r\n ...pre,\r\n visible: false\r\n }))\r\n }\r\n\r\n const getCurrentPageLogo = (currentPageData = {}) => {\r\n const pageData = currentPageData.data\r\n\r\n if (pageData) {\r\n const imageItem = pageData.filter(\r\n item => item.display === 'LOGO' && item.type === 'IMAGE'\r\n )\r\n\r\n return (imageItem[0] && imageItem[0].params) || {}\r\n }\r\n\r\n return {}\r\n }\r\n\r\n const layoutData = createLayoutData()\r\n\r\n const PopoverContent = ({ layout }) => {\r\n const previewImages = layout.previewImages\r\n\r\n return (\r\n {t('media:drop_files')} {t('media:or')} \r\n {t('audio:mp3_audio')} - {bytesToSize(item.file_size)}\r\n {t('audio:created')} {moment(item.created_at).format('DD MMM YYYY')} {t('audio:duration')} 14:34 {t('audio:topic')} \r\n {loading\r\n ? 'loading...'\r\n : topicList.length > 0\r\n ? topicList.join()\r\n : '...'}\r\n {t('audio:description')} \r\n {item.description ? item.description : '...'}\r\n {t('audio:key_words_tag')} {item.keywords ? item.keywords : '...'} {t('media:drop_files')} {t('media:or')} \r\n {t('image:image')} - {bytesToSize(item.file_size)}\r\n {t('audio:created')} {moment(item.created_at).format('DD MMM YYYY')} {t('audio:description')} {item.description ? item.description : '...'} {t('image:dimension')} \r\n {getImageDimension(item.resizes.medium_large)}{' '}\r\n {t('image:pixel')}\r\n {t('audio:topic')} \r\n {loading\r\n ? 'loading...'\r\n : topicList.length > 0\r\n ? topicList.join()\r\n : '...'}\r\n {t('audio:key_words_tag')} {item.keywords ? item.keywords : '...'}\r\n {previewImages.map((previewImage, index) => (\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}\r\n\r\nexport default LayoutOptions\r\n\r\nconst PopoverContentWrapper = ({ content, onImageClick }) => {\r\n const handleImageClick = e => {\r\n if (e.target.tagName.toLowerCase() === 'img') {\r\n // Call the original click handler from the content first\r\n const originalOnClick = e.target.onclick\r\n if (originalOnClick) {\r\n originalOnClick.call(e.target, e)\r\n }\r\n // Then close the popover\r\n onImageClick()\r\n }\r\n }\r\n\r\n return \r\n {layoutData.map((layout, index) => (\r\n \r\n\r\n {content}\r\n}\r\n\r\nconst PopoverWrapper = ({ children, content }) => {\r\n const [visible, setVisible] = useState(false)\r\n\r\n // Handle scroll event\r\n useEffect(() => {\r\n const handleScroll = () => {\r\n if (visible) {\r\n setVisible(false)\r\n }\r\n }\r\n\r\n window.addEventListener('scroll', handleScroll, true)\r\n return () => window.removeEventListener('scroll', handleScroll, true)\r\n }, [visible])\r\n\r\n // Handle click outside\r\n useEffect(() => {\r\n const handleClickOutside = event => {\r\n if (\r\n visible &&\r\n !event.target.closest('.ant-popover') &&\r\n !event.target.closest('.layout-img')\r\n ) {\r\n setVisible(false)\r\n }\r\n }\r\n\r\n document.addEventListener('click', handleClickOutside)\r\n return () => document.removeEventListener('click', handleClickOutside)\r\n }, [visible])\r\n\r\n const handleVisibleChange = useCallback(newVisible => {\r\n setVisible(newVisible)\r\n }, [])\r\n\r\n const handleContentImageClick = useCallback(() => {\r\n setVisible(false)\r\n }, [])\r\n\r\n return (\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n {uploadProgress.length === 0 && (\r\n \r\n )}\r\n\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n {fileNotCompatible && (\r\n \r\n \r\n \r\n )}\r\n\r\n {fileSizeExceed && (\r\n \r\n \r\n \r\n\r\n \r\n {t('errors:upload_error')}\r\n \r\n \r\n \r\n )}\r\n\r\n {uploadProgress.length > 0 && (\r\n \r\n \r\n \r\n\r\n \r\n {t('errors:file_size_exceed')}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {item.status !== general.CANCELED && (\r\n \r\n {checkedCompleteUpload(item) && (\r\n \r\n {bytesToSize(item.loaded)} {t('of')}{' '}\r\n {bytesToSize(item.total)}\r\n \r\n )}\r\n {!checkedCompleteUpload(item) && (\r\n \r\n {t('general:completed')}\r\n \r\n )}\r\n \r\n )}\r\n {!isPodcast && (\r\n \r\n {item.isSelected && (\r\n \r\n ))}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withTranslation('audio')(ShowDetailAudio)\r\n","import ShowDetailAudio from './ShowDetailAudio'\r\n\r\nexport default ShowDetailAudio\r\n","import React, { Fragment } from 'react'\r\nimport { Col, Input, Row } from 'antd'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { Filter } from '../../../../../../../../../../components'\r\nimport './FilterAudio.scss'\r\n\r\nconst { Search } = Input\r\n\r\nconst FilterAudio = props => {\r\n const { t, type, onSearch, tab, onFilter } = props\r\n const filterData = [\r\n { value: 'NEWEST', text: t('filters:Newest_to_Oldest') },\r\n { value: 'OLDEST', text: t('filters:Oldest_to_Newest') },\r\n { value: 'ASC', text: t('filters:A_Z') },\r\n { value: 'DESC', text: t('filters:Z_A') }\r\n ]\r\n\r\n return (\r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n {item.title || item.filename}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n */}\r\n \r\n \r\n \r\n {NOT_FOUND_MESSAGE}\r\n ) : cardSelected ? (\r\n \r\n {this.getMediaListing(audioList).map(item => (\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n {this.getMediaListing(audioList).map(item => (\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n {moment(created_at).format('DD MMM YYYY')}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {/*{moment(created_at).format(\"DD MMM YYYY\")}*/}\r\n \r\n \r\n \r\n \r\n {uploadProgress.length === 0 && (\r\n \r\n )}\r\n\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n {fileNotCompatible && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {fileSizeExceed && (\r\n \r\n \r\n\r\n \r\n {t('errors:upload_error')}\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {uploadProgress.length > 0 && (\r\n \r\n \r\n\r\n \r\n {t('errors:file_size_exceed')}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {item.status !== general.CANCELED && (\r\n \r\n {checkedCompleteUpload(item) && (\r\n \r\n {bytesToSize(item.loaded)} {t('of')}{' '}\r\n {bytesToSize(item.total)}\r\n \r\n )}\r\n {!checkedCompleteUpload(item) && (\r\n \r\n {t('general:completed')}\r\n \r\n )}\r\n \r\n )}\r\n \r\n {item.isSelected && (\r\n \r\n ))}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withTranslation('audio')(ShowDetailImage)\r\n","import ShowDetailImage from './ShowDetailImage'\r\n\r\nexport default ShowDetailImage\r\n","import React, { Fragment } from 'react'\r\nimport { Col, Input, Row } from 'antd'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { Filter } from '../../../../../../../../../../components'\r\nimport './FilterImage.scss'\r\n\r\nconst { Search } = Input\r\n\r\nconst FilterImage = props => {\r\n const { t, type, onSearch, tab, onFilter } = props\r\n const filterData = [\r\n { value: 'NEWEST', text: t('filters:Newest_to_Oldest') },\r\n { value: 'OLDEST', text: t('filters:Oldest_to_Newest') },\r\n { value: 'ASC', text: t('filters:A_Z') },\r\n { value: 'DESC', text: t('filters:Z_A') }\r\n ]\r\n\r\n return (\r\n \r\n \r\n )}\r\n \r\n {/*
\r\n \r\n \r\n \r\n
\r\n
\r\n {item.title || item.filename}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n */}\r\n \r\n \r\n \r\n {NOT_FOUND_MESSAGE}\r\n ) : cardSelected ? (\r\n \r\n {this.getMediaListing(imageList).map(item => (\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n {this.getMediaListing(imageList).map(item => (\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n {t('image:public_image_not_found')}\r\n \r\n ) : (\r\n \r\n {pexelsData.map(item => (\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n {t('image:public_image_not_found')}\r\n \r\n ) : (\r\n Search Results
\r\n \r\n {aiImageList.map((item, ind) => (\r\n \r\n ))}\r\n \r\n Selected\r\n )}\r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {!isAR && !changeBackground && (\r\n \r\n \r\n {isFetching ?
{NOT_FOUND_MESSAGE}
\r\n ) : cardSelected ? (\r\n \r\n {this.getMediaListing(videoList).map(item => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n {this.getMediaListing(videoList).map(item => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n this.handlePagination(type, event)}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {voices.VOICES.map((item, i) => (\r\n
\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {_.isEmpty(src) && this.onClickButton()}\r\n >\r\n {isProcessing\r\n ? general.PROCESSING_AUDIO\r\n : general.EDIT_AUDIO}\r\n \r\n
\r\n {t('audio:select_voice')}
\r\n \r\n\r\n this.onClickCard(item.value)}\r\n >\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {item.label}.mp3\r\n
\r\n \r\n \r\n \r\n this.onClickCard(item.value)}\r\n >\r\n
\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {item.label}.mp3\r\n
\r\n \r\n \r\n \r\n this.onClickCard(item.value)}\r\n >\r\n
\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {item.label}.mp3\r\n
\r\n \r\n \r\n this.handleCropComplete(crop, pixelCrop)\r\n }\r\n />\r\n
\r\n \r\n ) : (\r\n \r\n \r\n {\r\n const data =\r\n base64CroppedImage === 'data:,' ? null : base64CroppedImage\r\n onClickDone(data)\r\n }}\r\n >\r\n {t('labels:done')}\r\n \r\n
\r\n \r\n {loading && (\r\n
\r\n )\r\n}\r\n\r\nexport default QuizUnityView\r\n","import QuizUnityView from './QuizUnityView'\r\n\r\nexport default QuizUnityView\r\n","import { Progress } from 'antd'\r\nimport { Auth } from 'aws-amplify'\r\nimport React, { useEffect, useMemo, useState } from 'react'\r\nimport { Unity, useUnityContext } from 'react-unity-webgl-latest'\r\nimport { config } from '../../../../../../../constants'\r\nimport './SimulationStyles.scss'\r\n\r\nconst SimulationUnityView = ({\r\n unityUrl,\r\n simulationId,\r\n userId,\r\n token,\r\n ids,\r\n isEnableModal\r\n}) => {\r\n const { loaderUrl, dataUrl, frameworkUrl, codeUrl } = unityUrl\r\n const { lessonId, courseId, pageId } = ids\r\n const {\r\n unityProvider,\r\n addEventListener,\r\n removeEventListener,\r\n sendMessage,\r\n isLoaded,\r\n unload,\r\n loadingProgression,\r\n error: unityError\r\n } = useUnityContext({\r\n loaderUrl,\r\n dataUrl,\r\n frameworkUrl,\r\n codeUrl\r\n })\r\n\r\n const [unityUnloaded, setUnityUnloaded] = useState(false)\r\n\r\n useEffect(() => {\r\n return () => {\r\n handleUnloadUnity()\r\n }\r\n }, [])\r\n\r\n const loadingPercentage = useMemo(\r\n () => Math.round(loadingProgression * 100),\r\n [loadingProgression]\r\n )\r\n\r\n const getAccessJwtToken = async () => {\r\n const session = await Auth.currentSession()\r\n const newToken = await session.idToken.jwtToken\r\n return newToken\r\n }\r\n\r\n const handleNewToken = async msg => {\r\n if (msg === 'token_needed') {\r\n const token = await getAccessJwtToken()\r\n sendMessage('Data', 'Get_Fresh_Token', String(token))\r\n }\r\n }\r\n\r\n const handleUnloadUnity = () => {\r\n if (isLoaded && unityProvider) {\r\n unload()\r\n .then(() => {\r\n console.log('Unity instance successfully unloaded.')\r\n setUnityUnloaded(true)\r\n })\r\n .catch(error => {\r\n console.error('Error during Unity unload:', error)\r\n })\r\n } else {\r\n console.warn('Unity instance is not instantiated; skipping unload.')\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (isLoaded) {\r\n sendMessage('Data', 'Get_courseid', String(courseId))\r\n sendMessage('Data', 'Get_userid', String(userId))\r\n sendMessage('Data', 'Get_simulationid', String(simulationId))\r\n sendMessage('Data', 'Get_token', String(token))\r\n sendMessage('Data', 'Get_baseurl', String(config.baseURL))\r\n sendMessage('Data', 'Get_lessonid', String(lessonId))\r\n sendMessage('Data', 'Get_pageid', String(pageId))\r\n addEventListener('GetToken', handleNewToken)\r\n addEventListener('ExitGame', handleUnloadUnity)\r\n }\r\n return () => {\r\n removeEventListener('GetToken', handleNewToken)\r\n removeEventListener('ExitGame', handleUnloadUnity)\r\n }\r\n }, [isLoaded])\r\n\r\n useEffect(() => {\r\n handleUnloadUnity()\r\n }, [isEnableModal])\r\n\r\n return (\r\n \r\n \r\n Loading Quiz...\r\n
\r\n )}\r\n\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default SimulationUnityView\r\n","import SimulationUnityView from './SimulationUnityView'\r\n\r\nexport default SimulationUnityView\r\n","import styled, { css } from 'styled-components'\r\nimport { Button, Radio, Checkbox, Icon } from 'antd'\r\n\r\nimport { styleguide } from '../../../../../constants'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst Quiz = styled.div`\r\n padding: 2rem;\r\n overflow-y: auto;\r\n background: rgba(255, 255, 255, 0.9);\r\n\r\n border: 0.5px solid #fff;\r\n border-radius: 8px;\r\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);\r\n ::-webkit-scrollbar {\r\n -webkit-appearance: none;\r\n width: 10px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);\r\n background-color: #fff;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n border-radius: 4px;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\r\n }\r\n`\r\n\r\nQuiz.Content = styled.div``\r\n\r\nQuiz.Action = styled.div`\r\n margin-top: 2rem;\r\n`\r\n\r\nQuiz.Title = styled.div`\r\n font-weight: 300;\r\n // font-size: 2.1rem;\r\n font-size: 2.3rem;\r\n margin-bottom: 0.8rem;\r\n color: #000;\r\n`\r\n\r\nQuiz.Strong = styled.span`\r\n font-weight: 700;\r\n`\r\n\r\nQuiz.Question = styled.div`\r\n font-weight: 600;\r\n // font-size: 1.6rem;\r\n font-size: 2rem;\r\n margin-bottom: 0.8rem;\r\n color: #000;\r\n`\r\n\r\nQuiz.Radio = styled(Radio)`\r\n && {\r\n height: 3rem;\r\n line-height: 3rem;\r\n font-size: 1.6rem;\r\n display: table;\r\n white-space: initial;\r\n text-align: justify;\r\n }\r\n`\r\n\r\nQuiz.ListRadioGroup = styled(Radio.Group)`\r\n && {\r\n width: 100%;\r\n }\r\n`\r\n\r\nQuiz.Checkbox = styled(Checkbox)`\r\n && {\r\n display: block;\r\n font-size: 1.6rem;\r\n text-align: justify;\r\n color: #000;\r\n }\r\n`\r\n\r\nQuiz.ListCheckboxGroup = styled(Checkbox.Group)`\r\n && {\r\n width: 100%;\r\n\r\n .ant-checkbox-wrapper + .ant-checkbox-wrapper {\r\n margin-left: 0;\r\n }\r\n }\r\n`\r\n\r\nQuiz.SortableList = styled.div`\r\n position: relative;\r\n text-align: justify;\r\n`\r\n\r\nQuiz.SortableItem = styled.div`\r\n width: 100%;\r\n background-color: ${colors.white};\r\n border: 0.1rem dashed ${colors.darkGreyTwo};\r\n cursor: move;\r\n padding: 0.8rem 2rem;\r\n margin-bottom: 1rem;\r\n z-index: 99999;\r\n font-size: 1.6rem;\r\n`\r\n\r\nQuiz.ElementsList = styled.div`\r\n position: relative;\r\n text-align: justify;\r\n ${props =>\r\n props.hide &&\r\n css`\r\n display: none;\r\n `}\r\n`\r\n\r\nQuiz.Element = styled.div`\r\n background-color: ${colors.white};\r\n border: 0.1rem dashed ${colors.darkGreyTwo};\r\n cursor: move;\r\n padding: 0.8rem 2rem;\r\n z-index: 99999;\r\n margin-bottom: 1rem;\r\n`\r\n\r\nQuiz.ElementDrop = styled.div`\r\n background-color: ${colors.white};\r\n border: 0.1rem dashed ${colors.darkGreyTwo};\r\n cursor: move;\r\n padding: 0.8rem 2rem;\r\n z-index: 99999;\r\n`\r\n\r\nQuiz.CriterionList = styled.div`\r\n pointer-events: none;\r\n text-align: justify;\r\n`\r\n\r\nQuiz.CriterionContainer = styled.div`\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-content: center;\r\n\r\n &:not(:first-child) {\r\n margin-top: 1rem;\r\n }\r\n`\r\n\r\nQuiz.Criterion = styled.div`\r\n border: 0.1rem solid ${colors.darkGreyTwo};\r\n flex: 1;\r\n padding: 0.8rem 2rem;\r\n margin-right: 1rem;\r\n`\r\n\r\nQuiz.Area = styled.div`\r\n border: 0.1rem solid ${colors.darkGreyTwo};\r\n flex: 1;\r\n padding: 0.8rem;\r\n`\r\n\r\nQuiz.Image = styled.img`\r\n width: 100%;\r\n max-width: calc(50% - 0.5rem);\r\n margin-top: 1rem;\r\n`\r\n\r\nQuiz.Result = styled.div`\r\n height: auto;\r\n overflow-y: auto;\r\n`\r\n\r\nQuiz.Result.Title = styled.div`\r\n width: 100%;\r\n color: ${colors.red};\r\n // font-size: 2.1rem;\r\n font-size: 2.8rem;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n\r\n ${props =>\r\n props.status &&\r\n css`\r\n color: ${colors.green};\r\n `}\r\n`\r\n\r\nQuiz.Result.Label = styled.div`\r\n border: 0.1rem solid ${colors.red};\r\n color: ${colors.red};\r\n padding: 0.5rem 0.5rem 0.5rem 3.5rem;\r\n margin: 0.5rem 0;\r\n position: relative;\r\n\r\n ${props =>\r\n props.status &&\r\n css`\r\n border-color: ${colors.green};\r\n color: ${colors.green};\r\n `}\r\n`\r\n\r\nQuiz.Result.Icon = styled(Icon)`\r\n position: absolute;\r\n top: 50%;\r\n left: 1rem;\r\n transform: translateY(-50%);\r\n`\r\n\r\nQuiz.Result.Load = styled.div`\r\n width: 100%;\r\n font-size: 1.8rem;\r\n padding: 3rem 0;\r\n text-align: center;\r\n`\r\n\r\n// Add to your styled.js file\r\nQuiz.Result.Feedback = styled.div`\r\n margin-top: 10px;\r\n padding: 10px;\r\n background-color: #f0f8ff;\r\n border-left: 4px solid #1890ff;\r\n font-style: italic;\r\n`;\r\n\r\nQuiz.Reset = styled(Button)`\r\n margin-bottom: 2rem;\r\n`\r\n\r\nQuiz.UnityContainer = styled.div`\r\n height: 100%;\r\n width: 100%;\r\n position: relative;\r\n`\r\n\r\nQuiz.FullScreen = styled.div`\r\n position: absolute;\r\n right: 10px;\r\n bottom: 15px;\r\n padding: 1rem;\r\n background: #ebebeb;\r\n display: grid;\r\n place-items: center;\r\n z-index: 9;\r\n`\r\n\r\nexport { Quiz }\r\n","import React, { Component, Fragment } from 'react'\r\nimport {\r\n SortableContainer,\r\n SortableElement,\r\n arrayMove\r\n} from 'react-sortable-hoc'\r\nimport { Container, Draggable } from 'react-smooth-dnd'\r\nimport _ from 'lodash'\r\nimport { Button, Input, Spin, message, Alert, Icon } from 'antd'\r\nimport { ResultQuestion, QuizUnityView, SimulationUnityView } from './internal'\r\n\r\nimport {\r\n getQuizById,\r\n quizValidate,\r\n quizDeleteAttempts,\r\n getSimulationInformation,\r\n validateOpenEndedQuestion\r\n} from '../../../../../services/api/quizes'\r\n\r\nimport { Quiz } from './styled'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nimport { getSession } from '../../../../../services/api/user'\r\n\r\nconst applyDrag = (arr, dragResult) => {\r\n const { removedIndex, addedIndex, payload } = dragResult\r\n if (removedIndex === null && addedIndex === null) return arr\r\n\r\n const result = [...arr]\r\n let itemToAdd = payload\r\n\r\n if (removedIndex !== null) {\r\n itemToAdd = result.splice(removedIndex, 1)[0]\r\n }\r\n\r\n if (addedIndex !== null) {\r\n result.splice(addedIndex, 0, itemToAdd)\r\n }\r\n return result\r\n}\r\n\r\nconst SortableItem = SortableElement(({ value }) => (\r\n \r\n
\r\n \r\n {unityUnloaded && (\r\n
\r\n \r\n Unity instance unloaded\r\n
\r\n )}\r\n\r\n {isLoaded === false && !unityError && (\r\n \r\n
\r\n )}\r\n\r\n {!unityUnloaded && (\r\n \r\n \r\n
\r\n Loading Simulation...\r\n \r\n
\r\n )}\r\n \r\n \r\n You have{' '}\r\n {quiz.attempts_count - quiz.user_attempts - 1} more\r\n attempt(s) remaining\r\n \r\n
\r\n )}\r\n\r\n {!quizRetry ? (\r\n\r\n {type === types.BACKGROUND_IMAGE && (\r\n 
\r\n )}\r\n {type === types.TEXT &&
\r\n )\r\n}\r\n","import Template from './Template'\r\n\r\nexport default Template\r\n","import styled from 'styled-components'\r\n\r\nexport const Annotation = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n z-index: 10;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n`\r\n","/*\r\n * @Description: In User Settings Edit\r\n * @Author: your name\r\n * @Date: 2019-08-22 10:35:38\r\n * @LastEditTime: 2019-09-23 11:00:05\r\n * @LastEditors: Please set LastEditors\r\n */\r\nimport styled, { css } from 'styled-components'\r\nimport { Head, media } from '../../../styles'\r\nimport { Button, Switch } from 'antd'\r\n\r\nimport { styleguide } from '../../../constants'\r\n\r\nconst { colors, typography } = styleguide\r\n\r\nexport const HeadWrap = styled(Head)`\r\n display: flex;\r\n justify-content: space-between;\r\n position: relative;\r\n top: -20px;\r\n background: white;\r\n // border-bottom: 1px solid ${colors.darkGreyThree};\r\n padding-bottom: 0;\r\n\r\n \r\n .ant-icon svg {\r\n height: auto !important;\r\n width: auto !important;\r\n }\r\n\r\n ${props =>\r\n props.isFullscreen &&\r\n css`\r\n margin-bottom: 0;\r\n top: -10px;\r\n `}\r\n`\r\n\r\nexport const CourseContent = styled.section`\r\n padding: 0 3.2rem 10rem;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: stretch;\r\n justify-content: space-between;\r\n\r\n ${media.md`\r\n flex-direction: column;\r\n `}\r\n`\r\n\r\nexport const CourseOwner = styled.section`\r\n padding: 0 3.2rem;\r\n`\r\n\r\nCourseOwner.Name = styled.p`\r\n font-size: 1.1rem;\r\n text-transform: uppercase;\r\n font-weight: 300;\r\n width: 100%;\r\n margin: 0;\r\n padding-bottom: 1.1rem;\r\n border-bottom: 1px solid ${colors.darkGreyThree} span {\r\n font-weight: ${typography.h3FontWeight};\r\n }\r\n`\r\n\r\nexport const PanelWrapp = styled.div`\r\n display: flex;\r\n align-content: flex-start;\r\n justify-content: space-between;\r\n`\r\n\r\nexport const PanelItem = styled.div`\r\n width: 100%;\r\n padding: 3rem;\r\n border: 0.1rem solid ${colors.darkGreyThree};\r\n`\r\n\r\nPanelItem.Wrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n ${media.sm`\r\n flex-direction: column;\r\n `}\r\n`\r\n\r\nPanelItem.Title = styled.h2`\r\n font-weight: 600;\r\n font-size: 2rem;\r\n letter-spacing: 0.05em;\r\n margin-bottom: 2rem;\r\n color: ${colors.darkGreyOne};\r\n`\r\n\r\nPanelItem.Content = styled.div`\r\n border-top: 0.1rem solid #ddd;\r\n padding-top: 2.5rem;\r\n`\r\n\r\nPanelItem.Description = styled.p`\r\n font-weight: 300;\r\n line-height: 2.4rem;\r\n margin-bottom: 2rem;\r\n`\r\n\r\nPanelItem.Image = styled.img`\r\n width: 100%;\r\n aspect-ratio: 16/9;\r\n object-fit: contain;\r\n`\r\n\r\nexport const LessonsBlock = styled.div`\r\n width: 30%;\r\n flex-basis: 30%;\r\n padding-top: 6.7rem;\r\n margin-left: 1.5rem;\r\n\r\n & > div {\r\n padding: 0;\r\n }\r\n\r\n ${media.md`\r\n width: 100%;\r\n margin-left: 0;\r\n padding-top: 2.9rem;\r\n `}\r\n`\r\n\r\nexport const Footer = styled.section`\r\n height: 7rem;\r\n border-top: 0.1rem solid #eeeeee;\r\n width: 100vw;\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n background-color: #fff;\r\n padding: 0 4rem;\r\n`\r\n\r\nFooter.Wrapp = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n height: 100%;\r\n\r\n .ant-btn {\r\n margin-right: 0.8rem;\r\n\r\n &:last-child {\r\n margin-right: 0;\r\n }\r\n }\r\n`\r\n\r\nexport const CourseExpire = styled.span`\r\n color: red;\r\n font-weight: ${typography.h2FontWeight};\r\n margin-right: 6rem;\r\n`\r\n\r\nexport const ZoomBtnGroup = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 1rem;\r\n background: #f4f5fa;\r\n padding: 1rem;\r\n height: max-content;\r\n border-radius: 29px;\r\n ${media.sm`\r\n flex-direction: column;\r\n `}\r\n\r\n .ant-radio-button-wrapper:first-child {\r\n border-radius: 50px 0 0 50px;\r\n }\r\n\r\n .ant-radio-button-wrapper:last-child {\r\n border-radius: 0 50px 50px 0;\r\n }\r\n`\r\n\r\nexport const ZoomBtn = styled(Button)`\r\n display: flex;\r\n align-items: center;\r\n &.ant-btn {\r\n height: 32px !important;\r\n }\r\n &:last-child {\r\n margin-right: 0;\r\n }\r\n`\r\n\r\nexport const Btn = styled(Button)`\r\n && {\r\n width: 15rem;\r\n height: 4rem;\r\n font-weight: ${typography.h2FontWeight};\r\n\r\n ${props =>\r\n props.startlesson &&\r\n css`\r\n background-color: ${colors.green} !important;\r\n border-color: ${colors.green} !important;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-around;\r\n `}\r\n }\r\n`\r\nexport const Switched = styled(Switch)`\r\n && {\r\n ${props =>\r\n props.startlesson &&\r\n css`\r\n background-color: ${colors.green} !important;\r\n border-color: ${colors.green} !important;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-around;\r\n `}\r\n }\r\n`\r\n\r\nexport const PageWrapper = styled.div`\r\n resize: both;\r\n position: relative;\r\n margin: 3rem 0 0 0;\r\n .el__preview {\r\n background: rgba(255, 255, 255, 0);\r\n }\r\n`\r\nexport const AnnotationPageWrapper = styled.div`\r\n position: relative;\r\n margin: 3rem 0 0 0;\r\n .el__preview {\r\n background: rgba(255, 255, 255, 0);\r\n }\r\n height: 100%;\r\n min-height: 560px;\r\n`\r\n\r\nexport const LandscapePageWrapper = styled.div`\r\n position: relative;\r\n .el__preview {\r\n background: rgba(255, 255, 255, 0);\r\n }\r\n overflow: hidden;\r\n`\r\nexport const PageContent = styled.section`\r\n position: relative;\r\n width: 100%;\r\n min-height: 1024px;\r\n height: 100%;\r\n border: 1px solid ${colors.light};\r\n background-color: ${colors.white};\r\n overflow: auto;\r\n top: -35px;\r\n`\r\n\r\nexport const LandscapePageContent = styled.section`\r\n position: relative;\r\n width: 1023px;\r\n height: 552px;\r\n border: 1px solid #e3e3e3;\r\n background-color: ${colors.white};\r\n border-radius: 8px;\r\n overflow: hidden;\r\n\r\n ${props =>\r\n props.loading &&\r\n css`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n `}\r\n\r\n ${props =>\r\n props.isFullscreen &&\r\n css`\r\n height: 100%;\r\n width: 100%;\r\n `}\r\n`\r\n","import React, { Component, Fragment } from 'react'\r\nimport { Spinner, Modal } from '../../../../../components'\r\nimport Template from '../Template'\r\nimport { Annotation } from './styled'\r\nimport { AnnotationPageWrapper } from '../../styled'\r\nimport annotationIcon from '../../../../../assets/annoation-hand.gif'\r\nimport api from '../../../../../services/api'\r\n\r\nlet timeOutCallAnnotation = null\r\n\r\nclass AnnotationView extends Component {\r\n state = {\r\n showModal: false,\r\n annotationContent: null,\r\n pageSize: {\r\n height: 552,\r\n width: 1024\r\n },\r\n // pageSize: {\r\n // width: 768,\r\n // height: 1024\r\n // },\r\n scale: 1\r\n }\r\n\r\n modalInner = null\r\n pageContent = null\r\n dontLoad = false\r\n\r\n setModalInnerRef = el => {\r\n this.modalInner = el\r\n this.doResize()\r\n }\r\n\r\n setPageContentRef = el => {\r\n this.pageContent = el\r\n this.doResize()\r\n }\r\n\r\n doResize = () => {\r\n if (this.pageContent && this.modalInner) {\r\n const contentWidth = this.pageContent.clientWidth\r\n const contentHeight = this.pageContent.clientHeight\r\n const wrapperWidth = this.modalInner.clientWidth\r\n const wrapperHeight = this.modalInner.clientHeight\r\n\r\n let scale = Math.min(\r\n wrapperWidth / contentWidth,\r\n wrapperHeight / contentHeight\r\n )\r\n\r\n if (scale > 1) scale = 1\r\n this.setState({ scale })\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const id = this.props.content\r\n if (!id) {\r\n return\r\n }\r\n timeOutCallAnnotation = setTimeout(() => {\r\n if (this.dontLoad) return\r\n api.annotation.getById(id).then(({ data }) => {\r\n if (data) {\r\n this.setState({\r\n annotationContent: data.page.data\r\n // pageSize: data.page.size\r\n })\r\n }\r\n })\r\n }, 1000)\r\n }\r\n\r\n componentWillUnmount() {\r\n this.dontLoad = true\r\n clearTimeout(timeOutCallAnnotation)\r\n }\r\n\r\n closeModal = () => {\r\n this.setState({ showModal: false })\r\n }\r\n\r\n openModal = () => {\r\n this.setState({ showModal: true })\r\n }\r\n\r\n render() {\r\n const { content, ids, isFullscreen, height, width, ...rest } = this.props\r\n const { showModal, annotationContent, pageSize, scale } = this.state\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n if (!isFetching && _.isEmpty(scenarioData)) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n const containerWidth = scale ? width * scale : width\r\n const containerHeight = scale ? height * scale : height\r\n\r\n return (\r\n \r\n {scenarioData.story_media && (\r\n \r\n \r\n {isAudioPlaying ? (\r\n
\r\n \r\n )}\r\n\r\n {isVideo && isVideoLoaded && !isVideoPlaying && (\r\n \r\n
\r\n \r\n
\r\n \r\n {selectedOption.answer && (\r\n \r\n
\r\n \r\n {isVideo ? (\r\n 
\r\n )}\r\n
\r\n {isStoryVisible && (\r\n \r\n
\r\n )}\r\n {scenarioData.name}
\r\n\r\n {scenarioData.story}\r\n
\r\n \r\n
\r\n {selectedOption.answer && (\r\n \r\n Study the scenario on this page and select the correct answer from\r\n the options below.\r\n
\r\n\r\n {scenarioData.answers && scenarioData.answers.map((option, index) => {\r\n const isCorrectAnswer = selectedOption.answer && option.correct\r\n const isIncorrectOption =\r\n selectedOption.uid === option.uid && !option.correct\r\n\r\n return (\r\n handleOptionClick(option)}\r\n >\r\n
\r\n )\r\n })}\r\n {option.answer}
\r\n\r\n setSelectedOption({})}\r\n className=\"scenario-view__content-right-button\"\r\n >\r\n Play Again\r\n \r\n
\r\n )}\r\n \r\n {!isCorrectAnswerSelected && (\r\n <>\r\n
\r\n\r\n \r\n
\r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default ScenarioView","import ScenarioView from './ScenarioView'\r\n\r\nexport default ScenarioView\r\n","import React from 'react'\r\nimport QuizView from '../QuizView'\r\nimport AnnotationView from '../AnnotationView'\r\n\r\nimport { Preview } from '../../../../../components/Builder'\r\nimport { builder } from '../../../../../constants'\r\nimport ScenarioView from '../ScenarioView'\r\n\r\nconst { types } = builder\r\n\r\nexport default props => {\r\n const {\r\n node,\r\n node: {\r\n auto,\r\n type,\r\n params,\r\n params: { width, height, x, y }\r\n },\r\n ids,\r\n onDragStart,\r\n onDragStop,\r\n toggleQuizRestriction,\r\n isFullscreen,\r\n scaleFactor: scale\r\n } = props\r\n\r\n const style = {\r\n position: 'absolute',\r\n width: isFullscreen ? width * scale : width,\r\n height: isFullscreen ? height * scale : height,\r\n top: isFullscreen ? y * scale : y,\r\n left: isFullscreen ? x * scale : x,\r\n zIndex: 5\r\n }\r\n\r\n const backgroundOpacity = params.opacity || 1\r\n\r\n if (type === types.BACKGROUND_COLOR) {\r\n return (\r\n {scenarioData.feedback}
\r\n\r\n {type === types.TEXT &&
\r\n )\r\n}\r\n","/*\r\n * @Description: In User Settings Edit\r\n * @Author: your name\r\n * @Date: 2019-08-22 10:35:38\r\n * @LastEditTime: 2019-09-23 10:28:06\r\n * @LastEditors: Please set LastEditors\r\n */\r\nimport styled, { css } from 'styled-components'\r\nimport { Head, media } from '../../../../../styles'\r\nimport { Button } from 'antd'\r\n\r\nimport { styleguide } from '../../../../../constants'\r\n\r\nconst { colors, typography, base } = styleguide\r\nconst footerHeight = 48\r\n\r\nexport const HeadWrap = styled(Head)`\r\n margin-bottom: 0;\r\n`\r\n\r\nexport const CourseContent = styled.section`\r\n padding: 0;\r\n display: flex;\r\n /* flex-wrap: wrap; */\r\n justify-content: space-between;\r\n`\r\n\r\nexport const CourseOwner = styled.section``\r\n\r\nexport const Footer = styled.section`\r\n height: ${footerHeight}px;\r\n width: 100%;\r\n background-color: #fff;\r\n padding: 3rem;\r\n z-index: 9;\r\n margin-top: 2rem;\r\n\r\n ${props =>\r\n props.isFullscreen &&\r\n css`\r\n border-top: 0.1rem solid #eeeeee;\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background-color: rgba(244, 245, 250, 0.54);\r\n padding: 4rem 3rem;\r\n `}\r\n\r\n ${media.md`\r\n padding: 0 1.5rem;\r\n `}\r\n`\r\n\r\nFooter.Wrapp = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n\r\n ${props =>\r\n props.spaceBetween &&\r\n css`\r\n justify-content: space-between;\r\n `}\r\n`\r\n\r\nFooter.Right = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n\r\n ${media.md`\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n\r\n span {\r\n margin-right: 0;\r\n\r\n ${media.sm`\r\n display: none;\r\n `}\r\n }\r\n `}\r\n`\r\n\r\nexport const Btn = styled(Button)`\r\n && {\r\n width: 15rem;\r\n height: 4rem;\r\n font-weight: ${typography.h2FontWeight};\r\n }\r\n`\r\n\r\nexport const Save = styled.span`\r\n color: ${colors.blue};\r\n font-family: ${base.fontFamily};\r\n font-size: ${typography.hyperLinkFontSize};\r\n font-weight: 600;\r\n margin-right: 3rem;\r\n cursor: pointer;\r\n`\r\n\r\nexport const ModalInner = styled.div`\r\n border-radius: 8px;\r\n overflow: hidden;\r\n`\r\n","import React from 'react'\r\nimport { Button, Icon } from 'antd'\r\n\r\nconst CustomPagination = ({\r\n currentPage,\r\n totalPages,\r\n onPageChange,\r\n loading\r\n}) => {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n const RenderZoomButtons = ({ zoomIn, zoomOut, resetTransform }) => {\r\n return (\r\n \r\n Next Lesson\r\n
\r\n {lessonTitle}
\r\n\r\n \r\n {({ zoomIn, zoomOut, resetTransform }) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {lesson.fetch ? (\r\n \r\n \r\n ) : (\r\n \r\n {renderPageContent()}\r\n \r\n )}\r\n {isFullscreen && \r\n \r\n \r\n )}\r\n \r\n
\r\n\r\n \r\n
\r\n {!lesson.fetch && (\r\n \r\n
\r\n {isPreviewMode ? 'Lesson Preview' : course.title}
\r\n\r\n
\r\n {isPreviewMode ? lessonTitle : currentLessonTitle}\r\n
\r\n \r\n\r\n
\r\n )}\r\n\r\n {showPreviewCourseModal && (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n history.push(`${rootPath}/lesson-create/${lessonId}`)\r\n }\r\n >\r\n {t('buttons:back_to_lesson')}\r\n \r\n
\r\n \r\n
\r\n \r\n {/* {t('labels:privacy_settings')} \r\n \r\n \r\n
\r\n \r\n {!isAdmin && (\r\n \r\n {t('labels:course')}\r\n \r\n )}\r\n {isAdmin && (\r\n \r\n {t('labels:course')}\r\n \r\n )}\r\n
*/}\r\n \r\n
\r\n {t('v4:publish_options')}
\r\n\r\n {types.map(type => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n {type.name === 'Marketplace' && type.disabled ? (\r\n \r\n \r\n \r\n ) : (\r\n this.onClick(type.id)}\r\n disabled={type.disabled}\r\n >\r\n {type.name}\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n \r\n {list.map(organization => {\r\n const { id, title, logo } = organization\r\n const isActive = selectedOrganizations.includes(id)\r\n return (\r\n
\r\n )\r\n })}\r\n \r\n this.handleChange(id, e)}\r\n >\r\n \r\n \r\n {logo ? (\r\n {title} \r\n
\r\n \r\n {this.getFirstLetter(title)}\r\n
\r\n )}\r\n \r\n {filteredList.map(organization => {\r\n const { groups = [], id, logo, title } = organization\r\n const selectedOrgGroups = groups.filter(i =>\r\n selectedGroups.includes(i.id)\r\n )\r\n const checkedOrganization =\r\n selectedOrgGroups.length === groups.length\r\n const indeterminateOrganizationsStatus =\r\n selectedOrgGroups.length &&\r\n selectedOrgGroups.length < groups.length\r\n\r\n return (\r\n \r\n Cancel\r\n ,\r\n \r\n Confirm\r\n \r\n ]}\r\n >\r\n
\r\n \r\n )}\r\n \r\n )\r\n })}\r\n \r\n \r\n this.openModal(organization)}\r\n >\r\n \r\n \r\n {logo ? (\r\n {title} \r\n
\r\n\r\n {modalVisible &&\r\n modalOrganization &&\r\n modalOrganization.id === organization.id && (\r\n \r\n {this.getFirstLetter(title)}\r\n
\r\n )}\r\n \r\n {groups.map(group => (\r\n \r\n this.handleChange(group.id)}\r\n >\r\n
\r\n \r\n ))}\r\n \r\n {t('labels:privacy_settings')} \r\n
\r\n )\r\n}\r\n\r\nexport default Description\r\n","import React, { Component, Fragment } from 'react'\r\nimport moment from 'moment'\r\nimport _ from 'lodash'\r\nimport { Page } from './styled'\r\nimport { Field } from '../../../../../styles'\r\nimport {\r\n DatePicker,\r\n PrivacySelector,\r\n OrganizationPicker,\r\n GroupPicker\r\n} from './components'\r\nimport { Input, Checkbox, Button, Spin, message, Modal, Col, Form } from 'antd'\r\nimport history from '../../../../../history'\r\nimport { withTranslation, Trans } from 'react-i18next'\r\nimport { general } from '../../../../../constants'\r\nimport { api } from '../../../../../services'\r\nimport ReactSVG from 'react-svg'\r\nimport './styles.scss'\r\nimport Description from './components/Description/Description'\r\n\r\nclass PublishSettings extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n selectedType: [0],\r\n startValue: moment(),\r\n endValue: null,\r\n selectedOrganizations: [],\r\n selectedGroups: [],\r\n emails: [],\r\n isEmailsValid: false,\r\n checkedTerms: false,\r\n isAdminOnly: false,\r\n isDisable: true,\r\n isPublish: false,\r\n isSendMail: false,\r\n isCheckModal: false,\r\n isNotExist: [],\r\n isNotInOrg: [],\r\n enableMarketplace: false\r\n }\r\n this.handleInsertUsers = _.debounce(this.handleInsertUsers, 1000)\r\n this.handleCheckUser = _.debounce(this.handleCheckUser, 500)\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n courseBuilder: { courseExpDate, courseStartDate },\r\n get,\r\n courses: { courseById }\r\n } = this.props\r\n if (courseStartDate) {\r\n this.setState(\r\n {\r\n startValue: moment(courseStartDate),\r\n endValue: courseExpDate && moment(courseExpDate)\r\n },\r\n () => {\r\n this.getOldSetting(courseById)\r\n }\r\n )\r\n }\r\n if (get) {\r\n get()\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (prevProps !== this.props) {\r\n console.log('updateworkedforsettings :>> ')\r\n this.checkEnableMarketPlace()\r\n const {\r\n courseBuilder: { courseExpDate, courseStartDate },\r\n courses: { courseById }\r\n } = this.props\r\n if (\r\n courseStartDate !== prevProps.courseBuilder.courseStartDate &&\r\n courseStartDate\r\n ) {\r\n this.setState(\r\n {\r\n startValue: moment(courseStartDate),\r\n endValue: courseExpDate && moment(courseExpDate)\r\n },\r\n () => {\r\n this.getOldSetting(courseById)\r\n }\r\n )\r\n }\r\n }\r\n }\r\n\r\n checkEnableMarketPlace = () => {\r\n const {\r\n courseBuilder: {\r\n courseId,\r\n courseTitle,\r\n courseImg,\r\n courseOrganiser,\r\n courseCategory,\r\n courseIsFree,\r\n courseMarketPlaceDescription,\r\n courseNoOfLessons,\r\n courseNoOfVideos,\r\n courseObjectives,\r\n // courseOrganization,\r\n courseOutline,\r\n coursePrice,\r\n // courseGroup,\r\n courseVideoLink\r\n }\r\n } = this.props\r\n let data = {\r\n courseId,\r\n courseTitle,\r\n courseImgId: courseImg.id,\r\n courseOrganiser,\r\n courseCategory,\r\n courseIsFree,\r\n courseMarketPlaceDescription,\r\n courseNoOfVideos,\r\n courseObjectives,\r\n // courseOrganization,\r\n courseOutline,\r\n courseNoOfLessons,\r\n ...(!courseIsFree && { coursePrice }),\r\n // courseGroup,\r\n courseVideoLink\r\n }\r\n let errorData = Object.keys(data).filter(k => {\r\n return data[k] === '' || data[k] === undefined || data[k] === null\r\n })\r\n\r\n console.log('errorData :>> ', errorData)\r\n\r\n if (errorData.length === 0) {\r\n this.setState({\r\n enableMarketplace: true\r\n })\r\n }\r\n }\r\n\r\n getOldSetting = courseById => {\r\n const {\r\n item: { setting }\r\n } = courseById\r\n if (setting) {\r\n const {\r\n group_ids,\r\n publish_option,\r\n organization_ids,\r\n emails,\r\n is_admin_only: isAdminOnly\r\n } = setting\r\n\r\n if (publish_option === general.ORGANIZATION_AND_MARKETPLACE) {\r\n this.setState({ selectedType: [2, 5] })\r\n } else if (publish_option === general.ORGANIZATION) {\r\n this.handleSelectedType(2)\r\n } else if (publish_option === general.ORGANIZATION_GROUP) {\r\n this.handleSelectedType(3)\r\n } else if (publish_option === general.SPECIFIC_USER) {\r\n this.handleSelectedType(4)\r\n } else if (publish_option === general.PUBLIC) {\r\n this.handleSelectedType(1)\r\n } else if (publish_option === general.MARKETPLACE) {\r\n this.handleSelectedType(5)\r\n }\r\n this.handleInsertUsers(_.uniq(emails).join('\\n'))\r\n this.setState({\r\n selectedOrganizations: organization_ids,\r\n selectedGroups: group_ids,\r\n emails,\r\n isAdminOnly\r\n })\r\n }\r\n }\r\n\r\n getLastOption = () => {\r\n if (this.checkSelectedType(2) && this.checkSelectedType(5)) {\r\n return general.ORGANIZATION_AND_MARKETPLACE\r\n } else if (this.checkSelectedType(1)) {\r\n return general.PUBLIC\r\n } else if (this.checkSelectedType(2)) {\r\n return general.ORGANIZATION\r\n } else if (this.checkSelectedType(3)) {\r\n return general.ORGANIZATION_GROUP\r\n } else if (this.checkSelectedType(5)) {\r\n return general.MARKETPLACE\r\n } else {\r\n return general.SPECIFIC_USER\r\n }\r\n }\r\n\r\n checkSelectedType = id => this.state.selectedType.some(item => item === id)\r\n\r\n handlePublish = () => {\r\n const {\r\n courseBuilder: {\r\n courseId,\r\n courseTitle,\r\n courseDescription,\r\n courseImg,\r\n courseTags,\r\n courseOrganiser,\r\n courseCategory,\r\n courseIsFree,\r\n courseMarketPlaceDescription,\r\n courseNoOfLessons,\r\n courseNoOfVideos,\r\n courseObjectives,\r\n // courseOrganization,\r\n courseOutline,\r\n coursePrice,\r\n courseLang,\r\n courseVideoLink,\r\n coursePassScore,\r\n courseBadgeId,\r\n courseCertId,\r\n courseEmails,\r\n courseShareProfile,\r\n coursePriceToEdit,\r\n courseEditPermission\r\n },\r\n update,\r\n t,\r\n user: {\r\n info: { username, bio, linkedin }\r\n },\r\n resetCourseById\r\n } = this.props\r\n\r\n const {\r\n selectedOrganizations,\r\n selectedGroups,\r\n emails,\r\n isEmailsValid,\r\n startValue,\r\n endValue,\r\n isAdminOnly: is_admin_only,\r\n isSendMail\r\n } = this.state\r\n\r\n const removedSpaceEmail = _.map(emails, email => email.trim().toLowerCase())\r\n\r\n let privacy = {\r\n is_public: this.checkSelectedType(1),\r\n is_admin_only: this.checkSelectedType(1) ? is_admin_only : false,\r\n organization_ids: selectedOrganizations,\r\n group_ids: selectedGroups,\r\n emails: _.uniq([...removedSpaceEmail]),\r\n publish_option: this.getLastOption(),\r\n is_marketplace: this.checkSelectedType(5)\r\n }\r\n\r\n console.log('cloprivacy', privacy)\r\n\r\n const data = {\r\n title: courseTitle,\r\n description: courseDescription,\r\n organiser: courseOrganiser,\r\n topics: courseTags,\r\n cover_id: courseImg.id,\r\n start_date: startValue,\r\n pass_score: coursePassScore,\r\n exp_date: endValue,\r\n cert_id: courseCertId,\r\n badge_id: courseBadgeId,\r\n lang: courseLang,\r\n ...(courseCategory && {\r\n marketplace: {\r\n course_id: courseId,\r\n username: username,\r\n category_id: courseCategory,\r\n is_free: courseIsFree,\r\n price: coursePrice,\r\n video_link: courseVideoLink,\r\n no_of_video: courseNoOfVideos,\r\n no_of_lesson: Number(courseNoOfLessons),\r\n course_obj: courseObjectives,\r\n course_outline: courseOutline,\r\n course_description: courseMarketPlaceDescription,\r\n is_shared_profile: courseShareProfile,\r\n price1: !coursePriceToEdit ? 1 : coursePriceToEdit,\r\n edit_permission: courseEditPermission,\r\n bio,\r\n linkedin\r\n }\r\n }),\r\n isSendMail,\r\n privacy,\r\n host_emails: courseEmails\r\n }\r\n\r\n console.log('clopublishdata :>> ', data)\r\n\r\n if (!startValue) {\r\n message.error(t('dates_validation_error'))\r\n return\r\n }\r\n\r\n if (!_.isEmpty(emails) && !isEmailsValid) {\r\n message.error(t('emails_validation_error'))\r\n return\r\n }\r\n\r\n if (update) {\r\n update(data, courseId).then(() => {\r\n resetCourseById()\r\n history.push('/courses/' + courseId)\r\n })\r\n }\r\n }\r\n\r\n handleSelectedDate = (field, value) => {\r\n this.setState({\r\n [field]: value\r\n })\r\n }\r\n\r\n handleSelectedType = id => {\r\n const { selectedType } = this.state\r\n\r\n // selectedType changed to array to add the usecase of multiple select of marketplace and organization in publish settings\r\n\r\n if (\r\n id === 1 ||\r\n id === 3 ||\r\n id === 4 ||\r\n selectedType[0] === 1 ||\r\n selectedType[0] === 3 ||\r\n selectedType[0] === 4\r\n ) {\r\n this.setState({\r\n selectedType: [id]\r\n })\r\n } else if (selectedType.some(i => i === id)) {\r\n this.setState({\r\n selectedType:\r\n selectedType.length === 1\r\n ? [id]\r\n : selectedType.filter(item => item !== id)\r\n })\r\n } else {\r\n this.setState({\r\n selectedType: [...selectedType, id]\r\n })\r\n }\r\n }\r\n\r\n handleSelectedOrganizations = id => {\r\n const { selectedOrganizations } = this.state\r\n\r\n if (selectedOrganizations.includes(id)) {\r\n this.setState({\r\n selectedOrganizations: selectedOrganizations.filter(\r\n organizationId => organizationId !== id\r\n )\r\n })\r\n } else {\r\n this.setState({\r\n selectedOrganizations: [...selectedOrganizations, id]\r\n })\r\n }\r\n }\r\n\r\n handleSelectedGroups = groupId => {\r\n const { selectedGroups } = this.state\r\n\r\n this.setState({\r\n selectedGroups: selectedGroups.includes(groupId)\r\n ? selectedGroups.filter(i => i !== groupId)\r\n : selectedGroups.concat([groupId])\r\n })\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n const {\r\n courseBuilder: { courseStartDate, courseExpDate }\r\n } = this.props\r\n const {\r\n courseBuilder: {\r\n courseStartDate: nextStartDate,\r\n courseExpDate: nextExpDate\r\n }\r\n } = nextProps\r\n\r\n if (!courseStartDate && nextStartDate) {\r\n this.setState({ startValue: moment(nextStartDate) })\r\n }\r\n\r\n if (!courseExpDate && nextExpDate) {\r\n this.setState({ endValue: moment(nextExpDate) })\r\n }\r\n }\r\n\r\n handleSelectedAllOrganizations = id => {\r\n const { list } = this.props\r\n const { selectedGroups } = this.state\r\n\r\n const { groups = [] } = list.find(i => i.id === id)\r\n const groupIds = groups.map(i => i.id)\r\n\r\n const selectedOrgGroups = groupIds.filter(i => selectedGroups.includes(i))\r\n\r\n if (groupIds.length === selectedOrgGroups.length) {\r\n this.setState({\r\n selectedGroups: selectedGroups.filter(\r\n i => !selectedOrgGroups.includes(i)\r\n )\r\n })\r\n } else {\r\n this.setState({\r\n selectedGroups: selectedGroups\r\n .filter(i => !groupIds.includes(i))\r\n .concat(groupIds)\r\n })\r\n }\r\n }\r\n\r\n handleChangeTerms = () => {\r\n const { isPublish } = this.state\r\n if (!isPublish) {\r\n this.setState(state => ({\r\n checkedTerms: !state.checkedTerms,\r\n isDisable: !state.isDisable\r\n }))\r\n }\r\n }\r\n\r\n checkedPublishButtonDisabling = () => {\r\n this.setState({\r\n isDisable: true,\r\n isPublish: true\r\n })\r\n }\r\n\r\n handleInsertUsers = value => {\r\n const emails = value.replace(/(\\r\\n|\\n|\\r)/gm, ',').split(',')\r\n const check = _.map(_.compact(emails), email =>\r\n /^\\w+([.-]?\\w+)*@\\w+([.-]?\\w+)*(\\.\\w{2,3})+$/.test(email.trim())\r\n )\r\n const isSetValid = _.filter(check, item => item)\r\n if (isSetValid.length === check.length) {\r\n this.setState({\r\n emails: value\r\n .trim()\r\n .split('\\n')\r\n .filter(i => !!i),\r\n isEmailsValid: true\r\n })\r\n } else {\r\n this.setState({\r\n emails: value\r\n .trim()\r\n .split('\\n')\r\n .filter(i => !!i),\r\n isEmailsValid: false\r\n })\r\n }\r\n }\r\n\r\n onSendEmail = () => {\r\n this.setState(state => ({\r\n isSendMail: !state.isSendMail\r\n }))\r\n }\r\n\r\n handleCheckUser = () => {\r\n this.setState({\r\n isSaving: true\r\n })\r\n const { emails } = this.state\r\n if (!_.isEmpty(emails)) {\r\n if (this.state.isEmailsValid) {\r\n const removedSpaceEmail = _.map(emails, email => email.trim())\r\n const myJSON = JSON.stringify(removedSpaceEmail)\r\n const {\r\n user: {\r\n info: { active_organization_id: activeOrganization }\r\n }\r\n } = this.props\r\n api.events\r\n .checkUser(myJSON)\r\n .then(response => {\r\n const { data } = response\r\n const isNotExist = data.filter(email => !email.is_exist)\r\n const isNotInOrg = data.filter(\r\n email => email.is_exist && !email.in_organization\r\n )\r\n this.checkPersonalSpace(activeOrganization, isNotExist, isNotInOrg)\r\n })\r\n .catch(error => {\r\n const { t } = this.props\r\n message.error(t('emails_validation_error'))\r\n })\r\n } else {\r\n const { t } = this.props\r\n message.error(t('emails_validation_error'))\r\n }\r\n } else {\r\n this.handlePublish()\r\n }\r\n }\r\n checkPersonalSpace = (activeOrganization, isNotExist, isNotInOrg) => {\r\n if (activeOrganization) {\r\n if (_.isEmpty(isNotExist) && _.isEmpty(isNotInOrg)) {\r\n this.handlePublish()\r\n } else {\r\n this.setState({\r\n isCheckModal: true,\r\n isNotExist,\r\n isNotInOrg,\r\n isLoading: false\r\n })\r\n }\r\n } else {\r\n if (_.isEmpty(isNotExist)) {\r\n this.handlePublish()\r\n } else {\r\n this.setState({\r\n isCheckModal: true,\r\n isNotExist,\r\n isNotInOrg: [],\r\n isLoading: false\r\n })\r\n }\r\n }\r\n }\r\n\r\n handleSendEmail = () => {\r\n this.handlePublish()\r\n this.setState({\r\n isCheckModal: false,\r\n isNotExist: [],\r\n isNotInOrg: []\r\n })\r\n }\r\n\r\n closeCheckModal = () => {\r\n const inputHost = document.getElementById('emails')\r\n if (inputHost) {\r\n inputHost.focus()\r\n }\r\n this.setState({\r\n isCheckModal: false\r\n })\r\n }\r\n\r\n onAdminOnly = () => {\r\n this.setState(state => ({\r\n isAdminOnly: !state.isAdminOnly\r\n }))\r\n }\r\n\r\n render() {\r\n const {\r\n list,\r\n isFetching,\r\n user: {\r\n info: { isAdmin, isSuperAdmin, id, stripe_connect }\r\n },\r\n courses: {\r\n courseById: {\r\n isFetching: isItemFetching,\r\n item: { host_ids = [] }\r\n }\r\n },\r\n courseBuilder: {\r\n courseTitle,\r\n courseDescription,\r\n courseCategory,\r\n courseMarketPlaceDescription,\r\n courseObjectives,\r\n coursePrice,\r\n courseVideoLink,\r\n coursePassScore,\r\n courseType\r\n },\r\n rootPath,\r\n t\r\n } = this.props\r\n const {\r\n selectedType,\r\n selectedOrganizations,\r\n selectedGroups,\r\n startValue,\r\n endValue,\r\n checkedTerms,\r\n emails,\r\n isDisable,\r\n isAdminOnly,\r\n isSendMail,\r\n isCheckModal,\r\n isNotExist,\r\n isNotInOrg\r\n } = this.state\r\n\r\n const userCanEditCourse = host_ids.find(item => item === id)\r\n\r\n const privacyTypes = [\r\n isSuperAdmin && {\r\n id: 1,\r\n name: 'Public',\r\n description: 'PublicDescription'\r\n },\r\n (isSuperAdmin || isAdmin || userCanEditCourse) && {\r\n id: 2,\r\n name: 'Organisations',\r\n description: 'OrganisationsDescription'\r\n },\r\n (isSuperAdmin || isAdmin || userCanEditCourse) && {\r\n id: 3,\r\n name: 'Organisation Groups',\r\n description: 'OrganisationGroupsDescription'\r\n },\r\n {\r\n id: 4,\r\n name: 'Specific User',\r\n description: 'SpecificUserDescription'\r\n },\r\n {\r\n id: 5,\r\n name: 'Marketplace',\r\n description: 'MarketPlaceDescription',\r\n disabled: !this.state.enableMarketplace\r\n // && stripe_connect &&\r\n // !stripe_connect.status\r\n }\r\n ].filter(i => !!i)\r\n\r\n const filteredList = _.isEmpty(list)\r\n ? []\r\n : userCanEditCourse\r\n ? list\r\n : list.filter(i => isSuperAdmin || (i.role && i.role.name === 'Admin'))\r\n\r\n return (\r\n \r\n {!isAdmin && (\r\n \r\n {t('labels:course')}\r\n \r\n )}\r\n {isAdmin && (\r\n \r\n {t('labels:course')}\r\n \r\n )}\r\n
\r\n \r\n
\r\n {t('title')}
\r\n {t('course_subtitle')}
\r\n \r\n
\r\n\r\n {selectedType.some(item => item > 0) && (\r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n {this.checkSelectedType(2) && (\r\n \r\n \r\n )}\r\n\r\n {this.checkSelectedType(3) && (\r\n \r\n \r\n )}\r\n {this.checkSelectedType(4) && (\r\n \r\n \r\n {t('labels:users_emails')} \r\n \r\n \r\n this.handleInsertUsers(e.target.value)\r\n }\r\n defaultValue={emails.join('\\n')}\r\n />\r\n \r\n \r\n {t('labels:description_specifiction_email')}\r\n \r\n \r\n \r\n )}\r\n {this.checkSelectedType(5) && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {t('labels:disclaimer')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('i_agree_to_these')}\r\n \r\n {t('terms_and_conditions')}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n {t('labels:check_user')}\r\n
\r\n \r\n }\r\n onCancel={this.closeCheckModal}\r\n footer={[\r\n ,\r\n \r\n \r\n {!_.isEmpty(isNotExist) &&\r\n isNotExist.map((item, index) => (\r\n
\r\n \r\n )}\r\n {!_.isEmpty(isNotInOrg) && (\r\n {t('labels:user_not_exist')}
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n \r\n {!_.isEmpty(isNotInOrg) &&\r\n isNotInOrg.map((item, index) => (\r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n {t('labels:user_not_exist_in_org')}\r\n
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n
\r\n \r\n {this.checkSelectedType(1) && (\r\n
\r\n \r\n \r\n {general.admin_only}\r\n \r\n
\r\n )}\r\n {(this.checkSelectedType(2) || this.checkSelectedType(3)) && (\r\n \r\n \r\n {general.send_email}\r\n \r\n
\r\n )}\r\n\r\n \r\n history.push(`${rootPath}`)}\r\n >\r\n {t('buttons:back_to_course')}\r\n \r\n
\r\n \r\n \r\n {t('buttons:publish_course')}\r\n \r\n
\r\n {this.urlify(item)}
\r\n })\r\n }\r\n return null\r\n }\r\n\r\n renderEditMessage = () => {\r\n return (\r\n{item}
\r\n })\r\n }\r\n\r\n renderEditNote = () => {\r\n return (\r\n{t('loading')}
\r\n //\r\n {index + 1} \r\n\r\n {title} \r\n\r\n {isSuperAdmin && (\r\n \r\n downloadingLessonId ? null : App.downloadLesson(id)\r\n }\r\n />\r\n )}\r\n
\r\n\r\n {!!percent && (\r\n \r\n {unreadDiscussions > 0 && (\r\n
\r\n \r\n\r\n {lessons &&\r\n LessonSection(\r\n App,\r\n lessons,\r\n activeLessonId,\r\n t,\r\n downloadingLessonId,\r\n isSuperAdmin\r\n )}\r\n \r\n
\r\n )}\r\n {title}
\r\n{topics}
\r\n\r\n
\r\n \r\n window.open(item.link, '_blank').focus()}>\r\n {t('v3:view')}\r\n \r\n\r\n download(item.link, item.title)}\r\n />\r\n
\r\n \r\n ))\r\n ) : (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Attachment\r\n","import Attachment from './Attachment'\r\n\r\nexport default Attachment\r\n","import React, { Component } from 'react'\r\nimport { Icon, Input, Button } from 'antd'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nclass Poll extends Component {\r\n addQuestion = () => {\r\n const { addQuestion } = this.props\r\n addQuestion()\r\n }\r\n\r\n deleteQuestion = async (index) => {\r\n const { deleteQuestion, savePoll } = this.props\r\n\r\n if (deleteQuestion) {\r\n await deleteQuestion(index)\r\n await savePoll()\r\n }\r\n }\r\n\r\n addAnswer = (rootIndex) => {\r\n const { addAnswer } = this.props\r\n\r\n if (addAnswer) {\r\n addAnswer(rootIndex)\r\n }\r\n }\r\n\r\n deleteAnswer = async (rootIndex, index) => {\r\n const { deleteAnswer, savePoll } = this.props\r\n\r\n if (deleteAnswer) {\r\n await deleteAnswer(rootIndex, index)\r\n await savePoll()\r\n }\r\n }\r\n\r\n handleQuestion = (index, e) => {\r\n const { handleQuestion } = this.props\r\n\r\n if (handleQuestion) {\r\n const value = e.target.value || ''\r\n handleQuestion(index, value)\r\n }\r\n }\r\n\r\n handleAnswer = (rootIndex, index, e) => {\r\n const { handleAnswer } = this.props\r\n\r\n if (handleAnswer) {\r\n const value = e.target.value || ''\r\n handleAnswer(rootIndex, index, value)\r\n }\r\n }\r\n\r\n savePoll = () => {\r\n const { savePoll } = this.props\r\n\r\n if (savePoll) {\r\n savePoll()\r\n }\r\n }\r\n\r\n render () {\r\n const { data, t } = this.props\r\n\r\n return (\r\n {t('v4:attachment_event')}
\r\n\r\n {data.map(d => (\r\n
\r\n \r\n handleDelete(d.id)}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n \r\n {' '}\r\n \r\n \r\n
\r\n ))}\r\n {d.filename}
\r\n \r\n \r\n {t('v2:add_poll')}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default withTranslation()(Poll)\r\n","import Poll from './Poll'\r\n\r\nexport default Poll\r\n","/*\r\n * @Author: your name\r\n * @Date: 2019-11-28 10:55:23\r\n * @LastEditTime: 2019-11-28 10:55:32\r\n * @LastEditors: your name\r\n * @Description: In User Settings Edit\r\n * @FilePath: /frontend/src/views/Events/Details/styled.js\r\n */\r\n\r\nimport { Icon } from 'antd'\r\nimport styled from 'styled-components'\r\nimport { Button } from 'antd'\r\nimport { styleguide } from '../../../constants'\r\nimport { Filter } from '../../../components'\r\nimport { Head, Container } from '../../../styles'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst DropzoneLoading = styled(Icon)`\r\n && {\r\n font-size: 3.6rem;\r\n color: ${colors.blue};\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n margin-top: 12.8rem;\r\n }\r\n`\r\n\r\nconst modal_style = {\r\n overflow: 'auto',\r\n top: 0,\r\n left: 0,\r\n bottom: 0,\r\n right: 0\r\n}\r\n\r\n\r\nconst Page = styled.div`\r\n padding: 4rem 3.2rem;\r\n`\r\n\r\nPage.Head = styled(Head)`\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 0;\r\n`\r\n\r\nPage.Head.Button = styled(Button)`\r\n && {\r\n height: 4rem;\r\n padding: 0 4rem;\r\n &:not(:last-child) {\r\n margin-right: 1.5rem;\r\n }\r\n }\r\n`\r\nPage.Head.Search = styled.div`\r\n margin-right: 2rem;\r\n width: 450px;\r\n display: flex;\r\n align-items: center;\r\n .rounded-select{\r\n min-width: 140px;\r\n .ant-select-selection--single{\r\n display: flex;\r\n align-items: center;\r\n height: 4rem;\r\n padding: 0 4rem;\r\n border-radius: 50px;\r\n color: #fff;\r\n background-color: #0068FF;\r\n border-color: #0068FF;\r\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);\r\n -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);\r\n box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);\r\n padding: 0 10px;\r\n }\r\n svg{\r\n fill: white;\r\n }\r\n }\r\n`\r\nPage.Container = styled(Container)``\r\n\r\nconst Column = styled.div``\r\nconst Row = styled.div`\r\n flex-direction: row;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 0 auto;\r\n`\r\n\r\nPage.Filter = styled(Filter)`\r\n && {\r\n justify-content: flex-start;\r\n }\r\n`\r\n\r\nexport { modal_style, DropzoneLoading, Page, Row, Column }\r\n","import Header from './Header'\r\n\r\nexport default Header\r\n","import React from 'react'\r\nimport { Button } from 'antd'\r\nimport './header.scss'\r\n\r\nconst Header = props => {\r\n const { t, isEventMarketPlace, onToggleMarketPlace, eventId } = props\r\n console.log('eventId', eventId)\r\n return (\r\n <>\r\n {t('labels:poll')}
\r\n {data.map((poll, idx) => (\r\n \r\n {t('labels:question')}\r\n {idx > 0 &&\r\n
\r\n ))}\r\n this.deleteQuestion(idx)}>\r\n {t('v2:delete_poll')}\r\n {/*
\r\n }\r\n \r\n this.handleQuestion(idx, e)}\r\n />\r\n
\r\n \r\n \r\n {t('labels:answers')}\r\n
\r\n \r\n {poll.answers && poll.answers.map((answer, index) => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n this.handleAnswer(idx, index, e)}\r\n />\r\n
\r\n this.deleteAnswer(idx, index)}>\r\n
\r\n \r\n {this.addAnswer(idx)}}>\r\n {t('buttons:add_answer')}\r\n \r\n
\r\n \r\n
\r\n \r\n {t('title')}\r\n {isEventMarketPlace ? ' ( Marketplace )' : ''}\r\n
\r\n {t('subtitle')}
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default TopSection\r\n","import { Typography } from 'antd'\r\nimport React, { useState } from 'react'\r\n\r\nimport './switch.scss'\r\nconst { Text } = Typography\r\n\r\nconst Switch = ({ label, onChanged, value = false }) => {\r\n const [isOn, setIsOn] = useState(value)\r\n const toggleSwitch = () => {\r\n setIsOn(prev => !prev)\r\n onChanged(!isOn)\r\n }\r\n return (\r\n \r\n \r\n {getFieldDecorator('encoder_type', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('errors:select_broadcast_option')\r\n }\r\n ],\r\n initialValue: current.encoder\r\n })(\r\n \r\n !_.isArray(option.props.children) &&\r\n option.props.children\r\n .toLowerCase()\r\n .indexOf(input.toLowerCase()) >= 0\r\n }\r\n >\r\n {Object.keys(broadcastOptions).map(item => (\r\n \r\n {t(`broadcastOptions:${item}`)}\r\n \r\n ))}\r\n \r\n )}\r\n \r\n \r\n \r\n {getFieldDecorator('title', {\r\n rules: [\r\n {\r\n required: true,\r\n max: 320\r\n }\r\n ],\r\n initialValue: current.title\r\n })(\r\n onFieldChange(val)}\r\n />\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n {getFieldDecorator('host', {\r\n initialValue:\r\n current.host && current.host.email\r\n ? current.host.email\r\n : email\r\n ? email\r\n : emails[0]\r\n })()}\r\n \r\n \r\n \r\n {getFieldDecorator('category', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('v4:select_category')\r\n }\r\n ],\r\n initialValue: current.marketplace.category_id\r\n })(\r\n onFieldChange(val)}\r\n loading={isFetchingCategories}\r\n >\r\n {categories &&\r\n categories.map(category => (\r\n \r\n {category.children &&\r\n category.children.map(option => (\r\n
\r\n \r\n {label && (\r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default Switch\r\n","import Switch from './switch'\r\n\r\nexport default Switch\r\n","import React, { useState, useEffect } from 'react'\r\nimport { Col, Form, Input, Select } from 'antd'\r\nimport Switch from '../../../../components/Switch'\r\nimport { regions } from '../../../../constants'\r\nimport _ from 'lodash'\r\n\r\nconst BottomSection = props => {\r\n const {\r\n t,\r\n form: { getFieldDecorator },\r\n current,\r\n current: { marketplace },\r\n onFieldChange,\r\n handleSwitch\r\n } = props\r\n\r\n const [freeStatus, setfreeStatus] = useState(false)\r\n\r\n const onSwitchChange = val => {\r\n setfreeStatus(val)\r\n handleSwitch(val)\r\n }\r\n\r\n useEffect(() => {\r\n if (typeof marketplace.is_free === 'boolean')\r\n setfreeStatus(marketplace.is_free)\r\n }, [])\r\n\r\n return (\r\n \r\n {label.toUpperCase()} \r\n
\r\n )}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default BottomSection\r\n","import React, { Component } from 'react'\r\nimport { Spin, Select, Tag, Checkbox, Button } from 'antd'\r\nimport _ from 'lodash'\r\nimport { Page } from './styled'\r\nimport { api } from '../../../services'\r\nimport { Search } from '../../../components'\r\nexport default class ShowContactsModal extends Component {\r\n state = {\r\n isFetching: false,\r\n users: [],\r\n search: '',\r\n searchType: 'search',\r\n inviteList: [],\r\n isGroupSelected: false,\r\n selectedGroupId: null\r\n }\r\n\r\n componentDidMount() {\r\n this.setUsers()\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n const { selectedEmails } = this.props\r\n if (selectedEmails !== prevProps.selectedEmails && selectedEmails) {\r\n this.setUsers()\r\n }\r\n }\r\n\r\n setUsers = () => {\r\n const {\r\n groupOptions: { groups },\r\n selectedEmails\r\n } = this.props\r\n this.setState(\r\n {\r\n isFetching: true,\r\n selectedGroupId: groups[0] ? groups[0].title : '',\r\n users: selectedEmails,\r\n inviteList: selectedEmails\r\n },\r\n () => {\r\n this.getAllUsers()\r\n }\r\n )\r\n return null\r\n }\r\n\r\n getAllUsers = () => {\r\n const { active_organization_id, selectedEmails } = this.props\r\n api.organizations\r\n .getUsersByOrganizationId(active_organization_id)\r\n .then(res => {\r\n res.data.forEach(val => {\r\n this.setState(state => {\r\n if (val.user && !selectedEmails.includes(val.user.email)) {\r\n const emailList = [...state.users, val.user.email]\r\n return {\r\n users: emailList,\r\n isFetching: false\r\n }\r\n }\r\n })\r\n })\r\n })\r\n }\r\n\r\n onSearch = _.debounce(\r\n value =>\r\n this.setState(\r\n {\r\n search: value,\r\n page: 1\r\n },\r\n () => {\r\n this.fetchData(true)\r\n }\r\n ),\r\n 1000\r\n )\r\n\r\n addUser = e => {\r\n const { value, checked } = e.target\r\n this.setState(prevState => {\r\n const prevList = prevState.inviteList\r\n if (!prevList.includes(value) && checked) {\r\n return {\r\n inviteList: [...prevList, value]\r\n }\r\n }\r\n return {\r\n inviteList: prevList.filter(p => p !== value)\r\n }\r\n })\r\n }\r\n\r\n handleInvite = () => {\r\n const { inviteList } = this.state\r\n const { addEmails } = this.props\r\n addEmails(inviteList)\r\n // setTimeout(() => {\r\n // this.setState({inviteList:[], users: []})\r\n // }, 2000);\r\n }\r\n\r\n fetchData = () => {\r\n const { active_organization_id, selectedEmails } = this.props\r\n const searchValue = this.state.search\r\n const searchType = this.state.searchType\r\n if (searchValue) {\r\n this.setState({ isFetching: true, users: selectedEmails }, () => {\r\n return api.organizations\r\n .searchUsersInOrganization({\r\n orgId: active_organization_id,\r\n searchType,\r\n searchValue\r\n })\r\n .then(res => {\r\n if (res.data) {\r\n res.data.forEach(val => {\r\n this.setState(state => {\r\n if (val.user && !selectedEmails.includes(val.user.email)) {\r\n const emailList = [...state.users, val.user.email]\r\n return {\r\n users: emailList,\r\n isFetching: false,\r\n search: ''\r\n }\r\n }\r\n })\r\n })\r\n }\r\n return {\r\n users: selectedEmails,\r\n isFetching: false,\r\n search: ''\r\n }\r\n })\r\n })\r\n }\r\n if (!searchValue && searchType === 'search') {\r\n this.setState({ isFetching: true, users: selectedEmails }, () => {\r\n this.getAllUsers()\r\n })\r\n }\r\n }\r\n\r\n handleSearchType = type => {\r\n if (type === 'name') {\r\n this.setState(\r\n {\r\n searchType: 'searchByname',\r\n isGroupSelected: false\r\n },\r\n () => this.fetchData()\r\n )\r\n } else if (type === 'id') {\r\n this.setState(\r\n {\r\n searchType: 'searchById',\r\n isGroupSelected: false\r\n },\r\n () => this.fetchData()\r\n )\r\n } else if (type === 'email') {\r\n this.setState(\r\n {\r\n searchType: 'searchByemail',\r\n isGroupSelected: false\r\n },\r\n () => this.fetchData()\r\n )\r\n } else if (type === 'group') {\r\n const { selectedGroupId } = this.state\r\n this.setState(\r\n {\r\n searchType: 'group',\r\n isGroupSelected: true,\r\n search: selectedGroupId\r\n }\r\n // () => this.fetchData()\r\n )\r\n } else {\r\n this.setState(\r\n {\r\n searchType: 'search',\r\n isGroupSelected: false,\r\n isFetching: true,\r\n users: []\r\n },\r\n () => this.getAllUsers()\r\n )\r\n }\r\n }\r\n\r\n handleSearchGroupType = groupId => {\r\n this.setState(\r\n {\r\n search: groupId,\r\n selectedGroupId: groupId,\r\n page: 1\r\n },\r\n () => {\r\n this.fetchData(true)\r\n }\r\n )\r\n }\r\n\r\n render() {\r\n const { isFetching, users, isGroupSelected, inviteList } = this.state\r\n const { groupOptions, t } = this.props\r\n return (\r\n \r\n \r\n {getFieldDecorator('video_link', {\r\n rules: [{ required: true, message: t('v4:input_video_link') }],\r\n initialValue: marketplace.video_link\r\n })(\r\n onFieldChange(e.target.value)}\r\n />\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n {getFieldDecorator('location', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('errors:live_location')\r\n }\r\n ],\r\n initialValue: current.broadcast_location\r\n })(\r\n \r\n !_.isArray(option.props.children) &&\r\n option.props.children\r\n .toLowerCase()\r\n .indexOf(input.toLowerCase()) >= 0\r\n }\r\n >\r\n {regions.map(continent => (\r\n \r\n {Object.keys(continent.list).map(item => (\r\n \r\n {t(`regions:${item}`)}\r\n \r\n ))}\r\n \r\n ))}\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n {getFieldDecorator('is_free', {\r\n initialValue: marketplace.is_free\r\n })(\r\n onSwitchChange(e)}\r\n />\r\n )}\r\n \r\n \r\n {getFieldDecorator('price', {\r\n initialValue: marketplace.price,\r\n rules: [\r\n {\r\n validator: (rule, value) => value >= 5,\r\n required: false,\r\n message: t('v4:enter_price')\r\n }\r\n ]\r\n })(\r\n onFieldChange(e.target.value)}\r\n disabled={freeStatus}\r\n />\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {getFieldDecorator('description', {\r\n initialValue: current.description\r\n })(\r\n onFieldChange(e.target.value)}\r\n style={{ fontSize: '1.6rem', resize: 'none' }}\r\n />\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {t('reports:all')} \r\n {t('reports:name')} \r\n \r\n {t('reports:id_number')}\r\n \r\n \r\n {t('reports:email')}\r\n \r\n {t('v4:group')} \r\n \r\n {isGroupSelected && (\r\n \r\n \r\n {t('v4:select_group')}\r\n \r\n {groupOptions.groups.map(g => (\r\n {g.title} \r\n ))}\r\n \r\n )}\r\n this.onSearch(e.target.value)}\r\n />\r\n \r\n \r\n \r\n {users && users.length > 0 ? (\r\n users.map(u => (\r\n \r\n \r\n {u}\r\n \r\n \r\n ))\r\n ) : (\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n","import React, { Component, Fragment } from 'react'\r\nimport {\r\n Button,\r\n Form,\r\n Icon,\r\n Input,\r\n message,\r\n Modal,\r\n Select,\r\n Spin,\r\n Switch,\r\n Tabs,\r\n Alert\r\n} from 'antd'\r\nimport { SearchOutlined } from '@ant-design/icons'\r\nimport { Col, Row } from '../../../styles'\r\nimport moment from 'moment'\r\nimport Dropzone from 'react-dropzone'\r\nimport ImageCropContainer from '../../../components/ImageCrop'\r\nimport Attachment from './Attachment'\r\nimport className from 'classnames'\r\nimport history from '../../../history'\r\nimport _ from 'lodash'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { api } from '../../../services'\r\nimport Poll from './Poll'\r\nimport { broadcastOptions, general, regions, config } from '../../../constants'\r\nimport { PopupMedia } from '../../../views/Library/internal'\r\nimport Preview from '../../../views/Library/components/Preview'\r\nimport { DropzoneLoading, modal_style } from './styled'\r\nimport { bytesToSize } from '../../../utils'\r\nimport CreatableSelect from 'react-select/creatable'\r\nimport './styles.scss'\r\nimport debounce from 'lodash/debounce'\r\nimport Header from './Header'\r\nimport { TopSection, BottomSection } from './Marketplace'\r\nimport TrainerSection from '../../../components/TrainerSection'\r\nimport ShowContactsModal from './ShowContactsModal'\r\nconst { Option } = Select\r\n\r\nclass Details extends Component {\r\n _isMounted = false\r\n constructor(props) {\r\n super(props)\r\n this.loadOptions = _.debounce(this.loadOptions, 500)\r\n this.lastFetchId = 0\r\n this.fetchUserEmails = debounce(this.fetchUserEmails, 1000)\r\n this.state = {\r\n isFetching: true,\r\n isSaving: false,\r\n coverId: null,\r\n coverLink: null,\r\n validate: false,\r\n isLoading: false,\r\n no_of_people_conf: 'uptoTen',\r\n current: {\r\n id: null,\r\n title: '',\r\n email: '',\r\n description: '',\r\n broadcast_location: '',\r\n topics: [],\r\n topic_list: [],\r\n is_chat: true,\r\n is_poll: false,\r\n is_recording: false,\r\n no_of_people_conf: null,\r\n poll: [\r\n {\r\n question: '',\r\n answers: ['']\r\n }\r\n ],\r\n marketplace: {\r\n category_id: null,\r\n video_link: '',\r\n price: null\r\n },\r\n encoder: '',\r\n host_emails: [],\r\n host_ids: [],\r\n attachments: []\r\n },\r\n options: [],\r\n value: [],\r\n inputValue: '',\r\n isTopicLoading: false,\r\n image: null, // your-image-url or as base64\r\n file: null,\r\n isTopicsMax: false,\r\n isImageLoading: false,\r\n isBroadcast: false,\r\n isConference: false,\r\n emails: [],\r\n isHostsLenExceed: false,\r\n isEdit: false,\r\n emailList: [],\r\n fetching: false,\r\n timezone: '',\r\n is_free: null,\r\n pdfFiles: [],\r\n filenames: [],\r\n attachmentIds: [],\r\n toSelectFile: false,\r\n toTranscribe: false,\r\n transcribeLocale: '',\r\n showTranscribe: false,\r\n isEventMarketPlace: false,\r\n publish: false,\r\n showContactModal: false,\r\n hasError: false\r\n }\r\n }\r\n\r\n createOptionList = list => {\r\n const options = list.map(topic => this.createOption(topic))\r\n this.setState({\r\n options,\r\n isTopicLoading: false\r\n })\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n clearUploadList,\r\n match: { params }\r\n } = this.props\r\n const { id } = params\r\n clearUploadList()\r\n if (id) {\r\n this.getEventsData()\r\n } else {\r\n this.setState({\r\n isFetching: false\r\n })\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const { emails } = this.state\r\n if (emails !== prevState.emails && emails) {\r\n const no_of_people_conf =\r\n emails && emails.length > 0 && emails.length === 10\r\n ? 'uptoTen'\r\n : emails.length > 10 || emails.length === 20\r\n ? 'uptoTwenty'\r\n : emails.length > 20 || emails.length === 25\r\n ? 'uptoTwentyFive'\r\n : 'uptoTen'\r\n this.setState({ no_of_people_conf })\r\n this.props.form.setFieldsValue({ no_of_people_conf })\r\n }\r\n }\r\n\r\n getEventsData = () => {\r\n this._isMounted = true\r\n const id = this.props.match.params.id || this.state.current.id || null\r\n\r\n api.events\r\n .getById(id)\r\n .then(response => {\r\n if (this._isMounted) {\r\n const cover = response.data.cover ? response.data.cover.link : ''\r\n this.setCover(response.data.cover_id, cover)\r\n const {\r\n data: { topics, attachments }\r\n } = response\r\n const isBroadcast =\r\n response.data.encoder === 'wowza_gocoder' ||\r\n response.data.encoder === 'other_webrtc' ||\r\n response.data.encoder === 'stream_from_phone'\r\n const isConference =\r\n response.data.encoder === 'conference' ||\r\n response.data.encoder === 'chime_conference'\r\n const emails = response.data.host_emails\r\n ? response.data.host_emails\r\n : []\r\n const no_of_people_conf = emails.length\r\n ? emails.length > 0 && emails.length === 10\r\n ? 'uptoTen'\r\n : emails.length > 10 || emails.length === 20\r\n ? 'uptoTwenty'\r\n : emails.length > 20 || emails.length === 25\r\n ? 'uptoTwentyFive'\r\n : 'uptoTen'\r\n : 'uptoTen'\r\n // : emails.length > 30 && emails.length === 40 ? 'uptoForty' : 'uptoTen' : 'uptoTen'\r\n // const encoder = response.data.encoder === 'conference' || response.data.encoder === 'chime_conference' ? 'conference' : response.data.encoder\r\n // const toTranscribe = response.data.is_transcribed\r\n // const transcribeLocale = response.data.transcribe_locale ? response.data.transcribe_locale : ''\r\n // const showTranscribe = response.data.encoder === \"wowza_gocoder\" || response.data.encoder === \"other_webrtc\" ? true : false\r\n this.setState(\r\n {\r\n current: {\r\n ...this.state.current,\r\n ...response.data\r\n },\r\n isFetching: false,\r\n isBroadcast,\r\n isConference,\r\n // toTranscribe,\r\n // transcribeLocale,\r\n // showTranscribe,\r\n emails,\r\n no_of_people_conf,\r\n isEdit: true,\r\n hasError: false\r\n },\r\n () => {\r\n this.getOldTopics(topics)\r\n this.getAttachmentDetail(attachments)\r\n this.showErrorMessageForMarketPlace()\r\n }\r\n )\r\n }\r\n })\r\n .catch(err => {\r\n console.log('error event by id', err)\r\n this.setState({ hasError: true, isEdit: true, isFetching: false })\r\n })\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false\r\n }\r\n\r\n showErrorMessageForMarketPlace = () => {\r\n const { t, form } = this.props\r\n const { isEventMarketPlace, current } = this.state\r\n const eventId = this.props.match.params.id || current.id || null\r\n\r\n if (!eventId) return\r\n if (isEventMarketPlace) return\r\n\r\n form.validateFields((err, values) => {\r\n console.log('values', values)\r\n\r\n const {\r\n marketplace: { category_id, video_link, is_free, price }\r\n } = current\r\n\r\n let isFree =\r\n typeof this.state.is_free === 'boolean'\r\n ? this.state.is_free\r\n : current.marketplace\r\n ? is_free\r\n : false\r\n\r\n const data = {\r\n title: values.title,\r\n category_id: isEventMarketPlace ? values.category : category_id,\r\n video_link: isEventMarketPlace ? values.video_link : video_link,\r\n is_free: isFree,\r\n price: isEventMarketPlace ? Number(values.price) : price,\r\n encoder_type: values.encoder_type,\r\n location: current.broadcast_location\r\n }\r\n\r\n let errorData = Object.keys(data).filter(k => {\r\n if (data[k] === '' || data[k] === undefined || data[k] === null) {\r\n return true\r\n } else {\r\n return false\r\n }\r\n })\r\n\r\n if (errorData.length) {\r\n message.warning(t('v4:not_complete'))\r\n } else {\r\n message.success(t('v4:complete'))\r\n }\r\n })\r\n }\r\n\r\n getAttachmentDetail = ids => {\r\n if (ids && ids.length > 0) {\r\n return ids.forEach(id => {\r\n api.library.getMediaInfoById(id).then(response => {\r\n this.setPDF(response.data)\r\n })\r\n })\r\n }\r\n }\r\n\r\n setPDF = file => {\r\n this.setState(prevState => {\r\n const filterIds = prevState.attachmentIds.filter(i => i !== file.id)\r\n const filterNames = prevState.filenames.filter(i => i.id !== file.id)\r\n return {\r\n attachmentIds: [...filterIds, file.id],\r\n filenames: [...filterNames, file]\r\n }\r\n })\r\n }\r\n\r\n setCover = (id, link) => {\r\n this.setState({\r\n coverId: id,\r\n coverLink: link\r\n })\r\n }\r\n\r\n useCanva = () => {\r\n var script = document.createElement('script')\r\n const url = 'https://sdk.canva.com/designbutton/v2/api.js'\r\n script.src = url\r\n script.onload = () => {\r\n if (window.Canva && window.Canva.DesignButton) {\r\n window.Canva.DesignButton.initialize({\r\n apiKey: config.canvaKey\r\n }).then(api => {\r\n api.createDesign({\r\n design: {\r\n type: 'Presentation'\r\n },\r\n onDesignPublish: ({ exportUrl, designTitle }) => {\r\n this.handleImageUrl(exportUrl, designTitle)\r\n }\r\n })\r\n })\r\n }\r\n }\r\n document.body.appendChild(script)\r\n }\r\n\r\n handleImageUrl = async (url, title) => {\r\n let blob = await fetch(url).then(r => r.blob())\r\n let data = await new Promise(resolve => {\r\n let reader = new FileReader()\r\n reader.onload = () => resolve(reader.result)\r\n reader.readAsDataURL(blob)\r\n })\r\n const body = {\r\n croppedImage: data,\r\n lastModifiedDate: new Date(),\r\n name: title,\r\n size: blob.size,\r\n type: blob.type\r\n }\r\n this.handleUploadImage(body)\r\n }\r\n\r\n handleFileUpload = () => {\r\n this.setState({ toSelectFile: true })\r\n }\r\n\r\n hideAttachModal = () => {\r\n this.setState({ toSelectFile: false })\r\n }\r\n\r\n onHandleDelete = id => {\r\n this.setState(\r\n state => {\r\n const filteredIds = state.attachmentIds.filter(i => i !== id)\r\n const filteredFiles = state.filenames.filter(i => i.id !== id)\r\n return {\r\n attachmentIds: filteredIds,\r\n filenames: filteredFiles\r\n }\r\n },\r\n () => {\r\n this.handleParam()\r\n }\r\n )\r\n }\r\n\r\n onDropPdf = dropped => {\r\n const file = dropped[0]\r\n const { pdfFiles } = this.state\r\n if (!file) {\r\n return\r\n }\r\n const { clearUploadList } = this.props\r\n const { upload } = this.props\r\n const newFiles = pdfFiles.concat(dropped)\r\n return this.setState(\r\n {\r\n toSelectFile: false,\r\n modalOpen: false,\r\n pdfFiles: newFiles\r\n },\r\n () => {\r\n dropped.forEach(file => {\r\n upload(file)\r\n .then(response => {\r\n this.setPDF(response)\r\n })\r\n .then(() => {\r\n this.handleParam()\r\n clearUploadList()\r\n })\r\n })\r\n }\r\n )\r\n }\r\n\r\n checkedCompletUpload = item => {\r\n const { uploadSuccess } = this.props.library\r\n const filterSuccessFiles = _.filter(\r\n uploadSuccess,\r\n ele => ele.id === item.id\r\n )\r\n return !(uploadSuccess.length && filterSuccessFiles.length)\r\n }\r\n\r\n handleInsertFile = ({ rows: privateData }, publicMedia, orgMedia) => {\r\n let tempData = privateData\r\n\r\n if (publicMedia) {\r\n const { rows: publicData } = publicMedia\r\n tempData = [...privateData, ...publicData]\r\n }\r\n\r\n if (orgMedia) {\r\n const { rows: orgData } = orgMedia\r\n tempData = [...privateData, ...orgData]\r\n }\r\n let array = tempData\r\n .filter(t => t.isSelected)\r\n .map(file => this.setPDF(file))\r\n Promise.all(array).then(() => {\r\n this.handleParam()\r\n this.setState({ toSelectFile: false, modalOpen: false })\r\n })\r\n }\r\n\r\n handleRemoveSelected = () => {\r\n this.setState({ attachmentIds: [], filenames: [] })\r\n }\r\n\r\n handleForm = () => {\r\n const {\r\n form,\r\n user: {\r\n info: {\r\n username,\r\n organization: { media_service }\r\n }\r\n }\r\n } = this.props\r\n // let activeOrgInfo = {}\r\n\r\n const {\r\n current,\r\n coverId,\r\n value,\r\n emails,\r\n attachmentIds,\r\n publish,\r\n isEventMarketPlace,\r\n isBroadcast\r\n } = this.state\r\n const {\r\n marketplace: { category_id, video_link, is_free, price }\r\n } = current\r\n\r\n const id = this.props.match.params.id || current.id || null\r\n this.setState({\r\n validate: true\r\n })\r\n form.validateFields((err, values) => {\r\n console.log(\r\n 'values log event detail',\r\n values,\r\n 'err',\r\n err,\r\n 'state',\r\n this.state\r\n )\r\n if (!coverId) {\r\n return\r\n }\r\n\r\n if (_.isEmpty(value)) {\r\n return\r\n }\r\n\r\n if (!err) {\r\n let isFree =\r\n typeof this.state.is_free === 'boolean'\r\n ? this.state.is_free\r\n : current.marketplace\r\n ? is_free\r\n : false\r\n let encoderType =\r\n values.encoder_type === 'conference'\r\n ? media_service === 'CHIME'\r\n ? 'chime_conference'\r\n : values.encoder_type\r\n : values.encoder_type\r\n\r\n const data = {\r\n title: values.title,\r\n description: values.description,\r\n location: values.location,\r\n host: values.host,\r\n topics: _.map(value, 'id'),\r\n cover_id: coverId,\r\n marketplace: {\r\n category_id: isEventMarketPlace ? values.category : category_id,\r\n video_link: isEventMarketPlace ? values.video_link : video_link,\r\n is_free: isFree,\r\n price: isEventMarketPlace ? Number(values.price) : price,\r\n username: username\r\n },\r\n no_of_people_conf: Number(values.no_of_people_conf),\r\n is_chat: values.is_chat,\r\n is_recording: isBroadcast\r\n ? true\r\n : values.is_recording || current.is_recording,\r\n is_poll: values.is_poll,\r\n poll: current.poll,\r\n encoder_type: encoderType,\r\n is_transcribed: current.is_transcribed,\r\n transcribe_locale: current.transcribe_locale,\r\n host_emails: emails,\r\n attachments: attachmentIds\r\n }\r\n this.setState({\r\n isSaving: true\r\n })\r\n if (current.cover_id && id) {\r\n api.events\r\n .updateById(id, data)\r\n .then(() => {\r\n this.getEventsData()\r\n // this.setState(\r\n // {\r\n // isLoading: false,\r\n // isSaving: false,\r\n // current: {\r\n // ...this.state.current,\r\n // ...response.data\r\n // }\r\n // },\r\n // () => {\r\n if (publish) history.push('/events/' + id + '/settings')\r\n // }\r\n // )\r\n })\r\n .catch(error => {\r\n message.error(error.response.data.errorMessage)\r\n\r\n this.setState({\r\n isSaving: false,\r\n isLoading: false\r\n })\r\n })\r\n } else {\r\n api.events.create(data).then(response =>\r\n this.setState({\r\n isSaving: false,\r\n isLoading: false,\r\n current: {\r\n ...this.state.current,\r\n ...response.data\r\n }\r\n })\r\n )\r\n }\r\n }\r\n })\r\n }\r\n\r\n handleChangeLocale = value => {\r\n this.setState(\r\n {\r\n transcribeLocale: value\r\n },\r\n () => {\r\n this.handleParam()\r\n }\r\n )\r\n }\r\n\r\n handleChangeOption = value => {\r\n // if (value === 'multihost') {\r\n // this.setState(\r\n // {\r\n // isMultiHost: true,\r\n // emails: [],\r\n // isHostsLenExceed: false,\r\n // isConference: false,\r\n // showTranscribe: false,\r\n // toTranscribe: false,\r\n // transcribeLocale: ''\r\n // },\r\n // () => {\r\n // this.handleParam()\r\n // }\r\n // )\r\n // } else\r\n if (value === 'conference') {\r\n return this.setState(\r\n {\r\n isBroadcast: false,\r\n emails: [],\r\n isHostsLenExceed: false,\r\n isConference: true,\r\n showTranscribe: false,\r\n toTranscribe: false,\r\n transcribeLocale: ''\r\n },\r\n () => {\r\n this.handleParam()\r\n }\r\n )\r\n } else if (\r\n value === 'wowza_gocoder' ||\r\n value === 'other_webrtc' ||\r\n value === 'stream_from_phone'\r\n ) {\r\n return this.setState(\r\n {\r\n showTranscribe: true,\r\n isBroadcast: true,\r\n isConference: false\r\n },\r\n () => {\r\n this.handleParam()\r\n }\r\n )\r\n }\r\n return this.setState(\r\n {\r\n isBroadcast: false,\r\n isConference: false,\r\n showTranscribe: false,\r\n toTranscribe: false,\r\n transcribeLocale: ''\r\n },\r\n () => {\r\n this.handleParam()\r\n }\r\n )\r\n }\r\n\r\n handleSubmitForm = () => {\r\n this.setState(\r\n {\r\n isLoading: true,\r\n publish: true\r\n },\r\n () => {\r\n this.handleForm()\r\n }\r\n )\r\n }\r\n\r\n handleCheckTranscribe = value => {\r\n if (!value) {\r\n this.setState({ transcribeLocale: '' })\r\n }\r\n this.setState({ toTranscribe: value }, () => {\r\n this.handleParam()\r\n })\r\n }\r\n\r\n handleParam = _.debounce(param => {\r\n // if (param === 'host' || param === true) {\r\n if (param === 'host') {\r\n return\r\n }\r\n this.handleForm()\r\n }, 1000)\r\n\r\n handleSwitch = val => {\r\n this.setState(\r\n {\r\n is_free: val\r\n },\r\n () => this.handleForm()\r\n )\r\n }\r\n\r\n onDrop = dropped => {\r\n const file = dropped[0]\r\n if (!file) {\r\n return\r\n }\r\n const image = URL.createObjectURL(file)\r\n this.setState({\r\n file,\r\n image\r\n })\r\n }\r\n\r\n addPoll = () => {\r\n this.setState(state => ({\r\n current: {\r\n ...state.current,\r\n poll: [\r\n ...state.current.poll,\r\n {\r\n question: '',\r\n answers: ['']\r\n }\r\n ]\r\n }\r\n }))\r\n }\r\n\r\n deletePoll = index => {\r\n this.setState(state => ({\r\n current: {\r\n ...state.current,\r\n poll: state.current.poll.filter((item, i) => i !== index)\r\n }\r\n }))\r\n }\r\n\r\n addAnswer = rootIndex => {\r\n const arrPoll = this.state.current.poll\r\n const newPoll = arrPoll.map((item, i) => {\r\n if (i === rootIndex) {\r\n item.answers = item.answers ? [...item.answers, ''] : ['']\r\n }\r\n return item\r\n })\r\n this.setState(state => ({\r\n current: {\r\n ...state.current,\r\n poll: newPoll\r\n }\r\n }))\r\n }\r\n\r\n deleteAnswer = (rootIndex, index) => {\r\n const arrPoll = this.state.current.poll\r\n const newPoll = arrPoll.map((item, i) => {\r\n if (i === rootIndex) {\r\n item.answers = item.answers.filter((a, j) => j !== index)\r\n }\r\n return item\r\n })\r\n this.setState(state => ({\r\n current: {\r\n ...state.current,\r\n poll: newPoll\r\n }\r\n }))\r\n }\r\n\r\n handleQuestion = (index, value) => {\r\n const arrPoll = this.state.current.poll\r\n const newPoll = arrPoll.map((item, i) => {\r\n if (i === index) {\r\n item.question = value\r\n }\r\n return item\r\n })\r\n this.setState(state => ({\r\n current: {\r\n ...state.current,\r\n poll: newPoll\r\n }\r\n }))\r\n }\r\n\r\n handleAnswer = (rootIndex, index, value) => {\r\n const arrPoll = this.state.current.poll\r\n const newPoll = arrPoll.map((item, i) => {\r\n if (i === rootIndex) {\r\n item.answers = item.answers.map((a, j) =>\r\n j === index ? (a = value) : a\r\n )\r\n }\r\n return item\r\n })\r\n this.setState(state => ({\r\n current: {\r\n ...state.current,\r\n poll: newPoll\r\n }\r\n }))\r\n }\r\n\r\n getOldTopics = topics => {\r\n const {\r\n topics: { list: topicList, isFetching }\r\n } = this.props\r\n if (!isFetching && !_.isEmpty(topicList)) {\r\n const topic = topics.map(item =>\r\n _.head(topicList.filter(topic => topic.id === item))\r\n )\r\n const newValue = topic.map(item => item && this.createOption(item))\r\n this.setState({\r\n value: newValue\r\n })\r\n }\r\n }\r\n\r\n handleChange = (newValue, actionMeta) => {\r\n if (actionMeta.removedValue) {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n this.handleParam()\r\n }\r\n )\r\n } else if (!_.isEmpty(newValue) && newValue.length > 5) {\r\n this.setState({\r\n isTopicsMax: true\r\n })\r\n } else {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n this.handleParam()\r\n }\r\n )\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n handleCreate = inputValue => {\r\n this.setState({ isTopicLoading: true })\r\n const { options, value } = this.state\r\n const topic = { title: inputValue }\r\n if (!_.isEmpty(value) && value.length >= 3) {\r\n this.setState({\r\n isTopicsMax: true,\r\n isTopicLoading: false\r\n })\r\n } else {\r\n api.topics.createTopics(topic).then(({ data }) => {\r\n if (!_.isEmpty(data[0])) {\r\n const newOption = this.createOption(data[0])\r\n this.props.updateTopicList(data[0])\r\n this.setState(\r\n {\r\n isTopicLoading: false,\r\n isTopicsMax: false,\r\n options: [...options, newOption],\r\n value: [...value, newOption],\r\n inputValue: ''\r\n },\r\n () => {\r\n this.handleParam()\r\n }\r\n )\r\n }\r\n })\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n createOption = topic => {\r\n return {\r\n label: topic.title,\r\n value: topic.title,\r\n id: topic.id\r\n }\r\n }\r\n\r\n loadOptions = inputValue => {\r\n if (inputValue.length > 0 && inputValue.length <= 50) {\r\n this.setState({\r\n isTopicLoading: true\r\n })\r\n const params = {\r\n search: inputValue.trim(),\r\n limit: 10,\r\n offset: 0\r\n }\r\n api.topics.getTopics(params).then(({ data }) => {\r\n this.setState({\r\n inputValue\r\n })\r\n this.createOptionList(data)\r\n })\r\n }\r\n }\r\n\r\n LoadingIndicator = () => (\r\n {t('v2:no_user_found')}
\r\n )}\r\n \r\n this.handleInvite()}\r\n >\r\n {t('v2:invite')}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('buttons:save_for_later')}\r\n \r\n
\r\n \r\n \r\n {t('buttons:publish')}
\r\n \r\n
\r\n {selectedItem && (\r\n \r\n \r\n {t('labels:cancel')}\r\n \r\n this.handleFileInsert(selectedItem)}\r\n >\r\n {t('labels:insert')}\r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n {toSelectFile && (\r\n \r\n \r\n {t('v4:upload_pdf')}\r\n \r\n {\r\n e.stopPropagation()\r\n this.setState({\r\n modalOpen: true\r\n })\r\n }}\r\n >\r\n {t('buttons:select_media_library')}\r\n \r\n {\r\n e.stopPropagation()\r\n this.useCanva()\r\n }}\r\n >\r\n {t('v4:canva')}\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n )}\r\n \r\n {!isAdmin && (\r\n \r\n {t('labels:event')}\r\n \r\n )}\r\n {isAdmin && (\r\n \r\n {t('labels:event')}\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n If you wish to change your monthly live-streaming limit please\r\n contact\r\n \r\n \r\n admin@sharelook.com\r\n \r\n \r\n
\r\n )\r\n }\r\n onAdminOnly = () => {\r\n this.setState(state => ({\r\n isAdminOnly: !state.isAdminOnly\r\n }))\r\n }\r\n\r\n handleSpecificType = () => {\r\n console.log('i m called')\r\n this.setState({ isSpecific: true })\r\n }\r\n\r\n fetchUserEmails = value => {\r\n const {\r\n user: {\r\n info: { active_organization_id }\r\n }\r\n } = this.props\r\n console.log('fetching user', value)\r\n this.lastFetchId += 1\r\n const fetchId = this.lastFetchId\r\n this.setState({ emailList: [], fetching: true })\r\n api.organizations\r\n .getUsersByOrganizationId(active_organization_id)\r\n .then(res => {\r\n console.log('response org users: ', res.data)\r\n if (fetchId !== this.lastFetchId) {\r\n // for fetch callback order\r\n return null\r\n }\r\n res.data.forEach(val => {\r\n if (val.user) {\r\n console.log('user check', val.user.email)\r\n const dataValue = {\r\n text: val.user.email,\r\n value: val.user.email\r\n }\r\n this.setState(state => {\r\n if (dataValue.value.includes(value)) {\r\n const emailList = [...state.emailList, dataValue]\r\n return {\r\n emailList,\r\n fetching: false\r\n }\r\n }\r\n })\r\n }\r\n })\r\n })\r\n }\r\n\r\n handleChange = selectedValue => {\r\n console.log('selectedValue check', selectedValue)\r\n this.setState({\r\n selectedValue,\r\n emails: [selectedValue.key],\r\n emailList: [],\r\n fetching: false\r\n })\r\n }\r\n\r\n handleChangeLocale = value => {\r\n console.log('locale', value)\r\n this.setState({\r\n transcribeLocale: value\r\n })\r\n }\r\n\r\n render() {\r\n const {\r\n list,\r\n isFetching,\r\n events: { isSaving },\r\n user: {\r\n info: { isAdmin, isSuperAdmin }\r\n },\r\n t,\r\n match: {\r\n params: { id }\r\n }\r\n } = this.props\r\n const {\r\n selectedType,\r\n selectedOrganizations,\r\n selectedGroups,\r\n eventTime,\r\n eventDuration,\r\n checkedTerms,\r\n isFetching: isEventFetching,\r\n emails,\r\n error,\r\n error_message,\r\n isDisable,\r\n isCheckModal,\r\n isNotExist,\r\n isNotInOrg,\r\n isOverLimit,\r\n errorData,\r\n isAdminOnly,\r\n isSendMail,\r\n current: { encoder, is_recording },\r\n isSpecific,\r\n is_host_only,\r\n selectedValue,\r\n fetching,\r\n emailList,\r\n toTranscribe,\r\n transcribeLocale\r\n } = this.state\r\n\r\n console.log('isDisable: ', isDisable)\r\n console.log('transcribeLocale render: ', transcribeLocale)\r\n\r\n const rootPath = `/events/${id}/edit`\r\n const privacyTypes = [\r\n isSuperAdmin && {\r\n id: 1,\r\n name: 'Public',\r\n description: 'PublicDescription'\r\n },\r\n (isSuperAdmin || isAdmin) && {\r\n id: 2,\r\n name: t('v4:organisations'),\r\n description: 'OrganisationsDescription'\r\n },\r\n (isSuperAdmin || isAdmin) && {\r\n id: 3,\r\n name: t('v4:org_groups'),\r\n description: 'OrganisationGroupsDescription',\r\n disabled: is_host_only\r\n },\r\n {\r\n id: 4,\r\n name: t('v4:specific_user'),\r\n description: 'SpecificUserDescription',\r\n disabled: encoder !== 'peer2peer' ? true : false\r\n },\r\n {\r\n id: 5,\r\n name: t('labels:Marketplace'),\r\n description: 'MarketPlaceDescription',\r\n disabled: !this.state.isMarketPlaceEnabled\r\n }\r\n ].filter(i => !!i)\r\n\r\n const specificTypes = [\r\n {\r\n id: 1,\r\n name: t('v4:specific_user'),\r\n description: 'SpecificUserDescription'\r\n }\r\n ]\r\n\r\n const filteredList =\r\n !_.isEmpty(list) &&\r\n list.filter(i => isSuperAdmin || (i.role && i.role.name === 'Admin'))\r\n\r\n return (\r\n {errorData.title}.
\r\n {errorData.subTitle && {errorData.subTitle}.
}\r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n {t('title')}
\r\n {t('event_subtitle')}
\r\n \r\n
\r\n )}\r\n {isOverLimit && (\r\n \r\n
\r\n )}\r\n\r\n \r\n {t('labels:check_user')}\r\n
\r\n \r\n }\r\n onCancel={this.closeCheckModal}\r\n footer={[\r\n ,\r\n \r\n \r\n {!_.isEmpty(isNotExist) &&\r\n isNotExist.map((item, index) => (\r\n
\r\n \r\n )}\r\n {!_.isEmpty(isNotInOrg) && (\r\n {t('labels:user_not_exist')}
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n \r\n {!_.isEmpty(isNotInOrg) &&\r\n isNotInOrg.map((item, index) => (\r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n {t('labels:user_not_exist_in_org')}\r\n
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n
\r\n \r\n {selectedType === 1 && (\r\n
\r\n \r\n \r\n {t('v4:admin_only')}\r\n \r\n
\r\n )}\r\n {(selectedType === 2 || selectedType === 3) && (\r\n \r\n \r\n {t('v4:send_email')}\r\n \r\n
\r\n )}\r\n \r\n history.push(`${rootPath}`)}\r\n >\r\n {t('buttons:back_to_details')}\r\n \r\n
\r\n \r\n \r\n {t('buttons:publish_event')}\r\n \r\n
\r\n {t('poll_disabled')}
\r\n }\r\n\r\n return (\r\n <>\r\n {data.map((item, idx) => (\r\n \r\n
\r\n \r\n ))}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withTranslation('events')(Poll)\r\n","import React, { Component } from 'react'\r\nimport './Poll.scss'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { CheckCircleOutlined } from '@ant-design/icons'\r\n\r\nclass CurrentPoll extends Component {\r\n state = {\r\n isVoted: false,\r\n votedArray: [],\r\n votedAnsIndex: null,\r\n votedQuestion: null\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n const { pollValues, currentPoll, askedPolls } = this.props\r\n if (prevProps.pollValues !== pollValues && pollValues) {\r\n this.setVotedArray(pollValues)\r\n }\r\n if (prevProps.currentPoll !== currentPoll && currentPoll) {\r\n this.setState({ votedAnsIndex: null })\r\n }\r\n if (prevProps.askedPolls !== askedPolls && askedPolls) {\r\n this.setState({ votedAnsIndex: null })\r\n }\r\n }\r\n\r\n setVotedArray = polls => {\r\n const pollVoted = polls.map(p => {\r\n if (p.is_voted) {\r\n return JSON.parse(p.q)\r\n }\r\n return null\r\n })\r\n\r\n this.setState({ votedArray: pollVoted })\r\n }\r\n\r\n onClick = (rootIndex, index) => {\r\n const { onClick } = this.props\r\n const { votedArray } = this.state\r\n if (onClick && !votedArray.includes(rootIndex)) {\r\n this.setState(\r\n prevState => ({\r\n votedArray: [...prevState.votedArray, rootIndex],\r\n votedAnsIndex: index,\r\n votedQuestion: rootIndex\r\n }),\r\n () => {\r\n onClick(rootIndex, index)\r\n // console.log('onclick answer', rootIndex, 'idx ans', index, 'votedArray', this.state.votedArray)\r\n }\r\n )\r\n }\r\n }\r\n\r\n render() {\r\n const { votedArray, votedQuestion, votedAnsIndex } = this.state\r\n const {\r\n available,\r\n data,\r\n pollValues,\r\n userPollValues,\r\n t,\r\n canVote,\r\n askedPolls,\r\n currentAskedPoll,\r\n isFinished\r\n } = this.props\r\n // console.log(`this.propscurrent`, this.props)\r\n const votedQuestions = pollValues.map(a => {\r\n return JSON.parse(a.q)\r\n })\r\n const currentPoll =\r\n currentAskedPoll !== null\r\n ? data.filter((p, i) => i === currentAskedPoll)[0]\r\n : null\r\n const pollAnswer =\r\n currentAskedPoll !== null\r\n ? pollValues.filter(p => JSON.parse(p.q) === currentAskedPoll)[0]\r\n : null\r\n const totalCurrentVotes = pollAnswer\r\n ? pollAnswer.votes.reduce((a, i) => {\r\n return a + i.value\r\n }, 0)\r\n : 0\r\n // const isVoted = pollAnswer && pollAnswer.is_voted ? pollAnswer.is_voted : false\r\n // console.log(\r\n // 'current pll',\r\n // data,\r\n // 'pollValues',\r\n // pollValues,\r\n // 'votedArray',\r\n // votedArray,\r\n // 'votedArray.includes(currentAskedPoll)',\r\n // votedArray.includes(currentAskedPoll),\r\n // 'currentAskedPoll',\r\n // currentAskedPoll,\r\n // 'currentPoll',\r\n // currentPoll,\r\n // 'votedQuestions',\r\n // votedQuestions,\r\n // 'pollAnswer',\r\n // pollAnswer,\r\n // 'totalCurrentVotes',\r\n // totalCurrentVotes\r\n // )\r\n if (!available) {\r\n return \r\n {item.question}\r\n {\r\n onAskQuestion(idx)\r\n }}\r\n >\r\n {askedPolls && askedPolls.includes(idx) ? 'Asked' : 'Ask'}\r\n \r\n
\r\n \r\n
\r\n \r\n {pollValues.length > 0 &&\r\n pollValues.map(p => {\r\n if (JSON.parse(p.q) === idx) {\r\n const totalVotes = p.votes.reduce((a, i) => {\r\n return a + i.value\r\n }, 0)\r\n return (\r\n <>\r\n {item.answers.map((answer, index) => {\r\n if (\r\n p.votes.find(i => i.key === index.toString()) &&\r\n totalVotes > 0\r\n ) {\r\n const percent =\r\n (100 / totalVotes) *\r\n p.votes.find(i => i.key === index.toString())\r\n .value\r\n // console.log('answer here', answer, 'index', index, 'pollValues', pollValues, 'totalVotes', totalVotes, 'percent', percent);\r\n return (\r\n \r\n {/* // onClick={() => this.onClick(idx, index)}> */}\r\n
\r\n )\r\n }\r\n return (\r\n \r\n {answer} ({percent.toFixed(0)}%)\r\n
\r\n {/* {isVoted && \r\n {/* onClick={() => this.onClick(idx, index)}> */}\r\n
\r\n )\r\n })}\r\n \r\n )\r\n } else {\r\n return <>\r\n }\r\n })}\r\n {!votedQuestions.includes(idx) &&\r\n item.answers.map((answer, index) => (\r\n \r\n {answer}\r\n
\r\n {/* {(!canVote && votedAnsIndex===index) && \r\n {/* onClick={() => this.onClick(idx, index)}> */}\r\n
\r\n ))}\r\n {answer}
\r\n {/* {(!canVote && votedAnsIndex===index) && {t('poll_disabled')}
\r\n }\r\n\r\n // console.log(\r\n // 'current poll js votedArray',\r\n // votedArray,\r\n // 'isVoted',\r\n // isVoted,\r\n // 'votedAnsIndex',\r\n // votedAnsIndex,\r\n // 'canvote',\r\n // canVote,\r\n // 'votedQuestion',\r\n // votedQuestion\r\n // )\r\n return (\r\n <>\r\n {askedPolls.length === data.length ||\r\n askedPolls.length > data.length ||\r\n isFinished ? (\r\n data.map((item, idx) => {\r\n // const voteArr = pollValues && pollValues.find(i => i.q === idx.toString())\r\n // const hasVoted = voteArr && voteArr.is_voted ? voteArr.is_voted : false\r\n console.log('hasVoted current poll js', idx)\r\n return (\r\n {item.question}
\r\n \r\n \r\n
\r\n )\r\n }\r\n return (\r\n \r\n {pollValues.length > 0 &&\r\n pollValues.map(p => {\r\n if (JSON.parse(p.q) === idx) {\r\n const totalVotes = p.votes.reduce((a, i) => {\r\n return a + i.value\r\n }, 0)\r\n return (\r\n <>\r\n {item.answers.map((answer, index) => {\r\n if (\r\n p.votes.find(\r\n i => i.key === index.toString()\r\n ) &&\r\n totalVotes > 0\r\n ) {\r\n const userVoteArray =\r\n userPollValues &&\r\n userPollValues.map(ua => {\r\n if (ua.q === JSON.parse(p.q)) {\r\n return p.votes.find(i => i.key === ua.a)\r\n .key\r\n // return userPollValues.filter(o1 =>\r\n // p.votes.some(o2 => o1.a === o2.key)\r\n // )[0].a\r\n } else {\r\n return null\r\n }\r\n })\r\n console.log('uservotearray', userVoteArray)\r\n console.log('userPollValues', userPollValues)\r\n const userVote =\r\n userVoteArray &&\r\n userVoteArray.filter(x => x !== undefined)\r\n\r\n const percent =\r\n (100 / totalVotes) *\r\n p.votes.find(\r\n i => i.key === index.toString()\r\n ).value\r\n // console.log(\r\n // 'answer here voted',\r\n // voted,\r\n // 'index',\r\n // index,\r\n // 'votedAnsIndex',\r\n // votedAnsIndex,\r\n // 'answer',\r\n // answer,\r\n // 'percent',\r\n // percent,\r\n // 'isVoted',\r\n // isVoted,\r\n // 'canVote',\r\n // canVote,\r\n // 'userVote',\r\n // userVote\r\n // )\r\n return (\r\n this.onClick(idx, index)}\r\n >\r\n \r\n {answer} ({percent.toFixed(0)}%)\r\n
\r\n \r\n {answer}\r\n
\r\n \r\n )\r\n })}\r\n \r\n )\r\n } else {\r\n return <>\r\n }\r\n })}\r\n {!votedQuestions.includes(idx) &&\r\n item.answers.map((answer, index) => (\r\n \r\n {answer}\r\n
\r\n {!canVote &&\r\n votedAnsIndex === index &&\r\n votedQuestion === idx && (\r\n \r\n {currentPoll && currentPoll.question}\r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n return (\r\n \r\n {currentPoll &&\r\n currentPoll.answers.map((answer, index) => {\r\n if (\r\n pollAnswer &&\r\n pollAnswer.votes.find(i => i.key === index.toString()) &&\r\n totalCurrentVotes > 0\r\n ) {\r\n const userVoteArray =\r\n userPollValues &&\r\n userPollValues.map(ua => {\r\n if (ua.q === currentAskedPoll) {\r\n return pollAnswer.votes.find(i => i.key === ua.a)\r\n .key\r\n // return userPollValues.filter(o1 =>\r\n // pollAnswer.votes.some(o2 => o1.a === o2.key)\r\n // )[0].a\r\n } else {\r\n return null\r\n }\r\n })\r\n const userVote =\r\n userVoteArray &&\r\n userVoteArray.filter(x => x !== undefined)\r\n const percent =\r\n (100 / totalCurrentVotes) *\r\n pollAnswer.votes.find(i => i.key === index.toString())\r\n .value\r\n // console.log('currentPoll poll jsx', voted, index)\r\n // console.log(\r\n // 'answer here voted secondd',\r\n // voted,\r\n // 'index',\r\n // index,\r\n // 'votedAnsIndex',\r\n // votedAnsIndex,\r\n // 'answer',\r\n // answer,\r\n // 'percent',\r\n // percent,\r\n // 'isVoted',\r\n // isVoted,\r\n // 'canVote',\r\n // canVote,\r\n // 'userVote',\r\n // userVote\r\n // )\r\n return (\r\n \r\n this.onClick(JSON.parse(pollAnswer.q), index)\r\n }\r\n >\r\n \r\n {answer} ({percent.toFixed(0)}%)\r\n
\r\n {userVote[0] === index && (\r\n {answer}
\r\n {!canVote &&\r\n votedAnsIndex === index &&\r\n votedQuestion === currentAskedPoll && (\r\n */\r\n","/**\r\n *\r\n * @returns\r\n */\r\n\r\n\r\nexport function WebRTCAdaptor (initialValues) {\r\n class PeerStats {\r\n constructor (streamId) {\r\n this.streamId = streamId\r\n this.totalBytesReceivedCount = 0\r\n this.totalBytesSent = 0\r\n this.packetsLost = 0\r\n this.fractionLost = 0\r\n this.startTime = 0\r\n this.lastBytesReceived = 0\r\n this.lastBytesSent = 0\r\n this.currentTimestamp = 0\r\n this.lastTime = 0\r\n this.timerId = 0\r\n this.firstByteSentCount = 0\r\n this.firstBytesReceivedCount = 0\r\n this.audioLevel = -1\r\n }\r\n\r\n // kbits/sec\r\n get averageOutgoingBitrate () {\r\n return Math.floor(\r\n (8 * (this.totalBytesSentCount - this.firstByteSentCount)) /\r\n (this.currentTimestamp - this.startTime)\r\n )\r\n }\r\n\r\n // kbits/sec\r\n get averageIncomingBitrate () {\r\n return Math.floor(\r\n (8 * (this.totalBytesReceivedCount - this.firstBytesReceivedCount)) /\r\n (this.currentTimestamp - this.startTime)\r\n )\r\n }\r\n\r\n // kbits/sec\r\n get currentOutgoingBitrate () {\r\n return Math.floor(\r\n (8 * (this.totalBytesSentCount - this.lastBytesSent)) /\r\n (this.currentTimestamp - this.lastTime)\r\n )\r\n }\r\n\r\n // kbits/sec\r\n get currentIncomingBitrate () {\r\n return Math.floor(\r\n (8 * (this.totalBytesReceivedCount - this.lastBytesReceived)) /\r\n (this.currentTimestamp - this.lastTime)\r\n )\r\n }\r\n\r\n set currentTime (timestamp) {\r\n this.lastTime = this.currentTimestamp\r\n this.currentTimestamp = timestamp\r\n if (this.startTime === 0) {\r\n this.startTime = timestamp - 1 // do not have zero division error\r\n }\r\n }\r\n\r\n set totalBytesReceived (bytesReceived) {\r\n this.lastBytesReceived = this.totalBytesReceivedCount\r\n this.totalBytesReceivedCount = bytesReceived\r\n if (this.firstBytesReceivedCount === 0) {\r\n this.firstBytesReceivedCount = bytesReceived\r\n }\r\n }\r\n\r\n set totalBytesSent (bytesSent) {\r\n this.lastBytesSent = this.totalBytesSentCount\r\n this.totalBytesSentCount = bytesSent\r\n if (this.firstByteSentCount === 0) {\r\n this.firstByteSentCount = bytesSent\r\n }\r\n }\r\n }\r\n\r\n var thiz = this\r\n thiz.peerconnection_config = null\r\n thiz.sdp_constraints = null\r\n thiz.remotePeerConnection = []\r\n thiz.remotePeerConnectionStats = []\r\n thiz.remoteDescriptionSet = []\r\n thiz.iceCandidateList = []\r\n thiz.webSocketAdaptor = null\r\n thiz.roomName = null\r\n thiz.videoTrackSender = null\r\n thiz.audioTrackSender = null\r\n thiz.playStreamId = []\r\n thiz.micGainNode = null\r\n thiz.localStream = null\r\n thiz.bandwidth = 900 // default bandwidth kbps\r\n thiz.isMultiPeer = false // used for multiple peer client\r\n thiz.multiPeerStreamId = null // used for multiple peer client\r\n\r\n thiz.isPlayMode = false\r\n thiz.debug = false\r\n thiz.mediaConstraints = {}\r\n thiz.streamId = null\r\n thiz.audioStream = null\r\n thiz.publishMode = 'camera' // screen, screen+camera\r\n\r\n /**\r\n * Supported candidate types. Below types are for both sending and receiving candidates.\r\n * It means if when client receives candidate from STUN server, it sends to the server if candidate's protocol\r\n * is in the list. Likely, when client receives remote candidate from server, it adds as ice candidate\r\n * if candidate protocol is in the list below.\r\n */\r\n thiz.candidateTypes = ['udp', 'tcp']\r\n\r\n thiz.desktopStream = null\r\n\r\n thiz.cameraVideoObject = null\r\n\r\n /**\r\n * The cam_location below is effective when camera and screen is send at the same time.\r\n * possible values are top and bottom. It's on right all the time\r\n */\r\n thiz.camera_location = initialValues.cameraLocation === 'bottom' ? 'bottom' : 'top'\r\n\r\n /**\r\n * The cam_margin below is effective when camera and screen is send at the same time.\r\n * This is the margin value in px from the edges\r\n */\r\n thiz.camera_margin = 15\r\n\r\n /**\r\n * Thiz camera_percent is how large the camera view appear on the screen. It's %15 by default.\r\n */\r\n thiz.camera_percent = 15\r\n\r\n for (var key in initialValues) {\r\n if (initialValues.hasOwnProperty(key)) {\r\n this[key] = initialValues[key]\r\n }\r\n }\r\n\r\n thiz.localVideo = document.getElementById(thiz.localVideoId)\r\n thiz.remoteVideo = document.getElementById(thiz.remoteVideoId)\r\n\r\n // It should be compatible previous version\r\n if (thiz.mediaConstraints.video === 'camera') {\r\n thiz.publishMode = 'camera'\r\n } else if (thiz.mediaConstraints.video === 'screen') {\r\n thiz.publishMode = 'screen'\r\n } else if (thiz.mediaConstraints.video === 'screen+camera') {\r\n thiz.publishMode = 'screen+camera'\r\n }\r\n\r\n if (!('WebSocket' in window)) {\r\n console.log('WebSocket not supported.')\r\n thiz.callbackError('WebSocketNotSupported')\r\n return\r\n }\r\n\r\n if (\r\n typeof navigator.mediaDevices === 'undefined' &&\r\n thiz.isPlayMode === false\r\n ) {\r\n console.log(\r\n 'Cannot open camera and mic because of unsecure context. Please Install SSL(https)'\r\n )\r\n thiz.callbackError('UnsecureContext')\r\n return\r\n }\r\n\r\n this.switchDesktopwithCameraSource = function (\r\n stream,\r\n streamId,\r\n audioStream,\r\n onEndedCallback\r\n ) {\r\n thiz.desktopStream = stream\r\n\r\n navigator.mediaDevices\r\n .getUserMedia({ video: true, audio: false })\r\n .then(function (cameraStream) {\r\n // create a canvas element\r\n var canvas = document.createElement('canvas')\r\n var canvasContext = canvas.getContext('2d')\r\n\r\n // create video element for screen\r\n // var screenVideo = document.getElementById('sourceVideo');\r\n var screenVideo = document.createElement('video')\r\n // TODO: check audio track\r\n screenVideo.srcObject = stream\r\n screenVideo.play()\r\n // create video element for camera\r\n var cameraVideo = document.createElement('video')\r\n thiz.cameraVideoObject = cameraVideo\r\n // TODO: check audio track\r\n cameraVideo.srcObject = cameraStream\r\n cameraVideo.play()\r\n var canvasStream = canvas.captureStream(15)\r\n canvasStream.addTrack(audioStream.getAudioTracks()[0])\r\n\r\n if (thiz.localStream === null) {\r\n stream.addTrack(audioStream.getAudioTracks()[0])\r\n thiz.gotStream(canvasStream)\r\n } else {\r\n thiz.switchDesktopSource(\r\n canvasStream,\r\n streamId,\r\n thiz.mediaConstraints,\r\n onended,\r\n null\r\n )\r\n }\r\n\r\n // update the canvas\r\n setInterval(function () {\r\n // draw screen to canvas\r\n canvas.width = screenVideo.videoWidth\r\n canvas.height = screenVideo.videoHeight\r\n canvasContext.drawImage(\r\n screenVideo,\r\n 0,\r\n 0,\r\n canvas.width,\r\n canvas.height\r\n )\r\n\r\n var cameraWidth = screenVideo.videoWidth * (thiz.camera_percent / 100)\r\n var cameraHeight =\r\n (cameraVideo.videoHeight / cameraVideo.videoWidth) * cameraWidth\r\n\r\n var positionX = canvas.width - cameraWidth - thiz.camera_margin\r\n var positionY\r\n\r\n if (thiz.camera_location === 'top') {\r\n positionY = thiz.camera_margin\r\n } else {\r\n // if not top, make it bottom\r\n // draw camera on right bottom corner\r\n positionY = canvas.height - cameraHeight - thiz.camera_margin\r\n }\r\n canvasContext.drawImage(\r\n cameraVideo,\r\n positionX,\r\n positionY,\r\n cameraWidth,\r\n cameraHeight\r\n )\r\n }, 66)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }\r\n\r\n this.stopCanvasVideoStream = () => {\r\n if (thiz.cameraVideoObject !==null) {\r\n console.log(\r\n 'turnOffLocalCamera if cameraVideoObject',\r\n thiz.cameraVideoObject\r\n )\r\n thiz.cameraVideoObject.srcObject.getVideoTracks().forEach(track => {\r\n console.log('i m inside cameraVideoObject', track)\r\n track.stop()\r\n thiz.cameraVideoObject.srcObject.removeTrack(track)\r\n // setTimeout(() => { thiz.closeStream() }, 3000)\r\n })\r\n }\r\n if (thiz.desktopStream !==null) {\r\n console.log('turnOffLocalCamera if desktopStream', thiz.desktopStream)\r\n thiz.desktopStream.getVideoTracks()[0].stop()\r\n }\r\n }\r\n\r\n this.getUserMediaDetail = function (\r\n mediaConstraints,\r\n audioConstraint,\r\n stream\r\n ) {\r\n // this trick, getting audio and video separately, make us add or remove tracks on the fly\r\n var audioTrack = stream.getAudioTracks()\r\n if (audioTrack.length > 0) {\r\n stream.removeTrack(audioTrack[0])\r\n }\r\n\r\n // add callback if desktop is sharing\r\n stream.getVideoTracks()[0].onended = function (event) {\r\n thiz.callback('screen_share_stopped')\r\n thiz.switchVideoSource(thiz.streamId, mediaConstraints, null, true)\r\n }\r\n\r\n // now get only audio to add this stream\r\n if (audioConstraint !== 'undefined' && audioConstraint !== false) {\r\n let media_audio_constraint = { audio: audioConstraint }\r\n navigator.mediaDevices\r\n .getUserMedia(media_audio_constraint)\r\n .then(audioStream => {\r\n if (thiz.publishMode === 'screen') {\r\n this.stopCanvasVideoStream()\r\n thiz.switchDesktopSource(\r\n stream,\r\n thiz.streamId,\r\n mediaConstraints,\r\n onended,\r\n true\r\n )\r\n } else if (thiz.publishMode === 'screen+camera') {\r\n this.stopCanvasVideoStream()\r\n thiz.switchDesktopwithCameraSource(\r\n stream,\r\n thiz.streamId,\r\n audioStream,\r\n onended\r\n )\r\n } else {\r\n stream.addTrack(audioStream.getAudioTracks()[0])\r\n thiz.gotStream(stream)\r\n }\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n } else {\r\n stream.addTrack(thiz.audioStream.getAudioTracks()[0])\r\n thiz.gotStream(stream)\r\n }\r\n }\r\n\r\n /**\r\n * Get user media\r\n */\r\n this.getUserMedia = function (mediaConstraints, audioConstraint) {\r\n // Check Media Constraint video value screen or screen + camera\r\n if (thiz.publishMode === 'screen+camera' || thiz.publishMode === 'screen') {\r\n let mediaConstraintsForScreen = {\r\n video: {\r\n 'width': 1280,\r\n 'height': 1024,\r\n 'frameRate': 20\r\n },\r\n audio: true\r\n }\r\n navigator.mediaDevices\r\n .getDisplayMedia(mediaConstraintsForScreen)\r\n .then(function (stream) {\r\n thiz.getUserMediaDetail(mediaConstraintsForScreen, audioConstraint, stream)\r\n })\r\n .catch(function (error) {\r\n if (error.name === 'NotAllowedError') {\r\n console.debug('Permission denied error')\r\n thiz.callbackError('ScreenSharePermissionDenied')\r\n\r\n // Redirect Default Stream Camera\r\n if (thiz.localStream === null) {\r\n var mediaConstraints = {\r\n video: true,\r\n audio: true\r\n }\r\n\r\n thiz.openStream(mediaConstraints)\r\n } else {\r\n thiz.switchVideoCapture(thiz.streamId)\r\n }\r\n } else {\r\n thiz.callbackError(error.name, error.message)\r\n }\r\n })\r\n }\r\n\r\n // If mediaConstraints only user camera\r\n else {\r\n navigator.mediaDevices\r\n .getUserMedia(mediaConstraints)\r\n .then(function (stream) {\r\n thiz.getUserMediaDetail(mediaConstraints, audioConstraint, stream)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }\r\n }\r\n\r\n /**\r\n * Open media stream, it may be screen, camera or audio\r\n */\r\n this.openStream = function (mediaConstraints) {\r\n thiz.mediaConstraints = mediaConstraints\r\n var audioConstraint = false\r\n if (\r\n typeof mediaConstraints.audio !== 'undefined' &&\r\n mediaConstraints.audio !== false\r\n ) {\r\n audioConstraint = mediaConstraints.audio\r\n }\r\n\r\n if (typeof mediaConstraints.video !== 'undefined') {\r\n thiz.getUserMedia(mediaConstraints, audioConstraint)\r\n } else {\r\n console.error('MediaConstraint video is not defined')\r\n thiz.callbackError('media_constraint_video_not_defined')\r\n }\r\n }\r\n\r\n /**\r\n * Closes stream, if you want to stop peer connection, call stop(streamId)\r\n */\r\n\r\n this.closeStream = function () {\r\n console.log('in close stream')\r\n this.closeDesktopStream()\r\n if (thiz.localStream !== null) {\r\n thiz.localStream.getVideoTracks().forEach(function (track) {\r\n track.onended = null\r\n track.stop()\r\n })\r\n\r\n thiz.localStream.getAudioTracks().forEach(function (track) {\r\n track.onended = null\r\n track.stop()\r\n })\r\n }\r\n }\r\n\r\n /**\r\n * Checks browser supports screen share feature\r\n * if exist it calls callback with \"browser_screen_share_supported\"\r\n */\r\n\r\n this.checkBrowserScreenShareSupported = function () {\r\n var callback = function (message) {\r\n if (navigator.mediaDevices.getDisplayMedia || navigator.getDisplayMedia) {\r\n thiz.callback('browser_screen_share_supported')\r\n window.removeEventListener('message', callback)\r\n }\r\n }\r\n\r\n // add event listener for desktop capture\r\n window.addEventListener('message', callback, false)\r\n\r\n window.postMessage('are-you-there', '*')\r\n }\r\n\r\n /*\r\n * Call check browser support. Below function is called when this class is created\r\n */\r\n\r\n thiz.checkBrowserScreenShareSupported()\r\n\r\n /*\r\n * Below lines are executed as well when this class is created\r\n */\r\n if (\r\n !this.isPlayMode &&\r\n typeof thiz.mediaConstraints !== 'undefined' &&\r\n this.localStream === null\r\n ) {\r\n if (\r\n typeof thiz.mediaConstraints.video !== 'undefined' &&\r\n thiz.mediaConstraints.video !== false\r\n ) {\r\n // if it is not play mode and media constraint is defined, try to get user media\r\n if (thiz.mediaConstraints.audio.mandatory) {\r\n // this case captures mic and video(audio(screen audio) + video(screen)) and then provide mute/unmute mic with\r\n // enableMicInMixedAudio\r\n navigator.mediaDevices\r\n .getUserMedia({ audio: true, video: false })\r\n .then(function (micStream) {\r\n navigator.mediaDevices\r\n .getUserMedia(thiz.mediaConstraints)\r\n .then(function (stream) {\r\n // console.debug(\"audio stream track count: \" + audioStream.getAudioTracks().length);\r\n\r\n var audioContext = new AudioContext()\r\n var desktopSoundGainNode = audioContext.createGain()\r\n\r\n desktopSoundGainNode.gain.value = 1\r\n\r\n var audioDestionation = audioContext.createMediaStreamDestination()\r\n var audioSource = audioContext.createMediaStreamSource(stream)\r\n\r\n audioSource.connect(desktopSoundGainNode)\r\n\r\n thiz.micGainNode = audioContext.createGain()\r\n thiz.micGainNode.gain.value = 1\r\n var audioSource2 = audioContext.createMediaStreamSource(\r\n micStream\r\n )\r\n audioSource2.connect(thiz.micGainNode)\r\n\r\n desktopSoundGainNode.connect(audioDestionation)\r\n thiz.micGainNode.connect(audioDestionation)\r\n\r\n stream.removeTrack(stream.getAudioTracks()[0])\r\n audioDestionation.stream\r\n .getAudioTracks()\r\n .forEach(function (track) {\r\n stream.addTrack(track)\r\n })\r\n\r\n console.debug('Running gotStream')\r\n thiz.gotStream(stream)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n } else {\r\n // most of the times, this statement runs\r\n thiz.openStream(thiz.mediaConstraints, thiz.mode)\r\n }\r\n } else {\r\n // get only audio\r\n var media_audio_constraint = { audio: thiz.mediaConstraints.audio }\r\n navigator.mediaDevices\r\n .getUserMedia(media_audio_constraint)\r\n .then(function (stream) {\r\n thiz.gotStream(stream)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }\r\n } else {\r\n // just playing, it does not open any stream\r\n if (\r\n thiz.webSocketAdaptor === null ||\r\n thiz.webSocketAdaptor.isConnected() === false\r\n ) {\r\n thiz.webSocketAdaptor = new WebSocketAdaptor()\r\n }\r\n }\r\n\r\n this.enableMicInMixedAudio = function (enable) {\r\n if (thiz.micGainNode !==null) {\r\n if (enable) {\r\n thiz.micGainNode.gain.value = 1\r\n } else {\r\n thiz.micGainNode.gain.value = 0\r\n }\r\n }\r\n }\r\n\r\n this.publish = function (streamId, token) {\r\n var jsCmd = {\r\n command: 'publish',\r\n streamId: streamId,\r\n token: token,\r\n video: thiz.localStream.getVideoTracks().length > 0,\r\n audio: thiz.localStream.getAudioTracks().length > 0\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.joinRoom = function (roomName, streamId) {\r\n thiz.roomName = roomName\r\n\r\n var jsCmd = {\r\n command: 'joinRoom',\r\n room: roomName,\r\n streamId: streamId\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.play = function (streamId, token, roomId, enableTracks) {\r\n thiz.playStreamId.push(streamId)\r\n var jsCmd = {\r\n command: 'play',\r\n streamId: streamId,\r\n token: token,\r\n room: roomId,\r\n trackList: enableTracks\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.stop = function (streamId) {\r\n thiz.closePeerConnection(streamId)\r\n\r\n var jsCmd = {\r\n command: 'stop',\r\n streamId: streamId\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.join = function (streamId) {\r\n var jsCmd = {\r\n command: 'join',\r\n streamId: streamId,\r\n multiPeer: thiz.isMultiPeer && thiz.multiPeerStreamId === null,\r\n mode: thiz.isPlayMode ? 'play' : 'both'\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.leaveFromRoom = function (roomName) {\r\n thiz.roomName = roomName\r\n var jsCmd = {\r\n command: 'leaveFromRoom',\r\n room: roomName\r\n }\r\n console.log('leave request is sent for ' + roomName)\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.leave = function (streamId) {\r\n var jsCmd = {\r\n command: 'leave',\r\n streamId:\r\n thiz.isMultiPeer && thiz.multiPeerStreamId !==null\r\n ? thiz.multiPeerStreamId\r\n : streamId\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n thiz.closePeerConnection(streamId)\r\n thiz.multiPeerStreamId = null\r\n }\r\n\r\n this.getStreamInfo = function (streamId) {\r\n var jsCmd = {\r\n command: 'getStreamInfo',\r\n streamId: streamId\r\n }\r\n this.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.enableTrack = function (mainTrackId, trackId, enabled) {\r\n var jsCmd = {\r\n command: 'enableTrack',\r\n streamId: mainTrackId,\r\n trackId: trackId,\r\n enabled: enabled\r\n }\r\n this.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.getTracks = function (streamId, token) {\r\n thiz.playStreamId.push(streamId)\r\n var jsCmd = {\r\n command: 'getTrackList',\r\n streamId: streamId,\r\n token: token\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.gotStream = function (stream) {\r\n thiz.localStream = stream\r\n if (thiz.localVideo) {\r\n thiz.localVideo.srcObject = stream\r\n }\r\n if (\r\n thiz.webSocketAdaptor === null ||\r\n thiz.webSocketAdaptor.isConnected() === false\r\n ) {\r\n thiz.webSocketAdaptor = new WebSocketAdaptor()\r\n }\r\n }\r\n\r\n this.switchVideoCapture = function (streamId) {\r\n thiz.publishMode = 'camera'\r\n\r\n thiz.switchVideoSource(streamId, thiz.mediaConstraints, null, true)\r\n }\r\n\r\n this.switchDesktopCapture = function (streamId) {\r\n thiz.publishMode = 'screen'\r\n\r\n var audioConstraint = false\r\n if (\r\n typeof thiz.mediaConstraints.audio !== 'undefined' &&\r\n thiz.mediaConstraints.audio !== false\r\n ) {\r\n audioConstraint = thiz.mediaConstraints.audio\r\n }\r\n\r\n thiz.getUserMedia(thiz.mediaConstraints, audioConstraint)\r\n }\r\n\r\n this.switchDesktopCaptureWithCamera = function (streamId) {\r\n thiz.publishMode = 'screen+camera'\r\n\r\n var audioConstraint = false\r\n if (\r\n typeof thiz.mediaConstraints.audio !== 'undefined' &&\r\n thiz.mediaConstraints.audio !== false\r\n ) {\r\n audioConstraint = thiz.mediaConstraints.audio\r\n }\r\n thiz.getUserMedia(thiz.mediaConstraints, audioConstraint)\r\n }\r\n\r\n thiz.arrangeStreams = function (stream, onEndedCallback, stopDesktop) {\r\n if (stopDesktop && thiz.desktopStream !==null) {\r\n thiz.desktopStream.getVideoTracks()[0].stop()\r\n }\r\n var videoTrack = thiz.localStream.getVideoTracks()[0]\r\n thiz.localStream.removeTrack(videoTrack)\r\n videoTrack.stop()\r\n thiz.localStream.addTrack(stream.getVideoTracks()[0])\r\n thiz.localVideo.srcObject = thiz.localStream\r\n\r\n if (onEndedCallback !==null) {\r\n stream.getVideoTracks()[0].onended = function (event) {\r\n onEndedCallback(event)\r\n }\r\n }\r\n }\r\n\r\n this.switchVideoSource = function (\r\n streamId,\r\n mediaConstraints,\r\n onEndedCallback,\r\n stopDesktop\r\n ) {\r\n navigator.mediaDevices\r\n .getUserMedia(mediaConstraints)\r\n .then(function (stream) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n var videoTrackSender = thiz.remotePeerConnection[streamId]\r\n .getSenders()\r\n .find(function (s) {\r\n return s.track.kind === 'video'\r\n })\r\n\r\n videoTrackSender\r\n .replaceTrack(stream.getVideoTracks()[0])\r\n .then(function (result) {\r\n thiz.arrangeStreams(stream, onEndedCallback, stopDesktop)\r\n })\r\n .catch(function (error) {\r\n console.log(error.name)\r\n })\r\n } else {\r\n thiz.arrangeStreams(stream, onEndedCallback, stopDesktop)\r\n }\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name)\r\n })\r\n }\r\n\r\n this.switchDesktopSource = function (\r\n stream,\r\n streamId,\r\n mediaConstraints,\r\n onEndedCallback,\r\n stopDesktop\r\n ) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n var videoTrackSender = thiz.remotePeerConnection[streamId]\r\n .getSenders()\r\n .find(function (s) {\r\n return s.track.kind === 'video'\r\n })\r\n\r\n console.log('videoTrackSender: ', videoTrackSender)\r\n\r\n videoTrackSender\r\n .replaceTrack(stream.getVideoTracks()[0])\r\n .then(function (result) {\r\n thiz.arrangeStreams(stream, onEndedCallback, stopDesktop)\r\n })\r\n .catch(function (error) {\r\n console.log(error.name)\r\n })\r\n } else {\r\n thiz.arrangeStreams(stream, onEndedCallback, stopDesktop)\r\n }\r\n }\r\n\r\n this.onTrack = function (event, streamId) {\r\n console.log('onTrack')\r\n if (thiz.remoteVideo !==null) {\r\n // thiz.remoteVideo.srcObject = event.streams[0];\r\n if (thiz.remoteVideo.srcObject !== event.streams[0]) {\r\n thiz.remoteVideo.srcObject = event.streams[0]\r\n console.log('Received remote stream')\r\n }\r\n } else {\r\n var dataObj = {\r\n stream: event.streams[0],\r\n track: event.track,\r\n streamId: streamId\r\n }\r\n thiz.callback('newStreamAvailable', dataObj)\r\n }\r\n }\r\n\r\n this.iceCandidateReceived = function (event, streamId) {\r\n if (event.candidate) {\r\n var protocolSupported = false\r\n if (typeof event.candidate.protocol === 'undefined') {\r\n thiz.candidateTypes.forEach(element => {\r\n if (event.candidate.candidate.toLowerCase().includes(element)) {\r\n protocolSupported = true\r\n }\r\n })\r\n } else {\r\n protocolSupported = thiz.candidateTypes.includes(\r\n event.candidate.protocol.toLowerCase()\r\n )\r\n }\r\n\r\n if (protocolSupported) {\r\n var jsCmd = {\r\n command: 'takeCandidate',\r\n streamId: streamId,\r\n label: event.candidate.sdpMLineIndex,\r\n id: event.candidate.sdpMid,\r\n candidate: event.candidate.candidate\r\n }\r\n\r\n if (thiz.debug) {\r\n console.log('sending ice candiate for stream Id ' + streamId)\r\n console.log(JSON.stringify(event.candidate))\r\n }\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n } else {\r\n console.log(\r\n \"Candidate's protocol(full sdp: \" +\r\n event.candidate.candidate +\r\n ') is not supported. Supported protocols: ' +\r\n thiz.candidateTypes\r\n )\r\n if (event.candidate.candidate !== '') {\r\n //\r\n thiz.callbackError(\r\n 'protocol_not_supported',\r\n 'Support protocols: ' +\r\n thiz.candidateTypes.toString() +\r\n ' candidate: ' +\r\n event.candidate.candidate\r\n )\r\n }\r\n }\r\n } else {\r\n console.error('No event.candidate in the iceCandidate event')\r\n }\r\n }\r\n\r\n this.initDataChannel = function (streamId, dataChannel) {\r\n dataChannel.onerror = error => {\r\n console.log('Data Channel Error:', error)\r\n var obj = {\r\n streamId: streamId,\r\n error: error\r\n }\r\n console.log('channel status: ', dataChannel.readyState)\r\n if (dataChannel.readyState !== 'closed') {\r\n thiz.callbackError('data_channel_error', obj)\r\n }\r\n }\r\n\r\n dataChannel.onmessage = event => {\r\n var obj = {\r\n streamId: streamId,\r\n event: event\r\n }\r\n thiz.callback('data_received', obj)\r\n }\r\n\r\n dataChannel.onopen = () => {\r\n thiz.remotePeerConnection[streamId].dataChannel = dataChannel\r\n console.log('Data channel is opened')\r\n thiz.callback('data_channel_opened', streamId)\r\n }\r\n\r\n dataChannel.onclose = () => {\r\n console.log('Data channel is closed')\r\n thiz.callback('data_channel_closed', streamId)\r\n }\r\n }\r\n\r\n // data channel mode can be \"publish\" , \"play\" or \"peer\" based on this it is decided which way data channel is created\r\n this.initPeerConnection = function (streamId, dataChannelMode) {\r\n if (thiz.remotePeerConnection[streamId] === null) {\r\n var closedStreamId = streamId\r\n console.log(\r\n 'stream id in init peer connection: ' +\r\n streamId +\r\n ' close stream id: ' +\r\n closedStreamId\r\n )\r\n thiz.remotePeerConnection[streamId] = new RTCPeerConnection(\r\n thiz.peerconnection_config\r\n )\r\n thiz.remoteDescriptionSet[streamId] = false\r\n thiz.iceCandidateList[streamId] = []\r\n if (!thiz.playStreamId.includes(streamId)) {\r\n if (thiz.localStream !==null) {\r\n thiz.remotePeerConnection[streamId].addStream(thiz.localStream)\r\n }\r\n }\r\n thiz.remotePeerConnection[streamId].onicecandidate = function (event) {\r\n thiz.iceCandidateReceived(event, closedStreamId)\r\n }\r\n thiz.remotePeerConnection[streamId].ontrack = function (event) {\r\n thiz.onTrack(event, closedStreamId)\r\n }\r\n\r\n if (dataChannelMode === 'publish') {\r\n // open data channel if it's publish mode peer connection\r\n const dataChannelOptions = {\r\n ordered: true\r\n }\r\n\r\n var dataChannel = thiz.remotePeerConnection[streamId].createDataChannel(\r\n streamId,\r\n dataChannelOptions\r\n )\r\n thiz.initDataChannel(streamId, dataChannel)\r\n } else if (dataChannelMode === 'play') {\r\n // in play mode, server opens the data channel\r\n thiz.remotePeerConnection[streamId].ondatachannel = function (ev) {\r\n thiz.initDataChannel(streamId, ev.channel)\r\n }\r\n } else {\r\n // for peer mode do both for now\r\n const dataChannelOptions = {\r\n ordered: true\r\n }\r\n\r\n var dataChannelPeer = thiz.remotePeerConnection[\r\n streamId\r\n ].createDataChannel(streamId, dataChannelOptions)\r\n thiz.initDataChannel(streamId, dataChannelPeer)\r\n\r\n thiz.remotePeerConnection[streamId].ondatachannel = function (ev) {\r\n thiz.initDataChannel(streamId, ev.channel)\r\n }\r\n }\r\n\r\n thiz.remotePeerConnection[streamId].oniceconnectionstatechange = function (\r\n event\r\n ) {\r\n var obj = {\r\n state: thiz.remotePeerConnection[streamId].iceConnectionState,\r\n streamId: streamId\r\n }\r\n thiz.callback('ice_connection_state_changed', obj)\r\n\r\n if (!thiz.isPlayMode) {\r\n if (\r\n thiz.remotePeerConnection[streamId].iceConnectionState ===\r\n 'connected'\r\n ) {\r\n thiz\r\n .changeBandwidth(thiz.bandwidth, streamId)\r\n .then(() => {\r\n console.log('Bandwidth is changed to ' + thiz.bandwidth)\r\n })\r\n .catch(e => console.error(e))\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n this.closePeerConnection = function (streamId) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n if (thiz.remotePeerConnection[streamId].dataChannel !==null) {\r\n thiz.remotePeerConnection[streamId].dataChannel.close()\r\n }\r\n if (thiz.remotePeerConnection[streamId].signalingState !== 'closed') {\r\n thiz.remotePeerConnection[streamId].close()\r\n thiz.remotePeerConnection[streamId] = null\r\n delete thiz.remotePeerConnection[streamId]\r\n var playStreamIndex = thiz.playStreamId.indexOf(streamId)\r\n if (playStreamIndex !== -1) {\r\n thiz.playStreamId.splice(playStreamIndex, 1)\r\n }\r\n }\r\n }\r\n\r\n if (thiz.remotePeerConnectionStats[streamId] !==null) {\r\n clearInterval(thiz.remotePeerConnectionStats[streamId].timerId)\r\n delete thiz.remotePeerConnectionStats[streamId]\r\n }\r\n }\r\n\r\n this.signallingState = function (streamId) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n return thiz.remotePeerConnection[streamId].signalingState\r\n }\r\n return null\r\n }\r\n\r\n this.iceConnectionState = function (streamId) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n return thiz.remotePeerConnection[streamId].iceConnectionState\r\n }\r\n return null\r\n }\r\n\r\n this.gotDescription = function (configuration, streamId) {\r\n thiz.remotePeerConnection[streamId]\r\n .setLocalDescription(configuration)\r\n .then(function (responose) {\r\n console.debug(\r\n 'Set local description successfully for stream Id ' + streamId\r\n )\r\n\r\n var jsCmd = {\r\n command: 'takeConfiguration',\r\n streamId: streamId,\r\n type: configuration.type,\r\n sdp: configuration.sdp\r\n }\r\n\r\n if (thiz.debug) {\r\n console.debug('local sdp: ')\r\n console.debug(configuration.sdp)\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n })\r\n .catch(function (error) {\r\n console.error('Cannot set local description. Error is: ' + error)\r\n })\r\n }\r\n\r\n this.closeDesktopStream = function () {\r\n if (thiz.cameraVideoObject !==null) {\r\n console.log(\r\n 'turnOffLocalCamera if cameraVideoObject',\r\n thiz.cameraVideoObject\r\n )\r\n thiz.cameraVideoObject.srcObject.getVideoTracks().forEach(track => {\r\n console.log('i m inside cameraVideoObject', track)\r\n track.stop()\r\n thiz.cameraVideoObject.srcObject.removeTrack(track)\r\n })\r\n }\r\n if (thiz.desktopStream !==null) {\r\n console.log('turnOffLocalCamera if desktopStream', thiz.desktopStream)\r\n thiz.desktopStream.getVideoTracks()[0].stop()\r\n }\r\n }\r\n\r\n this.turnOffCamera = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n // console.log('turnOffLocalCamera outside', thiz.localStream)\r\n /* if (thiz.localStream !==null) {\r\n console.log('turnOffLocalCamera if thiz.localStream ', thiz.localStream)\r\n thiz.closeStream()\r\n } */\r\n // var track = thiz.localStream.getVideoTracks()[0]\r\n // track.enabled = false\r\n // track.stop()\r\n this.closeDesktopStream()\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n this.turnOffLocalCamera = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getVideoTracks()[0]\r\n track.enabled = false\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n this.turnOnLocalCamera = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getVideoTracks()[0]\r\n track.enabled = true\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n this.muteLocalMic = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getAudioTracks()[0]\r\n track.enabled = false\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n /**\r\n * if there is audio it calls callbackError with \"AudioAlreadyActive\" parameter\r\n */\r\n this.unmuteLocalMic = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getAudioTracks()[0]\r\n track.enabled = true\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n this.takeConfiguration = function (\r\n idOfStream,\r\n configuration,\r\n typeOfConfiguration\r\n ) {\r\n var streamId = idOfStream\r\n var type = typeOfConfiguration\r\n var conf = configuration\r\n var isTypeOffer = type === 'offer'\r\n\r\n var dataChannelMode = 'publish'\r\n if (isTypeOffer) {\r\n dataChannelMode = 'play'\r\n }\r\n\r\n thiz.initPeerConnection(streamId, dataChannelMode)\r\n\r\n thiz.remotePeerConnection[streamId]\r\n .setRemoteDescription(\r\n new RTCSessionDescription({\r\n sdp: conf,\r\n type: type\r\n })\r\n )\r\n .then(function (response) {\r\n if (thiz.debug) {\r\n console.debug(\r\n 'set remote description is succesfull with response: ' +\r\n response +\r\n ' for stream : ' +\r\n streamId +\r\n ' and type: ' +\r\n type\r\n )\r\n console.debug(conf)\r\n }\r\n\r\n thiz.remoteDescriptionSet[streamId] = true\r\n var length = thiz.iceCandidateList[streamId].length\r\n console.debug('Ice candidate list size to be added: ' + length)\r\n for (var i = 0; i < length; i++) {\r\n thiz.addIceCandidate(streamId, thiz.iceCandidateList[streamId][i])\r\n }\r\n thiz.iceCandidateList[streamId] = []\r\n\r\n if (isTypeOffer) {\r\n // SDP constraints may be different in play mode\r\n console.log('try to create answer for stream id: ' + streamId)\r\n\r\n thiz.remotePeerConnection[streamId]\r\n .createAnswer(thiz.sdp_constraints)\r\n .then(function (configuration) {\r\n console.log('created answer for stream id: ' + streamId)\r\n thiz.gotDescription(configuration, streamId)\r\n })\r\n .catch(function (error) {\r\n console.error('create answer error :' + error)\r\n })\r\n }\r\n })\r\n .catch(function (error) {\r\n if (thiz.debug) {\r\n console.error('set remote description is failed with error: ' + error)\r\n }\r\n if (\r\n error.toString().indexOf('InvalidAccessError') > -1 ||\r\n error.toString().indexOf('setRemoteDescription') > -1\r\n ) {\r\n /**\r\n * This error generally occurs in codec incompatibility.\r\n * AMS for a now supports H.264 codec. This error happens when some browsers try to open it from VP8.\r\n */\r\n thiz.callbackError('notSetRemoteDescription')\r\n }\r\n })\r\n }\r\n\r\n this.takeCandidate = function (idOfTheStream, tmpLabel, tmpCandidate) {\r\n var streamId = idOfTheStream\r\n var label = tmpLabel\r\n var candidateSdp = tmpCandidate\r\n\r\n var candidate = new RTCIceCandidate({\r\n sdpMLineIndex: label,\r\n candidate: candidateSdp\r\n })\r\n\r\n var dataChannelMode = 'peer'\r\n thiz.initPeerConnection(streamId, dataChannelMode)\r\n\r\n if (thiz.remoteDescriptionSet[streamId] === true) {\r\n thiz.addIceCandidate(streamId, candidate)\r\n } else {\r\n console.debug(\r\n 'Ice candidate is added to list because remote description is not set yet'\r\n )\r\n thiz.iceCandidateList[streamId].push(candidate)\r\n }\r\n }\r\n\r\n this.addIceCandidate = function (streamId, candidate) {\r\n if (thiz.candidateTypes.includes(candidate.protocol)) {\r\n thiz.remotePeerConnection[streamId]\r\n .addIceCandidate(candidate)\r\n .then(function (response) {\r\n if (thiz.debug) {\r\n console.log('Candidate is added for stream ' + streamId)\r\n }\r\n })\r\n .catch(function (error) {\r\n console.error(\r\n 'ice candiate cannot be added for stream id: ' +\r\n streamId +\r\n ' error is: ' +\r\n error\r\n )\r\n console.error(candidate)\r\n })\r\n } else {\r\n if (thiz.debug) {\r\n console.log(\r\n \"Candidate's protocol(\" +\r\n candidate.protocol +\r\n ') is not supported. Supported protocols:' +\r\n thiz.candidateTypes\r\n )\r\n }\r\n }\r\n }\r\n\r\n this.startPublishing = function (idOfStream) {\r\n var streamId = idOfStream\r\n\r\n thiz.initPeerConnection(streamId, 'publish')\r\n\r\n thiz.remotePeerConnection[streamId]\r\n .createOffer(thiz.sdp_constraints)\r\n .then(function (configuration) {\r\n thiz.gotDescription(configuration, streamId)\r\n })\r\n .catch(function (error) {\r\n console.error(\r\n 'create offer error for stream id: ' + streamId + ' error: ' + error\r\n )\r\n })\r\n }\r\n\r\n /**\r\n * If we have multiple video tracks in coming versions, this method may cause some issues\r\n */\r\n this.getVideoSender = function (streamId) {\r\n var videoSender = null\r\n if (\r\n ((thiz.adapter && thiz.adapter.browserDetails.browser === 'chrome') ||\r\n (thiz.adapter &&\r\n thiz.adapter.browserDetails.browser === 'firefox' &&\r\n thiz.adapter &&\r\n thiz.adapter.browserDetails.version >= 64)) &&\r\n 'RTCRtpSender' in window &&\r\n 'setParameters' in window.RTCRtpSender.prototype\r\n ) {\r\n const senders = thiz.remotePeerConnection[streamId].getSenders()\r\n\r\n for (let i = 0; i < senders.length; i++) {\r\n if (senders[i].track !==null && senders[i].track.kind === 'video') {\r\n videoSender = senders[i]\r\n break\r\n }\r\n }\r\n }\r\n return videoSender\r\n }\r\n\r\n /**\r\n * bandwidth is in kbps\r\n */\r\n this.changeBandwidth = function (bandwidth, streamId) {\r\n var errorDefinition = ''\r\n\r\n var videoSender = thiz.getVideoSender(streamId)\r\n\r\n if (videoSender !==null) {\r\n const parameters = videoSender.getParameters()\r\n\r\n if (!parameters.encodings) {\r\n parameters.encodings = [{}]\r\n }\r\n\r\n if (bandwidth === 'unlimited') {\r\n delete parameters.encodings[0].maxBitrate\r\n } else {\r\n parameters.encodings[0].maxBitrate = bandwidth * 1000\r\n }\r\n\r\n return videoSender.setParameters(parameters)\r\n } else {\r\n errorDefinition = 'Video sender not found to change bandwidth'\r\n }\r\n\r\n return Promise.reject(errorDefinition)\r\n }\r\n\r\n this.getStats = function (streamId) {\r\n thiz.remotePeerConnection[streamId].getStats(null).then(stats => {\r\n var bytesReceived = 0\r\n var packetsLost = 0\r\n var fractionLost = 0\r\n var currentTime = 0\r\n var bytesSent = 0\r\n var audioLevel = -1\r\n\r\n stats.forEach(value => {\r\n if (value.type === 'inbound-rtp') {\r\n bytesReceived += value.bytesReceived\r\n packetsLost += value.packetsLost\r\n fractionLost += value.fractionLost\r\n currentTime = value.timestamp\r\n } else if (value.type === 'outbound-rtp') {\r\n bytesSent += value.bytesSent\r\n currentTime = value.timestamp\r\n } else if (\r\n value.type === 'track' &&\r\n typeof value.kind !== 'undefined' &&\r\n value.kind === 'audio'\r\n ) {\r\n if (typeof value.audioLevel !== 'undefined') {\r\n audioLevel = value.audioLevel\r\n }\r\n }\r\n })\r\n\r\n thiz.remotePeerConnectionStats[\r\n streamId\r\n ].totalBytesReceived = bytesReceived\r\n thiz.remotePeerConnectionStats[streamId].packetsLost = packetsLost\r\n thiz.remotePeerConnectionStats[streamId].fractionLost = fractionLost\r\n thiz.remotePeerConnectionStats[streamId].currentTime = currentTime\r\n thiz.remotePeerConnectionStats[streamId].totalBytesSent = bytesSent\r\n thiz.remotePeerConnectionStats[streamId].audioLevel = audioLevel\r\n\r\n thiz.callback('updated_stats', thiz.remotePeerConnectionStats[streamId])\r\n })\r\n }\r\n\r\n this.enableStats = function (streamId) {\r\n thiz.remotePeerConnectionStats[streamId] = new PeerStats(streamId)\r\n thiz.remotePeerConnectionStats[streamId].timerId = setInterval(() => {\r\n thiz.getStats(streamId)\r\n }, 5000)\r\n }\r\n\r\n this.getRoomInfo = function (roomName, streamId) {\r\n thiz.roomTimerId = setInterval(() => {\r\n var jsCmd = {\r\n command: 'getRoomInfo',\r\n streamId: streamId,\r\n room: roomName\r\n }\r\n this.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }, 5000)\r\n }\r\n\r\n /**\r\n * After calling this function, create new WebRTCAdaptor instance, don't use the the same objectone\r\n * Because all streams are closed on server side as well when websocket connection is closed.\r\n */\r\n this.closeWebSocket = function () {\r\n for (var key in thiz.remotePeerConnection) {\r\n thiz.remotePeerConnection[key].close()\r\n }\r\n // free the remote peer connection by initializing again\r\n thiz.remotePeerConnection = []\r\n thiz.webSocketAdaptor.close()\r\n }\r\n\r\n this.peerMessage = function (streamId, definition, data) {\r\n var jsCmd = {\r\n command: 'peerMessageCommand',\r\n streamId: streamId,\r\n definition: definition,\r\n data: data\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.sendData = function (streamId, message) {\r\n var dataChannel = thiz.remotePeerConnection[streamId].dataChannel\r\n dataChannel.send(message)\r\n }\r\n\r\n function WebSocketAdaptor () {\r\n var wsConn = new WebSocket(thiz.websocket_url)\r\n\r\n var connected = false\r\n\r\n var pingTimerId = -1\r\n\r\n var clearPingTimer = function () {\r\n if (pingTimerId !== -1) {\r\n if (thiz.debug) {\r\n console.debug('Clearing ping message timer')\r\n }\r\n clearInterval(pingTimerId)\r\n pingTimerId = -1\r\n }\r\n }\r\n\r\n var sendPing = function () {\r\n var jsCmd = {\r\n command: 'ping'\r\n }\r\n wsConn.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.close = function () {\r\n wsConn.close()\r\n }\r\n\r\n wsConn.onopen = function () {\r\n if (thiz.debug) {\r\n console.log('websocket connected')\r\n }\r\n\r\n pingTimerId = setInterval(() => {\r\n sendPing()\r\n }, 3000)\r\n\r\n connected = true\r\n thiz.callback('initialized')\r\n }\r\n\r\n this.send = function (text) {\r\n if (\r\n wsConn.readyState === 0 ||\r\n wsConn.readyState === 2 ||\r\n wsConn.readyState === 3\r\n ) {\r\n thiz.callbackError('WebSocketNotConnected')\r\n // thiz.callback('refreshConnection')\r\n return\r\n }\r\n wsConn.send(text)\r\n if (thiz.debug) {\r\n console.log('sent message:' + text)\r\n }\r\n }\r\n\r\n this.isConnected = function () {\r\n return connected\r\n }\r\n\r\n wsConn.onmessage = function (event) {\r\n var obj = JSON.parse(event.data)\r\n\r\n if (obj.command === 'start') {\r\n // this command is received first, when publishing so playmode is false\r\n console.log('Start command received')\r\n thiz.callback(obj.command)\r\n if (thiz.debug) {\r\n console.debug('received start command')\r\n }\r\n\r\n thiz.startPublishing(obj.streamId)\r\n } else if (obj.command === 'takeCandidate') {\r\n if (thiz.debug) {\r\n console.log('received ice candidate for stream id ' + obj.streamId)\r\n console.log(obj.candidate)\r\n }\r\n\r\n thiz.takeCandidate(obj.streamId, obj.label, obj.candidate)\r\n } else if (obj.command === 'takeConfiguration') {\r\n if (thiz.debug) {\r\n console.log(\r\n 'received remote description type for stream id: ' +\r\n obj.streamId +\r\n ' type: ' +\r\n obj.type\r\n )\r\n }\r\n thiz.takeConfiguration(obj.streamId, obj.sdp, obj.type)\r\n thiz.callback(obj.command)\r\n } else if (obj.command === 'stop') {\r\n console.log('Stop command received')\r\n thiz.callback(obj.command)\r\n thiz.closePeerConnection(obj.streamId)\r\n thiz.closeStream()\r\n } else if (obj.command === 'error') {\r\n console.log('error ma', obj.command, obj.definition)\r\n thiz.callbackError(obj.definition)\r\n } else if (obj.command === 'notification') {\r\n thiz.callback(obj.definition, obj)\r\n if (\r\n obj.definition === 'play_finished' ||\r\n obj.definition === 'publish_finished'\r\n ) {\r\n thiz.closePeerConnection(obj.streamId)\r\n }\r\n } else if (obj.command === 'streamInformation') {\r\n thiz.callback(obj.command, obj)\r\n } else if (obj.command === 'pong') {\r\n // console.log('tracklist', thiz.localStream)\r\n thiz.callback(obj.command)\r\n } else if (obj.command === 'trackList') {\r\n thiz.callback(obj.command, obj)\r\n } else if (obj.command === 'connectWithNewId') {\r\n thiz.multiPeerStreamId = obj.streamId\r\n thiz.join(obj.streamId)\r\n } else if (obj.command === 'peerMessageCommand') {\r\n thiz.callback(obj.command, obj)\r\n }\r\n }\r\n\r\n wsConn.onerror = function (error) {\r\n console.log(' error occured: ' + JSON.stringify(error))\r\n clearPingTimer()\r\n thiz.callbackError(error)\r\n }\r\n\r\n wsConn.onclose = function (event) {\r\n connected = false\r\n console.log('connection closed.')\r\n clearPingTimer()\r\n thiz.callback('closed', event)\r\n }\r\n }\r\n}\r\n","import React, { Component } from 'react'\r\nimport { message } from 'antd'\r\n\r\nmessage.config({\r\n top: 100,\r\n duration: 5,\r\n maxCount: 1\r\n // rtl: true,\r\n})\r\n\r\nexport default function (ComposedComponent) {\r\n class NetworkDetection extends Component {\r\n state = {\r\n isDisconnected: false\r\n }\r\n\r\n componentDidMount () {\r\n this.handleConnectionChange()\r\n window.addEventListener('online', this.handleConnectionChange)\r\n window.addEventListener('offline', this.handleConnectionChange)\r\n }\r\n\r\n componentWillUnmount () {\r\n window.removeEventListener('online', this.handleConnectionChange)\r\n window.removeEventListener('offline', this.handleConnectionChange)\r\n }\r\n\r\n handleConnectionChange = () => {\r\n const condition = navigator.onLine ? 'online' : 'offline'\r\n if (condition === 'online') {\r\n const webPing = setInterval(() => {\r\n fetch('//google.com', {\r\n mode: 'no-cors'\r\n })\r\n .then(() => {\r\n this.setState({ isDisconnected: false }, () => {\r\n return clearInterval(webPing)\r\n })\r\n })\r\n .catch(() => this.setState({ isDisconnected: true }))\r\n }, 2000)\r\n return\r\n }\r\n\r\n return this.setState({ isDisconnected: true })\r\n }\r\n\r\n render () {\r\n const { isDisconnected } = this.state\r\n return (\r\n \r\n {showVideo && (\r\n <>\r\n {\r\n prompt = window.confirm(t('events:prompt_message'))\r\n return prompt\r\n }}\r\n />\r\n \r\n \r\n {loading && (\r\n \r\n {t('labels:processing')}\r\n \r\n )}\r\n {hasFinished && (\r\n {t('v2:connecting')} \r\n )}\r\n
\r\n \r\n {\r\n this.switchMode(e.target)\r\n }}\r\n value={selectedOption}\r\n >\r\n {t('buttons:camera')} \r\n \r\n {t('buttons:screen')}\r\n \r\n \r\n {t('buttons:screen_with_camera')}\r\n \r\n \r\n \r\n {t('events:browser_unsupportive_message')}\r\n \r\n
\r\n \r\n )}\r\n
\r\n )\r\n }\r\n}\r\nexport default NetworkDetection(AntMediaService)\r\n","import React from 'react'\r\nimport { Prompt } from 'react-router-dom'\r\nimport { WebRTCAdaptor } from './webrtcAdapter'\r\nimport { Row } from 'antd'\r\nimport { config } from '../../../../../constants'\r\nimport { Card } from '../../../../../components/Card/styled'\r\nimport '../../../../../components/Card/Card.scss'\r\nimport { NetworkDetection } from '../NetworkDetection'\r\n\r\nlet pcConfig = null\r\nlet sdpConstraints = {\r\n OfferToReceiveAudio: true,\r\n OfferToReceiveVideo: true\r\n}\r\n\r\nlet mediaConstraints = {\r\n video: true,\r\n audio: true\r\n}\r\n\r\nlet prompt = null\r\nlet webRTCAdaptor = null\r\nlet token = ''\r\nlet video = {}\r\n\r\nclass AntPlayer extends React.Component {\r\n SOCKET_URL_PLAY =\r\n `wss://antmedia-${this.props.eventId}.v2.sharelookapp.com:5443/WebRTCAppEE/websocket?rtmpForward=undefined`\r\n initSocket = null\r\n intervalId = null\r\n intervalTimeOut = null\r\n state = {\r\n showRetry: false,\r\n isLoading: false,\r\n showPrompt: false,\r\n presenterLoader: false,\r\n playStream: ''\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ isLoading: true }, () => {\r\n this.initPlayer()\r\n })\r\n video = document.getElementById('remoteVideo')\r\n if (video.muted === true) {\r\n video.muted = false\r\n video.play()\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n const { playStream } = this.state\r\n console.log('componentWillUnmount before playStream', playStream)\r\n console.log('componentWillUnmount after')\r\n if (this.intervalId !==null) {\r\n console.log('if componentWillUnmount this.intervalId', this.intervalId)\r\n clearInterval(this.intervalId)\r\n this.intervalId = null\r\n }\r\n // if (this.intervalTimeOut !==null) {\r\n // console.log('if componentWillUnmount this.intervalTimeOut', this.intervalTimeOut)\r\n // clearTimeout(this.intervalTimeOut)\r\n // this.intervalTimeOut = null\r\n // }\r\n if (this.connectionInterval) {\r\n clearInterval(this.connectionInterval)\r\n }\r\n this.setState({ showPrompt: false }, () => {\r\n prompt = null\r\n this.stopPlaying()\r\n })\r\n }\r\n\r\n getHostId = () => {\r\n const { eventId } = this.props\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'getStream',\r\n channel_type: 'EVENT',\r\n channel_id: eventId\r\n })\r\n )\r\n }\r\n\r\n startStreaming = () => {\r\n const { eventId, userId, orgId } = this.props\r\n this.initSocket = new window.WebSocket(\r\n `${config.socketURL}?channel_type=EVENT&channel_id=${eventId}`\r\n )\r\n\r\n this.initSocket.onopen = () => {\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'connectStream',\r\n channel_type: 'EVENT',\r\n channel_id: eventId,\r\n user_id: userId,\r\n org_id: orgId\r\n })\r\n )\r\n this.connectionInterval = setInterval(() => {\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'pingPong',\r\n msg: 'ping'\r\n })\r\n )\r\n }, 20000)\r\n this.getHostId()\r\n }\r\n\r\n this.initSocket.onmessage = event => {\r\n const data = JSON.parse(event.data)\r\n console.log('play listen', data)\r\n if (data.event === 'getStream') {\r\n console.log('getStream')\r\n this.setState({ playStream: data.stream_id }, () => {\r\n this.setState(\r\n {\r\n showPrompt: true\r\n },\r\n () => {\r\n const { setHostId } = this.props\r\n this.startPlaying()\r\n setHostId(this.state.playStream)\r\n }\r\n )\r\n })\r\n }\r\n if (data.event === 'startStream') {\r\n console.log('startStream')\r\n this.setState({ playStream: data.stream_id }, () => {\r\n this.setState(\r\n {\r\n showPrompt: true\r\n },\r\n () => {\r\n const { setHostId } = this.props\r\n this.startPlaying()\r\n setHostId(this.state.playStream)\r\n }\r\n )\r\n })\r\n }\r\n\r\n if (data.event === 'stopStream' || data.event === 'endConference') {\r\n console.log('stopStream')\r\n this.stopPlaying()\r\n clearInterval(this.connectionInterval)\r\n }\r\n }\r\n \r\n\r\n this.initSocket.onclose = () => {\r\n console.log('stop web socket ko')\r\n clearInterval(this.connectionInterval)\r\n }\r\n\r\n this.initSocket.onerror = error => {\r\n console.log('Error ' + error.message)\r\n this.stopStreaming()\r\n clearInterval(this.connectionInterval)\r\n }\r\n }\r\n\r\n stopStreaming = () => {\r\n const { eventId, userId, orgId, handleBroadcastChange } = this.props\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'disconnectStream',\r\n channel_type: 'EVENT',\r\n channel_id: eventId,\r\n user_id: userId,\r\n org_id: orgId\r\n })\r\n )\r\n handleBroadcastChange()\r\n }\r\n\r\n initPlayer = () => {\r\n webRTCAdaptor = new WebRTCAdaptor({\r\n websocket_url: this.SOCKET_URL_PLAY,\r\n mediaConstraints: mediaConstraints,\r\n peerconnection_config: pcConfig,\r\n sdp_constraints: sdpConstraints,\r\n remoteVideoId: 'remoteVideo',\r\n isPlayMode: true,\r\n debug: true,\r\n candidateTypes: ['tcp', 'udp'],\r\n callback: (info, obj) => {\r\n if (info === 'initialized') {\r\n console.log('initialized')\r\n this.startStreaming()\r\n \r\n } else if (info === 'play_started') {\r\n // joined the stream\r\n console.log('play started this.intervalId', this.intervalId)\r\n this.getHostId()\r\n this.setState({\r\n showRetry: false,\r\n showPrompt: true,\r\n isLoading: false,\r\n }, () => {\r\n const {handleBroadcastChange} = this.props\r\n handleBroadcastChange()\r\n if (this.intervalId !==null) {\r\n console.log('if this.intervalId', this.intervalId)\r\n clearInterval(this.intervalId)\r\n this.intervalId = null\r\n }\r\n \r\n // if (this.intervalTimeOut !==null) {\r\n // console.log('if this.intervalTimeOut', this.intervalTimeOut)\r\n // clearTimeout(this.intervalTimeOut)\r\n // this.intervalTimeOut = null\r\n // }\r\n })\r\n \r\n } else if (info === 'play_finished') {\r\n console.log('play finished')\r\n this.setState({ showPrompt: false }, () => {\r\n this.stopStreaming()\r\n this.intervalId = setInterval(() => {\r\n console.log('interval counting')\r\n webRTCAdaptor.getStreamInfo(obj.streamId)\r\n }, 5000)\r\n })\r\n } else if (info === 'closed') {\r\n console.log('closed')\r\n if (typeof obj !== 'undefined') {\r\n console.log('Connecton closed: ' + JSON.stringify(obj))\r\n }\r\n } else if (info === 'streamInformation') {\r\n if (obj.streamId !== null) {\r\n webRTCAdaptor.play(obj.streamId, token)\r\n }\r\n } else if (info === 'ice_connection_state_changed') {\r\n console.log('iceConnectionState Changed: ', JSON.stringify(obj))\r\n } else if (info === 'updated_stats') {\r\n // obj is the PeerStats which has fields\r\n // averageIncomingBitrate - kbits/sec\r\n // currentIncomingBitrate - kbits/sec\r\n // packetsLost - total number of packet lost\r\n // fractionLost - fraction of packet lost\r\n console.log(\r\n 'Average incoming kbits/sec: ' +\r\n obj.averageIncomingBitrate +\r\n ' Current incoming kbits/sec: ' +\r\n obj.currentIncomingBitrate +\r\n ' packetLost: ' +\r\n obj.packetsLost +\r\n ' fractionLost: ' +\r\n obj.fractionLost +\r\n ' audio level: ' +\r\n obj.audioLevel\r\n )\r\n } else if (info === 'data_received') {\r\n console.log(\r\n 'Data received: ' +\r\n obj.event.data +\r\n ' type: ' +\r\n obj.event.type +\r\n ' for stream: ' +\r\n obj.streamId\r\n )\r\n } else {\r\n console.log(info + ' notification received')\r\n }\r\n },\r\n callbackError: error => {\r\n // some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError\r\n\r\n console.log('error callback: ' + JSON.stringify(error))\r\n if (error.indexOf('no_stream_exist') !== -1) {\r\n console.log('no_stream_exist this.intervalId', JSON.stringify(error), this.intervalId)\r\n this.setState({ showRetry: true }, ()=>{\r\n // this.intervalTimeOut = setTimeout(() => {\r\n // this.getHostId()\r\n // }, 5000)\r\n })\r\n } else if (error.indexOf('already_playing') !== -1) {\r\n console.log('already_playing')\r\n this.setState({showRetry: false},()=>{\r\n if (this.intervalId !==null) {\r\n console.log('if this.intervalId', this.intervalId)\r\n clearInterval(this.intervalId)\r\n this.intervalId = null\r\n }\r\n // if (this.intervalTimeOut !==null) {\r\n // console.log('if this.intervalTimeOut', this.intervalTimeOut)\r\n // clearTimeout(this.intervalTimeOut)\r\n // this.intervalTimeOut = null\r\n // }\r\n })\r\n }else {\r\n console.log('error: ', JSON.stringify(error))\r\n }\r\n }\r\n })\r\n }\r\n\r\n startPlaying = () => {\r\n const { playStream } = this.state\r\n console.log('playing stream', playStream)\r\n if(webRTCAdaptor && playStream){\r\n webRTCAdaptor.play(playStream, token)\r\n }\r\n }\r\n\r\n stopPlaying = () => {\r\n const { playStream } = this.state\r\n console.log('stopPlaying stream', playStream)\r\n if(webRTCAdaptor){\r\n webRTCAdaptor.stop(playStream)\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n showRetry,\r\n isLoading,\r\n showPrompt,\r\n playStream\r\n } = this.state\r\n const { t } = this.props\r\n\r\n\r\n console.log('render isLoading', isLoading)\r\n console.log('render intervalId', this.intervalId)\r\n\r\n return (\r\n \r\n {isDisconnected && <>{message.info('Internet connection lost')}}\r\n {/*
\r\n )\r\n }\r\n }\r\n return NetworkDetection\r\n}\r\n","import React, { Component } from 'react'\r\nimport { Prompt } from 'react-router-dom'\r\nimport './style.scss'\r\nimport { WebRTCAdaptor } from './webrtcAdapter'\r\nimport { api } from '../../../../../services'\r\nimport { config } from '../../../../../constants'\r\nimport { Row, Radio } from 'antd'\r\nimport { Card } from '../../../../../components/Card/styled'\r\nimport '../../../../../components/Card/Card.scss'\r\nimport { NetworkDetection } from '../NetworkDetection'\r\n\r\nlet autoRepublishEnabled = true\r\nlet autoRepublishIntervalJob = null\r\nlet pcConfig = null\r\nlet sdpConstraints = {\r\n OfferToReceiveAudio: false,\r\n OfferToReceiveVideo: false\r\n}\r\n\r\nlet mediaConstraints = {\r\n video: {\r\n width: 640,\r\n height: 360,\r\n frameRate: 15\r\n },\r\n audio: true\r\n}\r\n\r\nlet webRTCAdaptor = null\r\nlet textValue = {}\r\nlet prompt = null\r\nlet token = ''\r\nlet video = null\r\n\r\nclass AntMediaService extends Component {\r\n SOCKET_URL_PUBLISH = `wss://antmedia-${this.props.eventId}.v2.sharelookapp.com/WebRTCAppEE/websocket?rtmpForward=undefined`\r\n initSocket = null\r\n state = {\r\n showMsg: false,\r\n streamId: this.props.userId + '_' + this.props.eventId,\r\n streamMsg: '',\r\n selectedOption: 'shareCamera',\r\n messages: {},\r\n hasFinished: false,\r\n isScreenShareSupport: false,\r\n disableRadio: true,\r\n showVideo: false,\r\n broadcastState: null,\r\n showPrompt: false,\r\n wserrorMessage: '',\r\n loading: false,\r\n showReconnectModal: false,\r\n showCancelMessage: false,\r\n webSocketConnect: false\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const {\r\n props: { isBroadcast, isDisconnected, userId, initSocket, isSocketClose }\r\n } = this\r\n\r\n const { hasFinished } = this.state\r\n\r\n if (\r\n prevProps.isDisconnected !== isDisconnected ||\r\n prevState.hasFinished !== hasFinished\r\n ) {\r\n console.log('outside isBroadcast check', isDisconnected)\r\n if (isDisconnected) {\r\n console.log('didupdate isBroadcast')\r\n if (autoRepublishIntervalJob !== null) {\r\n clearInterval(autoRepublishIntervalJob)\r\n autoRepublishIntervalJob = null\r\n }\r\n } else {\r\n console.log('didupdate else isBroadcast', hasFinished)\r\n if (hasFinished) {\r\n // toggleEventProcessing && toggleEventProcessing()\r\n if (isSocketClose) {\r\n initSocket(userId)\r\n }\r\n this.initWebRTCAdaptor(true, autoRepublishEnabled)\r\n }\r\n }\r\n }\r\n\r\n if (prevProps.isBroadcast !== isBroadcast) {\r\n if (isBroadcast) {\r\n this.setState({ showVideo: true }, () => {\r\n this.handleWSConnection()\r\n })\r\n }\r\n\r\n if (!isBroadcast) {\r\n this.setState({ showVideo: false, showPrompt: false }, () => {\r\n this.stopPublishing()\r\n })\r\n }\r\n }\r\n\r\n video = document.getElementById('localVideo')\r\n\r\n if (video) {\r\n if (!video.muted) {\r\n video.volume = 0.0\r\n // video.play()\r\n }\r\n video.onvolumechange = () => {\r\n video.volume = 0.0\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.state.showVideo) {\r\n this.setState({ showPrompt: false })\r\n prompt = null\r\n video = null\r\n this.stopPublishing()\r\n }\r\n if (this.connectionInterval) {\r\n clearInterval(this.connectionInterval)\r\n }\r\n }\r\n\r\n handleWSConnection = () => {\r\n const { toggleEventProcessing } = this.props\r\n this.setState({ loading: true, showPrompt: true }, () => {\r\n toggleEventProcessing && toggleEventProcessing()\r\n this.initWebRTCAdaptor(false, autoRepublishEnabled)\r\n })\r\n }\r\n\r\n startPublishing = () => {\r\n const { streamId } = this.state\r\n const { eventId, setHostId } = this.props\r\n console.log('publish strm', streamId)\r\n\r\n api.events\r\n .startLiveEvent(eventId)\r\n .then(() => {\r\n this.setState(\r\n {\r\n disableRadio: false\r\n },\r\n () => {\r\n this.startStreaming()\r\n setHostId(streamId)\r\n webRTCAdaptor.publish(streamId, token)\r\n }\r\n )\r\n })\r\n .catch(err => {\r\n console.log('error in starting event test', err)\r\n })\r\n }\r\n\r\n stopPublishing = () => {\r\n console.log('stopPublishing ')\r\n const { streamId } = this.state\r\n const { eventId } = this.props\r\n if (autoRepublishIntervalJob !== null) {\r\n clearInterval(autoRepublishIntervalJob)\r\n autoRepublishIntervalJob = null\r\n }\r\n if (this.initSocket !== null) {\r\n console.log('this.initSocket !== null')\r\n this.stopStreaming()\r\n webRTCAdaptor.stop(streamId)\r\n this.initSocket.close()\r\n }\r\n api.events\r\n .stopLiveEvent(eventId)\r\n .then(res => {\r\n console.log('api response', res)\r\n this.setState({\r\n disableRadio: true\r\n })\r\n })\r\n .catch(err => {\r\n console.log('error in stopping event', err)\r\n })\r\n }\r\n\r\n startStreaming = () => {\r\n const { streamId } = this.state\r\n const { eventId, userId, userOrg } = this.props\r\n this.initSocket = new window.WebSocket(\r\n `${config.socketURL}?channel_type=EVENT&channel_id=${eventId}`\r\n )\r\n\r\n this.initSocket.onopen = () => {\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'startConference',\r\n stream_id: `event_${eventId}`,\r\n channel_type: 'EVENT',\r\n channel_id: eventId\r\n })\r\n )\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'startStream',\r\n stream_id: streamId,\r\n channel_type: 'EVENT',\r\n channel_id: eventId\r\n })\r\n )\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'connectStream',\r\n channel_type: 'EVENT',\r\n channel_id: eventId,\r\n user_id: userId,\r\n org_id: userOrg\r\n })\r\n )\r\n this.connectionInterval = setInterval(() => {\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'pingPong',\r\n msg: 'ping'\r\n })\r\n )\r\n }, 20000)\r\n }\r\n\r\n this.initSocket.onclose = () => {\r\n console.log('stop web socket ko')\r\n clearInterval(this.connectionInterval)\r\n }\r\n\r\n this.initSocket.onerror = error => {\r\n console.log('Error ' + error.message)\r\n this.stopStreaming()\r\n clearInterval(this.connectionInterval)\r\n }\r\n }\r\n\r\n stopStreaming = () => {\r\n const { streamId } = this.state\r\n const { eventId, userId, userOrg } = this.props\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'stopStream',\r\n stream_id: streamId,\r\n channel_type: 'EVENT',\r\n channel_id: eventId\r\n })\r\n )\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'stopConference',\r\n stream_id: `event_${eventId}`,\r\n channel_type: 'EVENT',\r\n channel_id: eventId\r\n })\r\n )\r\n this.initSocket.send(\r\n JSON.stringify({\r\n action: 'disconnectStream',\r\n channel_type: 'EVENT',\r\n channel_id: eventId,\r\n user_id: userId,\r\n org_id: userOrg\r\n })\r\n )\r\n }\r\n\r\n switchMode = chbx => {\r\n const { streamId } = this.state\r\n const { value } = chbx\r\n if (value === 'shareCamera') {\r\n this.setState(\r\n {\r\n selectedOption: value\r\n },\r\n () => {\r\n webRTCAdaptor.switchVideoCapture(streamId)\r\n }\r\n )\r\n } else if (value === 'shareScreen') {\r\n this.setState(\r\n {\r\n selectedOption: value\r\n },\r\n () => {\r\n webRTCAdaptor.switchDesktopCapture(streamId)\r\n }\r\n )\r\n } else if (value === 'shareCameraWithScreen') {\r\n this.setState(\r\n {\r\n selectedOption: value\r\n },\r\n () => {\r\n webRTCAdaptor.switchDesktopCaptureWithCamera(streamId)\r\n }\r\n )\r\n } else {\r\n chbx.checked = true\r\n }\r\n }\r\n\r\n checkAndRepublishIfRequired = () => {\r\n const { streamId } = this.state\r\n const iceState = webRTCAdaptor.signallingState(streamId)\r\n if (\r\n iceState === null ||\r\n iceState === 'failed' ||\r\n iceState === 'disconnected'\r\n ) {\r\n console.log('Publish has stopped and will try to re-publish')\r\n webRTCAdaptor.stop(streamId)\r\n webRTCAdaptor.closePeerConnection(streamId)\r\n webRTCAdaptor.closeWebSocket()\r\n this.initWebRTCAdaptor(true, autoRepublishEnabled)\r\n }\r\n }\r\n\r\n // startAnimation() {\r\n // const { streamId } = this.props\r\n // const state = webRTCAdaptor.signallingState(streamId)\r\n // this.setState({ broadcastState: state })\r\n // console.log('state of signal', state)\r\n // }\r\n\r\n initWebRTCAdaptor(publishImmediately, autoRepublishEnabled) {\r\n const { streamId } = this.state\r\n webRTCAdaptor = new WebRTCAdaptor({\r\n websocket_url: this.SOCKET_URL_PUBLISH,\r\n mediaConstraints: mediaConstraints,\r\n peerconnection_config: pcConfig,\r\n sdp_constraints: sdpConstraints,\r\n localVideoId: 'localVideo',\r\n debug: true,\r\n bandwidth: 200,\r\n streamId: streamId,\r\n callback: (info, obj) => {\r\n console.log('in state call', info, obj)\r\n if (info === 'initialized') {\r\n console.log('initialized')\r\n if (publishImmediately) {\r\n webRTCAdaptor.publish(streamId, token)\r\n } else {\r\n console.log('else initialized')\r\n this.startPublishing()\r\n }\r\n } else if (info === 'publish_started') {\r\n console.log('publish started')\r\n const {\r\n toggleEventProcessing,\r\n calculateStopTime,\r\n calculateWarnTime\r\n } = this.props\r\n this.setState(\r\n {\r\n hasFinished: false,\r\n loading: false,\r\n webSocketConnect: false\r\n },\r\n () => {\r\n calculateStopTime()\r\n calculateWarnTime()\r\n toggleEventProcessing && toggleEventProcessing()\r\n if (autoRepublishEnabled && autoRepublishIntervalJob === null) {\r\n autoRepublishIntervalJob = setInterval(() => {\r\n this.checkAndRepublishIfRequired()\r\n }, 3000)\r\n }\r\n }\r\n )\r\n } else if (info === 'publish_finished') {\r\n const { isBroadcast } = this.props\r\n console.log('publish finished')\r\n console.log('broadcast state', isBroadcast)\r\n setTimeout(() => {\r\n if (isBroadcast) {\r\n console.log('if broadcast state', isBroadcast)\r\n webRTCAdaptor.closeStream()\r\n this.setState({\r\n showPrompt: false,\r\n hasFinished: true,\r\n selectedOption: 'shareCamera'\r\n })\r\n } else {\r\n console.log('else broadcast state', isBroadcast)\r\n webRTCAdaptor.closeStream()\r\n }\r\n }, 700)\r\n } else if (info === 'browser_screen_share_supported') {\r\n console.log('browser screen share supported')\r\n this.setState({ isScreenShareSupport: true })\r\n // browser_screen_share_doesnt_support.style.display = 'none'\r\n } else if (info === 'screen_share_stopped') {\r\n this.setState({ selectedOption: 'shareCamera' })\r\n console.log('screen share stopped')\r\n } else if (info === 'closed') {\r\n console.log('Connection closed')\r\n const { hasFinished } = this.state\r\n if (!hasFinished) {\r\n webRTCAdaptor.closeStream()\r\n this.setState({\r\n hasFinished: true\r\n })\r\n }\r\n // message.info('Connection closed')\r\n } else if (info === 'pong') {\r\n } else if (info === 'refreshConnection') {\r\n // this.checkAndRepublishIfRequired()\r\n // message.info('refresh connection')\r\n } else if (info === 'ice_connection_state_changed') {\r\n console.log('iceConnectionState Changed: ', JSON.stringify(obj))\r\n } else if (info === 'updated_stats') {\r\n console.log(\r\n 'Average outgoing bitrate ' +\r\n obj.averageOutgoingBitrate +\r\n ' kbits/sec' +\r\n ' Current outgoing bitrate: ' +\r\n obj.currentOutgoingBitrate +\r\n ' kbits/sec'\r\n )\r\n } else if (info === 'data_received') {\r\n console.log(\r\n 'Data received: ' +\r\n obj.event.data +\r\n ' type: ' +\r\n obj.event.type +\r\n ' for stream: ' +\r\n obj.streamId\r\n )\r\n return textValue\r\n } else {\r\n console.log(info + ' notification received')\r\n }\r\n },\r\n callbackError: (error, message) => {\r\n const { t } = this.props\r\n const { webSocketConnect } = this.state\r\n console.log('error callback: ' + JSON.stringify(error), message)\r\n let errorMessage = ''\r\n if (error.isTrusted) {\r\n console.log('inside error.isTrusted', error.isTrusted)\r\n return\r\n }\r\n if (typeof message !== 'undefined') {\r\n errorMessage = message\r\n }\r\n // var errorMessage = JSON.stringify(error)\r\n if (error.indexOf('NotFoundError') !== -1) {\r\n errorMessage = t('events:media_not_found')\r\n } else if (\r\n error.indexOf('NotReadableError') !== -1 ||\r\n error.indexOf('TrackStartError') !== -1\r\n ) {\r\n errorMessage = t('events:media_not_access')\r\n } else if (\r\n error.indexOf('OverconstrainedError') !== -1 ||\r\n error.indexOf('ConstraintNotSatisfiedError') !== -1\r\n ) {\r\n errorMessage = t('events:constraint_error')\r\n } else if (\r\n error.indexOf('NotAllowedError') !== -1 ||\r\n error.indexOf('PermissionDeniedError') !== -1\r\n ) {\r\n errorMessage = 'You are not allowed to access camera and mic.'\r\n } else if (error.indexOf('TypeError') !== -1) {\r\n errorMessage = 'Video/Audio is required'\r\n } else if (error.indexOf('ScreenSharePermissionDenied') !== -1) {\r\n errorMessage = 'You are not allowed to access screen share'\r\n this.setState({ selectedOption: 'shareCamera' })\r\n } else if (error.indexOf('WebSocketNotConnected') !== -1) {\r\n console.log('WebSocketNotConnected', webSocketConnect)\r\n if (autoRepublishIntervalJob !== null) {\r\n clearInterval(autoRepublishIntervalJob)\r\n autoRepublishIntervalJob = null\r\n }\r\n if (!webSocketConnect) {\r\n this.setState(\r\n {\r\n webSocketConnect: true\r\n },\r\n () => {\r\n const { webSocketConnect } = this.state\r\n if (webSocketConnect) {\r\n console.log('webSocketConnect true')\r\n // webRTCAdaptor.turnOffCamera()\r\n this.initWebRTCAdaptor(true, autoRepublishEnabled)\r\n // message.info(\r\n // 'Websocket disconnected. trying to connect automatically'\r\n // )\r\n }\r\n }\r\n )\r\n }\r\n } else if (error.indexOf('streamIdInUse') !== -1) {\r\n console.log('streamIdInUse')\r\n } else {\r\n errorMessage = t('general:something_went_wrong')\r\n }\r\n // Object.keys(errorMessage).length > 0 && alert(errorMessage)\r\n console.log('errorMessage: ', errorMessage)\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n const {\r\n selectedOption,\r\n showVideo,\r\n disableRadio,\r\n showPrompt,\r\n loading,\r\n hasFinished\r\n } = this.state\r\n const { t } = this.props\r\n console.log('autoRepublishIntervalJob render', autoRepublishIntervalJob)\r\n console.log('hasFinished render', hasFinished)\r\n return (\r\n \r\n
*/}\r\n Internet connection lost
\r\n\r\n <>\r\n {\r\n prompt = window.confirm('The broadcast is ongoing. Do you really want to navigate away from this page?')\r\n console.log('prompt value: ', prompt)\r\n if(prompt){\r\n console.log('if prompt value: ')\r\n if(webRTCAdaptor){\r\n webRTCAdaptor.stop(playStream)\r\n }\r\n return prompt\r\n } else {\r\n console.log('else prompt value: ')\r\n return false\r\n }\r\n }}\r\n />\r\n \r\n \r\n
\r\n {showRetry && (\r\n \r\n {t('v2:currently_broadcaster_unavailable')}\r\n \r\n )}\r\n {isLoading && (\r\n \r\n {t('general:loading')}\r\n \r\n )}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default NetworkDetection(AntPlayer)\r\n","import React, { Component } from 'react'\r\nimport { Prompt } from 'react-router-dom'\r\nimport { WebRTCAdaptor } from './webrtcAdapter'\r\nimport { config } from '../../../../../constants'\r\nimport { Row, Tooltip, message, Modal } from 'antd'\r\nimport { NetworkDetection } from '../NetworkDetection'\r\nimport cameraOff from '../../assets/camera_off.svg'\r\nimport cameraOn from '../../assets/camera_on.svg'\r\nimport micOff from '../../assets/mic_off.svg'\r\nimport micOn from '../../assets/mic_on.svg'\r\nimport join from '../../assets/join.svg'\r\nimport leave from '../../assets/leave.svg'\r\nimport shareScreenLogo from '../../assets/share_screen.svg'\r\nimport stopShareScreenLogo from '../../assets/stop_screen_share.svg'\r\nimport ShareScreenCamera from '../../assets/share_screen_camera.svg'\r\nimport StopShareScreenCamera from '../../assets/stop_share_screen_camera.svg'\r\nimport { Card } from '../../../../../components/Card/styled'\r\nimport '../../../../../components/Card/Card.scss'\r\nimport { api } from '../../../../../services'\r\n\r\nmessage.config({\r\n top: 100,\r\n duration: 5,\r\n maxCount: 1\r\n})\r\n\r\n/* const pcConfig = {\r\n iceServers: [\r\n {\r\n urls: `${config.turnURL}`, // A TURN server\r\n username: 'sharelookmahesh',\r\n credential: 'mahesh@12345'\r\n }\r\n ]\r\n} */\r\n\r\nconst pcConfig = {\r\n iceServers: [\r\n {\r\n urls: 'turn:3.84.124.47', // A TURN server\r\n username: 'mahesh',\r\n credential: 'mahesh@123'\r\n },\r\n {\r\n urls: 'stun:stun.l.google.com:19302'\r\n }\r\n ]\r\n}\r\n\r\n/*const pcConfig_my =\r\n {\r\n iceServers: [\r\n {\r\n urls: 'turn:52.207.57.21', // A TURN server\r\n username: 'mahesh',\r\n credential: 'mahesh@123'\r\n },\r\n {\r\n 'urls': 'stun:stun.l.google.com:19302'\r\n }\r\n ]\r\n }*/\r\n\r\nconst sdpConstraints = {\r\n OfferToReceiveAudio: true,\r\n OfferToReceiveVideo: true\r\n}\r\n\r\nlet mediaConstraints = {\r\n video: {\r\n width: 426,\r\n height: 245,\r\n frameRate: 15\r\n },\r\n audio: true\r\n}\r\n\r\nlet webRTCAdaptor = null\r\n// let mediaRecorder = null\r\nlet localStream = null\r\nlet chunks = []\r\nlet prompt = null\r\n\r\ndeclare var MediaRecorder: any\r\ndeclare var Blob: any\r\n\r\nclass AntPeerService extends Component {\r\n state = {\r\n showVideo: false,\r\n isJoined: false,\r\n isCameraOff: false,\r\n isMicOff: false,\r\n hasParticipant: null,\r\n hasHost: null,\r\n isShareScreen: false,\r\n isShareScreenCamera: false,\r\n hasStarted: false,\r\n localvideoClassName: '',\r\n error: '',\r\n canShowModal: false,\r\n showPrompt: false,\r\n isFirstParticipantToLeave: false\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const { hasStarted } = this.state\r\n // const { isDurationExceed } = this.props\r\n if (prevState.hasStarted !== hasStarted) {\r\n if (hasStarted) {\r\n this.handleChangeClass('localvideo')\r\n } else {\r\n this.handleChangeClass('')\r\n }\r\n }\r\n // if (\r\n // prevProps.isDurationExceed !== isDurationExceed &&\r\n // isDurationExceed === 'yes'\r\n // ) {\r\n // setTimeout(() => {\r\n // this.leave()\r\n // }, 2000)\r\n // }\r\n }\r\n\r\n componentWillUnmount() {\r\n if (prompt && this.state.showVideo) {\r\n console.log('unmount', prompt)\r\n this.leave()\r\n prompt = null\r\n }\r\n }\r\n\r\n initializeLocalStream = () => {\r\n localStream = webRTCAdaptor.localVideo\r\n // localStream = webRTCAdaptor.localStream\r\n console.log('initializeLocalStream localStream:', localStream)\r\n }\r\n\r\n startRecording = () => {\r\n if (localStream !== null) {\r\n console.log('startRecording localStream:', localStream)\r\n let mediaRecorder = new MediaRecorder(localStream.captureStream(30))\r\n // let mediaRecorder = new MediaRecorder(localStream)\r\n let mimeType = mediaRecorder.mimeType\r\n\r\n console.log('mimeType:', mimeType)\r\n\r\n mediaRecorder.ondataavailable = function(e) {\r\n console.log('event callback: ', e)\r\n chunks.push(e.data)\r\n }\r\n\r\n mediaRecorder.onstop = function() {\r\n let blob = new Blob(chunks, {\r\n type: 'video/mp4'\r\n })\r\n let url = URL.createObjectURL(blob)\r\n let a = document.createElement('a')\r\n document.body.appendChild(a)\r\n a.style = 'display: none'\r\n a.href = url\r\n a.download = 'test.mp4'\r\n a.click()\r\n window.URL.revokeObjectURL(url)\r\n }\r\n\r\n mediaRecorder.start(10)\r\n }\r\n }\r\n\r\n handleChangeClass = classname => {\r\n this.setState({ localvideoClassName: classname })\r\n }\r\n\r\n initService = () => {\r\n const {\r\n calculateStopTime,\r\n calculateWarnTime,\r\n onStreamStopped,\r\n handleBroadcastChange,\r\n streamId,\r\n stopstream\r\n } = this.props\r\n webRTCAdaptor = new WebRTCAdaptor({\r\n websocket_url: config.antWSURL,\r\n mediaConstraints: mediaConstraints,\r\n peerconnection_config: pcConfig,\r\n sdp_constraints: sdpConstraints,\r\n localVideoId: 'localVideo',\r\n remoteVideoId: 'remoteVideo',\r\n cameraLocation: 'bottom',\r\n debug: true,\r\n bandwidth: 900,\r\n streamId: streamId,\r\n callback: info => {\r\n console.log('info', info)\r\n if (info === 'initialized') {\r\n console.log('initialized')\r\n webRTCAdaptor.join(streamId)\r\n // this.initializeLocalStream()\r\n } else if (info === 'joined') {\r\n // joined the stream\r\n console.log('joined')\r\n this.setState({\r\n showPrompt: true\r\n })\r\n // this.startRecording()\r\n } else if (info === 'leaved') {\r\n // leaved the stream\r\n console.log('leaved')\r\n /* if (mediaRecorder !== null) {\r\n mediaRecorder.stop()\r\n } */\r\n } else if (info === 'start') {\r\n this.handleStartApi()\r\n console.log('started p2p')\r\n } else if (info === 'screen_share_stopped') {\r\n this.setState({\r\n isShareScreen: false,\r\n isShareScreenCamera: false\r\n })\r\n console.log('screen_share_stopped')\r\n } else if (info === 'stop') {\r\n console.log('stopped')\r\n const { isFirstParticipantToLeave } = this.state\r\n prompt = false\r\n this.setState(\r\n {\r\n isJoined: false,\r\n isCameraOff: false,\r\n isMicOff: false,\r\n showVideo: false,\r\n hasStarted: false,\r\n showPrompt: false\r\n },\r\n () => {\r\n if (!isFirstParticipantToLeave) {\r\n onStreamStopped()\r\n handleBroadcastChange()\r\n stopstream()\r\n }\r\n }\r\n )\r\n } else if (info === 'takeConfiguration') {\r\n // joined the stream\r\n console.log('\"takeConfiguration\"')\r\n calculateStopTime()\r\n calculateWarnTime()\r\n this.setState({\r\n hasStarted: true\r\n })\r\n }\r\n },\r\n callbackError: error => {\r\n // some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError\r\n const { t } = this.props\r\n console.log('error callback: ' + error)\r\n this.setState(\r\n { error, isShareScreen: false, isShareScreenCamera: false },\r\n () => {\r\n if (error === 'ScreenSharePermissionDenied') {\r\n message.error(t('events:screen_share_denied'))\r\n }\r\n }\r\n )\r\n // alert(error)\r\n }\r\n })\r\n }\r\n\r\n join = () => {\r\n const { handleBroadcastChange } = this.props\r\n this.setState({ isJoined: true, showVideo: true }, () => {\r\n handleBroadcastChange()\r\n this.initService()\r\n })\r\n }\r\n\r\n leave = () => {\r\n const { streamId } = this.props\r\n webRTCAdaptor.leave(streamId)\r\n webRTCAdaptor.turnOffCamera()\r\n this.handleStopApi()\r\n }\r\n\r\n toggleModal = () => {\r\n this.setState(state => ({ canShowModal: !state.canShowModal }))\r\n }\r\n\r\n handleOk = () => {\r\n const { stopstream, onStreamStopped, handleBroadcastChange } = this.props\r\n stopstream()\r\n this.toggleModal()\r\n handleBroadcastChange()\r\n this.leave()\r\n onStreamStopped()\r\n this.setState({\r\n isJoined: false,\r\n showVideo: false,\r\n isFirstParticipantToLeave: true\r\n })\r\n }\r\n\r\n turnOffLocalCamera = () => {\r\n this.setState({ isCameraOff: true }, () => {\r\n webRTCAdaptor.turnOffLocalCamera()\r\n })\r\n }\r\n\r\n turnOnLocalCamera = () => {\r\n this.setState({ isCameraOff: false }, () => {\r\n webRTCAdaptor.turnOnLocalCamera()\r\n })\r\n }\r\n\r\n muteLocalMic = () => {\r\n this.setState({ isMicOff: true }, () => {\r\n webRTCAdaptor.muteLocalMic()\r\n })\r\n }\r\n\r\n unmuteLocalMic = () => {\r\n this.setState({ isMicOff: false }, () => {\r\n webRTCAdaptor.unmuteLocalMic()\r\n })\r\n }\r\n\r\n screenShare = () => {\r\n const { streamId } = this.props\r\n const { isShareScreen } = this.state\r\n if (!isShareScreen) {\r\n webRTCAdaptor.switchDesktopCapture(streamId)\r\n this.setState({\r\n isShareScreen: true\r\n })\r\n } else {\r\n webRTCAdaptor.switchVideoCapture(streamId)\r\n this.setState({\r\n isShareScreen: false\r\n })\r\n }\r\n }\r\n\r\n screenShareCamera = () => {\r\n const { streamId } = this.props\r\n const { isShareScreenCamera } = this.state\r\n if (!isShareScreenCamera) {\r\n webRTCAdaptor.switchDesktopCaptureWithCamera(streamId)\r\n this.setState({\r\n isShareScreenCamera: true\r\n })\r\n } else {\r\n webRTCAdaptor.switchVideoCapture(streamId)\r\n this.setState({\r\n isShareScreenCamera: false\r\n })\r\n }\r\n }\r\n\r\n handleStartApi = () => {\r\n const { eventId } = this.props\r\n api.events\r\n .startLiveEvent(eventId)\r\n .then(res => {\r\n if (res.status === 200) {\r\n console.log('response on starting event', res.data)\r\n }\r\n })\r\n .catch(err => {\r\n console.log('error in starting event', err)\r\n })\r\n }\r\n\r\n handleStopApi = () => {\r\n const { eventId } = this.props\r\n api.events\r\n .stopLiveEvent(eventId)\r\n .then(res => {\r\n if (res.status === 200) {\r\n console.log('response on starting event', res.data)\r\n }\r\n })\r\n .catch(err => {\r\n console.log('error in stopping event', err)\r\n })\r\n }\r\n\r\n render() {\r\n const {\r\n showVideo,\r\n isCameraOff,\r\n isMicOff,\r\n isJoined,\r\n localvideoClassName,\r\n isShareScreen,\r\n isShareScreenCamera,\r\n hasStarted,\r\n canShowModal,\r\n showPrompt\r\n } = this.state\r\n const { isStreamStopped, t } = this.props\r\n console.log('peer console', localvideoClassName, 'hasStarted', hasStarted)\r\n\r\n console.log('pcConfig', pcConfig)\r\n console.log('config.turnURL check', config.turnURL)\r\n\r\n return (\r\n \r\n {showVideo && (\r\n <>\r\n {\r\n prompt = window.confirm(t('events:prompt_message'))\r\n return prompt\r\n }}\r\n />\r\n \r\n
\r\n \r\n )}\r\n {!hasStarted && isJoined && (\r\n {t('errors:waiting_to_join')} \r\n )}\r\n {!isStreamStopped && (\r\n \r\n {!isJoined && (\r\n \r\n this.join()}\r\n >\r\n 
\r\n
\r\n \r\n )}\r\n \r\n {isJoined &&\r\n (isShareScreen ? (\r\n \r\n this.screenShare()}\r\n >\r\n 
\r\n
\r\n \r\n ) : (\r\n {t('events:event_modal_warn')}
\r\n {t('events:confirm_message')}\r\n \r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default NetworkDetection(AntPeerService)\r\n","/**\r\n *\r\n * @returns\r\n */\r\n\r\n\r\nexport function WebRTCAdaptor (initialValues) {\r\n class PeerStats {\r\n constructor (streamId) {\r\n this.streamId = streamId\r\n this.totalBytesReceivedCount = 0\r\n this.totalBytesSent = 0\r\n this.packetsLost = 0\r\n this.fractionLost = 0\r\n this.startTime = 0\r\n this.lastBytesReceived = 0\r\n this.lastBytesSent = 0\r\n this.currentTimestamp = 0\r\n this.lastTime = 0\r\n this.timerId = 0\r\n this.firstByteSentCount = 0\r\n this.firstBytesReceivedCount = 0\r\n this.audioLevel = -1\r\n }\r\n\r\n // kbits/sec\r\n get averageOutgoingBitrate () {\r\n return Math.floor(8 * (this.totalBytesSentCount - this.firstByteSentCount) / (this.currentTimestamp - this.startTime))\r\n }\r\n\r\n // kbits/sec\r\n get averageIncomingBitrate () {\r\n return Math.floor(8 * (this.totalBytesReceivedCount - this.firstBytesReceivedCount) / (this.currentTimestamp - this.startTime))\r\n }\r\n\r\n // kbits/sec\r\n get currentOutgoingBitrate () {\r\n return Math.floor(8 * (this.totalBytesSentCount - this.lastBytesSent) / (this.currentTimestamp - this.lastTime))\r\n }\r\n\r\n // kbits/sec\r\n get currentIncomingBitrate () {\r\n return Math.floor(8 * (this.totalBytesReceivedCount - this.lastBytesReceived) / (this.currentTimestamp - this.lastTime))\r\n }\r\n\r\n set currentTime (timestamp) {\r\n this.lastTime = this.currentTimestamp\r\n this.currentTimestamp = timestamp\r\n if (this.startTime === 0) {\r\n this.startTime = timestamp - 1 // do not have zero division error\r\n }\r\n }\r\n\r\n set totalBytesReceived (bytesReceived) {\r\n this.lastBytesReceived = this.totalBytesReceivedCount\r\n this.totalBytesReceivedCount = bytesReceived\r\n if (this.firstBytesReceivedCount === 0) {\r\n this.firstBytesReceivedCount = bytesReceived\r\n }\r\n }\r\n\r\n set totalBytesSent (bytesSent) {\r\n this.lastBytesSent = this.totalBytesSentCount\r\n this.totalBytesSentCount = bytesSent\r\n if (this.firstByteSentCount === 0) {\r\n this.firstByteSentCount = bytesSent\r\n }\r\n }\r\n }\r\n\r\n var thiz = this\r\n thiz.peerconnection_config = null\r\n thiz.sdp_constraints = null\r\n thiz.remotePeerConnection = []\r\n thiz.remotePeerConnectionStats = []\r\n thiz.remoteDescriptionSet = []\r\n thiz.iceCandidateList = []\r\n thiz.webSocketAdaptor = null\r\n thiz.roomName = null\r\n thiz.videoTrackSender = null\r\n thiz.audioTrackSender = null\r\n thiz.playStreamId = []\r\n thiz.micGainNode = null\r\n thiz.localStream = null\r\n thiz.bandwidth = 200 // default bandwidth kbps\r\n thiz.isMultiPeer = false // used for multiple peer client\r\n thiz.multiPeerStreamId = null // used for multiple peer client\r\n thiz.roomTimerId = -1\r\n\r\n thiz.isPlayMode = false\r\n thiz.debug = false\r\n\r\n thiz.publishMode = 'camera' // screen, screen+camera\r\n\r\n /**\r\n * Supported candidate types. Below types are for both sending and receiving candidates.\r\n * It means if when client receives candidate from STUN server, it sends to the server if candidate's protocol\r\n * is in the list. Likely, when client receives remote candidate from server, it adds as ice candidate\r\n * if candidate protocol is in the list below.\r\n */\r\n thiz.candidateTypes = ['udp', 'tcp']\r\n\r\n thiz.desktopStream = null\r\n\r\n thiz.cameraVideoObject = null\r\n\r\n /**\r\n * The cam_location below is effective when camera and screen is send at the same time.\r\n * possible values are top and bottom. It's on right all the time\r\n */\r\n thiz.camera_location = 'top'\r\n\r\n /**\r\n * The cam_margin below is effective when camera and screen is send at the same time.\r\n * This is the margin value in px from the edges\r\n */\r\n thiz.camera_margin = 15\r\n\r\n /**\r\n * Thiz camera_percent is how large the camera view appear on the screen. It's %15 by default.\r\n */\r\n thiz.camera_percent = 15\r\n\r\n for (var key in initialValues) {\r\n if (initialValues.hasOwnProperty(key)) {\r\n this[key] = initialValues[key]\r\n }\r\n }\r\n\r\n thiz.localVideo = document.getElementById(thiz.localVideoId)\r\n thiz.remoteVideo = document.getElementById(thiz.remoteVideoId)\r\n\r\n // It should be compatible with previous version\r\n if (thiz.mediaConstraints.video === 'camera') {\r\n thiz.publishMode = 'camera'\r\n } else if (thiz.mediaConstraints.video === 'screen') {\r\n thiz.publishMode = 'screen'\r\n } else if (thiz.mediaConstraints.video === 'screen+camera') {\r\n thiz.publishMode = 'screen+camera'\r\n }\r\n\r\n if (!('WebSocket' in window)) {\r\n console.log('WebSocket not supported.')\r\n thiz.callbackError('WebSocketNotSupported')\r\n return\r\n }\r\n\r\n if (typeof navigator.mediaDevices === 'undefined' && thiz.isPlayMode === false) {\r\n console.log('Cannot open camera and mic because of unsecure context. Please Install SSL(https)')\r\n thiz.callbackError('UnsecureContext')\r\n return\r\n }\r\n\r\n this.setDesktopwithCameraSource = function (stream, streamId, audioStream, onEndedCallback) {\r\n thiz.desktopStream = stream\r\n\r\n navigator.mediaDevices.getUserMedia({ video: true, audio: false })\r\n .then(function (cameraStream) {\r\n // create a canvas element\r\n var canvas = document.createElement('canvas')\r\n var canvasContext = canvas.getContext('2d')\r\n\r\n // create video element for screen\r\n // var screenVideo = document.getElementById('sourceVideo');\r\n var screenVideo = document.createElement('video')\r\n // TODO: check audio track\r\n screenVideo.srcObject = stream\r\n screenVideo.play()\r\n // create video element for camera\r\n var cameraVideo = document.createElement('video')\r\n // TODO: check audio track\r\n cameraVideo.srcObject = cameraStream\r\n cameraVideo.play()\r\n var canvasStream = canvas.captureStream(15)\r\n canvasStream.addTrack(audioStream.getAudioTracks()[0])\r\n\r\n if (thiz.localStream === null) {\r\n stream.addTrack(audioStream.getAudioTracks()[0])\r\n thiz.gotStream(canvasStream)\r\n } else {\r\n thiz.updateVideoTrack(canvasStream, streamId, thiz.mediaConstraints, onended, null)\r\n }\r\n\r\n // update the canvas\r\n setInterval(function () {\r\n // draw screen to canvas\r\n canvas.width = screenVideo.videoWidth\r\n canvas.height = screenVideo.videoHeight\r\n canvasContext.drawImage(screenVideo, 0, 0, canvas.width, canvas.height)\r\n\r\n var cameraWidth = screenVideo.videoWidth * (thiz.camera_percent / 100)\r\n var cameraHeight = (cameraVideo.videoHeight / cameraVideo.videoWidth) * cameraWidth\r\n\r\n var positionX = (canvas.width - cameraWidth) - thiz.camera_margin\r\n var positionY\r\n\r\n if (thiz.camera_location === 'top') {\r\n positionY = thiz.camera_margin\r\n } else { // if not top, make it bottom\r\n // draw camera on right bottom corner\r\n positionY = (canvas.height - cameraHeight) - thiz.camera_margin\r\n }\r\n canvasContext.drawImage(cameraVideo, positionX, positionY, cameraWidth, cameraHeight)\r\n }, 66)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }\r\n\r\n this.prepareStreamTracks = function (mediaConstraints, audioConstraint, stream, streamId) {\r\n // this trick, getting audio and video separately, make us add or remove tracks on the fly\r\n var audioTrack = stream.getAudioTracks()\r\n if (audioTrack.length > 0) {\r\n stream.removeTrack(audioTrack[0])\r\n }\r\n\r\n // now get only audio to add this stream\r\n if (audioConstraint !=='undefined' && audioConstraint !==false) {\r\n var media_audio_constraint = { audio: audioConstraint }\r\n navigator.mediaDevices.getUserMedia(media_audio_constraint)\r\n .then(function (audioStream) {\r\n // add callback if desktop is sharing\r\n\r\n var onended = function (event) {\r\n thiz.callback('screen_share_stopped')\r\n thiz.setVideoCameraSource(streamId, mediaConstraints, null, true)\r\n }\r\n\r\n if (thiz.publishMode === 'screen') {\r\n thiz.updateVideoTrack(stream, streamId, mediaConstraints, onended, true)\r\n } else if (thiz.publishMode === 'screen+camera') {\r\n thiz.setDesktopwithCameraSource(stream, streamId, audioStream, onended)\r\n } else {\r\n stream.addTrack(audioStream.getAudioTracks()[0])\r\n thiz.gotStream(stream)\r\n }\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n } else {\r\n // stream.addTrack(audioStream.getAudioTracks()[0])\r\n thiz.gotStream(stream)\r\n }\r\n }\r\n\r\n /**\r\n * Get user media\r\n */\r\n this.getUserMedia = function (mediaConstraints, audioConstraint, streamId) {\r\n // Check Media Constraint video value screen or screen + camera\r\n if (thiz.publishMode === 'screen+camera' || thiz.publishMode === 'screen') {\r\n let mediaConstraintsForScreen = {\r\n video: {\r\n 'width': 1280,\r\n 'height': 1024,\r\n 'frameRate': 20\r\n },\r\n audio: true\r\n }\r\n navigator.mediaDevices.getDisplayMedia(mediaConstraintsForScreen)\r\n .then(function (stream) {\r\n thiz.prepareStreamTracks(mediaConstraintsForScreen, audioConstraint, stream, streamId)\r\n })\r\n .catch(function (error) {\r\n if (error.name === 'NotAllowedError') {\r\n console.debug('Permission denied error')\r\n thiz.callbackError('ScreenSharePermissionDenied')\r\n\r\n // Redirect Default Stream Camera\r\n if (thiz.localStream === null) {\r\n var mediaConstraints = {\r\n video: true,\r\n audio: true\r\n }\r\n\r\n thiz.openStream(mediaConstraints)\r\n } else {\r\n thiz.switchVideoCameraCapture(streamId)\r\n }\r\n } else {\r\n thiz.callbackError(error.name, error.message)\r\n }\r\n })\r\n }\r\n\r\n // If mediaConstraints only user camera\r\n else {\r\n navigator.mediaDevices.getUserMedia(mediaConstraints)\r\n .then(function (stream) {\r\n thiz.prepareStreamTracks(mediaConstraints, audioConstraint, stream, streamId)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }\r\n }\r\n\r\n /**\r\n * Open media stream, it may be screen, camera or audio\r\n */\r\n this.openStream = function (mediaConstraints) {\r\n thiz.mediaConstraints = mediaConstraints\r\n var audioConstraint = false\r\n if (typeof mediaConstraints.audio !== 'undefined' && mediaConstraints.audio !==false) {\r\n audioConstraint = mediaConstraints.audio\r\n }\r\n\r\n if (typeof mediaConstraints.video !== 'undefined') {\r\n thiz.getUserMedia(mediaConstraints, audioConstraint)\r\n } else {\r\n console.error('MediaConstraint video is not defined')\r\n thiz.callbackError('media_constraint_video_not_defined')\r\n }\r\n }\r\n\r\n /**\r\n * Closes stream, if you want to stop peer connection, call stop(streamId)\r\n */\r\n this.closeStream = function () {\r\n thiz.localStream.getVideoTracks().forEach((track) => {\r\n track.onended = null\r\n track.stop()\r\n })\r\n\r\n thiz.localStream.getAudioTracks().forEach((track) => {\r\n track.onended = null\r\n track.stop()\r\n })\r\n }\r\n\r\n /**\r\n * Checks browser supports screen share feature\r\n * if exist it calls callback with \"browser_screen_share_supported\"\r\n */\r\n\r\n this.checkBrowserScreenShareSupported = function () {\r\n if ((typeof navigator.mediaDevices !== 'undefined' && navigator.mediaDevices.getDisplayMedia) || navigator.getDisplayMedia) {\r\n thiz.callback('browser_screen_share_supported')\r\n }\r\n }\r\n\r\n /*\r\n * Call check browser support. Below function is called when this class is created\r\n */\r\n\r\n thiz.checkBrowserScreenShareSupported()\r\n\r\n /*\r\n * Below lines are executed as well when this class is created\r\n */\r\n if (!this.isPlayMode && typeof thiz.mediaConstraints !== 'undefined' && this.localStream === null) {\r\n if (typeof thiz.mediaConstraints.video !== 'undefined' && thiz.mediaConstraints.video !==false) {\r\n // if it is not play mode and media constraint is defined, try to get user media\r\n if (thiz.mediaConstraints.audio.mandatory) {\r\n // this case captures mic and video(audio(screen audio) + video(screen)) and then provide mute/unmute mic with\r\n // enableMicInMixedAudio\r\n navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function (micStream) {\r\n navigator.mediaDevices.getUserMedia(thiz.mediaConstraints)\r\n .then(function (stream) {\r\n // console.debug(\"audio stream track count: \" + audioStream.getAudioTracks().length);\r\n\r\n var audioContext = new AudioContext()\r\n var desktopSoundGainNode = audioContext.createGain()\r\n\r\n desktopSoundGainNode.gain.value = 1\r\n\r\n var audioDestionation = audioContext.createMediaStreamDestination()\r\n var audioSource = audioContext.createMediaStreamSource(stream)\r\n\r\n audioSource.connect(desktopSoundGainNode)\r\n\r\n thiz.micGainNode = audioContext.createGain()\r\n thiz.micGainNode.gain.value = 1\r\n var audioSource2 = audioContext.createMediaStreamSource(micStream)\r\n audioSource2.connect(thiz.micGainNode)\r\n\r\n desktopSoundGainNode.connect(audioDestionation)\r\n thiz.micGainNode.connect(audioDestionation)\r\n\r\n stream.removeTrack(stream.getAudioTracks()[0])\r\n audioDestionation.stream.getAudioTracks().forEach(function (track) {\r\n stream.addTrack(track)\r\n })\r\n\r\n console.debug('Running gotStream')\r\n thiz.gotStream(stream)\r\n }).catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }).catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n } else {\r\n // most of the times, this statement runs\r\n thiz.openStream(thiz.mediaConstraints, thiz.mode)\r\n }\r\n } else {\r\n // get only audio\r\n var media_audio_constraint = { audio: thiz.mediaConstraints.audio }\r\n navigator.mediaDevices.getUserMedia(media_audio_constraint)\r\n .then(function (stream) {\r\n thiz.gotStream(stream)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }\r\n } else {\r\n // just playing, it does not open any stream\r\n if (thiz.webSocketAdaptor === null || thiz.webSocketAdaptor.isConnected() === false) {\r\n thiz.webSocketAdaptor = new WebSocketAdaptor()\r\n }\r\n }\r\n\r\n this.enableMicInMixedAudio = function (enable) {\r\n if (thiz.micGainNode !==null) {\r\n if (enable) {\r\n thiz.micGainNode.gain.value = 1\r\n } else {\r\n thiz.micGainNode.gain.value = 0\r\n }\r\n }\r\n }\r\n\r\n this.publish = function (streamId, token) {\r\n var jsCmd = {\r\n command: 'publish',\r\n streamId: streamId,\r\n token: token,\r\n video: thiz.localStream.getVideoTracks().length > 0,\r\n audio: thiz.localStream.getAudioTracks().length > 0\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.joinRoom = function (roomName, streamId) {\r\n thiz.roomName = roomName\r\n\r\n var jsCmd = {\r\n command: 'joinRoom',\r\n room: roomName,\r\n streamId: streamId\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.play = function (streamId, token, roomId, enableTracks) {\r\n thiz.playStreamId.push(streamId)\r\n var jsCmd =\r\n {\r\n command: 'play',\r\n streamId: streamId,\r\n token: token,\r\n room: roomId,\r\n trackList: enableTracks\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.stop = function (streamId) {\r\n thiz.closePeerConnection(streamId)\r\n\r\n var jsCmd = {\r\n command: 'stop',\r\n streamId: streamId\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.join = function (streamId) {\r\n var jsCmd = {\r\n command: 'join',\r\n streamId: streamId,\r\n multiPeer: thiz.isMultiPeer && thiz.multiPeerStreamId === null,\r\n mode: thiz.isPlayMode ? 'play' : 'both'\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.leaveFromRoom = function (roomName) {\r\n thiz.roomName = roomName\r\n var jsCmd = {\r\n command: 'leaveFromRoom',\r\n room: roomName\r\n }\r\n console.log('leave request is sent for ' + roomName)\r\n\r\n if (thiz.roomTimerId !==null) {\r\n clearInterval(thiz.roomTimerId)\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.leave = function (streamId) {\r\n var jsCmd = {\r\n command: 'leave',\r\n streamId: thiz.isMultiPeer && thiz.multiPeerStreamId !==null ? thiz.multiPeerStreamId : streamId\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n thiz.closePeerConnection(streamId)\r\n thiz.multiPeerStreamId = null\r\n }\r\n\r\n this.getStreamInfo = function (streamId) {\r\n console.log('getStreamInfo streamId', streamId)\r\n var jsCmd = {\r\n command: 'getStreamInfo',\r\n streamId: streamId\r\n }\r\n if (this.webSocketAdaptor !== undefined) {\r\n console.log('if adapter stream info true')\r\n this.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n }\r\n\r\n this.getRoomInfo = function (roomName, streamId) {\r\n thiz.roomTimerId = setInterval(() => {\r\n var jsCmd = {\r\n command: 'getRoomInfo',\r\n streamId: streamId,\r\n room: roomName\r\n }\r\n\r\n console.log('this.webSocketAdaptor', this.webSocketAdaptor)\r\n\r\n if (this.webSocketAdaptor !== undefined) {\r\n console.log('if adapter room info true')\r\n this.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n }, 5000)\r\n }\r\n\r\n this.enableTrack = function (mainTrackId, trackId, enabled) {\r\n var jsCmd = {\r\n command: 'enableTrack',\r\n streamId: mainTrackId,\r\n trackId: trackId,\r\n enabled: enabled\r\n }\r\n this.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.getTracks = function (streamId, token) {\r\n thiz.playStreamId.push(streamId)\r\n var jsCmd =\r\n {\r\n command: 'getTrackList',\r\n streamId: streamId,\r\n token: token\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.gotStream = function (stream) {\r\n thiz.localStream = stream\r\n thiz.localVideo.srcObject = stream\r\n if (thiz.webSocketAdaptor === null || thiz.webSocketAdaptor.isConnected() === false) {\r\n thiz.webSocketAdaptor = new WebSocketAdaptor()\r\n }\r\n\r\n navigator.mediaDevices.enumerateDevices().then(function (devices) {\r\n let deviceArray = []\r\n\r\n devices.forEach(function (device) {\r\n if (device.kind === 'audioinput' || device.kind === 'videoinput') {\r\n deviceArray.push(device)\r\n }\r\n })\r\n\r\n thiz.callback('available_devices', deviceArray)\r\n }).catch(function (err) {\r\n console.error('Cannot get devices -> error name: ' + err.name + ': ' + err.message)\r\n })\r\n }\r\n\r\n this.switchAudioInputSource = function (streamId, deviceId) {\r\n // stop the track because in some android devices need to close the current camera stream\r\n var audioTrack = thiz.localStream.getAudioTracks()[0]\r\n if (audioTrack) {\r\n audioTrack.stop()\r\n } else {\r\n console.warn('There is no audio track in local stream')\r\n }\r\n\r\n if (typeof deviceId !== 'undefined') {\r\n thiz.mediaConstraints.audio = { 'deviceId': deviceId }\r\n }\r\n thiz.setAudioInputSource(streamId, thiz.mediaConstraints, null, true, deviceId)\r\n }\r\n\r\n this.switchVideoCameraCapture = function (streamId, deviceId) {\r\n // stop the track because in some android devices need to close the current camera stream\r\n var videoTrack = thiz.localStream.getVideoTracks()[0]\r\n if (videoTrack) {\r\n videoTrack.stop()\r\n } else {\r\n console.warn('There is no video track in local stream')\r\n }\r\n\r\n thiz.publishMode = 'camera'\r\n\r\n if (typeof deviceId !== 'undefined') {\r\n thiz.mediaConstraints.video = { 'deviceId': deviceId }\r\n }\r\n thiz.setVideoCameraSource(streamId, thiz.mediaConstraints, null, true, deviceId)\r\n }\r\n\r\n this.switchDesktopCapture = function (streamId) {\r\n thiz.publishMode = 'screen'\r\n\r\n var audioConstraint = false\r\n if (typeof thiz.mediaConstraints.audio !== 'undefined' && thiz.mediaConstraints.audio !==false) {\r\n audioConstraint = thiz.mediaConstraints.audio\r\n }\r\n\r\n thiz.getUserMedia(thiz.mediaConstraints, audioConstraint, streamId)\r\n }\r\n\r\n this.switchDesktopCaptureWithCamera = function (streamId) {\r\n thiz.publishMode = 'screen+camera'\r\n\r\n var audioConstraint = false\r\n if (typeof thiz.mediaConstraints.audio !== 'undefined' && thiz.mediaConstraints.audio !==false) {\r\n audioConstraint = thiz.mediaConstraints.audio\r\n }\r\n thiz.getUserMedia(thiz.mediaConstraints, audioConstraint, streamId)\r\n }\r\n\r\n /**\r\n * This method updates the local stream. It removes existant audio track from the local stream\r\n * and add the audio track in `stream` parameter to the local stream\r\n */\r\n thiz.updateLocalAudioStream = function (stream, onEndedCallback) {\r\n var audioTrack = thiz.localStream.getAudioTracks()[0]\r\n thiz.localStream.removeTrack(audioTrack)\r\n audioTrack.stop()\r\n thiz.localStream.addTrack(stream.getAudioTracks()[0])\r\n thiz.localVideo.srcObject = thiz.localStream\r\n\r\n if (onEndedCallback !==null) {\r\n stream.getAudioTracks()[0].onended = function (event) {\r\n onEndedCallback(event)\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * This method updates the local stream. It removes existant video track from the local stream\r\n * and add the video track in `stream` parameter to the local stream\r\n */\r\n thiz.updateLocalVideoStream = function (stream, onEndedCallback, stopDesktop) {\r\n if (stopDesktop && thiz.desktopStream !==null) {\r\n thiz.desktopStream.getVideoTracks()[0].stop()\r\n }\r\n\r\n var videoTrack = thiz.localStream.getVideoTracks()[0]\r\n thiz.localStream.removeTrack(videoTrack)\r\n videoTrack.stop()\r\n thiz.localStream.addTrack(stream.getVideoTracks()[0])\r\n thiz.localVideo.srcObject = thiz.localStream\r\n\r\n if (onEndedCallback !==null) {\r\n stream.getVideoTracks()[0].onended = function (event) {\r\n onEndedCallback(event)\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * This method sets Audio Input Source.\r\n * It calls updateAudioTrack function for the update local audio stream.\r\n */\r\n this.setAudioInputSource = function (streamId, mediaConstraints, onEndedCallback) {\r\n navigator.mediaDevices.getUserMedia(mediaConstraints)\r\n .then(function (stream) {\r\n thiz.updateAudioTrack(stream, streamId, mediaConstraints, onEndedCallback)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name)\r\n })\r\n }\r\n\r\n /**\r\n * This method sets Video Input Source.\r\n * It calls updateVideoTrack function for the update local video stream.\r\n */\r\n this.setVideoCameraSource = function (streamId, mediaConstraints, onEndedCallback, stopDesktop) {\r\n navigator.mediaDevices.getUserMedia(mediaConstraints)\r\n .then(function (stream) {\r\n thiz.updateVideoTrack(stream, streamId, mediaConstraints, onEndedCallback, stopDesktop)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name)\r\n })\r\n }\r\n\r\n this.updateAudioTrack = function (stream, streamId, mediaConstraints, onEndedCallback) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n var audioTrackSender = thiz.remotePeerConnection[streamId].getSenders().find(function (s) {\r\n return s.track.kind === 'audio'\r\n })\r\n\r\n if (audioTrackSender) {\r\n audioTrackSender.replaceTrack(stream.getAudioTracks()[0]).then(function (result) {\r\n thiz.updateLocalAudioStream(stream, onEndedCallback)\r\n }).catch(function (error) {\r\n console.log(error.name)\r\n })\r\n } else {\r\n console.error('AudioTrackSender is undefined or null')\r\n }\r\n } else {\r\n thiz.updateLocalAudioStream(stream, onEndedCallback)\r\n }\r\n }\r\n\r\n this.updateVideoTrack = function (stream, streamId, mediaConstraints, onEndedCallback, stopDesktop) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n var videoTrackSender = thiz.remotePeerConnection[streamId].getSenders().find(function (s) {\r\n return s.track.kind === 'video'\r\n })\r\n\r\n if (videoTrackSender) {\r\n videoTrackSender.replaceTrack(stream.getVideoTracks()[0]).then(function (result) {\r\n thiz.updateLocalVideoStream(stream, onEndedCallback, stopDesktop)\r\n }).catch(function (error) {\r\n console.log(error.name)\r\n })\r\n } else {\r\n console.error('VideoTrackSender is undefined or null')\r\n }\r\n } else {\r\n thiz.updateLocalVideoStream(stream, onEndedCallback, stopDesktop)\r\n }\r\n }\r\n\r\n this.onTrack = function (event, streamId) {\r\n console.log('onTrack')\r\n if (thiz.remoteVideo !==null) {\r\n // thiz.remoteVideo.srcObject = event.streams[0];\r\n if (thiz.remoteVideo.srcObject !== event.streams[0]) {\r\n thiz.remoteVideo.srcObject = event.streams[0]\r\n console.log('Received remote stream')\r\n }\r\n } else {\r\n var dataObj = {\r\n stream: event.streams[0],\r\n track: event.track,\r\n streamId: streamId\r\n }\r\n thiz.callback('newStreamAvailable', dataObj)\r\n }\r\n }\r\n\r\n this.iceCandidateReceived = function (event, streamId) {\r\n if (event.candidate) {\r\n var protocolSupported = false\r\n\r\n if (event.candidate.candidate === '') {\r\n // event candidate can be received and its value can be \"\".\r\n // don't compare the protocols\r\n protocolSupported = true\r\n } else if (typeof event.candidate.protocol === 'undefined') {\r\n thiz.candidateTypes.forEach(element => {\r\n if (event.candidate.candidate.toLowerCase().includes(element)) {\r\n protocolSupported = true\r\n }\r\n })\r\n } else {\r\n protocolSupported = thiz.candidateTypes.includes(event.candidate.protocol.toLowerCase())\r\n }\r\n\r\n if (protocolSupported) {\r\n var jsCmd = {\r\n command: 'takeCandidate',\r\n streamId: streamId,\r\n label: event.candidate.sdpMLineIndex,\r\n id: event.candidate.sdpMid,\r\n candidate: event.candidate.candidate\r\n }\r\n\r\n if (thiz.debug) {\r\n console.log('sending ice candiate for stream Id ' + streamId)\r\n console.log(JSON.stringify(event.candidate))\r\n }\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n } else {\r\n console.log(\"Candidate's protocol(full sdp: \" + event.candidate.candidate + ') is not supported. Supported protocols: ' + thiz.candidateTypes)\r\n if (event.candidate.candidate !=='') { //\r\n thiz.callbackError('protocol_not_supported', 'Support protocols: ' + thiz.candidateTypes.toString() + ' candidate: ' + event.candidate.candidate)\r\n }\r\n }\r\n } else {\r\n console.log('No event.candidate in the iceCandidate event')\r\n }\r\n }\r\n\r\n this.initDataChannel = function (streamId, dataChannel) {\r\n dataChannel.onerror = (error) => {\r\n console.log('Data Channel Error:', error)\r\n var obj = {\r\n streamId: streamId,\r\n error: error\r\n }\r\n console.log('channel status: ', dataChannel.readyState)\r\n if (dataChannel.readyState !=='closed') {\r\n thiz.callbackError('data_channel_error', obj)\r\n }\r\n }\r\n\r\n dataChannel.onmessage = (event) => {\r\n var obj = {\r\n streamId: streamId,\r\n event: event\r\n }\r\n thiz.callback('data_received', obj)\r\n }\r\n\r\n dataChannel.onopen = () => {\r\n thiz.remotePeerConnection[streamId].dataChannel = dataChannel\r\n console.log('Data channel is opened')\r\n thiz.callback('data_channel_opened', streamId)\r\n }\r\n\r\n dataChannel.onclose = () => {\r\n console.log('Data channel is closed')\r\n thiz.callback('data_channel_closed', streamId)\r\n }\r\n }\r\n\r\n // data channel mode can be \"publish\" , \"play\" or \"peer\" based on this it is decided which way data channel is created\r\n this.initPeerConnection = function (streamId, dataChannelMode) {\r\n if (thiz.remotePeerConnection[streamId] === null) {\r\n var closedStreamId = streamId\r\n console.log('stream id in init peer connection: ' + streamId + ' close stream id: ' + closedStreamId)\r\n thiz.remotePeerConnection[streamId] = new RTCPeerConnection(thiz.peerconnection_config)\r\n thiz.remoteDescriptionSet[streamId] = false\r\n thiz.iceCandidateList[streamId] = []\r\n if (!thiz.playStreamId.includes(streamId)) {\r\n if (thiz.localStream !==null) {\r\n thiz.remotePeerConnection[streamId].addStream(thiz.localStream)\r\n }\r\n }\r\n thiz.remotePeerConnection[streamId].onicecandidate = function (event) {\r\n thiz.iceCandidateReceived(event, closedStreamId)\r\n }\r\n thiz.remotePeerConnection[streamId].ontrack = function (event) {\r\n thiz.onTrack(event, closedStreamId)\r\n }\r\n\r\n if (dataChannelMode === 'publish') {\r\n // open data channel if it's publish mode peer connection\r\n const dataChannelOptions = {\r\n ordered: true\r\n }\r\n if (thiz.remotePeerConnection[streamId].createDataChannel) {\r\n var dataChannel = thiz.remotePeerConnection[streamId].createDataChannel(streamId, dataChannelOptions)\r\n thiz.initDataChannel(streamId, dataChannel)\r\n } else {\r\n console.warn('CreateDataChannel is not supported')\r\n }\r\n } else if (dataChannelMode === 'play') {\r\n // in play mode, server opens the data channel\r\n thiz.remotePeerConnection[streamId].ondatachannel = function (ev) {\r\n thiz.initDataChannel(streamId, ev.channel)\r\n }\r\n } else {\r\n // for peer mode do both for now\r\n const dataChannelOptions = {\r\n ordered: true\r\n }\r\n\r\n if (thiz.remotePeerConnection[streamId].createDataChannel) {\r\n var dataChannelPeer = thiz.remotePeerConnection[streamId].createDataChannel(streamId, dataChannelOptions)\r\n thiz.initDataChannel(streamId, dataChannelPeer)\r\n\r\n thiz.remotePeerConnection[streamId].ondatachannel = function (ev) {\r\n thiz.initDataChannel(streamId, ev.channel)\r\n }\r\n } else {\r\n console.warn('CreateDataChannel is not supported')\r\n }\r\n }\r\n\r\n thiz.remotePeerConnection[streamId].oniceconnectionstatechange = function (event) {\r\n var obj = { state: thiz.remotePeerConnection[streamId].iceConnectionState, streamId: streamId }\r\n thiz.callback('ice_connection_state_changed', obj)\r\n\r\n if (!thiz.isPlayMode) {\r\n if (thiz.remotePeerConnection[streamId].iceConnectionState === 'connected') {\r\n thiz.changeBandwidth(thiz.bandwidth, streamId).then(() => {\r\n console.log('Bandwidth is changed to ' + thiz.bandwidth)\r\n })\r\n .catch(e => console.error(e))\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n this.closePeerConnection = function (streamId) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n if (thiz.remotePeerConnection[streamId].dataChannel !==null) {\r\n thiz.remotePeerConnection[streamId].dataChannel.close()\r\n }\r\n if (thiz.remotePeerConnection[streamId].signalingState !=='closed') {\r\n thiz.remotePeerConnection[streamId].close()\r\n thiz.remotePeerConnection[streamId] = null\r\n delete thiz.remotePeerConnection[streamId]\r\n var playStreamIndex = thiz.playStreamId.indexOf(streamId)\r\n if (playStreamIndex !==-1) {\r\n thiz.playStreamId.splice(playStreamIndex, 1)\r\n }\r\n }\r\n }\r\n\r\n if (thiz.remotePeerConnectionStats[streamId] !==null) {\r\n clearInterval(thiz.remotePeerConnectionStats[streamId].timerId)\r\n delete thiz.remotePeerConnectionStats[streamId]\r\n }\r\n }\r\n\r\n this.signallingState = function (streamId) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n return thiz.remotePeerConnection[streamId].signalingState\r\n }\r\n return null\r\n }\r\n\r\n this.iceConnectionState = function (streamId) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n return thiz.remotePeerConnection[streamId].iceConnectionState\r\n }\r\n return null\r\n }\r\n\r\n this.gotDescription = function (configuration, streamId) {\r\n thiz.remotePeerConnection[streamId]\r\n .setLocalDescription(configuration)\r\n .then(function (responose) {\r\n console.debug('Set local description successfully for stream Id ' + streamId)\r\n\r\n var jsCmd = {\r\n command: 'takeConfiguration',\r\n streamId: streamId,\r\n type: configuration.type,\r\n sdp: configuration.sdp\r\n\r\n }\r\n\r\n if (thiz.debug) {\r\n console.debug('local sdp: ')\r\n console.debug(configuration.sdp)\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }).catch(function (error) {\r\n console.error('Cannot set local description. Error is: ' + error)\r\n })\r\n }\r\n\r\n this.turnOffLocalCamera = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getVideoTracks()[0]\r\n track.enabled = false\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n this.turnOnLocalCamera = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getVideoTracks()[0]\r\n track.enabled = true\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n this.muteLocalMic = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getAudioTracks()[0]\r\n track.enabled = false\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n /**\r\n * if there is audio it calls callbackError with \"AudioAlreadyActive\" parameter\r\n */\r\n this.unmuteLocalMic = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getAudioTracks()[0]\r\n track.enabled = true\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n this.takeConfiguration = function (idOfStream, configuration, typeOfConfiguration) {\r\n var streamId = idOfStream\r\n var type = typeOfConfiguration\r\n var conf = configuration\r\n var isTypeOffer = (type === 'offer')\r\n\r\n var dataChannelMode = 'publish'\r\n if (isTypeOffer) {\r\n dataChannelMode = 'play'\r\n }\r\n\r\n thiz.initPeerConnection(streamId, dataChannelMode)\r\n\r\n thiz.remotePeerConnection[streamId].setRemoteDescription(new RTCSessionDescription({\r\n sdp: conf,\r\n type: type\r\n })).then(function (response) {\r\n if (thiz.debug) {\r\n console.debug('set remote description is succesfull with response: ' + response + ' for stream : ' +\r\n streamId + ' and type: ' + type)\r\n console.debug(conf)\r\n }\r\n\r\n thiz.remoteDescriptionSet[streamId] = true\r\n var length = thiz.iceCandidateList[streamId].length\r\n console.debug('Ice candidate list size to be added: ' + length)\r\n for (var i = 0; i < length; i++) {\r\n thiz.addIceCandidate(streamId, thiz.iceCandidateList[streamId][i])\r\n }\r\n thiz.iceCandidateList[streamId] = []\r\n\r\n if (isTypeOffer) {\r\n // SDP constraints may be different in play mode\r\n console.log('try to create answer for stream id: ' + streamId)\r\n\r\n thiz.remotePeerConnection[streamId].createAnswer(thiz.sdp_constraints)\r\n .then(function (configuration) {\r\n console.log('created answer for stream id: ' + streamId)\r\n thiz.gotDescription(configuration, streamId)\r\n })\r\n .catch(function (error) {\r\n console.error('create answer error :' + error)\r\n })\r\n }\r\n }).catch(function (error) {\r\n if (thiz.debug) {\r\n console.error('set remote description is failed with error: ' + error)\r\n }\r\n if (error.toString().indexOf('InvalidAccessError') > -1 || error.toString().indexOf('setRemoteDescription') > -1) {\r\n /**\r\n * This error generally occurs in codec incompatibility.\r\n * AMS for a now supports H.264 codec. This error happens when some browsers try to open it from VP8.\r\n */\r\n thiz.callbackError('notSetRemoteDescription')\r\n }\r\n })\r\n }\r\n\r\n this.takeCandidate = function (idOfTheStream, tmpLabel, tmpCandidate) {\r\n var streamId = idOfTheStream\r\n var label = tmpLabel\r\n var candidateSdp = tmpCandidate\r\n\r\n var candidate = new RTCIceCandidate({\r\n sdpMLineIndex: label,\r\n candidate: candidateSdp\r\n })\r\n\r\n var dataChannelMode = 'peer'\r\n thiz.initPeerConnection(streamId, dataChannelMode)\r\n\r\n if (thiz.remoteDescriptionSet[streamId] === true) {\r\n thiz.addIceCandidate(streamId, candidate)\r\n } else {\r\n console.debug('Ice candidate is added to list because remote description is not set yet')\r\n thiz.iceCandidateList[streamId].push(candidate)\r\n }\r\n }\r\n\r\n this.addIceCandidate = function (streamId, candidate) {\r\n var protocolSupported = false\r\n if (candidate.candidate === '') {\r\n // candidate can be received and its value can be \"\".\r\n // don't compare the protocols\r\n protocolSupported = true\r\n } else if (typeof candidate.protocol === 'undefined') {\r\n thiz.candidateTypes.forEach(element => {\r\n if (candidate.candidate.toLowerCase().includes(element)) {\r\n protocolSupported = true\r\n }\r\n })\r\n } else {\r\n protocolSupported = thiz.candidateTypes.includes(candidate.protocol.toLowerCase())\r\n }\r\n\r\n if (protocolSupported) {\r\n thiz.remotePeerConnection[streamId].addIceCandidate(candidate)\r\n .then(function (response) {\r\n if (thiz.debug) {\r\n console.log('Candidate is added for stream ' + streamId)\r\n }\r\n })\r\n .catch(function (error) {\r\n console.error('ice candiate cannot be added for stream id: ' + streamId + ' error is: ' + error)\r\n console.error(candidate)\r\n })\r\n } else {\r\n if (thiz.debug) {\r\n console.log(\"Candidate's protocol(\" + candidate.protocol + ') is not supported.' +\r\n 'Candidate: ' + candidate.candidate + ' Supported protocols:' + thiz.candidateTypes)\r\n }\r\n }\r\n }\r\n\r\n this.startPublishing = function (idOfStream) {\r\n var streamId = idOfStream\r\n\r\n thiz.initPeerConnection(streamId, 'publish')\r\n\r\n thiz.remotePeerConnection[streamId].createOffer(thiz.sdp_constraints)\r\n .then(function (configuration) {\r\n thiz.gotDescription(configuration, streamId)\r\n })\r\n .catch(function (error) {\r\n console.error('create offer error for stream id: ' + streamId + ' error: ' + error)\r\n })\r\n }\r\n\r\n /**\r\n * If we have multiple video tracks in coming versions, this method may cause some issues\r\n */\r\n this.getVideoSender = function (streamId) {\r\n var videoSender = null\r\n if (\r\n 'RTCRtpSender' in window &&\r\n 'setParameters' in window.RTCRtpSender.prototype) {\r\n const senders = thiz.remotePeerConnection[streamId].getSenders()\r\n\r\n for (let i = 0; i < senders.length; i++) {\r\n if (senders[i].track !==null && senders[i].track.kind === 'video') {\r\n videoSender = senders[i]\r\n break\r\n }\r\n }\r\n }\r\n return videoSender\r\n }\r\n\r\n /**\r\n * bandwidth is in kbps\r\n */\r\n this.changeBandwidth = function (bandwidth, streamId) {\r\n var errorDefinition = ''\r\n\r\n var videoSender = thiz.getVideoSender(streamId)\r\n\r\n if (videoSender !==null) {\r\n const parameters = videoSender.getParameters()\r\n\r\n if (!parameters.encodings) {\r\n parameters.encodings = [{}]\r\n }\r\n\r\n if (bandwidth === 'unlimited') {\r\n delete parameters.encodings[0].maxBitrate\r\n } else {\r\n parameters.encodings[0].maxBitrate = bandwidth * 1000\r\n }\r\n\r\n return videoSender.setParameters(parameters)\r\n } else {\r\n errorDefinition = 'Video sender not found to change bandwidth'\r\n }\r\n\r\n return Promise.reject(errorDefinition)\r\n }\r\n\r\n this.getStats = function (streamId) {\r\n thiz.remotePeerConnection[streamId].getStats(null).then(stats => {\r\n var bytesReceived = 0\r\n var packetsLost = 0\r\n var fractionLost = 0\r\n var currentTime = 0\r\n var bytesSent = 0\r\n var audioLevel = -1\r\n\r\n stats.forEach(value => {\r\n if (value.type === 'inbound-rtp') {\r\n bytesReceived += value.bytesReceived\r\n packetsLost += value.packetsLost\r\n fractionLost += value.fractionLost\r\n currentTime = value.timestamp\r\n } else if (value.type === 'outbound-rtp') {\r\n bytesSent += value.bytesSent\r\n currentTime = value.timestamp\r\n } else if (value.type === 'track' && typeof value.kind !== 'undefined' && value.kind === 'audio') {\r\n if (typeof value.audioLevel !== 'undefined') {\r\n audioLevel = value.audioLevel\r\n }\r\n }\r\n })\r\n\r\n thiz.remotePeerConnectionStats[streamId].totalBytesReceived = bytesReceived\r\n thiz.remotePeerConnectionStats[streamId].packetsLost = packetsLost\r\n thiz.remotePeerConnectionStats[streamId].fractionLost = fractionLost\r\n thiz.remotePeerConnectionStats[streamId].currentTime = currentTime\r\n thiz.remotePeerConnectionStats[streamId].totalBytesSent = bytesSent\r\n thiz.remotePeerConnectionStats[streamId].audioLevel = audioLevel\r\n\r\n thiz.callback('updated_stats', thiz.remotePeerConnectionStats[streamId])\r\n })\r\n }\r\n\r\n this.enableStats = function (streamId) {\r\n thiz.remotePeerConnectionStats[streamId] = new PeerStats(streamId)\r\n thiz.remotePeerConnectionStats[streamId].timerId = setInterval(() => {\r\n thiz.getStats(streamId)\r\n }, 5000)\r\n }\r\n\r\n /**\r\n * After calling this function, create new WebRTCAdaptor instance, don't use the the same objectone\r\n * Because all streams are closed on server side as well when websocket connection is closed.\r\n */\r\n this.closeWebSocket = function () {\r\n for (var key in thiz.remotePeerConnection) {\r\n thiz.remotePeerConnection[key].close()\r\n }\r\n // free the remote peer connection by initializing again\r\n thiz.remotePeerConnection = []\r\n thiz.webSocketAdaptor.close()\r\n }\r\n\r\n this.peerMessage = function (streamId, definition, data) {\r\n var jsCmd = {\r\n command: 'peerMessageCommand',\r\n streamId: streamId,\r\n definition: definition,\r\n data: data\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.forceStreamQuality = function (streamId, resolution) {\r\n var jsCmd = {\r\n command: 'forceStreamQuality',\r\n streamId: streamId,\r\n streamHeight: resolution\r\n }\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.sendData = function (streamId, message) {\r\n console.log('thiz.remotePeerConnection[streamId]: ', thiz.remotePeerConnection[streamId])\r\n console.log('streamId passing ', streamId)\r\n if (thiz.remotePeerConnection[streamId] !== undefined) {\r\n console.log('if dataChannel true')\r\n var dataChannel = thiz.remotePeerConnection[streamId].dataChannel\r\n dataChannel.send(message)\r\n }\r\n }\r\n\r\n function WebSocketAdaptor () {\r\n var wsConn = new WebSocket(thiz.websocket_url)\r\n\r\n var connected = false\r\n\r\n var pingTimerId = -1\r\n\r\n var clearPingTimer = function () {\r\n if (pingTimerId !==-1) {\r\n if (thiz.debug) {\r\n console.debug('Clearing ping message timer')\r\n }\r\n clearInterval(pingTimerId)\r\n pingTimerId = -1\r\n }\r\n }\r\n\r\n var sendPing = function () {\r\n var jsCmd = {\r\n command: 'ping'\r\n }\r\n wsConn.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.close = function () {\r\n wsConn.close()\r\n }\r\n\r\n wsConn.onopen = function () {\r\n if (thiz.debug) {\r\n console.log('websocket connected')\r\n }\r\n\r\n pingTimerId = setInterval(() => {\r\n sendPing()\r\n }, 4000)\r\n\r\n connected = true\r\n thiz.callback('initialized')\r\n }\r\n\r\n this.send = function (text) {\r\n if (wsConn.readyState === 0 || wsConn.readyState === 2 || wsConn.readyState === 3) {\r\n thiz.callbackError('WebSocketNotConnected')\r\n return\r\n }\r\n wsConn.send(text)\r\n console.log('sent message:' + text)\r\n }\r\n\r\n this.isConnected = function () {\r\n return connected\r\n }\r\n\r\n wsConn.onmessage = function (event) {\r\n var obj = JSON.parse(event.data)\r\n\r\n if (obj.command === 'start') {\r\n // this command is received first, when publishing so playmode is false\r\n\r\n if (thiz.debug) {\r\n console.debug('received start command')\r\n }\r\n\r\n thiz.startPublishing(obj.streamId)\r\n } else if (obj.command === 'takeCandidate') {\r\n if (thiz.debug) {\r\n console.debug('received ice candidate for stream id ' + obj.streamId)\r\n console.debug(obj.candidate)\r\n }\r\n\r\n thiz.takeCandidate(obj.streamId, obj.label, obj.candidate)\r\n } else if (obj.command === 'takeConfiguration') {\r\n if (thiz.debug) {\r\n console.log('received remote description type for stream id: ' + obj.streamId + ' type: ' + obj.type)\r\n }\r\n thiz.takeConfiguration(obj.streamId, obj.sdp, obj.type)\r\n } else if (obj.command === 'stop') {\r\n console.debug('Stop command received')\r\n thiz.closePeerConnection(obj.streamId)\r\n } else if (obj.command === 'error') {\r\n thiz.callbackError(obj.definition)\r\n } else if (obj.command === 'notification') {\r\n thiz.callback(obj.definition, obj)\r\n if (obj.definition === 'play_finished' || obj.definition === 'publish_finished') {\r\n thiz.closePeerConnection(obj.streamId)\r\n }\r\n } else if (obj.command === 'streamInformation') {\r\n thiz.callback(obj.command, obj)\r\n } else if (obj.command === 'roomInformation') {\r\n thiz.callback(obj.command, obj)\r\n } else if (obj.command === 'pong') {\r\n thiz.callback(obj.command)\r\n } else if (obj.command === 'trackList') {\r\n thiz.callback(obj.command, obj)\r\n } else if (obj.command === 'connectWithNewId') {\r\n thiz.multiPeerStreamId = obj.streamId\r\n thiz.join(obj.streamId)\r\n } else if (obj.command === 'peerMessageCommand') {\r\n thiz.callback(obj.command, obj)\r\n }\r\n }\r\n\r\n wsConn.onerror = function (error) {\r\n console.log(' error occured: ' + JSON.stringify(error))\r\n clearPingTimer()\r\n thiz.callbackError(error)\r\n }\r\n\r\n wsConn.onclose = function (event) {\r\n connected = false\r\n console.log('connection closed.')\r\n clearPingTimer()\r\n thiz.callback('closed', event)\r\n }\r\n }\r\n}\r\n","/**\r\n *\r\n * @returns\r\n */\r\n\r\n\r\nexport function WebRTCAdaptorPlay (initialValues) {\r\n class PeerStats {\r\n constructor (streamId) {\r\n this.streamId = streamId\r\n this.totalBytesReceivedCount = 0\r\n this.totalBytesSent = 0\r\n this.packetsLost = 0\r\n this.fractionLost = 0\r\n this.startTime = 0\r\n this.lastBytesReceived = 0\r\n this.lastBytesSent = 0\r\n this.currentTimestamp = 0\r\n this.lastTime = 0\r\n this.timerId = 0\r\n this.firstByteSentCount = 0\r\n this.firstBytesReceivedCount = 0\r\n this.audioLevel = -1\r\n }\r\n\r\n // kbits/sec\r\n get averageOutgoingBitrate () {\r\n return Math.floor(8 * (this.totalBytesSentCount - this.firstByteSentCount) / (this.currentTimestamp - this.startTime))\r\n }\r\n\r\n // kbits/sec\r\n get averageIncomingBitrate () {\r\n return Math.floor(8 * (this.totalBytesReceivedCount - this.firstBytesReceivedCount) / (this.currentTimestamp - this.startTime))\r\n }\r\n\r\n // kbits/sec\r\n get currentOutgoingBitrate () {\r\n return Math.floor(8 * (this.totalBytesSentCount - this.lastBytesSent) / (this.currentTimestamp - this.lastTime))\r\n }\r\n\r\n // kbits/sec\r\n get currentIncomingBitrate () {\r\n return Math.floor(8 * (this.totalBytesReceivedCount - this.lastBytesReceived) / (this.currentTimestamp - this.lastTime))\r\n }\r\n\r\n set currentTime (timestamp) {\r\n this.lastTime = this.currentTimestamp\r\n this.currentTimestamp = timestamp\r\n if (this.startTime === 0) {\r\n this.startTime = timestamp - 1 // do not have zero division error\r\n }\r\n }\r\n\r\n set totalBytesReceived (bytesReceived) {\r\n this.lastBytesReceived = this.totalBytesReceivedCount\r\n this.totalBytesReceivedCount = bytesReceived\r\n if (this.firstBytesReceivedCount === 0) {\r\n this.firstBytesReceivedCount = bytesReceived\r\n }\r\n }\r\n\r\n set totalBytesSent (bytesSent) {\r\n this.lastBytesSent = this.totalBytesSentCount\r\n this.totalBytesSentCount = bytesSent\r\n if (this.firstByteSentCount === 0) {\r\n this.firstByteSentCount = bytesSent\r\n }\r\n }\r\n }\r\n\r\n var thiz = this\r\n thiz.peerconnection_config = null\r\n thiz.sdp_constraints = null\r\n thiz.remotePeerConnection = []\r\n thiz.remotePeerConnectionStats = []\r\n thiz.remoteDescriptionSet = []\r\n thiz.iceCandidateList = []\r\n thiz.webSocketAdaptor = null\r\n thiz.roomName = null\r\n thiz.videoTrackSender = null\r\n thiz.audioTrackSender = null\r\n thiz.playStreamId = []\r\n thiz.micGainNode = null\r\n thiz.localStream = null\r\n thiz.bandwidth = 200 // default bandwidth kbps\r\n thiz.isMultiPeer = false // used for multiple peer client\r\n thiz.multiPeerStreamId = null // used for multiple peer client\r\n thiz.roomTimerId = -1\r\n\r\n thiz.isPlayMode = false\r\n thiz.debug = false\r\n\r\n thiz.publishMode = 'camera' // screen, screen+camera\r\n\r\n /**\r\n * Supported candidate types. Below types are for both sending and receiving candidates.\r\n * It means if when client receives candidate from STUN server, it sends to the server if candidate's protocol\r\n * is in the list. Likely, when client receives remote candidate from server, it adds as ice candidate\r\n * if candidate protocol is in the list below.\r\n */\r\n thiz.candidateTypes = ['udp', 'tcp']\r\n\r\n thiz.desktopStream = null\r\n\r\n thiz.cameraVideoObject = null\r\n\r\n /**\r\n * The cam_location below is effective when camera and screen is send at the same time.\r\n * possible values are top and bottom. It's on right all the time\r\n */\r\n thiz.camera_location = 'top'\r\n\r\n /**\r\n * The cam_margin below is effective when camera and screen is send at the same time.\r\n * This is the margin value in px from the edges\r\n */\r\n thiz.camera_margin = 15\r\n\r\n /**\r\n * Thiz camera_percent is how large the camera view appear on the screen. It's %15 by default.\r\n */\r\n thiz.camera_percent = 15\r\n\r\n for (var key in initialValues) {\r\n if (initialValues.hasOwnProperty(key)) {\r\n this[key] = initialValues[key]\r\n }\r\n }\r\n\r\n thiz.localVideo = document.getElementById(thiz.localVideoId)\r\n thiz.remoteVideo = document.getElementById(thiz.remoteVideoId)\r\n\r\n // It should be compatible with previous version\r\n if (thiz.mediaConstraints.video === 'camera') {\r\n thiz.publishMode = 'camera'\r\n } else if (thiz.mediaConstraints.video === 'screen') {\r\n thiz.publishMode = 'screen'\r\n } else if (thiz.mediaConstraints.video === 'screen+camera') {\r\n thiz.publishMode = 'screen+camera'\r\n }\r\n\r\n if (!('WebSocket' in window)) {\r\n console.log('WebSocket not supported.')\r\n thiz.callbackError('WebSocketNotSupported')\r\n return\r\n }\r\n\r\n if (typeof navigator.mediaDevices === 'undefined' && thiz.isPlayMode === false) {\r\n console.log('Cannot open camera and mic because of unsecure context. Please Install SSL(https)')\r\n thiz.callbackError('UnsecureContext')\r\n return\r\n }\r\n\r\n this.setDesktopwithCameraSource = function (stream, streamId, audioStream, onEndedCallback) {\r\n thiz.desktopStream = stream\r\n\r\n navigator.mediaDevices.getUserMedia({ video: true, audio: false })\r\n .then(function (cameraStream) {\r\n // create a canvas element\r\n var canvas = document.createElement('canvas')\r\n var canvasContext = canvas.getContext('2d')\r\n\r\n // create video element for screen\r\n // var screenVideo = document.getElementById('sourceVideo');\r\n var screenVideo = document.createElement('video')\r\n // TODO: check audio track\r\n screenVideo.srcObject = stream\r\n screenVideo.play()\r\n // create video element for camera\r\n var cameraVideo = document.createElement('video')\r\n // TODO: check audio track\r\n cameraVideo.srcObject = cameraStream\r\n cameraVideo.play()\r\n var canvasStream = canvas.captureStream(15)\r\n canvasStream.addTrack(audioStream.getAudioTracks()[0])\r\n\r\n if (thiz.localStream === null) {\r\n stream.addTrack(audioStream.getAudioTracks()[0])\r\n thiz.gotStream(canvasStream)\r\n } else {\r\n thiz.updateVideoTrack(canvasStream, streamId, thiz.mediaConstraints, onended, null)\r\n }\r\n\r\n // update the canvas\r\n setInterval(function () {\r\n // draw screen to canvas\r\n canvas.width = screenVideo.videoWidth\r\n canvas.height = screenVideo.videoHeight\r\n canvasContext.drawImage(screenVideo, 0, 0, canvas.width, canvas.height)\r\n\r\n var cameraWidth = screenVideo.videoWidth * (thiz.camera_percent / 100)\r\n var cameraHeight = (cameraVideo.videoHeight / cameraVideo.videoWidth) * cameraWidth\r\n\r\n var positionX = (canvas.width - cameraWidth) - thiz.camera_margin\r\n var positionY\r\n\r\n if (thiz.camera_location === 'top') {\r\n positionY = thiz.camera_margin\r\n } else { // if not top, make it bottom\r\n // draw camera on right bottom corner\r\n positionY = (canvas.height - cameraHeight) - thiz.camera_margin\r\n }\r\n canvasContext.drawImage(cameraVideo, positionX, positionY, cameraWidth, cameraHeight)\r\n }, 66)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }\r\n\r\n this.prepareStreamTracks = function (mediaConstraints, audioConstraint, stream, streamId) {\r\n // this trick, getting audio and video separately, make us add or remove tracks on the fly\r\n var audioTrack = stream.getAudioTracks()\r\n if (audioTrack.length > 0) {\r\n stream.removeTrack(audioTrack[0])\r\n }\r\n\r\n // now get only audio to add this stream\r\n if (audioConstraint !=='undefined' && audioConstraint !==false) {\r\n var media_audio_constraint = { audio: audioConstraint }\r\n navigator.mediaDevices.getUserMedia(media_audio_constraint)\r\n .then(function (audioStream) {\r\n // add callback if desktop is sharing\r\n\r\n var onended = function (event) {\r\n thiz.callback('screen_share_stopped')\r\n thiz.setVideoCameraSource(streamId, mediaConstraints, null, true)\r\n }\r\n\r\n if (thiz.publishMode === 'screen') {\r\n thiz.updateVideoTrack(stream, streamId, mediaConstraints, onended, true)\r\n } else if (thiz.publishMode === 'screen+camera') {\r\n thiz.setDesktopwithCameraSource(stream, streamId, audioStream, onended)\r\n } else {\r\n stream.addTrack(audioStream.getAudioTracks()[0])\r\n thiz.gotStream(stream)\r\n }\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n } else {\r\n // stream.addTrack(audioStream.getAudioTracks()[0])\r\n thiz.gotStream(stream)\r\n }\r\n }\r\n\r\n /**\r\n * Get user media\r\n */\r\n this.getUserMedia = function (mediaConstraints, audioConstraint, streamId) {\r\n // Check Media Constraint video value screen or screen + camera\r\n if (thiz.publishMode === 'screen+camera' || thiz.publishMode === 'screen') {\r\n let mediaConstraintsForScreen = {\r\n video: {\r\n 'width': 1280,\r\n 'height': 1024,\r\n 'frameRate': 20\r\n },\r\n audio: true\r\n }\r\n navigator.mediaDevices.getDisplayMedia(mediaConstraintsForScreen)\r\n .then(function (stream) {\r\n thiz.prepareStreamTracks(mediaConstraintsForScreen, audioConstraint, stream, streamId)\r\n })\r\n .catch(function (error) {\r\n if (error.name === 'NotAllowedError') {\r\n console.debug('Permission denied error')\r\n thiz.callbackError('ScreenSharePermissionDenied')\r\n\r\n // Redirect Default Stream Camera\r\n if (thiz.localStream === null) {\r\n var mediaConstraints = {\r\n video: true,\r\n audio: true\r\n }\r\n\r\n thiz.openStream(mediaConstraints)\r\n } else {\r\n thiz.switchVideoCameraCapture(streamId)\r\n }\r\n } else {\r\n thiz.callbackError(error.name, error.message)\r\n }\r\n })\r\n }\r\n\r\n // If mediaConstraints only user camera\r\n else {\r\n navigator.mediaDevices.getUserMedia(mediaConstraints)\r\n .then(function (stream) {\r\n thiz.prepareStreamTracks(mediaConstraints, audioConstraint, stream, streamId)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }\r\n }\r\n\r\n /**\r\n * Open media stream, it may be screen, camera or audio\r\n */\r\n this.openStream = function (mediaConstraints) {\r\n thiz.mediaConstraints = mediaConstraints\r\n var audioConstraint = false\r\n if (typeof mediaConstraints.audio !== 'undefined' && mediaConstraints.audio !==false) {\r\n audioConstraint = mediaConstraints.audio\r\n }\r\n\r\n if (typeof mediaConstraints.video !== 'undefined') {\r\n thiz.getUserMedia(mediaConstraints, audioConstraint)\r\n } else {\r\n console.error('MediaConstraint video is not defined')\r\n thiz.callbackError('media_constraint_video_not_defined')\r\n }\r\n }\r\n\r\n /**\r\n * Closes stream, if you want to stop peer connection, call stop(streamId)\r\n */\r\n this.closeStream = function () {\r\n thiz.localStream.getVideoTracks().forEach((track) => {\r\n track.onended = null\r\n track.stop()\r\n })\r\n\r\n thiz.localStream.getAudioTracks().forEach((track) => {\r\n track.onended = null\r\n track.stop()\r\n })\r\n }\r\n\r\n /**\r\n * Checks browser supports screen share feature\r\n * if exist it calls callback with \"browser_screen_share_supported\"\r\n */\r\n\r\n this.checkBrowserScreenShareSupported = function () {\r\n if ((typeof navigator.mediaDevices !== 'undefined' && navigator.mediaDevices.getDisplayMedia) || navigator.getDisplayMedia) {\r\n thiz.callback('browser_screen_share_supported')\r\n }\r\n }\r\n\r\n /*\r\n * Call check browser support. Below function is called when this class is created\r\n */\r\n\r\n thiz.checkBrowserScreenShareSupported()\r\n\r\n /*\r\n * Below lines are executed as well when this class is created\r\n */\r\n if (!this.isPlayMode && typeof thiz.mediaConstraints !== 'undefined' && this.localStream === null) {\r\n if (typeof thiz.mediaConstraints.video !== 'undefined' && thiz.mediaConstraints.video !==false) {\r\n // if it is not play mode and media constraint is defined, try to get user media\r\n if (thiz.mediaConstraints.audio.mandatory) {\r\n // this case captures mic and video(audio(screen audio) + video(screen)) and then provide mute/unmute mic with\r\n // enableMicInMixedAudio\r\n navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function (micStream) {\r\n navigator.mediaDevices.getUserMedia(thiz.mediaConstraints)\r\n .then(function (stream) {\r\n // console.debug(\"audio stream track count: \" + audioStream.getAudioTracks().length);\r\n\r\n var audioContext = new AudioContext()\r\n var desktopSoundGainNode = audioContext.createGain()\r\n\r\n desktopSoundGainNode.gain.value = 1\r\n\r\n var audioDestionation = audioContext.createMediaStreamDestination()\r\n var audioSource = audioContext.createMediaStreamSource(stream)\r\n\r\n audioSource.connect(desktopSoundGainNode)\r\n\r\n thiz.micGainNode = audioContext.createGain()\r\n thiz.micGainNode.gain.value = 1\r\n var audioSource2 = audioContext.createMediaStreamSource(micStream)\r\n audioSource2.connect(thiz.micGainNode)\r\n\r\n desktopSoundGainNode.connect(audioDestionation)\r\n thiz.micGainNode.connect(audioDestionation)\r\n\r\n stream.removeTrack(stream.getAudioTracks()[0])\r\n audioDestionation.stream.getAudioTracks().forEach(function (track) {\r\n stream.addTrack(track)\r\n })\r\n\r\n console.debug('Running gotStream')\r\n thiz.gotStream(stream)\r\n }).catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }).catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n } else {\r\n // most of the times, this statement runs\r\n thiz.openStream(thiz.mediaConstraints, thiz.mode)\r\n }\r\n } else {\r\n // get only audio\r\n var media_audio_constraint = { audio: thiz.mediaConstraints.audio }\r\n navigator.mediaDevices.getUserMedia(media_audio_constraint)\r\n .then(function (stream) {\r\n thiz.gotStream(stream)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name, error.message)\r\n })\r\n }\r\n } else {\r\n // just playing, it does not open any stream\r\n if (thiz.webSocketAdaptor === null || thiz.webSocketAdaptor.isConnected() === false) {\r\n thiz.webSocketAdaptor = new WebSocketAdaptor()\r\n }\r\n }\r\n\r\n this.enableMicInMixedAudio = function (enable) {\r\n if (thiz.micGainNode !==null) {\r\n if (enable) {\r\n thiz.micGainNode.gain.value = 1\r\n } else {\r\n thiz.micGainNode.gain.value = 0\r\n }\r\n }\r\n }\r\n\r\n this.publish = function (streamId, token) {\r\n var jsCmd = {\r\n command: 'publish',\r\n streamId: streamId,\r\n token: token,\r\n video: thiz.localStream.getVideoTracks().length > 0,\r\n audio: thiz.localStream.getAudioTracks().length > 0\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.publishAudio = function (streamId, token) {\r\n var jsCmd = {\r\n command: 'publish',\r\n streamId: streamId,\r\n token: token,\r\n audio: thiz.localStream.getAudioTracks().length > 0\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.joinRoom = function (roomName, streamId) {\r\n thiz.roomName = roomName\r\n\r\n var jsCmd = {\r\n command: 'joinRoom',\r\n room: roomName,\r\n streamId: streamId\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.play = function (streamId, token, roomId, enableTracks) {\r\n thiz.playStreamId.push(streamId)\r\n var jsCmd =\r\n {\r\n command: 'play',\r\n streamId: streamId,\r\n token: token,\r\n room: roomId,\r\n trackList: enableTracks\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.stop = function (streamId) {\r\n thiz.closePeerConnection(streamId)\r\n\r\n var jsCmd = {\r\n command: 'stop',\r\n streamId: streamId\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.join = function (streamId) {\r\n var jsCmd = {\r\n command: 'join',\r\n streamId: streamId,\r\n multiPeer: thiz.isMultiPeer && thiz.multiPeerStreamId === null,\r\n mode: thiz.isPlayMode ? 'play' : 'both'\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.leaveFromRoom = function (roomName) {\r\n thiz.roomName = roomName\r\n var jsCmd = {\r\n command: 'leaveFromRoom',\r\n room: roomName\r\n }\r\n console.log('leave request is sent for ' + roomName)\r\n\r\n if (thiz.roomTimerId !==null) {\r\n clearInterval(thiz.roomTimerId)\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.leave = function (streamId) {\r\n var jsCmd = {\r\n command: 'leave',\r\n streamId: thiz.isMultiPeer && thiz.multiPeerStreamId !==null ? thiz.multiPeerStreamId : streamId\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n thiz.closePeerConnection(streamId)\r\n thiz.multiPeerStreamId = null\r\n }\r\n\r\n this.getStreamInfo = function (streamId) {\r\n console.log('getStreamInfo streamId', streamId)\r\n var jsCmd = {\r\n command: 'getStreamInfo',\r\n streamId: streamId\r\n }\r\n if (this.webSocketAdaptor !== undefined) {\r\n console.log('if adapter stream info true')\r\n this.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n }\r\n\r\n this.getRoomInfo = function (roomName, streamId) {\r\n thiz.roomTimerId = setInterval(() => {\r\n var jsCmd = {\r\n command: 'getRoomInfo',\r\n streamId: streamId,\r\n room: roomName\r\n }\r\n\r\n console.log('this.webSocketAdaptor', this.webSocketAdaptor)\r\n\r\n if (this.webSocketAdaptor !== undefined) {\r\n console.log('if adapter room info true')\r\n this.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n }, 5000)\r\n }\r\n\r\n this.enableTrack = function (mainTrackId, trackId, enabled) {\r\n var jsCmd = {\r\n command: 'enableTrack',\r\n streamId: mainTrackId,\r\n trackId: trackId,\r\n enabled: enabled\r\n }\r\n this.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.getTracks = function (streamId, token) {\r\n thiz.playStreamId.push(streamId)\r\n var jsCmd =\r\n {\r\n command: 'getTrackList',\r\n streamId: streamId,\r\n token: token\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.gotStream = function (stream) {\r\n thiz.localStream = stream\r\n thiz.localVideo.srcObject = stream\r\n if (thiz.webSocketAdaptor === null || thiz.webSocketAdaptor.isConnected() === false) {\r\n thiz.webSocketAdaptor = new WebSocketAdaptor()\r\n }\r\n\r\n navigator.mediaDevices.enumerateDevices().then(function (devices) {\r\n let deviceArray = []\r\n\r\n devices.forEach(function (device) {\r\n if (device.kind === 'audioinput' || device.kind === 'videoinput') {\r\n deviceArray.push(device)\r\n }\r\n })\r\n\r\n thiz.callback('available_devices', deviceArray)\r\n }).catch(function (err) {\r\n console.error('Cannot get devices -> error name: ' + err.name + ': ' + err.message)\r\n })\r\n }\r\n\r\n this.switchAudioInputSource = function (streamId, deviceId) {\r\n // stop the track because in some android devices need to close the current camera stream\r\n var audioTrack = thiz.localStream.getAudioTracks()[0]\r\n if (audioTrack) {\r\n audioTrack.stop()\r\n } else {\r\n console.warn('There is no audio track in local stream')\r\n }\r\n\r\n if (typeof deviceId !== 'undefined') {\r\n thiz.mediaConstraints.audio = { 'deviceId': deviceId }\r\n }\r\n thiz.setAudioInputSource(streamId, thiz.mediaConstraints, null, true, deviceId)\r\n }\r\n\r\n this.switchVideoCameraCapture = function (streamId, deviceId) {\r\n // stop the track because in some android devices need to close the current camera stream\r\n var videoTrack = thiz.localStream.getVideoTracks()[0]\r\n if (videoTrack) {\r\n videoTrack.stop()\r\n } else {\r\n console.warn('There is no video track in local stream')\r\n }\r\n\r\n thiz.publishMode = 'camera'\r\n\r\n if (typeof deviceId !== 'undefined') {\r\n thiz.mediaConstraints.video = { 'deviceId': deviceId }\r\n }\r\n thiz.setVideoCameraSource(streamId, thiz.mediaConstraints, null, true, deviceId)\r\n }\r\n\r\n this.switchDesktopCapture = function (streamId) {\r\n thiz.publishMode = 'screen'\r\n\r\n var audioConstraint = false\r\n if (typeof thiz.mediaConstraints.audio !== 'undefined' && thiz.mediaConstraints.audio !==false) {\r\n audioConstraint = thiz.mediaConstraints.audio\r\n }\r\n\r\n thiz.getUserMedia(thiz.mediaConstraints, audioConstraint, streamId)\r\n }\r\n\r\n this.switchDesktopCaptureWithCamera = function (streamId) {\r\n thiz.publishMode = 'screen+camera'\r\n\r\n var audioConstraint = false\r\n if (typeof thiz.mediaConstraints.audio !== 'undefined' && thiz.mediaConstraints.audio !==false) {\r\n audioConstraint = thiz.mediaConstraints.audio\r\n }\r\n thiz.getUserMedia(thiz.mediaConstraints, audioConstraint, streamId)\r\n }\r\n\r\n /**\r\n * This method updates the local stream. It removes existant audio track from the local stream\r\n * and add the audio track in `stream` parameter to the local stream\r\n */\r\n thiz.updateLocalAudioStream = function (stream, onEndedCallback) {\r\n var audioTrack = thiz.localStream.getAudioTracks()[0]\r\n thiz.localStream.removeTrack(audioTrack)\r\n audioTrack.stop()\r\n thiz.localStream.addTrack(stream.getAudioTracks()[0])\r\n thiz.localVideo.srcObject = thiz.localStream\r\n\r\n if (onEndedCallback !==null) {\r\n stream.getAudioTracks()[0].onended = function (event) {\r\n onEndedCallback(event)\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * This method updates the local stream. It removes existant video track from the local stream\r\n * and add the video track in `stream` parameter to the local stream\r\n */\r\n thiz.updateLocalVideoStream = function (stream, onEndedCallback, stopDesktop) {\r\n if (stopDesktop && thiz.desktopStream !==null) {\r\n thiz.desktopStream.getVideoTracks()[0].stop()\r\n }\r\n\r\n var videoTrack = thiz.localStream.getVideoTracks()[0]\r\n thiz.localStream.removeTrack(videoTrack)\r\n videoTrack.stop()\r\n thiz.localStream.addTrack(stream.getVideoTracks()[0])\r\n thiz.localVideo.srcObject = thiz.localStream\r\n\r\n if (onEndedCallback !==null) {\r\n stream.getVideoTracks()[0].onended = function (event) {\r\n onEndedCallback(event)\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * This method sets Audio Input Source.\r\n * It calls updateAudioTrack function for the update local audio stream.\r\n */\r\n this.setAudioInputSource = function (streamId, mediaConstraints, onEndedCallback) {\r\n navigator.mediaDevices.getUserMedia(mediaConstraints)\r\n .then(function (stream) {\r\n thiz.updateAudioTrack(stream, streamId, mediaConstraints, onEndedCallback)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name)\r\n })\r\n }\r\n\r\n /**\r\n * This method sets Video Input Source.\r\n * It calls updateVideoTrack function for the update local video stream.\r\n */\r\n this.setVideoCameraSource = function (streamId, mediaConstraints, onEndedCallback, stopDesktop) {\r\n navigator.mediaDevices.getUserMedia(mediaConstraints)\r\n .then(function (stream) {\r\n thiz.updateVideoTrack(stream, streamId, mediaConstraints, onEndedCallback, stopDesktop)\r\n })\r\n .catch(function (error) {\r\n thiz.callbackError(error.name)\r\n })\r\n }\r\n\r\n this.updateAudioTrack = function (stream, streamId, mediaConstraints, onEndedCallback) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n var audioTrackSender = thiz.remotePeerConnection[streamId].getSenders().find(function (s) {\r\n return s.track.kind === 'audio'\r\n })\r\n\r\n if (audioTrackSender) {\r\n audioTrackSender.replaceTrack(stream.getAudioTracks()[0]).then(function (result) {\r\n thiz.updateLocalAudioStream(stream, onEndedCallback)\r\n }).catch(function (error) {\r\n console.log(error.name)\r\n })\r\n } else {\r\n console.error('AudioTrackSender is undefined or null')\r\n }\r\n } else {\r\n thiz.updateLocalAudioStream(stream, onEndedCallback)\r\n }\r\n }\r\n\r\n this.updateVideoTrack = function (stream, streamId, mediaConstraints, onEndedCallback, stopDesktop) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n var videoTrackSender = thiz.remotePeerConnection[streamId].getSenders().find(function (s) {\r\n return s.track.kind === 'video'\r\n })\r\n\r\n if (videoTrackSender) {\r\n videoTrackSender.replaceTrack(stream.getVideoTracks()[0]).then(function (result) {\r\n thiz.updateLocalVideoStream(stream, onEndedCallback, stopDesktop)\r\n }).catch(function (error) {\r\n console.log(error.name)\r\n })\r\n } else {\r\n console.error('VideoTrackSender is undefined or null')\r\n }\r\n } else {\r\n thiz.updateLocalVideoStream(stream, onEndedCallback, stopDesktop)\r\n }\r\n }\r\n\r\n this.onTrack = function (event, streamId) {\r\n console.log('onTrack')\r\n if (thiz.remoteVideo !==null) {\r\n // thiz.remoteVideo.srcObject = event.streams[0];\r\n if (thiz.remoteVideo.srcObject !== event.streams[0]) {\r\n thiz.remoteVideo.srcObject = event.streams[0]\r\n console.log('Received remote stream')\r\n }\r\n } else {\r\n var dataObj = {\r\n stream: event.streams[0],\r\n track: event.track,\r\n streamId: streamId\r\n }\r\n thiz.callback('newStreamAvailable', dataObj)\r\n }\r\n }\r\n\r\n this.iceCandidateReceived = function (event, streamId) {\r\n if (event.candidate) {\r\n var protocolSupported = false\r\n\r\n if (event.candidate.candidate === '') {\r\n // event candidate can be received and its value can be \"\".\r\n // don't compare the protocols\r\n protocolSupported = true\r\n } else if (typeof event.candidate.protocol === 'undefined') {\r\n thiz.candidateTypes.forEach(element => {\r\n if (event.candidate.candidate.toLowerCase().includes(element)) {\r\n protocolSupported = true\r\n }\r\n })\r\n } else {\r\n protocolSupported = thiz.candidateTypes.includes(event.candidate.protocol.toLowerCase())\r\n }\r\n\r\n if (protocolSupported) {\r\n var jsCmd = {\r\n command: 'takeCandidate',\r\n streamId: streamId,\r\n label: event.candidate.sdpMLineIndex,\r\n id: event.candidate.sdpMid,\r\n candidate: event.candidate.candidate\r\n }\r\n\r\n if (thiz.debug) {\r\n console.log('sending ice candiate for stream Id ' + streamId)\r\n console.log(JSON.stringify(event.candidate))\r\n }\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n } else {\r\n console.log(\"Candidate's protocol(full sdp: \" + event.candidate.candidate + ') is not supported. Supported protocols: ' + thiz.candidateTypes)\r\n if (event.candidate.candidate !=='') { //\r\n thiz.callbackError('protocol_not_supported', 'Support protocols: ' + thiz.candidateTypes.toString() + ' candidate: ' + event.candidate.candidate)\r\n }\r\n }\r\n } else {\r\n console.log('No event.candidate in the iceCandidate event')\r\n }\r\n }\r\n\r\n this.initDataChannel = function (streamId, dataChannel) {\r\n dataChannel.onerror = (error) => {\r\n console.log('Data Channel Error:', error)\r\n var obj = {\r\n streamId: streamId,\r\n error: error\r\n }\r\n console.log('channel status: ', dataChannel.readyState)\r\n if (dataChannel.readyState !=='closed') {\r\n thiz.callbackError('data_channel_error', obj)\r\n }\r\n }\r\n\r\n dataChannel.onmessage = (event) => {\r\n var obj = {\r\n streamId: streamId,\r\n event: event\r\n }\r\n thiz.callback('data_received', obj)\r\n }\r\n\r\n dataChannel.onopen = () => {\r\n thiz.remotePeerConnection[streamId].dataChannel = dataChannel\r\n console.log('Data channel is opened')\r\n thiz.callback('data_channel_opened', streamId)\r\n }\r\n\r\n dataChannel.onclose = () => {\r\n console.log('Data channel is closed')\r\n thiz.callback('data_channel_closed', streamId)\r\n }\r\n }\r\n\r\n // data channel mode can be \"publish\" , \"play\" or \"peer\" based on this it is decided which way data channel is created\r\n this.initPeerConnection = function (streamId, dataChannelMode) {\r\n if (thiz.remotePeerConnection[streamId] === null) {\r\n var closedStreamId = streamId\r\n console.log('stream id in init peer connection: ' + streamId + ' close stream id: ' + closedStreamId)\r\n thiz.remotePeerConnection[streamId] = new RTCPeerConnection(thiz.peerconnection_config)\r\n thiz.remoteDescriptionSet[streamId] = false\r\n thiz.iceCandidateList[streamId] = []\r\n if (!thiz.playStreamId.includes(streamId)) {\r\n if (thiz.localStream !==null) {\r\n thiz.remotePeerConnection[streamId].addStream(thiz.localStream)\r\n }\r\n }\r\n thiz.remotePeerConnection[streamId].onicecandidate = function (event) {\r\n thiz.iceCandidateReceived(event, closedStreamId)\r\n }\r\n thiz.remotePeerConnection[streamId].ontrack = function (event) {\r\n thiz.onTrack(event, closedStreamId)\r\n }\r\n\r\n if (dataChannelMode === 'publish') {\r\n // open data channel if it's publish mode peer connection\r\n const dataChannelOptions = {\r\n ordered: true\r\n }\r\n if (thiz.remotePeerConnection[streamId].createDataChannel) {\r\n var dataChannel = thiz.remotePeerConnection[streamId].createDataChannel(streamId, dataChannelOptions)\r\n thiz.initDataChannel(streamId, dataChannel)\r\n } else {\r\n console.warn('CreateDataChannel is not supported')\r\n }\r\n } else if (dataChannelMode === 'play') {\r\n // in play mode, server opens the data channel\r\n thiz.remotePeerConnection[streamId].ondatachannel = function (ev) {\r\n thiz.initDataChannel(streamId, ev.channel)\r\n }\r\n } else {\r\n // for peer mode do both for now\r\n const dataChannelOptions = {\r\n ordered: true\r\n }\r\n\r\n if (thiz.remotePeerConnection[streamId].createDataChannel) {\r\n var dataChannelPeer = thiz.remotePeerConnection[streamId].createDataChannel(streamId, dataChannelOptions)\r\n thiz.initDataChannel(streamId, dataChannelPeer)\r\n\r\n thiz.remotePeerConnection[streamId].ondatachannel = function (ev) {\r\n thiz.initDataChannel(streamId, ev.channel)\r\n }\r\n } else {\r\n console.warn('CreateDataChannel is not supported')\r\n }\r\n }\r\n\r\n thiz.remotePeerConnection[streamId].oniceconnectionstatechange = function (event) {\r\n var obj = { state: thiz.remotePeerConnection[streamId].iceConnectionState, streamId: streamId }\r\n thiz.callback('ice_connection_state_changed', obj)\r\n\r\n if (!thiz.isPlayMode) {\r\n if (thiz.remotePeerConnection[streamId].iceConnectionState === 'connected') {\r\n thiz.changeBandwidth(thiz.bandwidth, streamId).then(() => {\r\n console.log('Bandwidth is changed to ' + thiz.bandwidth)\r\n })\r\n .catch(e => console.error(e))\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n this.closePeerConnection = function (streamId) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n if (thiz.remotePeerConnection[streamId].dataChannel !==null) {\r\n thiz.remotePeerConnection[streamId].dataChannel.close()\r\n }\r\n if (thiz.remotePeerConnection[streamId].signalingState !=='closed') {\r\n thiz.remotePeerConnection[streamId].close()\r\n thiz.remotePeerConnection[streamId] = null\r\n delete thiz.remotePeerConnection[streamId]\r\n var playStreamIndex = thiz.playStreamId.indexOf(streamId)\r\n if (playStreamIndex !==-1) {\r\n thiz.playStreamId.splice(playStreamIndex, 1)\r\n }\r\n }\r\n }\r\n\r\n if (thiz.remotePeerConnectionStats[streamId] !==null) {\r\n clearInterval(thiz.remotePeerConnectionStats[streamId].timerId)\r\n delete thiz.remotePeerConnectionStats[streamId]\r\n }\r\n }\r\n\r\n this.signallingState = function (streamId) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n return thiz.remotePeerConnection[streamId].signalingState\r\n }\r\n return null\r\n }\r\n\r\n this.iceConnectionState = function (streamId) {\r\n if (thiz.remotePeerConnection[streamId] !==null) {\r\n return thiz.remotePeerConnection[streamId].iceConnectionState\r\n }\r\n return null\r\n }\r\n\r\n this.gotDescription = function (configuration, streamId) {\r\n thiz.remotePeerConnection[streamId]\r\n .setLocalDescription(configuration)\r\n .then(function (responose) {\r\n console.debug('Set local description successfully for stream Id ' + streamId)\r\n\r\n var jsCmd = {\r\n command: 'takeConfiguration',\r\n streamId: streamId,\r\n type: configuration.type,\r\n sdp: configuration.sdp\r\n\r\n }\r\n\r\n if (thiz.debug) {\r\n console.debug('local sdp: ')\r\n console.debug(configuration.sdp)\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }).catch(function (error) {\r\n console.error('Cannot set local description. Error is: ' + error)\r\n })\r\n }\r\n\r\n this.turnOffLocalCamera = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getVideoTracks()[0]\r\n track.enabled = false\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n this.turnOnLocalCamera = function () {\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getVideoTracks()[0]\r\n track.enabled = true\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n this.muteLocalMic = function () {\r\n console.log('in mute of play')\r\n\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getAudioTracks()[0]\r\n track.enabled = false\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n /**\r\n * if there is audio it calls callbackError with \"AudioAlreadyActive\" parameter\r\n */\r\n this.unmuteLocalMic = function () {\r\n console.log('in unmute of play')\r\n if (thiz.remotePeerConnection !==null) {\r\n var track = thiz.localStream.getAudioTracks()[0]\r\n track.enabled = true\r\n } else {\r\n this.callbackError('NoActiveConnection')\r\n }\r\n }\r\n\r\n this.takeConfiguration = function (idOfStream, configuration, typeOfConfiguration) {\r\n var streamId = idOfStream\r\n var type = typeOfConfiguration\r\n var conf = configuration\r\n var isTypeOffer = (type === 'offer')\r\n\r\n var dataChannelMode = 'publish'\r\n if (isTypeOffer) {\r\n dataChannelMode = 'play'\r\n }\r\n\r\n thiz.initPeerConnection(streamId, dataChannelMode)\r\n\r\n thiz.remotePeerConnection[streamId].setRemoteDescription(new RTCSessionDescription({\r\n sdp: conf,\r\n type: type\r\n })).then(function (response) {\r\n if (thiz.debug) {\r\n console.debug('set remote description is succesfull with response: ' + response + ' for stream : ' +\r\n streamId + ' and type: ' + type)\r\n console.debug(conf)\r\n }\r\n\r\n thiz.remoteDescriptionSet[streamId] = true\r\n var length = thiz.iceCandidateList[streamId].length\r\n console.debug('Ice candidate list size to be added: ' + length)\r\n for (var i = 0; i < length; i++) {\r\n thiz.addIceCandidate(streamId, thiz.iceCandidateList[streamId][i])\r\n }\r\n thiz.iceCandidateList[streamId] = []\r\n\r\n if (isTypeOffer) {\r\n // SDP constraints may be different in play mode\r\n console.log('try to create answer for stream id: ' + streamId)\r\n\r\n thiz.remotePeerConnection[streamId].createAnswer(thiz.sdp_constraints)\r\n .then(function (configuration) {\r\n console.log('created answer for stream id: ' + streamId)\r\n thiz.gotDescription(configuration, streamId)\r\n })\r\n .catch(function (error) {\r\n console.error('create answer error :' + error)\r\n })\r\n }\r\n }).catch(function (error) {\r\n if (thiz.debug) {\r\n console.error('set remote description is failed with error: ' + error)\r\n }\r\n if (error.toString().indexOf('InvalidAccessError') > -1 || error.toString().indexOf('setRemoteDescription') > -1) {\r\n /**\r\n * This error generally occurs in codec incompatibility.\r\n * AMS for a now supports H.264 codec. This error happens when some browsers try to open it from VP8.\r\n */\r\n thiz.callbackError('notSetRemoteDescription')\r\n }\r\n })\r\n }\r\n\r\n this.takeCandidate = function (idOfTheStream, tmpLabel, tmpCandidate) {\r\n var streamId = idOfTheStream\r\n var label = tmpLabel\r\n var candidateSdp = tmpCandidate\r\n\r\n var candidate = new RTCIceCandidate({\r\n sdpMLineIndex: label,\r\n candidate: candidateSdp\r\n })\r\n\r\n var dataChannelMode = 'peer'\r\n thiz.initPeerConnection(streamId, dataChannelMode)\r\n\r\n if (thiz.remoteDescriptionSet[streamId] === true) {\r\n thiz.addIceCandidate(streamId, candidate)\r\n } else {\r\n console.debug('Ice candidate is added to list because remote description is not set yet')\r\n thiz.iceCandidateList[streamId].push(candidate)\r\n }\r\n }\r\n\r\n this.addIceCandidate = function (streamId, candidate) {\r\n var protocolSupported = false\r\n if (candidate.candidate === '') {\r\n // candidate can be received and its value can be \"\".\r\n // don't compare the protocols\r\n protocolSupported = true\r\n } else if (typeof candidate.protocol === 'undefined') {\r\n thiz.candidateTypes.forEach(element => {\r\n if (candidate.candidate.toLowerCase().includes(element)) {\r\n protocolSupported = true\r\n }\r\n })\r\n } else {\r\n protocolSupported = thiz.candidateTypes.includes(candidate.protocol.toLowerCase())\r\n }\r\n\r\n if (protocolSupported) {\r\n thiz.remotePeerConnection[streamId].addIceCandidate(candidate)\r\n .then(function (response) {\r\n if (thiz.debug) {\r\n console.log('Candidate is added for stream ' + streamId)\r\n }\r\n })\r\n .catch(function (error) {\r\n console.error('ice candiate cannot be added for stream id: ' + streamId + ' error is: ' + error)\r\n console.error(candidate)\r\n })\r\n } else {\r\n if (thiz.debug) {\r\n console.log(\"Candidate's protocol(\" + candidate.protocol + ') is not supported.' +\r\n 'Candidate: ' + candidate.candidate + ' Supported protocols:' + thiz.candidateTypes)\r\n }\r\n }\r\n }\r\n\r\n this.startPublishing = function (idOfStream) {\r\n var streamId = idOfStream\r\n\r\n thiz.initPeerConnection(streamId, 'publish')\r\n\r\n thiz.remotePeerConnection[streamId].createOffer(thiz.sdp_constraints)\r\n .then(function (configuration) {\r\n thiz.gotDescription(configuration, streamId)\r\n })\r\n .catch(function (error) {\r\n console.error('create offer error for stream id: ' + streamId + ' error: ' + error)\r\n })\r\n }\r\n\r\n /**\r\n * If we have multiple video tracks in coming versions, this method may cause some issues\r\n */\r\n this.getVideoSender = function (streamId) {\r\n var videoSender = null\r\n if (\r\n 'RTCRtpSender' in window &&\r\n 'setParameters' in window.RTCRtpSender.prototype) {\r\n const senders = thiz.remotePeerConnection[streamId].getSenders()\r\n\r\n for (let i = 0; i < senders.length; i++) {\r\n if (senders[i].track !==null && senders[i].track.kind === 'video') {\r\n videoSender = senders[i]\r\n break\r\n }\r\n }\r\n }\r\n return videoSender\r\n }\r\n\r\n /**\r\n * bandwidth is in kbps\r\n */\r\n this.changeBandwidth = function (bandwidth, streamId) {\r\n var errorDefinition = ''\r\n\r\n var videoSender = thiz.getVideoSender(streamId)\r\n\r\n if (videoSender !==null) {\r\n const parameters = videoSender.getParameters()\r\n\r\n if (!parameters.encodings) {\r\n parameters.encodings = [{}]\r\n }\r\n\r\n if (bandwidth === 'unlimited') {\r\n delete parameters.encodings[0].maxBitrate\r\n } else {\r\n parameters.encodings[0].maxBitrate = bandwidth * 1000\r\n }\r\n\r\n return videoSender.setParameters(parameters)\r\n } else {\r\n errorDefinition = 'Video sender not found to change bandwidth'\r\n }\r\n\r\n return Promise.reject(errorDefinition)\r\n }\r\n\r\n this.getStats = function (streamId) {\r\n thiz.remotePeerConnection[streamId].getStats(null).then(stats => {\r\n var bytesReceived = 0\r\n var packetsLost = 0\r\n var fractionLost = 0\r\n var currentTime = 0\r\n var bytesSent = 0\r\n var audioLevel = -1\r\n\r\n stats.forEach(value => {\r\n if (value.type === 'inbound-rtp') {\r\n bytesReceived += value.bytesReceived\r\n packetsLost += value.packetsLost\r\n fractionLost += value.fractionLost\r\n currentTime = value.timestamp\r\n } else if (value.type === 'outbound-rtp') {\r\n bytesSent += value.bytesSent\r\n currentTime = value.timestamp\r\n } else if (value.type === 'track' && typeof value.kind !== 'undefined' && value.kind === 'audio') {\r\n if (typeof value.audioLevel !== 'undefined') {\r\n audioLevel = value.audioLevel\r\n }\r\n }\r\n })\r\n\r\n thiz.remotePeerConnectionStats[streamId].totalBytesReceived = bytesReceived\r\n thiz.remotePeerConnectionStats[streamId].packetsLost = packetsLost\r\n thiz.remotePeerConnectionStats[streamId].fractionLost = fractionLost\r\n thiz.remotePeerConnectionStats[streamId].currentTime = currentTime\r\n thiz.remotePeerConnectionStats[streamId].totalBytesSent = bytesSent\r\n thiz.remotePeerConnectionStats[streamId].audioLevel = audioLevel\r\n\r\n thiz.callback('updated_stats', thiz.remotePeerConnectionStats[streamId])\r\n })\r\n }\r\n\r\n this.enableStats = function (streamId) {\r\n thiz.remotePeerConnectionStats[streamId] = new PeerStats(streamId)\r\n thiz.remotePeerConnectionStats[streamId].timerId = setInterval(() => {\r\n thiz.getStats(streamId)\r\n }, 5000)\r\n }\r\n\r\n /**\r\n * After calling this function, create new WebRTCAdaptorPlay instance, don't use the the same objectone\r\n * Because all streams are closed on server side as well when websocket connection is closed.\r\n */\r\n this.closeWebSocket = function () {\r\n for (var key in thiz.remotePeerConnection) {\r\n thiz.remotePeerConnection[key].close()\r\n }\r\n // free the remote peer connection by initializing again\r\n thiz.remotePeerConnection = []\r\n thiz.webSocketAdaptor.close()\r\n }\r\n\r\n this.peerMessage = function (streamId, definition, data) {\r\n var jsCmd = {\r\n command: 'peerMessageCommand',\r\n streamId: streamId,\r\n definition: definition,\r\n data: data\r\n }\r\n\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.forceStreamQuality = function (streamId, resolution) {\r\n var jsCmd = {\r\n command: 'forceStreamQuality',\r\n streamId: streamId,\r\n streamHeight: resolution\r\n }\r\n thiz.webSocketAdaptor.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.sendData = function (streamId, message) {\r\n console.log('thiz.remotePeerConnection[streamId]: ', thiz.remotePeerConnection[streamId])\r\n console.log('streamId passing ', streamId)\r\n if (thiz.remotePeerConnection[streamId] !== undefined) {\r\n console.log('if dataChannel true')\r\n var dataChannel = thiz.remotePeerConnection[streamId].dataChannel\r\n dataChannel.send(message)\r\n }\r\n }\r\n\r\n function WebSocketAdaptor () {\r\n var wsConn = new WebSocket(thiz.websocket_url)\r\n\r\n var connected = false\r\n\r\n var pingTimerId = -1\r\n\r\n var clearPingTimer = function () {\r\n if (pingTimerId !==-1) {\r\n if (thiz.debug) {\r\n console.debug('Clearing ping message timer')\r\n }\r\n clearInterval(pingTimerId)\r\n pingTimerId = -1\r\n }\r\n }\r\n\r\n var sendPing = function () {\r\n var jsCmd = {\r\n command: 'ping'\r\n }\r\n wsConn.send(JSON.stringify(jsCmd))\r\n }\r\n\r\n this.close = function () {\r\n wsConn.close()\r\n }\r\n\r\n wsConn.onopen = function () {\r\n if (thiz.debug) {\r\n console.log('websocket connected')\r\n }\r\n\r\n pingTimerId = setInterval(() => {\r\n sendPing()\r\n }, 4000)\r\n\r\n connected = true\r\n thiz.callback('initialized')\r\n }\r\n\r\n this.send = function (text) {\r\n if (wsConn.readyState === 0 || wsConn.readyState === 2 || wsConn.readyState === 3) {\r\n thiz.callbackError('WebSocketNotConnected')\r\n return\r\n }\r\n wsConn.send(text)\r\n console.log('sent message:' + text)\r\n }\r\n\r\n this.isConnected = function () {\r\n return connected\r\n }\r\n\r\n wsConn.onmessage = function (event) {\r\n var obj = JSON.parse(event.data)\r\n\r\n if (obj.command === 'start') {\r\n // this command is received first, when publishing so playmode is false\r\n\r\n if (thiz.debug) {\r\n console.debug('received start command')\r\n }\r\n\r\n thiz.startPublishing(obj.streamId)\r\n } else if (obj.command === 'takeCandidate') {\r\n if (thiz.debug) {\r\n console.debug('received ice candidate for stream id ' + obj.streamId)\r\n console.debug(obj.candidate)\r\n }\r\n\r\n thiz.takeCandidate(obj.streamId, obj.label, obj.candidate)\r\n } else if (obj.command === 'takeConfiguration') {\r\n if (thiz.debug) {\r\n console.log('received remote description type for stream id: ' + obj.streamId + ' type: ' + obj.type)\r\n }\r\n thiz.takeConfiguration(obj.streamId, obj.sdp, obj.type)\r\n } else if (obj.command === 'stop') {\r\n console.debug('Stop command received')\r\n thiz.closePeerConnection(obj.streamId)\r\n } else if (obj.command === 'error') {\r\n thiz.callbackError(obj.definition)\r\n } else if (obj.command === 'notification') {\r\n thiz.callback(obj.definition, obj)\r\n if (obj.definition === 'play_finished' || obj.definition === 'publish_finished') {\r\n thiz.closePeerConnection(obj.streamId)\r\n }\r\n } else if (obj.command === 'streamInformation') {\r\n thiz.callback(obj.command, obj)\r\n } else if (obj.command === 'roomInformation') {\r\n thiz.callback(obj.command, obj)\r\n } else if (obj.command === 'pong') {\r\n thiz.callback(obj.command)\r\n } else if (obj.command === 'trackList') {\r\n thiz.callback(obj.command, obj)\r\n } else if (obj.command === 'connectWithNewId') {\r\n thiz.multiPeerStreamId = obj.streamId\r\n thiz.join(obj.streamId)\r\n } else if (obj.command === 'peerMessageCommand') {\r\n thiz.callback(obj.command, obj)\r\n }\r\n }\r\n\r\n wsConn.onerror = function (error) {\r\n console.log(' error occured: ' + JSON.stringify(error))\r\n clearPingTimer()\r\n thiz.callbackError(error)\r\n }\r\n\r\n wsConn.onclose = function (event) {\r\n connected = false\r\n console.log('connection closed.')\r\n clearPingTimer()\r\n thiz.callback('closed', event)\r\n }\r\n }\r\n}\r\n","import React, { useMemo } from 'react'\r\nimport { List, Select, Spin } from 'antd'\r\nconst { Option } = Select\r\n\r\nconst AddParticipant = React.memo(props => {\r\n const {\r\n emailList,\r\n fetching,\r\n handleEmailChange,\r\n t,\r\n emails = [],\r\n event,\r\n invitedEmails = []\r\n } = props\r\n\r\n const filteredEmails = useMemo(\r\n () => emailList.filter(email => !invitedEmails.includes(email.value)),\r\n [emailList, invitedEmails]\r\n )\r\n\r\n const selectedEmails = useMemo(\r\n () => emails.filter(email => !invitedEmails.includes(email)),\r\n [emails, invitedEmails]\r\n )\r\n\r\n const isMaxParticipants = useMemo(\r\n () =>\r\n event &&\r\n event.event_type === 'webinar' &&\r\n selectedEmails.length + invitedEmails.length >= 5,\r\n [event, emails, invitedEmails]\r\n )\r\n return (\r\n <>\r\n{t('v2:max_five_users_allowed')}
\r\n )}\r\n \r\n )\r\n})\r\n\r\nexport default AddParticipant\r\n","import React, { Component } from 'react'\r\nimport hark from 'hark'\r\nimport _ from 'lodash'\r\nimport axios from 'axios'\r\nimport { Prompt } from 'react-router-dom'\r\nimport { WebRTCAdaptor } from './webrtcAdaptor_new'\r\nimport { WebRTCAdaptorPlay } from './webrtcAdaptor_new_play'\r\nimport { Modal, Row, Tooltip, message, Button } from 'antd'\r\nimport debounce from 'lodash/debounce'\r\nimport '../../../../../components/Card/Card.scss'\r\nimport { NetworkDetection } from '../NetworkDetection'\r\nimport cameraOff from '../../assets/camera_off.svg'\r\nimport cameraOn from '../../assets/camera_on.svg'\r\nimport micOff from '../../assets/mic_off.svg'\r\nimport micOn from '../../assets/mic_on.svg'\r\nimport mute from '../../assets/mute.svg'\r\nimport unmute from '../../assets/unmute.svg'\r\nimport join from '../../assets/join.svg'\r\nimport leave from '../../assets/leave.svg'\r\nimport addParticipant from '../../assets/add_participant.png'\r\nimport fullScreen from '../../assets/full_screen.svg'\r\nimport shareScreenLogo from '../../assets/share_screen.svg'\r\nimport stopShareScreenLogo from '../../assets/stop_screen_share.svg'\r\nimport { api } from '../../../../../services'\r\nimport { Card } from '../../../../../components/Card/styled'\r\nimport { config } from '../../../../../constants'\r\nimport { AddParticipant } from './internal'\r\n\r\nmessage.config({\r\n top: 100,\r\n duration: 5,\r\n maxCount: 1\r\n})\r\n\r\nconst pcConfig = {\r\n iceServers: [\r\n {\r\n urls: 'stun:stun.l.google.com:19302'\r\n }\r\n ]\r\n}\r\n\r\nlet sdpConstraints = {\r\n OfferToReceiveAudio: false,\r\n OfferToReceiveVideo: false\r\n}\r\n// 240p means width: 426, height: 240\r\nlet mediaConstraints = {\r\n video: {\r\n width: 426,\r\n height: 245,\r\n frameRate: 15\r\n },\r\n audio: true\r\n}\r\n\r\nlet passiveMediaConstraints = {\r\n video: false,\r\n audio: true\r\n}\r\n\r\nlet webRTCAdaptor = null\r\nlet playWebRTCAdaptor = null\r\nlet closeConnectionMsg = ''\r\n// let streamIdInUseMsg = ''\r\nlet playOnly = false\r\nlet prompt = null\r\nlet volumeButton = null\r\nlet speech = null\r\nlet video = null\r\nconst token = 'null'\r\nclass Conference extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.lastFetchId = 0\r\n this.fetchUserEmails = debounce(this.fetchUserEmails, 1000)\r\n }\r\n\r\n initSocketConf = null\r\n SOCKET_URL_PUBLISH = `wss://antmedia-${this.props.eventId}.v2.sharelookapp.com/WebRTCAppEE/websocket?rtmpForward=undefined`\r\n SOCKET_URL_PLAY = `wss://antmedia-${this.props.eventId}.v2.sharelookapp.com:5443/WebRTCAppEE/websocket?rtmpForward=undefined`\r\n connectionInterval = null\r\n state = {\r\n showVideo: false,\r\n myStreamId: this.props.userId + '_' + this.props.eventId,\r\n streamsList: [],\r\n speaker: '',\r\n isJoined: false,\r\n isCameraOff: false,\r\n isMicOff: false,\r\n isShareScreen: false,\r\n disableScreenSharing: '',\r\n hasLeave: false,\r\n canShowModal: false,\r\n showPrompt: false,\r\n isPublishStarted: false,\r\n hideElement: false,\r\n showParticipant: false,\r\n emailList: [],\r\n fetchingEmail: false,\r\n emails: [],\r\n initialEmails: [],\r\n inviting: false,\r\n failInvitation: false,\r\n successInvitation: false,\r\n callFirstTime: true\r\n }\r\n\r\n componentDidMount() {\r\n const { hostEmails } = this.props\r\n this.setState({ initialEmails: hostEmails, emails: hostEmails })\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const {\r\n speaker,\r\n myStreamId,\r\n streamsList,\r\n isJoined,\r\n isShareScreen\r\n } = this.state\r\n const { streamCount, isConferenceHost, isDisconnected } = this.props\r\n if (prevState.speaker !== speaker && speaker) {\r\n if (speaker === myStreamId) {\r\n console.log('speaker === myStreamId if')\r\n let localVideo = document.getElementById('localVideo')\r\n localVideo.className = 'active'\r\n let remoteVideo = document.getElementById(\r\n 'remoteVideo' + prevState.speaker\r\n )\r\n let remoteController = document.getElementById(\r\n 'controller' + prevState.speaker\r\n )\r\n let remotePlayer = document.getElementById('player' + prevState.speaker)\r\n let remoteUser = document.getElementById('username' + prevState.speaker)\r\n\r\n if (remoteVideo) {\r\n remoteVideo.className = 'myClass'\r\n remotePlayer.classList.add('remotePlayerClass')\r\n remoteController.classList.remove('control_active')\r\n remoteController.classList.add('volume-controls-user')\r\n remoteUser.classList.remove('username__active')\r\n remoteUser.classList.add('username__inactive')\r\n }\r\n } else {\r\n console.log('speaker === myStreamId else streamsList:', streamsList)\r\n let localVideo = document.getElementById('localVideo')\r\n if (localVideo) {\r\n localVideo.className = ''\r\n }\r\n if (streamsList.length > 0) {\r\n streamsList.forEach(item => {\r\n let remoteVideo = document.getElementById('remoteVideo' + item)\r\n let remoteController = document.getElementById('controller' + item)\r\n let remotePlayer = document.getElementById('player' + item)\r\n let remoteUser = document.getElementById('username' + item)\r\n\r\n if (remoteVideo) {\r\n if (item === speaker) {\r\n remoteVideo.className = 'active'\r\n remoteVideo.classList.remove('myClass')\r\n remotePlayer.classList.remove('remotePlayerClass')\r\n remoteController.classList.remove('volume-controls-user')\r\n remoteController.classList.add('control_active')\r\n remoteUser.classList.add('username__active')\r\n remoteUser.classList.remove('username__inactive')\r\n } else {\r\n remoteVideo.className = 'myClass'\r\n remotePlayer.classList.add('remotePlayerClass')\r\n remoteController.classList.add('volume-controls-user')\r\n remoteController.classList.remove('control_active')\r\n remoteUser.classList.remove('username__active')\r\n remoteUser.classList.add('username__inactive')\r\n }\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\r\n if (\r\n (prevState.streamsList !== streamsList ||\r\n prevState.speaker !== speaker) &&\r\n isJoined &&\r\n !isConferenceHost\r\n ) {\r\n if (streamsList.length > 0) {\r\n streamsList.forEach(item => {\r\n if (speaker === '') {\r\n this.setState(\r\n {\r\n speaker: streamsList[0]\r\n },\r\n () => {\r\n let remoteVideo = document.getElementById(\r\n 'remoteVideo' + streamsList[0]\r\n )\r\n let remoteController = document.getElementById(\r\n 'controller' + streamsList[0]\r\n )\r\n let remotePlayer = document.getElementById(\r\n 'player' + streamsList[0]\r\n )\r\n let remoteUser = document.getElementById(\r\n 'username' + streamsList[0]\r\n )\r\n if (remoteVideo) {\r\n remoteVideo.className = 'active'\r\n remoteVideo.classList.remove('myClass')\r\n remotePlayer.classList.remove('remotePlayerClass')\r\n remoteController.classList.remove('volume-controls-user')\r\n remoteController.classList.add('control_active')\r\n remoteUser.classList.add('username__active')\r\n remoteUser.classList.remove('username__inactive')\r\n }\r\n }\r\n )\r\n }\r\n if (item === speaker) {\r\n console.log('item === speaker if')\r\n let remoteVideo = document.getElementById('remoteVideo' + item)\r\n let remoteController = document.getElementById('controller' + item)\r\n let remotePlayer = document.getElementById('player' + item)\r\n let remoteUser = document.getElementById('username' + item)\r\n if (remoteVideo) {\r\n console.log('item === speaker if remoteVideo', remoteVideo)\r\n remoteVideo.className = 'active'\r\n remoteVideo.classList.remove('myClass')\r\n remotePlayer.classList.remove('remotePlayerClass')\r\n remoteController.classList.remove('volume-controls-user')\r\n remoteController.classList.add('control_active')\r\n remoteUser.classList.add('username__active')\r\n remoteUser.classList.remove('username__inactive')\r\n }\r\n } else {\r\n console.log('item === speaker else')\r\n let remoteVideo = document.getElementById('remoteVideo' + item)\r\n let remotePlayer = document.getElementById('player' + item)\r\n let remoteController = document.getElementById('controller' + item)\r\n let remoteUser = document.getElementById('username' + item)\r\n if (remoteVideo) {\r\n remoteVideo.className = 'myClass'\r\n remotePlayer.classList.add('remotePlayerClass')\r\n remoteController.classList.add('volume-controls-user')\r\n remoteController.classList.remove('control_active')\r\n remoteUser.classList.remove('username__active')\r\n remoteUser.classList.add('username__inactive')\r\n }\r\n }\r\n })\r\n }\r\n }\r\n\r\n if (prevState.streamsList !== streamsList && isJoined) {\r\n isConferenceHost\r\n ? streamCount(streamsList.length === 0 ? 1 : streamsList.length + 1)\r\n : streamCount(streamsList.length === 0 ? 1 : streamsList.length)\r\n\r\n if (\r\n isConferenceHost &&\r\n isShareScreen &&\r\n webRTCAdaptor &&\r\n !isDisconnected\r\n ) {\r\n webRTCAdaptor.sendData(myStreamId, 'SCREEN')\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n console.log('componentWillUnmount log')\r\n const { showVideo, myStreamId } = this.state\r\n\r\n if (this.connectionInterval !== null) {\r\n clearInterval(this.connectionInterval)\r\n this.connectionInterval = null\r\n }\r\n\r\n if (prompt && showVideo) {\r\n prompt = null\r\n }\r\n\r\n this.initSocketConf && this.initSocketConf.close()\r\n\r\n if (playWebRTCAdaptor && playWebRTCAdaptor.roomTimerId !== -1) {\r\n console.log(\r\n 'componentWillUnmount playWebRTCAdaptor.roomTimerId',\r\n playWebRTCAdaptor.roomTimerId\r\n )\r\n clearInterval(playWebRTCAdaptor.roomTimerId)\r\n playWebRTCAdaptor.roomTimerId = -1\r\n }\r\n\r\n if (playWebRTCAdaptor) {\r\n playWebRTCAdaptor.stop(myStreamId)\r\n playWebRTCAdaptor.closePeerConnection(myStreamId)\r\n playWebRTCAdaptor.closeWebSocket()\r\n }\r\n }\r\n\r\n turnOffLocalCamera = () => {\r\n this.setState({ isCameraOff: true }, () => {\r\n webRTCAdaptor.turnOffLocalCamera()\r\n })\r\n }\r\n\r\n turnOnLocalCamera = () => {\r\n this.setState({ isCameraOff: false }, () => {\r\n webRTCAdaptor.turnOnLocalCamera()\r\n })\r\n }\r\n\r\n muteLocalMic = () => {\r\n this.setState({ isMicOff: true }, () => {\r\n const { myStreamId } = this.state\r\n webRTCAdaptor.muteLocalMic()\r\n webRTCAdaptor.sendData(myStreamId, 'MUTED')\r\n })\r\n }\r\n\r\n unmuteLocalMic = () => {\r\n this.setState({ isMicOff: false }, () => {\r\n const { myStreamId } = this.state\r\n webRTCAdaptor.unmuteLocalMic()\r\n webRTCAdaptor.sendData(myStreamId, 'UNMUTED')\r\n })\r\n }\r\n\r\n fullScreenMode = () => {\r\n const { speaker } = this.state\r\n let elem = document.getElementById('remoteVideo' + speaker)\r\n if (elem && elem.requestFullscreen) {\r\n elem.requestFullscreen()\r\n } else if (elem && elem.mozRequestFullScreen) {\r\n /* Firefox */\r\n elem.mozRequestFullScreen()\r\n } else if (elem && elem.webkitRequestFullscreen) {\r\n /* Chrome, Safari & Opera */\r\n elem.webkitRequestFullscreen()\r\n } else if (elem && elem.msRequestFullscreen) {\r\n /* IE/Edge */\r\n elem.msRequestFullscreen()\r\n }\r\n }\r\n\r\n screenShare = () => {\r\n const { isShareScreen, myStreamId } = this.state\r\n if (!isShareScreen) {\r\n this.setState(\r\n {\r\n isShareScreen: true,\r\n speaker: myStreamId\r\n },\r\n () => {\r\n webRTCAdaptor.switchDesktopCapture(myStreamId)\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.sendData(myStreamId, 'SCREEN')\r\n }\r\n }\r\n )\r\n } else {\r\n this.setState(\r\n {\r\n isShareScreen: false\r\n },\r\n () => {\r\n webRTCAdaptor.switchVideoCameraCapture(myStreamId)\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.sendData(myStreamId, 'CAMERA')\r\n }\r\n }\r\n )\r\n }\r\n }\r\n\r\n publish = (streamName, token) => {\r\n webRTCAdaptor.publish(streamName, token)\r\n }\r\n\r\n playVideo = obj => {\r\n const { conferenceId } = this.props\r\n let video = document.getElementById('remoteVideo' + obj.streamId)\r\n console.log(\r\n 'new stream available with id: ' +\r\n obj.streamId +\r\n 'on the room:' +\r\n conferenceId,\r\n 'video',\r\n video\r\n )\r\n if (video === null) {\r\n console.log('playVideo video null if')\r\n this.createRemoteVideo(obj)\r\n } else {\r\n console.log('playVideo video null else')\r\n video.srcObject = obj.stream\r\n }\r\n }\r\n\r\n playAudio = obj => {\r\n let audio = document.getElementById('audio' + obj.streamId)\r\n if (audio === null) {\r\n console.log('audio null if')\r\n this.createRemoteAudio(obj)\r\n } else {\r\n console.log('audio null else')\r\n audio.srcObject = obj.stream\r\n }\r\n }\r\n\r\n createRemoteAudio = obj => {\r\n let audioPlayer = document.createElement('audio')\r\n audioPlayer.id = 'audio' + obj.streamId\r\n audioPlayer.className = 'passive_hidden'\r\n audioPlayer.autoplay = true\r\n audioPlayer.srcObject = obj.stream\r\n if (audioPlayer) {\r\n let audioplayerElement = document.getElementById('audio_players')\r\n if (audioplayerElement) {\r\n audioplayerElement.appendChild(audioPlayer)\r\n }\r\n }\r\n }\r\n\r\n createRemoteVideo = obj => {\r\n let player = document.createElement('div')\r\n player.className = 'remotePlayerClass'\r\n player.id = 'player' + obj.streamId\r\n player.innerHTML =\r\n '' +\r\n '' +\r\n '' +\r\n '' +\r\n '
'\r\n\r\n if (player) {\r\n console.log('createRemoteVideo if', player)\r\n let playerElement = document.getElementById('players')\r\n if (playerElement) {\r\n console.log('playerElement if', playerElement)\r\n playerElement.appendChild(player)\r\n video = document.getElementById('remoteVideo' + obj.streamId)\r\n volumeButton = document.getElementById('button' + obj.streamId)\r\n volumeButton.addEventListener('click', e =>\r\n this.toggleMute(e, obj.streamId)\r\n )\r\n if (video) {\r\n console.log('createRemoteVideo if video', video)\r\n video.srcObject = obj.stream\r\n }\r\n }\r\n }\r\n }\r\n\r\n removeRemoteVideo = streamId => {\r\n let video = document.getElementById('remoteVideo' + streamId)\r\n if (video !== null) {\r\n let player = document.getElementById('player' + streamId)\r\n video.srcObject = null\r\n document.getElementById('players').removeChild(player)\r\n }\r\n }\r\n\r\n removeRemoteAudio = streamId => {\r\n let audio = document.getElementById('audio' + streamId)\r\n if (audio !== null) {\r\n video.srcObject = null\r\n document.getElementById('audio_players').removeChild(audio)\r\n }\r\n }\r\n\r\n toggleMute = (e, streamId) => {\r\n e.preventDefault()\r\n const { isConfCreator } = this.props\r\n if (isConfCreator) {\r\n let targetVideo = document.getElementById('remoteVideo' + streamId)\r\n let targetIcon = document.getElementById('icon' + streamId)\r\n if (!targetVideo.muted) {\r\n targetIcon.src = mute\r\n targetVideo.muted = true\r\n playWebRTCAdaptor.sendData(streamId, 'MUTED')\r\n }\r\n }\r\n }\r\n\r\n deleteMyStream = param => {\r\n const { myStreamId } = this.state\r\n const { conferenceId, eventId } = this.props\r\n console.log('param from', param)\r\n axios({\r\n method: 'put',\r\n url: `https://antmedia-${eventId}.v2.sharelookapp.com/WebRTCAppEE/rest/v2/broadcasts/conference-rooms/${conferenceId}/delete?streamId=${myStreamId}`,\r\n data: {}\r\n }).then(\r\n response => {\r\n console.log('response from 1st api', response)\r\n if (response.status === 200) {\r\n console.log('response from 1st api status 200')\r\n axios({\r\n method: 'delete',\r\n url: `https://antmedia-${eventId}.v2.sharelookapp.com/WebRTCAppEE/rest/v2/broadcasts/${myStreamId}`,\r\n data: {}\r\n }).then(\r\n response => {\r\n console.log('inner response from 2nd api', response)\r\n if (response.status === 200) {\r\n console.log('inner response from 2nd api status 200')\r\n if (param === 'streamIdInUse') {\r\n webRTCAdaptor.joinRoom(conferenceId, myStreamId)\r\n } else {\r\n this.reConnectSocket()\r\n }\r\n }\r\n },\r\n error => {\r\n console.log('error delete stream inner', error)\r\n }\r\n )\r\n }\r\n },\r\n error => {\r\n console.log('error delete stream outer', error)\r\n }\r\n )\r\n }\r\n\r\n reConnectSocket = () => {\r\n const {\r\n isConferenceHost,\r\n userId,\r\n eventId,\r\n isSocketClose,\r\n initSocket\r\n } = this.props\r\n playOnly = !isConferenceHost\r\n console.log('reconnecting isSocketClose', isSocketClose)\r\n console.log('reConnectSocket webRTCAdaptor', webRTCAdaptor)\r\n console.log('reConnectSocket playWebRTCAdaptor', playWebRTCAdaptor)\r\n if (isSocketClose) {\r\n initSocket(userId)\r\n }\r\n this.setState(\r\n {\r\n myStreamId: userId + '_' + eventId,\r\n streamsList: [],\r\n showVideo: true,\r\n isJoined: true,\r\n hasLeave: false,\r\n isShareScreen: false,\r\n isCameraOff: false,\r\n isMicOff: false,\r\n disableScreenSharing: '',\r\n isPublishStarted: false,\r\n showPrompt: true\r\n },\r\n () => {\r\n const { handleBroadcastChange } = this.props\r\n const { hideElement, myStreamId } = this.state\r\n if (!hideElement) {\r\n handleBroadcastChange()\r\n }\r\n this.setState(\r\n {\r\n speaker: isConferenceHost ? myStreamId : ''\r\n },\r\n () => {\r\n console.log('reConnectSocket isConferenceHost', isConferenceHost)\r\n if (isConferenceHost) {\r\n console.log('if reConnectSocket')\r\n this.initService()\r\n } else {\r\n console.log('else reConnectSocket')\r\n this.initPlayService()\r\n }\r\n }\r\n )\r\n }\r\n )\r\n }\r\n\r\n handleStartApi = () => {\r\n const { eventId } = this.props\r\n api.events\r\n .startLiveEvent(eventId)\r\n .then(res => {\r\n if (res.status === 200) {\r\n console.log('response on starting event', res.data)\r\n }\r\n })\r\n .catch(err => {\r\n console.log('error in starting event', err)\r\n })\r\n }\r\n\r\n initializeSocket = () => {\r\n const {\r\n eventId,\r\n stopstream,\r\n userId,\r\n orgId,\r\n onStreamStopped,\r\n isConfCreator\r\n } = this.props\r\n this.initSocketConf = new window.WebSocket(\r\n `${config.socketURL}?channel_type=EVENT&channel_id=${eventId}`\r\n )\r\n this.initSocketConf.onopen = () => {\r\n if (isConfCreator) {\r\n this.initSocketConf.send(\r\n JSON.stringify({\r\n action: 'startConference',\r\n stream_id: `event_${eventId}`,\r\n channel_type: 'EVENT',\r\n channel_id: eventId\r\n })\r\n )\r\n }\r\n\r\n this.initSocketConf.send(\r\n JSON.stringify({\r\n action: 'connectStream',\r\n channel_type: 'EVENT',\r\n channel_id: eventId,\r\n user_id: userId,\r\n org_id: orgId\r\n })\r\n )\r\n this.connectionInterval = setInterval(() => {\r\n this.initSocketConf.send(\r\n JSON.stringify({\r\n action: 'pingPong',\r\n msg: 'ping'\r\n })\r\n )\r\n }, 10000)\r\n }\r\n\r\n this.initSocketConf.onmessage = event => {\r\n const data = JSON.parse(event.data)\r\n console.log('event log endConference', event, 'data', data)\r\n if (data.event === 'endConference') {\r\n const {\r\n isConferenceHost,\r\n handleBroadcastChange,\r\n streamCount,\r\n fineConnectionState\r\n } = this.props\r\n const { myStreamId } = this.state\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.stop(myStreamId)\r\n webRTCAdaptor.closePeerConnection(myStreamId)\r\n webRTCAdaptor.closeWebSocket()\r\n webRTCAdaptor.closeStream()\r\n }\r\n if (playWebRTCAdaptor) {\r\n playWebRTCAdaptor.stop(myStreamId)\r\n playWebRTCAdaptor.closePeerConnection(myStreamId)\r\n playWebRTCAdaptor.closeWebSocket()\r\n }\r\n this.setState(\r\n {\r\n showVideo: false,\r\n isJoined: false,\r\n myStreamId: '',\r\n showPrompt: false,\r\n speaker: '',\r\n streamsList: []\r\n },\r\n () => {\r\n if (isConferenceHost) {\r\n fineConnectionState()\r\n stopstream()\r\n onStreamStopped()\r\n /* const { hasLeave } = this.state\r\n if (!hasLeave) {\r\n handleBroadcastChange()\r\n streamCount('')\r\n } */\r\n prompt = null\r\n }\r\n if (!isConferenceHost) {\r\n const { hasLeave } = this.state\r\n stopstream()\r\n onStreamStopped()\r\n if (!hasLeave) {\r\n handleBroadcastChange()\r\n streamCount('')\r\n }\r\n }\r\n this.setState({ hasLeave: true })\r\n if (this.connectionInterval !== null) {\r\n clearInterval(this.connectionInterval)\r\n this.connectionInterval = null\r\n }\r\n }\r\n )\r\n }\r\n }\r\n\r\n this.initSocketConf.onclose = () => {\r\n console.log('stop web socket ko')\r\n clearInterval(this.connectionInterval)\r\n }\r\n\r\n this.initSocketConf.onerror = error => {\r\n console.log('Error ' + error.message)\r\n clearInterval(this.connectionInterval)\r\n }\r\n }\r\n\r\n stopConference = () => {\r\n console.log('stopConference')\r\n const { eventId, orgId, userId, isConfCreator } = this.props\r\n if (isConfCreator) {\r\n this.initSocketConf.send(\r\n JSON.stringify({\r\n action: 'stopConference',\r\n stream_id: `event_${eventId}`,\r\n channel_type: 'EVENT',\r\n channel_id: eventId\r\n })\r\n )\r\n }\r\n\r\n this.initSocketConf.send(\r\n JSON.stringify({\r\n action: 'disconnectStream',\r\n channel_type: 'EVENT',\r\n channel_id: eventId,\r\n user_id: userId,\r\n org_id: orgId\r\n })\r\n )\r\n }\r\n\r\n endConferenceEvent = () => {\r\n const { eventId, conferenceId } = this.props\r\n\r\n this.initSocketConf.send(\r\n JSON.stringify({\r\n action: 'endConference',\r\n stream_id: conferenceId,\r\n channel_type: 'EVENT',\r\n channel_id: eventId\r\n })\r\n )\r\n }\r\n\r\n handleStopApi = () => {\r\n const { eventId } = this.props\r\n api.events\r\n .stopLiveEvent(eventId)\r\n .then(res => {\r\n if (res.status === 200) {\r\n console.log('response on starting event', res.data)\r\n }\r\n })\r\n .catch(err => {\r\n console.log('error in stopping event', err)\r\n })\r\n }\r\n\r\n leave = () => {\r\n // streamIdInUseMsg = ''\r\n this.setState(\r\n {\r\n canShowModal: false,\r\n hasLeave: true,\r\n hideElement: false,\r\n isPublishStarted: false,\r\n callFirstTime: true\r\n },\r\n () => {\r\n const { conferenceId, isConfCreator } = this.props\r\n const { streamsList } = this.state\r\n if (isConfCreator && _.isEmpty(streamsList)) {\r\n this.handleStopApi()\r\n }\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.leaveFromRoom(conferenceId)\r\n }\r\n if (playWebRTCAdaptor) {\r\n playWebRTCAdaptor.leaveFromRoom(conferenceId)\r\n }\r\n }\r\n )\r\n }\r\n\r\n toggleModal = () => {\r\n this.setState(state => ({ canShowModal: !state.canShowModal }))\r\n }\r\n\r\n showAddparticipant = () => {\r\n this.setState(state => ({\r\n showParticipant: !state.showParticipant,\r\n successInvitation: false\r\n }))\r\n }\r\n\r\n sendInvitations = () => {\r\n const { event, eventId } = this.props\r\n const { emails, initialEmails } = this.state\r\n const newAdded = _.difference(emails, initialEmails)\r\n\r\n const data = {\r\n title: event.title,\r\n add_participant: newAdded,\r\n cover_id: event.cover_id\r\n }\r\n\r\n this.setState({ inviting: true }, () => {\r\n api.events\r\n .updateById(eventId, data)\r\n .then(response => {\r\n console.log('success update', response)\r\n const { data: respData } = response\r\n this.setState(\r\n {\r\n inviting: false,\r\n successInvitation: true,\r\n emails: respData.host_emails,\r\n initialEmails: respData.host_emails\r\n },\r\n () => {\r\n this.showAddparticipant()\r\n }\r\n )\r\n })\r\n .catch(error => {\r\n console.log('error invitation', error)\r\n this.setState(\r\n {\r\n inviting: false,\r\n failInvitation: true,\r\n emails\r\n },\r\n () => {\r\n setTimeout(() => {\r\n this.setState({ failInvitation: false })\r\n }, 3000)\r\n }\r\n )\r\n // message.error(error)\r\n })\r\n })\r\n }\r\n\r\n fetchUserEmails = value => {\r\n const { userOrg } = this.props\r\n this.lastFetchId += 1\r\n const fetchId = this.lastFetchId\r\n this.setState({ emailList: [], fetchingEmail: true })\r\n api.organizations.getUsersByOrganizationId(userOrg).then(res => {\r\n if (fetchId !== this.lastFetchId) {\r\n return\r\n }\r\n res.data.map(val => {\r\n if (val.user) {\r\n const dataValue = {\r\n text: val.user.email,\r\n value: val.user.email\r\n }\r\n this.setState(state => {\r\n if (dataValue.value.includes(value)) {\r\n const emailList = [...state.emailList, dataValue]\r\n return {\r\n emailList,\r\n fetchingEmail: false\r\n }\r\n }\r\n })\r\n }\r\n return null\r\n })\r\n })\r\n }\r\n\r\n handleEmailChange = selectedValue => {\r\n this.setState({\r\n emailList: [],\r\n emails: selectedValue,\r\n fetchingEmail: false\r\n })\r\n }\r\n\r\n initService = () => {\r\n webRTCAdaptor = new WebRTCAdaptor({\r\n websocket_url: this.SOCKET_URL_PUBLISH,\r\n mediaConstraints: mediaConstraints,\r\n peerconnection_config: pcConfig,\r\n sdp_constraints: sdpConstraints,\r\n localVideoId: 'localVideo',\r\n isPlayMode: playOnly,\r\n debug: true,\r\n bandwidth: 200,\r\n callback: (info, obj) => {\r\n console.log('publish command', info, obj)\r\n const {\r\n conferenceId,\r\n handleBroadcastChange,\r\n isConferenceHost,\r\n streamCount,\r\n isConfCreator\r\n } = this.props\r\n const { myStreamId, streamsList, isJoined, callFirstTime } = this.state\r\n if (info === 'initialized') {\r\n console.log('publish initialized', obj)\r\n console.log('publish initialized conferenceId', conferenceId)\r\n webRTCAdaptor.joinRoom(conferenceId, myStreamId)\r\n if (callFirstTime) {\r\n this.setState(\r\n {\r\n callFirstTime: false\r\n },\r\n () => {\r\n console.log('log callFirstTime state', callFirstTime)\r\n this.initPlayService()\r\n this.initializeSocket()\r\n }\r\n )\r\n }\r\n } else if (info === 'start') {\r\n console.log('publish start ', obj)\r\n } else if (info === 'joinedTheRoom') {\r\n const { calculateStopTime, calculateWarnTime } = this.props\r\n // const room = obj.ATTR_ROOM_NAME\r\n closeConnectionMsg = ''\r\n console.log('publish joinedTheRoom', obj)\r\n this.publish(myStreamId, token)\r\n calculateStopTime()\r\n calculateWarnTime()\r\n this.handleStartApi()\r\n // webRTCAdaptor.getRoomInfo(room, obj.streamId)\r\n } else if (info === 'roomInformation') {\r\n console.log('publish roomInformation', obj)\r\n } else if (info === 'newStreamAvailable') {\r\n console.log('publish newStreamAvailable')\r\n // this.playVideo(obj)\r\n } else if (info === 'publish_started') {\r\n console.log('publish publish_started', obj, !!webRTCAdaptor, playOnly)\r\n const { fineConnectionState } = this.props\r\n fineConnectionState()\r\n // streamIdInUseMsg = ''\r\n this.setState(\r\n {\r\n isPublishStarted: true,\r\n hideElement: false\r\n },\r\n () => {\r\n // webRTCAdaptor.enableStats(myStreamId)\r\n if (webRTCAdaptor) {\r\n speech = hark(webRTCAdaptor.localStream, {})\r\n }\r\n if (isJoined && !playOnly) {\r\n speech.on('speaking', () => {\r\n const { isShareScreen, disableScreenSharing } = this.state\r\n const { isDisconnected } = this.props\r\n if (!isDisconnected) {\r\n const { myStreamId } = this.state\r\n const { name } = this.props\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.sendData(myStreamId, `USERNAME_${name}`)\r\n }\r\n if (disableScreenSharing !== '') {\r\n this.setState({ speaker: disableScreenSharing })\r\n } else if (isShareScreen) {\r\n this.setState({ speaker: myStreamId })\r\n } else {\r\n this.setState({ speaker: myStreamId }, () => {\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.sendData(myStreamId, 'SPEAKING')\r\n }\r\n })\r\n }\r\n }\r\n })\r\n }\r\n }\r\n )\r\n } else if (info === 'publish_finished') {\r\n const { hasLeave, myStreamId } = this.state\r\n console.log('publish finished', 'myStreamId', myStreamId)\r\n if (!hasLeave) {\r\n console.log('publish finished if')\r\n this.props.badConnectionState()\r\n webRTCAdaptor.joinRoom(conferenceId, myStreamId)\r\n // this.publish(myStreamId, token)\r\n }\r\n } else if (info === 'leavedFromRoom') {\r\n prompt = false\r\n console.debug('publish leavedFromRoom' + obj)\r\n this.initSocketConf && this.initSocketConf.close()\r\n if (this.connectionInterval !== null) {\r\n console.log(\r\n 'interval clear connectionInterval leavedFromRoom',\r\n this.connectionInterval\r\n )\r\n clearInterval(this.connectionInterval)\r\n this.connectionInterval = null\r\n }\r\n this.setState(\r\n {\r\n showVideo: false,\r\n isJoined: false,\r\n speaker: '',\r\n myStreamId: '',\r\n showPrompt: false\r\n },\r\n () => {\r\n const { hasLeave } = this.state\r\n if (isConferenceHost) {\r\n if (isConfCreator && _.isEmpty(streamsList)) {\r\n this.endConferenceEvent()\r\n }\r\n if (speech) {\r\n speech.stop()\r\n }\r\n this.stopConference()\r\n }\r\n if (hasLeave) {\r\n handleBroadcastChange()\r\n streamCount('')\r\n }\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.stop(myStreamId)\r\n webRTCAdaptor.closePeerConnection(myStreamId)\r\n webRTCAdaptor.closeWebSocket()\r\n }\r\n if (playWebRTCAdaptor) {\r\n playWebRTCAdaptor.stop(myStreamId)\r\n playWebRTCAdaptor.closePeerConnection(myStreamId)\r\n playWebRTCAdaptor.closeWebSocket()\r\n webRTCAdaptor.closeStream()\r\n }\r\n this.setState({ streamsList: [] })\r\n }\r\n )\r\n } else if (info === 'closed') {\r\n console.log('publish Connection closed')\r\n console.log('publish Connection webRTCAdaptor', webRTCAdaptor)\r\n console.log('publish Connection playWebRTCAdaptor', playWebRTCAdaptor)\r\n const { hasLeave } = this.state\r\n const { isDisconnected } = this.props\r\n if (typeof obj !== 'undefined') {\r\n console.log('publish Connection closed: ' + JSON.stringify(obj))\r\n if (speech) {\r\n speech.stop()\r\n }\r\n if (!hasLeave) {\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.closeStream()\r\n }\r\n closeConnectionMsg =\r\n 'Server closed unexpectedly. Please rejoin conference again.'\r\n if (isDisconnected) {\r\n this.initSocketConf && this.initSocketConf.close()\r\n if (this.connectionInterval !== null) {\r\n console.log(\r\n 'interval clear connectionInterval leavedFromRoom',\r\n this.connectionInterval\r\n )\r\n clearInterval(this.connectionInterval)\r\n this.connectionInterval = null\r\n }\r\n this.setState(\r\n {\r\n streamsList: [],\r\n showVideo: false,\r\n isJoined: false,\r\n speaker: '',\r\n myStreamId: '',\r\n showPrompt: false,\r\n callFirstTime: true\r\n },\r\n () => {\r\n handleBroadcastChange()\r\n streamCount('')\r\n if (playWebRTCAdaptor) {\r\n console.log(\r\n 'if playWebRTCAdaptor closed',\r\n playWebRTCAdaptor\r\n )\r\n playWebRTCAdaptor.stop(myStreamId)\r\n playWebRTCAdaptor.closePeerConnection(myStreamId)\r\n playWebRTCAdaptor.closeWebSocket()\r\n }\r\n setTimeout(() => {\r\n closeConnectionMsg = ''\r\n }, 2000)\r\n }\r\n )\r\n } else {\r\n closeConnectionMsg =\r\n 'Server closed unexpectedly. Reconnecting again.'\r\n this.setState(\r\n {\r\n hideElement: true\r\n },\r\n () => {\r\n this.reConnectSocket()\r\n }\r\n )\r\n }\r\n }\r\n }\r\n } else if (info === 'takeConfiguration') {\r\n console.log('publish takeConfiguration')\r\n } else if (info === 'server_will_stop') {\r\n console.log('publish server_will_stop')\r\n } else if (info === 'data_channel_opened') {\r\n console.log('publish Data Channel open for stream id', obj)\r\n } else if (info === 'data_channel_closed') {\r\n console.log('publish Data Channel closed', obj)\r\n } else if (info === 'updated_stats') {\r\n // console.log('updated_stats audioLevel', obj.audioLevel)\r\n // console.log('updated_stats streamId', obj.streamId)\r\n } else if (info === 'ice_connection_state_changed') {\r\n console.log('iceConnectionState Changed: ', JSON.stringify(obj))\r\n const iceState = webRTCAdaptor.signallingState(myStreamId)\r\n\r\n console.log('I am in checkAndRepublishIfRequired')\r\n console.log('I am in checkAndRepublishIfRequired iceState', iceState)\r\n if (\r\n (obj.state === null ||\r\n obj.state === 'failed' ||\r\n obj.state === 'disconnected' ||\r\n iceState === null ||\r\n iceState === 'failed' ||\r\n iceState === 'disconnected') &&\r\n isConferenceHost\r\n ) {\r\n const { myStreamId } = this.state\r\n this.setState(\r\n {\r\n speaker: myStreamId\r\n },\r\n () => {\r\n console.log(\r\n 'obj.state ice connection state ',\r\n obj.state,\r\n 'ice myStreamId',\r\n myStreamId\r\n )\r\n console.log('if checkAndRepublishIfRequired')\r\n webRTCAdaptor.joinRoom(conferenceId, myStreamId)\r\n }\r\n )\r\n }\r\n } else if (info === 'screen_share_stopped') {\r\n console.log('publish screen_share_stopped', obj)\r\n this.setState(\r\n {\r\n disableScreenSharing: '',\r\n isShareScreen: false\r\n },\r\n () => {\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.sendData(myStreamId, 'CAMERA')\r\n }\r\n }\r\n )\r\n } else if (info === 'data_received') {\r\n if (obj.event.data === 'MUTED') {\r\n if (obj.streamId === myStreamId) {\r\n this.setState({ isMicOff: true }, () => {\r\n webRTCAdaptor.muteLocalMic()\r\n })\r\n }\r\n }\r\n\r\n if (obj.event.data === 'UNMUTED') {\r\n if (obj.streamId !== myStreamId) {\r\n let targetVideo = document.getElementById(\r\n 'remoteVideo' + obj.streamId\r\n )\r\n let targetIcon = document.getElementById('icon' + obj.streamId)\r\n if (targetVideo) {\r\n targetVideo.muted = false\r\n targetIcon.src = unmute\r\n }\r\n }\r\n }\r\n }\r\n },\r\n callbackError: (error, message) => {\r\n // some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError\r\n const { myStreamId } = this.state\r\n const { t } = this.props\r\n console.log('publish log error ', error.isTrusted)\r\n console.log('publish log message ', message)\r\n console.log('publish error callback: ' + JSON.stringify(error), message)\r\n let errorMessage = JSON.stringify(error)\r\n if (error.isTrusted) {\r\n console.log('inside error.isTrusted publish', error.isTrusted)\r\n return\r\n }\r\n if (typeof message !== 'undefined') {\r\n errorMessage = message\r\n }\r\n if (error.indexOf('NotFoundError') !== -1) {\r\n errorMessage =\r\n 'Camera or Mic are not found or not allowed in your device.'\r\n } else if (\r\n error.indexOf('NotReadableError') !== -1 ||\r\n error.indexOf('TrackStartError') !== -1\r\n ) {\r\n errorMessage =\r\n 'Camera or Mic is being used by some other process that does not not allow these devices to be read.'\r\n } else if (\r\n error.indexOf('OverconstrainedError') !== -1 ||\r\n error.indexOf('ConstraintNotSatisfiedError') !== -1\r\n ) {\r\n errorMessage =\r\n 'There is no device found that fits your video and audio constraints. You may change video and audio constraints.'\r\n } else if (\r\n error.indexOf('NotAllowedError') !== -1 ||\r\n error.indexOf('PermissionDeniedError') !== -1\r\n ) {\r\n errorMessage = 'You are not allowed to access camera and mic.'\r\n } else if (error.indexOf('TypeError') !== -1) {\r\n errorMessage = 'Video/Audio is required.'\r\n } else if (error.indexOf('publishTimeoutError') !== -1) {\r\n const { myStreamId } = this.state\r\n console.log('publishTimeOutError Inside', myStreamId)\r\n errorMessage = 'publish timeout error'\r\n this.publish(myStreamId, token)\r\n } else if (error.indexOf('not_initialized_yet') !== -1) {\r\n const { myStreamId } = this.state\r\n console.log('not_initialized_yet Inside', myStreamId)\r\n errorMessage = 'publish not_initialized_yet'\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.stop(myStreamId)\r\n webRTCAdaptor.closePeerConnection(myStreamId)\r\n webRTCAdaptor.closeWebSocket()\r\n }\r\n this.reConnectSocket()\r\n } else if (error.indexOf('streamIdInUse') !== -1) {\r\n errorMessage = 'publish streamIdInUse'\r\n console.log('publish streamIdInUse')\r\n this.deleteMyStream('streamIdInUse')\r\n // streamIdInUseMsg = 'publish streamIdInUse'\r\n } else if (error.indexOf('UnsecureContext') !== -1) {\r\n errorMessage =\r\n 'Fatal Error: Browser cannot access camera and mic because of unsecure context. Please install SSL and access via https'\r\n } else if (error.indexOf('ScreenSharePermissionDenied') !== -1) {\r\n errorMessage = t('events:screen_share_denied')\r\n this.setState(\r\n {\r\n disableScreenSharing: '',\r\n isShareScreen: false\r\n },\r\n () => {\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.sendData(myStreamId, 'CAMERA')\r\n }\r\n }\r\n )\r\n } else if (error.indexOf('WebSocketNotSupported') !== -1) {\r\n errorMessage = 'Fatal Error: WebSocket not supported in this browser'\r\n } else if (error.indexOf('already_playing') !== -1) {\r\n errorMessage = 'Stream already playing'\r\n } else if (error.indexOf('WebSocketNotConnected') !== -1) {\r\n console.log('publish WebSocketNotConnected')\r\n errorMessage = 'publish WebSocketNotConnected'\r\n } else if (error.indexOf('no_stream_exist') !== -1) {\r\n console.log('publish No stream exist')\r\n errorMessage = 'publish No stream exist'\r\n // TODO: removeRemoteVideo(error.streamId);\r\n } else if (error.indexOf('data_channel_error') !== -1) {\r\n errorMessage =\r\n 'publish There was a error during data channel communication'\r\n } else {\r\n errorMessage = 'Unknown error'\r\n }\r\n console.log('errorMessage: ', errorMessage)\r\n }\r\n })\r\n }\r\n\r\n initPlayService = () => {\r\n const {\r\n conferenceId,\r\n isConferenceHost,\r\n handleBroadcastChange,\r\n streamCount,\r\n allowedUser,\r\n eventId,\r\n activeUserList\r\n } = this.props\r\n playWebRTCAdaptor = new WebRTCAdaptorPlay({\r\n websocket_url: this.SOCKET_URL_PLAY,\r\n mediaConstraints: passiveMediaConstraints,\r\n peerconnection_config: pcConfig,\r\n sdp_constraints: sdpConstraints,\r\n localVideoId: 'localAudio',\r\n isPlayMode: isConferenceHost ? true : false,\r\n debug: true,\r\n bandwidth: 200,\r\n callback: (info, obj) => {\r\n console.log('play log command', info, obj)\r\n // const {\r\n // conferenceId,\r\n // isConferenceHost,\r\n // handleBroadcastChange,\r\n // streamCount\r\n // } = this.props\r\n const {\r\n myStreamId,\r\n speaker,\r\n isShareScreen,\r\n disableScreenSharing,\r\n hasLeave,\r\n streamsList\r\n } = this.state\r\n if (info === 'initialized') {\r\n console.log('play initialized', obj)\r\n playWebRTCAdaptor.joinRoom(conferenceId, myStreamId)\r\n } else if (info === 'start') {\r\n console.log('play start', obj)\r\n } else if (info === 'joinedTheRoom') {\r\n const room = obj.ATTR_ROOM_NAME\r\n console.log('play joinedTheRoom', obj)\r\n playWebRTCAdaptor.getRoomInfo(room, obj.streamId)\r\n if (!isConferenceHost && playWebRTCAdaptor) {\r\n playWebRTCAdaptor.publishAudio(myStreamId, token)\r\n }\r\n console.log('play joinedTheRoom streamsList', streamsList)\r\n } else if (info === 'newStreamAvailable') {\r\n console.log('play newStreamAvailable')\r\n const cleanUser = JSON.parse(obj.streamId.split('_')[0])\r\n if (activeUserList.filter(i => i.id === cleanUser).length > 0) {\r\n this.playVideo(obj)\r\n } else {\r\n this.playAudio(obj)\r\n }\r\n if (\r\n _.isEmpty(disableScreenSharing) &&\r\n isShareScreen &&\r\n playWebRTCAdaptor\r\n ) {\r\n console.log('newStreamAvailable myStreamId', myStreamId)\r\n playWebRTCAdaptor.sendData(myStreamId, 'SCREEN')\r\n }\r\n } else if (info === 'bitrateMeasurement') {\r\n console.log('play bitrateMeasurement', obj)\r\n } else if (info === 'closed') {\r\n console.log('play Connection closed')\r\n if (typeof obj !== 'undefined') {\r\n const { streamsList, hasLeave } = this.state\r\n const { isDisconnected } = this.props\r\n console.log('play Connection closed: ' + JSON.stringify(obj))\r\n if (streamsList.length > 0) {\r\n streamsList.forEach(item => {\r\n console.log('play closed streamDifference remove ', item)\r\n this.removeRemoteVideo(item)\r\n })\r\n }\r\n if (allowedUser.length > 0) {\r\n allowedUser.forEach(item => {\r\n this.removeRemoteAudio(item + '_' + eventId)\r\n })\r\n }\r\n if (!hasLeave && !isDisconnected) {\r\n this.initPlayService()\r\n }\r\n }\r\n } else if (info === 'play_started') {\r\n console.log('play play_started', obj)\r\n } else if (info === 'play_finished') {\r\n console.log('play play_finished', obj, 'hasLeave', hasLeave)\r\n this.removeRemoteVideo(obj.streamId)\r\n if (!hasLeave) {\r\n if (isConferenceHost) {\r\n if (disableScreenSharing === speaker) {\r\n if (disableScreenSharing === obj.streamId) {\r\n this.setState({\r\n disableScreenSharing: '',\r\n isShareScreen: false,\r\n speaker: myStreamId\r\n })\r\n } else {\r\n this.setState({\r\n speaker: disableScreenSharing\r\n })\r\n }\r\n } else {\r\n this.setState({ speaker: myStreamId })\r\n }\r\n } else {\r\n this.setState({\r\n disableScreenSharing: '',\r\n isShareScreen: false,\r\n speaker: ''\r\n })\r\n }\r\n }\r\n } else if (info === 'roomInformation') {\r\n console.log('play roomInformation', obj)\r\n const { allowedUser, userId, eventId } = this.props\r\n const { streamsList } = this.state\r\n const streamDifference = _.difference(streamsList, obj.streams)\r\n\r\n console.log('streamDifference', streamDifference)\r\n console.log('streamDifference streamsList', streamsList)\r\n\r\n const activeUsers =\r\n obj.streams && obj.streams.length > 0\r\n ? obj.streams.filter(s => {\r\n const cleanUser = JSON.parse(s.split('_')[0])\r\n if (allowedUser && !allowedUser.includes(cleanUser)) {\r\n return true\r\n }\r\n return false\r\n })\r\n : []\r\n console.log('allow user activeUsers', activeUsers)\r\n\r\n this.setState(\r\n {\r\n streamsList: activeUsers\r\n },\r\n () => {\r\n const { streamsList } = this.state\r\n if (!isConferenceHost) {\r\n if (\r\n allowedUser &&\r\n allowedUser.length > 0 &&\r\n streamsList.length > 0\r\n ) {\r\n console.log('if allow publish', allowedUser.includes(userId))\r\n playWebRTCAdaptor.unmuteLocalMic()\r\n }\r\n if (allowedUser && !allowedUser.includes(userId)) {\r\n console.log('if stop allow publish')\r\n playWebRTCAdaptor.muteLocalMic()\r\n }\r\n }\r\n\r\n if (activeUsers.length > 0) {\r\n activeUsers.forEach(item => {\r\n console.log('Stream playing with ID: ' + item)\r\n const { conferenceId } = this.props\r\n playWebRTCAdaptor.play(item, token, conferenceId)\r\n })\r\n }\r\n\r\n if (allowedUser.length > 0 && isConferenceHost) {\r\n allowedUser.forEach(item => {\r\n console.log('Stream playing with ID: ' + item)\r\n const { conferenceId } = this.props\r\n playWebRTCAdaptor.play(\r\n item + '_' + eventId,\r\n token,\r\n conferenceId\r\n )\r\n })\r\n }\r\n\r\n if (!isConferenceHost && streamsList.length === 0) {\r\n this.setState({ speaker: '' })\r\n // this.leave()\r\n }\r\n }\r\n )\r\n console.log('after streamsList', streamsList)\r\n } else if (info === 'leavedFromRoom') {\r\n console.log('play leavedFromRoom')\r\n if (!isConferenceHost) {\r\n this.setState(\r\n {\r\n showVideo: false,\r\n isJoined: false,\r\n speaker: '',\r\n myStreamId: '',\r\n showPrompt: false\r\n },\r\n () => {\r\n handleBroadcastChange()\r\n streamCount('')\r\n if (playWebRTCAdaptor) {\r\n playWebRTCAdaptor.stop(myStreamId)\r\n playWebRTCAdaptor.closePeerConnection(myStreamId)\r\n playWebRTCAdaptor.closeWebSocket()\r\n playWebRTCAdaptor.closeStream()\r\n }\r\n this.setState({ streamsList: [] })\r\n }\r\n )\r\n }\r\n } else if (info === 'data_received') {\r\n console.log('play data_received', obj)\r\n const eventData = obj.event.data.split('_')\r\n if (obj.event.data === 'SPEAKING') {\r\n if (!disableScreenSharing && !isShareScreen) {\r\n this.setState({ speaker: obj.streamId })\r\n }\r\n }\r\n\r\n if (eventData[0] === 'USERNAME') {\r\n if (obj.streamId !== myStreamId) {\r\n let targetUser = document.getElementById(\r\n 'username' + obj.streamId\r\n )\r\n if (targetUser) {\r\n targetUser.innerText = eventData[1]\r\n }\r\n }\r\n }\r\n\r\n if (obj.event.data === 'SCREEN') {\r\n if (!isShareScreen) {\r\n this.setState({\r\n disableScreenSharing: obj.streamId,\r\n speaker: obj.streamId\r\n })\r\n }\r\n }\r\n\r\n if (obj.event.data === 'CAMERA') {\r\n this.setState({ disableScreenSharing: '', isShareScreen: false })\r\n }\r\n\r\n if (obj.event.data === 'MUTED') {\r\n if (obj.streamId !== myStreamId) {\r\n let targetVideo = document.getElementById(\r\n 'remoteVideo' + obj.streamId\r\n )\r\n let targetIcon = document.getElementById('icon' + obj.streamId)\r\n if (targetVideo) {\r\n targetVideo.muted = true\r\n targetIcon.src = mute\r\n }\r\n } else {\r\n this.setState({ isMicOff: true }, () => {\r\n webRTCAdaptor.muteLocalMic()\r\n })\r\n }\r\n }\r\n\r\n if (obj.event.data === 'UNMUTED') {\r\n if (obj.streamId !== myStreamId) {\r\n let targetVideo = document.getElementById(\r\n 'remoteVideo' + obj.streamId\r\n )\r\n let targetIcon = document.getElementById('icon' + obj.streamId)\r\n if (targetVideo) {\r\n targetVideo.muted = false\r\n targetIcon.src = unmute\r\n }\r\n }\r\n }\r\n } else if (info === 'takeConfiguration') {\r\n console.log('takeConfiguration')\r\n } else if (info === 'data_channel_opened') {\r\n console.log('Data Channel open for stream id', obj)\r\n } else if (info === 'updated_stats') {\r\n // console.log('updated_stats audioLevel', obj.audioLevel)\r\n // console.log('updated_stats streamId', obj.streamId)\r\n }\r\n },\r\n callbackError: (error, message) => {\r\n // some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError\r\n console.log('play log error ', error.isTrusted)\r\n console.log('play error callback: ' + JSON.stringify(error), message)\r\n let errorMessage = JSON.stringify(error)\r\n if (error.isTrusted) {\r\n console.log('inside error.isTrusted play', error.isTrusted)\r\n return\r\n }\r\n\r\n if (error.indexOf('WebSocketNotConnected') !== -1) {\r\n console.log('play WebSocketNotConnected')\r\n errorMessage = 'play side web socket not connected'\r\n } else if (error.indexOf('no_stream_exist') !== -1) {\r\n console.log('play No stream exist', error.streamId)\r\n errorMessage = 'play No stream exist'\r\n this.removeRemoteVideo(error.streamId)\r\n // TODO: removeRemoteVideo(error.streamId);\r\n } else if (error.indexOf('publishTimeoutError') !== -1) {\r\n const { myStreamId } = this.state\r\n const { isConferenceHost } = this.props\r\n console.log('publishTimeOutError play', myStreamId)\r\n errorMessage = 'publish timeout error'\r\n if (!isConferenceHost) {\r\n playWebRTCAdaptor.publish(myStreamId, token)\r\n }\r\n }\r\n\r\n console.log(\r\n 'play error logs',\r\n errorMessage,\r\n 'playWebRTCAdaptor.roomTimerId',\r\n playWebRTCAdaptor.roomTimerId,\r\n 'connectionInterval',\r\n this.connectionInterval\r\n )\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n const {\r\n showVideo,\r\n isJoined,\r\n isCameraOff,\r\n isMicOff,\r\n isShareScreen,\r\n disableScreenSharing,\r\n showPrompt,\r\n canShowModal,\r\n streamsList,\r\n isPublishStarted,\r\n myStreamId,\r\n showParticipant,\r\n emailList,\r\n emails,\r\n fetchingEmail,\r\n inviting,\r\n failInvitation,\r\n successInvitation,\r\n callFirstTime,\r\n speaker\r\n } = this.state\r\n const {\r\n isStreamStopped,\r\n isConferenceHost,\r\n t,\r\n allowJoin,\r\n conferenceId,\r\n isConfCreator,\r\n activeUserList\r\n } = this.props\r\n\r\n console.log(\r\n 'conference render logs new',\r\n 'isStreamStopped',\r\n isStreamStopped,\r\n 'allowJoin',\r\n allowJoin,\r\n 'myStreamId',\r\n myStreamId,\r\n 'connectionInterval',\r\n this.connectionInterval,\r\n 'emailList',\r\n emailList,\r\n 'emails',\r\n emails,\r\n 'streamsList',\r\n streamsList,\r\n 'callFirstTime',\r\n callFirstTime,\r\n 'speaker',\r\n speaker,\r\n 'activeUserList',\r\n activeUserList\r\n )\r\n return (\r\n \r\n {/*{streamIdInUseMsg && message.error(streamIdInUseMsg)}*/}\r\n {closeConnectionMsg && message.error(closeConnectionMsg)}\r\n {failInvitation && message.error('Please try again.')}\r\n {successInvitation &&\r\n message.success(\r\n 'Your invitation sent successfully. Participant(s) will get notification in their email'\r\n )}\r\n {showVideo && (\r\n <>\r\n {\r\n prompt = window.confirm(t('events:prompt_message'))\r\n if (prompt) {\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.closeStream()\r\n webRTCAdaptor.leaveFromRoom(conferenceId)\r\n }\r\n if (playWebRTCAdaptor) {\r\n playWebRTCAdaptor.leaveFromRoom(conferenceId)\r\n }\r\n return prompt\r\n } else {\r\n return false\r\n }\r\n }}\r\n />\r\n \r\n
\r\n \r\n )}\r\n {allowJoin && !isStreamStopped && (\r\n \r\n {!isJoined && (\r\n \r\n this.reConnectSocket()}\r\n >\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n {!isConferenceHost && (\r\n
\r\n \r\n \r\n {t('labels:processing')}\r\n \r\n )}\r\n
\r\n \r\n \r\n ) : (\r\n <>\r\n {streamsList.length === 0 && (\r\n \r\n
\r\n {!isPublishStarted && (\r\n \r\n \r\n {t('general:loading')}\r\n \r\n
\r\n )}\r\n \r\n )}\r\n \r\n {isJoined &&\r\n isConferenceHost &&\r\n (isShareScreen ? (\r\n \r\n this.screenShare()}\r\n >\r\n \r\n
\r\n \r\n ) : (\r\n \r\n \r\n this.showAddparticipant()}\r\n >\r\n
\r\n \r\n \r\n )}\r\n \r\n {canShowModal && (\r\n {t('events:event_modal_warn')}
\r\n \r\n )}\r\n\r\n {showParticipant && (\r\n{t('v2:add_participants')}
\r\n' +\r\n '' +\r\n '' +\r\n '
'\r\n\r\n if (player) {\r\n console.log('createRemoteVideo if', player)\r\n let playerElement = document.getElementById('players')\r\n if (playerElement) {\r\n console.log('playerElement if', playerElement)\r\n playerElement.appendChild(player)\r\n video = document.getElementById('remoteVideo' + obj.streamId)\r\n volumeButton = document.getElementById('button' + obj.streamId)\r\n volumeButton.addEventListener('click', e =>\r\n this.toggleMute(e, obj.streamId)\r\n )\r\n if (video) {\r\n console.log('createRemoteVideo if video', video)\r\n video.srcObject = obj.stream\r\n }\r\n }\r\n }\r\n }\r\n\r\n removeRemoteVideo = streamId => {\r\n let video = document.getElementById('remoteVideo' + streamId)\r\n if (video !== null) {\r\n let player = document.getElementById('player' + streamId)\r\n video.srcObject = null\r\n document.getElementById('players').removeChild(player)\r\n }\r\n }\r\n\r\n toggleMute = (e, streamId) => {\r\n e.preventDefault()\r\n const { isConfCreator } = this.props\r\n if (isConfCreator) {\r\n let targetVideo = document.getElementById('remoteVideo' + streamId)\r\n let targetIcon = document.getElementById('icon' + streamId)\r\n if (!targetVideo.muted) {\r\n targetIcon.src = mute\r\n targetVideo.muted = true\r\n webRTCAdaptor.sendData(streamId, 'MUTED')\r\n }\r\n }\r\n }\r\n\r\n deleteMyStream = param => {\r\n const { myStreamId } = this.state\r\n const { conferenceId, eventId } = this.props\r\n console.log('param from', param)\r\n axios({\r\n method: 'put',\r\n url: `https://antmedia-${eventId}.v2.sharelookapp.com/WebRTCAppEE/rest/v2/broadcasts/conference-rooms/${conferenceId}/delete?streamId=${myStreamId}`,\r\n data: {}\r\n }).then(\r\n response => {\r\n console.log('response from 1st api', response)\r\n if (response.status === 200) {\r\n console.log('response from 1st api status 200')\r\n axios({\r\n method: 'delete',\r\n url: `https://antmedia-${eventId}.v2.sharelookapp.com/WebRTCAppEE/rest/v2/broadcasts/${myStreamId}`,\r\n data: {}\r\n }).then(\r\n response => {\r\n console.log('inner response from 2nd api', response)\r\n if (response.status === 200) {\r\n console.log('inner response from 2nd api status 200')\r\n if (param === 'streamIdInUse') {\r\n webRTCAdaptor.joinRoom(conferenceId, myStreamId)\r\n } else {\r\n this.reConnectSocket()\r\n }\r\n }\r\n },\r\n error => {\r\n console.log('error delete stream inner', error)\r\n }\r\n )\r\n }\r\n },\r\n error => {\r\n console.log('error delete stream outer', error)\r\n }\r\n )\r\n }\r\n\r\n reConnectSocket = () => {\r\n const {\r\n isConferenceHost,\r\n userId,\r\n eventId,\r\n isSocketClose,\r\n initSocket\r\n } = this.props\r\n console.log('reconnecting isSocketClose', isSocketClose)\r\n console.log('reConnectSocket webRTCAdaptor', webRTCAdaptor)\r\n if (isSocketClose) {\r\n initSocket(userId)\r\n }\r\n this.setState(\r\n {\r\n myStreamId: userId + '_' + eventId,\r\n streamsList: [],\r\n showVideo: true,\r\n isJoined: true,\r\n hasLeave: false,\r\n isShareScreen: false,\r\n isCameraOff: false,\r\n isMicOff: false,\r\n disableScreenSharing: '',\r\n isPublishStarted: false,\r\n showPrompt: true\r\n },\r\n () => {\r\n const { handleBroadcastChange } = this.props\r\n const { hideElement, myStreamId } = this.state\r\n if (!hideElement) {\r\n handleBroadcastChange()\r\n }\r\n this.setState(\r\n {\r\n speaker: isConferenceHost ? myStreamId : ''\r\n },\r\n () => {\r\n console.log('reConnectSocket isConferenceHost', isConferenceHost)\r\n if (isConferenceHost) {\r\n console.log('if reConnectSocket')\r\n this.initService()\r\n }\r\n }\r\n )\r\n }\r\n )\r\n }\r\n\r\n handleStartApi = () => {\r\n const { eventId } = this.props\r\n api.events\r\n .startLiveEvent(eventId)\r\n .then(res => {\r\n if (res.status === 200) {\r\n console.log('response on starting event', res.data)\r\n }\r\n })\r\n .catch(err => {\r\n console.log('error in starting event', err)\r\n })\r\n }\r\n\r\n initializeSocket = () => {\r\n const { eventId, stopstream, userId, orgId, onStreamStopped } = this.props\r\n this.initSocketConf = new window.WebSocket(\r\n `${config.socketURL}?channel_type=EVENT&channel_id=${eventId}`\r\n )\r\n this.initSocketConf.onopen = () => {\r\n this.initSocketConf.send(\r\n JSON.stringify({\r\n action: 'connectStream',\r\n channel_type: 'EVENT',\r\n channel_id: eventId,\r\n user_id: userId,\r\n org_id: orgId\r\n })\r\n )\r\n this.connectionInterval = setInterval(() => {\r\n this.initSocketConf.send(\r\n JSON.stringify({\r\n action: 'pingPong',\r\n msg: 'ping'\r\n })\r\n )\r\n }, 10000)\r\n }\r\n\r\n this.initSocketConf.onmessage = event => {\r\n const data = JSON.parse(event.data)\r\n console.log('event log endConference', event)\r\n console.log('data log endConference', data)\r\n if (data.event === 'endConference') {\r\n console.log('inside endConference', data.event)\r\n const {\r\n isConferenceHost,\r\n handleBroadcastChange,\r\n streamCount,\r\n fineConnectionState\r\n } = this.props\r\n const { myStreamId } = this.state\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.stop(myStreamId)\r\n webRTCAdaptor.closePeerConnection(myStreamId)\r\n webRTCAdaptor.closeWebSocket()\r\n webRTCAdaptor.closeStream()\r\n }\r\n this.setState(\r\n {\r\n showVideo: false,\r\n isJoined: false,\r\n myStreamId: '',\r\n showPrompt: false,\r\n speaker: '',\r\n streamsList: []\r\n },\r\n () => {\r\n if (isConferenceHost) {\r\n console.log('if endConference', isConferenceHost)\r\n fineConnectionState()\r\n stopstream()\r\n onStreamStopped()\r\n /* const { hasLeave } = this.state\r\n if (!hasLeave) {\r\n handleBroadcastChange()\r\n streamCount('')\r\n } */\r\n prompt = null\r\n }\r\n if (!isConferenceHost) {\r\n console.log('else if endConference', isConferenceHost)\r\n const { hasLeave } = this.state\r\n stopstream()\r\n onStreamStopped()\r\n if (!hasLeave) {\r\n handleBroadcastChange()\r\n streamCount('')\r\n }\r\n }\r\n this.setState({ hasLeave: true })\r\n if (this.connectionInterval !== null) {\r\n clearInterval(this.connectionInterval)\r\n this.connectionInterval = null\r\n }\r\n }\r\n )\r\n }\r\n }\r\n\r\n this.initSocketConf.onclose = () => {\r\n console.log('stop web socket ko')\r\n clearInterval(this.connectionInterval)\r\n }\r\n\r\n this.initSocketConf.onerror = error => {\r\n console.log('Error ' + error.message)\r\n clearInterval(this.connectionInterval)\r\n }\r\n }\r\n\r\n stopConference = () => {\r\n console.log('stopConference')\r\n const { eventId, conferenceId, orgId, userId } = this.props\r\n this.initSocketConf.send(\r\n JSON.stringify({\r\n action: 'disconnectStream',\r\n channel_type: 'EVENT',\r\n channel_id: eventId,\r\n user_id: userId,\r\n org_id: orgId\r\n })\r\n )\r\n\r\n this.initSocketConf.send(\r\n JSON.stringify({\r\n action: 'endConference',\r\n stream_id: conferenceId,\r\n channel_type: 'EVENT',\r\n channel_id: eventId\r\n })\r\n )\r\n }\r\n\r\n handleStopApi = () => {\r\n const { eventId } = this.props\r\n api.events\r\n .stopLiveEvent(eventId)\r\n .then(res => {\r\n if (res.status === 200) {\r\n console.log('response on starting event', res.data)\r\n }\r\n })\r\n .catch(err => {\r\n console.log('error in stopping event', err)\r\n })\r\n }\r\n\r\n leave = () => {\r\n // streamIdInUseMsg = ''\r\n this.setState(\r\n {\r\n canShowModal: false,\r\n hasLeave: true,\r\n hideElement: false,\r\n isPublishStarted: false\r\n },\r\n () => {\r\n const { conferenceId, isConfCreator } = this.props\r\n const { streamsList } = this.state\r\n if (isConfCreator && _.isEmpty(streamsList)) {\r\n console.log('handleStopApi')\r\n this.handleStopApi()\r\n }\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.leaveFromRoom(conferenceId)\r\n }\r\n }\r\n )\r\n }\r\n\r\n toggleModal = () => {\r\n this.setState(state => ({ canShowModal: !state.canShowModal }))\r\n }\r\n\r\n initService = () => {\r\n webRTCAdaptor = new WebRTCAdaptor({\r\n websocket_url: this.SOCKET_URL_PUBLISH,\r\n mediaConstraints: mediaConstraints,\r\n peerconnection_config: pcConfig,\r\n sdp_constraints: sdpConstraints,\r\n localVideoId: 'localVideo',\r\n isPlayMode: false,\r\n debug: true,\r\n bandwidth: 200,\r\n callback: (info, obj) => {\r\n console.log('publish command', info, obj)\r\n const {\r\n conferenceId,\r\n handleBroadcastChange,\r\n isConferenceHost,\r\n streamCount,\r\n isConfCreator\r\n } = this.props\r\n const {\r\n myStreamId,\r\n streamsList,\r\n isJoined,\r\n disableScreenSharing,\r\n isShareScreen\r\n } = this.state\r\n if (info === 'initialized') {\r\n console.log('publish initialized', obj)\r\n console.log('publish initialized conferenceId', conferenceId)\r\n webRTCAdaptor.joinRoom(conferenceId, myStreamId)\r\n this.initializeSocket()\r\n } else if (info === 'start') {\r\n console.log('publish start ', obj)\r\n } else if (info === 'joinedTheRoom') {\r\n const { calculateStopTime, calculateWarnTime } = this.props\r\n closeConnectionMsg = ''\r\n const room = obj.ATTR_ROOM_NAME\r\n console.log('publish joinedTheRoom', obj)\r\n webRTCAdaptor.getRoomInfo(room, obj.streamId)\r\n console.log('publish joinedTheRoom', obj)\r\n this.publish(myStreamId, token)\r\n calculateStopTime()\r\n calculateWarnTime()\r\n this.handleStartApi()\r\n } else if (info === 'newStreamAvailable') {\r\n console.log('publish newStreamAvailable')\r\n this.playVideo(obj)\r\n if (\r\n _.isEmpty(disableScreenSharing) &&\r\n isShareScreen &&\r\n webRTCAdaptor\r\n ) {\r\n console.log('newStreamAvailable myStreamId', myStreamId)\r\n webRTCAdaptor.sendData(myStreamId, 'SCREEN')\r\n }\r\n } else if (info === 'publish_started') {\r\n console.log('publish publish_started', obj, !!webRTCAdaptor)\r\n const { fineConnectionState } = this.props\r\n fineConnectionState()\r\n // streamIdInUseMsg = ''\r\n this.setState(\r\n {\r\n isPublishStarted: true,\r\n hideElement: false\r\n },\r\n () => {\r\n // webRTCAdaptor.enableStats(myStreamId)\r\n if (webRTCAdaptor) {\r\n speech = hark(webRTCAdaptor.localStream, {})\r\n }\r\n if (isJoined) {\r\n speech.on('speaking', () => {\r\n const { isShareScreen, disableScreenSharing } = this.state\r\n const { isDisconnected } = this.props\r\n if (!isDisconnected) {\r\n const { myStreamId } = this.state\r\n const { name } = this.props\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.sendData(myStreamId, `USERNAME_${name}`)\r\n }\r\n if (disableScreenSharing !== '') {\r\n this.setState({ speaker: disableScreenSharing })\r\n } else if (isShareScreen) {\r\n this.setState({ speaker: myStreamId })\r\n } else {\r\n this.setState({ speaker: myStreamId }, () => {\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.sendData(myStreamId, 'SPEAKING')\r\n }\r\n })\r\n }\r\n }\r\n })\r\n }\r\n }\r\n )\r\n } else if (info === 'publish_finished') {\r\n const { hasLeave, myStreamId } = this.state\r\n console.log('publish finished', 'myStreamId', myStreamId)\r\n if (!hasLeave) {\r\n console.log('publish finished if')\r\n this.props.badConnectionState()\r\n // webRTCAdaptor.joinRoom(conferenceId, myStreamId)\r\n this.publish(myStreamId, token)\r\n }\r\n } else if (info === 'leavedFromRoom') {\r\n prompt = false\r\n console.debug('publish leavedFromRoom' + obj)\r\n // this.initSocketConf && this.initSocketConf.close()\r\n if (this.connectionInterval !== null) {\r\n console.log(\r\n 'interval clear connectionInterval leavedFromRoom',\r\n this.connectionInterval\r\n )\r\n clearInterval(this.connectionInterval)\r\n this.connectionInterval = null\r\n }\r\n this.setState(\r\n {\r\n showVideo: false,\r\n isJoined: false,\r\n speaker: '',\r\n myStreamId: '',\r\n showPrompt: false\r\n },\r\n () => {\r\n const { hasLeave } = this.state\r\n if (isConferenceHost) {\r\n if (isConfCreator && _.isEmpty(streamsList)) {\r\n this.stopConference()\r\n }\r\n if (speech) {\r\n speech.stop()\r\n }\r\n }\r\n if (hasLeave) {\r\n handleBroadcastChange()\r\n streamCount('')\r\n }\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.stop(myStreamId)\r\n webRTCAdaptor.closePeerConnection(myStreamId)\r\n webRTCAdaptor.closeWebSocket()\r\n webRTCAdaptor.closeStream()\r\n }\r\n this.setState({ streamsList: [] })\r\n }\r\n )\r\n } else if (info === 'play_finished') {\r\n const { hasLeave, disableScreenSharing, speaker } = this.state\r\n console.log('publish play_finished', obj, 'hasLeave', hasLeave)\r\n this.removeRemoteVideo(obj.streamId)\r\n if (!hasLeave) {\r\n if (isConferenceHost) {\r\n if (disableScreenSharing === speaker) {\r\n if (disableScreenSharing === obj.streamId) {\r\n this.setState({\r\n disableScreenSharing: '',\r\n isShareScreen: false,\r\n speaker: myStreamId\r\n })\r\n } else {\r\n this.setState({\r\n speaker: disableScreenSharing\r\n })\r\n }\r\n } else {\r\n this.setState({ speaker: myStreamId })\r\n }\r\n } else {\r\n this.setState({\r\n disableScreenSharing: '',\r\n isShareScreen: false,\r\n speaker: ''\r\n })\r\n }\r\n }\r\n } else if (info === 'roomInformation') {\r\n console.log('publish roomInformation', obj)\r\n // const streamDifference = _.difference(streamsList, obj.streams)\r\n // console.log('streamDifference', streamDifference)\r\n this.setState(\r\n {\r\n streamsList: obj.streams\r\n },\r\n () => {\r\n const { streamsList } = this.state\r\n if (obj.streams.length > 0) {\r\n obj.streams.forEach(item => {\r\n console.log('Stream playing with ID: ' + item)\r\n const { conferenceId } = this.props\r\n webRTCAdaptor.play(item, token, conferenceId)\r\n })\r\n }\r\n\r\n if (!isConferenceHost && streamsList.length === 0) {\r\n this.setState({ speaker: '' })\r\n this.leave()\r\n }\r\n }\r\n )\r\n console.log('after streamsList', streamsList)\r\n } else if (info === 'closed') {\r\n console.log('publish Connection closed')\r\n console.log('publish Connection webRTCAdaptor', webRTCAdaptor)\r\n const { hasLeave, streamsList } = this.state\r\n const { isDisconnected } = this.props\r\n\r\n if (typeof obj !== 'undefined') {\r\n console.log('publish Connection closed: ' + JSON.stringify(obj))\r\n if (streamsList.length > 0) {\r\n streamsList.forEach(item => {\r\n console.log('publish closed streamDifference remove ', item)\r\n this.removeRemoteVideo(item)\r\n })\r\n }\r\n\r\n if (speech) {\r\n speech.stop()\r\n }\r\n if (!hasLeave) {\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.closeStream()\r\n }\r\n closeConnectionMsg =\r\n 'Server closed unexpectedly. Please rejoin conference again.'\r\n if (isDisconnected) {\r\n this.initSocketConf && this.initSocketConf.close()\r\n if (this.connectionInterval !== null) {\r\n console.log(\r\n 'interval clear connectionInterval closed',\r\n this.connectionInterval\r\n )\r\n clearInterval(this.connectionInterval)\r\n this.connectionInterval = null\r\n }\r\n this.setState(\r\n {\r\n streamsList: [],\r\n showVideo: false,\r\n isJoined: false,\r\n speaker: '',\r\n myStreamId: '',\r\n showPrompt: false,\r\n callFirstTime: true\r\n },\r\n () => {\r\n handleBroadcastChange()\r\n streamCount('')\r\n setTimeout(() => {\r\n closeConnectionMsg = ''\r\n }, 2000)\r\n }\r\n )\r\n } else {\r\n closeConnectionMsg =\r\n 'Server closed unexpectedly. Reconnecting again.'\r\n this.setState(\r\n {\r\n hideElement: true\r\n },\r\n () => {\r\n this.reConnectSocket()\r\n }\r\n )\r\n }\r\n }\r\n }\r\n } else if (info === 'takeConfiguration') {\r\n console.log('publish takeConfiguration')\r\n } else if (info === 'server_will_stop') {\r\n console.log('publish server_will_stop')\r\n } else if (info === 'data_channel_opened') {\r\n console.log('publish Data Channel open for stream id', obj)\r\n } else if (info === 'data_channel_closed') {\r\n console.log('publish Data Channel closed', obj)\r\n } else if (info === 'updated_stats') {\r\n // console.log('updated_stats audioLevel', obj.audioLevel)\r\n // console.log('updated_stats streamId', obj.streamId)\r\n } else if (info === 'ice_connection_state_changed') {\r\n console.log('iceConnectionState Changed: ', JSON.stringify(obj))\r\n const iceState = webRTCAdaptor.signallingState(myStreamId)\r\n\r\n console.log('I am in checkAndRepublishIfRequired')\r\n console.log('I am in checkAndRepublishIfRequired iceState', iceState)\r\n if (\r\n (obj.state === null ||\r\n obj.state === 'failed' ||\r\n obj.state === 'disconnected' ||\r\n iceState === null ||\r\n iceState === 'failed' ||\r\n iceState === 'disconnected') &&\r\n isConferenceHost\r\n ) {\r\n const { myStreamId } = this.state\r\n this.setState(\r\n {\r\n speaker: myStreamId\r\n },\r\n () => {\r\n console.log(\r\n 'obj.state ice connection state ',\r\n obj.state,\r\n 'ice myStreamId',\r\n myStreamId\r\n )\r\n console.log('if checkAndRepublishIfRequired')\r\n // webRTCAdaptor.joinRoom(conferenceId, myStreamId)\r\n this.publish(myStreamId, token)\r\n }\r\n )\r\n }\r\n } else if (info === 'screen_share_stopped') {\r\n console.log('publish screen_share_stopped', obj)\r\n this.setState(\r\n {\r\n disableScreenSharing: '',\r\n isShareScreen: false\r\n },\r\n () => {\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.sendData(myStreamId, 'CAMERA')\r\n }\r\n }\r\n )\r\n } else if (info === 'data_received') {\r\n if (obj.event.data === 'MUTED') {\r\n if (obj.streamId === myStreamId) {\r\n this.setState({ isMicOff: true }, () => {\r\n webRTCAdaptor.muteLocalMic()\r\n })\r\n }\r\n }\r\n\r\n if (obj.event.data === 'UNMUTED') {\r\n if (obj.streamId !== myStreamId) {\r\n let targetVideo = document.getElementById(\r\n 'remoteVideo' + obj.streamId\r\n )\r\n let targetIcon = document.getElementById('icon' + obj.streamId)\r\n if (targetVideo) {\r\n targetVideo.muted = false\r\n targetIcon.src = unmute\r\n }\r\n }\r\n }\r\n\r\n const eventData = obj.event.data.split('_')\r\n if (obj.event.data === 'SPEAKING') {\r\n if (!disableScreenSharing && !isShareScreen) {\r\n this.setState({ speaker: obj.streamId })\r\n }\r\n }\r\n\r\n if (eventData[0] === 'USERNAME') {\r\n if (obj.streamId !== myStreamId) {\r\n let targetUser = document.getElementById(\r\n 'username' + obj.streamId\r\n )\r\n if (targetUser) {\r\n targetUser.innerText = eventData[1]\r\n }\r\n }\r\n }\r\n\r\n if (obj.event.data === 'SCREEN') {\r\n if (!isShareScreen) {\r\n this.setState({\r\n disableScreenSharing: obj.streamId,\r\n speaker: obj.streamId\r\n })\r\n }\r\n }\r\n\r\n if (obj.event.data === 'CAMERA') {\r\n this.setState({ disableScreenSharing: '', isShareScreen: false })\r\n }\r\n\r\n if (obj.event.data === 'MUTED') {\r\n if (obj.streamId !== myStreamId) {\r\n let targetVideo = document.getElementById(\r\n 'remoteVideo' + obj.streamId\r\n )\r\n let targetIcon = document.getElementById('icon' + obj.streamId)\r\n if (targetVideo) {\r\n targetVideo.muted = true\r\n targetIcon.src = mute\r\n }\r\n } else {\r\n this.setState({ isMicOff: true }, () => {\r\n webRTCAdaptor.muteLocalMic()\r\n })\r\n }\r\n }\r\n }\r\n },\r\n callbackError: (error, message) => {\r\n // some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError\r\n const { myStreamId } = this.state\r\n const { t } = this.props\r\n console.log('publish log error ', error.isTrusted)\r\n console.log('publish log message ', message)\r\n console.log('publish error callback: ' + JSON.stringify(error), message)\r\n let errorMessage = JSON.stringify(error)\r\n if (error.isTrusted) {\r\n console.log('inside error.isTrusted publish', error.isTrusted)\r\n return\r\n }\r\n if (typeof message !== 'undefined') {\r\n errorMessage = message\r\n }\r\n if (error.indexOf('NotFoundError') !== -1) {\r\n errorMessage =\r\n 'Camera or Mic are not found or not allowed in your device.'\r\n } else if (\r\n error.indexOf('NotReadableError') !== -1 ||\r\n error.indexOf('TrackStartError') !== -1\r\n ) {\r\n errorMessage =\r\n 'Camera or Mic is being used by some other process that does not not allow these devices to be read.'\r\n } else if (\r\n error.indexOf('OverconstrainedError') !== -1 ||\r\n error.indexOf('ConstraintNotSatisfiedError') !== -1\r\n ) {\r\n errorMessage =\r\n 'There is no device found that fits your video and audio constraints. You may change video and audio constraints.'\r\n } else if (\r\n error.indexOf('NotAllowedError') !== -1 ||\r\n error.indexOf('PermissionDeniedError') !== -1\r\n ) {\r\n errorMessage = 'You are not allowed to access camera and mic.'\r\n } else if (error.indexOf('TypeError') !== -1) {\r\n errorMessage = 'Video/Audio is required.'\r\n } else if (error.indexOf('publishTimeoutError') !== -1) {\r\n const { myStreamId } = this.state\r\n console.log('publishTimeOutError Inside', myStreamId)\r\n errorMessage = 'publish timeout error'\r\n this.publish(myStreamId, token)\r\n } else if (error.indexOf('not_initialized_yet') !== -1) {\r\n const { myStreamId } = this.state\r\n console.log('not_initialized_yet Inside', myStreamId)\r\n errorMessage = 'publish not_initialized_yet'\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.stop(myStreamId)\r\n webRTCAdaptor.closePeerConnection(myStreamId)\r\n webRTCAdaptor.closeWebSocket()\r\n }\r\n this.reConnectSocket()\r\n } else if (error.indexOf('streamIdInUse') !== -1) {\r\n errorMessage = 'publish streamIdInUse'\r\n console.log('publish streamIdInUse')\r\n this.deleteMyStream('streamIdInUse')\r\n // streamIdInUseMsg = 'publish streamIdInUse'\r\n } else if (error.indexOf('UnsecureContext') !== -1) {\r\n errorMessage =\r\n 'Fatal Error: Browser cannot access camera and mic because of unsecure context. Please install SSL and access via https'\r\n } else if (error.indexOf('ScreenSharePermissionDenied') !== -1) {\r\n errorMessage = t('events:screen_share_denied')\r\n this.setState(\r\n {\r\n disableScreenSharing: '',\r\n isShareScreen: false\r\n },\r\n () => {\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.sendData(myStreamId, 'CAMERA')\r\n }\r\n }\r\n )\r\n } else if (error.indexOf('WebSocketNotSupported') !== -1) {\r\n errorMessage = 'Fatal Error: WebSocket not supported in this browser'\r\n } else if (error.indexOf('already_playing') !== -1) {\r\n errorMessage = 'Stream already playing'\r\n } else if (error.indexOf('WebSocketNotConnected') !== -1) {\r\n console.log('publish WebSocketNotConnected')\r\n errorMessage = 'publish WebSocketNotConnected'\r\n } else if (error.indexOf('no_stream_exist') !== -1) {\r\n console.log('publish No stream exist')\r\n errorMessage = 'publish No stream exist'\r\n this.removeRemoteVideo(error.streamId)\r\n // TODO: removeRemoteVideo(error.streamId);\r\n } else if (error.indexOf('data_channel_error') !== -1) {\r\n errorMessage =\r\n 'publish There was a error during data channel communication'\r\n } else {\r\n errorMessage = 'Unknown error'\r\n }\r\n console.log('errorMessage: ', errorMessage)\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n const {\r\n showVideo,\r\n isJoined,\r\n isCameraOff,\r\n isMicOff,\r\n isShareScreen,\r\n disableScreenSharing,\r\n showPrompt,\r\n canShowModal,\r\n streamsList,\r\n isPublishStarted,\r\n myStreamId,\r\n callFirstTime,\r\n speaker\r\n } = this.state\r\n const {\r\n isStreamStopped,\r\n isConferenceHost,\r\n t,\r\n allowJoin,\r\n conferenceId,\r\n isConfCreator\r\n } = this.props\r\n\r\n console.log(\r\n 'conference render logs new',\r\n 'isStreamStopped',\r\n isStreamStopped,\r\n 'allowJoin',\r\n allowJoin,\r\n 'isJoined',\r\n isJoined,\r\n 'myStreamId',\r\n myStreamId,\r\n 'connectionInterval',\r\n this.connectionInterval,\r\n 'streamsList',\r\n streamsList,\r\n 'callFirstTime',\r\n callFirstTime,\r\n 'speaker',\r\n speaker,\r\n 'initSocketConf',\r\n this.initSocketConf,\r\n 'isStreamStopped',\r\n this.props.isStreamStopped,\r\n 'isConferenceHost',\r\n isConferenceHost,\r\n 'isConfCreator',\r\n isConfCreator\r\n )\r\n return (\r\n \r\n {/*{streamIdInUseMsg && message.error(streamIdInUseMsg)}*/}\r\n {closeConnectionMsg && message.error(closeConnectionMsg)}\r\n {showVideo && (\r\n <>\r\n {\r\n prompt = window.confirm(t('events:prompt_message'))\r\n if (prompt) {\r\n if (webRTCAdaptor) {\r\n webRTCAdaptor.closeStream()\r\n webRTCAdaptor.leaveFromRoom(conferenceId)\r\n }\r\n return prompt\r\n } else {\r\n return false\r\n }\r\n }}\r\n />\r\n \r\n
\r\n \r\n )}\r\n {allowJoin && !isStreamStopped && (\r\n \r\n {!isJoined && (\r\n \r\n this.reConnectSocket()}\r\n >\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n {isConferenceHost ? (\r\n
\r\n \r\n \r\n {t('labels:processing')}\r\n \r\n )}\r\n
\r\n ) : (\r\n <>\r\n {streamsList.length === 0 && (\r\n \r\n
\r\n {!isPublishStarted && (\r\n \r\n \r\n {t('general:loading')}\r\n \r\n
\r\n )}\r\n \r\n )}\r\n \r\n {isJoined &&\r\n isConferenceHost &&\r\n (isShareScreen ? (\r\n \r\n this.screenShare()}\r\n >\r\n \r\n
\r\n \r\n ) : (\r\n {t('events:event_modal_warn')}
\r\n \r\n )}\r\n \r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default NetworkDetection(OneTwoOne)\r\n","import React, { Component } from 'react'\r\nimport Slider from 'react-slick'\r\nimport 'slick-carousel/slick/slick.css'\r\nimport 'slick-carousel/slick/slick-theme.css'\r\nimport './slickCarousel.scss'\r\n\r\nexport default class SlickCarousel extends Component {\r\n render () {\r\n const settings = {\r\n dots: true,\r\n infinite: true,\r\n speed: 500,\r\n lazyload: true,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n beforeChange: (current, next) =>\r\n this.props.children[current].props.onPause()\r\n }\r\n\r\n return (\r\n\r\n <>\r\n {!loading &&\r\n isGridActive &&\r\n !sharingAttendeeId &&\r\n !isWhiteboardSharing && (\r\n \r\n {remoteTileId ? (\r\n
\r\n )\r\n })}\r\n \r\n )}\r\n {(!isGridActive ||\r\n (isGridActive && sharingAttendeeId) ||\r\n (isGridActive && isWhiteboardSharing)) && (\r\n \r\n {isConferenceHost && (\r\n item === localChimeId)\r\n ? '_active-speaker'\r\n : 'null'\r\n }`}\r\n style={{ minWidth: MINWIDTH }}\r\n >\r\n {isVideoEnabled ? (\r\n
\r\n )}\r\n\r\n {attendeesToRender &&\r\n attendeesToRender.map(item => {\r\n const remoteTileId = attendeeIdToTileId[item.chimeAttendeeId]\r\n\r\n const chimeId = item.chimeAttendeeId\r\n const userParam = item.externalUserId.split('#')\r\n const name = userParam[0]\r\n const id = userParam[1]\r\n return (\r\n \r\n {loading ? (\r\n \r\n ) : (\r\n <>\r\n {isConferenceHost && (\r\n \r\n {isVideoEnabled ? (\r\n
\r\n )}\r\n\r\n {!isConferenceHost &&\r\n attendeesToRender &&\r\n attendeesToRender.length === 0 && (\r\n <>\r\n \r\n
\r\n \r\n )}\r\n\r\n {attendeesToRender &&\r\n attendeesToRender.map((item, index) => {\r\n const remoteTileId =\r\n attendeeIdToTileId[item.chimeAttendeeId]\r\n\r\n const chimeId = item.chimeAttendeeId\r\n const tileItem = tiles.filter(item => item === remoteTileId)\r\n\r\n const isRemoteVideoEnabled = tileItem && tileItem.length > 0\r\n\r\n const userParam = item.externalUserId.split('#')\r\n const name = userParam[0]\r\n const id = userParam[1]\r\n return (\r\n \r\n
\r\n \r\n Waiting for host to join...\r\n
\r\n\r\n {\r\n toggleMute(id)\r\n }}\r\n >\r\n
\r\n)\r\n\r\nexport const DisabledContainer = ({ id, participants }) => {\r\n const disabledParticipant = participants.filter(item => item.id === id)\r\n\r\n const avatar =\r\n disabledParticipant &&\r\n disabledParticipant[0] &&\r\n disabledParticipant[0].avatar\r\n const cover = avatar && avatar.link ? avatar.link : userImage\r\n return (\r\n \r\n 
\r\n
\r\n )\r\n}\r\n\r\nexport default Chime\r\n","import React from 'react'\r\nimport { Select, Icon, Input, Switch } from 'antd'\r\nimport _ from 'lodash'\r\nimport './BreakoutRoom.scss'\r\nimport { transcribeKeys } from '../../../../../constants'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nconst { Option } = Select\r\n\r\nconst countOptions = [\r\n { value: 1, label: '1' },\r\n { value: 2, label: '2' },\r\n { value: 3, label: '3' }\r\n]\r\n\r\nfunction BreakoutForm({\r\n setBreakoutRoomCount,\r\n breakoutRoom,\r\n handleBreakoutRoom,\r\n rooms,\r\n removeRoom,\r\n organization,\r\n handleChangeLocale,\r\n handleCheckChange,\r\n errors,\r\n t\r\n}) {\r\n const handleBreakoutSetting = (index, field, value) => {\r\n handleBreakoutRoom(index, field, value)\r\n }\r\n\r\n const handleSwitchSetting = (index, field, value) => {\r\n handleCheckChange(index, field, value)\r\n }\r\n\r\n const handleChangeTranscribeLocale = (index, value) => {\r\n handleChangeLocale(index, value)\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default withTranslation()(BreakoutForm)\r\n","import BreakoutForm from './BreakoutForm'\r\n\r\nexport default BreakoutForm","import React, { useState, useEffect } from 'react'\r\nimport './EventMenus.scss'\r\nimport moment from 'moment'\r\n\r\nimport cameraOff from '../../assets/camera_off.svg'\r\nimport cameraOn from '../../assets/camera_on.svg'\r\nimport micOff from '../../assets/mic_off.svg'\r\nimport micOn from '../../assets/mic_on.svg'\r\nimport grid from '../../assets/grid.svg'\r\nimport leave from '../../assets/leave.svg'\r\nimport greenHand from '../../assets/raise.svg'\r\nimport yellowHand from '../../assets/yellowHandRaise.svg'\r\nimport grayHand from '../../assets/grayHandRaise.svg'\r\nimport record from '../../assets/record.svg'\r\nimport fullScreen from '../../assets/full_screen.svg'\r\nimport shareScreenLogo from '../../assets/share_screen.svg'\r\nimport stopShareScreenLogo from '../../assets/stop_screen_share.svg'\r\nimport whiteboardLogo from '../../assets/whiteboard.png'\r\nimport { withTranslation } from 'react-i18next'\r\nimport _ from 'lodash'\r\n\r\nimport { Icon, Menu, Popover } from 'antd'\r\n\r\nconst EventMenus = props => {\r\n const {\r\n onScreenShare,\r\n onClickBreakoutRooms,\r\n onClickParticipants,\r\n onClickMute,\r\n onHandRaise,\r\n onClickVideo,\r\n onClickGrid,\r\n onExitHandRaise,\r\n isBreakoutRoom = true,\r\n isParticipants = true,\r\n isRecord = true,\r\n isAudio = true,\r\n isVideo = true,\r\n videoRef,\r\n audioRef,\r\n isScreenSharing,\r\n isRecording,\r\n isConfCreator,\r\n onLeave,\r\n show: { participants, rooms },\r\n onEndForAll,\r\n onClickFullScreen,\r\n isRemoteScreenSharing,\r\n isConferenceHost,\r\n raiseHandAllowed,\r\n isConferenceParticipant,\r\n isHandRaised,\r\n isGridActive,\r\n raiseHandRequesting,\r\n allowScreenSharing = true,\r\n localStream,\r\n isAgora,\r\n t,\r\n isWhiteboardSharing,\r\n onClickWhiteboardSharing,\r\n allowWhiteboardSharing = true,\r\n eventStartTime,\r\n consumerId,\r\n userId,\r\n wbRoomToken\r\n } = props\r\n\r\n const [wait, setWait] = useState(true) // dont forget: it must be true\r\n const [isWbButtonEnable, setIsWbButtonEnable] = useState(false)\r\n const [popoverStatus, setPopoverStatus] = useState(false)\r\n\r\n const closePopover = () => {\r\n setPopoverStatus(false)\r\n return popoverStatus\r\n }\r\n\r\n const handleVisibleChange = value => {\r\n setPopoverStatus(value)\r\n }\r\n\r\n const showAudio = isConferenceHost || (isHandRaised && !raiseHandRequesting)\r\n const showVideo = isConferenceHost\r\n\r\n const handIcon = !isHandRaised\r\n ? grayHand\r\n : raiseHandRequesting\r\n ? yellowHand\r\n : greenHand\r\n const raiseHandSubtext = !isHandRaised\r\n ? t('v2:raise_hand')\r\n : raiseHandRequesting\r\n ? t('v2:waiting__')\r\n : t('v2:audio_active')\r\n\r\n const isScreenSharingActive = isScreenSharing || isRemoteScreenSharing\r\n\r\n const setWaitWhiteboard = async () => {\r\n var now = moment(new Date())\r\n var startTime = moment(eventStartTime)\r\n var waitUntil = moment(startTime).add(1, 'minute')\r\n\r\n if (now.isBefore(waitUntil)) {\r\n setTimeout(() => {\r\n setWait(false)\r\n }, Math.abs(1000 * now.diff(waitUntil, 'seconds')))\r\n } else setWait(false)\r\n }\r\n\r\n useEffect(() => {\r\n setIsWbButtonEnable(\r\n !wait &&\r\n !isScreenSharing &&\r\n (!isWhiteboardSharing || consumerId === userId) &&\r\n (!isAgora || wbRoomToken)\r\n )\r\n }, [\r\n isScreenSharingActive,\r\n wait,\r\n consumerId,\r\n isWhiteboardSharing,\r\n wbRoomToken\r\n ])\r\n\r\n // no need to wait for agora events\r\n useEffect(() => {\r\n if (!isAgora && eventStartTime) {\r\n setWaitWhiteboard()\r\n } else if (isAgora) setWait(false)\r\n }, [eventStartTime])\r\n\r\n const menu = (\r\n \r\n )\r\n\r\n const popoverMenu = (\r\n \r\n {\r\n setBreakoutRoomCount(e)\r\n }}\r\n filterOption={(input, option) =>\r\n !_.isArray(option.props.children) &&\r\n option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=\r\n 0\r\n }\r\n >\r\n {countOptions.map(item => (\r\n \r\n ))}\r\n \r\n
\r\n {breakoutRoom > 0 &&\r\n rooms.length > 0 &&\r\n rooms.map((e, i) => (\r\n {t('v2:how_many_breakout_room_to_create')}
\r\n{t('v2:create_upto_three_breakout_rooms')}
\r\n\r\n
\r\n ))}\r\n \r\n {t('v2:breakout_room')} {i + 1}\r\n
\r\n removeRoom(i)}>\r\n
\r\n \r\n
\r\n \r\n {/* Name of Room */}\r\n \r\n handleBreakoutSetting(i, 'title', e.target.value)\r\n }\r\n />\r\n {errors[i] && errors[i].title && (\r\n
\r\n {errors[i].title}
\r\n )}\r\n \r\n handleChangeTranscribeLocale(i, e)}\r\n filterOption={(input, option) =>\r\n !_.isArray(option.props.children) &&\r\n option.props.children\r\n .toLowerCase()\r\n .indexOf(input.toLowerCase()) >= 0\r\n }\r\n disabled={!e.is_transcribed}\r\n >\r\n {transcribeKeys.map(item => (\r\n \r\n ))}\r\n \r\n
\r\n \r\n {\r\n handleSwitchSetting(i, 'is_recording', e)\r\n }}\r\n value={e.is_recording}\r\n />\r\n {\r\n handleBreakoutSetting(i, 'is_transcribed', e)\r\n }}\r\n value={e.is_transcribed}\r\n disabled={!e.is_recording}\r\n />\r\n {organization && organization.enable_ai && (\r\n {\r\n handleBreakoutSetting(i, 'is_ai_enabled', e)\r\n }}\r\n disabled={!e.is_transcribed || !e.is_recording}\r\n value={e.is_ai_enabled}\r\n style={{ marginRight: '10px' }}\r\n />\r\n )}\r\n
\r\n {errors[i] && errors[i].error_msg_ai && (\r\n {errors[i].error_msg_ai}
\r\n )}\r\n \r\n {\r\n if (!isScreenSharingActive || !isWhiteboardSharing)\r\n return onClickGrid()\r\n else return null\r\n }}\r\n >\r\n 
\r\n
\r\n {isRemoteScreenSharing && (\r\n \r\n {' '}\r\n {isGridActive ? t('v2:hide_grid') : t('v2:show_grid')}\r\n
\r\n onClickFullScreen()}>\r\n 
\r\n
\r\n )}\r\n\r\n {isConferenceHost && allowScreenSharing && (\r\n {t('v2:full_screen')}
\r\n \r\n {isScreenSharing ? t('v2:stop_screen_share') : t('v2:screen_share')}\r\n
\r\n \r\n )}\r\n\r\n {!isAgora && isConferenceHost && allowWhiteboardSharing && (\r\n \r\n {isWhiteboardSharing\r\n ? t('v2:leave whiteboard')\r\n : t('v2:whiteboard')}\r\n
\r\n \r\n )}\r\n \r\n )\r\n\r\n return (\r\n \r\n \r\n onClickParticipants('PARTICIPANTS')}\r\n disabled={!isParticipants}\r\n >\r\n
\r\n\r\n {!isConferenceHost && isConferenceParticipant && raiseHandAllowed && (\r\n \r\n
\r\n \r\n\r\n {t('v2:more')}
\r\n {t('labels:participants')}
\r\n {raiseHandSubtext}
\r\n \r\n )}\r\n\r\n {isBreakoutRoom && (\r\n {t('v2:breakout_room')}
\r\n \r\n )}\r\n\r\n \r\n
\r\n\r\n {showAudio && (\r\n \r\n {t('v4:is_record')}\r\n {isRecording && 'ing'}\r\n
\r\n {isAudio ? t('v2:mute') : t('v2:unmute')}
\r\n \r\n )}\r\n\r\n {showVideo && (\r\n {t('media:video')}
\r\n \r\n )}\r\n\r\n {isConfCreator ? (\r\n \r\n {confFailed && confErrorMsg && message.error(confErrorMsg)}\r\n {failInvitation && message.error('Please try again.')}\r\n {successInvitation &&\r\n message.success(\r\n 'Your invitation sent successfully. Participant(s) will get notification in their email'\r\n )}\r\n\r\n {showVideo && (\r\n <>\r\n {\r\n prompt = window.confirm(t('events:prompt_message'))\r\n if (prompt) {\r\n leaveEvent()\r\n return prompt\r\n } else {\r\n return false\r\n }\r\n }}\r\n />\r\n setIsGridActive(!isGridActive)}\r\n isWhiteboardSharing={isWhiteboardSharing}\r\n sendRealTimeMessage={sendMessage}\r\n meetingManager={meetingManager}\r\n eventId={props.eventId}\r\n whiteboardRequest={whiteboardRequest}\r\n whiteboardResponse={whiteboardResponse}\r\n setWhiteboardRequest={setWhiteboardRequest}\r\n setWhiteboardResponse={setWhiteboardResponse}\r\n consumerId={wbConsumerId}\r\n onClickWhiteboardSharing={() => {\r\n sendWhiteboardStatus(!isWhiteboardSharing)\r\n }}\r\n />\r\n \r\n )}\r\n\r\n {allowJoin && (\r\n <>\r\n leaveEvent()}\r\n // leaveEvent()}\r\n onCancel={toggleModal}\r\n >\r\n checkEndCondition()}\r\n onOk={() => endEvent()}\r\n onCancel={toggleEndModal}\r\n >\r\n \r\n {t('buttons:cancel')}\r\n ,\r\n \r\n {t('v2:send_invitations')}\r\n \r\n ]}\r\n >\r\n \r\n {t('buttons:create')}\r\n \r\n ]}\r\n >\r\n
\r\n )\r\n}\r\n\r\nexport default ChimeConference\r\n","import ReactDOM from 'react-dom'\r\nimport React, { useRef, useEffect, useState } from 'react'\r\n// import { WhiteWebSdk } from 'white-web-sdk'\r\nimport './AgoraWhiteboard.css'\r\nimport { Modal, Button } from 'antd'\r\nimport config from '../../../../../constants/config'\r\n\r\nexport default function Whiteboard({\r\n wbRoomUUID,\r\n wbRoomToken,\r\n userId,\r\n consumerId\r\n}) {\r\n const wbRef = useRef(null)\r\n const toolRef = useRef(null)\r\n const roomRef = useRef(null)\r\n const controlsRef = useRef(null)\r\n const containerRef = useRef(null)\r\n const colorInput = useRef(null)\r\n const widthInput = useRef(null)\r\n const textSizeInput = useRef(null)\r\n\r\n const [visible, setVisible] = useState(false)\r\n\r\n //const className = consumerId === userId ? 'active' : 'inactive'\r\n const className = 'active'\r\n\r\n const showModal = () => setVisible(true)\r\n const handleCancel = () => setVisible(false)\r\n\r\n // useEffect(() => {\r\n // const whiteboard = wbRef.current\r\n\r\n // // Create an instance of the WhiteWebSdk class.\r\n // const whiteWebSdk = new WhiteWebSdk({\r\n // // Pass in your App Identifier.\r\n // appIdentifier: config.agoraWbAppId,\r\n // // Set the data center as Silicon Valley, US.\r\n // region: 'us-sv'\r\n // })\r\n\r\n // var joinRoomParams = {\r\n // uuid: wbRoomUUID,\r\n // // The unique identifier of a user. If you use versions earlier than v2.15.0, do not add this line.\r\n // uid: `${userId}`,\r\n // roomToken: wbRoomToken\r\n // }\r\n\r\n // whiteWebSdk\r\n // .joinRoom(joinRoomParams)\r\n // .then(function(room) {\r\n // room.bindHtmlElement(whiteboard)\r\n // roomRef.current = room\r\n // var toolbar = toolRef.current\r\n // var toolNames = [\r\n // 'pencil',\r\n // 'selector',\r\n // 'rectangle',\r\n // 'eraser',\r\n // 'text',\r\n // 'arrow',\r\n // 'ellipse',\r\n // 'hand',\r\n // 'straight'\r\n // ]\r\n\r\n // // Create a button for each tool.\r\n // for (var idx in toolNames) {\r\n // var toolName = toolNames[idx]\r\n // var btn = document.createElement('span')\r\n // ReactDOM.render(\r\n // \r\n {isJoined && (\r\n {\r\n App.onHeaderItemClick(params)\r\n App.onBreakoutRoom(isConfCreator && has_breakout_room)\r\n }}\r\n onClickParticipants={params => App.onHeaderItemClick(params)}\r\n onClickFullScreen={fullScreenMode}\r\n onClickGrid={() => setIsGridActive(!isGridActive)}\r\n onHandRaise={App.handleRaiseHand}\r\n onExitHandRaise={() => App.declineToAsk(userId)}\r\n isWhiteboardSharing={isWhiteboardSharing}\r\n onClickWhiteboardSharing={() => {\r\n sendWhiteboardStatus(!isWhiteboardSharing)\r\n }}\r\n eventStartTime={eventStartTime}\r\n consumerId={wbConsumerId}\r\n userId={userId}\r\n />\r\n )}\r\n
\r\n {canShowModal && (\r\n \r\n {hasBreakoutRoom\r\n ? t('events:event_breakout_leave')\r\n : t('events:event_modal_warn')}\r\n
\r\n \r\n )}\r\n {canShowEndModal && (\r\n\r\n {hasBreakoutRoom\r\n ? t('events:event_breakout_end')\r\n : t('events:event_end_warn')}\r\n
\r\n \r\n )}\r\n {showParticipant && !isMaxParticipants && (\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {failInvitation && message.error('Please try again.')}\r\n {successInvitation &&\r\n message.success(\r\n 'Your invitation sent successfully. Participant(s) will get notification in their email'\r\n )}\r\n {showVideo && (\r\n <>\r\n {\r\n prompt = window.confirm(t('events:prompt_message'))\r\n if (prompt) {\r\n this.leaveEvent()\r\n return prompt\r\n } else {\r\n return false\r\n }\r\n }}\r\n />\r\n \r\n \r\n
\r\n )\r\n })}\r\n {/* */}\r\n \r\n )}\r\n {/* */}\r\n {isLoading && (\r\n \r\n \r\n
\r\n )}\r\n\r\n {!isConferenceHost &&\r\n streamList &&\r\n streamList.length === 0 && (\r\n \r\n \r\n {this.state.isWhiteboardSharing && (\r\n \r\n
\r\n )}\r\n\r\n {!isConferenceHost && isLocalUserAllowed && (\r\n \r\n
\r\n )}\r\n\r\n {!videoTiles ? (\r\n \r\n
\r\n )}\r\n {streamList.map((item, index) => {\r\n let id = item.streamId\r\n let remotename = remoteUserDetails.find(\r\n remote => id === remote.user_id\r\n )\r\n const isVideoDisabled = item.peerMuteVideo\r\n\r\n const isSharedScreen =\r\n screenStreamList &&\r\n screenStreamList.length > 0 &&\r\n screenStreamList[0].streamId === id\r\n\r\n return (\r\n \r\n \r\n Waiting for host to join...\r\n \r\n
\r\n \r\n {isJoined && (\r\n \r\n isCameraOff\r\n ? this.turnOnLocalCamera()\r\n : this.turnOffLocalCamera()\r\n }\r\n onEndForAll={this.toggleEndModal}\r\n onScreenShare={this.sharingScreen}\r\n onClickBreakoutRooms={params => {\r\n App.onHeaderItemClick(params)\r\n App.onBreakoutRoom(isConfCreator && event.has_breakout_room)\r\n }}\r\n onClickParticipants={params => App.onHeaderItemClick(params)}\r\n onClickFullScreen={this.fullScreenMode}\r\n onClickGrid={() =>\r\n this.setState({ isGridActive: !this.state.isGridActive })\r\n }\r\n onHandRaise={App.handleRaiseHand}\r\n onExitHandRaise={() => {\r\n this.setState({ isLocalVideoPlaying: false }, () => {\r\n App.declineToAsk(userId)\r\n })\r\n }}\r\n localStream={this.localStream}\r\n isAgora\r\n isWhiteboardSharing={this.state.isWhiteboardSharing}\r\n onClickWhiteboardSharing={() => {\r\n this.sendWhiteboardStatus(!this.state.isWhiteboardSharing)\r\n }}\r\n consumerId={this.state.wbConsumerId}\r\n userId={userId}\r\n wbRoomToken={this.state.wbRoomToken}\r\n />\r\n )}\r\n
\r\n {canShowModal && (\r\n {t('events:event_modal_warn')}
\r\n \r\n )}\r\n {canShowEndModal && (\r\n{t('events:event_end_warn')}
\r\n \r\n )}\r\n {showParticipant && !isMaxParticipants && (\r\n\r\n {isConfCreator ? (\r\n \r\n {\r\n toggleMute(id)\r\n }}\r\n >\r\n {isAudioMuted ? (\r\n 
\r\n ) : (\r\n 
\r\n )}\r\n \r\n \r\n ) : (\r\n \r\n )}{' '}\r\n {name}\r\n
\r\n)\r\n\r\nexport const DisabledContainer = ({ id, participants }) => {\r\n const disabledParticipant = participants.filter(item => item.user_id === id)\r\n\r\n const participant = disabledParticipant && disabledParticipant[0]\r\n const cover = participant && participant.avatar\r\n return (\r\n \r\n {/* {cover ? ( */}\r\n 
\r\n {/* ) : (\r\n
\r\n )\r\n}\r\n","import React from 'react'\r\n\r\nimport { Col, Row, InputNumber, Alert, Button, message, Form } from 'antd'\r\nimport './LiveAssessment.scss'\r\n\r\nimport moment from 'moment'\r\nimport _ from 'lodash'\r\nimport { api } from '../../../../../services'\r\nimport { withTranslation } from 'react-i18next'\r\nclass LiveAssessment extends React.Component {\r\n state = {\r\n isFormDisabled: true,\r\n assessmentsLog: [],\r\n score: this.props.scores.assessment_score || {},\r\n isSubmitted: false,\r\n isSubmittingScore: false\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const { socket, id, isFinished, t } = this.props\r\n\r\n if (prevProps.socket !== socket) {\r\n if (socket.readyState === socket.OPEN) {\r\n socket.send(\r\n JSON.stringify({\r\n action: 'liveAssessment',\r\n assessment_action: 'getAssessmentTime',\r\n channel_id: id\r\n })\r\n )\r\n\r\n socket.onmessage = event => {\r\n const data = JSON.parse(event.data)\r\n if (data.event === 'getAssessmentTime') {\r\n this.setState({\r\n isFormDisabled: false,\r\n assessmentsLog: data.assessment_time\r\n })\r\n\r\n if (data.assessment_time.length === 0) {\r\n document.querySelectorAll('.assessment_score').forEach(item => {\r\n if (item.checked && !isFinished)\r\n message.warning(t('recording_is_starting'))\r\n return (item.checked = false)\r\n })\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n handleAssessment = index => {\r\n const { id } = this.props\r\n this.send({\r\n action: 'liveAssessment',\r\n assessment_action: 'putAssessmentTime',\r\n channel_id: id,\r\n content: { [`${index}`]: moment.utc().toDate() }\r\n })\r\n }\r\n\r\n send = obj => {\r\n const { socket } = this.props\r\n socket.send(JSON.stringify(obj))\r\n }\r\n\r\n handleQuestionClick = index => {\r\n const { isFinished, logs = [], seekVideoToTime } = this.props\r\n\r\n if (!isFinished || logs.length === 0) return\r\n\r\n const indexItem = logs.find(item => Object.keys(item)[0] === index)\r\n\r\n if (!indexItem) return\r\n seekVideoToTime(indexItem[index])\r\n }\r\n\r\n handleAssessmentScore = _.debounce((v, w) => this.handleScore(v, w), 1000)\r\n\r\n handleScore = (val, index) => {\r\n const { id, form } = this.props\r\n\r\n if (val && (isNaN(val.toString()) || val <= 0 || val > 100)) {\r\n form.validateFields()\r\n return\r\n }\r\n\r\n let scoreObj = this.state.score\r\n\r\n if (val) {\r\n scoreObj[index] = val\r\n } else {\r\n delete scoreObj[index]\r\n }\r\n this.setState(\r\n {\r\n score: scoreObj\r\n },\r\n () => {\r\n api.events\r\n .putScoreInAssessment(\r\n {\r\n id,\r\n is_submitted: false\r\n },\r\n scoreObj\r\n )\r\n .then(res => {\r\n console.log(res)\r\n })\r\n }\r\n )\r\n }\r\n\r\n handleSubmit = () => {\r\n const { id, assessments = [], t } = this.props\r\n const { score } = this.state\r\n if (assessments.length !== Object.keys(score).length) {\r\n message.warning(t('please_input_scores_before_submitting'))\r\n return\r\n }\r\n\r\n this.setState(\r\n {\r\n isSubmittingScore: true\r\n },\r\n () => {\r\n api.events\r\n .putScoreInAssessment(\r\n {\r\n id,\r\n is_submitted: true\r\n },\r\n score\r\n )\r\n .then(res =>\r\n this.setState({\r\n isSubmitted: true,\r\n isSubmittingScore: false\r\n })\r\n )\r\n }\r\n )\r\n }\r\n\r\n render() {\r\n const {\r\n assessments = [],\r\n isFinished,\r\n isHost,\r\n scores: { assessment_score = {}, is_submitted, total_submitted },\r\n t,\r\n form: { getFieldDecorator },\r\n broadcast\r\n } = this.props\r\n const {\r\n isFormDisabled,\r\n assessmentsLog,\r\n score,\r\n isSubmitted,\r\n isSubmittingScore\r\n } = this.state\r\n\r\n\r\n const formDisabled = isFinished ? false : isFormDisabled\r\n\r\n return (\r\n <>\r\n {assessments.length === 0 && isHost && (\r\n \r\n {name && name.charAt(0)}\r\n
\r\n )} */}\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Form.create()(withTranslation('v2')(LiveAssessment))\r\n","import LiveAssessment from './LiveAssessment'\r\nexport default LiveAssessment\r\n","import { useEffect } from 'react'\r\n\r\nfunction ZoomSection({\r\n isHost,\r\n isParticipant,\r\n hostURL,\r\n participantURL,\r\n onJoin\r\n}) {\r\n console.log('zoom', isHost, isParticipant, hostURL, participantURL)\r\n const redirectURL = () => {\r\n if (isHost) {\r\n console.log(hostURL)\r\n window.open(hostURL, '_blank')\r\n }\r\n if (isParticipant) {\r\n window.open(participantURL, '_blank')\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (onJoin) {\r\n redirectURL()\r\n }\r\n }, [onJoin])\r\n\r\n return ''\r\n}\r\n\r\nexport default ZoomSection\r\n","import React from 'react'\r\nimport { Icon, Tooltip } from 'antd'\r\n\r\nimport './PreviewHeader.scss'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nimport DiscussionIcon from '../../assets/discussion.svg'\r\n\r\nclass PreviewHeader extends React.Component {\r\n render() {\r\n const {\r\n ITEMS,\r\n event: { title },\r\n onHeaderItemClick,\r\n show: { overview, notes, hosts, attachments, discussion },\r\n t\r\n } = this.props\r\n return (\r\n {t('question')}
\r\n \r\n{t('score')}
\r\n \r\n\r\n {assessments.map((assessment, index) => (\r\n \r\n Object.keys(item)[0] === index\r\n )}\r\n style={{ marginTop: '3px' }}\r\n disabled={\r\n formDisabled ||\r\n assessmentsLog.find(\r\n item => Object.keys(item)[0] === index\r\n ) ||\r\n assessment_score[index] ||\r\n !broadcast\r\n }\r\n onChange={() => this.handleAssessment(index)}\r\n />\r\n )}\r\n {index + 1}.\r\n this.handleQuestionClick(index)}\r\n >\r\n {assessment}\r\n \r\n \r\n \r\n {getFieldDecorator(`assessment_score_${index}`, {\r\n initialValue:\r\n (assessment_score &&\r\n Math.round(assessment_score[index])) ||\r\n Math.round(score[index]) ||\r\n '',\r\n rules: [\r\n {\r\n validator: (rule, value, cb) =>\r\n value > 0 && value <= 100,\r\n message: '1-100'\r\n }\r\n ]\r\n })(\r\n \r\n this.handleAssessmentScore(val, index)\r\n }\r\n />\r\n )}\r\n \r\n \r\n \r\n ))}\r\n
\r\n \r\n {isHost && !total_submitted && (\r\n \r\n {isSubmitted || is_submitted\r\n ? t('all_scores_submitted')\r\n : t('submit')}\r\n \r\n )}\r\n\r\n {total_submitted && (\r\n
\r\n \r\n onHeaderItemClick(ITEMS.HOST)}\r\n >\r\n
\r\n\r\n \r\n {title} \r\n
\r\n \r\n onHeaderItemClick(ITEMS.OVERVIEW)}\r\n >\r\n
\r\n\r\n {t('reports:overview')}
\r\n {t('labels:host')}
\r\n \r\n {t('v2:additional')}
{t('v2:attachment')}\r\n
\r\n \r\n\r\n {t('v2:attachment')}\r\n
{t('tabs:notes')}
\r\n \r\n\r\n {t('tabs:discussion')}
\r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withTranslation()(PreviewHeader)\r\n","import PreviewHeader from \"./PreviewHeader\";\r\n\r\nexport default PreviewHeader","import React, { useEffect, useState } from 'react'\r\nimport moment from 'moment'\r\nimport { Statistic, Icon, Rate, Spin } from 'antd'\r\n\r\nimport { useFetchReviews } from '../../../../../components/Reviews/Reviews'\r\n\r\nimport './PreviewStatus.scss'\r\nimport { useSelector } from 'react-redux'\r\n\r\nconst { Countdown } = Statistic\r\n\r\nfunction PreviewStatus(props) {\r\n const {\r\n App,\r\n showJoinButton,\r\n onJoin,\r\n isStreamStopped,\r\n isCoachingSession,\r\n isConferencePublic,\r\n hasBreakoutRoom\r\n } = props\r\n const {\r\n props: { t },\r\n state: { event }\r\n } = App\r\n useFetchReviews(event.id, 'event')\r\n\r\n const isZoom = event.encoder === 'zoom_meeting'\r\n\r\n const isLive =\r\n !event.is_finished &&\r\n moment(event.start_date_time).isBefore(moment.utc().toDate())\r\n\r\n const isStreamEnded = isZoom\r\n ? event.is_finished || isStreamStopped\r\n : event.is_finished\r\n\r\n const allowEventReview = isCoachingSession || isConferencePublic\r\n\r\n console.log('onPreview', App.displayCountdownTime(event))\r\n\r\n const original = moment(event.start_date_time).fromNow()\r\n const resultTime = original.substr(original.indexOf(' ') + 1)\r\n\r\n return (\r\n \r\n \r\n {App.displayCountdownTime(event) && (\r\n
\r\n {showJoinButton && !isStreamEnded && (\r\n \r\n {App.displayCountdownTime(event)}\r\n {isLive && (\r\n
\r\n )}\r\n {!App.displayCountdownTime(event) && !isStreamEnded && (\r\n \r\n
\r\n )}\r\n {isStreamEnded && t('events:finished')}\r\n {!isLive && !isStreamEnded && (\r\n <>\r\n {t('events:countdown')}\r\n {t('v2:live_now')}
\r\n\r\n {event.start_date_time ? (\r\n <>\r\n {t('events:countdown')}\r\n {moment(event.start_date_time).isSame(new Date(), 'day') ? (\r\n
\r\n )}\r\n \r\n {t('v2:average_rating')}\r\n props.App.onHeaderItemClick('RATING')}\r\n >\r\n {t('v2:review')}({allReviews && allReviews.length})\r\n \r\n
\r\n \r\n 
\r\n
\r\n )\r\n}\r\n\r\nexport default withTranslation()(EventOverview)\r\n","import EventOverview from './EventOverview'\r\nexport default EventOverview\r\n","import EventHost from './EventHost'\r\nexport default EventHost\r\n","import React from 'react'\r\nimport { userImageNoBack } from '../../../../../../Reports/images'\r\nimport './EventHost.scss'\r\n\r\nclass EventHost extends React.Component {\r\n render() {\r\n const {\r\n event: {\r\n host: { name, username, email, avatar }\r\n }\r\n } = this.props\r\n return (\r\n \r\n
\r\n \r\n {t('labels:tags')} \r\n
\r\n \r\n {topic_list.length > 0 &&\r\n topic_list.map(tag => (\r\n \r\n {tag.title}\r\n \r\n ))}\r\n
\r\n {description || t('v2:no_description_available')}
\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default EventHost\r\n","import React, { Component } from 'react'\r\nimport fileSaver from 'file-saver'\r\nimport ReactSVG from 'react-svg'\r\nimport { Spin, Icon } from 'antd'\r\n\r\nimport { api } from '../../services'\r\nimport './styles.scss'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nconst antIcon = \r\n 
\r\n
\r\n \r\n
\r\n {name || username}
\r\n{email}
\r\n\r\n {loading &&
\r\n )}\r\n {!loading && fileDetails.length === 0 && (\r\n {t('no_file_attached')}\r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withTranslation('v2')(Attachments)\r\n","import { bindActionCreators } from 'redux'\r\nimport { connect } from 'react-redux'\r\nimport Attachments from './Attachments'\r\nimport actions from '../../store/actions'\r\n\r\nconst mapStateToProps = state => ({\r\n library: state.library\r\n})\r\n\r\nconst mapDispatchToProps = dispatch =>\r\n bindActionCreators(\r\n {\r\n download: actions.library.download\r\n },\r\n dispatch\r\n )\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Attachments)\r\n","import React from 'react'\r\nimport micOn from '../../assets/mic_on.svg'\r\nimport micOff from '../../assets/mic_off.svg'\r\nimport cameraOff from '../../assets/camera_off.svg'\r\nimport cameraOn from '../../assets/camera_on.svg'\r\nimport { useAttendeeStatus } from 'amazon-chime-sdk-component-library-react'\r\n\r\nconst MyRosterCell = ({ attendeeId }) => {\r\n const { muted, videoEnabled } = useAttendeeStatus(attendeeId)\r\n return (\r\n {t('loading')}
}\r\n {!loading && fileDetails.length > 0 && (\r\n \r\n {fileDetails.map((file, index) => (\r\n
\r\n ))}\r\n \r\n \r\n isDownloading\r\n ? null\r\n : this.downloadFile(file.id, file.filename)\r\n }\r\n >\r\n {isDownloading === file.id ? (\r\n
\r\n \r\n {index + 1}. {file.filename}\r\n
\r\n\r\n
\r\n )\r\n}\r\n\r\nexport default MyRosterCell\r\n","import React from 'react'\r\nimport _ from 'lodash'\r\nimport { Icon, Dropdown, Menu, Row, Col } from 'antd'\r\nimport { userImage } from '../../../../Reports/images'\r\nimport RaiseHand from '../../assets/raisehand.png'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nconst PassiveUsers = ({\r\n participants,\r\n handleAllow,\r\n raiseHandAllowed,\r\n handleDecline,\r\n isHost,\r\n t\r\n}) => {\r\n return (\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default withTranslation()(PassiveUsers)\r\n","import { Icon } from 'antd'\r\nimport React, { useEffect, useMemo, useState } from 'react'\r\nimport MyRosterCell from '../../../AmazonChime/MyRosterCell'\r\nimport dummyUserImage from '../../../../assets/user.svg'\r\nimport './EventParticipants.scss'\r\nimport PassiveUsers from '../../../PassiveUsers'\r\nimport { withTranslation } from 'react-i18next'\r\nimport micOn from '../../../../assets/mic_on.svg'\r\nimport micOff from '../../../../assets/mic_off.svg'\r\nimport cameraOff from '../../../../assets/camera_off.svg'\r\nimport cameraOn from '../../../../assets/camera_on.svg'\r\nimport { events } from '../../../../../../../components/Navigation/images'\r\n\r\nfunction EventParticipants(props) {\r\n const [waitingList, setWaitingList] = useState([])\r\n const [joinedList, setJoinedList] = useState([])\r\n const [others, setOthers] = useState([])\r\n\r\n const {\r\n participantData: { attendees = [] },\r\n onInvite,\r\n event,\r\n event: { hosts = [], host = {} },\r\n userId,\r\n allParticipants: participants = [],\r\n participantSize,\r\n participants: passiveParticipants = [],\r\n raiseHandAllowed,\r\n handleDecline,\r\n handleAllow,\r\n showPassiveUsers,\r\n previewStreamList,\r\n previewLocalStream,\r\n t\r\n } = props\r\n\r\n const inRequestPassiveParticipants = useMemo(\r\n () => passiveParticipants.filter(u => u.status !== 'declined'),\r\n [passiveParticipants.length]\r\n )\r\n\r\n const isChime = useMemo(() => {\r\n return event && event.encoder !== 'agora_conference'\r\n }, [event])\r\n\r\n useEffect(() => {\r\n const { newWaitingList, newJoinedList } = computeParticipantLists(\r\n participants,\r\n event.host,\r\n attendees,\r\n isChime\r\n )\r\n\r\n setWaitingList(newWaitingList)\r\n setJoinedList(newJoinedList)\r\n }, [participants.length, event.host, attendees.length, isChime])\r\n\r\n useEffect(() => {\r\n if (isChime) {\r\n const othersArray = computeOthersArrayForChime(\r\n attendees,\r\n inRequestPassiveParticipants\r\n )\r\n setOthers(othersArray)\r\n } else {\r\n const othersArray = computeOthersArrayForAgora(\r\n attendees,\r\n hosts,\r\n host,\r\n inRequestPassiveParticipants\r\n )\r\n setOthers(othersArray)\r\n }\r\n }, [isChime, attendees.length, inRequestPassiveParticipants, hosts, host])\r\n\r\n const isCoaching = event.encoder === 'peer2peer'\r\n const isHost = event.host && event.host.id === userId\r\n\r\n const localAgoraUser = previewLocalStream && previewLocalStream.pc\r\n\r\n return (\r\n \r\n
\r\n \r\n {participants.map((i, index) => {\r\n if (i.status === 'declined') return null\r\n const imgSrc = i.avatar ? i.avatar : userImage\r\n const isAllowed =\r\n _.findLastIndex(raiseHandAllowed, function(o) {\r\n return o === i.userId\r\n }) > -1\r\n ? true\r\n : false\r\n const isJoined = isAllowed && i.status === 'approved'\r\n\r\n return (\r\n \r\n
\r\n )\r\n })}\r\n \r\n
\r\n \r\n
\r\n {i.userName}\r\n \r\n {_.capitalize(i.status)}\r\n {isHost && (\r\n \r\n {i.status === 'waiting' && !isJoined && (\r\n handleAllow(i.userId)}>\r\n \r\n \r\n )}\r\n handleDecline(i.userId)}>\r\n \r\n \r\n \r\n }\r\n >\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nconst ParticipantItems = ({ array, name = '', status = '', t }) => (\r\n <>\r\n \r\n {joinedList.length > 0 && (\r\n <>\r\n
\r\n {isHost && !isCoaching && (\r\n \r\n {joinedList.length} {t('v2:people')}\r\n
\r\n \r\n {joinedList.map((user, index) => (\r\n
\r\n \r\n )}\r\n {waitingList.length > 0 && (\r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n {isChime ? (\r\n
\r\n \r\n {t('v2:hand_raising_users')} -{' '}\r\n {inRequestPassiveParticipants.length} {t('v2:people')}\r\n
\r\n \r\n handleAllow(userId)}\r\n handleDecline={userId => handleDecline(userId)}\r\n raiseHandAllowed={raiseHandAllowed}\r\n />\r\n
\r\n \r\n )}\r\n {others.length > 0 && (\r\n onInvite()}>\r\n
\r\n )}\r\n \r\n {name} {array.length} {t('v2:people')}\r\n
\r\n \r\n {array.map((user, index) => (\r\n \r\n
\r\n ))}\r\n \r\n \r\n)\r\n\r\nfunction computeParticipantLists(participants, host, attendees, isChime) {\r\n const newWaitingList = []\r\n const newJoinedList = []\r\n\r\n const userList = [...participants, host]\r\n userList.forEach(participant => {\r\n console.log(\"Test Processing Participant:\", participant);\r\n\r\n const attendeeItem = isChime\r\n ? attendees.find(\r\n item => item.externalUserId.split('#')[1] === participant.id\r\n )\r\n : attendees.find(item => item.user_id === participant.id)\r\n console.log(\"Test Found Attendee Item:\", attendeeItem);\r\n\r\n const newParticipant = attendeeItem\r\n ? isChime\r\n ? { ...participant, chimeAttendeeId: attendeeItem.chimeAttendeeId }\r\n : participant\r\n : null\r\n console.log(\"Test New Participant:\", newParticipant);\r\n\r\n if (newParticipant) {\r\n newJoinedList.push(newParticipant)\r\n } else {\r\n newWaitingList.push(participant)\r\n }\r\n })\r\n\r\n return { newWaitingList, newJoinedList }\r\n}\r\n\r\n// Function to compute others array for Chime\r\nfunction computeOthersArrayForChime(attendees, inRequestPassiveParticipants) {\r\n const others = attendees.filter(({ externalUserId }) => {\r\n const metaData = externalUserId.split('#')\r\n const name = metaData[0]\r\n const chimeUserId = metaData[1]\r\n\r\n const userRequestingHandRaise = inRequestPassiveParticipants.some(\r\n ({ userId }) => userId === chimeUserId\r\n )\r\n\r\n return (\r\n name.includes('passive') &&\r\n (!userRequestingHandRaise || userRequestingHandRaise.length === 0)\r\n )\r\n })\r\n\r\n const othersArrayOfNames = others.map(item => {\r\n const name = item.externalUserId.split('#')[0]\r\n return name.substring(7)\r\n })\r\n\r\n return othersArrayOfNames\r\n}\r\n\r\n// Function to compute others array for Non-Chime\r\nfunction computeOthersArrayForAgora(\r\n attendees,\r\n hosts,\r\n host,\r\n inRequestPassiveParticipants\r\n) {\r\n const filteredPassiveUsers = attendees.filter(({ user_id }) => {\r\n const isHostOrPresenter =\r\n hosts.some(host => host.id === user_id) || host.id === user_id\r\n const isRequestedPassiveUser = inRequestPassiveParticipants.some(\r\n item => item.userId === user_id\r\n )\r\n\r\n return !(isHostOrPresenter || isRequestedPassiveUser)\r\n })\r\n\r\n const othersArray = filteredPassiveUsers.map(item => ({\r\n avatar: { link: item.avatar },\r\n name: item.user_name\r\n }))\r\n\r\n return othersArray\r\n}\r\nexport default withTranslation()(EventParticipants)\r\n","import EventParticipants from './EventParticipants'\r\n\r\nexport default EventParticipants\r\n","import React, { Fragment } from 'react'\r\nimport { Button } from 'antd'\r\nimport './EventRooms.scss'\r\nimport { withTranslation } from 'react-i18next'\r\n// import { withRouter } from 'react-router'\r\nimport { createBrowserHistory } from 'history'\r\n\r\nfunction EventRooms(props) {\r\n const { rooms, isHost, onRoomCreate, t, event } = props\r\n const hasBreakoutRoom = event && event.has_breakout_room\r\n const eventId = event && event.id\r\n const history = createBrowserHistory()\r\n const handleBreakoutRoom = room => {\r\n history.push({\r\n pathname: `/events/${room.id}`,\r\n state: { hasBreakoutRoom, eventId }\r\n })\r\n }\r\n\r\n return (\r\n \r\n 
\r\n \r\n {user.name ||\r\n user.username ||\r\n (typeof user === 'string' && user) ||\r\n user.email}\r\n \r\n
\r\n \r\n {status}\r\n
\r\n \r\n \r\n {idx + 1}. {room.title}\r\n \r\n \r\n {room.is_finished ? (\r\n 'Finished'\r\n ) : (\r\n handleBreakoutRoom(room)}\r\n >\r\n {t('v4:join')}\r\n \r\n )}\r\n \r\n
\r\n ))}\r\n {isHost && (\r\n \r\n
\r\n )\r\n}\r\n\r\nconst RatingItem = ({ review }) => {\r\n const {\r\n avatar,\r\n username,\r\n rating,\r\n review: text,\r\n created_at } = review\r\n\r\n const actions = [\r\n \r\n \r\n {!noReviews &&\r\n eventReviews.map(review =>
\r\n\r\n {!hasUserReviewed && (\r\n {text}
}\r\n datetime={\r\n\r\n \r\n )\r\n}\r\n\r\nexport default EventRatings\r\n","import EventRatings from './EventRatings'\r\n\r\nexport default EventRatings\r\n","import SidebarModal from './SidebarModal'\r\n\r\nexport default SidebarModal\r\n","import React from 'react'\r\nimport './SidebarModal.scss'\r\n\r\nimport HeadTitle from './components/HeadTitle'\r\nimport EventOverview from './components/EventOverview'\r\nimport EventHost from './components/EventHost'\r\nimport Attachments from '../../../../../components/Attachments'\r\nimport Notes from '../../../../../components/Notes'\r\nimport EventParticipants from './components/EventParticipants'\r\nimport EventRooms from './components/EventRooms/EventRooms'\r\nimport EventRatings from './components/EventRatings'\r\nimport Discussion from '../../../../../components/Discussion'\r\nclass SidebarModal extends React.Component {\r\n handleClose = () => {\r\n const {\r\n onClose,\r\n controller: {\r\n overview,\r\n notes,\r\n hosts,\r\n attachments,\r\n rooms,\r\n ratings,\r\n discussion\r\n },\r\n ITEMS\r\n } = this.props\r\n\r\n const itemToClose = overview\r\n ? ITEMS.OVERVIEW\r\n : notes\r\n ? ITEMS.NOTES\r\n : hosts\r\n ? ITEMS.HOST\r\n : attachments\r\n ? ITEMS.ATTACHMENT\r\n : rooms\r\n ? ITEMS.ROOM\r\n : ratings\r\n ? ITEMS.RATING\r\n : discussion\r\n ? ITEMS.DISCUSSION\r\n : ITEMS.PARTICIPANTS\r\n\r\n onClose(itemToClose)\r\n }\r\n\r\n render() {\r\n const {\r\n userId,\r\n event,\r\n controller: {\r\n overview,\r\n notes,\r\n hosts,\r\n attachments,\r\n participants,\r\n rooms,\r\n ratings,\r\n discussion\r\n },\r\n onRoomCreate,\r\n isBreakoutHost\r\n } = this.props\r\n\r\n return (\r\n
\r\n
\r\n \r\n \r\n X\r\n
\r\n \r\n
\r\n \r\n {overview &&
\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default SidebarModal\r\n","import React, { Component, Fragment } from 'react'\r\nimport moment from 'moment'\r\nimport { isSafari } from 'react-device-detect'\r\nimport { Tabs, message, Modal, notification } from 'antd'\r\nimport ReactPlayer from 'react-player'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nimport { TopPageLink, Chat, Spinner } from '../../../components'\r\nimport { Poll, CurrentPoll } from './components/Poll'\r\nimport './Preview.scss'\r\nimport _, { intersection } from 'lodash'\r\nimport { api } from '../../../services'\r\nimport { config, general } from '../../../constants'\r\nimport { AntPlayer } from './components/AntMediaService'\r\nimport { SlickCarousel } from './components/SlickCarousel'\r\nimport online from './assets/online.svg'\r\nimport liveNow from './assets/liveNow.svg'\r\nimport liveIcon from './assets/liveIcon.svg'\r\nimport liveNowPrivate from './assets/liveNowPrivate.svg'\r\nimport nowLivePublic from './assets/nowLivePublic.svg'\r\nimport thaiLiveNow from './assets/Thai-LiveNow.svg'\r\nimport thaiPrivate from './assets/Thai-Private.svg'\r\nimport thaiPublic from './assets/Thai-Public.svg'\r\nimport herbrewLiveNow from './assets/Hebrew_LiveNow.svg'\r\nimport herbrewPrivate from './assets/Hebrew_Private.svg'\r\nimport herbrewPublic from './assets/Hebrew_Public.svg'\r\nimport YellowHandRaise from './assets/yellowHandRaise.svg'\r\nimport DiscussionIcon from './assets/discussion.svg'\r\nimport PollIcon from './assets/poll.svg'\r\nimport { ChimeConference } from './components/AmazonChime'\r\nimport AgoraCall from './components/Agora/AgoraVideoCall/AgoraCall'\r\nimport LiveAssessment from './components/LiveAssessment'\r\nimport ZoomSection from './components/ZoomSection'\r\nimport PreviewHeader from './components/PreviewHeader'\r\nimport PreviewStatus from './components/PreviewStatus'\r\nimport SidebarModal from './components/SidebarModal'\r\nimport EmptyMessage from '../../../components/EmptyMessage/EmptyMessage'\r\n\r\nconst { TabPane } = Tabs\r\n\r\nmessage.config({\r\n top: 100,\r\n duration: 5,\r\n maxCount: 1\r\n})\r\n\r\nconst ITEMS = {\r\n OVERVIEW: 'OVERVIEW',\r\n HOST: 'HOST',\r\n ATTACHMENT: 'ATTACHMENT',\r\n NOTES: 'NOTES',\r\n PARTICIPANTS: 'PARTICIPANTS',\r\n ROOM: 'ROOM',\r\n RATING: 'RATING',\r\n DISCUSSION: 'DISCUSSION'\r\n}\r\n\r\nconst showItems = {\r\n overview: false,\r\n hosts: false,\r\n attachments: false,\r\n notes: false,\r\n participants: false,\r\n rooms: false,\r\n ratings: false,\r\n discussion: false\r\n}\r\nclass Preview extends Component {\r\n _isMounted = false\r\n playerRef = null\r\n player = null\r\n socket = null\r\n state = {\r\n isLoading: true,\r\n isStreaming: false,\r\n event: null,\r\n currentPlayTime: 0,\r\n videoDuration: null,\r\n messages: [],\r\n userId: null,\r\n isEnd: false,\r\n pollValues: [],\r\n userPollValues: [],\r\n isNoProfile: false,\r\n isRefresh: false,\r\n isScrollBottom: true,\r\n isChatAble: false,\r\n playerRef: null,\r\n countDown: false,\r\n graphDuration: [],\r\n spaceGraphValue: 0,\r\n isConference: false,\r\n broadcast: false,\r\n isStreamStopped: false,\r\n coachingDurationToWarn: 'no',\r\n isDurationExceed: 'no',\r\n estimatedTimeToStop: null,\r\n isWebStream: null,\r\n liveDuration: null,\r\n hasStreamStarted: false,\r\n totalViewers: 0,\r\n controlVideos: [],\r\n isCoachingSession: false,\r\n estimatedTimeToWarn: null,\r\n hostEmails: [],\r\n isProcessing: false,\r\n countStream: '',\r\n isSocketClose: false,\r\n isPastEvent: false,\r\n showConfirmModal: false,\r\n isPlay: false,\r\n showJoinButton: false,\r\n webinarHostId: '',\r\n allowJoin: false,\r\n isEventCrash: false,\r\n showBadConnectionMsg: false,\r\n isPreparingConf: false,\r\n userGroup: [],\r\n canVote: true,\r\n isHandRaised: false,\r\n raiseHandRequesting: false,\r\n raiseHandAllowed: [],\r\n requestedPassiveUsers: [],\r\n currentAskedPoll: null,\r\n askedPolls: [],\r\n rooms: [],\r\n activeKey: '1',\r\n show: showItems,\r\n participantData: {},\r\n createRoom: false,\r\n isEventJoined: false,\r\n isBreakoutHost: false,\r\n isInvite: false,\r\n allParticipants: [],\r\n previewStreamList: [],\r\n previewLocalStream: {},\r\n hasHostJoined: false,\r\n timer: null\r\n }\r\n\r\n setPlayerRef = node => {\r\n this.playerRef = node\r\n }\r\n\r\n componentDidMount() {\r\n this._isMounted = true\r\n const {\r\n user: {\r\n info: { is_reload }\r\n },\r\n updateUser,\r\n getDiscussionLog\r\n } = this.props\r\n const { id } = this.props.match.params\r\n if (id && this._isMounted) {\r\n this.interval = setInterval(() => {\r\n this.handleShowChat()\r\n }, 10000)\r\n this.getEventById(id)\r\n }\r\n if (getDiscussionLog) {\r\n const type = 'event'\r\n getDiscussionLog({ id, type })\r\n }\r\n\r\n if (is_reload) {\r\n updateUser(id, null, { is_reload: false }).then(() => {\r\n setTimeout(() => {\r\n window.location.reload(true)\r\n }, 5000)\r\n })\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const {\r\n broadcast,\r\n event,\r\n estimatedTimeToStop,\r\n estimatedTimeToWarn,\r\n isSocketClose,\r\n requestedPassiveUsers\r\n } = this.state\r\n const {\r\n user: {\r\n info: { id: userId }\r\n },\r\n organizations: { rows }\r\n } = this.props\r\n\r\n if (prevState.isSocketClose !== isSocketClose && isSocketClose) {\r\n this.initSocket(userId)\r\n }\r\n\r\n if (prevState.event !== event && this._isMounted && userId && rows) {\r\n this.checkAndSwitchOrg(event, rows)\r\n }\r\n\r\n if (\r\n prevProps.organizations.rows !== rows &&\r\n this._isMounted &&\r\n userId &&\r\n rows\r\n ) {\r\n this.checkAndSwitchOrg(event, rows)\r\n }\r\n\r\n if (\r\n broadcast &&\r\n prevState.estimatedTimeToStop === estimatedTimeToStop &&\r\n estimatedTimeToStop &&\r\n prevState.estimatedTimeToWarn === estimatedTimeToWarn &&\r\n estimatedTimeToWarn\r\n ) {\r\n this.checkEventStatus()\r\n }\r\n\r\n if (\r\n prevState.requestedPassiveUsers !== requestedPassiveUsers &&\r\n requestedPassiveUsers\r\n ) {\r\n const myId = requestedPassiveUsers.filter(i => i.userId === userId)\r\n const allowedUsersArr = requestedPassiveUsers.filter(i => {\r\n if (i.status === 'approved') {\r\n return true\r\n }\r\n return false\r\n })\r\n const allowedUsers = allowedUsersArr.map(i => {\r\n return i.userId\r\n })\r\n if (myId.length > 0) {\r\n this.setState(() => {\r\n if (myId[0].status === 'waiting') {\r\n return {\r\n isHandRaised: true,\r\n raiseHandRequesting: true\r\n }\r\n }\r\n if (myId[0].status === 'approved') {\r\n return {\r\n isHandRaised: true,\r\n raiseHandRequesting: false,\r\n raiseHandAllowed: [myId[0].userId]\r\n }\r\n }\r\n if (myId[0].status === 'declined') {\r\n return {\r\n isHandRaised: false,\r\n raiseHandRequesting: false,\r\n raiseHandAllowed: []\r\n }\r\n }\r\n })\r\n } else {\r\n if (userId !== event.host_id) {\r\n return this.setState({\r\n isHandRaised: false,\r\n raiseHandRequesting: false,\r\n raiseHandAllowed: []\r\n })\r\n } else {\r\n this.setState({ raiseHandAllowed: allowedUsers })\r\n }\r\n }\r\n }\r\n }\r\n\r\n checkAndSwitchOrg = (event, rows) => {\r\n const {\r\n user: {\r\n info: { id: userId, active_organization_id: userOrg }\r\n },\r\n updateUser\r\n } = this.props\r\n\r\n if (event && event.purchased_from_marketplace) return\r\n\r\n const userOrgs = rows.map(e => e.id)\r\n if (event && event.setting) {\r\n const commonIds = intersection(event.setting.organization_ids, userOrgs)\r\n if (commonIds.length > 0) {\r\n const assignedOrg = _.findIndex(commonIds, function(o) {\r\n return o === userOrg\r\n })\r\n if (assignedOrg === -1) {\r\n updateUser(userId, null, {\r\n active_organization_id: commonIds[0]\r\n }).then(() => {\r\n window.location.reload(true)\r\n })\r\n }\r\n }\r\n }\r\n }\r\n\r\n checkEventStatus = () => {\r\n const { isDurationExceed, coachingDurationToWarn } = this.state\r\n if (isDurationExceed === 'no') {\r\n this.checkDurationExceed('stop')\r\n }\r\n if (isDurationExceed === 'yes') {\r\n this.setState({\r\n isDurationExceed: 'inactive',\r\n estimatedTimeToStop: null,\r\n estimatedTimeToWarn: null\r\n })\r\n return\r\n }\r\n if (coachingDurationToWarn === 'no') {\r\n this.checkDurationExceed('warn')\r\n }\r\n if (coachingDurationToWarn === 'yes') {\r\n this.setState({\r\n coachingDurationToWarn: 'inactive',\r\n estimatedTimeToStop: null,\r\n estimatedTimeToWarn: null\r\n })\r\n }\r\n }\r\n\r\n checkDurationExceed = type => {\r\n const { estimatedTimeToStop, estimatedTimeToWarn } = this.state\r\n if (type === 'stop') {\r\n const diffMinutes = moment().diff(estimatedTimeToStop, 'minutes')\r\n if (diffMinutes === 0) {\r\n this.setState({\r\n isDurationExceed: 'yes'\r\n })\r\n }\r\n } else if (type === 'warn') {\r\n const diffMinutes = moment().diff(estimatedTimeToWarn, 'minutes')\r\n if (diffMinutes === 0) {\r\n this.setState({\r\n coachingDurationToWarn: 'yes'\r\n })\r\n }\r\n }\r\n }\r\n\r\n handleChatAble = ({ start_date_time: startDataTime }) => {\r\n const newTime = moment(startDataTime).format('LLLL')\r\n const diffMinutes = moment().diff(newTime, 'minutes')\r\n return diffMinutes >= -10\r\n }\r\n\r\n handleConferenceButton = ({ start_date_time: startDataTime }) => {\r\n const newTime = moment(startDataTime).format('LLLL')\r\n const diffMinutes = moment().diff(newTime, 'minutes')\r\n return diffMinutes >= 10\r\n }\r\n\r\n getEventById = id => {\r\n const { viewEvent } = this.props\r\n\r\n api.events\r\n .getById(id)\r\n .then(({ data }) => {\r\n if (this._isMounted) {\r\n const isConference =\r\n data.encoder === 'conference' ||\r\n data.encoder === 'chime_conference' ||\r\n data.encoder === 'live_assessment' ||\r\n data.encoder === 'agora_conference'\r\n const isCoachingSession = data.encoder === 'peer2peer'\r\n const isPastEvent = data.is_finished\r\n const canVote = !data.is_finished ? true : false\r\n const hostEmails = [{ id: data.host_id, email: data.host.email }]\r\n if (data.host_ids && data.host_ids.length > 0) {\r\n data.host_ids.forEach((h, i) => {\r\n data.host_emails.forEach((e, j) => {\r\n if (i === j) {\r\n const item = { id: h, email: e }\r\n hostEmails.push({ ...item })\r\n }\r\n })\r\n })\r\n }\r\n\r\n if (data.encoder === 'live_assessment')\r\n hostEmails.push({\r\n id: data.attendee_id,\r\n email: data.attendee_email\r\n })\r\n\r\n this.setState({\r\n event: data,\r\n isLoading: false,\r\n isChatAble: this.handleChatAble(data),\r\n isConference,\r\n hostEmails,\r\n isPastEvent,\r\n isCoachingSession: isCoachingSession,\r\n canVote\r\n })\r\n this.addToParticipants(data.hosts)\r\n this.getUserInfo()\r\n data && viewEvent(data.id)\r\n }\r\n })\r\n .catch(() => {\r\n this.setState({\r\n isLoading: false\r\n })\r\n })\r\n }\r\n\r\n componentWillUnmount() {\r\n this.stopStream()\r\n clearInterval(this.interval)\r\n clearInterval(this.getConnectedInterval)\r\n clearInterval(this.pollingInterval)\r\n this._isMounted = false\r\n this.props.clearNotes()\r\n this.props.clearDiscussion()\r\n }\r\n\r\n getUserInfo = () => {\r\n api.user\r\n .getUser()\r\n .then(response => {\r\n const { id: userId, email, active_organization_id: orgId } = response\r\n const {\r\n event: {\r\n setting: { group_ids }\r\n }\r\n } = this.state\r\n this.setState(\r\n {\r\n userId\r\n },\r\n () => {\r\n if (group_ids && group_ids.length > 0) {\r\n this.getUserGroupInOrg(orgId, email)\r\n }\r\n this.initSocket(userId)\r\n }\r\n )\r\n })\r\n .catch(error => console.log('error', error))\r\n }\r\n\r\n getUserGroupInOrg = (orgId, userEmail) => {\r\n api.organizations\r\n .searchUsersInOrganization({\r\n orgId,\r\n searchType: 'searchByemail',\r\n searchValue: userEmail\r\n })\r\n .then(response => {\r\n const { data } = response\r\n const groups =\r\n data.length > 0 ? data[0].user && data[0].user.groups : []\r\n const userGroup =\r\n groups.length > 0\r\n ? groups.map(group => {\r\n return group.id\r\n })\r\n : []\r\n this.setState({\r\n userGroup\r\n })\r\n })\r\n }\r\n\r\n addToParticipants = arr =>\r\n this.setState({\r\n allParticipants: arr\r\n })\r\n\r\n initSocket = userId => {\r\n const { id } = this.props.match.params\r\n const {\r\n user: { info }\r\n } = this.props\r\n const { event: eventState } = this.state\r\n const user_id = info.id || userId\r\n const userName = eventState && eventState.host && eventState.host.username\r\n const isEventFinished = eventState && eventState.is_finished\r\n\r\n const isChime =\r\n eventState &&\r\n eventState.organization.media_service === 'CHIME' &&\r\n eventState &&\r\n eventState.event_type !== 'public_conference'\r\n const hasRooms =\r\n eventState && eventState.breakout_rooms\r\n ? eventState.breakout_rooms.length > 0\r\n ? true\r\n : false\r\n : false\r\n this.socket = new window.WebSocket(\r\n `${config.socketURL}?channel_type=EVENT&channel_id=${id}&user_id=${user_id}&user_name=${userName}`\r\n )\r\n\r\n this.socket.onopen = () => {\r\n this.getChatHistory()\r\n this.getAllowedUsers()\r\n // if (!isChime) {\r\n // this.getAntInfo()\r\n // }\r\n if (hasRooms) {\r\n this.getBreakoutInfo()\r\n }\r\n this.getVoteStatus()\r\n this.getAskVoteStatus()\r\n if (!isEventFinished) {\r\n this.pollingInterval = setInterval(() => {\r\n this.getVoteStatus()\r\n this.getAskVoteStatus()\r\n }, 20000)\r\n }\r\n this.getConnectedInterval = setInterval(() => {\r\n this.socket.send(\r\n JSON.stringify({\r\n action: 'pingPong',\r\n msg: 'ping'\r\n })\r\n )\r\n }, 10000)\r\n this.setState({ isSocketClose: false })\r\n }\r\n\r\n this.socket.onmessage = event => {\r\n const data = JSON.parse(event.data)\r\n if (data.messages) {\r\n _.each(data.messages, item => {\r\n item.isReadMore = item.content && item.content.length >= 200\r\n })\r\n } else {\r\n if (data.content) {\r\n data.isReadMore = data.content.length >= 200\r\n }\r\n }\r\n\r\n if (data.event === 'sendMessage' && data.channel_id === id) {\r\n this.setState(state => ({\r\n messages: [...state.messages, data]\r\n }))\r\n }\r\n\r\n if (data.event === 'breakoutRoom' && data.channel_id === id) {\r\n this.setState(() => ({\r\n rooms: data.breakout_room\r\n }))\r\n }\r\n\r\n if (data.event === 'raiseHand') {\r\n this.setState({\r\n requestedPassiveUsers: data.message\r\n })\r\n }\r\n\r\n if (data.event === 'raiseHandNotification') {\r\n const msg = data.message\r\n if (msg.userId !== userId) {\r\n this.raisedHandNotification(msg)\r\n }\r\n }\r\n\r\n if (data.event === 'getRaisedHands') {\r\n this.setState({\r\n requestedPassiveUsers: data.message\r\n })\r\n }\r\n\r\n if (data.event === 'changeRaisedHandStatus') {\r\n this.setState({\r\n requestedPassiveUsers: data.message\r\n })\r\n }\r\n\r\n if (data.event === 'getAskedPolls' && data.channel_id === id.toString()) {\r\n this.setState({\r\n currentAskedPoll: data.content.currentPollIndex,\r\n askedPolls: data.content.askedPolls\r\n })\r\n }\r\n\r\n if (data.event === 'askPoll' && data.channel_id === id.toString()) {\r\n this.setState({\r\n currentAskedPoll: data.content.currentPollIndex,\r\n askedPolls: data.content.askedPolls\r\n })\r\n }\r\n\r\n if (\r\n data.event === 'checkPollVote' &&\r\n data.channel_id === id.toString() &&\r\n data.user_id === user_id.toString()\r\n ) {\r\n if (data.all_voted_result && data.all_voted_result.length > 0) {\r\n const result = data.all_voted_result.map(a => {\r\n if (a.q) {\r\n a.q = JSON.parse(a.q)\r\n a.is_voted = a.is_voted ? a.is_voted : false\r\n }\r\n\r\n return a\r\n })\r\n\r\n this.setState(() => ({\r\n pollValues: result,\r\n userPollValues: data && data.voted && data.voted\r\n }))\r\n }\r\n if (data.is_voted) {\r\n this.setState({\r\n canVote: false\r\n })\r\n }\r\n }\r\n\r\n const isZoom = eventState.encoder === 'zoom_meeting'\r\n if (data.event === 'endConference' && data.channel_id === id) {\r\n const newEvent = this.state.event && this.state.event\r\n newEvent.is_finished = true\r\n this.setState(\r\n {\r\n event: newEvent\r\n },\r\n () => {\r\n clearInterval(this.getConnectedInterval)\r\n clearInterval(this.pollingInterval)\r\n if (isChime || isZoom) {\r\n this.setState({ isStreamStopped: true, show: showItems })\r\n }\r\n }\r\n )\r\n // allowJoin: false,\r\n // isEventCrash: false,\r\n // isStreaming: false,\r\n // isPastEvent: true\r\n }\r\n\r\n if (data.event === 'antmediaInfo') {\r\n if (data.status === 'CREATING' || data.status === 'CREATED') {\r\n this.setState({\r\n isPreparingConf: true\r\n })\r\n } else if (data.status === 'READY') {\r\n this.setState({\r\n allowJoin: true,\r\n isPreparingConf: false,\r\n isEventCrash: false\r\n })\r\n } else if (data.status === 'FAILED') {\r\n this.setState({\r\n isEventCrash: true,\r\n allowJoin: false,\r\n isPreparingConf: false,\r\n show: showItems\r\n })\r\n }\r\n }\r\n\r\n if (data.event === 'sendCount' && data.channel_id === id) {\r\n this.setState({\r\n totalViewers: data.views\r\n })\r\n }\r\n\r\n if (data.event === 'pollVote' && data.channel_id === id) {\r\n const pollData = this.state.pollValues\r\n const isVoted = user_id === data.user_id ? true : false\r\n const result =\r\n pollData.length > 0\r\n ? pollData.map(p => {\r\n p.is_voted = p.q === data.result.q ? isVoted : p.is_voted\r\n return p\r\n })\r\n : [\r\n {\r\n q: data.result.q,\r\n votes: data.result.votes,\r\n is_voted: isVoted\r\n }\r\n ]\r\n this.setState({\r\n pollValues: [...result]\r\n })\r\n }\r\n\r\n if (data.event === 'startStream' && data.channel_id === id) {\r\n this.liveCountInterval = setInterval(() => {\r\n this.getLiveCount()\r\n }, 5000)\r\n\r\n if (eventState && eventState.encoder === 'wowza_gocoder') {\r\n this.initStream()\r\n } else {\r\n this.setState({\r\n isStreaming: true,\r\n isWebStream: true\r\n })\r\n }\r\n }\r\n\r\n if (data.event === 'stopStream' && data.channel_id === id) {\r\n if (eventState && eventState.encoder === 'wowza_gocoder') {\r\n this.stopStream()\r\n } else {\r\n clearInterval(this.liveCountInterval)\r\n clearInterval(this.getConnectedInterval)\r\n clearInterval(this.pollingInterval)\r\n const newEvent = this.state.event && this.state.event\r\n newEvent.is_finished = true\r\n this.setState({\r\n isStreaming: false,\r\n event: newEvent,\r\n isPastEvent: true\r\n })\r\n }\r\n }\r\n\r\n if (data.event === 'historyChannel' && data.channel_id === id) {\r\n this.setState({\r\n messages: data.messages\r\n })\r\n\r\n if (eventState && !eventState.is_finished && data.live) {\r\n if (eventState && eventState.encoder === 'wowza_gocoder') {\r\n this.initStream()\r\n } else {\r\n this.setState({\r\n isStreaming: true,\r\n isWebStream: true\r\n })\r\n }\r\n }\r\n }\r\n }\r\n\r\n this.socket.onerror = error => {\r\n console.log('Error ' + error.message)\r\n }\r\n\r\n this.socket.onclose = () => {\r\n console.log('on this socket close')\r\n this.setState({ isSocketClose: true })\r\n }\r\n }\r\n\r\n raisedHandNotification = info => {\r\n notification.open({\r\n message: `${info.userName} has raised their hand`,\r\n placement: 'bottomLeft',\r\n icon: \r\n
\r\n \r\n
\r\n {}}>\r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {language !== 'thai' && language !== 'hebrew' && (\r\n
\r\n )}\r\n {isStreaming && !isHost ? (\r\n \r\n \r\n {broadcast && !isCoachingSession && !isConference && (\r\n \r\n
\r\n )}\r\n\r\n {broadcast && event && isConference && (\r\n \r\n \r\n {event.start_date_time && (\r\n
\r\n \r\n {this.displaySchedule(event)}\r\n
\r\n )}\r\n \r\n 
\r\n \r\n {totalViewers}\r\n \r\n
\r\n \r\n {language === 'en-US' && (\r\n
\r\n \r\n {event.title}{' '}\r\n \r\n \r\n \r\n {countStream}\r\n \r\n )}\r\n {!conferencePublic && (\r\n \r\n {countStream}\r\n \r\n )}\r\n {timer && {timer}}\r\n
\r\n )}\r\n {language === 'thai' && (\r\n \r\n \r\n {countStream}\r\n \r\n )}\r\n {!conferencePublic && (\r\n \r\n {countStream}\r\n \r\n )}\r\n {timer && {timer}}\r\n
\r\n )}\r\n {language === 'hebrew' && (\r\n \r\n {conferencePublic ? (\r\n \r\n {countStream}\r\n \r\n )}\r\n {!conferencePublic && (\r\n \r\n {countStream}\r\n \r\n )}\r\n {timer && {timer}}\r\n
\r\n )}\r\n \r\n
\r\n ) : (\r\n \r\n {!isWebStream && (\r\n
\r\n \r\n {/* {broadcast && event && (\r\n \r\n {event.is_vimeo\r\n ? videos.map(video => {\r\n let play = false\r\n controlVideos.length > 0 &&\r\n controlVideos.map(c => {\r\n if (c.videoid === video.id) {\r\n play = c.play\r\n }\r\n return play\r\n })\r\n return (\r\n {\r\n this.setPlayerRef(rp)\r\n }}\r\n url={video.link}\r\n height=\"480px\"\r\n controls\r\n playing={play}\r\n onDuration={e => {\r\n this.handleVideoDuration(e)\r\n }}\r\n onProgress={e => {\r\n this.handleVideoProgress(e)\r\n }}\r\n onEnded={() => {\r\n this.handlSeekOrEnd(true)\r\n }}\r\n onSeek={() => {\r\n this.handlSeekOrEnd(false)\r\n }}\r\n onPlay={() => {\r\n this.handleVideoStatus(video.id)\r\n }}\r\n onPause={() => {\r\n this.handleVideoStatus(video.id)\r\n }}\r\n light\r\n />\r\n )\r\n })\r\n : videos.map(video => (\r\n {\r\n this.setPlayerRef(rp)\r\n }}\r\n url={video}\r\n width=\"100%\"\r\n onDuration={e => {\r\n this.handleVideoDuration(e)\r\n }}\r\n controls\r\n playing={isPlay}\r\n onProgress={e => {\r\n this.handleVideoProgress(e)\r\n }}\r\n onEnded={() => {\r\n this.handlSeekOrEnd(true)\r\n }}\r\n onSeek={() => {\r\n this.handlSeekOrEnd(false)\r\n }}\r\n onReady={() => {\r\n this.handleStartVideo(true)\r\n }}\r\n onPause={() => {\r\n this.handleStartVideo(false)\r\n }}\r\n light\r\n />\r\n ))}\r\n \r\n \r\n this.setState({ isEventJoined: false })\r\n }\r\n hasBreakoutRoom={hasBreakoutRoom}\r\n />\r\n )}\r\n {/* {isRecording &&\r\n false &&\r\n canStream &&\r\n sessionRole && (\r\n \r\n this.setState({ isEventJoined: false })\r\n }\r\n handleAgoraMute={this.handleAgoraMute}\r\n handleLocalMute={this.handleLocalMute}\r\n handleAgoraBroadcast={this.handleAgoraBroadcast}\r\n />\r\n )}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {this.checkShowItem() && (\r\n
\r\n \r\n {!isAssessment && (\r\n this.setState({ activeKey })}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n this.playerRef.seekTo(time)\r\n }\r\n />\r\n \r\n \r\n )}\r\n
\r\n \r\n {general.no_profile}\r\n
\r\n )}\r\n \r\n )}\r\n {(isAssessmentHost ||\r\n (!isAssessmentHost && event.is_finished) ||\r\n userId === event.host_id) &&\r\n isAssessment && (\r\n {t('events:confirm_message')}
\r\n \r\n )}\r\n\r\n
\r\n \r\n {t('v2:create_live_event')}\r\n {isEventMarketPlace ? ' ( Marketplace )' : ''}\r\n
\r\n \r\n {eventType === 'conference' ||\r\n eventType === 'live_assessment' ? null : isEventMarketPlace ? null : (\r\n \r\n {t('buttons:market_place')}\r\n \r\n )}\r\n
\r\n \r\n {/*
\r\n )\r\n}\r\n\r\nexport default Attachment\r\n","import Attachment from './Attachment'\r\n\r\nexport default Attachment\r\n","import React, { Component } from 'react'\r\nimport { Checkbox, Form, Icon, Input, Modal, Select } from 'antd'\r\nimport CreatableSelect from 'react-select/creatable'\r\nimport debounce from 'lodash/debounce'\r\nimport { Row, Col } from '../../../../../styles'\r\nimport { SearchOutlined, PaperClipOutlined } from '@ant-design/icons'\r\nimport _ from 'lodash'\r\nimport ShowContactsModal from './ShowContactsModal'\r\nimport { api } from '../../../../../services'\r\nimport { general } from '../../../../../constants'\r\nimport { CollapseContainer } from '../../styled'\r\nimport { bytesToSize } from '../../../../../utils'\r\nimport Attachment from '../Attachment'\r\n\r\nconst { Option } = Select\r\n\r\nclass Detail extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.loadOptions = _.debounce(this.loadOptions, 500)\r\n this.lastFetchId = 0\r\n this.fetchUserEmails = debounce(this.fetchUserEmails, 1000)\r\n this.state = {\r\n isTopicLoading: false,\r\n isTopicsMax: false,\r\n fetching: false,\r\n attendeeNum: 'uptoTwoHundredFifty',\r\n participantNum: 'uptoTen',\r\n options: [],\r\n value: [],\r\n inputValue: '',\r\n emails: [],\r\n emailList: [],\r\n showContactModal: false,\r\n attendee_email: '',\r\n orgUsers: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n user: {\r\n info: { active_organization_id }\r\n },\r\n current,\r\n topicValue\r\n } = this.props\r\n console.log('didmountdata', current, topicValue)\r\n api.organizations\r\n .getUsersByOrganizationId(active_organization_id)\r\n .then(res => {\r\n this.setState({\r\n orgUsers: res.data\r\n })\r\n })\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n const {\r\n emails = [],\r\n current: { host_emails = [] },\r\n topicValue,\r\n attendee_email\r\n } = this.props\r\n console.log('didupdatedata', topicValue)\r\n if (prevProps !== this.props) {\r\n console.log(\r\n 'here',\r\n prevProps.emails,\r\n emails,\r\n prevProps.current.host_emails,\r\n host_emails\r\n )\r\n\r\n const isEmailChanged = prevProps.current.host_emails !== host_emails\r\n\r\n console.log('isEmailChanged', isEmailChanged)\r\n if (\r\n prevProps.emails !== emails ||\r\n isEmailChanged ||\r\n ((host_emails.length > 0 || emails.length > 0) &&\r\n this.state.emails.length < 1)\r\n ) {\r\n console.log('inside')\r\n this.setState(\r\n {\r\n emails: host_emails || emails\r\n },\r\n () => {\r\n const {\r\n form: { setFieldsValue }\r\n } = this.props\r\n setFieldsValue({ host_emails: this.state.emails })\r\n }\r\n )\r\n }\r\n\r\n if (prevProps.attendee_email !== attendee_email) {\r\n this.setState({ attendee_email })\r\n }\r\n\r\n if (\r\n (topicValue && topicValue !== prevProps.topicValue) ||\r\n (topicValue && topicValue.length > 0 && this.state.value.length < 1)\r\n ) {\r\n this.setState({\r\n value: topicValue\r\n })\r\n }\r\n // if (prevProps.current !== this.props.current && current) {\r\n // const no_of_people_conf = current.host_emails.length ? current.host_emails.length > 0 && current.host_emails.length === 10 ? 'uptoTen'\r\n // : current.host_emails.length > 10 || current.host_emails.length === 20 ? 'uptoTwenty'\r\n // : current.host_emails.length > 20 || current.host_emails.length === 25 ? 'uptoTwentyFive'\r\n // : 'uptoTen' : 'uptoTen'\r\n // this.setState({\r\n // participantNum: no_of_people_conf,\r\n // // emails: current.host_emails\r\n // })\r\n // }\r\n }\r\n }\r\n\r\n createOptionList = list => {\r\n const options = list.map(topic => this.props.App.createOption(topic))\r\n this.setState({\r\n options,\r\n isTopicLoading: false\r\n })\r\n }\r\n\r\n handleChange = (newValue, actionMeta) => {\r\n if (actionMeta.removedValue) {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n this.props.App.handleTopicChange(this.state.value)\r\n }\r\n )\r\n } else if (!_.isEmpty(newValue) && newValue.length > 5) {\r\n this.setState({\r\n isTopicsMax: true\r\n })\r\n } else {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n this.props.App.handleTopicChange(this.state.value)\r\n }\r\n )\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n handleCreate = inputValue => {\r\n this.setState({ isTopicLoading: true })\r\n const { options, value } = this.state\r\n const topic = { title: inputValue }\r\n if (!_.isEmpty(value) && value.length >= 3) {\r\n this.setState({\r\n isTopicsMax: true,\r\n isTopicLoading: false\r\n })\r\n } else {\r\n api.topics.createTopics(topic).then(({ data }) => {\r\n if (!_.isEmpty(data[0])) {\r\n const newOption = this.props.App.createOption(data[0])\r\n this.props.updateTopicList(data[0])\r\n this.setState(\r\n {\r\n isTopicLoading: false,\r\n isTopicsMax: false,\r\n options: [...options, newOption],\r\n value: [...value, newOption],\r\n inputValue: ''\r\n },\r\n () => {\r\n this.props.App.handleParam()\r\n }\r\n )\r\n }\r\n })\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n loadOptions = inputValue => {\r\n if (inputValue.length > 0 && inputValue.length <= 50) {\r\n this.setState({\r\n isTopicLoading: true\r\n })\r\n const params = {\r\n search: inputValue.trim(),\r\n limit: 10,\r\n offset: 0\r\n }\r\n api.topics.getTopics(params).then(({ data }) => {\r\n this.setState({\r\n inputValue\r\n })\r\n this.createOptionList(data)\r\n })\r\n }\r\n }\r\n\r\n LoadingIndicator = () => (\r\n {t('v4:attachment_event')}
*/}\r\n\r\n {data.map(d => (\r\n
\r\n \r\n \r\n {' '}\r\n \r\n \r\n
\r\n ))}\r\n {d.title}
\r\n handleDelete(d.id)}>\r\n {t('v2:support_upto_fivethousand_participants')}
\r\n \r\n{t('v2:support_upto_ten_participants')}
\r\n \r\n \r\n ) : (\r\n <>\r\n{t('v2:support_upto_twohundred_participants')}
\r\n {/*{t('v2:supprt_upto_five_participants')}
\r\n {/*{t('v2:support_upto_twentyfive_participants')}
\r\n {/*{t('v2:two_live_video_participants')}
\r\n \r\n\r\n {t('labels:topics').toUpperCase()}\r\n
\r\n {t('errors:live_topics')}
\r\n )}\r\n {isTopicsMax && (\r\n {t('errors:topics_max')}
\r\n )}\r\n \r\n
\r\n ) : null\r\n )}\r\n \r\n
\r\n\r\n {item.status !== general.CANCELED && (\r\n \r\n
\r\n \r\n {checkedCompletUpload(item) && (\r\n \r\n {bytesToSize(item.loaded)} {t('of')}{' '}\r\n {bytesToSize(item.total)}\r\n \r\n )}\r\n {!checkedCompletUpload(item) && (\r\n \r\n {pdfFiles[ind] && pdfFiles[ind].removed\r\n ? t('general:removed')\r\n : t('general:completed')}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n {checkFinish(current.start_date_time, current.duration) && (\r\n \r\n {!isZoom &&\r\n getFieldDecorator('is_chat', {\r\n valuePropName: 'checked',\r\n initialValue: isLiveAssessment ? false : current.is_chat\r\n })(\r\n {\r\n handleCheckBreakRoomChange(e)\r\n }}\r\n />\r\n )}\r\n {getFieldDecorator('is_recording', {\r\n valuePropName: 'checked',\r\n initialValue:\r\n tag.value === 'live_assessment' ? true : current.is_recording\r\n })(\r\n {\r\n handleCheckChange('is_recording', e)\r\n }}\r\n disabled={tag.value === 'live_assessment'}\r\n />\r\n )}\r\n {!isZoom && (\r\n <>\r\n {getFieldDecorator('is_poll', {\r\n valuePropName: 'checked',\r\n initialValue: isLiveAssessment ? false : current.is_poll\r\n })(\r\n handleChangeLocale(e)}\r\n filterOption={(input, option) =>\r\n !_.isArray(option.props.children) &&\r\n option.props.children\r\n .toLowerCase()\r\n .indexOf(input.toLowerCase()) >= 0\r\n }\r\n disabled={!current.is_transcribed}\r\n >\r\n {transcribeKeys.map((item, index) => (\r\n \r\n ))}\r\n \r\n {/* )} */}\r\n {user.info &&\r\n user.info.organization &&\r\n user.info.organization.enable_ai &&\r\n getFieldDecorator('is_ai_enabled', {\r\n valuePropName: 'checked',\r\n initialValue: is_ai_enabled\r\n })(\r\n {\r\n onEnableAI(e)\r\n }}\r\n disabled={\r\n isLiveAssessment\r\n ? !current.is_transcribed\r\n : !current.is_transcribed || !current.is_recording\r\n }\r\n style={{ marginRight: '10px' }}\r\n />\r\n )}\r\n\r\n {error_msg_ai && (\r\n
\r\n )\r\n }\r\n}\r\n","import React from 'react'\r\nimport { DatePicker, Input } from 'antd'\r\nimport { Row, Col, Field } from '../../../../../styles'\r\nimport { withTranslation } from 'react-i18next'\r\nimport './styles.scss'\r\n\r\nconst NumericInput = props => {\r\n const onChange = e => {\r\n const { value } = e.target\r\n const reg = /^(0|[1-9][0-9]*)$/\r\n if ((!Number.isNaN(value) && reg.test(value)) || value === '') {\r\n props.onChange(value)\r\n }\r\n }\r\n\r\n return \r\n}\r\n\r\nconst EDatePicker = props => {\r\n const onChange = (field, value) => {\r\n const { onChange } = props\r\n\r\n if (onChange) {\r\n onChange(field, value)\r\n }\r\n }\r\n\r\n const onTimeChange = value => {\r\n onChange('eventTime', value)\r\n }\r\n\r\n const onDurationChange = value => {\r\n onChange('eventDuration', value)\r\n }\r\n\r\n console.log(props)\r\n const {\r\n eventTime,\r\n eventDuration,\r\n t,\r\n disabledDate,\r\n isShowNoted,\r\n current: { is_live, is_finished }\r\n } = props\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n )}\r\n \r\n {!isAdmin && (\r\n \r\n {t('labels:event')}\r\n \r\n )}\r\n {isAdmin && (\r\n \r\n {t('labels:event')}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n {isOverLimit && (\r\n \r\n
\r\n )}\r\n\r\n {encoderType !== 'live_assessment' && (\r\n <>\r\n \r\n {t('labels:check_user')}\r\n
\r\n \r\n }\r\n onCancel={closeCheckModal}\r\n footer={[\r\n ,\r\n \r\n \r\n {!_.isEmpty(isNotExist) &&\r\n isNotExist.map((item, index) => (\r\n
\r\n \r\n )}\r\n {!_.isEmpty(isNotInOrg) && (\r\n {t('labels:user_not_exist')}
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n \r\n {!_.isEmpty(isNotInOrg) &&\r\n isNotInOrg.map((item, index) => (\r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n {t('labels:user_not_exist_in_org')}\r\n
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default Setting\r\n","import React, { Component } from 'react'\r\nimport { Icon, Input, Button } from 'antd'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { Col, Row } from '../../../../../styles'\r\n\r\nclass Poll extends Component {\r\n addQuestion = () => {\r\n const { addQuestion } = this.props\r\n addQuestion()\r\n }\r\n\r\n deleteQuestion = async index => {\r\n const { deleteQuestion, savePoll, data } = this.props\r\n\r\n const question = data[index].question\r\n if (deleteQuestion) {\r\n await deleteQuestion(index)\r\n if (question) {\r\n await savePoll()\r\n }\r\n }\r\n }\r\n\r\n addAnswer = rootIndex => {\r\n const { addAnswer } = this.props\r\n\r\n if (addAnswer) {\r\n addAnswer(rootIndex)\r\n }\r\n }\r\n\r\n deleteAnswer = async (rootIndex, index) => {\r\n const { deleteAnswer, savePoll, data } = this.props\r\n const answer = data[rootIndex].answers[index]\r\n if (deleteAnswer) {\r\n await deleteAnswer(rootIndex, index)\r\n if (answer) {\r\n await savePoll()\r\n }\r\n }\r\n }\r\n\r\n handleQuestion = async (index, e) => {\r\n const { handleQuestion, data, savePoll } = this.props\r\n const answers = data[index].answers\r\n const emptyAnswerExist = answers.find(item => item === '')\r\n if (handleQuestion) {\r\n const value = e.target.value || ''\r\n await handleQuestion(index, value)\r\n if (emptyAnswerExist && emptyAnswerExist.length === 0) {\r\n await savePoll()\r\n }\r\n }\r\n }\r\n\r\n handleAnswer = async (rootIndex, index, e) => {\r\n const { handleAnswer, savePoll } = this.props\r\n\r\n if (handleAnswer) {\r\n const value = e.target.value || ''\r\n await handleAnswer(rootIndex, index, value)\r\n await savePoll()\r\n }\r\n }\r\n\r\n savePoll = () => {\r\n const { savePoll } = this.props\r\n\r\n if (savePoll) {\r\n savePoll()\r\n }\r\n }\r\n\r\n render() {\r\n const { data, t } = this.props\r\n\r\n return (\r\n \r\n {checkSelectedType(1) && (\r\n { onEnableAI(e.target.checked) }} checked={is_ai_enabled}>\r\n Enable AI\r\n \r\n } */}\r\n {selectedType.some(\r\n item => item === 2 || item === 3 || item === 4\r\n ) && (\r\n
\r\n \r\n \r\n {t('v4:admin_only')}\r\n \r\n
\r\n )}\r\n\r\n {/* {enable_ai &&\r\n \r\n \r\n {\r\n onSendEmail(true)\r\n }}\r\n >\r\n {t('v2:send_invite_email')}\r\n \r\n {\r\n onSendEmail(false)\r\n }}\r\n >\r\n {t('v2:do_not_send_invite_email')}\r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n {t('buttons:save')}\r\n \r\n
\r\n \r\n \r\n {t('buttons:publish_event')}\r\n \r\n
\r\n \r\n \r\n {data.map((poll, idx) => (\r\n
\r\n \r\n \r\n ))}\r\n \r\n {t('labels:poll')}
\r\n \r\n {t('labels:question')}\r\n {idx > 0 && (\r\n this.deleteQuestion(idx)}\r\n >\r\n {t('v2:delete_poll')}\r\n {/*
\r\n )}\r\n \r\n this.handleQuestion(idx, e)}\r\n />\r\n
\r\n\r\n \r\n {t('labels:answers')}\r\n
\r\n \r\n {poll.answers &&\r\n poll.answers.map((answer, index) => (\r\n
\r\n ))}\r\n \r\n this.deleteAnswer(idx, index)}\r\n >\r\n
\r\n \r\n this.handleAnswer(idx, index, e)}\r\n />\r\n
\r\n \r\n {\r\n this.addAnswer(idx)\r\n }}\r\n >\r\n {t('buttons:add_answer')}\r\n \r\n
\r\n \r\n {cert_id ? (\r\n \r\n \r\n \r\n {t('labels:delete_certificate')}\r\n \r\n \r\n\r\n \r\n {t('v4:certificate_added')}\r\n \r\n \r\n ) : (\r\n \r\n {cert_id\r\n ? t('v4:certificate_added')\r\n : t('v4:create_certificate')}\r\n {cert_id && \r\n \r\n \r\n {t('labels:delete_badge')}\r\n \r\n \r\n\r\n \r\n {t('v4:create_badge')}\r\n \r\n \r\n ) : (\r\n \r\n {badge_id ? t('v4:badge_added') : t('v4:create_badge')}\r\n {badge_id &&
\r\n \r\n {t('v4:report_live_assessments')}
\r\n\r\n
\r\n {selectedItem && (\r\n \r\n \r\n {t('labels:cancel')}\r\n \r\n handleFileInsert(selectedItem)}\r\n >\r\n {t('labels:insert')}\r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n {toSelectFile && (\r\n \r\n \r\n {t('v4:upload_pdf')}\r\n \r\n {\r\n e.stopPropagation()\r\n toggleMediaModal()\r\n }}\r\n >\r\n {t('buttons:select_media_library')}\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n )}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default TopSection\r\n","import React, { useState, useEffect } from 'react'\r\nimport { Col, Form, Input, Checkbox } from 'antd'\r\nimport Switch from '../../../../../components/Switch'\r\nconst BottomSection = props => {\r\n const {\r\n t,\r\n form: { getFieldDecorator },\r\n current: { marketplace },\r\n onFieldChange,\r\n handleSwitch\r\n } = props\r\n\r\n const [freeStatus, setfreeStatus] = useState(false)\r\n\r\n const onSwitchChange = val => {\r\n setfreeStatus(val)\r\n handleSwitch(val)\r\n }\r\n\r\n useEffect(() => {\r\n if (typeof marketplace.is_free === 'boolean')\r\n setfreeStatus(marketplace.is_free)\r\n }, [])\r\n\r\n return (\r\n \r\n \r\n {getFieldDecorator('encoder_type', {\r\n initialValue: encoderType\r\n })(\r\n \r\n !_.isArray(option.props.children) &&\r\n option.props.children\r\n .toLowerCase()\r\n .indexOf(input.toLowerCase()) >= 0\r\n }\r\n >\r\n {Object.keys(broadcastOptions).map(item => (\r\n \r\n {t(`broadcastOptions:${item}`)}\r\n \r\n ))}\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n {getFieldDecorator('host', {\r\n initialValue:\r\n current.host && current.host.email\r\n ? current.host.email\r\n : email\r\n ? email\r\n : emails[0]\r\n })()}\r\n \r\n \r\n \r\n {getFieldDecorator('category', {\r\n rules: [\r\n {\r\n required: true,\r\n message: t('v4:select_category')\r\n }\r\n ],\r\n initialValue: current.marketplace.category_id\r\n })(\r\n onFieldChange(val)}\r\n >\r\n {categories &&\r\n categories.map(category => (\r\n \r\n {category.children &&\r\n category.children.map(option => (\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default BottomSection\r\n","import React from 'react'\r\nimport { Row, Col, Form, Input } from 'antd'\r\nimport '../../../../Courses/Create/nestedComponents/CourseCreateMain/components/index.css'\r\nimport _ from 'lodash'\r\n\r\nconst MarketPlaceDetailSection = props => {\r\n const {\r\n form: { getFieldDecorator },\r\n current: {\r\n description,\r\n marketplace: {\r\n course_description = '',\r\n course_obj = '',\r\n course_outline = ''\r\n }\r\n },\r\n onDescription,\r\n onObjectives,\r\n onOutline,\r\n onMarketPlaceDescription,\r\n isEventMarketPlace,\r\n marketplaceOption,\r\n t,\r\n App: { handleForm }\r\n } = props\r\n\r\n const handleDesc = (val, field) => {\r\n switch (field) {\r\n case 'description':\r\n onDescription(val)\r\n break\r\n case 'course_obj':\r\n onObjectives(val)\r\n break\r\n case 'course_outline':\r\n onOutline(val)\r\n break\r\n case 'course_description':\r\n onMarketPlaceDescription(val)\r\n break\r\n default:\r\n break\r\n }\r\n handleForm()\r\n }\r\n\r\n const handleDescription = _.debounce((v, f) => handleDesc(v, f), 1000)\r\n\r\n const generateEditor = (title, message, value) => {\r\n const fieldValue = message.split('event').join('course')\r\n return (\r\n \r\n \r\n {getFieldDecorator('video_link', {\r\n rules: [{ required: true, message: t('v4:input_video_link') }],\r\n initialValue: marketplace.video_link\r\n })(\r\n onFieldChange(e.target.value)}\r\n />\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {getFieldDecorator('is_free', {\r\n initialValue: marketplace.is_free\r\n })(\r\n onSwitchChange(e)}\r\n />\r\n )}\r\n \r\n \r\n {freeStatus ? (\r\n onFieldChange(e.target.value)}\r\n disabled={freeStatus === null ? false : freeStatus}\r\n />\r\n ) : (\r\n getFieldDecorator('price', {\r\n initialValue: marketplace.price,\r\n rules: [\r\n {\r\n validator: (rule, value) => value >= 5,\r\n required: false,\r\n message: t('v4:enter_price')\r\n }\r\n ]\r\n })(\r\n onFieldChange(e.target.value)}\r\n disabled={freeStatus}\r\n />\r\n )\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {getFieldDecorator('is_shared_profile', {\r\n valuePropName: 'checked',\r\n initialValue: marketplace.hasOwnProperty('is_shared_profile')\r\n ? marketplace.is_shared_profile\r\n : false\r\n })(\r\n onFieldChange(e.target.value)}\r\n >\r\n {t('v3:allow_sharing_trainer_info')}\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n {getFieldDecorator(fieldValue, {\r\n rules: [\r\n {\r\n required: true,\r\n message: t(`v3:${message}`)\r\n }\r\n ],\r\n initialValue: value\r\n })(\r\n {\r\n if (\r\n e.keyCode === 32 &&\r\n (e.target.value.charAt(e.target.selectionStart - 1) === ' ' ||\r\n e.target.value.charAt(e.target.selectionStart) === ' ')\r\n ) {\r\n e.preventDefault()\r\n }\r\n }}\r\n onChange={e => handleDescription(e.target.value, value)}\r\n style={{ fontSize: '1.6rem', resize: 'none' }}\r\n wrap={'soft'}\r\n />\r\n )}\r\n \r\n
\r\n )\r\n }\r\n\r\n console.log('check option', marketplaceOption)\r\n return (\r\n \r\n \r\n {hours > 0 && hours + ' hours'}{' '}\r\n {minutes > 0 && minutes + ' minutes'}{' '}\r\n \r\n
\r\n \r\n (\r\n \r\n {isEdit && (\r\n \r\n \r\n {t('v4:delete_schedule')}\r\n \r\n \r\n )}\r\n \r\n
\r\n ) : (\r\n false\r\n )\r\n }\r\n >\r\n \r\n \r\n \r\n {label}
\r\n ),\r\n dateHeader: props => (\r\n\r\n
\r\n )\r\n}\r\n\r\nconst CustomDayInMonthView = props => {\r\n const { date, label, selectedDate, onDrillDown, events } = props\r\n\r\n const today = new Date()\r\n const isToday = moment(date).isSame(today, 'day')\r\n const isSameMonth = moment(selectedDate).isSame(date, 'month')\r\n const isDayClicked = moment(date).isSame(selectedDate, 'day')\r\n const isPastDate = moment(date).isBefore(today, 'day')\r\n const dayHasSelection = events.find(\r\n item => moment(item.start).isSame(moment(date), 'day') && item.is_booked\r\n )\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n onUpdate()\r\n isModal && closeModal()\r\n }}\r\n >\r\n {isModal ? 'Save' : 'Update Calendar'}\r\n \r\n
\r\n )\r\n}\r\n\r\nconst CalendarToolbar = props => {\r\n const dateFormat = 'YYYY/MM/DD'\r\n const { date, onDateChange } = props\r\n const { t } = useTranslation()\r\n const dayText = moment(date).format('MMMM YYYY')\r\n\r\n const content = (\r\n \r\n
\r\n )\r\n\r\n return (\r\n \r\n \r\n {t('reports:today')}\r\n
\r\n \r\n \r\n
\r\n \r\n {t('v3:task_day')}\r\n
\r\n {t('v3:created_task_day')}
\r\n\r\n \r\n
\r\n \r\n {t('v3:event_day')} \r\n
\r\n {t('v3:has_booked_coaching')}
\r\n\r\n \r\n
\r\n \r\n {t('v3:active_day')} \r\n
\r\n {t('v3:selectable_time_slots')}
\r\n\r\n <>\r\n {t('general:date')}:{' '}\r\n {\r\n return moment().add(-1, 'days') >= current\r\n }}\r\n />\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Form.create()(withTranslation('calendar')(MyCalendar))\r\n","import React, { useEffect, useMemo, useState } from 'react'\r\nimport { Button, Modal, Tag } from 'antd'\r\nimport MyCalendar from '../../../../MyCalendar/MyCalendar'\r\nimport _ from 'lodash'\r\nimport moment from 'moment'\r\nimport api from '../../../../../services/api'\r\n\r\nconst days = [\r\n 'Sunday',\r\n 'Monday',\r\n 'Tuesday',\r\n 'Wednesday',\r\n 'Thursday',\r\n 'Friday',\r\n 'Saturday'\r\n]\r\n\r\nfunction MarketPlaceCalendar() {\r\n const [showCalendarModal, setShowCalendarModal] = useState(false)\r\n const [isCalendarFetching, setIsCalendarFetching] = useState(true)\r\n const [events, setEvents] = useState([])\r\n\r\n const toggleCalendarModal = () => setShowCalendarModal(show => !show)\r\n\r\n useEffect(() => {\r\n api.calendar\r\n .getCalendar()\r\n .then(res => {\r\n setEvents(res.data.calendar)\r\n setIsCalendarFetching(false)\r\n })\r\n .catch(err => {\r\n setIsCalendarFetching(false)\r\n })\r\n }, [])\r\n\r\n const onUpdate = events => {\r\n setEvents(events)\r\n }\r\n\r\n const eventsByDay = useMemo(() => {\r\n const availableEvents = events.filter(\r\n item => item.coaching_availability && !item.is_booked\r\n )\r\n\r\n const eventsByMonth = _.groupBy(availableEvents, ({ start }) =>\r\n moment(start).startOf('month')\r\n )\r\n\r\n return Object.keys(eventsByMonth).map(item => {\r\n const arr = eventsByMonth[item]\r\n var groupByDay = _.groupBy(arr, ({ start }) =>\r\n moment(start).startOf('day')\r\n )\r\n return {\r\n [item]: groupByDay\r\n }\r\n })\r\n }, [events])\r\n\r\n console.log({ eventsByDay })\r\n\r\n return (\r\n {dayText}
\r\n \r\n \r\n {' '}\r\n Add Calendar{' '}\r\n \r\n\r\n \r\n toggleCalendarModal(true)} />\r\n \r\n\r\n {eventsByDay &&\r\n eventsByDay.length > 0 &&\r\n eventsByDay.map(monthItem => {\r\n const monthKey = Object.keys(monthItem)[0]\r\n const allMonthSlots = monthItem[monthKey]\r\n return (\r\n
\r\n )\r\n}\r\n\r\nexport default MarketPlaceCalendar\r\n","import React, { Component } from 'react'\r\nimport { Form, Icon, Modal, Button } from 'antd'\r\nimport { api } from '../../../../../services'\r\nimport { Row, Col } from '../../../../../styles'\r\nimport _ from 'lodash'\r\nimport { TopSection, BottomSection } from '../Marketplace'\r\nimport Preview from '../../../../Library/components/Preview'\r\nimport { PopupMedia } from '../../../../Library/internal'\r\nimport { modal_style } from '../../styled'\r\nimport TrainerSection from '../../../../../components/TrainerSection'\r\nimport { MarketPlaceDetailSection } from './MarketPlaceDetailSection'\r\nimport MarketPlaceCalendar from './MarketPlaceCalendar'\r\nimport { ImageSelect } from '../../../../../components/Form'\r\nexport default class MarketPlaceForm extends Component {\r\n state = {\r\n isTopicLoading: false,\r\n isTopicsMax: false,\r\n fetching: false,\r\n options: [],\r\n value: [],\r\n inputValue: ''\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n const { topicValue, current } = this.props\r\n const { value } = this.state\r\n // console.log('didupdatedatamarket', topicValue, current)\r\n\r\n if (prevProps.topicValue !== topicValue && topicValue) {\r\n // console.log('didupdatedatamarketif', topicValue, current)\r\n this.setState({\r\n value: topicValue\r\n })\r\n } else if (\r\n current.topics !== null &&\r\n prevProps.current.topics !== current.topics &&\r\n current.topics !== topicValue\r\n ) {\r\n // console.log(\r\n // 'didupdatedatamarketelseif',\r\n // topicValue,\r\n // current\r\n // )\r\n this.setState({\r\n value: [...value, ...current.topics, topicValue]\r\n })\r\n }\r\n\r\n // else if (prevProps.topicValue !== current.topics && current.topics) {\r\n // console.log(\r\n // 'didupdatedatamarketelseifffff',\r\n // topicValue,\r\n // current\r\n // )\r\n // this.setState({\r\n // value: [...current.topics, ...topicValue]\r\n // })\r\n // }\r\n }\r\n\r\n createOptionList = list => {\r\n const options = list.map(topic => this.props.App.createOption(topic))\r\n this.setState({\r\n options,\r\n isTopicLoading: false\r\n })\r\n }\r\n\r\n handleChange = (newValue, actionMeta) => {\r\n if (actionMeta.removedValue) {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n this.props.App.handleTopicChange(this.state.value)\r\n }\r\n )\r\n } else if (!_.isEmpty(newValue) && newValue.length > 5) {\r\n this.setState({\r\n isTopicsMax: true\r\n })\r\n } else {\r\n this.setState(\r\n {\r\n value: newValue,\r\n inputValue: '',\r\n isTopicLoading: false,\r\n isTopicsMax: false\r\n },\r\n () => {\r\n this.props.App.handleTopicChange(this.state.value)\r\n }\r\n )\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n handleCreate = inputValue => {\r\n const { current } = this.props\r\n this.setState({ isTopicLoading: true })\r\n const { options, value } = this.state\r\n const topic = { title: inputValue }\r\n if (!_.isEmpty(value) && value.length >= 3) {\r\n this.setState({\r\n isTopicsMax: true,\r\n isTopicLoading: false\r\n })\r\n } else {\r\n api.topics.createTopics(topic).then(({ data }) => {\r\n if (!_.isEmpty(data[0])) {\r\n const newOption = this.props.App.createOption(data[0])\r\n this.props.updateTopicList(data[0])\r\n this.setState(\r\n {\r\n isTopicLoading: false,\r\n isTopicsMax: false,\r\n options: [...options, newOption],\r\n value: [...current.topics, ...value, newOption],\r\n inputValue: ''\r\n },\r\n () => {\r\n this.props.App.handleParam()\r\n }\r\n )\r\n }\r\n })\r\n }\r\n this.isModalSelectOpen()\r\n }\r\n\r\n loadOptions = inputValue => {\r\n if (inputValue.length > 0 && inputValue.length <= 50) {\r\n this.setState({\r\n isTopicLoading: true\r\n })\r\n const params = {\r\n search: inputValue.trim(),\r\n limit: 10,\r\n offset: 0\r\n }\r\n api.topics.getTopics(params).then(({ data }) => {\r\n this.setState({\r\n inputValue\r\n })\r\n this.createOptionList(data)\r\n })\r\n }\r\n }\r\n\r\n LoadingIndicator = () => (\r\n \r\n Setting Calendar For Booking\r\n
\r\n\r\n\r\n {Object.keys(allMonthSlots).map((item, index) => {\r\n const eventsGroupedByDay = allMonthSlots[item]\r\n return (\r\n
\r\n )\r\n })}\r\n \r\n {index === 0 && (\r\n
\r\n )\r\n })}\r\n \r\n {moment(item).format('MMMM YYYY')}\r\n
\r\n )}\r\n\r\n \r\n {moment(timeSlot.start).format('hh:mm a')} -{' '}\r\n {moment(timeSlot.end).format('hh:mm a')}\r\n \r\n )\r\n })}\r\n
\r\n \r\n {moment(item).date()}, {days[moment(item).day()]}\r\n
\r\n {eventsGroupedByDay &&\r\n eventsGroupedByDay.map(timeSlot => {\r\n return (\r\n\r\n \r\n \r\n If you wish to change your monthly live-streaming limit please\r\n contact\r\n \r\n \r\n admin@sharelook.com\r\n \r\n \r\n
\r\n )\r\n }\r\n onAdminOnly = () => {\r\n this.setState(state => ({\r\n isAdminOnly: !state.isAdminOnly\r\n }))\r\n }\r\n\r\n handleSelectedOrganizations = id => {\r\n const { selectedOrganizations } = this.state\r\n\r\n if (selectedOrganizations.includes(id)) {\r\n this.setState({\r\n selectedOrganizations: selectedOrganizations.filter(\r\n organizationId => organizationId !== id\r\n )\r\n })\r\n } else {\r\n this.setState({\r\n selectedOrganizations: [...selectedOrganizations, id]\r\n })\r\n }\r\n }\r\n\r\n handleSelectedGroups = (groupId, orgId) => {\r\n const { selectedGroups } = this.state\r\n this.setState({\r\n selectedGroups: selectedGroups.includes(groupId)\r\n ? selectedGroups.filter(i => i !== groupId)\r\n : selectedGroups.concat([groupId]),\r\n selectedOrganizations: [orgId]\r\n })\r\n }\r\n\r\n handleSelectedAllOrganizations = id => {\r\n const { list } = this.props\r\n const { selectedGroups } = this.state\r\n\r\n const { groups = [] } = list.find(i => i.id === id)\r\n const groupIds = groups.map(i => i.id)\r\n\r\n const selectedOrgGroups = groupIds.filter(i => selectedGroups.includes(i))\r\n\r\n if (groupIds.length === selectedOrgGroups.length) {\r\n this.setState({\r\n selectedGroups: selectedGroups.filter(\r\n i => !selectedOrgGroups.includes(i)\r\n ),\r\n selectedOrganizations: [id]\r\n })\r\n } else {\r\n this.setState({\r\n selectedGroups: selectedGroups\r\n .filter(i => !groupIds.includes(i))\r\n .concat(groupIds),\r\n selectedOrganizations: [id]\r\n })\r\n }\r\n }\r\n\r\n handleChangeTerms = event => {\r\n const {\r\n isPublish,\r\n eventTime,\r\n eventDuration,\r\n encoderType,\r\n current\r\n } = this.state\r\n const checkedValue = event.target.checked\r\n const eventId = current.id\r\n const isCoaching = encoderType === 'peer2peer'\r\n\r\n const eventPublishCondition =\r\n eventId && checkedValue && eventTime && eventDuration\r\n const coachingPublishCondition = isCoaching && eventId && checkedValue\r\n\r\n if (!isPublish) {\r\n this.setState(\r\n {\r\n checkedTerms: checkedValue,\r\n isDisable:\r\n eventPublishCondition || coachingPublishCondition ? false : true\r\n },\r\n () => {\r\n if (!isCoaching && (!eventTime || !eventDuration)) {\r\n this.checkTimeError()\r\n }\r\n }\r\n )\r\n }\r\n }\r\n\r\n checkTimeError = () => {\r\n const { eventTime, eventDuration } = this.state\r\n if (this.checkFinish(eventTime, eventDuration)) {\r\n if (!eventTime) {\r\n message.error(i18n.t('errors:start_date'))\r\n return\r\n }\r\n\r\n if (!eventDuration) {\r\n message.error(i18n.t('errors:duration'))\r\n return\r\n }\r\n }\r\n }\r\n\r\n handleSwitch = val => {\r\n this.setState(\r\n {\r\n is_free: val\r\n },\r\n () => this.handleForm()\r\n )\r\n }\r\n\r\n onSendEmail = value => {\r\n this.setState({ isSendMail: value })\r\n }\r\n\r\n onEnableAI = value => {\r\n this.setState({ is_ai_enabled: value })\r\n }\r\n\r\n handleRewardImageUpload = (type, id) => {\r\n this.setState(\r\n { [`${type === 'Certificate' ? 'cert_id' : 'badge_id'}`]: id },\r\n () => this.handleForm()\r\n )\r\n }\r\n\r\n handleNonMarketplaceFields = val =>\r\n this.setState({ shouldHideNonMarketplaceFields: val })\r\n\r\n render() {\r\n const { t } = this.props\r\n const {\r\n tag,\r\n isEventMarketPlace,\r\n hasZoomIntegrated,\r\n checkingZoomStatus\r\n } = this.state\r\n const { id } = this.props.match.params\r\n const isEdit = Boolean(id)\r\n\r\n const isZoomMeeting = tag.value === 'zoom_meeting'\r\n const eventType = tag.value\r\n const viewForm = isZoomMeeting\r\n ? !checkingZoomStatus && hasZoomIntegrated\r\n : !isEventMarketPlace\r\n\r\n const tagsData = [\r\n { value: 'conference', text: t('v3:private_conference') },\r\n { value: 'webinar', text: t('v3:webinar') },\r\n { value: 'agora_conference', text: t('v3:public_conference') },\r\n { value: 'peer2peer', text: t('v4:coaching_session') },\r\n { value: 'live_assessment', text: t('v2:live_assessment') }\r\n ]\r\n\r\n return (\r\n {errorData.title}.
\r\n {errorData.subTitle && {errorData.subTitle}.
}\r\n \r\n
\r\n\r\n {firstFetch || secFetch ? (\r\n {t(`${title}`)}
\r\n {data.length > 0 && (\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n {t('title_assessment')}
\r\n \r\n this.onSearch(e.target.value)}\r\n />\r\n
\r\n \r\n {!isAdmin && \r\n {t('labels:assessment')}\r\n }\r\n {isAdmin && \r\n {t('labels:assessment')}\r\n }\r\n
\r\n \r\n \r\n \r\n {t('v3:live_straming_para')}\r\n \r\n \r\n admin@sharelook.com\r\n \r\n \r\n
\r\n )\r\n }\r\n onAdminOnly = () => {\r\n this.setState(state => ({\r\n isAdminOnly: !state.isAdminOnly\r\n }))\r\n }\r\n\r\n render() {\r\n const {\r\n list,\r\n isFetching,\r\n events: { isSaving },\r\n user: {\r\n info: { isAdmin, isSuperAdmin }\r\n },\r\n t\r\n } = this.props\r\n const {\r\n selectedType,\r\n selectedOrganizations,\r\n selectedGroups,\r\n eventTime,\r\n eventDuration,\r\n checkedTerms,\r\n emails,\r\n isFetching: isAssessmentFetching,\r\n isDisable,\r\n error_message,\r\n error,\r\n isCheckModal,\r\n isNotExist,\r\n isNotInOrg,\r\n errorData,\r\n isOverLimit,\r\n isAdminOnly,\r\n isSendMail\r\n } = this.state\r\n\r\n const privacyTypes = [\r\n isSuperAdmin && {\r\n id: 1,\r\n name: 'Public',\r\n description: 'PublicDescription'\r\n },\r\n (isSuperAdmin || isAdmin) && {\r\n id: 2,\r\n name: 'Organisations',\r\n description: 'OrganisationsDescription'\r\n },\r\n (isSuperAdmin || isAdmin) && {\r\n id: 3,\r\n name: 'Organisation Groups',\r\n description: 'OrganisationGroupsDescription'\r\n },\r\n { id: 4, name: 'Specific User', description: 'SpecificUserDescription' }\r\n ].filter(i => !!i)\r\n\r\n const filteredList = list.filter(\r\n i => isSuperAdmin || (i.role && i.role.name === 'Admin')\r\n )\r\n\r\n return (\r\n {errorData.title}.
\r\n {errorData.subTitle && {errorData.subTitle}.
}\r\n \r\n
\r\n {t('title')}
\r\n {t('assessment_subtitile')}
\r\n \r\n
\r\n )}\r\n {isOverLimit && (\r\n \r\n
\r\n )}\r\n \r\n {t('labels:check_user')}\r\n
\r\n \r\n }\r\n onCancel={this.closeCheckModal}\r\n footer={[\r\n ,\r\n \r\n \r\n {!_.isEmpty(isNotExist) &&\r\n isNotExist.map((item, index) => (\r\n
\r\n \r\n )}\r\n {!_.isEmpty(isNotInOrg) && (\r\n {t('labels:user_not_exist')}
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n \r\n {!_.isEmpty(isNotInOrg) &&\r\n isNotInOrg.map((item, index) => (\r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n {t('labels:user_not_exist_in_org')}\r\n
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n
\r\n \r\n {selectedType === 1 && (\r\n
\r\n \r\n \r\n {general.admin_only}\r\n \r\n
\r\n )}\r\n {(selectedType === 2 || selectedType === 3) && (\r\n \r\n \r\n {general.send_email}\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n {t('buttons:publish_assessment')}\r\n \r\n
\r\n \r\n \r\n \r\n this.setState({ tab: 'details' })}\r\n />\r\n \r\n \r\n
\r\n {tab === 'details' && (\r\n \r\n
\r\n {t('details_title')}
\r\n {t('details_subtitle')}
\r\n \r\n {t('labels:check_user')}\r\n
\r\n \r\n }\r\n onCancel={this.closeCheckModal}\r\n footer={[\r\n \r\n \r\n {!_.isEmpty(isNotExist) &&\r\n isNotExist.map((item, index) => (\r\n
\r\n \r\n )}\r\n {!_.isEmpty(isNotInOrg) && (\r\n \r\n {t('labels:user_not_exist')}\r\n
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n \r\n {!_.isEmpty(isNotInOrg) &&\r\n isNotInOrg.map((item, index) => (\r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n {t('labels:user_not_exist_in_org')}\r\n
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('buttons:save_for_later')}\r\n \r\n
\r\n \r\n this.handleCheckUser(eventId)}\r\n >\r\n {t('buttons:publish')}
\r\n \r\n
\r\n {selectedItem && (\r\n \r\n \r\n {general.CANCEL}\r\n \r\n this.handleFileInsert(selectedItem)}\r\n >\r\n {general.INSERT}\r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n
\r\n `\r\n}\r\nlet timeout = null\r\n\r\nconst options = (graphDuration, app, graphEmotionsData) => {\r\n return {\r\n tooltip: {\r\n trigger: 'axis',\r\n axisPointer: {\r\n // 坐标轴指示器，坐标轴触发有效\r\n type: 'none' // 默认为直线，可选为：'line' | 'shadow'\r\n },\r\n // formatter:\r\n // '{a4}: {c4}\r\n ${value[index].seriesName}: ${value[index].data}\r\n
\r\n {a3}: {c3}
{a2}: {c2}
{a1}: {c1}
{a0}: {c0}'\r\n formatter: function(value) {\r\n return `\r\n
\r\n ${element(value, 4)}\r\n ${element(value, 3)}\r\n ${element(value, 2)}\r\n ${element(value, 1)}\r\n ${element(value, 0)}\r\n
`\r\n }\r\n },\r\n legend: {\r\n selectedMode: false,\r\n itemHeight: 24,\r\n data: [\r\n {\r\n name: 'Angry',\r\n icon: 'image:///images/icons/emotions/color/angry.svg'\r\n },\r\n {\r\n name: 'Sad',\r\n icon: 'image:///images/icons/emotions/color/sad.svg'\r\n },\r\n {\r\n name: 'Neutral',\r\n icon: 'image:///images/icons/emotions/color/neutral.svg'\r\n },\r\n {\r\n name: 'Smile',\r\n icon: 'image:///images/icons/emotions/color/smile.svg'\r\n },\r\n {\r\n name: 'Happy',\r\n icon: 'image:///images/icons/emotions/color/happy.svg'\r\n }\r\n ],\r\n bottom: -5\r\n },\r\n grid: {\r\n left: '0%',\r\n // right: '0%',\r\n bottom: '25%',\r\n top: '10%',\r\n containLabel: true\r\n },\r\n xAxis: {\r\n type: 'category',\r\n name: 'Minutes',\r\n data: graphDuration,\r\n boundaryGap: true,\r\n axisTick: {\r\n show: false\r\n // alignWithLabel: true\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: '#DDDDDD'\r\n }\r\n },\r\n triggerEvent: true,\r\n axisLabel: {\r\n show: false,\r\n fontSize: 8,\r\n interval: 5\r\n }\r\n },\r\n yAxis: {\r\n type: 'value',\r\n axisLabel: {\r\n interval: 2,\r\n formatter: (value, index) => {\r\n if (timeout) clearTimeout(timeout)\r\n timeout = setTimeout(() => {\r\n app.yAxisValue = value\r\n }, 500)\r\n return [`{yAxieStyle|${value}}`].join('\\n')\r\n },\r\n // align: 'left',\r\n rich: {\r\n yAxieStyle: {\r\n color: 'black'\r\n }\r\n }\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: '#DDDDDD'\r\n }\r\n }\r\n },\r\n series: [\r\n {\r\n name: 'Happy',\r\n type: 'bar',\r\n stack: 'stack',\r\n itemStyle: {\r\n color: '#3E9CD4'\r\n },\r\n label: {\r\n normal: {\r\n // show: true,\r\n position: 'insideRight'\r\n }\r\n },\r\n data: graphEmotionsData['happy']\r\n },\r\n {\r\n name: 'Smile',\r\n type: 'bar',\r\n stack: 'stack',\r\n itemStyle: {\r\n color: '#00BFE1'\r\n },\r\n label: {\r\n normal: {\r\n // show: true,\r\n position: 'insideRight'\r\n }\r\n },\r\n data: graphEmotionsData['smile']\r\n },\r\n {\r\n name: 'Neutral',\r\n type: 'bar',\r\n stack: 'stack',\r\n itemStyle: {\r\n color: '#A9FAFF'\r\n },\r\n label: {\r\n normal: {\r\n // show: true,\r\n position: 'insideRight'\r\n }\r\n },\r\n data: graphEmotionsData['neutral']\r\n },\r\n {\r\n name: 'Sad',\r\n type: 'bar',\r\n stack: 'stack',\r\n itemStyle: {\r\n color: '#F9F871'\r\n },\r\n label: {\r\n normal: {\r\n // show: true,\r\n position: 'insideRight'\r\n }\r\n },\r\n data: graphEmotionsData['sad']\r\n },\r\n {\r\n name: 'Angry',\r\n type: 'bar',\r\n stack: 'stack',\r\n itemStyle: {\r\n color: '#F9A271'\r\n },\r\n label: {\r\n normal: {\r\n // show: true,\r\n position: 'insideRight'\r\n }\r\n },\r\n data: graphEmotionsData['angry']\r\n }\r\n ]\r\n }\r\n}\r\n\r\nconst reactChartStyles = {\r\n height: '20rem',\r\n margin: 0,\r\n padding: 0,\r\n width: '85rem',\r\n position: 'relative',\r\n left: 0\r\n}\r\n\r\nconst legendStyles = {\r\n width: '850px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n marginTop: '1rem'\r\n}\r\n\r\nexport { options, reactChartStyles, legendStyles }\r\n","import React, { Component } from 'react'\r\nimport className from 'classnames'\r\nimport './Emotions.scss'\r\n\r\nconst EmotionContent = ({ app, data }) => {\r\n const { disabled } = app.state\r\n const { isVoteAble } = app.props\r\n\r\n return (\r\n \r\n app.onClick(data.type)}\r\n >\r\n
\r\n \r\n )\r\n}\r\n\r\nclass Emotions extends Component {\r\n state = {\r\n disabled: null\r\n }\r\n\r\n onClick = type => {\r\n const { onClick, isVoteAble } = this.props\r\n const { disabled } = this.state\r\n if (!isVoteAble) {\r\n return\r\n }\r\n\r\n if (!disabled && onClick) {\r\n onClick(type)\r\n }\r\n }\r\n\r\n render () {\r\n const { translate, emotionsData, totalEmotions } = this.props\r\n return (\r\n \r\n
\r\n {data.value}\r\n \r\n \r\n {translate('labels:overall_emotion')} {totalEmotions}\r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Emotions\r\n","import Emotions from './Emotions'\r\n\r\nexport default Emotions\r\n","/*\r\n * @Author: your name\r\n * @Date: 2019-09-05 15:53:46\r\n * @LastEditTime: 2019-11-21 15:08:28\r\n * @LastEditors: Please set LastEditors\r\n * @Description: In User Settings Edit\r\n * @FilePath: /frontend/src/views/Assessments/View/styled.js\r\n */\r\nimport styled, { keyframes } from 'styled-components'\r\n\r\nimport { styleguide } from '../../../constants'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst Video = styled.div``\r\n\r\nconst Page = styled.div`\r\n width: 100%;\r\n\r\n .ReactVirtualized__Grid {\r\n &.ReactVirtualized__List {\r\n outline: none;\r\n }\r\n }\r\n`\r\nconst RangeSliderContainer = styled.div`\r\n .input-range {\r\n width: ${props => props.width};\r\n height: 13rem;\r\n position: absolute;\r\n bottom: 7.4rem;\r\n left: ${props => props.left};\r\n }\r\n`\r\n\r\nVideo.Media = styled.div`\r\n width: 100%;\r\n height: 38rem;\r\n background-color: ${colors.black};\r\n margin-bottom: 1rem;\r\n position: relative;\r\n`\r\n\r\nVideo.Centering = styled.div`\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n`\r\n\r\nVideo.Live = styled.div`\r\n background-color: ${colors.orange};\r\n border-radius: 2rem;\r\n color: ${colors.white};\r\n display: inline-block;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n padding: 0.3rem 1.3rem;\r\n position: absolute;\r\n top: 1.5rem;\r\n right: 1.5rem;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n z-index: 1;\r\n`\r\n\r\nVideo.Controls = styled.div``\r\n\r\nVideo.Progress = styled.div`\r\n width: 100%;\r\n height: 0.5rem;\r\n background-color: #ddd;\r\n cursor: pointer;\r\n position: relative;\r\n`\r\n\r\nVideo.Progress.Bar = styled.div`\r\n width: ${props => props.position}%;\r\n background-color: #b3b3b3;\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n z-index: 1;\r\n transition: 0.3s;\r\n\r\n &:after {\r\n content: '';\r\n width: 0.1rem;\r\n height: 1.2rem;\r\n border: 0.1rem solid #979797;\r\n background-color: ${colors.white};\r\n cursor: pointer;\r\n position: absolute;\r\n top: -0.3rem;\r\n right: -0.1rem;\r\n }\r\n`\r\n\r\nVideo.Details = styled.div`\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top: 0.5rem;\r\n`\r\n\r\nVideo.Details.Item = styled.div`\r\n font-size: 1.1rem;\r\n`\r\n\r\nconst Lines = styled.div`\r\n width: 100%;\r\n min-height: 15rem;\r\n margin-bottom: 2rem;\r\n position: relative;\r\n`\r\n\r\nLines.Box = styled.div`\r\n margin-top: 1rem;\r\n padding: 1.5rem 0;\r\n`\r\n\r\nLines.Pointer = styled.div`\r\n width: 0.1rem;\r\n height: calc(100% - 2rem);\r\n background-color: #4652e5;\r\n position: absolute;\r\n top: 1rem;\r\n left: ${props => props.position}rem;\r\n z-index: 10;\r\n transition: 0.3s;\r\n`\r\n\r\nconst slideUpFromBottom = ({ beforeRotate, afterRotate }) => keyframes`\r\n \r\n from {\r\n bottom: 0;\r\n opacity: 1;\r\n width: 1.5rem;\r\n transform: rotate(${beforeRotate}deg);\r\n }\r\n\r\n to {\r\n bottom: 100%;\r\n opacity: 0.5;\r\n width: 4rem;\r\n transform: rotate(${afterRotate}deg);\r\n }\r\n`\r\n\r\nconst FloatingContainer = styled.div`\r\n width: 25%;\r\n height: 100%;\r\n display: flex;\r\n align-items: flex-end;\r\n top: 0px;\r\n right: 0;\r\n position: absolute;\r\n`\r\n\r\nconst EmotionRnd = styled.div`\r\n position: absolute;\r\n width: 2rem;\r\n left: ${props => props.position}px;\r\n opacity: 0;\r\n animation: ${props => props.speed}s ease-in 0s 1\r\n ${props => slideUpFromBottom(props)};\r\n img {\r\n width: 100%;\r\n }\r\n`\r\n\r\nexport {\r\n Page,\r\n Video,\r\n Lines,\r\n RangeSliderContainer,\r\n FloatingContainer,\r\n EmotionRnd\r\n}\r\n","import React, { Component } from 'react'\r\nimport ReactPlayer from 'react-player'\r\nimport './Graph.scss'\r\nimport moment from 'moment'\r\nimport 'moment-duration-format'\r\nimport { api } from '../../../../../services'\r\nimport className from 'classnames'\r\n\r\nexport default class Graph extends Component {\r\n state = {\r\n duration: 0,\r\n played: 0,\r\n playedSeconds: 0,\r\n\r\n data: [],\r\n activePoint: null\r\n }\r\n\r\n componentDidMount () {\r\n const { id } = this.props\r\n api.assessments.getEmotionsById(id).then(({ data }) => {\r\n this.setState({\r\n data\r\n })\r\n })\r\n }\r\n\r\n onProgress = state => {\r\n this.setState({\r\n played: state.played,\r\n playedSeconds: state.playedSeconds\r\n })\r\n }\r\n\r\n onDuration = state => {\r\n this.setState({\r\n duration: state\r\n })\r\n }\r\n\r\n render () {\r\n const { link } = this.props\r\n const { played, playedSeconds, duration, data, activePoint } = this.state\r\n\r\n const timeStart = moment\r\n .duration(0, 'seconds')\r\n .format('mm:ss', { trim: false })\r\n const timeEnd = moment\r\n .duration(duration, 'seconds')\r\n .format('mm:ss', { trim: false })\r\n const timePlayed = moment\r\n .duration(playedSeconds, 'seconds')\r\n .format('mm:ss', { trim: false })\r\n\r\n const pointsCount = Math.ceil(duration / 5)\r\n\r\n return (\r\n \r\n {emotionsData &&\r\n emotionsData.map((emotion, index) => (\r\n \r\n ))}\r\n
\r\n \r\n \r\n
\r\n\r\n {duration > 0 && (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n {activePoint.data.emotions[4]}\r\n
\r\n \r\n {activePoint.data.emotions[3]}\r\n
\r\n \r\n {activePoint.data.emotions[2]}\r\n
\r\n \r\n {activePoint.data.emotions[1]}\r\n
\r\n \r\n {activePoint.data.emotions[0]}\r\n
\r\n \r\n \r\n\r\n {[...Array(pointsCount).keys()].map((point, index) => {\r\n const isPoint = data.find(point => point.time === index * 5)\r\n return (\r\n \r\n this.setState({\r\n activePoint: isPoint\r\n ? { x: e.clientX, y: e.clientY, data: isPoint }\r\n : null\r\n })\r\n }\r\n onMouseLeave={() => this.setState({ activePoint: null })}\r\n />\r\n )\r\n })}\r\n
\r\n \r\n )}\r\n\r\n {duration > 0 && data.length > 0 && (\r\n \r\n
\r\n )}\r\n \r\n )\r\n }\r\n}\r\n","import React, { Component, Fragment } from 'react'\r\nimport moment from 'moment'\r\nimport ReactPlayer from 'react-player'\r\nimport 'react-input-range/lib/css/index.css'\r\nimport InputRange from 'react-input-range'\r\nimport ReactEcharts from 'echarts-for-react'\r\nimport _ from 'lodash'\r\nimport { Tabs, Alert, Statistic } from 'antd'\r\nimport { config, general } from '../../../constants'\r\nimport { TopPageLink, Chat, Spinner, Reviews } from '../../../components'\r\nimport { options, reactChartStyles, legendStyles } from './ChartOptions'\r\nimport { Emotions } from './components'\r\nimport { api } from '../../../services'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { RangeSliderContainer, FloatingContainer, EmotionRnd } from './styled'\r\nimport './view.scss'\r\n\r\nconst { Countdown } = Statistic\r\n\r\nconst statuses = {\r\n NOT_STARTED: 'NOT_STARTED',\r\n RUNNING: 'RUNNING',\r\n STOPPED: 'STOPPED',\r\n FINISHED: 'FINISHED'\r\n}\r\n\r\nconst assessmentPrefix = {\r\n sendMessage: 'sendMessage',\r\n startStream: 'startStream',\r\n stopStream: 'stopStream',\r\n historyChannel: 'historyChannel',\r\n sendEmotion: 'sendEmotion',\r\n emotion: 'emotion'\r\n}\r\n\r\nlet onEvents = null\r\n\r\nclass View extends Component {\r\n socket = null\r\n yAxisValue = null\r\n legendColor = ['#F9A271', '#F9F871', '#A9FAFF', '#00BFE1', '#3E9CD4']\r\n state = {\r\n status: statuses.NOT_STARTED,\r\n messages: [],\r\n isFetching: true,\r\n assessment: null,\r\n userId: null,\r\n isNoProfile: false,\r\n isLoading: true,\r\n isStreaming: false,\r\n socketConnected: false,\r\n currentPlayTime: 0,\r\n videoDuration: 0,\r\n isEnd: false,\r\n graphEmotionsData: [],\r\n floatingEmotionsList: [],\r\n pollValues: {\r\n result: [\r\n {\r\n key: '0',\r\n value: 0\r\n }\r\n ]\r\n },\r\n isRefresh: false,\r\n isScrollBottom: true,\r\n isChatAble: false,\r\n countDown: false,\r\n totalEmotions: 0,\r\n rawEmotions: null,\r\n sendToSocket: true,\r\n emotionsData: [\r\n {\r\n type: 1,\r\n name: 'angry',\r\n value: 0\r\n },\r\n {\r\n type: 2,\r\n name: 'sad',\r\n value: 0\r\n },\r\n {\r\n type: 3,\r\n name: 'neutral',\r\n value: 0\r\n },\r\n {\r\n type: 4,\r\n name: 'smile',\r\n value: 0\r\n },\r\n {\r\n type: 5,\r\n name: 'happy',\r\n value: 0\r\n }\r\n ]\r\n }\r\n\r\n setPlayerRef = node => {\r\n this.playerRef = node\r\n }\r\n\r\n componentDidMount() {\r\n const id = this.props.match.params.id\r\n if (id) {\r\n this.interval = setInterval(() => {\r\n this.handleShowChat()\r\n }, 10000)\r\n this.getAssessmentById(id)\r\n this.getEmotionsById(id)\r\n onEvents = {\r\n click: this.onChartClick,\r\n legendselectchanged: {}\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.stopStream()\r\n clearInterval(this.interval)\r\n if (this.player) {\r\n this.player.dispose()\r\n }\r\n }\r\n\r\n handleChatAble = ({ start_date_time: startDataTime }) => {\r\n const newTime = moment(startDataTime).format('LLLL')\r\n const diffMinutes = moment().diff(newTime, 'minutes')\r\n return diffMinutes >= -10\r\n }\r\n\r\n handleVoteAble = ({\r\n start_date_time: startDataTime,\r\n duration,\r\n is_finished,\r\n host_id\r\n }) => {\r\n const { user } = this.props\r\n if (host_id === user.info.id) {\r\n return false\r\n } else {\r\n if (is_finished) {\r\n return !is_finished\r\n }\r\n const newTime = moment(startDataTime).format('LLLL')\r\n const diffMinutes = moment().diff(newTime, 'minutes')\r\n return diffMinutes >= 0 && diffMinutes <= duration\r\n }\r\n }\r\n\r\n onChartClick = (...params) => {\r\n const { spaceGraphValue, secondArray } = this.state\r\n const currentChartClick = _.filter(\r\n secondArray,\r\n (item, index) => index === params[0].dataIndex\r\n )\r\n this.setState({\r\n currentPlayTime: this.getscData(currentChartClick, spaceGraphValue)\r\n })\r\n\r\n this.playerRef.seekTo(this.getscData(currentChartClick, spaceGraphValue))\r\n }\r\n\r\n getAssessmentById = id => {\r\n const { viewAssessment } = this.props\r\n api.assessments\r\n .getById(id)\r\n .then(({ data }) => {\r\n this.setState({\r\n assessment: data,\r\n isLoading: false,\r\n isChatAble: this.handleChatAble(data),\r\n isVoteAble: this.handleVoteAble(data)\r\n })\r\n this.getUserInfo(data)\r\n data && viewAssessment(data.id)\r\n })\r\n .catch(() => {\r\n this.setState({\r\n isLoading: false\r\n })\r\n })\r\n }\r\n\r\n getEmotionsById = id => {\r\n const { emotionsData } = this.state\r\n api.assessments.getEmotionsById(id).then(({ data: { messages } }) => {\r\n const emotionsContents = _.map(messages, emo => emo.content)\r\n const groupEmotions = _.groupBy(emotionsContents)\r\n if (groupEmotions) {\r\n _.each(groupEmotions, (group, index) => {\r\n emotionsData[index - 1].value = group.length\r\n })\r\n }\r\n this.setState({\r\n emotionsData,\r\n rawEmotions: messages,\r\n totalEmotions: emotionsContents.length\r\n })\r\n })\r\n }\r\n\r\n getUserInfo = assessment => {\r\n api.user\r\n .getUser()\r\n .then(response => {\r\n const { id: userId } = response\r\n this.setState(\r\n {\r\n userId\r\n },\r\n () => {\r\n this.initSocket(userId, assessment)\r\n }\r\n )\r\n })\r\n .catch(error => console.log('error', error))\r\n }\r\n\r\n initSocket = (userId, assessmentDetail) => {\r\n const id = this.props.match.params.id\r\n const { user } = this.props\r\n const user_id = user.info.id || userId\r\n\r\n this.socket = new window.WebSocket(\r\n `${config.socketURL}?channel_type=ASSESSMENT&channel_id=${id}&user_id=${user_id}`\r\n )\r\n\r\n this.socket.onopen = () => {\r\n this.setState({\r\n socketConnected: true\r\n })\r\n this.getChatHistory()\r\n }\r\n\r\n this.socket.onmessage = assessment => {\r\n const { emotionsData, totalEmotions } = this.state\r\n\r\n const data = JSON.parse(assessment.data)\r\n\r\n if (data.messages) {\r\n _.each(data.messages, item => {\r\n item.isReadMore = item.content && item.content.length >= 200\r\n })\r\n this.setState(state => ({\r\n messages: data.messages\r\n }))\r\n }\r\n\r\n if (\r\n data.event === assessmentPrefix.sendEmotion &&\r\n data.channel_id === id\r\n ) {\r\n _.each(emotionsData, item => {\r\n if (item.type === data.content) {\r\n item.value = item.value + 1\r\n }\r\n })\r\n if (user_id !== data.user_id) {\r\n this.addEmojiToList(data.content)\r\n }\r\n this.setState(state => ({\r\n emotionsData,\r\n totalEmotions: totalEmotions + 1\r\n }))\r\n }\r\n\r\n if (\r\n data.event === assessmentPrefix.sendMessage &&\r\n data.channel_id === id\r\n ) {\r\n if (data.content) {\r\n data.isReadMore = data.content.length >= 200\r\n }\r\n this.setState(state => ({\r\n messages: [...state.messages, data]\r\n }))\r\n }\r\n\r\n if (\r\n data.event === assessmentPrefix.startStream &&\r\n data.channel_id === id\r\n ) {\r\n this.initStream()\r\n }\r\n\r\n if (\r\n data.event === assessmentPrefix.stopStream &&\r\n data.channel_id === id\r\n ) {\r\n this.stopStream()\r\n window.location.reload()\r\n }\r\n\r\n if (\r\n data.event === assessmentPrefix.historyChannel &&\r\n data.channel_id === id\r\n ) {\r\n if (data.liveStatus === statuses.NOT_STARTED) {\r\n this.setState({\r\n liveStatus: statuses.NOT_STARTED\r\n })\r\n }\r\n\r\n if (data.liveStatus === statuses.RUNNING) {\r\n if (!assessmentDetail.is_finished) {\r\n this.initStream()\r\n }\r\n }\r\n\r\n if (data.liveStatus === statuses.STOPPED) {\r\n this.stopStream()\r\n }\r\n }\r\n }\r\n\r\n this.socket.onerror = error => {\r\n console.log('Error ' + error.message)\r\n }\r\n }\r\n\r\n getChatHistory = () => {\r\n const id = this.props.match.params.id\r\n\r\n this.socket.send(\r\n JSON.stringify({\r\n action: assessmentPrefix.historyChannel,\r\n channel_id: id,\r\n channel_type: 'ASSESSMENT'\r\n })\r\n )\r\n }\r\n\r\n clearAlert = () => {\r\n this.setState({\r\n isNoProfile: false\r\n })\r\n }\r\n\r\n sendMessage = content => {\r\n const {\r\n user: { info }\r\n } = this.props\r\n\r\n if (!info.name) {\r\n this.setState(\r\n {\r\n isNoProfile: true\r\n },\r\n () => {\r\n setTimeout(() => {\r\n if (this.state.isNoProfile) {\r\n this.clearAlert()\r\n }\r\n }, 5000)\r\n }\r\n )\r\n return\r\n }\r\n const { userId } = this.state\r\n const id = this.props.match.params.id\r\n const user_id = info.id || userId\r\n\r\n this.socket.send(\r\n JSON.stringify({\r\n action: assessmentPrefix.sendMessage,\r\n channel_type: 'ASSESSMENT',\r\n channel_id: id,\r\n user_id,\r\n user_name: info.name,\r\n time: 0,\r\n content\r\n })\r\n )\r\n }\r\n\r\n stopStream = () => {\r\n const myPlayer = window.WowzaPlayer\r\n ? window.WowzaPlayer.get('stream')\r\n : null\r\n\r\n if (myPlayer !== null) {\r\n myPlayer.finish()\r\n myPlayer.destroy()\r\n\r\n this.setState({\r\n liveStatus: statuses.STOPPED,\r\n isStreaming: false\r\n })\r\n } else {\r\n this.setState({\r\n liveStatus: statuses.STOPPED,\r\n isStreaming: false\r\n })\r\n }\r\n }\r\n\r\n initStream = () => {\r\n // const {\r\n // match: { params }\r\n // } = this.props\r\n const { assessment } = this.state\r\n const streamUrl = assessment.stream\r\n ? assessment.stream.player_hls_playback_url\r\n : ''\r\n\r\n this.setState({\r\n liveStatus: statuses.RUNNING,\r\n isStreaming: true\r\n })\r\n\r\n window.WowzaPlayer.create('stream', {\r\n license: config.wowza.license,\r\n sourceURL: streamUrl,\r\n autoPlay: true,\r\n mute: false,\r\n loop: false,\r\n audioOnly: false,\r\n uiShowQuickRewind: true,\r\n uiQuickRewindSeconds: '30',\r\n withCredentials: false\r\n })\r\n }\r\n addEmojiToList = data => {\r\n const rotateValue = [0, 360]\r\n const randomValue = maxValue =>\r\n Math.floor(Math.random() * Math.floor(maxValue))\r\n const floatingEmotionsList = {\r\n content: data,\r\n beforeRotate: rotateValue[randomValue(2)],\r\n afterRotate: rotateValue[randomValue(2)],\r\n speed: Math.floor(Math.random() * 5) + 3,\r\n position: randomValue(200)\r\n }\r\n this.setState({\r\n floatingEmotionsList: [\r\n ...this.state.floatingEmotionsList,\r\n floatingEmotionsList\r\n ]\r\n })\r\n }\r\n sendEmotion = kind => {\r\n const { user } = this.props\r\n const { userId } = this.state\r\n const id = this.props.match.params.id\r\n const user_id = user.info.id || userId\r\n const user_name = user.info.name || user.info.username\r\n this.addEmojiToList(kind)\r\n\r\n if (!this.state.sendToSocket) {\r\n return\r\n }\r\n\r\n this.setState(\r\n {\r\n sendToSocket: false\r\n },\r\n () => {\r\n this.socket.send(\r\n JSON.stringify({\r\n action: assessmentPrefix.emotion,\r\n channel_type: 'ASSESSMENT',\r\n channel_id: id,\r\n user_name,\r\n user_id,\r\n kind\r\n })\r\n )\r\n }\r\n )\r\n\r\n setTimeout(() => {\r\n this.setState({\r\n sendToSocket: true\r\n })\r\n }, 15000)\r\n }\r\n\r\n getscData = (newObj, value) => {\r\n if (newObj < value) {\r\n return 0\r\n }\r\n if (newObj >= value) {\r\n const result = newObj - value\r\n return result\r\n }\r\n }\r\n\r\n handleVideoDuration = e => {\r\n const value = e / 30\r\n const tempArray = []\r\n const secondArray = []\r\n for (let i = 1; i <= 30; i++) {\r\n tempArray.push(i)\r\n }\r\n const graphDuration = _.map(tempArray, (obj, index) => {\r\n const newObj = (index + 1) * value.toFixed(1)\r\n const scData = this.getscData(newObj, value)\r\n secondArray.push(newObj)\r\n return this.timeConvert(scData)\r\n })\r\n\r\n this.setState(\r\n {\r\n videoDuration: e || 0,\r\n graphDuration,\r\n secondArray,\r\n spaceGraphValue: value\r\n },\r\n () => {\r\n this.handleGraphHover(secondArray)\r\n }\r\n )\r\n }\r\n\r\n handleGraphHover = graphDataList => {\r\n const { rawEmotions } = this.state\r\n let tempEmotions = _.cloneDeep(rawEmotions)\r\n let result = []\r\n _.each(graphDataList, (graph, gIndex) => {\r\n _.each(tempEmotions, (emo, eIndex) => {\r\n if (emo.time <= graph) {\r\n result.push({\r\n content: emo.content,\r\n graphIndex: gIndex,\r\n time: emo.time\r\n })\r\n tempEmotions = _.filter(tempEmotions, item => item.time > graph)\r\n }\r\n })\r\n })\r\n\r\n this.filterGraphData(result)\r\n }\r\n insertDataIntoIndexByType = (data, type) => {\r\n if (data[type]) {\r\n const result = []\r\n for (let i = 0; i < 30; i++) {\r\n const value = _.filter(data[type], item => item.graphIndex === i)\r\n result.push(value.length)\r\n }\r\n return result\r\n } else {\r\n const defaultData = []\r\n for (let i = 0; i < 30; i++) {\r\n defaultData.push(0)\r\n }\r\n return defaultData\r\n }\r\n }\r\n getType = value => {\r\n let type = ''\r\n switch (`${value}`) {\r\n case '1':\r\n type = 'angry'\r\n break\r\n case '2':\r\n type = 'sad'\r\n break\r\n case '3':\r\n type = 'neutral'\r\n break\r\n case '4':\r\n type = 'smile'\r\n break\r\n case '5':\r\n type = 'happy'\r\n break\r\n default:\r\n break\r\n }\r\n return type\r\n }\r\n filterGraphData = data => {\r\n const tempEmotionsData = _.groupBy(data, 'content')\r\n const result = {\r\n angry: this.insertDataIntoIndexByType(tempEmotionsData, '1'),\r\n sad: this.insertDataIntoIndexByType(tempEmotionsData, '2'),\r\n neutral: this.insertDataIntoIndexByType(tempEmotionsData, '3'),\r\n smile: this.insertDataIntoIndexByType(tempEmotionsData, '4'),\r\n happy: this.insertDataIntoIndexByType(tempEmotionsData, '5')\r\n }\r\n\r\n this.setState({\r\n graphEmotionsData: result\r\n })\r\n }\r\n\r\n timeConvert = value => {\r\n const time = Math.floor(value)\r\n const minutes = Math.floor(time / 60)\r\n let second = `${time - minutes * 60}`\r\n if (second < 10) {\r\n second = `0${second}`\r\n }\r\n if (second === '60') {\r\n second = '00'\r\n }\r\n\r\n return minutes + ':' + second\r\n }\r\n\r\n handleVideoProgress = e => {\r\n this.setState({\r\n currentPlayTime: e.playedSeconds\r\n })\r\n }\r\n\r\n checkPastVideo = assessment => {\r\n if (assessment.is_live) {\r\n return false\r\n } else if (assessment.video_links && assessment.video_links.length > 0) {\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n handlSeekOrEnd = (isEnd = false) => {\r\n if (isEnd) {\r\n this.setState({\r\n isEnd: true\r\n })\r\n } else {\r\n this.setState({\r\n isEnd: false\r\n })\r\n }\r\n }\r\n\r\n handleScroll = e => {\r\n const isScrollBottom =\r\n e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight\r\n this.setState({\r\n isScrollBottom\r\n })\r\n }\r\n\r\n onCountDownFinish = () => {\r\n this.setState(\r\n {\r\n isChatAble: true\r\n },\r\n () => {\r\n window.location.reload()\r\n }\r\n )\r\n }\r\n\r\n handleShowChat = () => {\r\n const { assessment } = this.state\r\n if (!assessment) return\r\n\r\n const now = new Date()\r\n const timeTillDate = moment(assessment.start_date_time).diff(now, 'minute')\r\n if (timeTillDate <= 10) {\r\n this.setState({\r\n isChatAble: true\r\n })\r\n }\r\n }\r\n displaySchedule = ({ start_date_time: startDataTime }) => {\r\n if (!startDataTime) return\r\n const assessmentStartTime = moment(startDataTime).format('lll')\r\n const format = moment(assessmentStartTime).format('DD MMM YYYY, HH: mm')\r\n return `Schedule for ${format}`\r\n }\r\n\r\n displayCountdownTime = ({ start_date_time: startDataTime }) => {\r\n if (!startDataTime) return false\r\n const now = new Date()\r\n const timeTillDate = moment(startDataTime).diff(now, 'minute')\r\n\r\n if (timeTillDate <= 1440) {\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n handleReadmore = (e, index) => {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n const { messages, isRefresh } = this.state\r\n messages[index].isReadMore = !messages[index].isReadMore\r\n this.setState({\r\n messages,\r\n isRefresh: !isRefresh\r\n })\r\n }\r\n\r\n getRangeWidth = () => {\r\n if (!this.yAxisValue) {\r\n return '77rem'\r\n }\r\n if (this.yAxisValue <= 3) {\r\n return '74.4rem'\r\n }\r\n const digit = `${this.yAxisValue}`.length - 1\r\n const rangeLeft = 75.6 - 0.8 * digit\r\n return `${rangeLeft}rem`\r\n }\r\n\r\n getRangeLeft = () => {\r\n if (!this.yAxisValue) {\r\n return '0rem'\r\n }\r\n if (this.yAxisValue <= 3) {\r\n return '2.4rem'\r\n }\r\n const digit = `${this.yAxisValue}`.length - 1\r\n const rangeLeft = 1.4 + 0.7 * digit\r\n return `${rangeLeft}rem`\r\n }\r\n\r\n render() {\r\n const {\r\n assessment,\r\n isLoading,\r\n messages,\r\n // pollValues,\r\n isStreaming,\r\n isNoProfile,\r\n currentPlayTime,\r\n isEnd,\r\n isRefresh,\r\n isScrollBottom,\r\n isChatAble,\r\n isVoteAble,\r\n videoDuration,\r\n emotionsData,\r\n totalEmotions,\r\n graphDuration,\r\n socketConnected,\r\n graphEmotionsData,\r\n floatingEmotionsList\r\n } = this.state\r\n const { t } = this.props\r\n const id = this.props.match.params.id\r\n if (isLoading || !socketConnected) {\r\n return Overall experience:
\r\n \r\n
\r\n \r\n \r\n {data.reduce((s, i) => {\r\n return i.emotions[0] + s\r\n }, 0)}\r\n
\r\n \r\n \r\n {data.reduce((s, i) => {\r\n return i.emotions[1] + s\r\n }, 0)}\r\n
\r\n \r\n \r\n {data.reduce((s, i) => {\r\n return i.emotions[2] + s\r\n }, 0)}\r\n
\r\n \r\n \r\n {data.reduce((s, i) => {\r\n return i.emotions[3] + s\r\n }, 0)}\r\n
\r\n \r\n \r\n {data.reduce((s, i) => {\r\n return i.emotions[4] + s\r\n }, 0)}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n {isStreaming ? (\r\n
\r\n )}\r\n \r\n \r\n\r\n {floatingEmotionsList && (\r\n \r\n {floatingEmotionsList.map((item, emoIndex) => {\r\n return (\r\n \r\n \r\n )}\r\n {/*
\r\n ) : (\r\n Live
*/}\r\n \r\n {/* if past live event have streaming videos will display instead of thumnail image */}\r\n {this.checkPastVideo(assessment) && (\r\n {\r\n this.setPlayerRef(rp)\r\n }}\r\n url={\r\n assessment.video_links\r\n ? _.head(assessment.video_links).link\r\n : ''\r\n }\r\n // url='https://www.youtube.com/watch?v=LNKdQyXhvh0'\r\n width=\"82rem\"\r\n height=\"45rem\"\r\n onDuration={e => {\r\n this.handleVideoDuration(e)\r\n }}\r\n onProgress={e => {\r\n this.handleVideoProgress(e)\r\n }}\r\n onEnded={() => {\r\n this.handlSeekOrEnd(true)\r\n }}\r\n onSeek={() => {\r\n this.handlSeekOrEnd(false)\r\n }}\r\n youtubeConfig={{ playerVars: { showinfo: 1 } }}\r\n controls\r\n />\r\n )}\r\n {!this.checkPastVideo(assessment) && (\r\n \r\n {assessment.start_date_time && (\r\n
\r\n )}\r\n \r\n {this.displaySchedule(assessment)}\r\n
\r\n )}\r\n {this.displayCountdownTime(assessment) && (\r\n \r\n {assessment.is_finished &&\r\n t('assessments:finished')}\r\n {!assessment.is_finished &&\r\n t('assessments:countdown')}\r\n {!assessment.is_finished && (\r\n
\r\n )}\r\n \r\n
\r\n\r\n \r\n
\r\n {/* {assessment.title}
\r\n \r\n
*/}\r\n\r\n \r\n
\r\n 134 Watching Now
\r\n \r\n {\r\n \r\n this.timeConvert(value)}\r\n disabled\r\n draggableTrack={false}\r\n onChange={value => {\r\n this.setState({\r\n currentPlayTime: value\r\n })\r\n this.playerRef.seekTo(value)\r\n }}\r\n />\r\n \r\n }\r\n {\r\n this.echartsReactRef = e\r\n }}\r\n option={options(\r\n graphDuration,\r\n this,\r\n graphEmotionsData\r\n )}\r\n onEvents={onEvents}\r\n style={reactChartStyles}\r\n />\r\n
\r\n )}\r\n \r\n {this.legendColor.map((color, index) => (\r\n
\r\n \r\n \r\n \r\n {assessment.host && (\r\n \r\n \r\n {assessment.description}\r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {assessment.host.username}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {/*\r\n \r\n {general.no_profile}\r\n
\r\n )}\r\n \r\n
*/}\r\n \r\n \r\n
\r\n `\r\n}\r\nlet timeout = null\r\n\r\nconst options = (graphDuration, app, graphEmotionsData) => {\r\n return {\r\n tooltip: {\r\n trigger: 'axis',\r\n axisPointer: {\r\n // 坐标轴指示器，坐标轴触发有效\r\n type: 'none' // 默认为直线，可选为：'line' | 'shadow'\r\n },\r\n // formatter:\r\n // '{a4}: {c4}\r\n ${value[index].seriesName}: ${value[index].data}\r\n
\r\n {a3}: {c3}
{a2}: {c2}
{a1}: {c1}
{a0}: {c0}'\r\n formatter: function(value) {\r\n return `\r\n
\r\n ${element(value, 4)}\r\n ${element(value, 3)}\r\n ${element(value, 2)}\r\n ${element(value, 1)}\r\n ${element(value, 0)}\r\n
`\r\n }\r\n },\r\n legend: {\r\n selectedMode: false,\r\n itemHeight: 24,\r\n data: [\r\n {\r\n name: 'Angry',\r\n icon: 'image:///images/icons/emotions/color/angry.svg'\r\n },\r\n {\r\n name: 'Sad',\r\n icon: 'image:///images/icons/emotions/color/sad.svg'\r\n },\r\n {\r\n name: 'Neutral',\r\n icon: 'image:///images/icons/emotions/color/neutral.svg'\r\n },\r\n {\r\n name: 'Smile',\r\n icon: 'image:///images/icons/emotions/color/smile.svg'\r\n },\r\n {\r\n name: 'Happy',\r\n icon: 'image:///images/icons/emotions/color/happy.svg'\r\n }\r\n ],\r\n bottom: -5\r\n },\r\n grid: {\r\n left: '0%',\r\n // right: '0%',\r\n bottom: '25%',\r\n top: '10%',\r\n containLabel: true\r\n },\r\n xAxis: {\r\n type: 'category',\r\n name: 'Min',\r\n data: graphDuration,\r\n boundaryGap: true,\r\n axisTick: {\r\n show: false\r\n // alignWithLabel: true\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: '#DDDDDD'\r\n }\r\n },\r\n triggerEvent: true,\r\n axisLabel: {\r\n show: false,\r\n fontSize: 8,\r\n interval: 5\r\n }\r\n },\r\n yAxis: {\r\n type: 'value',\r\n axisLabel: {\r\n interval: 2,\r\n formatter: (value, index) => {\r\n if (timeout) clearTimeout(timeout)\r\n timeout = setTimeout(() => {\r\n app.yAxisValue = value\r\n }, 500)\r\n return [`{yAxieStyle|${value}}`].join('\\n')\r\n },\r\n // align: 'left',\r\n rich: {\r\n yAxieStyle: {\r\n color: 'black'\r\n }\r\n }\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: '#DDDDDD'\r\n }\r\n }\r\n },\r\n series: [\r\n {\r\n name: 'Happy',\r\n type: 'bar',\r\n stack: 'stack',\r\n itemStyle: {\r\n color: '#3E9CD4'\r\n },\r\n label: {\r\n normal: {\r\n // show: true,\r\n position: 'insideRight'\r\n }\r\n },\r\n data: graphEmotionsData['happy']\r\n },\r\n {\r\n name: 'Smile',\r\n type: 'bar',\r\n stack: 'stack',\r\n itemStyle: {\r\n color: '#00BFE1'\r\n },\r\n label: {\r\n normal: {\r\n // show: true,\r\n position: 'insideRight'\r\n }\r\n },\r\n data: graphEmotionsData['smile']\r\n },\r\n {\r\n name: 'Neutral',\r\n type: 'bar',\r\n stack: 'stack',\r\n itemStyle: {\r\n color: '#A9FAFF'\r\n },\r\n label: {\r\n normal: {\r\n // show: true,\r\n position: 'insideRight'\r\n }\r\n },\r\n data: graphEmotionsData['neutral']\r\n },\r\n {\r\n name: 'Sad',\r\n type: 'bar',\r\n stack: 'stack',\r\n itemStyle: {\r\n color: '#F9F871'\r\n },\r\n label: {\r\n normal: {\r\n // show: true,\r\n position: 'insideRight'\r\n }\r\n },\r\n data: graphEmotionsData['sad']\r\n },\r\n {\r\n name: 'Angry',\r\n type: 'bar',\r\n stack: 'stack',\r\n itemStyle: {\r\n color: '#F9A271'\r\n },\r\n label: {\r\n normal: {\r\n // show: true,\r\n position: 'insideRight'\r\n }\r\n },\r\n data: graphEmotionsData['angry']\r\n }\r\n ]\r\n }\r\n}\r\n\r\nconst reactChartStyles = {\r\n height: '20rem',\r\n margin: 0,\r\n padding: 0,\r\n width: '85rem',\r\n position: 'relative',\r\n left: 0\r\n}\r\n\r\nconst legendStyles = {\r\n width: '100vw',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n marginTop: '1rem'\r\n}\r\n\r\nexport { options, reactChartStyles, legendStyles }\r\n","import React, { Component } from 'react'\r\nimport className from 'classnames'\r\nimport './Emotions.scss'\r\n\r\n// const emotionTypes = [\r\n// {\r\n// type: 1,\r\n// name: 'angry'\r\n// },\r\n// {\r\n// type: 2,\r\n// name: 'sad'\r\n// },\r\n// {\r\n// type: 3,\r\n// name: 'neutral'\r\n// },\r\n// {\r\n// type: 4,\r\n// name: 'smile'\r\n// },\r\n// {\r\n// type: 5,\r\n// name: 'happy'\r\n// }\r\n// ]\r\n\r\nconst EmotionContent = ({ app, data }) => {\r\n const { disabled } = app.state\r\n const { isVoteAble } = app.props\r\n\r\n return (\r\n \r\n app.onClick(data.type)}\r\n >\r\n
\r\n \r\n )\r\n}\r\n\r\nclass Emotions extends Component {\r\n state = {\r\n disabled: null\r\n }\r\n\r\n onClick = type => {\r\n const { onClick, isVoteAble } = this.props\r\n const { disabled } = this.state\r\n if (!isVoteAble) {\r\n return\r\n }\r\n\r\n if (!disabled && onClick) {\r\n onClick(type)\r\n }\r\n }\r\n\r\n render () {\r\n const { translate, emotionsData, totalEmotions } = this.props\r\n return (\r\n \r\n
\r\n {data.value}\r\n \r\n \r\n {translate('labels:overall_emotion')} {totalEmotions}\r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Emotions\r\n","import Emotions from './Emotions'\r\n\r\nexport default Emotions\r\n","/*\r\n * @Author: your name\r\n * @Date: 2019-09-05 15:53:46\r\n * @LastEditTime: 2019-11-21 15:08:28\r\n * @LastEditors: Please set LastEditors\r\n * @Description: In User Settings Edit\r\n * @FilePath: /frontend/src/views/Assessments/View/styled.js\r\n */\r\nimport styled, { keyframes } from 'styled-components'\r\n\r\nimport { styleguide } from '../../../constants'\r\n\r\nconst { colors } = styleguide\r\n\r\nconst Video = styled.div``\r\n\r\nconst Page = styled.div`\r\n width: 100%;\r\n\r\n .ReactVirtualized__Grid {\r\n &.ReactVirtualized__List {\r\n outline: none;\r\n }\r\n }\r\n`\r\nconst RangeSliderContainer = styled.div`\r\n .input-range {\r\n width: ${props => props.width};\r\n height: 13rem;\r\n position: absolute;\r\n bottom: 7.4rem;\r\n left: ${props => props.left};\r\n }\r\n`\r\n\r\nVideo.Media = styled.div`\r\n width: 100%;\r\n height: 38rem;\r\n background-color: ${colors.black};\r\n margin-bottom: 1rem;\r\n position: relative;\r\n`\r\n\r\nVideo.Centering = styled.div`\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n`\r\n\r\nVideo.Live = styled.div`\r\n background-color: ${colors.orange};\r\n border-radius: 2rem;\r\n color: ${colors.white};\r\n display: inline-block;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n padding: 0.3rem 1.3rem;\r\n position: absolute;\r\n top: 1.5rem;\r\n right: 1.5rem;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n z-index: 1;\r\n`\r\n\r\nVideo.Controls = styled.div``\r\n\r\nVideo.Progress = styled.div`\r\n width: 100%;\r\n height: 0.5rem;\r\n background-color: #ddd;\r\n cursor: pointer;\r\n position: relative;\r\n`\r\n\r\nVideo.Progress.Bar = styled.div`\r\n width: ${props => props.position}%;\r\n background-color: #b3b3b3;\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n z-index: 1;\r\n transition: 0.3s;\r\n\r\n &:after {\r\n content: '';\r\n width: 0.1rem;\r\n height: 1.2rem;\r\n border: 0.1rem solid #979797;\r\n background-color: ${colors.white};\r\n cursor: pointer;\r\n position: absolute;\r\n top: -0.3rem;\r\n right: -0.1rem;\r\n }\r\n`\r\n\r\nVideo.Details = styled.div`\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top: 0.5rem;\r\n`\r\n\r\nVideo.Details.Item = styled.div`\r\n font-size: 1.1rem;\r\n`\r\n\r\nconst Lines = styled.div`\r\n width: 100%;\r\n min-height: 15rem;\r\n margin-bottom: 2rem;\r\n position: relative;\r\n`\r\n\r\nLines.Box = styled.div`\r\n margin-top: 1rem;\r\n padding: 1.5rem 0;\r\n`\r\n\r\nLines.Pointer = styled.div`\r\n width: 0.1rem;\r\n height: calc(100% - 2rem);\r\n background-color: #4652e5;\r\n position: absolute;\r\n top: 1rem;\r\n left: ${props => props.position}rem;\r\n z-index: 10;\r\n transition: 0.3s;\r\n`\r\n\r\nconst slideUpFromBottom = ({ beforeRotate, afterRotate }) => keyframes`\r\n \r\n from {\r\n bottom: 0;\r\n opacity: 1;\r\n width: 1.5rem;\r\n transform: rotate(${beforeRotate}deg);\r\n }\r\n\r\n to {\r\n bottom: 100%;\r\n opacity: 0.5;\r\n width: 4rem;\r\n transform: rotate(${afterRotate}deg);\r\n }\r\n`\r\n\r\nconst FloatingContainer = styled.div`\r\n width: 25%;\r\n height: 100%;\r\n display: flex;\r\n align-items: flex-end;\r\n top: 0px;\r\n right: 0;\r\n position: absolute;\r\n`\r\n\r\nconst EmotionRnd = styled.div`\r\n position: absolute;\r\n width: 2rem;\r\n left: ${props => props.position}px;\r\n opacity: 0;\r\n animation: ${props => props.speed}s ease-in 0s 1\r\n ${props => slideUpFromBottom(props)};\r\n img {\r\n width: 100%;\r\n }\r\n`\r\n\r\nexport {\r\n Page,\r\n Video,\r\n Lines,\r\n RangeSliderContainer,\r\n FloatingContainer,\r\n EmotionRnd\r\n}\r\n","import React, { Component } from 'react'\r\nimport ReactPlayer from 'react-player'\r\nimport './Graph.scss'\r\nimport moment from 'moment'\r\nimport 'moment-duration-format'\r\nimport { api } from '../../../../../services'\r\nimport className from 'classnames'\r\n\r\nexport default class Graph extends Component {\r\n state = {\r\n duration: 0,\r\n played: 0,\r\n playedSeconds: 0,\r\n\r\n data: [],\r\n activePoint: null\r\n }\r\n\r\n componentDidMount () {\r\n const { id } = this.props\r\n api.assessments.getEmotionsById(id).then(({ data }) => {\r\n this.setState({\r\n data\r\n })\r\n })\r\n }\r\n\r\n onProgress = state => {\r\n this.setState({\r\n played: state.played,\r\n playedSeconds: state.playedSeconds\r\n })\r\n }\r\n\r\n onDuration = state => {\r\n this.setState({\r\n duration: state\r\n })\r\n }\r\n\r\n render () {\r\n const { link } = this.props\r\n const { played, playedSeconds, duration, data, activePoint } = this.state\r\n\r\n const timeStart = moment\r\n .duration(0, 'seconds')\r\n .format('mm:ss', { trim: false })\r\n const timeEnd = moment\r\n .duration(duration, 'seconds')\r\n .format('mm:ss', { trim: false })\r\n const timePlayed = moment\r\n .duration(playedSeconds, 'seconds')\r\n .format('mm:ss', { trim: false })\r\n\r\n const pointsCount = Math.ceil(duration / 5)\r\n\r\n return (\r\n \r\n {emotionsData &&\r\n emotionsData.map((emotion, index) => (\r\n \r\n ))}\r\n
\r\n \r\n \r\n
\r\n\r\n {duration > 0 && (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n {activePoint.data.emotions[4]}\r\n
\r\n \r\n {activePoint.data.emotions[3]}\r\n
\r\n \r\n {activePoint.data.emotions[2]}\r\n
\r\n \r\n {activePoint.data.emotions[1]}\r\n
\r\n \r\n {activePoint.data.emotions[0]}\r\n
\r\n \r\n \r\n\r\n {[...Array(pointsCount).keys()].map((point, index) => {\r\n const isPoint = data.find(point => point.time === index * 5)\r\n return (\r\n \r\n this.setState({\r\n activePoint: isPoint\r\n ? { x: e.clientX, y: e.clientY, data: isPoint }\r\n : null\r\n })\r\n }\r\n onMouseLeave={() => this.setState({ activePoint: null })}\r\n />\r\n )\r\n })}\r\n
\r\n \r\n )}\r\n\r\n {duration > 0 && data.length > 0 && (\r\n \r\n
\r\n )}\r\n \r\n )\r\n }\r\n}\r\n","import React, { Component, Fragment } from 'react'\r\nimport { Auth } from 'aws-amplify'\r\nimport moment from 'moment'\r\nimport ReactPlayer from 'react-player'\r\nimport 'react-input-range/lib/css/index.css'\r\nimport InputRange from 'react-input-range'\r\nimport ReactEcharts from 'echarts-for-react'\r\nimport _ from 'lodash'\r\nimport { Alert, Statistic } from 'antd'\r\nimport { config } from '../../../constants'\r\nimport { Spinner } from '../../../components'\r\nimport { options, reactChartStyles, legendStyles } from './ChartOptions'\r\nimport { Emotions } from './components'\r\nimport { api } from '../../../services'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { RangeSliderContainer, FloatingContainer, EmotionRnd } from './styled'\r\nimport './view.scss'\r\n\r\nconst { Countdown } = Statistic\r\n\r\nconst statuses = {\r\n NOT_STARTED: 'NOT_STARTED',\r\n RUNNING: 'RUNNING',\r\n STOPPED: 'STOPPED',\r\n FINISHED: 'FINISHED'\r\n}\r\n\r\nconst assessmentPrefix = {\r\n sendMessage: 'sendMessage',\r\n startStream: 'startStream',\r\n stopStream: 'stopStream',\r\n historyChannel: 'historyChannel',\r\n sendEmotion: 'sendEmotion',\r\n emotion: 'emotion'\r\n}\r\n\r\nlet onEvents = null\r\n\r\n// const token = 'eyJraWQiOiIrTW9lcjYrRWZ2UXNxdjhsUDlcL0UyR3RUU2FWUDVEY1hsM2V6YXBuZkFRUT0iLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiI0Mjk5Mjk1NS05YzhmLTQ5MjgtOTViZC1lZDdmOTg3MDc0MmEiLCJjdXN0b206dGltZXpvbmUiOiJ7XCJ2YWx1ZVwiOlwiQXNpYVwvS2F0bWFuZHVcIixcImxhYmVsXCI6XCIoR01ULTU6NDUpIEFzaWFcL0thdG1hbmR1XCJ9IiwiZW1haWxfdmVyaWZpZWQiOnRydWUsImFkZHJlc3MiOnsiZm9ybWF0dGVkIjoiU2luZ2Fwb3JlIn0sImN1c3RvbTpwb3NpdGlvbiI6IkRFViIsImlzcyI6Imh0dHBzOlwvXC9jb2duaXRvLWlkcC51cy1lYXN0LTEuYW1hem9uYXdzLmNvbVwvdXMtZWFzdC0xXzRWMUpPbjFleiIsInBob25lX251bWJlcl92ZXJpZmllZCI6ZmFsc2UsImNvZ25pdG86dXNlcm5hbWUiOiJtYWhlc2guc2hhcmVsb29rIiwiYXVkIjoiMzBxZGdpMm80azBjZWYwZGE2NHNnamxncXYiLCJldmVudF9pZCI6ImU2YTVlNmRjLWY3YTEtNDY5Ny1iOTIxLWZmMWJmNWZhZjBlZCIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjA2OTgxMjM1LCJuYW1lIjoiTWFoZXNoIEpvc2hpIiwicGhvbmVfbnVtYmVyIjoiKzY1NjIwMDAwMDAiLCJleHAiOjE2MDcwODI4MjMsImlhdCI6MTYwNzA3OTIyMywiZW1haWwiOiJtYWhlc2hAc2hhcmVsb29rYXBwLmNvbSJ9.gDiRTseg614oy0kEFSjTfnnKCQ351ZDTSnsLYlQWJI0vtCUR4wkUvS422r94NgmoEJOJ2x8af1RlIjtnN6r2epFo6ch5MEOvUmZxoPQfsR7gRBcbzMWdlb1_uP8RP4KJXGP6SmdcxxnPlLtAVTx5zGOR0U5gSka5C2I3tQKyUi6kW3WLUiyjPUOjnrVa0knd44JtbtbcvCdAqtIgteXrHxQ-cXFP4oHB_5kHwz0hnIWCqv830q8vKjESoAc9CHgCRZhh68queFEPO0WfhDGWyN7Kt1E_c0NUyRSnZNRkU9wxfV-JSUI5SsMtizAlmzIXRi1adzuiXX8NqrKWdRlo0A'\r\n\r\nclass View extends Component {\r\n socket = null\r\n yAxisValue = null\r\n legendColor = ['#F9A271', '#F9F871', '#A9FAFF', '#00BFE1', '#3E9CD4']\r\n state = {\r\n status: statuses.NOT_STARTED,\r\n messages: [],\r\n isFetching: true,\r\n assessment: null,\r\n userId: null,\r\n isNoProfile: false,\r\n isLoading: true,\r\n isStreaming: false,\r\n socketConnected: false,\r\n currentPlayTime: 0,\r\n videoDuration: 0,\r\n isEnd: false,\r\n graphEmotionsData: [],\r\n floatingEmotionsList: [],\r\n pollValues: {\r\n result: [\r\n {\r\n key: '0',\r\n value: 0\r\n }\r\n ]\r\n },\r\n isRefresh: false,\r\n isScrollBottom: true,\r\n isChatAble: false,\r\n countDown: false,\r\n totalEmotions: 0,\r\n rawEmotions: null,\r\n sendToSocket: true,\r\n emotionsData: [\r\n {\r\n type: 1,\r\n name: 'angry',\r\n value: 0\r\n },\r\n {\r\n type: 2,\r\n name: 'sad',\r\n value: 0\r\n },\r\n {\r\n type: 3,\r\n name: 'neutral',\r\n value: 0\r\n },\r\n {\r\n type: 4,\r\n name: 'smile',\r\n value: 0\r\n },\r\n {\r\n type: 5,\r\n name: 'happy',\r\n value: 0\r\n }\r\n ]\r\n }\r\n\r\n setPlayerRef = node => {\r\n this.playerRef = node\r\n }\r\n\r\n componentDidMount = async () => {\r\n Auth.configure({\r\n Auth: {\r\n region: config.cognito.REGION,\r\n userPoolId: config.cognito.USER_POOL_ID,\r\n userPoolWebClientId: config.cognito.USER_POOL_WEB_CLIENT_ID,\r\n mandatorySignIn: config.cognito.MANDATORY_SIGN_IN,\r\n authenticationFlowType: config.cognito.AUTHENTICATION_FLOW_TYPE\r\n }\r\n })\r\n\r\n const user = await Auth.signIn('3view', 'Q2wert6y!')\r\n\r\n console.log('user detail', user)\r\n\r\n Auth.currentSession().then((session) => {\r\n console.log('currentSession log', session)\r\n const id = this.props.match.params.id\r\n\r\n console.log('this.props.match.params', this.props.match.params)\r\n console.log('id assignment', id)\r\n // console.log('id assignment', token)\r\n\r\n console.log('session.accessToken.jwtToken', session)\r\n\r\n // const id = 854\r\n if (id && session.idToken.jwtToken) {\r\n this.interval = setInterval(() => {\r\n this.handleShowChat()\r\n }, 10000)\r\n this.getAssessmentById(id, session.idToken.jwtToken)\r\n this.getEmotionsById(id, session.idToken.jwtToken)\r\n onEvents = {\r\n click: this.onChartClick,\r\n legendselectchanged: {}\r\n }\r\n }\r\n }, (err) => {\r\n console.log(err)\r\n })\r\n }\r\n\r\n componentWillUnmount () {\r\n this.stopStream()\r\n clearInterval(this.interval)\r\n if (this.player) {\r\n this.player.dispose()\r\n }\r\n }\r\n\r\n handleChatAble = ({ start_date_time: startDataTime }) => {\r\n const newTime = moment(startDataTime).format('LLLL')\r\n const diffMinutes = moment().diff(newTime, 'minutes')\r\n return diffMinutes >= -10\r\n }\r\n\r\n handleVoteAble = ({\r\n start_date_time: startDataTime,\r\n duration,\r\n is_finished,\r\n host_id\r\n }) => {\r\n const { user } = this.props\r\n if (host_id === user.info.id) {\r\n return false\r\n } else {\r\n if (is_finished) {\r\n return !is_finished\r\n }\r\n const newTime = moment(startDataTime).format('LLLL')\r\n const diffMinutes = moment().diff(newTime, 'minutes')\r\n return diffMinutes >= 0 && diffMinutes <= duration\r\n }\r\n }\r\n\r\n onChartClick = (...params) => {\r\n const { spaceGraphValue, secondArray } = this.state\r\n const currentChartClick = _.filter(\r\n secondArray,\r\n (item, index) => index === params[0].dataIndex\r\n )\r\n this.setState({\r\n currentPlayTime: this.getscData(currentChartClick, spaceGraphValue)\r\n })\r\n\r\n this.playerRef.seekTo(this.getscData(currentChartClick, spaceGraphValue))\r\n }\r\n\r\n getAssessmentById = (id, token) => {\r\n const { viewAssessment } = this.props\r\n /* api.assessments\r\n .getById(id)\r\n .then(({ data }) => {\r\n this.setState({\r\n assessment: data,\r\n isLoading: false,\r\n isChatAble: this.handleChatAble(data),\r\n isVoteAble: this.handleVoteAble(data)\r\n })\r\n this.getUserInfo(data)\r\n data && viewAssessment(data.id)\r\n })\r\n .catch(() => {\r\n this.setState({\r\n isLoading: false\r\n })\r\n }) */\r\n\r\n const URL = 'https://dev-api.v2.sharelookapp.com/v1/assessments/' + id\r\n fetch(URL, {\r\n method: 'get',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': token\r\n }\r\n })\r\n .then(response => response.json())\r\n .then((data) => {\r\n console.log('Hello', data)\r\n\r\n this.setState({\r\n assessment: data,\r\n isLoading: false,\r\n isChatAble: this.handleChatAble(data),\r\n isVoteAble: this.handleVoteAble(data)\r\n })\r\n // this.getUserInfo(data)\r\n data && viewAssessment(data.id)\r\n }).catch(() => {\r\n this.setState({\r\n isLoading: false\r\n })\r\n })\r\n }\r\n\r\n getEmotionsById = (id, token) => {\r\n const { emotionsData } = this.state\r\n /* api.assessments.getEmotionsById(id).then(({ data: { messages } }) => {\r\n const emotionsContents = _.map(messages, emo => emo.content)\r\n const groupEmotions = _.groupBy(emotionsContents)\r\n if (groupEmotions) {\r\n _.each(groupEmotions, (group, index) => {\r\n emotionsData[index - 1].value = group.length\r\n })\r\n }\r\n this.setState({\r\n emotionsData,\r\n rawEmotions: messages,\r\n totalEmotions: emotionsContents.length\r\n })\r\n }) */\r\n\r\n const URL = `https://dev-api.v2.sharelookapp.com/v1/assessments/${id}/emotions`\r\n fetch(URL, {\r\n method: 'get',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': token\r\n }\r\n }).then(response => response.json())\r\n .then((data) => {\r\n console.log('data messages log', data)\r\n\r\n const emotionsContents = _.map(data.messages, emo => emo.content)\r\n const groupEmotions = _.groupBy(emotionsContents)\r\n if (groupEmotions) {\r\n _.each(groupEmotions, (group, index) => {\r\n emotionsData[index - 1].value = group.length\r\n })\r\n }\r\n this.setState({\r\n emotionsData,\r\n rawEmotions: data.messages,\r\n totalEmotions: emotionsContents.length\r\n })\r\n })\r\n }\r\n\r\n getUserInfo = assessment => {\r\n api.user\r\n .getUser()\r\n .then(() => {\r\n // const { id: 757 } = response\r\n this.setState(\r\n {\r\n userId: 757\r\n },\r\n () => {\r\n const { userId } = this.state\r\n this.initSocket(userId, assessment)\r\n }\r\n )\r\n })\r\n .catch(error => console.log('error', error))\r\n }\r\n\r\n initSocket = (userId, assessmentDetail) => {\r\n const id = this.props.match.params.id\r\n const { user } = this.props\r\n const user_id = user.info.id || userId\r\n\r\n this.socket = new window.WebSocket(\r\n `${config.socketURL}?channel_type=ASSESSMENT&channel_id=${id}&user_id=${user_id}`\r\n )\r\n\r\n this.socket.onopen = () => {\r\n this.setState({\r\n socketConnected: true\r\n })\r\n this.getChatHistory()\r\n }\r\n\r\n this.socket.onmessage = assessment => {\r\n const { emotionsData, totalEmotions } = this.state\r\n\r\n const data = JSON.parse(assessment.data)\r\n\r\n if (data.messages) {\r\n _.each(data.messages, item => {\r\n item.isReadMore = item.content && item.content.length >= 200\r\n })\r\n this.setState(() => ({\r\n messages: data.messages\r\n }))\r\n }\r\n\r\n if (\r\n data.event === assessmentPrefix.sendEmotion &&\r\n data.channel_id === id\r\n ) {\r\n _.each(emotionsData, item => {\r\n if (item.type === data.content) {\r\n item.value = item.value + 1\r\n }\r\n })\r\n if (user_id !== data.user_id) {\r\n this.addEmojiToList(data.content)\r\n }\r\n this.setState(() => ({\r\n emotionsData,\r\n totalEmotions: totalEmotions + 1\r\n }))\r\n }\r\n\r\n if (\r\n data.event === assessmentPrefix.sendMessage &&\r\n data.channel_id === id\r\n ) {\r\n if (data.content) {\r\n data.isReadMore = data.content.length >= 200\r\n }\r\n this.setState(state => ({\r\n messages: [...state.messages, data]\r\n }))\r\n }\r\n\r\n if (\r\n data.event === assessmentPrefix.startStream &&\r\n data.channel_id === id\r\n ) {\r\n this.initStream()\r\n }\r\n\r\n if (\r\n data.event === assessmentPrefix.stopStream &&\r\n data.channel_id === id\r\n ) {\r\n this.stopStream()\r\n window.location.reload()\r\n }\r\n\r\n if (\r\n data.event === assessmentPrefix.historyChannel &&\r\n data.channel_id === id\r\n ) {\r\n if (data.liveStatus === statuses.NOT_STARTED) {\r\n this.setState({\r\n liveStatus: statuses.NOT_STARTED\r\n })\r\n }\r\n\r\n if (data.liveStatus === statuses.RUNNING) {\r\n if (!assessmentDetail.is_finished) {\r\n this.initStream()\r\n }\r\n }\r\n\r\n if (data.liveStatus === statuses.STOPPED) {\r\n this.stopStream()\r\n }\r\n }\r\n }\r\n\r\n this.socket.onerror = error => {\r\n console.log('Error ' + error.message)\r\n }\r\n }\r\n\r\n getChatHistory = () => {\r\n const id = this.props.match.params.id\r\n\r\n this.socket.send(\r\n JSON.stringify({\r\n action: assessmentPrefix.historyChannel,\r\n channel_id: id,\r\n channel_type: 'ASSESSMENT'\r\n })\r\n )\r\n }\r\n\r\n clearAlert = () => {\r\n this.setState({\r\n isNoProfile: false\r\n })\r\n }\r\n\r\n sendMessage = content => {\r\n const {\r\n user: { info }\r\n } = this.props\r\n\r\n if (!info.name) {\r\n this.setState(\r\n {\r\n isNoProfile: true\r\n },\r\n () => {\r\n setTimeout(() => {\r\n if (this.state.isNoProfile) {\r\n this.clearAlert()\r\n }\r\n }, 5000)\r\n }\r\n )\r\n return\r\n }\r\n const { userId } = this.state\r\n const id = this.props.match.params.id\r\n const user_id = info.id || userId\r\n\r\n this.socket.send(\r\n JSON.stringify({\r\n action: assessmentPrefix.sendMessage,\r\n channel_type: 'ASSESSMENT',\r\n channel_id: id,\r\n user_id,\r\n user_name: info.name,\r\n time: 0,\r\n content\r\n })\r\n )\r\n }\r\n\r\n stopStream = () => {\r\n const myPlayer = window.WowzaPlayer\r\n ? window.WowzaPlayer.get('stream')\r\n : null\r\n\r\n if (myPlayer !== null) {\r\n myPlayer.finish()\r\n myPlayer.destroy()\r\n\r\n this.setState({\r\n liveStatus: statuses.STOPPED,\r\n isStreaming: false\r\n })\r\n } else {\r\n this.setState({\r\n liveStatus: statuses.STOPPED,\r\n isStreaming: false\r\n })\r\n }\r\n }\r\n\r\n initStream = () => {\r\n // const {\r\n // match: { params }\r\n // } = this.props\r\n const { assessment } = this.state\r\n const streamUrl = assessment.stream\r\n ? assessment.stream.player_hls_playback_url\r\n : ''\r\n\r\n this.setState({\r\n liveStatus: statuses.RUNNING,\r\n isStreaming: true\r\n })\r\n\r\n window.WowzaPlayer.create('stream', {\r\n license: config.wowza.license,\r\n sourceURL: streamUrl,\r\n autoPlay: true,\r\n mute: false,\r\n loop: false,\r\n audioOnly: false,\r\n uiShowQuickRewind: true,\r\n uiQuickRewindSeconds: '30',\r\n withCredentials: false\r\n })\r\n }\r\n addEmojiToList = data => {\r\n const rotateValue = [0, 360]\r\n const randomValue = maxValue =>\r\n Math.floor(Math.random() * Math.floor(maxValue))\r\n const floatingEmotionsList = {\r\n content: data,\r\n beforeRotate: rotateValue[randomValue(2)],\r\n afterRotate: rotateValue[randomValue(2)],\r\n speed: Math.floor(Math.random() * 5) + 3,\r\n position: randomValue(200)\r\n }\r\n this.setState({\r\n floatingEmotionsList: [\r\n ...this.state.floatingEmotionsList,\r\n floatingEmotionsList\r\n ]\r\n })\r\n }\r\n sendEmotion = kind => {\r\n const { user } = this.props\r\n const { userId } = this.state\r\n const id = this.props.match.params.id\r\n const user_id = user.info.id || userId\r\n const user_name = user.info.name || user.info.username\r\n this.addEmojiToList(kind)\r\n\r\n if (!this.state.sendToSocket) {\r\n return\r\n }\r\n\r\n this.setState(\r\n {\r\n sendToSocket: false\r\n },\r\n () => {\r\n this.socket.send(\r\n JSON.stringify({\r\n action: assessmentPrefix.emotion,\r\n channel_type: 'ASSESSMENT',\r\n channel_id: id,\r\n user_name,\r\n user_id,\r\n kind\r\n })\r\n )\r\n }\r\n )\r\n\r\n setTimeout(() => {\r\n this.setState({\r\n sendToSocket: true\r\n })\r\n }, 15000)\r\n }\r\n\r\n getscData = (newObj, value) => {\r\n if (newObj < value) {\r\n return 0\r\n }\r\n if (newObj >= value) {\r\n const result = newObj - value\r\n return result\r\n }\r\n }\r\n\r\n handleVideoDuration = e => {\r\n const value = e / 30\r\n const tempArray = []\r\n const secondArray = []\r\n for (let i = 1; i <= 30; i++) {\r\n tempArray.push(i)\r\n }\r\n const graphDuration = _.map(tempArray, (obj, index) => {\r\n const newObj = (index + 1) * value.toFixed(1)\r\n const scData = this.getscData(newObj, value)\r\n secondArray.push(newObj)\r\n return this.timeConvert(scData)\r\n })\r\n\r\n this.setState(\r\n {\r\n videoDuration: e || 0,\r\n graphDuration,\r\n secondArray,\r\n spaceGraphValue: value\r\n },\r\n () => {\r\n this.handleGraphHover(secondArray)\r\n }\r\n )\r\n }\r\n\r\n handleGraphHover = graphDataList => {\r\n const { rawEmotions } = this.state\r\n let tempEmotions = _.cloneDeep(rawEmotions)\r\n let result = []\r\n _.each(graphDataList, (graph, gIndex) => {\r\n _.each(tempEmotions, (emo) => {\r\n if (emo.time <= graph) {\r\n result.push({\r\n content: emo.content,\r\n graphIndex: gIndex,\r\n time: emo.time\r\n })\r\n tempEmotions = _.filter(tempEmotions, item => item.time > graph)\r\n }\r\n })\r\n })\r\n\r\n this.filterGraphData(result)\r\n }\r\n insertDataIntoIndexByType = (data, type) => {\r\n if (data[type]) {\r\n const result = []\r\n for (let i = 0; i < 30; i++) {\r\n const value = _.filter(data[type], item => item.graphIndex === i)\r\n result.push(value.length)\r\n }\r\n return result\r\n } else {\r\n const defaultData = []\r\n for (let i = 0; i < 30; i++) {\r\n defaultData.push(0)\r\n }\r\n return defaultData\r\n }\r\n }\r\n getType = value => {\r\n let type = ''\r\n switch (`${value}`) {\r\n case '1':\r\n type = 'angry'\r\n break\r\n case '2':\r\n type = 'sad'\r\n break\r\n case '3':\r\n type = 'neutral'\r\n break\r\n case '4':\r\n type = 'smile'\r\n break\r\n case '5':\r\n type = 'happy'\r\n break\r\n default:\r\n break\r\n }\r\n return type\r\n }\r\n filterGraphData = data => {\r\n const tempEmotionsData = _.groupBy(data, 'content')\r\n const result = {\r\n angry: this.insertDataIntoIndexByType(tempEmotionsData, '1'),\r\n sad: this.insertDataIntoIndexByType(tempEmotionsData, '2'),\r\n neutral: this.insertDataIntoIndexByType(tempEmotionsData, '3'),\r\n smile: this.insertDataIntoIndexByType(tempEmotionsData, '4'),\r\n happy: this.insertDataIntoIndexByType(tempEmotionsData, '5')\r\n }\r\n\r\n this.setState({\r\n graphEmotionsData: result\r\n })\r\n }\r\n\r\n timeConvert = value => {\r\n const time = Math.floor(value)\r\n const minutes = Math.floor(time / 60)\r\n let second = `${time - minutes * 60}`\r\n if (second < 10) {\r\n second = `0${second}`\r\n }\r\n if (second === '60') {\r\n second = '00'\r\n }\r\n\r\n return minutes + ':' + second\r\n }\r\n\r\n handleVideoProgress = e => {\r\n this.setState({\r\n currentPlayTime: e.playedSeconds\r\n })\r\n }\r\n\r\n checkPastVideo = assessment => {\r\n if (assessment.is_live) {\r\n return false\r\n } else if (assessment.video_links && assessment.video_links.length > 0) {\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n handlSeekOrEnd = (isEnd = false) => {\r\n if (isEnd) {\r\n this.setState({\r\n isEnd: true\r\n })\r\n } else {\r\n this.setState({\r\n isEnd: false\r\n })\r\n }\r\n }\r\n\r\n handleScroll = e => {\r\n const isScrollBottom =\r\n e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight\r\n this.setState({\r\n isScrollBottom\r\n })\r\n }\r\n\r\n onCountDownFinish = () => {\r\n this.setState(\r\n {\r\n isChatAble: true\r\n },\r\n () => {\r\n window.location.reload()\r\n }\r\n )\r\n }\r\n\r\n handleShowChat = () => {\r\n const { assessment } = this.state\r\n if (!assessment) return\r\n\r\n const now = new Date()\r\n const timeTillDate = moment(assessment.start_date_time).diff(now, 'minute')\r\n if (timeTillDate <= 10) {\r\n this.setState({\r\n isChatAble: true\r\n })\r\n }\r\n }\r\n displaySchedule = ({ start_date_time: startDataTime }) => {\r\n if (!startDataTime) return\r\n const assessmentStartTime = moment(startDataTime).format('lll')\r\n const format = moment(assessmentStartTime).format('DD MMM YYYY, HH: mm')\r\n return `Schedule for ${format}`\r\n }\r\n\r\n displayCountdownTime = ({ start_date_time: startDataTime }) => {\r\n if (!startDataTime) return false\r\n const now = new Date()\r\n const timeTillDate = moment(startDataTime).diff(now, 'minute')\r\n\r\n if (timeTillDate <= 1440) {\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n handleReadmore = (e, index) => {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n const { messages, isRefresh } = this.state\r\n messages[index].isReadMore = !messages[index].isReadMore\r\n this.setState({\r\n messages,\r\n isRefresh: !isRefresh\r\n })\r\n }\r\n\r\n getRangeWidth = () => {\r\n if (!this.yAxisValue) {\r\n return '77rem'\r\n }\r\n if (this.yAxisValue <= 3) {\r\n return '74.4rem'\r\n }\r\n const digit = `${this.yAxisValue}`.length - 1\r\n const rangeLeft = 75.6 - 0.8 * digit\r\n return `${rangeLeft}rem`\r\n }\r\n\r\n getRangeLeft = () => {\r\n if (!this.yAxisValue) {\r\n return '0rem'\r\n }\r\n if (this.yAxisValue <= 3) {\r\n return '2.4rem'\r\n }\r\n const digit = `${this.yAxisValue}`.length - 1\r\n const rangeLeft = 1.4 + 0.7 * digit\r\n return `${rangeLeft}rem`\r\n }\r\n\r\n render () {\r\n const {\r\n assessment,\r\n isLoading,\r\n // pollValues,\r\n isStreaming,\r\n currentPlayTime,\r\n isVoteAble,\r\n videoDuration,\r\n emotionsData,\r\n totalEmotions,\r\n graphDuration,\r\n graphEmotionsData,\r\n floatingEmotionsList\r\n } = this.state\r\n const { t } = this.props\r\n\r\n console.log('state assessment', assessment)\r\n\r\n if (isLoading) {\r\n return Overall experience:
\r\n \r\n
\r\n \r\n \r\n {data.reduce((s, i) => {\r\n return i.emotions[0] + s\r\n }, 0)}\r\n
\r\n \r\n \r\n {data.reduce((s, i) => {\r\n return i.emotions[1] + s\r\n }, 0)}\r\n
\r\n \r\n \r\n {data.reduce((s, i) => {\r\n return i.emotions[2] + s\r\n }, 0)}\r\n
\r\n \r\n \r\n {data.reduce((s, i) => {\r\n return i.emotions[3] + s\r\n }, 0)}\r\n
\r\n \r\n \r\n {data.reduce((s, i) => {\r\n return i.emotions[4] + s\r\n }, 0)}\r\n
\r\n \r\n
\r\n \r\n {isStreaming ? (\r\n
\r\n )}\r\n \r\n \r\n\r\n {floatingEmotionsList && (\r\n \r\n {floatingEmotionsList.map((item, emoIndex) => {\r\n return (\r\n \r\n \r\n )}\r\n {/*
\r\n ) : (\r\n Live
*/}\r\n \r\n {/* if past live event have streaming videos will display instead of thumnail image */}\r\n {this.checkPastVideo(assessment) && (\r\n {\r\n this.setPlayerRef(rp)\r\n }}\r\n url={\r\n assessment.video_links\r\n ? _.head(assessment.video_links).link\r\n : ''\r\n }\r\n // url='https://www.youtube.com/watch?v=LNKdQyXhvh0'\r\n onDuration={e => {\r\n this.handleVideoDuration(e)\r\n }}\r\n onProgress={e => {\r\n this.handleVideoProgress(e)\r\n }}\r\n onEnded={() => {\r\n this.handlSeekOrEnd(true)\r\n }}\r\n onSeek={() => {\r\n this.handlSeekOrEnd(false)\r\n }}\r\n youtubeConfig={{ playerVars: { showinfo: 1 } }}\r\n controls\r\n />\r\n )}\r\n {!this.checkPastVideo(assessment) && (\r\n \r\n {assessment.start_date_time && (\r\n
\r\n )}\r\n \r\n {this.displaySchedule(assessment)}\r\n
\r\n )}\r\n {this.displayCountdownTime(assessment) && (\r\n \r\n {assessment.is_finished &&\r\n t('assessments:finished')}\r\n {!assessment.is_finished &&\r\n t('assessments:countdown')}\r\n {!assessment.is_finished && (\r\n 
\r\n
\r\n )}\r\n \r\n \r\n {/*
\r\n \r\n )}\r\n \r\n
*/}\r\n {/* {assessment.title}
\r\n \r\n
*/}\r\n\r\n \r\n
\r\n 134 Watching Now
\r\n \r\n {\r\n \r\n this.timeConvert(value)}\r\n disabled\r\n draggableTrack={false}\r\n onChange={value => {\r\n this.setState({\r\n currentPlayTime: value\r\n })\r\n this.playerRef.seekTo(value)\r\n }}\r\n />\r\n \r\n }\r\n {\r\n this.echartsReactRef = e\r\n }}\r\n option={options(\r\n graphDuration,\r\n this,\r\n graphEmotionsData\r\n )}\r\n onEvents={onEvents}\r\n style={reactChartStyles}\r\n />\r\n
\r\n )}\r\n \r\n {this.legendColor.map((color, index) => (\r\n
\r\n \r\n
\r\n \r\n this.onSearch(e.target.value)}\r\n />\r\n
\r\n \r\n
\r\n \r\n {\r\n if (key <= currentStepIndex) {\r\n history.push(tabs[key].key.replace(':id', id))\r\n }\r\n }}\r\n >\r\n {tabs.map((i, index) => (\r\n \r\n {i.tab}\r\n \r\n }\r\n key={i.key}\r\n disabled={\r\n index !== currentStepIndex && !visitedSteps.includes(index)\r\n }\r\n />\r\n ))}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default withRouter(MazeTopPanel)\r\n","import MazeTopPanel from './MazeTopPanel'\r\n\r\nexport default MazeTopPanel","import React from 'react'\r\nimport { Button, Typography } from 'antd'\r\n\r\nconst { Title } = Typography\r\n\r\nconst FormHeader = ({ t, mazeId, isMarketPlace, onToggleMarketPlace }) => {\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default FormHeader\r\n","export const voicesData = {\r\n \"voices\": [\r\n {\r\n \"voice_id\": \"9BWtsMINqrJLrRacOk9x\",\r\n \"name\": \"Aria\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_multilingual_v2\": \"fine_tuned\",\r\n \"eleven_turbo_v2_5\": \"fine_tuned\",\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_multilingual_v2\": \"\",\r\n \"eleven_turbo_v2_5\": \"\",\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"expressive\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"female\",\r\n \"use_case\": \"social media\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/9BWtsMINqrJLrRacOk9x/405766b8-1f4e-4d3c-aba1-6f25333823ec.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_turbo_v2_5\",\r\n \"eleven_multilingual_v2\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"CwhRBWXzGAHq8TQ4Fs17\",\r\n \"name\": \"Roger\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_multilingual_v2\": \"fine_tuned\",\r\n \"eleven_turbo_v2_5\": \"failed\",\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_multilingual_v2\": \"\",\r\n \"eleven_turbo_v2_5\": \"\",\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"confident\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"social media\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/CwhRBWXzGAHq8TQ4Fs17/58ee3ff5-f6f2-4628-93b8-e38eb31806b0.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"EXAVITQu4vr4xnSDxMaL\",\r\n \"name\": \"Sarah\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {},\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {},\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"american\",\r\n \"description\": \"soft\",\r\n \"age\": \"young\",\r\n \"gender\": \"female\",\r\n \"use_case\": \"news\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/EXAVITQu4vr4xnSDxMaL/01a3e33c-6e99-4ee7-8543-ff2216a32186.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"FGY2WhTYpPnrIDTdsKH5\",\r\n \"name\": \"Laura\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_multilingual_v2\": \"fine_tuned\",\r\n \"eleven_turbo_v2_5\": \"fine_tuned\",\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_multilingual_v2\": \"\",\r\n \"eleven_turbo_v2_5\": \"\",\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"upbeat\",\r\n \"age\": \"young\",\r\n \"gender\": \"female\",\r\n \"use_case\": \"social media\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/FGY2WhTYpPnrIDTdsKH5/67341759-ad08-41a5-be6e-de12fe448618.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"IKne3meq5aSn9XLyUdCD\",\r\n \"name\": \"Charlie\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"Australian\",\r\n \"description\": \"natural\",\r\n \"age\": \"middle aged\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"conversational\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/IKne3meq5aSn9XLyUdCD/102de6f2-22ed-43e0-a1f1-111fa75c5481.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_multilingual_v1\",\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"JBFqnCBsd6RMkjVDRZzb\",\r\n \"name\": \"George\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"British\",\r\n \"description\": \"warm\",\r\n \"age\": \"middle aged\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"narration\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/JBFqnCBsd6RMkjVDRZzb/e6206d1a-0721-4787-aafb-06a6e705cac5.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"N2lVS1w4EtoT3dr4eOWO\",\r\n \"name\": \"Callum\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"Transatlantic\",\r\n \"description\": \"intense\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"characters\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/N2lVS1w4EtoT3dr4eOWO/ac833bd8-ffda-4938-9ebc-b0f99ca25481.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_multilingual_v1\",\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"SAz9YHcvj6GT2YYXdXww\",\r\n \"name\": \"River\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_multilingual_v2\": \"fine_tuned\",\r\n \"eleven_turbo_v2_5\": \"fine_tuned\",\r\n \"eleven_turbo_v2\": \"fine_tuned\",\r\n \"eleven_multilingual_sts_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_multilingual_v2\": \"\",\r\n \"eleven_turbo_v2_5\": \"\",\r\n \"eleven_turbo_v2\": \"\",\r\n \"eleven_multilingual_sts_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"confident\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"non-binary\",\r\n \"use_case\": \"social media\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/SAz9YHcvj6GT2YYXdXww/e6c95f0b-2227-491a-b3d7-2249240decb7.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_turbo_v2_5\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_multilingual_sts_v2\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"TX3LPaxmHKxFdv7VOQHJ\",\r\n \"name\": \"Liam\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"articulate\",\r\n \"age\": \"young\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"narration\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/TX3LPaxmHKxFdv7VOQHJ/63148076-6363-42db-aea8-31424308b92c.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_multilingual_v1\",\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"XB0fDUnXU5powFXDhCwa\",\r\n \"name\": \"Charlotte\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_multilingual_v2\": \"\",\r\n \"eleven_turbo_v2_5\": \"\",\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"Swedish\",\r\n \"description\": \"seductive\",\r\n \"age\": \"young\",\r\n \"gender\": \"female\",\r\n \"use_case\": \"characters\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/XB0fDUnXU5powFXDhCwa/942356dc-f10d-4d89-bda5-4f8505ee038b.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_multilingual_v1\",\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"Xb7hH8MSUJpSbSDYk0k2\",\r\n \"name\": \"Alice\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"British\",\r\n \"description\": \"confident\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"female\",\r\n \"use_case\": \"news\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/Xb7hH8MSUJpSbSDYk0k2/d10f7534-11f6-41fe-a012-2de1e482d336.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"XrExE9yKIg1WjnnlVkGX\",\r\n \"name\": \"Matilda\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"friendly\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"female\",\r\n \"use_case\": \"narration\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/XrExE9yKIg1WjnnlVkGX/b930e18d-6b4d-466e-bab2-0ae97c6d8535.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_multilingual_v1\",\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"bIHbv24MWmeRgasZH58o\",\r\n \"name\": \"Will\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_multilingual_v2\": \"fine_tuned\",\r\n \"eleven_turbo_v2_5\": \"fine_tuned\",\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_multilingual_v2\": \"\",\r\n \"eleven_turbo_v2_5\": \"\",\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"friendly\",\r\n \"age\": \"young\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"social media\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/bIHbv24MWmeRgasZH58o/8caf8f3d-ad29-4980-af41-53f20c72d7a4.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"cgSgspJ2msm6clMCkdW9\",\r\n \"name\": \"Jessica\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_multilingual_v2\": \"fine_tuned\",\r\n \"eleven_turbo_v2_5\": \"fine_tuned\",\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_multilingual_v2\": \"\",\r\n \"eleven_turbo_v2_5\": \"\",\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"expressive\",\r\n \"age\": \"young\",\r\n \"gender\": \"female\",\r\n \"use_case\": \"conversational\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/cgSgspJ2msm6clMCkdW9/56a97bf8-b69b-448f-846c-c3a11683d45a.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"cjVigY5qzO86Huf0OWal\",\r\n \"name\": \"Eric\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_multilingual_v2\": \"fine_tuned\",\r\n \"eleven_turbo_v2_5\": \"fine_tuned\",\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_multilingual_v2\": \"\",\r\n \"eleven_turbo_v2_5\": \"\",\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"friendly\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"conversational\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/cjVigY5qzO86Huf0OWal/d098fda0-6456-4030-b3d8-63aa048c9070.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"iP95p4xoKVk53GoZ742B\",\r\n \"name\": \"Chris\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"casual\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"conversational\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/iP95p4xoKVk53GoZ742B/3f4bde72-cc48-40dd-829f-57fbf906f4d7.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"nPczCjzI2devNBz1zQrb\",\r\n \"name\": \"Brian\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"deep\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"narration\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/nPczCjzI2devNBz1zQrb/2dd3e72c-4fd3-42f1-93ea-abc5d4e5aa1d.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"onwK4e9ZLuTAKqWW03F9\",\r\n \"name\": \"Daniel\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"British\",\r\n \"description\": \"authoritative\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"news\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/onwK4e9ZLuTAKqWW03F9/7eee0236-1a72-4b86-b303-5dcadc007ba9.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_multilingual_v1\",\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"pFZP5JQG7iQjIQuC4Bku\",\r\n \"name\": \"Lily\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"British\",\r\n \"description\": \"warm\",\r\n \"age\": \"middle-aged\",\r\n \"gender\": \"female\",\r\n \"use_case\": \"narration\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/pFZP5JQG7iQjIQuC4Bku/89b68b35-b3dd-4348-a84a-a3c13a3c2b30.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n },\r\n {\r\n \"voice_id\": \"pqHfZKP75CvOlQylNhV4\",\r\n \"name\": \"Bill\",\r\n \"samples\": null,\r\n \"category\": \"premade\",\r\n \"fine_tuning\": {\r\n \"is_allowed_to_fine_tune\": true,\r\n \"state\": {\r\n \"eleven_turbo_v2\": \"fine_tuned\"\r\n },\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"manual_verification_requested\": false,\r\n \"language\": \"en\",\r\n \"progress\": {},\r\n \"message\": {\r\n \"eleven_turbo_v2\": \"\"\r\n },\r\n \"dataset_duration_seconds\": null,\r\n \"verification_attempts\": null,\r\n \"slice_ids\": null,\r\n \"manual_verification\": null\r\n },\r\n \"labels\": {\r\n \"accent\": \"American\",\r\n \"description\": \"trustworthy\",\r\n \"age\": \"old\",\r\n \"gender\": \"male\",\r\n \"use_case\": \"narration\"\r\n },\r\n \"description\": null,\r\n \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/pqHfZKP75CvOlQylNhV4/d782b3ff-84ba-4029-848c-acf01285524d.mp3\",\r\n \"available_for_tiers\": [],\r\n \"settings\": null,\r\n \"sharing\": null,\r\n \"high_quality_base_model_ids\": [\r\n \"eleven_turbo_v2\",\r\n \"eleven_multilingual_v2\",\r\n \"eleven_turbo_v2_5\"\r\n ],\r\n \"safety_control\": null,\r\n \"voice_verification\": {\r\n \"requires_verification\": false,\r\n \"is_verified\": false,\r\n \"verification_failures\": [],\r\n \"verification_attempts_count\": 0,\r\n \"language\": null,\r\n \"verification_attempts\": null\r\n },\r\n \"permission_on_resource\": null,\r\n \"is_legacy\": false,\r\n \"is_mixed\": false\r\n }\r\n ]\r\n}","import React, { useState, useEffect } from 'react';\r\nimport { Select, Form, Row, Col } from 'antd';\r\nimport { voicesData } from './listVoices';\r\n\r\nconst { Option } = Select;\r\n\r\nconst ListVoices = (props) => {\r\n const [selectedGender, setSelectedGender] = useState((props.mazeAvatarId !== undefined ? props.mazeAvatarId === (process.env.NODE_ENV === 'development' ? 48683 : 1238494) ? 'male' : 'female' : null)); // dev\r\n // const [selectedGender, setSelectedGender] = useState((props.mazeAvatarId !== undefined ? props.mazeAvatarId === 1238494 ? 'male' : 'female' : null)); // prod\r\n const [selectedVoice, setSelectedVoice] = useState(props.voice_name || null);\r\n const [selectedId, setselectedId] = useState(null);\r\n const [selectedAccent, setSelectedAccent] = useState(props.mazeVoiceAccent || null);\r\n const [filteredVoices, setFilteredVoices] = useState([]);\r\n const [sortedAccents, setSortedAccents] = useState([]);\r\n\r\n const handleGenderChange = (value) => {\r\n setSelectedGender(value);\r\n setSelectedVoice(null);\r\n setselectedId(null);\r\n setSelectedAccent(null);\r\n };\r\n\r\n const handleVoiceChange = (value) => {\r\n setSelectedVoice(value.name);\r\n setselectedId(value.id);\r\n setSelectedAccent(null);\r\n };\r\n\r\n const handleAccentChange = (value) => {\r\n \r\n setSelectedAccent(value);\r\n props.handleElevenLabsVoiceSelect({\r\n selectedGender: selectedGender,\r\n selectedVoice: selectedVoice,\r\n selectedId: selectedId,\r\n selectedAccent: value,\r\n selectedVoiceType: props.selectedVoiceType\r\n })\r\n };\r\n\r\n useEffect(() => {\r\n if (selectedGender) {\r\n const voices = voicesData.voices\r\n .filter(voice => voice.labels.gender === selectedGender)\r\n .sort((a, b) => a.name.localeCompare(b.name)); \r\n setFilteredVoices(voices);\r\n\r\n const uniqueAccents = [...new Set(voices.map(voice => voice.labels.accent))].sort();\r\n setSortedAccents(uniqueAccents);\r\n } else {\r\n setFilteredVoices([]);\r\n setSortedAccents([]);\r\n }\r\n }, [selectedGender]);\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default ListVoices;\r\n","import React, { useState, useEffect } from 'react'\r\nimport axios from 'axios'\r\nimport { useSelector } from 'react-redux'\r\nimport {\r\n UploadOutlined,\r\n SoundOutlined,\r\n DeleteOutlined\r\n} from '@ant-design/icons'\r\nimport './styles.scss'\r\n\r\nimport {\r\n Spin,\r\n Select,\r\n Button,\r\n Input,\r\n Row,\r\n Col,\r\n Typography,\r\n Upload,\r\n Divider\r\n} from 'antd'\r\nimport ElevenLabsControls from './ElevenLabsControls'\r\nimport { getSession } from '../../../../../../services/api/user'\r\nimport { config } from '../../../../../../constants'\r\n\r\nimport GalleryIcon from '../../../../../../assets/gallery_icon.png'\r\nimport AvatarIcon from '../../../../../../assets/avatarIcon2.png'\r\nimport SoundIcon from '../../../../../../assets/sound_icon.png'\r\nimport MaleIcon from '../../../../../../assets/male_icon.png'\r\nimport FemaleIcon from '../../../../../../assets/female_icon.png'\r\n\r\nconst { Option } = Select\r\nconst { Text } = Typography\r\n\r\nconst MazeRightPanel = ({\r\n audio,\r\n onAddVoice,\r\n background,\r\n onAddBackground,\r\n isBackgroundLoading,\r\n mazeAvatar,\r\n backgroundError,\r\n voiceError,\r\n onAvatarChange,\r\n handleElevenLabsVoiceSelect,\r\n voice_type,\r\n voice_accent,\r\n voice_name,\r\n mazeAvatarId,\r\n isELEnabled,\r\n isELClonedEnabled,\r\n handleVoiceType,\r\n upload\r\n}) => {\r\n const [uploadedVoices, setUploadedVoices] = useState([])\r\n const [checkStatus, setCheckStatus] = useState(0)\r\n const [loadingList, setLoadingList] = useState(false)\r\n const [selectedAudio, setSelectedAudio] = useState(null)\r\n const [voiceInputName, setVoiceInputName] = useState('')\r\n const [token, setToken] = useState('')\r\n const [gender, setGender] = useState('')\r\n const [error, setError] = useState(false)\r\n\r\n const user = useSelector(state => state.user)\r\n console.log('CHECK USER Info', user.info.active_organization_id)\r\n const handleVoiceTypeChange = value => {\r\n handleVoiceType(value)\r\n }\r\n\r\n useEffect(() => {\r\n !voice_type && handleVoiceType(voice_type)\r\n }, [])\r\n\r\n // useEffect(() => {\r\n // if (voice_type === 'elevenlabs_clone_voice' && selectedAudio) {\r\n // const data = {\r\n // selectedId: selectedAudio,\r\n // selectedVoiceType: \"elevenlabs\",\r\n // selectedAccent: \"\",\r\n // selectedVoice: \"\"\r\n // }\r\n // handleElevenLabsVoiceSelect(data)\r\n // }\r\n // }, [selectedAudio]);\r\n\r\n const fetchClonedVoices = tkn => {\r\n const apiUrl = `${config.baseURL}podcastai/voices?org=${user.info.active_organization_id}`\r\n console.log('CHECK TOKEN', token)\r\n setLoadingList(true)\r\n axios\r\n .get(apiUrl, {\r\n headers: {\r\n Authorization: `Bearer ${tkn}`\r\n }\r\n })\r\n .then(response => {\r\n console.log('Data from GET voices:', response)\r\n setLoadingList(false)\r\n const filteredData = response.data.voices.filter(\r\n item => item.category === 'cloned'\r\n )\r\n console.log('Filtered Data from GET voices:', filteredData)\r\n filteredData.forEach(item => {\r\n setUploadedVoices(prev => [\r\n ...prev,\r\n {\r\n name: item.name,\r\n voice_id: item.voice_id,\r\n gender:\r\n item.labels && item.labels.gender ? item.labels.gender : 'male'\r\n }\r\n ])\r\n })\r\n })\r\n .catch(error => {\r\n console.error('Error fetching data:', error)\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n getSession().then(session => {\r\n console.log('SESSION CHECK: ', session.idToken.jwtToken)\r\n setToken(session.idToken.jwtToken)\r\n\r\n if (voice_type === 'elevenlabs_clone_voice') {\r\n setUploadedVoices([])\r\n fetchClonedVoices(session.idToken.jwtToken)\r\n }\r\n })\r\n }, [voice_type])\r\n\r\n useEffect(() => {\r\n if (uploadedVoices.length > 0) {\r\n setSelectedAudio({\r\n name: uploadedVoices[0].name,\r\n voice_id: uploadedVoices[0].voice_id\r\n })\r\n }\r\n }, [uploadedVoices])\r\n\r\n const uploadFile = file => {\r\n if (!file) {\r\n return\r\n }\r\n if (!gender) {\r\n setError(true)\r\n return\r\n }\r\n setCheckStatus(1)\r\n upload(file)\r\n .then(res => {\r\n console.log('Uploaded successfully', res.link)\r\n setCheckStatus(2)\r\n const apiUrl = `${config.baseURL}podcastai/voices`\r\n const headers = {\r\n Authorization: `Bearer ${token}`\r\n }\r\n const body = {\r\n audio_url: res.link,\r\n name: voiceInputName\r\n ? voiceInputName\r\n : `SHL_Cloned_Voice_${Math.floor(Math.random() * 1000) + 1}`,\r\n labels: {\r\n gender: gender\r\n }\r\n }\r\n\r\n return axios.post(apiUrl, body, { headers })\r\n })\r\n .then(response => {\r\n console.log('API response Clone', response.data)\r\n setUploadedVoices(prev => [\r\n ...prev,\r\n {\r\n name: response.data.name,\r\n voice_id: response.data.voice_id,\r\n gender:\r\n response.data.labels && response.data.labels.gender\r\n ? response.data.labels.gender\r\n : 'male'\r\n }\r\n ])\r\n setSelectedAudio(response.data.name)\r\n setCheckStatus(3)\r\n setTimeout(() => {\r\n setCheckStatus(0)\r\n }, 2000)\r\n const data = {\r\n selectedId: response.data.voice_id,\r\n selectedVoiceType: 'elevenlabs_clone_voice',\r\n selectedAccent: '',\r\n selectedVoice: response.data.name,\r\n selectedGender: response.data.labels.gender\r\n }\r\n handleElevenLabsVoiceSelect(data)\r\n })\r\n .catch(error => {\r\n console.error('Error occurred', error)\r\n setTimeout(() => {\r\n setCheckStatus(0)\r\n }, 2000)\r\n })\r\n }\r\n\r\n const handleFileUpload = info => {\r\n console.log('Log file', info)\r\n const file = info.file\r\n uploadFile(file)\r\n // if (uploadedVoices.length < 5) {\r\n // uploadFile(file);\r\n\r\n // } else {\r\n // console.log('Maximum 5 files can be uploaded.');\r\n // }\r\n }\r\n\r\n const handleDelete = voice_id => {\r\n const apiUrl = `${config.baseURL}podcastai/voices`\r\n axios\r\n .delete(apiUrl, {\r\n headers: {\r\n Authorization: `Bearer ${token}`\r\n },\r\n data: {\r\n voice_id: voice_id\r\n }\r\n })\r\n .then(response => {\r\n console.log('Deleted successfully:', response)\r\n // fetchClonedVoices();\r\n // Update setUploadedVoices to remove the deleted voice_id\r\n setUploadedVoices(prev =>\r\n prev.filter(item => item.voice_id !== response.data.voice_id)\r\n )\r\n })\r\n .catch(error => {\r\n console.error('Error deleting voice:', error)\r\n })\r\n }\r\n\r\n const handleGenderChange = value => {\r\n setGender(value)\r\n console.log('Selected Gender:', value)\r\n setError(false)\r\n }\r\n\r\n const handleBlur = () => {\r\n if (!gender) {\r\n setError(true)\r\n }\r\n }\r\n\r\n const onChangeVoiceList = value => {\r\n setSelectedAudio(value)\r\n if (voice_type === 'elevenlabs_clone_voice' && value) {\r\n const data = {\r\n selectedId: value.voice_id,\r\n selectedVoiceType: 'elevenlabs_clone_voice',\r\n selectedAccent: '',\r\n selectedVoice: value.name,\r\n selectedGender: value.gender\r\n }\r\n handleElevenLabsVoiceSelect(data)\r\n }\r\n }\r\n\r\n const renderControls = () => {\r\n if (voice_type === 'elevenlabs') {\r\n return (\r\n \r\n \r\n {t('v4:new_maze')}\r\n {isMarketPlace ? ' (Market Place)' : ''}\r\n \r\n
\r\n \r\n \r\n {isMarketPlace\r\n ? 'Save & Continue'.toUpperCase()\r\n : t('buttons:market_place').toUpperCase()}\r\n \r\n
\r\n \r\n Create Voice \r\n {/* Enter Voice Name */}\r\n \r\n Enter Voice Name \r\n \r\n setVoiceInputName(e.target.value)}\r\n />\r\n \r\n
\r\n\r\n \r\n Select Gender \r\n \r\n \r\n \r\n \r\n \r\n {error && (\r\n
\r\n\r\n {/* Upload Audio */}\r\n \r\n Upload Your Voice \r\n \r\n false}\r\n onChange={handleFileUpload}\r\n >\r\n \r\n
\r\n \r\n Cloned Voices \r\n \r\n {\r\n const selectedVoice = uploadedVoices.find(\r\n voice => voice.name === name\r\n )\r\n onChangeVoiceList({\r\n voice_id: selectedVoice.voice_id,\r\n name: selectedVoice.name,\r\n gender: selectedVoice.gender\r\n })\r\n }}\r\n >\r\n {uploadedVoices.map(voice => (\r\n
\r\n \r\n ))}\r\n \r\n \r\n Please select voice gender\r\n
\r\n )}\r\n \r\n \r\n \r\n {progressText}\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n\r\n \r\n \r\n {isELEnabled && (\r\n \r\n )}\r\n {isELClonedEnabled && (\r\n \r\n )}\r\n \r\n \r\n
\r\n {renderControls()}\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default MazeRightPanel\r\n","import { connect } from 'react-redux'\r\n\r\nimport MazeRightPanel from './MazeRightPanel'\r\n\r\nimport actions from '../../../../../../store/actions'\r\n\r\nexport default connect(\r\n state => ({\r\n user: state.user\r\n }),\r\n dispatch => ({ \r\n upload: (file, opts) => dispatch(actions.library.upload(file, opts)) \r\n })\r\n)(MazeRightPanel)\r\n","import { Typography } from 'antd'\r\nimport React, { useState, useEffect } from 'react'\r\n\r\nimport './index.css'\r\nconst { Text } = Typography\r\n\r\nconst CustomSwitch = ({ label, onChanged, value }) => {\r\n const [isOn, setIsOn] = useState(true)\r\n\r\n useEffect(() => {\r\n setIsOn(value)\r\n }, [value])\r\n\r\n const toggleSwitch = () => {\r\n onChanged(!isOn)\r\n setIsOn(!isOn)\r\n }\r\n\r\n return (\r\n \r\n onAddBackground()}\r\n >\r\n {isBackgroundLoading && 
\r\n \r\n {background ? 'Background added' : 'Add Background'}\r\n \r\n \r\n )}\r\n
\r\n \r\n
\r\n {label && (\r\n toggleSwitch()}\r\n className={isOn ? 'switch-bg_active' : 'switch-bg_inactive'}\r\n >\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport { CustomSwitch }\r\n","import React from 'react'\r\nimport { Col, Form, Input, TreeSelect } from 'antd'\r\nimport './index.css'\r\nimport { CustomSwitch } from './CustomSwitch'\r\nimport { api } from '../../../../../../services'\r\nimport TrainerSection from '../../../../../../components/TrainerSection'\r\n\r\nconst { TreeNode } = TreeSelect\r\n\r\nclass MiddleSection extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isMazeFree: false,\r\n categories: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchCategories()\r\n this.handleSwitch()\r\n }\r\n\r\n fetchCategories = () => {\r\n api.courses\r\n .fetchCategory()\r\n .then(res =>\r\n this.setState({\r\n categories: res.data\r\n })\r\n )\r\n .catch(err => {\r\n console.log('Error in fetching categories')\r\n })\r\n }\r\n\r\n handleSwitch = () => {\r\n const { onSwitch, mazeIsFree } = this.props\r\n if (mazeIsFree === null) {\r\n return\r\n }\r\n this.setState({ isMazeFree: !this.state.isMazeFree }, () => {\r\n onSwitch(this.state.isMazeFree)\r\n })\r\n }\r\n\r\n handleCategorySelect = id => {\r\n const { onCategory } = this.props\r\n onCategory(id)\r\n }\r\n\r\n validatePrice = (rule, value, callback) => {\r\n const { t } = this.props\r\n if (value && value < 5) {\r\n callback(t('v4:enter_price'))\r\n }\r\n callback()\r\n }\r\n\r\n onPriceChange = price => {\r\n if (price && price > 4) {\r\n this.props.onPrice(price)\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n t,\r\n form: { getFieldDecorator },\r\n onVideoLink,\r\n mazeBuilder: { mazeCategory, mazePrice, mazeVideoLink, mazeIsFree }\r\n } = this.props\r\n const { categories } = this.state\r\n\r\n console.log('check maze free', mazeIsFree)\r\n\r\n return (\r\n <>\r\n \r\n {label.toUpperCase()} \r\n
\r\n )}\r\n \r\n \r\n {getFieldDecorator('category_id', {\r\n rules: [{ required: true, message: t('v4:select_category') }],\r\n initialValue: mazeCategory\r\n })(\r\n \r\n {categories &&\r\n categories.map(category => (\r\n \r\n {category.children &&\r\n category.children.map(option => (\r\n \r\n {getFieldDecorator('video_link', {\r\n rules: [{ required: true, message: t('v4:input_video_link') }],\r\n initialValue: mazeVideoLink\r\n })(\r\n onVideoLink(e.target.value)}\r\n />\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n }\r\n}\r\n\r\nexport { MiddleSection }\r\n","import React from 'react'\r\nimport { Input, Form, Col, Select } from 'antd'\r\n\r\nimport './index.css'\r\n\r\nconst { Option } = Select\r\n\r\nconst TopSection = ({ props, onChangeAuthor }) => {\r\n const {\r\n t,\r\n form: { getFieldDecorator },\r\n mazeBuilder: { mazeOrganiser, mazeId }\r\n } = props\r\n return (\r\n \r\n \r\n {getFieldDecorator('is_free', {\r\n initialValue: mazeIsFree\r\n })(\r\n this.handleSwitch(e)}\r\n />\r\n )}\r\n \r\n \r\n {getFieldDecorator('price', {\r\n initialValue: mazePrice || 5,\r\n rules: [\r\n {\r\n validator: this.validatePrice\r\n }\r\n ]\r\n })(\r\n this.onPriceChange(e.target.value)}\r\n disabled={Boolean(mazeIsFree)}\r\n />\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {getFieldDecorator('maze_id', {\r\n initialValue: mazeId\r\n })()}\r\n \r\n \r\n\r\n \r\n {/* {getFieldDecorator('status', {\r\n initialValue: 'pending'\r\n })( */}\r\n \r\n {/* )} */}\r\n \r\n \r\n\r\n \r\n {getFieldDecorator('organiser', {\r\n rules: [{ required: true, message: t('v4:author_name') }],\r\n initialValue: mazeOrganiser\r\n })(\r\n onChangeAuthor(e.target.value)}\r\n />\r\n )}\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport { TopSection }\r\n","import React from 'react'\r\nimport { Row, Col, Form, Input, Checkbox } from 'antd'\r\nimport './index.css'\r\n\r\nconst BottomSection = props => {\r\n const {\r\n form: { getFieldDecorator },\r\n mazeBuilder: {\r\n mazeDescription,\r\n mazeOutline,\r\n mazeObjectives,\r\n mazeShareProfile,\r\n mazeMarketPlaceDescription\r\n },\r\n onDescription,\r\n onObjectives,\r\n onOutline,\r\n onShareProfile,\r\n onMarketPlaceDescription,\r\n isMarketPlace,\r\n t\r\n } = props\r\n\r\n const handleDescription = (val, field) => {\r\n switch (field) {\r\n case 'description':\r\n onDescription(val)\r\n break\r\n case 'maze_obj':\r\n onObjectives(val)\r\n break\r\n case 'maze_outline':\r\n onOutline(val)\r\n break\r\n case 'maze_description':\r\n onMarketPlaceDescription(val)\r\n break\r\n default:\r\n break\r\n }\r\n }\r\n\r\n const generateEditor = (title, params, description) => {\r\n return (\r\n \r\n \r\n {getFieldDecorator(params, {\r\n rules: [\r\n {\r\n required: params === 'description' ? false : true,\r\n message: t(`v4:${params}`)\r\n }\r\n ],\r\n initialValue: description\r\n })(\r\n {\r\n if (\r\n e.keyCode === 32 &&\r\n (e.target.value.charAt(e.target.selectionStart - 1) === ' ' ||\r\n e.target.value.charAt(e.target.selectionStart) === ' ')\r\n ) {\r\n e.preventDefault()\r\n }\r\n }}\r\n onChange={e => handleDescription(e.target.value, params)}\r\n style={{ fontSize: '1.6rem', resize: 'none' }}\r\n wrap={'soft'}\r\n />\r\n )}\r\n \r\n
\r\n )\r\n }\r\n return (\r\n \r\n \r\n
\r\n {isMarketPlace && (\r\n \r\n {getFieldDecorator('is_shared_profile', {\r\n valuePropName: 'checked',\r\n initialValue: mazeShareProfile\r\n })(\r\n onShareProfile(e.target.checked)}\r\n >\r\n {t('v3:allow_sharing_trainer_info')}\r\n \r\n )}\r\n \r\n )}\r\n
\r\n )\r\n}\r\n\r\nexport { BottomSection }\r\n","import React, { Component, createRef } from 'react'\r\nimport _ from 'lodash'\r\nimport {\r\n Form,\r\n Icon,\r\n Input,\r\n InputNumber,\r\n Button,\r\n Spin,\r\n Modal,\r\n Select,\r\n message\r\n} from 'antd'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nimport { Row, Col } from '../../../../../styles'\r\nimport { config, general, topics } from '../../../../../constants'\r\nimport { Editor } from '../../../../../components/ImageEditor'\r\nimport { PopupMedia } from '../../../../../views/Library/internal'\r\nimport { EditImageContainer } from '../../../../../components/TextOnImage'\r\nimport CourseDropzone from '../../../../Courses/Create/internal/CourseDropzone'\r\n\r\nimport Badge from '../../../../Courses/Create/nestedComponents/CourseCreateMain/components/Badge'\r\nimport Certificate from '../../../../Courses/Create/nestedComponents/CourseCreateMain/components/Certificate'\r\nimport { AudioModalTitleIcon } from '../../../../Courses/Create/nestedComponents/PageConstructor/internal/PageMaker/components/Icons'\r\nimport FormHeader from './FormHeader'\r\nimport MazeRightPanel from './MazeRightPanel'\r\nimport { TopSection, MiddleSection, BottomSection } from './Marketplace'\r\nimport {\r\n AllowAccess,\r\n ImageSelect,\r\n TopicsInput\r\n} from '../../../../../components/Form'\r\nimport './styles.scss'\r\n\r\nclass MazeCreate extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isMarketPlace: false,\r\n topics: [],\r\n isCover: false,\r\n isCoverLoading: false,\r\n isBackgroundType: '',\r\n mazeBackground: null,\r\n mazeAvatar: null,\r\n isGettingVoice: false,\r\n mazeBackgroundError: false,\r\n mazeVoiceError: false,\r\n openBadgeModal: false,\r\n openCertificateModal: false,\r\n isCertificateLoading: false,\r\n isBadgeLoading: false,\r\n genderType: ''\r\n }\r\n this.imageRef = createRef()\r\n this.audioRef = createRef()\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n maze: {\r\n mazeById: { id }\r\n },\r\n getVoices\r\n } = this.props\r\n\r\n getVoices()\r\n\r\n if (id) {\r\n this.startMazeCreation()\r\n this.checkMarketplaceCompletion()\r\n }\r\n }\r\n\r\n startMazeCreation = () => {\r\n const {\r\n maze: {\r\n mazeById: {\r\n id,\r\n topic_list = [],\r\n background_image_data,\r\n avatar,\r\n avatar_voice\r\n }\r\n }\r\n } = this.props\r\n\r\n if (id) {\r\n this.setState(\r\n {\r\n topics: topic_list,\r\n mazeBackground: background_image_data,\r\n mazeAvatar: avatar\r\n },\r\n () => {\r\n this.filterVoicesByGender(avatar_voice || null)\r\n }\r\n )\r\n }\r\n }\r\n\r\n getOldLanguage = voiceType => {\r\n const { voices } = this.state\r\n const voiceItem =\r\n voices && voices.filter(item => item.voiceType === voiceType)[0]\r\n if (voiceItem) {\r\n this.handleLanguageSelect(voiceItem.language, true)\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (prevProps !== this.props) {\r\n const {\r\n audioSynthesizer: { loadAudioData },\r\n maze: { mazeById }\r\n } = this.props\r\n\r\n const id = mazeById && mazeById.id\r\n\r\n const prevId = prevProps.maze.mazeById\r\n\r\n if (id !== prevId && prevId.id) {\r\n this.startMazeCreation()\r\n }\r\n\r\n if (loadAudioData) {\r\n var voices = []\r\n Promise.resolve(\r\n Object.keys(loadAudioData).forEach(item => {\r\n voices.push({\r\n voiceType: item,\r\n ...loadAudioData[item]\r\n })\r\n })\r\n ).then(() =>\r\n this.setState({\r\n voices\r\n })\r\n )\r\n }\r\n }\r\n }\r\n\r\n sortVoicesByLanguage = (voices = [], avatarVoice) => {\r\n var sorted = {}\r\n for (var i = 0, max = voices.length; i < max; i++) {\r\n if (sorted[voices[i].language] === undefined) {\r\n sorted[voices[i].language] = []\r\n }\r\n sorted[voices[i].language].push(voices[i])\r\n }\r\n\r\n var languages = []\r\n Object.keys(sorted).forEach(item => languages.push(item))\r\n\r\n this.setState(\r\n {\r\n voices,\r\n voicesByLanguage: sorted,\r\n languages\r\n },\r\n () => {\r\n if (avatarVoice) {\r\n this.getOldLanguage(avatarVoice)\r\n }\r\n }\r\n )\r\n }\r\n\r\n handleTopicsChange = newValue => {\r\n this.setState(\r\n {\r\n topics: newValue\r\n },\r\n () => {\r\n this.handleValue('mazeTags', _.map(newValue, 'id'))\r\n }\r\n )\r\n }\r\n\r\n handleSubmit = _.debounce(() => {\r\n const {\r\n mazeBuilder: { mazeId, saving },\r\n maze: { updatingMaze }\r\n } = this.props\r\n\r\n if ((mazeId && updatingMaze) || saving) {\r\n this.handleSubmit()\r\n } else {\r\n this.submitData()\r\n }\r\n }, 1000)\r\n\r\n checkMarketplaceCompletion = () => {\r\n const {\r\n mazeBuilder: {\r\n mazeId,\r\n mazeTitle,\r\n mazeImg,\r\n mazeCategory,\r\n mazeIsFree,\r\n mazeMarketPlaceDescription,\r\n mazeObjectives,\r\n mazeOutline,\r\n mazePrice,\r\n mazeVideoLink\r\n }\r\n } = this.props\r\n let data = {\r\n mazeId,\r\n mazeTitle,\r\n mazeImgId: mazeImg.id,\r\n mazeCategory,\r\n mazeIsFree,\r\n mazeMarketPlaceDescription,\r\n mazeObjectives,\r\n mazeOutline,\r\n mazePrice,\r\n mazeVideoLink\r\n }\r\n let errorData = Object.keys(data).filter(k => {\r\n if (data[k] === '' || data[k] === undefined || data[k] === null) {\r\n return true\r\n } else {\r\n return false\r\n }\r\n })\r\n\r\n if (errorData.length !== 0) {\r\n message.error('Marketplace information is not complete.')\r\n } else {\r\n message.success('Marketplace information is complete.')\r\n }\r\n }\r\n\r\n submitData = async () => {\r\n const {\r\n form,\r\n user: {\r\n info: { username, bio, linkedin, first_name, last_name, email, avatar }\r\n },\r\n mazeBuilder: {\r\n mazeOrganiser,\r\n mazeImg,\r\n mazeId,\r\n mazeDescription,\r\n mazeVoice,\r\n mazeVoiceType,\r\n mazeVoiceAccent,\r\n mazeSelectedVoice,\r\n mazeBadgeId,\r\n mazeCertId,\r\n mazeAvatarId,\r\n mazeCategory,\r\n mazeIsFree,\r\n mazePrice,\r\n mazeVideoLink,\r\n mazeObjectives,\r\n mazeOutline,\r\n mazePassScore,\r\n mazeMarketPlaceDescription,\r\n mazeShareProfile,\r\n mazeHostEmails\r\n },\r\n mazeBuilderActions: { createMaze },\r\n updateMaze\r\n } = this.props\r\n const { topics, mazeBackground, mazeAvatar } = this.state\r\n try {\r\n // Validate form fields\r\n await form.validateFields((err, values) => {\r\n if (mazeBackground) {\r\n this.setState({ mazeBackgroundError: false })\r\n if (mazeVoice) this.setState({ mazeVoiceError: false })\r\n else this.setState({ mazeVoiceError: true })\r\n } else this.setState({ mazeBackgroundError: true })\r\n\r\n if (\r\n !values.title ||\r\n !mazePassScore ||\r\n !mazeImg.id ||\r\n !mazeBackground ||\r\n !mazeVoice\r\n // (avatar_voice !== null) ||\r\n // (mazeVoiceType !== \"elevenlabs\" && !mazeAvatar)\r\n ) {\r\n throw new Error('Required fields are missing.')\r\n }\r\n\r\n if (err) {\r\n const errorParams = Object.keys(err)\r\n if (\r\n errorParams.find(\r\n item => item !== 'mazeLayers' && item !== 'mazeOptions'\r\n )\r\n ) {\r\n throw new Error('Form validation failed.')\r\n }\r\n }\r\n\r\n const {\r\n maze: {\r\n mazeById: { voice_type, voice_accent, avatar_id, voice_name }\r\n }\r\n } = this.props\r\n\r\n console.log('LOG mazeVoiceType: ', mazeVoiceType)\r\n console.log('LOG mazeAvatarId: ', mazeAvatarId)\r\n console.log('LOG mazeVoice: ', mazeVoice)\r\n console.log('LOG voice_type: ', voice_type)\r\n\r\n // Prepare the maze data\r\n let mazeData = {\r\n body: {\r\n title: values.title,\r\n minimum_pass_score: mazePassScore,\r\n avatar_voice: mazeVoice, // voice name\r\n author: mazeOrganiser,\r\n cover_id: mazeImg.id,\r\n background_image: Number(mazeBackground && mazeBackground.id),\r\n avatar_id:\r\n mazeVoiceType === 'elevenlabs' ||\r\n mazeVoiceType === 'elevenlabs_clone_voice'\r\n ? mazeAvatarId\r\n : Number(mazeAvatar && mazeAvatar.id), //gender\r\n voice_type: mazeVoiceType,\r\n voice_accent:\r\n mazeVoiceType === 'traditional' ? '' : mazeVoiceAccent,\r\n voice_name:\r\n mazeVoiceType === 'traditional' ? '' : mazeSelectedVoice,\r\n voice_age: '',\r\n description: mazeDescription,\r\n host_emails: mazeHostEmails,\r\n badge_id: mazeBadgeId,\r\n certificate_id: mazeCertId\r\n },\r\n action: 'create_programme'\r\n }\r\n mazeData.body.topics = JSON.stringify(_.map(topics, 'id'))\r\n\r\n // If mazeId exists, update the maze; otherwise, create a new one\r\n if (mazeId) {\r\n if (mazeCategory) {\r\n mazeData.body.marketplace = {\r\n category_id: mazeCategory,\r\n is_free: mazeIsFree,\r\n price: !mazeIsFree && !mazePrice ? '5' : mazePrice,\r\n video_link: mazeVideoLink,\r\n course_obj: mazeObjectives,\r\n course_outline: mazeOutline,\r\n is_shared_profile: mazeShareProfile,\r\n course_description: mazeMarketPlaceDescription,\r\n bio,\r\n username,\r\n bio,\r\n linkedin,\r\n first_name,\r\n last_name,\r\n email,\r\n avatar\r\n }\r\n }\r\n // Update the maze\r\n updateMaze({\r\n id: mazeId,\r\n data: mazeData.body\r\n })\r\n } else {\r\n // Create a new maze\r\n createMaze(mazeData)\r\n }\r\n })\r\n } catch (error) {\r\n console.error('Error submitting maze data:', error.message)\r\n // Optionally, display an error message to the user\r\n message.error(error.message)\r\n }\r\n }\r\n\r\n handleValue = (field, value) => {\r\n const { mazeBuilderActions } = this.props\r\n mazeBuilderActions.handleMazeInput(field, value)\r\n this.handleSubmit()\r\n }\r\n\r\n handleTitle = _.debounce(v => this.handleValue('mazeTitle', v), 1000)\r\n handleCategory = _.debounce(v => this.handleValue('mazeCategory', v), 1000)\r\n handleSwitch = _.debounce(v => this.handleValue('mazeIsFree', v), 1000)\r\n handlePrice = _.debounce(v => this.handleValue('mazePrice', v), 1000)\r\n handleVideoLink = _.debounce(v => this.handleValue('mazeVideoLink', v), 1000)\r\n handleOrganiser = _.debounce(v => this.handleValue('mazeOrganiser', v), 1000)\r\n handleTopics = _.debounce(v => this.handleValue('mazeTags', v), 1000)\r\n handleDescription = _.debounce(\r\n v => this.handleValue('mazeDescription', v),\r\n 1000\r\n )\r\n handleMarketPlaceDescription = _.debounce(\r\n v => this.handleValue('mazeMarketPlaceDescription', v),\r\n 1000\r\n )\r\n handleObjectives = _.debounce(\r\n v => this.handleValue('mazeObjectives', v),\r\n 1000\r\n )\r\n handleProfile = _.debounce(v => this.handleValue('mazeShareProfile', v), 1000)\r\n handleOutline = _.debounce(v => this.handleValue('mazeOutline', v), 1000)\r\n handlePassScore = _.debounce(v => this.handleValue('mazePassScore', v), 1000)\r\n handleLayers = _.debounce(v => this.handleValue('mazeLayers', v), 1000)\r\n handleOptions = _.debounce(v => this.handleValue('mazeOptions', v), 1000)\r\n\r\n handleVoiceSelect = type => {\r\n this.getVoiceSample(type)\r\n this.handleValue('mazeVoice', type)\r\n this.setState({ selectedAudio: type }, () => this.handleSubmit())\r\n }\r\n\r\n handleElevenLabsVoiceSelect = type => {\r\n console.log('ElevenLabs types', type)\r\n if (type.selectedVoiceType === 'elevenlabs_clone_voice') {\r\n this.setState({\r\n genderType: type.selectedGender\r\n })\r\n }\r\n\r\n if (Object.keys(type).length > 0) {\r\n if (type.selectedGender === 'male') {\r\n this.handleValue(\r\n 'mazeAvatarId',\r\n process.env.NODE_ENV === 'development' ? 48683 : 1238494\r\n ) // dev\r\n //this.handleValue('mazeAvatarId', 1238494) // prod\r\n } else {\r\n this.handleValue(\r\n 'mazeAvatarId',\r\n process.env.NODE_ENV === 'development' ? 48682 : 1238493\r\n ) // dev\r\n //this.handleValue('mazeAvatarId', 1238493) // prod\r\n }\r\n\r\n this.handleValue('mazeVoice', type.selectedId)\r\n this.handleValue('mazeVoiceType', type.selectedVoiceType)\r\n this.handleValue('mazeVoiceAccent', type.selectedAccent)\r\n this.handleValue('mazeSelectedVoice', type.selectedVoice)\r\n }\r\n }\r\n\r\n getVoiceSample = audioType => {\r\n const {\r\n audioSynthesizer: { loadAudioData }\r\n } = this.props\r\n\r\n this.setState(\r\n {\r\n isGettingVoice: false,\r\n audioSrc: loadAudioData[audioType].sample\r\n },\r\n () => {\r\n if (this.audioRef.current) {\r\n this.audioRef.current.pause()\r\n this.audioRef.current.load()\r\n this.audioRef.current.play()\r\n }\r\n }\r\n )\r\n }\r\n onCoverChange = async coverObj => {\r\n const { mazeBuilderActions } = this.props\r\n await mazeBuilderActions.handleMazeInput('mazeImg', coverObj)\r\n this.handleSubmit()\r\n }\r\n onDrop = (file, handleAfterUpload, handlebeforeUpload) => {\r\n const image = URL.createObjectURL(file)\r\n this.handleAfterUpload = handleAfterUpload\r\n this.handlebeforeUpload = handlebeforeUpload\r\n this.setState({\r\n file,\r\n image\r\n })\r\n }\r\n\r\n useCanva = type => {\r\n var script = document.createElement('script')\r\n const url = 'https://sdk.canva.com/designbutton/v2/api.js'\r\n script.src = url\r\n script.onload = () => {\r\n if (window.Canva && window.Canva.DesignButton) {\r\n window.Canva.DesignButton.initialize({\r\n apiKey: config.canvaKey\r\n }).then(api => {\r\n api.createDesign({\r\n design: {\r\n type: type\r\n },\r\n onDesignPublish: ({ exportUrl, designTitle }) => {\r\n this.handleImageUrl(exportUrl, designTitle, type)\r\n }\r\n })\r\n })\r\n }\r\n }\r\n document.body.appendChild(script)\r\n }\r\n\r\n handleImageUrl = async (url, title) => {\r\n let blob = await fetch(url).then(r => r.blob())\r\n let data = await new Promise(resolve => {\r\n let reader = new FileReader()\r\n reader.onload = () => resolve(reader.result)\r\n reader.readAsDataURL(blob)\r\n })\r\n const body = {\r\n croppedImage: data,\r\n lastModifiedDate: new Date(),\r\n name: title.split(' ').join('_'),\r\n size: blob.size,\r\n type: blob.type\r\n }\r\n this.handleUploadImage(body)\r\n }\r\n\r\n handleUploadImage = file => {\r\n const { upload, mazeBuilderActions } = this.props\r\n this.handlebeforeUpload && this.handlebeforeUpload()\r\n this.setState({\r\n isCoverLoading: true\r\n })\r\n return upload(file)\r\n .then(res => {\r\n const { id, link } = res\r\n mazeBuilderActions.handleMazeInput('mazeImgId', id)\r\n mazeBuilderActions.handleMazeInput('mazeImg', link)\r\n this.handleImageSuccess(res)\r\n })\r\n .catch(() => {\r\n this.handleAfterUpload && this.handleAfterUpload()\r\n })\r\n }\r\n\r\n handleImageSuccess = res => {\r\n const { id } = res\r\n\r\n if (id) {\r\n this.setState(\r\n {\r\n isCover: false,\r\n isCoverLoading: false,\r\n file: null,\r\n image: null,\r\n isImageLoading: false\r\n },\r\n () => {\r\n this.handleAfterUpload && this.handleAfterUpload()\r\n }\r\n )\r\n }\r\n this.handleSubmit()\r\n }\r\n\r\n handleClosePopup = type => {\r\n if (type === general.SAVE) {\r\n this.setState({\r\n image: null\r\n })\r\n } else {\r\n this.setState({\r\n image: null,\r\n file: null\r\n })\r\n this.handleAfterUpload()\r\n }\r\n }\r\n\r\n hideModal = () => {\r\n this.setState({\r\n openImagesModal: false,\r\n isBackgroundType: '',\r\n modalOpen: false\r\n })\r\n }\r\n\r\n hideVoiceModal = () => {\r\n this.setState({\r\n openCreateVoiceModal: false\r\n })\r\n }\r\n\r\n onShowDetailModal = src => {\r\n this.setState({ src: src, isShowDetailModal: true })\r\n }\r\n\r\n onHideDetailModal = () => {\r\n this.setState({ isShowDetailModal: false })\r\n }\r\n\r\n handleFileUpload = files => {\r\n if (!files) return\r\n this.setState({ selectedAudio: files[0] })\r\n }\r\n\r\n handleInsertData = (privateMedia, publicMedia, orgMedia) => {\r\n let tempData = []\r\n if (privateMedia) {\r\n const { rows: privateData } = privateMedia\r\n privateData.forEach(data => {\r\n tempData.push(data)\r\n })\r\n }\r\n\r\n if (publicMedia) {\r\n const { rows: publicData } = publicMedia\r\n publicData.forEach(publicData => {\r\n tempData.push(publicData)\r\n })\r\n }\r\n\r\n if (orgMedia) {\r\n const { rows: orgData } = orgMedia\r\n orgData.forEach(orgData => {\r\n tempData.push(orgData)\r\n })\r\n }\r\n\r\n const { isBackgroundType } = this.state\r\n\r\n const selectedItem = _.head(tempData.filter(value => value.isSelected))\r\n\r\n if (isBackgroundType === 'scene') {\r\n this.handleValue('mazeBackground', selectedItem.id)\r\n this.handleValue('mazeVoice', '')\r\n this.setState(\r\n {\r\n isBackgroundType: '',\r\n selectedLanguage: undefined,\r\n mazeBackground: selectedItem,\r\n isBackgroundLoading: false,\r\n openImagesModal: false,\r\n audioSrc: ''\r\n },\r\n () => {\r\n this.handleSubmit()\r\n }\r\n )\r\n } else if (isBackgroundType === 'avatar') {\r\n this.handleValue('mazeAvatarId', selectedItem.id)\r\n this.setState(\r\n {\r\n isBackgroundType: '',\r\n selectedLanguage: undefined,\r\n mazeAvatar: selectedItem,\r\n isBackgroundLoading: false,\r\n openImagesModal: false,\r\n audioSrc: ''\r\n },\r\n () => {\r\n this.handleSubmit()\r\n this.filterVoicesByGender()\r\n }\r\n )\r\n } else {\r\n this.setState({\r\n selectedItem\r\n })\r\n }\r\n }\r\n\r\n filterVoicesByGender = avatarVoice => {\r\n const {\r\n voices,\r\n mazeAvatar: { avatar_gender }\r\n } = this.state\r\n\r\n const voicesByGender =\r\n voices &&\r\n voices.filter(\r\n item =>\r\n item.gender.toLowerCase() === avatar_gender &&\r\n avatar_gender.toLowerCase()\r\n )\r\n\r\n this.sortVoicesByLanguage(voicesByGender, avatarVoice)\r\n }\r\n\r\n handleFileInsert = item => {\r\n const imageEditorInst = this.imageRef.current\r\n ? this.imageRef.current.imageEditorInst\r\n : null\r\n\r\n // Check if imageEditorInst exists before accessing its properties\r\n const isEdited = imageEditorInst\r\n ? !imageEditorInst.isEmptyUndoStack()\r\n : false\r\n\r\n if (isEdited) {\r\n // Upload the edited image\r\n const data = imageEditorInst.toDataURL()\r\n const { mazeBuilderActions } = this.props\r\n const { id } = item\r\n\r\n // Set courseImgId and courseImg in courseBuilder state\r\n mazeBuilderActions.handleMazeInput('mazeImgId', id)\r\n mazeBuilderActions.handleMazeInput('mazeImg', data)\r\n\r\n const body = {\r\n croppedImage: data,\r\n lastModifiedDate: new Date(),\r\n name: item.filename,\r\n size: item.file_size,\r\n type: item.media_mime_type\r\n }\r\n\r\n this.setState(\r\n {\r\n isImageLoading: true,\r\n modalOpen: false,\r\n selectedItem: null\r\n },\r\n () => {\r\n // Upload the edited image\r\n this.handleUploadImage(body)\r\n }\r\n )\r\n } else {\r\n // Use the original image URL\r\n const { mazeBuilderActions } = this.props\r\n const { id, link } = item\r\n\r\n // Set courseImgId and courseImg in courseBuilder state\r\n mazeBuilderActions.handleMazeInput('mazeImgId', id)\r\n mazeBuilderActions.handleMazeInput('mazeImg', link)\r\n\r\n this.setState(\r\n {\r\n isImageLoading: true,\r\n modalOpen: false,\r\n selectedItem: null\r\n },\r\n () => {\r\n // Process the original image URL\r\n this.handleImageSuccess(item)\r\n }\r\n )\r\n }\r\n }\r\n\r\n hidePreviewModal = () => {\r\n this.setState({\r\n selectedItem: null\r\n })\r\n }\r\n\r\n handleShowTextModal = () => {\r\n this.setState({ showTextModal: !this.state.showTextModal })\r\n }\r\n\r\n onToggleMarketPlace = () => {\r\n this.setState({ isMarketPlace: !this.state.isMarketPlace }, () => {\r\n if (!this.state.isMarketPlace) {\r\n this.checkMarketplaceCompletion()\r\n }\r\n })\r\n }\r\n\r\n handleNext = () => {\r\n const {\r\n history,\r\n id,\r\n mazeBuilder: { mazeId }\r\n } = this.props\r\n if (!mazeId) return\r\n history.push(`/maze/${mazeId || id}/edit/scenario`)\r\n }\r\n\r\n handleBackgroundChange = () => {\r\n this.setState({\r\n isBackgroundType: 'scene',\r\n openImagesModal: true\r\n })\r\n }\r\n\r\n handleAvatarChange = () => {\r\n const {\r\n maze: {\r\n mazeById: { voice_type }\r\n }\r\n } = this.props\r\n const {\r\n mazeBuilder: { mazeVoiceType }\r\n } = this.props\r\n console.log('voice_type avatar change: ', voice_type)\r\n console.log('CHECK mazeVoiceType handleAvatarChange:', mazeVoiceType)\r\n if (voice_type) {\r\n this.handleValue('mazeVoiceType', voice_type)\r\n }\r\n this.setState({\r\n isBackgroundType: 'avatar',\r\n openImagesModal: true\r\n })\r\n }\r\n\r\n onAddVoice = () => {\r\n this.handleValue('mazeVoiceType', 'traditional')\r\n this.handleValue('mazeVoiceAccent', '')\r\n this.handleValue('mazeSelectedVoice', '')\r\n this.setState(\r\n {\r\n openCreateVoiceModal: true\r\n },\r\n () => {\r\n const {\r\n mazeBuilder: { mazeVoice }\r\n } = this.props\r\n const { audioSrc } = this.state\r\n // if (mazeVoice && !audioSrc) {\r\n // this.getVoiceSample(mazeVoice)\r\n // }\r\n }\r\n )\r\n }\r\n\r\n handleLanguageSelect = (val, isMount) => {\r\n const { voicesByLanguage } = this.state\r\n const filteredVoices = voicesByLanguage && voicesByLanguage[val]\r\n\r\n if (isMount) {\r\n this.setState({\r\n selectedLanguage: val,\r\n filteredVoices\r\n })\r\n } else {\r\n this.handleValue('mazeVoice', undefined)\r\n this.setState(\r\n {\r\n selectedLanguage: val,\r\n filteredVoices,\r\n audioSrc: ''\r\n },\r\n () => this.filterVoicesByGender()\r\n )\r\n }\r\n }\r\n\r\n validateLayers = (rule, value, callback) => {\r\n if (value && (value < 2 || value > 8)) {\r\n callback('Only 2 to 8 layers')\r\n }\r\n\r\n callback()\r\n }\r\n\r\n validateOptions = (rule, value, callback) => {\r\n if (value && (value < 2 || value > 4)) {\r\n callback('Only 2 to 4 options')\r\n }\r\n\r\n callback()\r\n }\r\n\r\n toggleBadgeModal = () => {\r\n this.setState(state => ({ openBadgeModal: !state.openBadgeModal }))\r\n }\r\n\r\n toggleCertificateModal = () => {\r\n this.setState(state => ({\r\n openCertificateModal: !state.openCertificateModal\r\n }))\r\n }\r\n\r\n badgePresentationUpload = (body, imageType) => {\r\n const { upload } = this.props\r\n this.toggleLoadingState(imageType)\r\n this.setState({ openBadgeModal: false, openCertificateModal: false })\r\n upload(body)\r\n .then(res => {\r\n const { id } = res\r\n this.toggleLoadingState(imageType)\r\n this.handleRewardImageUpload(imageType, id)\r\n })\r\n .catch(() => {\r\n this.toggleLoadingState(imageType)\r\n message.error('Error occured. Try Again !')\r\n })\r\n }\r\n\r\n toggleLoadingState = type => {\r\n if (type === 'Certificate') {\r\n this.setState(state => ({\r\n isCertificateLoading: !state.isCertificateLoading\r\n }))\r\n } else {\r\n this.setState(state => ({ isBadgeLoading: !state.isBadgeLoading }))\r\n }\r\n }\r\n\r\n handleRewardImageUpload = (type, id) => {\r\n const { mazeBuilderActions } = this.props\r\n if (type === 'Certificate') {\r\n mazeBuilderActions.handleMazeInput('mazeCertId', id)\r\n } else {\r\n mazeBuilderActions.handleMazeInput('mazeBadgeId', id)\r\n }\r\n this.handleSubmit()\r\n }\r\n\r\n handleMarketPlaceOption = marketPlaceOption => {\r\n this.props.mazeBuilderActions.handleMazeInput(\r\n 'mazeMarketplaceOption',\r\n marketPlaceOption\r\n )\r\n this.handleSubmit()\r\n }\r\n\r\n onEmailsChange = emails => {\r\n this.handleValue('mazeHostEmails', emails)\r\n }\r\n\r\n handleVoiceType = value => {\r\n const { mazeBuilderActions } = this.props\r\n mazeBuilderActions.handleMazeInput('mazeVoiceType', value)\r\n }\r\n\r\n render() {\r\n const {\r\n form,\r\n form: { getFieldDecorator },\r\n user: { info },\r\n mazeBuilder: {\r\n mazeId,\r\n mazeImg,\r\n mazeTitle,\r\n mazeLayers,\r\n mazeOptions,\r\n mazeOrganiser,\r\n mazePassScore,\r\n mazeBadgeId,\r\n mazeCertId,\r\n mazeVoice,\r\n mazeVoiceType,\r\n mazeSelectedVoice,\r\n mazeVoiceAccent,\r\n mazeAvatarId,\r\n mazeHostEmails\r\n },\r\n maze: { fetchById, updatingMaze },\r\n t\r\n } = this.props\r\n\r\n const {\r\n maze: {\r\n mazeById: { voice_type, voice_accent, avatar_id, voice_name }\r\n }\r\n } = this.props\r\n // const { maze: { mazeById: { voice_accent, avatar_id, voice_name } } } = this.props\r\n\r\n console.log('CHECK MazeCreate voice_type:', voice_type)\r\n console.log('CHECK MazeCreate mazeVoiceType:', mazeVoiceType)\r\n const selectInput = document.getElementById('react-select-2-input')\r\n if (selectInput) {\r\n selectInput.maxLength = 50\r\n }\r\n\r\n const modal_style = {\r\n overflow: 'auto',\r\n top: 0,\r\n left: 0,\r\n bottom: 0,\r\n right: 0\r\n }\r\n\r\n const {\r\n file,\r\n image,\r\n topics,\r\n audioSrc,\r\n modalOpen,\r\n languages,\r\n selectedItem,\r\n isBackgroundType,\r\n isMarketPlace,\r\n filteredVoices,\r\n mazeBackground,\r\n mazeAvatar,\r\n isImageLoading,\r\n isCoverLoading,\r\n isBadgeLoading,\r\n openBadgeModal,\r\n openImagesModal,\r\n selectedLanguage,\r\n isBackgroundLoading,\r\n mazeBackgroundError,\r\n mazeVoiceError,\r\n openCreateVoiceModal,\r\n isCertificateLoading,\r\n openCertificateModal,\r\n genderType\r\n } = this.state\r\n\r\n const audioModalTitle = (\r\n \r\n
\r\n {image && (\r\n \r\n
\r\n \r\n \r\n {t('buttons:save_for_later')}{' '}\r\n \r\n
\r\n \r\n \r\n {t('buttons:next')}\r\n
\r\n \r\n
\r\n {selectedItem && (\r\n \r\n \r\n {general.CANCEL}\r\n \r\n this.handleFileInsert(selectedItem)}\r\n >\r\n {general.INSERT}\r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n {openBadgeModal && (\r\n \r\n {!isAdmin && (\r\n \r\n {t('labels:maze')}\r\n \r\n )}\r\n {isAdmin && (\r\n \r\n {t('labels:maze')}\r\n \r\n )}\r\n
\r\n \r\n
\r\n {t('title')}
\r\n {t('maze_subtitle')}
\r\n \r\n {t('labels:check_user')}\r\n
\r\n \r\n }\r\n onCancel={this.closeCheckModal}\r\n footer={[\r\n ,\r\n \r\n \r\n {!_.isEmpty(isNotExist) &&\r\n isNotExist.map((item, index) => (\r\n
\r\n \r\n )}\r\n {!_.isEmpty(isNotInOrg) && (\r\n {t('labels:user_not_exist')}
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n \r\n {!_.isEmpty(isNotInOrg) &&\r\n isNotInOrg.map((item, index) => (\r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n {t('labels:user_not_exist_in_org')}\r\n
\r\n\r\n
\r\n ))}\r\n \r\n {index + 1}. {item.email}\r\n
\r\n \r\n
\r\n \r\n {this.checkSelectedType(1) && (\r\n
\r\n \r\n \r\n {general.admin_only}\r\n \r\n
\r\n )}\r\n {(this.checkSelectedType(2) || this.checkSelectedType(3)) && (\r\n \r\n \r\n {general.send_email}\r\n \r\n
\r\n )}\r\n\r\n \r\n history.push(`/maze/${mazeId}/edit/scenario`)}\r\n >\r\n {t('v4:back_to_maze')}\r\n \r\n
\r\n \r\n \r\n {t('v4:publish_maze')}\r\n \r\n
\r\n \r\n
\r\n \r\n {'Select Images'}
\r\n \r\n {'You can select multiple images for the scenario.'}\r\n
\r\n \r\n Click to preview\r\n
\r\n \r\n }\r\n bordered\r\n dataSource={images}\r\n renderItem={item => {\r\n return (\r\n\r\n {!isScenario && isDeadEndOption && (\r\n \r\n {getFieldDecorator('possible_scenario_code', {\r\n initialValue: scenarioCode\r\n })(\r\n \r\n {scenarios &&\r\n scenarios.map(scenario => (\r\n \r\n ))}\r\n \r\n )}\r\n \r\n )}\r\n \r\n {getFieldDecorator('course', {\r\n initialValue: course\r\n })(\r\n \r\n {courses &&\r\n courses.map(item => (\r\n \r\n \r\n {item.title}\r\n \r\n \r\n ))}\r\n \r\n )}\r\n \r\n \r\n {getFieldDecorator('lessons', {\r\n initialValue: lesson\r\n })(\r\n \r\n {list &&\r\n list.map(item => (\r\n \r\n ))}\r\n \r\n )}\r\n \r\n {/* {isScenario && (\r\n \r\n )} */}\r\n {isScenario && (\r\n <>\r\n Score\r\n \r\n {getFieldDecorator('scene_type', {\r\n initialValue: selectedSceneType\r\n })(\r\n \r\n {Object.values(sceneTypes).map((item, index) => (\r\n \r\n ))}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n isImageSelection\r\n ? this.toggleImageSelectModal()\r\n : this.toggleImageModal('3d')\r\n }\r\n style={{\r\n borderColor:\r\n (isImageSelection &&\r\n image_list &&\r\n image_list.length === 0) ||\r\n (is3DSelection &&\r\n selected3DModel &&\r\n !selected3DModel.link)\r\n ? 'red'\r\n : '#d9d9d9'\r\n }}\r\n >\r\n
\r\n \r\n \r\n {isImageSelection && (\r\n <>\r\n Video\r\n \r\n
\r\n Score 1 - 5
}\r\n \r\n
\r\n )}\r\n\r\n Uploading video...
\r\n \r\n\r\n {!isScenario && (\r\n
\r\n \r\n this.handleValue(e.target.value)}\r\n style={{ borderColor: content ? '#d9d9d9' : 'red' }}\r\n />\r\n {!isScenario && (\r\n \r\n {content.length + ' / 78'}\r\n \r\n )}\r\n
\r\n {!isScenario && showDeadEndOption && (\r\n <>\r\n \r\n {isDeadEndOption && Dead End }{' '}\r\n \r\n isDeadEndOption\r\n ? handleDeadEnd(templateId, true)\r\n : handleDeadEnd(templateId)\r\n }\r\n >\r\n {isDeadEndOption ? 'Unmark' : 'Mark'} as deadend\r\n \r\n
\r\n \r\n )}\r\n {(isOptionDelete || isScenarioDelete) && (\r\n \r\n
\r\n\r\n {editImage && (\r\n \r\n \r\n {general.CANCEL}\r\n \r\n this.handleFileInsert(editImage)}\r\n >\r\n {general.INSERT}\r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Form.create({ name: 'template' })(Template)\r\n","import { connect } from 'react-redux'\r\nimport { bindActionCreators } from 'redux'\r\n\r\nimport actions from '../../../../../../store/actions'\r\nimport * as courseBuilderActions from '../../../../../../store/actions/courseBuilder'\r\n\r\nimport Template from './Template'\r\n\r\nexport default connect(\r\n state => ({\r\n courses: state.courses,\r\n audioSynthesizer: state.audioSynthesizer,\r\n courseBuilder: state.courseBuilder,\r\n library: state.library\r\n }),\r\n dispatch => ({\r\n upload: (file, opts) => dispatch(actions.library.upload(file, opts)),\r\n getWorkshopCourses: params =>\r\n dispatch(actions.courses.getWorkshopCourses(params)),\r\n getLessonsById: id => dispatch(courseBuilderActions.getLessonsList(id)),\r\n getVoices: bindActionCreators(\r\n actions.audioSynthesizer.listTTSAudioSynthesizer,\r\n dispatch\r\n )\r\n })\r\n)(Template)\r\n","export const flattenTree = treeObj => {\r\n let flatten = (children, getChildren, level, parent) =>\r\n Array.prototype.concat.apply(\r\n children.map(x => ({ ...x, level: level || 1, parent: parent || null })),\r\n children.map(x =>\r\n flatten(getChildren(x) || [], getChildren, (level || 1) + 1, x.code)\r\n )\r\n )\r\n let extractChildren = x => x.children\r\n let flat = flatten(extractChildren(treeObj), extractChildren).map(\r\n x => delete x.children && x\r\n )\r\n return flat\r\n}\r\n\r\nexport const getNestedChildren = (list, codeAttr, parentAttr, childrenAttr) => {\r\n if (!codeAttr) codeAttr = 'code'\r\n if (!parentAttr) parentAttr = 'parent'\r\n if (!childrenAttr) childrenAttr = 'children'\r\n\r\n console.log('List', list)\r\n\r\n var treeList = []\r\n var lookup = {}\r\n list.forEach(obj => {\r\n lookup[obj[codeAttr]] = obj\r\n obj[childrenAttr] = []\r\n })\r\n list.forEach(obj => {\r\n if (obj[parentAttr] !== null) {\r\n if (lookup[obj[parentAttr]] !== undefined) {\r\n lookup[obj[parentAttr]][childrenAttr].push(obj)\r\n } else {\r\n //console.log('Missing Parent Data: ' + obj[parentAttr]);\r\n treeList.push(obj)\r\n }\r\n } else {\r\n treeList.push(obj)\r\n }\r\n })\r\n return treeList\r\n}\r\n","import MazeTree from './MazeTree'\r\n\r\nexport default MazeTree\r\n","import React, { useEffect, useState } from 'react'\r\nimport { Canvas, Node, Edge } from 'reaflow'\r\nimport { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'\r\nimport { Icon, Tooltip } from 'antd'\r\nimport './styles.scss'\r\nimport { getNestedChildren } from '../mazeHelper'\r\n\r\nconst MazeTree = ({\r\n data,\r\n showRightPanel,\r\n markDeadEnd,\r\n unmarkDeadEnd,\r\n goToTemplate\r\n}) => {\r\n const [nodes, setNodes] = useState([])\r\n const [links, setLinks] = useState([])\r\n const [dimensions, setDimensions] = useState({ width: 2000, height: 2000 })\r\n\r\n useEffect(() => {\r\n if (data) {\r\n customizeTreeData(data)\r\n }\r\n }, [data])\r\n\r\n const setWidthHeight = layout => {\r\n const padding = 200 // Add padding for better visibility\r\n setDimensions({\r\n width: Math.max(layout.width + padding, window.innerWidth),\r\n height: Math.max(layout.height + padding, window.innerHeight)\r\n })\r\n }\r\n\r\n const handleGoToTemplate = (e, code) => {\r\n if (e.detail === 2) {\r\n goToTemplate(code)\r\n }\r\n }\r\n\r\n const customizeTreeData = data => {\r\n const nest = getNestedChildren(data)\r\n if (nest && nest[0]) {\r\n generateIdealPath(data, nest[0])\r\n }\r\n }\r\n\r\n const generateIdealPath = (data, JSON = {}) => {\r\n let idealPath = []\r\n const checkIdealCondition = arr => {\r\n if (!arr || arr.length === 0) return\r\n arr.forEach(item => {\r\n if (item.values.is_ideal_option) {\r\n const scenario = item.children\r\n delete item.children\r\n idealPath.push(item)\r\n if (scenario.length === 0) return\r\n const scenarioChildren = scenario[0].children\r\n delete scenario[0].children\r\n idealPath.push(scenario[0])\r\n checkIdealCondition(scenarioChildren)\r\n }\r\n })\r\n }\r\n\r\n const getIdealPath = () => {\r\n if (JSON.code === 1) {\r\n const children = JSON.children\r\n delete JSON.children\r\n idealPath.push(JSON)\r\n checkIdealCondition(children)\r\n }\r\n }\r\n\r\n getIdealPath()\r\n\r\n const ids = new Set(idealPath.map(d => d.code))\r\n const merged = [...idealPath, ...data.filter(d => !ids.has(d.code))]\r\n const formattedData = merged.map(item => {\r\n const isIdealPath = idealPath.find(e => e.code===item.code)\r\n return isIdealPath ? { ...item, pathType: 'IDEAL' } : item\r\n })\r\n\r\n const newTreeData = formattedData.sort((a, b) => a.code - b.code)\r\n setLinksAndNodes(newTreeData)\r\n }\r\n\r\n const setLinksAndNodes = (data = []) => {\r\n let myLinks = []\r\n const newNodes = data.map(item => ({\r\n id: item.code,\r\n type: item.type,\r\n content: item.values && item.values.content,\r\n pathType: item.pathType,\r\n values: item.values,\r\n noChildren: item.children && item.children.length < 1,\r\n isDeadEnd: item.is_dead_end,\r\n index: item.index,\r\n height: 125,\r\n width: 250\r\n }))\r\n\r\n data.forEach(item => {\r\n if (item && item.parent) {\r\n let isNormalIdealPath = false\r\n const otherChildItem = data.find(el => el.code===item.parent)\r\n if (otherChildItem.pathType==='IDEAL' && item.pathType==='IDEAL') {\r\n isNormalIdealPath = true\r\n }\r\n myLinks.push({\r\n from: item.parent,\r\n to: item.code,\r\n id: `${item.parent}-${item.code}`,\r\n isIdealPath: isNormalIdealPath\r\n })\r\n }\r\n\r\n if (item && item.possible_scenario_code) {\r\n const possibleScenarioItem = data.filter(\r\n item => item.type==='Scenario'\r\n )[item.possible_scenario_code - 1]\r\n\r\n myLinks.push({\r\n to: possibleScenarioItem.code,\r\n from: item.code,\r\n id: `${item.code}-${possibleScenarioItem.code}`\r\n })\r\n }\r\n })\r\n\r\n setNodes(newNodes)\r\n setLinks(myLinks)\r\n }\r\n\r\n return (\r\n \r\n \r\n {({ zoomIn, zoomOut, resetTransform }) => (\r\n <>\r\n \r\n {showRightPanel && nodes.length > 0 && links.length > 0 && (\r\n \r\n (\r\n \r\n {event => (\r\n \r\n \r\n handleGoToTemplate(e, nodeProps.properties.id)\r\n }\r\n >\r\n {nodeProps.properties.type}{' '}\r\n {nodeProps.properties.index}\r\n {nodeProps.properties.noChildren && (\r\n \r\n nodeProps.properties.isDeadEnd\r\n ? unmarkDeadEnd(nodeProps.properties.id)\r\n : markDeadEnd(nodeProps.properties.id)\r\n }\r\n >\r\n {nodeProps.properties.isDeadEnd\r\n ? 'Unmark as deadend'\r\n : 'Mark as deadend'}\r\n
\r\n )}\r\n \r\n \r\n )}\r\n \r\n )}\r\n edge={edgeProps => (\r\n \r\n \r\n zoomIn(0.25)} />\r\n \r\n \r\n zoomOut(0.25)} />\r\n \r\n \r\n resetTransform()} />\r\n \r\n
\r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n","import React, { useEffect, useState } from 'react'\r\nimport {\r\n Modal,\r\n Form,\r\n Input,\r\n Select,\r\n Button,\r\n Icon,\r\n Upload,\r\n message,\r\n List,\r\n Typography,\r\n Tooltip,\r\n Checkbox,\r\n Spin,\r\n Alert,\r\n Result\r\n} from 'antd'\r\nimport {\r\n CheckCircleOutlined,\r\n LoadingOutlined,\r\n CloseCircleOutlined\r\n} from '@ant-design/icons'\r\n\r\nimport { useSelector, useDispatch } from 'react-redux'\r\nimport _ from 'lodash'\r\n\r\nimport './styles.scss'\r\nimport { api } from '../../../../../../services'\r\nimport { general } from '../../../../../../constants'\r\nimport { bytesToSize } from '../../../../../../utils'\r\nimport actions from '../../../../../../store/actions'\r\nimport history from '../../../../../../history'\r\n\r\nconst { Text } = Typography\r\n\r\nconst formFields = {\r\n end_goal: {\r\n value: 'End Goal',\r\n description: 'The ultimate objective or desired outcome of the scenario.'\r\n },\r\n problem_statement: {\r\n value: 'Problem Statement',\r\n description:\r\n 'A concise description of the challenge or issue to be addressed in the scenario.'\r\n },\r\n learner_role: {\r\n value: 'Learner Role',\r\n description:\r\n 'The specific role or position the learner is expected to assume within the scenario.'\r\n },\r\n depth: {\r\n value: 'Depth',\r\n description: 'The number of layers of scenarios within the metamaze'\r\n },\r\n no_of_options: {\r\n value: 'No of Options',\r\n description:\r\n 'The number of alternative choices or paths available to the learner within the scenario.'\r\n }\r\n}\r\n\r\nconst generationStatus = {\r\n in_progress: 'in_progress',\r\n completed: 'completed',\r\n error: 'error'\r\n}\r\n\r\nconst AiMazeGeneration = ({\r\n form,\r\n onMazeGenerated,\r\n onClose,\r\n status: generatedStatus\r\n}) => {\r\n const [isUploading, setIsUploading] = useState(false)\r\n const [isGenerating, setIsGenerating] = useState(false)\r\n const [fileList, setFileList] = useState([])\r\n const [fileError, setFileError] = useState('')\r\n const [uploadedFiles, setUploadedFiles] = useState([])\r\n const [fileUploadStatus, setFileUploadStatus] = useState({})\r\n const [isMediaLibrarySelected, setIsMediaLibrarySelected] = useState(false)\r\n const [status, setStatus] = useState('')\r\n\r\n const dispatch = useDispatch()\r\n const library = useSelector(state => state.library)\r\n const user = useSelector(state => state.user)\r\n const maze = useSelector(state => state.mazeBuilder)\r\n const { uploadProgress, uploadSuccess } = library\r\n\r\n useEffect(() => {\r\n if (generatedStatus) setStatus(handleGenerationStatus(generatedStatus))\r\n\r\n if (generatedStatus === generationStatus.in_progress) {\r\n checkMazeStatus()\r\n }\r\n }, [generatedStatus])\r\n\r\n useEffect(() => {\r\n checkFileError()\r\n }, [fileList])\r\n\r\n const checkMazeStatus = () => {\r\n setStatus(generationStatus.in_progress)\r\n api.maze\r\n .getMazeById(maze.mazeId)\r\n .then(res => {\r\n const mazeObj = res.data.data\r\n if (mazeObj && mazeObj.generated_status === 'in_progress') {\r\n _.delay(checkMazeStatus, 20000)\r\n } else if (mazeObj && mazeObj.generated_status === 'completed') {\r\n onMazeGenerated()\r\n setStatus('')\r\n } else if (mazeObj && mazeObj.generated_status === 'error') {\r\n setStatus(generationStatus.error)\r\n }\r\n })\r\n .catch(error => {\r\n console.error('Error checking maze status:', error)\r\n setStatus(generationStatus.error)\r\n })\r\n }\r\n\r\n const handleOk = async e => {\r\n e.preventDefault()\r\n form.validateFields(async (errors, values) => {\r\n if (!isMediaLibrarySelected && fileError) return\r\n if (!errors) {\r\n try {\r\n if (isMediaLibrarySelected) {\r\n setIsGenerating(true)\r\n await generateMaze(values)\r\n } else {\r\n // First, upload the files\r\n setIsUploading(true)\r\n const newFiles = await uploadFiles(fileList)\r\n setIsUploading(false)\r\n\r\n // Then, generate the maze with the uploaded file IDs\r\n setIsGenerating(true)\r\n const files = newFiles.map(item => item.path)\r\n await generateMaze(values, files)\r\n }\r\n } catch (err) {\r\n console.log(err)\r\n message.error('An error occurred during the process.')\r\n } finally {\r\n setIsUploading(false)\r\n setIsGenerating(false)\r\n }\r\n }\r\n })\r\n }\r\n\r\n const uploadFiles = async files => {\r\n setUploadedFiles([])\r\n setFileUploadStatus({})\r\n for (let i = 0; i < files.length; i++) {\r\n const file = files[i]\r\n try {\r\n setFileUploadStatus(prevStatus => ({\r\n ...prevStatus,\r\n [file.name]: 'uploading'\r\n }))\r\n const res = await dispatch(\r\n actions.library.upload(file.originFileObj, {\r\n ai_language: 'en-US',\r\n isAiEnabled: true\r\n })\r\n )\r\n const newFiles = [...uploadedFiles, res]\r\n setUploadedFiles(newFiles)\r\n setFileUploadStatus(prevStatus => ({\r\n ...prevStatus,\r\n [file.name]: 'success'\r\n }))\r\n\r\n return newFiles\r\n } catch (error) {\r\n console.error(`Error uploading file ${file.name}:`, error)\r\n message.error(`Failed to upload ${file.name}`)\r\n setFileUploadStatus(prevStatus => ({\r\n ...prevStatus,\r\n [file.name]: 'error'\r\n }))\r\n throw error\r\n }\r\n }\r\n }\r\n\r\n const generateMaze = async (values, fileList) => {\r\n const {\r\n end_goal,\r\n problem_statement,\r\n learner_role,\r\n depth,\r\n number_of_options\r\n } = values\r\n\r\n const { mazeId, mazeTitle } = maze\r\n\r\n const { active_organization_id, id, username, email } = user.info\r\n\r\n const payload = {\r\n end_goal,\r\n problem_statement,\r\n learner_role,\r\n depth,\r\n number_of_options,\r\n title: mazeTitle,\r\n programme_id: mazeId,\r\n user_id: id,\r\n email,\r\n username,\r\n org_id: active_organization_id,\r\n ...(!isMediaLibrarySelected && {\r\n file_list: fileList\r\n })\r\n }\r\n\r\n try {\r\n const res = await api.maze.generateMazeByAi(payload)\r\n if (res.data) {\r\n const status = res.data.status\r\n\r\n if (status === 'success') {\r\n checkMazeStatus()\r\n }\r\n }\r\n } catch (err) {\r\n console.log(err)\r\n message.error('An error occurred while generating the maze.')\r\n setStatus(generationStatus.error)\r\n }\r\n }\r\n\r\n const handleGenerationStatus = input => {\r\n const { in_progress, completed, error } = generationStatus\r\n const newStatus =\r\n input === 'in_progress'\r\n ? in_progress\r\n : input === 'completed'\r\n ? completed\r\n : error\r\n\r\n return newStatus\r\n }\r\n\r\n const checkFileError = () => {\r\n if (fileList.length === 0) {\r\n setFileError('Please upload at least one PDF file.')\r\n } else if (fileList.length > 5) {\r\n setFileError(\r\n 'You can upload a maximum of 5 files. For more, please use the media library.'\r\n )\r\n } else {\r\n setFileError('')\r\n }\r\n }\r\n\r\n const handleFileChange = info => {\r\n let newFileList = [...info.fileList]\r\n\r\n // Only accept PDF files\r\n newFileList = newFileList.filter(file => {\r\n if (file.type !== 'application/pdf') {\r\n message.error(`${file.name} is not a PDF file`)\r\n return false\r\n }\r\n return true\r\n })\r\n\r\n setFileList(newFileList)\r\n }\r\n\r\n const { getFieldDecorator } = form\r\n\r\n const checkedCompletUpload = item => {\r\n const filterSuccessFiles = _.filter(\r\n uploadSuccess,\r\n ele => ele.id === item.id\r\n )\r\n return !(uploadSuccess.length && filterSuccessFiles.length)\r\n }\r\n\r\n const handleModalClose = () => {\r\n const { mazeId } = maze\r\n\r\n if (status === generationStatus.in_progress || isGenerating) {\r\n dispatch(actions.maze.getMazeById(mazeId))\r\n history.push(`/maze/${mazeId}/edit`)\r\n } else {\r\n onClose()\r\n }\r\n }\r\n\r\n const renderFileStatus = () => {\r\n return (\r\n \r\n {' '}\r\n Please confirm all the conditions are checked before publishing.{' '}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n {status && status !== generationStatus.error\r\n ? GenerationStatusView()\r\n : GenerationFormView()}\r\n \r\n )\r\n}\r\n\r\n// Wrap AiMazeGeneration component with Form.create() to access form methods via props\r\nconst WrappedAiMazeGeneration = Form.create({ name: 'ai_maze_generation' })(\r\n AiMazeGeneration\r\n)\r\n\r\nexport default WrappedAiMazeGeneration\r\n","import AiMazeGeneration from './AiMazeGneration'\r\n\r\nexport default AiMazeGeneration\r\n","import ChoiceModal from './ChoiceModal'\r\n\r\nexport default ChoiceModal\r\n","import React, { useEffect, useState } from 'react'\r\n\r\nimport { Icon, Modal } from 'antd'\r\n\r\nimport './styles.scss'\r\nimport AiMazeGeneration from '../AiMazeGeneration'\r\nimport { useSelector } from 'react-redux'\r\n\r\nconst ChoiceModal = props => {\r\n const [isAiModalVisible, setIsAiModalVisible] = useState(false)\r\n\r\n const mazeById = useSelector(state => state.maze.mazeById)\r\n\r\n const { onClose } = props\r\n\r\n useEffect(() => {\r\n if (mazeById && mazeById.generated_status) {\r\n setIsAiModalVisible(true)\r\n }\r\n }, [mazeById])\r\n\r\n if (isAiModalVisible) {\r\n return (\r\n AI Metamaze Generation
\r\n\r\n
\r\n \r\n What kind of maze would you like to create?
\r\n\r\n\r\n setIsAiModalVisible(true)}\r\n >\r\n
\r\n \r\n
\r\n\r\n Manual Metamaze Creation
\r\n\r\n\r\n Manually create a maze by customizing the scenario and option tree\r\n
\r\nAI Metamaze Generation
\r\n\r\nAutomatically generate a maze with AI
\r\n- {myQuote.by}\r\n//
\r\n//
\r\n// {showPercentageLoader && (\r\n//
\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n Tree Node Type\r\n
\r\n \r\n \r\n Correct Option or Scenario\r\n
\r\n \r\n \r\n Incorrect Option\r\n
\r\n \r\n \r\n Option or Scenario without any text in it\r\n
\r\n\r\n \r\n \r\n Dead End (Red Border)\r\n
\r\n \r\n
\r\n Paths
\r\n \r\n
\r\n \r\n →\r\n
\r\n Correct Path\r\n \r\n
\r\n \r\n →\r\n
\r\n \r\n Incorrect Path / Path where correct option is not selected.\r\n \r\n \r\n\r\n
\r\n
\r\n
\r\n )\r\n\r\n const itemsLeftToRender =\r\n children.length - (displayedItems.length + lastItemOptions.length)\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n {!showLeftPanel && (\r\n \r\n 
\r\n Hide\r\n
\r\n \r\n {displayedItems.map(item => (\r\n \r\n ))}\r\n {displayedItems.length + lastItemOptions.length <\r\n children.length && (\r\n \r\n \r\n )}\r\n\r\n {lastItemOptions && lastItemOptions.length && (\r\n <>\r\n {lastItemOptions.map(item => (\r\n \r\n ))}\r\n \r\n )}\r\n
\r\n \r\n Load {itemsLeftToRender > 20 ? '20' : itemsLeftToRender}{' '}\r\n More ({itemsLeftToRender} items left)
\r\n \r\n \r\n Add Scenario\r\n \r\n \r\n Add Option\r\n \r\n
\r\n \r\n \r\n Hide\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n {!showRightPanel && (\r\n \r\n
\r\n\r\n {isMazeError && (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('buttons:save_for_later')}{' '}\r\n \r\n
\r\n \r\n \r\n {t('buttons:publish')}\r\n
\r\n \r\n An error occurred: {error}\r\n
\r\n )}\r\n\r\n {/* {loadingProgression < 1 && (\r\n Loading Unity... {Math.round(loadingProgression * 100)}%
\r\n )} */}\r\n\r\n\r\n
\r\n )}\r\n {(response &&\r\n \r\n
\r\n )}\r\n \r\n \r\n );\r\n}\r\n\r\nexport default UnityView;\r\n","import React, { Component, createRef, Fragment } from 'react'\r\nimport _, { intersection } from 'lodash'\r\nimport TopPageLink from '../../../components/TopPageLink'\r\nimport { Spinner } from '../../../components'\r\nimport loadingLogo from './assets'\r\nimport { withTranslation } from 'react-i18next'\r\nimport { Alert, Tabs, Progress, Button, Row, Col } from 'antd'\r\nimport { getSession } from '../../../services/api/user'\r\nimport UnityView from './components/UnityView.jsx'\r\nimport SentenceLoader from './components/SentenceLoader'\r\nimport { config } from '../../../constants'\r\nimport api from '../../../services/api'\r\nimport { getNestedChildren } from '../Create/components/MazeScenario/mazeHelper'\r\nimport './Detail.scss'\r\nimport EmptyMessage from '../../../components/EmptyMessage/EmptyMessage'\r\nimport DummyUserImage from '../../../assets/user.svg'\r\n\r\nclass MazeDetail extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.mazeViewRef = createRef()\r\n }\r\n state = {\r\n token: '',\r\n playData: {},\r\n isReportLoading: false,\r\n isMazeComplete: false,\r\n isShowCover: true,\r\n recommendedCourses: {},\r\n isPlayLimited: false,\r\n isBuildLoaded: false,\r\n percentageLoader: 0,\r\n unityContext: '',\r\n activateTTS: false\r\n }\r\n\r\n treeContainer = createRef()\r\n\r\n componentDidMount() {\r\n this.checkOrgFromLink()\r\n }\r\n\r\n checkOrgFromLink = () => {\r\n const {\r\n location: { search, pathname },\r\n user: {\r\n info: { active_organization_id }\r\n },\r\n match: {\r\n params: { id }\r\n },\r\n getMazeById\r\n } = this.props\r\n\r\n const organizationUrlParam = search && search.split('id=')[1]\r\n\r\n const organizationId = organizationUrlParam.split('&')[0]\r\n\r\n // send null if org id is 1 from the marketplace\r\n const orgIdFromLink = organizationId === 1 ? null : organizationId\r\n\r\n // remove ?id= from url\r\n const newUrl = window.location.origin + pathname\r\n window.history.pushState({}, null, newUrl)\r\n\r\n if (organizationId.length && orgIdFromLink !== active_organization_id) {\r\n this.changeActiveOrg(orgIdFromLink)\r\n } else {\r\n getMazeById(id)\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const {\r\n user: { isFetchingUserAttributes },\r\n organizations: { rows },\r\n maze: { fetching, mazeById }\r\n } = this.props\r\n\r\n if (prevProps !== this.props) {\r\n const loadingCondition =\r\n isFetchingUserAttributes || fetching || _.isEmpty(mazeById)\r\n\r\n if (rows && !loadingCondition) {\r\n this.checkAndSwitchOrg(rows)\r\n }\r\n }\r\n }\r\n\r\n checkAndSwitchOrg = rows => {\r\n const {\r\n user: {\r\n info: { active_organization_id: userOrg }\r\n },\r\n maze: { mazeById: item }\r\n } = this.props\r\n\r\n const userOrgs = rows.map(e => e.id)\r\n\r\n if (!userOrg && item && item.purchased_from_marketplace) {\r\n this.getPlayData()\r\n return\r\n }\r\n\r\n if (item && item.setting) {\r\n const commonIds = intersection(item.setting.organization_ids, userOrgs)\r\n\r\n if (commonIds.length > 0) {\r\n const assignedOrg = _.findIndex(commonIds, function (o) {\r\n return o === userOrg\r\n })\r\n\r\n if (assignedOrg === -1) {\r\n this.changeActiveOrg(commonIds[0])\r\n return\r\n }\r\n }\r\n }\r\n\r\n this.getPlayData()\r\n }\r\n\r\n changeActiveOrg = orgId => {\r\n const {\r\n user: {\r\n info: { id }\r\n },\r\n updateUser\r\n } = this.props\r\n updateUser(id, null, {\r\n active_organization_id: orgId\r\n }).then(() => {\r\n window.location.reload()\r\n })\r\n }\r\n\r\n getPlayData = () => {\r\n const {\r\n match: {\r\n params: { id }\r\n }\r\n } = this.props\r\n getSession().then(session => {\r\n const token = 'Bearer ' + session.idToken.jwtToken\r\n this.setState(\r\n {\r\n token: session.idToken.jwtToken\r\n },\r\n () => {\r\n const requestOptionsPlay = {\r\n method: 'get',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n Authorization: token\r\n }\r\n }\r\n const URLPlay = config.baseURL + `programme/${id}/play`\r\n fetch(URLPlay, requestOptionsPlay)\r\n .then(response => response.json())\r\n .then(data => {\r\n console.log('LOG response PLAY', data)\r\n console.log('LOG response PLAY', data.data.play_limit)\r\n const {\r\n data: { play_limit }\r\n } = data\r\n if (play_limit) {\r\n this.setState({\r\n isPlayLimited: play_limit\r\n })\r\n const {\r\n user: {\r\n info: { isAdmin, isSuperAdmin }\r\n }\r\n } = this.props\r\n if (!isAdmin && !isSuperAdmin) {\r\n return\r\n }\r\n }\r\n this.setState({\r\n playData: data.data\r\n })\r\n })\r\n .catch(() => { })\r\n }\r\n )\r\n })\r\n }\r\n\r\n // handleLoad = () => {\r\n // const context = new AudioContext()\r\n // document.querySelector('button').addEventListener('click', function() {\r\n // context.resume().then(() => {})\r\n // })\r\n // }\r\n\r\n componentWillUnmount() {\r\n if (this.intervalId !== undefined) {\r\n clearInterval(this.intervalId)\r\n }\r\n }\r\n\r\n getDataForGraph = () => {\r\n const {\r\n match: {\r\n params: { id }\r\n },\r\n maze: {\r\n mazeById: { organization_id }\r\n }\r\n } = this.props\r\n api.maze\r\n .mazeProvider({\r\n body: {\r\n programme: id\r\n },\r\n params: {\r\n play_id: this.state.playData.id\r\n },\r\n action: 'get_play_graph'\r\n })\r\n .then(res => {\r\n this.setState(\r\n {\r\n paths: res.data.data.paths,\r\n recommendedCourses: {\r\n title: res.data.data.programme.title,\r\n cover_id: res.data.data.programme.cover_id,\r\n lesson_ids: res.data.data.lesson_ids,\r\n organization_id: organization_id\r\n }\r\n },\r\n () => {\r\n this.setIdealPath()\r\n }\r\n )\r\n })\r\n }\r\n\r\n setIdealPath = () => {\r\n var ids = new Set(this.state.paths.chosen.map(d => d.code))\r\n var merged = [\r\n ...this.state.paths.chosen,\r\n ...this.state.paths.ideal.filter(d => !ids.has(d.code))\r\n ]\r\n const formattedData = merged.map(item => {\r\n const isIdealPath = this.state.paths.ideal.find(e => e.code === item.code)\r\n const chosenPath = this.state.paths.chosen.find(e => e.code === item.code)\r\n if (isIdealPath && chosenPath) {\r\n return { ...item, pathType: 'CHOSEN_IDEAL' }\r\n } else if (isIdealPath) {\r\n return { ...item, pathType: 'IDEAL' }\r\n }\r\n return item\r\n })\r\n\r\n const treeData = getNestedChildren(formattedData)\r\n this.setState(\r\n { idealPathData: treeData[0], isReportLoading: false },\r\n () => {\r\n let cn = document.querySelectorAll('.p-footer__item')[0]\r\n if (cn) {\r\n let btnBack = document.createElement('button')\r\n btnBack.innerHTML = 'Back to Dashboard'\r\n btnBack.classList.add('back_to_dashboard')\r\n btnBack.onclick = () => {\r\n const { recommendedCourses } = this.state\r\n console.log('recommendedCourses log', recommendedCourses)\r\n if (recommendedCourses.lesson_ids.length !== 0) {\r\n api.maze.recommendedCourse(recommendedCourses).then(res => {\r\n console.log('response recommendedCourse', res)\r\n })\r\n }\r\n this.props.history.push('/training')\r\n }\r\n cn.appendChild(btnBack)\r\n }\r\n this.translateTreeToCenter()\r\n }\r\n )\r\n }\r\n\r\n translateTreeToCenter = () => {\r\n const dimensions = this.treeContainer.getBoundingClientRect()\r\n this.setState({\r\n translate: {\r\n x: dimensions.width / 5,\r\n y: dimensions.height / 2\r\n }\r\n })\r\n }\r\n\r\n getPathClass = ({ source, target }) => {\r\n if (\r\n source.data.pathType === 'CHOSEN_IDEAL' &&\r\n target.data.pathType === 'CHOSEN_IDEAL'\r\n ) {\r\n return 'user_right_path'\r\n } else if (source.data.pathType && target.data.pathType) {\r\n return 'ideal_path_link'\r\n }\r\n return 'wrong_path_link'\r\n }\r\n\r\n showPopup = (evt, data) => {\r\n const mypopup = document.getElementById('mazeReportTooltip')\r\n mypopup.innerHTML = `\r\n
\r\n\r\n Overview
\r\n\r\n {response.overview}\r\n
\r\n\r\n
\r\n\r\n Step-Wise Analysis
\r\n\r\n {response.step_wise_goal_title.map((title, index) => (\r\n\r\n
\r\n ))}\r\n Step {index + 1}: {title}
\r\n{response.step_wise_analysis[index]}
\r\n\r\n
\r\n Summary
\r\n\r\n {response.summary}\r\n
\r\n${data.type}
${data.content ||\r\n 'N/A'}
\r\n
\r\n \r\n \r\n
\r\n )}\r\n\r\n {/* {isMazeComplete && !isReportLoading && (\r\n \r\n {mazeById && mazeById.title}\r\n
\r\n\r\n {isShowCover && isBuildLoaded && mazeById && mazeById.cover && (\r\n \r\n \r\n {/* {!isReportLoading && !isBuildLoaded &&
\r\n )}\r\n\r\n {!isBuildLoaded && (\r\n \r\n \r\n {this.PercentageLoader(percentageLoader)}\r\n {/*
\r\n )}\r\n\r\n {!isMazeComplete &&\r\n mazeById &&\r\n !_.isEmpty(playData) &&\r\n mazeID &&\r\n token &&\r\n config.baseURL && (\r\n \r\n (this.treeContainer = tc)}\r\n style={{ background: 'white' }}\r\n className=\"black_outline\"\r\n >\r\n {idealPathData && (\r\n
\r\n \r\n
\r\n \r\n
\r\n Ideal Path taken by user\r\n \r\n
\r\n Ideal Path\r\n \r\n
\r\n User Incorrect Path\r\n \r\n \r\n
\r\n Scenario\r\n \r\n \r\n
\r\n Option\r\n \r\n \r\n \r\n )} */}\r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n {mazeById && mazeById.host && (\r\n \r\n \r\n {(mazeById &&\r\n mazeById.host &&\r\n mazeById.host.description) ||\r\n 'N/A'}\r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {mazeById.host.name}\r\n
\r\n \r\n {tabs.length > 0 && (\r\n {\r\n if (key <= currentStepIndex) {\r\n history.push(tabs[key].key.replace(':id', id))\r\n }\r\n }}\r\n >\r\n {tabs.map((i, index) => (\r\n \r\n {i.tab}\r\n \r\n }\r\n key={i.key}\r\n disabled={\r\n index !== currentStepIndex && !visitedSteps.includes(index)\r\n }\r\n />\r\n ))}\r\n \r\n )}\r\n
\r\n )\r\n}\r\n\r\nexport default withRouter(CourseCreateTopPanel)\r\n","import styled, { css } from 'styled-components'\r\nimport Dropzone from 'react-dropzone'\r\nimport { Icon } from 'antd'\r\n\r\nimport { media } from '../../../../../styles'\r\nimport { styleguide } from '../../../../../constants'\r\n\r\nconst { colors, typography } = styleguide\r\n\r\nexport const DropzoneWrapper = styled(Dropzone)`\r\n && {\r\n position: relative;\r\n width: 100%;\r\n height: 55rem;\r\n border-width: .1rem;\r\n border-color: #979797;\r\n border-style: dashed;\r\n border-radius: 0;\r\n cursor: pointer;\r\n\r\n ${props =>\r\n props.cover &&\r\n css`\r\n background: no-repeat url(${props.cover}) center;\r\n background-size: cover;\r\n `}\r\n\r\n ${props =>\r\n props.error &&\r\n css`\r\n border-color: ${colors.red};\r\n `}\r\n\r\n ${media.md`\r\n height: 20rem;\r\n `}\r\n\r\n ${props =>\r\n props.mode &&\r\n props.mode === 'builder' &&\r\n `\r\n border-color: #979797 !important;\r\n width: 100% !important;\r\n `}\r\n\r\n ${props =>\r\n props.disabled &&\r\n css`\r\n opacity: 0.5;\r\n pointer-events: none;\r\n `}\r\n }\r\n`\r\n\r\nexport const DropzoneScormLoading = styled(Icon)`\r\n && {\r\n font-size: 3.6rem;\r\n color: ${colors.blue};\r\n position: absolute;\r\n top: 50%;\r\n left: 40%;\r\n margin-top: -1.8rem;\r\n margin-top: -1.8rem;\r\n }\r\n`\r\n\r\nexport const DropzoneInner = styled.div`\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 14rem;\r\n height: 15rem;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n justify-content: space-between;\r\n align-items: center;\r\n`\r\n\r\nexport const DropzoneText = styled.span`\r\n color: ${colors.darkGreyOne};\r\n font-weight: ${typography.h1FontWeight};\r\n font-size: 1.1rem;\r\n margin-left: 1rem;\r\n`\r\n","import React, { Component } from 'react'\r\nimport _ from 'lodash'\r\nimport {\r\n Radio,\r\n Input,\r\n Button,\r\n Popover,\r\n Tabs,\r\n Slider,\r\n Spin,\r\n Popconfirm,\r\n InputNumber\r\n} from 'antd'\r\nimport { updateMedia } from '../../../../../../../services/api/library'\r\nimport './badge.scss'\r\n\r\nimport background from '../../../../../../../assets/background.svg'\r\nimport text from '../../../../../../../assets/text.svg'\r\nimport icon from '../../../../../../../assets/icon.svg'\r\nimport pencil from '../../../../../../../assets/pencil.svg'\r\nimport bin from '../../../../../../../assets/bin.svg'\r\nimport iconContainer from '../../../../../../../assets/icon_tsp.png'\r\n\r\nimport { SketchPicker } from 'react-color'\r\nimport {\r\n BoldOutlined,\r\n CloseOutlined,\r\n ItalicOutlined,\r\n VerticalAlignMiddleOutlined,\r\n ReloadOutlined,\r\n LoadingOutlined\r\n} from '@ant-design/icons'\r\nimport { VerticalIcon, HorizontalIcon } from '../../Images/index'\r\n\r\nimport { verticalAlign } from 'styled-system'\r\nimport ReactSVG from 'react-svg'\r\nimport { withTranslation } from 'react-i18next'\r\n\r\nconst { TabPane } = Tabs\r\nconst antIcon = \r\n
\r\n )\r\n }\r\n\r\n icon = () => {\r\n return (\r\n \r\n \r\n
\r\n Background\r\n \r\n
\r\n )\r\n }\r\n\r\n text = () => {\r\n return (\r\n \r\n \r\n
\r\n Icon\r\n \r\n
\r\n )\r\n }\r\n\r\n clearIcon = () =>\r\n this.setState(\r\n { selectedIcon: null, isIconSelected: false, iconKey: null },\r\n () => {\r\n this.clearIconColor()\r\n }\r\n )\r\n\r\n clearText = () =>\r\n this.setState({ text: '', isTextAdded: false }, () => {\r\n this.clearAndDraw()\r\n })\r\n\r\n clearIconColor = () =>\r\n this.setState({ iconColor: null }, () => {\r\n this.clearAndDraw()\r\n })\r\n\r\n clearBackgroundFilled = () => {\r\n this.setState(\r\n {\r\n templateColor: ''\r\n },\r\n () => this.clearAndDraw()\r\n )\r\n }\r\n\r\n handleUserUpload = e => {\r\n let that = this\r\n var file = e.target.files[0]\r\n var reader = new FileReader()\r\n reader.onloadend = function() {\r\n that.uploadUserIcon(reader.result, file)\r\n }\r\n reader.readAsDataURL(file)\r\n }\r\n\r\n uploadUserIcon = (image, data) => {\r\n this.setState(\r\n {\r\n userUploadedIcon: image,\r\n selectedIcon: null,\r\n isIconSelected: true,\r\n imageFormat: 'ICON',\r\n iconLoading: true\r\n },\r\n () => {\r\n const { upload } = this.props\r\n const body = {\r\n croppedImage: image,\r\n lastModifiedDate: new Date().getTime(),\r\n name: data.name,\r\n type: data.type,\r\n size: data.size,\r\n imgFormat: 'ICON'\r\n }\r\n upload(body).then(res => {\r\n const { id } = res\r\n this.setState(\r\n {\r\n userUploadedIconId: id\r\n },\r\n () => {\r\n this.getUserImages('ICON')\r\n }\r\n )\r\n })\r\n }\r\n )\r\n }\r\n\r\n onSliderChange = value => {\r\n this.setState(\r\n {\r\n fontSize: value\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleIconSize = value => {\r\n this.setState(\r\n {\r\n iconScaleFactor: value\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n switchTextDecoration = async key => {\r\n const { textDecoration } = this.state\r\n let style = ''\r\n switch (key) {\r\n case 1:\r\n await this.setState({\r\n textDecoration: 'normal'\r\n })\r\n break\r\n case 2:\r\n if (textDecoration === 'bold') {\r\n style = 'normal'\r\n } else if (textDecoration.includes('bold')) {\r\n style = 'italic'\r\n } else if (textDecoration === 'italic') {\r\n style = `italic bold`\r\n } else {\r\n style = 'bold'\r\n }\r\n await this.setState({\r\n textDecoration: style\r\n })\r\n break\r\n case 3:\r\n if (textDecoration === 'italic') {\r\n style = 'normal'\r\n } else if (textDecoration.includes('italic')) {\r\n style = 'bold'\r\n } else if (textDecoration === 'bold') {\r\n style = `italic bold`\r\n } else {\r\n style = 'italic'\r\n }\r\n await this.setState({\r\n textDecoration: style\r\n })\r\n break\r\n default:\r\n break\r\n }\r\n this.clearAndDraw()\r\n }\r\n\r\n textCircle = (ctx, x, y) => {\r\n const { text, topSlant, textRadius } = this.state\r\n let space = Math.PI / 12 || 0\r\n var numRadsPerLetter = (Math.PI - space * 2) / text.length\r\n ctx.save()\r\n ctx.translate(x, y)\r\n var k = topSlant ? 1 : -1\r\n ctx.rotate(-k * ((Math.PI - numRadsPerLetter) / 2 - space))\r\n for (var i = 0; i < text.length; i++) {\r\n ctx.save()\r\n ctx.rotate(k * i * numRadsPerLetter)\r\n ctx.textAlign = 'center'\r\n ctx.textBaseline = !topSlant ? 'top' : 'bottom'\r\n ctx.fillText(text[i], 0, -k * textRadius)\r\n ctx.restore()\r\n }\r\n ctx.restore()\r\n }\r\n\r\n changeIconColor = color => {\r\n this.setState(\r\n {\r\n iconColor: color.hex\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleTextOffsetX = val => {\r\n this.setState(\r\n {\r\n textOffsetX: val\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleTextOffsetY = val => {\r\n this.setState(\r\n {\r\n textOffsetY: val\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleIconOffsetY = val => {\r\n this.setState(\r\n {\r\n iconOffsetY: val\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleIconOffsetX = val => {\r\n this.setState(\r\n {\r\n iconOffsetX: val\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleTextSlant = () => {\r\n this.setState(\r\n {\r\n curveText: !this.state.curveText\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleSlantDirection = () => {\r\n this.setState(\r\n {\r\n topSlant: !this.state.topSlant\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleTextRadius = val => {\r\n this.setState(\r\n {\r\n textRadius: val\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n\r\n handleBadgeName = e => {\r\n const inputValue = e.target.value\r\n if (inputValue.length <= 150) {\r\n this.setState({\r\n badgeName: inputValue\r\n })\r\n } else {\r\n this.setState({\r\n badgeName: inputValue.slice(0, 150)\r\n })\r\n }\r\n }\r\n\r\n handleBadgeDetails = e => {\r\n this.setState({\r\n badgeDetails: e.target.value\r\n })\r\n }\r\n\r\n clearCanvas = () => {\r\n this.setState(\r\n {\r\n templateColor: '',\r\n textColor: '#000000',\r\n iconScaleFactor: null,\r\n curveText: null,\r\n isIconSelected: null,\r\n isTextAdded: null,\r\n fontSize: 22,\r\n textDecoration: 'normal',\r\n textOffsetX: null,\r\n textOffsetY: null,\r\n textRadius: 60,\r\n iconOffsetX: null,\r\n iconOffsetY: null,\r\n iconColor: '',\r\n text: '',\r\n iconKey: null,\r\n templateKey: 1,\r\n topSlant: null,\r\n selectedBadgeTemplate: this.state.badgeTemplates[1],\r\n selectedIcon: null,\r\n badgeName: '',\r\n badgeDetails: '',\r\n toEditBadgeId: null,\r\n iconId: null\r\n },\r\n () => {\r\n this.clearAndDraw()\r\n }\r\n )\r\n }\r\n onTabChange = activeKey => {\r\n this.setState({ activeTab: activeKey })\r\n }\r\n\r\n render() {\r\n const {\r\n templateColor,\r\n textColor,\r\n iconScaleFactor,\r\n curveText,\r\n isIconSelected,\r\n isTextAdded,\r\n fontSize,\r\n textDecoration,\r\n textOffsetX,\r\n textOffsetY,\r\n textRadius,\r\n iconOffsetX,\r\n iconOffsetY,\r\n iconColor,\r\n icons,\r\n badgeTemplates,\r\n badgeFetching,\r\n historyBadges,\r\n badgeName,\r\n badgeDetails,\r\n activeTab\r\n } = this.state\r\n\r\n const { t } = this.props\r\n return (\r\n \r\n \r\n
\r\n Text\r\n \r\n
{t('v4:create_badge')}
\r\n\r\n
\r\n
\r\n
\r\n \r\n {/* Tab - Badge Template / Background */}\r\n\r\n \r\n \r\n {Object.entries(badgeTemplates).map(([key, val]) => (\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n\r\n {/* Tab - Text inside badge & text manipulation */}\r\n\r\n \r\n\r\n {/* Tab - Icons Selection */}\r\n\r\n \r\n \r\n {Object.entries(icons).map(([key, val]) => (\r\n \r\n \r\n \r\n ))}\r\n \r\n {!this.state.userIcons && (\r\n
\r\n {t('v4:change_bg')}\r\n
\r\n \r\n \r\n {this.state.userIcons &&\r\n this.state.userIcons.map(item => (\r\n this.onUserIconChange(item)}\r\n className=\"badge__icon\"\r\n value={item}\r\n key={item.id}\r\n >\r\n