Dynamic page scaling in amp-story (ampproject#12901)

extensions/amp-story/0.1/amp-story-page.js

@@ -32,8 +32,10 @@ import {upgradeBackgroundAudio} from './audio';
 import {EventType, dispatch, dispatchCustom} from './events';
 import {AdvancementConfig} from './page-advancement';
 import {matches, scopedQuerySelectorAll} from '../../../src/dom';
+import {dev} from '../../../src/log';
 import {getLogEntries} from './logging';
 import {getMode} from '../../../src/mode';
+import {PageScalingService} from './page-scaling';
 import {LoadingSpinner} from './loading-spinner';
 import {listen} from '../../../src/event-helper';
 import {debounce} from '../../../src/utils/rate-limit';
@@ -198,7 +200,7 @@ export class AmpStoryPage extends AMP.BaseElement {
   /** @return {!Promise} */
   beforeVisible() {
     this.rewindAllMediaToBeginning_();
-    return this.maybeApplyFirstAnimationFrame();
+    return this.scale_().then(() => this.maybeApplyFirstAnimationFrame());
   }
 
 
@@ -404,6 +406,14 @@ export class AmpStoryPage extends AMP.BaseElement {
     return this.animationManager_.applyFirstFrame();
   }
 
+  /**
+   * @return {!Promise}
+   * @private
+   */
+  scale_() {
+    const storyEl = dev().assertElement(this.element.parentNode);
+    return PageScalingService.for(storyEl).scale(this.element);
+  }
 
   /**
    * @param {boolean} isActive
@@ -434,10 +444,10 @@ export class AmpStoryPage extends AMP.BaseElement {
    */
   setDistance(distance) {
     this.element.setAttribute('distance', distance);
-
     this.registerAllMedia_();
     if (distance > 0 && distance <= 2) {
       this.preloadAllMedia_();
+      this.scale_();
     }
   }
 

extensions/amp-story/0.1/amp-story.js

@@ -250,6 +250,12 @@ export class AmpStory extends AMP.BaseElement {
   buildCallback() {
     this.assertAmpStoryExperiment_();
 
+    if (this.isDesktop_()) {
+      this.element.setAttribute('desktop','');
+    }
+
+    this.element.querySelector('amp-story-page').setAttribute('active', '');
+
     if (this.element.hasAttribute(AMP_STORY_STANDALONE_ATTRIBUTE)) {
       const html = this.win.document.documentElement;
       this.mutateElement(() => {