@magic-spells/responsive-video 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Cory Schulz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,245 @@
+# @magic-spells/responsive-video
+
+[![npm version](https://img.shields.io/npm/v/@magic-spells/responsive-video.svg)](https://www.npmjs.com/package/@magic-spells/responsive-video)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@magic-spells/responsive-video)](https://bundlephobia.com/package/@magic-spells/responsive-video)
+[![license](https://img.shields.io/npm/l/@magic-spells/responsive-video.svg)](https://github.com/magic-spells/responsive-video/blob/main/LICENSE)
+
+A lightweight, zero-dependency web component that intelligently swaps video sources and poster images based on viewport width. Built for performance-critical hero sections and modern web applications where mobile users should never download desktop assets (and vice versa).
+
+**[Live Demo](https://magic-spells.github.io/responsive-video/demo/)**
+
+## Why This Exists
+
+Traditional responsive video implementations using `<source>` tags with media queries load multiple sources, wasting bandwidth and degrading performance on mobile devices. This component solves that by:
+
+- **Loading only what's needed**: Mobile users download only mobile videos and posters, desktop users get desktop assets
+- **Automatic switching**: Responds to viewport changes and updates the active source seamlessly
+- **Performance-first**: Uses requestAnimationFrame for resize throttling and passive event listeners
+- **Framework-agnostic**: Pure web component that works with any framework or no framework at all
+- **Tiny footprint**: Single class, no dependencies, ~2KB minified
+
+## Installation
+
+```bash
+npm install @magic-spells/responsive-video
+```
+
+Or use directly from a CDN:
+
+```html
+<script type="module" src="https://unpkg.com/@magic-spells/responsive-video"></script>
+```
+
+## Quick Start
+
+```html
+<responsive-video
+  mobile-video="https://cdn.example.com/video-portrait.mp4"
+  desktop-video="https://cdn.example.com/video-landscape.mp4"
+  mobile-poster="https://cdn.example.com/poster-portrait.jpg"
+  desktop-poster="https://cdn.example.com/poster-landscape.jpg"
+  breakpoint="900"
+>
+  <video autoplay muted playsinline loop></video>
+</responsive-video>
+```
+
+The component automatically:
+1. Detects the viewport width
+2. Loads the appropriate video source and poster image
+3. Applies the `src` and `poster` to the child `<video>` element
+4. Re-evaluates when the window resizes
+5. Sets `data-active-mode` to "mobile" or "desktop" for styling hooks
+
+## API
+
+### Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `mobile-video` | String | — | Video source URL for viewports narrower than the breakpoint |
+| `desktop-video` | String | — | Video source URL for viewports equal to or wider than the breakpoint |
+| `mobile-poster` | String | — | Poster image URL for viewports narrower than the breakpoint (optional) |
+| `desktop-poster` | String | — | Poster image URL for viewports equal to or wider than the breakpoint (optional) |
+| `breakpoint` | Number | `768` | Viewport width (in pixels) where the switch between mobile and desktop occurs |
+
+### Behavior
+
+- If viewport width ≥ breakpoint → loads `desktop-video` and `desktop-poster`
+- If viewport width < breakpoint → loads `mobile-video` and `mobile-poster`
+- If `mobile-video` is missing → falls back to `desktop-video` on all screen sizes
+- Poster attributes are optional—if omitted, no poster is set
+- If no matching video exists → component does nothing
+- The component looks for the first `<video>` element in its light DOM
+
+### Data Attributes
+
+The component sets `data-active-mode` on itself to indicate which source is currently active:
+
+```html
+<responsive-video data-active-mode="mobile">...</responsive-video>
+```
+
+You can use this for conditional styling:
+
+```css
+responsive-video[data-active-mode="mobile"] {
+  /* Mobile-specific styles */
+}
+
+responsive-video[data-active-mode="desktop"] {
+  aspect-ratio: 16/9;
+}
+```
+
+## How It Works
+
+The `ResponsiveVideo` class extends `HTMLElement` and implements the Custom Elements API with these lifecycle hooks:
+
+### Lifecycle
+
+1. **`connectedCallback()`**: Queries for the child `<video>` element, attaches resize listeners, and performs initial source evaluation
+2. **`disconnectedCallback()`**: Cleans up event listeners and cancels pending animation frames
+
+The component does not use `observedAttributes` or `attributeChangedCallback`—attributes are read dynamically on connect and during resize events.
+
+### Resize Handling
+
+Window resize events are throttled using `requestAnimationFrame` to prevent excessive recalculation. The component only updates the video source when it detects an actual change (e.g., crossing the breakpoint threshold or when the video URL differs from the currently loaded source).
+
+### Source Swapping
+
+When the source needs to change:
+1. The component updates the `<video>` element's `src` attribute
+2. Updates the `poster` attribute (if a poster URL is provided for the active mode)
+3. Calls `video.load()` to initiate loading
+4. Attempts to auto-play if `video.autoplay` is true (catches and ignores errors for muted autoplay requirements)
+5. Updates `data-active-mode` to reflect the active source ("mobile" or "desktop")
+
+### Private Implementation Details
+
+The component uses private class fields (denoted by `#`) to encapsulate state:
+- `#videoEl`: Reference to the child video element
+- `#currentSrc`: Currently loaded video URL to prevent redundant updates
+- `#resizeRaf`: requestAnimationFrame ID for resize throttling
+- `#boundResize`: Cached resize handler reference
+
+## Use Cases
+
+### E-commerce Hero Sections
+
+```html
+<responsive-video
+  mobile-video="/assets/videos/hero-mobile.mp4"
+  desktop-video="/assets/videos/hero-desktop.mp4"
+  mobile-poster="/assets/images/hero-mobile-poster.jpg"
+  desktop-poster="/assets/images/hero-desktop-poster.jpg"
+  breakpoint="768"
+>
+  <video autoplay muted playsinline loop></video>
+</responsive-video>
+```
+
+### Progressive Enhancement
+
+```html
+<responsive-video
+  mobile-video="/videos/hero-mobile.mp4"
+  desktop-video="/videos/hero-desktop.mp4"
+  mobile-poster="/images/hero-mobile-poster.jpg"
+  desktop-poster="/images/hero-desktop-poster.jpg"
+>
+  <video autoplay muted playsinline loop>
+    <!-- Fallback for browsers without custom element support -->
+    <source src="/videos/hero-desktop.mp4" type="video/mp4">
+  </video>
+</responsive-video>
+```
+
+## Development
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start the dev server with live reload:
+
+```bash
+npm run dev
+```
+
+This launches a local server on port 3006 with hot module replacement. The server serves both `dist/` and `demo/` directories. The demo uses CDN-hosted videos to avoid committing large files to the repository.
+
+### Project Structure
+
+```
+responsive-video/
+├── src/
+│   └── responsive-video.js    # Source code (ES class)
+├── demo/
+│   └── index.html             # Demo page (uses CDN video URLs)
+├── dist/                      # Build outputs (generated)
+│   ├── responsive-video.esm.js    # ES Module
+│   ├── responsive-video.cjs.js    # CommonJS
+│   ├── responsive-video.js        # UMD
+│   └── responsive-video.min.js    # Minified UMD
+├── rollup.config.mjs          # Rollup bundler config
+└── package.json
+```
+
+### Build Commands
+
+```bash
+# Production build (creates all distribution formats)
+npm run build
+
+# Lint source code
+npm run lint
+
+# Format code with Prettier
+npm run format
+
+# Start dev server
+npm run dev
+```
+
+### Build Outputs
+
+The build process generates four distribution formats:
+
+1. **ESM** (`responsive-video.esm.js`) — For modern bundlers and `<script type="module">`
+2. **CommonJS** (`responsive-video.cjs.js`) — For Node.js and older bundlers
+3. **UMD** (`responsive-video.js`) — Universal module for direct browser usage
+4. **Minified UMD** (`responsive-video.min.js`) — Production-ready minified bundle
+
+All builds include sourcemaps except the minified version.
+
+## Browser Support
+
+Supports all modern browsers that implement [Custom Elements v1](https://caniuse.com/custom-elementsv1):
+
+- Chrome/Edge 67+
+- Firefox 63+
+- Safari 10.1+
+- iOS Safari 10.3+
+
+For older browsers, use a [Custom Elements polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements).
+
+## Performance Considerations
+
+- Component registers with the Custom Elements registry only once
+- Resize events are throttled via `requestAnimationFrame`
+- Source updates are skipped when no actual change is detected
+- Event listeners use `{ passive: true }` for better scroll performance
+- Video element is cached to avoid repeated DOM queries
+- Cleanup happens automatically on disconnect
+
+## License
+
+MIT © [Cory Schulz](https://github.com/magic-spells)
+
+## Contributing
+
+Issues and pull requests are welcome at [github.com/magic-spells/responsive-video](https://github.com/magic-spells/responsive-video).

package/dist/responsive-video.cjs.js

@@ -0,0 +1,163 @@
+'use strict';
+
+/**
+ * Responsive video loader that swaps sources based on viewport width.
+ * Only the matching source is applied so mobile users never download the desktop asset (and vice versa).
+ */
+class ResponsiveVideo extends HTMLElement {
+  #videoEl = null;
+  #currentSrc = null;
+  #resizeRaf = 0;
+  #boundResize = null;
+
+  connectedCallback() {
+    this.#videoEl = this.querySelector("video");
+    if (!this.#videoEl) {
+      return;
+    }
+    this.attachEvents();
+    this.updateSource();
+  }
+
+  disconnectedCallback() {
+    this.detachEvents();
+  }
+
+  /**
+   * Sets up listeners that keep the video source aligned with the viewport.
+   */
+  attachEvents() {
+    if (typeof window === "undefined" || this.#boundResize) {
+      return;
+    }
+
+    this.#boundResize = () => {
+      if (this.#resizeRaf) {
+        return;
+      }
+      this.#resizeRaf = requestAnimationFrame(() => {
+        this.#resizeRaf = 0;
+        this.updateSource();
+      });
+    };
+
+    window.addEventListener("resize", this.#boundResize, { passive: true });
+  }
+
+  /**
+   * Removes listeners and cancels pending work.
+   */
+  detachEvents() {
+    if (typeof window !== "undefined" && this.#boundResize) {
+      window.removeEventListener("resize", this.#boundResize);
+    }
+    if (this.#resizeRaf) {
+      cancelAnimationFrame(this.#resizeRaf);
+      this.#resizeRaf = 0;
+    }
+    this.#boundResize = null;
+  }
+
+  /**
+   * Calculates which source should be active and updates the video if needed.
+   */
+  updateSource() {
+    if (!this.#videoEl) {
+      return;
+    }
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const breakpoint = this.#getBreakpoint();
+    const mobileVideo = this.getAttribute("mobile-video")?.trim() || "";
+    const desktopVideo = this.getAttribute("desktop-video")?.trim() || "";
+    const mobilePoster = this.getAttribute("mobile-poster")?.trim() || "";
+    const desktopPoster = this.getAttribute("desktop-poster")?.trim() || "";
+    const viewportWidth = window.innerWidth || 0;
+
+    let nextMode = null;
+    let nextVideo = "";
+    let nextPoster = "";
+
+    if (viewportWidth >= breakpoint && desktopVideo) {
+      nextMode = "desktop";
+      nextVideo = desktopVideo;
+      nextPoster = desktopPoster;
+    } else if (mobileVideo) {
+      nextMode = "mobile";
+      nextVideo = mobileVideo;
+      nextPoster = mobilePoster;
+    } else if (desktopVideo) {
+      // Fallback to desktop when mobile video is missing.
+      nextMode = "desktop";
+      nextVideo = desktopVideo;
+      nextPoster = desktopPoster;
+    }
+
+    if (!nextVideo) {
+      return;
+    }
+
+    if (nextVideo === this.#currentSrc) {
+      return;
+    }
+
+    this.#applySource(nextVideo, nextPoster, nextMode);
+  }
+
+  #getBreakpoint() {
+    const attr = this.getAttribute("breakpoint");
+    const parsed = parseInt(attr ?? "", 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : 768;
+  }
+
+  #applySource(videoUrl, posterUrl, mode) {
+    const video = this.#videoEl;
+    if (!video) {
+      return;
+    }
+
+    const currentSrc = video.getAttribute("src");
+    if (currentSrc === videoUrl) {
+      this.#currentSrc = videoUrl;
+      if (mode) {
+        this.dataset.activeMode = mode;
+      }
+      return;
+    }
+
+    video.setAttribute("src", videoUrl);
+
+    if (posterUrl) {
+      video.setAttribute("poster", posterUrl);
+    } else {
+      video.removeAttribute("poster");
+    }
+
+    video.load();
+
+    if (video.autoplay && typeof video.play === "function") {
+      const playPromise = video.play();
+      if (playPromise && typeof playPromise.catch === "function") {
+        playPromise.catch(() => {
+          // Most browsers require muted autoplay; ignore failures quietly.
+        });
+      }
+    }
+
+    this.#currentSrc = videoUrl;
+    if (mode) {
+      this.dataset.activeMode = mode;
+    } else {
+      delete this.dataset.activeMode;
+    }
+  }
+}
+
+if (!customElements.get("responsive-video")) {
+  customElements.define("responsive-video", ResponsiveVideo);
+}
+
+exports.ResponsiveVideo = ResponsiveVideo;
+//# sourceMappingURL=responsive-video.cjs.js.map

package/dist/responsive-video.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-video.cjs.js","sources":["../src/responsive-video.js"],"sourcesContent":["/**\n * Responsive video loader that swaps sources based on viewport width.\n * Only the matching source is applied so mobile users never download the desktop asset (and vice versa).\n */\nexport class ResponsiveVideo extends HTMLElement {\n  #videoEl = null;\n  #currentSrc = null;\n  #resizeRaf = 0;\n  #boundResize = null;\n\n  connectedCallback() {\n    this.#videoEl = this.querySelector(\"video\");\n    if (!this.#videoEl) {\n      return;\n    }\n    this.attachEvents();\n    this.updateSource();\n  }\n\n  disconnectedCallback() {\n    this.detachEvents();\n  }\n\n  /**\n   * Sets up listeners that keep the video source aligned with the viewport.\n   */\n  attachEvents() {\n    if (typeof window === \"undefined\" || this.#boundResize) {\n      return;\n    }\n\n    this.#boundResize = () => {\n      if (this.#resizeRaf) {\n        return;\n      }\n      this.#resizeRaf = requestAnimationFrame(() => {\n        this.#resizeRaf = 0;\n        this.updateSource();\n      });\n    };\n\n    window.addEventListener(\"resize\", this.#boundResize, { passive: true });\n  }\n\n  /**\n   * Removes listeners and cancels pending work.\n   */\n  detachEvents() {\n    if (typeof window !== \"undefined\" && this.#boundResize) {\n      window.removeEventListener(\"resize\", this.#boundResize);\n    }\n    if (this.#resizeRaf) {\n      cancelAnimationFrame(this.#resizeRaf);\n      this.#resizeRaf = 0;\n    }\n    this.#boundResize = null;\n  }\n\n  /**\n   * Calculates which source should be active and updates the video if needed.\n   */\n  updateSource() {\n    if (!this.#videoEl) {\n      return;\n    }\n    if (typeof window === \"undefined\") {\n      return;\n    }\n\n    const breakpoint = this.#getBreakpoint();\n    const mobileVideo = this.getAttribute(\"mobile-video\")?.trim() || \"\";\n    const desktopVideo = this.getAttribute(\"desktop-video\")?.trim() || \"\";\n    const mobilePoster = this.getAttribute(\"mobile-poster\")?.trim() || \"\";\n    const desktopPoster = this.getAttribute(\"desktop-poster\")?.trim() || \"\";\n    const viewportWidth = window.innerWidth || 0;\n\n    let nextMode = null;\n    let nextVideo = \"\";\n    let nextPoster = \"\";\n\n    if (viewportWidth >= breakpoint && desktopVideo) {\n      nextMode = \"desktop\";\n      nextVideo = desktopVideo;\n      nextPoster = desktopPoster;\n    } else if (mobileVideo) {\n      nextMode = \"mobile\";\n      nextVideo = mobileVideo;\n      nextPoster = mobilePoster;\n    } else if (desktopVideo) {\n      // Fallback to desktop when mobile video is missing.\n      nextMode = \"desktop\";\n      nextVideo = desktopVideo;\n      nextPoster = desktopPoster;\n    }\n\n    if (!nextVideo) {\n      return;\n    }\n\n    if (nextVideo === this.#currentSrc) {\n      return;\n    }\n\n    this.#applySource(nextVideo, nextPoster, nextMode);\n  }\n\n  #getBreakpoint() {\n    const attr = this.getAttribute(\"breakpoint\");\n    const parsed = parseInt(attr ?? \"\", 10);\n    return Number.isFinite(parsed) && parsed > 0 ? parsed : 768;\n  }\n\n  #applySource(videoUrl, posterUrl, mode) {\n    const video = this.#videoEl;\n    if (!video) {\n      return;\n    }\n\n    const currentSrc = video.getAttribute(\"src\");\n    if (currentSrc === videoUrl) {\n      this.#currentSrc = videoUrl;\n      if (mode) {\n        this.dataset.activeMode = mode;\n      }\n      return;\n    }\n\n    video.setAttribute(\"src\", videoUrl);\n\n    if (posterUrl) {\n      video.setAttribute(\"poster\", posterUrl);\n    } else {\n      video.removeAttribute(\"poster\");\n    }\n\n    video.load();\n\n    if (video.autoplay && typeof video.play === \"function\") {\n      const playPromise = video.play();\n      if (playPromise && typeof playPromise.catch === \"function\") {\n        playPromise.catch(() => {\n          // Most browsers require muted autoplay; ignore failures quietly.\n        });\n      }\n    }\n\n    this.#currentSrc = videoUrl;\n    if (mode) {\n      this.dataset.activeMode = mode;\n    } else {\n      delete this.dataset.activeMode;\n    }\n  }\n}\n\nif (!customElements.get(\"responsive-video\")) {\n  customElements.define(\"responsive-video\", ResponsiveVideo);\n}\n"],"names":[],"mappings":"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"}

package/dist/responsive-video.esm.js

@@ -0,0 +1,161 @@
+/**
+ * Responsive video loader that swaps sources based on viewport width.
+ * Only the matching source is applied so mobile users never download the desktop asset (and vice versa).
+ */
+class ResponsiveVideo extends HTMLElement {
+  #videoEl = null;
+  #currentSrc = null;
+  #resizeRaf = 0;
+  #boundResize = null;
+
+  connectedCallback() {
+    this.#videoEl = this.querySelector("video");
+    if (!this.#videoEl) {
+      return;
+    }
+    this.attachEvents();
+    this.updateSource();
+  }
+
+  disconnectedCallback() {
+    this.detachEvents();
+  }
+
+  /**
+   * Sets up listeners that keep the video source aligned with the viewport.
+   */
+  attachEvents() {
+    if (typeof window === "undefined" || this.#boundResize) {
+      return;
+    }
+
+    this.#boundResize = () => {
+      if (this.#resizeRaf) {
+        return;
+      }
+      this.#resizeRaf = requestAnimationFrame(() => {
+        this.#resizeRaf = 0;
+        this.updateSource();
+      });
+    };
+
+    window.addEventListener("resize", this.#boundResize, { passive: true });
+  }
+
+  /**
+   * Removes listeners and cancels pending work.
+   */
+  detachEvents() {
+    if (typeof window !== "undefined" && this.#boundResize) {
+      window.removeEventListener("resize", this.#boundResize);
+    }
+    if (this.#resizeRaf) {
+      cancelAnimationFrame(this.#resizeRaf);
+      this.#resizeRaf = 0;
+    }
+    this.#boundResize = null;
+  }
+
+  /**
+   * Calculates which source should be active and updates the video if needed.
+   */
+  updateSource() {
+    if (!this.#videoEl) {
+      return;
+    }
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const breakpoint = this.#getBreakpoint();
+    const mobileVideo = this.getAttribute("mobile-video")?.trim() || "";
+    const desktopVideo = this.getAttribute("desktop-video")?.trim() || "";
+    const mobilePoster = this.getAttribute("mobile-poster")?.trim() || "";
+    const desktopPoster = this.getAttribute("desktop-poster")?.trim() || "";
+    const viewportWidth = window.innerWidth || 0;
+
+    let nextMode = null;
+    let nextVideo = "";
+    let nextPoster = "";
+
+    if (viewportWidth >= breakpoint && desktopVideo) {
+      nextMode = "desktop";
+      nextVideo = desktopVideo;
+      nextPoster = desktopPoster;
+    } else if (mobileVideo) {
+      nextMode = "mobile";
+      nextVideo = mobileVideo;
+      nextPoster = mobilePoster;
+    } else if (desktopVideo) {
+      // Fallback to desktop when mobile video is missing.
+      nextMode = "desktop";
+      nextVideo = desktopVideo;
+      nextPoster = desktopPoster;
+    }
+
+    if (!nextVideo) {
+      return;
+    }
+
+    if (nextVideo === this.#currentSrc) {
+      return;
+    }
+
+    this.#applySource(nextVideo, nextPoster, nextMode);
+  }
+
+  #getBreakpoint() {
+    const attr = this.getAttribute("breakpoint");
+    const parsed = parseInt(attr ?? "", 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : 768;
+  }
+
+  #applySource(videoUrl, posterUrl, mode) {
+    const video = this.#videoEl;
+    if (!video) {
+      return;
+    }
+
+    const currentSrc = video.getAttribute("src");
+    if (currentSrc === videoUrl) {
+      this.#currentSrc = videoUrl;
+      if (mode) {
+        this.dataset.activeMode = mode;
+      }
+      return;
+    }
+
+    video.setAttribute("src", videoUrl);
+
+    if (posterUrl) {
+      video.setAttribute("poster", posterUrl);
+    } else {
+      video.removeAttribute("poster");
+    }
+
+    video.load();
+
+    if (video.autoplay && typeof video.play === "function") {
+      const playPromise = video.play();
+      if (playPromise && typeof playPromise.catch === "function") {
+        playPromise.catch(() => {
+          // Most browsers require muted autoplay; ignore failures quietly.
+        });
+      }
+    }
+
+    this.#currentSrc = videoUrl;
+    if (mode) {
+      this.dataset.activeMode = mode;
+    } else {
+      delete this.dataset.activeMode;
+    }
+  }
+}
+
+if (!customElements.get("responsive-video")) {
+  customElements.define("responsive-video", ResponsiveVideo);
+}
+
+export { ResponsiveVideo };
+//# sourceMappingURL=responsive-video.esm.js.map

package/dist/responsive-video.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-video.esm.js","sources":["../src/responsive-video.js"],"sourcesContent":["/**\n * Responsive video loader that swaps sources based on viewport width.\n * Only the matching source is applied so mobile users never download the desktop asset (and vice versa).\n */\nexport class ResponsiveVideo extends HTMLElement {\n  #videoEl = null;\n  #currentSrc = null;\n  #resizeRaf = 0;\n  #boundResize = null;\n\n  connectedCallback() {\n    this.#videoEl = this.querySelector(\"video\");\n    if (!this.#videoEl) {\n      return;\n    }\n    this.attachEvents();\n    this.updateSource();\n  }\n\n  disconnectedCallback() {\n    this.detachEvents();\n  }\n\n  /**\n   * Sets up listeners that keep the video source aligned with the viewport.\n   */\n  attachEvents() {\n    if (typeof window === \"undefined\" || this.#boundResize) {\n      return;\n    }\n\n    this.#boundResize = () => {\n      if (this.#resizeRaf) {\n        return;\n      }\n      this.#resizeRaf = requestAnimationFrame(() => {\n        this.#resizeRaf = 0;\n        this.updateSource();\n      });\n    };\n\n    window.addEventListener(\"resize\", this.#boundResize, { passive: true });\n  }\n\n  /**\n   * Removes listeners and cancels pending work.\n   */\n  detachEvents() {\n    if (typeof window !== \"undefined\" && this.#boundResize) {\n      window.removeEventListener(\"resize\", this.#boundResize);\n    }\n    if (this.#resizeRaf) {\n      cancelAnimationFrame(this.#resizeRaf);\n      this.#resizeRaf = 0;\n    }\n    this.#boundResize = null;\n  }\n\n  /**\n   * Calculates which source should be active and updates the video if needed.\n   */\n  updateSource() {\n    if (!this.#videoEl) {\n      return;\n    }\n    if (typeof window === \"undefined\") {\n      return;\n    }\n\n    const breakpoint = this.#getBreakpoint();\n    const mobileVideo = this.getAttribute(\"mobile-video\")?.trim() || \"\";\n    const desktopVideo = this.getAttribute(\"desktop-video\")?.trim() || \"\";\n    const mobilePoster = this.getAttribute(\"mobile-poster\")?.trim() || \"\";\n    const desktopPoster = this.getAttribute(\"desktop-poster\")?.trim() || \"\";\n    const viewportWidth = window.innerWidth || 0;\n\n    let nextMode = null;\n    let nextVideo = \"\";\n    let nextPoster = \"\";\n\n    if (viewportWidth >= breakpoint && desktopVideo) {\n      nextMode = \"desktop\";\n      nextVideo = desktopVideo;\n      nextPoster = desktopPoster;\n    } else if (mobileVideo) {\n      nextMode = \"mobile\";\n      nextVideo = mobileVideo;\n      nextPoster = mobilePoster;\n    } else if (desktopVideo) {\n      // Fallback to desktop when mobile video is missing.\n      nextMode = \"desktop\";\n      nextVideo = desktopVideo;\n      nextPoster = desktopPoster;\n    }\n\n    if (!nextVideo) {\n      return;\n    }\n\n    if (nextVideo === this.#currentSrc) {\n      return;\n    }\n\n    this.#applySource(nextVideo, nextPoster, nextMode);\n  }\n\n  #getBreakpoint() {\n    const attr = this.getAttribute(\"breakpoint\");\n    const parsed = parseInt(attr ?? \"\", 10);\n    return Number.isFinite(parsed) && parsed > 0 ? parsed : 768;\n  }\n\n  #applySource(videoUrl, posterUrl, mode) {\n    const video = this.#videoEl;\n    if (!video) {\n      return;\n    }\n\n    const currentSrc = video.getAttribute(\"src\");\n    if (currentSrc === videoUrl) {\n      this.#currentSrc = videoUrl;\n      if (mode) {\n        this.dataset.activeMode = mode;\n      }\n      return;\n    }\n\n    video.setAttribute(\"src\", videoUrl);\n\n    if (posterUrl) {\n      video.setAttribute(\"poster\", posterUrl);\n    } else {\n      video.removeAttribute(\"poster\");\n    }\n\n    video.load();\n\n    if (video.autoplay && typeof video.play === \"function\") {\n      const playPromise = video.play();\n      if (playPromise && typeof playPromise.catch === \"function\") {\n        playPromise.catch(() => {\n          // Most browsers require muted autoplay; ignore failures quietly.\n        });\n      }\n    }\n\n    this.#currentSrc = videoUrl;\n    if (mode) {\n      this.dataset.activeMode = mode;\n    } else {\n      delete this.dataset.activeMode;\n    }\n  }\n}\n\nif (!customElements.get(\"responsive-video\")) {\n  customElements.define(\"responsive-video\", ResponsiveVideo);\n}\n"],"names":[],"mappings":"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"}

package/dist/responsive-video.js

@@ -0,0 +1,169 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ResponsiveVideo = {}));
+})(this, (function (exports) { 'use strict';
+
+  /**
+   * Responsive video loader that swaps sources based on viewport width.
+   * Only the matching source is applied so mobile users never download the desktop asset (and vice versa).
+   */
+  class ResponsiveVideo extends HTMLElement {
+    #videoEl = null;
+    #currentSrc = null;
+    #resizeRaf = 0;
+    #boundResize = null;
+
+    connectedCallback() {
+      this.#videoEl = this.querySelector("video");
+      if (!this.#videoEl) {
+        return;
+      }
+      this.attachEvents();
+      this.updateSource();
+    }
+
+    disconnectedCallback() {
+      this.detachEvents();
+    }
+
+    /**
+     * Sets up listeners that keep the video source aligned with the viewport.
+     */
+    attachEvents() {
+      if (typeof window === "undefined" || this.#boundResize) {
+        return;
+      }
+
+      this.#boundResize = () => {
+        if (this.#resizeRaf) {
+          return;
+        }
+        this.#resizeRaf = requestAnimationFrame(() => {
+          this.#resizeRaf = 0;
+          this.updateSource();
+        });
+      };
+
+      window.addEventListener("resize", this.#boundResize, { passive: true });
+    }
+
+    /**
+     * Removes listeners and cancels pending work.
+     */
+    detachEvents() {
+      if (typeof window !== "undefined" && this.#boundResize) {
+        window.removeEventListener("resize", this.#boundResize);
+      }
+      if (this.#resizeRaf) {
+        cancelAnimationFrame(this.#resizeRaf);
+        this.#resizeRaf = 0;
+      }
+      this.#boundResize = null;
+    }
+
+    /**
+     * Calculates which source should be active and updates the video if needed.
+     */
+    updateSource() {
+      if (!this.#videoEl) {
+        return;
+      }
+      if (typeof window === "undefined") {
+        return;
+      }
+
+      const breakpoint = this.#getBreakpoint();
+      const mobileVideo = this.getAttribute("mobile-video")?.trim() || "";
+      const desktopVideo = this.getAttribute("desktop-video")?.trim() || "";
+      const mobilePoster = this.getAttribute("mobile-poster")?.trim() || "";
+      const desktopPoster = this.getAttribute("desktop-poster")?.trim() || "";
+      const viewportWidth = window.innerWidth || 0;
+
+      let nextMode = null;
+      let nextVideo = "";
+      let nextPoster = "";
+
+      if (viewportWidth >= breakpoint && desktopVideo) {
+        nextMode = "desktop";
+        nextVideo = desktopVideo;
+        nextPoster = desktopPoster;
+      } else if (mobileVideo) {
+        nextMode = "mobile";
+        nextVideo = mobileVideo;
+        nextPoster = mobilePoster;
+      } else if (desktopVideo) {
+        // Fallback to desktop when mobile video is missing.
+        nextMode = "desktop";
+        nextVideo = desktopVideo;
+        nextPoster = desktopPoster;
+      }
+
+      if (!nextVideo) {
+        return;
+      }
+
+      if (nextVideo === this.#currentSrc) {
+        return;
+      }
+
+      this.#applySource(nextVideo, nextPoster, nextMode);
+    }
+
+    #getBreakpoint() {
+      const attr = this.getAttribute("breakpoint");
+      const parsed = parseInt(attr ?? "", 10);
+      return Number.isFinite(parsed) && parsed > 0 ? parsed : 768;
+    }
+
+    #applySource(videoUrl, posterUrl, mode) {
+      const video = this.#videoEl;
+      if (!video) {
+        return;
+      }
+
+      const currentSrc = video.getAttribute("src");
+      if (currentSrc === videoUrl) {
+        this.#currentSrc = videoUrl;
+        if (mode) {
+          this.dataset.activeMode = mode;
+        }
+        return;
+      }
+
+      video.setAttribute("src", videoUrl);
+
+      if (posterUrl) {
+        video.setAttribute("poster", posterUrl);
+      } else {
+        video.removeAttribute("poster");
+      }
+
+      video.load();
+
+      if (video.autoplay && typeof video.play === "function") {
+        const playPromise = video.play();
+        if (playPromise && typeof playPromise.catch === "function") {
+          playPromise.catch(() => {
+            // Most browsers require muted autoplay; ignore failures quietly.
+          });
+        }
+      }
+
+      this.#currentSrc = videoUrl;
+      if (mode) {
+        this.dataset.activeMode = mode;
+      } else {
+        delete this.dataset.activeMode;
+      }
+    }
+  }
+
+  if (!customElements.get("responsive-video")) {
+    customElements.define("responsive-video", ResponsiveVideo);
+  }
+
+  exports.ResponsiveVideo = ResponsiveVideo;
+
+}));
+//# sourceMappingURL=responsive-video.js.map

package/dist/responsive-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-video.js","sources":["../src/responsive-video.js"],"sourcesContent":["/**\n * Responsive video loader that swaps sources based on viewport width.\n * Only the matching source is applied so mobile users never download the desktop asset (and vice versa).\n */\nexport class ResponsiveVideo extends HTMLElement {\n  #videoEl = null;\n  #currentSrc = null;\n  #resizeRaf = 0;\n  #boundResize = null;\n\n  connectedCallback() {\n    this.#videoEl = this.querySelector(\"video\");\n    if (!this.#videoEl) {\n      return;\n    }\n    this.attachEvents();\n    this.updateSource();\n  }\n\n  disconnectedCallback() {\n    this.detachEvents();\n  }\n\n  /**\n   * Sets up listeners that keep the video source aligned with the viewport.\n   */\n  attachEvents() {\n    if (typeof window === \"undefined\" || this.#boundResize) {\n      return;\n    }\n\n    this.#boundResize = () => {\n      if (this.#resizeRaf) {\n        return;\n      }\n      this.#resizeRaf = requestAnimationFrame(() => {\n        this.#resizeRaf = 0;\n        this.updateSource();\n      });\n    };\n\n    window.addEventListener(\"resize\", this.#boundResize, { passive: true });\n  }\n\n  /**\n   * Removes listeners and cancels pending work.\n   */\n  detachEvents() {\n    if (typeof window !== \"undefined\" && this.#boundResize) {\n      window.removeEventListener(\"resize\", this.#boundResize);\n    }\n    if (this.#resizeRaf) {\n      cancelAnimationFrame(this.#resizeRaf);\n      this.#resizeRaf = 0;\n    }\n    this.#boundResize = null;\n  }\n\n  /**\n   * Calculates which source should be active and updates the video if needed.\n   */\n  updateSource() {\n    if (!this.#videoEl) {\n      return;\n    }\n    if (typeof window === \"undefined\") {\n      return;\n    }\n\n    const breakpoint = this.#getBreakpoint();\n    const mobileVideo = this.getAttribute(\"mobile-video\")?.trim() || \"\";\n    const desktopVideo = this.getAttribute(\"desktop-video\")?.trim() || \"\";\n    const mobilePoster = this.getAttribute(\"mobile-poster\")?.trim() || \"\";\n    const desktopPoster = this.getAttribute(\"desktop-poster\")?.trim() || \"\";\n    const viewportWidth = window.innerWidth || 0;\n\n    let nextMode = null;\n    let nextVideo = \"\";\n    let nextPoster = \"\";\n\n    if (viewportWidth >= breakpoint && desktopVideo) {\n      nextMode = \"desktop\";\n      nextVideo = desktopVideo;\n      nextPoster = desktopPoster;\n    } else if (mobileVideo) {\n      nextMode = \"mobile\";\n      nextVideo = mobileVideo;\n      nextPoster = mobilePoster;\n    } else if (desktopVideo) {\n      // Fallback to desktop when mobile video is missing.\n      nextMode = \"desktop\";\n      nextVideo = desktopVideo;\n      nextPoster = desktopPoster;\n    }\n\n    if (!nextVideo) {\n      return;\n    }\n\n    if (nextVideo === this.#currentSrc) {\n      return;\n    }\n\n    this.#applySource(nextVideo, nextPoster, nextMode);\n  }\n\n  #getBreakpoint() {\n    const attr = this.getAttribute(\"breakpoint\");\n    const parsed = parseInt(attr ?? \"\", 10);\n    return Number.isFinite(parsed) && parsed > 0 ? parsed : 768;\n  }\n\n  #applySource(videoUrl, posterUrl, mode) {\n    const video = this.#videoEl;\n    if (!video) {\n      return;\n    }\n\n    const currentSrc = video.getAttribute(\"src\");\n    if (currentSrc === videoUrl) {\n      this.#currentSrc = videoUrl;\n      if (mode) {\n        this.dataset.activeMode = mode;\n      }\n      return;\n    }\n\n    video.setAttribute(\"src\", videoUrl);\n\n    if (posterUrl) {\n      video.setAttribute(\"poster\", posterUrl);\n    } else {\n      video.removeAttribute(\"poster\");\n    }\n\n    video.load();\n\n    if (video.autoplay && typeof video.play === \"function\") {\n      const playPromise = video.play();\n      if (playPromise && typeof playPromise.catch === \"function\") {\n        playPromise.catch(() => {\n          // Most browsers require muted autoplay; ignore failures quietly.\n        });\n      }\n    }\n\n    this.#currentSrc = videoUrl;\n    if (mode) {\n      this.dataset.activeMode = mode;\n    } else {\n      delete this.dataset.activeMode;\n    }\n  }\n}\n\nif (!customElements.get(\"responsive-video\")) {\n  customElements.define(\"responsive-video\", ResponsiveVideo);\n}\n"],"names":[],"mappings":"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"}

package/dist/responsive-video.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ResponsiveVideo={})}(this,function(e){"use strict";class ResponsiveVideo extends HTMLElement{#e=null;#t=null;#i=0;#s=null;connectedCallback(){this.#e=this.querySelector("video"),this.#e&&(this.attachEvents(),this.updateSource())}disconnectedCallback(){this.detachEvents()}attachEvents(){"undefined"==typeof window||this.#s||(this.#s=()=>{this.#i||(this.#i=requestAnimationFrame(()=>{this.#i=0,this.updateSource()}))},window.addEventListener("resize",this.#s,{passive:!0}))}detachEvents(){"undefined"!=typeof window&&this.#s&&window.removeEventListener("resize",this.#s),this.#i&&(cancelAnimationFrame(this.#i),this.#i=0),this.#s=null}updateSource(){if(!this.#e)return;if("undefined"==typeof window)return;const e=this.#o(),t=this.getAttribute("mobile-video")?.trim()||"",i=this.getAttribute("desktop-video")?.trim()||"",s=this.getAttribute("mobile-poster")?.trim()||"",o=this.getAttribute("desktop-poster")?.trim()||"";let n=null,r="",d="";(window.innerWidth||0)>=e&&i?(n="desktop",r=i,d=o):t?(n="mobile",r=t,d=s):i&&(n="desktop",r=i,d=o),r&&r!==this.#t&&this.#n(r,d,n)}#o(){const e=this.getAttribute("breakpoint"),t=parseInt(e??"",10);return Number.isFinite(t)&&t>0?t:768}#n(e,t,i){const s=this.#e;if(!s)return;if(s.getAttribute("src")===e)return this.#t=e,void(i&&(this.dataset.activeMode=i));if(s.setAttribute("src",e),t?s.setAttribute("poster",t):s.removeAttribute("poster"),s.load(),s.autoplay&&"function"==typeof s.play){const e=s.play();e&&"function"==typeof e.catch&&e.catch(()=>{})}this.#t=e,i?this.dataset.activeMode=i:delete this.dataset.activeMode}}customElements.get("responsive-video")||customElements.define("responsive-video",ResponsiveVideo),e.ResponsiveVideo=ResponsiveVideo});

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@magic-spells/responsive-video",
+  "version": "0.1.0",
+  "description": "Responsive video and poster image swapping web component.",
+  "author": "Cory Schulz",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/responsive-video.cjs.js",
+  "module": "dist/responsive-video.esm.js",
+  "unpkg": "dist/responsive-video.min.js",
+  "types": "src/responsive-video.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/responsive-video.d.ts",
+      "import": "./dist/responsive-video.esm.js",
+      "require": "./dist/responsive-video.cjs.js",
+      "default": "./dist/responsive-video.esm.js"
+    }
+  },
+  "sideEffects": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/magic-spells/responsive-video"
+  },
+  "homepage": "https://github.com/magic-spells/responsive-video#readme",
+  "bugs": {
+    "url": "https://github.com/magic-spells/responsive-video/issues"
+  },
+  "keywords": [
+    "responsive-video",
+    "web-components",
+    "custom-elements",
+    "hero-video",
+    "video-optimization",
+    "responsive-images",
+    "poster-images",
+    "mobile-optimization",
+    "bandwidth-optimization",
+    "performance",
+    "viewport",
+    "breakpoint",
+    "no-dependencies",
+    "vanilla-js"
+  ],
+  "files": [
+    "dist/",
+    "src/",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint src/ rollup.config.mjs",
+    "format": "prettier --write .",
+    "prepublishOnly": "npm run build",
+    "serve": "rollup -c --watch",
+    "dev": "rollup -c --watch"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "not dead",
+    "not ie <= 11"
+  ],
+  "devDependencies": {
+    "@eslint/js": "^9.38.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "eslint": "^9.38.0",
+    "globals": "^15.15.0",
+    "prettier": "^3.3.3",
+    "rollup": "^3.0.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-serve": "^1.1.1"
+  }
+}

