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
nikarh · Mar 23, 2024 · 7550fc7 · 7550fc7
1 parent 19a1600
commit 7550fc7
Show file tree

Hide file tree

Showing 16 changed files with 552 additions and 248 deletions.
diff --git a/Mother Project.RPP b/Mother Project.RPP
@@ -1,4 +1,4 @@
-<REAPER_PROJECT 0.1 "7.11/linux-x86_64" 1710765457
+<REAPER_PROJECT 0.1 "7.11/macOS-arm64" 1711195547
   <NOTES 0 2
   >
   RIPPLE 0
@@ -16,13 +16,13 @@
   TIMEMODE 1 5 -1 30 0 0 -1
   VIDEO_CONFIG 0 0 256
   PANMODE 3
-  CURSOR 843.13022400005377
-  ZOOM 0.96502131908623 0 0
+  CURSOR 367.304256000024
+  ZOOM 0.35518954304297 0 0
   VZOOMEX 0 0
   USE_REC_CFG 0
   RECMODE 1
   SMPTESYNC 0 30 100 40 1000 300 0 0 1 0 0
-  LOOP 1
+  LOOP 0
   LOOPGRAN 0 4
   RECORD_PATH "media" ""
   <RECORD_CFG
@@ -65,8 +65,8 @@
   GROUP_NAME 0 "Group 1"
   GROUP_NAME 1 "Group 2"
   GROUP_NAME 2 "Group 3"
-  SELECTION 1126.9562400000714 684.52156800004377
-  SELECTION2 1126.9562400000714 684.52156800004377
+  SELECTION 550.95637188208616 367.30426303854875
+  SELECTION2 550.95637188208616 367.30426303854875
   MASTERAUTOMODE 0
   MASTERTRACKHEIGHT 0 0
   MASTERPEAKCOL 16576
@@ -95,19 +95,20 @@
     DEFSHAPE 1 -1 -1
     PT 0.000000000001 115.0000287500 1
   >
-  MARKER 1 0 "Song 1" 1 0 1 B {BAA5B1BE-F406-6AE8-77EA-111BEE4305F7} 0
+  MARKER 1 0.00000000000097 Summer 1 0 1 B {BAA5B1BE-F406-6AE8-77EA-111BEE4305F7} 0
   MARKER 1 250.43472000001663 "" 1
-  MARKER 1 0.000000000001 "" 0 0 1 B {1F9B8B34-1C66-84DF-D437-2AD7A326359B} 0
-  MARKER 2 333.91296000002183 "Song 2" 1 25921319 1 B {48FB3B12-9C2D-B592-5400-2AE20785DF92} 0
+  MARKER 1 0.00000000000097 Intro 0 0 1 B {33117272-6418-394F-B873-88A857BDB94A} 0
+  MARKER 2 33.39129600000309 Verse 0 0 1 B {758C47CE-0C93-384A-81F9-064FAF986359} 0
+  MARKER 3 83.47824000000621 Chrous 0 27912914 1 B {2116409B-B8EE-FA49-B54B-64A91F1E93C5} 0
+  MARKER 2 333.91296000002183 Autumn 1 25921319 1 B {48FB3B12-9C2D-B592-5400-2AE20785DF92} 0
   MARKER 2 550.95638400003531 "" 1
-  MARKER 2 333.91296000002183 "" 0 0 1 B {C5377EDF-29FC-FEAA-0D4E-B2069F2AE417} 0
-  MARKER 3 684.52156800004377 "Song 3" 1 20716939 1 B {06E043B5-5ED2-0A7D-A4E9-43018CD84F17} 0
+  MARKER 4 367.304256000024 Verse 0 19210496 1 B {93B99BAF-F409-E040-9106-91C204CB5B19} 0
+  MARKER 5 434.08684800002817 Chorus 0 0 1 B {FEF31C88-210F-B24D-B7D3-2D689C2F27B3} 0
+  MARKER 3 684.52156800004377 Winter 1 20716939 1 B {06E043B5-5ED2-0A7D-A4E9-43018CD84F17} 0
   MARKER 3 1126.9562400000714 "" 1
