@swiftbrowser/native 0.17.6 → 0.17.8

package/swift/Sources/SwiftBrowserNative/Host/WebSocketBridge.swift

@@ -0,0 +1,118 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+#if canImport(FoundationBridge)
+import FoundationBridge
+#endif
+
+/// The app's `WebSocket`s (packages/native/src/webSocket.ts) on
+/// `URLSessionWebSocketTask`: `wsOpen` starts one, which is open once its
+/// first ping is answered (the handshake is done by then), `wsSend` sends
+/// text or bytes, `wsClose` closes it. What a socket receives, and how it
+/// ends, goes to the app as `__sbWebSocketEvent(id, json)`: `open`,
+/// `message` (`text` or base64 `binary`), `error` and `close` (`code`,
+/// `reason`, `wasClean`). Against the shim (the round trip) the task is the
+/// shim's, over the page's WebSocket.
+@MainActor
+final class WebSocketBridge {
+    private let session: URLSession
+    private let send: (Int, JSONValue) -> Void
+    private var tasks: [Int: URLSessionWebSocketTask] = [:]
+
+    /// `send` hands an event for socket `id` to the app.
+    init(session: URLSession, send: @escaping (Int, JSONValue) -> Void) {
+        self.session = session
+        self.send = send
+    }
+
+    func open(id: Int, url string: String, protocols: [String]) {
+        guard let url = URL(string: string) else {
+            emit(id, ["type": .string("error"), "message": .string("invalid URL")])
+            emit(id, ["type": .string("close"), "code": .number(1006), "reason": .string(""), "wasClean": .bool(false)])
+            return
+        }
+        let task = protocols.isEmpty ? session.webSocketTask(with: url) : session.webSocketTask(with: url, protocols: protocols)
+        tasks[id] = task
+        task.resume()
+        task.sendPing { [weak self] error in
+            Task { @MainActor [weak self] in
+                guard let self, self.tasks[id] === task else { return }
+                if let error {
+                    self.fail(id: id, task: task, error: error)
+                    return
+                }
+                self.emit(id, ["type": .string("open"), "protocol": .string("")])
+                self.receive(id: id, task: task)
+            }
+        }
+    }
+
+    /// `{ text }` or `{ binary }` (base64).
+    func send(id: Int, json: String) {
+        guard let task = tasks[id], let fields = (try? JSONValue.parse(json))?.object else { return }
+        let message: URLSessionWebSocketTask.Message
+        if let text = fields["text"]?.string {
+            message = .string(text)
+        } else if let encoded = fields["binary"]?.string, let data = Data(base64Encoded: encoded) {
+            message = .data(data)
+        } else {
+            return
+        }
+        task.send(message) { [weak self] error in
+            guard let error else { return }
+            Task { @MainActor [weak self] in
+                guard let self, self.tasks[id] === task else { return }
+                self.fail(id: id, task: task, error: error)
+            }
+        }
+    }
+
+    func close(id: Int, code: Int, reason: String) {
+        guard let task = tasks.removeValue(forKey: id) else { return }
+        task.cancel(with: URLSessionWebSocketTask.CloseCode(rawValue: code) ?? .normalClosure, reason: reason.isEmpty ? nil : Data(reason.utf8))
+        emit(id, ["type": .string("close"), "code": .number(Double(code)), "reason": .string(reason), "wasClean": .bool(true)])
+    }
+
+    /// Ends every socket; the app that owned the bridge is going away.
+    func invalidate() {
+        for task in tasks.values { task.cancel(with: .goingAway, reason: nil) }
+        tasks.removeAll()
+    }
+
+    private func receive(id: Int, task: URLSessionWebSocketTask) {
+        task.receive { [weak self] result in
+            Task { @MainActor [weak self] in
+                guard let self, self.tasks[id] === task else { return }
+                switch result {
+                case .success(let message):
+                    switch message {
+                    case .string(let text): self.emit(id, ["type": .string("message"), "text": .string(text)])
+                    case .data(let data): self.emit(id, ["type": .string("message"), "binary": .string(data.base64EncodedString())])
+                    @unknown default: break
+                    }
+                    self.receive(id: id, task: task)
+                case .failure(let error):
+                    self.fail(id: id, task: task, error: error)
+                }
+            }
+        }
+    }
+
+    /// The socket ended: a close the server sent (its code and reason), else an error and an unclean close.
+    private func fail(id: Int, task: URLSessionWebSocketTask, error: any Error) {
+        tasks[id] = nil
+        let code = task.closeCode
+        if code != .invalid {
+            let reason = task.closeReason.map { String(decoding: $0, as: UTF8.self) } ?? ""
+            emit(id, ["type": .string("close"), "code": .number(Double(code.rawValue)), "reason": .string(reason), "wasClean": .bool(true)])
+        } else {
+            emit(id, ["type": .string("error"), "message": .string(error.localizedDescription)])
+            emit(id, ["type": .string("close"), "code": .number(1006), "reason": .string(""), "wasClean": .bool(false)])
+        }
+    }
+
+    private func emit(_ id: Int, _ fields: JSONObject) {
+        send(id, .object(fields))
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserNative/Runtime/NativeApp.swift

@@ -61,9 +61,35 @@ public final class NativeApp {
         #if canImport(JavaScriptCore)
         (host as? JavaScriptCoreHost)?.onError = { [weak self] error in self?.error = error.description }
         #endif
+        #if canImport(UserNotifications)
+        NotificationRouter.shared.installIfApp()
+        #endif
         bridge = HostBridge(host: host, tree: tree)
     }
 
+    #if canImport(UserNotifications)
+    // MARK: Remote notifications
+    //
+    // What the app delegate is handed (NativeAppDelegate.swift, or the app's
+    // own delegate calling these), for `registerForPush` and `onNotification`
+    // in `@swiftbrowser/native` (NotificationBridge.swift).
+
+    /// The device token: `registerForPush` resolves with it, as hex.
+    public static func didRegisterForRemoteNotifications(deviceToken: Data) {
+        NotificationRouter.shared.registered(token: deviceToken)
+    }
+
+    /// No token: `registerForPush` rejects with the error.
+    public static func didFailToRegisterForRemoteNotifications(error: any Error) {
+        NotificationRouter.shared.registrationFailed("\(error)")
+    }
+
+    /// A push delivered to the app delegate (a silent one): a `received` event.
+    public static func didReceiveRemoteNotification(userInfo: [AnyHashable: Any]) {
+        NotificationRouter.shared.received(remote: userInfo)
+    }
+    #endif
+
     /// Evaluates the app's bundle (what `@swiftbrowser/native` built: it calls
     /// `run(<App/>)` at the end, which renders the first pass into the tree
     /// before this returns). The environment, if known, is sent right after.

package/swift/Sources/SwiftBrowserNative/Runtime/NativeAppDelegate.swift

@@ -0,0 +1,36 @@
+#if canImport(SwiftUI) && canImport(UIKit) && canImport(UserNotifications)
+import Foundation
+import UIKit
+import UserNotifications
+#if canImport(FoundationBridge)
+import FoundationBridge
+#endif
+
+/// The app delegate a native app adopts for remote notifications, through
+/// `@UIApplicationDelegateAdaptor(NativeAppDelegate.self)` in its App file
+/// (the project `native init` writes does): it hands the device token, a
+/// failure to get one and the pushes delivered to the app to `NativeApp`,
+/// for `registerForPush` and `onNotification` in `@swiftbrowser/native`
+/// (NotificationBridge.swift). An app with a delegate of its own calls the
+/// same `NativeApp` entry points from it.
+open class NativeAppDelegate: UIResponder, UIApplicationDelegate {
+    open func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        // Before launching finishes, so a tap that launched the app is reported.
+        NotificationRouter.shared.install()
+        return true
+    }
+
+    open func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
+        NativeApp.didRegisterForRemoteNotifications(deviceToken: deviceToken)
+    }
+
+    open func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: any Error) {
+        NativeApp.didFailToRegisterForRemoteNotifications(error: error)
+    }
+
+    open func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable: Any]) async -> UIBackgroundFetchResult {
+        NativeApp.didReceiveRemoteNotification(userInfo: userInfo)
+        return .newData
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserNative/Views/ElementView.swift

@@ -82,6 +82,8 @@ struct ElementView: View {
         case "toolbar", "searchfield":
             // Taken by the enclosing screen; in place they draw nothing.
             return AnyView(EmptyView())
+        // Media
+        case "video": return AnyView(VideoElement(node: node))
         // Shapes and colors
         case "color": return AnyView(ColorElement(node: node))
         case "shape": return ShapeElement(node: node).reportingSize(of: node)

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Controls.swift

@@ -71,9 +71,20 @@ struct ToggleElement: View {
     }
 }
 
-/// `textfield`: a controlled field. Each keystroke sends `text`; the app's
-/// state is the truth the getter reads back, with no frame in between
-/// because the dispatch is synchronous.
+/// The `text` event for a write to a field's binding, or nil when the
+/// field's text already is `value`. SwiftUI writes a text binding on a focus
+/// and a commit with the text it has, not only on a keystroke; the page's
+/// renderer sends `text` only for input, and an app that takes every `text`
+/// as an edit (Amindia's Discard button, appearing on a tap into a field)
+/// must hear only changes natively too.
+func textChange(of node: ElementNode, to value: String) -> RendererEvent? {
+    (node.props.string("text") ?? "") == value ? nil : .text(node.id, value)
+}
+
+/// `textfield`: a controlled field. Each keystroke sends `text` (a write of
+/// the text the field has sends nothing, `textChange`); the app's state is
+/// the truth the getter reads back, with no frame in between because the
+/// dispatch is synchronous.
 struct TextFieldElement: View {
     let node: ElementNode
     @Environment(\.nativeApp) private var app
@@ -83,7 +94,7 @@ struct TextFieldElement: View {
         let props = TextFieldProps(props: node.props)
         let text = Binding(
             get: { TextFieldProps(props: node.props).text },
-            set: { app?.dispatch(.text(node.id, $0)) }
+            set: { if let event = textChange(of: node, to: $0) { app?.dispatch(event) } }
         )
         let field: AnyView = {
             if props.secure { return AnyView(SecureField(props.placeholder, text: text)) }
@@ -133,7 +144,7 @@ struct TextEditorElement: View {
     var body: some View {
         TextEditor(text: Binding(
             get: { node.props.string("text") ?? "" },
-            set: { app?.dispatch(.text(node.id, $0)) }
+            set: { if let event = textChange(of: node, to: $0) { app?.dispatch(event) } }
         ))
     }
 }
@@ -179,16 +190,18 @@ struct SliderElement: View {
             set: { app?.dispatch(.slide(node.id, $0)) }
         )
         let range = props.min...max(props.min, props.max)
+        // The drag's start and end, with the value then (`onEditingChanged`).
+        let editing = { (editing: Bool) -> Void in app?.dispatch(.slide(node.id, SliderProps(props: node.props).value, editing: editing)) }
         if node.children.isEmpty {
             if let step = props.step, step > 0 {
-                Slider(value: value, in: range, step: step)
+                Slider(value: value, in: range, step: step, onEditingChanged: editing)
             } else {
-                Slider(value: value, in: range)
+                Slider(value: value, in: range, onEditingChanged: editing)
             }
         } else if let step = props.step, step > 0 {
-            Slider(value: value, in: range, step: step) { ChildrenView(node: node) }
+            Slider(value: value, in: range, step: step, label: { ChildrenView(node: node) }, onEditingChanged: editing)
         } else {
-            Slider(value: value, in: range) { ChildrenView(node: node) }
+            Slider(value: value, in: range, label: { ChildrenView(node: node) }, onEditingChanged: editing)
         }
     }
 }

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Navigation.swift

@@ -204,8 +204,11 @@ struct ScreenToolbar: ToolbarContent {
 }
 
 /// One `toolbar` element: a `ToolbarSpacer` for a `spacer` (iOS 26; a
-/// `Spacer` item before it), else an item with the element's children,
-/// without the bar's shared glass when `sharedBackground` is `hidden` (iOS 26).
+/// `Spacer` item before it), else the element's children as items of its
+/// placement (a `ToolbarItemGroup`: the protocol's `toolbar` holds the
+/// items of one run, as the page lays them out side by side; in one
+/// `ToolbarItem` iOS 26 shows only the first), without the bar's shared
+/// glass when `sharedBackground` is `hidden` (iOS 26).
 struct ToolbarElement: ToolbarContent {
     let node: ElementNode
 
@@ -220,12 +223,12 @@ struct ToolbarElement: ToolbarContent {
             }
         } else if props.sharedBackground == "hidden" {
             if #available(iOS 26, macOS 26, *) {
-                ToolbarItem(placement: placement) { ChildrenView(node: node) }.sharedBackgroundVisibility(.hidden)
+                ToolbarItemGroup(placement: placement) { ChildrenView(node: node) }.sharedBackgroundVisibility(.hidden)
             } else {
-                ToolbarItem(placement: placement) { ChildrenView(node: node) }
+                ToolbarItemGroup(placement: placement) { ChildrenView(node: node) }
             }
         } else {
-            ToolbarItem(placement: placement) { ChildrenView(node: node) }
+            ToolbarItemGroup(placement: placement) { ChildrenView(node: node) }
         }
     }
 }

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Video.swift

