@the-w4/responsive-video-source 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 The W4
+
+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,113 @@
+# @the-w4/responsive-video-source
+
+Switches a `<video>`'s `<source>` children based on a `data-resolution`
+media-query attribute, so the right mp4/webm pair loads for the current
+viewport instead of relying on the browser's (resolution-blind) native
+`<source>` matching.
+
+## The problem this solves
+
+`<video>` lets you list multiple `<source>` elements, but the browser only
+uses `type` to pick one — it has no concept of viewport size. If you want a
+different clip (or just a different encode) on mobile vs. desktop, you need
+JS. This package does that by reading a `data-resolution` attribute you put
+on each `<source>`:
+
+```html
+<video autoplay muted loop playsinline>
+  <source src="/desktop.mp4"  type="video/mp4"  data-resolution="min-width: 1024px">
+  <source src="/desktop.webm" type="video/webm" data-resolution="min-width: 1024px">
+
+  <source src="/mobile.mp4"  type="video/mp4"  data-resolution="max-width: 1023px">
+  <source src="/mobile.webm" type="video/webm" data-resolution="max-width: 1023px">
+</video>
+```
+
+Sources are grouped by their `data-resolution` value. When a group's query
+matches, the video is given only that group's `<source>` elements (so the
+browser still gets to pick mp4 vs. webm based on support within the matched
+group) and reloaded. Listeners are added per unique breakpoint via
+`matchMedia`, so switching happens automatically on resize/orientation
+change — no manual resize polling.
+
+**Videos with a partial data set are skipped.** If a `<video>` has some
+`<source>` children with `data-resolution` and some without, the package
+leaves it completely untouched (native behavior applies). Only videos where
+*every* `<source>` carries the attribute are managed. A video with no
+`data-resolution` attributes at all is also left alone.
+
+The attribute value can be a bare media feature (`"min-width: 1024px"`,
+wrapped in parens automatically) or a full query you write yourself
+(`"(min-width: 1024px) and (orientation: landscape)"`, used as-is). Keep
+breakpoints mutually exclusive (e.g. `min-width` / `max-width` pairs) —
+if more than one group matches at once, the first one declared in the
+markup wins.
+
+## Install
+
+```bash
+npm install @the-w4/responsive-video-source
+```
+
+## Usage with a bundler (e.g. @wordpress/scripts, webpack, Vite)
+
+```js
+import { init } from '@the-w4/responsive-video-source';
+
+const controller = init();
+
+// later, if needed:
+controller.refresh(); // re-check all managed videos now
+controller.destroy();  // remove all matchMedia listeners
+```
+
+`init(options)` accepts:
+
+| option      | default              | description                                  |
+|-------------|----------------------|-----------------------------------------------|
+| `root`      | `document`           | scope to search within                       |
+| `selector`  | `'video'`             | selector for video elements                   |
+| `attribute` | `'data-resolution'`  | attribute holding the media-query value        |
+
+## Usage directly in WordPress (no build step)
+
+Copy `dist/index.global.min.js` into your theme and enqueue it — it
+auto-runs on `DOMContentLoaded` with the defaults shown above:
+
+```php
+wp_enqueue_script(
+    'responsive-video-source',
+    get_stylesheet_directory_uri() . '/js/responsive-video-source.min.js',
+    array(),
+    '0.1.0',
+    true
+);
+```
+
+To opt out of auto-init (e.g. you want a custom `root`/`selector`, or to
+call `init()` yourself), add `data-no-autoinit` to the script tag. WordPress
+doesn't expose a clean way to add arbitrary attributes to `wp_enqueue_script`
+output, so either filter the `script_loader_tag` or just `init()` is also
+fully exposed on `window.ResponsiveVideoSource` for manual control:
+
+```js
+window.ResponsiveVideoSource.init({ root: document.querySelector('.hero') });
+```
+
+## Development
+
+```bash
+npm install
+npm run build   # writes dist/index.mjs, .cjs, .global.js, .global.min.js
+npm test        # jsdom-based unit tests
+```
+
+## Publishing
+
+```bash
+npm login                 # if not already authenticated
+npm publish               # prepublishOnly runs build + test automatically
+```
+
+This is a scoped package (`@the-w4/...`); `publishConfig.access` is already
+set to `public` so it publishes for free under the `the-w4` npm scope.

package/dist/index.cjs

