import React from 'react';
import { IpcPlayer, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Text style={{ marginBottom: '10px' }}>IPC Live Video</Text>
      <IpcPlayer
        deviceId="your-device-id"
        autoplay
        style={{ width: '100%', height: '300px' }}
        onInitDone={(e) => {
          console.log('Initialization complete, max zoom scale:', e.detail.maxScaleMultiple);
        }}
        onError={(e) => {
          console.log('Error:', e.detail);
        }}
      />
    </View>
  );
}

import React, { useState } from 'react';
import { IpcPlayer, View, Text, Button, createIpcPlayerContext } from '@ray-js/ray';

export default function () {
  const [isOnline, setIsOnline] = useState(false);
  const [connectState, setConnectState] = useState(-1);
  const [previewState, setPreviewState] = useState(-1);
  const playerId = 'myIpcPlayer';

  const handleStartPreview = () => {
    const ctx = createIpcPlayerContext(playerId);
    ctx.startPreview();
  };

  const handleStopPreview = () => {
    const ctx = createIpcPlayerContext(playerId);
    ctx.stopPreview();
  };

  return (
    <View style={{ padding: '20px' }}>
      <IpcPlayer
        id={playerId}
        deviceId="your-device-id"
        autoplay={false}
        muted={false}
        clarity="hd"
        soundMode="speaker"
        orientation="vertical"
        objectFit="contain"
        scalable
        ptzControllable
        borderRadius={8}
        style={{ width: '100%', height: '300px' }}
        onConnectChange={(e) => {
          console.log('Connection status changed:', e.detail.state);
          setConnectState(e.detail.state);
        }}
        onPreviewChange={(e) => {
          console.log('Preview status changed:', e.detail.state);
          setPreviewState(e.detail.state);
        }}
        onOnlineChange={(e) => {
          console.log('Online status changed:', e.detail.online);
          setIsOnline(e.detail.online);
        }}
        onZoomChange={(e) => {
          if ('zoomLevel' in e.detail) {
            console.log('Zoom changed:', e.detail.zoomLevel);
          }
        }}
        onVideoTap={() => {
          console.log('Video tapped');
        }}
        onError={(e) => {
          console.log('Error:', e.detail);
        }}
      />
      <View style={{ marginTop: '10px' }}>
        <Text>Device online: {isOnline ? 'Yes' : 'No'}</Text>
        <Text>Connection status: {connectState === 0 ? 'Connected' : 'Not connected'}</Text>
        <Text>Preview status: {previewState === 1 ? 'Previewing' : 'Not previewing'}</Text>
      </View>
      <View style={{ marginTop: '10px', display: 'flex', flexDirection: 'row', gap: '8px' }}>
        <Button size="mini" onClick={handleStartPreview}>Start preview</Button>
        <Button size="mini" onClick={handleStopPreview}>Stop preview</Button>
      </View>
    </View>
  );
}