Improve playback control button affordance

SpotMenu.xcodeproj/project.pbxproj

@@ -7,6 +7,8 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		1601B34920793BBC0046B001 /* HoverButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 64A908091EB784E400566ED1 /* HoverButton.swift */; };
+		16A21F9D20798EE80096D7DA /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 2133242D1D79801E0060D48C /* Assets.xcassets */; };
 		2133242C1D79801E0060D48C /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2133242B1D79801E0060D48C /* AppDelegate.swift */; };
 		2133242E1D79801E0060D48C /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 2133242D1D79801E0060D48C /* Assets.xcassets */; };
 		2133243A1D79967B0060D48C /* PopOverVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = 213324381D79967B0060D48C /* PopOverVC.swift */; };
@@ -758,6 +760,7 @@
 			files = (
 				643746671F76B06900B16214 /* PopOver.xib in Resources */,
 				64185C1A1F1B8DC400CA23A0 /* InfoPlist.strings in Resources */,
+				16A21F9D20798EE80096D7DA /* Assets.xcassets in Resources */,
 				64185C271F1B98C600CA23A0 /* Assets.xcassets in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -864,6 +867,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				1601B34920793BBC0046B001 /* HoverButton.swift in Sources */,
 				64BD97A61FDD713800209B2B /* UserPreferences.swift in Sources */,
 				E2D35CD11F60A08800EB5D67 /* PopOverVC.swift in Sources */,
 				E2D35CCF1F60882600EB5D67 /* NSViewExtension.swift in Sources */,

SpotMenu/Assets.xcassets/Controls/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

SpotMenu/Assets.xcassets/Controls/PauseButtonImage.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "pause-1.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "pause.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

SpotMenu/Assets.xcassets/Controls/PlayButtonImage.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "play-1.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "play.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

SpotMenu/Assets.xcassets/Controls/PlayNextButtonImage.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "play-next-1.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "play-next.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

SpotMenu/Assets.xcassets/Controls/PlayPreviousButtonImage.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "play-previous-1.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "play-previous.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

SpotMenu/PopOver/PopOver.xib

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="13771" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="14109" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
     <dependencies>
         <deployment identifier="macosx"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="13771"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="14109"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -13,6 +13,8 @@
                 <outlet property="artworkImageView" destination="wMa-mO-ZXq" id="J3B-JE-v1D"/>
                 <outlet property="leftTime" destination="a3a-vx-FzU" id="mAS-xW-gGh"/>
                 <outlet property="musicPlayerButton" destination="Sfg-o1-GVi" id="P2f-5V-oen"/>
+                <outlet property="playNextButton" destination="pgo-pN-r7b" id="yRq-5z-aLo"/>
+                <outlet property="playPreviousButton" destination="MYl-ZD-MG0" id="LFP-Ty-uO0"/>
                 <outlet property="playerStateButton" destination="8Ah-DM-iSN" id="ofG-4I-1Kw"/>
                 <outlet property="positionSlider" destination="tik-b2-9He" id="qyI-6l-HxF"/>
                 <outlet property="rightTime" destination="0C8-6B-MD2" id="Ikx-HM-ev3"/>
@@ -35,17 +37,6 @@
                     <rect key="frame" x="0.0" y="0.0" width="300" height="300"/>
                     <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                     <subviews>
-                        <button focusRingType="none" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="8Ah-DM-iSN">
-                            <rect key="frame" x="50" y="60" width="200" height="200"/>
-                            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
-                            <buttonCell key="cell" type="square" title="▶︎" bezelStyle="shadowlessSquare" imagePosition="overlaps" alignment="center" focusRingType="none" inset="2" id="4BI-ev-3Vo">
-                                <behavior key="behavior" lightByContents="YES"/>
-                                <font key="font" metaFont="system" size="70"/>
-                            </buttonCell>
-                            <connections>
-                                <action selector="togglePlay:" target="-2" id="KUj-tT-Jqv"/>
-                            </connections>
-                        </button>
                         <textField wantsLayer="YES" horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" allowsCharacterPickerTouchBarItem="YES" translatesAutoresizingMaskIntoConstraints="NO" id="91T-mi-mb9">
                             <rect key="frame" x="46" y="233" width="206" height="17"/>
                             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
@@ -55,28 +46,6 @@
                                 <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                             </textFieldCell>
                         </textField>
-                        <button focusRingType="none" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="MYl-ZD-MG0">
-                            <rect key="frame" x="11" y="60" width="40" height="200"/>
-                            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
-                            <buttonCell key="cell" type="square" title="&lt;" bezelStyle="shadowlessSquare" alignment="center" focusRingType="none" inset="2" id="eyZ-Np-WLr">
-                                <behavior key="behavior" lightByContents="YES"/>
-                                <font key="font" size="20" name="AlNile"/>
-                            </buttonCell>
-                            <connections>
-                                <action selector="goLeft:" target="-2" id="Nm1-Pi-Fbf"/>
-                            </connections>
-                        </button>
-                        <button focusRingType="none" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="pgo-pN-r7b">
-                            <rect key="frame" x="252" y="60" width="40" height="200"/>
-                            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
-                            <buttonCell key="cell" type="square" title="&gt;" bezelStyle="shadowlessSquare" alignment="center" focusRingType="none" inset="2" id="FxM-QC-fqk">
-                                <behavior key="behavior" lightByContents="YES"/>
-                                <font key="font" size="20" name="AlNile"/>
-                            </buttonCell>
-                            <connections>
-                                <action selector="goRight:" target="-2" id="7Pz-U6-kvG"/>
-                            </connections>
-                        </button>
                         <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" allowsCharacterPickerTouchBarItem="YES" translatesAutoresizingMaskIntoConstraints="NO" id="UYR-3X-1ze">
                             <rect key="frame" x="49" y="233" width="203" height="17"/>
                             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
@@ -139,6 +108,39 @@
                                 <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                             </textFieldCell>
                         </textField>
+                        <button focusRingType="none" verticalHuggingPriority="750" fixedFrame="YES" alphaValue="0.69999999999999996" translatesAutoresizingMaskIntoConstraints="NO" id="8Ah-DM-iSN" customClass="HoverButton" customModule="SpotMenu" customModuleProvider="target">
+                            <rect key="frame" x="122" y="132" width="56" height="51"/>
+                            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                            <buttonCell key="cell" type="square" bezelStyle="shadowlessSquare" image="PlayButtonImage" imagePosition="overlaps" alignment="center" focusRingType="none" transparent="YES" imageScaling="proportionallyUpOrDown" inset="2" id="4BI-ev-3Vo">
+                                <behavior key="behavior" pushIn="YES" lightByBackground="YES" lightByGray="YES"/>
+                                <font key="font" metaFont="system" size="70"/>
+                            </buttonCell>
+                            <connections>
+                                <action selector="togglePlay:" target="-2" id="pw8-o6-dLc"/>
+                            </connections>
+                        </button>
+                        <button focusRingType="none" fixedFrame="YES" alphaValue="0.69999999999999996" translatesAutoresizingMaskIntoConstraints="NO" id="MYl-ZD-MG0" userLabel="PlayPreviousButton" customClass="HoverButton" customModule="SpotMenu" customModuleProvider="target">
+                            <rect key="frame" x="11" y="136" width="50" height="51"/>
+                            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                            <buttonCell key="cell" type="square" bezelStyle="shadowlessSquare" image="PlayPreviousButtonImage" imagePosition="overlaps" alignment="center" focusRingType="none" transparent="YES" imageScaling="proportionallyUpOrDown" inset="2" id="eyZ-Np-WLr">
+                                <behavior key="behavior" lightByContents="YES"/>
+                                <font key="font" size="20" name="AlNile"/>
+                            </buttonCell>
+                            <connections>
+                                <action selector="goLeft:" target="-2" id="Nm1-Pi-Fbf"/>
+                            </connections>
+                        </button>
+                        <button focusRingType="none" fixedFrame="YES" alphaValue="0.69999999999999996" translatesAutoresizingMaskIntoConstraints="NO" id="pgo-pN-r7b" userLabel="PlayNextButton" customClass="HoverButton" customModule="SpotMenu" customModuleProvider="target">
+                            <rect key="frame" x="242" y="132" width="50" height="51"/>
+                            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                            <buttonCell key="cell" type="square" bezelStyle="shadowlessSquare" image="PlayNextButtonImage" imagePosition="overlaps" alignment="center" focusRingType="none" transparent="YES" imageScaling="proportionallyUpOrDown" inset="2" id="FxM-QC-fqk">
+                                <behavior key="behavior" pushIn="YES" lightByBackground="YES" lightByGray="YES"/>
+                                <font key="font" metaFont="system"/>
+                            </buttonCell>
+                            <connections>
+                                <action selector="goRight:" target="-2" id="0eQ-wZ-5hJ"/>
+                            </connections>
+                        </button>
                     </subviews>
                 </visualEffectView>
             </subviews>
@@ -154,6 +156,9 @@
     </objects>
     <resources>
         <image name="NSUserGuest" width="32" height="32"/>
+        <image name="PlayButtonImage" width="148.67027282714844" height="182.14053344726562"/>
+        <image name="PlayNextButtonImage" width="778.37835693359375" height="778.37835693359375"/>
+        <image name="PlayPreviousButtonImage" width="778.37835693359375" height="778.37835693359375"/>
         <image name="StatusBarButtonImage" width="32" height="32"/>
     </resources>
 </document>

SpotMenu/PopOver/PopOverVC.swift

@@ -23,7 +23,9 @@ final class PopOverViewController: NSViewController {
     @IBOutlet private var artistLabel: NSTextField!
     @IBOutlet private var aLabel: NSTextField!
     @IBOutlet private var titleLabel: NSTextField!
-    @IBOutlet private var playerStateButton: NSButton!
+    @IBOutlet private var playerStateButton: HoverButton!
+    @IBOutlet private var playNextButton: HoverButton!
+    @IBOutlet private var playPreviousButton: HoverButton!
     @IBOutlet private var artworkImageView: NSImageView!
     @IBOutlet private var leftTime: NSTextField!
     @IBOutlet private var rightTime: NSTextField!
@@ -63,6 +65,7 @@ final class PopOverViewController: NSViewController {
             self.position = position
         }
 
+        initButtonHovers()
         updatePlayerPosition()
         updateTime()
         updateMusicPlayerIcon(musicPlayerName: lastMusicPlayerName)
@@ -151,14 +154,14 @@ final class PopOverViewController: NSViewController {
         if let state = state {
             switch state {
             case .paused:
-                playerStateButton.title = "▶︎"
+                playerStateButton.image = NSImage(named: NSImage.Name(rawValue: "PlayButtonImage"))
             case .playing, .fastForwarding, .rewinding, .reposition:
-                playerStateButton.title = "❚❚"
+                playerStateButton.image = NSImage(named: NSImage.Name(rawValue: "PauseButtonImage"))
             default:
-                playerStateButton.title = "▶︎"
+                playerStateButton.image = NSImage(named: NSImage.Name(rawValue: "PlayButtonImage"))
             }
         } else {
-            playerStateButton.title = "▶︎"
+            playerStateButton.image = NSImage(named: NSImage.Name(rawValue: "PauseButtonImage"))
         }
     }
 
@@ -180,17 +183,46 @@ final class PopOverViewController: NSViewController {
             musicPlayerButton.image = spotMenuIcon
         }
     }
+
+    private func initButtonHovers() {
+        playNextButton.mouseEnteredFunc = { self.playNextButton.alphaValue = 1 }
+        playNextButton.mouseExitedFunc = { self.playNextButton.alphaValue = 0.7 }
+        playNextButton.sendAction(on: [.leftMouseDown, .leftMouseUp])
+
+        playPreviousButton.mouseEnteredFunc = { self.playPreviousButton.alphaValue = 1 }
+        playPreviousButton.mouseExitedFunc = { self.playPreviousButton.alphaValue = 0.7 }
+        playPreviousButton.sendAction(on: [.leftMouseDown, .leftMouseUp])
+
+        playerStateButton.mouseEnteredFunc = { self.playerStateButton.alphaValue = 1 }
+        playerStateButton.mouseExitedFunc = { self.playerStateButton.alphaValue = 0.7 }
+        playerStateButton.sendAction(on: [.leftMouseDown, .leftMouseUp])
+    }
+
 }
 
 // MARK: Actions
 
 private extension PopOverViewController {
 
     @IBAction func goLeft(_: NSButton) {
+        let event:NSEvent! = NSApp.currentEvent!
+        if (event.type == .leftMouseDown)
+        {
+            self.playPreviousButton.alphaValue = 0.8
+            return
+        }
+        self.playPreviousButton.alphaValue = 1
         musicPlayerManager.currentPlayer?.playPrevious()
     }
 
     @IBAction func goRight(_: NSButton) {
+        let event:NSEvent! = NSApp.currentEvent!
+        if (event.type == .leftMouseDown)
+        {
+            self.playNextButton.alphaValue = 0.8
+            return
+        }
+        self.playNextButton.alphaValue = 1
         musicPlayerManager.currentPlayer?.playNext()
     }
 
@@ -203,7 +235,15 @@ private extension PopOverViewController {
         musicPlayerManager.currentPlayer?.playerPosition = position
     }
 
-    @IBAction func togglePlay(_: AnyObject) {
+    @IBAction func togglePlay(_: NSButton) {
+        let event:NSEvent! = NSApp.currentEvent!
+        if (event.type == .leftMouseDown)
+        {
+            self.playerStateButton.alphaValue = 0.8
+            return
+        }
+        self.playerStateButton.alphaValue = 1
+
         if let state = self.musicPlayerManager.currentPlayer?.playbackState {
             switch state {
             case .playing, .fastForwarding, .rewinding, .reposition: