react-native#Slider JavaScript Examples

function Progress(props) {
	const { progress, type, totalPages = 0 } = props.books[props.index];

	function goTo(n) {
		props.goToLocation(type === 'pdf' ? n : JSON.parse(props.locations)[n - 1]);
	}

	return (
		<View style={[styles.wrapper, { backgroundColor: props.bg }]}>
			<TouchableWithoutFeedback onPress={props.goPrev}>
				<View style={styles.buttonWrapper}>
					<Icon name="chevron-left" size={24} color={props.fg} />
				</View>
			</TouchableWithoutFeedback>
			<View style={styles.progressWrapper}>
				<Text style={[styles.text, { color: props.fg }]}>{`${
					progress === undefined ? 'Loading' : progress + (type === 'pdf' ? 0 : 1)
				} / ${totalPages}`}</Text>
				<Slider
					style={styles.slider}
					disabled={progress === undefined || totalPages === 0}
					step={1}
					value={progress || 1}
					minimumValue={1}
					maximumValue={totalPages || 1}
					minimumTrackTintColor={props.fg}
					thumbTintColor={props.fg}
					onSlidingComplete={goTo}
				/>
			</View>
			<TouchableWithoutFeedback onPress={props.goNext}>
				<View style={styles.buttonWrapper}>
					<Icon name="chevron-right" size={24} color={props.fg} />
				</View>
			</TouchableWithoutFeedback>
		</View>
	);
}

export function PlayerScreen() {
  const [segundos, setSegundos] = useState(0);

  return (
    <Background>
      <TopBar>
        <TopBar.Left>
          <ChevronIcon />
        </TopBar.Left>
        
        <TopBar.Middle>
          <TopBar.Title>
            Tocando Podcast
          </TopBar.Title>
          <TopBar.SubTitle>
            Hipsters Ponto Tech
          </TopBar.SubTitle>
        </TopBar.Middle>

        <TopBar.Right>
          <MoreVertIcon />
        </TopBar.Right>
      </TopBar>

      <ScreenArea>
        <CoverArea>
          <CoverArea.Image
            resizeMode="contain"
            source={{
              uri: "https://placehold.it/750x750",
            }}
          />
        </CoverArea>

        <PlayerArea>
          <PlayerArea.Title>
            Angular vs React - Hipsters #142
          </PlayerArea.Title>
          <PlayerArea.Author>
          Hipsters Ponto Tech
          </PlayerArea.Author>

          <Controls>
            <Controls.Slider>
              <AudioSlider
                thumbTintColor="#FFFFFF"
                minimumTrackTintColor="#1DD65F"
                maximumTrackTintColor="#777777"
                minimumValue={0}
                maximumValue={100}
                value={segundos}
                onValueChange={(value) => {
                  setSegundos(value);                  
                }}
              />
              <Controls.Slider.CurrentTime>
                0:{segundos}
              </Controls.Slider.CurrentTime>
              <Controls.Slider.TotalTime>
                52:07
              </Controls.Slider.TotalTime>
            </Controls.Slider>

            <Controls.Play>
              <PlayIcon
                width={88}
                height={88}
              />
            </Controls.Play>
          </Controls>
        </PlayerArea>
      </ScreenArea>
    </Background>
  );
}

AudioSlider = styled(Slider)`
  flex-basis: 100%;
`

Controls.Slider = styled.View`
  flex-basis: 100%;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
`;

Controls.Slider.CurrentTime = styled.Text`
  color: #bbbbbb;
`;

Controls.Slider.TotalTime = styled.Text`
  color: #bbbbbb;
`;

export default function OPlayer({ url, themeColor = '#946ce6', type = 'mp4', callback }) {
  if (!url) return <View style={s.unfull} />

  let v = useRef(null)
  let timer = null
  const [isPlay, setPlay] = useState(true)
  const [isFull, setFull] = useState(false)
  const [control, setControl] = useState(false)
  const [duration, setDuration] = useState(0)
  const [position, setPosition] = useState(0)

  useEffect(() => {
    v.current.loadAsync({ uri: url }).then(() => {
      v.current.playAsync()
      setPlay(true)
    })
    return () => v.current.unloadAsync()
  }, [url])
  useEffect(() => {
    return () => {
      v.current.unloadAsync()
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT)
    }
  }, [])

  const play = useCallback(() => {
    isPlay ? v.current.pauseAsync() : v.current.playAsync()
    setPlay(!isPlay)
  })
  const full = useCallback(() => {
    if (isFull) {
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT)
    } else {
      callback.full && callback.full()
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_LEFT)
    }
    setFull(!isFull)
  })
  const back = useCallback(() => (isFull ? full() : callback.back && callback.back()))

  const update = useCallback(status => {
    setDuration(status.durationMillis)
    setPosition(status.positionMillis)
  })

  const value = useCallback(value => {
    v.current.setPositionAsync(value * duration)
    v.current.playAsync()
  })
  const show = useCallback(() => {
    setControl(true)
    clearTimeout(timer)
    timer = setTimeout(() => setControl(false), 5000)
  })

  const c = useMemo(() => {
    return control ? { opacity: 1 } : { opacity: 0 }
  })
  return (
    <TouchableHighlight onPress={show}>
      <View style={isFull ? s.full : s.unfull}>
        <Icon name={'back'} size={20} color={'#fff'} onPress={back} style={{ ...c, ...s.back }} />
        <View style={{ ...c, ...s.control }}>
          <Icon name={isPlay ? 'pause' : 'play'} size={20} color={'#fff'} onPress={play} style={s.icon} />
          <Text style={s.text}>{timefy(position)}</Text>
          <Slider
            value={duration && position ? position / duration : 0}
            style={{ height: 40, flex: 1 }}
            minimumValue={0}
            maximumValue={1}
            minimumTrackTintColor={themeColor}
            maximumTrackTintColor='rgba(255,255,255,0.5)'
            thumbTintColor={themeColor}
            onValueChange={() => v.current.pauseAsync()}
            onSlidingComplete={value}
          />
          <Text style={s.text}>{timefy(duration)}</Text>
          <Icon name={'full'} size={20} color={'#fff'} onPress={full} style={s.icon} />
        </View>
        <Video rate={1.0} volume={1.0} isMuted={false} resizeMode='contain' shouldPlay style={s.video} ref={v} onPlaybackStatusUpdate={update} />
      </View>
    </TouchableHighlight>
  )
}