diff --git a/Spottie/Views/Components/CarouselRow.swift b/Spottie/Views/Components/CarouselRow.swift index f43af77..a5316fb 100644 --- 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 index c6cb5af..62ae2ae 100644 --- 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 index 5c1e0aa..c90bf2f 100644 --- 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)) }