💄 Add "now playing" bar

PodcastsClone.xcodeproj/project.pbxproj

@@ -12,6 +12,7 @@
 		EC37FB322A1A49EB005C78D6 /* Strings.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC37FB312A1A49EB005C78D6 /* Strings.swift */; };
 		EC48FBBA2A1A826800CD7B83 /* PodcastViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC48FBB92A1A826800CD7B83 /* PodcastViewCell.swift */; };
 		EC48FBBC2A1A890D00CD7B83 /* Stub.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC48FBBB2A1A890D00CD7B83 /* Stub.swift */; };
+		EC48FBC32A1ABA2000CD7B83 /* NowPlayingBar.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC48FBC22A1ABA2000CD7B83 /* NowPlayingBar.swift */; };
 		EC8CF6202A13A4F200BE6FD5 /* Colors.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = EC8CF61F2A13A4F200BE6FD5 /* Colors.xcassets */; };
 		EC8CF6232A13A59400BE6FD5 /* LibraryView.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC8CF6222A13A59400BE6FD5 /* LibraryView.swift */; };
 		EC8CF6252A13A7F000BE6FD5 /* Podcast.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC8CF6242A13A7F000BE6FD5 /* Podcast.swift */; };
@@ -29,6 +30,7 @@
 		EC37FB312A1A49EB005C78D6 /* Strings.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Strings.swift; sourceTree = "<group>"; };
 		EC48FBB92A1A826800CD7B83 /* PodcastViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PodcastViewCell.swift; sourceTree = "<group>"; };
 		EC48FBBB2A1A890D00CD7B83 /* Stub.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Stub.swift; sourceTree = "<group>"; };
+		EC48FBC22A1ABA2000CD7B83 /* NowPlayingBar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NowPlayingBar.swift; sourceTree = "<group>"; };
 		EC8CF61F2A13A4F200BE6FD5 /* Colors.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Colors.xcassets; sourceTree = "<group>"; };
 		EC8CF6222A13A59400BE6FD5 /* LibraryView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LibraryView.swift; sourceTree = "<group>"; };
 		EC8CF6242A13A7F000BE6FD5 /* Podcast.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Podcast.swift; sourceTree = "<group>"; };
@@ -101,6 +103,14 @@
 			path = Stubs;
 			sourceTree = "<group>";
 		};
+		EC48FBC12A1ABA0700CD7B83 /* Components */ = {
+			isa = PBXGroup;
+			children = (
+				EC48FBC22A1ABA2000CD7B83 /* NowPlayingBar.swift */,
+			);
+			path = Components;
+			sourceTree = "<group>";
+		};
 		EC8CF6212A13A57400BE6FD5 /* Model */ = {
 			isa = PBXGroup;
 			children = (
@@ -150,6 +160,7 @@
 		ECB23BA42A0E45CC00A1C62B /* View */ = {
 			isa = PBXGroup;
 			children = (
+				EC48FBC12A1ABA0700CD7B83 /* Components */,
 				EC37FB2E2A1A4941005C78D6 /* Strings */,
 				EC37FB2D2A1A3FA4005C78D6 /* Extensions */,
 				EC48FBC02A1A93FF00CD7B83 /* Stubs */,
@@ -243,6 +254,7 @@
 				EC37FB2C2A1A3E03005C78D6 /* Color.swift in Sources */,
 				EC8CF6232A13A59400BE6FD5 /* LibraryView.swift in Sources */,
 				ECB23B932A0E33B000A1C62B /* PodcastsCloneApp.swift in Sources */,
+				EC48FBC32A1ABA2000CD7B83 /* NowPlayingBar.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

PodcastsClone/View/Components/NowPlayingBar.swift

@@ -0,0 +1,77 @@
+//
+//  NowPlayingBar.swift
+//  PodcastsClone
+//
+//  Created by etudiant on 2023-05-21.
+//
+
+// Thanks to Luca Jonscher for this tutorial: https://itnext.io/add-a-now-playing-bar-with-swiftui-to-your-app-d515b03f05e3
+// This bar is almost all made by them. The mistakes are all mine.
+import SwiftUI
+
+struct NowPlayingBar<Content: View>: View {
+    var content: Content
+    
+    @ViewBuilder var body: some View {
+        ZStack {
+            Blur(style: .systemMaterial) // Use Blur view as background
+                .frame(width: UIScreen.main.bounds.size.width, height: 64)
+            
+            VStack {
+                HStack {
+                    Button(action: {}) {
+                        HStack {
+                            Image("jjho_logo")
+                                .resizable()
+                                .frame(width: 48, height: 48)
+                                .shadow(radius: 4, x: 0, y: 2)
+                                .padding(.leading)
+                            VStack(alignment: .leading) {
+                                Text("Acting in Bat Faith")
+                                    .foregroundColor(Color.theme.primary)
+                                Text("1 February 2023")
+                                    .font(.caption)
+                                    .foregroundColor(Color.theme.secondary)
+                            }.padding()
+                            Spacer()
+                        }
+                    }
+                    .buttonStyle(PlainButtonStyle())
+                    
+                    Button(action: {}) {
+                        Image(systemName: "play.fill")
+                            .font(.title3)
+                    }
+                    .buttonStyle(PlainButtonStyle())
+                    .padding(.horizontal)
+                    
+                    Button(action: {}) {
+                        Image(systemName: "gobackward.30")
+                            .font(.title3)
+                    }
+                    .buttonStyle(PlainButtonStyle())
+                    .padding(.trailing, 30)
+                }
+            }
+        }
+    }
+}
+
+
+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_Previews: PreviewProvider {
+    static var previews: some View {
+        NowPlayingBar(content: Text("Hello Bar"))
+    }
+}

PodcastsClone/View/MainView.swift

@@ -9,12 +9,14 @@ import SwiftUI
 
 struct MainView: View {
     var body: some View {
+        ZStack {
+            
             TabView {
-            Text("Listen Now")
+                Text("Check out the library instead")
                     .tabItem {
                         Label("Listen Now", systemImage: "play")
                     }
-            Text("Browse")
+                Text("I swear, the library is where it's at")
                     .tabItem {
                         Label("Browse", systemImage: "square.grid.2x2")
                     }
@@ -22,11 +24,22 @@ struct MainView: View {
                     .tabItem {
                         Label("Library", systemImage: "book")
                     }
-            Text("Search")
+                Text("Nothing to see here. The library, on the other hand...")
                     .tabItem {
                         Label("Search", systemImage: "magnifyingglass")
                     }
             }
+            .accentColor(Color.theme.accent)
+            .tabViewStyle(.automatic)
+            
+            VStack {
+                Spacer()
+                VStack{
+                    NowPlayingBar(content: Text("Gahhh!"))
+                }
+                .offset(y: -42)
+            }
+        }
     }
 }