Add explicit pause/play button

Signal/Images.xcassets/Loki V2/Pause.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "Pause.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Signal/Images.xcassets/Loki V2/Pause.imageset/Pause.pdf

@@ -0,0 +1,85 @@
+%PDF-1.7
+
+1 0 obj
+  << >>
+endobj
+
+2 0 obj
+  << /Length 3 0 R >>
+stream
+/DeviceRGB CS
+/DeviceRGB cs
+q
+1.000000 0.000000 -0.000000 1.000000 0.000000 0.000000 cm
+0.000000 0.000000 0.000000 scn
+5.142858 0.000000 m
+1.714286 0.000000 l
+0.767857 0.000000 0.000000 0.767857 0.000000 1.714285 c
+0.000000 14.285714 l
+0.000000 15.232142 0.767857 16.000000 1.714286 16.000000 c
+5.142858 16.000000 l
+6.089286 16.000000 6.857143 15.232142 6.857143 14.285714 c
+6.857143 1.714285 l
+6.857143 0.767857 6.089286 0.000000 5.142858 0.000000 c
+h
+16.000000 1.714285 m
+16.000000 14.285714 l
+16.000000 15.232142 15.232143 16.000000 14.285715 16.000000 c
+10.857143 16.000000 l
+9.910715 16.000000 9.142858 15.232142 9.142858 14.285714 c
+9.142858 1.714285 l
+9.142858 0.767857 9.910715 0.000000 10.857143 0.000000 c
+14.285715 0.000000 l
+15.232143 0.000000 16.000000 0.767857 16.000000 1.714285 c
+h
+f
+n
+Q
+
+endstream
+endobj
+
+3 0 obj
+  804
+endobj
+
+4 0 obj
+  << /Annots []
+     /Type /Page
+     /MediaBox [ 0.000000 0.000000 16.000000 16.000000 ]
+     /Resources 1 0 R
+     /Contents 2 0 R
+     /Parent 5 0 R
+  >>
+endobj
+
+5 0 obj
+  << /Kids [ 4 0 R ]
+     /Count 1
+     /Type /Pages
+  >>
+endobj
+
+6 0 obj
+  << /Type /Catalog
+     /Pages 5 0 R
+  >>
+endobj
+
+xref
+0 7
+0000000000 65535 f
+0000000010 00000 n
+0000000034 00000 n
+0000000894 00000 n
+0000000916 00000 n
+0000001089 00000 n
+0000001163 00000 n
+trailer
+<< /ID [ (some) (id) ]
+   /Root 6 0 R
+   /Size 7
+>>
+startxref
+1222
+%%EOF

Signal/src/Loki/Components/VoiceMessageView.swift