@@ -0,0 +1,133 @@
+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.js
+var index_exports = {};
+__export(index_exports, {
+  autoInit: () => autoInit,
+  init: () => init
+});
+module.exports = __toCommonJS(index_exports);
+var DEFAULT_ATTRIBUTE = "data-resolution";
+var DEFAULT_SELECTOR = "video";
+function toMediaQuery(value) {
+  const trimmed = value.trim();
+  return trimmed.startsWith("(") ? trimmed : `(${trimmed})`;
+}
+function getDirectSourceChildren(video) {
+  return Array.from(video.children).filter(
+    (el) => el.tagName === "SOURCE"
+  );
+}
+function readSourceGroups(video, attribute) {
+  const sources = getDirectSourceChildren(video);
+  if (sources.length === 0) return null;
+  const withAttr = sources.filter((s) => s.hasAttribute(attribute));
+  if (withAttr.length !== sources.length) return null;
+  const order = [];
+  const groups = /* @__PURE__ */ new Map();
+  sources.forEach((s) => {
+    const key = s.getAttribute(attribute).trim();
+    if (!groups.has(key)) {
+      groups.set(key, []);
+      order.push(key);
+    }
+    groups.get(key).push({
+      src: s.getAttribute("src"),
+      type: s.getAttribute("type") || ""
+    });
+  });
+  return { order, groups };
+}
+function applySources(video, items) {
+  getDirectSourceChildren(video).forEach((s) => s.remove());
+  items.forEach(({ src, type }) => {
+    const source = document.createElement("source");
+    source.setAttribute("src", src);
+    if (type) source.setAttribute("type", type);
+    video.appendChild(source);
+  });
+  try {
+    video.load();
+  } catch (e) {
+  }
+  if (video.autoplay) {
+    try {
+      const playResult = video.play();
+      if (playResult && typeof playResult.catch === "function") {
+        playResult.catch(() => {
+        });
+      }
+    } catch (e) {
+    }
+  }
+}
+function setupVideo(video, attribute) {
+  const data = readSourceGroups(video, attribute);
+  if (!data) return null;
+  const { order, groups } = data;
+  const queries = order.map((key) => ({
+    key,
+    mql: window.matchMedia(toMediaQuery(key))
+  }));
+  let currentKey = null;
+  function pickKey() {
+    const match = queries.find((q) => q.mql.matches);
+    return match ? match.key : null;
+  }
+  function evaluate() {
+    const key = pickKey();
+    if (key === null || key === currentKey) return;
+    currentKey = key;
+    applySources(video, groups.get(key));
+  }
+  const handler = () => evaluate();
+  queries.forEach((q) => q.mql.addEventListener("change", handler));
+  evaluate();
+  return {
+    evaluate,
+    destroy() {
+      queries.forEach((q) => q.mql.removeEventListener("change", handler));
+    }
+  };
+}
+function init(options = {}) {
+  const {
+    root = document,
+    selector = DEFAULT_SELECTOR,
+    attribute = DEFAULT_ATTRIBUTE
+  } = options;
+  const controllers = Array.from(root.querySelectorAll(selector)).map((video) => setupVideo(video, attribute)).filter(Boolean);
+  return {
+    refresh() {
+      controllers.forEach((c) => c.evaluate());
+    },
+    destroy() {
+      controllers.forEach((c) => c.destroy());
+    }
+  };
+}
+function autoInit(options) {
+  const run = () => init(options);
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", run, { once: true });
+  } else {
+    run();
+  }
+}
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.js"],
+  "sourcesContent": ["const DEFAULT_ATTRIBUTE = 'data-resolution';\nconst DEFAULT_SELECTOR = 'video';\n\n/**\n * Wraps a bare media feature (\"min-width: 1024px\") in parens so it can be\n * passed to matchMedia(). Values that are already a full query (start with\n * \"(\") are left untouched so compound queries keep working.\n */\nfunction toMediaQuery(value) {\n  const trimmed = value.trim();\n  return trimmed.startsWith('(') ? trimmed : `(${trimmed})`;\n}\n\nfunction getDirectSourceChildren(video) {\n  return Array.from(video.children).filter(\n    (el) => el.tagName === 'SOURCE'\n  );\n}\n\n/**\n * Groups a video's <source> elements by their data-resolution value.\n * Returns null if the video has no sources, or only some of them carry the\n * attribute (a \"partial\" data set) -- those videos are left untouched so\n * native browser behavior still applies.\n */\nfunction readSourceGroups(video, attribute) {\n  const sources = getDirectSourceChildren(video);\n  if (sources.length === 0) return null;\n\n  const withAttr = sources.filter((s) => s.hasAttribute(attribute));\n  if (withAttr.length !== sources.length) return null;\n\n  const order = [];\n  const groups = new Map();\n\n  sources.forEach((s) => {\n    const key = s.getAttribute(attribute).trim();\n    if (!groups.has(key)) {\n      groups.set(key, []);\n      order.push(key);\n    }\n    groups.get(key).push({\n      src: s.getAttribute('src'),\n      type: s.getAttribute('type') || '',\n    });\n  });\n\n  return { order, groups };\n}\n\nfunction applySources(video, items) {\n  getDirectSourceChildren(video).forEach((s) => s.remove());\n\n  items.forEach(({ src, type }) => {\n    const source = document.createElement('source');\n    source.setAttribute('src', src);\n    if (type) source.setAttribute('type', type);\n    video.appendChild(source);\n  });\n\n  try {\n    video.load();\n  } catch (e) {\n    /* media APIs can be unimplemented in some test/SSR environments */\n  }\n\n  if (video.autoplay) {\n    try {\n      const playResult = video.play();\n      if (playResult && typeof playResult.catch === 'function') {\n        playResult.catch(() => {});\n      }\n    } catch (e) {\n      /* autoplay can be rejected/unsupported; not our concern here */\n    }\n  }\n}\n\nfunction setupVideo(video, attribute) {\n  const data = readSourceGroups(video, attribute);\n  if (!data) return null;\n\n  const { order, groups } = data;\n\n  // One matchMedia listener per unique breakpoint, not per <source>.\n  const queries = order.map((key) => ({\n    key,\n    mql: window.matchMedia(toMediaQuery(key)),\n  }));\n\n  let currentKey = null;\n\n  function pickKey() {\n    const match = queries.find((q) => q.mql.matches);\n    return match ? match.key : null;\n  }\n\n  // If nothing matches (a gap between breakpoints), leave things as they\n  // are rather than blanking the video out.\n  function evaluate() {\n    const key = pickKey();\n    if (key === null || key === currentKey) return;\n    currentKey = key;\n    applySources(video, groups.get(key));\n  }\n\n  const handler = () => evaluate();\n  queries.forEach((q) => q.mql.addEventListener('change', handler));\n\n  evaluate();\n\n  return {\n    evaluate,\n    destroy() {\n      queries.forEach((q) => q.mql.removeEventListener('change', handler));\n    },\n  };\n}\n\n/**\n * Scans for <video> elements and switches their <source> children based on\n * a data-resolution media-query attribute. Videos where only some <source>\n * elements carry the attribute are skipped entirely.\n *\n * @param {Object} [options]\n * @param {Document|Element} [options.root=document] - scope to search within\n * @param {string} [options.selector='video'] - selector for video elements\n * @param {string} [options.attribute='data-resolution'] - attribute to read\n * @returns {{ refresh: () => void, destroy: () => void }}\n */\nexport function init(options = {}) {\n  const {\n    root = document,\n    selector = DEFAULT_SELECTOR,\n    attribute = DEFAULT_ATTRIBUTE,\n  } = options;\n\n  const controllers = Array.from(root.querySelectorAll(selector))\n    .map((video) => setupVideo(video, attribute))\n    .filter(Boolean);\n\n  return {\n    refresh() {\n      controllers.forEach((c) => c.evaluate());\n    },\n    destroy() {\n      controllers.forEach((c) => c.destroy());\n    },\n  };\n}\n\n/**\n * Convenience helper for the standalone <script> build: runs init() once\n * the DOM is ready, using the given options (or defaults).\n */\nexport function autoInit(options) {\n  const run = () => init(options);\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', run, { once: true });\n  } else {\n    run();\n  }\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAM,oBAAoB;AAC1B,IAAM,mBAAmB;AAOzB,SAAS,aAAa,OAAO;AAC3B,QAAM,UAAU,MAAM,KAAK;AAC3B,SAAO,QAAQ,WAAW,GAAG,IAAI,UAAU,IAAI,OAAO;AACxD;AAEA,SAAS,wBAAwB,OAAO;AACtC,SAAO,MAAM,KAAK,MAAM,QAAQ,EAAE;AAAA,IAChC,CAAC,OAAO,GAAG,YAAY;AAAA,EACzB;AACF;AAQA,SAAS,iBAAiB,OAAO,WAAW;AAC1C,QAAM,UAAU,wBAAwB,KAAK;AAC7C,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,QAAM,WAAW,QAAQ,OAAO,CAAC,MAAM,EAAE,aAAa,SAAS,CAAC;AAChE,MAAI,SAAS,WAAW,QAAQ,OAAQ,QAAO;AAE/C,QAAM,QAAQ,CAAC;AACf,QAAM,SAAS,oBAAI,IAAI;AAEvB,UAAQ,QAAQ,CAAC,MAAM;AACrB,UAAM,MAAM,EAAE,aAAa,SAAS,EAAE,KAAK;AAC3C,QAAI,CAAC,OAAO,IAAI,GAAG,GAAG;AACpB,aAAO,IAAI,KAAK,CAAC,CAAC;AAClB,YAAM,KAAK,GAAG;AAAA,IAChB;AACA,WAAO,IAAI,GAAG,EAAE,KAAK;AAAA,MACnB,KAAK,EAAE,aAAa,KAAK;AAAA,MACzB,MAAM,EAAE,aAAa,MAAM,KAAK;AAAA,IAClC,CAAC;AAAA,EACH,CAAC;AAED,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,aAAa,OAAO,OAAO;AAClC,0BAAwB,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;AAExD,QAAM,QAAQ,CAAC,EAAE,KAAK,KAAK,MAAM;AAC/B,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,aAAa,OAAO,GAAG;AAC9B,QAAI,KAAM,QAAO,aAAa,QAAQ,IAAI;AAC1C,UAAM,YAAY,MAAM;AAAA,EAC1B,CAAC;AAED,MAAI;AACF,UAAM,KAAK;AAAA,EACb,SAAS,GAAG;AAAA,EAEZ;AAEA,MAAI,MAAM,UAAU;AAClB,QAAI;AACF,YAAM,aAAa,MAAM,KAAK;AAC9B,UAAI,cAAc,OAAO,WAAW,UAAU,YAAY;AACxD,mBAAW,MAAM,MAAM;AAAA,QAAC,CAAC;AAAA,MAC3B;AAAA,IACF,SAAS,GAAG;AAAA,IAEZ;AAAA,EACF;AACF;AAEA,SAAS,WAAW,OAAO,WAAW;AACpC,QAAM,OAAO,iBAAiB,OAAO,SAAS;AAC9C,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,EAAE,OAAO,OAAO,IAAI;AAG1B,QAAM,UAAU,MAAM,IAAI,CAAC,SAAS;AAAA,IAClC;AAAA,IACA,KAAK,OAAO,WAAW,aAAa,GAAG,CAAC;AAAA,EAC1C,EAAE;AAEF,MAAI,aAAa;AAEjB,WAAS,UAAU;AACjB,UAAM,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,IAAI,OAAO;AAC/C,WAAO,QAAQ,MAAM,MAAM;AAAA,EAC7B;AAIA,WAAS,WAAW;AAClB,UAAM,MAAM,QAAQ;AACpB,QAAI,QAAQ,QAAQ,QAAQ,WAAY;AACxC,iBAAa;AACb,iBAAa,OAAO,OAAO,IAAI,GAAG,CAAC;AAAA,EACrC;AAEA,QAAM,UAAU,MAAM,SAAS;AAC/B,UAAQ,QAAQ,CAAC,MAAM,EAAE,IAAI,iBAAiB,UAAU,OAAO,CAAC;AAEhE,WAAS;AAET,SAAO;AAAA,IACL;AAAA,IACA,UAAU;AACR,cAAQ,QAAQ,CAAC,MAAM,EAAE,IAAI,oBAAoB,UAAU,OAAO,CAAC;AAAA,IACrE;AAAA,EACF;AACF;AAaO,SAAS,KAAK,UAAU,CAAC,GAAG;AACjC,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,cAAc,MAAM,KAAK,KAAK,iBAAiB,QAAQ,CAAC,EAC3D,IAAI,CAAC,UAAU,WAAW,OAAO,SAAS,CAAC,EAC3C,OAAO,OAAO;AAEjB,SAAO;AAAA,IACL,UAAU;AACR,kBAAY,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;AAAA,IACzC;AAAA,IACA,UAAU;AACR,kBAAY,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC;AAAA,IACxC;AAAA,EACF;AACF;AAMO,SAAS,SAAS,SAAS;AAChC,QAAM,MAAM,MAAM,KAAK,OAAO;AAC9B,MAAI,SAAS,eAAe,WAAW;AACrC,aAAS,iBAAiB,oBAAoB,KAAK,EAAE,MAAM,KAAK,CAAC;AAAA,EACnE,OAAO;AACL,QAAI;AAAA,EACN;AACF;",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export interface InitOptions {
+  /** Scope to search within. Defaults to `document`. */
+  root?: Document | Element;
+  /** Selector for video elements. Defaults to `'video'`. */
+  selector?: string;
+  /** Attribute holding the media-query value. Defaults to `'data-resolution'`. */
+  attribute?: string;
+}
+
+export interface Controller {
+  /** Re-runs the breakpoint check for every managed video. */
+  refresh(): void;
+  /** Removes all matchMedia listeners added by init(). */
+  destroy(): void;
+}
+
+export function init(options?: InitOptions): Controller;
+export function autoInit(options?: InitOptions): void;

package/dist/index.global.js

@@ -0,0 +1,143 @@
+var ResponsiveVideoSource = (() => {
+  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.js
+  var index_exports = {};
+  __export(index_exports, {
+    autoInit: () => autoInit,
+    init: () => init
+  });
+  var DEFAULT_ATTRIBUTE = "data-resolution";
+  var DEFAULT_SELECTOR = "video";
+  function toMediaQuery(value) {
+    const trimmed = value.trim();
+    return trimmed.startsWith("(") ? trimmed : `(${trimmed})`;
+  }
+  function getDirectSourceChildren(video) {
+    return Array.from(video.children).filter(
+      (el) => el.tagName === "SOURCE"
+    );
+  }
+  function readSourceGroups(video, attribute) {
+    const sources = getDirectSourceChildren(video);
+    if (sources.length === 0) return null;
+    const withAttr = sources.filter((s) => s.hasAttribute(attribute));
+    if (withAttr.length !== sources.length) return null;
+    const order = [];
+    const groups = /* @__PURE__ */ new Map();
+    sources.forEach((s) => {
+      const key = s.getAttribute(attribute).trim();
+      if (!groups.has(key)) {
+        groups.set(key, []);
+        order.push(key);
+      }
+      groups.get(key).push({
+        src: s.getAttribute("src"),
+        type: s.getAttribute("type") || ""
+      });
+    });
+    return { order, groups };
+  }
+  function applySources(video, items) {
+    getDirectSourceChildren(video).forEach((s) => s.remove());
+    items.forEach(({ src, type }) => {
+      const source = document.createElement("source");
+      source.setAttribute("src", src);
+      if (type) source.setAttribute("type", type);
+      video.appendChild(source);
+    });
+    try {
+      video.load();
+    } catch (e) {
+    }
+    if (video.autoplay) {
+      try {
+        const playResult = video.play();
+        if (playResult && typeof playResult.catch === "function") {
+          playResult.catch(() => {
+          });
+        }
+      } catch (e) {
+      }
+    }
+  }
+  function setupVideo(video, attribute) {
+    const data = readSourceGroups(video, attribute);
+    if (!data) return null;
+    const { order, groups } = data;
+    const queries = order.map((key) => ({
+      key,
+      mql: window.matchMedia(toMediaQuery(key))
+    }));
+    let currentKey = null;
+    function pickKey() {
+      const match = queries.find((q) => q.mql.matches);
+      return match ? match.key : null;
+    }
+    function evaluate() {
+      const key = pickKey();
+      if (key === null || key === currentKey) return;
+      currentKey = key;
+      applySources(video, groups.get(key));
+    }
+    const handler = () => evaluate();
+    queries.forEach((q) => q.mql.addEventListener("change", handler));
+    evaluate();
+    return {
+      evaluate,
+      destroy() {
+        queries.forEach((q) => q.mql.removeEventListener("change", handler));
+      }
+    };
+  }
+  function init(options = {}) {
+    const {
+      root = document,
+      selector = DEFAULT_SELECTOR,
+      attribute = DEFAULT_ATTRIBUTE
+    } = options;
+    const controllers = Array.from(root.querySelectorAll(selector)).map((video) => setupVideo(video, attribute)).filter(Boolean);
+    return {
+      refresh() {
+        controllers.forEach((c) => c.evaluate());
+      },
+      destroy() {
+        controllers.forEach((c) => c.destroy());
+      }
+    };
+  }
+  function autoInit(options) {
+    const run = () => init(options);
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", run, { once: true });
+    } else {
+      run();
+    }
+  }
+  return __toCommonJS(index_exports);
+})();
+
+(function () {
+  if (typeof document === 'undefined') return;
+  var script = document.currentScript;
+  if (script && script.hasAttribute('data-no-autoinit')) return;
+  ResponsiveVideoSource.autoInit();
+})();
+
+//# sourceMappingURL=index.global.js.map

