Quick Access to Photos
- Matt Birtch
Important Links
MM-21167: Quick access to camera roll for attaching photosClosed |
NOTE: there are a few different flows to view in the left sidebar |
Contents
Background
This feature was originally part of a November 2019 Hackathon project that Claude Wilde started for iOS only. See the demo video here. Since this, much discussion has taken place and it has been determined that we could leverage the keyboard space and display recent photos for improved toggling between typing and adding images. A React Native component exists to enable this approach.
Use Cases
As a user, I need to give the app permission to access my phone’s photos
So that recent photos are easily accessible from within the app
As a user, I want easy access to my recent photos
So I can quickly select a recent image from my phone’s photo library with fewer taps and add it to a post
So I can quickly post multiple recent images from my phone’s photo library in one post
As a user, I need to give the app permission to access my phone’s camera
So I can capture and post a new photo
As a user, I need to give the app permission to access my phone’s camera and microphone
So I can capture and post a new video
As a user, I need to access my camera
So I can capture and post a new photo
So I can capture and post a new video
As a user, I need to access all my photos on my phone
So I can post photos that aren’t as recent
As a user, if I have added the maximum number of attachments, I need feedback
So I understand that I can’t add any more beyond the max limit
As a user, I need to continue writing the text in my post post
As a user, I need to cancel selecting recent images
Corner Use Cases
As a user, if I have denied access to my phone’s photos, I need a way to allow it again so I can see recent photos in the photo tray
As a user, if I don’t have any photos in my photo library, I need feedback and a way to add photos
As a user, if I have denied access to my phone’s camera, I need a way to allow it again
As a user, if I lose connectivity while posting images, I’d like my draft to be saved so I don’t have to start over
As a user, if I switch to any other screen in the app while in the middle of creating a post with image(s) attached, I want that state to be saved when I return
As a user, if I switch to another app while in the middle of creating a post with image(s) attached, I want that state to be saved when I return
As a user, I want to return to the view I left when I had to change my OS photo or camera access settings
As a user, if I switch to my photos app and delete photos, and switch back to Mattermost, I should see the recent photos grid in synch with my photos
Competitive Research
Screenshots and research captured for Android and iOS competitor apps. Research in Figma
Proposed Requirements
The “Photo Tray”
When tapping the ‘image’ icon in the post draft, the quick access photo tray opens in the keyboard space
Photo Tray Functionality
Utilize the keyboard space to display a grid of recent photos
Limit of 50 recent photos or videos displayed in the photo tray
Videos will need to be visually indicated somehow
Ability to select 1-10 photos from recent photos displayed and add it to post draft
As soon as an image is tapped/selected from the photo tray:
Display selected photo thumbnail in post draft (existing behaviour)
Visually indicate which photo is selected within the photo tray with a checkmark
Removing images
As is the existing behavior with attachments or images, tapping the ‘x’ icon in the image thumbnail will remove the thumbnail from the message input and deselect from the photo tray.
Users can also deselect photo from within the photo tray and this will remove it from the message input as well
This would prevent users from adding the same image more than once, which goes against the current behavior, but is desirable to prevent duplicates.
Provide a way to view full photo library
A floating action button (FAB) appears as part of the photo tray in the bottom right position. Tapping this button launches the standard OS photos selector. Users can multi-select (up to the max remaining number of attachments)
Errors and Limits
Filesize Limit
If an image or video is larger than the filesize limit, show a temporary toast message, disable the image in the photo tray and don’t add the thumbnail to the message input.
Maximum number of attachments
If the max number of attachments has been reached (currently limited to 10 files maximum), all other images in the photo tray are greyed out.
Accessing Photo Library
In iOS, users must choose whether they want to grant access to all photos in their library or just selected photos. If access has not yet been granted, the alert below must be shown and users must go to their settings to enable it.
Empty States
Access to photos not allowed
If user hasn’t allowed access to photo library, provide a state that prompts user to allow access.
If it’s the first time the user has been prompted to allow access to their photos, we can prompt immediately with an OS allow dialog.
If user has denied access to photos, we can present an alternative state in the photo tray area with a friendlier message and a button to allow access
Once this button is tapped, user is presented with a modal directing to OS settings
Empty photo library
If the user has allowed access to their photo library, but their camera roll is completely empty and there are no recent photos, present an empty state with a prompt to capture a photo with their camera
Tapping this prompt will open the camera app
If a user hasn’t allowed access to their camera, prompt to allow access
Use existing behavior for this
Displaying the grid when there aren’t enough images to fill it
In the case where access has been granted to the photo library, but there aren’t enough photos to fill the grid, an ‘empty’ grid is displayed.
Returning back to the keyboard
If I tap the text in the message input while the photo tray is open, the keyboard should return immediately in place of the photo tray.
Platform specific designs
For full design details and nuances for other themes, Android and tablet layouts, view the Figma design file.