#Advanced Usage

// Drag Start
const handTouchStart = value => {
    ty.nativeDisabled(true);
};

// While Dragging
const handTouchMove = value => {
    ty.nativeDisabled(true);
};
// Drag End
const handTouchEnd = value => {
    ty.nativeDisabled(true);
};

import IpcPlayer from '@ray-js/ray-ipc-player';
import { View, Text, CoverView } from '@ray-js/ray';

function Page() {

  const [show, setShow] = useState(false)
  const deviceId = '1234567890xxxxxx';
  // Device online status
  const onlineStatus = true; 
  // Get player instance – allows calling methods on the player
  const onCtx = (ctx) => {
    console.log(ctx, 'ctx');
  };
  // Listen to player stream status
  const onChangeStreamStatus = (status) => {
     console.log(status, 'status');
     // When the player starts streaming, show the screenshot button,
    // or customize your own display logic
     if( status === 1002 ) {
        setShow(true);
     }
  };

  return (
    // playerContainer is the player container,
    // used to define the size of the player area
    <View className={Styles.playerContainer}>
      <IpcPlayer
          objectFit='contain'
          onCtx={onCtx}
          devId={deviceId}
          onlineStatus={onlineStatus}
          onChangeStreamStatus={onChangeStreamStatus}
        />

        <View className={Styles.featureContainer}>
          {show && <CoverView className={Styles.coverView}>
            <Text>screenshot</Text> 
          </CoverView> }  
        </View>
     </View>    
  )
}