functionland/fx-fotos

"Fx Fotos" is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos. It is backend gnostic and connects to decentralized backends like "box", "Dfinity", "Filecoin" and "Crust".

Google Play: https://play.google.com/store/apps/details?id=land.fx.fotos

App Store: https://apps.apple.com/ca/app/fx-fotos/id1640008383

Latest 2 Updates

November-10-2022: Application was approved by App store.

October-26-2022: Application was approved by Google Play.

Discussions

This project is part of a bigger project to disrupt the subscription industry. Join the channel and group to participate in the discussion. https://t.me/functionland

BOX Photos development guide

Note: Project is still in alpha phase and not production ready. We aim to release beta version by end of August 2021.

Intro Blog

Project Description

Photos is a react-native(expo)+typescript application to replace Google Photos/Apple Photos, and give freedom in hosting your photos on any platform, either centralized servers like Amazon or Microsoft, or decentralized solutions such as Dfinity or IPFS-based "box". It is optimized for decentralized platforms, but is backend agnostic. Your can easily use it with the IPFS-based "box" or "Dfinity" to host your files and photos with the same experience you had using Google Photos, however, with full privacy.

Why?

Decentralized Backend(IPFS, Dfinity, Crust, Filecoin) + Photos = Awesome!

Google photos is a great service with great benefits however, there are major setbacks with it:

1- It is not free anymore

2- It does not respect our privacy

We developed this project with the smoothness and features of popular gallery apps in mind to enable anyone jump on and start using it right away. Furthermore, it can connect to "box", a decentralized node based on IPFS and Crust, or Dfinity instead of centralized cloud networks. We are also working on enabling it to connect to centralized cloud networks, however, with web3.0 privacy, do you still want to use web2.0? more information is available in the box repo.

demo

Checkout full demo video at: https://youtu.be/wDxaC1HF5PQ

Or checkout individual features below:

• Pinch/zoom to switch between modes:
• 
• Opening a single image in fullscreen mode:
• 
• Header animation(hide on scroll down and show on scroll up):
• 
• Highlights/Story:
• 
• Fast scroll/Thumb scroll feature:
• )
• Image Edit feature
• 
• Image select feature
• 

table of content

• Install npm, git and expo-cli
• Clone the project
• Install requirements
• Run
• Packages
• Pages structure
• Components structure
• Components description

Installing Pre-requisites

• NodeJS/NPM

This application needs NodeJs to run. You can download and install NodeJs from the below link on any platform if you do not have it already. Download NodeJS

you can also check if you already have NodeJs installed by running the following two commands in terminal window

node -v
npm -v

• Git: You can use git to easily download the files from github into your computer (or if you prefer you can download files manually from this github repository in step 1 of cloning the application) Download Git-Scm

you can also check whether you already have NodeJs installed by running the following command in terminal window

git --version

Now you need to install expo-cli. If you want to know more about expo check their website. Expo

npm install --global expo-cli

Optional: if you prefer yarn you can install yarn.

npm install --global yarn

Clone the project

You can clone the project by running the command below to your terminal:

for https cloning:

git clone https://github.com/functionland/photos.git

cd photos

EPERM issue

On Windows, you may get an EPERM error when running. This is a known bug and you may need to follow workaround 2 in this article: https://bitstopixels.blogspot.com/2017/04/react-native-windows-10-eperm-operation.html

Install requirements

You can install dependencies with yarn by running:

yarn

Run

Then you can start the debug server using the command below:

yarn run start

At last but not least, for installing the debug version and starting the development process on the emulator or a real device you should run commands below:

IOS

yarn run ios

Android

yarn run android

Packages

• We used expo Media Library for getting the data from user's phone.
• We used a modified version of expo-video-player to play videos. It is available in our repo.
• We used a modified version of react-native-stories-view for the story style view on top of gallery, which is available in our repo.
• We used RecyclerListView from FlipKart, as the scrollView for the photos.
• We used react-native-reanimated for animations.
• We used Recoil for state management.
• We used react-native-gesture-handler for gesture handling.
• We used @react-navigation/bottom-tabs and @react-navigation/native for navigation.

Pages structure

For now we have two pages in the app:

• The HomePage that is the main page for showing the media files.
• The PermissionError page that is the page we show when there is permission error from user's phone.
• We are working on creating the "Library" and "Search" pages.

Components structure

├── App.tsx
├── babel.config.js
├── components
│   ├── AllPhotos.tsx
│   ├── FloatingFilters.tsx
│   ├── Header.tsx
│   ├── Highlights.tsx
│   ├── Media.tsx
│   ├── PhotosChunk.tsx
│   ├── PhotosContainer.tsx
│   ├── PinchZoom.tsx
│   ├── RenderPhotos.tsx
│   ├── SingleMedia.tsx
│   ├── StoryHolder.tsx
│   └── ThumbScroll.tsx
├── index.js

