Replace the player timeline

2026-04-27 19:56:57 +02:00 · 2022-12-14 10:34:43 +01:00
parent b6e0cdaa6f
commit ad0ecfb843
11 changed files with 173 additions and 13 deletions
@@ -152,15 +152,23 @@ struct VoiceBroadcastPlaybackView: View {
                }
            }
            
-            Slider(value: $viewModel.progress, in: 0...viewModel.viewState.playingState.duration) {
-                Text("Slider")
-            } minimumValueLabel: {
-                Text("")
-            } maximumValueLabel: {
-                Text(viewModel.viewState.playingState.durationLabel ?? "").font(.body)
-            } onEditingChanged: { didChange in
+            VoiceBroadcastSlider(value: $viewModel.progress,
+                       minValue: 0.0,
+                       maxValue: viewModel.viewState.playingState.duration) { didChange in
                viewModel.send(viewAction: .sliderChange(didChange: didChange))
            }
+            
+            HStack {
+                Text(viewModel.viewState.playingState.elapsedTimeLabel ?? "")
+                    .foregroundColor(theme.colors.secondaryContent)
+                    .font(theme.fonts.caption1)
+                    .padding(EdgeInsets(top: -4.0, leading: 4.0, bottom: 0.0, trailing: 0.0))
+                Spacer()
+                Text(viewModel.viewState.playingState.remainingTimeLabel ?? "")
+                    .foregroundColor(theme.colors.secondaryContent)
+                    .font(theme.fonts.caption1)
+                    .padding(EdgeInsets(top: -4.0, leading: 0.0, bottom: 0.0, trailing: 4.0))
+            }
        }
        .padding([.horizontal, .top], 2.0)
        .padding([.bottom])
@@ -0,0 +1,69 @@
+// 
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+/// Customized UISlider for SwiftUI.
+
+struct VoiceBroadcastSlider: UIViewRepresentable {
+    @Binding var value: Float
+    
+    var minValue: Float = 0.0
+    var maxValue: Float = 1.0
+    var onEditingChanged : ((Bool) -> Void)?
+    
+    func makeUIView(context: Context) -> UISlider {
+        let slider = UISlider(frame: .zero)
+        slider.setThumbImage(Asset.Images.voiceBroadcastSliderThumb.image, for: .normal)
+        slider.setMinimumTrackImage(Asset.Images.voiceBroadcastSliderMinTrack.image, for: .normal)
+        slider.setMaximumTrackImage(Asset.Images.voiceBroadcastSliderMaxTrack.image, for: .normal)
+        slider.minimumValue = Float(minValue)
+        slider.maximumValue = Float(maxValue)
+        slider.value = Float(value)
+        slider.addTarget(context.coordinator, action: #selector(Coordinator.valueChanged(_:)), for: .valueChanged)
+        slider.addTarget(context.coordinator, action: #selector(Coordinator.sliderEditingChanged(_:)), for: .touchUpInside)
+        slider.addTarget(context.coordinator, action: #selector(Coordinator.sliderEditingChanged(_:)), for: .touchUpOutside)
+        slider.addTarget(context.coordinator, action: #selector(Coordinator.sliderEditingChanged(_:)), for: .touchDown)
+
+        return slider
+    }
+    
+    func updateUIView(_ uiView: UISlider, context: Context) {
+        uiView.value = Float(value)
+    }
+    
+    func makeCoordinator() -> VoiceBroadcastSlider.Coordinator {
+        Coordinator(parent: self, value: $value)
+    }
+    
+    class Coordinator: NSObject {
+        var parent: VoiceBroadcastSlider
+        var value: Binding<Float>
+        
+        init(parent: VoiceBroadcastSlider, value: Binding<Float>) {
+            self.value = value
+            self.parent = parent
+        }
+        
+        @objc func valueChanged(_ sender: UISlider) {
+            self.value.wrappedValue = sender.value
+        }
+        
+        @objc func sliderEditingChanged(_ sender: UISlider) {
+            parent.onEditingChanged?(sender.isTracking)
+        }
+    }
+}