move some components
Seto Elkahfi committed
Aug 1, 2024 at 21:22 UTC
44fb77245cefdc45a7ab0b344268be1f17218ffa
3 files changed
+76
-5
frontend/splitfire-desktop/app/play/_components/control-button.tsx
new
+43
@@ -0,0 +1,43 @@
1
+import { Col, Row } from "react-bootstrap"
2
+import { BsPlayBtnFill, BsStopBtnFill, BsFillRecordBtnFill, BsPauseBtnFill } from "react-icons/bs"
3
+
4
+export function ControlButtons(props: { isPlaying: boolean, isRecording: boolean, onClick: () => void, onStop: () => void, onRecord: () => void }) {
5
+
6
+ const { isPlaying, isRecording, onClick, onStop, onRecord } = props
7
+
8
+ const _onPlayOrPause = () => {
9
+ if (isRecording) return
10
+
11
+ onClick()
12
+ }
13
+
14
+ return <>
15
+ <Col xs={{span: 1, offset: 4}} className="mb-3 mt-3" color="red" >
16
+ { isPlaying ? <BsPauseBtnFill onClick={_onPlayOrPause} size={32} style={ { cursor: isRecording ? undefined : "pointer"}} title="Pause" color={ isRecording ? "grey" : "white"} />
17
+ : <BsPlayBtnFill onClick={_onPlayOrPause} size={32} style={ { cursor: isRecording ? undefined : "pointer"}} title="Play" color={ isRecording ? "grey" : "white" } />
18
+ }
19
+ </Col>
20
+ <Col xs={{span: 1}} className="mb-3 mt-3">
21
+ <BsStopBtnFill
22
+ onClick={() => {
23
+ if (isRecording) return
24
+
25
+ onStop()
26
+ }}
27
+ size={32}
28
+ style={{ cursor: isRecording ? undefined : "pointer"}}
29
+ title="Stop"
30
+ color={ isRecording ? "grey" : "white" }
31
+ />
32
+ </Col>
33
+ <Col xs={{span: 1}} className="mb-3 mt-3">
34
+ <BsFillRecordBtnFill
35
+ onClick={onRecord}
36
+ size={32}
37
+ style={{ cursor: "pointer"}}
38
+ title={ isRecording ? "Stop" : "Record"}
39
+ color={ isRecording ? "green" : "red" }
40
+ />
41
+ </Col>
42
+ </>
43
+}
frontend/splitfire-desktop/app/play/_components/player.tsx
+5
-5
@@ -21,6 +21,8 @@ import {
21
import { invoke } from "@tauri-apps/api";
22
import { useState } from "react";
23
import { Row, Col, Container } from "react-bootstrap";
24
+import { VolumeSlider } from "./volume-slider";
25
+import { ControlButtons } from "./control-button";
26
27
export default function Player({
28
audioId,
@@ -192,7 +194,7 @@ export default function Player({
194
buttonOrCounting = <CountDownView seconds={COUNTING_DOWN_NUMBER} type="" />;
195
} else {
196
buttonOrCounting = (
195
- <ControlButtonsView
197
+ <ControlButtons
198
isPlaying={playerState === PlayerState.PLAYING}
199
isRecording={playerState === PlayerState.RECORDING}
200
onClick={_togglePlayAudio}
@@ -223,8 +225,7 @@ export default function Player({
225
226
return (
227
<div className="prose prose-sm prose-invert max-w-none">
226
- <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
227
- <Container>
228
+ <div className="grid grid-rows-4 gap-6">
229
{buttonOrCounting}
230
<Row className="h-100 d-inline-block">
231
<Col xs={12} className="mb-3 mt-3">
@@ -245,12 +246,11 @@ export default function Player({
246
setHideVolumeSliders={setHideVolumeSliders}
247
/>
248
</Col>
248
- <VolumeSliderView
249
+ <VolumeSlider
250
_onVolumeChange={_onVolumeChange}
251
isHidden={hideVolumeSliders}
252
/>
253
</Row>
253
- </Container>
254
</div>
255
</div>
256
);
frontend/splitfire-desktop/app/play/_components/volume-slider.tsx
new
+28
@@ -0,0 +1,28 @@
1
+import { ModeDemucs } from "@/app/_src/components/player/models/Mode"
2
+import { Container, Row, Col, Form } from "react-bootstrap"
3
+
4
+export function VolumeSlider(props: { _onVolumeChange: (mode: ModeDemucs, value: string) => void, isHidden: boolean }) {
5
+
6
+ const { _onVolumeChange, isHidden } = props
7
+
8
+ return <Container hidden={isHidden} className="mb-3">
9
+ <Row>
10
+ <Col xs={3}>
11
+ <p>Vocals</p>
12
+ <Form.Range onChange={e => _onVolumeChange(ModeDemucs.Vocals, e.target.value) } defaultValue={100}/>
13
+ </Col>
14
+ <Col xs={3}>
15
+ <p>Drums</p>
16
+ <Form.Range onChange={e => _onVolumeChange(ModeDemucs.Drums, e.target.value) } defaultValue={100} />
17
+ </Col>
18
+ <Col xs={3}>
19
+ <p>Bass</p>
20
+ <Form.Range onChange={e => _onVolumeChange(ModeDemucs.Bass, e.target.value) } defaultValue={100} />
21
+ </Col>
22
+ <Col xs={3}>
23
+ <p>Other</p>
24
+ <Form.Range onChange={e => _onVolumeChange(ModeDemucs.Other, e.target.value) } defaultValue={100} />
25
+ </Col>
26
+ </Row>
27
+ </Container>
28
+}
\ No newline at end of file