etro 0.9.0 → 0.10.0

package/dist/etro-cjs.js

@@ -38,11 +38,68 @@ var __assign = 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
@@ -52,11 +109,14 @@ var TypeId = /** @class */ (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 () {
@@ -64,23 +124,50 @@ var TypeId = /** @class */ (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
@@ -88,33 +175,36 @@ function subscribe(target, type, listener) {
 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];
@@ -122,9 +212,33 @@ function publish(target, type, event) {
     }
     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
@@ -142,8 +256,9 @@ var event = /*#__PURE__*/Object.freeze({
 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;
@@ -152,36 +267,45 @@ function getPropertyDescriptor(obj, name) {
  * 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;
@@ -221,13 +345,16 @@ var KeyFrame = /** @class */ (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];
@@ -236,7 +363,7 @@ var KeyFrame = /** @class */ (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')) {
@@ -252,6 +379,7 @@ var KeyFrame = /** @class */ (function () {
                         endValue, // eslint-disable-line @typescript-eslint/ban-types
                         percentProgress, this.interpolationKeys);
                     }
+                }
             }
             else {
                 // Repeat last value forever
@@ -277,23 +405,28 @@ var KeyFrame = /** @class */ (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) {
@@ -304,15 +437,18 @@ function val(element, path, time) {
     }, 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
@@ -320,8 +456,9 @@ function linearInterp(x1, x2, t, objectKeys) {
         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;
@@ -329,14 +466,17 @@ function linearInterp(x1, x2, t, objectKeys) {
     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
@@ -344,8 +484,9 @@ function cosineInterp(x1, x2, t, objectKeys) {
         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;
@@ -374,7 +515,7 @@ var Color = /** @class */ (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;
 }());
@@ -425,17 +566,22 @@ var Font = /** @class */ (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;
     };
@@ -450,7 +596,7 @@ var parseFontEl = document.createElement('div');
  */
 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);
@@ -475,61 +621,12 @@ function mapPixels(mapper, canvas, ctx, x, y, width, height, flush) {
     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;
+    }
 }
 
 /**
@@ -555,45 +652,70 @@ function AudioSourceMixin(superclass) {
          */
         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);
@@ -612,8 +734,9 @@ function AudioSourceMixin(superclass) {
             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)
@@ -629,6 +752,10 @@ function AudioSourceMixin(superclass) {
             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
@@ -638,6 +765,7 @@ function AudioSourceMixin(superclass) {
             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", {
@@ -656,8 +784,9 @@ function AudioSourceMixin(superclass) {
             },
             set: function (value) {
                 this._playbackRate = value;
-                if (this._unstretchedDuration !== undefined)
+                if (this._unstretchedDuration !== undefined) {
                     this.duration = this._unstretchedDuration / value;
+                }
             },
             enumerable: false,
             configurable: true
@@ -693,6 +822,18 @@ function AudioSourceMixin(superclass) {
             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 });
         };
@@ -715,56 +856,74 @@ var Base = /** @class */ (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;
     };
@@ -772,14 +931,40 @@ var Base = /** @class */ (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 () {
@@ -790,6 +975,7 @@ var Base = /** @class */ (function () {
     });
     Object.defineProperty(Base.prototype, "startTime", {
         /**
+         * The time in the movie at which this layer starts (in seconds)
          */
         get: function () {
             return this._startTime;
@@ -802,17 +988,17 @@ var Base = /** @class */ (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;
@@ -823,6 +1009,16 @@ var Base = /** @class */ (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;
@@ -830,6 +1026,9 @@ var Base = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    /**
+     * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+     */
     Base.prototype.getDefaultOptions = function () {
         return {
             startTime: undefined,
@@ -846,6 +1045,7 @@ Base.prototype.propertyFilters = {};
 
 // 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) {
@@ -854,11 +1054,21 @@ var Audio = /** @class */ (function (_super) {
      * 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()), { 
             /**
@@ -870,40 +1080,101 @@ var Audio = /** @class */ (function (_super) {
     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
      */
@@ -911,8 +1182,9 @@ var Visual = /** @class */ (function (_super) {
         // 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();
@@ -943,20 +1215,22 @@ var Visual = /** @class */ (function (_super) {
     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)
      */
@@ -964,6 +1238,18 @@ var Visual = /** @class */ (function (_super) {
         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()), { 
             /**
@@ -986,13 +1272,13 @@ var Visual = /** @class */ (function (_super) {
             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, 
             /**
@@ -1022,17 +1308,60 @@ function VisualSourceMixin(superclass) {
     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).
              */
@@ -1040,6 +1369,21 @@ function VisualSourceMixin(superclass) {
             // `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 });
         };
@@ -1067,27 +1411,40 @@ function VisualSourceMixin(superclass) {
             // 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)));
@@ -1101,9 +1458,12 @@ var Text = /** @class */ (function (_super) {
     // 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;
@@ -1150,22 +1510,33 @@ var Text = /** @class */ (function (_super) {
           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))));
@@ -1175,6 +1546,7 @@ var Video = /** @class */ (function (_super) {
  */
 
 var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     AudioSourceMixin: AudioSourceMixin,
     Audio: Audio,
     Base: Base,
@@ -1190,46 +1562,48 @@ var index = /*#__PURE__*/Object.freeze({
  */
 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;
@@ -1254,6 +1628,14 @@ var Base$1 = /** @class */ (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;
@@ -1268,6 +1650,9 @@ var Base$1 = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    /**
+     * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+     */
     Base.prototype.getDefaultOptions = function () {
         return {};
     };
@@ -1335,16 +1720,18 @@ var Shader = /** @class */ (function (_super) {
     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];
@@ -1357,8 +1744,9 @@ var Shader = /** @class */ (function (_super) {
                  * 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
             }
@@ -1393,18 +1781,6 @@ var Shader = /** @class */ (function (_super) {
             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();
@@ -1491,16 +1867,22 @@ var Shader = /** @class */ (function (_super) {
             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);
@@ -1524,11 +1906,13 @@ var Shader = /** @class */ (function (_super) {
     /**
      * 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 = {}; }
@@ -1551,36 +1935,41 @@ var Shader = /** @class */ (function (_super) {
             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;
     };
@@ -1673,8 +2062,9 @@ var Shader = /** @class */ (function (_super) {
         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);
         }
@@ -1726,7 +2116,6 @@ var Shader = /** @class */ (function (_super) {
     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; };
 
 /**
@@ -1901,6 +2290,35 @@ var EllipticalMask = /** @class */ (function (_super) {
     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.
@@ -1909,48 +2327,28 @@ var Stack = /** @class */ (function (_super) {
     __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);
         }
     };
@@ -1969,7 +2367,7 @@ var Stack = /** @class */ (function (_super) {
  * 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);
@@ -2014,9 +2412,10 @@ var GaussianBlurComponent = /** @class */ (function (_super) {
     }
     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);
     };
@@ -2049,23 +2448,27 @@ var GaussianBlurComponent = /** @class */ (function (_super) {
         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;
@@ -2136,15 +2539,14 @@ var Pixelate = /** @class */ (function (_super) {
                 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;
@@ -2173,10 +2575,12 @@ var Transform = /** @class */ (function (_super) {
         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);
@@ -2202,8 +2606,9 @@ var Transform = /** @class */ (function (_super) {
             ];
         }
         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;
         };
         /**
@@ -2212,8 +2617,9 @@ var Transform = /** @class */ (function (_super) {
          * @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", {
@@ -2265,16 +2671,19 @@ var Transform = /** @class */ (function (_super) {
          */
         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;
         };
         /**
@@ -2329,6 +2738,7 @@ var Transform = /** @class */ (function (_super) {
  */
 
 var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     Base: Base$1,
     Brightness: Brightness,
     Channels: Channels,
@@ -2347,6 +2757,52 @@ var index$1 = /*#__PURE__*/Object.freeze({
     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
  */
@@ -2360,17 +2816,13 @@ var MovieOptions = /** @class */ (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 ||
@@ -2378,236 +2830,294 @@ var Movie = /** @class */ (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();
@@ -2616,8 +3126,8 @@ var Movie = /** @class */ (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;
@@ -2625,177 +3135,207 @@ var Movie = /** @class */ (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;
@@ -2805,7 +3345,7 @@ var Movie = /** @class */ (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;
@@ -2815,17 +3355,19 @@ var Movie = /** @class */ (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 () {
@@ -2835,16 +3377,16 @@ var Movie = /** @class */ (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
      */
@@ -2854,6 +3396,7 @@ var Movie = /** @class */ (function () {
     };
     Object.defineProperty(Movie.prototype, "paused", {
         /**
+         * `true` if the movie is paused
          */
         get: function () {
             return this._paused;
@@ -2863,7 +3406,7 @@ var Movie = /** @class */ (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;
@@ -2871,50 +3414,89 @@ var Movie = /** @class */ (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;
@@ -2924,7 +3506,7 @@ var Movie = /** @class */ (function () {
     });
     Object.defineProperty(Movie.prototype, "cctx", {
         /**
-         * The rendering canvas's context
+         * The canvas context used for rendering
          */
         get: function () {
             return this._cctx;
@@ -2934,7 +3516,7 @@ var Movie = /** @class */ (function () {
     });
     Object.defineProperty(Movie.prototype, "width", {
         /**
-         * The width of the rendering canvas
+         * The width of the output canvas
          */
         get: function () {
             return this.canvas.width;
@@ -2947,7 +3529,7 @@ var Movie = /** @class */ (function () {
     });
     Object.defineProperty(Movie.prototype, "height", {
         /**
-         * The height of the rendering canvas
+         * The height of the output canvas
          */
         get: function () {
             return this.canvas.height;
@@ -2959,38 +3541,46 @@ var Movie = /** @class */ (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
@@ -3000,6 +3590,7 @@ Movie.prototype.propertyFilters = {};
  */
 
 var etro = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     layer: index,
     effect: index$1,
     event: event,
@@ -3015,8 +3606,7 @@ var etro = /*#__PURE__*/Object.freeze({
     parseColor: parseColor,
     Font: Font,
     parseFont: parseFont,
-    mapPixels: mapPixels,
-    watchPublic: watchPublic
+    mapPixels: mapPixels
 });
 
 /**