emptyapp/src/components/PlayerContents.js

import React, { useState, useContext } from 'react';
import { ScrollView, Text, StyleSheet } from 'react-native';
import { Icon, Slider } from 'react-native-elements';
import C from 'rn-class';
import {PlayerStateContext, PlayerDispatchContext, playerCommon} from './PlayerReducer';

export default props => {
  const { Pages, currentPlayerValue, setCurrentPlayerValue} = props;
  const [curPlayerValue, setCurPlayerValue] = useState(0);
  const [isPlay, setPlay] = useState(false);
  const playerDispatch = useContext(PlayerDispatchContext);
  const playerState = useContext(PlayerStateContext);
  const {paused, player, duration, currentTime} = playerState;
  const { secondsTohhmmss } = playerCommon;
  const onSetPlay = () => {
    //setPlay(!isPlay);
    playerDispatch({type:'paused', setPaused:!paused});
    //console.log(player);
  };
  const onStop = () => {
    playerDispatch({type:'stop'});
  }
  // const getpercent = () => {
  //   console.log((parseFloat(currentTime) / parseFloat(duration))*100-1)
  //   if(currentTime>0) {
  //     return (parseFloat(currentTime) / parseFloat(duration))*100
  //   }
  // }
  const onForwardRewind = (type) => {
    if(type==='rewind') {
      playerDispatch({type: 'seek', seekValue: currentTime - 15})
    }
    if(type==='forward') {
      playerDispatch({type: 'seek', seekValue: currentTime + 15})
    }
  }
  return (
    <ScrollView>
      <C.Text cls="flx1 ta-c">{Pages.subtitle}</C.Text>
      <C.View cls="flx2 ph5 mt5">
        <C.Text cls="fw-b">{Pages.subtitle}</C.Text>
        <C.Text cls="mt2" numberOfLines={10}>
          {Pages.contens}
        </C.Text>
        <C.Text cls="mt3" numberOfLines={1}>
          by {Pages.subtitle.replace(/\r\n|\n|\r/gm, ' ')}
        </C.Text>
        <C.Text cls="mt5 as-e" numberOfLines={1}>
          March 19
        </C.Text>
      </C.View>
      <C.View cls="flx1 flx-row jc-sa ai-c mt5">
        <C.EL.Icon {...C.n2cls('size8')} type="ionicon" name="md-rewind" onPress={()=>{onForwardRewind('rewind')}} />
        { paused===false
          ?<C.EL.Icon {...C.n2cls('size10')} type="ionicon" name="md-pause" onPress={onSetPlay} />
          :<C.EL.Icon {...C.n2cls('size10')} type="ionicon" name="md-play" onPress={onSetPlay} />
        }
        <C.EL.Icon {...C.n2cls('size8')} type="ionicon" name="md-fastforward" onPress={()=>{onForwardRewind('forward')}} />
        <C.EL.Icon {...C.n2cls('size10')} type="ionicon" name="md-square" onPress={onStop}/>
      </C.View>
      <C.View cls="flx1 ai-c mt2">
      {/* <C.Text cls="as-s" style={{ ...StyleSheet.absoluteFill, backgroundColor:'red', width:50, textAlign:'center', left:`${getpercent()-5}%`}}> {Math.floor(currentTime)}</C.Text> */}
        <Slider
          style={{ width: '95%' }}
          trackStyle={{height:4}}
          thumbTintColor="#333"
          thumbStyle={{ width: 15, height: 10 }}
          maximumValue={duration}
          value={currentTime}
          onValueChange={value => playerDispatch({type: 'seek', seekValue: Math.floor(value)})}
        />
        <C.View cls="w95 jc-sb flx-row">
          <C.Text>{secondsTohhmmss(currentTime)}</C.Text>
          <C.Text>{secondsTohhmmss(duration)}</C.Text>
        </C.View>
      </C.View>
      <C.View cls="h50" />
    </ScrollView>
  );
};