Skip to content

Commit 7550fc7

Browse files
nikarhnikarh
authored
feat: improved marker support based on #5 (#13)
Prev and Next buttons now navigate to the previous/next logical marker according to sorted and enabled regions. Additionally, it adds a virtual marker at the beginning of each region allowing to quickly navigate between regions. Also: - cache textColor func - fixed hover colors - reduced bottom navigation size and removed border
1 parent 19a1600 commit 7550fc7

File tree

16 files changed

+552
-248
lines changed

16 files changed

+552
-248
lines changed

‎Mother Project.RPP‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<REAPER_PROJECT 0.1 "7.11/linux-x86_64" 1710765457
1+
<REAPER_PROJECT 0.1 "7.11/macOS-arm64" 1711195547
22
<NOTES 0 2
33
>
44
RIPPLE 0
@@ -16,13 +16,13 @@
1616
TIMEMODE 1 5 -1 30 0 0 -1
1717
VIDEO_CONFIG 0 0 256
1818
PANMODE 3
19-
CURSOR 843.13022400005377
20-
ZOOM 0.96502131908623 0 0
19+
CURSOR 367.304256000024
20+
ZOOM 0.35518954304297 0 0
2121
VZOOMEX 0 0
2222
USE_REC_CFG 0
2323
RECMODE 1
2424
SMPTESYNC 0 30 100 40 1000 300 0 0 1 0 0
25-
LOOP 1
25+
LOOP 0
2626
LOOPGRAN 0 4
2727
RECORD_PATH "media" ""
2828
<RECORD_CFG
@@ -65,8 +65,8 @@
6565
GROUP_NAME 0 "Group 1"
6666
GROUP_NAME 1 "Group 2"
6767
GROUP_NAME 2 "Group 3"
68-
SELECTION 1126.9562400000714 684.52156800004377
69-
SELECTION2 1126.9562400000714 684.52156800004377
68+
SELECTION 550.95637188208616 367.30426303854875
69+
SELECTION2 550.95637188208616 367.30426303854875
7070
MASTERAUTOMODE 0
7171
MASTERTRACKHEIGHT 0 0
7272
MASTERPEAKCOL 16576
@@ -95,19 +95,20 @@
9595
DEFSHAPE 1 -1 -1
9696
PT 0.000000000001 115.0000287500 1
9797
>
98-
MARKER 1 0 "Song 1" 1 0 1 B {BAA5B1BE-F406-6AE8-77EA-111BEE4305F7} 0
98+
MARKER 1 0.00000000000097 Summer 1 0 1 B {BAA5B1BE-F406-6AE8-77EA-111BEE4305F7} 0
9999
MARKER 1 250.43472000001663 "" 1
100-
MARKER 1 0.000000000001 "" 0 0 1 B {1F9B8B34-1C66-84DF-D437-2AD7A326359B} 0
101-
MARKER 2 333.91296000002183 "Song 2" 1 25921319 1 B {48FB3B12-9C2D-B592-5400-2AE20785DF92} 0
100+
MARKER 1 0.00000000000097 Intro 0 0 1 B {33117272-6418-394F-B873-88A857BDB94A} 0
101+
MARKER 2 33.39129600000309 Verse 0 0 1 B {758C47CE-0C93-384A-81F9-064FAF986359} 0
102+
MARKER 3 83.47824000000621 Chrous 0 27912914 1 B {2116409B-B8EE-FA49-B54B-64A91F1E93C5} 0
103+
MARKER 2 333.91296000002183 Autumn 1 25921319 1 B {48FB3B12-9C2D-B592-5400-2AE20785DF92} 0
102104
MARKER 2 550.95638400003531 "" 1
103-
MARKER 2 333.91296000002183 "" 0 0 1 B {C5377EDF-29FC-FEAA-0D4E-B2069F2AE417} 0
104-
MARKER 3 684.52156800004377 "Song 3" 1 20716939 1 B {06E043B5-5ED2-0A7D-A4E9-43018CD84F17} 0
105+
MARKER 4 367.304256000024 Verse 0 19210496 1 B {93B99BAF-F409-E040-9106-91C204CB5B19} 0
106+
MARKER 5 434.08684800002817 Chorus 0 0 1 B {FEF31C88-210F-B24D-B7D3-2D689C2F27B3} 0
107+
MARKER 3 684.52156800004377 Winter 1 20716939 1 B {06E043B5-5ED2-0A7D-A4E9-43018CD84F17} 0
105108
MARKER 3 1126.9562400000714 "" 1
106-
MARKER 3 684.52156800004377 "" 0 0 1 B {D49AE53A-CE94-B9E2-9615-1CA54E4E9C2D} 0
107-
MARKER 4 767.99980800004903 a 0 0 1 B {B3288D66-0FFD-C8D3-464A-1FEAB765C9B8} 0
108-
MARKER 5 843.13022400005377 "" 0 17715871 1 B {5CD95A30-4F1E-F14C-A20F-E6A1A59AE7CC} 0
109-
MARKER 6 943.30411200005994 "" 0 16777216 1 B {2204888A-45F3-66BD-3378-73652DF4690C} 0
110-
MARKER 7 1043.4780000000662 "" 0 0 1 B {DFCC72D3-B7F0-0A1A-492B-C976E1A373FA} 0
109+
MARKER 6 684.52156800004377 Start 0 0 1 B {2677666B-8D47-3B44-A142-4F0CF4D0116E} 0
110+
MARKER 4 1268.8692480000802 Spring 1 20849680 1 B {B668A249-7E52-FF44-B58F-2B3EABCBE0B5} 0
111+
MARKER 4 1736.3473920001095 "" 1
111112
<PROJBAY
112113
>
113114
<TRACK {93203F69-DDEF-ED48-8FC3-902D10C8FDA2}
@@ -149,7 +150,7 @@
149150
ISBUS 0 0
150151
BUSCOMP 0 0 0 0 0
151152
SHOWINMIX 1 0.6667 0.5 1 0.5 0 -1 0
152-
SEL 0
153+
SEL 1
153154
REC 0 0 1 0 0 0 0 0
154155
VU 2
155156
TRACKHEIGHT 31 0 1 0 0 0 0
@@ -549,7 +550,7 @@
549550
FXID {5229CD52-0A33-664E-8A35-473A4DBC38F8}
550551
WAK 0 0
551552
BYPASS 0 0 0
552-
<VST "VST: ReaComp (Cockos)" reacomp.vst.so 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
553+
<VST "VST: ReaComp (Cockos)" reacomp.vst.dylib 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
553554
bWNlcu9e7f4EAAAAAQAAAAAAAAACAAAAAAAAAAQAAAAAAAAACAAAAAAAAAACAAAAAQAAAAAAAAACAAAAAAAAAFwAAAAAAAAAAAAQAA==
554555
776t3g3wrd4AAIA/AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAnNEHMwAAgD8AAAAAzcxMPQAAAAAAAAAAAAAAAAAAgD7ZiZ09AAAAAAAAAAA=
555556
AFByb2dyYW0gMQAQAAAA
@@ -605,7 +606,7 @@
605606
FXID {973E9346-8782-7C44-84E1-F7C5F8A57B9E}
606607
WAK 0 0
607608
BYPASS 0 0 0
608-
<VST "VST: ReaComp (Cockos)" reacomp.vst.so 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
609+
<VST "VST: ReaComp (Cockos)" reacomp.vst.dylib 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
609610
bWNlcu9e7f4EAAAAAQAAAAAAAAACAAAAAAAAAAQAAAAAAAAACAAAAAAAAAACAAAAAQAAAAAAAAACAAAAAAAAAFwAAAAAAAAAAAAQAA==
610611
776t3g3wrd4AAIA/AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAnNEHMwAAgD8AAAAAzcxMPQAAAAAAAAAAAAAAAAAAgD7ZiZ09AAAAAAAAAAA=
611612
AFByb2dyYW0gMQAQAAAA
@@ -661,7 +662,7 @@
661662
FXID {81E0A8AF-5FCD-334A-A010-EB96DE493EEB}
662663
WAK 0 0
663664
BYPASS 0 0 0
664-
<VST "VST: ReaComp (Cockos)" reacomp.vst.so 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
665+
<VST "VST: ReaComp (Cockos)" reacomp.vst.dylib 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
665666
bWNlcu9e7f4EAAAAAQAAAAAAAAACAAAAAAAAAAQAAAAAAAAACAAAAAAAAAACAAAAAQAAAAAAAAACAAAAAAAAAFwAAAAAAAAAAAAQAA==
666667
776t3g3wrd4AAIA/AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAnNEHMwAAgD8AAAAAzcxMPQAAAAAAAAAAAAAAAAAAgD7ZiZ09AAAAAAAAAAA=
667668
AFByb2dyYW0gMQAQAAAA
@@ -676,7 +677,7 @@
676677
PEAKCOL 19657728
677678
BEAT -1
678679
AUTOMODE 0
679-
VOLPAN 1 0 -1 -1 1
680+
VOLPAN 0.9 0 -1 -1 1
680681
MUTESOLO 0 0 0
681682
IPHASE 0
682683
PLAYOFFS 0 1
@@ -695,12 +696,12 @@
695696
PERF 0
696697
LAYOUTS "bd --- Small Full Meter" "bc --- Small Full Meter"
697698
AUXRECV 1 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
698-
AUXRECV 3 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
699-
AUXRECV 4 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
699+
AUXRECV 3 0 0.75 0 1 0 0 0 0 -1:U 0 -1 ''
700+
AUXRECV 4 0 0.65 0 0 0 0 0 0 -1:U 0 -1 ''
700701
AUXRECV 6 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
701-
AUXRECV 7 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
702+
AUXRECV 7 0 0.84 0 0 0 0 0 0 -1:U 0 -1 ''
702703
AUXRECV 8 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
703-
AUXRECV 9 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
704+
AUXRECV 9 0 0.55 0 0 0 0 0 0 -1:U 0 -1 ''
704705
MIDIOUT -1
705706
MAINSEND 0 0
706707
HWOUT 6 0 1 0 0 0 0 -1:U -1
@@ -717,7 +718,7 @@
717718
FXID {A7221338-0BCC-F64E-8ECC-CA42800FF9D7}
718719
WAK 0 0
719720
BYPASS 0 0 0
720-
<VST "VST: ReaComp (Cockos)" reacomp.vst.so 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
721+
<VST "VST: ReaComp (Cockos)" reacomp.vst.dylib 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
721722
bWNlcu9e7f4EAAAAAQAAAAAAAAACAAAAAAAAAAQAAAAAAAAACAAAAAAAAAACAAAAAQAAAAAAAAACAAAAAAAAAFwAAAAAAAAAAAAQAA==
722723
776t3g3wrd4AAIA/AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAnNEHMwAAgD8AAAAAzcxMPQAAAAAAAAAAAAAAAAAAgD7ZiZ09AAAAAAAAAAA=
723724
AFByb2dyYW0gMQAQAAAA
@@ -773,7 +774,7 @@
773774
FXID {2CD5F09C-D0EC-7148-83C1-1020231BFFAA}
774775
WAK 0 0
775776
BYPASS 0 0 0
776-
<VST "VST: ReaComp (Cockos)" reacomp.vst.so 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
777+
<VST "VST: ReaComp (Cockos)" reacomp.vst.dylib 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
777778
bWNlcu9e7f4EAAAAAQAAAAAAAAACAAAAAAAAAAQAAAAAAAAACAAAAAAAAAACAAAAAQAAAAAAAAACAAAAAAAAAFwAAAAAAAAAAAAQAA==
778779
776t3g3wrd4AAIA/AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAnNEHMwAAgD8AAAAAzcxMPQAAAAAAAAAAAAAAAAAAgD7ZiZ09AAAAAAAAAAA=
779780
AFByb2dyYW0gMQAQAAAA
@@ -785,4 +786,9 @@
785786
>
786787
<EXTENSIONS
787788
>
789+
<EXTSTATE
790+
<BANDUI
791+
REGIONS 11,14,13,12
792+
>
793+
>
788794
>

