react-icons/fa#FaPlay JavaScript Examples

BannerDefault = () => {
  return (
    <BannerSectionWrapper>
      <ParticleComponent />
      <Container fullWidthSM>
        <Row>
          <Col sm={7} md={6} lg={7}>
            <SectionTitle
              className="section-title"
              leftAlign={true}
              UniWidth="100%"
            >
              <h4>30% off for new users for 1 month</h4>
              <h1>
                Drive Customers Passing Your Appslife With <span>Appion</span>
              </h1>
            </SectionTitle>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad
              minim veniam quis nostrud exercitation.
            </p>
            <VintageBox right={true} vintageOne={true}>
              <Button className="banner-btn one">
                <FaDownload className="icon-left" />
                Run Meshery
              </Button>
              <Button className="banner-btn two">
                <FaPlay className="icon-left" /> Watch Now
              </Button>
            </VintageBox>
          </Col>
        </Row>
      </Container>
    </BannerSectionWrapper>
  );
}

render() {
    const paused = this.state.paused || this.state.audio === null;

    return (
      <Space
        size="small"
        style={{ width: "100%", alignItems: 'center' }}
        onClick={(e) => e.stopPropagation()}
      >
        <Button onClick={paused ? this.play : this.pause}>
          {paused ? <FaPlay /> : <FaPause />}
        </Button>

        {this.state.error ? (
          <div>Unable to play</div>
        ) : this.audio ? (
          <div style={{ display: "flex", flex: 1, alignItems: "center" }}>
            <PlaybackControl
              current={this.state.current}
              duration={this.state.duration}
              onChange={time => {
                this.audio.currentTime = time;
                if (paused) this.audio.pause();
              }}
            />
          </div>
        ) : null}
      </Space>
    );
  }

Poster = (props) => {
  const { Playing, video } = useContext(VideoContext)
  const [onscreen, setonscreen] = useState(true)
  useEffect(() => {
    if (Playing === true) {
      setonscreen(false)
    }
  }, [Playing])
  function play(e) {
    video.current.play()
  }
  return (
    <div style={onscreen === false ? { display: 'none' } : {}} className="postercover">
      <div className="posterimage">
        {props.poster ? <img src={props.poster} alt="poster" /> : ""}
        <div className="postericon">
          <div className="picon">
            <FaPlay onClick={play} />
          </div>
        </div>
      </div>
    </div>
  )
}

BannerClassic = () => {
  return (
    <BannerSectionWrapper>
      <Container>
        <Row Vcenter={true}>
          <Col sm={12} sm={7}>
            <SectionTitle
              className="section-title"
              leftAlign={true}
              UniWidth="100%"
            >
              <h4>
                {" "}
                <span> 50% </span> off for new users for 1 month
              </h4>
              <h1>
                Drive Customers Passing Your Appslife With <span>Appion</span>
              </h1>
            </SectionTitle>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad
              minim veniam quis nostrud exercitation.
            </p>

            <VintageBox right={true} vintageOne={true}>
              <Button className="banner-btn one">
                <FaDownload className="icon-left" />
                Run Meshery
              </Button>
              <Button className="banner-btn two">
                <FaPlay className="icon-left" /> Watch Now
              </Button>
            </VintageBox>
          </Col>

          <Col sm={12} sm={5}>
            <div className="app-screen-image-wrapper">
              <img src={AppScreenImage} alt="prime app screen" />
              <div className="thumb one">
                <img src={AppScreenThumb1} alt="prime app screen" />
              </div>
              <div className="thumb two">
                <img src={AppScreenThumb2} alt="prime app screen" />
              </div>
            </div>
          </Col>
        </Row>
      </Container>
    </BannerSectionWrapper>
  );
}

