Lazy Loading & Pagination, Alpha Channel -> White Conversion, Add Height & Width to DB & API

web_native/lib/api/api_provider.dart

@@ -1,11 +1,12 @@
 import 'dart:async';
-import 'package:flutter/material.dart';
+import 'package:flutter/material.dart' show BoxFit, Center, SizedBox;
 
 import 'package:imagini/api/cookie_client/cookie_client.dart'
     if (dart.library.html) 'package:imagini/api/cookie_client/browser_cookie_client.dart'
     if (dart.library.io) 'package:imagini/api/cookie_client/io_cookie_client.dart';
 
 import 'package:imagini/core/storage_client/base_storage_client.dart';
+import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:graphql_flutter/graphql_flutter.dart';
 import 'package:imagini/graphql/imagini_graphql.dart';
@@ -63,14 +64,22 @@ class APIProvider{
     return response;
   }
 
-  Future<CachedNetworkImage> getImage(String fileName, int derivedContentWidth) async {
+  Future<CachedNetworkImage> getImage(String fileName, int width, int height) async {
     String server = await _storage.get("server");
     String accessToken = await _storage.get("accessToken");
     String refreshToken = await _storage.get("refreshToken");
 
-    String fullURL = "$server/media/$fileName?width=$derivedContentWidth";
+    String fullURL = "$server/media/$fileName?width=$width";
+    print(fullURL);
     return CachedNetworkImage(
       imageUrl: fullURL,
+      placeholder: (context, url) => Center(
+        child: SizedBox(
+          width: width.toDouble() / 3.5,
+          height: height.toDouble() / 3.5,
+          child: new PlatformCircularProgressIndicator(),
+        ),
+      ),
       imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet,
       httpHeaders: {
         "X-Imagini-AccessToken": accessToken,
@@ -89,10 +98,13 @@ class APIProvider{
     return response;
   }
 
-  Future<QueryResult> mediaItems() async {
+  Future<QueryResult> mediaItems(Page page) async {
     QueryResult response = await _client.query(
       QueryOptions(
         document: MediaItemsQuery().document,
+        variables: {
+          "page": page,
+        },
       )
     );
     return response;

web_native/lib/api/imagini_api_repository.dart

@@ -26,11 +26,9 @@ class ImaginiAPIRepository {
     return Stream.fromFuture(_apiProvider.me());
   }
 
-  Stream<MediaItems$Query> mediaItems() {
-    return Stream.fromFuture(_apiProvider.mediaItems().then((QueryResult resp) {
-      final mediaItemsResponse = MediaItems$Query.fromJson(resp.data);
-      return mediaItemsResponse;
-    }));
+  Future<MediaItems$Query> mediaItems(Page page) async {
+    QueryResult allItems = await _apiProvider.mediaItems(page);
+    return MediaItems$Query.fromJson(allItems.data);
   }
 
   Stream<bool> isAuthenticated() {
@@ -41,7 +39,7 @@ class ImaginiAPIRepository {
     }));
   }
 
-  Future<CachedNetworkImage> getImage(String fileName, int derivedContentWidth) {
-    return _apiProvider.getImage(fileName, derivedContentWidth);
+  Future<CachedNetworkImage> getImage(String fileName, int width, int height) {
+    return _apiProvider.getImage(fileName, width, height);
   }
 }