@interactify-live/media-widgets

v1.0.6

Published

17 days ago

A pure JavaScript library for rendering widgets on media players

0High
0Medium
0Low

salarmgh

media widgets overlay text video player instagram

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

npm install @interactify-live/media-widgets

Quick Start

Basic Usage

<!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

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

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

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

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

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

Alignment.LEFT;
Alignment.CENTER;
Alignment.RIGHT;
Alignment.JUSTIFY;

FontWeight

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

FontStyle

FontStyle.NORMAL;
FontStyle.ITALIC;
FontStyle.OBLIQUE;

ShapeType

ShapeType.RECTANGLE;
ShapeType.CIRCLE;
ShapeType.ELLIPSE;
ShapeType.TRIANGLE;

Examples

Instagram-style Text Overlay

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

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

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

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

// Import configuration
widgetManager.importConfig(config);

Building

# 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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Media Widgets

Features

Installation

Quick Start

Basic Usage

Using Interaction Renderer

API Reference

WidgetManager

Constructor

Methods

Widget

Constructor

Methods

TextWidget

Constructor

Methods

InteractionRenderer

Constructor

Methods

Enums

Alignment

FontWeight

FontStyle

ShapeType

Examples

Instagram-style Text Overlay

Animated Widget

Draggable Widget with Events

Export/Import Configuration

Building

License

Contributing