ProgressWaveformView with StripeConfig

[ziad-halabi9]

Following the example here, if I just add a StripeConfig, the view no longer shows up:

struct ProgressWaveformView: View {
    let audioURL: URL
    let progress: Double

    @State private var configuration: Waveform.Configuration = Waveform.Configuration(
        style: .striped(Waveform.Style.StripeConfig(color: .white, width: 2, spacing: 1, lineCap: .butt)),
        verticalScalingFactor: 0.5
    )

    var body: some View {
        GeometryReader { geometry in
            WaveformView(audioURL: audioURL, configuration: configuration) { shape in
                shape.fill(.white)
                shape.fill(.red).mask(alignment: .leading) {
                    Rectangle().frame(width: geometry.size.width * progress)
                }
            }
        }
    }
}

I see in another issue, it was proposed to draw 2 WaveformView as an alternative solution. However when I tried that, the 2 WaveformViews didn't line up perfectly. Plus, the above solution seems better.

Any solution for the problem above however?

Thanks in advance for the help and thanks for creating and maintaining this library, it's great!

[dmrschmidt]

Thanks for reporting this @ziad-halabi9.
At a glance, without having run the code myself yet, I can’t tell why the striped style would cause problems here. I’ll have to take a deeper look, which will take me a while as I’m traveling currently. I’ll have a look as soon as I get some time though.

Would you mind pasting the other solution (which I agree would be worse since it needs to calculate twice) though? You mentioned they don’t line up perfectly, which may point to a reason… They should always line up if correctly placed inside a ZStack I’d say.

[ziad-halabi9]

Thanks @dmrschmidt for getting back to me quickly and have safe travels!

The other solution was mentioned here. The code looks like this:

private struct ProgressWaveformView2: View {
    
    let trackUrl: URL
    let progress: Double
    
    @State private var configuration: Waveform.Configuration = Waveform.Configuration(
        style: .striped(Waveform.Style.StripeConfig(color: .white.withAlphaComponent(0.6), width: 2, spacing: 1, lineCap: .butt)),
        verticalScalingFactor: 1.0
    )
    
    @State private var progressConfiguration: Waveform.Configuration = Waveform.Configuration(
        style: .striped(Waveform.Style.StripeConfig(color: .red.withAlphaComponent(0.6), width: 2, spacing: 1, lineCap: .butt)),
        verticalScalingFactor: 1.0
    )
    
    var body: some View {
        
        ZStack(alignment: .leading) {
           
            WaveformView(audioURL: trackUrl, configuration: configuration)
            WaveformView(audioURL: trackUrl, configuration: progressConfiguration)
                .mask(alignment: .leading) {
                    GeometryReader { geometry in
                        Rectangle().frame(width: geometry.size.width * progress)
                    }
                }
        }.frame(height: 100)
    }
}

I tried different tricks like moving the GeometryReader out like mentioned in that post, or setting height or not. The results look like this:

Hope it's not a silly issue. However, I don't want to invest more in this solution as you said, the other is the better practice.

Let me know if you find anything. Thanks for looking into it!

[dmrschmidt]

Hmm… that looks very „suspicious“… I’ll try to find some time today / tomorrow or over the weekend. Would you mind sharing an image of the first solutions misalignment as well, so I have a reference when debugging to see whether I get the same result or a different one?

[ziad-halabi9]

In the initial solution, the problem is that the whole view disappears when striped is used. Hence why I didn't share a screenshot. So by just adding configuration: WaveformView(audioURL: audioURL, configuration: configuration) {...} vs WaveformView(audioURL: audioURL) {...}, the view no longer shows. Yet it works perfectly where no configuration is specified.