react-icons/fa#FaStop JavaScript Examples

The following examples show how to use react-icons/fa#FaStop. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: PlayContextMenu.js    From kalimba-tabs with MIT License 5 votes vote down vote up
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>
    );
  }
Example #2
Source File: TabCreator.js    From kalimba-tabs with MIT License 4 votes vote down vote up
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>
    );
  }