Render photos in a remote folder

lib/db/photo_db.dart

@@ -92,6 +92,17 @@ class PhotoDB {
     return _convertToPhotos(results);
   }
 
+  Future<List<Photo>> getAllPhotosInFolder(int folderId) async {
+    final db = await instance.database;
+    final results = await db.query(
+      table,
+      where: '$columnRemoteFolderId = ? AND $columnIsDeleted = 0',
+      whereArgs: [folderId],
+      orderBy: '$columnCreateTimestamp DESC',
+    );
+    return _convertToPhotos(results);
+  }
+
   Future<List<Photo>> getAllDeletedPhotos() async {
     final db = await instance.database;
     final results = await db.query(

lib/ui/remote_folder_gallery_widget.dart

@@ -5,6 +5,7 @@ import 'package:photos/db/folder_db.dart';
 import 'package:photos/db/photo_db.dart';
 import 'package:photos/models/folder.dart';
 import 'package:photos/ui/loading_widget.dart';
+import 'package:photos/ui/remote_folder_page.dart';
 import 'package:photos/ui/thumbnail_widget.dart';
 
 class RemoteFolderGalleryWidget extends StatefulWidget {
@@ -87,14 +88,14 @@ class _RemoteFolderGalleryWidgetState extends State<RemoteFolderGalleryWidget> {
         ],
       ),
       onTap: () {
-        // final page = DeviceFolderPage(folder);
-        // Navigator.of(context).push(
-        //   MaterialPageRoute(
-        //     builder: (BuildContext context) {
-        //       return page;
-        //     },
-        //   ),
-        // );
+        final page = RemoteFolderPage(folder);
+        Navigator.of(context).push(
+          MaterialPageRoute(
+            builder: (BuildContext context) {
+              return page;
+            },
+          ),
+        );
       },
     );
   }

lib/ui/remote_folder_page.dart

@@ -0,0 +1,78 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:photos/core/event_bus.dart';
+import 'package:photos/db/photo_db.dart';
+import 'package:photos/events/remote_sync_event.dart';
+import 'package:photos/models/folder.dart';
+import 'package:photos/models/photo.dart';
+import 'package:photos/ui/gallery.dart';
+import 'package:photos/ui/gallery_app_bar_widget.dart';
+import 'package:logging/logging.dart';
+import 'package:photos/ui/loading_widget.dart';
+
+class RemoteFolderPage extends StatefulWidget {
+  final Folder folder;
+
+  const RemoteFolderPage(this.folder, {Key key}) : super(key: key);
+
+  @override
+  _RemoteFolderPageState createState() => _RemoteFolderPageState();
+}
+
+class _RemoteFolderPageState extends State<RemoteFolderPage> {
+  final _logger = Logger("RemoteFolderPageState");
+  Set<Photo> _selectedPhotos = Set<Photo>();
+  StreamSubscription<RemoteSyncEvent> _subscription;
+
+  @override
+  void initState() {
+    _subscription = Bus.instance.on<RemoteSyncEvent>().listen((event) {
+      if (event.success) {
+        setState(() {});
+      }
+    });
+    super.initState();
+  }
+
+  @override
+  Widget build(Object context) {
+    return Scaffold(
+      appBar: GalleryAppBarWidget(
+        GalleryAppBarType.local_folder,
+        widget.folder.name,
+        widget.folder.thumbnailPhoto.deviceFolder,
+        _selectedPhotos,
+        onSelectionClear: () {
+          setState(() {
+            _selectedPhotos.clear();
+          });
+        },
+      ),
+      body: FutureBuilder<List<Photo>>(
+        future: PhotoDB.instance.getAllPhotosInFolder(widget.folder.id),
+        builder: (context, snapshot) {
+          if (snapshot.hasData) {
+            return Gallery(snapshot.data, _selectedPhotos,
+                photoSelectionChangeCallback: (Set<Photo> selectedPhotos) {
+              setState(() {
+                _selectedPhotos = selectedPhotos;
+              });
+            });
+          } else if (snapshot.hasError) {
+            _logger.shout(snapshot.error);
+            return Text(snapshot.error.toString());
+          } else {
+            return loadWidget;
+          }
+        },
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _subscription.cancel();
+    super.dispose();
+  }
+}

lib/ui/zoomable_image.dart

@@ -2,6 +2,7 @@ import 'dart:io';
 import 'package:flutter/widgets.dart';
 import 'package:photos/core/cache/image_cache.dart';
 import 'package:photos/core/cache/thumbnail_cache.dart';
+import 'package:photos/core/configuration.dart';
 import 'package:photos/models/photo.dart';
 import 'package:photos/ui/loading_widget.dart';
 import 'package:photo_view/photo_view.dart';
@@ -40,6 +41,32 @@ class _ZoomableImageState extends State<ZoomableImage> {
 
   @override
   Widget build(BuildContext context) {
+    if (widget.photo.localId == null) {
+      _loadNetworkImage();
+    } else {
+      _loadLocalImage(context);
+    }
+
+    if (_imageProvider != null) {
+      return PhotoView(
+        imageProvider: _imageProvider,
+        scaleStateChangedCallback: _scaleStateChangedCallback,
+        minScale: PhotoViewComputedScale.contained,
+        gaplessPlayback: true,
+      );
+    } else {
+      return loadWidget;
+    }
+  }
+
+  void _loadNetworkImage() {
+    _imageProvider = Image.network(Configuration.instance.getHttpEndpoint() +
+            "/" +
+            widget.photo.remotePath)
+        .image;
+  }
+
+  void _loadLocalImage(BuildContext context) {
     if (!_loadedSmallThumbnail &&
         !_loadedLargeThumbnail &&
         !_loadedFinalImage) {
@@ -82,17 +109,6 @@ class _ZoomableImageState extends State<ZoomableImage> {
         });
       }
     }
-
-    if (_imageProvider != null) {
-      return PhotoView(
-        imageProvider: _imageProvider,
-        scaleStateChangedCallback: _scaleStateChangedCallback,
-        minScale: PhotoViewComputedScale.contained,
-        gaplessPlayback: true,
-      );
-    } else {
-      return loadWidget;
-    }
   }
 
   void _onLargeThumbnailLoaded(