-  MARKER 3 684.52156800004377 "" 0 0 1 B {D49AE53A-CE94-B9E2-9615-1CA54E4E9C2D} 0
-  MARKER 4 767.99980800004903 a 0 0 1 B {B3288D66-0FFD-C8D3-464A-1FEAB765C9B8} 0
-  MARKER 5 843.13022400005377 "" 0 17715871 1 B {5CD95A30-4F1E-F14C-A20F-E6A1A59AE7CC} 0
-  MARKER 6 943.30411200005994 "" 0 16777216 1 B {2204888A-45F3-66BD-3378-73652DF4690C} 0
-  MARKER 7 1043.4780000000662 "" 0 0 1 B {DFCC72D3-B7F0-0A1A-492B-C976E1A373FA} 0
+  MARKER 6 684.52156800004377 Start 0 0 1 B {2677666B-8D47-3B44-A142-4F0CF4D0116E} 0
+  MARKER 4 1268.8692480000802 Spring 1 20849680 1 B {B668A249-7E52-FF44-B58F-2B3EABCBE0B5} 0
+  MARKER 4 1736.3473920001095 "" 1
   <PROJBAY
   >
   <TRACK {93203F69-DDEF-ED48-8FC3-902D10C8FDA2}
@@ -149,7 +150,7 @@
     ISBUS 0 0
     BUSCOMP 0 0 0 0 0
     SHOWINMIX 1 0.6667 0.5 1 0.5 0 -1 0
-    SEL 0
+    SEL 1
     REC 0 0 1 0 0 0 0 0
     VU 2
     TRACKHEIGHT 31 0 1 0 0 0 0
@@ -549,7 +550,7 @@
       FXID {5229CD52-0A33-664E-8A35-473A4DBC38F8}
       WAK 0 0
       BYPASS 0 0 0
-      <VST "VST: ReaComp (Cockos)" reacomp.vst.so 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
+      <VST "VST: ReaComp (Cockos)" reacomp.vst.dylib 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
         bWNlcu9e7f4EAAAAAQAAAAAAAAACAAAAAAAAAAQAAAAAAAAACAAAAAAAAAACAAAAAQAAAAAAAAACAAAAAAAAAFwAAAAAAAAAAAAQAA==
         776t3g3wrd4AAIA/AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAnNEHMwAAgD8AAAAAzcxMPQAAAAAAAAAAAAAAAAAAgD7ZiZ09AAAAAAAAAAA=
         AFByb2dyYW0gMQAQAAAA
@@ -605,7 +606,7 @@
       FXID {973E9346-8782-7C44-84E1-F7C5F8A57B9E}
       WAK 0 0
       BYPASS 0 0 0
-      <VST "VST: ReaComp (Cockos)" reacomp.vst.so 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
+      <VST "VST: ReaComp (Cockos)" reacomp.vst.dylib 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
         bWNlcu9e7f4EAAAAAQAAAAAAAAACAAAAAAAAAAQAAAAAAAAACAAAAAAAAAACAAAAAQAAAAAAAAACAAAAAAAAAFwAAAAAAAAAAAAQAA==
         776t3g3wrd4AAIA/AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAnNEHMwAAgD8AAAAAzcxMPQAAAAAAAAAAAAAAAAAAgD7ZiZ09AAAAAAAAAAA=
         AFByb2dyYW0gMQAQAAAA
@@ -661,7 +662,7 @@
       FXID {81E0A8AF-5FCD-334A-A010-EB96DE493EEB}
       WAK 0 0
       BYPASS 0 0 0
-      <VST "VST: ReaComp (Cockos)" reacomp.vst.so 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
+      <VST "VST: ReaComp (Cockos)" reacomp.vst.dylib 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
         bWNlcu9e7f4EAAAAAQAAAAAAAAACAAAAAAAAAAQAAAAAAAAACAAAAAAAAAACAAAAAQAAAAAAAAACAAAAAAAAAFwAAAAAAAAAAAAQAA==
         776t3g3wrd4AAIA/AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAnNEHMwAAgD8AAAAAzcxMPQAAAAAAAAAAAAAAAAAAgD7ZiZ09AAAAAAAAAAA=
         AFByb2dyYW0gMQAQAAAA
@@ -676,7 +677,7 @@
     PEAKCOL 19657728
     BEAT -1
     AUTOMODE 0
-    VOLPAN 1 0 -1 -1 1
+    VOLPAN 0.9 0 -1 -1 1
     MUTESOLO 0 0 0
     IPHASE 0
     PLAYOFFS 0 1
@@ -695,12 +696,12 @@
     PERF 0
     LAYOUTS "bd --- Small Full Meter" "bc --- Small Full Meter"
     AUXRECV 1 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
-    AUXRECV 3 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
-    AUXRECV 4 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
+    AUXRECV 3 0 0.75 0 1 0 0 0 0 -1:U 0 -1 ''
+    AUXRECV 4 0 0.65 0 0 0 0 0 0 -1:U 0 -1 ''
     AUXRECV 6 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
