import React, { ReactElement } from 'react'
import styles from './styles'
import { View } from 'react-native'
import PlayerController from '../player_controller/PlayerController'
import i18n from 'i18n-js'
import PlayerProgress from '../player_progress/PlayerProgress'
import Button from '../../../../components/button/Button'
import {
    add,
    destroyThrottle,
    getPosition,
    pauseThrottle,
    playThrottle,
    resetThrottle,
    seekToThrottle,
    setupPlayer,
    stopThrottle,
    updateOptions,
} from '../../../../service/TrackPlayerService'
import { Capability, Track } from 'react-native-track-player'
import { testIDs } from '../../../../testIDs'
import VolumeSlider from '../volume_slider/VolumeSlider'

interface Props {
    componentId?: string
    track: Track
    onContinueTrainingPress?: () => void
    onPlayPress?: () => void
}

interface State {
    playerState: 'playing' | 'pause'
}

const initialState: State = {
    playerState: 'pause',
}
const defaultProps: Props = {
    track: {
        id: '',
        url: '',
        title: '',
        artist: '',
    },
}

const SEEK_TIME_SEC: number = 15

class Player extends React.Component<Props, State> {
    readonly state: State = initialState
    static defaultProps: Props = defaultProps

    async componentDidMount(): Promise<void> {
        const { track } = this.props
        try {
            await setupPlayer()
            await updateOptions({
                capabilities: [
                    Capability.Pause,
                    Capability.Play,
                    Capability.Stop,
                    Capability.SeekTo,
                ],
                compactCapabilities: [Capability.Pause, Capability.Play],
                notificationCapabilities: [],
            })
            await add(track)
        } catch (e) {
            console.log('err:: ', e.message)
        }
    }

    async componentWillUnmount(): Promise<void> {
        try {
            await stopThrottle['100']()
            destroyThrottle['100']()
        } catch (e) {
            console.log('err:: ', e.message)
        }
    }

    render(): ReactElement<any> {
        const { onContinueTrainingPress, track } = this.props
        const { duration } = track
        return (
            <View>
                <PlayerController
                    playMode={this.showPlay() ? 'pause' : 'play'}
                    onSeekFurtherPress={this.handleSeekFurtherPress}
                    onPlayPress={this.handlePlayPress}
                    onRepeatPress={this.handleRepeatPress}
                    onSeekBackPress={this.handleSeekBackPress}
                    disableSeek={this.getDisable()}
                />
                <View style={styles.bottomContainer}>
                    <PlayerProgress
                        track={track}
                        disabled={this.getDisable()}
                        duration={duration}
                    />
                    <View style={styles.divider} />
                    <VolumeSlider />
                    <View style={styles.divider} />
                    <View style={styles.buttonContainer}>
                        <Button
                            text={i18n.t('Continue training')}
                            onPress={onContinueTrainingPress}
                            active={!this.showPlay()}
                            testID={testIDs.listenToEpisode.continueTraining}
                        />
                    </View>
                </View>
            </View>
        )
    }

    showPlay = (): boolean => {
        const { playerState } = this.state
        return playerState === 'playing'
    }

    getDisable = (): boolean => {
        const { playerState } = this.state
        return playerState === 'pause'
    }

    handlePlayPress = async (): Promise<void> => {
        const { onPlayPress } = this.props
        onPlayPress && onPlayPress()
        try {
            const { playerState } = this.state
            if (playerState === 'playing') {
                await pauseThrottle['500']()
                this.setState({
                    playerState: 'pause',
                })
            } else {
                await playThrottle['500']()
                this.setState({
                    playerState: 'playing',
                })
            }
        } catch (e) {
            console.log('err:: ', e)
        }
    }

    handleRepeatPress = async (): Promise<void> => {
        const { track } = this.props
        try {
            await stopThrottle['2000']()
            await resetThrottle['2000']()
            await add(track)
            await playThrottle['2000']()
            this.setState({
                playerState: 'playing',
            })
        } catch (e) {
            console.log('err:: ', e)
        }
    }

    handleSeekBackPress = async (): Promise<any> => {
        try {
            const position: number = await getPosition()
            await seekToThrottle['1000'](position - SEEK_TIME_SEC)
        } catch (e) {
            console.log('err:: ', e)
        }
    }

    handleSeekFurtherPress = async (): Promise<any> => {
        try {
            const {
                track: { duration },
            } = this.props
            const position: number = await getPosition()
            await seekToThrottle['1000'](
                position + SEEK_TIME_SEC > duration ? duration : position + SEEK_TIME_SEC,
            )
        } catch (e) {
            console.log('err:: ', e)
        }
    }
}

export default Player

"react-native-track-player": "2.0.0-rc13"