package/dist/index.global.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.js"],
+  "sourcesContent": ["const DEFAULT_ATTRIBUTE = 'data-resolution';\nconst DEFAULT_SELECTOR = 'video';\n\n/**\n * Wraps a bare media feature (\"min-width: 1024px\") in parens so it can be\n * passed to matchMedia(). Values that are already a full query (start with\n * \"(\") are left untouched so compound queries keep working.\n */\nfunction toMediaQuery(value) {\n  const trimmed = value.trim();\n  return trimmed.startsWith('(') ? trimmed : `(${trimmed})`;\n}\n\nfunction getDirectSourceChildren(video) {\n  return Array.from(video.children).filter(\n    (el) => el.tagName === 'SOURCE'\n  );\n}\n\n/**\n * Groups a video's <source> elements by their data-resolution value.\n * Returns null if the video has no sources, or only some of them carry the\n * attribute (a \"partial\" data set) -- those videos are left untouched so\n * native browser behavior still applies.\n */\nfunction readSourceGroups(video, attribute) {\n  const sources = getDirectSourceChildren(video);\n  if (sources.length === 0) return null;\n\n  const withAttr = sources.filter((s) => s.hasAttribute(attribute));\n  if (withAttr.length !== sources.length) return null;\n\n  const order = [];\n  const groups = new Map();\n\n  sources.forEach((s) => {\n    const key = s.getAttribute(attribute).trim();\n    if (!groups.has(key)) {\n      groups.set(key, []);\n      order.push(key);\n    }\n    groups.get(key).push({\n      src: s.getAttribute('src'),\n      type: s.getAttribute('type') || '',\n    });\n  });\n\n  return { order, groups };\n}\n\nfunction applySources(video, items) {\n  getDirectSourceChildren(video).forEach((s) => s.remove());\n\n  items.forEach(({ src, type }) => {\n    const source = document.createElement('source');\n    source.setAttribute('src', src);\n    if (type) source.setAttribute('type', type);\n    video.appendChild(source);\n  });\n\n  try {\n    video.load();\n  } catch (e) {\n    /* media APIs can be unimplemented in some test/SSR environments */\n  }\n\n  if (video.autoplay) {\n    try {\n      const playResult = video.play();\n      if (playResult && typeof playResult.catch === 'function') {\n        playResult.catch(() => {});\n      }\n    } catch (e) {\n      /* autoplay can be rejected/unsupported; not our concern here */\n    }\n  }\n}\n\nfunction setupVideo(video, attribute) {\n  const data = readSourceGroups(video, attribute);\n  if (!data) return null;\n\n  const { order, groups } = data;\n\n  // One matchMedia listener per unique breakpoint, not per <source>.\n  const queries = order.map((key) => ({\n    key,\n    mql: window.matchMedia(toMediaQuery(key)),\n  }));\n\n  let currentKey = null;\n\n  function pickKey() {\n    const match = queries.find((q) => q.mql.matches);\n    return match ? match.key : null;\n  }\n\n  // If nothing matches (a gap between breakpoints), leave things as they\n  // are rather than blanking the video out.\n  function evaluate() {\n    const key = pickKey();\n    if (key === null || key === currentKey) return;\n    currentKey = key;\n    applySources(video, groups.get(key));\n  }\n\n  const handler = () => evaluate();\n  queries.forEach((q) => q.mql.addEventListener('change', handler));\n\n  evaluate();\n\n  return {\n    evaluate,\n    destroy() {\n      queries.forEach((q) => q.mql.removeEventListener('change', handler));\n    },\n  };\n}\n\n/**\n * Scans for <video> elements and switches their <source> children based on\n * a data-resolution media-query attribute. Videos where only some <source>\n * elements carry the attribute are skipped entirely.\n *\n * @param {Object} [options]\n * @param {Document|Element} [options.root=document] - scope to search within\n * @param {string} [options.selector='video'] - selector for video elements\n * @param {string} [options.attribute='data-resolution'] - attribute to read\n * @returns {{ refresh: () => void, destroy: () => void }}\n */\nexport function init(options = {}) {\n  const {\n    root = document,\n    selector = DEFAULT_SELECTOR,\n    attribute = DEFAULT_ATTRIBUTE,\n  } = options;\n\n  const controllers = Array.from(root.querySelectorAll(selector))\n    .map((video) => setupVideo(video, attribute))\n    .filter(Boolean);\n\n  return {\n    refresh() {\n      controllers.forEach((c) => c.evaluate());\n    },\n    destroy() {\n      controllers.forEach((c) => c.destroy());\n    },\n  };\n}\n\n/**\n * Convenience helper for the standalone <script> build: runs init() once\n * the DOM is ready, using the given options (or defaults).\n */\nexport function autoInit(options) {\n  const run = () => init(options);\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', run, { once: true });\n  } else {\n    run();\n  }\n}"],
+  "mappings": "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",
+  "names": []
+}

