seekTo not working with slider

[MTPL0005-AbhishekDube]

Describe the Bug The seekTo function is not working with the slider because the duration is coming in as zero.

Steps To Reproduce I tried to replicate the example app and got the same error.

Code To Reproduce `const TrackProgress = () => { const {position, duration} = useProgress(200);

function format(seconds) { let hrs = Math.floor(seconds / 3600); let mins = Math.floor((seconds % 3600) / 60); let secs = Math.trunc(seconds % 60);

if (hrs > 0) {
  return `${hrs.toString().padStart(2, '0')}:${mins
    .toString()
    .padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
} else {
  return `${mins.toString().padStart(2, '0')}:${secs
    .toString()
    .padStart(2, '0')}`;
}

} return ( <View style={{ paddingHorizontal: horizontalScale(24), justifyContent: 'center', marginTop: horizontalScale(20), }}> <Slider value={position} minimumValue={0} maximumValue={duration} onSlidingComplete={TrackPlayer.seekTo} thumbTintColor="#ffffff" thumbStyle={styles.thumbStyle} minimumTrackTintColor={'#2EC4B6'} maximumTrackTintColor={'rgba(108, 122, 137,1)'} trackStyle={styles.trackStyle} allowTouchTrack /> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}> <Text style={{ fontFamily: 'Open Sans', fontSize: 14, fontWeight: '400', fontStyle: 'normal', color: '#164E5A', }}> {format(position)} <Text style={{ fontFamily: 'Open Sans', fontSize: 14, fontWeight: '400', fontStyle: 'normal', color: '#164E5A', }}> {format(duration)} ); };

export default TrackProgress;`

Replicable on Example App? Can you replicate this bug in the React Native Track Player Example App?

Environment Info: System: OS: macOS 14.1.1 CPU: (8) arm64 Apple M2 Memory: 122.81 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.6.0 - /opt/homebrew/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 9.8.1 - /opt/homebrew/bin/npm Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.12.1 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2023.3 AI-233.14808.21.2331.11709847 Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild Languages: Java: 20.0.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.14 => 0.71.14 react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found

react-native-track-player : 4.1.1

Both Real device & simulator

Android & iOS

[lovegaoshi]

last time i checked the example apps slider works fine? can u post a screenshot of the example app unmodified thay dhoes the slider is mot worlkng? cuz if it works the problem lies in your code or your media

[MTPL0005-AbhishekDube]

@lovegaoshi, the same code is working through the notification panel. I tried using value * duration, but I noticed that the duration comes as 0.

[lovegaoshi]

Buddy i really shouldnt have to walk u through debug 101

is the example app also showing useProgress 0 as it is? i dont think so bc useprogreess is used for the progress bar, but correct me if im wrong and this will be a serious bug report.

then u put ur media src in the example app. if it works, ur code is wrong. if not, ur media src is wrong. and if u dont post any of them nobody can help even if they r bored enough. also dont expect people to read ur codebase.

On Mon, Jun 10, 2024, 8:53 PM Dubey Abhishek Santoshkumar < @.***> wrote:

@lovegaoshi https://github.com/lovegaoshi, the same code is working through the notification panel. I tried using value * duration, but I noticed that the duration comes as 0.

— Reply to this email directly, view it on GitHub https://github.com/doublesymmetry/react-native-track-player/issues/2323#issuecomment-2159729454, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZMOVVQFZIVOPLIEUJH3L3DZGZYCZAVCNFSM6AAAAABJB7XZPSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJZG4ZDSNBVGQ . You are receiving this because you were mentioned.Message ID: @.*** com>

[MTPL0005-AbhishekDube]

@lovegaoshi, I made changes to my code, and after placing the Slider component inside a View, it started working properly. but I still don't know the reason why the duration was coming to 0 because it was provided by the useProgress() hook.

[MTPL0005-AbhishekDube]

@lovegaoshi, I don't understand the issue because it has started happening again.

[lovegaoshi]

u know without anymore info its brutal but sounds like ur react skill aint good causing this. if i were u id copy wahts already working, aka the example app and put ur app on top of that. unless the example app doesnt work then pls let someone know.

[MTPL0005-AbhishekDube]

@lovegaoshi, I think the problem is with Slider. I'm using the react-native-element slider.

[MTPL0005-AbhishekDube]

@lovegaoshi, Please check the code for the progress. I have used Slider from react-native-element. inside onSlidingComplete method I'm getting duration as 0. You can check the console log I'm sharing in the attachment.

`// import Slider from '@react-native-community/slider'; import React from 'react'; import {Dimensions, StyleSheet, Text, View} from 'react-native'; import { Slider } from 'react-native-elements'; import TrackPlayer, {useProgress} from 'react-native-track-player'; import {horizontalScale, moderateScale, verticalScale} from '../Matrices';

export const Progress = () => { const {position, duration} = useProgress();

// This is a workaround since the slider component only takes absolute widths const progressBarWidth = Dimensions.get('window').width * 0.88; console.log('duration ', duration); return (

{ console.log('---- duration 2----', duration) TrackPlayer.seekTo() }} allowTouchTrack // thumbImage={require('../../../assets/icons/ck-icon.png')} /> {format(duration - position)}

); };

const formatSeconds = (time) => new Date(time * 1000).toISOString().slice(14, 19);

const styles = StyleSheet.create({ container: { width: '100%', // height: horizontalScale(48), paddingHorizontal: horizontalScale(10), paddingBottom: horizontalScale(20), flexDirection: 'row', justifyContent: 'center', alignItems: 'center', columnGap: horizontalScale(10), }, progressBar: { flex: 1, // width: '78%', justifyContent: 'center', // alignItems: 'center', }, trackStyle: { height: verticalScale(3), backgroundColor: 'transparent', }, thumbStyle: { width: horizontalScale(12), height: horizontalScale(12), borderRadius: horizontalScale(12), backgroundColor: '#D9D9D9', }, timeText: { fontFamily: 'Open Sans', fontSize: moderateScale(14), fontStyle: 'normal', fontWeight: '700', color: '#FFFFFF', } });

export default Progress;

function format(seconds) { let hrs = Math.floor(seconds / 3600); let mins = Math.floor((seconds % 3600) / 60); let secs = Math.trunc(seconds % 60);

if (hrs > 0) { return ${hrs.toString().padStart(2, '0')}:${mins .toString() .padStart(2, '0')}:${secs.toString().padStart(2, '0')}; } else { return ${mins.toString().padStart(2, '0')}:${secs .toString() .padStart(2, '0')}; } } `

[lovegaoshi]

again, dont expect people to read ur code. there are nice people doing this but its not the norm. im not bored enough to read ur unformatted code snippet for free, nor looking into a ui lib that i never used and would not ever use. the best i can give u is the example app which uve been avoiding this entire time, or a working slider example as it comes from my app.

[MTPL0005-AbhishekDube]

@lovegaoshi thanks for the example code.