BannerModern = () => {
  return (
    <BannerSectionWrapper>
      <ParticleComponent />
      <Container fullWidthSM>
        <Row Vcenter={true}>
          <Col sm={7} md={6}>
            <SectionTitle
              className="section-title"
              leftAlign={true}
              UniWidth="100%"
            >
              <h4>30% off for new users for 1 month</h4>
              <h1>
                Drive Customers Passing Your Appslife With <span>Appion</span>
              </h1>
            </SectionTitle>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad
              minim veniam quis nostrud exercitation.
            </p>
            <VintageBox right={true} vintageOne={true}>
              <Button className="banner-btn one">
                <FaDownload className="icon-left" />
                Run Meshery
              </Button>
              <Button className="banner-btn two">
                <FaPlay className="icon-left" /> Watch Now
              </Button>
            </VintageBox>
          </Col>
          <Col sm={5} md={6}>
            <img
              src={imgHero}
              className="hero-img"
              alt="prime-app hero image"
            />
          </Col>
        </Row>
      </Container>
    </BannerSectionWrapper>
  );
}

NotesComponent = props => {
  const [showEditor, setShowEditor] = useState(false);

  const playAudio = async () => {
    const result = await Predictions.convert({
      textToSpeech: {
        source: {
          text: props.text
        }
      }
    });

    const audioCtx = new AudioContext();
    const source = audioCtx.createBufferSource();

    audioCtx.decodeAudioData(
      result.audioStream,
      buffer => {
        source.buffer = buffer;
        source.connect(audioCtx.destination);
        source.start(0);
      },
      error => console.log(error)
    );
  };

  return (
    <Note>
      <Info>
        <Title>{props.title}</Title>
        <Text>{props.text}</Text>
      </Info>
      <Divider />
      <NoteActions>
        <Icon onClick={() => playAudio()}>
          <FaPlay />
        </Icon>
        <Icon onClick={() => setShowEditor(true)}>
          <FaRegEdit />
        </Icon>
        <Icon>
          <FaRegTrashAlt onClick={props.onDelete} />
        </Icon>
      </NoteActions>

      {showEditor && (
        <RecordingEditor
          title={props.title}
          text={props.text}
          onDismiss={() => {
            setShowEditor(false);
          }}
          onSave={props.onSaveChanges}
        />
      )}
    </Note>
  );
}

LowerControls = (props) => {
  const { Playing, CurrentTime, Duration, section } = useContext(VideoContext)
  const [fullscreen, setfullscreen] = useState(false)

  const { video } = props
  function play(e) {
    video.current.play()
    if (props.onPlay) {
      props.onPlay(e)
    }
  }
  function forward(e) {
    let dur = (5 / 100) * video.current.duration

    video.current.currentTime += dur
  }
  function pause(e) {
    video.current.pause()
  }
  const enterFullScreen = (e) => {
    section.current.requestFullscreen()
    if (props.onEnterFullScreen) {
      props.onEnterFullScreen(e)
    }
    setfullscreen(true)

  }
  const exitFullScreen = (e) => {
    section.current.ownerDocument.exitFullscreen()
    setfullscreen(false)

  }
  return (
    <>
      <div className="controls">
        <div className="play">
          {Playing ? <FaPause onClick={pause} /> :
            <FaPlay onClick={play} />}
        </div>
        <div className="foward">
          <FaForward onClick={forward} />
        </div>
        <div className="timestamps">
          {CurrentTime} / {Duration}
        </div>
        <div className="settimgs">
          <div className="fullscreen">
            {fullscreen === false ? <RiFullscreenFill onClick={enterFullScreen} /> :
              <MdFullscreenExit onClick={exitFullScreen} />}
          </div>
          {props.nosettings ? <></> :
            <Settings {...props} />}
        </div>
      </div>
    </>
  )
}

