npm package: @livuvo/short-sdk-native
Description: A React Native SDK for short video components with MQTT integration
Author: Your Name
Latest version: 1.0.0

# Short SDK Native

A React Native SDK for creating short video components with MQTT integration, social actions, and product cards.

## Features

- 🎥 Video player with custom controls
- 💬 MQTT integration for real-time events
- ❤️ Social actions (like, share, save)
- 🛒 Product card integration
- 👤 User profile display
- 📱 Fully customizable styling
- 🔄 Event tracking system

## Installation

```bash
npm install short-sdk-native
```

or

```bash
yarn add short-sdk-native
```

## Usage

### Basic Example

```tsx
import React, { useRef } from "react";
import { ShortSdkNative, ShortSdkNativeRef } from "short-sdk-native";

const App = () => {
  const sdkRef = useRef<ShortSdkNativeRef>(null);

  const handleEvent = (type: string) => {
    sdkRef.current?.sendEvent(type as any);
  };

  return (
    <ShortSdkNative
      ref={sdkRef}
      shortVideoId="video123"
      mqtt={{
        clientId: "your-client-id",
        username: "your-username",
        password: "your-password",
      }}
      video={{
        streamUrl: "https://example.com/video.mp4",
        coverUrl: "https://example.com/cover.jpg",
        onEnded: () => console.log("Video ended"),
        onPlay: () => console.log("Video started playing"),
        isMuted: false,
        loop: true,
      }}
      actions={{
        like: {
          count: 1234,
          isLiked: false,
          onPress: () => handleEvent("like"),
        },
        share: {
          onPress: () => handleEvent("share"),
        },
        save: {
          onPress: () => handleEvent("save"),
        },
      }}
      productCard={{
        image: "https://example.com/product.jpg",
        description: "Amazing Product",
        price: 99.99,
        button: {
          children: "Buy Now",
          onPress: () => handleEvent("add-to-cart"),
        },
      }}
      profile={{
        image: "https://example.com/avatar.jpg",
        title: "John Doe",
        subTitle: "@johndoe",
        onPress: () => handleEvent("seller-view"),
      }}
    />
  );
};

export default App;
```

### Advanced Configuration

```tsx
import React from "react";
import { ShortSdkNative } from "short-sdk-native";

const AdvancedExample = () => {
  return (
    <ShortSdkNative
      shortVideoId="video456"
      mqtt={{
        clientId: "advanced-client",
        username: "user",
        password: "pass",
      }}
      video={{
        streamUrl: "https://example.com/video.mp4",
        coverUrl: "https://example.com/cover.jpg",
        onEnded: () => console.log("Video ended"),
        onSoundStateChange: (isMuted) => console.log("Sound:", isMuted),
        onPlay: () => console.log("Video playing"),
        isMuted: false,
        loop: false,
        forceDisableSound: false,
        resizeMode: "cover",
        posterResizeMode: "contain",
        style: {
          width: 300,
          height: 400,
        },
      }}
      actions={{
        like: {
          count: 5678,
          isLiked: true,
          onPress: () => console.log("Liked!"),
          style: {
            backgroundColor: "#ff4757",
          },
        },
        share: {
          onPress: () => console.log("Shared!"),
          style: {
            backgroundColor: "#2ed573",
          },
        },
        save: {
          onPress: () => console.log("Saved!"),
          style: {
            backgroundColor: "#3742fa",
          },
        },
        basket: {
          onPress: () => console.log("Added to basket!"),
          style: {
            backgroundColor: "#ffa502",
          },
        },
      }}
      productCard={{
        image: "https://example.com/product.jpg",
        description: "Premium Product with amazing features",
        price: 199.99,
        style: {
          backgroundColor: "#ffffff",
          borderRadius: 10,
          padding: 15,
        },
        button: {
          children: "Add to Cart",
          onPress: () => console.log("Added to cart"),
          style: {
            backgroundColor: "#ff4757",
            borderRadius: 5,
          },
          textStyle: {
            color: "#ffffff",
            fontWeight: "bold",
          },
        },
      }}
      profile={{
        image: "https://example.com/avatar.jpg",
        title: "Jane Smith",
        subTitle: "@janesmith",
        onPress: () => console.log("Profile clicked"),
        style: {
          backgroundColor: "rgba(0,0,0,0.7)",
          borderRadius: 20,
        },
      }}
      style={{
        backgroundColor: "#000000",
      }}
      containerStyle={{
        width: 300,
        height: 500,
      }}
    />
  );
};
```

