@revideo/player 0.2.0 → 0.2.1-alpha.892

package/dist/main.js

@@ -1,15 +1,29 @@
-var g = Object.defineProperty;
-var p = (o, s, t) => s in o ? g(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
-var e = (o, s, t) => (p(o, typeof s != "symbol" ? s + "" : s, t), t);
-import { Stage as v, Player as b, Vector2 as m } from "@revideo/core";
-const f = `.initial{display:none}.state-initial .initial{display:block}.loading{display:none}.state-loading .loading{display:block}.ready{display:none}.state-ready .ready{display:block}.error{display:none}.state-error .error{display:block}:host{position:relative;display:block}.overlay{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0;background-color:#0000008a;transition:opacity .1s}.overlay.state-ready:not(.auto){cursor:pointer}.overlay.playing:not(.hover):hover{cursor:none}.overlay.hover,.overlay.state-ready:focus-within,.overlay.state-ready:not(.playing){opacity:1}.overlay.hover .button,.overlay.state-ready:focus-within .button,.overlay.state-ready:not(.playing) .button{scale:1;transition:scale .1s ease-out}.overlay.state-loading,.overlay.state-error{opacity:1;transition:opacity 1s}.overlay.state-ready.auto{opacity:0}.button{width:50%;max-width:96px;aspect-ratio:1;scale:.5;transition:scale .1s ease-in,opacity .1s;background-color:transparent;border:none;background-size:100% 100%;background-repeat:no-repeat;opacity:.54;cursor:inherit;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE0LjV2LTlsNiA0LjUtNiA0LjV6Ii8+PC9zdmc+)}.playing .button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIGZpbGw9IiNmZmZmZmYiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48Zy8+PHBhdGggZD0iTTEyLDJDNi40OCwyLDIsNi40OCwyLDEyczQuNDgsMTAsMTAsMTBzMTAtNC40OCwxMC0xMFMxNy41MiwyLDEyLDJ6IE0xMSwxNkg5VjhoMlYxNnogTTE1LDE2aC0yVjhoMlYxNnoiLz48L2c+PC9zdmc+)}.button:focus,.overlay:hover .button{opacity:.87}.auto .button{display:none}.canvas{width:100%;display:block;opacity:0;transition:opacity .1s}.canvas.state-ready{opacity:1}.message{font-family:JetBrains Mono,sans-serif;text-align:center;font-size:20px;padding:8px 16px;margin:16px;border-radius:4px;color:#fff9;background-color:#000000de}.loader{width:50%;max-width:96px;display:none;rotate:-90deg;animation:stroke 2s cubic-bezier(.5,0,.5,1) infinite,rotate 2s linear infinite}@keyframes stroke{0%{stroke-dasharray:5.6548667765px 50.8938009883px;stroke-dashoffset:2.8274333882px}50%{stroke-dasharray:50.8938009883px 5.6548667765px;stroke-dashoffset:-2.8274333882px}to{stroke-dasharray:5.6548667765px 50.8938009883px;stroke-dashoffset:-53.7212343766px}}@keyframes rotate{0%{rotate:-110deg}to{rotate:250deg}}
-`, I = `<div class="overlay" part="overlay">
-  <button
-    part="play-button"
-    title="Play / Pause"
-    class="button ready"
-    tabindex="0"
-  ></button>
+var p = Object.defineProperty;
+var y = (h, r, t) => r in h ? p(h, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[r] = t;
+var e = (h, r, t) => (y(h, typeof r != "symbol" ? r + "" : r, t), t);
+import { Stage as M, Player as m, Vector2 as b } from "@revideo/core";
+const v = `.initial{display:none}.state-initial .initial{display:block}.loading{display:none}.state-loading .loading{display:block}.ready{display:none}.state-ready .ready{display:block}.error{display:none}.state-error .error{display:block}:host{position:relative;display:block}.controls{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;bottom:0%;height:10%;background:rgba(0,0,0,0)}.timeline-container{height:100%;width:calc(100% - 32px);top:0%;position:absolute;z-index:5}.timeline{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-left:16px;margin-right:16px;width:100%;background:transparent;cursor:pointer;background-size:100% 40px;background-repeat:no-repeat;bottom:10px;z-index:10}.timeline::-webkit-slider-runnable-track{width:100%;height:5px;background:white;background:var(--webkit-track, white)}.timeline:hover::-webkit-slider-runnable-track{width:100%;height:5px;background:white;background:var(--webkit-track, white)}.timeline::-moz-range-track{width:100%;height:5px;background:white;background:var(--moz-track, white)}.timeline::-ms-track{width:100%;height:4px;background:white;background:var(--ms-track, rgb(201, 199, 199))}.timeline::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s ease;margin-top:-6px}.timeline::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s ease;margin-top:-6px}.timeline::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s ease;margin-top:-6px}.timeline:hover::-webkit-slider-thumb{opacity:1;background:#fff}.timeline:hover::-moz-range-thumb{opacity:1;background:#fff}.timeline:hover::-ms-thumb{opacity:1;background:#fff}.overlay{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .1s;z-index:0}.overlay.state-ready:not(.auto){cursor:pointer}.overlay.playing:not(.hover):hover{cursor:none}.overlay.hover,.overlay.state-ready:focus-within,.overlay.state-ready:not(.playing){opacity:1}.overlay.state-loading,.overlay.state-error{opacity:1;transition:opacity 1s}.overlay.state-ready.auto{opacity:0}.button{width:16px;position:absolute;bottom:25px;left:14px;height:14px;transition:scale .1s ease-in,opacity .1s;background-color:transparent;border:none;background-size:100% 100%;background-repeat:no-repeat;cursor:inherit;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMSAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMS4wMDE0VjExLjM2MTRDMCAxMi4xNTE0IDAuODcgMTIuNjMxNCAxLjU0IDEyLjIwMTRMOS42OCA3LjAyMTRDMTAuMyA2LjYzMTQgMTAuMyA1LjczMTQgOS42OCA1LjMzMTRMMS41NCAwLjE2MTQwNUMwLjg3IC0wLjI2ODU5NiAwIDAuMjExNDA1IDAgMS4wMDE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==)}.playing .play-button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMEMxLjQ2OTU3IDAgMC45NjA4NTkgMC4yMTA3MTQgMC41ODU3ODYgMC41ODU3ODZDMC4yMTA3MTQgMC45NjA4NTkgMCAxLjQ2OTU3IDAgMlYxMkMwIDEyLjUzMDQgMC4yMTA3MTQgMTMuMDM5MSAwLjU4NTc4NiAxMy40MTQyQzAuOTYwODU5IDEzLjc4OTMgMS40Njk1NyAxNCAyIDE0QzIuNTMwNDMgMTQgMy4wMzkxNCAxMy43ODkzIDMuNDE0MjEgMTMuNDE0MkMzLjc4OTI5IDEzLjAzOTEgNCAxMi41MzA0IDQgMTJWMkM0IDEuNDY5NTcgMy43ODkyOSAwLjk2MDg1OSAzLjQxNDIxIDAuNTg1Nzg2QzMuMDM5MTQgMC4yMTA3MTQgMi41MzA0MyAwIDIgMFpNMTAgMEM5LjQ2OTU3IDAgOC45NjA4NiAwLjIxMDcxNCA4LjU4NTc5IDAuNTg1Nzg2QzguMjEwNzEgMC45NjA4NTkgOCAxLjQ2OTU3IDggMlYxMkM4IDEyLjUzMDQgOC4yMTA3MSAxMy4wMzkxIDguNTg1NzkgMTMuNDE0MkM4Ljk2MDg2IDEzLjc4OTMgOS40Njk1NyAxNCAxMCAxNEMxMC41MzA0IDE0IDExLjAzOTEgMTMuNzg5MyAxMS40MTQyIDEzLjQxNDJDMTEuNzg5MyAxMy4wMzkxIDEyIDEyLjUzMDQgMTIgMTJWMkMxMiAxLjQ2OTU3IDExLjc4OTMgMC45NjA4NTkgMTEuNDE0MiAwLjU4NTc4NkMxMS4wMzkxIDAuMjEwNzE0IDEwLjUzMDQgMCAxMCAwWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==)}.auto .play-button{display:none}.current-time{position:absolute;left:44px;bottom:25px;color:#fff;font-family:Arial,sans-serif;font-size:14px;line-height:14px}.canvas{width:100%;display:block;opacity:0;transition:opacity .1s}.canvas.state-ready{opacity:1}.message{font-family:JetBrains Mono,sans-serif;text-align:center;font-size:20px;padding:8px 16px;margin:16px;border-radius:4px;color:#fff9;background-color:#000000de}.loader{width:50%;max-width:96px;display:none;rotate:-90deg;animation:stroke 2s cubic-bezier(.5,0,.5,1) infinite,rotate 2s linear infinite}@keyframes stroke{0%{stroke-dasharray:5.6548667765px 50.8938009883px;stroke-dashoffset:2.8274333882px}50%{stroke-dasharray:50.8938009883px 5.6548667765px;stroke-dashoffset:-2.8274333882px}to{stroke-dasharray:5.6548667765px 50.8938009883px;stroke-dashoffset:-53.7212343766px}}@keyframes rotate{0%{rotate:-110deg}to{rotate:250deg}}
+`, k = `<div class="overlay" part="overlay">
+  <div class="controls">
+    <button
+      part="play-button"
+      title="Play / Pause"
+      class="button play-button ready"
+      tabindex="0"
+    ></button>
+    <!-- New button to the right -->
+    <span class="current-time" part="current-time">0:00 / 0:00</span>
+    <div class="timeline-container">
+      <input
+        type="range"
+        class="timeline"
+        value="0"
+        min="0"
+        max="100"
+        step="1"
+      />
+    </div>
+  </div>
   <div part="message" class="message error">
     An error occurred while loading the animation.
   </div>
@@ -20,12 +34,10 @@ const f = `.initial{display:none}.state-initial .initial{display:block}.loading{
     stroke="#ffffff"
     stroke-width="2"
     fill="transparent"
-  >
-    <circle cx="12" cy="12" r="9" />
-  </svg>
+  ></svg>
 </div>
-`, M = `<style>${f}</style>${I}`, c = "revideo-player";
-class w extends HTMLElement {
+`, f = `<style>${v}</style>${k}`, d = "revideo-player";
+class x extends HTMLElement {
   constructor() {
     super();
     e(this, "root");
@@ -41,7 +53,13 @@ class w extends HTMLElement {
     e(this, "finished", !1);
     e(this, "playing", !1);
     e(this, "connected", !1);
-    e(this, "stage", new v());
+    e(this, "stage", new M());
+    e(this, "timeline");
+    e(this, "handleTimelineChange", (t) => {
+      var n, o;
+      const a = t.target, i = parseFloat(a.value);
+      ((n = this.player) == null ? void 0 : n.playback.duration) && ((o = this.player) == null || o.requestSeek(i));
+    });
     e(this, "handleMouseMove", () => {
       this.mouseMoveId && clearTimeout(this.mouseMoveId), this.hover && !this.playing && this.setPlaying(!0), this.mouseMoveId = window.setTimeout(() => {
         this.mouseMoveId = null, this.updateClass();
@@ -51,10 +69,10 @@ class w extends HTMLElement {
       this.hover && this.setPlaying(!1), this.mouseMoveId && (clearTimeout(this.mouseMoveId), this.mouseMoveId = null, this.updateClass());
     });
     e(this, "handleMouseDown", (t) => {
-      t.preventDefault();
+      t.target.closest(".timeline") || t.preventDefault();
     });
-    e(this, "handleClick", () => {
-      this.auto || (this.handleMouseMove(), this.setPlaying(!this.playing), this.button.animate(
+    e(this, "handleClick", (t) => {
+      t.target.closest(".timeline") || this.auto || (this.handleMouseMove(), this.setPlaying(!this.playing), this.button.animate(
         [
           { scale: "0.9" },
           {
@@ -66,12 +84,29 @@ class w extends HTMLElement {
       ));
     });
     e(this, "render", async () => {
-      this.player && await this.stage.render(
-        this.player.playback.currentScene,
-        this.player.playback.previousScene
-      );
+      var t;
+      if (this.player) {
+        await this.stage.render(
+          this.player.playback.currentScene,
+          this.player.playback.previousScene
+        ), this.timeline.setAttribute("min", "0"), this.timeline.setAttribute("step", "1"), this.timeline.setAttribute(
+          "max",
+          (t = this.player) == null ? void 0 : t.playback.duration.toString()
+        );
+        const a = this.player.status.time, i = this.player.status.framesToSeconds(
+          this.player.playback.duration
+        );
+        if (i) {
+          const s = this.player.status.secondsToFrames(a);
+          this.timeline.value = s.toString();
+          const n = `linear-gradient(to right, rgb(180, 180, 180) 0%, rgb(180, 180, 180) ${100 * s / this.player.status.secondsToFrames(i)}%, white ${100 * s / this.player.status.secondsToFrames(i)}%, white 100%)`;
+          this.timeline.style.background = n, this.timeline.style.setProperty("--webkit-track", n), this.timeline.style.setProperty("--moz-track", n), this.timeline.style.setProperty("--ms-track", n);
+          const o = this.formatTime(a), c = this.formatTime(i), l = this.root.querySelector(".current-time");
+          l && (l.textContent = `${o} / ${c}`);
+        }
+      }
     });
-    this.root = this.attachShadow({ mode: "open" }), this.root.innerHTML = M, this.overlay = this.root.querySelector(".overlay"), this.button = this.root.querySelector(".button"), this.canvas = this.stage.finalBuffer, this.canvas.classList.add("canvas"), this.root.prepend(this.canvas), this.overlay.addEventListener("click", this.handleClick), this.overlay.addEventListener("mousemove", this.handleMouseMove), this.overlay.addEventListener("mouseleave", this.handleMouseLeave), this.button.addEventListener("mousedown", this.handleMouseDown), this.setState(
+    this.root = this.attachShadow({ mode: "open" }), this.root.innerHTML = f, this.overlay = this.root.querySelector(".overlay"), this.button = this.root.querySelector(".button"), this.canvas = this.stage.finalBuffer, this.canvas.classList.add("canvas"), this.root.prepend(this.canvas), this.timeline = this.root.querySelector(".timeline"), this.timeline.addEventListener("input", this.handleTimelineChange), this.timeline.addEventListener("change", this.handleTimelineChange), this.button.addEventListener("click", this.handleClick), this.button.addEventListener("mousedown", this.handleMouseDown), this.overlay.addEventListener("click", this.handleClick), this.overlay.addEventListener("mousemove", this.handleMouseMove), this.overlay.addEventListener("mouseleave", this.handleMouseLeave), this.overlay.addEventListener("mousedown", this.handleMouseDown), this.setState(
       "initial"
       /* Initial */
     );
@@ -116,38 +151,38 @@ class w extends HTMLElement {
     this.overlay.className = `overlay state-${this.state}`, this.canvas.className = `canvas state-${this.state}`, this.overlay.classList.toggle("playing", this.playing), this.overlay.classList.toggle("auto", this.auto), this.overlay.classList.toggle("hover", this.mouseMoveId !== null), this.connected && (this.mouseMoveId !== null || !this.playing ? this.dataset.overlay = "" : delete this.dataset.overlay);
   }
   async updateSource(t) {
-    var r, l, h, d;
+    var s, n, o, c;
     this.setState(
       "initial"
       /* Initial */
-    ), (r = this.abortController) == null || r.abort(), this.abortController = new AbortController();
+    ), (s = this.abortController) == null || s.abort(), this.abortController = new AbortController();
     let a;
     try {
-      const n = import(
+      const l = import(
         /* webpackIgnore: true */
         /* @vite-ignore */
         t
-      ), y = new Promise((u) => setTimeout(u, 200));
-      await Promise.any([y, n]), this.setState(
+      ), u = new Promise((g) => setTimeout(g, 200));
+      await Promise.any([u, l]), this.setState(
         "loading"
         /* Loading */
-      ), a = (await n).default;
-    } catch (n) {
-      console.error(n), this.setState(
+      ), a = (await l).default;
+    } catch (l) {
+      console.error(l), this.setState(
         "error"
         /* Error */
       );
       return;
     }
     this.defaultSettings = a.meta.getFullRenderingSettings();
-    const i = new b(a);
-    i.setVariables(this.variables), this.finished = !1, (l = this.player) == null || l.onRender.unsubscribe(this.render), (h = this.player) == null || h.togglePlayback(!1), (d = this.player) == null || d.deactivate(), this.project = a, this.player = i, this.updateSettings(), this.player.onRender.subscribe(this.render), this.player.togglePlayback(this.playing), this.setState(
+    const i = new m(a);
+    i.setVariables(this.variables), this.finished = !1, (n = this.player) == null || n.onRender.unsubscribe(this.render), (o = this.player) == null || o.togglePlayback(!1), (c = this.player) == null || c.deactivate(), this.project = a, this.player = i, this.updateSettings(), this.player.onRender.subscribe(this.render), this.player.togglePlayback(this.playing), this.setState(
       "ready"
       /* Ready */
     );
   }
   attributeChangedCallback(t, a, i) {
-    var r;
+    var s;
     switch (t) {
       case "auto":
         this.setPlaying(this.playing);
@@ -161,7 +196,7 @@ class w extends HTMLElement {
         this.updateSettings();
         break;
       case "variables":
-        (r = this.player) == null || r.setVariables(this.variables);
+        (s = this.player) == null || s.setVariables(this.variables), this.player.requestSeek(this.player.playback.frame);
     }
   }
   disconnectedCallback() {
@@ -175,10 +210,14 @@ class w extends HTMLElement {
   updateSettings() {
     const t = {
       ...this.defaultSettings,
-      size: new m(this.width, this.height),
+      size: new b(this.width, this.height),
       resolutionScale: this.quality
     };
     this.stage.configure(t), this.player.configure(t);
   }
+  formatTime(t) {
+    const a = Math.floor(t / 60), i = Math.floor(t % 60), s = a.toString().padStart(2, "0"), n = i.toString().padStart(2, "0");
+    return `${s}:${n}`;
+  }
 }
-customElements.get(c) || customElements.define(c, w);
+customElements.get(d) || customElements.define(d, x);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/player",
-  "version": "0.2.0",
+  "version": "0.2.1-alpha.892+474c60e",
   "description": "A custom element for displaying animations made with revideo",
   "main": "dist/main.js",
   "types": "types/main.d.ts",
@@ -26,5 +26,5 @@
     "sass": "^1.58.0",
     "terser": "^5.16.1"
   },
-  "gitHead": "d45195eb1b38e0de57617ece58affd418a95f2aa"
+  "gitHead": "474c60ece59ba496cfe5e9053449b30fa03ba4c0"
 }