‎screenshots/Reaper Project.png‎

543 KB
Loading

‎screenshots/Web - Control.png‎

73.2 KB
Loading

‎screenshots/Web - Mix.png‎

104 KB
Loading

‎src/Components/Control/Playback.tsx‎

Lines changed: 115 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,144 @@
11
import { useReaper } from "../../Data/Context";
2-
import { PlayState } from "../../Data/State";
2+
import {
3+
textColor,
4+
useCurrentMarker,
5+
useCurrentRegion,
6+
useNextMarker,
7+
usePreviousMarker,
8+
} from "../../Data/Selectors";
9+
import { type Marker, PlayState, type Region } from "../../Data/State";
310
import { Icons } from "../UI/Icons";
411

12+
function CurrentRegion(p: { region?: Region }) {
13+
return (
14+
<>
15+
{p.region != null && (
16+
<span
17+
class={`px-1 my-0.5 rounded-md ${textColor(p.region.color)}`}
18+
style={{ background: p.region.color }}
19+
>
20+
{p.region.name}
21+
</span>
22+
)}
23+
{p.region == null && "-"}
24+
</>
25+
);
26+
}
27+
28+
function CurrentMarker(p: { marker?: Marker }) {
29+
return (
30+
<>
31+
{p.marker != null && (
32+
<span class="text-gray-400">
33+
<span
34+
class={`bg-red-600 px-1 rounded-md ${textColor(p.marker.color)}`}
35+
style={{ background: p.marker.color }}
36+
>
37+
{p.marker.id}
38+
</span>
39+
{p.marker.name && ` ${p.marker.name}`}
40+
</span>
41+
)}
42+
{p.marker == null && "-"}
43+
</>
44+
);
45+
}
46+
47+
function Progress() {
48+
const region = useCurrentRegion();
49+
const marker = useCurrentMarker();
50+
51+
return (
52+
<div class="flex flex-col flex-grow content-center justify-center text-center bg-gray-800 brightness-110">
53+
<div class="text-sm">
54+
<CurrentRegion region={region()} />
55+
</div>
56+
<div class="text-[10px]">
57+
<CurrentMarker marker={marker()} />
58+
</div>
59+
</div>
60+
);
61+
}
62+
563
export function MainControl() {
664
const {
765
data: { playState: state, recording, repeat },
8-
actions: { play, pause, stop, record, toggleRepeat },
66+
actions: { play, pause, stop, record, toggleRepeat, moveToMarker },
967
} = useReaper();
1068

69+
const previousMarker = usePreviousMarker();
70+
const nextMarker = useNextMarker();
71+
1172
return (
12-
<div class="flex justify-center space-x-4">
13-
<div class="flex justify-center rounded-md shadow-sm" role="group">
14-
<button
15-
type="button"
16-
onClick={play}
17-
class={`btn-primary w-14 rounded-l ${
18-
state() === PlayState.Playing && "selected"
19-
}`}
20-
>
21-
<Icons.Play />
22-
</button>
73+
<div class="flex flex-col justify-center space-y-4">
74+
<div class="flex justify-center space-x-4">
2375
<button
2476
type="button"
25-
onClick={pause}
26-
class={`btn-primary w-14 ${
27-
state() === PlayState.Paused && "selected"
77+
onClick={record}
78+
class={`btn-primary btn-primary-red w-14 rounded-md ${
79+
recording() && "selected"
2880
}`}
2981
>
30-
<Icons.Pause />
82+
<Icons.Record />
3183
</button>
84+
<div class="flex grow justify-center rounded-md" role="group">
85+
<button
86+
type="button"
87+
onClick={play}
88+
class={`btn-primary w-14 rounded-l ${
89+
state() === PlayState.Playing && "selected"
90+
}`}
91+
>
92+
<Icons.Play />
93+
</button>
94+
<button
95+
type="button"
96+
onClick={pause}
97+
class={`btn-primary w-14 ${
98+
state() === PlayState.Paused && "selected"
99+
}`}
100+
>
101+
<Icons.Pause />
102+
</button>
103+
<button
104+
type="button"
105+
onClick={stop}
106+
class={`btn-primary w-14 rounded-r ${
107+
state() === PlayState.Stopped && "selected"
108+
}`}
109+
>
110+
<Icons.Stop />
111+
</button>
112+
</div>
113+
32114
<button
33115
type="button"
34-
onClick={stop}
35-
class={`btn-primary w-14 rounded-r ${
36-
state() === PlayState.Stopped && "selected"
37-
}`}
116+
onClick={toggleRepeat}
117+
class={`btn-primary w-14 rounded-md ${repeat() && "selected"}`}
38118
>
39-
<Icons.Stop />
119+
<Icons.Repeat />
40120
</button>
41121
</div>
42-
43-
<div class="flex justify-center rounded-md shadow-sm" role="group">
122+
<div
123+
class="flex justify-center rounded-md shadow-sm h-10 mb-4"
124+
role="group"
125+
>
44126
<button
127+
class="flex items-center btn-primary rounded-none rounded-l"
45128
type="button"
46-
onClick={record}
47-
class={`btn-primary btn-primary-red w-14 rounded-l ${
48-
recording() && "selected"
49-
}`}
129+
disabled={previousMarker() == null}
130+
onclick={() => moveToMarker(previousMarker())}
50131
>
51-
<Icons.Record />
132+
<Icons.Left />
52133
</button>
53-
134+
<Progress />
54135
<button
136+
class="flex items-center btn-primary rounded-none rounded-r"
55137
type="button"
56-
onClick={toggleRepeat}
57-
class={`btn-primary w-14 rounded-r ${repeat() && "selected"}`}
138+
disabled={nextMarker() == null}
139+
onclick={() => moveToMarker(nextMarker())}
58140
>
59-
<Icons.Repeat />
141+
<Icons.Right />
60142
</button>
61143
</div>
62144
</div>

‎src/Components/Control/Regions.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer components {
6+
button.btn-region {
7+
@apply appearance-none
8+
py-2.5
9+
px-5
10+
font-medium
11+
text-sm
12+
focus:outline-none
13+
rounded-lg
14+
border-2
15+
border-transparent
16+
brightness-75
17+
bg-gray-800
18+
text-gray-400
19+
hover:brightness-100;
20+
}
21+
22+
.btn-region.selected {
23+
@apply text-white
24+
z-10
25+
border-slate-200
26+
brightness-125
27+
hover:brightness-[135%];
28+
}
29+
30+
.btn-region.playing {
31+
@apply border-2 border-emerald-300;
32+
}
33+
34+
.btn-region.paused {
35+
@apply border-2 border-yellow-600;
36+
}
37+
38+
.btn-region.stopped {
39+
@apply border-2 border-orange-600;
40+
}
41+
}

0 commit comments

Comments
 (0)