@interactify-live/media-widgets
Advanced tools
A pure JavaScript library for rendering widgets on media players
A pure JavaScript library for rendering interactive widgets and overlays on media players, similar to Instagram's text overlays and interactive elements.
npm install @interactify-live/media-widgets
<!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>
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);
The main class for managing all widgets.
new WidgetManager(container, options);
addWidget(widget) - Add a widget to the managerremoveWidget(widgetId) - Remove a widget by IDgetWidget(widgetId) - Get a widget by IDgetAllWidgets() - Get all widgetsclearWidgets() - Remove all widgetsrender() - Render all widgetsupdate() - Update all widget stylesresize() - Recalculate positions after container resizebringToFront(widgetId) - Bring widget to frontsendToBack(widgetId) - Send widget to backshowAll() - Show all widgetshideAll() - Hide all widgetssetOpacityAll(opacity) - Set opacity for all widgetssetDraggableForAll(draggable) - Set draggable for all widgetsanimateAll(properties, duration, easing) - Animate all widgetsexportConfig() - Export widget configurationimportConfig(config) - Import widget configurationgetWidgetAtPosition(x, y) - Get widget at specific positiondestroy() - Clean up and destroy managerBase class for all widgets with common functionality.
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,
});
setPosition(x, y) - Set widget positionsetSize(width, height) - Set widget sizesetVisible(visible) - Show/hide widgetsetOpacity(opacity) - Set widget opacitysetRotation(rotation) - Set widget rotationsetScale(scaleX, scaleY) - Set widget scalesetZIndex(zIndex) - Set widget z-indexsetDraggable(draggable) - Enable/disable dragginganimate(properties, duration, easing) - Animate widgetrender(container) - Render widget to containerdestroy() - Clean up widgetexportConfig() - Export widget configurationRenders text overlays with rich styling options.
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,
});
setText(text) - Update text contentsetFontSize(size) - Update font sizesetFontFamily(family) - Update font familysetFontWeight(weight) - Update font weightsetFontStyle(style) - Update font stylesetColor(color) - Update text colorsetBackgroundColor(color) - Update background colorsetTextAlign(align) - Update text alignmentsetTextShadow(shadow) - Update text shadowsetStroke(stroke, width) - Set text strokesetGradient(gradient) - Set text gradientsetPadding(padding) - Update paddingsetBorderRadius(radius) - Update border radiussetBorder(border) - Update bordersetAutoSize(enabled) - Enable/disable auto-sizingHigh-level API for rendering interaction data.
new InteractionRenderer(container, {
onInteractionClick: null,
onInteractionDragEnd: null,
isDraggable: true,
});
setContainer(container) - Set container elementsetInteractions(interactions) - Set interactions datarender() - Render all interactionsupdate() - Update rendererdestroy() - Clean up rendererclear() - Clear all widgetsAlignment.LEFT;
Alignment.CENTER;
Alignment.RIGHT;
Alignment.JUSTIFY;
FontWeight.NORMAL;
FontWeight.BOLD;
FontWeight.BOLDER;
FontWeight.LIGHTER;
FontWeight["100"]; // through FontWeight['900']
FontStyle.NORMAL;
FontStyle.ITALIC;
FontStyle.OBLIQUE;
ShapeType.RECTANGLE;
ShapeType.CIRCLE;
ShapeType.ELLIPSE;
ShapeType.TRIANGLE;
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,
});
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"
);
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 current configuration
const config = widgetManager.exportConfig();
console.log(config);
// Import configuration
widgetManager.importConfig(config);
# Install dependencies
npm install
# Build the package
npm run build
# Development mode with watch
npm run dev
MIT License - feel free to use in your projects!
Contributions are welcome! Please feel free to submit a Pull Request.
FAQs
A pure JavaScript library for rendering widgets on media players
We found that @interactify-live/media-widgets demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub has revoked npm classic tokens for publishing; maintainers must migrate, but OpenJS warns OIDC trusted publishing still has risky gaps for critical projects.
Security News
Rust’s crates.io team is advancing an RFC to add a Security tab that surfaces RustSec vulnerability and unsoundness advisories directly on crate pages.
Security News
/Research
Socket found a Rust typosquat (finch-rust) that loads sha-rust to steal credentials, using impersonation and an unpinned dependency to auto-deliver updates.