Improve the Photo Manager using new features from openfoodfacts-dart

[teolemon]

What

• Support for image selection/unselection/cropping/rotation recently landed in openfoodfacts-dart, besides, user need to be able to refresh images.

Tasks

Beta Give feedback

We're having trouble rendering your tasklist, it's most likely has one of the following formatting errors:

• indented tasks (i.e. nested tasklist; support for this is coming!)
• an empty task (i.e. - [ ] on a line by itself)
• any empty new lines (before/after the tasklist or in between tasks)
• duplicate issue/pr links
• a draft task exceeds 512 characters

Please check the tasklists documentation for more information. 🔗 Feedback Discussion

Thank you for participating in the Private Beta ❤️

1. Add a language switcher to make it possible to see photos selected in other languages in the expanded view accessible from the carousel #2428
   image upload images multilingual products 🖼️ Photos - Photo manager +4
   
2. Add new photo upload and selection in the Photo manager (expanded view accessible from the photo carousel) (HIGH priority)
3. Add Server-side image cropping and rotation in the Photo manager (expanded view accessible from the photo carousel) #2484
   🖼️ Photos - Cropping 🖼️ Photos - Photo manager +2
   
4. Add Server-side image cropping and rotation in the Photo manager (expanded view accessible from the photo carousel) #2484
   🖼️ Photos - Cropping 🖼️ Photos - Photo manager +2
   
5. Add image rotation (lower priority, server side, same view as cropping) in the expanded view accessible from the carousel #2429
   P2 🖼️ Photos - Cropping +2
6. Add image selection from server in the Photo Manager (the expanded view accessible from the carousel) #2424
   P2 image upload images 🖼️ Photos - Photo manager +4
   
7. Add image unselect in the expanded view accessible from the carousel #2427
   P2 image carousel image upload images 🖼️ Photos - Photo manager +5
   
8. Leverage support for the Image refresh API to make a custom Call To Action to take a new photo #2426
   image upload 🎯 P1 🖼️ Photos - Photo manager +3
9. For a reference implementation of that mockup (which is out of the scope for this), you can refer to https://play.google.com/store/apps/details?id=org.openbeautyfacts.scanner (try clicking a photo on the product page to zoom it)

Part of

• Contribute (Tracker) #503

Code pointers

• https://www.github.com/openfoodfacts/openfoodfacts-dart/commit/1c82e33a313afd3c4908cf95f96d58f7f738ca1e
• https://www.github.com/openfoodfacts/openfoodfacts-dart/commit/c69f3f639f47291a007185c59c89b652bbf52098

Mockups

[teolemon]

I created a new mockup with dual text/icon buttons @monsieurtanuki @M123-dev

[jasmeet0817]

These <#642 (comment)> were the mocks previously discussed for adding new image, and carousel navigation. My 2 cents: I do like Stephane's proposal of a hovering button for adding new images, it goes well with Material app design. And cropping/rotation indeed sound lower priority, I would say we should ignore them completely for now. And when we are ready to implement them, we can rework the design from there, another idea would be to have an edit button where you can perform such modifications.

…

On Tue, 4 Jan 2022 at 13:37, Pierre Slamich ***@***.***> wrote: I created a new mockup with dual text/icon buttons @monsieurtanuki <https://github.com/monsieurtanuki> @M123-dev <https://github.com/M123-dev> — Reply to this email directly, view it on GitHub <#766 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABZRHYSB4USVSEIGI2WO7IDUULSZ7ANCNFSM5K2E4MBQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- Cheers, Jasmeet Singh

[teolemon]

• @jasmeet0817 do you have a link to @stephanegigandet 's proposal ?
• Otherwise, I just opened Allow photo refresh from the carousel #853

[jasmeet0817]

• Improvements to Product Image carousel  #642 (comment)

[teolemon]

[teolemon]

[teolemon]

screen-20230122-214003.mp4

[teolemon]

@monsieurtanuki I added a video for future reference

[monsieurtanuki]

@teolemon For future reference this is what we currently have in Smoothie:

screen 1: selected pictures	screen 2: display	screen 3: edit

In your video I can see (on the equivalent of our "screen 2"):

• type selector - we have it but differently
• language selector - we DON'T have it yet
• unselect image - we DON'T have it yet
• take a new photo - we have it but differently
• crop and rotate - we have it but differently
• select an existing image - we DON'T have it yet

Your latest concern is about "select an existing image":

• obviously that should be on our "screen 2"
• that would download the "images" from the server (cache?) and display them in a grid
• when you click on an image in the grid, you land on the crop page
• therefore we should also move the "take new photo" from our screen 3 to screen 2, for consistency (and we would get closer to your legacy interface)

In the end it would look like that (no type and language selector yet):

new screen 2	new screen 3

[teolemon]

This is fixed