Video in SwiftUI: Properties

On the previous article, we created our Video component for SwiftUI. It was working correctly, but there was not a lot of configuration you could do to it.

For example, if you wanted to mute the sound of the video, there was no way to achieve that with our current component. Let’s see how we can change that.

We start by adding a property to our Video component called isMuted:

let isMuted: Bool = false

And then we update our makeViewController method:

let videoViewController = AVPlayerViewController()
videoViewController.player = AVPlayer(url: videoURL)
videoViewController.player?.isMuted = isMuted

Then we can set this property to on or off when we create our Video component:

Video(url: "video.mp4", isMuted: true)

If you start our demo app now, you will notice that we muted the sound of the video. All works fine if you only want to mute the sound at the creation of your Video view, but imagine you want to give the user an option to mute the sound using a toggle button? Something like this:

@State var isMuted = true
VStack {
  Video(url: "video.mp4", muted: $isMuted)
  Toggle(isOn: $isMuted ) {
    Text("Muted")
  }
}

Then you need to move our code to the updateUIViewController method:

public func updateUIViewController(_ videoViewController: AVPlayerViewController, context: Context) {
  videoViewController.player?.isMuted = isMuted.wrappedValue
}

This way, every time the toggle value is changed, our muted status updates accordingly.

Now that we have our property working, let’s make it easier for the users of our component to use it. 

One thing that you normally see in SwiftUI core components is the possibility to use modifiers instead of setting the value in the init method you change it like this:

Video(url: '...')
  .isMuted(true)

To implement this, you need to implement a straightforward method:

public func isMuted(_value: Binding<Bool>) -> Video {
  var new =self
  new.isMuted = value
  return new
}

To make it easier for users that don’t need to change the isMuted value you can implement the following helper:

public func isMuted(_ value: Bool) -> Video {
  return isMuted(.constant(value))
}

You now have your component ready to change according to the user selection. 

If you want a challenge, you can try to implement some other properties like showControls.

You can check the code for this property and other properties on the VideoUI repo in Github.

That is all for today. See you in part 3.