import { SuperPlayerViewComponent } from 'react-native-superplayer';
import { View, StyleSheet, Dimensions } from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const VIDEO_HEIGHT = (SCREEN_WIDTH * 9) / 16; // 16:9

function PlayerScreen() {
  const handleViewReady = (viewId: string) => {
    console.log('playerView ready', viewId);
    // create player and bind view
  };

  return (
    <View style={styles.container}>
      <SuperPlayerViewComponent
        viewId="my_player_view"
        style={styles.player}
        onReady={handleViewReady}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  player: {
    width: SCREEN_WIDTH,
    height: VIDEO_HEIGHT,
    backgroundColor: '#000',
  },
});

import { TXVodPlayer, TXVodConstants } from 'react-native-superplayer';
import { useRef, useCallback } from 'react';

function PlayerScreen() {
  const playerRef = useRef<TXVodPlayer | null>(null);

  const handleViewReady = useCallback((viewId: string) => {
    // create player
    const player = new TXVodPlayer();

    // Bind a view
    player.setPlayerView(viewId);

    // Set up event listening
    player.setListener({
      onPlayEvent: (event, param) => {
        switch (event) {
          case TXVodConstants.VOD_PLAY_EVT_PLAY_BEGIN:
            console.log('play start');
            break;
          case TXVodConstants.VOD_PLAY_EVT_PLAY_END:
            console.log('play end');
            break;
          // other event...
        }
      },
    });

    playerRef.current = player;
  }, []);

  // ... other code
}

import { useEffect } from 'react';

function PlayerScreen() {
  const playerRef = useRef<TXVodPlayer | null>(null);

  useEffect(() => {
    return () => {
      // destroy player
      if (playerRef.current) {
        playerRef.current.destroy();
        playerRef.current = null;
      }
    };
  }, []);

  // ... other code
}

// stop play
player.stop(true);

// Set playback speed to 1.2x
player.setRate(1.2);

// Configure loop playback settings
player.setLoop(true);
// Retrieve the current loop playback status
const isLooping = player.isLoop();

// Set mute, true to enable mute, false to disable mute
player.setMute(true);

// Set volume (0-100)
player.setVolume(50);

player.stop(true);
player.enableHardwareDecode(true);
player.startPlay(url);

// The value will only be returned when getSupportedBitrates is called after receiving the player VOD_PLAY_EVT_VOD_PLAY_PREPARED event.
const bitrateList = player.getSupportedBitrates();
// Return BitrateItem[]
// [{ index: 0, width: 1920, height: 1080, bitrate: 2000000 }, ...]

const index = bitrateList[0].index;  // Specify the bitrate index to be played.
player.setBitrateIndex(index);        // Switch the bitrate to the desired resolution.

// Retrieve the current resolution index.
const currentIndex = player.getBitrateIndex();

// Limit the maximum bitrate for adaptive playback (unit: Kbps)
player.setAutoMaxBitrate(2000);

player.setBitrateIndex(-1); // Pass -1 as the index parameter

const config: TXVodPlayConfig = {
  smoothSwitchBitrate: true,
};
player.setConfig(config);

player.setListener({
  onPlayEvent: (event, param) => {
    if (event === TXVodConstants.VOD_PLAY_EVT_PLAY_PROGRESS) {
      // Current playback progress (in milliseconds)
      const currentMs = param[TXVodConstants.EVT_PLAY_PROGRESS_MS] ?? 0;
      // Total video duration (in milliseconds)
      const durationMs = param[TXVodConstants.EVT_PLAY_DURATION_MS] ?? 0;
      // Playable duration (in milliseconds), i.e., loading progress
      const playableMs = param[TXVodConstants.EVT_PLAYABLE_DURATION_MS] ?? 0;

      console.log(`progress: ${currentMs / 1000}s / ${durationMs / 1000}s`);
    }
  },
});

player.setListener({
  onNetStatus: (param) => {
    const speed = param.NET_SPEED;          // Network Speed (kbps)
    const vBitrate = param.VIDEO_BITRATE;   // Video Bitrate
    const aBitrate = param.AUDIO_BITRATE;   // Audio Bitrate
    const fps = param.VIDEO_FPS;            // Frame Rate
  },
  // ...
});

player.setListener({
  onNetStatus: (param) => {
    const w = param.VIDEO_WIDTH;
    const h = param.VIDEO_HEIGHT;
  },
  // ...
});

// To obtain the video width and height, the return value is only available after receiving the VOD_PLAY_EVT_VOD_PLAY_PREPARED event callback from the player.
const width = player.getWidth();
const height = player.getHeight();

// Current playback time (seconds)
const currentTime = player.getCurrentPlaybackTime();

// Total video duration (seconds)
const duration = player.getDuration();

// Playable duration (seconds, buffered portion)
const playableDuration = player.getPlayableDuration();

// Buffering duration (seconds)
const bufferDuration = player.getBufferDuration();

// Video width
const width = player.getWidth();

// Video Height
const height = player.getHeight();

// Is currently playing
const isPlaying = player.isPlaying();

const config: TXVodPlayConfig = {
  maxBufferSize: 10,  // Maximum buffer size during playback. Unit: MB
};
player.setConfig(config);

