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 实时视频</Text>
      <IpcPlayer
        deviceId="your-device-id"
        autoplay
        style={{ width: '100%', height: '300px' }}
        onInitDone={(e) => {
          console.log('初始化完成，最大缩放倍数:', e.detail.maxScaleMultiple);
        }}
        onError={(e) => {
          console.log('错误:', 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('连接状态变化:', e.detail.state);
          setConnectState(e.detail.state);
        }}
        onPreviewChange={(e) => {
          console.log('预览状态变化:', e.detail.state);
          setPreviewState(e.detail.state);
        }}
        onOnlineChange={(e) => {
          console.log('在线状态变化:', e.detail.online);
          setIsOnline(e.detail.online);
        }}
        onZoomChange={(e) => {
          if ('zoomLevel' in e.detail) {
            console.log('缩放变化:', e.detail.zoomLevel);
          }
        }}
        onVideoTap={() => {
          console.log('点击视频');
        }}
        onError={(e) => {
          console.log('错误:', e.detail);
        }}
      />
      <View style={{ marginTop: '10px' }}>
        <Text>设备在线: {isOnline ? '是' : '否'}</Text>
        <Text>连接状态: {connectState === 0 ? '已连接' : '未连接'}</Text>
        <Text>预览状态: {previewState === 1 ? '预览中' : '未预览'}</Text>
      </View>
      <View style={{ marginTop: '10px', display: 'flex', flexDirection: 'row', gap: '8px' }}>
        <Button size="mini" onClick={handleStartPreview}>开始预览</Button>
        <Button size="mini" onClick={handleStopPreview}>停止预览</Button>
      </View>
    </View>
  );
}