Support playback of base64-encoded SWFM files

examples/swfmplayer/swfmPlayer.js

@@ -37,6 +37,7 @@ var queryVariables = parseQueryString(window.location.search);
 var movieURL = queryVariables['swfm'] || 'tiger.swfm';
 var scoreRun = queryVariables['score'] === 'true';
 var fastRun = queryVariables['fast'] === 'true';
+var preview = queryVariables['preview'] === 'true';
 var easelHost;
 
 function startMovie(file) {
@@ -56,6 +57,42 @@ function startMovie(file) {
     };
   } else {
     easel.startRendering();
+    if (preview) {
+      easelHost.useIntrinsicSize = true;
+      var currentFrame = 0;
+      var currentPosition = 0;
+      var cpuTime = 0;
+      var previews = document.getElementById('previews');
+      var frames = [];
+      easelHost.onFrame = function () {
+        var frame = document.createElement('div');
+        currentFrame++;
+        var frameSize = easelHost.currentPosition - currentPosition;
+        currentPosition += frameSize;
+        var frameTime = easelHost.cpuTime - cpuTime;
+        cpuTime += frameTime;
+        frame.innerHTML = 'Frame ' + currentFrame + ' (size: ' + frameSize + ', render time: ' +
+                          frameTime.toPrecision(2) + '):';
+        var img = new Image();
+        img.src = easel.screenShot(null, true, true).dataURL;
+        frame.insertBefore(img, frame.firstChild);
+        frames.push(frame);
+      };
+      document.body.onscroll = function() {
+        if (!frames.length) {
+          return;
+        }
+        var currentFrame = previews.firstChild;
+        currentFrame && previews.removeChild(currentFrame);
+        previews.appendChild(frames[0]);
+        //if (previews.style.width === '') {
+        //  previews.style.width = img.width + 'px';
+        //  previews.style.height = img.height + 'px';
+        //}
+        "use strict";
+        console.log('scr')
+      }
+    }
   }
 }
 

src/gfx/easel.ts

@@ -336,7 +336,7 @@ module Shumway.GFX {
 
       this._renderer = new Canvas2D.Canvas2DRenderer(stageContainer, this._stage, this._options);
       this._listenForContainerSizeChanges();
-      this._onMouseUp = this._onMouseUp.bind(this)
+      this._onMouseUp = this._onMouseUp.bind(this);
       this._onMouseDown = this._onMouseDown.bind(this);
       this._onMouseMove = this._onMouseMove.bind(this);
 
@@ -386,6 +386,11 @@ module Shumway.GFX {
       }, false);
     }
 
+    setSize(width: number, height: number) {
+      this._container.style.width = width + 'px';
+      this._container.style.height = height + 'px';
+    }
+
     private _listenForContainerSizeChanges() {
       var pollInterval = 10;
       var w = this._containerWidth;

src/gfx/easelHost.ts

@@ -35,7 +35,7 @@ module Shumway.GFX {
     private _easel: Easel;
     private _group: Group;
     private _context: Shumway.Remoting.GFX.GFXChannelDeserializerContext;
-    private _content: Group;
+    protected _content: Group;
     private _fullscreen: boolean;
 
     constructor(easel: Easel) {

src/gfx/test/playbackEaselHost.ts

@@ -25,15 +25,33 @@ module Shumway.GFX.Test {
 
   var MINIMAL_TIMER_INTERVAL = 5;
 
+  export function playBase64SWFM(containerID: string, swfm: string) {
+    var container: HTMLDivElement = <HTMLDivElement>document.getElementById(containerID);
+    if (!container) {
+      throw new Error('DIV with id "' + containerID + '" not found');
+    }
+    if (!swfm || typeof swfm !== 'string') {
+      throw new Error("No base64-encoded SWFM file provided");
+    }
+    var easel = new Shumway.GFX.Easel(container);
+    var easelHost = new PlaybackEaselHost(easel);
+    easelHost.useIntrinsicSize = true;
+    easelHost.playBytes(Shumway.StringUtilities.decodeRestrictedBase64ToBytes(swfm));
+    easel.startRendering();
+  }
+
   export class PlaybackEaselHost extends EaselHost {
     private _parser: MovieRecordParser;
     private _lastTimestamp: number;
+    private intrinsicSizeInitialized: boolean = false;
 
     public ignoreTimestamps: boolean = false;
+    public useIntrinsicSize: boolean = false;
     public alwaysRenderFrame: boolean = false;
     public cpuTimeUpdates: number = 0;
     public cpuTimeRendering: number = 0;
 
+    public onFrame: () => void = null;
     public onComplete: () => void = null;
 
     public constructor(easel: Easel) {
@@ -44,7 +62,11 @@ module Shumway.GFX.Test {
       return this.cpuTimeUpdates + this.cpuTimeRendering;
     }
 
-    private playUrl(url: string) {
+    public get currentPosition(): number {
+      return this._parser.position;
+    }
+
+    playUrl(url: string) {
       var xhr = new XMLHttpRequest();
       xhr.open('GET', url, true);
       xhr.responseType = 'arraybuffer';
@@ -54,7 +76,7 @@ module Shumway.GFX.Test {
       xhr.send();
     }
 
-    private playBytes(data: Uint8Array) {
+    playBytes(data: Uint8Array) {
       this._parser = new MovieRecordParser(data);
       this._lastTimestamp = 0;
       this._parseNext();
@@ -130,8 +152,8 @@ module Shumway.GFX.Test {
       }
       this.cpuTimeUpdates += performance.now() - start;
 
-      if (this._parser.currentType === MovieRecordType.Frame &&
-          this.alwaysRenderFrame) {
+
+      if (this._parser.currentType === MovieRecordType.Frame && this.alwaysRenderFrame) {
         requestAnimationFrame(this._renderFrameJustAfterRAF.bind(this));
       } else {
         this._parseNext();
@@ -145,5 +167,19 @@ module Shumway.GFX.Test {
 
       this._parseNext();
     }
+
+    set fullscreen(value: boolean) {
+      // Hack: When this setter is called, the stage bounds are guaranteed to be set.
+      if (this.useIntrinsicSize && !this.intrinsicSizeInitialized) {
+        var bounds = this._content.getBounds();
+        console.log(bounds);
+        this.easel.setSize(bounds.w, bounds.h);
+        this.intrinsicSizeInitialized = true;
+      }
+    }
+
+    processFrame() {
+      this.onFrame && this.onFrame();
+    }
   }
 }

src/gfx/test/recorder.ts

@@ -296,6 +296,10 @@ module Shumway.GFX.Test {
       this._buffer.position = 4;
     }
 
+    public get position(): number {
+      return this._buffer.position;
+    }
+
     public readNextRecord(): MovieRecordType  {
       if (this._buffer.position >= this._buffer.length) {
         return MovieRecordType.None;