From 06c2fc78797d46bd2dc61b08a0fa5c48a9583d58 Mon Sep 17 00:00:00 2001
From: Gil Barbara <gilbarbara@gmail.com>
Date: Sat, 16 Oct 2021 02:22:34 -0300
Subject: [PATCH] Add support for mobile devices

---
 README.md            | 2 +-
 src/index.tsx        | 4 +++-
 src/types/spotify.ts | 1 +
 test/index.spec.tsx  | 3 +++
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 584e43e..6ece0af 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 View the [demo](https://react-spotify-web-playback.gilbarbara.dev/)
 
-Check the [supported browser](https://developer.spotify.com/documentation/web-playback-sdk/#supported-browsers) list. This library will try to use the user's devices to work with mobile and unsupported browsers.
+Check the [supported browser](https://developer.spotify.com/documentation/web-playback-sdk/#supported-browsers) list. This library will try to use the user's devices to work with unsupported browsers.
 
 ## Setup
 
diff --git a/src/index.tsx b/src/index.tsx
index a3c5b96..c14c76c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -680,7 +680,7 @@ class SpotifyWebPlayer extends React.PureComponent<Props, State> {
         track,
         volume: parseVolume(player.device.volume_percent),
       });
-    } catch (error) {
+    } catch (error: any) {
       const state = {
         isActive: false,
         isPlaying: false,
@@ -784,6 +784,8 @@ class SpotifyWebPlayer extends React.PureComponent<Props, State> {
       } else if (this.player) {
         const playerState = await this.player.getCurrentState();
 
+        this.player.activateElement();
+
         // eslint-disable-next-line unicorn/prefer-ternary
         if (
           (!playerState && !!(playOptions.context_uri || playOptions.uris)) ||
diff --git a/src/types/spotify.ts b/src/types/spotify.ts
index 1552fd0..24bd545 100644
--- a/src/types/spotify.ts
+++ b/src/types/spotify.ts
@@ -129,6 +129,7 @@ export interface WebPlaybackPlayer {
     name: string;
     volume: number;
   };
+  activateElement: () => void;
   addListener: {
     (event: WebPlaybackErrors, callback: (d: WebPlaybackError) => void): boolean;
     (event: WebPlaybackStates, callback: (d: WebPlaybackState | null) => void): boolean;
diff --git a/test/index.spec.tsx b/test/index.spec.tsx
index 1ee6099..6d42c95 100644
--- a/test/index.spec.tsx
+++ b/test/index.spec.tsx
@@ -29,6 +29,7 @@ const updatePlayer = async () => {
   await stateChangeFn(playerStateResponse);
 };
 
+const mockActivateElement = jest.fn();
 const mockCallback = jest.fn();
 const mockConnect = jest.fn();
 const mockDisconnect = jest.fn();
@@ -46,6 +47,7 @@ const token =
   'BQDoGCFtLXDAVgphhrRSPFHmhG9ZND3BLzSE5WVE-2qoe7_YZzRcVtZ6F7qEhzTih45GyxZLhp9b53A1YAPObAgV0MDvsbcQg-gZzlrIeQwwsWnz3uulVvPMhqssNP5HnE5SX0P0wTOOta1vneq2dL4Hvdko5WqvRivrEKWXCvJTPAFStfa5V5iLdCSglg';
 
 const setup = (props?: Record<string, any>): ReactWrapper<Props, State> => {
+  mockActivateElement.mockClear();
   mockAddListener.mockClear();
   mockCallback.mockClear();
   mockConnect.mockClear();
@@ -76,6 +78,7 @@ describe('SpotifyWebPlayer', () => {
   beforeAll(async () => {
     window.Spotify = {
       Player: function Player({ getOAuthToken }: Record<string, any>) {
+        this.activateElement = mockActivateElement;
         this.addListener = mockAddListener;
         this.connect = mockConnect;
         this.disconnect = mockDisconnect;