crossmate

CompactSlider.swift (5952B)

---

 import SwiftUI
 import UIKit
 
 /// A compact `UISlider` wrapped for SwiftUI. SwiftUI's `Slider` renders a fixed
 /// ~28pt system thumb that ignores `.controlSize`; this draws a small white
 /// rounded-rectangle thumb (with a hairline border and soft shadow for depth)
 /// over a thin track whose filled portion takes the player's colour. Reports
 /// integer positions (one per scrub step).
 struct CompactSlider: UIViewRepresentable {
     @Binding var value: Int
     let range: ClosedRange<Int>
     var trackHeight: CGFloat = 1
     var thumbSize = CGSize(width: 14, height: 14)
     var thumbCornerRadius: CGFloat = 4
     /// Filled (minimum) track colour — pass the player's colour. Opaque.
     var fillColor: UIColor = .systemGray
     /// Unfilled (maximum) track colour. Neutral so it reads behind any fill.
     var trackColor: UIColor = .systemGray4
     /// Called when the *user* moves the thumb. Programmatic `setValue` (e.g.
     /// autoplay advancing the position) does not fire `.valueChanged`, so this
     /// is exclusively a manual scrub — the cue to cancel autoplay.
     var onUserScrub: (() -> Void)? = nil
 
     func makeCoordinator() -> Coordinator { Coordinator(self) }
 
     func makeUIView(context: Context) -> UISlider {
         let slider = UISlider()
         // A custom track image controls the track's thickness (the default is
         // ~3–4pt). Rendered as a template so the tint colours below drive its
         // colour (and adapt to light/dark).
         let track = Self.trackImage(height: trackHeight)
         slider.setMinimumTrackImage(track, for: .normal)
         slider.setMaximumTrackImage(track, for: .normal)
         slider.minimumTrackTintColor = fillColor
         slider.maximumTrackTintColor = trackColor
         let thumb = Self.thumbImage(size: thumbSize, cornerRadius: thumbCornerRadius)
         slider.setThumbImage(thumb, for: .normal)
         slider.setThumbImage(thumb, for: .highlighted)
         slider.accessibilityLabel = "Replay position"
         slider.addTarget(
             context.coordinator,
             action: #selector(Coordinator.valueChanged(_:)),
             for: .valueChanged
         )
         // Don't let the small thumb dictate width; fill the row instead.
         slider.setContentHuggingPriority(.defaultLow, for: .horizontal)
         slider.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
         return slider
     }
 
     func updateUIView(_ slider: UISlider, context: Context) {
         context.coordinator.parent = self
         slider.minimumValue = Float(range.lowerBound)
         slider.maximumValue = Float(range.upperBound)
         // Keep the fill in sync if the player's colour changes.
         slider.minimumTrackTintColor = fillColor
         // Don't fight the user's finger: only sync the thumb to `value` when no
         // drag is in progress.
         if !slider.isTracking {
             slider.setValue(Float(value), animated: false)
         }
     }
 
     /// A white rounded-rectangle thumb with a hairline border and a soft drop
     /// shadow. The image is padded so the shadow isn't clipped; `UISlider`
     /// centres it on the track, so the padding reads as a slightly larger touch
     /// target.
     private static func thumbImage(size: CGSize, cornerRadius: CGFloat) -> UIImage {
         let shadowBlur: CGFloat = 1.5
         let shadowOffset = CGSize(width: 0, height: 0.5)
         let pad = shadowBlur + max(abs(shadowOffset.width), abs(shadowOffset.height)) + 1
         let imageSize = CGSize(width: size.width + pad * 2, height: size.height + pad * 2)
         return UIGraphicsImageRenderer(size: imageSize).image { ctx in
             let cg = ctx.cgContext
             let rect = CGRect(x: pad, y: pad, width: size.width, height: size.height)
             let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
 
             cg.saveGState()
             cg.setShadow(
                 offset: shadowOffset,
                 blur: shadowBlur,
                 color: UIColor.black.withAlphaComponent(0.3).cgColor
             )
             UIColor.white.setFill()
             path.fill()
             cg.restoreGState()
 
             // Hairline border so a white thumb stays defined on a light panel.
             let borderWidth: CGFloat = 0.5
             let inset = borderWidth / 2
             let borderPath = UIBezierPath(
                 roundedRect: rect.insetBy(dx: inset, dy: inset),
                 cornerRadius: max(0, cornerRadius - inset)
             )
             UIColor.black.withAlphaComponent(0.12).setStroke()
             borderPath.lineWidth = borderWidth
             borderPath.stroke()
         }
     }
 
     /// A `height`-tall capsule, resizable along its width, as an
     /// `.alwaysTemplate` image so the slider's track tint colours drive its
     /// colour. The image's height becomes the rendered track thickness.
     private static func trackImage(height: CGFloat) -> UIImage {
         let radius = height / 2
         let size = CGSize(width: height, height: height)
         let image = UIGraphicsImageRenderer(size: size).image { _ in
             UIColor.black.setFill() // colour irrelevant: tinted as a template
             UIBezierPath(roundedRect: CGRect(origin: .zero, size: size), cornerRadius: radius).fill()
         }
         let inset = max(0, radius - 0.5)
         return image
             .resizableImage(
                 withCapInsets: UIEdgeInsets(top: 0, left: inset, bottom: 0, right: inset),
                 resizingMode: .stretch
             )
             .withRenderingMode(.alwaysTemplate)
     }
 
     @MainActor
     final class Coordinator: NSObject {
         var parent: CompactSlider
         init(_ parent: CompactSlider) { self.parent = parent }
 
         @objc func valueChanged(_ slider: UISlider) {
             parent.onUserScrub?()
             let rounded = Int(slider.value.rounded())
             if rounded != parent.value { parent.value = rounded }
         }
     }
 }