package/dist/index.global.min.js

@@ -0,0 +1,10 @@
+var ResponsiveVideoSource=(()=>{var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var r in t)l(e,r,{get:t[r],enumerable:!0})},A=(e,t,r,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of y(t))!E.call(e,n)&&n!==r&&l(e,n,{get:()=>t[n],enumerable:!(u=p(t,n))||u.enumerable});return e};var L=e=>A(l({},"__esModule",{value:!0}),e);var M={};g(M,{autoInit:()=>D,init:()=>d});var S="data-resolution",b="video";function q(e){let t=e.trim();return t.startsWith("(")?t:`(${t})`}function h(e){return Array.from(e.children).filter(t=>t.tagName==="SOURCE")}function T(e,t){let r=h(e);if(r.length===0||r.filter(a=>a.hasAttribute(t)).length!==r.length)return null;let n=[],o=new Map;return r.forEach(a=>{let s=a.getAttribute(t).trim();o.has(s)||(o.set(s,[]),n.push(s)),o.get(s).push({src:a.getAttribute("src"),type:a.getAttribute("type")||""})}),{order:n,groups:o}}function w(e,t){h(e).forEach(r=>r.remove()),t.forEach(({src:r,type:u})=>{let n=document.createElement("source");n.setAttribute("src",r),u&&n.setAttribute("type",u),e.appendChild(n)});try{e.load()}catch{}if(e.autoplay)try{let r=e.play();r&&typeof r.catch=="function"&&r.catch(()=>{})}catch{}}function C(e,t){let r=T(e,t);if(!r)return null;let{order:u,groups:n}=r,o=u.map(c=>({key:c,mql:window.matchMedia(q(c))})),a=null;function s(){let c=o.find(m=>m.mql.matches);return c?c.key:null}function i(){let c=s();c===null||c===a||(a=c,w(e,n.get(c)))}let f=()=>i();return o.forEach(c=>c.mql.addEventListener("change",f)),i(),{evaluate:i,destroy(){o.forEach(c=>c.mql.removeEventListener("change",f))}}}function d(e={}){let{root:t=document,selector:r=b,attribute:u=S}=e,n=Array.from(t.querySelectorAll(r)).map(o=>C(o,u)).filter(Boolean);return{refresh(){n.forEach(o=>o.evaluate())},destroy(){n.forEach(o=>o.destroy())}}}function D(e){let t=()=>d(e);document.readyState==="loading"?document.addEventListener("DOMContentLoaded",t,{once:!0}):t()}return L(M);})();
+
+(function () {
+  if (typeof document === 'undefined') return;
+  var script = document.currentScript;
+  if (script && script.hasAttribute('data-no-autoinit')) return;
+  ResponsiveVideoSource.autoInit();
+})();
+
+//# sourceMappingURL=index.global.min.js.map

