etro 0.9.0 → 0.10.0

package/dist/etro-iife.js

@@ -39,11 +39,68 @@ var etro = (function () {
             return t;
         };
         return __assign.apply(this, arguments);
-    };
+    };
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f) throw new TypeError("Generator is already executing.");
+            while (_) try {
+                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+                if (y = 0, t) op = [op[0] & 2, t.value];
+                switch (op[0]) {
+                    case 0: case 1: t = op; break;
+                    case 4: _.label++; return { value: op[1], done: false };
+                    case 5: _.label++; y = op[1]; op = [0]; continue;
+                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                    default:
+                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                        if (t[2]) _.ops.pop();
+                        _.trys.pop(); continue;
+                }
+                op = body.call(thisArg, _);
+            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
 
     /**
      * @module event
      */
+    var DeprecatedEvent = /** @class */ (function () {
+        function DeprecatedEvent(replacement, message) {
+            if (message === void 0) { message = undefined; }
+            this.replacement = replacement;
+            this.message = message;
+        }
+        DeprecatedEvent.prototype.toString = function () {
+            var str = '';
+            if (this.replacement) {
+                str += "Use ".concat(this.replacement, " instead.");
+            }
+            if (this.message) {
+                str += " ".concat(this.message);
+            }
+            return str;
+        };
+        return DeprecatedEvent;
+    }());
+    var deprecatedEvents = {};
     /**
      * An event type
      * @private
@@ -53,11 +110,14 @@ var etro = (function () {
             this._parts = id.split('.');
         }
         TypeId.prototype.contains = function (other) {
-            if (other._parts.length > this._parts.length)
+            if (other._parts.length > this._parts.length) {
                 return false;
-            for (var i = 0; i < other._parts.length; i++)
-                if (other._parts[i] !== this._parts[i])
+            }
+            for (var i = 0; i < other._parts.length; i++) {
+                if (other._parts[i] !== this._parts[i]) {
                     return false;
+                }
+            }
             return true;
         };
         TypeId.prototype.toString = function () {
@@ -65,23 +125,50 @@ var etro = (function () {
         };
         return TypeId;
     }());
+    function deprecate(type, newType, message) {
+        if (message === void 0) { message = undefined; }
+        deprecatedEvents[type] = new DeprecatedEvent(newType, message);
+    }
+    function subscribeOnce(target, type, listener) {
+        var wrapped = function (event) {
+            unsubscribe(target, wrapped);
+            listener(event);
+        };
+        subscribe(target, type, wrapped);
+    }
+    function subscribeMany(target, type, listener) {
+        if (!listeners.has(target)) {
+            listeners.set(target, []);
+        }
+        listeners.get(target).push({ type: new TypeId(type), listener: listener });
+    }
     /**
-     * Listen for an event or category of events
+     * Listen for an event or category of events.
      *
-     * @param target - a etro object
+     * @param target - an etro object
      * @param type - the id of the type (can contain subtypes, such as
      * "type.subtype")
      * @param listener
+     * @param options - options
+     * @param options.once - if true, the listener will only be called once
      */
-    function subscribe(target, type, listener) {
-        if (!listeners.has(target))
-            listeners.set(target, []);
-        listeners.get(target).push({ type: new TypeId(type), listener: listener });
+    function subscribe(target, type, listener, options) {
+        if (options === void 0) { options = {}; }
+        // Check if this event is deprecated.
+        if (Object.keys(deprecatedEvents).includes(type)) {
+            console.warn("Event ".concat(type, " is deprecated. ").concat(deprecatedEvents[type]));
+        }
+        if (options.once) {
+            subscribeOnce(target, type, listener);
+        }
+        else {
+            subscribeMany(target, type, listener);
+        }
     }
     /**
      * Remove an event listener
      *
-     * @param target - a etro object
+     * @param target - an etro object
      * @param type - the id of the type (can contain subtypes, such as
      * "type.subtype")
      * @param listener
@@ -89,33 +176,36 @@ var etro = (function () {
     function unsubscribe(target, listener) {
         // Make sure `listener` has been added with `subscribe`.
         if (!listeners.has(target) ||
-            !listeners.get(target).map(function (pair) { return pair.listener; }).includes(listener))
+            !listeners.get(target).map(function (pair) { return pair.listener; }).includes(listener)) {
             throw new Error('No matching event listener to remove');
+        }
         var removed = listeners.get(target)
             .filter(function (pair) { return pair.listener !== listener; });
         listeners.set(target, removed);
     }
     /**
-     * Emits an event to all listeners
+     * Publish an event to all listeners without checking if it is deprecated.
      *
-     * @param target - a etro object
-     * @param type - the id of the type (can contain subtypes, such as
-     * "type.subtype")
-     * @param event - any additional event data
+     * @param target
+     * @param type
+     * @param event
+     * @returns
      */
-    function publish(target, type, event) {
+    function _publish(target, type, event) {
         event.target = target; // could be a proxy
         event.type = type;
         var t = new TypeId(type);
-        if (!listeners.has(target))
+        if (!listeners.has(target)) {
             // No event fired
             return null;
+        }
         // Call event listeners for this event.
         var listenersForType = [];
         for (var i = 0; i < listeners.get(target).length; i++) {
             var item = listeners.get(target)[i];
-            if (t.contains(item.type))
+            if (t.contains(item.type)) {
                 listenersForType.push(item.listener);
+            }
         }
         for (var i = 0; i < listenersForType.length; i++) {
             var listener = listenersForType[i];
@@ -123,9 +213,33 @@ var etro = (function () {
         }
         return event;
     }
+    /**
+     * Emits an event to all listeners
+     *
+     * @param target - an etro object
+     * @param type - the id of the type (can contain subtypes, such as
+     * "type.subtype")
+     * @param event - any additional event data
+     */
+    function publish(target, type, event) {
+        // Check if this event is deprecated only if it can be replaced.
+        if (Object.keys(deprecatedEvents).includes(type) && deprecatedEvents[type].replacement) {
+            throw new Error("Event ".concat(type, " is deprecated. ").concat(deprecatedEvents[type]));
+        }
+        // Check for deprecated events that this event replaces.
+        for (var deprecated in deprecatedEvents) {
+            var deprecatedEvent = deprecatedEvents[deprecated];
+            if (type === deprecatedEvent.replacement) {
+                _publish(target, deprecated, __assign({}, event));
+            }
+        }
+        return _publish(target, type, event);
+    }
     var listeners = new WeakMap();
 
     var event = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        deprecate: deprecate,
         subscribe: subscribe,
         unsubscribe: unsubscribe,
         publish: publish
@@ -143,8 +257,9 @@ var etro = (function () {
     function getPropertyDescriptor(obj, name) {
         do {
             var propDesc = Object.getOwnPropertyDescriptor(obj, name);
-            if (propDesc)
+            if (propDesc) {
                 return propDesc;
+            }
             obj = Object.getPrototypeOf(obj);
         } while (obj);
         return undefined;
@@ -153,36 +268,45 @@ var etro = (function () {
      * Merges `options` with `defaultOptions`, and then copies the properties with
      * the keys in `defaultOptions` from the merged object to `destObj`.
      *
+     * @deprecated Each option should be copied individually, and the default value
+     * should be set in the constructor. See
+     * {@link https://github.com/etro-js/etro/issues/131} for more info.
+     *
      * @return
      */
     // TODO: Make methods like getDefaultOptions private
     function applyOptions(options, destObj) {
         var defaultOptions = destObj.getDefaultOptions();
         // Validate; make sure `keys` doesn't have any extraneous items
-        for (var option in options)
+        for (var option in options) {
             // eslint-disable-next-line no-prototype-builtins
-            if (!defaultOptions.hasOwnProperty(option))
+            if (!defaultOptions.hasOwnProperty(option)) {
                 throw new Error("Invalid option: '" + option + "'");
+            }
+        }
         // Merge options and defaultOptions
         options = __assign(__assign({}, defaultOptions), options);
         // Copy options
         for (var option in options) {
             var propDesc = getPropertyDescriptor(destObj, option);
             // Update the property as long as the property has not been set (unless if it has a setter)
-            if (!propDesc || propDesc.set)
+            if (!propDesc || propDesc.set) {
                 destObj[option] = options[option];
+            }
         }
     }
     // This must be cleared at the start of each frame
     var valCache = new WeakMap();
     function cacheValue(element, path, value) {
         // Initiate movie cache
-        if (!valCache.has(element.movie))
+        if (!valCache.has(element.movie)) {
             valCache.set(element.movie, new WeakMap());
+        }
         var movieCache = valCache.get(element.movie);
-        // Iniitate element cache
-        if (!movieCache.has(element))
+        // Initiate element cache
+        if (!movieCache.has(element)) {
             movieCache.set(element, {});
+        }
         var elementCache = movieCache.get(element);
         // Cache the value
         elementCache[path] = value;
@@ -222,13 +346,16 @@ var etro = (function () {
             return this;
         };
         KeyFrame.prototype.evaluate = function (time) {
-            if (this.value.length === 0)
+            if (this.value.length === 0) {
                 throw new Error('Empty keyframe');
-            if (time === undefined)
+            }
+            if (time === undefined) {
                 throw new Error('|time| is undefined or null');
+            }
             var firstTime = this.value[0][0];
-            if (time < firstTime)
+            if (time < firstTime) {
                 throw new Error('No keyframe point before |time|');
+            }
             // I think reduce are slow to do per-frame (or more)?
             for (var i = 0; i < this.value.length; i++) {
                 var startTime = this.value[i][0];
@@ -237,7 +364,7 @@ var etro = (function () {
                 if (i + 1 < this.value.length) {
                     var endTime = this.value[i + 1][0];
                     var endValue = this.value[i + 1][1];
-                    if (startTime <= time && time < endTime)
+                    if (startTime <= time && time < endTime) {
                         // No need for endValue if it is flat interpolation
                         // TODO: support custom interpolation for 'other' types?
                         if (!(typeof startValue === 'number' || typeof endValue === 'object')) {
@@ -253,6 +380,7 @@ var etro = (function () {
                             endValue, // eslint-disable-line @typescript-eslint/ban-types
                             percentProgress, this.interpolationKeys);
                         }
+                    }
                 }
                 else {
                     // Repeat last value forever
@@ -278,23 +406,28 @@ var etro = (function () {
     // TODO: Is this function efficient?
     // TODO: Update doc @params to allow for keyframes
     function val(element, path, time) {
-        if (hasCachedValue(element, path))
+        if (hasCachedValue(element, path)) {
             return getCachedValue(element, path);
+        }
         // Get property of element at path
         var pathParts = path.split('.');
         var property = element[pathParts.shift()];
-        while (pathParts.length > 0)
+        while (pathParts.length > 0) {
             property = property[pathParts.shift()];
+        }
         // Property filter function
         var process = element.propertyFilters[path];
         var value;
-        if (property instanceof KeyFrame)
+        if (property instanceof KeyFrame) {
             value = property.evaluate(time);
-        else if (typeof property === 'function')
-            value = property(element, time); // TODO? add more args
-        else
+        }
+        else if (typeof property === 'function') {
+            value = property(element, time);
+        }
+        else {
             // Simple value
             value = property;
+        }
         return cacheValue(element, path, process ? process.call(element, value) : value);
     }
     /* export function floorInterp(x1, x2, t, objectKeys) {
@@ -305,15 +438,18 @@ var etro = (function () {
         }, Object.create(Object.getPrototypeOf(x1)));
     } */
     function linearInterp(x1, x2, t, objectKeys) {
-        if (typeof x1 !== typeof x2)
+        if (typeof x1 !== typeof x2) {
             throw new Error('Type mismatch');
-        if (typeof x1 !== 'number' && typeof x1 !== 'object')
+        }
+        if (typeof x1 !== 'number' && typeof x1 !== 'object') {
             // Flat interpolation (floor)
             return x1;
+        }
         if (typeof x1 === 'object') { // to work with objects (including arrays)
             // TODO: make this code DRY
-            if (Object.getPrototypeOf(x1) !== Object.getPrototypeOf(x2))
+            if (Object.getPrototypeOf(x1) !== Object.getPrototypeOf(x2)) {
                 throw new Error('Prototype mismatch');
+            }
             // Preserve prototype of objects
             var int = Object.create(Object.getPrototypeOf(x1));
             // Take the intersection of properties
@@ -321,8 +457,9 @@ var etro = (function () {
             for (var i = 0; i < keys.length; i++) {
                 var key = keys[i];
                 // eslint-disable-next-line no-prototype-builtins
-                if (!x1.hasOwnProperty(key) || !x2.hasOwnProperty(key))
+                if (!x1.hasOwnProperty(key) || !x2.hasOwnProperty(key)) {
                     continue;
+                }
                 int[key] = linearInterp(x1[key], x2[key], t);
             }
             return int;
@@ -330,14 +467,17 @@ var etro = (function () {
         return (1 - t) * x1 + t * x2;
     }
     function cosineInterp(x1, x2, t, objectKeys) {
-        if (typeof x1 !== typeof x2)
+        if (typeof x1 !== typeof x2) {
             throw new Error('Type mismatch');
-        if (typeof x1 !== 'number' && typeof x1 !== 'object')
+        }
+        if (typeof x1 !== 'number' && typeof x1 !== 'object') {
             // Flat interpolation (floor)
             return x1;
+        }
         if (typeof x1 === 'object' && typeof x2 === 'object') { // to work with objects (including arrays)
-            if (Object.getPrototypeOf(x1) !== Object.getPrototypeOf(x2))
+            if (Object.getPrototypeOf(x1) !== Object.getPrototypeOf(x2)) {
                 throw new Error('Prototype mismatch');
+            }
             // Preserve prototype of objects
             var int = Object.create(Object.getPrototypeOf(x1));
             // Take the intersection of properties
@@ -345,8 +485,9 @@ var etro = (function () {
             for (var i = 0; i < keys.length; i++) {
                 var key = keys[i];
                 // eslint-disable-next-line no-prototype-builtins
-                if (!x1.hasOwnProperty(key) || !x2.hasOwnProperty(key))
+                if (!x1.hasOwnProperty(key) || !x2.hasOwnProperty(key)) {
                     continue;
+                }
                 int[key] = cosineInterp(x1[key], x2[key], t);
             }
             return int;
@@ -375,7 +516,7 @@ var etro = (function () {
          * Converts to a CSS color
          */
         Color.prototype.toString = function () {
-            return "rgba(" + this.r + ", " + this.g + ", " + this.b + ", " + this.a + ")";
+            return "rgba(".concat(this.r, ", ").concat(this.g, ", ").concat(this.b, ", ").concat(this.a, ")");
         };
         return Color;
     }());
@@ -426,17 +567,22 @@ var etro = (function () {
          */
         Font.prototype.toString = function () {
             var s = '';
-            if (this.style !== 'normal')
+            if (this.style !== 'normal') {
                 s += this.style + ' ';
-            if (this.variant !== 'normal')
+            }
+            if (this.variant !== 'normal') {
                 s += this.variant + ' ';
-            if (this.weight !== 'normal')
+            }
+            if (this.weight !== 'normal') {
                 s += this.weight + ' ';
-            if (this.stretch !== 'normal')
+            }
+            if (this.stretch !== 'normal') {
                 s += this.stretch + ' ';
-            s += "" + this.size + this.sizeUnit + " ";
-            if (this.lineHeight !== 'normal')
+            }
+            s += "".concat(this.size).concat(this.sizeUnit, " ");
+            if (this.lineHeight !== 'normal') {
                 s += this.lineHeight + ' ';
+            }
             s += this.family;
             return s;
         };
@@ -451,7 +597,7 @@ var etro = (function () {
      */
     function parseFont(str) {
         // Assign css string to html element
-        parseFontEl.setAttribute('style', "font: " + str);
+        parseFontEl.setAttribute('style', "font: ".concat(str));
         var _a = parseFontEl.style, fontSize = _a.fontSize, fontFamily = _a.fontFamily, fontStyle = _a.fontStyle, fontVariant = _a.fontVariant, fontWeight = _a.fontWeight, lineHeight = _a.lineHeight;
         parseFontEl.removeAttribute('style');
         var size = parseFloat(fontSize);
@@ -476,61 +622,12 @@ var etro = (function () {
         width = width || canvas.width;
         height = height || canvas.height;
         var frame = ctx.getImageData(x, y, width, height);
-        for (var i = 0, l = frame.data.length; i < l; i += 4)
+        for (var i = 0, l = frame.data.length; i < l; i += 4) {
             mapper(frame.data, i);
-        if (flush)
+        }
+        if (flush) {
             ctx.putImageData(frame, x, y);
-    }
-    /**
-     * <p>Emits "change" event when public properties updated, recursively.
-     * <p>Must be called before any watchable properties are set, and only once in
-     * the prototype chain.
-     *
-     * @deprecated Will be removed in the future (see issue #130)
-     *
-     * @param target - object to watch
-     */
-    function watchPublic(target) {
-        var getPath = function (receiver, prop) {
-            return (receiver === proxy ? '' : (paths.get(receiver) + '.')) + prop;
-        };
-        var callback = function (prop, val, receiver) {
-            // Public API property updated, emit 'modify' event.
-            publish(proxy, target.type + ".change.modify", { property: getPath(receiver, prop), newValue: val });
-        };
-        var canWatch = function (receiver, prop) { return !prop.startsWith('_') &&
-            (receiver.publicExcludes === undefined || !receiver.publicExcludes.includes(prop)); };
-        // The path to each child property (each is a unique proxy)
-        var paths = new WeakMap();
-        var handler = {
-            set: function (obj, prop, val, receiver) {
-                // Recurse
-                if (typeof val === 'object' && val !== null && !paths.has(val) && canWatch(receiver, prop)) {
-                    val = new Proxy(val, handler);
-                    paths.set(val, getPath(receiver, prop));
-                }
-                // Set property or attribute
-                // Search prototype chain for the closest setter
-                var objProto = obj;
-                while ((objProto = Object.getPrototypeOf(objProto))) {
-                    var propDesc = Object.getOwnPropertyDescriptor(objProto, prop);
-                    if (propDesc && propDesc.set) {
-                        // Call setter, supplying proxy as this (fixes event bugs)
-                        propDesc.set.call(receiver, val);
-                        break;
-                    }
-                }
-                if (!objProto)
-                    // Couldn't find setter; set value on instance
-                    obj[prop] = val;
-                // Check if the property isn't blacklisted in publicExcludes.
-                if (canWatch(receiver, prop))
-                    callback(prop, val, receiver);
-                return true;
-            }
-        };
-        var proxy = new Proxy(target, handler);
-        return proxy;
+        }
     }
 
     /**
@@ -556,45 +653,70 @@ var etro = (function () {
              */
             function MixedAudioSource(options) {
                 var _this = this;
+                var _a;
+                if (!options.source) {
+                    throw new Error('Property "source" is required in options');
+                }
                 var onload = options.onload;
                 // Don't set as instance property
                 delete options.onload;
-                _this = _super.call(this, options) || this;
+                _this = _super.call(this, __assign(__assign({}, options), { 
+                    // Set a default duration so that the super constructor doesn't throw an
+                    // error
+                    duration: (_a = options.duration) !== null && _a !== void 0 ? _a : 0 })) || this;
                 _this._initialized = false;
                 _this._sourceStartTime = options.sourceStartTime || 0;
                 applyOptions(options, _this);
                 var load = function () {
                     // TODO:              && ?
-                    if ((options.duration || (_this.source.duration - _this.sourceStartTime)) < 0)
+                    if ((options.duration || (_this.source.duration - _this.sourceStartTime)) < 0) {
                         throw new Error('Invalid options.duration or options.sourceStartTime');
+                    }
                     _this._unstretchedDuration = options.duration || (_this.source.duration - _this.sourceStartTime);
                     _this.duration = _this._unstretchedDuration / (_this.playbackRate);
                     // onload will use `this`, and can't bind itself because it's before
                     // super()
                     onload && onload.bind(_this)(_this.source, options);
                 };
-                if (_this.source.readyState >= 2)
+                if (_this.source.readyState >= 2) {
                     // this frame's data is available now
                     load();
-                else
+                }
+                else {
                     // when this frame's data is available
                     _this.source.addEventListener('loadedmetadata', load);
+                }
                 _this.source.addEventListener('durationchange', function () {
                     _this.duration = options.duration || (_this.source.duration - _this.sourceStartTime);
                 });
                 return _this;
             }
+            MixedAudioSource.prototype.whenReady = function () {
+                return __awaiter(this, void 0, void 0, function () {
+                    var _this = this;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, _super.prototype.whenReady.call(this)];
+                            case 1:
+                                _a.sent();
+                                if (!(this.source.readyState < 4)) return [3 /*break*/, 3];
+                                return [4 /*yield*/, new Promise(function (resolve) {
+                                        _this.source.addEventListener('canplaythrough', resolve);
+                                    })];
+                            case 2:
+                                _a.sent();
+                                _a.label = 3;
+                            case 3: return [2 /*return*/];
+                        }
+                    });
+                });
+            };
             MixedAudioSource.prototype.attach = function (movie) {
                 var _this = this;
                 _super.prototype.attach.call(this, movie);
-                subscribe(movie, 'movie.seek', function () {
-                    if (_this.currentTime < 0 || _this.currentTime >= _this.duration)
-                        return;
-                    _this.source.currentTime = _this.currentTime + _this.sourceStartTime;
-                });
                 // TODO: on unattach?
-                subscribe(movie, 'movie.audiodestinationupdate', function (event) {
-                    // Connect to new destination if immeidately connected to the existing
+                subscribe(movie, 'audiodestinationupdate', function (event) {
+                    // Connect to new destination if immediately connected to the existing
                     // destination.
                     if (_this._connectedToDestination) {
                         _this.audioNode.disconnect(movie.actx.destination);
@@ -613,8 +735,9 @@ var etro = (function () {
                 var oldDisconnect = this._audioNode.disconnect.bind(this.audioNode);
                 this._audioNode.disconnect = function (destination, output, input) {
                     if (_this._connectedToDestination &&
-                        destination === movie.actx.destination)
+                        destination === movie.actx.destination) {
                         _this._connectedToDestination = false;
+                    }
                     return oldDisconnect(destination, output, input);
                 };
                 // Connect to actx.destination by default (can be rewired by user)
@@ -630,6 +753,10 @@ var etro = (function () {
                 this.source.currentTime = this.currentTime + this.sourceStartTime;
                 this.source.play();
             };
+            MixedAudioSource.prototype.seek = function (time) {
+                _super.prototype.seek.call(this, time);
+                this.source.currentTime = this.currentTime + this.sourceStartTime;
+            };
             MixedAudioSource.prototype.render = function () {
                 _super.prototype.render.call(this);
                 // TODO: implement Issue: Create built-in audio node to support built-in
@@ -639,6 +766,7 @@ var etro = (function () {
                 this.source.playbackRate = val(this, 'playbackRate', this.currentTime);
             };
             MixedAudioSource.prototype.stop = function () {
+                _super.prototype.stop.call(this);
                 this.source.pause();
             };
             Object.defineProperty(MixedAudioSource.prototype, "audioNode", {
@@ -657,8 +785,9 @@ var etro = (function () {
                 },
                 set: function (value) {
                     this._playbackRate = value;
-                    if (this._unstretchedDuration !== undefined)
+                    if (this._unstretchedDuration !== undefined) {
                         this.duration = this._unstretchedDuration / value;
+                    }
                 },
                 enumerable: false,
                 configurable: true
@@ -694,6 +823,18 @@ var etro = (function () {
                 enumerable: false,
                 configurable: true
             });
+            Object.defineProperty(MixedAudioSource.prototype, "ready", {
+                get: function () {
+                    // Typescript doesn't support `super.ready` when targeting es5
+                    var superReady = Object.getOwnPropertyDescriptor(superclass.prototype, 'ready').get.call(this);
+                    return superReady && this.source.readyState === 4;
+                },
+                enumerable: false,
+                configurable: true
+            });
+            /**
+             * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+             */
             MixedAudioSource.prototype.getDefaultOptions = function () {
                 return __assign(__assign({}, superclass.prototype.getDefaultOptions()), { source: undefined, sourceStartTime: 0, duration: undefined, muted: false, volume: 1, playbackRate: 1 });
             };
@@ -716,56 +857,74 @@ var etro = (function () {
          * movie's timeline
          */
         function Base(options) {
+            if (options.duration === null || options.duration === undefined) {
+                throw new Error('Property "duration" is required in BaseOptions');
+            }
+            if (options.startTime === null || options.startTime === undefined) {
+                throw new Error('Property "startTime" is required in BaseOptions');
+            }
             // Set startTime and duration properties manually, because they are
             // readonly. applyOptions ignores readonly properties.
             this._startTime = options.startTime;
             this._duration = options.duration;
-            // Proxy that will be returned by constructor (for sending 'modified'
-            // events).
-            var newThis = watchPublic(this);
-            // Don't send updates when initializing, so use this instead of newThis
             applyOptions(options, this);
             // Whether this layer is currently being rendered
             this.active = false;
             this.enabled = true;
-            this._occurrenceCount = 0; // no occurances in parent
+            this._occurrenceCount = 0; // no occurrences in parent
             this._movie = null;
-            // Propogate up to target
-            subscribe(newThis, 'layer.change', function (event) {
-                var typeOfChange = event.type.substring(event.type.lastIndexOf('.') + 1);
-                var type = "movie.change.layer." + typeOfChange;
-                publish(newThis._movie, type, __assign(__assign({}, event), { target: newThis._movie, type: type }));
-            });
-            return newThis;
         }
+        /**
+         * Wait until this layer is ready to render
+         */
+        Base.prototype.whenReady = function () {
+            return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
+                return [2 /*return*/];
+            }); });
+        }; // eslint-disable-line @typescript-eslint/no-empty-function
         /**
          * Attaches this layer to `movie` if not already attached.
          * @ignore
          */
         Base.prototype.tryAttach = function (movie) {
-            if (this._occurrenceCount === 0)
+            if (this._occurrenceCount === 0) {
                 this.attach(movie);
+            }
             this._occurrenceCount++;
         };
+        /**
+         * Attaches this layer to `movie`
+         *
+         * Called when the layer is added to a movie's `layers` array.
+         *
+         * @param movie The movie to attach to
+         */
         Base.prototype.attach = function (movie) {
             this._movie = movie;
         };
         /**
-         * Dettaches this layer from its movie if the number of times `tryDetach` has
+         * Detaches this layer from its movie if the number of times `tryDetach` has
          * been called (including this call) equals the number of times `tryAttach`
          * has been called.
          *
          * @ignore
          */
         Base.prototype.tryDetach = function () {
-            if (this.movie === null)
+            if (this.movie === null) {
                 throw new Error('No movie to detach from');
+            }
             this._occurrenceCount--;
             // If this layer occurs in another place in a `layers` array, do not unset
             // _movie. (For calling `unshift` on the `layers` proxy)
-            if (this._occurrenceCount === 0)
+            if (this._occurrenceCount === 0) {
                 this.detach();
+            }
         };
+        /**
+         * Detaches this layer from its movie
+         *
+         * Called when the layer is removed from a movie's `layers` array.
+         */
         Base.prototype.detach = function () {
             this._movie = null;
         };
@@ -773,14 +932,40 @@ var etro = (function () {
          * Called when the layer is activated
          */
         Base.prototype.start = function () { }; // eslint-disable-line @typescript-eslint/no-empty-function
+        /**
+         * Update {@link currentTime} when seeking
+         *
+         * This method is called when the movie seeks to a new time at the request of
+         * the user. {@link progress} is called when the movie's `currentTime` is
+         * updated due to playback.
+         *
+         * @param time - The new time in the layer
+         */
+        Base.prototype.seek = function (time) {
+            this._currentTime = time;
+        };
+        /**
+         * Update {@link currentTime} due to playback
+         *
+         * This method is called when the movie's `currentTime` is updated due to
+         * playback. {@link seek} is called when the movie seeks to a new time at the
+         * request of the user.
+         *
+         * @param time - The new time in the layer
+         */
+        Base.prototype.progress = function (time) {
+            this._currentTime = time;
+        };
         /**
          * Called when the movie renders and the layer is active
          */
         Base.prototype.render = function () { }; // eslint-disable-line @typescript-eslint/no-empty-function
         /**
-        * Called when the layer is deactivated
+         * Called when the layer is deactivated
          */
-        Base.prototype.stop = function () { }; // eslint-disable-line @typescript-eslint/no-empty-function
+        Base.prototype.stop = function () {
+            this._currentTime = undefined;
+        };
         Object.defineProperty(Base.prototype, "parent", {
             // TODO: is this needed?
             get: function () {
@@ -791,6 +976,7 @@ var etro = (function () {
         });
         Object.defineProperty(Base.prototype, "startTime", {
             /**
+             * The time in the movie at which this layer starts (in seconds)
              */
             get: function () {
                 return this._startTime;
@@ -803,17 +989,17 @@ var etro = (function () {
         });
         Object.defineProperty(Base.prototype, "currentTime", {
             /**
-             * The current time of the movie relative to this layer
+             * The current time of the movie relative to this layer (in seconds)
              */
             get: function () {
-                return this._movie ? this._movie.currentTime - this.startTime
-                    : undefined;
+                return this._currentTime;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(Base.prototype, "duration", {
             /**
+             * The duration of this layer (in seconds)
              */
             get: function () {
                 return this._duration;
@@ -824,6 +1010,16 @@ var etro = (function () {
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(Base.prototype, "ready", {
+            /**
+             * `true` if this layer is ready to be rendered, `false` otherwise
+             */
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(Base.prototype, "movie", {
             get: function () {
                 return this._movie;
@@ -831,6 +1027,9 @@ var etro = (function () {
             enumerable: false,
             configurable: true
         });
+        /**
+         * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+         */
         Base.prototype.getDefaultOptions = function () {
             return {
                 startTime: undefined,
@@ -847,6 +1046,7 @@ var etro = (function () {
 
     // TODO: rename to something more consistent with the naming convention of Visual and VisualSourceMixin
     /**
+     * Layer for an HTML audio element
      * @extends AudioSource
      */
     var Audio = /** @class */ (function (_super) {
@@ -855,11 +1055,21 @@ var etro = (function () {
          * Creates an audio layer
          */
         function Audio(options) {
-            var _this = _super.call(this, options) || this;
-            if (_this.duration === undefined)
+            var _this = this;
+            if (typeof options.source === 'string') {
+                var audio = document.createElement('audio');
+                audio.src = options.source;
+                options.source = audio;
+            }
+            _this = _super.call(this, options) || this;
+            if (_this.duration === undefined) {
                 _this.duration = (_this).source.duration - _this.sourceStartTime;
+            }
             return _this;
         }
+        /**
+         * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+         */
         Audio.prototype.getDefaultOptions = function () {
             return __assign(__assign({}, Object.getPrototypeOf(this).getDefaultOptions()), { 
                 /**
@@ -871,40 +1081,101 @@ var etro = (function () {
         return Audio;
     }(AudioSourceMixin(Base)));
 
-    /** Any layer that renders to a canvas */
-    var Visual = /** @class */ (function (_super) {
-        __extends(Visual, _super);
-        /**
-         * Creates a visual layer
-         */
-        function Visual(options) {
-            var _this = _super.call(this, options) || this;
-            // Only validate extra if not subclassed, because if subclcass, there will
-            // be extraneous options.
-            applyOptions(options, _this);
-            _this.canvas = document.createElement('canvas');
-            _this.cctx = _this.canvas.getContext('2d');
-            _this._effectsBack = [];
-            _this.effects = new Proxy(_this._effectsBack, {
+    var CustomArrayListener = /** @class */ (function () {
+        function CustomArrayListener() {
+        }
+        return CustomArrayListener;
+    }());
+    /**
+     * An array that notifies a listener when items are added or removed.
+     */
+    var CustomArray = /** @class */ (function (_super) {
+        __extends(CustomArray, _super);
+        function CustomArray(target, listener) {
+            var _this = _super.call(this) || this;
+            for (var _i = 0, target_1 = target; _i < target_1.length; _i++) {
+                var item = target_1[_i];
+                listener.onAdd(item);
+            }
+            // Create proxy
+            return new Proxy(target, {
                 deleteProperty: function (target, property) {
                     var value = target[property];
-                    value.detach();
                     delete target[property];
+                    listener.onRemove(value);
                     return true;
                 },
                 set: function (target, property, value) {
+                    var oldValue = target[property];
+                    target[property] = value;
+                    // Check if property is a number (index)
                     if (!isNaN(Number(property))) {
-                        // The property is a number (index)
-                        if (target[property])
-                            target[property].detach();
-                        value.attach(_this);
+                        if (oldValue !== undefined) {
+                            listener.onRemove(oldValue);
+                        }
+                        listener.onAdd(value);
                     }
-                    target[property] = value;
                     return true;
                 }
             });
+        }
+        return CustomArray;
+    }(Array));
+
+    // eslint-disable-next-line no-use-before-define
+    var VisualEffectsListener = /** @class */ (function (_super) {
+        __extends(VisualEffectsListener, _super);
+        // eslint-disable-next-line no-use-before-define
+        function VisualEffectsListener(layer) {
+            var _this = _super.call(this) || this;
+            _this._layer = layer;
             return _this;
         }
+        VisualEffectsListener.prototype.onAdd = function (effect) {
+            effect.tryAttach(this._layer);
+        };
+        VisualEffectsListener.prototype.onRemove = function (effect) {
+            effect.tryDetach();
+        };
+        return VisualEffectsListener;
+    }(CustomArrayListener));
+    var VisualEffects = /** @class */ (function (_super) {
+        __extends(VisualEffects, _super);
+        // eslint-disable-next-line no-use-before-define
+        function VisualEffects(target, layer) {
+            return _super.call(this, target, new VisualEffectsListener(layer)) || this;
+        }
+        return VisualEffects;
+    }(CustomArray));
+    /** Any layer that renders to a canvas */
+    var Visual = /** @class */ (function (_super) {
+        __extends(Visual, _super);
+        /**
+         * Creates a visual layer
+         */
+        function Visual(options) {
+            var _this = _super.call(this, options) || this;
+            applyOptions(options, _this);
+            _this.canvas = document.createElement('canvas');
+            _this.cctx = _this.canvas.getContext('2d');
+            _this.effects = new VisualEffects([], _this);
+            return _this;
+        }
+        Visual.prototype.whenReady = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, _super.prototype.whenReady.call(this)];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, Promise.all(this.effects.map(function (effect) { return effect.whenReady(); }))];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         /**
          * Render visual output
          */
@@ -912,8 +1183,9 @@ var etro = (function () {
             // Prevent empty canvas errors if the width or height is 0
             var width = val(this, 'width', this.currentTime);
             var height = val(this, 'height', this.currentTime);
-            if (width === 0 || height === 0)
+            if (width === 0 || height === 0) {
                 return;
+            }
             this.beginRender();
             this.doRender();
             this.endRender();
@@ -944,20 +1216,22 @@ var etro = (function () {
         Visual.prototype.endRender = function () {
             var w = val(this, 'width', this.currentTime) || val(this.movie, 'width', this.movie.currentTime);
             var h = val(this, 'height', this.currentTime) || val(this.movie, 'height', this.movie.currentTime);
-            if (w * h > 0)
+            if (w * h > 0) {
                 this._applyEffects();
+            }
             // else InvalidStateError for drawing zero-area image in some effects, right?
         };
         Visual.prototype._applyEffects = function () {
             for (var i = 0; i < this.effects.length; i++) {
                 var effect = this.effects[i];
-                if (effect && effect.enabled)
+                if (effect && effect.enabled) {
                     // Pass relative time
                     effect.apply(this, this.movie.currentTime - this.startTime);
+                }
             }
         };
         /**
-         * Convienence method for <code>effects.push()</code>
+         * Convenience method for <code>effects.push()</code>
          * @param effect
          * @return the layer (for chaining)
          */
@@ -965,6 +1239,18 @@ var etro = (function () {
             this.effects.push(effect);
             return this;
         };
+        Object.defineProperty(Visual.prototype, "ready", {
+            get: function () {
+                // Typescript doesn't support `super.ready` when targeting es5
+                var superReady = Object.getOwnPropertyDescriptor(Base.prototype, 'ready').get.call(this);
+                return superReady && this.effects.every(function (effect) { return effect.ready; });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+         */
         Visual.prototype.getDefaultOptions = function () {
             return __assign(__assign({}, Base.prototype.getDefaultOptions()), { 
                 /**
@@ -987,13 +1273,13 @@ var etro = (function () {
                 height: null, 
                 /**
                  * @name module:layer.Visual#background
-                 * @desc The CSS color code for the background, or <code>null</code> for
+                 * @desc The color code for the background, or <code>null</code> for
                  * transparency
                  */
                 background: null, 
                 /**
                  * @name module:layer.Visual#border
-                 * @desc The CSS border style, or <code>null</code> for no border
+                 * @desc The border style, or <code>null</code> for no border
                  */
                 border: null, 
                 /**
@@ -1023,17 +1309,60 @@ var etro = (function () {
         var MixedVisualSource = /** @class */ (function (_super) {
             __extends(MixedVisualSource, _super);
             function MixedVisualSource(options) {
-                var _this = _super.call(this, options) || this;
+                var _this = this;
+                if (!options.source) {
+                    throw new Error('Property "source" is required in options');
+                }
+                _this = _super.call(this, options) || this;
                 applyOptions(options, _this);
                 return _this;
             }
+            MixedVisualSource.prototype.whenReady = function () {
+                return __awaiter(this, void 0, void 0, function () {
+                    var _this = this;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, _super.prototype.whenReady.call(this)];
+                            case 1:
+                                _a.sent();
+                                return [4 /*yield*/, new Promise(function (resolve) {
+                                        if (_this.source instanceof HTMLImageElement) {
+                                            // The source is an image; wait for it to load
+                                            if (_this.source.complete) {
+                                                resolve();
+                                            }
+                                            else {
+                                                _this.source.addEventListener('load', function () {
+                                                    resolve();
+                                                });
+                                            }
+                                        }
+                                        else {
+                                            // The source is a video; wait for the first frame to load
+                                            if (_this.source.readyState === 4) {
+                                                resolve();
+                                            }
+                                            else {
+                                                _this.source.addEventListener('canplaythrough', function () {
+                                                    resolve();
+                                                });
+                                            }
+                                        }
+                                    })];
+                            case 2:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                });
+            };
             MixedVisualSource.prototype.doRender = function () {
                 // Clear/fill background
                 _super.prototype.doRender.call(this);
                 /*
                  * Source dimensions crop the image. Dest dimensions set the size that
                  * the image will be rendered at *on the layer*. Note that this is
-                 * different than the layer dimensions (`this.width` and `this.height`).
+                 * different from the layer dimensions (`this.width` and `this.height`).
                  * The main reason this distinction exists is so that an image layer can
                  * be rotated without being cropped (see iss #46).
                  */
@@ -1041,6 +1370,21 @@ var etro = (function () {
                 // `destX` and `destY` are relative to the layer
                 val(this, 'destX', this.currentTime), val(this, 'destY', this.currentTime), val(this, 'destWidth', this.currentTime), val(this, 'destHeight', this.currentTime));
             };
+            Object.defineProperty(MixedVisualSource.prototype, "ready", {
+                get: function () {
+                    // Typescript doesn't support `super.ready` when targeting es5
+                    var superReady = Object.getOwnPropertyDescriptor(superclass.prototype, 'ready').get.call(this);
+                    var sourceReady = this.source instanceof HTMLImageElement
+                        ? this.source.complete
+                        : this.source.readyState === 4;
+                    return superReady && sourceReady;
+                },
+                enumerable: false,
+                configurable: true
+            });
+            /**
+             * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+             */
             MixedVisualSource.prototype.getDefaultOptions = function () {
                 return __assign(__assign({}, superclass.prototype.getDefaultOptions()), { source: undefined, sourceX: 0, sourceY: 0, sourceWidth: undefined, sourceHeight: undefined, destX: 0, destY: 0, destWidth: undefined, destHeight: undefined });
             };
@@ -1068,27 +1412,40 @@ var etro = (function () {
                 // instead. (TODO: fact check)
                 /* eslint-disable eqeqeq */
                 return destWidth != undefined
-                    ? destWidth : val(this, 'sourceWidth', this.currentTime);
+                    ? destWidth
+                    : val(this, 'sourceWidth', this.currentTime);
             }, destHeight: function (destHeight) {
                 /* eslint-disable eqeqeq */
                 return destHeight != undefined
-                    ? destHeight : val(this, 'sourceHeight', this.currentTime);
+                    ? destHeight
+                    : val(this, 'sourceHeight', this.currentTime);
             }, width: function (width) {
                 /* eslint-disable eqeqeq */
                 return width != undefined
-                    ? width : val(this, 'destWidth', this.currentTime);
+                    ? width
+                    : val(this, 'destWidth', this.currentTime);
             }, height: function (height) {
                 /* eslint-disable eqeqeq */
                 return height != undefined
-                    ? height : val(this, 'destHeight', this.currentTime);
+                    ? height
+                    : val(this, 'destHeight', this.currentTime);
             } });
         return MixedVisualSource;
     }
 
+    /**
+     * Layer for an HTML image element
+     * @extends VisualSource
+     */
     var Image = /** @class */ (function (_super) {
         __extends(Image, _super);
-        function Image() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function Image(options) {
+            if (typeof (options.source) === 'string') {
+                var img = document.createElement('img');
+                img.src = options.source;
+                options.source = img;
+            }
+            return _super.call(this, options) || this;
         }
         return Image;
     }(VisualSourceMixin(Visual)));
@@ -1102,9 +1459,12 @@ var etro = (function () {
         // TODO: is textX necessary? it seems inconsistent, because you can't define
         // width/height directly for a text layer
         function Text(options) {
-            var _this = 
+            var _this = this;
+            if (!options.text) {
+                throw new Error('Property "text" is required in TextOptions');
+            }
             // Default to no (transparent) background
-            _super.call(this, __assign({ background: null }, options)) || this;
+            _this = _super.call(this, __assign({ background: null }, options)) || this;
             applyOptions(options, _this);
             return _this;
             // this._prevText = undefined;
@@ -1151,22 +1511,33 @@ var etro = (function () {
               document.body.removeChild(s);
               return metrics;
           } */
+        /**
+         * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+         */
         Text.prototype.getDefaultOptions = function () {
-            return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: '#fff', textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr' });
+            return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: parseColor('#fff'), textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr' });
         };
         return Text;
     }(Visual));
 
-    // Use mixins instead of `extend`ing two classes (which isn't supported by
-    // JavaScript).
     /**
+     * Layer for an HTML video element
      * @extends AudioSource
      * @extends VisualSource
      */
     var Video = /** @class */ (function (_super) {
         __extends(Video, _super);
-        function Video() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function Video(options) {
+            var _a;
+            if (typeof (options.source) === 'string') {
+                var video = document.createElement('video');
+                video.src = options.source;
+                options.source = video;
+            }
+            return _super.call(this, __assign(__assign({}, options), { 
+                // Set a default duration so that the super constructor doesn't throw an
+                // error
+                duration: (_a = options.duration) !== null && _a !== void 0 ? _a : 0 })) || this;
         }
         return Video;
     }(AudioSourceMixin(VisualSourceMixin(Visual))));
@@ -1176,6 +1547,7 @@ var etro = (function () {
      */
 
     var index = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         AudioSourceMixin: AudioSourceMixin,
         Audio: Audio,
         Base: Base,
@@ -1191,46 +1563,48 @@ var etro = (function () {
      */
     var Base$1 = /** @class */ (function () {
         function Base() {
-            var newThis = watchPublic(this); // proxy that will be returned by constructor
-            newThis.enabled = true;
-            newThis._occurrenceCount = 0;
-            newThis._target = null;
-            // Propogate up to target
-            subscribe(newThis, 'effect.change.modify', function (event) {
-                if (!newThis._target)
-                    return;
-                var type = newThis._target.type + ".change.effect.modify";
-                publish(newThis._target, type, __assign(__assign({}, event), { target: newThis._target, source: newThis, type: type }));
-            });
-            return newThis;
+            this.enabled = true;
+            this._occurrenceCount = 0;
+            this._target = null;
         }
+        /**
+         * Wait until this effect is ready to be applied
+         */
+        Base.prototype.whenReady = function () {
+            return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
+                return [2 /*return*/];
+            }); });
+        }; // eslint-disable-line @typescript-eslint/no-empty-function
         /**
          * Attaches this effect to `target` if not already attached.
          * @ignore
          */
         Base.prototype.tryAttach = function (target) {
-            if (this._occurrenceCount === 0)
+            if (this._occurrenceCount === 0) {
                 this.attach(target);
+            }
             this._occurrenceCount++;
         };
         Base.prototype.attach = function (movie) {
             this._target = movie;
         };
         /**
-         * Dettaches this effect from its target if the number of times `tryDetach`
+         * Detaches this effect from its target if the number of times `tryDetach`
          * has been called (including this call) equals the number of times
          * `tryAttach` has been called.
          *
          * @ignore
          */
         Base.prototype.tryDetach = function () {
-            if (this._target === null)
+            if (this._target === null) {
                 throw new Error('No movie to detach from');
+            }
             this._occurrenceCount--;
             // If this effect occurs in another place in the containing array, do not
             // unset _target. (For calling `unshift` on the `layers` proxy)
-            if (this._occurrenceCount === 0)
+            if (this._occurrenceCount === 0) {
                 this.detach();
+            }
         };
         Base.prototype.detach = function () {
             this._target = null;
@@ -1255,6 +1629,14 @@ var etro = (function () {
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(Base.prototype, "ready", {
+            /** `true` if this effect is ready to be applied */
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(Base.prototype, "parent", {
             get: function () {
                 return this._target;
@@ -1269,6 +1651,9 @@ var etro = (function () {
             enumerable: false,
             configurable: true
         });
+        /**
+         * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+         */
         Base.prototype.getDefaultOptions = function () {
             return {};
         };
@@ -1336,16 +1721,18 @@ var etro = (function () {
         Shader.prototype._initGl = function () {
             this._canvas = document.createElement('canvas');
             var gl = this._canvas.getContext('webgl');
-            if (gl === null)
+            if (gl === null) {
                 throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.');
+            }
             this._gl = gl;
             return gl;
         };
         Shader.prototype._initTextures = function (userUniforms, userTextures, sourceTextureOptions) {
             var gl = this._gl;
             var maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
-            if (userTextures.length > maxTextures)
+            if (userTextures.length > maxTextures) {
                 console.warn('Too many textures!');
+            }
             this._userTextures = {};
             for (var name_1 in userTextures) {
                 var userOptions = userTextures[name_1];
@@ -1358,8 +1745,9 @@ var etro = (function () {
                      * textures, without having to define multiple properties in the effect
                      * object.
                      */
-                    if (userUniforms[name_1])
-                        throw new Error("Texture - uniform naming conflict: " + name_1 + "!");
+                    if (userUniforms[name_1]) {
+                        throw new Error("Texture - uniform naming conflict: ".concat(name_1, "!"));
+                    }
                     // Add this as a "user uniform".
                     userUniforms[name_1] = '1i'; // texture pointer
                 }
@@ -1394,18 +1782,6 @@ var etro = (function () {
                 this._uniformLocations[unprefixed] = gl.getUniformLocation(this._program, prefixed);
             }
         };
-        // Not needed, right?
-        /* watchWebGLOptions() {
-              const pubChange = () => {
-                  this.publish("change", {});
-              };
-              for (let name in this._userTextures) {
-                  watch(this, name, pubChange);
-              }
-              for (let name in this._userUniforms) {
-                  watch(this, name, pubChange);
-              }
-          } */
         Shader.prototype.apply = function (target, reltime) {
             this._checkDimensions(target);
             this._refreshGl();
@@ -1492,16 +1868,22 @@ var etro = (function () {
                 i++;
             }
         };
+        /**
+         * Set the shader's uniforms.
+         * @param target The movie or layer to apply the shader to.
+         * @param reltime The relative time of the movie or layer.
+         */
         Shader.prototype._prepareUniforms = function (target, reltime) {
             var gl = this._gl;
-            // Set the shader uniforms.
             // Tell the shader we bound the texture to texture unit 0.
             // All base (Shader class) uniforms are optional.
-            if (this._uniformLocations.source)
+            if (this._uniformLocations.source) {
                 gl.uniform1i(this._uniformLocations.source, 0);
+            }
             // All base (Shader class) uniforms are optional.
-            if (this._uniformLocations.size)
+            if (this._uniformLocations.size) {
                 gl.uniform2iv(this._uniformLocations.size, [target.canvas.width, target.canvas.height]);
+            }
             for (var unprefixed in this._userUniforms) {
                 var options = this._userUniforms[unprefixed];
                 var value = val(this, unprefixed, reltime);
@@ -1525,11 +1907,13 @@ var etro = (function () {
         /**
          * Converts a value of a standard type for javascript to a standard type for
          * GLSL
+         *
          * @param value - the raw value to prepare
          * @param outputType - the WebGL type of |value|; example:
          * <code>1f</code> for a float
          * @param reltime - current time, relative to the target
-         * @param [options] - Optional config
+         * @param [options]
+         * @returns the prepared value
          */
         Shader.prototype._prepareValue = function (value, outputType, reltime, options) {
             if (options === void 0) { options = {}; }
@@ -1552,36 +1936,41 @@ var etro = (function () {
                 var i = 0;
                 for (var name_4 in this._userTextures) {
                     var testValue = val(this, name_4, reltime);
-                    if (value === testValue)
+                    if (value === testValue) {
                         value = Shader.INTERNAL_TEXTURE_UNITS + i; // after the internal texture units
+                    }
                     i++;
                 }
             }
             if (outputType === '3fv') {
                 // allow 4-component vectors; TODO: why?
-                if (Array.isArray(value) && (value.length === 3 || value.length === 4))
+                if (Array.isArray(value) && (value.length === 3 || value.length === 4)) {
                     return value;
+                }
                 // kind of loose so this can be changed if needed
-                if (typeof value === 'object')
+                if (typeof value === 'object') {
                     return [
                         value.r !== undefined ? value.r : def,
                         value.g !== undefined ? value.g : def,
                         value.b !== undefined ? value.b : def
                     ];
-                throw new Error("Invalid type: " + outputType + " or value: " + value);
+                }
+                throw new Error("Invalid type: ".concat(outputType, " or value: ").concat(value));
             }
             if (outputType === '4fv') {
-                if (Array.isArray(value) && value.length === 4)
+                if (Array.isArray(value) && value.length === 4) {
                     return value;
+                }
                 // kind of loose so this can be changed if needed
-                if (typeof value === 'object')
+                if (typeof value === 'object') {
                     return [
                         value.r !== undefined ? value.r : def,
                         value.g !== undefined ? value.g : def,
                         value.b !== undefined ? value.b : def,
                         value.a !== undefined ? value.a : def
                     ];
-                throw new Error("Invalid type: " + outputType + " or value: " + value);
+                }
+                throw new Error("Invalid type: ".concat(outputType, " or value: ").concat(value));
             }
             return value;
         };
@@ -1674,8 +2063,9 @@ var etro = (function () {
             else {
                 // No, it's not a power of 2. Turn off mips and set
                 // wrapping to clamp to edge
-                if (wrapS !== gl.CLAMP_TO_EDGE || wrapT !== gl.CLAMP_TO_EDGE)
+                if (wrapS !== gl.CLAMP_TO_EDGE || wrapT !== gl.CLAMP_TO_EDGE) {
                     console.warn('Wrap mode is not CLAMP_TO_EDGE for a non-power-of-two texture. Defaulting to CLAMP_TO_EDGE');
+                }
                 gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
                 gl.texParameteri(target, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
             }
@@ -1727,7 +2117,6 @@ var etro = (function () {
         Shader._IDENTITY_FRAGMENT_SOURCE = "\n    precision mediump float;\n\n    uniform sampler2D u_Source;\n\n    varying highp vec2 v_TextureCoord;\n\n    void main() {\n        gl_FragColor = texture2D(u_Source, v_TextureCoord);\n    }\n  ";
         return Shader;
     }(Visual$1));
-    // Shader.prototype.getpublicExcludes = () =>
     var isPowerOf2 = function (value) { return (value && (value - 1)) === 0; };
 
     /**
@@ -1902,6 +2291,35 @@ var etro = (function () {
         return EllipticalMask;
     }(Visual$1));
 
+    var StackEffectsListener = /** @class */ (function (_super) {
+        __extends(StackEffectsListener, _super);
+        function StackEffectsListener(stack) {
+            var _this = _super.call(this) || this;
+            _this._stack = stack;
+            return _this;
+        }
+        StackEffectsListener.prototype.onAdd = function (effect) {
+            if (!this._stack.parent) {
+                return;
+            }
+            effect.tryAttach(this._stack.parent);
+        };
+        StackEffectsListener.prototype.onRemove = function (effect) {
+            if (!this._stack.parent) {
+                return;
+            }
+            effect.tryDetach();
+        };
+        return StackEffectsListener;
+    }(CustomArrayListener));
+    var StackEffects = /** @class */ (function (_super) {
+        __extends(StackEffects, _super);
+        // eslint-disable-next-line no-use-before-define
+        function StackEffects(target, stack) {
+            return _super.call(this, target, new StackEffectsListener(stack)) || this;
+        }
+        return StackEffects;
+    }(CustomArray));
     /**
      * A sequence of effects to apply, treated as one effect. This can be useful
      * for defining reused effect sequences as one effect.
@@ -1910,48 +2328,28 @@ var etro = (function () {
         __extends(Stack, _super);
         function Stack(options) {
             var _this = _super.call(this) || this;
-            _this._effectsBack = [];
-            // TODO: Throw 'change' events in handlers
-            _this.effects = new Proxy(_this._effectsBack, {
-                deleteProperty: function (target, property) {
-                    var value = target[property];
-                    value.detach(); // Detach effect from movie
-                    delete target[property];
-                    return true;
-                },
-                set: function (target, property, value) {
-                    // TODO: make sure type check works
-                    if (!isNaN(Number(property))) { // if property is a number (index)
-                        if (target[property])
-                            target[property].detach(); // Detach old effect from movie
-                        value.attach(this._target); // Attach effect to movie
-                    }
-                    target[property] = value;
-                    return true;
-                }
-            });
+            _this.effects = new StackEffects(options.effects, _this);
             options.effects.forEach(function (effect) { return _this.effects.push(effect); });
             return _this;
-            // TODO: Propogate 'change' events from children up
         }
         Stack.prototype.attach = function (movie) {
             _super.prototype.attach.call(this, movie);
             this.effects.filter(function (effect) { return !!effect; }).forEach(function (effect) {
-                effect.detach();
-                effect.attach(movie);
+                effect.tryAttach(movie);
             });
         };
         Stack.prototype.detach = function () {
             _super.prototype.detach.call(this);
             this.effects.filter(function (effect) { return !!effect; }).forEach(function (effect) {
-                effect.detach();
+                effect.tryDetach();
             });
         };
         Stack.prototype.apply = function (target, reltime) {
             for (var i = 0; i < this.effects.length; i++) {
                 var effect = this.effects[i];
-                if (!effect)
+                if (!effect) {
                     continue;
+                }
                 effect.apply(target, reltime);
             }
         };
@@ -1970,7 +2368,7 @@ var etro = (function () {
      * Applies a Gaussian blur
      */
     // TODO: Improve performance
-    // TODO: Make sure this is truly gaussian even though it doens't require a
+    // TODO: Make sure this is truly gaussian even though it doesn't require a
     // standard deviation
     var GaussianBlur = /** @class */ (function (_super) {
         __extends(GaussianBlur, _super);
@@ -2015,9 +2413,10 @@ var etro = (function () {
         }
         GaussianBlurComponent.prototype.apply = function (target, reltime) {
             var radiusVal = val(this, 'radius', reltime);
-            if (radiusVal !== this._radiusCache)
+            if (radiusVal !== this._radiusCache) {
                 // Regenerate gaussian distribution canvas.
                 this.shape = GaussianBlurComponent._render1DKernel(GaussianBlurComponent._gen1DKernel(radiusVal));
+            }
             this._radiusCache = radiusVal;
             _super.prototype.apply.call(this, target, reltime);
         };
@@ -2050,23 +2449,27 @@ var etro = (function () {
             var pascal = GaussianBlurComponent._genPascalRow(2 * radius + 1);
             // don't use `reduce` and `map` (overhead?)
             var sum = 0;
-            for (var i = 0; i < pascal.length; i++)
+            for (var i = 0; i < pascal.length; i++) {
                 sum += pascal[i];
-            for (var i = 0; i < pascal.length; i++)
+            }
+            for (var i = 0; i < pascal.length; i++) {
                 pascal[i] /= sum;
+            }
             return pascal;
         };
         GaussianBlurComponent._genPascalRow = function (index) {
-            if (index < 0)
-                throw new Error("Invalid index " + index);
+            if (index < 0) {
+                throw new Error("Invalid index ".concat(index));
+            }
             var currRow = [1];
             for (var i = 1; i < index; i++) {
                 var nextRow = [];
                 nextRow.length = currRow.length + 1;
                 // edges are always 1's
                 nextRow[0] = nextRow[nextRow.length - 1] = 1;
-                for (var j = 1; j < nextRow.length - 1; j++)
+                for (var j = 1; j < nextRow.length - 1; j++) {
                     nextRow[j] = currRow[j - 1] + currRow[j];
+                }
                 currRow = nextRow;
             }
             return currRow;
@@ -2137,15 +2540,14 @@ var etro = (function () {
                     pixelSize: '1i'
                 }
             }) || this;
-            /**
-             */
             _this.pixelSize = options.pixelSize || 1;
             return _this;
         }
         Pixelate.prototype.apply = function (target, reltime) {
             var ps = val(this, 'pixelSize', reltime);
-            if (ps % 1 !== 0 || ps < 0)
+            if (ps % 1 !== 0 || ps < 0) {
                 throw new Error('Pixel size must be a nonnegative integer');
+            }
             _super.prototype.apply.call(this, target, reltime);
         };
         return Pixelate;
@@ -2174,10 +2576,12 @@ var etro = (function () {
             return _this;
         }
         Transform.prototype.apply = function (target, reltime) {
-            if (target.canvas.width !== this._tmpCanvas.width)
+            if (target.canvas.width !== this._tmpCanvas.width) {
                 this._tmpCanvas.width = target.canvas.width;
-            if (target.canvas.height !== this._tmpCanvas.height)
+            }
+            if (target.canvas.height !== this._tmpCanvas.height) {
                 this._tmpCanvas.height = target.canvas.height;
+            }
             // Use data, since that's the underlying storage
             this._tmpMatrix.data = val(this, 'matrix.data', reltime);
             this._tmpCtx.setTransform(this._tmpMatrix.a, this._tmpMatrix.b, this._tmpMatrix.c, this._tmpMatrix.d, this._tmpMatrix.e, this._tmpMatrix.f);
@@ -2203,8 +2607,9 @@ var etro = (function () {
                 ];
             }
             Matrix.prototype.identity = function () {
-                for (var i = 0; i < this.data.length; i++)
+                for (var i = 0; i < this.data.length; i++) {
                     this.data[i] = Matrix.IDENTITY.data[i];
+                }
                 return this;
             };
             /**
@@ -2213,8 +2618,9 @@ var etro = (function () {
              * @param [val]
              */
             Matrix.prototype.cell = function (x, y, val) {
-                if (val !== undefined)
+                if (val !== undefined) {
                     this.data[3 * y + x] = val;
+                }
                 return this.data[3 * y + x];
             };
             Object.defineProperty(Matrix.prototype, "a", {
@@ -2266,16 +2672,19 @@ var etro = (function () {
              */
             Matrix.prototype.multiply = function (other) {
                 // copy to temporary matrix to avoid modifying `this` while reading from it
-                for (var x = 0; x < 3; x++)
+                for (var x = 0; x < 3; x++) {
                     for (var y = 0; y < 3; y++) {
                         var sum = 0;
-                        for (var i = 0; i < 3; i++)
+                        for (var i = 0; i < 3; i++) {
                             sum += this.cell(x, i) * other.cell(i, y);
+                        }
                         Matrix._TMP_MATRIX.cell(x, y, sum);
                     }
+                }
                 // copy data from TMP_MATRIX to this
-                for (var i = 0; i < Matrix._TMP_MATRIX.data.length; i++)
+                for (var i = 0; i < Matrix._TMP_MATRIX.data.length; i++) {
                     this.data[i] = Matrix._TMP_MATRIX.data[i];
+                }
                 return this;
             };
             /**
@@ -2330,6 +2739,7 @@ var etro = (function () {
      */
 
     var index$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         Base: Base$1,
         Brightness: Brightness,
         Channels: Channels,
@@ -2348,6 +2758,52 @@ var etro = (function () {
         Visual: Visual$1
     });
 
+    var MovieEffectsListener = /** @class */ (function (_super) {
+        __extends(MovieEffectsListener, _super);
+        function MovieEffectsListener(movie) {
+            var _this = _super.call(this) || this;
+            _this._movie = movie;
+            return _this;
+        }
+        MovieEffectsListener.prototype.onAdd = function (effect) {
+            effect.tryAttach(this._movie);
+        };
+        MovieEffectsListener.prototype.onRemove = function (effect) {
+            effect.tryDetach();
+        };
+        return MovieEffectsListener;
+    }(CustomArrayListener));
+    var MovieEffects = /** @class */ (function (_super) {
+        __extends(MovieEffects, _super);
+        function MovieEffects(target, movie) {
+            return _super.call(this, target, new MovieEffectsListener(movie)) || this;
+        }
+        return MovieEffects;
+    }(CustomArray));
+
+    var MovieLayersListener = /** @class */ (function (_super) {
+        __extends(MovieLayersListener, _super);
+        function MovieLayersListener(movie) {
+            var _this = _super.call(this) || this;
+            _this._movie = movie;
+            return _this;
+        }
+        MovieLayersListener.prototype.onAdd = function (layer) {
+            layer.tryAttach(this._movie);
+        };
+        MovieLayersListener.prototype.onRemove = function (layer) {
+            layer.tryDetach();
+        };
+        return MovieLayersListener;
+    }(CustomArrayListener));
+    var MovieLayers = /** @class */ (function (_super) {
+        __extends(MovieLayers, _super);
+        function MovieLayers(target, movie) {
+            return _super.call(this, target, new MovieLayersListener(movie)) || this;
+        }
+        return MovieLayers;
+    }(CustomArray));
+
     /**
      * @module movie
      */
@@ -2361,17 +2817,13 @@ var etro = (function () {
      *
      * Implements a pub/sub system.
      */
-    // TODO: Implement event "durationchange", and more
-    // TODO: Add width and height options
-    // TODO: Make record option to make recording video output to the user while
-    // it's recording
     // TODO: rename renderingFrame -> refreshing
     var Movie = /** @class */ (function () {
         /**
          * Creates a new movie.
          */
         function Movie(options) {
-            // TODO: move into multiple methods!
+            this._recording = false;
             // Set actx option manually, because it's readonly.
             this.actx = options.actx ||
                 options.audioContext ||
@@ -2379,236 +2831,294 @@ var etro = (function () {
                 // eslint-disable-next-line new-cap
                 new window.webkitAudioContext();
             delete options.actx;
-            // Proxy that will be returned by constructor
-            var newThis = watchPublic(this);
+            // Check if required file canvas is provided
+            if (!options.canvas) {
+                throw new Error('Required option "canvas" not provided to Movie');
+            }
             // Set canvas option manually, because it's readonly.
-            this._canvas = options.canvas;
+            this._canvas = this._visibleCanvas = options.canvas;
             delete options.canvas;
-            // Don't send updates when initializing, so use this instead of newThis:
             this._cctx = this.canvas.getContext('2d'); // TODO: make private?
+            // Set options on the movie
             applyOptions(options, this);
-            var that = newThis;
-            this._effectsBack = [];
-            this.effects = new Proxy(newThis._effectsBack, {
-                deleteProperty: function (target, property) {
-                    // Refresh screen when effect is removed, if the movie isn't playing
-                    // already.
-                    var value = target[property];
-                    value.tryDetach();
-                    delete target[property];
-                    publish(that, 'movie.change.effect.remove', { effect: value });
-                    return true;
-                },
-                set: function (target, property, value) {
-                    // Check if property is an number (an index)
-                    if (!isNaN(Number(property))) {
-                        if (target[property]) {
-                            publish(that, 'movie.change.effect.remove', {
-                                effect: target[property]
-                            });
-                            target[property].tryDetach();
-                        }
-                        // Attach effect to movie
-                        value.tryAttach(that);
-                        target[property] = value;
-                        // Refresh screen when effect is set, if the movie isn't playing
-                        // already.
-                        publish(that, 'movie.change.effect.add', { effect: value });
-                    }
-                    else {
-                        target[property] = value;
-                    }
-                    return true;
-                }
-            });
-            this._layersBack = [];
-            this.layers = new Proxy(newThis._layersBack, {
-                deleteProperty: function (target, property) {
-                    var oldDuration = this.duration;
-                    var value = target[property];
-                    value.tryDetach(that);
-                    delete target[property];
-                    var current = that.currentTime >= value.startTime && that.currentTime < value.startTime + value.duration;
-                    if (current)
-                        publish(that, 'movie.change.layer.remove', { layer: value });
-                    publish(that, 'movie.change.duration', { oldDuration: oldDuration });
-                    return true;
-                },
-                set: function (target, property, value) {
-                    var oldDuration = this.duration;
-                    // Check if property is an number (an index)
-                    if (!isNaN(Number(property))) {
-                        if (target[property]) {
-                            publish(that, 'movie.change.layer.remove', {
-                                layer: target[property]
-                            });
-                            target[property].tryDetach();
-                        }
-                        // Attach layer to movie
-                        value.tryAttach(that);
-                        target[property] = value;
-                        // Refresh screen when a relevant layer is added or removed
-                        var current = that.currentTime >= value.startTime && that.currentTime < value.startTime + value.duration;
-                        if (current)
-                            publish(that, 'movie.change.layer.add', { layer: value });
-                        publish(that, 'movie.change.duration', { oldDuration: oldDuration });
-                    }
-                    else {
-                        target[property] = value;
-                    }
-                    return true;
-                }
-            });
+            this.effects = new MovieEffects([], this);
+            this.layers = new MovieLayers([], this);
             this._paused = true;
             this._ended = false;
-            // This variable helps prevent multiple frame-rendering loops at the same
-            // time (see `render`). It's only applicable when rendering.
+            // This lock prevents multiple refresh loops at the same time (see
+            // `render`). It's only valid while rendering.
             this._renderingFrame = false;
             this.currentTime = 0;
-            // For recording
-            this._mediaRecorder = null;
-            // -1 works well in inequalities
-            // The last time `play` was called
+            // The last time `play` was called, -1 works well in comparisons
             this._lastPlayed = -1;
-            // What was `currentTime` when `play` was called
+            // What `currentTime` was when `play` was called
             this._lastPlayedOffset = -1;
-            // newThis._updateInterval = 0.1; // time in seconds between each "timeupdate" event
-            // newThis._lastUpdate = -1;
-            if (newThis.autoRefresh)
-                newThis.refresh(); // render single frame on creation
-            // Subscribe to own event "change" (child events propogate up)
-            subscribe(newThis, 'movie.change', function () {
-                if (newThis.autoRefresh && !newThis.rendering)
-                    newThis.refresh();
-            });
-            // Subscribe to own event "ended"
-            subscribe(newThis, 'movie.recordended', function () {
-                if (newThis.recording) {
-                    newThis._mediaRecorder.requestData();
-                    newThis._mediaRecorder.stop();
-                }
-            });
-            return newThis;
         }
+        Movie.prototype._whenReady = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, Promise.all([
+                                Promise.all(this.layers.map(function (layer) { return layer.whenReady(); })),
+                                Promise.all(this.effects.map(function (effect) { return effect.whenReady(); }))
+                            ])];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         /**
          * Plays the movie
-         * @return fulfilled when the movie is done playing, never fails
+         *
+         * @param [options]
+         * @param [options.onStart] Called when the movie starts playing
+         *
+         * @return Fulfilled when the movie is done playing, never fails
          */
-        Movie.prototype.play = function () {
-            var _this = this;
-            return new Promise(function (resolve) {
-                if (!_this.paused)
-                    throw new Error('Already playing');
-                _this._paused = _this._ended = false;
-                _this._lastPlayed = performance.now();
-                _this._lastPlayedOffset = _this.currentTime;
-                if (!_this.renderingFrame)
-                    // Not rendering (and not playing), so play.
-                    _this._render(true, undefined, resolve);
-                // Stop rendering frame if currently doing so, because playing has higher
-                // priority. This will effect the next _render call.
-                _this._renderingFrame = false;
-                publish(_this, 'movie.play', {});
+        Movie.prototype.play = function (options) {
+            var _a;
+            if (options === void 0) { options = {}; }
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this._whenReady()];
+                        case 1:
+                            _b.sent();
+                            if (!this.paused) {
+                                throw new Error('Already playing');
+                            }
+                            this._paused = this._ended = false;
+                            this._lastPlayed = performance.now();
+                            this._lastPlayedOffset = this.currentTime;
+                            (_a = options.onStart) === null || _a === void 0 ? void 0 : _a.call(options);
+                            // For backwards compatibility
+                            publish(this, 'movie.play', {});
+                            // Repeatedly render frames until the movie ends
+                            return [4 /*yield*/, new Promise(function (resolve) {
+                                    if (!_this.renderingFrame) {
+                                        // Not rendering (and not playing), so play.
+                                        _this._render(true, undefined, resolve);
+                                    }
+                                    // Stop rendering frame if currently doing so, because playing has higher
+                                    // priority. This will affect the next _render call.
+                                    _this._renderingFrame = false;
+                                })];
+                        case 2:
+                            // Repeatedly render frames until the movie ends
+                            _b.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * Updates the rendering canvas and audio destination to the visible canvas
+         * and the audio context destination.
+         */
+        Movie.prototype._show = function () {
+            this._canvas = this._visibleCanvas;
+            this._cctx = this.canvas.getContext('2d');
+            publish(this, 'audiodestinationupdate', { movie: this, destination: this.actx.destination });
+        };
+        /**
+         * Streams the movie to a MediaStream
+         *
+         * @param options Options for the stream
+         * @param options.frameRate The frame rate of the stream's video
+         * @param options.duration The duration of the stream in seconds
+         * @param options.video Whether to stream video. Defaults to true.
+         * @param options.audio Whether to stream audio. Defaults to true.
+         * @param options.onStart Called when the stream is started
+         * @return Fulfilled when the stream is done, never fails
+         */
+        Movie.prototype.stream = function (options) {
+            return __awaiter(this, void 0, void 0, function () {
+                var tracks, visualStream, hasMediaTracks, audioDestination, audioStream;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            // Validate options
+                            if (!options || !options.frameRate) {
+                                throw new Error('Required option "frameRate" not provided to Movie.stream');
+                            }
+                            if (options.video === false && options.audio === false) {
+                                throw new Error('Both video and audio cannot be disabled');
+                            }
+                            if (!this.paused) {
+                                throw new Error("Cannot stream movie while it's already playing");
+                            }
+                            // Wait until all resources are loaded
+                            return [4 /*yield*/, this._whenReady()
+                                // Create a temporary canvas to stream from
+                            ];
+                        case 1:
+                            // Wait until all resources are loaded
+                            _a.sent();
+                            // Create a temporary canvas to stream from
+                            this._canvas = document.createElement('canvas');
+                            this.canvas.width = this._visibleCanvas.width;
+                            this.canvas.height = this._visibleCanvas.height;
+                            this._cctx = this.canvas.getContext('2d');
+                            tracks = [];
+                            // Add video track
+                            if (options.video !== false) {
+                                visualStream = this.canvas.captureStream(options.frameRate);
+                                tracks = tracks.concat(visualStream.getTracks());
+                            }
+                            hasMediaTracks = this.layers.some(function (layer) { return layer instanceof Audio || layer instanceof Video; });
+                            // If no media tracks present, don't include an audio stream, because
+                            // Chrome doesn't record silence when an audio stream is present.
+                            if (hasMediaTracks && options.audio !== false) {
+                                audioDestination = this.actx.createMediaStreamDestination();
+                                audioStream = audioDestination.stream;
+                                tracks = tracks.concat(audioStream.getTracks());
+                                // Notify layers and any other listeners of the new audio destination
+                                publish(this, 'audiodestinationupdate', { movie: this, destination: audioDestination });
+                            }
+                            // Create the stream
+                            this._currentStream = new MediaStream(tracks);
+                            // Play the movie
+                            this._endTime = options.duration ? this.currentTime + options.duration : this.duration;
+                            return [4 /*yield*/, this.play({
+                                    onStart: function () {
+                                        // Call the user's onStart callback
+                                        options.onStart(_this._currentStream);
+                                    }
+                                })
+                                // Clear the stream after the movie is done playing
+                            ];
+                        case 2:
+                            _a.sent();
+                            // Clear the stream after the movie is done playing
+                            this._currentStream.getTracks().forEach(function (track) {
+                                track.stop();
+                            });
+                            this._currentStream = null;
+                            this._show();
+                            return [2 /*return*/];
+                    }
+                });
             });
         };
         /**
          * Plays the movie in the background and records it
          *
          * @param options
-         * @param frameRate
+         * @param [options.frameRate] - Video frame rate
          * @param [options.video=true] - whether to include video in recording
          * @param [options.audio=true] - whether to include audio in recording
-         * @param [options.mediaRecorderOptions=undefined] - options to pass to the <code>MediaRecorder</code>
+         * @param [options.mediaRecorderOptions=undefined] - Options to pass to the
+         * `MediaRecorder` constructor
          * @param [options.type='video/webm'] - MIME type for exported video
-         *  constructor
-         * @return resolves when done recording, rejects when internal media recorder errors
+         * @param [options.onStart] - Called when the recording starts
+         * @return Resolves when done recording, rejects when media recorder errors
          */
-        // TEST: *support recording that plays back with audio!*
-        // TODO: figure out how to do offline recording (faster than realtime).
-        // TODO: improve recording performance to increase frame rate?
+        // TODO: Improve recording performance to increase frame rate
         Movie.prototype.record = function (options) {
-            var _this = this;
-            if (options.video === false && options.audio === false)
-                throw new Error('Both video and audio cannot be disabled');
-            if (!this.paused)
-                throw new Error('Cannot record movie while already playing or recording');
-            var mimeType = options.type || 'video/webm';
-            if (MediaRecorder && MediaRecorder.isTypeSupported && !MediaRecorder.isTypeSupported(mimeType))
-                throw new Error('Please pass a valid MIME type for the exported video');
-            return new Promise(function (resolve, reject) {
-                var canvasCache = _this.canvas;
-                // Record on a temporary canvas context
-                _this._canvas = document.createElement('canvas');
-                _this.canvas.width = canvasCache.width;
-                _this.canvas.height = canvasCache.height;
-                _this._cctx = _this.canvas.getContext('2d');
-                // frame blobs
-                var recordedChunks = [];
-                // Combine image + audio, or just pick one
-                var tracks = [];
-                if (options.video !== false) {
-                    var visualStream = _this.canvas.captureStream(options.frameRate);
-                    tracks = tracks.concat(visualStream.getTracks());
-                }
-                // Check if there's a layer that's an instance of an AudioSourceMixin
-                // (Audio or Video)
-                var hasMediaTracks = _this.layers.some(function (layer) { return layer instanceof Audio || layer instanceof Video; });
-                // If no media tracks present, don't include an audio stream, because
-                // Chrome doesn't record silence when an audio stream is present.
-                if (hasMediaTracks && options.audio !== false) {
-                    var audioDestination = _this.actx.createMediaStreamDestination();
-                    var audioStream = audioDestination.stream;
-                    tracks = tracks.concat(audioStream.getTracks());
-                    publish(_this, 'movie.audiodestinationupdate', { movie: _this, destination: audioDestination });
-                }
-                var stream = new MediaStream(tracks);
-                var mediaRecorderOptions = __assign(__assign({}, (options.mediaRecorderOptions || {})), { mimeType: mimeType });
-                var mediaRecorder = new MediaRecorder(stream, mediaRecorderOptions);
-                mediaRecorder.ondataavailable = function (event) {
-                    // if (this._paused) reject(new Error("Recording was interrupted"));
-                    if (event.data.size > 0)
-                        recordedChunks.push(event.data);
-                };
-                // TODO: publish to movie, not layers
-                mediaRecorder.onstop = function () {
-                    _this._paused = true;
-                    _this._ended = true;
-                    _this._canvas = canvasCache;
-                    _this._cctx = _this.canvas.getContext('2d');
-                    publish(_this, 'movie.audiodestinationupdate', { movie: _this, destination: _this.actx.destination });
-                    _this._mediaRecorder = null;
-                    // Construct the exported video out of all the frame blobs.
-                    resolve(new Blob(recordedChunks, {
-                        type: mimeType
-                    }));
-                };
-                mediaRecorder.onerror = reject;
-                mediaRecorder.start();
-                _this._mediaRecorder = mediaRecorder;
-                _this._recordEndTime = options.duration ? _this.currentTime + options.duration : _this.duration;
-                _this.play();
-                publish(_this, 'movie.record', { options: options });
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var mimeType, stream, recordedChunks, mediaRecorderOptions;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            // Validate options
+                            if (options.video === false && options.audio === false) {
+                                throw new Error('Both video and audio cannot be disabled');
+                            }
+                            if (!this.paused) {
+                                throw new Error("Cannot record movie while it's already playing");
+                            }
+                            mimeType = options.type || 'video/webm';
+                            if (MediaRecorder && MediaRecorder.isTypeSupported && !MediaRecorder.isTypeSupported(mimeType)) {
+                                throw new Error('Please pass a valid MIME type for the exported video');
+                            }
+                            return [4 /*yield*/, new Promise(function (resolve) {
+                                    _this.stream({
+                                        frameRate: options.frameRate,
+                                        duration: options.duration,
+                                        video: options.video,
+                                        audio: options.audio,
+                                        onStart: resolve
+                                    }).then(function () {
+                                        // Stop the media recorder when the movie is done playing
+                                        _this._recorder.requestData();
+                                        _this._recorder.stop();
+                                    });
+                                })
+                                // The array to store the recorded chunks
+                            ];
+                        case 1:
+                            stream = _b.sent();
+                            recordedChunks = [];
+                            mediaRecorderOptions = __assign(__assign({}, (options.mediaRecorderOptions || {})), { mimeType: mimeType });
+                            this._recorder = new MediaRecorder(stream, mediaRecorderOptions);
+                            this._recorder.ondataavailable = function (event) {
+                                // if (this._paused) reject(new Error("Recording was interrupted"));
+                                if (event.data.size > 0) {
+                                    recordedChunks.push(event.data);
+                                }
+                            };
+                            // Start recording
+                            this._recorder.start();
+                            this._recording = true;
+                            // Notify caller that the media recorder has started
+                            (_a = options.onStart) === null || _a === void 0 ? void 0 : _a.call(options, this._recorder);
+                            // For backwards compatibility
+                            publish(this, 'movie.record', { options: options });
+                            // Wait until the media recorder is done recording and processing
+                            return [4 /*yield*/, new Promise(function (resolve, reject) {
+                                    _this._recorder.onstop = function () {
+                                        resolve();
+                                    };
+                                    _this._recorder.onerror = reject;
+                                })
+                                // Clean up
+                            ];
+                        case 2:
+                            // Wait until the media recorder is done recording and processing
+                            _b.sent();
+                            // Clean up
+                            this._paused = true;
+                            this._ended = true;
+                            this._recording = false;
+                            // Construct the exported video out of all the frame blobs.
+                            return [2 /*return*/, new Blob(recordedChunks, {
+                                    type: mimeType
+                                })];
+                    }
+                });
             });
         };
         /**
-         * Stops the movie, without reseting the playback position
-         * @return the movie (for chaining)
+         * Stops the movie without resetting the playback position
+         * @return The movie
          */
         Movie.prototype.pause = function () {
+            // Update state
             this._paused = true;
             // Deactivate all layers
-            for (var i = 0; i < this.layers.length; i++)
+            for (var i = 0; i < this.layers.length; i++) {
                 if (Object.prototype.hasOwnProperty.call(this.layers, i)) {
                     var layer = this.layers[i];
-                    layer.stop();
-                    layer.active = false;
+                    if (layer.active) {
+                        layer.stop();
+                        layer.active = false;
+                    }
                 }
+            }
+            // For backwards compatibility, notify event listeners that the movie has
+            // paused
             publish(this, 'movie.pause', {});
             return this;
         };
         /**
          * Stops playback and resets the playback position
-         * @return the movie (for chaining)
+         * @return The movie
          */
         Movie.prototype.stop = function () {
             this.pause();
@@ -2617,8 +3127,8 @@ var etro = (function () {
         };
         /**
          * @param [timestamp=performance.now()]
-         * @param [done=undefined] - called when done playing or when the current frame is loaded
-         * @private
+         * @param [done=undefined] - Called when done playing or when the current
+         * frame is loaded
          */
         Movie.prototype._render = function (repeat, timestamp, done) {
             var _this = this;
@@ -2626,177 +3136,207 @@ var etro = (function () {
             if (done === void 0) { done = undefined; }
             clearCachedValues(this);
             if (!this.rendering) {
-                // (!this.paused || this._renderingFrame) is true so it's playing or it's
+                // (this.paused && !this._renderingFrame) is true so it's playing or it's
                 // rendering a single frame.
-                if (done)
+                if (done) {
                     done();
+                }
                 return;
             }
-            this._updateCurrentTime(timestamp);
-            // TODO: Is calling duration every frame bad for performance? (remember,
-            // it's calling Array.reduce)
-            var end = this.recording ? this._recordEndTime : this.duration;
-            if (this.currentTime > end) {
-                if (this.recording)
-                    publish(this, 'movie.recordended', { movie: this });
-                if (this.currentTime > this.duration)
-                    publish(this, 'movie.ended', { movie: this, repeat: this.repeat });
-                // TODO: only reset currentTime if repeating
-                if (this.repeat) {
-                    // Don't use setter, which publishes 'movie.seek'. Instead, update the
-                    // value and publish a 'movie.timeupdate' event.
+            if (this.ready) {
+                publish(this, 'movie.loadeddata', { movie: this });
+                // If the movie is streaming or recording, resume the media recorder
+                if (this._recording && this._recorder.state === 'paused') {
+                    this._recorder.resume();
+                }
+                // If the movie is streaming or recording, end at the specified duration.
+                // Otherwise, end at the movie's duration, because play() does not
+                // support playing a portion of the movie yet.
+                // TODO: Is calling duration every frame bad for performance? (remember,
+                // it's calling Array.reduce)
+                var end = this._currentStream ? this._endTime : this.duration;
+                this._updateCurrentTime(timestamp, end);
+                if (this.currentTime === end) {
+                    if (this.recording) {
+                        publish(this, 'movie.recordended', { movie: this });
+                    }
+                    if (this.currentTime === this.duration) {
+                        publish(this, 'movie.ended', { movie: this, repeat: this.repeat });
+                    }
+                    // Don't use setter, which publishes 'seek'. Instead, update the
+                    // value and publish a 'imeupdate' event.
                     this._currentTime = 0;
                     publish(this, 'movie.timeupdate', { movie: this });
-                }
-                this._lastPlayed = performance.now();
-                this._lastPlayedOffset = 0; // this.currentTime
-                this._renderingFrame = false;
-                // Stop playback or recording if done (except if it's playing and repeat
-                // is true)
-                if (!(!this.recording && this.repeat)) {
-                    this._paused = true;
-                    this._ended = true;
-                    // Deactivate all layers
-                    for (var i = 0; i < this.layers.length; i++)
-                        if (Object.prototype.hasOwnProperty.call(this.layers, i)) {
-                            var layer = this.layers[i];
-                            // A layer that has been deleted before layers.length has been updated
-                            // (see the layers proxy in the constructor).
-                            if (!layer || !layer.active)
-                                continue;
-                            layer.stop();
-                            layer.active = false;
+                    this._lastPlayed = performance.now();
+                    this._lastPlayedOffset = 0; // this.currentTime
+                    this._renderingFrame = false;
+                    // Stop playback or recording if done (except if it's playing and repeat
+                    // is true)
+                    if (!(!this.recording && this.repeat)) {
+                        this._paused = true;
+                        this._ended = true;
+                        // Deactivate all layers
+                        for (var i = 0; i < this.layers.length; i++) {
+                            if (Object.prototype.hasOwnProperty.call(this.layers, i)) {
+                                var layer = this.layers[i];
+                                // A layer that has been deleted before layers.length has been updated
+                                // (see the layers proxy in the constructor).
+                                if (!layer || !layer.active) {
+                                    continue;
+                                }
+                                layer.stop();
+                                layer.active = false;
+                            }
+                        }
+                        publish(this, 'movie.pause', {});
+                        if (done) {
+                            done();
                         }
-                    if (done)
-                        done();
-                    return;
+                        return;
+                    }
                 }
+                // Do render
+                this._renderBackground(timestamp);
+                this._renderLayers();
+                this._applyEffects();
             }
-            // Do render
-            this._renderBackground(timestamp);
-            var frameFullyLoaded = this._renderLayers();
-            this._applyEffects();
-            if (frameFullyLoaded)
-                publish(this, 'movie.loadeddata', { movie: this });
-            // If didn't load in this instant, repeatedly frame-render until frame is
-            // loaded.
-            // If the expression below is false, don't publish an event, just silently
-            // stop render loop.
-            if (!repeat || (this._renderingFrame && frameFullyLoaded)) {
+            else {
+                // If we are recording, pause the media recorder until the movie is
+                // ready.
+                if (this.recording && this._recorder.state === 'recording') {
+                    this._recorder.pause();
+                }
+            }
+            // If the frame didn't load this instant, repeatedly frame-render until it
+            // is loaded.
+            // If the expression below is true, don't publish an event, just silently
+            // stop the render loop.
+            if (this._renderingFrame && this.ready) {
                 this._renderingFrame = false;
-                if (done)
+                if (done) {
                     done();
+                }
                 return;
             }
+            // TODO: Is making a new arrow function every frame bad for performance?
             window.requestAnimationFrame(function () {
                 _this._render(repeat, undefined, done);
-            }); // TODO: research performance cost
+            });
         };
-        Movie.prototype._updateCurrentTime = function (timestamp) {
-            // If we're only instant-rendering (current frame only), it doens't matter
-            // if it's paused or not.
+        Movie.prototype._updateCurrentTime = function (timestampMs, end) {
+            // If we're only frame-rendering (current frame only), it doesn't matter if
+            // it's paused or not.
             if (!this._renderingFrame) {
-                // if ((timestamp - this._lastUpdate) >= this._updateInterval) {
-                var sinceLastPlayed = (timestamp - this._lastPlayed) / 1000;
-                var currentTime = this._lastPlayedOffset + sinceLastPlayed; // don't use setter
+                var sinceLastPlayed = (timestampMs - this._lastPlayed) / 1000;
+                var currentTime = this._lastPlayedOffset + sinceLastPlayed;
                 if (this.currentTime !== currentTime) {
+                    // Update the current time (don't use setter)
                     this._currentTime = currentTime;
+                    // For backwards compatibility, publish a 'movie.timeupdate' event.
                     publish(this, 'movie.timeupdate', { movie: this });
                 }
-                // this._lastUpdate = timestamp;
-                // }
+                if (this.currentTime > end) {
+                    this._currentTime = end;
+                }
             }
         };
         Movie.prototype._renderBackground = function (timestamp) {
             this.cctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            // Evaluate background color (since it's a dynamic property)
             var background = val(this, 'background', timestamp);
-            if (background) { // TODO: check val'd result
+            if (background) {
                 this.cctx.fillStyle = background;
                 this.cctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
             }
         };
         /**
-         * @return whether or not video frames are loaded
          * @param [timestamp=performance.now()]
-         * @private
          */
         Movie.prototype._renderLayers = function () {
-            var frameFullyLoaded = true;
             for (var i = 0; i < this.layers.length; i++) {
-                if (!Object.prototype.hasOwnProperty.call(this.layers, i))
+                if (!Object.prototype.hasOwnProperty.call(this.layers, i)) {
                     continue;
+                }
                 var layer = this.layers[i];
                 // A layer that has been deleted before layers.length has been updated
                 // (see the layers proxy in the constructor).
-                if (!layer)
+                if (!layer) {
                     continue;
-                var reltime = this.currentTime - layer.startTime;
+                }
                 // Cancel operation if layer disabled or outside layer time interval
+                var reltime = this.currentTime - layer.startTime;
                 if (!val(layer, 'enabled', reltime) ||
                     // TODO                                                    > or >= ?
                     this.currentTime < layer.startTime || this.currentTime > layer.startTime + layer.duration) {
                     // Layer is not active.
                     // If only rendering this frame, we are not "starting" the layer.
                     if (layer.active && !this._renderingFrame) {
-                        // TODO: make a `deactivate()` method?
                         layer.stop();
                         layer.active = false;
                     }
                     continue;
                 }
+                // If we are playing (not refreshing), update the layer's progress
+                if (!this._renderingFrame) {
+                    layer.progress(reltime);
+                }
                 // If only rendering this frame, we are not "starting" the layer
                 if (!layer.active && val(layer, 'enabled', reltime) && !this._renderingFrame) {
-                    // TODO: make an `activate()` method?
                     layer.start();
                     layer.active = true;
                 }
-                // if the layer has an input file
-                if ('source' in layer)
-                    frameFullyLoaded = frameFullyLoaded && layer.source.readyState >= 2;
                 layer.render();
                 // if the layer has visual component
                 if (layer instanceof Visual) {
                     var canvas = layer.canvas;
-                    // layer.canvas.width and layer.canvas.height should already be interpolated
-                    // if the layer has an area (else InvalidStateError from canvas)
-                    if (canvas.width * canvas.height > 0)
+                    if (canvas.width * canvas.height > 0) {
                         this.cctx.drawImage(canvas, val(layer, 'x', reltime), val(layer, 'y', reltime), canvas.width, canvas.height);
+                    }
                 }
             }
-            return frameFullyLoaded;
         };
         Movie.prototype._applyEffects = function () {
             for (var i = 0; i < this.effects.length; i++) {
                 var effect = this.effects[i];
                 // An effect that has been deleted before effects.length has been updated
                 // (see the effectsproxy in the constructor).
-                if (!effect)
+                if (!effect) {
                     continue;
+                }
                 effect.apply(this, this.currentTime);
             }
         };
         /**
-         * Refreshes the screen (only use this if auto-refresh is disabled)
-         * @return - resolves when the frame is loaded
+         * Refreshes the screen
+         *
+         * Only use this if auto-refresh is disabled
+         *
+         * @return - Promise that resolves when the frame is loaded
          */
         Movie.prototype.refresh = function () {
             var _this = this;
+            // Refreshing while playing can interrupt playback
+            if (!this.paused) {
+                throw new Error('Already playing');
+            }
             return new Promise(function (resolve) {
                 _this._renderingFrame = true;
                 _this._render(false, undefined, resolve);
             });
         };
         /**
-         * Convienence method
+         * Convienence method (TODO: remove)
          */
         Movie.prototype._publishToLayers = function (type, event) {
-            for (var i = 0; i < this.layers.length; i++)
-                if (Object.prototype.hasOwnProperty.call(this.layers, i))
+            for (var i = 0; i < this.layers.length; i++) {
+                if (Object.prototype.hasOwnProperty.call(this.layers, i)) {
                     publish(this.layers[i], type, event);
+                }
+            }
         };
         Object.defineProperty(Movie.prototype, "rendering", {
             /**
-             * If the movie is playing, recording or refreshing
+             * `true` if the movie is playing, recording or refreshing
              */
             get: function () {
                 return !this.paused || this._renderingFrame;
@@ -2806,7 +3346,7 @@ var etro = (function () {
         });
         Object.defineProperty(Movie.prototype, "renderingFrame", {
             /**
-             * If the movie is refreshing current frame
+             * `true` if the movie is refreshing the current frame
              */
             get: function () {
                 return this._renderingFrame;
@@ -2816,17 +3356,19 @@ var etro = (function () {
         });
         Object.defineProperty(Movie.prototype, "recording", {
             /**
-             * If the movie is recording
+             * `true` if the movie is recording
              */
             get: function () {
-                return !!this._mediaRecorder;
+                return this._recording;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(Movie.prototype, "duration", {
             /**
-             * The combined duration of all layers
+             * The duration of the movie in seconds
+             *
+             * Calculated from the end time of the last layer
              */
             // TODO: dirty flag?
             get: function () {
@@ -2836,16 +3378,16 @@ var etro = (function () {
             configurable: true
         });
         /**
-         * Convienence method for <code>layers.push()</code>
+         * Convenience method for `layers.push()`
          * @param layer
-         * @return the movie
+         * @return The movie
          */
         Movie.prototype.addLayer = function (layer) {
             this.layers.push(layer);
             return this;
         };
         /**
-         * Convienence method for <code>effects.push()</code>
+         * Convenience method for `effects.push()`
          * @param effect
          * @return the movie
          */
@@ -2855,6 +3397,7 @@ var etro = (function () {
         };
         Object.defineProperty(Movie.prototype, "paused", {
             /**
+             * `true` if the movie is paused
              */
             get: function () {
                 return this._paused;
@@ -2864,7 +3407,7 @@ var etro = (function () {
         });
         Object.defineProperty(Movie.prototype, "ended", {
             /**
-             * If the playback position is at the end of the movie
+             * `true` if the playback position is at the end of the movie
              */
             get: function () {
                 return this._ended;
@@ -2872,50 +3415,89 @@ var etro = (function () {
             enumerable: false,
             configurable: true
         });
+        /**
+         * Skips to the provided playback position, updating {@link currentTime}.
+         *
+         * @param time - The new playback position (in seconds)
+         */
+        Movie.prototype.seek = function (time) {
+            this._currentTime = time;
+            // Call `seek` on every layer
+            for (var i = 0; i < this.layers.length; i++) {
+                var layer = this.layers[i];
+                if (layer) {
+                    var relativeTime = time - layer.startTime;
+                    if (relativeTime >= 0 && relativeTime <= layer.duration) {
+                        layer.seek(relativeTime);
+                    }
+                    else {
+                        layer.seek(undefined);
+                    }
+                }
+            }
+            // For backwards compatibility, publish a `seek` event
+            publish(this, 'movie.seek', {});
+        };
         Object.defineProperty(Movie.prototype, "currentTime", {
             /**
-             * The current playback position
+             * The current playback position in seconds
              */
             get: function () {
                 return this._currentTime;
             },
+            /**
+             * Skips to the provided playback position, updating {@link currentTime}.
+             *
+             * @param time - The new playback position (in seconds)
+             *
+             * @deprecated Use `seek` instead
+             */
             set: function (time) {
-                this._currentTime = time;
-                publish(this, 'movie.seek', {});
-                // Render single frame to match new time
-                if (this.autoRefresh)
-                    this.refresh();
+                this.seek(time);
             },
             enumerable: false,
             configurable: true
         });
         /**
-         * Sets the current playback position. This is a more powerful version of
-         * `set currentTime`.
+         * Skips to the provided playback position, updating {@link currentTime}.
          *
-         * @param time - the new cursor's time value in seconds
-         * @param [refresh=true] - whether to render a single frame
-         * @return resolves when the current frame is rendered if
-         * <code>refresh</code> is true, otherwise resolves immediately
+         * @param time - The new time (in seconds)
+         * @param [refresh=true] - Render a single frame?
+         * @return Promise that resolves when the current frame is rendered if
+         * `refresh` is true; otherwise resolves immediately.
          *
+         * @deprecated Call {@link seek} and {@link refresh} separately
          */
-        // TODO: Refresh if only auto-refreshing is enabled
+        // TODO: Refresh only if auto-refreshing is enabled
         Movie.prototype.setCurrentTime = function (time, refresh) {
             var _this = this;
             if (refresh === void 0) { refresh = true; }
             return new Promise(function (resolve, reject) {
-                _this._currentTime = time;
-                publish(_this, 'movie.seek', {});
-                if (refresh)
+                _this.seek(time);
+                if (refresh) {
                     // Pass promise callbacks to `refresh`
                     _this.refresh().then(resolve).catch(reject);
-                else
+                }
+                else {
                     resolve();
+                }
             });
         };
+        Object.defineProperty(Movie.prototype, "ready", {
+            /**
+             * `true` if the movie is ready for playback
+             */
+            get: function () {
+                var layersReady = this.layers.every(function (layer) { return layer.ready; });
+                var effectsReady = this.effects.every(function (effect) { return effect.ready; });
+                return layersReady && effectsReady;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(Movie.prototype, "canvas", {
             /**
-             * The rendering canvas
+             * The HTML canvas element used for rendering
              */
             get: function () {
                 return this._canvas;
@@ -2925,7 +3507,7 @@ var etro = (function () {
         });
         Object.defineProperty(Movie.prototype, "cctx", {
             /**
-             * The rendering canvas's context
+             * The canvas context used for rendering
              */
             get: function () {
                 return this._cctx;
@@ -2935,7 +3517,7 @@ var etro = (function () {
         });
         Object.defineProperty(Movie.prototype, "width", {
             /**
-             * The width of the rendering canvas
+             * The width of the output canvas
              */
             get: function () {
                 return this.canvas.width;
@@ -2948,7 +3530,7 @@ var etro = (function () {
         });
         Object.defineProperty(Movie.prototype, "height", {
             /**
-             * The height of the rendering canvas
+             * The height of the output canvas
              */
             get: function () {
                 return this.canvas.height;
@@ -2960,38 +3542,46 @@ var etro = (function () {
             configurable: true
         });
         Object.defineProperty(Movie.prototype, "movie", {
+            /**
+             * @return The movie
+             */
             get: function () {
                 return this;
             },
             enumerable: false,
             configurable: true
         });
+        /**
+         * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+         */
         Movie.prototype.getDefaultOptions = function () {
             return {
                 canvas: undefined,
                 /**
                  * @name module:movie#background
-                 * @desc The css color for the background, or <code>null</code> for transparency
+                 * @desc The color for the background, or <code>null</code> for transparency
                  */
-                background: '#000',
+                background: parseColor('#000'),
                 /**
                  * @name module:movie#repeat
                  */
-                repeat: false,
-                /**
-                 * @name module:movie#autoRefresh
-                 * @desc Whether to refresh when changes are made that would effect the current frame
-                 */
-                autoRefresh: true
+                repeat: false
             };
         };
         return Movie;
     }());
-    // id for events (independent of instance, but easy to access when on prototype chain)
+    // Id for events
     Movie.prototype.type = 'movie';
-    // TODO: refactor so we don't need to explicitly exclude some of these
-    Movie.prototype.publicExcludes = ['canvas', 'cctx', 'actx', 'layers', 'effects'];
-    Movie.prototype.propertyFilters = {};
+    Movie.prototype.propertyFilters = {};
+    deprecate('movie.audiodestinationupdate', 'audiodestinationupdate');
+    deprecate('movie.ended', undefined);
+    deprecate('movie.loadeddata', undefined);
+    deprecate('movie.pause', undefined, 'Wait for `play()`, `stream()`, or `record()` to resolve instead.');
+    deprecate('movie.play', undefined, 'Provide an `onStart` callback to `play()`, `stream()`, or `record()` instead.');
+    deprecate('movie.record', undefined, 'Provide an `onStart` callback to `record()` instead.');
+    deprecate('movie.recordended', undefined, 'Wait for `record()` to resolve instead.');
+    deprecate('movie.seek', undefined, 'Override the `seek` method on layers instead.');
+    deprecate('movie.timeupdate', undefined, 'Override the `progress` method on layers instead.');
 
     /*
      * Typedoc can't handle default exports. To let users import default export and
@@ -3001,6 +3591,7 @@ var etro = (function () {
      */
 
     var etro = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         layer: index,
         effect: index$1,
         event: event,
@@ -3016,8 +3607,7 @@ var etro = (function () {
         parseColor: parseColor,
         Font: Font,
         parseFont: parseFont,
-        mapPixels: mapPixels,
-        watchPublic: watchPublic
+        mapPixels: mapPixels
     });
 
     /**