How to set up Azure Media Player typescript definition in Angular 10

Question

I am having trouble setting up the typescript definition for the Azure Media Player in an Angular 10 project. I am using the *.d.ts file from the documentation

I tried setting up the definition using typeRoots in the tsconfig.json file:

"typeRoots": [ "./src/types/", "./node_modules/@types"],

I have found conflicting tutorials which call for the the folder containing types to either be situated at the root level or inside the src folder. Right now, the azuremediaplayer.d.ts file is in ./src/types/azuremediaplayer/ .

In the tsconfig file, there's an error which says Cannot find type definition file for 'azuremediaplayer'.

In my component, I copy-pasted the code from the official documentation , without the functions (which were throwing errors).

ngOnInit(): void {
    var myPlayer = amp('vid1', {
      "nativeControlsForTouch": false,
      autoplay: false,
      controls: true,
      width: "640",
      height: "400",
      poster: ""
    });
    myPlayer.src([{
      src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
      type: "application/vnd.ms-sstr+xml"
    }])

  }

If I ctrl+click amp from the code above, I am taken to the.d.ts file, yet some of the parameters from the function's call throw errors:

Argument of type '{ nativeControlsForTouch: boolean; autoplay: false; controls: true; width: string; height: string; poster: string; }' is not assignable to parameter of type 'Options'.


Object literal may only specify known properties, and '"nativeControlsForTouch"' does not exist in type 'Options'.

No errors appear when the initialization is like this:

var myPlayer = amp('vid1', {
      autoplay: false,
      controls: true,
      poster: ""
    });
    myPlayer.src([{
      src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
      type: "application/vnd.ms-sstr+xml"
    }])

  }

The player works if it's instantiated in the html file.

I have also tried the steps described in this answer : If I reference the file with /// <reference path="../../../types/azuremediaplayer/azuremediaplayer.d.ts" /> , nothing changes, yet there are no errors in the json. If I add the file in my files: [] property, amp() is not recognized. If I add "include": ["src/**/*"] , it's the same as using typeRoot, with the same errors.

How should I set up the player in order for it to work?

Answer 1

I don't think this is framework-specific so I will describe steps I did when I implemented this into the React app with Typescript where it works for me.

I've stored the type definition file into:

src/video-player/amp/azuremediaplayer.min.d.ts

I've added typeRoots property to my tsconfig.json . Note your project might use several typescript config files. Eg.: in my project, I've got the default one and tsconfig.package.json for npm publish purpose. This is my typeRoots config in both tsconfig.files:

 "typeRoots": ["node_modules/@types", "src/video-player/amp"]

Then, in my component .tsx file, I can use amp typescript definition like:

readonly options: amp.Player.Options;

From your description, I believe you've configured typings properly. Is the version of the typings file aligned with the amp version fetched from the CDN? (I'm using the latest 2.3.5). If so, there might be bug/inaccuracy in the official typings file - I can see your nativeControlsForTouch options property in the minified script fetched from the CDN, however, this property is not in the typings file. ¯\ (ツ) /¯

Note: It's a shame amp is not open-sourced and accessible with typings via npm - please consider voting here .