Announcements

Help Wizard

Step 1

NEXT STEP

[ANGULAR][iFrameApi] Stuck in preview mode after authenticating

[ANGULAR][iFrameApi] Stuck in preview mode after authenticating

UPDATE: I guess auth has been working fine this whole time, its just the issue of the iFrame going into preview mode whenever I display the webpage in a mobile format using Chrome Inspector.

 

Hi to you,

I'm trying to integrate an iFrame into my web app, and have successfully managed to get the user's access_token in the authentication stages of the project. However, when it comes to the iFrame API, I'm still stuck in the preview mode, which is puzzling because I am logged into a premium account on spotify.com/desktop app, and have authenticated using that said account. 

 

1. Does the iFrame API non preview mode rely on the authentication / user access_token? Or am i mistaken..?

2. Is there any way to rectify this? I was happily testing in non-preview mode until about a couple weeks ago and am not sure why..

 

Appreciate all the help I can get. This below is a snippet of my code that creates the iFrame.

 

 

 

 

 

 

 

 

createIFrame() {
    console.log(this.trackList[this.trackIndex]);
    const iFrameScript = document.createElement('script');
    iFrameScript.src='https://open.spotify.com/embed-podcast/iframe-api/v1';
    iFrameScript.addEventListener('load', (e) => {
      console.log(e);
    });
    document.head.appendChild(iFrameScript);
    document.head.appendChild(iFrameScript);
    // @ts-ignore
    window.onSpotifyIframeApiReady = (IFrameAPI) => {
      const element = document.getElementById('embed-iframe');
      const options = {
        uri: `spotify:track:${this.trackList[this.trackIndex]}`,
        height: 100,
        width: '90%',
      };
      // @ts-ignore
      const callback = (EmbedController) => {};
      IFrameAPI.createController(element, options, callback);
    };
  }

 

 

 

 

 

 

UPDATE: After some testing, I found out that using the mobile dimensions in Chrome Inspector can also contribute to the change of preview/full mode. I was developing my app to be web based in mobile dimensions, and was previously testing it in fullscreen mode for functionality. When it came round to styling the front-end, I switched to mobile dimensions, which was when the problems of preview mode started happenning. Weird. 

 

 

ezgif-5-5f946dcd68 (1).gif
Screenshot 2023-05-23 at 11.06.09 PM.png
Screenshot 2023-05-23 at 11.07.28 PM.png
Reply
2 Replies

Hey @placcidfenis,

 

Thank you for bringing this up to the Community.

We appreciate all the info you've included in your post. However, we can confirm this is an expected behavior if you're using a mobile device. Keep in mind that full playback is currently available just on the desktop web when authenticated (ideally using Google Chrome). 

Hope this clarifies things a bit. If anything else comes up, the Community will be here for you.

OscarDCModerator
Help others find this answer and click "Accept as Solution".
If you appreciate an answer, maybe give it a Like.
Are you new to the Community? Take a moment to introduce yourself!

Hi, when do you think it will be possible to have a Spotify embed player that does play more then 30sec so without preview mode on mobile and desktop safari?

Suggested posts