-    AUXRECV 7 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
+    AUXRECV 7 0 0.84 0 0 0 0 0 0 -1:U 0 -1 ''
     AUXRECV 8 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
-    AUXRECV 9 0 1 0 0 0 0 0 0 -1:U 0 -1 ''
+    AUXRECV 9 0 0.55 0 0 0 0 0 0 -1:U 0 -1 ''
     MIDIOUT -1
     MAINSEND 0 0
     HWOUT 6 0 1 0 0 0 0 -1:U -1
@@ -717,7 +718,7 @@
       FXID {A7221338-0BCC-F64E-8ECC-CA42800FF9D7}
       WAK 0 0
       BYPASS 0 0 0
-      <VST "VST: ReaComp (Cockos)" reacomp.vst.so 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
+      <VST "VST: ReaComp (Cockos)" reacomp.vst.dylib 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
         bWNlcu9e7f4EAAAAAQAAAAAAAAACAAAAAAAAAAQAAAAAAAAACAAAAAAAAAACAAAAAQAAAAAAAAACAAAAAAAAAFwAAAAAAAAAAAAQAA==
         776t3g3wrd4AAIA/AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAnNEHMwAAgD8AAAAAzcxMPQAAAAAAAAAAAAAAAAAAgD7ZiZ09AAAAAAAAAAA=
         AFByb2dyYW0gMQAQAAAA
@@ -773,7 +774,7 @@
       FXID {2CD5F09C-D0EC-7148-83C1-1020231BFFAA}
       WAK 0 0
       BYPASS 0 0 0
-      <VST "VST: ReaComp (Cockos)" reacomp.vst.so 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
+      <VST "VST: ReaComp (Cockos)" reacomp.vst.dylib 0 LIMITER 1919247213<5653547265636D726561636F6D700000> ""
         bWNlcu9e7f4EAAAAAQAAAAAAAAACAAAAAAAAAAQAAAAAAAAACAAAAAAAAAACAAAAAQAAAAAAAAACAAAAAAAAAFwAAAAAAAAAAAAQAA==
         776t3g3wrd4AAIA/AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAnNEHMwAAgD8AAAAAzcxMPQAAAAAAAAAAAAAAAAAAgD7ZiZ09AAAAAAAAAAA=
         AFByb2dyYW0gMQAQAAAA
@@ -785,4 +786,9 @@
   >
   <EXTENSIONS
   >
+  <EXTSTATE
+    <BANDUI
+      REGIONS 11,14,13,12
+    >
+  >
 >
diff --git a/screenshots/Reaper Project.png b/screenshots/Reaper Project.png
diff --git a/screenshots/Web - Control.png b/screenshots/Web - Control.png
diff --git a/screenshots/Web - Mix.png b/screenshots/Web - Mix.png
diff --git a/src/Components/Control/Playback.tsx b/src/Components/Control/Playback.tsx
@@ -1,62 +1,144 @@
 import { useReaper } from "../../Data/Context";
-import { PlayState } from "../../Data/State";
+import {
+  textColor,
+  useCurrentMarker,
+  useCurrentRegion,
+  useNextMarker,
+  usePreviousMarker,
+} from "../../Data/Selectors";
+import { type Marker, PlayState, type Region } from "../../Data/State";
 import { Icons } from "../UI/Icons";
 