├── metro.config.js
├── navigation
│   └── AppNavigation.tsx
├── package.json
├── package-lock.json
├── pages
│   ├── HomePage.tsx
│   └── PermissionError.tsx
├── store
│   ├── actions.ts
│   ├── reducer.ts
│   └── store.ts
├── __tests__
│   └── App-test.tsx
├── tsconfig.json
├── types
│   └── interfaces.ts
└── utils
    ├── APICalls.ts
    ├── constants.ts
    ├── functions.ts
    ├── LayoutUtil.ts
    └── permissions.ts

Components description

The components are as what follows:

PhotosContainer

Purpose: this component is responsible for getting the photos and videos from storage and feed the AllPhotos component with storage photos.

• this component include the PinchZoom component and AllPhotos component

PinchZoom

Purpose: This component is responsible for all the animations for switching between different column modes, and actions we want to do when animations done.

• This component is wrapped around the AllPhotos component.
• The component uses GestureHandlers to respond to pinch and pan gestures

AllPhotos

Purpose: This component is wrapped the three RenderPhotos components and is responsible for lazy load the photos and feed the render photos with proper data.

• The three different kind of RenderPhotos is the month view with 4 columns of photos, the day view with 3 columns of photos and the day view with 2 columns of photos.

RenderPhotos

Purpose: This component includes with the number of PhotosChunk components and one FlatList that wrapped all the PhotosChunk components that we want to show the user. It is responsible to show the Photos(main) page of hte application.

• This component also renders date headers.
• It uses RecyclerListView to show the scrollable grid of photos

PhotosChunk:

Purpose: This component is responsible to show each block/Thumbnails in the gallery.

FloatingFilters:

Purpose: This component is responsible to show and position the "year" titles when fingers are placed on thumb scroll.

Header:

Purpose: This component is responsible to show the top header of the application. It is used in the top Navigationbar.

Highlights:

Purpose: This component is responsible to show the story thumbnails and text on top of Photos page.

Media:

Purpose: This component is responsible to display photo or video when opened in full page. It is the component used in SingleMedia.

SingleMedia:

Purpose: This component is responsible to show modal with the content when image or video is opened in full page. It uses Media to show the photo or video.

StoryHolder:

Purpose: This component is responsible to show each story/highlight in full screen when thumbnail is clicked on.

ThumbScroll:

Purpose: This component is responsible to show the thumb scroll icon in the right of screen when scrolling.

Components diagram

graph TD;
App --> AppNavigation --> PermissionError
AppNavigation --> Header
AppNavigation --> HomePage --> PhotosContainer --> AllPhotos --> RenderPhotos
PhotosContainer --> PinchZoom
AllPhotos --> StoryHolder --> StoryContainer --> StoryComponent
AllPhotos --> SingleMedia --> Media
RenderPhotos --> PhotosChunk & ThumbScroll & Highlights & FloatingFilters

How to contribute?

Just pick any issue from the issues tab or create your own and do a pull request! Please use yarn instead of npm if you are a contributor to be aligned with other contributors. You can ask questions and get in touch with the rest of contributors and community in the Discussion here We appreciate all the help you can do, even if it is renaming one variable to a better name.

Road map

• Pinch/zoom to switch between 3 modes
• Open each image/video in a Single image modal and scroll between images
• Show highlights
• Fast scroll/thumb scroll
• Select and unselect each image to delete/edit/share
• Connect with Dfinity
• Auto-upload photos to backend
• Automatic Migration tool from Google Photos
• Connect with BOX (as a self-owned IPFS solution)
• Connect with Filecoin
• Connect with AWS
• Search page to search by date/tags
• Library page to show images by folder/Album
• AI features to do on-device analysis for face recognition/object recognition

Related Publications and News

• https://filecoin.io/blog/posts/249k-for-17-projects-from-dorahacks-filecoin-grant-hackathon/
• https://dev.to/fx/google-photos-open-source-alternative-with-react-native-80c
• https://hackernoon.com/were-building-an-open-source-google-photos-alternative-with-react-native-zw4537pa
• https://crustnetwork.medium.com/crust-network-and-functionland-partnering-up-on-web3-developer-tools-309e41074fc5

fx-fotos's Issues

Error when scrolling images fast to the right or left in single image mode

Code clean-up

Many un-used variable and states are created for thumbScroll between ThumbScroll and RenderPhotos and during development of other modules. All files need to be checked for unused variables and imports and cleaned.

Hiding header is not optimized

Hiding header is based on a listener to the scrollY position and it is not optimized. Listener affects animations smoothness.
It needs a better logic to hide the header. Affected files are:

• ./components/AllPhotos
• ./components/PhotoContainer
• ./App
• ./navigation/AppNavigation

image selection / actions

• long press to show additional batch actions
• only action for now is delete

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

