etro 0.10.1 → 0.12.0

package/src/layer/text.ts

@@ -1,6 +1,12 @@
 import { Dynamic, val, applyOptions, Color, parseColor } from '../util'
 import { Visual, VisualOptions } from './visual'
 
+enum TextStrokePosition {
+  Inside,
+  Center,
+  Outside,
+}
+
 interface TextOptions extends VisualOptions {
   text: Dynamic<string>
   font?: Dynamic<string>
@@ -24,6 +30,12 @@ interface TextOptions extends VisualOptions {
    * @see [`CanvasRenderingContext2D#direction`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline)
    */
   textDirection?: Dynamic<string>
+
+  textStroke?: Dynamic<{
+    color: Color,
+    position?: TextStrokePosition
+    thickness?: number
+  }>
 }
 
 class Text extends Visual {
@@ -49,6 +61,11 @@ class Text extends Visual {
    * @see [`CanvasRenderingContext2D#direction`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline)
    */
   textDirection: Dynamic<string>
+  textStroke?: Dynamic<{
+    color: Color,
+    position?: TextStrokePosition
+    thickness?: number
+  }>
 
   private _prevText: string
   private _prevFont: string
@@ -94,6 +111,34 @@ class Text extends Visual {
       maxWidth
     )
 
+    const textStroke = val(this, 'textStroke', this.currentTime)
+    if (textStroke) {
+      this.cctx.strokeStyle = textStroke.color
+      this.cctx.lineWidth = textStroke.thickness ?? 1
+      const position = textStroke.position ?? 'outer'
+      // Save the globalCompositeOperation, we have to revert it after stroking the text.
+      const globalCompositionOperation = this.cctx.globalCompositeOperation
+      switch (position) {
+        case TextStrokePosition.Inside:
+          this.cctx.globalCompositeOperation = 'source-atop'
+          this.cctx.lineWidth *= 2
+          break
+        case TextStrokePosition.Center:
+          break
+        case TextStrokePosition.Outside:
+          this.cctx.globalCompositeOperation = 'destination-over'
+          this.cctx.lineWidth *= 2
+          break
+      }
+      this.cctx.strokeText(
+        text,
+        val(this, 'textX', this.currentTime),
+        val(this, 'textY', this.currentTime),
+        maxWidth
+      )
+      this.cctx.globalCompositeOperation = globalCompositionOperation
+    }
+
     this._prevText = text
     this._prevFont = font
     this._prevMaxWidth = maxWidth
@@ -137,9 +182,10 @@ class Text extends Visual {
       maxWidth: null,
       textAlign: 'start',
       textBaseline: 'top',
-      textDirection: 'ltr'
+      textDirection: 'ltr',
+      textStroke: null
     }
   }
 }
 
-export { Text, TextOptions }
+export { Text, TextOptions, TextStrokePosition }

package/src/movie/movie.ts

@@ -74,8 +74,8 @@ export class Movie {
   private _recording = false
   private _currentStream: MediaStream
   private _endTime: number
-  private _lastPlayed: number
-  private _lastPlayedOffset: number
+  /** The timestamp last frame in seconds */
+  private _lastRealTime: number
 
   /**
    * Creates a new movie.
@@ -111,11 +111,6 @@ export class Movie {
     // `render`). It's only valid while rendering.
     this._renderingFrame = false
     this.currentTime = 0
-
-    // The last time `play` was called, -1 works well in comparisons
-    this._lastPlayed = -1
-    // What `currentTime` was when `play` was called
-    this._lastPlayedOffset = -1
   }
 
   private async _whenReady (): Promise<void> {
@@ -130,11 +125,13 @@ export class Movie {
    *
    * @param [options]
    * @param [options.onStart] Called when the movie starts playing
+   * @param [options.duration] The duration of the movie to play in seconds
    *
    * @return Fulfilled when the movie is done playing, never fails
    */
   async play (options: {
     onStart?: () => void,
+    duration?: number,
   } = {}): Promise<void> {
     await this._whenReady()
 
@@ -143,8 +140,8 @@ export class Movie {
     }
 
     this._paused = this._ended = false
-    this._lastPlayed = performance.now()
-    this._lastPlayedOffset = this.currentTime
+    this._lastRealTime = performance.now()
+    this._endTime = options.duration ? this.currentTime + options.duration : this.duration
 
     options.onStart?.()
 
@@ -155,13 +152,16 @@ export class Movie {
     await new Promise<void>(resolve => {
       if (!this.renderingFrame) {
         // Not rendering (and not playing), so play.
-        this._render(true, undefined, resolve)
+        this._render(undefined, resolve)
       }
 
       // Stop rendering frame if currently doing so, because playing has higher
       // priority. This will affect the next _render call.
       this._renderingFrame = false
     })
+
+    // After we're done playing, clear the last timestamp
+    this._lastRealTime = undefined
   }
 
   /**
@@ -244,12 +244,12 @@ export class Movie {
     this._currentStream = new MediaStream(tracks)
 
     // Play the movie
-    this._endTime = options.duration ? this.currentTime + options.duration : this.duration
     await this.play({
       onStart: () => {
         // Call the user's onStart callback
         options.onStart(this._currentStream)
-      }
+      },
+      duration: options.duration
     })
 
     // Clear the stream after the movie is done playing
@@ -396,11 +396,13 @@ export class Movie {
   }
 
   /**
+   * Processes one frame of the movie and draws it to the canvas
+   *
    * @param [timestamp=performance.now()]
    * @param [done=undefined] - Called when done playing or when the current
    * frame is loaded
    */
-  private _render (repeat, timestamp = performance.now(), done = undefined) {
+  private _render (timestamp = performance.now(), done = undefined) {
     clearCachedValues(this)
 
     if (!this.rendering) {
@@ -444,8 +446,6 @@ export class Movie {
         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
@@ -505,7 +505,7 @@ export class Movie {
 
     // TODO: Is making a new arrow function every frame bad for performance?
     window.requestAnimationFrame(() => {
-      this._render(repeat, undefined, done)
+      this._render(undefined, done)
     })
   }
 
@@ -513,11 +513,12 @@ export class Movie {
     // If we're only frame-rendering (current frame only), it doesn't matter if
     // it's paused or not.
     if (!this._renderingFrame) {
-      const sinceLastPlayed = (timestampMs - this._lastPlayed) / 1000
-      const currentTime = this._lastPlayedOffset + sinceLastPlayed
-      if (this.currentTime !== currentTime) {
+      const timestamp = timestampMs / 1000
+      const delta = timestamp - this._lastRealTime
+      this._lastRealTime = timestamp
+      if (delta > 0) {
         // Update the current time (don't use setter)
-        this._currentTime = currentTime
+        this._currentTime += delta
 
         // For backwards compatibility, publish a 'movie.timeupdate' event.
         publish(this, 'movie.timeupdate', { movie: this })
@@ -529,7 +530,12 @@ export class Movie {
     }
   }
 
-  private _renderBackground (timestamp) {
+  /**
+   * Draws the movie's background to the canvas
+   *
+   * @param timestamp The current high-resolution timestamp in milliseconds
+   */
+  private _renderBackground (timestamp: number) {
     this.cctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
 
     // Evaluate background color (since it's a dynamic property)
@@ -541,7 +547,7 @@ export class Movie {
   }
 
   /**
-   * @param [timestamp=performance.now()]
+   * Ticks all layers and renders them to the canvas
    */
   private _renderLayers () {
     for (let i = 0; i < this.layers.length; i++) {
@@ -595,6 +601,12 @@ export class Movie {
     }
   }
 
+  /**
+   * Applies all of the movie's effects to the canvas
+   *
+   * Note: This method only applies the movie's effects, not the layers'
+   * effects.
+   */
   private _applyEffects () {
     for (let i = 0; i < this.effects.length; i++) {
       const effect = this.effects[i]
@@ -624,7 +636,7 @@ export class Movie {
 
     return new Promise(resolve => {
       this._renderingFrame = true
-      this._render(false, undefined, resolve)
+      this._render(undefined, resolve)
     })
   }
 
@@ -665,13 +677,14 @@ export class Movie {
    *
    * Calculated from the end time of the last layer
    */
-  // TODO: dirty flag?
+  // TODO: cache
   get duration (): number {
     return this.layers.reduce((end, layer) => Math.max(layer.startTime + layer.duration, end), 0)
   }
 
   /**
    * Convenience method for `layers.push()`
+   *
    * @param layer
    * @return The movie
    */
@@ -681,6 +694,7 @@ export class Movie {
 
   /**
    * Convenience method for `effects.push()`
+   *
    * @param effect
    * @return the movie
    */