I'm developing client-side React app. The application should display gallery of photos from Google Photos. I'm using Firebase to store a short url to album (f.e. https://photos.app.goo.gl/[ALBUM_ID] and an album's title. Then I request the url and extract images by regex. On dekstop version everything works. When I run it on mobile I can't get any photos. If I enter directly the url to album in the mobile browser, Google Photos app is opening. If on mobile device I switch to "Desktop version" it works fine. Is there any way to override this behaviour?
I tried to set content width to 1024. It doesn't help.
<meta name="viewport" content="width=1024" />
class Album extends Component {
state = {
images: null,
fullscreen: false,
currentIndex: 0,
loading: false
}
async componentDidMount() {
await this.setImages();
}
async setImages() {
if (!this.currentAlbumId || this.currentAlbumId !== this.props.match.params.id) {
this.currentAlbumId = this.props.match.params.id;
if (!this.state.loading) {
this.setState({ loading: true });
}
const album = await this.getAlbum(this.props.match.params.id);
const links = this.extractPhotos(album);
if (links && links.length > 0) {
this.setState({
images: links.map((url) => ({
src: `${url}=w1024`,
width: 16,
height: 9
})),
})
}
this.setState({ loading: false });
}
}
async getAlbum(id) {
// https://google-photos-album-demo.glitch.me/{id}
const response = await Axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://photos.app.goo.gl/${id}`);
return response.data;
}
extractPhotos(content) {
const regex = /\["(https:\/\/lh3\.googleusercontent\.com\/[a-zA-Z0-9\-_]*)"/g;
const links = new Set()
let match
while (match = regex.exec(content)) {
links.add(match[1])
}
return Array.from(links)
}