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.