2

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)
    }
LadyHail
  • 91
  • 1
  • 5

0 Answers0