floating-player 1.0.0

package/README.md

@@ -0,0 +1,76 @@
+# Floating Video Player
+
+A draggable and resizable floating video player (Picture-in-Picture) component for React.
+
+## Installation
+
+```bash
+npm install floating-video-player
+```
+
+## Peer Dependencies
+
+```bash
+npm install react react-dom
+```
+
+## Usage
+
+```tsx
+import React, { useState } from 'react';
+import { FloatingVideoPlayer } from 'floating-video-player';
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setIsOpen(true)}>Open Video</button>
+      
+      <FloatingVideoPlayer
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        content="https://example.com/video.mp4"
+        initialWidth={400}
+        aspectRatio={16 / 9}
+        showControls={true}
+        handleColor="#212121"
+        backgroundColor="#ffffff"
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | - | Controls whether the player is visible |
+| `onClose` | `() => void` | - | Callback when close button is clicked |
+| `content` | `string \| null \| undefined` | - | Video URL source |
+| `initialWidth` | `number` | `window.innerWidth / 3` | Initial width in pixels |
+| `initialHeight` | `number` | Calculated from aspect ratio | Initial height in pixels |
+| `initialPosition` | `{ x: number, y: number }` | Bottom-right | Initial position |
+| `aspectRatio` | `number` | `16/9` | Video aspect ratio |
+| `showControls` | `boolean` | `true` | Show drag handle and close button |
+| `className` | `string` | `''` | Additional CSS class |
+| `style` | `React.CSSProperties` | - | Additional inline styles |
+| `handleColor` | `string` | `'#212121'` | Background color of drag handle |
+| `backgroundColor` | `string` | `'#ffffff'` | Background color of container |
+
+## Features
+
+- Draggable via mouse and touch
+- Resizable from bottom-right corner
+- Maintains aspect ratio while resizing
+- Mobile responsive
+- Automatic boundary constraints
+- Autoplay on open
+- No external UI library dependencies
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface FloatingVideoPlayerProps {
+    open: boolean;
+    onClose: () => void;
+    content: string | undefined | null;
+    showControls?: boolean;
+    className?: string;
+    handleColor?: string;
+    backgroundColor?: string;
+}
+declare const FloatingVideoPlayer: React.FC<FloatingVideoPlayerProps>;
+
+export { FloatingVideoPlayer, type FloatingVideoPlayerProps };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface FloatingVideoPlayerProps {
+    open: boolean;
+    onClose: () => void;
+    content: string | undefined | null;
+    showControls?: boolean;
+    className?: string;
+    handleColor?: string;
+    backgroundColor?: string;
+}
+declare const FloatingVideoPlayer: React.FC<FloatingVideoPlayerProps>;
+
+export { FloatingVideoPlayer, type FloatingVideoPlayerProps };

package/dist/index.js

@@ -0,0 +1,211 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FloatingVideoPlayer: () => FloatingVideoPlayer_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/FloatingVideoPlayer.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FloatingVideoPlayer = ({
+  open,
+  onClose,
+  content,
+  showControls = true,
+  className = "",
+  handleColor = "#212121",
+  backgroundColor = "#ffffff"
+}) => {
+  const [pos, setPos] = (0, import_react.useState)({ x: 0, y: 0 });
+  const [size, setSize] = (0, import_react.useState)({ w: 480, h: 270 });
+  const isDragging = (0, import_react.useRef)(false);
+  const isResizing = (0, import_react.useRef)(false);
+  const dragOffset = (0, import_react.useRef)({ x: 0, y: 0 });
+  const startSize = (0, import_react.useRef)({ w: 0, h: 0 });
+  const startPos = (0, import_react.useRef)({ x: 0, y: 0 });
+  const containerRef = (0, import_react.useRef)(null);
+  const videoRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      const w = Math.min(window.innerWidth * 0.4, 480);
+      const h = 270;
+      setSize({ w, h });
+      setPos({ x: window.innerWidth - w - 10, y: window.innerHeight - h - 10 });
+    }
+  }, [open]);
+  (0, import_react.useEffect)(() => {
+    const onMouseMove = (e) => {
+      if (isDragging.current) {
+        let newX = e.clientX - dragOffset.current.x;
+        let newY = e.clientY - dragOffset.current.y;
+        newX = Math.max(0, Math.min(window.innerWidth - size.w, newX));
+        newY = Math.max(0, Math.min(window.innerHeight - size.h, newY));
+        setPos({ x: newX, y: newY });
+      }
+      if (isResizing.current) {
+        const deltaX = e.clientX - startPos.current.x;
+        const deltaY = e.clientY - startPos.current.y;
+        const newW = Math.max(200, Math.min(startSize.current.w + deltaX, window.innerWidth));
+        const newH = Math.max(150, startSize.current.h + deltaY);
+        setSize({ w: newW, h: newH });
+      }
+    };
+    const onMouseUp = () => {
+      isDragging.current = false;
+      isResizing.current = false;
+      document.body.style.cursor = "default";
+      document.body.style.userSelect = "auto";
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [size]);
+  const onDragStart = (e) => {
+    if (e.target.classList.contains("resize-handle")) return;
+    e.preventDefault();
+    isDragging.current = true;
+    document.body.style.cursor = "grabbing";
+    document.body.style.userSelect = "none";
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (rect) {
+      dragOffset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }
+  };
+  const onResizeStart = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    isResizing.current = true;
+    document.body.style.cursor = "nwse-resize";
+    document.body.style.userSelect = "none";
+    startPos.current = { x: e.clientX, y: e.clientY };
+    startSize.current = { w: size.w, h: size.h };
+  };
+  (0, import_react.useEffect)(() => {
+    if (open && videoRef.current) {
+      videoRef.current.play().catch(() => {
+      });
+    }
+  }, [open]);
+  if (!open || !content) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "fixed",
+        zIndex: 999999,
+        borderRadius: "8px",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        width: size.w,
+        height: size.h,
+        left: pos.x,
+        top: pos.y,
+        backgroundColor,
+        boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
+      },
+      children: [
+        showControls && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            onMouseDown: onDragStart,
+            style: {
+              cursor: "grab",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              backgroundColor: handleColor,
+              color: "#ffffff",
+              padding: "8px 12px",
+              userSelect: "none"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", opacity: 0.8 }, children: "\u22EE\u22EE Drag" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    background: "rgba(255,255,255,0.2)",
+                    border: "none",
+                    color: "#fff",
+                    cursor: "pointer",
+                    padding: "4px 8px",
+                    borderRadius: "4px",
+                    fontSize: "12px"
+                  },
+                  children: "\u2715"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, backgroundColor: "#000", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "video",
+          {
+            ref: videoRef,
+            style: { width: "100%", height: "100%", objectFit: "contain", display: "block" },
+            controls: true,
+            preload: "auto",
+            playsInline: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("source", { src: content, type: "video/mp4" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "resize-handle",
+            onMouseDown: onResizeStart,
+            style: {
+              position: "absolute",
+              right: 0,
+              bottom: 0,
+              width: "20px",
+              height: "20px",
+              cursor: "nwse-resize",
+              backgroundColor: "rgba(255,255,255,0.3)",
+              borderTopLeftRadius: "4px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#333",
+              fontSize: "12px",
+              fontWeight: "bold"
+            },
+            children: "\u2921"
+          }
+        )
+      ]
+    }
+  );
+};
+var FloatingVideoPlayer_default = FloatingVideoPlayer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloatingVideoPlayer
+});

package/dist/index.mjs

@@ -0,0 +1,184 @@
+// src/FloatingVideoPlayer.tsx
+import { useState, useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FloatingVideoPlayer = ({
+  open,
+  onClose,
+  content,
+  showControls = true,
+  className = "",
+  handleColor = "#212121",
+  backgroundColor = "#ffffff"
+}) => {
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [size, setSize] = useState({ w: 480, h: 270 });
+  const isDragging = useRef(false);
+  const isResizing = useRef(false);
+  const dragOffset = useRef({ x: 0, y: 0 });
+  const startSize = useRef({ w: 0, h: 0 });
+  const startPos = useRef({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+  const videoRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      const w = Math.min(window.innerWidth * 0.4, 480);
+      const h = 270;
+      setSize({ w, h });
+      setPos({ x: window.innerWidth - w - 10, y: window.innerHeight - h - 10 });
+    }
+  }, [open]);
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      if (isDragging.current) {
+        let newX = e.clientX - dragOffset.current.x;
+        let newY = e.clientY - dragOffset.current.y;
+        newX = Math.max(0, Math.min(window.innerWidth - size.w, newX));
+        newY = Math.max(0, Math.min(window.innerHeight - size.h, newY));
+        setPos({ x: newX, y: newY });
+      }
+      if (isResizing.current) {
+        const deltaX = e.clientX - startPos.current.x;
+        const deltaY = e.clientY - startPos.current.y;
+        const newW = Math.max(200, Math.min(startSize.current.w + deltaX, window.innerWidth));
+        const newH = Math.max(150, startSize.current.h + deltaY);
+        setSize({ w: newW, h: newH });
+      }
+    };
+    const onMouseUp = () => {
+      isDragging.current = false;
+      isResizing.current = false;
+      document.body.style.cursor = "default";
+      document.body.style.userSelect = "auto";
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [size]);
+  const onDragStart = (e) => {
+    if (e.target.classList.contains("resize-handle")) return;
+    e.preventDefault();
+    isDragging.current = true;
+    document.body.style.cursor = "grabbing";
+    document.body.style.userSelect = "none";
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (rect) {
+      dragOffset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }
+  };
+  const onResizeStart = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    isResizing.current = true;
+    document.body.style.cursor = "nwse-resize";
+    document.body.style.userSelect = "none";
+    startPos.current = { x: e.clientX, y: e.clientY };
+    startSize.current = { w: size.w, h: size.h };
+  };
+  useEffect(() => {
+    if (open && videoRef.current) {
+      videoRef.current.play().catch(() => {
+      });
+    }
+  }, [open]);
+  if (!open || !content) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "fixed",
+        zIndex: 999999,
+        borderRadius: "8px",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        width: size.w,
+        height: size.h,
+        left: pos.x,
+        top: pos.y,
+        backgroundColor,
+        boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
+      },
+      children: [
+        showControls && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onMouseDown: onDragStart,
+            style: {
+              cursor: "grab",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              backgroundColor: handleColor,
+              color: "#ffffff",
+              padding: "8px 12px",
+              userSelect: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", opacity: 0.8 }, children: "\u22EE\u22EE Drag" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    background: "rgba(255,255,255,0.2)",
+                    border: "none",
+                    color: "#fff",
+                    cursor: "pointer",
+                    padding: "4px 8px",
+                    borderRadius: "4px",
+                    fontSize: "12px"
+                  },
+                  children: "\u2715"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, backgroundColor: "#000", position: "relative" }, children: /* @__PURE__ */ jsx(
+          "video",
+          {
+            ref: videoRef,
+            style: { width: "100%", height: "100%", objectFit: "contain", display: "block" },
+            controls: true,
+            preload: "auto",
+            playsInline: true,
+            children: /* @__PURE__ */ jsx("source", { src: content, type: "video/mp4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "resize-handle",
+            onMouseDown: onResizeStart,
+            style: {
+              position: "absolute",
+              right: 0,
+              bottom: 0,
+              width: "20px",
+              height: "20px",
+              cursor: "nwse-resize",
+              backgroundColor: "rgba(255,255,255,0.3)",
+              borderTopLeftRadius: "4px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#333",
+              fontSize: "12px",
+              fontWeight: "bold"
+            },
+            children: "\u2921"
+          }
+        )
+      ]
+    }
+  );
+};
+var FloatingVideoPlayer_default = FloatingVideoPlayer;
+export {
+  FloatingVideoPlayer_default as FloatingVideoPlayer
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "floating-player",
+  "version": "1.0.0",
+  "description": "A draggable and resizable floating video player component for React",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react react-dom",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "react",
+    "video",
+    "player",
+    "floating",
+    "pip",
+    "picture-in-picture",
+    "draggable",
+    "resizable"
+  ],
+  "author": "Your Name <your.email@example.com>",
+  "license": "MIT"
+}