gistfile1.txt

import React, { useState } from 'react';
import { connect } from 'react-redux';
import ResizablePanel from '../ResizablePanel';
import SiriWave from 'react-siriwave';
import undo from '../../assets/img/undo.svg';
import redo from '../../assets/img/redo.svg';
import stop from '../../assets/img/stop-button.svg';
import RecordingControllerFinished from '../customComponents/RecordingControllerFinished';
import AudioButtons from '../customComponents/AudioButtons';
import EditButton from '../customComponents/EditButton';

function asideRecordingComponent(props) {
  const [width, setWidth] = useState(200);
  const { isRecording, recordedChunks } = props.audio;
  console.log(isRecording, recordedChunks.length > 0);
  const timeline =
    props.imagesJsx.length !== 0 ? (
      <div className="timeline">
        <div className="timeline__audios" />
        <div className="timeline__images">
          {props.imagesJsx &&
            props.imagesJsx.map(image => {
              return (
                <button className="timeline__image-item">
                  <img src={image.props.src} alt="" />
                </button>
              );
            })}
        </div>
        <div className="timeline__stick" />
      </div>
    ) : null;

  function getFrequncy() {
    if (isRecording) {
      setInterval(function () {
        //code goes here that will be run every 5 seconds.
        let random = Math.floor(Math.random() * 6) + 3;

        return random;
      }, 5000);
    } else {
      console.log('isRecording');
      clearTimeout(5000);
    }
  }

  function getAmplitude() {
    if (isRecording) {
      setInterval(function () {
        return Number.parseFloat(1 - Math.random()).toFixed(2);
      }, 5000);
    } else {
      clearInterval(5000);
    }
  }

  return (
    <ResizablePanel>
      <div className=" aside-menu-container-recording aside-recording">
        <EditButton />
        <div className="aside-recording-controller">
          <RecordingControllerFinished
            renderSaveCheckpointButton={props.renderSaveCheckpointButton}
            saveCheckpointClickHandler={props.saveCheckpointClickHandler}
          />
          {/* <span>
                    <img src={undo} alt=""/>
                </span>
                <span>
                    <img src={redo} alt=""/>
                </span>
                <div className='aside-recording-finish'>
                    <a href="">Finish</a>
                </div> */}
        </div>
        <div className="aside-recording-description">
          {props.descriptionJsx}
        </div>
        {props.checkpointsJsx}
        {props.addCheckpointJsx}
        <div className="edit-address-geosuggest">{props.geosuggestJsx}</div>
        {props.hintJsx}
        {/*props.imagesJsx*/}
        {console.log(props.imagesJsx)}
        {/* {timeline} */}
        <div className="visualization" id="visualization" hidden>
          <div className="timebar-container">
            <div className="timebar" id="timebar">
              <div className="timepoint">
                <div>00:00</div>
              </div>
              <div className="point" />
              <div className="point" />
              <div className="point" />
              <div className="point" />
            </div>
          </div>

          <div className="cursor-container">
            <div className="graph-container">
              <div className="graph" id="graph">
                <div className="bar" />
                <div className="bar" />
                <div className="bar" />
              </div>
            </div>

            <div className="visual-img-scroll-container">
              <div className="visual-img-container" id="visual-img-container">
                <div className="visual-img"></div>
                <div className="visual-img resizable">
                  <div className="img-bar left"></div>
                  <div className="img-bar right"></div>
                </div>
              </div>
            </div>

            <div className="cursor" id="cursor">
              <div />
            </div>
          </div>
        </div>
        {props.imageUploaderJsx}
        <div className="stopwatch">
          {/* {isRecording ? props.recordLength : null} */}
        </div>
        {props.bottomButtonsJsx}
        {/* <div className="recording-component">
          {isRecording ? (
            <SiriWave
              width={448}
              height={333}
              color={'#4096f7'}
              style={'ios'}
              speed={0.1}
              frequency={getFrequncy()}
              amplitude={getAmplitude()}
            />
          ) : recordedChunks.length > 0 ? (
            <div>
              <SiriWave
                width={448}
                height={332}
                color={'#4096f7'}
                style={'ios'}
                speed={0}
              />
            </div>
          ) : null}
        </div> */}
        <div className="record-stop-container">
          <AudioButtons audioButtonsJsx={props.audioButtonsJsx} />
          {/* <div>
                    <span>0:14</span>
                <img src={stop} alt=""/>
                </div> */}
        </div>
      </div>
      <EditButton />
      <div className="aside-recording-controller">
        <RecordingControllerFinished
          renderSaveCheckpointButton={props.renderSaveCheckpointButton}
          saveCheckpointClickHandler={props.saveCheckpointClickHandler}
        />
        {/* <span>
                    <img src={undo} alt=""/>
                </span>
                <span>
                    <img src={redo} alt=""/>
                </span>
                <div className='aside-recording-finish'>
                    <a href="">Finish</a>
                </div> */}
      </div>
      <div className="aside-recording-description">{props.descriptionJsx}</div>
      {props.checkpointsJsx}
      {props.addCheckpointJsx}
      {/* <div className="edit-address-geosuggest">{props.geosuggestJsx}</div> */}
      {/*props.hintJsx}
      {props.imagesJsx}
      {props.imageUploaderJsx}
      {isRecording ? props.recordLength : null}
              {props.bottomButtonsJsx*/}
      {/* <div className="recording-component">
        {isRecording ? (
          <SiriWave
            width={448}
            height={333}
            color={'#4096f7'}
            style={'ios'}
            speed={0.1}
            frequency={getFrequncy()}
            amplitude={getAmplitude()}
          />
        ) : recordedChunks.length > 0 ? (
          <div>
            <SiriWave
              width={448}
              height={332}
              color={'#4096f7'}
              style={'ios'}
              speed={0}
            />
          </div>
        ) : null}
      </div> */}
      <div className="record-stop-container">
        <AudioButtons audioButtonsJsx={props.audioButtonsJsx} />
        {/* <div>
                    <span>0:14</span>
                <img src={stop} alt=""/>
                </div> */}
      </div>
    </ResizablePanel>
  );
}

const mapStateToProps = state => {
  const { audio } = state;
  return { audio };
};

export default connect(
  mapStateToProps,
  null
)(asideRecordingComponent);