October 2022 Release of the APL 2022.2 compliant APL Viewhost Web

For more details on this release refer to CHANGELOG.md

To learn about APL see: https://developer.amazon.com/docs/alexa-presentation-language/understand-apl.html

Author: zhamingc

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog for apl-viewhost-web
 
+## [2022.2]
+This release adds support for version 2022.2 of the APL specification. Please also see APL Core Library for changes: [apl-core-library CHANGELOG](https://github.com/alexa/apl-core-library/blob/master/CHANGELOG.md)
+
+### Added
+- Support continued command execution during APL document re-inflation
+
+### Changed
+- Bug fixes
+
 ## [2022.1.1]
 
 ### Changed

README.md

@@ -1,10 +1,10 @@
 # Alexa Presentation Language (APL) Viewhost Web
 
 <p>
- <a href="https://github.com/alexa/apl-viewhost-web/tree/v2022.1.1" alt="version">
- <img src="https://img.shields.io/badge/stable%20version-2022.1.1-brightgreen" /></a>
- <a href="https://github.com/alexa/apl-core-library/tree/v2022.1.1" alt="APLCore">
- <img src="https://img.shields.io/badge/apl%20core%20library-2022.1.1-navy" /></a>
+ <a href="https://github.com/alexa/apl-viewhost-web/tree/v2022.2.0" alt="version">
+ <img src="https://img.shields.io/badge/stable%20version-2022.2.0-brightgreen" /></a>
+ <a href="https://github.com/alexa/apl-core-library/tree/v2022.2.0" alt="APLCore">
+ <img src="https://img.shields.io/badge/apl%20core%20library-2022.2.0-navy" /></a>
 </p>
 
 ## Introduction

js/apl-html/lib/dts/Component.d.ts

@@ -33,5 +33,6 @@
         public ensureLayout() : Promise<void> | void;
         public isCharacterValid(c : string) : Promise<boolean>;
         public provenance() : string;
+        public getMediaPlayer() : APL.MediaPlayer;
     }
 }

js/apl-html/lib/dts/Module.d.ts

@@ -2,6 +2,10 @@
  * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
+/// <reference path="./AudioPlayer.d.ts" />
+/// <reference path="./AudioPlayerFactory.d.ts" />
+/// <reference path="./MediaPlayer.d.ts" />
+/// <reference path="./MediaPlayerFactory.d.ts" />
 /// <reference path="./Context.d.ts" />
 /// <reference path="./Content.d.ts" />
 /// <reference path="./Component.d.ts" />
@@ -87,6 +91,10 @@ declare namespace APL {
         public Metrics : typeof Metrics;
         public LiveMap : typeof LiveMap;
         public LiveArray : typeof LiveArray;
+        public AudioPlayer : typeof AudioPlayer;
+        public AudioPlayerFactory: typeof AudioPlayerFactory;
+        public MediaPlayer: typeof MediaPlayer;
+        public MediaPlayerFactory: typeof MediaPlayerFactory;
     }
 }
 

js/apl-html/lib/dts/RootConfig.d.ts

@@ -16,5 +16,7 @@ declare namespace APL {
         public registerExtension(uri : string) : RootConfig;
         public liveMap(name : string, obj : any) : RootConfig;
         public liveArray(name : string, obj : any) : RootConfig;
+        public audioPlayerFactory(factory: AudioPlayerFactory) : RootConfig;
+        public mediaPlayerFactory(factory: MediaPlayerFactory) : RootConfig;
     }
 }

js/apl-html/package.json

@@ -44,12 +44,12 @@
     "typedoc": "^0.15.0",
     "typescript": "2.7.2",
     "uglifyjs-webpack-plugin": "^2.1.2",
-    "utf8-decode": "^1.0.2",
+    "utf8": "3.0.0",
     "uuid": "^3.3.2",
     "webfontloader": "^1.6.28",
     "webpack": "^4.26.1",
-    "webpack-bundle-analyzer": "^3.1.0",
-    "webpack-cli": "^3.3.2",
+    "webpack-bundle-analyzer": "^4.6.1",
+    "webpack-cli": "^3.3.12",
     "webpack-merge": "^4.2.1",
     "xregexp": "4.2.4"
   }

