\r\n \r\n //
\r\n );\r\n};\r\n\r\nexport default ExpandImage;\r\n","import React, { Component } from \"react\";\r\nimport ReactPlayer from \"react-player\";\r\nimport 'react-responsive-modal/styles.css';\r\nimport Modal from \"react-responsive-modal\";\r\n\r\nconst ChatVideoPlayer = ({open, toggleModal, url}) => \r\n{\r\n //.react-responsive-modal-closeButton\r\n //right 30px\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ExpandVideo;\r\n","import { useState, useEffect } from 'react';\r\n\r\n//https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs\r\nfunction getWindowDimensions() {\r\n const { innerWidth: width, innerHeight: height } = window;\r\n return {\r\n width,\r\n height\r\n };\r\n}\r\n\r\nconst useWindowDimensions = () => {\r\n const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());\r\n\r\n useEffect(() => {\r\n function handleResize() {\r\n setWindowDimensions(getWindowDimensions());\r\n }\r\n\r\n window.addEventListener('resize', handleResize);\r\n return () => window.removeEventListener('resize', handleResize);\r\n }, []);\r\n\r\n return windowDimensions;\r\n}\r\n\r\nexport default useWindowDimensions;\r\n","import React, { useState, useRef, useEffect } from \"react\";\r\nimport { ReactReader,ReactReaderStyle } from \"react-reader\";\r\nimport 'react-responsive-modal/styles.css';\r\n//import Modal from \"react-responsive-modal\";\r\nimport useWindowDimensions from '../../../components/WindowSize';\r\n\r\nimport Modal from \"react-bootstrap/Modal\";\r\n// import ModalBody from \"react-bootstrap/ModalBody\";\r\n// import ModalHeader from \"react-bootstrap/ModalHeader\";\r\n// import ModalFooter from \"react-bootstrap/ModalFooter\";\r\n// import ModalTitle from \"react-bootstrap/ModalTitle\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\n\r\nconst EBookReader2 = ({open, toggleModal, url, title}) => {\r\n const { height, width } = useWindowDimensions();// useWindowDimensions();\r\n const [size, setSize] = useState(100);\r\n const renditionRef = useRef(null);\r\n const changeSize = (newSize) => {\r\n setSize(newSize)\r\n };\r\n // const ownStyles = {\r\n // ...ReactReaderStyle,\r\n // arrow: {\r\n // ...ReactReaderStyle.arrow,\r\n // color: 'red'\r\n // }\r\n // }\r\n const ownStyles = {\r\n ...ReactReaderStyle,\r\n readerArea: {\r\n ...ReactReaderStyle.readerArea,\r\n //width: '100%'\r\n },\r\n container: {\r\n ...ReactReaderStyle.container,\r\n //width: '900px'\r\n },\r\n arrow: {\r\n ...ReactReaderStyle.arrow,\r\n color: 'red'\r\n }\r\n }\r\n \r\n //alert(\"w=\"+width+ \" h=\"+height)\r\n //const usewidth = width - 20;\r\n //const useheight = height - 20;\r\n useEffect(() => {\r\n if (renditionRef.current) {\r\n renditionRef.current.themes.fontSize(`${size}%`)\r\n }\r\n }, [size]);\r\n // const mystyle={\r\n // width: '100%',\r\n // height: '100%',\r\n // margin: '0',\r\n // padding: '0',\r\n // };\r\n//div has font-family: \"cnepub\", serif; cause my font setting here not working\r\n// {alert(\"uw=\"+usewidth+\" uh=\"+useheight)}\r\n// \r\n// size=\"lg\"\r\n return (\r\n\r\n\r\n \r\n \r\n\r\n \r\n\r\n
\r\n {/* \r\n {renderTitle(props.title)} \r\n \r\n );\r\n }\r\n\r\n //ReferenceError: Cannot access 'cancelButton' before initialization\r\n //I move cancenButton appear before modal solved the issue\r\n //style={props.customStyle}\r\n let modal = (\r\n \r\n \r\n {/* \r\n {renderTitle(props.title)} \r\n */}\r\n {renderHeader()}\r\n {props.body} \r\n \r\n {cancelButton}\r\n {confirmButtonRender()}\r\n {/* if (typeof props.onConfirm === 'function') {\r\n \r\n } */}\r\n \r\n \r\n \r\n );\r\n \r\n\r\n let content;\r\n if (props.children) {\r\n var btn = React.Children.only(props.children);\r\n content = React.cloneElement(\r\n btn,\r\n {\r\n onClick: onButtonClick,\r\n style: props.style\r\n },\r\n btn.props.children,\r\n modal\r\n );\r\n } else {\r\n 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\r\n\r\nexport default MediaPlayer;\r\n","import React,{useState} from 'react'\r\n\r\nimport AudioPlayer,{SimplePlayer} from './Music';\r\nimport NotSimplePlayer from './MusicAdv';\r\nimport ExpandImage from './Image';\r\nimport ExpandVideo from './Video';\r\nimport ExpandBook from './Book';\r\nimport configData from \"../../../Config/Config.json\";\r\nimport anonymous from '../../../Anonymous.png';\r\nimport MediaPlayer from './MediaPlayer';\r\n\r\nimport { faHeart,faTrash,faDoorOpen,faCopy,faReply } from \"@fortawesome/free-solid-svg-icons\"; \r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\n\r\n\r\n//Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.\r\n\r\n//https://reactjs.org/docs/hooks-effect.html\r\n\r\n// const Message = (props) => (\r\n// setMediaPlayer({playing:false, audioText:'', audioFile:'', audioImage:''})}/>\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\nexport default AudioInputPopup;\r\n\r\n","import React, { useState, useEffect, useRef, Fragment } from 'react';\r\n//import {parse, stringify} from 'flatted'\r\nimport \"react-loader-spinner/dist/loader/css/react-spinner-loader.css\";\r\nimport Loader from \"react-loader-spinner\";\r\nimport configData from \"../../Config/Config.json\";\r\n\r\n\r\n\r\nconst FileInput = (props) => {\r\n //state\r\n // const [selectFile, setSelectFile] = useState(null); //move up\r\n //if uploading true, need to render the animation\r\n //const [uploading, setUploading] = useState(false);\r\n \r\n useEffect(() => {\r\n \r\n });\r\n\r\n \r\n // const onSubmit = (e) => {\r\n // console.log(\"onAudio upload...\"+e);\r\n // e.preventDefault();\r\n // upload(selectFile);\r\n // };\r\n\r\n const handleFileSelect = (e) => {\r\n \r\n \r\n var file = e.target.files[0];\r\n console.log('in handleFileSelect - '+file);\r\n props.onSelectFileChange(file);\r\n \r\n \r\n };\r\n\r\n \r\n const style1={\r\n margin: '0 auto', \r\n width: '800px', \r\n position: 'relative'\r\n }\r\n\r\n const atyle =\r\n {\r\n \r\n display: 'inline-block' ,\r\n width: '100px',\r\n height: '30px'\r\n };\r\n\r\n return (\r\n \r\n\r\n //
HI
*/}\r\n {/* */}\r\n {\" \"}\r\n 620 ? title?title:'e-Book':''}\r\n location={0}\r\n styles={ownStyles}\r\n locationChanged={epubcifi => console.log(epubcifi)}\r\n getRendition={(rendition) => {\r\n renditionRef.current = rendition\r\n renditionRef.current.themes.fontSize(`${size}%`)\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\nexport default EBookReader2;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport EBookReader2 from './EBookReader2';\r\n\r\n// get our fontawesome imports\r\n//https://github.com/FortAwesome/Font-Awesome/blob/master/js-packages/%40fortawesome/free-regular-svg-icons/faPlayCircle.js\r\nimport { faBookReader } from \"@fortawesome/free-solid-svg-icons\"; //ctrl-mouse click to go to source\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n\r\nconst ExpandBook = ({url, title}) => {\r\n\r\n const [open,setOpen] = useState(false);\r\n\r\n const onOpenModal = () => {\r\n //alert('onOpenModal calling');\r\n setOpen(!open);\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ExpandBook;\r\n","export default \"data:image/png;base64,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\"","import React, { useState,useEffect, Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\n//import Button from 'react-bootstrap/lib/Button';\r\n//import Modal from 'react-bootstrap/lib/Modal';\r\nimport { Button,Modal } from 'react-bootstrap';\r\n\r\n//https://github.com/gregthebusker/react-confirm-bootstrap/blob/master/src/Confirm.js\r\nconst Confirm = (props) => {\r\n\r\n //https://stackoverflow.com/questions/54865764/react-usestate-does-not-reload-state-from-props\r\n //The argument passed to useState is the initial state much like setting state in constructor for a class component \r\n //and isn't used to update the state on re-render\r\n //so in re-render case, isOpened is not changed based on input props\r\n //If you want to update state on prop change, make use of useEffect hook\r\n const [isOpened, setIsOpened] = useState(props.visible);\r\n\r\n //If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) \r\n //as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it \r\n //never needs to re-run.\r\n //charlie, I will depend props.visible\r\n useEffect(() => {\r\n //console.log(\"#### Confirm useEffect calling....props.visible=\"+props.visible);\r\n setIsOpened(props.visible);\r\n }, [props.visible])\r\n\r\n const onButtonClick = () => {\r\n // Since the modal is inside the button click events will propagate up.\r\n if (!isOpened) {\r\n console.log(\"setIsOpen:true\");\r\n setIsOpened(true);\r\n }\r\n }\r\n\r\n const onClose = (event) => {\r\n if (event) {\r\n event.stopPropagation();\r\n }\r\n console.log(\"setIsOpen:false\");\r\n setIsOpened(false);\r\n\r\n if (typeof props.onClose === 'function') {\r\n props.onClose();\r\n }\r\n }\r\n\r\n const onConfirm = (event) => {\r\n event.stopPropagation();\r\n setIsOpened(false);\r\n console.log(\"setIsOpen:false\");\r\n props.onConfirm();\r\n }\r\n\r\n const cancelButton = props.showCancelButton ? (\r\n \r\n ) : null;\r\n\r\n const confirmButtonRender = () => {\r\n if (typeof props.onConfirm === 'function') {\r\n return (\r\n \r\n );\r\n } \r\n // else {\r\n // return (\r\n // No confirm
\r\n // );\r\n // }\r\n }\r\n\r\n const renderTitle = (title) => {\r\n if (title === \"ERROR\")\r\n {\r\n return (\r\n{title}
\r\n );\r\n }\r\n else\r\n {\r\n return (\r\n {title}
\r\n );\r\n }\r\n }\r\n\r\n const renderHeaderStyle = (title) => {\r\n if (title === \"ERROR\")\r\n {\r\n return (\r\n \"bg-danger\"\r\n );\r\n }\r\n else\r\n {\r\n return (\r\n \"bg-info\"\r\n );\r\n }\r\n }\r\n \r\n const renderHeader = () => {\r\n return (\r\n props.title != \"notitle\" &&\r\n \r\n {modal}\r\n
\r\n );\r\n }\r\n //window.alert(\"I am here\");\r\n //strange issue: isOpened = false props.visible=true\r\n //https://stackoverflow.com/questions/54865764/react-usestate-does-not-reload-state-from-props\r\n //console.log(\"#### isOpened=\"+isOpened);\r\n //console.log(\"#### props.visible=\"+props.visible);\r\n //console.log(modal);\r\n return (\r\n \r\n content\r\n \r\n );\r\n}\r\n\r\nConfirm.propTypes = {\r\n body: PropTypes.node.isRequired,\r\n buttonText: PropTypes.node,\r\n cancelText: PropTypes.node,\r\n className: PropTypes.string,\r\n confirmBSStyle: PropTypes.string,\r\n cancelBSStyle: PropTypes.string,\r\n confirmText: PropTypes.node,\r\n dialogClassName: PropTypes.string,\r\n keyboard: PropTypes.bool,\r\n backdrop: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\r\n enforceFocus: PropTypes.bool,\r\n onConfirm: PropTypes.func, //.isRequired,\r\n onClose: PropTypes.func,\r\n showCancelButton: PropTypes.bool.isRequired,\r\n title: PropTypes.node.isRequired,\r\n visible: PropTypes.bool,\r\n};\r\n\r\nConfirm.defaultProps = {\r\n cancelText: 'Cancel',\r\n confirmText: 'Confirm',\r\n confirmBSStyle: 'danger',\r\n cancelBSStyle: 'default',\r\n showCancelButton: true\r\n};\r\n\r\nexport { Confirm };\r\nexport default Confirm;","import React, { useState, useEffect, useRef } from \"react\";\r\nimport styles from '../../../style/player.module.css'; \r\nimport Confirm from \"../../../components/Confirm\";\r\n\r\n\r\nconst MediaPlayer = (props) => {\r\n const audioRef = useRef();\r\n const [audioLenSeconds, setAudioLenSeconds] = useState(0);\r\n\r\nconst doAudioThing= () => {\r\n //alert('1112');\r\n const audio = audioRef.current;\r\n const al = audio.duration.toFixed(0);\r\n //alert('aaa set al='+al);\r\n if (al > 0)\r\n setAudioLenSeconds(al); //re-render\r\n \r\n}\r\n\r\n\r\n //const [playing, toggle] = useAudio(url);\r\n const divStyle = {\r\n backgroundImage: 'url(' + props.audioImage+')',\r\n};\r\n const renderScrollText=() => {\r\n if (audioLenSeconds > 0)\r\n {\r\n//-moz-animation: my-animation 15s linear infinite;\r\n// -webkit-animation: my-animation 15s linear infinite;\r\n// animation: my-animation 15s linear infinite;\r\n let mystyle = {\r\n '-moz-animation': \"my-animation \"+audioLenSeconds+\"s linear infinite\",\r\n '-webkit-animation': \"my-animation \"+ audioLenSeconds+\"s linear infinite\",\r\n 'animation': \"my-animation \"+ audioLenSeconds+\"s linear infinite\",\r\n backgroundImage: 'url(' + props.audioImage+')',\r\n };\r\n return (\r\n <>\r\n \r\n
\r\n \r\n );\r\n }\r\n }\r\n\r\n const renderAudio=()=>\r\n {\r\n if (audioLenSeconds > 0)\r\n {\r\n return \r\n }\r\n else if (props.audioFile != \"\")\r\n {\r\n return \r\n }\r\n }\r\n\r\n const renderPopupRecorder = () => {\r\n return (\r\n <>\r\n {renderScrollText()}\r\n {renderAudio()}\r\n \r\n )\r\n\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {props.audioText}\r\n
\r\n\r\n//
\r\n// );\r\n\r\n//Plus, the default value is precisely .col-xs-12. This means you don't even have to specify it\r\n// your div will have a full with on every device.\r\n//bootstrap 4 - Replace col-xs-12 with col-12 and it will work as expected.\r\n\r\n\r\n//2021-02-28 now accept files, it represent user upload audio, image, video, e-books\r\nconst MessageBT = (props) => {\r\n\r\n const { user: currentUser, isLoggedIn } = useSelector((state) => state.auth);\r\n\r\n const audiourl_base = configData.DOWNLOAD_URL;// 'https://localhost:5001/api/File/Download/';\r\n\r\n const [ mediaPlayer, setMediaPlayer ] = useState({ playing: false, audioText: \"\", audioFile:\"\", audioImage:\"\" });\r\n\r\n \r\n //https://stackoverflow.com/questions/33846682/react-onclick-function-fires-on-render\r\n //onClick={props.onSendFlower(props.uniqueID)}\r\n\r\n const renderFlower = () => {\r\n //console.log(\"props.likeCount=\"+props.likeCount);\r\n if (props.onSendFlower) //only render flower if call back defined\r\n {\r\n if (props.likeCount > 0) {\r\n return {props.user} says:
\r\n//{props.message}
\r\n//\r\n \r\n { props.onSendFlower(props.uniqueID) }} />\r\n {props.likeCount}\r\n \r\n
;\r\n \r\n } else {\r\n return \r\n \r\n { props.onSendFlower(props.uniqueID) }} />\r\n {props.likeCount}\r\n \r\n
;\r\n \r\n }\r\n }\r\n \r\n }\r\n\r\n const renderDelete = () => {\r\n \r\n if (currentUser.role==\"admin\" || currentUser.isThemeAdmin) {\r\n return \r\n\r\n { props.onDelete(props.uniqueID) }} />\r\n \r\n
;\r\n }\r\n\r\n \r\n }\r\n\r\n const renderEnterLeaf = () => {\r\n if (props.onEnterLeaf != null)\r\n {\r\n return \r\n\r\n { props.onEnterLeaf(props.uniqueID) }} />\r\n {props.leafCount}\r\n \r\n
;\r\n }\r\n\r\n \r\n }\r\n\r\n const renderReply = () => {\r\n if (props.onReply != null)\r\n {\r\n //if userID = currentUser.id, don't show .. since no need to reply to himself!\r\n console.log(\"a=\"+props.userID+\" b=\"+currentUser.id);\r\n if (props.userID !== currentUser.id) {\r\n return \r\n\r\n { props.onReply(props.userID, props.user) }} />\r\n \r\n
;\r\n }\r\n \r\n }\r\n\r\n \r\n }\r\n\r\n const renderMoveElite = () => {\r\n if (currentUser.role==\"admin\" || currentUser.isThemeAdmin) \r\n {\r\n //already elite page, no need to move elite again\r\n if (props.isElite)\r\n return;\r\n\r\n //2022-02-06 bug for the logic that decide isRoot\r\n //for a root chat, it said isroot = false\r\n if (props.onMoveElite != null)\r\n {\r\n let theRootFlag = true;\r\n //the logic to use onEnterLeaf won't work, due to poem leaf can have leaf's leaf\r\n //so I add new isRootLevel\r\n //alert('props.isRootLevel='+props.isRootLevel);\r\n if (props.isRootLevel)\r\n {\r\n theRootFlag = true;\r\n }\r\n else {\r\n if (props.isFirst)\r\n {\r\n theRootFlag = true;\r\n }\r\n else\r\n {\r\n theRootFlag = false;\r\n }\r\n }\r\n // if (props.onEnterLeaf != null && props.isFirst)\r\n // {\r\n // return \r\n // \r\n // { props.onMoveElite(props.uniqueID, true) }} />\r\n // \r\n //
;\r\n // }\r\n // else \r\n // {\r\n // //even in leaf view, the first chat is actually parent chat\r\n // return \r\n // \r\n // { props.onMoveElite(props.uniqueID, false) }} />\r\n // \r\n //
;\r\n // }\r\n return \r\n \r\n { props.onMoveElite(props.uniqueID, theRootFlag) }} />\r\n \r\n
;\r\n }\r\n \r\n }\r\n }\r\n\r\n //2021-07-02 if more than two files\r\n //just need to render a button\r\n const renderMediaPlayer = (text, fnames) => {\r\n //alert(\"renderMediaPlayer - \"+fnames);\r\n if (fnames != null)\r\n {\r\n let audiotext = text;\r\n let audiofile = '';\r\n let audioimage = ''\r\n let i = 0;\r\n for (i = 0; i < fnames.length;i++){\r\n if (fnames[i].endsWith(\".mp3\") || fnames[i].endsWith(\".aac\") || fnames[i].endsWith(\".wma\") )\r\n audiofile = audiourl_base+fnames[i];\r\n else if (fnames[i].endsWith(\".png\") || fnames[i].endsWith(\".jpg\") )\r\n audioimage = audiourl_base+fnames[i];\r\n }\r\n //alert('setMediaPlayer..audioText='+audiotext+\" audioFile=\"+audiofile+\" audioImage=\"+audioimage);//setMediaPlayer({playing:true, audioText:audiotext, audioFile:audiofile, audioImage:audioimage});\r\n return ();\r\n }\r\n }\r\n \r\n const renderFile = (fname) => {\r\n //console.log(\"came here,fname=\"+fname)\r\n\r\n if (fname.endsWith('mp3') || fname.endsWith('aac') || fname.endsWith('m4a'))\r\n {\r\n return(\r\n \r\n
\r\n );\r\n }\r\n else if (fname.endsWith('mp4'))\r\n {\r\n return(\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n else if (fname.endsWith('epub'))\r\n {\r\n return(\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n else\r\n {\r\n return(\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n }\r\n//export default function Message(props) { \r\n\r\n //following how to concat string \r\n const renderMessage = () => {\r\n if (props.altUserID > 0)\r\n {\r\n if (currentUser.id == props.altUserID)\r\n {\r\n return (\r\n <>\r\n \r\n
\r\n {'@'+props.altUserName}
{\" \" + props.message}\r\n \r\n )\r\n }\r\n else\r\n return '@'+props.altUserName+ \" \" + props.message;\r\n }\r\n else\r\n return props.message;\r\n }; \r\n\r\n const renderURLsInMessage = () => {\r\n\r\n const urlRegex = /(((https?:\\/\\/)|(www\\.))[^\\s]+)/g;\r\n const msgUrlList = props.message.match(urlRegex);\r\n if (msgUrlList !== null)\r\n\r\n return msgUrlList.map((ele) => \r\n skip
\r\n // }\r\n // });\r\n };\r\n\r\n ////https://stackoverflow.com/questions/34596489/es2015-2016-way-of-typeof-varname-undefined\r\n //Just check for varName === undefined.\r\n //I get: TypeError: Cannot read property 'props' of undefined\r\n\r\n //I got unexpected token error when use\r\n //https://stackoverflow.com/questions/39865597/if-else-causes-unexpected-token-in-es6/39865711\r\n //return (), cannot have if ...else\r\n\r\n //if you have a string with new lines that you want to display for example in a div,\r\n // you can use white-space: pre-wrap css style:\r\n\r\n //https://localhost:5001/api/File/Upload\r\n //charlie : the chat-message already inside row -> column\r\n //can I add new row inside parent as column? nested\r\n //https://stackoverflow.com/questions/24659471/nested-rows-with-bootstrap-grid-system\r\n //https://getbootstrap.com/docs/4.0/layout/grid/#nesting\r\n\r\n //react conditional rendering\r\n //return{(yellAtPerson &&
;\r\n\r\n //'justify-content': 'flex-end'\r\n \r\n //console.log('###debug files='+props.files+' mdate='+props.mdate+' bool='+ (props.files !== undefined))\r\n //alert(\"currentuser=\"+currentUser.username+\" propsuser=\"+props.user)\r\n return (\r\n <>\r\n AAAAHHHHHH
) || \"Hi there!\"}\r\n \r\n
\r\n \r\n \r\n );\r\n \r\n};\r\n\r\n\r\nexport default MessageBT;","//https://www.npmtrends.com/react-bootstrap-vs-reactstrap\r\n//I will use react-bootstrap\r\n//https://blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121/\r\nimport React from 'react';\r\nimport Message from './Message/MessageBT';\r\nimport { faDoorOpen } from \"@fortawesome/free-solid-svg-icons\"; \r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { Link } from 'react-router-dom';\r\nimport LocalizedStrings from 'react-localization';\r\n\r\n//How to render Message list use Message Component\r\nconst ChatWindowBT = (props) => {\r\n \r\n const isToday = (someDate) => {\r\n const today = new Date()\r\n return someDate.getDate() == today.getDate() &&\r\n someDate.getMonth() == today.getMonth() &&\r\n someDate.getFullYear() == today.getFullYear()\r\n }\r\n\r\n //same day: 9:50 AM\r\n //not same day: 3/13/21 9:57 AM\r\n const toLocalTime = (utctime) => {\r\n const date = new Date(utctime);\r\n let hours = date.getHours();\r\n let minutes = date.getMinutes();\r\n const ampm = hours >= 12 ? 'pm' : 'am';\r\n hours = hours % 12;\r\n hours = hours ? hours : 12; // the hour '0' should be '12'\r\n minutes = minutes < 10 ? '0'+minutes : minutes;\r\n const strTime = hours + ':' + minutes + ' ' + ampm;\r\n\r\n if (isToday(date))\r\n {\r\n return strTime;\r\n }\r\n else \r\n {\r\n return date.getDate() + \"-\" + (date.getMonth()+1) + \"-\" + date.getFullYear() + \" \" + strTime;\r\n }\r\n \r\n \r\n }\r\n\r\n let strings = new LocalizedStrings({\r\n en:{\r\n PoemReading:\"Poem Reading\",\r\n ReadSamePoem:\"Read Same Poem\",\r\n MessageArea:\"Message area\",\r\n EliteRegion:\"Elite Region\",\r\n ChatLeafs:\"Chat Leafs\",\r\n ChatRoom:\"Chat Room\",\r\n },\r\n zh: {\r\n PoemReading:\"朗誦\",\r\n ReadSamePoem:\"同一主題朗誦\",\r\n MessageArea:\"评论区\",\r\n EliteRegion:\"精华区\",\r\n ChatLeafs:\"主题聊天\",\r\n ChatRoom:\"聊天主题列表\",\r\n }\r\n });\r\n\r\n const chat = props.chat\r\n .map((m,index) => \r\n \r\n {props.user} \r\n \r\n 
\r\n \r\n \r\n {props.mdate} \r\n \r\n
\r\n \r\n {renderMessage()}\r\n
\r\n\r\n \r\n {\r\n renderURLsInMessage()\r\n }\r\n
\r\n\r\n {\r\n props.files && props.files.length > 1 ?\r\n renderMediaPlayer(props.message, props.files)\r\n : \r\n props.files && props.files.map((afile, index) => renderFile(afile))\r\n }\r\n \r\n {renderEnterLeaf()}\r\n {renderReply()}\r\n {renderDelete()}\r\n {renderMoveElite()}\r\n {renderFlower()}\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {props.isPoem ? strings.PoemReading : props.isPoemLeaf ? strings.ReadSamePoem : props.isLeafLeaf ? strings.MessageArea : props.isElite ? strings.EliteRegion: props.parentChatID ? strings.ChatLeafs: strings.ChatRoom } \r\n {/* \r\n Last message: Mon Jan 26 2015 - 18:39:23\r\n \"/chat\"*/}\r\n {props.parentChatID && (\r\n
\r\n \r\n \r\n \r\n { OnEnterParent(1) }} />\r\n */}\r\n
\r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ChatWindowBT;","import React, { useState,Fragment,useEffect } from 'react';\r\n\r\nimport { faTrash } from \"@fortawesome/free-solid-svg-icons\"; \r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport 'emoji-mart/css/emoji-mart.css'\r\nimport { Picker } from 'emoji-mart'\r\nimport { faPlus, faMinus } from \"@fortawesome/free-solid-svg-icons\"; //ctrl-mouse click to go to source\r\nimport LocalizedStrings from 'react-localization';\r\n\r\nconst ChatInput = (props) => {\r\n\r\n let strings = new LocalizedStrings({\r\n en:{\r\n Message:\"Message\",\r\n \r\n },\r\n zh: {\r\n Message:\"文本\",\r\n }\r\n });\r\n\r\n const [emoji, setEmoji] = useState(false)\r\n // useEffect(() => {\r\n // alert(\"r\");\r\n // });\r\n\r\n //https://reactjs.org/docs/hooks-reference.html\r\n //Returns a stateful value, and a function to update it.\r\n //'' is initialState\r\n \r\n //lifting-state-up.html\r\n //const [user, setUser] = useState('');\r\n //const [message, setMessage] = useState('');\r\n\r\n // const onSubmit = (e) => {\r\n // e.preventDefault();\r\n\r\n // //const isUserProvided = user && user !== '';\r\n // const isMessageProvided = message && message !== '';\r\n\r\n // if (isMessageProvided) {\r\n // props.sendMessage('', props.message);\r\n // }\r\n // else {\r\n // alert('Please insert an user and a message');\r\n // }\r\n // }\r\n\r\n // const onUserUpdate = (e) => {\r\n // setUser(e.target.value);\r\n // }\r\n\r\n const onMessageUpdate = (e) => {\r\n props.onMessageChange(e.target.value);\r\n }\r\n\r\n const addEmoji=(e) => {\r\n let emoji = e.native;\r\n // this.setState({\r\n // text: this.state.text + emoji\r\n // });\r\n //props.inputRef.current\r\n props.inputRef.current.value= props.inputRef.current.value + emoji;\r\n }\r\n\r\n return (\r\n // \r\n
\r\n \r\n
\r\n {chat}
\r\n \r\n \r\n \r\n \r\n
*/}\r\n {\r\n props.altUserID>0&&\r\n\r\n \r\n \r\n \r\n { props.onClearAlt() }} />\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 emoji &&\r\n \r\n \r\n
\r\n }\r\n \r\n \r\n \r\n //value={props.message}\r\n // \r\n // \r\n )\r\n\r\n};\r\n\r\n// the custom comparison function\r\n//That boolean tells React if it should use the previous result of the component instead of calculating a new one.\r\n//When false, the function component will be executed like it normally would.\r\n//When true, the function component will not be executed and the previous result will be used instead.\r\n//const comparisonFn = function (prevProps, nextProps) {\r\n// return prevProps.message !== \"\";\r\n//};\r\n\r\n// exporting the memoized function component\r\n //const ChatInput= React.memo(ChatInputCore, comparisonFn);\r\n\r\nexport default ChatInput;","import React, { Component } from 'react';\r\n\r\nclass AudioVisualiser extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.canvas = React.createRef();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.draw();\r\n }\r\n\r\n draw() {\r\n const { audioData } = this.props;\r\n const canvas = this.canvas.current;\r\n const height = canvas.height;\r\n const width = canvas.width;\r\n const context = canvas.getContext('2d');\r\n let x = 0;\r\n const sliceWidth = (width * 1.0) / audioData.length;\r\n\r\n context.lineWidth = 2;\r\n context.strokeStyle = '#000000';\r\n context.clearRect(0, 0, width, height);\r\n\r\n context.beginPath();\r\n context.moveTo(0, height / 2);\r\n for (const item of audioData) {\r\n const y = (item / 255.0) * height;\r\n context.lineTo(x, y);\r\n x += sliceWidth;\r\n }\r\n context.lineTo(x, height / 2);\r\n context.stroke();\r\n }\r\n\r\n //error: The 'const' modifier can only be used in TypeScript files\r\n //The const is inside a class. Move it outside the class and all will be ok.\r\n // const divStyle = {\r\n // color: 'white',\r\n // backgroundImage: 'url(' + imgUrl + ')',\r\n // WebkitTransition: 'all', // note the capital 'W' here\r\n // msTransition: 'all' // 'ms' is the only lowercase vendor prefix\r\n // };\r\n \r\n render() {\r\n //console.log('ssee it? '+JSON.stringify(this.props.passstyle));\r\n //following works, but from property not working\r\n // const divStyle = {\r\n // color: 'white',\r\n // WebkitTransition: 'all', // note the capital 'W' here\r\n // msTransition: 'all' // 'ms' is the only lowercase vendor prefix\r\n // };\r\n // console.log('vs: '+JSON.stringify(divStyle));\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default AudioVisualiser;","import React, { Component } from 'react';\r\nimport AudioVisualiser from './AudioVisualiser';\r\n\r\nclass AudioAnalyser extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { audioData: new Uint8Array(0) };\r\n this.tick = this.tick.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.audioContext = new (window.AudioContext ||\r\n window.webkitAudioContext)();\r\n this.analyser = this.audioContext.createAnalyser();\r\n this.dataArray = new Uint8Array(this.analyser.frequencyBinCount);\r\n this.source = this.audioContext.createMediaStreamSource(this.props.audio);\r\n this.source.connect(this.analyser);\r\n this.rafId = requestAnimationFrame(this.tick);\r\n }\r\n\r\n tick() {\r\n this.analyser.getByteTimeDomainData(this.dataArray);\r\n this.setState({ audioData: this.dataArray });\r\n this.rafId = requestAnimationFrame(this.tick);\r\n }\r\n\r\n componentWillUnmount() {\r\n cancelAnimationFrame(this.rafId);\r\n this.analyser.disconnect();\r\n this.source.disconnect();\r\n }\r\n\r\n render() {\r\n //console.log('AudioAnalyser: passtyle='+JSON.stringify(this.props.passstyle));\r\n return \r\n {/* \r\n
\r\n
\r\n */}\r\n {/* style={{margin: '0 auto', width: '800px', position: 'relative'}} */}\r\n
\r\n
\r\n
\r\n \r\n\r\n \r\n );\r\n};\r\n\r\nexport default AudioInput;\r\n\r\n","export default __webpack_public_path__ + \"static/media/test.9a794789.mp3\";","import React, { useState, useEffect, useRef , Fragment} from 'react';\r\nimport MicRecorder from 'mic-recorder-to-mp3';\r\n//import {parse, stringify} from 'flatted'\r\nimport AudioAnalyser from './AudioAnalyser';\r\nimport configData from \"../../Config/Config.json\";\r\nimport Confirm from \"../../components/Confirm\";\r\n\r\n\r\nimport backAudio from '../../Audio/test.mp3';\r\n\r\n//https://medium.com/front-end-weekly/recording-audio-in-mp3-using-reactjs-under-5-minutes-5e960defaf10\r\nconst Mp3Recorder = new MicRecorder({ bitRate: 480 });\r\n\r\nconst AudioInputPopup = (props) => {\r\n //state\r\n const [isRecording, setRecording] = useState(false);\r\n const [isMICError, setIsMICError] = useState(false); //no need to lift up\r\n const [duration, setDuration] = useState(\"\"); //no need to lift up\r\n const [backFile, setBackFile] = useState(null);\r\n\r\n const [audioState, setAudioState] = useState(null);\r\n\r\n //I cannot get button text from onClick handler, so use this a working around\r\n const [buttonText, setButtonText] = useState(\"Start recording\");\r\n\r\n useEffect(() => {\r\n \r\n\r\n const audio = audioRef.current;\r\n if (audio != null) {\r\n audio.onloadedmetadata = () => {\r\n setDuration(formatTime(audio.duration.toFixed(0)));\r\n }\r\n }\r\n \r\n\r\n}, [props.audioURL])\r\n\r\nuseEffect(() => {\r\n \r\n if (backFile != null && backgroud_buffer == null)\r\n {\r\n const freader = new FileReader();\r\n freader.onload = function (e) { \r\n context.decodeAudioData(e.target.result, function (buf) {\r\n backgroud_buffer = buf;\r\n });\r\n };\r\n freader.readAsArrayBuffer(backFile);\r\n }\r\n\r\n})\r\n\r\n\r\n \r\n //2021-04-11 without following the confirm dialog won't show 2nd time, \r\n //call two times setIsMICError(true), it won't trigger re-render!!\r\n const onConfirmClose = () => {\r\n console.log(\"onConfirmClose....\");\r\n setIsMICError(false);\r\n };\r\n\r\n const recordButtonRef = useRef();\r\n const audioRef = useRef();\r\n\r\n //https://www.golangprograms.com/react-js-get-tag-name-and-inner-text.html\r\n //charlie: I need to do different action based on button text\r\n const onButtonClick = (e) => {\r\n \r\n if (backFile != null) //if already has background audio selected -- playbackTrack\r\n {\r\n if (e.target.innerText === \"Start recording\")\r\n {\r\n recordButtonRef.current.innerText = \"Stop recording\";\r\n startKaraoke();\r\n }\r\n else\r\n {\r\n recordButtonRef.current.innerText = \"Start recording\";\r\n stopMixHumanAction(mediaRecorder);\r\n }\r\n return;\r\n\r\n } \r\n else \r\n {\r\n alert(\"backgroud_buffer is null\") ;\r\n }\r\n\r\n if (e.target.innerText === \"Start recording\")\r\n {\r\n start();\r\n }\r\n else\r\n {\r\n recordButtonRef.current.innerText = \"Start recording\";\r\n stop();\r\n }\r\n };\r\n\r\n const start = () => {\r\n getMicrophone();\r\n };\r\n\r\n let snd1 = new Audio();\r\n\r\n const handlePlay = () => {\r\n }\r\n\r\n\r\n\r\n const getMicrophone = async () => {\r\n\r\n\r\n try {\r\n const audio = await navigator.mediaDevices.getUserMedia({ audio: true,video: false });\r\n setAudioState( audio );\r\n\r\n Mp3Recorder.start()\r\n .then(() => {\r\n setRecording(true);\r\n })\r\n .catch((e) => console.error(e));\r\n\r\n recordButtonRef.current.innerText = \"Stop recording\";\r\n \r\n } catch(err) {\r\n console.log('setMicError triggered......, setIsMICError(true) will call');\r\n setIsMICError(true);\r\n \r\n }\r\n\r\n };\r\n\r\n const stop = () => {\r\n\r\n audioState.getTracks().forEach(track => track.stop());\r\n setAudioState(null);\r\n \r\n //following plugin allow me to save as MP3\r\n Mp3Recorder.stop()\r\n .getMp3()\r\n .then(([buffer, blob]) => {\r\n\r\n const file = new File(buffer, 'record.mp3', {\r\n type: blob.type,\r\n lastModified: Date.now()\r\n });\r\n\r\n const blobURL = URL.createObjectURL(blob);\r\n\r\n //https://stackoverflow.com/questions/55130032/how-to-call-multi-setter-usestate-react-hooks\r\n //It will not re-render twice, multiple state changes are batched by React. \r\n props.onSetAudioURL(blobURL); //({ blobURL, isRecording: false });\r\n setRecording(false);\r\n\r\n props.onSetAudioFile(file);\r\n })\r\n .catch((e) => console.log(e));\r\n };\r\n\r\n //when user choose a background audio file\r\n const handleFileSelect = (e) => {\r\n \r\n const file = e.target.files[0];\r\n setBackFile(file);\r\n };\r\n\r\n window.AudioContext = window.AudioContext || window.webkitAudioContext;\r\n var context = new window.AudioContext();\r\n var backgroud_buffer = null;//AudioBuffer type, charlie add\r\n var playbackTrack = null;\r\n\r\n let timeObj = null;\r\n var mediaRecorder = null;\r\n\r\n //note, mediaRecorder is optional param pass to function\r\n const stopMix = (duration, mediaRecorder) => {\r\n timeObj = setTimeout(function(mediaRecorder) {\r\n mediaRecorder.stop();\r\n context.close();\r\n context = null;\r\n }, duration, mediaRecorder)\r\n };\r\n\r\n const stopMixHumanAction = (mediaRecorder) => {\r\n\r\n if (typeof timeObj !== \"undefined\")\r\n clearTimeout(timeObj);\r\n\r\n mediaRecorder.stop();\r\n context.close();\r\n context = null;\r\n \r\n };\r\n\r\n // Variables in JavaScript can be defined with var , let , or const . In general: Don't use var anymore\r\n\r\n const startKaraoke =() => {\r\n\r\n navigator.mediaDevices.getUserMedia({audio: true,video: false})\r\n .then(function(stream) {\r\n\r\n //re-create background audio from buffer\r\n if (backgroud_buffer != null)\r\n {\r\n //alert(\"backgroud_buffer is not null\");\r\n if (context == null)\r\n context = new window.AudioContext();\r\n playbackTrack = context.createBufferSource();\r\n playbackTrack.buffer = backgroud_buffer;\r\n } else{\r\n alert(\"backgroud_buffer is null\");\r\n }\r\n\r\n //AudioInput.js:292 error: InvalidStateError: Failed to execute 'start' on 'AudioBufferSourceNode': cannot call start more than once.\r\n //https://blog.szynalski.com/2014/04/web-audio-api/\r\n //Both OscillatorNodes (which are used to generate simple tones) and AudioBufferSourceNodes \r\n //(which are used to play back short samples like sound effects) are meant to be thrown away after each use.\r\n\r\n console.log(\"navigator.mediaDevices.getUserMedia return\");\r\n var mixedAudio = context.createMediaStreamDestination();\r\n\r\n //The ChannelSplitterNode interface, often used in conjunction with its opposite, ChannelMergerNode, \r\n //separates the different channels of an audio source into a set of mono outputs. This is useful for \r\n //accessing each channel separately,\r\n\r\n //each source connect to spillter, then to merger\r\n\r\n\r\n // creates a ChannelMergerNode, which combines channels from multiple audio streams into a single audio stream.\r\n //2 - input audo stream has two channels\r\n var merger = context.createChannelMerger(2);\r\n\r\n // create a ChannelSplitterNode, which is used to access the individual channels of an \r\n //audio stream and process them separately. \r\n //2 - numberOfOutputs\r\n //The number of channels in the input audio stream that you want to output separately\r\n var splitter = context.createChannelSplitter(2);\r\n var duration = 60000; //60sec\r\n\r\n var chunks = [];\r\n var channel1 = [0, 1];\r\n var channel2 = [1, 0];\r\n\r\n var gainNode = context.createGain();\r\n playbackTrack.connect(gainNode); //connect background audio to gainNode\r\n gainNode.connect(splitter); //background audio after volume adjust gainNode, connect to splitter\r\n gainNode.gain.value = 0.05; // From 0 to 1\r\n\r\n splitter.connect(merger, channel1[0], channel1[1]);\r\n\r\n var microphone = context.createMediaStreamSource(stream);\r\n microphone.connect(splitter); //mairophone connect to splitter\r\n\r\n //microphone input connect to merge4\r\n splitter.connect(merger, channel2[0], channel2[1]);\r\n\r\n //https://developer.mozilla.org/en-US/docs/Web/API/ChannelMergerNode\r\n //merger config: \r\n //param=destination - The AudioNode or AudioParam to which to connect. \r\n //the index param is optional\r\n\r\n //how the connect() called multiple times?\r\n //If the destination is a node, connect() returns a reference to the destination AudioNode object, \r\n //allowing you to chain multiple connect() calls. \r\n merger.connect(mixedAudio);\r\n merger.connect(context.destination);\r\n\r\n //has issue to start it 2nd time\r\n //re-create everytime\r\n \r\n\r\n playbackTrack.start(0); //start the background audio\r\n mediaRecorder = new MediaRecorder(mixedAudio.stream);\r\n mediaRecorder.start(1);\r\n\r\n mediaRecorder.ondataavailable = function (event) {\r\n chunks.push(event.data);\r\n }\r\n\r\n mediaRecorder.onstop = function(event) {\r\n\r\n var blob = new Blob(chunks, {\r\n \"type\": \"audio/mp3\"\r\n });\r\n\r\n const file = new File([blob], \"upload.mp3\");\r\n\r\n console.log('mediaRecorder.onstop called');\r\n let audioDownload = URL.createObjectURL(blob);\r\n console.log(\"setBlobURL=\"+audioDownload);\r\n props.onSetAudioURL(audioDownload); \r\n \r\n props.onSetAudioFile(file);\r\n\r\n };\r\n\r\n stopMix(duration, mediaRecorder);\r\n })\r\n .catch(function(error) {\r\n console.log('error: ' + error);\r\n });\r\n\r\n}\r\n\r\n // This will upload the file after having read it\r\n const upload = (file) => {\r\n\r\n //https://flaviocopes.com/how-to-upload-files-fetch/\r\n const formData = new FormData()\r\n formData.append('files', file)\r\n\r\n //let athis = this;\r\n\r\n // \"https://localhost:5001/api/File/Upload\"\r\n fetch(configData.UPLOAD_URL, {\r\n // Your POST endpoint\r\n method: \"POST\",\r\n body: formData, // This is your file object\r\n })\r\n .then(\r\n (response) => response.json() // if the response is a JSON object\r\n )\r\n .then( \r\n (success) => { \r\n props.sendMessage('xxx', 'xxx upload file', success.files);\r\n } \r\n )\r\n .catch(\r\n (error) => console.log(error) // Handle the error response object\r\n );\r\n };\r\n\r\n const style1={\r\n margin: '0 auto', \r\n width: '800px', \r\n position: 'relative'\r\n }\r\n\r\n const atyle =\r\n { \r\n display: 'inline-block' ,\r\n width: '100px',\r\n height: '30px'\r\n };\r\n\r\n const formatTime = (seconds) => {\r\n const h = Math.floor(seconds / 3600)\r\n const m = Math.floor((seconds % 3600) / 60)\r\n const s = seconds % 60\r\n return [h, m > 9 ? m : h ? '0' + m : m || '0', s > 9 ? s : '0' + s]\r\n .filter(a => a)\r\n .join(':')\r\n }\r\n\r\n const renderPopupRecorder = () => {\r\n return (\r\n <>\r\n\r\n\r\n
\r\n */}\r\n {/* style={{margin: '0 auto', width: '800px', position: 'relative'}} */}\r\n
\r\n \r\n\r\n {/* start karaoke */}\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{audioState ?
\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 return (\r\n \r\n\r\n <>\r\n \r\n {props.audioTitle &&
\r\n\r\n props.audioTitle
}\r\n{ props.audioText }
\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 {audioState ?
\r\n\r\n \r\n
\r\n