package/dist/index.global.min.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.js"],
+  "sourcesContent": ["const DEFAULT_ATTRIBUTE = 'data-resolution';\nconst DEFAULT_SELECTOR = 'video';\n\n/**\n * Wraps a bare media feature (\"min-width: 1024px\") in parens so it can be\n * passed to matchMedia(). Values that are already a full query (start with\n * \"(\") are left untouched so compound queries keep working.\n */\nfunction toMediaQuery(value) {\n  const trimmed = value.trim();\n  return trimmed.startsWith('(') ? trimmed : `(${trimmed})`;\n}\n\nfunction getDirectSourceChildren(video) {\n  return Array.from(video.children).filter(\n    (el) => el.tagName === 'SOURCE'\n  );\n}\n\n/**\n * Groups a video's <source> elements by their data-resolution value.\n * Returns null if the video has no sources, or only some of them carry the\n * attribute (a \"partial\" data set) -- those videos are left untouched so\n * native browser behavior still applies.\n */\nfunction readSourceGroups(video, attribute) {\n  const sources = getDirectSourceChildren(video);\n  if (sources.length === 0) return null;\n\n  const withAttr = sources.filter((s) => s.hasAttribute(attribute));\n  if (withAttr.length !== sources.length) return null;\n\n  const order = [];\n  const groups = new Map();\n\n  sources.forEach((s) => {\n    const key = s.getAttribute(attribute).trim();\n    if (!groups.has(key)) {\n      groups.set(key, []);\n      order.push(key);\n    }\n    groups.get(key).push({\n      src: s.getAttribute('src'),\n      type: s.getAttribute('type') || '',\n    });\n  });\n\n  return { order, groups };\n}\n\nfunction applySources(video, items) {\n  getDirectSourceChildren(video).forEach((s) => s.remove());\n\n  items.forEach(({ src, type }) => {\n    const source = document.createElement('source');\n    source.setAttribute('src', src);\n    if (type) source.setAttribute('type', type);\n    video.appendChild(source);\n  });\n\n  try {\n    video.load();\n  } catch (e) {\n    /* media APIs can be unimplemented in some test/SSR environments */\n  }\n\n  if (video.autoplay) {\n    try {\n      const playResult = video.play();\n      if (playResult && typeof playResult.catch === 'function') {\n        playResult.catch(() => {});\n      }\n    } catch (e) {\n      /* autoplay can be rejected/unsupported; not our concern here */\n    }\n  }\n}\n\nfunction setupVideo(video, attribute) {\n  const data = readSourceGroups(video, attribute);\n  if (!data) return null;\n\n  const { order, groups } = data;\n\n  // One matchMedia listener per unique breakpoint, not per <source>.\n  const queries = order.map((key) => ({\n    key,\n    mql: window.matchMedia(toMediaQuery(key)),\n  }));\n\n  let currentKey = null;\n\n  function pickKey() {\n    const match = queries.find((q) => q.mql.matches);\n    return match ? match.key : null;\n  }\n\n  // If nothing matches (a gap between breakpoints), leave things as they\n  // are rather than blanking the video out.\n  function evaluate() {\n    const key = pickKey();\n    if (key === null || key === currentKey) return;\n    currentKey = key;\n    applySources(video, groups.get(key));\n  }\n\n  const handler = () => evaluate();\n  queries.forEach((q) => q.mql.addEventListener('change', handler));\n\n  evaluate();\n\n  return {\n    evaluate,\n    destroy() {\n      queries.forEach((q) => q.mql.removeEventListener('change', handler));\n    },\n  };\n}\n\n/**\n * Scans for <video> elements and switches their <source> children based on\n * a data-resolution media-query attribute. Videos where only some <source>\n * elements carry the attribute are skipped entirely.\n *\n * @param {Object} [options]\n * @param {Document|Element} [options.root=document] - scope to search within\n * @param {string} [options.selector='video'] - selector for video elements\n * @param {string} [options.attribute='data-resolution'] - attribute to read\n * @returns {{ refresh: () => void, destroy: () => void }}\n */\nexport function init(options = {}) {\n  const {\n    root = document,\n    selector = DEFAULT_SELECTOR,\n    attribute = DEFAULT_ATTRIBUTE,\n  } = options;\n\n  const controllers = Array.from(root.querySelectorAll(selector))\n    .map((video) => setupVideo(video, attribute))\n    .filter(Boolean);\n\n  return {\n    refresh() {\n      controllers.forEach((c) => c.evaluate());\n    },\n    destroy() {\n      controllers.forEach((c) => c.destroy());\n    },\n  };\n}\n\n/**\n * Convenience helper for the standalone <script> build: runs init() once\n * the DOM is ready, using the given options (or defaults).\n */\nexport function autoInit(options) {\n  const run = () => init(options);\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', run, { once: true });\n  } else {\n    run();\n  }\n}"],
+  "mappings": "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",
+  "names": ["index_exports", "__export", "autoInit", "init", "DEFAULT_ATTRIBUTE", "DEFAULT_SELECTOR", "toMediaQuery", "value", "trimmed", "getDirectSourceChildren", "video", "el", "readSourceGroups", "attribute", "sources", "s", "order", "groups", "key", "applySources", "items", "src", "type", "source", "playResult", "setupVideo", "data", "queries", "currentKey", "pickKey", "match", "q", "evaluate", "handler", "options", "root", "selector", "controllers", "c", "run"]
+}