## API Reference

### Props

#### `ShortSdkNativeProps`

| Property         | Type          | Required | Description                     |
| ---------------- | ------------- | -------- | ------------------------------- |
| `shortVideoId`   | `string`      | Yes      | Unique identifier for the video |
| `mqtt`           | `MqttConfig`  | Yes      | MQTT configuration              |
| `video`          | `Video`       | Yes      | Video configuration             |
| `actions`        | `Actions`     | No       | Social action buttons           |
| `productCard`    | `ProductCard` | No       | Product card display            |
| `profile`        | `Profile`     | No       | User profile display            |
| `style`          | `ViewStyle`   | No       | Container style                 |
| `containerStyle` | `ViewStyle`   | No       | Main container style            |

#### `MqttConfig`

```tsx
interface MqttConfig {
  clientId: string;
  username: string;
  password: string;
}
```

#### `Video`

```tsx
interface Video {
  style?: ViewStyle;
  streamUrl: string;
  coverUrl?: string;
  onEnded?: () => void;
  onSoundStateChange?: (isMuted: boolean) => void;
  isMuted?: boolean;
  onPlay?: () => void;
  loop?: boolean;
  forceDisableSound?: boolean;
  resizeMode?: "stretch" | "contain" | "cover" | "none";
  posterResizeMode?: "stretch" | "contain" | "cover" | "none";
}
```

#### `Actions`

```tsx
interface Actions {
  like?: {
    style?: ViewStyle;
    count: number;
    onPress?: () => void;
    isLiked?: boolean;
  };
  share?: {
    style?: ViewStyle;
    onPress?: () => void;
  };
  save?: {
    style?: ViewStyle;
    onPress?: () => void;
  };
  basket?: {
    style?: ViewStyle;
    onPress?: () => void;
  };
}
```

#### `ProductCard`

```tsx
interface ProductCard {
  style?: ViewStyle;
  image: string | ImageSourcePropType;
  description: string;
  price: number;
  button?: {
    style?: ViewStyle;
    textStyle?: TextStyle;
    onPress?: () => void;
    children?: string;
  };
}
```

#### `Profile`

```tsx
interface Profile {
  style?: ViewStyle;
  image: string | ImageSourcePropType;
  title: string;
  subTitle: string;
  onPress?: () => void;
}
```

### Ref Methods

#### `ShortSdkNativeRef`

```tsx
interface ShortSdkNativeRef {
  sendEvent(type: Events): void;
}
```

#### `Events`

Available event types:

- `"like"`
- `"dislike"`
- `"share"`
- `"basket"`
- `"save"`
- `"add-to-cart"`
- `"seller-view"`
- `"ad-view"`
- `"cart-view"`

## Events

The SDK supports various events that can be tracked:

- **like/dislike**: User interaction with like button
- **share**: User sharing the video
- **save**: User saving the video
- **basket**: User adding to basket
- **add-to-cart**: User adding product to cart
- **seller-view**: User viewing seller profile
- **ad-view**: Ad impression tracking
- **cart-view**: User viewing cart

## Styling

All components support custom styling through the `style` prop. You can customize:

- Colors
- Dimensions
- Borders
- Shadows
- Typography
- Layout

## Requirements

- React Native >= 0.60.0
- React >= 16.8.0

## License

MIT

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request