fix dependencies
Seto Elkahfi committed
Aug 4, 2024 at 19:47 UTC
5c348adb022b79be0e742d2bf76cbfa9b436985e
5 files changed
+84
-49
.vscode/launch.json
-4
@@ -15,8 +15,6 @@
15
"--no-default-features"
16
]
17
},
18
- // task for the `beforeDevCommand` if used, must be configured in `.vscode/tasks.json`
19
- "preLaunchTask": "ui:dev"
18
},
19
{
20
"type": "lldb",
@@ -29,8 +27,6 @@
27
"--manifest-path=./frontend/splitfire-desktop/src-tauri/Cargo.toml"
28
]
29
},
32
- // task for the `beforeBuildCommand` if used, must be configured in `.vscode/tasks.json`
33
- "preLaunchTask": "ui:build"
30
}
31
]
32
}
\ No newline at end of file
frontend/splitfire-desktop/app/play/_components/volume-slider.tsx
+76
-26
@@ -1,28 +1,78 @@
1
-import { ModeDemucs } from "@/models/mode"
2
-import { Container, Row, Col, Form } from "react-bootstrap"
1
+import { ModeDemucs } from "@/models/mode";
2
+import * as Form from "@radix-ui/react-form";
3
4
-export function VolumeSlider(props: { _onVolumeChange: (mode: ModeDemucs, value: string) => void, isHidden: boolean }) {
4
+export function VolumeSlider(props: {
5
+ _onVolumeChange: (mode: ModeDemucs, value: string) => void;
6
+ isHidden: boolean;
7
+}) {
8
+ const { _onVolumeChange, isHidden } = props;
9
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
10
+ return (
11
+ <div className="grid grid-rows-1">
12
+ <div className="grid grid-col-1">
13
+ <label
14
+ htmlFor="disabled-range"
15
+ className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
16
+ >
17
+ Vocals
18
+ </label>
19
+ <input
20
+ id="disabled-range"
21
+ type="range"
22
+ value="50"
23
+ className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
24
+ onChange={(e) => _onVolumeChange(ModeDemucs.Vocals, e.target.value)}
25
+ defaultValue={100}
26
+ />
27
+ </div>
28
+ <div className="grid grid-col-1">
29
+ <label
30
+ htmlFor="disabled-range"
31
+ className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
32
+ >
33
+ Drums
34
+ </label>
35
+ <input
36
+ id="disabled-range"
37
+ type="range"
38
+ value="50"
39
+ className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
40
+ onChange={(e) => _onVolumeChange(ModeDemucs.Drums, e.target.value)}
41
+ defaultValue={100}
42
+ />
43
+ </div>
44
+ <div className="grid grid-col-1">
45
+ <label
46
+ htmlFor="disabled-range"
47
+ className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
48
+ >
49
+ Bass
50
+ </label>
51
+ <input
52
+ id="disabled-range"
53
+ type="range"
54
+ value="50"
55
+ className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
56
+ onChange={(e) => _onVolumeChange(ModeDemucs.Bass, e.target.value)}
57
+ defaultValue={100}
58
+ />
59
+ </div>
60
+ <div className="grid grid-col-1">
61
+ <label
62
+ htmlFor="disabled-range"
63
+ className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
64
+ >
65
+ Other
66
+ </label>
67
+ <input
68
+ id="disabled-range"
69
+ type="range"
70
+ value="50"
71
+ className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
72
+ onChange={(e) => _onVolumeChange(ModeDemucs.Other, e.target.value)}
73
+ defaultValue={100}
74
+ />
75
+ </div>
76
+ </div>
77
+ );
78
+}
frontend/splitfire-desktop/app/split/_components/button-split.tsx
+2
-4
@@ -1,9 +1,9 @@
1
+import { LoadingView } from "@/components/ui/LoadingView";
2
import { UserContext } from "@/lib/current-user-context";
3
import { AudioFile, Status } from "@/models/audio-file";
4
import { CountdownTimerIcon, LapTimerIcon, RocketIcon } from "@radix-ui/react-icons";
5
import { useRouter } from "next/navigation";
6
import { useContext, useState } from "react";
6
-import { Spinner } from "react-bootstrap";
7
8
enum State {
9
LOADING,
@@ -57,9 +57,7 @@ export default function ButtonGenerateBackingTracks({
57
if (state === State.LOADING) {
58
return (
59
<div className="mb-3 mt-3">
60
- <Spinner animation="border" role="status">
61
- <span className="visually-hidden">Loading...</span>
62
- </Spinner>
60
+ <LoadingView />
61
</div>
62
);
63
}
frontend/splitfire-desktop/app/split/_components/votes-view-main.tsx
+2
-5
@@ -8,9 +8,9 @@ import { invoke } from "@tauri-apps/api/tauri";
8
import { UserContext } from "@//lib/current-user-context";
9
import { useRouter } from "next/navigation";
10
import { CurrentUser } from "@/lib/db";
11
-import { Spinner } from "react-bootstrap";
11
import { useLogger } from "@/lib/logger";
12
import { SongProviderVote } from "@/models/song-votes-detail-response";
13
+import { LoadingView } from "@/components/ui/LoadingView";
14
15
export enum VoteType {
16
UP = "up",
@@ -110,10 +110,7 @@ export default function MainVotesView(props: {
110
<div className="w-full flex-grow pt-1 px-3 flex justify-center">
111
<div className="grid-rows-3 gap-2">
112
{state === State.LOADING && (
113
- <div className="min-h-80">
114
- <Spinner animation="border" role="status">
115
- </Spinner>
116
- </div>
113
+ <LoadingView />
114
)}
115
{state === State.LOADED && (
116
<div>
frontend/splitfire-desktop/components/ui/LoadingView.tsx
+4
-10
@@ -1,12 +1,6 @@
1
-import { Col, Container, Spinner } from "react-bootstrap";
2
-
1
export function LoadingView() {
4
-
5
- return <Container>
6
- <Col className="align-self-center" xs={12}>
7
- <Spinner animation="grow" role="status" variant="danger">
8
- <span className="visually-hidden">Loading...</span>
9
- </Spinner>
10
- </Col>
11
- </Container>
2
+ // Tailwindcss loading spinner
3
+ return <div className="flex justify-center items-center h-screen">
4
+ <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-red-500"></div>
5
+ </div>
6
}
\ No newline at end of file