package/dist/index.mjs

@@ -0,0 +1,113 @@
+// src/index.js
+var DEFAULT_ATTRIBUTE = "data-resolution";
+var DEFAULT_SELECTOR = "video";
+function toMediaQuery(value) {
+  const trimmed = value.trim();
+  return trimmed.startsWith("(") ? trimmed : `(${trimmed})`;
+}
+function getDirectSourceChildren(video) {
+  return Array.from(video.children).filter(
+    (el) => el.tagName === "SOURCE"
+  );
+}
+function readSourceGroups(video, attribute) {
+  const sources = getDirectSourceChildren(video);
+  if (sources.length === 0) return null;
+  const withAttr = sources.filter((s) => s.hasAttribute(attribute));
+  if (withAttr.length !== sources.length) return null;
+  const order = [];
+  const groups = /* @__PURE__ */ new Map();
+  sources.forEach((s) => {
+    const key = s.getAttribute(attribute).trim();
+    if (!groups.has(key)) {
+      groups.set(key, []);
+      order.push(key);
+    }
+    groups.get(key).push({
+      src: s.getAttribute("src"),
+      type: s.getAttribute("type") || ""
+    });
+  });
+  return { order, groups };
+}
+function applySources(video, items) {
+  getDirectSourceChildren(video).forEach((s) => s.remove());
+  items.forEach(({ src, type }) => {
+    const source = document.createElement("source");
+    source.setAttribute("src", src);
+    if (type) source.setAttribute("type", type);
+    video.appendChild(source);
+  });
+  try {
+    video.load();
+  } catch (e) {
+  }
+  if (video.autoplay) {
+    try {
+      const playResult = video.play();
+      if (playResult && typeof playResult.catch === "function") {
+        playResult.catch(() => {
+        });
+      }
+    } catch (e) {
+    }
+  }
+}
+function setupVideo(video, attribute) {
+  const data = readSourceGroups(video, attribute);
+  if (!data) return null;
+  const { order, groups } = data;
+  const queries = order.map((key) => ({
+    key,
+    mql: window.matchMedia(toMediaQuery(key))
+  }));
+  let currentKey = null;
+  function pickKey() {
+    const match = queries.find((q) => q.mql.matches);
+    return match ? match.key : null;
+  }
+  function evaluate() {
+    const key = pickKey();
+    if (key === null || key === currentKey) return;
+    currentKey = key;
+    applySources(video, groups.get(key));
+  }
+  const handler = () => evaluate();
+  queries.forEach((q) => q.mql.addEventListener("change", handler));
+  evaluate();
+  return {
+    evaluate,
+    destroy() {
+      queries.forEach((q) => q.mql.removeEventListener("change", handler));
+    }
+  };
+}
+function init(options = {}) {
+  const {
+    root = document,
+    selector = DEFAULT_SELECTOR,
+    attribute = DEFAULT_ATTRIBUTE
+  } = options;
+  const controllers = Array.from(root.querySelectorAll(selector)).map((video) => setupVideo(video, attribute)).filter(Boolean);
+  return {
+    refresh() {
+      controllers.forEach((c) => c.evaluate());
+    },
+    destroy() {
+      controllers.forEach((c) => c.destroy());
+    }
+  };
+}
+function autoInit(options) {
+  const run = () => init(options);
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", run, { once: true });
+  } else {
+    run();
+  }
+}
+export {
+  autoInit,
+  init
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.js"],
+  "sourcesContent": ["const DEFAULT_ATTRIBUTE = 'data-resolution';\nconst DEFAULT_SELECTOR = 'video';\n\n/**\n * Wraps a bare media feature (\"min-width: 1024px\") in parens so it can be\n * passed to matchMedia(). Values that are already a full query (start with\n * \"(\") are left untouched so compound queries keep working.\n */\nfunction toMediaQuery(value) {\n  const trimmed = value.trim();\n  return trimmed.startsWith('(') ? trimmed : `(${trimmed})`;\n}\n\nfunction getDirectSourceChildren(video) {\n  return Array.from(video.children).filter(\n    (el) => el.tagName === 'SOURCE'\n  );\n}\n\n/**\n * Groups a video's <source> elements by their data-resolution value.\n * Returns null if the video has no sources, or only some of them carry the\n * attribute (a \"partial\" data set) -- those videos are left untouched so\n * native browser behavior still applies.\n */\nfunction readSourceGroups(video, attribute) {\n  const sources = getDirectSourceChildren(video);\n  if (sources.length === 0) return null;\n\n  const withAttr = sources.filter((s) => s.hasAttribute(attribute));\n  if (withAttr.length !== sources.length) return null;\n\n  const order = [];\n  const groups = new Map();\n\n  sources.forEach((s) => {\n    const key = s.getAttribute(attribute).trim();\n    if (!groups.has(key)) {\n      groups.set(key, []);\n      order.push(key);\n    }\n    groups.get(key).push({\n      src: s.getAttribute('src'),\n      type: s.getAttribute('type') || '',\n    });\n  });\n\n  return { order, groups };\n}\n\nfunction applySources(video, items) {\n  getDirectSourceChildren(video).forEach((s) => s.remove());\n\n  items.forEach(({ src, type }) => {\n    const source = document.createElement('source');\n    source.setAttribute('src', src);\n    if (type) source.setAttribute('type', type);\n    video.appendChild(source);\n  });\n\n  try {\n    video.load();\n  } catch (e) {\n    /* media APIs can be unimplemented in some test/SSR environments */\n  }\n\n  if (video.autoplay) {\n    try {\n      const playResult = video.play();\n      if (playResult && typeof playResult.catch === 'function') {\n        playResult.catch(() => {});\n      }\n    } catch (e) {\n      /* autoplay can be rejected/unsupported; not our concern here */\n    }\n  }\n}\n\nfunction setupVideo(video, attribute) {\n  const data = readSourceGroups(video, attribute);\n  if (!data) return null;\n\n  const { order, groups } = data;\n\n  // One matchMedia listener per unique breakpoint, not per <source>.\n  const queries = order.map((key) => ({\n    key,\n    mql: window.matchMedia(toMediaQuery(key)),\n  }));\n\n  let currentKey = null;\n\n  function pickKey() {\n    const match = queries.find((q) => q.mql.matches);\n    return match ? match.key : null;\n  }\n\n  // If nothing matches (a gap between breakpoints), leave things as they\n  // are rather than blanking the video out.\n  function evaluate() {\n    const key = pickKey();\n    if (key === null || key === currentKey) return;\n    currentKey = key;\n    applySources(video, groups.get(key));\n  }\n\n  const handler = () => evaluate();\n  queries.forEach((q) => q.mql.addEventListener('change', handler));\n\n  evaluate();\n\n  return {\n    evaluate,\n    destroy() {\n      queries.forEach((q) => q.mql.removeEventListener('change', handler));\n    },\n  };\n}\n\n/**\n * Scans for <video> elements and switches their <source> children based on\n * a data-resolution media-query attribute. Videos where only some <source>\n * elements carry the attribute are skipped entirely.\n *\n * @param {Object} [options]\n * @param {Document|Element} [options.root=document] - scope to search within\n * @param {string} [options.selector='video'] - selector for video elements\n * @param {string} [options.attribute='data-resolution'] - attribute to read\n * @returns {{ refresh: () => void, destroy: () => void }}\n */\nexport function init(options = {}) {\n  const {\n    root = document,\n    selector = DEFAULT_SELECTOR,\n    attribute = DEFAULT_ATTRIBUTE,\n  } = options;\n\n  const controllers = Array.from(root.querySelectorAll(selector))\n    .map((video) => setupVideo(video, attribute))\n    .filter(Boolean);\n\n  return {\n    refresh() {\n      controllers.forEach((c) => c.evaluate());\n    },\n    destroy() {\n      controllers.forEach((c) => c.destroy());\n    },\n  };\n}\n\n/**\n * Convenience helper for the standalone <script> build: runs init() once\n * the DOM is ready, using the given options (or defaults).\n */\nexport function autoInit(options) {\n  const run = () => init(options);\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', run, { once: true });\n  } else {\n    run();\n  }\n}"],
+  "mappings": ";AAAA,IAAM,oBAAoB;AAC1B,IAAM,mBAAmB;AAOzB,SAAS,aAAa,OAAO;AAC3B,QAAM,UAAU,MAAM,KAAK;AAC3B,SAAO,QAAQ,WAAW,GAAG,IAAI,UAAU,IAAI,OAAO;AACxD;AAEA,SAAS,wBAAwB,OAAO;AACtC,SAAO,MAAM,KAAK,MAAM,QAAQ,EAAE;AAAA,IAChC,CAAC,OAAO,GAAG,YAAY;AAAA,EACzB;AACF;AAQA,SAAS,iBAAiB,OAAO,WAAW;AAC1C,QAAM,UAAU,wBAAwB,KAAK;AAC7C,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,QAAM,WAAW,QAAQ,OAAO,CAAC,MAAM,EAAE,aAAa,SAAS,CAAC;AAChE,MAAI,SAAS,WAAW,QAAQ,OAAQ,QAAO;AAE/C,QAAM,QAAQ,CAAC;AACf,QAAM,SAAS,oBAAI,IAAI;AAEvB,UAAQ,QAAQ,CAAC,MAAM;AACrB,UAAM,MAAM,EAAE,aAAa,SAAS,EAAE,KAAK;AAC3C,QAAI,CAAC,OAAO,IAAI,GAAG,GAAG;AACpB,aAAO,IAAI,KAAK,CAAC,CAAC;AAClB,YAAM,KAAK,GAAG;AAAA,IAChB;AACA,WAAO,IAAI,GAAG,EAAE,KAAK;AAAA,MACnB,KAAK,EAAE,aAAa,KAAK;AAAA,MACzB,MAAM,EAAE,aAAa,MAAM,KAAK;AAAA,IAClC,CAAC;AAAA,EACH,CAAC;AAED,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,aAAa,OAAO,OAAO;AAClC,0BAAwB,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;AAExD,QAAM,QAAQ,CAAC,EAAE,KAAK,KAAK,MAAM;AAC/B,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,aAAa,OAAO,GAAG;AAC9B,QAAI,KAAM,QAAO,aAAa,QAAQ,IAAI;AAC1C,UAAM,YAAY,MAAM;AAAA,EAC1B,CAAC;AAED,MAAI;AACF,UAAM,KAAK;AAAA,EACb,SAAS,GAAG;AAAA,EAEZ;AAEA,MAAI,MAAM,UAAU;AAClB,QAAI;AACF,YAAM,aAAa,MAAM,KAAK;AAC9B,UAAI,cAAc,OAAO,WAAW,UAAU,YAAY;AACxD,mBAAW,MAAM,MAAM;AAAA,QAAC,CAAC;AAAA,MAC3B;AAAA,IACF,SAAS,GAAG;AAAA,IAEZ;AAAA,EACF;AACF;AAEA,SAAS,WAAW,OAAO,WAAW;AACpC,QAAM,OAAO,iBAAiB,OAAO,SAAS;AAC9C,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,EAAE,OAAO,OAAO,IAAI;AAG1B,QAAM,UAAU,MAAM,IAAI,CAAC,SAAS;AAAA,IAClC;AAAA,IACA,KAAK,OAAO,WAAW,aAAa,GAAG,CAAC;AAAA,EAC1C,EAAE;AAEF,MAAI,aAAa;AAEjB,WAAS,UAAU;AACjB,UAAM,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,IAAI,OAAO;AAC/C,WAAO,QAAQ,MAAM,MAAM;AAAA,EAC7B;AAIA,WAAS,WAAW;AAClB,UAAM,MAAM,QAAQ;AACpB,QAAI,QAAQ,QAAQ,QAAQ,WAAY;AACxC,iBAAa;AACb,iBAAa,OAAO,OAAO,IAAI,GAAG,CAAC;AAAA,EACrC;AAEA,QAAM,UAAU,MAAM,SAAS;AAC/B,UAAQ,QAAQ,CAAC,MAAM,EAAE,IAAI,iBAAiB,UAAU,OAAO,CAAC;AAEhE,WAAS;AAET,SAAO;AAAA,IACL;AAAA,IACA,UAAU;AACR,cAAQ,QAAQ,CAAC,MAAM,EAAE,IAAI,oBAAoB,UAAU,OAAO,CAAC;AAAA,IACrE;AAAA,EACF;AACF;AAaO,SAAS,KAAK,UAAU,CAAC,GAAG;AACjC,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,cAAc,MAAM,KAAK,KAAK,iBAAiB,QAAQ,CAAC,EAC3D,IAAI,CAAC,UAAU,WAAW,OAAO,SAAS,CAAC,EAC3C,OAAO,OAAO;AAEjB,SAAO;AAAA,IACL,UAAU;AACR,kBAAY,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;AAAA,IACzC;AAAA,IACA,UAAU;AACR,kBAAY,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC;AAAA,IACxC;AAAA,EACF;AACF;AAMO,SAAS,SAAS,SAAS;AAChC,QAAM,MAAM,MAAM,KAAK,OAAO;AAC9B,MAAI,SAAS,eAAe,WAAW;AACrC,aAAS,iBAAiB,oBAAoB,KAAK,EAAE,MAAM,KAAK,CAAC;AAAA,EACnE,OAAO;AACL,QAAI;AAAA,EACN;AACF;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@the-w4/responsive-video-source",
+  "version": "0.1.0",
+  "description": "Switches <video> <source> elements based on a data-resolution media-query attribute, so the right mp4/webm loads per breakpoint.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "browser": "./dist/index.global.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "node scripts/build.js",
+    "test": "node --test",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "keywords": [
+    "video",
+    "responsive",
+    "source",
+    "media-query",
+    "matchmedia",
+    "resolution",
+    "mp4",
+    "webm"
+  ],
+  "author": "Assaf Katz <assaf@thew4.co> (https://thew4.co)",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0",
+    "jsdom": "^25.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}