@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/mobile-app/bottom-popup.global.css

@@ -0,0 +1,2 @@
+[data-bottom-popup]{background-color:#fff;border-top-left-radius:5px;border-top-right-radius:5px;bottom:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;left:0;margin-left:2px;margin-right:2px;position:absolute;right:0}[data-bottom-popup]>[data-element=bar]{background-color:#d3d3d3;border-top-left-radius:5px;border-top-right-radius:5px;grid-column:1/span 3;grid-row:1;z-index:10}[data-bottom-popup]>[data-element=icon]{align-self:center;grid-column:1;grid-row:1;margin-right:5px;padding:5px;z-index:11}[data-bottom-popup]>[data-element=close]{align-self:center;grid-column:3;grid-row:1;margin-left:5px;padding:5px;z-index:11}[data-bottom-popup]>[data-element=title]{grid-column:2;grid-row:1;padding:5px;z-index:11}[data-bottom-popup]>[data-element=content]{grid-column:1/span 3;grid-row:2;padding:5px;z-index:11}[data-bottom-popup]>[data-element=footer]{grid-column:1/span 3;grid-row:3;margin-top:5px;padding:5px;z-index:11}[data-bottom-popup-container]{background-color:rgba(0,0,0,.3);bottom:0;left:0;position:absolute;right:0;top:0;z-index:500}
+/*# sourceMappingURL=bottom-popup.global.css.map */

package/dist-esm/mobile-app/bottom-popup.global.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile-app/bottom-popup.global.css"],"names":[],"mappings":"AAAA,oBAYI,qBAAyB,CALzB,0BAA2B,CAC3B,2BAA4B,CAJ5B,QAAW,CAKX,YAAa,CACb,mCAAoC,CACpC,iCAAkC,CATlC,MAAS,CAGT,eAAgB,CAChB,gBAAiB,CALjB,iBAAkB,CAElB,OA2DJ,CAhDI,uCAKI,wBAAyB,CAJzB,0BAA2B,CAC3B,2BAA4B,CAE5B,oBAAuB,CADvB,UAAW,CAGX,UACJ,CAEA,wCAII,iBAAkB,CAFlB,aAAc,CADd,UAAW,CAIX,gBAAiB,CAFjB,WAAY,CAGZ,UACJ,CAEA,yCAKI,iBAAkB,CAHlB,aAAc,CADd,UAAW,CAGX,eAAgB,CADhB,WAAY,CAGZ,UACJ,CAEA,yCAEI,aAAc,CADd,UAAW,CAEX,WAAY,CACZ,UACJ,CAEA,2CAGI,oBAAuB,CADvB,UAAW,CADX,WAAY,CAGZ,UACJ,CAEA,0CAEI,oBAAuB,CADvB,UAAW,CAEX,cAAe,CACf,WAAY,CACZ,UACJ,CAGJ,8BAMI,+BAAiC,CAFjC,QAAS,CAFT,MAAO,CADP,iBAAkB,CAIlB,OAAQ,CAFR,KAAM,CAIN,WACJ","file":"bottom-popup.global.css"}

package/dist-esm/player/AtomVideoPlayer.global.css

@@ -0,0 +1,2 @@
+[data-video-player=video-player]{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto auto auto;overflow:hidden}[data-video-player=video-player]>[data-element=banner]{align-items:center;align-self:end;background-color:#000;border-radius:10px;color:#fff;display:none;gap:5px;grid-column-end:span 3;grid-column-start:1;grid-row-end:span 3;grid-row-start:3;grid-template-columns:auto 1fr;grid-template-rows:auto auto;height:15%;justify-items:stretch;justify-self:center;overflow:hidden;padding:10px;z-index:2}[data-video-player=video-player]>[data-element=banner][data-has-logo=true]{display:grid}[data-video-player=video-player]>[data-element=banner]>*{min-height:0;min-width:0}[data-video-player=video-player]>[data-element=banner]>[data-element=logo]{grid-column:1;grid-row:1/span 2;height:100%;z-index:2}[data-video-player=video-player]>[data-element=banner]>[data-element=logo-title]{font-weight:700;grid-column-start:2;grid-row-start:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:2}[data-video-player=video-player]>[data-element=banner]>[data-element=logo-description]{font-size:smaller;grid-column-start:2;grid-row-start:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:2}[data-video-player=video-player]>[data-element=poster],[data-video-player=video-player]>[data-element=video]{align-self:stretch;grid-column-end:span 3;grid-column-start:1;grid-row-end:span 5;grid-row-start:1;justify-self:stretch}[data-video-player=video-player]>[data-element=play-element]{align-items:center;align-self:center;display:flex;flex-direction:row;gap:4px;grid-column-end:span 3;grid-column-start:1;grid-row-end:span 5;grid-row-start:1;justify-content:center;justify-self:center;z-index:10}[data-video-player=video-player]>[data-element=play-element]>button.play{align-items:center;background-color:#00f;border-radius:9999px;color:#fff;display:inline-flex;font-size:25px;height:50px;justify-content:center;padding:10px;text-align:center;vertical-align:middle;width:50px}[data-video-player=video-player]>[data-element=play-element]>button.play>i{margin-left:4px}[data-video-player=video-player]>[data-element=progress]{align-self:flex-end;background-color:rgba(0,0,0,.3);cursor:pointer;grid-column-end:span 3;grid-column-start:1;grid-row-start:4;height:15px;justify-self:stretch;padding-bottom:5px;padding-top:5px;width:100%;z-index:11}[data-video-player=video-player]>[data-element=toolbar]{align-items:center;background-color:rgba(0,0,0,.3);color:#fff;display:flex;flex-direction:row;gap:4px;grid-column-end:span 3;grid-column-start:1;grid-row-start:5;justify-content:flex-start;z-index:10}[data-video-player=video-player]>[data-element=toolbar]>*{margin-left:5px;min-width:20px;padding:5px}[data-video-player=video-player]>[data-element=toolbar]>[data-style=button]{height:30px;padding:5px;width:30px}[data-video-player=video-player]>[data-element=toolbar]>[data-font-size=small]{font-size:x-small}[data-video-player=video-player]>[data-element=toolbar]>[data-element=volume-range]{border:none;box-shadow:none;color:green;height:2px}[data-video-player=video-player]>[data-element=toolbar]>[data-element=volume-range]:focus{border:none;box-shadow:none}[data-video-player=video-player]>[data-element=toolbar]>[data-element=full-screen]{margin-left:auto}[data-video-player=video-player][data-controls=true]>[data-element=progress],[data-video-player=video-player][data-controls=true]>[data-element=toolbar]{display:flex}[data-video-player=video-player][data-state=paused]>[data-element=toolbar]>[data-element-pause],[data-video-player=video-player][data-state=playing][data-controls=false]>[data-element=play-element],[data-video-player=video-player][data-state=playing][data-controls=false]>[data-element=progress],[data-video-player=video-player][data-state=playing][data-controls=false]>[data-element=toolbar],[data-video-player=video-player][data-state=waiting]>[data-element=play-element],[data-video-player=video-player][data-state=waiting]>[data-element=toolbar]>[data-element=play],[data-video-player=video-player][data-state=waiting][data-controls=false]>[data-element=progress],[data-video-player=video-player][data-state=waiting][data-controls=false]>[data-element=toolbar]{display:none}
+/*# sourceMappingURL=AtomVideoPlayer.global.css.map */

package/dist-esm/player/AtomVideoPlayer.global.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/player/AtomVideoPlayer.global.css"],"names":[],"mappings":"AAAA,iCACI,YAAa,CAEb,mCAAoC,CADpC,0CAA2C,CAE3C,eAyNJ,CAvNI,uDAyBI,kBAAmB,CAlBnB,cAAe,CAWf,qBAAuB,CAGvB,kBAAmB,CAFnB,UAAY,CAUZ,YAAa,CAlBb,OAAQ,CANR,sBAAuB,CADvB,mBAAoB,CADpB,mBAAoB,CADpB,gBAAiB,CAajB,8BAA+B,CAC/B,4BAA6B,CAP7B,UAAW,CAiBX,qBAAsB,CAlBtB,mBAAoB,CAKpB,eAAgB,CAUhB,YAAa,CAIb,SAuCJ,CAnCI,2EACI,YACJ,CAEA,yDACI,YAAa,CACb,WACJ,CAEA,2EAEI,aAAc,CADd,iBAAoB,CAGpB,WAAY,CADZ,SAEJ,CAEA,iFAII,eAAiB,CAFjB,mBAAoB,CADpB,gBAAiB,CAIjB,eAAgB,CAEhB,sBAAuB,CADvB,kBAAmB,CAHnB,SAKJ,CAEA,uFAII,iBAAkB,CAFlB,mBAAoB,CADpB,gBAAiB,CAIjB,eAAgB,CAEhB,sBAAuB,CADvB,kBAAmB,CAHnB,SAKJ,CAGJ,6GAKI,kBAAmB,CADnB,sBAAuB,CADvB,mBAAoB,CADpB,mBAAoB,CADpB,gBAAiB,CAKjB,oBACJ,CAEA,6DASI,kBAAmB,CAHnB,iBAAkB,CAMlB,YAAa,CAJb,kBAAmB,CAGnB,OAAQ,CANR,sBAAuB,CADvB,mBAAoB,CADpB,mBAAoB,CADpB,gBAAiB,CAQjB,sBAAuB,CAHvB,mBAAoB,CANpB,UA8BJ,CAjBI,yEAEI,kBAAmB,CAGnB,qBAAyB,CACzB,oBAAqB,CAFrB,UAAc,CAHd,mBAAoB,CAMpB,cAAe,CAGf,WAAY,CAPZ,sBAAuB,CAKvB,YAAa,CAGb,iBAAkB,CAClB,qBAAsB,CAHtB,UAOJ,CAHI,2EACI,eACJ,CAIR,yDAKI,mBAAoB,CAKpB,+BAAiC,CAEjC,cAAe,CARf,sBAAuB,CADvB,mBAAoB,CADpB,gBAAiB,CAIjB,WAAY,CAGZ,oBAAqB,CADrB,kBAAmB,CADnB,eAAgB,CAIhB,UAAW,CAVX,UAYJ,CAEA,wDAQI,kBAAmB,CAHnB,+BAAiC,CACjC,UAAc,CAKd,YAAa,CAJb,kBAAmB,CAGnB,OAAQ,CANR,sBAAuB,CADvB,mBAAoB,CADpB,gBAAiB,CAOjB,0BAA2B,CAR3B,UA4CJ,CAhCI,0DAEI,eAAgB,CADhB,cAAe,CAEf,WACJ,CAEA,4EAEI,WAAY,CACZ,WAAY,CAFZ,UAGJ,CAEA,+EACI,iBACJ,CAEA,oFAII,WAAY,CADZ,eAAgB,CADhB,WAAc,CADd,UAIJ,CAEA,0FAEI,WAAY,CADZ,eAEJ,CAEA,mFACI,gBACJ,CASA,yJACI,YACJ,CA+BI,6vBACI,YACJ","file":"AtomVideoPlayer.global.css"}

package/dist-esm/player/AtomVideoPlayer.js

@@ -6,298 +6,344 @@ import XNode from "@web-atoms/core/dist/core/XNode.js";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
 import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI.js";
 const isTouchEnabled = /android|iPhone|iPad/i.test(navigator.userAgent);
-import "./AtomVideoPlayer.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./AtomVideoPlayer.global.css"));
 const gatherElements = (e, data = {}) => {
-    const ce = ChildEnumerator.enumerate(e);
-    for (const iterator of ce) {
-        const elementName = iterator.dataset.element?.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-        if (elementName) {
-            data[elementName] = iterator;
-        }
-        gatherElements(iterator, data);
+  const ce = ChildEnumerator.enumerate(e);
+  for (const iterator of ce) {
+    const elementName = iterator.dataset.element?.replace(/-([a-z])/g, g => g[1].toUpperCase());
+    if (elementName) {
+      data[elementName] = iterator;
     }
-    return data;
+    gatherElements(iterator, data);
+  }
+  return data;
 };
-const numberToText = (n) => {
-    if (n < 10) {
-        return "0" + n;
-    }
-    return n.toString();
+const numberToText = n => {
+  if (n < 10) {
+    return "0" + n;
+  }
+  return n.toString();
 };
 const durationText = (n, total) => {
-    if (n === null || n === undefined) {
-        return "";
-    }
-    const minutes = Math.floor(n / 60);
-    const seconds = numberToText(Math.ceil(n % 60));
-    const totalMinutes = Math.floor(total / 60);
-    const totalSeconds = numberToText(Math.ceil(total % 60));
-    return `${minutes}:${seconds} / ${totalMinutes}:${totalSeconds}`;
+  if (n === null || n === undefined) {
+    return "";
+  }
+  const minutes = Math.floor(n / 60);
+  const seconds = numberToText(Math.ceil(n % 60));
+  const totalMinutes = Math.floor(total / 60);
+  const totalSeconds = numberToText(Math.ceil(total % 60));
+  return `${minutes}:${seconds} / ${totalMinutes}:${totalSeconds}`;
 };
 const noSoundIcon = "fa-duotone fa-volume-slash";
 const mute = "fa-duotone fa-volume-xmark";
 const low = "fa-duotone fa-volume-low";
 const mid = "fa-duotone fa-volume";
 const high = "fa-duotone fa-volume-high";
-const getPlayIcon = (state) => {
-    switch (state) {
-        case "ended":
-            return "fa-solid fa-refresh";
-        case "paused":
-            return "fa-solid fa-play";
-        case "playing":
-            return "fa-solid fa-pause";
-    }
-    return "fa-solid fa-play";
+const getPlayIcon = state => {
+  switch (state) {
+    case "ended":
+      return "fa-solid fa-refresh";
+    case "paused":
+      return "fa-solid fa-play";
+    case "playing":
+      return "fa-solid fa-pause";
+  }
+  return "fa-solid fa-play";
 };
 export default class AtomVideoPlayer extends AtomControl {
-    constructor() {
-        super(...arguments);
-        this.maxWidth = "";
-    }
-    get poster() {
-        return this.video.poster;
-    }
-    set poster(v) {
-        this.video.poster = v;
-    }
-    get state() {
-        return this.element.getAttribute("data-state");
-    }
-    set state(v) {
-        this.element.setAttribute("data-state", v);
-        AtomBinder.refreshValue(this, "paused");
-        AtomBinder.refreshValue(this, "state");
-    }
-    get duration() {
-        return this.video.duration;
+  constructor() {
+    super(...arguments);
+    this.maxWidth = "";
+  }
+  get poster() {
+    return this.video.poster;
+  }
+  set poster(v) {
+    this.video.poster = v;
+  }
+  get state() {
+    return this.element.getAttribute("data-state");
+  }
+  set state(v) {
+    this.element.setAttribute("data-state", v);
+    AtomBinder.refreshValue(this, "paused");
+    AtomBinder.refreshValue(this, "state");
+  }
+  get duration() {
+    return this.video.duration;
+  }
+  get time() {
+    return this.video.currentTime;
+  }
+  set time(v) {
+    this.video.currentTime = v;
+  }
+  get paused() {
+    return this.video.paused;
+  }
+  get isFullScreen() {
+    return (document.fullscreenEnabled && this.element === document.fullscreenElement) ?? false;
+  }
+  stopFullscreen() {
+    if (this.isFullScreen) {
+      return document.exitFullscreen();
     }
-    get time() {
-        return this.video.currentTime;
+    return Promise.resolve();
+  }
+  pause() {
+    this.video.pause();
+  }
+  play() {
+    this.video.play().catch(console.error);
+  }
+  onPropertyChanged(name) {
+    switch (name) {
+      case "source":
+        this.updateSource();
+        break;
     }
-    set time(v) {
-        this.video.currentTime = v;
-    }
-    get paused() {
-        return this.video.paused;
-    }
-    get isFullScreen() {
-        return (document.fullscreenEnabled && this.element === document.fullscreenElement) ?? false;
-    }
-    stopFullscreen() {
-        if (this.isFullScreen) {
-            return document.exitFullscreen();
+  }
+  setCurrentTime(n) {
+    this.video.currentTime = n * this.video.duration;
+  }
+  create() {
+    this.element.dataset.videoPlayer = "video-player";
+    this.bindEvent(this.element, "togglePlay", e => {
+      if (e.defaultPrevented) {
+        return;
+      }
+      e.preventDefault();
+      if (isTouchEnabled) {
+        if (this.state === "playing") {
+          if (e.target === this.video) {
+            if (this.element.dataset.controls === "true") {
+              this.element.dataset.controls = "false";
+            } else {
+              this.element.dataset.controls = "true";
+            }
+            return;
+          }
         }
-        return Promise.resolve();
-    }
-    pause() {
+        if (e.target.tagName === "CANVAS") {
+          return;
+        }
+      }
+      if (this.video.paused) {
+        this.video.play();
+        this.element.dataset.controls = "false";
+      } else {
         this.video.pause();
-    }
-    play() {
-        this.video.play().catch(console.error);
-    }
-    onPropertyChanged(name) {
-        switch (name) {
-            case "source":
-                this.updateSource();
-                break;
+        this.element.dataset.controls = "true";
+      }
+    });
+    this.bindEvent(this.element, "volume", e => {
+      this.video.muted = !this.video.muted;
+      this.updateVolume();
+    });
+    this.bindEvent(this.element, "fullScreen", async e => {
+      if (!this.element.requestFullscreen) {
+        this.video.webkitEnterFullscreen();
+        return;
+      }
+      if (this.isFullScreen) {
+        await document.exitFullscreen();
+        return;
+      }
+      await this.element.requestFullscreen({
+        navigationUI: "show"
+      });
+    });
+    this.bindEvent(document, "fullscreenchange", () => {
+      AtomBinder.refreshValue(this, "isFullScreen");
+    });
+    this.render(XNode.create("div", {
+      "data-click-event": "toggle-play",
+      "data-state": "pause"
+    }, XNode.create("div", {
+      "data-has-logo": Bind.oneWay(() => this.logo ? "true" : "false", "false"),
+      "data-element": "banner",
+      "style-width": Bind.oneWay(() => this.maxWidth)
+    }, XNode.create("img", {
+      "data-element": "logo",
+      src: Bind.oneWay(() => this.logo)
+    }), XNode.create("div", {
+      "data-element": "logo-title",
+      text: Bind.oneWay(() => this.logo && this.logoTitle)
+    }), XNode.create("div", {
+      "data-element": "logo-description",
+      text: Bind.oneWay(() => this.logo && this.logoDescription)
+    })), XNode.create("video", {
+      "event-abort": () => this.state = "aborted",
+      "event-durationchange": e => AtomBinder.refreshValue(this, "duration"),
+      "event-ended": async e => {
+        this.state = "ended";
+        if (document.fullscreenEnabled && this.element === document.fullscreenElement) {
+          await document.exitFullscreen();
         }
+        e.target.dispatchEvent(new CustomEvent("videoEnded", {
+          bubbles: true
+        }));
+      },
+      "event-loadedmetadata": () => {
+        this.updateVolume();
+        this.currentTimeSpan.textContent = durationText(0, this.duration);
+        this.updateProgress();
+        const {
+          video
+        } = this;
+        const {
+          videoWidth,
+          videoHeight
+        } = video;
+        const eW = video.offsetWidth * videoHeight / videoWidth;
+        const maxWidth = 100 * (this.element.offsetWidth - eW) / this.element.offsetWidth;
+        if (maxWidth > 50 && maxWidth < 100) {
+          this.maxWidth = `${maxWidth}%`;
+        }
+        AtomBinder.refreshValue(this, "duration");
+      },
+      "event-pause": () => this.state = "paused",
+      "event-play": () => this.state = "playing",
+      "event-progress": () => this.updateProgress(),
+      "event-timeupdate": () => {
+        this.currentTimeSpan.textContent = durationText(this.time, this.duration);
+        this.state = "playing";
+        this.updateProgress();
+        AtomBinder.refreshValue(this, "time");
+      },
+      "event-waiting": () => this.state = "waiting",
+      "event-volumechange": () => this.updateVolume(),
+      autoplay: false,
+      playsInline: true,
+      "style-max-width": "100%",
+      "style-max-height": "100%",
+      "data-element": "video"
+    }), XNode.create("canvas", {
+      "data-element": "progress"
+    }), XNode.create("img", {
+      "data-element": "poster"
+    }), XNode.create("div", {
+      "data-element": "toolbar"
+    }, XNode.create("i", {
+      "data-element": "play",
+      "data-style": "button",
+      class: Bind.oneWay(() => getPlayIcon(this.state))
+    }), XNode.create("i", {
+      "data-click-event": "volume",
+      "data-style": "button",
+      "data-element": "sound",
+      class: "fa-duotone fa-volume-slash"
+    }), !isTouchEnabled && XNode.create("input", {
+      "data-click-event": "none",
+      "data-element": "volume-range",
+      type: "range",
+      min: 0,
+      max: 1,
+      step: 0.1
+    }), XNode.create("span", {
+      "data-font-size": "small",
+      "data-element": "current",
+      text: "0:00"
+    }), XNode.create("i", {
+      "data-click-event": "full-screen",
+      "data-style": "button",
+      "data-element": "full-screen",
+      class: Bind.oneWay(() => this.isFullScreen ? "fa-solid fa-compress" : "fa-solid fa-expand")
+    })), XNode.create("div", {
+      "data-click-event": "toggle-play",
+      "data-element": "play-element"
+    }, XNode.create("button", {
+      class: "play"
+    }, XNode.create("i", {
+      class: Bind.oneWay(() => getPlayIcon(this.state))
+    })))));
+    const all = gatherElements(this.element);
+    this.video = all.video;
+    this.progress = all.progress;
+    this.currentTimeSpan = all.current;
+    this.soundIcon = all.sound;
+    this.volumeRange = all.volumeRange;
+    if (this.volumeRange) {
+      this.bindEvent(this.volumeRange, "input", () => {
+        setTimeout(() => {
+          this.video.volume = parseFloat(this.volumeRange.value);
+        }, 1);
+      });
     }
-    setCurrentTime(n) {
-        this.video.currentTime = n * this.video.duration;
+    this.bindEvent(this.element, "mouseenter", () => {
+      this.element.dataset.controls = "true";
+    });
+    this.bindEvent(this.element, "mouseleave", () => {
+      this.element.dataset.controls = "false";
+    });
+    this.bindEvent(this.progress, "pointerdown", e => {
+      e.preventDefault();
+      this.setCurrentTime(e.offsetX / this.progress.clientWidth);
+      const move = e1 => {
+        e1.preventDefault();
+        this.setCurrentTime(e1.offsetX / this.progress.clientWidth);
+      };
+      const up = e1 => {
+        e1.preventDefault();
+        this.progress.removeEventListener("pointermove", move);
+        this.progress.removeEventListener("pointerup", up);
+      };
+      this.progress.addEventListener("pointermove", move);
+      this.progress.addEventListener("pointerup", up);
+    });
+  }
+  updateSource() {
+    this.video.src = this.source;
+  }
+  updateProgress() {
+    const context = this.progress.getContext("2d");
+    context.strokeStyle = "rgba(0,0,0,0)";
+    const width = this.progress.clientWidth;
+    const height = this.progress.clientHeight;
+    this.progress.width = width;
+    this.progress.height = height;
+    context.clearRect(0, 0, width, height);
+    const max = this.video.duration;
+    const seekable = this.video.buffered;
+    const scale = width / max;
+    context.fillStyle = "rgba(255,255,255,0.3)";
+    context.fillRect(0, 0, width, height);
+    context.fillStyle = "rgba(255,255,255,0.6)";
+    for (let index = 0; index < seekable.length; index++) {
+      const start = seekable.start(index) * scale;
+      const end = seekable.end(index) * scale;
+      context.fillRect(start, 0, end, height);
     }
-    create() {
-        this.element.dataset.videoPlayer = "video-player";
-        this.bindEvent(this.element, "togglePlay", (e) => {
-            if (e.defaultPrevented) {
-                return;
-            }
-            e.preventDefault();
-            if (isTouchEnabled) {
-                if (this.state === "playing") {
-                    if (e.target === this.video) {
-                        if (this.element.dataset.controls === "true") {
-                            this.element.dataset.controls = "false";
-                        }
-                        else {
-                            this.element.dataset.controls = "true";
-                        }
-                        return;
-                    }
-                }
-                if (e.target.tagName === "CANVAS") {
-                    return;
-                }
-            }
-            if (this.video.paused) {
-                this.video.play();
-                this.element.dataset.controls = "false";
-            }
-            else {
-                this.video.pause();
-                this.element.dataset.controls = "true";
-            }
-        });
-        this.bindEvent(this.element, "volume", (e) => {
-            this.video.muted = !this.video.muted;
-            this.updateVolume();
-        });
-        this.bindEvent(this.element, "fullScreen", async (e) => {
-            if (!this.element.requestFullscreen) {
-                this.video.webkitEnterFullscreen();
-                return;
-            }
-            if (this.isFullScreen) {
-                await document.exitFullscreen();
-                return;
-            }
-            await this.element.requestFullscreen({ navigationUI: "show" });
-        });
-        this.bindEvent(document, "fullscreenchange", () => {
-            AtomBinder.refreshValue(this, "isFullScreen");
-        });
-        this.render(XNode.create("div", { "data-click-event": "toggle-play", "data-state": "pause" },
-            XNode.create("div", { "data-has-logo": Bind.oneWay(() => this.logo ? "true" : "false", "false"), "data-element": "banner", "style-width": Bind.oneWay(() => this.maxWidth) },
-                XNode.create("img", { "data-element": "logo", src: Bind.oneWay(() => this.logo) }),
-                XNode.create("div", { "data-element": "logo-title", text: Bind.oneWay(() => this.logo && this.logoTitle) }),
-                XNode.create("div", { "data-element": "logo-description", text: Bind.oneWay(() => this.logo && this.logoDescription) })),
-            XNode.create("video", { "event-abort": () => this.state = "aborted", "event-durationchange": (e) => AtomBinder.refreshValue(this, "duration"), "event-ended": async (e) => {
-                    this.state = "ended";
-                    if (document.fullscreenEnabled && this.element === document.fullscreenElement) {
-                        await document.exitFullscreen();
-                    }
-                    e.target.dispatchEvent(new CustomEvent("videoEnded", { bubbles: true }));
-                }, "event-loadedmetadata": () => {
-                    this.updateVolume();
-                    this.currentTimeSpan.textContent = durationText(0, this.duration);
-                    this.updateProgress();
-                    const { video } = this;
-                    const { videoWidth, videoHeight } = video;
-                    const eW = video.offsetWidth * videoHeight / videoWidth;
-                    const maxWidth = (100 * (this.element.offsetWidth - eW) / this.element.offsetWidth);
-                    if (maxWidth > 50 && maxWidth < 100) {
-                        this.maxWidth = `${maxWidth}%`;
-                    }
-                    AtomBinder.refreshValue(this, "duration");
-                }, "event-pause": () => this.state = "paused", "event-play": () => this.state = "playing", "event-progress": () => this.updateProgress(), "event-timeupdate": () => {
-                    this.currentTimeSpan.textContent = durationText(this.time, this.duration);
-                    this.state = "playing";
-                    this.updateProgress();
-                    AtomBinder.refreshValue(this, "time");
-                }, "event-waiting": () => this.state = "waiting", "event-volumechange": () => this.updateVolume(), autoplay: false, playsInline: true, "style-max-width": "100%", "style-max-height": "100%", "data-element": "video" }),
-            XNode.create("canvas", { "data-element": "progress" }),
-            XNode.create("img", { "data-element": "poster" }),
-            XNode.create("div", { "data-element": "toolbar" },
-                XNode.create("i", { "data-element": "play", "data-style": "button", class: Bind.oneWay(() => getPlayIcon(this.state)) }),
-                XNode.create("i", { "data-click-event": "volume", "data-style": "button", "data-element": "sound", class: "fa-duotone fa-volume-slash" }),
-                !isTouchEnabled && XNode.create("input", { "data-click-event": "none", "data-element": "volume-range", type: "range", min: 0, max: 1, step: 0.1 }),
-                XNode.create("span", { "data-font-size": "small", "data-element": "current", text: "0:00" }),
-                XNode.create("i", { "data-click-event": "full-screen", "data-style": "button", "data-element": "full-screen", class: Bind.oneWay(() => this.isFullScreen
-                        ? "fa-solid fa-compress" :
-                        "fa-solid fa-expand") })),
-            XNode.create("div", { "data-click-event": "toggle-play", "data-element": "play-element" },
-                XNode.create("button", { class: "play" },
-                    XNode.create("i", { class: Bind.oneWay(() => getPlayIcon(this.state)) })))));
-        const all = gatherElements(this.element);
-        this.video = all.video;
-        this.progress = all.progress;
-        this.currentTimeSpan = all.current;
-        this.soundIcon = all.sound;
-        this.volumeRange = all.volumeRange;
-        if (this.volumeRange) {
-            this.bindEvent(this.volumeRange, "input", () => {
-                setTimeout(() => {
-                    this.video.volume = parseFloat(this.volumeRange.value);
-                }, 1);
-            });
-        }
-        this.bindEvent(this.element, "mouseenter", () => {
-            this.element.dataset.controls = "true";
-        });
-        this.bindEvent(this.element, "mouseleave", () => {
-            this.element.dataset.controls = "false";
-        });
-        this.bindEvent(this.progress, "pointerdown", (e) => {
-            e.preventDefault();
-            this.setCurrentTime(e.offsetX / this.progress.clientWidth);
-            const move = (e1) => {
-                e1.preventDefault();
-                this.setCurrentTime(e1.offsetX / this.progress.clientWidth);
-            };
-            const up = (e1) => {
-                e1.preventDefault();
-                this.progress.removeEventListener("pointermove", move);
-                this.progress.removeEventListener("pointerup", up);
-            };
-            this.progress.addEventListener("pointermove", move);
-            this.progress.addEventListener("pointerup", up);
-        });
+    context.fillStyle = "#ffffff";
+    context.fillRect(0, 0, this.video.currentTime * scale, height);
+  }
+  updateVolume() {
+    if (this.video.muted) {
+      this.soundIcon.className = mute;
+      this.soundIcon.title = "Unmute";
+      if (this.volumeRange) {
+        this.volumeRange.style.display = "none";
+      }
+      return;
     }
-    updateSource() {
-        this.video.src = this.source;
+    const audio = this.video.volume;
+    if (this.volumeRange) {
+      this.volumeRange.style.display = "";
+      this.volumeRange.value = audio?.toString();
     }
-    updateProgress() {
-        const context = this.progress.getContext("2d");
-        context.strokeStyle = "rgba(0,0,0,0)";
-        const width = this.progress.clientWidth;
-        const height = this.progress.clientHeight;
-        this.progress.width = width;
-        this.progress.height = height;
-        context.clearRect(0, 0, width, height);
-        const max = this.video.duration;
-        const seekable = this.video.buffered;
-        const scale = width / max;
-        context.fillStyle = "rgba(255,255,255,0.3)";
-        context.fillRect(0, 0, width, height);
-        context.fillStyle = "rgba(255,255,255,0.6)";
-        for (let index = 0; index < seekable.length; index++) {
-            const start = seekable.start(index) * scale;
-            const end = seekable.end(index) * scale;
-            context.fillRect(start, 0, end, height);
-        }
-        context.fillStyle = "#ffffff";
-        context.fillRect(0, 0, this.video.currentTime * scale, height);
+    this.soundIcon.title = "Mute";
+    if (audio > 0.8) {
+      this.soundIcon.className = high;
+      return;
     }
-    updateVolume() {
-        if (this.video.muted) {
-            this.soundIcon.className = mute;
-            this.soundIcon.title = "Unmute";
-            if (this.volumeRange) {
-                this.volumeRange.style.display = "none";
-            }
-            return;
-        }
-        const audio = this.video.volume;
-        if (this.volumeRange) {
-            this.volumeRange.style.display = "";
-            this.volumeRange.value = audio?.toString();
-        }
-        this.soundIcon.title = "Mute";
-        if (audio > 0.8) {
-            this.soundIcon.className = high;
-            return;
-        }
-        if (audio < 0.2) {
-            this.soundIcon.className = low;
-            return;
-        }
-        this.soundIcon.className = mid;
+    if (audio < 0.2) {
+      this.soundIcon.className = low;
+      return;
     }
+    this.soundIcon.className = mid;
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomVideoPlayer.prototype, "source", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomVideoPlayer.prototype, "logo", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], AtomVideoPlayer.prototype, "logoTitle", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], AtomVideoPlayer.prototype, "logoDescription", void 0);
-//# sourceMappingURL=AtomVideoPlayer.js.map
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomVideoPlayer.prototype, "source", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomVideoPlayer.prototype, "logo", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], AtomVideoPlayer.prototype, "logoTitle", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], AtomVideoPlayer.prototype, "logoDescription", void 0);

package/dist-esm/player/TrackProgress.js

@@ -1,9 +1,13 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "../styles/track-progress.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("../styles/track-progress.global.css"));
 export default function TrackProgress(a) {
-    return XNode.create("div", { "data-track-progress": "track-progress" },
-        XNode.create("div", { class: "available" }),
-        XNode.create("div", { class: "done" }),
-        XNode.create("div", { class: "thumb" }));
-}
-//# sourceMappingURL=TrackProgress.js.map
+  return XNode.create("div", {
+    "data-track-progress": "track-progress"
+  }, XNode.create("div", {
+    class: "available"
+  }), XNode.create("div", {
+    class: "done"
+  }), XNode.create("div", {
+    class: "thumb"
+  }));
+}