mirror of
https://github.com/vector-im/element-ios.git
synced 2024-09-28 23:32:41 +00:00
Replace the player timeline
This commit is contained in:
parent
34159cb63a
commit
4e60ddee39
11 changed files with 173 additions and 13 deletions
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "voice_broadcast_slider_max_track.svg",
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="184" height="1" viewBox="0 0 184 1" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="184" height="1" rx="0.5" fill="#C1C6CD"/>
|
||||
</svg>
|
After Width: | Height: | Size: 158 B |
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "voice_broadcast_slider_min_track.svg",
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="180" height="1" viewBox="0 0 180 1" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="180" height="1" rx="0.5" fill="#737D8C"/>
|
||||
</svg>
|
After Width: | Height: | Size: 158 B |
12
Riot/Assets/Images.xcassets/VoiceBroadcast/voice_broadcast_slider_thumb.imageset/Contents.json
vendored
Normal file
12
Riot/Assets/Images.xcassets/VoiceBroadcast/voice_broadcast_slider_thumb.imageset/Contents.json
vendored
Normal file
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "voice_broadcast_slider_thumb.svg",
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="8" cy="8" r="8" fill="#737D8C"/>
|
||||
</svg>
|
After Width: | Height: | Size: 148 B |
|
@ -346,6 +346,9 @@ internal class Asset: NSObject {
|
|||
internal static let voiceBroadcastPlay = ImageAsset(name: "voice_broadcast_play")
|
||||
internal static let voiceBroadcastRecord = ImageAsset(name: "voice_broadcast_record")
|
||||
internal static let voiceBroadcastRecordPause = ImageAsset(name: "voice_broadcast_record_pause")
|
||||
internal static let voiceBroadcastSliderMaxTrack = ImageAsset(name: "voice_broadcast_slider_max_track")
|
||||
internal static let voiceBroadcastSliderMinTrack = ImageAsset(name: "voice_broadcast_slider_min_track")
|
||||
internal static let voiceBroadcastSliderThumb = ImageAsset(name: "voice_broadcast_slider_thumb")
|
||||
internal static let voiceBroadcastSpinner = ImageAsset(name: "voice_broadcast_spinner")
|
||||
internal static let voiceBroadcastStop = ImageAsset(name: "voice_broadcast_stop")
|
||||
internal static let voiceBroadcastTileLive = ImageAsset(name: "voice_broadcast_tile_live")
|
||||
|
|
|
@ -58,6 +58,21 @@ class VoiceBroadcastPlaybackViewModel: VoiceBroadcastPlaybackViewModelType, Voic
|
|||
|
||||
private static let defaultBackwardForwardValue: Float = 30000.0 // 30sec in ms
|
||||
|
||||
private var fullDateFormatter: DateComponentsFormatter {
|
||||
let formatter = DateComponentsFormatter()
|
||||
formatter.unitsStyle = .positional
|
||||
formatter.allowedUnits = [.hour, .minute, .second]
|
||||
return formatter
|
||||
}
|
||||
|
||||
private var shortDateFormatter: DateComponentsFormatter {
|
||||
let formatter = DateComponentsFormatter()
|
||||
formatter.unitsStyle = .positional
|
||||
formatter.zeroFormattingBehavior = .pad
|
||||
formatter.allowedUnits = [.minute, .second]
|
||||
return formatter
|
||||
}
|
||||
|
||||
// MARK: Public
|
||||
|
||||
// MARK: - Setup
|
||||
|
@ -330,12 +345,16 @@ class VoiceBroadcastPlaybackViewModel: VoiceBroadcastPlaybackViewModelType, Voic
|
|||
|
||||
private func updateDuration() {
|
||||
let duration = voiceBroadcastAggregator.voiceBroadcast.duration
|
||||
let time = TimeInterval(duration / 1000)
|
||||
let formatter = DateComponentsFormatter()
|
||||
formatter.unitsStyle = .abbreviated
|
||||
|
||||
state.playingState.duration = Float(duration)
|
||||
state.playingState.durationLabel = formatter.string(from: time)
|
||||
updateUI()
|
||||
}
|
||||
|
||||
private func dateFormatter(for time: TimeInterval) -> DateComponentsFormatter {
|
||||
if time >= 3600 {
|
||||
return self.fullDateFormatter
|
||||
} else {
|
||||
return self.shortDateFormatter
|
||||
}
|
||||
}
|
||||
|
||||
private func didSliderChanged(_ didChange: Bool) {
|
||||
|
@ -368,6 +387,21 @@ class VoiceBroadcastPlaybackViewModel: VoiceBroadcastPlaybackViewModelType, Voic
|
|||
}
|
||||
|
||||
private func updateUI() {
|
||||
let time = TimeInterval(state.playingState.duration / 1000)
|
||||
let formatter = dateFormatter(for: time)
|
||||
|
||||
let currentProgress = TimeInterval(state.bindings.progress / 1000)
|
||||
state.playingState.elapsedTimeLabel = formatter.string(from: currentProgress)
|
||||
if let remainingTimeString = formatter.string(from: time-currentProgress) {
|
||||
if time-currentProgress < 1.0 {
|
||||
state.playingState.remainingTimeLabel = remainingTimeString
|
||||
} else {
|
||||
state.playingState.remainingTimeLabel = "-" + remainingTimeString
|
||||
}
|
||||
} else {
|
||||
state.playingState.remainingTimeLabel = ""
|
||||
}
|
||||
|
||||
state.playingState.canMoveBackward = state.bindings.progress > 0
|
||||
state.playingState.canMoveForward = state.bindings.progress < state.playingState.duration
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
|
@ -40,7 +40,8 @@ struct VoiceBroadcastPlaybackDetails {
|
|||
|
||||
struct VoiceBroadcastPlayingState {
|
||||
var duration: Float
|
||||
var durationLabel: String?
|
||||
var elapsedTimeLabel: String?
|
||||
var remainingTimeLabel: String?
|
||||
var isLive: Bool
|
||||
var canMoveForward: Bool
|
||||
var canMoveBackward: Bool
|
||||
|
|
Loading…
Reference in a new issue