ContextMenu = (props) => {
  const { contextmenu, CMposition, Playing, setcontextmenu, src, setplayback, video } = useContext(VideoContext)
  const { left, top } = CMposition
  function PictureInPicture(e) {
    video.current.requestPictureInPicture()
  }
  function play(e) {
    video.current.play()
  }
  function pause(e) {
    video.current.pause()
  }
  function setClipboard() {
    let text = video.current.currentSrc
    navigator.clipboard.writeText(text).then(function () {
    }, function () {
      // eslint-disable-next-line no-restricted-globals
      alert('failed to copy url')
    });
  }
  return (
    <div style={contextmenu === false ? { display: 'none' } : {}} onClick={(e) => { setcontextmenu(!contextmenu) }} className="contextcover">
      <div style={{ marginTop: top, marginLeft: left }} className="contextmenu">
        <div onClick={Playing ? pause : play} className="menuitem">
          {Playing ? <>
            <span className="icon">
              <FaPause />
            </span>
            <span className="item">Pause</span></> :
            <>
              <span className="icon">
                <FaPlay />
              </span>
              <span className="item">Play</span></>}
        </div>
        {props.nodownload ? <></> :
          <a download="video" href={src} className="menuitem">
            <span className="icon">
              <FiDownloadCloud />
            </span>
            <span className="item">Download</span>
          </a>}
        <div onClick={PictureInPicture} className="menuitem">
          <span className="icon">
            <MdPictureInPicture />
          </span>
          <span className="item">MiniPlayer</span>
        </div>
        <div onClick={(e) => { setplayback(true) }} className="menuitem">
          <span className="icon">
            <GiSpeedometer />
          </span>
          <span className="item">Playback Speed</span>
        </div>
        <div onClick={(e) => { setClipboard() }} className="menuitem">
          <span className="icon">
            <MdFlipToBack />
          </span>
          <span className="item">Copy Video Adress</span>
        </div>
      </div>
    </div>
  )
}

