Add support for mobile devices

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
 

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)) ||

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;

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;