add green play button to carousel item

leejunkit · Jun 19, 2021 · c7d7feb · c7d7feb
1 parent b574409
commit c7d7feb
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/Spottie/Views/Components/CarouselRow.swift b/Spottie/Views/Components/CarouselRow.swift
@@ -29,9 +29,11 @@ struct CarouselRow: View {
                 HStack(alignment: .top, spacing: 40) {
                     ForEach(viewModel.items) { item in
                         let vm = CarouselRowItem.ViewModel.init(item)
-                        CarouselRowItem(viewModel: vm)
+                        CarouselRowItem(viewModel: vm, onPlayButtonPressed: {
+                            onItemPressed(item.id)
+                        })
                             .onTapGesture {
-                                onItemPressed(item.id)
+
                             }
                     }
                 }

diff --git a/Spottie/Views/Components/CarouselRowItem.swift b/Spottie/Views/Components/CarouselRowItem.swift
@@ -10,22 +10,32 @@ import SDWebImageSwiftUI
 
 struct CarouselRowItem: View {
     @ObservedObject var viewModel: ViewModel
+    var onPlayButtonPressed: () -> Void
 
     var body: some View {
         VStack(alignment: .leading) {
-            if viewModel.artworkIsCircle {
-                WebImage(url: viewModel.artworkURL)
-                    .resizable()
-                    .aspectRatio(1.0, contentMode: .fill)
-                    .clipShape(Circle())
-                    .overlay(Circle().stroke(Color.white, lineWidth: 4.0))
-                    .shadow(radius: 7)
-            } else {
-                WebImage(url: viewModel.artworkURL)
-                    .resizable()
-                    .aspectRatio(1.0, contentMode: .fill)
-                    .cornerRadius(5)
+            ZStack(alignment: .bottomTrailing) {
+                if viewModel.artworkIsCircle {
+                    WebImage(url: viewModel.artworkURL)
+                        .resizable()
+                        .aspectRatio(1.0, contentMode: .fill)
+                        .clipShape(Circle())
+                        .overlay(Circle().stroke(Color.white, lineWidth: 4.0))
+                        .shadow(radius: 7)
+                } else {
+                    WebImage(url: viewModel.artworkURL)
+                        .resizable()
+                        .aspectRatio(1.0, contentMode: .fill)
+                        .cornerRadius(5)
+                }
+                GreenPlayButton {
+                    onPlayButtonPressed()
+                }
+                .offset(x: -16, y: -16)
+                .opacity(viewModel.isHovering ? 1.0 : 0.0)
+                .animation(.linear(duration: 0.1))
             }
+
             Text(viewModel.title)
                 .lineLimit(1)
                 .foregroundColor(.primary)
@@ -40,6 +50,7 @@ struct CarouselRowItem: View {
         .background(
             Color(NSColor.alternatingContentBackgroundColors[1])
                 .opacity(viewModel.isHovering ? 1.0 : 0.3)
+                .animation(.linear(duration: 0.15))
         )
         .onHover { isHovered in
             viewModel.isHovering = isHovered

diff --git a/Spottie/Views/Components/GreenPlayButton.swift b/Spottie/Views/Components/GreenPlayButton.swift
@@ -16,14 +16,15 @@ struct GreenPlayButton: View {
         Button(action: onPress) {
             Image(systemName: "play.circle.fill")
                 .resizable()
-                .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/)
                 .frame(width: 32, height: 32)
                 .foregroundColor(.green)
+                .background(Color.white)
         }
         .buttonStyle(BorderlessButtonStyle())
         .onHover { hovering in
             isHovering = hovering
         }
+        .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/)
         .scaleEffect(isHovering ? 1.1 : 1.0)
         .animation(.linear(duration: 0.05))
     }