diff --git a/Spottie.xcodeproj/project.pbxproj b/Spottie.xcodeproj/project.pbxproj index 5e5cfb5..71251b9 100644 --- a/Spottie.xcodeproj/project.pbxproj +++ b/Spottie.xcodeproj/project.pbxproj @@ -71,6 +71,7 @@ 475EE242267C9306007BEBDC /* ShortcutGrid.swift in Sources */ = {isa = PBXBuildFile; fileRef = 475EE241267C9306007BEBDC /* ShortcutGrid.swift */; }; 475EE244267D6659007BEBDC /* ShortcutItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 475EE243267D6659007BEBDC /* ShortcutItem.swift */; }; 475EE248267D7784007BEBDC /* SearchField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 475EE247267D7784007BEBDC /* SearchField.swift */; }; + 475EE24A267DA451007BEBDC /* GreenPlayButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 475EE249267DA451007BEBDC /* GreenPlayButton.swift */; }; 47C56F602679A789003EA20A /* PlayerCommands.swift in Sources */ = {isa = PBXBuildFile; fileRef = 47C56F5F2679A789003EA20A /* PlayerCommands.swift */; }; /* End PBXBuildFile section */ @@ -141,6 +142,7 @@ 475EE241267C9306007BEBDC /* ShortcutGrid.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShortcutGrid.swift; sourceTree = ""; }; 475EE243267D6659007BEBDC /* ShortcutItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShortcutItem.swift; sourceTree = ""; }; 475EE247267D7784007BEBDC /* SearchField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SearchField.swift; sourceTree = ""; }; + 475EE249267DA451007BEBDC /* GreenPlayButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GreenPlayButton.swift; sourceTree = ""; }; 47C56F5F2679A789003EA20A /* PlayerCommands.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PlayerCommands.swift; sourceTree = ""; }; /* End PBXFileReference section */ @@ -321,6 +323,7 @@ 475EE241267C9306007BEBDC /* ShortcutGrid.swift */, 475EE243267D6659007BEBDC /* ShortcutItem.swift */, 475EE247267D7784007BEBDC /* SearchField.swift */, + 475EE249267DA451007BEBDC /* GreenPlayButton.swift */, ); path = Components; sourceTree = ""; @@ -448,6 +451,7 @@ 4730619F26592046001E3A1F /* InactiveSessionEvent.swift in Sources */, 4730614E265656ED001E3A1F /* SpottieApp.swift in Sources */, 4730617726588C51001E3A1F /* PlayerViewModel.swift in Sources */, + 475EE24A267DA451007BEBDC /* GreenPlayButton.swift in Sources */, 470201B3265B55F30030ECA9 /* WebAPISimplifiedArtistObject.swift in Sources */, 470201B7265B56860030ECA9 /* WebAPIArtistObject.swift in Sources */, 473061A6265B4A10001E3A1F /* WebAPITrackObject.swift in Sources */, diff --git a/Spottie/Views/Components/GreenPlayButton.swift b/Spottie/Views/Components/GreenPlayButton.swift new file mode 100644 index 0000000..5c1e0aa --- /dev/null +++ b/Spottie/Views/Components/GreenPlayButton.swift @@ -0,0 +1,38 @@ +// +// GreenPlayButton.swift +// Spottie +// +// Created by Lee Jun Kit on 19/6/21. +// + +import SwiftUI + +struct GreenPlayButton: View { + var onPress: () -> Void + + @State private var isHovering = false + + var body: some 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) + } + .buttonStyle(BorderlessButtonStyle()) + .onHover { hovering in + isHovering = hovering + } + .scaleEffect(isHovering ? 1.1 : 1.0) + .animation(.linear(duration: 0.05)) + } +} + +struct GreenPlayButton_Previews: PreviewProvider { + static var previews: some View { + GreenPlayButton { + + } + } +} diff --git a/Spottie/Views/Components/ShortcutGrid.swift b/Spottie/Views/Components/ShortcutGrid.swift index 29b0223..9625605 100644 --- a/Spottie/Views/Components/ShortcutGrid.swift +++ b/Spottie/Views/Components/ShortcutGrid.swift @@ -22,11 +22,11 @@ struct ShortcutGrid: View { ForEach(items) { item in ShortcutItem( itemHeight: 80, - viewModel: ShortcutItem.ViewModel(item) + viewModel: ShortcutItem.ViewModel(item), + onPlayButtonPressed: { + onItemPressed(item.id) + } ) - .onTapGesture { - onItemPressed(item.id) - } .frame(height: 80) } } diff --git a/Spottie/Views/Components/ShortcutItem.swift b/Spottie/Views/Components/ShortcutItem.swift index 9edc163..2015ebe 100644 --- a/Spottie/Views/Components/ShortcutItem.swift +++ b/Spottie/Views/Components/ShortcutItem.swift @@ -11,6 +11,7 @@ import SDWebImageSwiftUI struct ShortcutItem: View { var itemHeight: CGFloat var viewModel: ViewModel + var onPlayButtonPressed: () -> Void @State private var isHovering = false @@ -23,10 +24,17 @@ struct ShortcutItem: View { Text(viewModel.title).bold() .padding(.leading) Spacer() + GreenPlayButton( + onPress: onPlayButtonPressed + ) + .padding(.trailing) + .opacity(isHovering ? 1.0 : 0.0) + .animation(.linear(duration: 0.1)) } .background( Color(NSColor.alternatingContentBackgroundColors[1]) .opacity(isHovering ? 1.0 : 0.3) + .animation(.linear(duration: 0.1)) ) .onHover { hovering in isHovering = hovering