@@ -0,0 +1,304 @@
+#if canImport(SwiftUI) && canImport(AVFoundation)
+import AVFoundation
+import AVKit
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+#if canImport(FoundationBridge)
+import FoundationBridge
+#endif
+#if canImport(UIKit)
+import UIKit
+#endif
+
+/// `video` (docs/ops-protocol.md, "Video and audio"): an `AVPlayer` over the
+/// element's URL, drawn by AVKit's `VideoPlayer` with the system's controls
+/// (`controls`), else by a bare player layer at the element's `gravity`.
+/// The props drive the player (the item, mute, volume, rate, play and
+/// pause, each `seek` serial once) and the player reports back with the
+/// `video` events the page sends: `ready` with the duration and size,
+/// `time` while playing (every `report` seconds), `status`, `seeked`,
+/// `ended`, `error`, and `play` / `pause` when the viewer uses the
+/// controls. An element at no size plays its audio with nothing on
+/// screen, as the page's hidden element does for a player shown nowhere.
+///
+/// Built against the shim too (the round trip): the player there is the
+/// shim's, which plays in the page; what iOS alone has (watching the
+/// player's own state for the viewer's play and pause) is gated.
+struct VideoElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+    @State private var controller = VideoController()
+
+    var body: some View {
+        let props = VideoProps(props: node.props)
+        content(props)
+            .background(Color.black)
+            .onAppear {
+                controller.attach(id: node.id, app: app)
+                controller.apply(props)
+            }
+            .onChange(of: props) { _, now in controller.apply(now) }
+            .onDisappear { controller.detach() }
+    }
+
+    @ViewBuilder private func content(_ props: VideoProps) -> some View {
+        // A finite proposal is taken as is; an axis left open follows the
+        // video's aspect ratio (16:9 before the metadata), as on the page.
+        let ratio = (props.width ?? 0) > 0 && (props.height ?? 0) > 0 ? props.width! / props.height! : 16.0 / 9.0
+        if props.controls {
+            VideoPlayer(player: controller.player).aspectRatio(ratio, contentMode: .fit)
+        } else {
+            PlayerLayerView(player: controller.player, gravity: props.gravity).aspectRatio(ratio, contentMode: props.gravity == "resizeAspect" ? .fit : .fill)
+        }
+    }
+}
+
+/// A bare `AVPlayerLayer` (no controls) at the element's gravity.
+#if canImport(UIKit)
+private struct PlayerLayerView: UIViewRepresentable {
+    let player: AVPlayer
+    let gravity: String
+
+    final class LayerView: UIView {
+        override class var layerClass: AnyClass { AVPlayerLayer.self }
+        var playerLayer: AVPlayerLayer { layer as! AVPlayerLayer }
+    }
+
+    func makeUIView(context: Context) -> LayerView {
+        let view = LayerView()
+        view.playerLayer.player = player
+        view.playerLayer.videoGravity = videoGravity
+        return view
+    }
+
+    func updateUIView(_ view: LayerView, context: Context) {
+        if view.playerLayer.player !== player { view.playerLayer.player = player }
+        if view.playerLayer.videoGravity != videoGravity { view.playerLayer.videoGravity = videoGravity }
+    }
+
+    private var videoGravity: AVLayerVideoGravity {
+        switch gravity {
+        case "resizeAspectFill": .resizeAspectFill
+        case "resize": .resize
+        default: .resizeAspect
+        }
+    }
+}
+#else
+/// macOS: AVKit's player view, which has no controls option; the protocol's `controls` is for iOS and the page.
+private struct PlayerLayerView: View {
+    let player: AVPlayer
+    let gravity: String
+    var body: some View { VideoPlayer(player: player) }
+}
+#endif
+
+/// The player behind one `video` element, kept across the view's renders:
+/// applies each change of props and reports the player's events.
+@MainActor
+final class VideoController {
+    let player = AVPlayer()
+    private var id = 0
+    private weak var app: NativeApp?
+    private var applied: VideoProps?
+    private var url: String?
+    private var timeObserver: Any?
+    private var notifications: [Any] = []
+    private var loading: Task<Void, Never>?
+    private var ready = false
+    private var ended = false
+    #if !canImport(FoundationBridge)
+    private var stateObservation: NSKeyValueObservation?
+    #endif
+
+    func attach(id: Int, app: NativeApp?) {
+        self.id = id
+        self.app = app
+    }
+
+    /// Carries the props out, in the page's order: the item, mute and volume
+    /// (before any play), rate, a new seek, then play or pause.
+    func apply(_ props: VideoProps) {
+        if props.url != url { replace(props.url) }
+        if player.isMuted != props.muted { player.isMuted = props.muted }
+        let volume = Float(props.volume)
+        if player.volume != volume { player.volume = volume }
+        if props.report != applied?.report { observeTime(every: props.report ?? 0.25) }
+        if props.seekSerial != applied?.seekSerial {
+            seek(to: props.seekTime, serial: props.seekSerial)
+        }
+        let wasPlaying = applied?.playing ?? false
+        if props.playing, props.url != nil {
+            let rate = Float(props.rate > 0 ? props.rate : 1)
+            if player.rate != rate {
+                ended = false
+                player.rate = rate
+            }
+            if !wasPlaying { report("status", ["status": .string(ready ? "playing" : "waiting"), "time": .number(time)]) }
+        } else if player.rate != 0 {
+            player.pause()
+            if wasPlaying { report("status", ["status": .string("paused"), "time": .number(time)]) }
+        }
+        applied = props
+    }
+
+    func detach() {
+        loading?.cancel()
+        loading = nil
+        player.pause()
+        unobserve()
+        if let timeObserver {
+            player.removeTimeObserver(timeObserver)
+            self.timeObserver = nil
+        }
+        applied = nil
+    }
+
+    private var time: Double {
+        let seconds = player.currentTime().seconds
+        return seconds.isFinite ? seconds : 0
+    }
+
+    /// A new URL: a new item, watched for its end and its failure, probed for its metadata.
+    private func replace(_ url: String?) {
+        loading?.cancel()
+        unobserve()
+        self.url = url
+        ready = false
+        ended = false
+        guard let url, let parsed = URL(string: url) else {
+            player.replaceCurrentItem(with: nil)
+            if let url { report("error", ["url": .string(url), "code": .number(4), "message": .string("not a URL: \(url)")]) }
+            return
+        }
+        let item = AVPlayerItem(url: parsed)
+        player.replaceCurrentItem(with: item)
+        let center = NotificationCenter.default
+        notifications.append(center.addObserver(forName: .AVPlayerItemDidPlayToEndTime, object: item, queue: .main) { [weak self] _ in
+            Task { @MainActor in self?.playedToEnd(url) }
+        })
+        notifications.append(center.addObserver(forName: .AVPlayerItemFailedToPlayToEndTime, object: item, queue: .main) { [weak self] notification in
+            let message = (notification.userInfo?[AVPlayerItemFailedToPlayToEndTimeErrorKey] as? Error)?.localizedDescription ?? "playback failed"
+            Task { @MainActor in self?.report("error", ["url": .string(url), "code": .number(2), "message": .string(message)]) }
+        })
+        notifications.append(center.addObserver(forName: .AVPlayerItemPlaybackStalled, object: item, queue: .main) { [weak self] _ in
+            Task { @MainActor in
+                guard let self else { return }
+                self.report("status", ["status": .string("waiting"), "time": .number(self.time)])
+            }
+        })
+        #if !canImport(FoundationBridge)
+        // The viewer's own play and pause (the system's controls), as changes the props did not ask for.
+        stateObservation = player.observe(\.timeControlStatus, options: [.new]) { [weak self] player, _ in
+            let status = player.timeControlStatus
+            Task { @MainActor in self?.playerChanged(to: status, url: url) }
+        }
+        #endif
+        loading = Task { [weak self] in
+            await self?.probe(item, url: url)
+        }
+    }
+
+    #if !canImport(FoundationBridge)
+    /// The player's state changed: the viewer's play or pause when the props
+    /// asked for the opposite (a pause at the item's end is the end, not the
+    /// viewer), else playback starting as asked.
+    private func playerChanged(to status: AVPlayer.TimeControlStatus, url: String) {
+        guard let applied, self.url == url else { return }
+        switch status {
+        case .playing where !applied.playing:
+            report("play", ["time": .number(time)])
+        case .paused where applied.playing && !ended && ready && !atEnd:
+            report("pause", ["time": .number(time)])
+        case .playing where applied.playing:
+            report("status", ["status": .string("playing"), "time": .number(time)])
+        default:
+            break
+        }
+    }
+
+    /// Whether the item is at (or within a frame of) its end.
+    private var atEnd: Bool {
+        guard let duration = player.currentItem?.duration, duration.isNumeric else { return false }
+        return time >= duration.seconds - 0.05
+    }
+    #endif
+
+    /// `ready`: the duration and the video's size, once the asset says; `error` when it cannot be read.
+    private func probe(_ item: AVPlayerItem, url: String) async {
+        let asset = item.asset
+        do {
+            let duration = try await asset.load(.duration)
+            var width = 0.0
+            var height = 0.0
+            if let track = try await asset.loadTracks(withMediaType: .video).first {
+                let size = try await track.load(.naturalSize)
+                width = size.width
+                height = size.height
+            }
+            guard !Task.isCancelled, self.url == url else { return }
+            ready = true
+            let seconds = duration.seconds
+            report("ready", [
+                "url": .string(url),
+                "duration": seconds.isFinite && duration.isNumeric ? .number(seconds) : .null,
+                "width": .number(width),
+                "height": .number(height),
+                "time": .number(time),
+            ])
+            if applied?.playing == true { report("status", ["status": .string("playing"), "time": .number(time)]) }
+        } catch {
+            guard !Task.isCancelled, self.url == url else { return }
+            report("error", ["url": .string(url), "code": .number(4), "message": .string(error.localizedDescription)])
+        }
+    }
+
+    private func seek(to seconds: Double, serial: Int) {
+        ended = false
+        player.seek(to: CMTime(seconds: seconds, preferredTimescale: 600)) { [weak self] finished in
+            guard finished else { return }
+            Task { @MainActor in
+                guard let self else { return }
+                self.report("seeked", ["serial": .number(Double(serial)), "time": .number(self.time)])
+            }
+        }
+    }
+
+    private func playedToEnd(_ url: String) {
+        if applied?.loop == true {
+            // The item plays again from its start, as a looper would.
+            player.seek(to: .zero)
+            if applied?.playing == true { player.rate = Float(applied?.rate ?? 1) }
+        } else {
+            ended = true
+        }
+        report("ended", ["url": .string(url), "time": .number(time)])
+    }
+
+    private func observeTime(every interval: Double) {
+        if let timeObserver { player.removeTimeObserver(timeObserver) }
+        let step = max(0.05, interval)
+        timeObserver = player.addPeriodicTimeObserver(forInterval: CMTime(seconds: step, preferredTimescale: 600), queue: .main) { [weak self] time in
+            Task { @MainActor in
+                guard let self, self.applied?.playing == true else { return }
+                let seconds = time.seconds
+                self.report("time", ["time": .number(seconds.isFinite ? seconds : 0)])
+            }
+        }
+    }
+
+    private func unobserve() {
+        for token in notifications { NotificationCenter.default.removeObserver(token) }
+        notifications = []
+        #if !canImport(FoundationBridge)
+        stateObservation = nil
+        #endif
+    }
+
+    private func report(_ event: String, _ fields: JSONObject) {
+        app?.dispatch(.video(id, event, fields))
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserProtocol/Props.swift

@@ -385,6 +385,49 @@ public struct StepperProps: Equatable, Sendable {
     }
 }
 
+/// `video` (docs/ops-protocol.md, "Video and audio"): a view of an `AVPlayer`, as the app works its props out.
+public struct VideoProps: Equatable, Sendable {
+    /// The media URL; nil while there is none.
+    public var url: String?
+    /// Whether the player plays here (only its newest view plays it).
+    public var playing: Bool
+    public var muted: Bool
+    /// 0…1.
+    public var volume: Double
+    /// The playback rate (the default rate while paused).
+    public var rate: Double
+    public var loop: Bool
+    /// `resizeAspect`, `resizeAspectFill` or `resize`.
+    public var gravity: String
+    /// The system's playback controls.
+    public var controls: Bool
+    /// Seconds; seek once per serial, reporting `seeked` with it.
+    public var seekTime: Double
+    public var seekSerial: Int
+    /// Report the position this often (seconds) while playing.
+    public var report: Double?
+    /// The video's pixel size once known: the aspect ratio of an axis left open.
+    public var width: Double?
+    public var height: Double?
+
+    public init(props: JSONObject) {
+        url = props.string("url")
+        playing = props.bool("playing") ?? false
+        muted = props.bool("muted") ?? false
+        volume = props.double("volume") ?? 1
+        rate = props.double("rate") ?? 1
+        loop = props.bool("loop") ?? false
+        gravity = props.string("gravity") ?? "resizeAspect"
+        controls = props.bool("controls") ?? true
+        let seek = props.object("seek")
+        seekTime = seek?.double("time") ?? 0
+        seekSerial = seek?.int("serial") ?? 0
+        report = props.double("report")
+        width = props.double("width")
+        height = props.double("height")
+    }
+}
+
 public struct SliderProps: Equatable, Sendable {
     public var value: Double
     public var min: Double

package/swift/Sources/SwiftBrowserProtocol/RendererEvent.swift

@@ -57,8 +57,18 @@ public struct RendererEvent: Equatable, Sendable {
     }
     /// A `stepper` half was tapped (`value` is ±1).
     public static func step(_ id: Int, _ delta: Int) -> RendererEvent { with("step", id: id, ["value": .number(Double(delta))]) }
-    /// A `slider` moved.
-    public static func slide(_ id: Int, _ value: Double) -> RendererEvent { with("slide", id: id, ["value": .number(value)]) }
+    /// A `slider` moved; `editing` true with a drag's first value and false with its last (`onEditingChanged`), nil between.
+    public static func slide(_ id: Int, _ value: Double, editing: Bool? = nil) -> RendererEvent {
+        var fields: JSONObject = ["value": .number(value)]
+        if let editing { fields["editing"] = .bool(editing) }
+        return with("slide", id: id, fields)
+    }
+    /// A `video` element's playback (docs/ops-protocol.md, "`video` events"): `event` names it (`ready`, `time`, `status`, `seeked`, `play`, `pause`, `volume`, `rate`, `ended`, `error`), `fields` are its own.
+    public static func video(_ id: Int, _ event: String, _ fields: JSONObject = [:]) -> RendererEvent {
+        var all = fields
+        all["event"] = .string(event)
+        return with("video", id: id, all)
+    }
     /// A `datepicker` changed; `seconds` since 1970.
     public static func date(_ id: Int, seconds: Double) -> RendererEvent { with("date", id: id, ["value": .number(seconds)]) }
     /// A `textfield` with `focused` gained or lost focus.