MediaSession API (#15059)

* MediaSession API

* Make window and navigator properties optional

wicg-mediasession/index.d.ts

@@ -0,0 +1,58 @@
+// Type definitions for Media Session API 1.0
+// Project: https://wicg.github.io/mediasession/
+// Definitions by: Julien CROUZET <https://github.com/jucrouzet>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+interface Navigator {
+  readonly mediaSession?: MediaSession;
+}
+
+interface Window {
+  MediaSession?: MediaSession;
+}
+
+type MediaSessionPlaybackState = 'none' | 'paused' | 'playing';
+
+type MediaSessionAction = 'play' | 'pause' | 'seekbackward' | 'seekforward' | 'previoustrack' | 'nexttrack';
+
+interface MediaSession {
+  // Current media session playback state.
+  playbackState: MediaSessionPlaybackState;
+  // Current media session meta data.
+  metadata?: MediaMetadata;
+
+  // Set/Unset actions handlers.
+  setActionHandler(action: MediaSessionAction, listener?: () => void): void;
+}
+
+interface MediaImage {
+  // URL from which the user agent can fetch the image’s data.
+  src: string;
+  // Specify the MediaImage object’s sizes. It follows the spec of sizes attribute in HTML link element.
+  sizes?: string;
+  // A hint as to the media type of the image.
+  type?: string;
+}
+
+interface MediaMetadataInit {
+  // Media's title.
+  title?: string;
+  // Media's artist.
+  artist?: string;
+  // Media's album.
+  album?: string;
+  // Media's artwork.
+  artwork?: MediaImage[];
+}
+
+declare class MediaMetadata {
+  constructor(init?: MediaMetadataInit);
+  // Media's title.
+  title: string;
+  // Media's artist.
+  artist: string;
+  // Media's album.
+  album: string;
+  // Media's artwork.
+  artwork: MediaImage[];
+}

wicg-mediasession/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "wicg-mediasession-tests.ts"
+    ]
+}

wicg-mediasession/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../tslint.json" }

wicg-mediasession/wicg-mediasession-tests.ts

@@ -0,0 +1,36 @@
+
+const tracks: string[] = ['chapter1.mp3', 'chapter2.mp3', 'chapter3.mp3'];
+let trackId = 0;
+
+const audio: HTMLAudioElement = document.createElement('audio');
+audio.src = tracks[trackId];
+
+function updatePlayingMedia(): void {
+  audio.src = tracks[trackId];
+}
+
+if ('mediaSession' in navigator && navigator.mediaSession) {
+  navigator.mediaSession.setActionHandler('previoustrack', (): void => {
+    trackId = (trackId + tracks.length - 1) % tracks.length;
+    updatePlayingMedia();
+  });
+
+  navigator.mediaSession.setActionHandler('nexttrack', (): void => {
+    trackId = (trackId + 1) % tracks.length;
+    updatePlayingMedia();
+  });
+
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: 'Episode Title',
+    artist: 'Podcast Host',
+    album: 'Podcast Title',
+    artwork: [
+      {src: 'podcast.jpg', sizes: '128x128', type: 'image/jpeg'},
+      {src: 'podcast_hd.jpg', sizes: '256x256'},
+      {src: 'podcast_xhd.jpg', sizes: '1024x1024', type: 'image/jpeg'},
+      {src: 'podcast.png', sizes: '128x128', type: 'image/png'},
+      {src: 'podcast_hd.png', sizes: '256x256', type: 'image/png'},
+      {src: 'podcast.ico', sizes: '128x128 256x256', type: 'image/x-icon'}
+    ]
+  });
+}