【SwiftUI】動画の再生機能で横に黒い帯ができるのが嫌 MacOS

MacOS向けのAppを制作しています。

動画を再生する機能をつけたところ横に帯が出てしまいました。
（下記画像：紫のボーダーの内側左右に黒い帯が出てしまっている）

調べたところ、iOS向けにこれを消す記事があったのですがMacOSではこれが使えなかったので、試してみたことを記事に残しておきます。

この記事のことをやるとした画像のようになります。角丸を飛び越えてしまってるので調子が必要そう…。

事前準備　動画の再生まで

まず、動画の準備から始めます。再生したい動画ファイルをプロジェクトに追加し、そのURLをAVPlayerにセットします。

import SwiftUI
import AVKit

struct VideoView: View {
    private let player = AVPlayer(url: Bundle.main.url(forResource: "HowToSetIcon", withExtension: "mov")!)

    var body: some View {
        PlayerView(player: player)
    }
}

黒い帯を消す方法

次に、AppKitの力を借りて、NSViewRepresentableを使用してAVPlayerViewをラップします。これにより、動画がビュー全体にフィットするように調整できます。

struct PlayerView: NSViewRepresentable {
    let player: AVPlayer

    func makeNSView(context: Context) -> NSView {
        let playerView = AVPlayerView()
        playerView.player = player
        return playerView
    }

    func updateNSView(_ nsView: NSView, context: Context) {
        // none
    }
}

class AVPlayerView: NSView {
    var player: AVPlayer? {
        didSet {
            (self.layer as? AVPlayerLayer)?.player = player
        }
    }

    override init(frame frameRect: NSRect) {
        super.init(frame: frameRect)
        self.wantsLayer = true
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        self.wantsLayer = true
    }

    override var layer: CALayer? {
        didSet {
            guard let layer = self.layer as? AVPlayerLayer else { return }
            layer.videoGravity = .resizeAspectFill
        }
    }

    override func makeBackingLayer() -> CALayer {
        return AVPlayerLayer()
    }
}

これで、動画がフルスクリーンで表示され、再生や停止のUI部品は表示されません。これにより、動画の横に黒い帯が表示される問題を防ぐことができます。

やっぱめんどくさい（追記）

SwiftUI標準のプレイヤーだとホバー時に再生停止ボタンと、シークバーが標準で付いているので、AppKitを使ってしまうとそれを自分で構築しなければならないので大変…。

最初にも書いたけど、CornerRadiusかけたときに切り取れるようにする方法がわからない。

結局動画編集して比率を変更してAspectRatioを指定することにした。コードで切り取っていい感じにするのは諦めた…。

VideoPlayer(player: player)
        .aspectRatio(4 / 3, contentMode: .fit)