Music NowPlaying above TabView in SwiftUI - swift

Question

I'm new in SwiftUI, I have an app that plays some audios from URLs in UIKit and I'm upgrading it to SwiftUI
I'm following this tutorial to have a bottom "now playing bar"
https://itnext.io/add-a-now-playing-bar-with-swiftui-to-your-app-d515b03f05e3
The problem is: my bar is below the tabView, but I want it above the tabView
I don't know how to solve this. Maybe the tutorial is outdated because of an old SwiftUI version?
This is what I'm doing:
import SwiftUI
#main
struct MyApp: App {
#State var playerOffset: CGFloat = 0
var body: some Scene {
WindowGroup {
TabView {
VideosView()
.tabItem { Image(systemName: "film").accentColor(.black)
Text("Videos")}
AudiosView()
.tabItem { Image(systemName: "headphones").accentColor(.black)
Text("Audios")}
}
NowPlayingBar(content: ListenNowView()).tag(0).tabItem { Label("Listen Now", systemImage: "play.circle.fill") }
}
}
}
struct Blur: UIViewRepresentable {
var style: UIBlurEffect.Style = .systemChromeMaterial
func makeUIView(context: Context) -> UIVisualEffectView {
return UIVisualEffectView(effect: UIBlurEffect(style: style))
}
func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
uiView.effect = UIBlurEffect(style: style)
}
}
struct NowPlayingBar<Content: View>: View {
var content: Content
#ViewBuilder var body: some View {
ZStack(alignment: .bottom) {
//content
ZStack {
Rectangle().foregroundColor(Color.white.opacity(0.0)).frame(width: UIScreen.main.bounds.size.width, height: 65).background(Blur())
HStack {
Button(action: {}) {
HStack {
Image("cover").resizable().frame(width: 45, height: 45).shadow(radius: 6, x: 0, y: 3).padding(.leading)
Text("Shake It Off").padding(.leading, 10)
Spacer()
}
}.buttonStyle(PlainButtonStyle())
Button(action: {}) {
Image(systemName: "play.fill").font(.title3)
}.buttonStyle(PlainButtonStyle()).padding(.horizontal)
Button(action: {}) {
Image(systemName: "forward.fill").font(.title3)
}.buttonStyle(PlainButtonStyle()).padding(.trailing, 30)
}
}
}
}
}
struct ListenNowView: View {
#State private var showMediaPlayer = false
var body: some View {
Button(action: {
self.showMediaPlayer.toggle()
}) {
HStack {
Image("Cover").resizable().frame(width: 45, height: 45).shadow(radius: 6, x: 0, y: 3).padding(.leading)
Text("Shake It Off").padding(.leading, 10)
Spacer()
}
}.buttonStyle(PlainButtonStyle()).fullScreenCover(isPresented: $showMediaPlayer) {
}
}
}

Answer 1

Inside your window group there is a mistake. The tutorial says "Now we only need to wrap our individual views in the NowPlayingBar(content: _) to prepare for this feature."
Doing this way will work :
TabView {
NowPlayingBar(content: VideosView())
.tabItem { Image(systemName: "film").accentColor(.black)
Text("Videos")}.tag(0)
NowPlayingBar(content: AudiosView())
.tabItem { Image(systemName: "headphones").accentColor(.black)
Text("Audios")}.tag(1)
NowPlayingBar(content: ListenNowView())
.tabItem { Label("Listen Now", systemImage: "play.circle.fill") }
.tag(2)
}