render() {
    return (
      <div style={styles.mainContainer}>
        <div style={styles.actionContainer}>
          <FaPlus
            onClick={() => {
              this.props.addRow(this.props.noteBarNoteIndex);
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaMinus
            onClick={() => {
              this.props.removeRow(this.props.noteBarNoteIndex);
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaPaste
            onClick={() => {
              this.props.pasteSelection(this.props.noteBarNoteIndex);
              this.props.hideNoteBar();
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaStopwatch
            onClick={() => {
              this.props.noteTempoChange();
              this.props.hideNoteBar();
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaPlay
            onClick={() => {
              this.props.playFromNote(this.props.noteBarNoteIndex);
              this.props.hideNoteBar();
            }}
            color="blue"
          />
        </div>
        <div style={styles.actionContainer}>
          <FaTimes
            onClick={() => {
              this.props.hideNoteBar();
            }}
          />
        </div>
      </div>
    );
  }

render() {
    return (
      <div style={styles.mainContainer}>
        {!this.props.isPlaying ? (
          <div>
            <div
              style={styles.row}
              onClick={() => {
                this.props.play(false);
              }}
            >
              <FaPlay />
              <div>From Beginning</div>
            </div>
            <div
              style={styles.row}
              onClick={() => {
                this.props.play(true);
              }}
            >
              <FaPlay />
              <div>From Last Clicked Note</div>
            </div>
          </div>
        ) : (
          <div>
            <div
              style={styles.row}
              onClick={() => {
                this.props.stop();
              }}
            >
              <FaStop />
              Stop
            </div>
          </div>
        )}
      </div>
    );
  }

Header = () => {
  const [type, setType] = useState<string>(DIJKSTRA);
  const [pause, setPause] = useState<boolean>(false);
  const context = useContext<ContextType>(Context);
  const {
    begin,
    end,
    updateItem,
    delay,
    pathFinder,
    clear,
    clearPath,
    board,
    isVisualized,
    setIsPathExist,
    setIsVisualized,
    setIsHelped,
  } = context;

  const onAlgoChange = (e: ElementEvent<HTMLSelectElement>) => {
    setType(e.target.value);
  };

  const onDelayChange = (e: ElementEvent<HTMLSelectElement>) => {
    delay.current = Number(e.target.value);
  };

  const onVisualize = () => {
    if (isVisualized) return;
    clearPath();
    setIsVisualized(true);

    pathFinder.current = new PathFinder[type]({
      begin: begin.current,
      end: end.current,
      updateItem,
      board: board.current,
    });
    const isPossiblePath = pathFinder.current.execute();
    setIsPathExist(isPossiblePath);
  };

  const onClearAll = () => {
    if (isVisualized && !pause) return;
    if (pause) setPause(false);
    setIsVisualized(false);

    clear();
  };

  const onClearPath = () => {
    if (isVisualized && !pause) return;
    if (pause) setPause(false);
    setIsVisualized(false);

    clearPath();
  };

  const onPause = () => {
    if (pause) {
      setPause(false);
      pathFinder.current.resumeTimers();
    } else {
      setPause(true);
      pathFinder.current.stopTimers();
    }
  };

  const onHelp = () => {
    setIsHelped(true);
  };

  return (
    <div className="content-header">
      <select
        className="content-header__select"
        onChange={onAlgoChange}
        id="algorithm"
        disabled={isVisualized}
      >
        <option value={DIJKSTRA} defaultChecked>
          Dijkstra
        </option>
        <option value={BELLMAN_FORD}>Bellman-Ford</option>
        <option value={BFS}>0-1 BFS</option>
        <option value={DFS}>DFS</option>
        <option value={A_STAR}>A*</option>
      </select>
      <select
        className="content-header__select"
        onChange={onDelayChange}
        defaultValue={300}
        disabled={isVisualized}
      >
        <option value={DELAY_SLOW}>slowest</option>
        <option value={DELAY_SLOWEST}>slow</option>
        <option value={DELAY_NORMAL}>normal</option>
        <option value={DELAY_FAST}>fast</option>
        <option value={DELAY_FASTEST}>fastest</option>
      </select>
      <button
        className="content-header__button"
        onClick={onVisualize}
        disabled={isVisualized}
        type="button"
      >
        Visualize!
      </button>
      <button
        className="content-header__button"
        onClick={onClearAll}
        disabled={isVisualized && !pause}
        type="button"
      >
        Clear All
      </button>
      <button
        className="content-header__button"
        onClick={onClearPath}
        disabled={isVisualized && !pause}
        type="button"
      >
        Clear Path
      </button>
      <button
        className="content-header__button--pause"
        onClick={onPause}
        disabled={!isVisualized}
        type="button"
      >
        {pause ? <FaPlay /> : <FaPause />}
      </button>
      <button
        className="content-header__button--usage"
        onClick={onHelp}
        disabled={isVisualized && !pause}
        type="button"
      >
        How to use?
      </button>
    </div>
  );
}

AudioPlayer = ({ src }) => {
  /** @type {import("react").RefObject<HTMLAudioElement>} */
  const audio = useRef();
  const wasPlaying = useRef(false);
  const [enabled, setEnabled] = useState(false);

  const [state, dispatch] = useReducer((state, action) => {
    switch(action.type) {
      case "duration": return { ...state, duration: action.payload };
      case "current": return { ...state, currentTime: action.payload };
      case "loaded": return { ...state, loaded: true };
      case "error": return { ...state, error: true };
      case "play": return { ...state, playing: true };
      case "pause": return { ...state, playing: false };
      case "buffer": return { ...state, buffer: action.payload };
    }
  }, initialState);

  const format = useMemo(() => {
    if (state.duration >= 3600) {
      return ["hours", "minutes", "seconds"];
    } else {
      return ["minutes", "seconds"];
    }
  }, [state.duration]);

  const play = useCallback(() => {
    audio?.current?.play?.();
  }, [audio]);

  const pause = useCallback(() => {
    audio?.current?.pause?.();
  }, [audio]);

  const togglePlay = useCallback(() => {
    globalAudioRef.current?.pause();
    state.playing ? pause() : play();
    globalAudioRef.current = audio.current;
  }, [audio, state, play, pause]);

  const onSeekStart = useCallback(() => {
    wasPlaying.current = state.playing;
    if (state.playing) audio.current.pause();
  }, [audio, state, wasPlaying]);

  const onSeekEnd = useCallback(() => {
    if (wasPlaying.current) {
      audio.current.play();
    }
  }, [audio, wasPlaying]);

  const onSeek = useCallback((time) => {
    audio.current.currentTime = time;
  }, [audio]);

  const waitForPlayer = useCallback(() => {
    if (state?.error) {
      return;
    } else if (state?.loaded) {
      play();
    } else {
      setTimeout(() => waitForPlayer(), 10);
    }
  }, [state]);

  return enabled ? (
    <Block name="player" onClick={e => e.stopPropagation()}>
      {state.error ? (
        <Elem name="loading">
          Unable to play
        </Elem>
      ) : state.loaded ? (
        <Elem name="playback">
          <Elem name="controls" tag={Space} spread>
            <Space size="small">
              <Elem name="play" onClick={togglePlay}>
                {state.playing ? <FaPause/> : <FaPlay/>}
              </Elem>
              <Elem name="track">
                {filename(src)}
              </Elem>
            </Space>
            <Elem tag={Space} size="small" name="time">
              <Duration value={state.currentTime} format={format}/>
              {" / "}
              <Duration value={state.duration} format={format}/>
            </Elem>
          </Elem>

          <AudioSeeker
            currentTime={state.currentTime}
            duration={state.duration}
            buffer={state.buffer}
            onSeekStart={onSeekStart}
            onSeekEnd={onSeekEnd}
            onChange={onSeek}
          />
        </Elem>
      ) : (
        <Elem name="loading">
          <Spinner size="24"/>
        </Elem>
      )}

      <audio
        ref={audio}
        controls={false}
        preload="metadata"
        onPlay={() => dispatch({ type: 'play' })}
        onPause={() => dispatch({ type: 'pause' })}
        onTimeUpdate={() => dispatch({ type: "current", payload: audio.current.currentTime })}
        onDurationChange={() => dispatch({ type: "duration", payload: audio.current.duration })}
        onCanPlay={() => dispatch({ type: "loaded" })}
        onProgress={() => dispatch({ type: "buffer", payload: audio.current.buffered })}
        onError={() => dispatch({ type: "error" })}
      >
        <source src={src} type="audio/wav"/>
      </audio>
    </Block>
  ) : (
    <Block name="player" onClick={(e) => {
      e.stopPropagation();
      setEnabled(true);
      waitForPlayer();
    }}>
      <Elem name="controls" tag={Space} spread>
        <Space size="small">
          <Elem name="play">
            <FaPlay/>
          </Elem>
          <Elem name="track">
            Click to load
          </Elem>
        </Space>
        <Elem tag={Space} size="small" name="time">
        </Elem>
      </Elem>
    </Block>
  );

}

function SingleProject({ id, name, desc, tags, code, demo, image, theme }) {
    const useStyles = makeStyles((t) => ({
        iconBtn: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: 40,
            height: 40,
            borderRadius: 50,
            border: `2px solid ${theme.tertiary}`,
            color: theme.tertiary,
            transition: 'all 0.2s',
            '&:hover': {
                backgroundColor: theme.secondary,
                color: theme.primary,
                transform: 'scale(1.1)',
                border: `2px solid ${theme.secondary}`,
            },
        },
        icon: {
            fontSize: '1.1rem',
            transition: 'all 0.2s',
            '&:hover': {},
        },
    }));

    const classes = useStyles();

    return (
        <Fade bottom>
            <div
                key={id}
                className='singleProject'
                style={{ backgroundColor: theme.primary400 }}
            >
                <div className='projectContent'>
                    <h2
                        id={name.replace(' ', '-').toLowerCase()}
                        style={{ color: theme.tertiary }}
                    >
                        {name}
                    </h2>
                    <img src={image ? image : placeholder} alt={name} />
                    <div className='project--showcaseBtn'>
                        <a
                            href={demo}
                            target='_blank'
                            rel='noreferrer'
                            className={classes.iconBtn}
                            aria-labelledby={`${name
                                .replace(' ', '-')
                                .toLowerCase()} ${name
                                .replace(' ', '-')
                                .toLowerCase()}-demo`}
                        >
                            <FaPlay
                                id={`${name
                                    .replace(' ', '-')
                                    .toLowerCase()}-demo`}
                                className={classes.icon}
                                aria-label='Demo'
                            />
                        </a>
                        <a
                            href={code}
                            target='_blank'
                            rel='noreferrer'
                            className={classes.iconBtn}
                            aria-labelledby={`${name
                                .replace(' ', '-')
                                .toLowerCase()} ${name
                                .replace(' ', '-')
                                .toLowerCase()}-code`}
                        >
                            <FaCode
                                id={`${name
                                    .replace(' ', '-')
                                    .toLowerCase()}-code`}
                                className={classes.icon}
                                aria-label='Code'
                            />
                        </a>
                    </div>
                </div>
                <p
                    className='project--desc'
                    style={{
                        background: theme.secondary,
                        color: theme.tertiary,
                    }}
                >
                    {desc}
                </p>
                <div
                    className='project--lang'
                    style={{
                        background: theme.secondary,
                        color: theme.tertiary80,
                    }}
                >
                    {tags.map((tag, id) => (
                        <span key={id}>{tag}</span>
                    ))}
                </div>
            </div>
        </Fade>
    );
}

render() {
    return (
      <div
        style={styles.tabCreatorContainer}
        onClick={() => {
          this.setState({ showPlayContextMenu: false });
        }}
      >
        {this.state.exporting && (
          <ScreenWideModal>
            <div style={styles.exportModal}>
              <div>Exporting Song...</div>
              <div style={{ margin: 10 }}>
                <ClipLoader />
              </div>
              <div>Don't resize the window for best results.</div>
            </div>
          </ScreenWideModal>
        )}
        {this.state.showNewSongWindow && (
          <NewSongWindow
            hide={() => {
              this.setState({ showNewSongWindow: false });
            }}
            onCreate={() => {
              //ask if they want to save this song

              this.setState({ showNewSongWindow: false });

              let kalimba = document.getElementById("kalimbaContainer");
              kalimba.scrollTop = kalimba.scrollHeight;
            }}
          />
        )}
        {/* TOOLBAR */}
        <div style={styles.controlPanelContainer}>
          {/* SONG CONTROL */}
          <div style={styles.songControlContainer}>
            {/* HOME BUTTON */}
            <ToolBarButton
              onClick={async () => {
                this.stopSong();
                await delay(1);
                this.props.history.push("/");
              }}
              name="Home"
            >
              <FaHome size={30} />
            </ToolBarButton>
            {/* NEW SONG */}
            <ToolBarButton
              onClick={() => {
                this.setState({ showNewSongWindow: true });
              }}
              name="New"
            >
              <FaFile size={25} />
            </ToolBarButton>
            {/* OPEN */}
            <ToolBarButton
              onClick={() => {
                this.openSong();
              }}
              name="Open"
            >
              <FaFolderOpen size={30} />
            </ToolBarButton>
            {/* SAVE */}
            <ToolBarButton
              onClick={() => {
                this.saveSong();
              }}
              name="Save"
            >
              <FaSave size={30} />
            </ToolBarButton>
            {/* EXPORT */}
            <ToolBarButton
              onClick={() => {
                this.exportToPDF();
              }}
              disabled={this.state.exporting || this.state.playing}
              selected={this.state.exporting}
              name="Export"
            >
              {this.state.exporting ? (
                <ClipLoader size={30} color="blue" />
              ) : (
                <FaFileExport size={30} />
              )}
            </ToolBarButton>
            {/* PLAY BUTTON */}
            <div style={{ position: "relative" }}>
              <ToolBarButton
                selected={this.state.playing}
                onClick={() => {
                  this.state.playing ? this.stopSong() : this.playSong(false);
                }}
                onContextMenu={() => {
                  this.setState({ showPlayContextMenu: true });
                }}
                name={this.state.playing ? "Stop" : "Play"}
              >
                {this.state.playing ? (
                  <FaStop color="red" size={30} />
                ) : (
                  <FaPlay color="blue" size={30} />
                )}
              </ToolBarButton>
              {this.state.showPlayContextMenu && (
                <PlayContextMenu
                  play={(fromMiddle) => {
                    this.state.playing
                      ? this.stopSong()
                      : this.playSong(fromMiddle);
                    this.setState({ showPlayContextMenu: false });
                  }}
                  isPlaying={this.state.playing}
                  stop={() => {
                    this.stopSong();
                  }}
                />
              )}
            </div>
          </div>
          {/* TITLE INPUT */}
          <div style={styles.titleContainer} id="titleandtempo">
            {!this.state.editTitle ? (
              <div
                onClick={() => {
                  this.setState({ editTitle: true });
                }}
                style={styles.songTitle}
              >
                {this.props.songTitle}
              </div>
            ) : (
              <input
                placeholder={this.props.songTitle}
                onKeyPress={(event) => {
                  if (event.key === "Enter") {
                    this.setState({ editTitle: false });
                  }
                }}
                style={styles.titleInput}
                onChange={(e) => {
                  this.props.changeTitle(e.target.value);
                }}
              />
            )}
            {!this.state.editTempo ? (
              <div
                onClick={() => {
                  this.setState({ editTempo: true });
                }}
                style={{ margin: 5 }}
              >
                {this.props.tempo}
              </div>
            ) : (
              <input
                onKeyPress={(event) => {
                  if (event.key === "Enter") {
                    this.setState({ editTempo: false });
                    this.props.changeTempo(this.state.enteredTempo);
                  }
                }}
                placeholder={this.props.tempo}
                style={styles.tempoInput}
                type="number"
                min="0"
                max="500"
                onChange={(e) => {
                  // this.props.changeTempo(e.target.value);
                  this.setState({ enteredTempo: e.target.value });
                }}
              />
            )}
          </div>
          {/* NOTE TOOLBAR */}
          <div style={styles.noteToolbarContainer}>
            {/* SELECTION MODE BUTTON */}
            <ToolBarButton
              selected={this.props.selectionMode}
              onClick={() => {
                this.props.toggleSelectionMode();
              }}
              name="Selection Mode"
            >
              <FaHandPointer />
            </ToolBarButton>
            <div style={styles.noteToolbarDivider} />
            {/* EXTEND SONG BUTTON */}
            <ToolBarButton
              onClick={() => {
                this.props.extendSong();
              }}
              name="Extend Song"
            >
              <FaPlus />
            </ToolBarButton>
            <div style={styles.noteToolbarDivider} />
            <NoteButton value={1} />
            <NoteButton value={2} />
            <NoteButton value={4} />
            <NoteButton value={8} />
            <NoteButton value={16} />
            <div style={styles.noteToolbarDivider} />
            <AccidentalButton value="♯" />
            <AccidentalButton value="♭" />
            <AccidentalButton value="♮" />
            <div style={styles.noteToolbarDivider} />
            {/* DOTTED BUTTON */}
            <ToolBarButton
              selected={this.props.dotted}
              onClick={() => {
                this.props.toggleDotted();
              }}
            >
              <div
                style={{
                  width: 10,
                  height: 10,
                  borderRadius: 5,
                  backgroundColor: this.props.dotted ? "blue" : "black",
                }}
              />
            </ToolBarButton>
            {/* REST BUTTON */}
            <ToolBarButton
              selected={this.props.rest}
              onClick={() => {
                this.props.toggleRest();
              }}
            >
              <img
                src={QuarterRest}
                style={{ width: 15, height: "auto" }}
                alt={"resticon"}
              />
            </ToolBarButton>
            {/* TRIPLET BUTTON */}
            <ToolBarButton
              selected={this.props.tripletMode}
              onClick={() => {
                this.props.toggleTriplet();
              }}
              name="Triplet"
            >
              -3-
            </ToolBarButton>
          </div>
        </div>
        {/* EVERYTHING BELOW TOOLBAR */}
        <div style={styles.lowerHalf}>
          <div style={{ flex: 1 }}></div>
          <div
            id="kalimbaContainer"
            style={{
              ...styles.kalimbaContainer,
              height: this.state.height - 90,
            }}
          >
            {this.state.kalimba !== null ? (
              <Kalimba
                kalimba={this.state.kalimba}
                currentNote={this.state.currentNoteIndex}
                playing={this.state.playing}
                visibleHeight={this.state.height}
                playFromNote={(index) => {
                  this.playSong(false, index);
                }}
                scrollBack={() => {
                  let kalimbaContainer = document.getElementById(
                    "kalimbaContainer"
                  );
                  kalimbaContainer.scrollTop += 50 * 25;
                }}
              />
            ) : (
              <div style={{ alignSelf: "center" }}>
                <ScaleLoader />
              </div>
            )}
          </div>
          <div style={{ flex: 1 }}></div>
        </div>
      </div>
    );
  }