MediaSession not supported by TypeScript 2.3.4

[pablo-gonzalez]

TypeScript Version: 2.3.4

Code

  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Podcast Episode Title",
    artist: "Podcast Host",
    album: "Podcast Name",
    artwork: [{src: "podcast.jpg"}]
  });
  navigator.mediaSession.setActionHandler('play', function() {});
  navigator.mediaSession.setActionHandler('pause', function() {});
  navigator.mediaSession.setActionHandler('seekbackward', function() {});
  navigator.mediaSession.setActionHandler('seekforward', function() {});
  navigator.mediaSession.setActionHandler('previoustrack', function() {});
  navigator.mediaSession.setActionHandler('nexttrack', function() {});
}

Expected behavior:
MediaSession and MediaMetadata should be recognized by Typescript.

https://developer.mozilla.org/en-US/docs/Web/API/MediaSession
https://developers.google.com/web/updates/2017/02/media-session

Actual behavior:
Visual Studio Code Version 1.17.2 is showing the following Problems after saving the ts file:

message: 'Property 'mediaSession' does not exist on type 'Navigator'.'
message: 'Cannot find name 'MediaMetadata'.'

System information:

pablo@pablo-Inspiron-7520:~/projects/fpt3$ ionic info
cli packages: (/usr/lib/node_modules)

@ionic/cli-utils  : 1.13.1
ionic (Ionic CLI) : 3.13.2

global packages:

cordova (Cordova CLI) : 6.5.0

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.1.2 browser 4.1.0
Ionic Framework    : ionic-angular 3.7.1

System:

Android SDK Tools : 25.2.5
Node              : v7.10.0
npm               : 3.10.10
OS                : Linux 4.4

Misc:

backend : pro

As a workround I have installed @types/wicg-mediasession:
https://www.npmjs.com/package/@types/wicg-mediasession

[mhegazy]

PRs welcomed. You can find more information about contributing lib.d.ts fixes at https://github.com/Microsoft/TypeScript/blob/master/CONTRIBUTING.md#contributing-libdts-fixes.

[pablo-gonzalez]

I would be glad to help in the future. Currently I do not have the enough knowledge to contribute.
However I have given a workaround to help other people facing the same issue.

Best regards,
Pablo

[aareeph]

Hi @pablo-gonzalez, I am getting exactly same error while trying to use MediaSession in Typescript. I tried installing @types/wicg-mediasession as well but couldn't resolve the issue.

Here's the response from the developer when I tried to use this library in my Angular project:
w3c/mediasession#206 (comment)

Thanks!

[joaovct]

(Exactly) 3 years after this issue, the only "solution" is using // @ts-ignore?

[jsmith]

The "solution" is not // @ts-ignore but installing @types/wicg-mediasession as stated by @pablo-gonzalez

npm install --save-dev @types/wicg-mediasession

I'm using it now and it's working fantastic!

[MetaMmodern]

The "solution" is not // @ts-ignore but installing @types/wicg-mediasession as stated by @pablo-gonzalez

npm install --save-dev @types/wicg-mediasession

I'm using it now and it's working fantastic!

+1, this is working, the issue may be closed imo. Also add this to some docs so it is google'd better)
@jsmith thank you anf Happy New Year)

[sanderschnydrig]

I installed @types/wicg-mediasession but its not doing anything to solve the error for me.

Edit: using // @ts-ignore which is working

[RedstoneWizard08]

I installed @types/wicg-mediasession but its not doing anything to solve the error for me.

Edit: using // @ts-ignore which is working

Try using:

navigator.mediaSession.metadata = new MediaMetadata({
    // ...
});

instead of:

navigator.mediaSession.metadata = {
    // ...
};

because I was also having trouble after installing this library and switching to that fixed it for me.

EDIT: Also make sure to add wicg-mediasession to the compilerOptions.types array in your tsconfig.json.

[sanderschnydrig]

@redstonewizard Thanks for your recommendation. My code was already instantiating the Object with new but I was missing the tsconfig.json entries. However its working now even without those changes in the typescript config, no more errors just like that. As far as I know we did not change the typescript version since then (using ~4.6.4), same one that was producing the error before, if I'm not mistaken.

[RedstoneWizard08]

Okay.

[jakebailey]

Just looking at old issues; this was fixed in #44684.