add green play button to shortcut grid item

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

Hide file tree

Showing 4 changed files with 54 additions and 4 deletions.
diff --git 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 = "<group>"; };
 		475EE243267D6659007BEBDC /* ShortcutItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShortcutItem.swift; sourceTree = "<group>"; };
 		475EE247267D7784007BEBDC /* SearchField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SearchField.swift; sourceTree = "<group>"; };
+		475EE249267DA451007BEBDC /* GreenPlayButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GreenPlayButton.swift; sourceTree = "<group>"; };
 		47C56F5F2679A789003EA20A /* PlayerCommands.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PlayerCommands.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -321,6 +323,7 @@
 				475EE241267C9306007BEBDC /* ShortcutGrid.swift */,
 				475EE243267D6659007BEBDC /* ShortcutItem.swift */,
 				475EE247267D7784007BEBDC /* SearchField.swift */,
+				475EE249267DA451007BEBDC /* GreenPlayButton.swift */,
 			);
 			path = Components;
 			sourceTree = "<group>";
@@ -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
@@ -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
@@ -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
@@ -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