vidply 1.1.2 → 1.1.4

package/README.md

@@ -2,12 +2,13 @@
 
 **Universal, Accessible Video & Audio Player**
 
-A modern, feature-rich media player built with vanilla ES6 JavaScript. Combines the best accessibility features from AblePlayer with the streaming capabilities of MediaElement.js. Fully internationalized with support for 5 languages and complete WCAG 2.2 AA compliance.
+A modern, feature-rich media player authored in strict TypeScript and shipped as a zero-dependency ES module. Combines the best accessibility features from AblePlayer with the streaming capabilities of MediaElement.js. Fully internationalized with support for 5 languages and complete WCAG 2.2 AA compliance.
 
 ![License](https://img.shields.io/badge/license-GPL--2.0--or--later-blue.svg)
-![ES6](https://img.shields.io/badge/ES6-Module-yellow.svg)
+![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue.svg)
+![ESM](https://img.shields.io/badge/ESM-Module-yellow.svg)
 ![WCAG](https://img.shields.io/badge/WCAG-2.2%20AA-green.svg)
-![Version](https://img.shields.io/badge/version-1.0.45-brightgreen.svg)
+![Version](https://img.shields.io/badge/version-1.1.3-brightgreen.svg)
 
 ## Live Demos
 
@@ -21,11 +22,12 @@ Try VidPly in action:
 
 ## Why VidPly?
 
-- **Zero Dependencies** - Pure vanilla JavaScript, no frameworks required
+- **Zero Dependencies** - Pure vanilla JavaScript / TypeScript, no frameworks required
+- **TypeScript Native** - Authored in strict TypeScript with shipped type declarations (`dist/types/index.d.ts`)
 - **Accessibility First** - WCAG 2.2 AA compliant with full keyboard and screen reader support
 - **Multilingual** - Built-in translations for 5 languages with easy extensibility
 - **Fully Customizable** - CSS variables and comprehensive API
-- **Modern Build** - ES6 modules with tree-shaking support
+- **Modern Build** - ES modules with tree-shaking, code-splitting and source maps
 - **Production Ready** - Thoroughly tested with real-world media content
 
 ## Features
@@ -35,8 +37,13 @@ Try VidPly in action:
 - **Multiple Formats** - MP3, OGG, WAV (audio) / MP4, WebM (video)
 - **YouTube Integration** - Embed YouTube videos with unified controls
 - **Vimeo Integration** - Seamless Vimeo player integration
+- **SoundCloud Integration** - Play SoundCloud tracks and sets via the Widget API with unified controls
 - **HLS Streaming** - Adaptive bitrate streaming with quality selection and dynamic subtitle detection
+  - Uses `hls.js` on Chrome / Firefox / Edge / desktop Safari for full feature parity (quality menu, captions, transcript)
+  - Falls back to native HLS on iOS / iPadOS where MSE is unavailable; native text tracks are still surfaced through the VidPly captions and transcript UI
 - **DASH Streaming** - MPEG-DASH support via dash.js with adaptive quality, TTML and WebVTT subtitles
+- **Buffering Spinner** - Centered loading spinner shown automatically while media is buffering (HTML5, HLS, DASH)
+- **Download Button** - Optional download control with custom URL support (`downloadButton` + `downloadUrl`)
 - **Preview Thumbnails** - Video preview thumbnails on progress bar hover
 - **Playlists** - Full playlist support with auto-advance and navigation
   - Audio playlists with track info
@@ -148,10 +155,10 @@ This creates minified files in the `dist/` folder.
 </script>
 ```
 
-### Option 3: Development (Source Files)
+### Option 3: Development (TypeScript Sources)
 
-```javascript
-import Player from './src/index.js';
+```typescript
+import Player from './src/index';
 
 const player = new Player('#my-video', {
   controls: true,
@@ -161,6 +168,8 @@ const player = new Player('#my-video', {
 });
 ```
 
+> The library is authored in strict TypeScript. Type declarations ship to `dist/types/index.d.ts` so consumers using `tsc` or `vite` get full IntelliSense without any extra `@types` package.
+
 ## Quick Start
 
 ### 1. Build the Player
@@ -223,6 +232,32 @@ That's it! The player auto-initializes.
 <video data-vidply src="https://example.com/manifest.mpd"></video>
 ```
 
+### SoundCloud
+
+```html
+<audio data-vidply src="https://soundcloud.com/artist/track"></audio>
+```
+
+### Download Button
+
+Enable the download button and (optionally) provide a custom URL:
+
+```html
+<video
+  data-vidply
+  data-vidply-download-button="true"
+  data-vidply-download-url="/files/lecture.mp4"
+  src="/streams/lecture/manifest.mpd">
+</video>
+```
+
+```javascript
+const player = new Player('#my-video', {
+  downloadButton: true,
+  downloadUrl: '/files/lecture.mp4' // optional, falls back to current src
+});
+```
+
 ### DASH + HLS + MP4 Fallback
 
 For maximum device compatibility, provide all three formats:
@@ -274,7 +309,9 @@ const player = new Player('#video', {
   signLanguageButton: true,
   fullscreenButton: true,
   pipButton: true,
-  
+  downloadButton: false,        // Show a download button in the control bar
+  downloadUrl: null,            // Optional explicit download URL (falls back to current src)
+
   // Captions
   captions: true,
   captionsDefault: false,
@@ -613,8 +650,8 @@ VidPly provides extensive CSS variables for easy customization:
 
 #### Option 2: JavaScript API
 
-```javascript
-import { i18n } from './src/i18n/i18n.js';
+```typescript
+import { i18n } from './src/i18n/i18n';
 
 // Load language file from URL
 await i18n.loadLanguageFromUrl('pt', 'languages/pt.json');
@@ -631,8 +668,8 @@ i18n.setLanguage('pt');
 
 #### Option 3: Add Translations Programmatically
 
-```javascript
-import { i18n } from './src/i18n/i18n.js';
+```typescript
+import { i18n } from './src/i18n/i18n';
 
 i18n.addTranslation('pt', {
   player: {
@@ -671,14 +708,16 @@ The player supports both JSON and YAML formats for language files.
 
 ## Build Process
 
-VidPly uses a modern build system with esbuild for JavaScript and clean-css for CSS.
+VidPly uses a modern build system with esbuild for TypeScript bundling, the TypeScript compiler for `.d.ts` declarations, and clean-css for CSS.
 
 ### Available Scripts
 
 ```bash
-npm run build        # Build everything (JS + CSS)
-npm run build:js     # Build JavaScript only
+npm run build        # Build everything (JS + types + CSS)
+npm run build:js     # Bundle TypeScript with esbuild (ESM + IIFE)
+npm run build:types  # Emit type declarations to dist/types/
 npm run build:css    # Build CSS only
+npm run typecheck    # Run tsc --noEmit
 npm run watch        # Watch mode for development
 npm run clean        # Clean dist directory
 npm run dev          # Start dev server
@@ -693,6 +732,7 @@ npm run test:all     # Run all tests
 - `dist/prod/vidply.esm.min.js` - ES Module (production)
 - `dist/legacy/vidply.js` - IIFE (development)
 - `dist/legacy/vidply.min.js` - IIFE (production)
+- `dist/types/index.d.ts` - TypeScript declarations
 - `dist/vidply.css` - Styles (unminified)
 - `dist/vidply.min.css` - Styles (minified)
 

package/dist/dev/{vidply.AudioDescriptionManager-2LDAC6BR.js → vidply.AudioDescriptionManager-DCZFE3N2.js}

@@ -5,9 +5,9 @@
  */
 import {
   CaptionManager
-} from "./vidply.chunk-ELJA4GMZ.js";
-import "./vidply.chunk-SXDZXXZD.js";
-import "./vidply.chunk-VLF6H5PZ.js";
+} from "./vidply.chunk-2RIPRXWI.js";
+import "./vidply.chunk-X6PJOVWZ.js";
+import "./vidply.chunk-FDUUJHK6.js";
 
 // src/core/AudioDescriptionManager.ts
 var AudioDescriptionManager = class {
@@ -569,4 +569,4 @@ var AudioDescriptionManager = class {
 export {
   AudioDescriptionManager
 };
-//# sourceMappingURL=vidply.AudioDescriptionManager-2LDAC6BR.js.map
+//# sourceMappingURL=vidply.AudioDescriptionManager-DCZFE3N2.js.map

package/dist/dev/vidply.FloatingPlayerManager-5EA4BYSR.js

@@ -0,0 +1,515 @@
+/*!
+ * Universal, Accessible Video Player
+ * (c) 2026 Matthias Peltzer
+ * Released under GPL-2.0-or-later License
+ */
+import {
+  DraggableResizable,
+  createIconElement
+} from "./vidply.chunk-D6GBU4V6.js";
+import {
+  DOMUtils,
+  i18n
+} from "./vidply.chunk-FDUUJHK6.js";
+
+// src/core/FloatingPlayerManager.ts
+var FLOATING_CLAIM_EVENT = "vidply:floating-claim";
+var DEFAULT_WIDTH = 400;
+var MIN_WIDTH = 240;
+var EDGE_MARGIN = 16;
+var FloatingPlayerManager = class {
+  player;
+  classPrefix;
+  shell;
+  dragHandle;
+  closeButton;
+  resizeHandles;
+  placeholder;
+  draggable;
+  originalParent;
+  originalNextSibling;
+  intersectionObserver;
+  observerTarget;
+  lastRatio;
+  _autoDismissedThisPlay;
+  _playListenerAttached;
+  _onPlayAfterDismiss;
+  _onClaim;
+  _onResize;
+  _onKeyDown;
+  _onEnterFullscreen;
+  _destroyed;
+  _triggerFocusEl;
+  _claimId;
+  constructor(player) {
+    this.player = player;
+    this.classPrefix = player.options.classPrefix || "vidply";
+    this.shell = null;
+    this.dragHandle = null;
+    this.closeButton = null;
+    this.resizeHandles = [];
+    this.placeholder = null;
+    this.draggable = null;
+    this.originalParent = null;
+    this.originalNextSibling = null;
+    this.intersectionObserver = null;
+    this.observerTarget = null;
+    this.lastRatio = 1;
+    this._autoDismissedThisPlay = false;
+    this._playListenerAttached = false;
+    this._onPlayAfterDismiss = null;
+    this._onClaim = null;
+    this._onResize = null;
+    this._onKeyDown = null;
+    this._onEnterFullscreen = null;
+    this._destroyed = false;
+    this._triggerFocusEl = null;
+    this._claimId = `floating-${player.instanceId}-${Date.now()}`;
+    this._setupClaimListener();
+    this._setupFullscreenGuard();
+    this._startObserving();
+  }
+  // ---------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------
+  togglePinned(triggerEl) {
+    if (this._destroyed) return;
+    if (this.player.state.floating === "pinned") {
+      this._autoDismissedThisPlay = true;
+      this._armPlayListenerToClearDismiss();
+      this.exit("manual");
+      return;
+    }
+    this._autoDismissedThisPlay = false;
+    this._triggerFocusEl = triggerEl || this._activeElement();
+    this.enter("pinned");
+  }
+  enter(reason) {
+    if (this._destroyed) return;
+    if (this.player.state.floating === reason) return;
+    if (!this._canFloat(reason)) {
+      return;
+    }
+    if (this.player.state.floating && this.player.state.floating !== reason) {
+      this.player.state.floating = reason;
+      this.player.emit("floatingchange", reason);
+      return;
+    }
+    this._claimSingleton();
+    this._ensureShell();
+    this._mountIntoShell();
+    this._applyInitialGeometry();
+    this.player.state.floating = reason;
+    this.player.emit("floatingchange", reason);
+    queueMicrotask(() => {
+      if (this.closeButton && this.player.state.floating) {
+        try {
+          this.closeButton.focus({ preventScroll: true });
+        } catch {
+        }
+      }
+    });
+  }
+  exit(reason = "manual") {
+    if (this._destroyed && reason !== "destroy") return;
+    if (!this.player.state.floating) return;
+    this._unmountFromShell();
+    this._teardownShell();
+    const priorTrigger = this._triggerFocusEl;
+    this._triggerFocusEl = null;
+    this.player.state.floating = null;
+    this.player.emit("floatingchange", null);
+    if ((reason === "manual" || reason === "dismiss") && priorTrigger) {
+      try {
+        priorTrigger.focus({ preventScroll: true });
+      } catch {
+      }
+    }
+  }
+  /**
+   * Close button: pause, dismiss, and prevent auto-float until the next
+   * user-initiated play event.
+   */
+  dismiss() {
+    if (this._destroyed) return;
+    this._autoDismissedThisPlay = true;
+    this._armPlayListenerToClearDismiss();
+    try {
+      this.player.pause();
+    } catch {
+    }
+    this.exit("dismiss");
+  }
+  destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
+    if (this.player.state && this.player.state.floating) {
+      try {
+        this.exit("destroy");
+      } catch {
+      }
+    }
+    if (this.intersectionObserver) {
+      try {
+        this.intersectionObserver.disconnect();
+      } catch {
+      }
+      this.intersectionObserver = null;
+    }
+    this.observerTarget = null;
+    if (this._onClaim) {
+      window.removeEventListener(FLOATING_CLAIM_EVENT, this._onClaim);
+      this._onClaim = null;
+    }
+    if (this._onResize) {
+      window.removeEventListener("resize", this._onResize);
+      this._onResize = null;
+    }
+    if (this._onEnterFullscreen) {
+      this.player.off("enterfullscreen", this._onEnterFullscreen);
+      this._onEnterFullscreen = null;
+    }
+    if (this._onPlayAfterDismiss && this._playListenerAttached) {
+      this.player.off("play", this._onPlayAfterDismiss);
+      this._playListenerAttached = false;
+      this._onPlayAfterDismiss = null;
+    }
+  }
+  // ---------------------------------------------------------------
+  // Internal: guards
+  // ---------------------------------------------------------------
+  _canFloat(reason) {
+    if (!this.player.options.floating) return false;
+    if (!this.player.container) return false;
+    if (!this.player.element || this.player.element.tagName !== "VIDEO") return false;
+    if (this.player.state.fullscreen) return false;
+    if (this.player.playlistManager) return false;
+    const minWidth = this.player.options.floatingMinViewportWidth ?? 768;
+    if (window.innerWidth < minWidth) return false;
+    if (reason === "auto") {
+      if (this._autoDismissedThisPlay) return false;
+      if (this.player.state.paused) return false;
+      if (!this.player.state.hasStartedPlayback) return false;
+    }
+    return true;
+  }
+  _claimSingleton() {
+    try {
+      window.dispatchEvent(new CustomEvent(FLOATING_CLAIM_EVENT, {
+        detail: { claimId: this._claimId }
+      }));
+    } catch {
+    }
+  }
+  _setupClaimListener() {
+    this._onClaim = (event) => {
+      const detail = event.detail;
+      if (!detail || detail.claimId === this._claimId) return;
+      if (this.player.state.floating) {
+        this.exit("claim");
+      }
+    };
+    window.addEventListener(FLOATING_CLAIM_EVENT, this._onClaim);
+    this._onResize = () => {
+      const minWidth = this.player.options.floatingMinViewportWidth ?? 768;
+      if (this.player.state.floating && window.innerWidth < minWidth) {
+        this.exit("auto");
+      }
+    };
+    window.addEventListener("resize", this._onResize);
+  }
+  _setupFullscreenGuard() {
+    this._onEnterFullscreen = () => {
+      if (this.player.state.floating) {
+        this.exit("manual");
+      }
+    };
+    this.player.on("enterfullscreen", this._onEnterFullscreen);
+  }
+  _armPlayListenerToClearDismiss() {
+    if (this._playListenerAttached) return;
+    this._onPlayAfterDismiss = () => {
+      this._autoDismissedThisPlay = false;
+      if (this._onPlayAfterDismiss) {
+        this.player.off("play", this._onPlayAfterDismiss);
+      }
+      this._playListenerAttached = false;
+      this._onPlayAfterDismiss = null;
+    };
+    this.player.on("play", this._onPlayAfterDismiss);
+    this._playListenerAttached = true;
+  }
+  // ---------------------------------------------------------------
+  // Internal: IntersectionObserver for scroll-triggered auto-float
+  // ---------------------------------------------------------------
+  _startObserving() {
+    if (!("IntersectionObserver" in window)) return;
+    if (!this.player.container) return;
+    this.observerTarget = this.player.container;
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      const entry = entries[entries.length - 1];
+      if (!entry) return;
+      this.lastRatio = entry.intersectionRatio;
+      if (this.player.options.debug) {
+        try {
+          console.log("[vidply:floating] intersection", {
+            ratio: Number(entry.intersectionRatio.toFixed(3)),
+            state: this.player.state.floating,
+            paused: this.player.state.paused,
+            hasStartedPlayback: this.player.state.hasStartedPlayback,
+            dismissed: this._autoDismissedThisPlay
+          });
+        } catch {
+        }
+      }
+      if (this.player.state.floating === "auto") {
+        if (entry.intersectionRatio > 0.5) {
+          this.exit("auto");
+        }
+        return;
+      }
+      if (this.player.state.floating === "pinned") {
+        return;
+      }
+      if (entry.intersectionRatio < 0.1 && this._canFloat("auto")) {
+        this.enter("auto");
+      }
+    }, { threshold: [0, 0.1, 0.5, 0.9] });
+    this.intersectionObserver.observe(this.observerTarget);
+  }
+  _retargetObserver(target) {
+    if (!this.intersectionObserver) return;
+    if (this.observerTarget) {
+      try {
+        this.intersectionObserver.unobserve(this.observerTarget);
+      } catch {
+      }
+    }
+    this.observerTarget = target;
+    try {
+      this.intersectionObserver.observe(target);
+    } catch {
+    }
+  }
+  // ---------------------------------------------------------------
+  // Internal: shell DOM
+  // ---------------------------------------------------------------
+  _ensureShell() {
+    if (this.shell) return;
+    this.shell = DOMUtils.createElement("div", {
+      className: `${this.classPrefix}-floating-shell`,
+      attributes: {
+        "role": "dialog",
+        "aria-modal": "false",
+        "aria-label": i18n.t("player.floatingPlayer"),
+        "data-vidply-floating": "true",
+        "tabindex": "-1"
+      }
+    });
+    this.dragHandle = DOMUtils.createElement("div", {
+      className: `${this.classPrefix}-floating-drag-handle`,
+      attributes: { "aria-hidden": "true" }
+    });
+    this.shell.appendChild(this.dragHandle);
+    this.closeButton = DOMUtils.createElement("button", {
+      className: `${this.classPrefix}-floating-close`,
+      attributes: {
+        "type": "button",
+        "aria-label": i18n.t("player.floatingPlayerClose"),
+        "title": i18n.t("player.floatingPlayerClose")
+      }
+    });
+    this.closeButton.appendChild(createIconElement("close"));
+    this.closeButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      this.dismiss();
+    });
+    this.shell.appendChild(this.closeButton);
+    this._createResizeHandles();
+    this.resizeHandles.forEach((handle) => this.shell.appendChild(handle));
+    this._onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        this.dismiss();
+      }
+    };
+    this.shell.addEventListener("keydown", this._onKeyDown);
+  }
+  _createResizeHandles() {
+    const dirs = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
+    this.resizeHandles = dirs.map((dir) => DOMUtils.createElement("div", {
+      className: `${this.classPrefix}-floating-resize-handle ${this.classPrefix}-floating-resize-${dir}`,
+      attributes: {
+        "data-direction": dir,
+        "data-vidply-managed-resize": "true",
+        "aria-hidden": "true"
+      }
+    }));
+  }
+  _teardownShell() {
+    if (this.draggable) {
+      try {
+        this.draggable.destroy();
+      } catch {
+      }
+      this.draggable = null;
+    }
+    if (this.shell) {
+      if (this._onKeyDown) {
+        this.shell.removeEventListener("keydown", this._onKeyDown);
+        this._onKeyDown = null;
+      }
+      if (this.shell.parentNode) {
+        this.shell.parentNode.removeChild(this.shell);
+      }
+    }
+    this.shell = null;
+    this.dragHandle = null;
+    this.closeButton = null;
+    this.resizeHandles = [];
+  }
+  // ---------------------------------------------------------------
+  // Internal: mount / unmount the player.container
+  // ---------------------------------------------------------------
+  _mountIntoShell() {
+    const container = this.player.container;
+    if (!container || !container.parentNode) return;
+    if (!this.shell) return;
+    const rect = container.getBoundingClientRect();
+    this.originalParent = container.parentNode;
+    this.originalNextSibling = container.nextSibling;
+    this.placeholder = DOMUtils.createElement("div", {
+      className: `${this.classPrefix}-floating-placeholder`,
+      attributes: { "aria-hidden": "true" }
+    });
+    this.placeholder.style.width = `${Math.max(1, rect.width)}px`;
+    this.placeholder.style.height = `${Math.max(1, rect.height)}px`;
+    this.originalParent.insertBefore(this.placeholder, container);
+    this.shell.appendChild(container);
+    document.body.appendChild(this.shell);
+    container.classList.add(`${this.classPrefix}-is-floating`);
+    this._retargetObserver(this.placeholder);
+  }
+  _unmountFromShell() {
+    const container = this.player.container;
+    if (container) {
+      container.classList.remove(`${this.classPrefix}-is-floating`);
+      container.style.removeProperty("width");
+      container.style.removeProperty("height");
+    }
+    if (this.placeholder && this.placeholder.parentNode) {
+      if (container) {
+        this.placeholder.parentNode.insertBefore(container, this.placeholder);
+      }
+      this.placeholder.parentNode.removeChild(this.placeholder);
+    } else if (container && this.originalParent) {
+      if (this.originalNextSibling && this.originalNextSibling.parentNode === this.originalParent) {
+        this.originalParent.insertBefore(container, this.originalNextSibling);
+      } else {
+        this.originalParent.appendChild(container);
+      }
+    }
+    this.placeholder = null;
+    this.originalParent = null;
+    this.originalNextSibling = null;
+    if (container) {
+      this._retargetObserver(container);
+    }
+  }
+  // ---------------------------------------------------------------
+  // Internal: initial geometry + drag/resize wiring
+  // ---------------------------------------------------------------
+  _applyInitialGeometry() {
+    if (!this.shell) return;
+    const prefs = this.player.storage?.getFloatingPreferences?.() || {};
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let width = prefs.width && prefs.width >= MIN_WIDTH ? prefs.width : DEFAULT_WIDTH;
+    width = Math.min(width, Math.max(MIN_WIDTH, vw - EDGE_MARGIN * 2));
+    const containerRect = this.player.container?.getBoundingClientRect();
+    const aspect = containerRect && containerRect.height > 0 ? containerRect.width / containerRect.height : 16 / 9;
+    const defaultHeight = Math.round(width / aspect);
+    let height = prefs.height && prefs.height >= 100 ? prefs.height : defaultHeight;
+    height = Math.min(height, Math.max(100, vh - EDGE_MARGIN * 2));
+    let left;
+    let top;
+    if (typeof prefs.left === "number" && typeof prefs.top === "number") {
+      left = Math.max(EDGE_MARGIN, Math.min(prefs.left, vw - width - EDGE_MARGIN));
+      top = Math.max(EDGE_MARGIN, Math.min(prefs.top, vh - height - EDGE_MARGIN));
+    } else {
+      const pos = this.player.options.floatingPosition || "bottom-right";
+      switch (pos) {
+        case "bottom-left":
+          left = EDGE_MARGIN;
+          top = vh - height - EDGE_MARGIN;
+          break;
+        case "top-right":
+          left = vw - width - EDGE_MARGIN;
+          top = EDGE_MARGIN;
+          break;
+        case "top-left":
+          left = EDGE_MARGIN;
+          top = EDGE_MARGIN;
+          break;
+        case "bottom-right":
+        default:
+          left = vw - width - EDGE_MARGIN;
+          top = vh - height - EDGE_MARGIN;
+          break;
+      }
+    }
+    this.shell.style.width = `${width}px`;
+    this.shell.style.height = `${height}px`;
+    this.shell.style.left = `${left}px`;
+    this.shell.style.top = `${top}px`;
+    this._initDraggable();
+  }
+  _initDraggable() {
+    if (!this.shell) return;
+    if (this.draggable) return;
+    this.draggable = new DraggableResizable(this.shell, {
+      dragHandle: this.dragHandle,
+      resizeHandles: this.resizeHandles,
+      constrainToViewport: true,
+      maintainAspectRatio: true,
+      minWidth: MIN_WIDTH,
+      minHeight: 100,
+      maxWidth: () => Math.max(MIN_WIDTH, window.innerWidth - EDGE_MARGIN * 2),
+      maxHeight: () => Math.max(100, window.innerHeight - EDGE_MARGIN * 2),
+      classPrefix: `${this.classPrefix}-floating`,
+      keyboardDragKey: "d",
+      keyboardResizeKey: "r",
+      keyboardStep: 10,
+      keyboardStepLarge: 50,
+      pointerResizeIndicatorText: i18n.t("player.floatingPlayerDialog"),
+      onDragEnd: () => this._savePrefs(),
+      onResizeEnd: () => this._savePrefs(),
+      onDragStart: (event) => {
+        const target = event.target;
+        if (!target) return true;
+        if (target.closest(`.${this.classPrefix}-floating-close`)) return false;
+        if (target.closest(`.${this.classPrefix}-controls`)) return false;
+        if (target.closest(`.${this.classPrefix}-floating-resize-handle`)) return false;
+        return true;
+      }
+    });
+  }
+  _savePrefs() {
+    if (!this.shell || !this.player.storage?.saveFloatingPreferences) return;
+    const rect = this.shell.getBoundingClientRect();
+    this.player.storage.saveFloatingPreferences({
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      left: Math.round(rect.left),
+      top: Math.round(rect.top)
+    });
+  }
+  _activeElement() {
+    const active = document.activeElement;
+    return active && active instanceof HTMLElement ? active : null;
+  }
+};
+export {
+  FloatingPlayerManager
+};
+//# sourceMappingURL=vidply.FloatingPlayerManager-5EA4BYSR.js.map