publish onto google play app store

nice to have would also be iOS

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Error when rotating image in image edit

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

JS fps drop and stutters during image load

When images are being loaded in chunk, between each load a lot of drop happens in JS as well as stutters. This causes the app to become unresponsive during load. one side-effect is if user scrolls during these times, it jumps around since engine cannot properly determine the last position as it was busy.

Improve the photos list animations (600$ Bounty) (aka gallery pinch/zoom)

What issue do we need to solve?

We are going to improve the photos list animations when pinching and zooming (in/out) the list to change the number of columns (View Type).
Since the Photos App is going to load a large list of images we need to use a RecyclerView to manage a large list, for this purpose we used the RecyclerListView open-source project to handle this issue.

It works as expected for a large list, but there are some challenges to handling the image's animations when we need to change the view type.

Actual Behavior

The animation starts after a while client pinch the view and the whole of the animation will be done.

photos.mp4

Expected Behavior?

The client has to be able to control the animation in the middle of the way.

20220116_135942_edited.mov

Steps to Reproduce

1. Clone the Master branch
2. Build the project
3. Pinch the list

Platform:

Where is this issue occurring?

• iOS
• Android

Tasks

• The image flickering issue on changing the view is fixed.
• There is a bug when the user scroll to the end of list and try to change the gridview columns

In single image mode, the scroll does not disables when user grabs and pans around the image

When user pans the single image around(translationY >), the scroll in scrollView is still enabled and if user moves it to right or left it causes issues in adjustment when we re-open the image.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

single image opening

Fast tapping on an image should bring up the image details view.

At a minimum I should be able to swipe left/right to browser and tap the back button to go back.

A nice to have is:

• pinch to zoom in/out

• pinch zoom all the way out and go back to list with hero animation

Scroll position jumps if momentum is interrupted

If scroll momentum is interrupted by re-touching the screen before momentum stops, since it does not get the chance to update last offset state, it jumps a bit. We need to think of a better logic to update the position of lastOffset, which is required to keep the different column modes synchronized.
Affected files are:

• ./components/RenderPhotos

landscape layout is broken

a simple fix for this now could be to disable landscape?

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

double check we will not require approvals for open beta testing

fps drop

When animations are repeated inside image cell - try using animated v1

Everything else - try using reanimated v2

Zoom in/out and smart zoom on double tap when in single image mode

When a single image is opened in the modal the following should be do-able:
1- on double tap, image should be zoomed in with the center of the location user tapped
2- user should be able to zoom in and move around on the zoomed image
Affected files:

• ./components/RenderPhoto
• ./components/PhotoChunk

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Android API_30 storage request permission

In android 11(API 30) request storage permission does not work!

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Load images chunk by chunk

Right now all images(on-device) are loaded altogether. This causes slowness when opening the app, and also images does not refresh when an image is deleted, since they are loaded once on load. We need to do two things:
1- load images in chunks and append
2- useEffect to refresh the image list if images are updated

single image browsing

• intialize recyclelistview

Search page

Create a search page

publish onto iOS

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Adding a settings menu

Simply adding a settings screen can open new horizons for controlling backend, logins and more features. I am not sure whether it is best to have the settings as a drawer or a full screen yet. I believe we need to check how Google and Apple photos done this

pinch/zoom in gallery is sticking

On certain devices, it seems that it is very hard to complete the pinch/zoom to change the number of columns in the gallery.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Pre-commit hook for linting, type check & prettier code format

I was browsing through the project and found out there are not pre-commit hooks for said stuff. I'll be happy to create a PR about it if it's not a problem.

hero animation out from image details to image list

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

single image zoom in/out

Albums page

Create an albums page

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

'under construction' text in other toolbar tabs

Dark Mode!

Would be cool to have Dark Mode integrated earlier, saves us time if we implement it incrementally.

display full history of photos

I can only go back to October 2021 whereas I have photos on my phone from 2017.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

PhotosChunk reanimated use hooks causing slowness when scrolling

PhotosChunk use hooks for reanimated is causing frame drops when scrolling

app icon

• new app icon coming from Sheida
• change name to 'fotos'

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

4-column mode does not show the year header between 2021 and 2020

in 4 column mode(month mode), it does not show any header between 2021 and 2020. need to be re-tested and fixed.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

When the first media is a video it crashes

If the fist media in gallery is a video it crashes with the below error:

TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

This error is located at:
    in WithDefaultProps(VideoPlayer) (at Media.tsx:153)

initial load time

It currently takes ~10 sec. on a Pixel 2 for my Photos to load when I initially load the app. It would be nice if it were more instantaneous.

When single photo is opened, it does not start or end to exact position of original image

Animating scale and transition still is not working accurately

BigInt is not defined and other errors for Dfinity libraries