import React, { ReactElement, useEffect, useState } from 'react'
import styles from './styles'
import { Platform, Text, View } from 'react-native'
import { colors } from '../../../../assets/colors'
import Slider from '@react-native-community/slider'
import {
    getSoundDuration,
    normalizeInternalProgress,
    normalizeProgress,
} from '../../../../utils/utils'
import { Event, Track, useProgress, useTrackPlayerEvents } from 'react-native-track-player'
import {
    add,
    playThrottle,
    resetThrottle,
    seekToThrottle,
    setupPlayer,
    stopThrottle,
} from '../../../../service/TrackPlayerService'
import { testIDs } from '../../../../testIDs'

interface Props {
    duration: number
    disabled: boolean
    track: Track
}
const defaultProps: Props = {
    duration: 0,
    disabled: true,
    track: {
        id: '',
        url: '',
        title: '',
        artist: '',
    },
}

let timeoutId: NodeJS.Timeout = null

const PlayerProgress = ({ duration, disabled, track }: Props): ReactElement<any> => {
    const { position } = useProgress(500)
    Platform.OS === 'ios' &&
        useTrackPlayerEvents([Event.PlaybackQueueEnded], async () => {
            await stopThrottle['2000']()
            await resetThrottle['2000']()
            await add(track)
            await playThrottle['2000']()
        })
    const [internalProgress, setInternalProgress] = useState<number>(0)
    const [isSliding, setIsSliding] = useState<boolean>(false)
    useEffect(() => {
        const setup = async (): Promise<any> => {
            try {
                await setupPlayer()
            } catch (e) {
                console.log('e:: ', e)
            }
        }
        setup().catch()
    }, [])
    const handleSlidingComplete = async (value: number): Promise<any> => {
        try {
            await seekToThrottle['0'](normalizeInternalProgress(duration, value))
        } catch (e) {
            console.log('e:: ', e)
        }
        clearTimeout(timeoutId)
        timeoutId = setTimeout(() => setIsSliding(false), 2000)
    }
    const handleSlidingStart = (): void => setIsSliding(true)
    const handleValueChange = (value: number): void => setInternalProgress(value)

    return (
        <View style={styles.container}>
            <Slider
                disabled={disabled}
                value={isSliding ? internalProgress : normalizeProgress(duration, position)}
                minimumTrackTintColor={colors.mainBrown}
                maximumTrackTintColor={colors.peach_5}
                thumbTintColor={colors.mainBrown}
                onSlidingComplete={handleSlidingComplete}
                onSlidingStart={handleSlidingStart}
                onValueChange={handleValueChange}
                testID={testIDs.listenToEpisode.progress}
            />
            <View style={styles.durationContainer}>
                <Text style={styles.duration}>{getSoundDuration(position, duration)}</Text>
                <Text style={styles.duration}>
                    {getSoundDuration(duration - position, duration)}
                </Text>
            </View>
        </View>
    )
}
PlayerProgress.defaultProps = defaultProps

export default PlayerProgress

import React, { ReactElement, useEffect, useState } from 'react'
import styles from './styles'
import { Text, View } from 'react-native'
import i18n from 'i18n-js'
import Slider from '@react-native-community/slider'
import { testIDs } from '../../../../testIDs'
import { colors } from '../../../../assets/colors'
// @ts-ignore
import SystemSetting from 'react-native-system-setting'

interface Props {}
const defaultProps: Props = {}

const VolumeSlider = ({  }: Props): ReactElement<any> => {
    const [volume, setVolume] = useState<number>(0)
    const listener = SystemSetting.addVolumeListener(({ value }: { value: number }) =>
        setVolume(value),
    )
    useEffect(() => {
        const setDeviceVolume = async (): Promise<any> => {
            const deviceVolume: number = await SystemSetting.getVolume('music')
            setVolume(deviceVolume)
        }
        setDeviceVolume().catch()
    })
    useEffect(() => SystemSetting.removeVolumeListener(listener), [])
    const handleVolumeValueChange = (volume: number): void =>
        SystemSetting.setVolume(volume, {
            type: 'music',
        })

    return (
        <View style={styles.volumeContainer}>
            <Text style={styles.volume}>{i18n.t('Volume')}</Text>
            <Slider
                testID={testIDs.listenToEpisode.volume}
                value={volume}
                minimumTrackTintColor={colors.mainBrown}
                maximumTrackTintColor={colors.peach_5}
                thumbTintColor={colors.mainBrown}
                onSlidingComplete={handleVolumeValueChange}
                style={styles.volumeSlider}
            />
        </View>
    )
}
VolumeSlider.defaultProps = defaultProps

export default VolumeSlider