@@ -15,8 +15,11 @@ final class VoiceMessageView : UIView {
     private var progress: CGFloat = 0
     @objc var delegate: VoiceMessageViewDelegate?
     @objc var duration: Int = 0 { didSet { updateDurationLabel() } }
+    @objc var isPlaying = false { didSet { updateToggleImageView() } }
 
     // MARK: Components
+    private lazy var toggleImageView = UIImageView(image: #imageLiteral(resourceName: "Play"))
+
     private lazy var durationLabel: UILabel = {
         let result = UILabel()
         result.textColor = Colors.text
@@ -39,8 +42,10 @@ final class VoiceMessageView : UIView {
     // MARK: Settings
     private let vMargin: CGFloat = 0
     private let sampleSpacing: CGFloat = 1
+    private let toggleContainerSize: CGFloat = 32
+    private let leadingInset: CGFloat = 0
 
-    @objc public static let contentHeight: CGFloat = 32
+    @objc public static let contentHeight: CGFloat = 40
 
     // MARK: Initialization
     @objc(initWithVoiceMessage:isOutgoing:)
@@ -93,6 +98,23 @@ final class VoiceMessageView : UIView {
         set(.height, to: VoiceMessageView.contentHeight)
         layer.insertSublayer(backgroundShapeLayer, at: 0)
         layer.insertSublayer(foregroundShapeLayer, at: 1)
+        let toggleContainer = UIView()
+        toggleContainer.clipsToBounds = false
+        toggleContainer.addSubview(toggleImageView)
+        toggleImageView.set(.width, to: 12)
+        toggleImageView.set(.height, to: 12)
+        toggleImageView.center(in: toggleContainer)
+        toggleContainer.set(.width, to: toggleContainerSize)
+        toggleContainer.set(.height, to: toggleContainerSize)
+        toggleContainer.layer.cornerRadius = toggleContainerSize / 2
+        toggleContainer.backgroundColor = UIColor.white
+        let glowRadius: CGFloat = isLightMode ? 1 : 2
+        let glowColor = isLightMode ? UIColor.black.withAlphaComponent(0.4) : UIColor.black
+        let glowConfiguration = UIView.CircularGlowConfiguration(size: toggleContainerSize, color: glowColor, radius: glowRadius)
+        toggleContainer.setCircularGlow(with: glowConfiguration)
+        addSubview(toggleContainer)
+        toggleContainer.center(.vertical, in: self)
+        toggleContainer.pin(.leading, to: .leading, of: self, withInset: leadingInset)
         addSubview(durationLabel)
         durationLabel.center(.vertical, in: self)
         durationLabel.pin(.trailing, to: .trailing, of: self)
@@ -111,16 +133,17 @@ final class VoiceMessageView : UIView {
     }
 
     private func updateShapeLayers() {
+        clipsToBounds = false // Bit of a hack to do this here, but the containing stack view turns this off all the time
         guard !volumeSamples.isEmpty else { return }
         let sMin = CGFloat(volumeSamples.min()!)
         let sMax = CGFloat(volumeSamples.max()!)
-        let w = width() - durationLabel.width() - Values.smallSpacing
+        let w = width() - leadingInset - toggleContainerSize - durationLabel.width() - 2 * Values.smallSpacing
         let h = height() - 2 * vMargin
         let sW = (w - sampleSpacing * CGFloat(volumeSamples.count - 1)) / CGFloat(volumeSamples.count)
         let backgroundPath = UIBezierPath()
         let foregroundPath = UIBezierPath()
         for (i, value) in volumeSamples.enumerated() {
-            let x = CGFloat(i) * (sW + sampleSpacing)
+            let x = leadingInset + toggleContainerSize + Values.smallSpacing + CGFloat(i) * (sW + sampleSpacing)
             let fraction = (CGFloat(value) - sMin) / (sMax - sMin)
             let sH = max(8, h * fraction)
             let y = vMargin + (h - sH) / 2
@@ -138,4 +161,8 @@ final class VoiceMessageView : UIView {
         durationLabel.text = OWSFormat.formatDurationSeconds(duration)
         updateShapeLayers()
     }
+
+    private func updateToggleImageView() {
+        toggleImageView.image = isPlaying ? #imageLiteral(resourceName: "Pause") : #imageLiteral(resourceName: "Play")
+    }
 }

Signal/src/Loki/Utilities/UIView+Glow.swift

@@ -10,7 +10,7 @@ extension UIView {
         let opacity: Float
         let radius: CGFloat
 
-        init(size: CGFloat, color: UIColor, isAnimated: Bool, animationDuration: TimeInterval = 0.25, offset: CGSize = CGSize(width: 0, height: 0.8), opacity: Float = isLightMode ? 0.4 : 1, radius: CGFloat) {
+        init(size: CGFloat, color: UIColor, isAnimated: Bool = false, animationDuration: TimeInterval = 0.25, offset: CGSize = CGSize(width: 0, height: 0.8), opacity: Float = isLightMode ? 0.4 : 1, radius: CGFloat) {
             self.size = size
             self.color = color
             self.isAnimated = isAnimated

Signal/src/ViewControllers/ConversationView/ConversationViewItem.m

@@ -475,7 +475,8 @@ NSString *NSStringForOWSMessageCellType(OWSMessageCellType cellType)
 {
     _audioPlaybackState = audioPlaybackState;
 
-    // No need to update the voice message view here
+    BOOL isPlaying = (audioPlaybackState == AudioPlaybackState_Playing);
+    [self.lastAudioMessageView setIsPlaying:isPlaying];
 }
 
 - (void)setAudioProgress:(CGFloat)progress duration:(CGFloat)duration