package/src/responsive-video.js

@@ -0,0 +1,158 @@
+/**
+ * Responsive video loader that swaps sources based on viewport width.
+ * Only the matching source is applied so mobile users never download the desktop asset (and vice versa).
+ */
+export class ResponsiveVideo extends HTMLElement {
+  #videoEl = null;
+  #currentSrc = null;
+  #resizeRaf = 0;
+  #boundResize = null;
+
+  connectedCallback() {
+    this.#videoEl = this.querySelector("video");
+    if (!this.#videoEl) {
+      return;
+    }
+    this.attachEvents();
+    this.updateSource();
+  }
+
+  disconnectedCallback() {
+    this.detachEvents();
+  }
+
+  /**
+   * Sets up listeners that keep the video source aligned with the viewport.
+   */
+  attachEvents() {
+    if (typeof window === "undefined" || this.#boundResize) {
+      return;
+    }
+
+    this.#boundResize = () => {
+      if (this.#resizeRaf) {
+        return;
+      }
+      this.#resizeRaf = requestAnimationFrame(() => {
+        this.#resizeRaf = 0;
+        this.updateSource();
+      });
+    };
+
+    window.addEventListener("resize", this.#boundResize, { passive: true });
+  }
+
+  /**
+   * Removes listeners and cancels pending work.
+   */
+  detachEvents() {
+    if (typeof window !== "undefined" && this.#boundResize) {
+      window.removeEventListener("resize", this.#boundResize);
+    }
+    if (this.#resizeRaf) {
+      cancelAnimationFrame(this.#resizeRaf);
+      this.#resizeRaf = 0;
+    }
+    this.#boundResize = null;
+  }
+
+  /**
+   * Calculates which source should be active and updates the video if needed.
+   */
+  updateSource() {
+    if (!this.#videoEl) {
+      return;
+    }
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const breakpoint = this.#getBreakpoint();
+    const mobileVideo = this.getAttribute("mobile-video")?.trim() || "";
+    const desktopVideo = this.getAttribute("desktop-video")?.trim() || "";
+    const mobilePoster = this.getAttribute("mobile-poster")?.trim() || "";
+    const desktopPoster = this.getAttribute("desktop-poster")?.trim() || "";
+    const viewportWidth = window.innerWidth || 0;
+
+    let nextMode = null;
+    let nextVideo = "";
+    let nextPoster = "";
+
+    if (viewportWidth >= breakpoint && desktopVideo) {
+      nextMode = "desktop";
+      nextVideo = desktopVideo;
+      nextPoster = desktopPoster;
+    } else if (mobileVideo) {
+      nextMode = "mobile";
+      nextVideo = mobileVideo;
+      nextPoster = mobilePoster;
+    } else if (desktopVideo) {
+      // Fallback to desktop when mobile video is missing.
+      nextMode = "desktop";
+      nextVideo = desktopVideo;
+      nextPoster = desktopPoster;
+    }
+
+    if (!nextVideo) {
+      return;
+    }
+
+    if (nextVideo === this.#currentSrc) {
+      return;
+    }
+
+    this.#applySource(nextVideo, nextPoster, nextMode);
+  }
+
+  #getBreakpoint() {
+    const attr = this.getAttribute("breakpoint");
+    const parsed = parseInt(attr ?? "", 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : 768;
+  }
+
+  #applySource(videoUrl, posterUrl, mode) {
+    const video = this.#videoEl;
+    if (!video) {
+      return;
+    }
+
+    const currentSrc = video.getAttribute("src");
+    if (currentSrc === videoUrl) {
+      this.#currentSrc = videoUrl;
+      if (mode) {
+        this.dataset.activeMode = mode;
+      }
+      return;
+    }
+
+    video.setAttribute("src", videoUrl);
+
+    if (posterUrl) {
+      video.setAttribute("poster", posterUrl);
+    } else {
+      video.removeAttribute("poster");
+    }
+
+    video.load();
+
+    if (video.autoplay && typeof video.play === "function") {
+      const playPromise = video.play();
+      if (playPromise && typeof playPromise.catch === "function") {
+        playPromise.catch(() => {
+          // Most browsers require muted autoplay; ignore failures quietly.
+        });
+      }
+    }
+
+    this.#currentSrc = videoUrl;
+    if (mode) {
+      this.dataset.activeMode = mode;
+    } else {
+      delete this.dataset.activeMode;
+    }
+  }
+}
+
+if (!customElements.get("responsive-video")) {
+  customElements.define("responsive-video", ResponsiveVideo);
+}