import { RNTXPlayerGlobalSetting } from 'react-native-superplayer';

// Set the global cache directory for the playback engine
RNTXPlayerGlobalSetting.setCacheFolderPath('txcache');
// Set the maximum cache size (MB)
RNTXPlayerGlobalSetting.setMaxCacheSize(200);

// Capture the current frame, return the local image path
const imagePath = await player.snapshot();
console.log('Screenshot saved to:', imagePath);

// Can also be obtained via callback
player.setListener({
  onSnapshot: (path) => {
    console.log('Screenshot path:', path);
  },
  // ...
});

import { TXVodConstants } from 'react-native-superplayer';

// Full-fill mode (crops the picture, no black bars)
player.setRenderMode(TXVodConstants.RENDER_MODE_FULL_FILL_SCREEN);

// Adjust mode (scales proportionally, may have black bars)
player.setRenderMode(TXVodConstants.RENDER_MODE_ADJUST_RESOLUTION);

// Set the screen rotation angle (0, 90, 180, 270)
player.setRenderRotation(90);

// Enable/disable mirroring
player.setMirror(true);

import { SubtitleMimeType } from 'react-native-superplayer';

// [Important] Must be called before startPlay
player.addSubtitleSource(
  'https://example.com/subtitle_cn.srt',  // Subtitle URL
  'Chinese',                               // Subtitle name (must be unique across multiple subtitles)
  SubtitleMimeType.SRT                     // Subtitle format: 0=SRT, 1=VTT
);

player.addSubtitleSource(
  'https://example.com/subtitle_en.vtt',
  'English',
  SubtitleMimeType.VTT
);

// Then start playback
player.startPlay(videoUrl);

// [Important] Must set extInfoMap['450'] = 0 to receive the onSubtitleData callback
player.setConfig({
  extInfoMap: {
    '450': 0,  // Enable subtitle text callback
  },
});

player.setListener({
  onSubtitleData: (data) => {
    // data.subtitleData: subtitle text (empty string means clear screen)
    // data.trackIndex: current subtitle track index
    console.log('Subtitle:', data.subtitleData);
  },
  // ...
});

// Get the subtitle track list
const subtitleTracks = player.getSubtitleTrackInfo();

// Select the specified subtitle track
player.selectTrack(subtitleTracks[0].trackIndex);

// Deselect (turn off subtitles)
player.deselectTrack(subtitleTracks[0].trackIndex);

// Get the audio track list
const audioTracks = player.getAudioTrackInfo();

// Switch audio track
player.selectTrack(audioTracks[1].trackIndex);

// TXTrackInfo structure
interface TXTrackInfo {
  trackIndex: number;   // Track index
  trackType: number;    // Track type: 1=video, 2=audio, 3=subtitle
  name: string;         // Track name
  isSelected: boolean;  // Whether selected
  isExclusive: boolean; // Whether mutually exclusive
  isInternal: boolean;  // Whether embedded (false = external)
}

import { TXVodPlayer } from 'react-native-superplayer';

const code = TXVodPlayer.isDeviceSupportPip();
// Return value:
//   0    = Supported (Android includes granted permission)
//  -101  = Android has no overlay window permission
//  -201  = iOS device or system version not supported
//  Other = platform-specific error code, see the error code table for details

// Navigate to the system authorization page, letting the user manually enable the overlay window permission
TXVodPlayer.requestOverlayPermission();

// Enter Picture-in-Picture
player.enterPictureInPictureMode();

// Exit Picture-in-Picture
player.exitPictureInPictureMode();

import { Platform } from 'react-native';
import { TXVodPlayer } from 'react-native-superplayer';

const handleEnterPip = () => {
  const player = playerRef.current;
  if (!player) return;
  if (Platform.OS === 'android') {
    const code = TXVodPlayer.isDeviceSupportPip();
    if (code !== 0) {
      TXVodPlayer.requestOverlayPermission();
      return;
    }
  }
  player.enterPictureInPictureMode();
};

// After enabling:
//  - iOS: just call it; the system automatically enters PiP when the App goes to the background
//  - Android: the SDK does not listen to the App lifecycle; the business side needs to use AppState to listen on its own
player.setAutoPictureInPictureEnabled(true);

import { useEffect } from 'react';
import { AppState, Platform } from 'react-native';

useEffect(() => {
  if (Platform.OS !== 'android' || !autoPipEnabled) return;
  const sub = AppState.addEventListener('change', (next) => {
    const player = playerRef.current;
    if (!player) return;
    if (next === 'background' && player.isPlaying()) {
      player.enterPictureInPictureMode();
    } else if (next === 'active') {
      player.exitPictureInPictureMode();
    }
  });
  return () => sub.remove();
}, [autoPipEnabled]);

import type { TXPipListener } from 'react-native-superplayer';

player.setPipListener({
  onPipStart: () => {
    console.log('Picture-in-Picture started');
  },
  onPipStop: () => {
    console.log('Picture-in-Picture stopped');
  },
  onPipRestore: () => {
    // User tapped the restore button inside the overlay window
    console.log('User tapped the restore button');
  },
  onPipError: (code, message) => {
    console.warn(`Picture-in-Picture error code=${code} msg=${message ?? ''}`);
  },
});

// Remove the listener
player.setPipListener(null);