#4096 - Voice message playback view theme support.

Riot/Assets/Images.xcassets/Room/VoiceMessages/voice_message_pause_button_dark.imageset/Contents.json

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

Riot/Assets/Images.xcassets/Room/VoiceMessages/voice_message_pause_button_light.imageset/Contents.json

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

Riot/Assets/Images.xcassets/Room/VoiceMessages/voice_message_pause_button.imageset/Contents.json → Riot/Assets/Images.xcassets/Room/VoiceMessages/voice_message_play_button_dark.imageset/Contents.json

@@ -1,17 +1,17 @@
 {
   "images" : [
     {
-      "filename" : "voice_message_pause_button.png",
+      "filename" : "voice_message_play_button_dark.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "voice_message_pause_button@2x.png",
+      "filename" : "voice_message_play_button_dark@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "voice_message_pause_button@3x.png",
+      "filename" : "voice_message_play_button_dark@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

Riot/Assets/Images.xcassets/Room/VoiceMessages/voice_message_play_button.imageset/Contents.json → Riot/Assets/Images.xcassets/Room/VoiceMessages/voice_message_play_button_light.imageset/Contents.json

@@ -1,17 +1,16 @@
 {
   "images" : [
     {
-      "filename" : "voice_message_play_button.png",
+      "filename" : "voice_message_play_button_light.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "voice_message_play_button@2x.png",
+      "filename" : "voice_message_play_button_light@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "3x"
     }

Riot/Generated/Images.swift

@@ -131,8 +131,10 @@ internal enum Asset {
     internal static let voiceCallHangonIcon = ImageAsset(name: "voice_call_hangon_icon")
     internal static let voiceCallHangupIcon = ImageAsset(name: "voice_call_hangup_icon")
     internal static let voiceMessageCancelGradient = ImageAsset(name: "voice_message_cancel_gradient")
-    internal static let voiceMessagePauseButton = ImageAsset(name: "voice_message_pause_button")
-    internal static let voiceMessagePlayButton = ImageAsset(name: "voice_message_play_button")
+    internal static let voiceMessagePauseButtonDark = ImageAsset(name: "voice_message_pause_button_dark")
+    internal static let voiceMessagePauseButtonLight = ImageAsset(name: "voice_message_pause_button_light")
+    internal static let voiceMessagePlayButtonDark = ImageAsset(name: "voice_message_play_button_dark")
+    internal static let voiceMessagePlayButtonLight = ImageAsset(name: "voice_message_play_button_light")
     internal static let voiceMessageRecordButtonDefault = ImageAsset(name: "voice_message_record_button_default")
     internal static let voiceMessageRecordButtonRecording = ImageAsset(name: "voice_message_record_button_recording")
     internal static let voiceMessageRecordIcon = ImageAsset(name: "voice_message_record_icon")

Riot/Modules/Room/VoiceMessages/VoiceMessagePlaybackView.swift

@@ -82,6 +82,8 @@ class VoiceMessagePlaybackView: UIView, VoiceMessageAudioPlayerDelegate {
 
         super.init(coder: coder)
 
+        NotificationCenter.default.addObserver(self, selector: #selector(handleThemeDidChange), name: .themeServiceDidChangeTheme, object: nil)
+
         audioPlayer.delegate = self
 
         displayLink = CADisplayLink(target: self, selector: #selector(handleDisplayLinkTick))
@@ -124,7 +126,20 @@ class VoiceMessagePlaybackView: UIView, VoiceMessageAudioPlayerDelegate {
 
     private func updateUI() {
         playButton.isEnabled = (state != .error)
-        playButton.setImage((state == .playing ? Asset.Images.voiceMessagePauseButton.image : Asset.Images.voiceMessagePlayButton.image), for: .normal)
+
+        if ThemeService.shared().isCurrentThemeDark() {
+            playButton.setImage((state == .playing ? Asset.Images.voiceMessagePauseButtonDark.image : Asset.Images.voiceMessagePlayButtonDark.image), for: .normal)
+            backgroundView.backgroundColor = UIColor(rgb: 0x394049)
+            waveformView.primarylineColor =  ThemeService.shared().theme.colors.quarterlyContent
+            waveformView.secondaryLineColor = ThemeService.shared().theme.colors.secondaryContent
+            elapsedTimeLabel.textColor = UIColor(rgb: 0x8E99A4)
+        } else {
+            playButton.setImage((state == .playing ? Asset.Images.voiceMessagePauseButtonLight.image : Asset.Images.voiceMessagePlayButtonLight.image), for: .normal)
+            backgroundView.backgroundColor = UIColor(rgb: 0xE3E8F0)
+            waveformView.primarylineColor = ThemeService.shared().theme.colors.quarterlyContent
+            waveformView.secondaryLineColor = ThemeService.shared().theme.colors.secondaryContent
+            elapsedTimeLabel.textColor = UIColor(rgb: 0x737D8C)
+        }
 
         switch state {
         case .stopped:
@@ -212,4 +227,8 @@ class VoiceMessagePlaybackView: UIView, VoiceMessageAudioPlayerDelegate {
             }
         })
     }
+
+    @objc private func handleThemeDidChange() {
+        updateUI()
+    }
 }

Riot/Modules/Room/VoiceMessages/VoiceMessagePlaybackView.xib

@@ -32,7 +32,7 @@
                 </label>
                 <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="GL1-b8-dZK">
                     <rect key="frame" x="8" y="6" width="32" height="32"/>
-                    <state key="normal" image="voice_message_play_button"/>
+                    <state key="normal" image="voice_message_play_button_light"/>
                     <connections>
                         <action selector="onPlayButtonTap" destination="cGR-49-HWB" eventType="touchUpInside" id="B5j-st-pUp"/>
                     </connections>
@@ -74,6 +74,6 @@
         </view>
     </objects>
     <resources>
-        <image name="voice_message_play_button" width="32" height="32"/>
+        <image name="voice_message_play_button_light" width="32" height="32"/>
     </resources>
 </document>

Riot/Modules/Room/VoiceMessages/VoiceMessageWaveformView.swift

@@ -19,13 +19,14 @@ import UIKit
 class VoiceMessageWaveformView: UIView {
 
     private let lineWidth: CGFloat = 2.0
-    private let primarylineColor = UIColor.lightGray
-    private let secondaryLineColor = UIColor.darkGray
     private let linePadding: CGFloat = 2.0
 
     private var samples: [Float] = []
     private var barViews: [CALayer] = []
 
+    var primarylineColor = UIColor.lightGray
+    var secondaryLineColor = UIColor.darkGray
+
     var progress = 0.0 {
         didSet {
             updateBarViews()