TranscriberPanel.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Muse.Ui
import Muse.UiComponents

// Dockable panel: transport toolbar + waveform. Receives the state pushed
// by MUTranscriber.qml (updateStatus/setWaveform/onFileLoaded/
// setRecentFiles) and drives the backend via the functions exposed on
// `mscore`.
Item {
  id: root

  property var mscore: null
  property string errorText: ""
  property real duration: 0
  property real serverPosition: 0
  property real displayPosition: 0
  property bool playing: false
  property real loopA: -1
  property real loopB: -1
  property int volume: 100
  property real rate: 1.0
  property real pendingRate: -1 // -1 = no speed change awaiting backend confirmation
  property real pitchSemitones: 0
  property bool pitchPending: false
  property real pendingSemitones: 0 // only meaningful while pitchPending is true
  property bool eqPanelOpen: false
  property bool recomputing: false
  property real recomputeRemainingS: -1 // -1 = no estimate available yet
  property var waveformData: null
  property var zoomedWaveformData: null
  property var recentFiles: []
  property string currentFileName: ""
  property string currentFilePath: "" // full path, to detect reloading the exact same file
  property var markers: []
  property int nextMarkerId: 1
  property int nextMarkerNumber: 1
  // Non-null {id, position} while a marker is being dragged in MarkerRuler -
  // lets WaveformView draw that marker's guide line at its live position
  // without `markers` itself changing until the drag is released.
  property var liveMarkerDrag: null
  // Suppresses the metaTag persistence hooks below (onMarkersChanged,
  // onLoopAChanged/onLoopBChanged) while a saved session is being restored
  // on load - otherwise the transient markers=[]/loopA=loopB=-1 reset that
  // happens on every file load (see onFileLoaded) would overwrite the
  // metaTag with an empty state before the restore even runs.
  property bool suppressPersist: false

  readonly property real minZoom: 1.0
  readonly property real maxZoom: 50.0
  property real mainZoom: 1.0
  property real mainViewCenter: 0

  readonly property real mainVisibleDuration: (root.duration > 0 && root.mainZoom > 0)
    ? Math.min(root.duration, root.duration / root.mainZoom) : root.duration
  readonly property real mainViewStart: Math.max(0, Math.min(root.mainViewCenter - root.mainVisibleDuration / 2, root.duration - root.mainVisibleDuration))
  readonly property real mainViewEnd: root.mainViewStart + root.mainVisibleDuration

  // +20 over the previous 200 to cover MarkerRuler's height, so the
  // waveform's default visual size doesn't shrink to make room for it.
  implicitHeight: 220

  // If the playback position leaves the currently zoomed window (e.g. Stop
  // jumping back to 0, or free playback outrunning a very zoomed-in view),
  // recenter the view on it - otherwise the cursor stays invisible in the
  // main waveform until a manual navigation.
  onDisplayPositionChanged: {
    if (root.duration <= 0) return
    if (root.displayPosition < root.mainViewStart || root.displayPosition > root.mainViewEnd) {
      root.mainViewCenter = root.displayPosition
    }
  }

  // Changes the zoom while keeping `anchorTime` at the same relative
  // position in the view (the +/- buttons keep the current playback
  // position clearly visible regardless of zoom level).
  function requestZoom(newZoom, anchorTime) {
    var clampedZoom = Math.max(root.minZoom, Math.min(root.maxZoom, newZoom))
    // Already at min/max (e.g. a wheel that keeps turning past the limit):
    // don't recompute/refetch anything, otherwise tiny floating-point
    // drifts on every call would keep re-triggering the fetch in a loop
    // and make the +/- buttons flash for nothing.
    if (Math.abs(clampedZoom - root.mainZoom) < 1e-9) return
    var oldVisible = root.mainVisibleDuration
    var frac = oldVisible > 0 ? (anchorTime - root.mainViewStart) / oldVisible : 0.5
    root.mainZoom = clampedZoom
    var newVisible = root.mainVisibleDuration
    root.mainViewCenter = (anchorTime - frac * newVisible) + newVisible / 2
  }

  // Regular step in percentage (not multiplicative: 100/140/196... was
  // irregular) - anchored on the current playback position so the cursor
  // stays visible even after several successive zooms.
  function zoomByPercent(deltaPercent) {
    var currentPercent = Math.round(root.mainZoom * 100)
    root.requestZoom((currentPercent + deltaPercent) / 100, root.displayPosition)
  }

  function zoomIn() { root.zoomByPercent(10) }
  function zoomOut() { root.zoomByPercent(-10) }

  // Recomputes the high-resolution slice shown by the main view every time
  // the visible window changes (debounced so it doesn't hammer the backend
  // during a continuous zoom). The Flask backend is threaded=True, so
  // several requests can fire in parallel during continuous scrolling and
  // finish out of order - this guarantees only one request is in flight at
  // a time; any request that comes in while one is running is merged and
  // re-fired (for the most recent view) right after, instead of stacking
  // up as concurrent requests.
  property bool waveformFetchBusy: false
  property bool waveformFetchDirty: false

  Timer {
    id: zoomFetchDebounce
    interval: 50
    repeat: false
    onTriggered: root.triggerWaveformFetch()
  }

  function triggerWaveformFetch() {
    if (!root.mscore || root.duration <= 0) return
    if (root.waveformFetchBusy) {
      root.waveformFetchDirty = true
      return
    }
    root.waveformFetchBusy = true
    root.waveformFetchDirty = false
    root.mscore.fetchWaveformRange(root.mainViewStart, root.mainViewEnd, function(wf) {
      root.zoomedWaveformData = wf
      root.waveformFetchBusy = false
      if (root.waveformFetchDirty) {
        root.triggerWaveformFetch()
      }
    })
  }

  onMainViewStartChanged: zoomFetchDebounce.restart()
  onMainViewEndChanged: zoomFetchDebounce.restart()

  function formatTime(t) {
    if (t === undefined || t === null || isNaN(t)) t = 0
    var m = Math.floor(t / 60)
    var s = t - m * 60
    return m.toString().padStart(2, '0') + ":" + s.toFixed(2).padStart(5, '0')
  }

  property var recentMenuModel: {
    if (!root.recentFiles || root.recentFiles.length === 0) {
      return [{ id: "none", title: "No recent files", enabled: false }]
    }
    var model = []
    for (var i = 0; i < root.recentFiles.length; i++) {
      model.push({ id: String(i), title: basename(root.recentFiles[i]) })
    }
    // An item with no `title` renders as a separator line (see
    // StyledMenu.qml's isSeparator check) - no title needed for it here.
    model.push({ id: "separator" })
    model.push({ id: "clear", title: "Clear Recent Files" })
    return model
  }

  function basename(path) {
    if (!path) return ""
    var parts = path.split("/")
    return parts[parts.length - 1]
  }

  function handleRecentFile(itemId) {
    if (itemId === "none" || itemId === "separator") return
    if (itemId === "clear") {
      if (root.mscore) root.mscore.clearRecentFiles()
      return
    }
    var idx = parseInt(itemId)
    if (isNaN(idx) || !root.recentFiles[idx]) return
    if (root.mscore) root.mscore.loadFile(root.recentFiles[idx])
  }

  // Called by MUTranscriber.qml on every /status poll (and after /load, /speed)
  function updateStatus(status) {
    playing = status.playing
    duration = status.duration_s || 0
    serverPosition = status.position_s || 0
    displayPosition = serverPosition
    loopA = (status.loop_a_s !== null && status.loop_a_s !== undefined) ? status.loop_a_s : -1
    loopB = (status.loop_b_s !== null && status.loop_b_s !== undefined) ? status.loop_b_s : -1
    if (status.volume !== undefined) volume = status.volume
    if (status.rate !== undefined) {
      // Ignore a stale polled rate while a speed change we just requested
      // (via a preset button) hasn't been confirmed yet - otherwise the
      // 150ms status poller keeps clobbering the optimistic value back to
      // the old rate for as long as the backend's time-stretch takes (can
      // be a few seconds on a long track), producing a flash-then-revert.
      if (root.pendingRate < 0 || Math.abs(status.rate - root.pendingRate) < 0.005) {
        rate = status.rate
        pendingRate = -1
      }
    }
    if (status.pitch_semitones !== undefined) {
      // Same stale-poll guard as rate, for the same reason - pitch-shift
      // is just as slow a recompute as time-stretch.
      if (!root.pitchPending || Math.abs(status.pitch_semitones - root.pendingSemitones) < 0.005) {
        pitchSemitones = status.pitch_semitones
        pitchPending = false
      }
    }
    recomputing = !!status.recomputing
    recomputeRemainingS = (status.recompute_remaining_s !== undefined && status.recompute_remaining_s !== null)
      ? status.recompute_remaining_s : -1
    errorText = status.error || ""
  }

  function onFileLoaded(resp, filePath) {
    // Reloading the exact same file already open this session (e.g. the
    // user picks it again from Recent Files) isn't a file change - keep the
    // existing markers/loop instead of wiping them, since currentFilePath
    // starts empty on first load, so the very first load of a session
    // always falls into the "different file" branch below. Captured before
    // updateStatus() below overwrites loopA/loopB with the backend's
    // post-load response (see the restore a few lines down).
    var sameFile = filePath !== "" && filePath === root.currentFilePath
    var prevLoopA = root.loopA
    var prevLoopB = root.loopB

    // The backend's /load always clears the loop server-side first, even
    // when reloading the same file - suppress persistence for that
    // transient "no loop" state so it's never written to the metaTag
    // (and never leaves a window where the score is momentarily saved
    // without a loop it actually still has).
    if (sameFile) root.suppressPersist = true

    updateStatus(resp)
    mainZoom = 1.0
    mainViewCenter = 0
    currentFileName = basename(filePath)
    currentFilePath = filePath

    if (!sameFile) {
      // A new audio file invalidates any previous marker positions (they're
      // timestamps into the old file's timeline) - restoreMarkers() below
      // overrides this reset when reopening the same file's saved session.
      // Counters reset BEFORE markers: onMarkersChanged fires synchronously
      // on the next line and persists {nextId, nextNumber, items} together -
      // resetting markers first would persist the old counters alongside the
      // freshly emptied array.
      nextMarkerId = 1
      nextMarkerNumber = 1
      markers = []
      return
    }

    if ((prevLoopA >= 0 || prevLoopB >= 0) && root.mscore) {
      root.mscore.setLoop(prevLoopA >= 0 ? prevLoopA : undefined, prevLoopB >= 0 ? prevLoopB : undefined)
    }
    Qt.callLater(function() { root.suppressPersist = false })
  }

  function setWaveform(wf) {
    waveformData = wf
  }

  // `atPosition` defaults to the playback cursor (the M button's behavior);
  // MarkerRuler's double-click-on-empty-space passes the clicked time instead.
  function addMarker(atPosition) {
    var pos = (atPosition !== undefined) ? atPosition : root.displayPosition
    var marker = { id: root.nextMarkerId, position: pos, text: "#" + root.nextMarkerNumber }
    root.nextMarkerId = root.nextMarkerId + 1
    root.nextMarkerNumber = root.nextMarkerNumber + 1
    root.markers = root.markers.concat([marker])
  }

  function updateMarkerText(id, text) {
    root.markers = root.markers.map(function(m) {
      return m.id === id ? { id: m.id, position: m.position, text: text } : m
    })
  }

  function updateMarkerPosition(id, pos) {
    root.markers = root.markers.map(function(m) {
      return m.id === id ? { id: m.id, position: pos, text: m.text } : m
    })
  }

  function deleteMarker(id) {
    root.markers = root.markers.filter(function(m) { return m.id !== id })
  }

  // Called by MUTranscriber.qml when reopening a score whose saved session
  // matches the file that was just (re)loaded.
  function restoreMarkers(state) {
    root.nextMarkerId = state.nextId || 1
    root.nextMarkerNumber = state.nextNumber || 1
    root.markers = state.items || []
  }

  function persistMarkers() {
    if (root.suppressPersist) return
    if (root.mscore) root.mscore.saveMarkers({ nextId: root.nextMarkerId, nextNumber: root.nextMarkerNumber, items: root.markers })
  }

  function persistLoopAB() {
    if (root.suppressPersist) return
    if (root.mscore) root.mscore.saveLoopAB(root.loopA, root.loopB)
  }

  // Called by MUTranscriber.qml's resetSession(), only after the user
  // explicitly confirmed in resetConfirmPopup below. Mirrors every property
  // declared above back to its startup default - suppressPersist avoids
  // re-writing the metaTags MUTranscriber.qml just cleared directly.
  function resetLocalState() {
    root.suppressPersist = true
    errorText = ""
    duration = 0
    serverPosition = 0
    displayPosition = 0
    playing = false
    loopA = -1
    loopB = -1
    volume = 100
    rate = 1.0
    pendingRate = -1
    pitchSemitones = 0
    pitchPending = false
    pendingSemitones = 0
    eqPanelOpen = false
    recomputing = false
    recomputeRemainingS = -1
    waveformData = null
    zoomedWaveformData = null
    currentFileName = ""
    currentFilePath = ""
    nextMarkerId = 1
    nextMarkerNumber = 1
    markers = []
    mainZoom = 1.0
    mainViewCenter = 0
    Qt.callLater(function() { root.suppressPersist = false })
  }

  onMarkersChanged: root.persistMarkers()
  onLoopAChanged: root.persistLoopAB()
  onLoopBChanged: root.persistLoopAB()

  function setRecentFiles(list) {
    recentFiles = list || []
  }

  // Local cursor interpolation between two server polls (hard resync on
  // updateStatus), for a smooth display without hammering /status.
  Timer {
    interval: 40
    running: root.playing
    repeat: true
    onTriggered: {
      var next = root.displayPosition + 0.04 * root.rate
      // loopA/loopB are independent and can be set in either chronological
      // order (see WaveformView) - min/max here mirrors the backend's own
      // loop_lo/loop_hi, so this local prediction wraps at the same point
      // the actual audio callback does.
      if (root.loopA >= 0 && root.loopB >= 0 && next >= Math.max(root.loopA, root.loopB)) {
        next = Math.min(root.loopA, root.loopB)
      } else if (root.duration > 0 && next > root.duration) {
        next = root.duration
      }
      root.displayPosition = next
    }
  }

  ColumnLayout {
    anchors.fill: parent
    anchors.topMargin: 0
    anchors.leftMargin: 8
    anchors.rightMargin: 8
    anchors.bottomMargin: 8
    spacing: 6

    Item {
      id: toolbar
      Layout.fillWidth: true
      Layout.preferredHeight: 46

      // The 6 transport buttons + the timer are wrapped in a single
      // container (transportGroup): the timer is positioned above the
      // buttons INSIDE this container, so it's centered on them by
      // construction. Load/Speed/Volume anchor to the edges of this
      // container (never to an element anchored deeper inside it -
      // anchors.horizontalCenter only works between parent/child or direct
      // siblings, otherwise QML raises "Cannot anchor to an item that
      // isn't a parent or sibling").
      Item {
        id: transportGroup
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.horizontalCenter: parent.horizontalCenter
        width: transportRow.width
        height: timeLabel.height + transportRow.height

        Text {
          id: timeLabel
          anchors.top: parent.top
          anchors.horizontalCenter: parent.horizontalCenter
          font.pixelSize: 10
          color: "#dddddd"
          text: formatTime(root.displayPosition) + " / " + formatTime(root.duration)
        }

        Row {
          id: transportRow
          anchors.top: timeLabel.bottom
          anchors.topMargin: 2
          anchors.horizontalCenter: parent.horizontalCenter
          spacing: 4

          FlatButton {
            text: "M"
            toolTipTitle: "Add marker"
            enabled: root.duration > 0
            width: 26
            onClicked: root.addMarker()
          }

          FlatButton {
            icon: IconCode.REWIND_START_FILL
            toolTipTitle: "Go to start"
            enabled: root.duration > 0
            onClicked: {
              root.mscore.seek(0)
              root.displayPosition = 0
            }
          }

          FlatButton {
            icon: IconCode.REPEAT_START
            toolTipTitle: "Go to loop start"
            enabled: root.loopA >= 0 || root.loopB >= 0
            onClicked: {
              // The loop's actual start is whichever marker is earlier -
              // loopA/loopB are independent and may have been set in
              // either order (see WaveformView), so this isn't always A.
              var target = (root.loopA >= 0 && root.loopB >= 0)
                ? Math.min(root.loopA, root.loopB)
                : Math.max(root.loopA, root.loopB)
              root.mscore.seek(target)
              root.displayPosition = target
            }
          }

          FlatButton {
            icon: root.playing ? IconCode.PAUSE_FILL : IconCode.PLAY_FILL
            toolTipTitle: root.playing ? "Pause" : "Play"
            enabled: root.duration > 0
            onClicked: {
              if (root.playing) {
                root.mscore.pause()
              } else {
                root.mscore.play(root.displayPosition)
              }
            }
          }

          FlatButton {
            icon: IconCode.STOP_FILL
            toolTipTitle: "Stop"
            enabled: root.duration > 0
            onClicked: {
              root.mscore.pause()
              root.mscore.seek(0)
              root.displayPosition = 0
            }
          }

          FlatButton {
            text: "A"
            toolTipTitle: "Set loop start (A)"
            enabled: root.duration > 0
            accentButton: root.loopA >= 0
            width: 26
            onClicked: {
              if (root.loopA >= 0) {
                root.mscore.setLoop(null, undefined)
              } else {
                root.mscore.setLoop(root.displayPosition, undefined)
              }
            }
          }

          FlatButton {
            text: "B"
            toolTipTitle: "Set loop end (B)"
            enabled: root.duration > 0
            accentButton: root.loopB >= 0
            width: 26
            onClicked: {
              if (root.loopB >= 0) {
                root.mscore.setLoop(undefined, null)
              } else {
                root.mscore.setLoop(undefined, root.displayPosition)
              }
            }
          }

          FlatButton {
            icon: IconCode.LOOP
            accentButton: root.loopA >= 0 && root.loopB >= 0
            toolTipTitle: "Clear loop"
            enabled: root.loopA >= 0 || root.loopB >= 0
            onClicked: root.mscore.clearLoop()
          }
        }
      }

      Row {
        id: loadGroup
        anchors.right: transportGroup.left
        anchors.rightMargin: 4
        anchors.bottom: transportGroup.bottom
        spacing: 0

        FlatButton {
          text: "⟲"
          width: 28
          textFont.pixelSize: 30
          toolTipTitle: "Reset MUTranscriber for this score"
          onClicked: resetConfirmPopup.open()
        }

        Item { width: 4 }

        FlatButton {
          icon: IconCode.OPEN_FILE
          accentButton: true
          toolTipTitle: "Load audio file"
          onClicked: root.mscore && root.mscore.openFileDialog()
        }

        MenuButton {
          icon: IconCode.SMALL_ARROW_DOWN
          accentButton: true
          toolTipTitle: "Recent files"
          menuModel: root.recentMenuModel
          onHandleMenuItem: function(itemId) { root.handleRecentFile(itemId) }
        }
      }

      PitchSlider {
        id: pitchSlider
        anchors.right: loadGroup.left
        anchors.rightMargin: 12
        anchors.bottom: transportGroup.bottom
        enabled: root.duration > 0 && !root.recomputing
        mscore: root.mscore
        semitones: root.pitchSemitones
        onCommitted: function(s) {
          root.pitchPending = true
          root.pendingSemitones = s
          root.pitchSemitones = s
        }
      }

      SpeedDial {
        id: speedDial
        anchors.right: pitchSlider.left
        anchors.rightMargin: 12
        anchors.bottom: transportGroup.bottom
        enabled: root.duration > 0 && !root.recomputing
        mscore: root.mscore
        rate: root.rate
        onCommitted: function(r) {
          root.pendingRate = r
          root.rate = r
        }
      }

      FlatButton {
        id: eqButton
        anchors.right: speedPresets.left
        anchors.rightMargin: 12
        anchors.bottom: transportGroup.bottom
        icon: IconCode.MIXER
        accentButton: root.eqPanelOpen
        toolTipTitle: "Equalizer"
        enabled: root.duration > 0
        onClicked: root.eqPanelOpen = !root.eqPanelOpen
      }

      Row {
        id: speedPresets
        anchors.right: speedDial.left
        anchors.rightMargin: 8
        anchors.bottom: transportGroup.bottom
        spacing: 4

        FlatButton {
          text: "0.50x"
          width: 36
          textFont.pixelSize: 9
          toolTipTitle: "Set speed to 50%"
          enabled: root.duration > 0 && !root.recomputing
          accentButton: Math.abs(root.rate - 0.50) < 0.005
          onClicked: {
            root.pendingRate = 0.50
            root.rate = 0.50
            root.mscore.setSpeed(0.50)
          }
        }

        FlatButton {
          text: "0.65x"
          width: 36
          textFont.pixelSize: 9
          toolTipTitle: "Set speed to 65%"
          enabled: root.duration > 0 && !root.recomputing
          accentButton: Math.abs(root.rate - 0.65) < 0.005
          onClicked: {
            root.pendingRate = 0.65
            root.rate = 0.65
            root.mscore.setSpeed(0.65)
          }
        }

        FlatButton {
          text: "0.80x"
          width: 36
          textFont.pixelSize: 9
          toolTipTitle: "Set speed to 80%"
          enabled: root.duration > 0 && !root.recomputing
          accentButton: Math.abs(root.rate - 0.80) < 0.005
          onClicked: {
            root.pendingRate = 0.80
            root.rate = 0.80
            root.mscore.setSpeed(0.80)
          }
        }
      }

      VolumeSlider {
        id: volumeSlider
        anchors.left: transportGroup.right
        anchors.leftMargin: 12
        anchors.bottom: transportGroup.bottom
        mscore: root.mscore
        volume: root.volume
      }

      Row {
        id: zoomGroup
        anchors.left: volumeSlider.right
        anchors.leftMargin: 12
        anchors.bottom: transportGroup.bottom
        spacing: 4

        // FlatButton doesn't forward pressed/released signals (see its own
        // source code comment about this), so a held-down press can't be
        // detected on it - custom button here instead, to be able to
        // repeat the zoom step while the button stays pressed.
        Item {
          id: zoomOutBtn
          width: 22
          height: 22
          anchors.verticalCenter: parent.verticalCenter
          property bool zoomEnabled: root.duration > 0 && root.mainZoom > root.minZoom
          ToolTip.visible: zoomOutArea.containsMouse
          ToolTip.text: "Zoom out"
          ToolTip.delay: 500

          Rectangle {
            anchors.fill: parent
            radius: 3
            color: zoomOutArea.pressed ? "#3a3a3a" : (zoomOutArea.containsMouse ? "#333333" : "transparent")
          }

          Text {
            anchors.centerIn: parent
            text: "−"
            font.pixelSize: 16
            font.bold: true
            color: zoomOutBtn.zoomEnabled ? "#dddddd" : "#666666"
          }

          Timer {
            id: zoomOutRepeat
            interval: 100
            repeat: true
            onTriggered: { zoomOutArea.repeated = true; root.zoomByPercent(-5) }
          }

          MouseArea {
            id: zoomOutArea
            property bool repeated: false
            anchors.fill: parent
            hoverEnabled: true
            enabled: zoomOutBtn.zoomEnabled
            onPressed: { repeated = false; zoomInput.focus = false; zoomOutRepeat.start() }
            onReleased: zoomOutRepeat.stop()
            onCanceled: zoomOutRepeat.stop()
            onClicked: if (!repeated) root.zoomOut()
          }
        }

        Column {
          anchors.verticalCenter: parent.verticalCenter
          spacing: 1

          Text {
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 9
            color: "#bbbbbb"
            text: "Zoom"
          }

        TextField {
          id: zoomInput
          implicitWidth: 46
          anchors.horizontalCenter: parent.horizontalCenter
          horizontalAlignment: Text.AlignHCenter
          font.pixelSize: 11
          color: "#dddddd"
          selectByMouse: true
          enabled: root.duration > 0
          background: Rectangle { color: "#2a2a2a"; border.color: "#3a3a3a"; radius: 2 }

          function syncFromZoom() {
            if (!activeFocus) text = Math.round(root.mainZoom * 100) + "%"
          }

          function commitEdit() {
            var parsed = parseInt(text.replace("%", ""), 10)
            if (!isNaN(parsed)) {
              root.requestZoom(parsed / 100, root.displayPosition)
            }
          }

          Component.onCompleted: syncFromZoom()

          // MuseScore intercepts Return/Enter/Escape at key-press time
          // before they reach this field - handling them on key-release
          // instead gets through.
          Keys.onReleased: function(event) {
            if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
              commitEdit()
              focus = false
              event.accepted = true
            } else if (event.key === Qt.Key_Escape) {
              focus = false
              event.accepted = true
            } else if (event.key === Qt.Key_Space) {
              event.accepted = true
            }
          }

          onActiveFocusChanged: {
            if (activeFocus) {
              text = text.replace("%", "")
              selectAll()
            } else {
              // Escape (no commitEdit before losing focus) falls back here
              // and resets the text to the current zoom value, never
              // modified if nothing was committed.
              syncFromZoom()
            }
          }
        }
        }

        Item {
          id: zoomInBtn
          width: 22
          height: 22
          anchors.verticalCenter: parent.verticalCenter
          property bool zoomEnabled: root.duration > 0 && root.mainZoom < root.maxZoom
          ToolTip.visible: zoomInArea.containsMouse
          ToolTip.text: "Zoom in"
          ToolTip.delay: 500

          Rectangle {
            anchors.fill: parent
            radius: 3
            color: zoomInArea.pressed ? "#3a3a3a" : (zoomInArea.containsMouse ? "#333333" : "transparent")
          }

          Text {
            anchors.centerIn: parent
            text: "+"
            font.pixelSize: 16
            font.bold: true
            color: zoomInBtn.zoomEnabled ? "#dddddd" : "#666666"
          }

          Timer {
            id: zoomInRepeat
            interval: 100
            repeat: true
            onTriggered: { zoomInArea.repeated = true; root.zoomByPercent(5) }
          }

          MouseArea {
            id: zoomInArea
            property bool repeated: false
            anchors.fill: parent
            hoverEnabled: true
            enabled: zoomInBtn.zoomEnabled
            onPressed: { repeated = false; zoomInput.focus = false; zoomInRepeat.start() }
            onReleased: zoomInRepeat.stop()
            onCanceled: zoomInRepeat.stop()
            onClicked: if (!repeated) root.zoomIn()
          }
        }
      }

      Connections {
        target: root
        function onMainZoomChanged() { zoomInput.syncFromZoom() }
      }

      Row {
        id: zoomPresets
        anchors.left: zoomGroup.right
        anchors.leftMargin: 8
        anchors.bottom: transportGroup.bottom
        spacing: 4

        FlatButton {
          text: "100%"
          width: 34
          textFont.pixelSize: 9
          toolTipTitle: "Zoom to 100%"
          enabled: root.duration > 0
          accentButton: Math.abs(root.mainZoom - 1.0) < 0.01
          onClicked: root.requestZoom(1.0, root.displayPosition)
        }

        FlatButton {
          text: "250%"
          width: 34
          textFont.pixelSize: 9
          toolTipTitle: "Zoom to 250%"
          enabled: root.duration > 0
          accentButton: Math.abs(root.mainZoom - 2.5) < 0.01
          onClicked: root.requestZoom(2.5, root.displayPosition)
        }

        FlatButton {
          text: "500%"
          width: 34
          textFont.pixelSize: 9
          toolTipTitle: "Zoom to 500%"
          enabled: root.duration > 0
          accentButton: Math.abs(root.mainZoom - 5.0) < 0.01
          onClicked: root.requestZoom(5.0, root.displayPosition)
        }

        FlatButton {
          text: "750%"
          width: 34
          textFont.pixelSize: 9
          toolTipTitle: "Zoom to 750%"
          enabled: root.duration > 0
          accentButton: Math.abs(root.mainZoom - 7.5) < 0.01
          onClicked: root.requestZoom(7.5, root.displayPosition)
        }
      }
    }

    Text {
      visible: root.errorText !== ""
      text: root.errorText
      color: "#ff5252"
      Layout.fillWidth: true
      wrapMode: Text.WordWrap
    }

    MarkerRuler {
      id: markerRuler
      Layout.fillWidth: true
      Layout.preferredHeight: 20
      markers: root.markers
      duration: root.duration
      zoomLevel: root.mainZoom
      viewCenter: root.mainViewCenter
      onMarkerMoved: function(id, newPosition) { root.updateMarkerPosition(id, newPosition) }
      onEditCommitted: function(id, newText) { root.updateMarkerText(id, newText) }
      onDeleteRequested: function(id) { root.deleteMarker(id) }
      onAddMarkerRequested: function(position) { root.addMarker(position) }
      onMarkerDragging: function(id, position) { root.liveMarkerDrag = { id: id, position: position } }
      onMarkerDragEnded: function(id) { root.liveMarkerDrag = null }
    }

    // Plain, non-clipping wrapper: WaveformView itself sets clip:true (so
    // the canvas/handles never draw past its own edges), which would also
    // hard-clip the EQ overlay if it happened to be taller than the
    // waveform's current height. EQPanel is a sibling here instead, so it
    // overlays on top without being subject to WaveformView's clip.
    Item {
      Layout.fillWidth: true
      Layout.fillHeight: true

      WaveformView {
        id: waveformView
        anchors.fill: parent
        mscore: root.mscore
        duration: root.duration
        position: root.displayPosition
        loopA: root.loopA
        loopB: root.loopB
        fileName: root.currentFileName
        version: root.mscore ? root.mscore.version : ""
        waveformData: root.zoomedWaveformData
        zoomLevel: root.mainZoom
        viewCenter: root.mainViewCenter
        markers: root.markers
        liveMarkerDrag: root.liveMarkerDrag
      }

      EQPanel {
        anchors.centerIn: parent
        mscore: root.mscore
        visible: root.eqPanelOpen
        onCloseRequested: root.eqPanelOpen = false
      }

      // Time-stretching and/or pitch-shifting the whole track (see
      // _apply_transform_change in server.py) takes real wall-clock time
      // proportional to its length - without this, clicking a speed/pitch
      // control looks like nothing happened for a few seconds.
      // recomputeRemainingS is a rolling estimate calibrated from the last
      // completed recompute this session, so it's absent (spinner only,
      // no ETA text) the very first time.
      Item {
        visible: root.recomputing
        anchors.centerIn: parent
        width: stretchColumn.implicitWidth + 32
        height: stretchColumn.implicitHeight + 24
        z: 90

        Rectangle {
          anchors.fill: parent
          radius: 6
          color: "#262626"
          border.color: "#3a3a3a"
          border.width: 1
        }

        Column {
          id: stretchColumn
          anchors.centerIn: parent
          spacing: 6

          BusyIndicator {
            anchors.horizontalCenter: parent.horizontalCenter
            running: root.recomputing
            width: 28
            height: 28
          }

          Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Applying speed/pitch change…"
            font.pixelSize: 10
            color: "#dddddd"
          }

          Text {
            anchors.horizontalCenter: parent.horizontalCenter
            visible: root.recomputeRemainingS >= 0
            text: "~" + root.recomputeRemainingS.toFixed(1) + "s remaining"
            font.pixelSize: 9
            color: "#999999"
          }
        }
      }
    }

    WaveformOverview {
      Layout.fillWidth: true
      Layout.preferredHeight: 36
      duration: root.duration
      position: root.displayPosition
      viewStart: root.mainViewStart
      viewEnd: root.mainViewEnd
      waveformData: root.waveformData
      markers: root.markers
      liveMarkerDrag: root.liveMarkerDrag
      onSeekRequested: function(t) {
        if (!root.mscore) return
        root.mscore.seek(t)
        root.displayPosition = t
        root.mainViewCenter = t
      }
    }
  }

  // Confirmation required before resetSession() runs - clearing the
  // metaTags bypasses setMetaTag's usual lack of undo support anyway (see
  // MUTranscriber.qml), so there's no Ctrl+Z safety net for this one.
  Popup {
    id: resetConfirmPopup
    modal: true
    focus: true
    x: (root.width - width) / 2
    y: (root.height - height) / 2
    width: 300

    contentItem: ColumnLayout {
      spacing: 10

      Text {
        Layout.fillWidth: true
        wrapMode: Text.WordWrap
        color: "#dddddd"
        text: "Reset MUTranscriber for this score?\nThe loaded audio file, text markers and A/B loop saved on this score will be cleared. This cannot be undone with Ctrl+Z."
      }

      Row {
        Layout.alignment: Qt.AlignRight
        spacing: 8

        FlatButton {
          text: "Cancel"
          onClicked: resetConfirmPopup.close()
        }

        FlatButton {
          text: "Reset"
          accentButton: true
          onClicked: {
            resetConfirmPopup.close()
            if (root.mscore) root.mscore.resetSession()
          }
        }
      }
    }
  }
}