import React, { Component } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { IJKPlayer } from '@yz1311/react-native-ijkplayer';

export default class VideoPlayer extends Component {
  player = null;

  async componentDidMount() {
    // 组件挂载后，播放器会自动创建
    // 可以在这里设置一些初始化配置
  }

  playVideo = async () => {
    try {
      // 设置视频源
      await this.player.setDataSource('https://example.com/video.mp4');
      // 准备播放
      await this.player.prepareAsync();
      // 开始播放
      await this.player.start();
    } catch (e) {
      console.error('播放失败', e);
    }
  };

  pauseVideo = async () => {
    try {
      await this.player.pause();
    } catch (e) {
      console.error('暂停失败', e);
    }
  };

  stopVideo = async () => {
    try {
      await this.player.stop();
    } catch (e) {
      console.error('停止失败', e);
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <IJKPlayer
          ref={ref => (this.player = ref)}
          style={styles.player}
          scaleType="fitParent"
          volume={1.0}
          mute={false}
          onLoad={event => console.log('视频加载完成', event)}
          onError={event => console.log('播放错误', event)}
          onProgress={event => console.log('播放进度', event)}
          onEnd={() => console.log('播放结束')}
          onBuffering={event => console.log('缓冲状态', event)}
          onStateChanged={event => console.log('播放状态变化', event)}
        />
        <View style={styles.controls}>
          <Button title="播放" onPress={this.playVideo} />
          <Button title="暂停" onPress={this.pauseVideo} />
          <Button title="停止" onPress={this.stopVideo} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  player: {
    flex: 1,
    backgroundColor: '#000',
  },
  controls: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10,
  },
});