Infinite loading

[bkchr]

Hi,
I always wanted to create something similar, so first thanks for starting that project! For creating that project, I modified pig.js to support groups(my pr schlosser/pig.js#12). I would like to integrate that into your project, if you like the idea :) You can download my branch and look into the example.html.

[hooram]

Hey,

This looks really cool! I think pig.js and your pull request seem to do exactly what I had in mind. But it's not immediately obvious to me at the moment how to integrate it into this project using react+redux. This is my first frontend project, and I am learning as I go.

Anyway, as a first step, I think it would be beneficial to try this out without worrying too much about integrating it into this frontend code, but to make it work with the backend. The API calls you could make are

1. /api/photos/
   • returns a flat list of all the photo objects ordered by date
2. /api/albums/date/
   • returns a list of date albums (photos grouped by dates)

These calls take a long time (~2 seconds for 1000 photos on a 12inch macbook) at the moment without any db optimization using sqlite. The maximum number of elements in the list they return (in the first case, photos, and in the second case, dates) are determined by the page_size GET parameter, which is set to 1000 by default in the backend.

For the frontend using redux, we can put all the photo objects (with thumbnail/fullsize image size,url and whatnot) into the redux store once on initial load of the main page, or when the user visits the 'group photos by date view' we're talking about here. This will make it unnecessary to call the backend for the entire list of photos every time the user visits the page as long as they have been loaded once, unless the user wants to refresh the list (to view newly added photos or something).

I was also thinking about using the pagination feature backed into django rest framework model view set, and load more photos into the frontend redux store as the user scrolls down, but I think this sort of defeats the purpose of pig.js.

Another feature I had in mind related to this is the 'hoverable date scroll bar'. Google Photos has it, and it allows users to hover the mouse over the scroll bar and click to see photos from a desired date range. I am not sure how this could work with pagination. I've been thinking about how to implement this somewhat, and maybe you'd like to give it some thoughts as well.

In retrospect I think I should've tackled this problem first (infinite scrolling/dynamic loading), so that all other album views (events, people,custom,dates) can use the same view, only with a filter on the whole photo list for the album the user is viewing at a given moment.

This got way longer than I had anticipated, and yes I would love to see this integrated into this project!

[bkchr]

I also don't have any idea how to integrate that into your project. I'm also not a frontend specialist, I'm more the backend guy ;) But I will give my best and see how to integrate pig.js into your project. We should optimize the backend, when the frontend works ;) I always wanted to write such a backend in rust, but as you started with python, I will help you with the python backend.

[hooram]

Sounds great. I can't wait!

[bkchr]

Hi, I finally got time to look into your code, but the basic site does not work for me. For every request the frontend is doing I get the following error:
:1 XMLHttpRequest cannot load http://localhost:8000/api/albums/date/list/. Response for preflight is invalid (redirect)

I already tried several tricks, but it still does not work...

[hooram]

Hmm, that's something I haven't seen before. Which commit are you on? What does the backend say in response to it? I've made some changes to to the backend that might not work with older commits of the front end.

As for the infinite scrolling feature, I went ahead and implemented it somewhat using react-lazyload. It only works with square thumbnails, and I managed to display them grouped by days. With about 10000 photos, the page seems to work reasonably responsive.

[bkchr]

First, cool for doing it already! :)

I'm on frontend and backend on the last commit. Doing the request with curl by hand works... Which browser do you use?
The weird is, the backend does not say anything to the request from the frontend.

[hooram]

Yeah I'm happy it's making a little progress :) It needs to be made it so that you can click on the thumbnail to see the fullsize image.

It's working for me on Chrome, Firefox, and Safari. I'm thinking it has something to do with CORS. If I could replicate the problem I would look into it.

[bkchr]

Yeah it is probably Cors. I will find a solution, somehow ;)

[bkchr]

That is the solution! :) adamchainz/django-cors-headers#241

[hooram]

great, so it works if you change the backend address to something other than localhost or 127.0.0?

thanks :)

[hooram]

Gonna close this issue, because dynamic/infinite loading works now (albeit not as pretty as it could be). Feel free to reopen if you want to have more discussion on this matter :)