customer / shanghai-railway-rnapp

/**
 * Created by mac on 2017/5/13.
 */
import React, {Component} from "react";
import {
  AsyncStorage,
  DeviceEventEmitter,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from "react-native";
import {width} from "../../utils/getSize";
import {observer} from "mobx-react/native";
import {observable} from "mobx";
import {getLocalDate,xnToast,setValue} from "../../utils/utils";
import AppService from "../../service/AppService";


const play = require('../../img/bofang-02.png');
const pause = require('../../img/bai-zanting.png');
const bofang_info = require('../../img/bofang-03.png');
const shichang = require('../../img/shichang.png');

let Audio = require("react-native-sound");
@observer
export default class Sound extends Component {
  @observable
  radio = {
    id:""
  };   // 当前播放的音频课程
  hasRecord = false;

  constructor(props) {
    super(props);
  }

  //课程音频列表
  renderContent = (v) => {
      if(v.paused === undefined) {
          v.paused = true;
      }
    return (
      <View style={styles.soundBox} key={v.id}>
        <TouchableOpacity style={styles.left} onPress={async () => {
          if (!this.props.isFree){
            if (!this.props.hasTransaction){
              if (!v.isFree){
                this.props.toBuy();
                return;
              }
            }
          }
          // 如果点击的是正在播放的音频
          if (this.radio.id === v.id && this.radio.radioUrl) {
            if (this.radio.paused) {
              // 如果当前为暂停状态，播放
              this.play(v);
            } else {
              // 如果当前为播放状态，暂停
                DeviceEventEmitter.emit('audioPause');
                global.sound.pause();
                this.props.audioPause();
            }
            this.radio.paused = !this.radio.paused;
            return;
          }

          // 如果点击的不是当前播放的音频
          if (global.sound && this.radio !== v) {
            DeviceEventEmitter.emit('audioPause');
            global.sound.pause();
            global.sound.release();
          }
          v.paused = false;

          const soundPromise = new Promise((resolve, reject) => {
            const sound = new Audio(v.radioUrl, '', () => {
              resolve(sound)
            })
          });

          this.radio = v;
          global.sound = await soundPromise;
          this.play(v);
        }}>

          <Image
            source={{uri: v.pictureUrl}}
            style={styles.icon1}
          />
          <View style={styles.borderWhite}>
            <View style={styles.leftBfBtn}>
              <Image
                source={v.id === this.radio.id && this.props.playType === 'Audio' && this.props.playState ? pause : play}
                style={styles.bfIcon}
              />
            </View>
          </View>
        </TouchableOpacity>

        <View style={styles.middle}>
          <Text style={styles.font1}>{v.name}</Text>
          <View style={styles.info}>
            <Image
              source={bofang_info}
              resizeMode="contain"
              style={styles.icon2}
            />
            <Text style={styles.font2}>{v.viewCount}</Text>
            <Image
              source={shichang}
              resizeMode="contain"
              style={styles.icon2}
            />
            <Text style={styles.font2}>{v.lessonTime}</Text>
            {this.props.isFree && <View style={styles.greenTag}>
              <Text style={styles.free}>试听</Text>
            </View>}
            {!this.props.isFree && this.props.hasTransaction && <View style={styles.greenTag}>
              <Text style={styles.free}>试听</Text>
            </View>}
            {!this.props.isFree && !this.props.hasTransaction && v.isFree && <View style={styles.greenTag}>
              <Text style={styles.free}>试听</Text>
            </View>}
            {!this.props.isFree && !this.props.hasTransaction && !v.isFree && <View style={styles.redTag}>
              <Text style={styles.notFree}>收费</Text>
            </View>}
          </View>
        </View>

        <View style={styles.right}>
          <Text style={styles.font3}>{getLocalDate(v.lastUpdateTime)}</Text>
        </View>
      </View>
    )
  };

  // 播放音频

  play=(v)=>{

    // 发出播放通知
    DeviceEventEmitter.emit('eventAudioPlay');
    let that = this;
    setValue(v);
    xnToast("现在播放：" + v.name);

    global.sound.play(function () {
      that.radio.paused = !that.radio.paused;
      that.radio = null;
      //通知不做旋转动画
      DeviceEventEmitter.emit('audioPause');
      //通知改变播放状态
      DeviceEventEmitter.emit('eventAudioPuased');

    });

    // 保存最近访问课程
      AsyncStorage.setItem("endView", JSON.stringify({id:v.courseId, lessonId:v.id}), function (errs) {
        if (errs) {
          console.warn('存储报错：' + errs);
        }
      });

    // 记录课次浏览记录
    if(!this.hasRecord) {

      const params = {
        objectType:"COURSE_LESSON",
        objectId:this.radio.id,
        viewCount:1,
        collectCount:0
      };

      AppService.objectStatisticsChange(params).then((data) => {
        if (data.message) {
          xnToast(data.message);
          return;
        }
        if (data.errors.length > 0) {
          xnToast(data.errors[0].message);
        } else {
          that.hasRecord = true;
        }
      }).catch(error => {
        xnToast(error);
      });
    }
  };

  async componentWillMount() {
    if(global.radio) {
      this.radio = global.radio;
    }

      // 监控视频播放的事件
      this.eventVideoPlayListener = DeviceEventEmitter.addListener('VideoPlay',() => {
          this.radio.paused = true;
      });
  }

  async componentWillUnmount() {
    if(this.radio) {
      global.radio = this.radio;
    }
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        {
          this.props.musicData.map((v, i) => this.renderContent(v, i))
        }
      </ScrollView>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    height: 500,
    backgroundColor: 'white'
  },
  soundBox: {
    height: 80,
    width: width,
    flexDirection: 'row',
    backgroundColor: 'white',
    paddingLeft: 15,
    paddingRight: 15,
  },
  leftBfBtn: {
    height: 50,
    width: 50,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 5,
    borderRadius: 52,
    borderWidth: 3,
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderColor: "#ffffff",

  },
  borderWhite: {
    height: 50,
    width: 50,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 5,
    borderRadius: 52,
    borderWidth: 1,
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderColor: '#dddddd'
  },
  bfIcon: {
    width: 15,
    height: 15,
    backgroundColor: 'transparent'
  },
  icon1: {
    width: 45,
    height: 45,
    position: 'absolute',
    top: 17.5,
    borderRadius: 22.5
  },
  left: {
    width: 60,
    height: 80,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 15
  },
  middle: {
    flex: 1,
    justifyContent: 'center',
    borderWidth: 1,
    borderBottomWidth: 1,
    borderRightWidth: 0,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderColor: '#dddddd'
  },
  font1: {
    fontSize: 15,
    color: "#333",
    fontWeight: 'bold'
  },
  info: {
    flexDirection: 'row',
    height: 20,
    alignItems: 'center',
    marginTop: 15
  },
  font2: {
    fontSize: 9,
    color: "#999999",
    marginRight: 10,
    // width:30
  },
  icon2: {
    marginRight: 4
  },
  greenTag: {
    width: 25,
    height: 13,
    borderColor: '#6eb41d',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1
  },
  free: {
    fontSize: 9,
    color: '#6eb41d'
  },
  right: {
    width: 80,
    height: 80,
    alignItems: 'center',
    borderWidth: 1,
    borderBottomWidth: 1,
    borderRightWidth: 0,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderColor: '#dddddd'
  },
  font3: {
    color: '#999',
    fontSize: 12,
    marginTop: 15,

  },
  redTag: {
    width: 25,
    height: 13,
    borderColor: '#e52d43',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1
  },
  notFree: {
    fontSize: 9,
    color: '#e52d43'
  }
});