@twick/player 0.14.0 → 0.14.3

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 motion-canvas
-
-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.
+MIT License
+
+Copyright (c) 2022 motion-canvas
+
+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/dist/main.js

@@ -1,41 +1,41 @@
 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);
+var y = (h, n, t) => n in h ? p(h, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[n] = t;
+var e = (h, n, t) => (y(h, typeof n != "symbol" ? n + "" : n, t), t);
 import { Stage as M, getFullPreviewSettings as m, Player as b, Vector2 as v } from "@twick/core";
 const k = `.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:linear-gradient(0deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 100%)}.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}}
-`, f = `<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>
-  <svg
-    part="loader"
-    class="loader loading"
-    viewBox="0 0 24 24"
-    stroke="#ffffff"
-    stroke-width="2"
-    fill="transparent"
-  ></svg>
-</div>
+`, f = `<div class="overlay" part="overlay">\r
+  <div class="controls">\r
+    <button\r
+      part="play-button"\r
+      title="Play / Pause"\r
+      class="button play-button ready"\r
+      tabindex="0"\r
+    ></button>\r
+    <!-- New button to the right -->\r
+    <span class="current-time" part="current-time">0:00 / 0:00</span>\r
+    <div class="timeline-container">\r
+      <input\r
+        type="range"\r
+        class="timeline"\r
+        value="0"\r
+        min="0"\r
+        max="100"\r
+        step="1"\r
+      />\r
+    </div>\r
+  </div>\r
+  <div part="message" class="message error">\r
+    An error occurred while loading the animation.\r
+  </div>\r
+  <svg\r
+    part="loader"\r
+    class="loader loading"\r
+    viewBox="0 0 24 24"\r
+    stroke="#ffffff"\r
+    stroke-width="2"\r
+    fill="transparent"\r
+  ></svg>\r
+</div>\r
 `, x = `<style>${k}</style>${f}`, d = "twick-player";
 class w extends HTMLElement {
   constructor() {
@@ -97,9 +97,9 @@ class w extends HTMLElement {
           this.player.playback.duration
         );
         if (i) {
-          const n = this.player.status.secondsToFrames(a);
-          this.timeline.value = n.toString();
-          const s = `linear-gradient(to right, rgb(180, 180, 180) 0%, rgb(180, 180, 180) ${100 * n / this.player.status.secondsToFrames(i)}%, white ${100 * n / this.player.status.secondsToFrames(i)}%, white 100%)`;
+          const r = this.player.status.secondsToFrames(a);
+          this.timeline.value = r.toString();
+          const s = `linear-gradient(to right, rgb(180, 180, 180) 0%, rgb(180, 180, 180) ${100 * r / this.player.status.secondsToFrames(i)}%, white ${100 * r / this.player.status.secondsToFrames(i)}%, white 100%)`;
           this.timeline.style.background = s, this.timeline.style.setProperty("--webkit-track", s), this.timeline.style.setProperty("--moz-track", s), this.timeline.style.setProperty("--ms-track", s);
           const o = this.formatTime(a), c = this.formatTime(i), l = this.root.querySelector(".current-time");
           l && (l.textContent = `${o} / ${c}`);
@@ -151,11 +151,11 @@ 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 n, s, o, c;
+    var r, s, o, c;
     this.setState(
       "initial"
       /* Initial */
-    ), (n = this.abortController) == null || n.abort(), this.abortController = new AbortController();
+    ), (r = this.abortController) == null || r.abort(), this.abortController = new AbortController();
     let a;
     try {
       const l = import(
@@ -182,7 +182,7 @@ class w extends HTMLElement {
     );
   }
   attributeChangedCallback(t, a, i) {
-    var n, s;
+    var r, s;
     switch (t) {
       case "auto":
         this.setPlaying(this.playing);
@@ -196,7 +196,7 @@ class w extends HTMLElement {
         this.updateSettings();
         break;
       case "variables":
-        (n = this.player) == null || n.setVariables(this.variables), (s = this.player) == null || s.requestSeek(this.player.playback.frame);
+        (r = this.player) == null || r.setVariables(this.variables), (s = this.player) == null || s.requestSeek(this.player.playback.frame);
     }
   }
   disconnectedCallback() {
@@ -216,8 +216,8 @@ class w extends HTMLElement {
     this.stage.configure(t), this.player.configure(t);
   }
   formatTime(t) {
-    const a = Math.floor(t / 60), i = Math.floor(t % 60), n = a.toString().padStart(2, "0"), s = i.toString().padStart(2, "0");
-    return `${n}:${s}`;
+    const a = Math.floor(t / 60), i = Math.floor(t % 60), r = a.toString().padStart(2, "0"), s = i.toString().padStart(2, "0");
+    return `${r}:${s}`;
   }
 }
 customElements.get(d) || customElements.define(d, w);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/player",
-  "version": "0.14.0",
+  "version": "0.14.3",
   "description": "A custom element for displaying animations made with twick",
   "main": "dist/main.js",
   "types": "types/main.d.ts",
@@ -22,9 +22,9 @@
     "types"
   ],
   "devDependencies": {
-    "@twick/core": "^0.14.0",
+    "@twick/core": "0.14.3",
     "sass": "^1.58.0",
     "terser": "^5.16.1"
   },
-  "gitHead": "54bd58bf80ea6afec48c27c061e6d455c1e0a885"
+  "gitHead": "71de575b466ee3c95d6d2c9c19135d7d80369948"
 }

package/types/main.d.ts

@@ -1,8 +1,8 @@
-export interface MotionCanvasPlayerProps {
-  src: string;
-  width?: number;
-  height?: number;
-  auto?: boolean;
-  quality?: number;
-  variables?: string;
-}
+export interface MotionCanvasPlayerProps {
+  src: string;
+  width?: number;
+  height?: number;
+  auto?: boolean;
+  quality?: number;
+  variables?: string;
+}