Merge pull request #95 from Sportinger/Midi

Add browser MIDI mapping controls and stop markers

Author: Sportinger

docs/Features/Project-Persistence.md

@@ -292,6 +292,7 @@ interface ProjectFile {
 
 ### Per Composition
 - All tracks and clips
+- Timeline markers and per-marker MIDI bindings
 - Clip positions and durations
 - Trim points (inPoint/outPoint)
 - Transform properties (position, scale, rotation, anchor, opacity, blend mode)
@@ -323,6 +324,7 @@ interface ProjectFile {
 - Composition view state per composition (playhead, zoom, scroll, in/out points)
 - Media panel column order and name width
 - Transcript language preference
+- Global MIDI state: enabled flag and transport bindings (`Play / Pause`, `Stop`)
 - View toggles: thumbnails, waveforms, proxy, transcript markers
 - Changelog preferences (`showChangelogOnStartup`, `lastSeenChangelogVersion`)
 - Export panel state: live export settings, named export presets, and the selected preset

docs/Features/Timeline.md

@@ -192,6 +192,9 @@ The toolbar and wheel gestures still drive playback and navigation:
 - `I` and `O` set in/out points.
 - `X` clears in/out.
 - `M` adds a marker at the playhead.
+- Right-clicking a marker opens marker transport and MIDI actions.
+- Markers can be turned into `Stop Marker`s that automatically pause playback when crossed.
+- Marker MIDI bindings support `Jump To Marker`, `Play From Marker`, and `Jump To Marker And Stop`.
 - Left/Right arrows step frame by frame.
 - `Alt+Scroll` or `Ctrl+Scroll` zooms the timeline around the playhead.
 - `Shift+Scroll` pans horizontally.

docs/Features/UI-Panels.md

@@ -33,7 +33,6 @@ Dockable desktop panel system with an After Effects-style menu bar, unified clip
 | **Edit** | Copy, Paste, Settings |
 | **View** | Panels submenu, Layouts submenu |
 | **Output** | New Output Window, Open Output Manager, Active Outputs |
-| **Window** | MIDI Control |
 | **Info** | Where are you coming from?, Tutorials, Quick Tour, Timeline Tour, Changelog, About, Imprint, Privacy Policy, Contact |
 
 ### Keyboard Shortcuts
@@ -106,7 +105,7 @@ All docked panels can be:
 
 ## Available Panels
 
-MasterSelects currently exposes 16 dockable panel types, plus the Slot Grid overlay that sits on top of the Timeline.
+MasterSelects currently exposes 17 dockable panel types, plus the Slot Grid overlay that sits on top of the Timeline.
 
 | Panel | Type ID | Surface |
 |-------|---------|---------|
@@ -116,6 +115,7 @@ MasterSelects currently exposes 16 dockable panel types, plus the Slot Grid over
 | **Media** | `media` | Media browser, folders, and project items |
 | **Properties** | `clip-properties` | Unified clip inspector |
 | **Export** | `export` | Render and export controls |
+| **MIDI Mapping** | `midi-mapping` | Overview and editor for assigned MIDI notes |
 | **AI Chat** | `ai-chat` | Editing assistant chat |
 | **AI Video** | `ai-video` | Classic generator plus FlashBoard workspace |
 | **AI Segment** | `ai-segment` | Local SAM2 segmentation tools |
@@ -175,6 +175,17 @@ MasterSelects currently exposes 16 dockable panel types, plus the Slot Grid over
 - Stacked alpha export
 - Progress with phase display
 
+### MIDI Mapping Panel
+
+- Open from `View -> Panels -> MIDI Mapping`
+- Shows all currently assigned MIDI notes in one list
+- Includes both global transport bindings and per-marker bindings
+- Each row shows the note, target, and resulting command behavior
+- Existing entries can be edited directly:
+- Change channel and note manually
+- Relearn the binding from incoming MIDI
+- Move a marker binding to another available marker from a dropdown list
+
 ### AI Chat Panel
 
 - GPT-backed editing assistant
@@ -384,7 +395,7 @@ Multi Preview is available from the View menu and can be floated or docked, but
 
 ### Enabling MIDI
 
-Window menu -> MIDI Control
+Edit menu -> Settings -> MIDI
 
 ### Requirements
 
@@ -398,6 +409,12 @@ Window menu -> MIDI Control
 MIDI Control (N devices)
 ```
 
+### Mapping Overview
+
+- `View -> Panels -> MIDI Mapping` opens the dedicated mapping panel
+- The panel lists all assigned transport and marker bindings
+- Empty-state guidance points back to Settings and the marker right-click menu
+
 ---
 
 ## Resolution Settings
@@ -441,6 +458,7 @@ Edit menu -> Settings
 |----------|----------|
 | **Appearance** | Theme selection and custom theme controls |
 | **General** | Save mode, autosave interval/enable state, import copy behavior, and mobile/desktop view mode |
+| **MIDI** | Browser MIDI permission state, transport learning, and device list |
 | **Previews** | Preview resolution quality and transparency grid info |
 | **Import** | Copy media to project folder toggle |
 | **Transcription** | Provider selection and pricing |

src/App.css

@@ -7623,6 +7623,12 @@ input[type="checkbox"] {
   box-shadow: 0 0 8px var(--marker-color);
 }
 
+.timeline-marker.is-stop-marker .timeline-marker-head {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--warning-light) 45%, transparent),
+    0 0 10px color-mix(in srgb, var(--warning-light) 20%, transparent);
+}
+
 .timeline-marker .timeline-marker-line {
   width: 2px;
   min-height: calc(100vh - 50px);
@@ -7632,6 +7638,15 @@ input[type="checkbox"] {
   opacity: 0.7;
 }
 
+.timeline-marker.is-stop-marker .timeline-marker-line {
+  background:
+    repeating-linear-gradient(
+      to bottom,
+      var(--marker-color) 0 10px,
+      color-mix(in srgb, var(--warning-light) 42%, var(--marker-color)) 10px 16px
+    );
+}
+
 .timeline-marker:hover .timeline-marker-line,
 .timeline-marker.dragging .timeline-marker-line {
   opacity: 1;

src/App.tsx

@@ -29,6 +29,7 @@ import { useTheme } from './hooks/useTheme';
 import { useGlobalHistory } from './hooks/useGlobalHistory';
 import { useClipPanelSync } from './hooks/useClipPanelSync';
 import { useIsMobile, useForceMobile } from './hooks/useIsMobile';
+import { useMIDIRuntime } from './hooks/useMIDIRuntime';
 import { useAccountStore } from './stores/accountStore';
 import { useSettingsStore } from './stores/settingsStore';
 import { projectDB } from './services/projectDB';
@@ -63,6 +64,9 @@ function App() {
   // Auto-switch panels based on clip selection
   useClipPanelSync();
 
+  // Browser MIDI runtime
+  useMIDIRuntime();
+
   // Check if there's a stored project in IndexedDB (the only allowed browser storage)
   const [isChecking, setIsChecking] = useState(true);
   const [hasStoredProject, setHasStoredProject] = useState(false);

src/changelog-data.json

@@ -1,4 +1,24 @@
 [
+  {
+    "date": "2026-04-23",
+    "type": "new",
+    "title": "Browser MIDI Control Added with Learn Mode and a Dedicated Mapping Panel",
+    "description": "MasterSelects now supports direct browser MIDI input over Web MIDI with a dedicated Settings tab, transport bindings, a dockable MIDI Mapping panel, note learn mode, manual reassignment, and project-persistent marker plus transport mappings.",
+    "section": "MIDI / Workflow",
+    "commits": [
+      "8e2701c3"
+    ]
+  },
+  {
+    "date": "2026-04-23",
+    "type": "improve",
+    "title": "Timeline Markers Can Now Trigger Playback and Auto-Stop the Playhead",
+    "description": "Markers now expose right-click MIDI actions for Jump, Play From Marker, and Jump To Marker And Stop, and any marker can be turned into a Stop Marker so playback halts automatically when the playhead crosses it.",
+    "section": "Timeline / Markers",
+    "commits": [
+      "8e2701c3"
+    ]
+  },
   {
     "date": "2026-04-18",
     "type": "new",

src/components/common/SettingsDialog.tsx

@@ -5,6 +5,7 @@ import { useSettingsStore } from '../../stores/settingsStore';
 import { useDraggableDialog } from './settings/useDraggableDialog';
 import { AppearanceSettings } from './settings/AppearanceSettings';
 import { GeneralSettings } from './settings/GeneralSettings';
+import { MidiSettings } from './settings/MidiSettings';
 import { TranscriptionSettings } from './settings/TranscriptionSettings';
 import { ApiKeysSettings } from './settings/ApiKeysSettings';
 import { NativeHelperSettings } from './settings/NativeHelperSettings';
@@ -17,6 +18,7 @@ interface SettingsDialogProps {
 
 type SettingsCategory =
   | 'general'
+  | 'midi'
   | 'shortcuts'
   | 'appearance'
   | 'transcription'
@@ -31,6 +33,7 @@ interface CategoryConfig {
 
 const categories: CategoryConfig[] = [
   { id: 'general', label: 'General', icon: '\u2699' },
+  { id: 'midi', label: 'MIDI', icon: '\u266B' },
   { id: 'shortcuts', label: 'Shortcuts', icon: '\u2328' },
   { id: 'appearance', label: 'Appearance', icon: '\uD83C\uDFA8' },
   { id: 'transcription', label: 'Transcription', icon: '\uD83C\uDFA4' },
@@ -62,6 +65,7 @@ export function SettingsDialog({ onClose }: SettingsDialogProps) {
   const renderCategoryContent = () => {
     switch (activeCategory) {
       case 'general': return <GeneralSettings />;
+      case 'midi': return <MidiSettings />;
       case 'shortcuts': return <ShortcutsSettings />;
       case 'appearance': return <AppearanceSettings />;
       case 'transcription': return <TranscriptionSettings localKeys={localKeys} />;

src/components/common/settings/GeneralSettings.tsx

@@ -2,7 +2,6 @@ import { useCallback } from 'react';
 import { useSettingsStore, type AutosaveInterval, type SaveMode, type PreviewQuality, type GPUPowerPreference } from '../../../stores/settingsStore';
 // AutosaveInterval used in interval select onChange cast
 import { useIsMobile } from '../../../hooks/useIsMobile';
-import { useMIDI } from '../../../hooks/useMIDI';
 import { OutputSettings } from './OutputSettings';
 import { AIFeaturesSettings } from './AIFeaturesSettings';
 
@@ -23,8 +22,6 @@ export function GeneralSettings() {
   } = useSettingsStore();
 
   const isMobileDevice = useIsMobile();
-  const { isSupported, isEnabled, devices, lastMessage, enableMIDI, disableMIDI } = useMIDI();
-
   const handleSwitchToMobile = useCallback(() => {
     setForceDesktopMode(false);
     window.location.reload();
@@ -150,67 +147,6 @@ export function GeneralSettings() {
         </p>
       </div>
 
-      {/* MIDI */}
-      <div className="settings-group">
-        <div className="settings-group-title">MIDI Control</div>
-
-        {isSupported ? (
-          <>
-            <label className="settings-row">
-              <span className="settings-label">Enable MIDI</span>
-              <input
-                type="checkbox"
-                checked={isEnabled}
-                onChange={(e) => { if (e.target.checked) enableMIDI(); else disableMIDI(); }}
-                className="settings-checkbox"
-              />
-            </label>
-
-            {isEnabled && (
-              <>
-                <div className="settings-status">
-                  <span className={`status-indicator ${devices.length > 0 ? 'connected' : 'disconnected'}`} />
-                  <span className="status-text">
-                    {devices.length > 0
-                      ? `${devices.length} device${devices.length > 1 ? 's' : ''} connected`
-                      : 'No devices detected'}
-                  </span>
-                </div>
-
-                {devices.length > 0 && (
-                  <div className="settings-group" style={{ marginTop: 8 }}>
-                    <div className="settings-group-title">Devices</div>
-                    {devices.map((device) => (
-                      <div key={device.id} className="settings-row">
-                        <span className="settings-label">{device.name}</span>
-                        <span className="settings-hint" style={{ margin: 0 }}>
-                          {device.manufacturer !== 'Unknown' ? device.manufacturer : ''}
-                        </span>
-                      </div>
-                    ))}
-                  </div>
-                )}
-
-                {lastMessage && (
-                  <div className="settings-group" style={{ marginTop: 8 }}>
-                    <div className="settings-group-title">Last Message</div>
-                    <div className="settings-row">
-                      <span className="settings-label">
-                        CH {lastMessage.channel} / CC {lastMessage.control} / Val {lastMessage.value}
-                      </span>
-                    </div>
-                  </div>
-                )}
-              </>
-            )}
-          </>
-        ) : (
-          <p className="settings-hint">
-            MIDI is not supported in this browser. Use Chrome or Edge for Web MIDI API support.
-          </p>
-        )}
-      </div>
-
       {/* AI Features */}
       <AIFeaturesSettings embedded />
     </div>