We are adding Dfinity support and right now their package does not support react native and you might get any of the errors below:
1- BigInt is not defined.
2- FileReader.readAsArrayBuffer is not implemented.
3- Buffer is not defined
4- window.open is undefined or other windows related errors
5- localStorage is undefined
6- readAsArrayBuffer is not a function
7- Code gets unresponsive and seems stuck

So we did custom polyfill to their libraries. To make it work, you need to replace the following files after you run yarn (and you need to do this if you run yarn again, not optimized but working to bake it into code):
(temp/ files mentioned are here: https://github.com/functionland/photos/tree/main/temp)

1- copy and replace "temp/transforms.js" to "...\node_modules@dfinity\agent\lib\cjs\agent\http\transforms.js"
2- copy and replace "temp/index.js" to "...\node_modules@dfinity\authentication\lib\cjs\index.js"
3- copy and replace "temp/index.d.ts" to "...\node_modules@dfinity\auth-client\lib\cjs\index.d.ts"
4- copy and replace "temp/index-2/index.js" to "...\node_modules@dfinity\auth-client\lib\cjs\index.js"
5- copy and replace "temp/index-3/index.js" to "...\node_modules@dfinity\principal\lib\cjs\index.js"
6- Install 'react-native-polyfill-globals'
7- copy and replace "temp/leb128.js" to "...\node_modules@dfinity\candid\lib\cjs\utils\leb128.js"

We need to bake these polyfills in the original code. Ideas are much appreciated.

story highlights

A horizontal list thumbnails/titles at the top of the 'photos' section for special events/timelines.
Tapping on the thumbnail should bring up the story.
The story is a slideshow that cycles through the list of photos.

• should be able to steal code from older version

• get details from the DB

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

remove profile icon

or display a message saying 'under construction'

image loading indicator

A nice animation / loading indicator would help with look and feel since (especially if the loading time can not be improved)

Module renaming

RenderPhoto and PhotoContainer and AllPhotos modules do not have clear names. Naming should be clearly reflective of what they do, links and references in other files should be changed and then the READ.ME should be updated.
Affected files are:

• ./components/RenderPhoto
• ./components/PhotoContainer
• • ./components/AllPhotos

ThumbScroll hide is not always correct

ThumbScroll does not always hide when released. Should hide (with a delay) as soon as scroll stops to touch removed, but this is not always the case.
Affected files are:

• ./components/RenderPhotos

thumb scroll (aka scrobbler)

This is essentially a large scroll icon for jumping around quickly in the timeline.

When I start scrolling I should see a list of years.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

image cacheing (local database)

When user is opening up the app for the first time we are reading the data (images) from the device storage. We have to cache the images for the second and other times that he/she is visiting we shouldn't load the images every time

• modified realm db setting

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Moving state management to recoil

We need to move state management to recoil. It probably resolves issue #34 , but regardless, it is a good switch.

improve photo zoom

• when you release your finger the scale should be preserved
• you should also be able to scroll around the picture

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Animated video thumbnails

Add feature to animate video thumbnails like google photos.

• The first video in each page shown should be auto-played silently and after finish next one should start.
• If user opens a video in full screen, the next video should paly after closing the modal.

Affected files are:

• ./components/PhotosChunk

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

AWS backend implementation

Had a cool chat with @Roman-Uholnikov about an AWS backend implementation.

Below is my general suggestion on the structure for adding multiple backends, @ehsan6sha please chime in and advice if any of it doesn't make sense:

1. Having a top level folder, photos/backend
2. A seperate folder for each backend stack: photos/backend/icp, photos/backend/aws for the time being
3. A top level TypeScript interface with function signatures for all needed backend funnctionalities, all stacks implement this interface. Goes in: photos/backend/apis.ts
4. UI in settings page so that the user can choose between available backend stacks, I believe @emadbaqeri is working on an initial settings UI as part of #33
5. Each implementation exports an object implementing the interface as its default root export, so when the backend is changed in settings we can do something like:

async function getBackend(selectedBackendKey: string) {
    const { default: { uploadPicture, downloadPicture, ... } } = await import(`../backend/${selectedBackendKey}`)
    return {
        // demo only, actual signatures in "Backend" interface at ../backend/apis.ts
        uploadPicture,
        downloadPicture,
        ...
    };

And then the UI will use APIs that are imported in the above line from ./backend/apis.ts

What do you guys think?

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

In single image scroll, zoom only works on first opened image

If we scroll to next or prev images when we open a single image, zooming(pinching) hides the images an we can only use zoom for the image that was opened first. This is due to a condition on active index, without updating it after scrolling.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

image edit

TBD - what editing actions should be completed?

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

When scrolling single image very fast it closes on Android

On Android, when you open a single image and start scrolling very fast to next images, it crashes at some point. Cause needs to be investigated and resolved.
Affected files are:

• ./components/SingleMedia