+function CurrentRegion(p: { region?: Region }) {
+  return (
+    <>
+      {p.region != null && (
+        <span
+          class={`px-1 my-0.5 rounded-md ${textColor(p.region.color)}`}
+          style={{ background: p.region.color }}
+        >
+          {p.region.name}
+        </span>
+      )}
+      {p.region == null && "-"}
+    </>
+  );
+}
+
+function CurrentMarker(p: { marker?: Marker }) {
+  return (
+    <>
+      {p.marker != null && (
+        <span class="text-gray-400">
+          <span
+            class={`bg-red-600 px-1 rounded-md ${textColor(p.marker.color)}`}
+            style={{ background: p.marker.color }}
+          >
+            {p.marker.id}
+          </span>
+          {p.marker.name && ` ${p.marker.name}`}
+        </span>
+      )}
+      {p.marker == null && "-"}
+    </>
+  );
+}
+
+function Progress() {
+  const region = useCurrentRegion();
+  const marker = useCurrentMarker();
+
+  return (
+    <div class="flex flex-col flex-grow content-center justify-center text-center bg-gray-800 brightness-110">
+      <div class="text-sm">
+        <CurrentRegion region={region()} />
+      </div>
+      <div class="text-[10px]">
+        <CurrentMarker marker={marker()} />
+      </div>
+    </div>
+  );
+}
+
 export function MainControl() {
   const {
     data: { playState: state, recording, repeat },
-    actions: { play, pause, stop, record, toggleRepeat },
+    actions: { play, pause, stop, record, toggleRepeat, moveToMarker },
   } = useReaper();
 
+  const previousMarker = usePreviousMarker();
+  const nextMarker = useNextMarker();
+
   return (
-    <div class="flex justify-center space-x-4">
-      <div class="flex justify-center rounded-md shadow-sm" role="group">
-        <button
-          type="button"
-          onClick={play}
-          class={`btn-primary w-14 rounded-l ${
-            state() === PlayState.Playing && "selected"
-          }`}
-        >
-          <Icons.Play />
-        </button>
+    <div class="flex flex-col justify-center space-y-4">
+      <div class="flex justify-center space-x-4">
         <button
           type="button"
-          onClick={pause}
-          class={`btn-primary w-14 ${
-            state() === PlayState.Paused && "selected"
+          onClick={record}
+          class={`btn-primary btn-primary-red w-14 rounded-md ${
+            recording() && "selected"
           }`}
         >
-          <Icons.Pause />
+          <Icons.Record />
         </button>
+        <div class="flex grow justify-center rounded-md" role="group">
+          <button
+            type="button"
+            onClick={play}
+            class={`btn-primary w-14 rounded-l ${
+              state() === PlayState.Playing && "selected"
+            }`}
+          >
+            <Icons.Play />
+          </button>
+          <button
+            type="button"
+            onClick={pause}
+            class={`btn-primary w-14 ${
+              state() === PlayState.Paused && "selected"
+            }`}
+          >
+            <Icons.Pause />
+          </button>
+          <button
+            type="button"
+            onClick={stop}
+            class={`btn-primary w-14 rounded-r ${
+              state() === PlayState.Stopped && "selected"
+            }`}
+          >
+            <Icons.Stop />
+          </button>
+        </div>
+
         <button
           type="button"
-          onClick={stop}
-          class={`btn-primary w-14 rounded-r ${
-            state() === PlayState.Stopped && "selected"
-          }`}
+          onClick={toggleRepeat}
+          class={`btn-primary w-14 rounded-md ${repeat() && "selected"}`}
         >
-          <Icons.Stop />
+          <Icons.Repeat />
         </button>
       </div>
-
-      <div class="flex justify-center rounded-md shadow-sm" role="group">
+      <div
+        class="flex justify-center rounded-md shadow-sm h-10 mb-4"
+        role="group"
+      >
         <button
+          class="flex items-center btn-primary rounded-none rounded-l"
           type="button"
-          onClick={record}
-          class={`btn-primary btn-primary-red w-14 rounded-l ${
-            recording() && "selected"
-          }`}
+          disabled={previousMarker() == null}
+          onclick={() => moveToMarker(previousMarker())}
         >
-          <Icons.Record />
+          <Icons.Left />
         </button>
-
+        <Progress />
         <button
+          class="flex items-center btn-primary rounded-none rounded-r"
           type="button"
-          onClick={toggleRepeat}
-          class={`btn-primary w-14 rounded-r ${repeat() && "selected"}`}
+          disabled={nextMarker() == null}
+          onclick={() => moveToMarker(nextMarker())}
         >
-          <Icons.Repeat />
+          <Icons.Right />
         </button>
       </div>
     </div>

diff --git a/src/Components/Control/Regions.css b/src/Components/Control/Regions.css
@@ -0,0 +1,41 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  button.btn-region {
+    @apply appearance-none
+           py-2.5
+           px-5
+           font-medium
+           text-sm
+           focus:outline-none
+           rounded-lg
+           border-2
+           border-transparent
+           brightness-75
+           bg-gray-800
+           text-gray-400
+           hover:brightness-100;
+  }
+
+  .btn-region.selected {
+    @apply text-white
+           z-10
+           border-slate-200
+           brightness-125
+           hover:brightness-[135%];
+  }
+
+  .btn-region.playing {
+    @apply border-2 border-emerald-300;
+  }
+
+  .btn-region.paused {
+    @apply border-2 border-yellow-600;
+  }
+
+  .btn-region.stopped {
+    @apply border-2 border-orange-600;
+  }
+}