js/apl-html/src/APLRenderer.ts

@@ -4,7 +4,6 @@
  */
 
 import throttle = require('lodash.throttle');
-import { AudioPlayerWrapper } from './AudioPlayerWrapper';
 import { commandFactory } from './CommandFactory';
 import { componentFactory } from './ComponentFactory';
 import { ActionableComponent } from './components/ActionableComponent';
@@ -22,7 +21,7 @@ import { PointerType } from './enums/PointerType';
 import { IExtensionManager } from './extensions/IExtensionManager';
 import { ILogger } from './logging/ILogger';
 import { LoggerFactory } from './logging/LoggerFactory';
-import { AudioPlayerFactory } from './media/audio/AudioPlayer';
+import { AudioPlayerFactory, IAudioPlayerFactory } from './media/audio/AudioPlayerFactory';
 import { createAplVersionUtils } from './utils/AplVersionUtils';
 import { browserIsEdge } from './utils/BrowserUtils';
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ENTER_KEY, HttpStatusCodes } from './utils/Constant';
@@ -210,7 +209,7 @@ export interface IAPLOptions {
     /** Device mode. If no provided "HUB" is used. */
     mode?: DeviceMode;
 
-    /** Optional externalized audio player */
+    /** Optional externalized audio player factory */
     audioPlayerFactory?: AudioPlayerFactory;
 
     /** Callback for executed SendEvent commands */
@@ -310,6 +309,12 @@ export default abstract class APLRenderer<Options = any> {
      */
     protected abstract getDocumentAplVersion(): string;
 
+    /**
+     * @internal
+     * @ignore
+     */
+    protected abstract getAudioPlayerFactory(): IAudioPlayerFactory;
+
     /** A reference to the APL root context */
     public context: APL.Context;
 
@@ -329,6 +334,7 @@ export default abstract class APLRenderer<Options = any> {
         this.handleConfigurationChange(configurationChangeOptions);
     }, 200);
 
+    /** Display state change handler */
     protected handleUpdateDisplayState: (displayState: DisplayState) => void;
 
     /**
@@ -391,14 +397,16 @@ export default abstract class APLRenderer<Options = any> {
      */
     private dropFrameCount: number = 0;
 
+    /**
+     * @internal
+     * @ignore
+     */
     private isEdge: boolean = browserIsEdge(window.navigator.userAgent);
 
     public get options(): Options {
         return this.mOptions as any as Options;
     }
 
-    public audioPlayer: AudioPlayerWrapper;
-
     /**
      * THis constructor is private
      * @param mOptions options passed in through `create`
@@ -500,8 +508,6 @@ export default abstract class APLRenderer<Options = any> {
             this.onResizingIgnored = mOptions.onResizingIgnored;
         }
 
-        this.audioPlayer = new AudioPlayerWrapper(mOptions.audioPlayerFactory);
-
         this.maxTimeDeltaBetweenFrames = (1000 * this.TOLERANCE / this.MAXFPS);
     }
 
@@ -775,7 +781,6 @@ export default abstract class APLRenderer<Options = any> {
             }
             (this.context as any) = undefined;
         }
-        this.destroyAudioPlayer();
         this.removeRenderingComponents();
         if (this.view) {
             for (const eventName in this.viewEventListeners) {
@@ -974,6 +979,10 @@ export default abstract class APLRenderer<Options = any> {
      * @ignore
      */
     private coreFrameUpdate(): void {
+        if (this.getAudioPlayerFactory()) {
+            this.getAudioPlayerFactory().tick();
+        }
+
         this.updateTime();
 
         this.context.clearPending();
@@ -1303,11 +1312,4 @@ export default abstract class APLRenderer<Options = any> {
             }
         }
     }
-
-    private destroyAudioPlayer(): void {
-        if (this.audioPlayer) {
-            this.audioPlayer.destroy();
-            this.audioPlayer = null;
-        }
-    }
 }