npm package: @interactify-live/media-widgets
Description: A pure JavaScript library for rendering widgets on media players
Author: Your Name
Latest version: 1.0.6

# Media Widgets

A pure JavaScript library for rendering interactive widgets and overlays on media players, similar to Instagram's text overlays and interactive elements.

## Features

- 🎯 **Pure JavaScript** - No dependencies, lightweight and fast
- 🎨 **Text Widget** - Instagram-style text overlays with rich styling
- 📍 **Flexible Positioning** - Absolute positioning with drag & drop support
- 🎭 **Rich Styling** - Colors, fonts, shadows, gradients, strokes, and more
- ✨ **Animations** - Smooth transitions and effects with easing
- 📱 **Responsive** - Auto-sizing and responsive design
- 🔧 **Easy API** - Simple and intuitive widget management
- 🎮 **Interactive** - Click handlers, drag & drop, and event callbacks
- 🔄 **Export/Import** - Save and restore widget configurations
- 🎪 **Interaction Renderer** - High-level API for rendering interaction data

## Installation

```bash
npm install @interactify-live/media-widgets
```

## Quick Start

### Basic Usage

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Media Widgets Demo</title>
    <style>
      .media-player {
        width: 640px;
        height: 360px;
        background: #000;
        position: relative;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <div id="media-player" class="media-player">
      <!-- Your media content goes here -->
      <video
        src="your-video.mp4"
        controls
        style="width: 100%; height: 100%;"
      ></video>
    </div>

    <script type="module">
      import {
        WidgetManager,
        TextWidget,
        Alignment,
        FontWeight,
        FontStyle,
      } from "@interactify-live/media-widgets";

      // Initialize widget manager
      const widgetManager = new WidgetManager(
        document.getElementById("media-player")
      );

      // Create a text widget
      const textWidget = new TextWidget({
        text: "Amazing Video!",
        x: 50,
        y: 50,
        fontSize: 24,
        fontWeight: FontWeight.BOLD,
        color: "#ffffff",
        textShadow: "2px 2px 4px rgba(0,0,0,0.8)",
        backgroundColor: "rgba(0,0,0,0.5)",
        padding: 15,
        borderRadius: 8,
        isDraggable: true,
      });

      // Add widget to manager
      widgetManager.addWidget(textWidget);
    </script>
  </body>
</html>
```

### Using Interaction Renderer

```javascript
import { InteractionRenderer } from "@interactify-live/media-widgets";

// Initialize renderer
const renderer = new InteractionRenderer(
  document.getElementById("media-player"),
  {
    isDraggable: true,
    onInteractionClick: (interaction) => {
      console.log("Interaction clicked:", interaction);
    },
    onInteractionDragEnd: (index, position) => {
      console.log("Widget moved:", index, position);
    },
  }
);

// Set interactions data
const interactions = [
  {
    interaction: "text",
    geometric: {
      x: 100,
      y: 100,
      width: 200,
      height: 50,
    },
    payload: {
      text: "Hello World!",
      size: 24,
      color: "#ffffff",
      background: "rgba(0,0,0,0.5)",
      borderRadius: 8,
    },
  },
];

renderer.setInteractions(interactions);
```

## API Reference

### WidgetManager

The main class for managing all widgets.

#### Constructor

```javascript
new WidgetManager(container, options);
```

#### Methods

- `addWidget(widget)` - Add a widget to the manager
- `removeWidget(widgetId)` - Remove a widget by ID
- `getWidget(widgetId)` - Get a widget by ID
- `getAllWidgets()` - Get all widgets
- `clearWidgets()` - Remove all widgets
- `render()` - Render all widgets
- `update()` - Update all widget styles
- `resize()` - Recalculate positions after container resize
- `bringToFront(widgetId)` - Bring widget to front
- `sendToBack(widgetId)` - Send widget to back
- `showAll()` - Show all widgets
- `hideAll()` - Hide all widgets
- `setOpacityAll(opacity)` - Set opacity for all widgets
- `setDraggableForAll(draggable)` - Set draggable for all widgets
- `animateAll(properties, duration, easing)` - Animate all widgets
- `exportConfig()` - Export widget configuration
- `importConfig(config)` - Import widget configuration
- `getWidgetAtPosition(x, y)` - Get widget at specific position
- `destroy()` - Clean up and destroy manager

### Widget

Base class for all widgets with common functionality.

#### Constructor

```javascript
new Widget({
  id: "unique-id",
  x: 0,
  y: 0,
  width: 100,
  height: 50,
  visible: true,
  zIndex: 1,
  opacity: 1,
  rotation: 0,
  scale: { x: 1, y: 1 },
  isDraggable: false,
  onClick: null,
  onMouseEnter: null,
  onMouseLeave: null,
  onDragStart: null,
  onDragMove: null,
  onDragEnd: null,
});
```

#### Methods

- `setPosition(x, y)` - Set widget position
- `setSize(width, height)` - Set widget size
- `setVisible(visible)` - Show/hide widget
- `setOpacity(opacity)` - Set widget opacity
- `setRotation(rotation)` - Set widget rotation
- `setScale(scaleX, scaleY)` - Set widget scale
- `setZIndex(zIndex)` - Set widget z-index
- `setDraggable(draggable)` - Enable/disable dragging
- `animate(properties, duration, easing)` - Animate widget
- `render(container)` - Render widget to container
- `destroy()` - Clean up widget
- `exportConfig()` - Export widget configuration

### TextWidget

Renders text overlays with rich styling options.

#### Constructor

```javascript
new TextWidget({
  text: "Your text here",
  x: 0,
  y: 0,
  width: 200,
  height: 50,
  fontSize: 16,
  fontFamily: "Arial, sans-serif",
  fontWeight: FontWeight.NORMAL,
  fontStyle: FontStyle.NORMAL,
  color: "#ffffff",
  backgroundColor: "transparent",
  textAlign: Alignment.LEFT,
  lineHeight: 1.2,
  letterSpacing: 0,
  textShadow: "",
  padding: 10,
  borderRadius: 8,
  border: "none",
  maxWidth: null,
  maxHeight: null,
  overflow: "visible",
  wordWrap: "normal",
  whiteSpace: "normal",
  autoSize: false,
  minFontSize: 8,
  maxFontSize: 72,
  stroke: null,
  strokeWidth: 1,
  gradient: null,
});
```

#### Methods

- `setText(text)` - Update text content
- `setFontSize(size)` - Update font size
- `setFontFamily(family)` - Update font family
- `setFontWeight(weight)` - Update font weight
- `setFontStyle(style)` - Update font style
- `setColor(color)` - Update text color
- `setBackgroundColor(color)` - Update background color
- `setTextAlign(align)` - Update text alignment
- `setTextShadow(shadow)` - Update text shadow
- `setStroke(stroke, width)` - Set text stroke
- `setGradient(gradient)` - Set text gradient
- `setPadding(padding)` - Update padding
- `setBorderRadius(radius)` - Update border radius
- `setBorder(border)` - Update border
- `setAutoSize(enabled)` - Enable/disable auto-sizing

### InteractionRenderer

High-level API for rendering interaction data.

#### Constructor

```javascript
new InteractionRenderer(container, {
  onInteractionClick: null,
  onInteractionDragEnd: null,
  isDraggable: true,
});
```

#### Methods

- `setContainer(container)` - Set container element
- `setInteractions(interactions)` - Set interactions data
- `render()` - Render all interactions
- `update()` - Update renderer
- `destroy()` - Clean up renderer
- `clear()` - Clear all widgets

## Enums

### Alignment

```javascript
Alignment.LEFT;
Alignment.CENTER;
Alignment.RIGHT;
Alignment.JUSTIFY;
```

### FontWeight

```javascript
FontWeight.NORMAL;
FontWeight.BOLD;
FontWeight.BOLDER;
FontWeight.LIGHTER;
FontWeight["100"]; // through FontWeight['900']
```

### FontStyle

```javascript
FontStyle.NORMAL;
FontStyle.ITALIC;
FontStyle.OBLIQUE;
```

### ShapeType

```javascript
ShapeType.RECTANGLE;
ShapeType.CIRCLE;
ShapeType.ELLIPSE;
ShapeType.TRIANGLE;
```

## Examples

### Instagram-style Text Overlay

```javascript
const instagramText = new TextWidget({
  text: "Living my best life ✨",
  x: 50,
  y: 300,
  fontSize: 28,
  fontWeight: FontWeight.BOLD,
  color: "#ffffff",
  textShadow: "2px 2px 8px rgba(0,0,0,0.8)",
  backgroundColor: "rgba(0,0,0,0.3)",
  padding: 20,
  borderRadius: 25,
  autoSize: true,
  isDraggable: true,
});
```

### Animated Widget

```javascript
const animatedWidget = new TextWidget({
  text: "Watch this!",
  x: 100,
  y: 100,
  fontSize: 24,
  color: "#ff6b6b",
});

// Add animation
animatedWidget.animate(
  {
    rotation: 360,
    scale: { x: 1.2, y: 1.2 },
    color: "#4ecdc4",
  },
  1000,
  "ease-in-out"
);
```

### Draggable Widget with Events

```javascript
const interactiveWidget = new TextWidget({
  text: "Click me!",
  x: 200,
  y: 150,
  isDraggable: true,
  onClick: (event, widget) => {
    console.log("Widget clicked!");
    widget.setText("Clicked!");
  },
  onDragEnd: (event, widget) => {
    console.log("Widget dragged to:", widget.x, widget.y);
  },
});
```

### Export/Import Configuration

```javascript
// Export current configuration
const config = widgetManager.exportConfig();
console.log(config);

// Import configuration
widgetManager.importConfig(config);
```

## Building

```bash
# Install dependencies
npm install

# Build the package
npm run build

# Development mode with watch
npm run dev
```

## License

MIT License - feel free to use in your projects!

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.