BottomBar Functionality

SpotifyCloneProject/SpotifyClone/MainView.swift

@@ -45,7 +45,7 @@ struct MainView: View {
             .environmentObject(myLibraryVM)
             .environmentObject(mediaDetailVM)
         }
-        BottomBar(mainVM: mainVM, showMediaPlayer: mainVM.showBottomMediaPlayer)
+        BottomBar(mainVM: mainVM, showMediaPlayer: mainVM.showBottomMediaPlayer, mediaDetailVM: mediaDetailVM)
       }
       .onAppear { mainVM.getCurrentUserInfo() }
       .onChange(of: mainVM.currentPage) { _ in cleanAllPages() }

SpotifyCloneProject/SpotifyClone/Service/HomePage/ArtistDetailScreen.swift

@@ -122,7 +122,7 @@ struct ArtistDetailScreen_Previews: PreviewProvider {
       VStack {
         Spacer()
         BottomBar(mainVM: mainVM,
-                  showMediaPlayer: true)
+                  showMediaPlayer: true, mediaDetailVM: MediaDetailViewModel(mainVM: mainVM))
       }
     }
   }

SpotifyCloneProject/SpotifyClone/Views/BottomBar.swift

@@ -11,16 +11,22 @@ import SwiftUI
 
 struct BottomBar: View {
   @StateObject var mainVM: MainViewModel
+  @StateObject var audioManager = RemoteAudio()
   var showMediaPlayer = false
+  var mediaDetailVM: MediaDetailViewModel
 
   var body: some View {
     VStack(spacing: 0) {
       Spacer()
       Group {
-        if showMediaPlayer {
-          BottomMediaPlayerBar(songName: "Nothing But The Beat",
-                               artist: "Ed Sheeran",
-                               cover: Image("nothing-but-the-beat-cover"))
+        // If there is a selected media object, show the player
+        if showMediaPlayer && mediaDetailVM.mainItem != nil {
+          BottomMediaPlayerBar(songName: mediaDetailVM.mainItem!.title,
+                               artist: mediaDetailVM.mainItem!.authorName,
+                               cover: SmallMediaCover(imageURL: mediaDetailVM.mainItem!.imageURL),
+                               audioManager: audioManager,
+                               id: mediaDetailVM.mainItem!.id,
+                               previewURl: mediaDetailVM.mainItem!.previewURL)
         }
         BottomNavigationBar(mainVM: mainVM)
       }
@@ -32,8 +38,13 @@ struct BottomBar: View {
 
 private struct BottomMediaPlayerBar: View {
   var songName: String
-  var artist: String
-  var cover: Image
+  var artist: [String]
+  var cover: SmallMediaCover
+  @StateObject var audioManager: RemoteAudio
+  let id: String
+  let previewURl: String
+
+  var isPlaying: Bool { audioManager.showPauseButton && audioManager.lastItemPlayedID == id }
 
   var body: some View {
     ZStack {
@@ -44,12 +55,11 @@ private struct BottomMediaPlayerBar: View {
         HStack {
           HStack {
             cover
-              .resizeToFit()
-              .frame(width: 60)
+              .frame(width: 50, height: 50)
             VStack(alignment: .leading) {
               Text(songName).font(.avenir(.medium, size: Constants.fontSmall))
                 .frame(maxWidth: .infinity, alignment: .topLeading)
-              Text(artist).font(.avenir(.medium, size: Constants.fontXSmall))
+              Text(artist.joined(separator: ", ")).font(.avenir(.medium, size: Constants.fontXSmall))
                 .frame(maxWidth: .infinity, alignment: .topLeading)
                 .opacity(Constants.opacityStandard)
             }
@@ -61,10 +71,30 @@ private struct BottomMediaPlayerBar: View {
               .resizeToFit()
               .frame(width: 25, height: 25)
               .opacity(Constants.opacityStandard)
-            Image("play")
+            if audioManager.showPauseButton && !audioManager.lastPlayedURL.isEmpty {
+              Image("stop")
+                .resizeToFit()
+                .frame(width: 25, height: 25)
+                .padding(.trailing, Constants.paddingStandard)
+                .onTapGesture {
+                  if isPlaying {
+                    audioManager.pause()
+                  }
+                }
+            } else {
+              Image("play")
               .resizeToFit()
               .frame(width: 25, height: 25)
               .padding(.trailing, Constants.paddingStandard)
+              .onTapGesture {
+                if isPlaying {
+                  audioManager.pause()
+                } else {
+                  audioManager.pause()
+                  audioManager.play(previewURl, audioID: id)
+                }
+              }
+            }
           }
         }
         .frame(height: 60)

SpotifyCloneProject/SpotifyClone/Views/MediaDetailScreens/AlbumDetailScreen/AlbumDetailScreen.swift

@@ -107,7 +107,7 @@ struct AlbumDetailScreen_Previews: PreviewProvider {
                            mediaDetailVM: MediaDetailViewModel(mainVM: mainVM))
       VStack {
         Spacer()
-        BottomBar(mainVM: mainVM, showMediaPlayer: true)
+        BottomBar(mainVM: mainVM, showMediaPlayer: true, mediaDetailVM: MediaDetailViewModel(mainVM: mainVM))
       }
     }
   }

SpotifyCloneProject/SpotifyClone/Views/MediaDetailScreens/EpisodeDetailScreen/EpisodeDetailScreen.swift

@@ -159,7 +159,7 @@ struct EpisodeDetailScreen_Previews: PreviewProvider {
       VStack {
         Spacer()
         BottomBar(mainVM: mainVM,
-                  showMediaPlayer: true)
+                  showMediaPlayer: true, mediaDetailVM: MediaDetailViewModel(mainVM: mainVM))
       }
     }
   }

SpotifyCloneProject/SpotifyClone/Views/MediaDetailScreens/PlaylistDetailScreen/PlaylistDetailScreen.swift

@@ -112,7 +112,7 @@ struct MediaDetailScreen_Previews: PreviewProvider {
                            mediaDetailVM: MediaDetailViewModel(mainVM: mainVM))
       VStack {
         Spacer()
-        BottomBar(mainVM: mainVM, showMediaPlayer: true)
+        BottomBar(mainVM: mainVM, showMediaPlayer: true, mediaDetailVM: MediaDetailViewModel(mainVM: mainVM))
       }
     }
   }

SpotifyCloneProject/SpotifyClone/Views/MediaDetailScreens/ShowsDetailScreen/ShowDetailViews/SmallMediaCover.swift

@@ -16,7 +16,7 @@ struct SmallMediaCover: View {
         .foregroundColor(.spotifyMediumGray)
         .overlay(RemoteImage(urlString: imageURL))
         .mask(RoundedRectangle(cornerRadius: Constants.radiusStandard).frame(width: 150, height: 150))
-        .frame(width: 150, height: 150)
+        .frame(width: 50, height: 50)
         .shadow(color: .spotifyDarkGray.opacity(0.3), radius: 15)
     }
     .padding(.bottom, 10)

SpotifyCloneProject/SpotifyClone/Views/MediaDetailScreens/ShowsDetailScreen/ShowsDetailScreen.swift

@@ -135,7 +135,7 @@ struct ShowsDetailScreen_Previews: PreviewProvider {
                         mediaDetailVM: MediaDetailViewModel(mainVM: mainVM))
       VStack {
         Spacer()
-        BottomBar(mainVM: mainVM, showMediaPlayer: true)
+        BottomBar(mainVM: mainVM, showMediaPlayer: true, mediaDetailVM: MediaDetailViewModel(mainVM: mainVM))
       }
     }
   }

SpotifyCloneProject/SpotifyClone/Views/SearchDetailScreens/ActiveSearchingScreen/ActiveSearchingScreen.swift

@@ -31,7 +31,7 @@ struct ActiveSearchingScreen: View {
           .onChange(of: searchInput) { _ in
             activeSearchVM.search(for: searchInput)
           }
-        BottomBar(mainVM: mediaDetailVM.mainVM)
+        BottomBar(mainVM: mediaDetailVM.mainVM, mediaDetailVM: mediaDetailVM)
       }
     }
   }
@@ -41,9 +41,10 @@ struct ActiveSearchingScreen: View {
 
 struct ActiveSearchingScreen_Previews: PreviewProvider {
   static var previews: some View {
+
     ZStack {
       ActiveSearchingScreen()
-      BottomBar(mainVM: MainViewModel())
+      BottomBar(mainVM: MainViewModel(), mediaDetailVM: MediaDetailViewModel(mainVM: MainViewModel()))
     }
   }
 }