@linear_non/stellar-libs 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
   "main": "src/index.js",
   "type": "module",

package/src/SpritePlayer/index.js

@@ -8,22 +8,32 @@ export default class SpritePlayer {
   constructor({
     canvas,
     container,
+
+    // path-based
     mobile_path,
     desktop_path,
     fileName,
     total = 0,
-    progress = 0,
     fileExtension = "png",
+
+    // direct URLs
+    urls = null, // string[]
+    alpha_urls = null, // string[]
+
+    // misc
     cache = null,
+    progress = 0,
     persistent = false,
     alpha_path = null, // { mobile, desktop }
     fileAlpha = null,
     useAlpha = false,
+    useWorker = true,
   }) {
     const rect = bounds(container)
     this.progress = gsap.utils.clamp(0, 1, progress)
     this.persistent = persistent
     this.isAlpha = !!useAlpha
+    this.useWorker = useWorker
 
     this.dom = { container, reference: container, images: [], alphaImages: [] }
     this.canvas = {
@@ -41,18 +51,31 @@ export default class SpritePlayer {
       total,
       file_extension: fileExtension,
       cache,
+      urls,
+      alpha_urls,
       alpha_path,
       fileAlpha,
     }
 
     this.state = { loaded: false }
     this.isVisible = true
+    this._loaders = []
     this.init()
   }
 
   async loadImages() {
-    const { mobile_path, desktop_path, alpha_path, file_name, fileAlpha, total, file_extension, cache } =
-      this.settings
+    const {
+      mobile_path,
+      desktop_path,
+      alpha_path,
+      file_name,
+      fileAlpha,
+      total,
+      file_extension,
+      cache,
+      urls,
+      alpha_urls,
+    } = this.settings
 
     const originBase = sniffer.isDesktop ? desktop_path : mobile_path || desktop_path
     const originAlpha = alpha_path
@@ -61,22 +84,28 @@ export default class SpritePlayer {
         : alpha_path.mobile || alpha_path.desktop
       : null
 
-    const make = (origin, name) =>
-      new ImageLoader({
+    const make = ({ origin, fileName, list }) => {
+      const loader = new ImageLoader({
         origin,
-        fileName: name,
+        fileName,
         extension: file_extension,
         total,
+        urls: Array.isArray(list) ? list : [],
         cache,
-        useWorker: true,
-      }).load()
+        useWorker: this.useWorker,
+      })
+      this._loaders.push(loader)
+      return loader.load()
+    }
 
     const onProgress = e => emitter.emit("sprite:progress", { instance: this, ...e })
     emitter.on(ImageLoader.events.PROGRESS, onProgress)
 
     const [images, alphaImages] = await Promise.all([
-      make(originBase, file_name),
-      originAlpha && fileAlpha ? make(originAlpha, fileAlpha) : Promise.resolve([]),
+      make({ origin: originBase, fileName: file_name, list: urls }),
+      originAlpha && (fileAlpha || (alpha_urls && alpha_urls.length))
+        ? make({ origin: originAlpha, fileName: fileAlpha, list: alpha_urls })
+        : Promise.resolve([]),
     ])
 
     emitter.off?.(ImageLoader.events.PROGRESS, onProgress)
@@ -87,9 +116,12 @@ export default class SpritePlayer {
     if (this.isAlpha && this.dom.alphaImages.length) {
       this.dom.alphaImages = this.dom.alphaImages.map(img => this.toAlphaFromLuma(img))
     }
-    if (this.isAlpha && !this.dom.alphaImages.length) this.isAlpha = false
+    if (this.isAlpha && this.dom.alphaImages.length !== this.dom.images.length) {
+      this.isAlpha = false
+      this.dom.alphaImages = []
+    }
 
-    this.frameCount = images.length
+    this.frameCount = this.dom.images.length
     this.state.loaded = true
     emitter.emit("sprite:loaded", this)
   }
@@ -112,10 +144,9 @@ export default class SpritePlayer {
     Object.assign(this.canvas, { width: rect.width, height: rect.height, rect, area, offset })
   }
 
-  // grayscale -> alpha (returns a canvas)
   toAlphaFromLuma(img) {
-    const w = img.naturalWidth || img.width,
-      h = img.naturalHeight || img.height
+    const w = img.naturalWidth || img.width
+    const h = img.naturalHeight || img.height
     const c = document.createElement("canvas")
     c.width = w
     c.height = h
@@ -210,12 +241,11 @@ export default class SpritePlayer {
   destroy() {
     this.off()
     if (!this.persistent) {
-      const revoke = img => img?.src?.startsWith("blob:") && URL.revokeObjectURL(img.src)
-      this.dom.images.forEach(revoke)
-      this.dom.alphaImages.forEach(revoke)
+      this._loaders.forEach(l => l.destroy?.())
     }
     this.dom.images = []
     this.dom.alphaImages = []
+    this._loaders = []
   }
 
   async init() {