chore: @xram review changes

Author: streamich

README.md

@@ -36,7 +36,7 @@ const MyComponent = mock();
      - [`invert()`](./docs/invert.md)
   - Sensors
      - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
-     - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
+     - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
      - [`<NetworkSensor>`](./docs/NetworkSensor.md) and [`withNetwork()`](./docs/NetworkSensor.md#withnetwork)
      - [`<LightSensor>`](./docs/LightSensor.md)

docs/BatterySensor.md

@@ -52,7 +52,7 @@ const MyCompWithBattery = withBattery(MyComp, null);
 
 ## `@withBattery`
 
-Statefull component class decorator that injects `battery` prop into your component.
+Stateful component class decorator that injects `battery` prop into your component.
 
 ```js
 import {withBattery} from 'libreact/lib/BatterySensor';

docs/MediaDeviceSensor.md

@@ -27,7 +27,7 @@ const MyCompDevices = withMediaDevices(MyComp);
 
 ## `@withMediaDevices`
 
-Statefull component class decorator that injects `devices` prop into your component.
+Stateful component class decorator that injects `devices` prop into your component.
 
 ```js
 import {withMediaDevices} from 'libreact/lib/MediaDeviceSensor';

docs/MediaSensor.md

@@ -26,7 +26,7 @@ const MyCompWithSize = withMedia(MyComp, 'isBigScreen', '(min-width: 480px)');
 
 ## `@withMedia`
 
-Statefull component class decorator that injects a boolean prop into your component that specifies if media query matches.
+Stateful component class decorator that injects a boolean prop into your component that specifies if media query matches.
 
 ```js
 import {withMedia} from 'libreact/lib/MediaSensor';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreact",
-  "version": "0.0.0-development",
+  "version": "0.4.0",
   "description": "React standard library",
   "main": "lib/index.js",
   "keywords": [

src/Media/__tests__/index.test.ts

@@ -0,0 +1,88 @@
+import {Media} from '..';
+
+const createMedia = () => new Media<any, any, any>({}, {});
+
+describe('<Media>', () => {
+  describe('play lock', () => {
+    it('not locked by default', () => {
+      const media = createMedia();
+
+      expect(media.lockPlay).toBe(false);
+    });
+
+    it('calls DOM element play', () => {
+      const media = createMedia();
+      media.el = {
+        play: jest.fn()
+      } as any;
+
+      media.play();
+
+      expect(media.el.play).toHaveBeenCalledTimes(1);
+    });
+
+    it('locks play() on call', () => {
+      const media = createMedia();
+      const play = jest.fn();
+      const pause = jest.fn();
+
+      play.mockImplementation(() => Promise.resolve(null));
+
+      media.el = {
+        play,
+        pause
+      } as any;
+
+      expect(media.lockPlay).toBe(false);
+
+      media.play();
+
+      expect(media.lockPlay).toBe(true);
+
+      media.play();
+      media.play();
+
+      media.pause();
+      media.pause();
+
+      expect(play).toHaveBeenCalledTimes(1);
+      expect(pause).toHaveBeenCalledTimes(0);
+    });
+
+    it('unlocks play() when promise resolves', () => {
+      const media = createMedia();
+      const play = jest.fn();
+      const pause = jest.fn();
+
+      play.mockImplementation(() => Promise.resolve(null));
+
+      media.el = {
+        play,
+        pause
+      } as any;
+
+      media.play();
+      media.play();
+      media.pause();
+
+      expect(play).toHaveBeenCalledTimes(1);
+      expect(pause).toHaveBeenCalledTimes(0);
+
+      return new Promise((resolve, reject) => {
+        setImmediate(() => {
+          try {
+            media.pause();
+            media.play();
+
+            expect(play).toHaveBeenCalledTimes(2);
+            expect(pause).toHaveBeenCalledTimes(1);
+
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        });
+      });
+    });
+  });
+});

src/Media/index.ts

@@ -64,7 +64,7 @@ export interface IMediaState {
   volume?: number;
 }
 
-export abstract class Media<P extends IMediaProps<M>, S extends IMediaState, M extends IMedia> extends Component<P, S> implements IMedia {
+export class Media<P extends IMediaProps<M>, S extends IMediaState, M extends IMedia> extends Component<P, S> implements IMedia {
   tag: 'video' | 'audio' = 'video';
   props: P;
   el: HTMLMediaElement = null;
@@ -100,16 +100,31 @@ export abstract class Media<P extends IMediaProps<M>, S extends IMediaState, M e
     this.event('onUnmount')(this);
   }
 
+  // Some browsers return `Promise` on `.play()` and may throw errors
+  // if one tries to execute another `.play()` or `.pause()` while that
+  // promise is resolving. So we prevent that with this lock.
+  // See: https://bugs.chromium.org/p/chromium/issues/detail?id=593273
+  lockPlay: boolean = false;
+
   play = () => {
-    if (this.el) {
-      // TODO: In some browsers `.play()` method returns a `Promise`, where you
-      // TODO: cannot call `pause()` or `play()` again before that promise resolves.
+    if (this.el && !this.lockPlay) {
       const promise = this.el.play();
+      const isPromise = typeof promise === 'object';
+
+      if (isPromise) {
+        this.lockPlay = true;
+
+        const resetLock = () => {
+          this.lockPlay = false;
+        };
+
+        promise.then(resetLock, resetLock);
+      }
     }
   };
 
   pause = () => {
-    if (this.el) {
+    if (this.el && !this.lockPlay) {
       this.el.pause();
     }
   };