fix: load special effect files lazily

With this change, special effect files are only loaded when the preview box is hovered or when the
effect is actually played. Nothing is loaded automatically, not even the metadata. This should help
to improve the experience when using lot's of special effects such as when using the effects from
JB2A.

Closes #209

src/fxmaster.js

@@ -4,6 +4,7 @@ import { FXMASTER } from "./config.js";
 import { WeatherLayer } from "./weatherEffects/WeatherLayer.js";
 import { filterManager } from "./filterEffects/FilterManager.js";
 import { executeWhenWorldIsMigratedToLatest, isOnTargetMigration, migrate } from "./migration.js";
+import { SpecialsConfig } from "./specialEffects/applications/specials-config.js";
 import { SpecialsLayer } from "./specialEffects/SpecialsLayer.js";
 import { registerHelpers } from "./helpers.js";
 import { registerGetSceneControlButtonsHook } from "./controls.js";
@@ -188,6 +189,11 @@ Hooks.on("updateSetting", (data) => {
   if (data.data.key === "fxmaster.specialEffects") {
     parseSpecialEffects();
   }
+  Object.values(ui.windows).forEach((w) => {
+    if (w instanceof SpecialsConfig) {
+      w.render(false);
+    }
+  });
 });
 
 Hooks.on("renderDrawingHUD", (hud, html, data) => {

src/settings.js

@@ -62,6 +62,6 @@ export const registerSettings = function () {
   });
 };
 
-export const debouncedReload = foundry.utils.debounce(() => {
+const debouncedReload = foundry.utils.debounce(() => {
   window.location.reload();
 }, 100);

src/specialEffects/applications/specials-config.js

@@ -69,9 +69,7 @@ export class SpecialsConfig extends Application {
         return;
       }
       settings.splice(id, 1);
-      game.settings.set(packageId, "specialEffects", settings).then(() => {
-        this.render(true);
-      });
+      game.settings.set(packageId, "specialEffects", settings);
     });
 
     html.find(".edit-effect").click((ev) => {

src/specialEffects/applications/specials-create.js

@@ -1,4 +1,3 @@
-import { SpecialsConfig } from "./specials-config.js";
 import { easeFunctions } from "../../ease.js";
 import { packageId } from "../../constants.js";
 
@@ -79,10 +78,10 @@ export class SpecialCreate extends FormApplication {
   /**
    * This method is called upon form submission after form data is validated
    * @param event {Event}       The initial triggering submission event
-   * @param formData {Object}   The object of validated form data with which to update the object
-   * @private
+   * @param formData {object}   The object of validated form data with which to update the object
+   * @protected
    */
-  _updateObject(_, formData) {
+  async _updateObject(_, formData) {
     const fxs = game.settings.get(packageId, "specialEffects");
 
     const newData = {
@@ -113,12 +112,6 @@ export class SpecialCreate extends FormApplication {
     } else {
       fxs.push(newData);
     }
-    game.settings.set(packageId, "specialEffects", fxs).then(() => {
-      Object.values(ui.windows).forEach((w) => {
-        if (w instanceof SpecialsConfig) {
-          w.render();
-        }
-      });
-    });
+    await game.settings.set(packageId, "specialEffects", fxs);
   }
 }

templates/specials-config.hbs

@@ -29,7 +29,7 @@
         {{#each folder.effects as |effect effectId|}}
         <li class="directory-item entity flexrow special-effects" data-effect-id="{{effectId}}" draggable="true">
           <div class="preview">
-            <video width="46" height="46" muted>
+            <video preload="none" width="46" height="46" muted>
               <source src="{{effect.file}}">
             </video>
           </div>