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

2021-02-28 19:23:41 -05:00
parent 6827a2994a
commit 745d843af7
18 changed files with 427 additions and 284 deletions
--- a/web_native/graphql/mediaItems.graphql
+++ b/web_native/graphql/mediaItems.graphql
@@ -6,6 +6,8 @@ query mediaItems($order: Order, $page: Page, $filter: MediaItemFilter) {
      latitude
      longitude
      isVideo
+      width
+      height
      origName
      createdAt
    }
--- a/web_native/lib/api/api_provider.dart
+++ b/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;
--- a/web_native/lib/api/imagini_api_repository.dart
+++ b/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);
  }
 }
--- a/web_native/lib/blocs/home_bloc.dart
+++ b/web_native/lib/blocs/home_bloc.dart
@@ -1,5 +1,4 @@
 import 'dart:async';
-
 import 'package:imagini/core/imagini_application.dart';
 import 'package:imagini/api/imagini_api_repository.dart';
 import 'package:imagini/graphql/imagini_graphql.dart';
@@ -10,36 +9,53 @@ class HomeBloc{
  final ImaginiApplication _application;
  ImaginiAPIRepository _imaginiAPI;

-  final _mediaItemsController = StreamController<MediaItems$Query>.broadcast();
-  Stream<MediaItems$Query> get mediaItemsResult => _mediaItemsController.stream;
-
  final _loginController = StreamController<bool>.broadcast();
  Stream<bool> get loginResult => _loginController.stream;

  final _authenticatedController = StreamController<bool>.broadcast();
  Stream<bool> get authenticatedResult => _authenticatedController.stream;

+  Map<int, List<MediaItems$Query$MediaItemResponse$MediaItem>> _pagedMediaItemListCache =
+    Map<int, List<MediaItems$Query$MediaItemResponse$MediaItem>>();
+
+  int totalMediaItems;
+  int _pageSize = 50;
+
  HomeBloc(this._application){
    _init();
  }

  void _init(){
    _imaginiAPI = _application.imaginiAPI;
-    getMediaItems();
  }

  void dispose(){
    _loginController.close();
    _authenticatedController.close();
-    _mediaItemsController.close();
  }

-  Future<CachedNetworkImage> getImage(String fileName, int derivedContentWidth){
-    return _imaginiAPI.getImage(fileName, derivedContentWidth);
+  Future<CachedNetworkImage> getMedia(int index, derivedContentWidth) async {
+    MediaItems$Query$MediaItemResponse$MediaItem mediaDetails = await getMediaDetails(index);
+    if (mediaDetails == null)
+      return null;
+    int derivedContentHeight = (mediaDetails.height / mediaDetails.width * derivedContentWidth).ceil();
+    return _imaginiAPI.getImage(mediaDetails.fileName, derivedContentWidth, derivedContentHeight);
  }

-  getMediaItems(){
-    _mediaItemsController.addStream(_imaginiAPI.mediaItems());
+  Future<MediaItems$Query$MediaItemResponse$MediaItem> getMediaDetails(int index) async {
+    int itemPage = (index / _pageSize).ceil();
+    int indexOnPage = index % _pageSize;
+
+    if (!_pagedMediaItemListCache.containsKey(itemPage))
+      await _cachePage(itemPage);
+
+    return _pagedMediaItemListCache[itemPage][indexOnPage];
+  }
+
+  _cachePage(int itemPage) async {
+    MediaItems$Query newItems = await _imaginiAPI.mediaItems(Page(page: itemPage));
+    totalMediaItems = newItems.mediaItems.page.total;
+    _pagedMediaItemListCache[itemPage] = newItems.mediaItems.data;
  }

  checkAuthentication(){
--- a/web_native/lib/graphql/imagini_graphql.graphql.dart
+++ b/web_native/lib/graphql/imagini_graphql.graphql.dart
@@ -188,13 +188,26 @@ class MediaItems$Query$MediaItemResponse$MediaItem with EquatableMixin {

  bool isVideo;

+  int width;
+
+  int height;
+
  String origName;

  DateTime createdAt;

  @override
-  List<Object> get props =>
-      [id, fileName, latitude, longitude, isVideo, origName, createdAt];
+  List<Object> get props => [
+        id,
+        fileName,
+        latitude,
+        longitude,
+        isVideo,
+        width,
+        height,
+        origName,
+        createdAt
+      ];
  Map<String, dynamic> toJson() =>
      _$MediaItems$Query$MediaItemResponse$MediaItemToJson(this);
 }
@@ -976,6 +989,18 @@ class MediaItemsQuery
                          arguments: [],
                          directives: [],
                          selectionSet: null),
+                      FieldNode(
+                          name: NameNode(value: 'width'),
+                          alias: null,
+                          arguments: [],
+                          directives: [],
+                          selectionSet: null),
+                      FieldNode(
+                          name: NameNode(value: 'height'),
+                          alias: null,
+                          arguments: [],
+                          directives: [],
+                          selectionSet: null),
                      FieldNode(
                          name: NameNode(value: 'origName'),
                          alias: null,
--- a/web_native/lib/graphql/imagini_graphql.graphql.g.dart
+++ b/web_native/lib/graphql/imagini_graphql.graphql.g.dart
@@ -201,6 +201,8 @@ MediaItems$Query$MediaItemResponse$MediaItem
    ..latitude = (json['latitude'] as num)?.toDouble()
    ..longitude = (json['longitude'] as num)?.toDouble()
    ..isVideo = json['isVideo'] as bool
+    ..width = json['width'] as int
+    ..height = json['height'] as int
    ..origName = json['origName'] as String
    ..createdAt = json['createdAt'] == null
        ? null
@@ -215,6 +217,8 @@ Map<String, dynamic> _$MediaItems$Query$MediaItemResponse$MediaItemToJson(
      'latitude': instance.latitude,
      'longitude': instance.longitude,
      'isVideo': instance.isVideo,
+      'width': instance.width,
+      'height': instance.height,
      'origName': instance.origName,
      'createdAt': instance.createdAt?.toIso8601String(),
    };
--- a/web_native/lib/screens/home_screen.dart
+++ b/web_native/lib/screens/home_screen.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/cupertino.dart';

 import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
@@ -6,7 +7,6 @@ import 'package:cached_network_image/cached_network_image.dart';

 import 'package:imagini/blocs/home_bloc.dart';
 import 'package:imagini/core/app_provider.dart';
-import 'package:imagini/graphql/imagini_graphql.dart';

 class HomeScreen extends StatefulWidget {
  static const String PATH = '/Home';
@@ -21,23 +21,48 @@ class _HomeScreenState extends State<HomeScreen> {

  HomeBloc bloc;

+  ScrollController _gridViewController = new ScrollController();
+  ScrollController _parentController = new ScrollController();
+
+  int _currentIndex = 0;
+  int _totalLength = 1;
+  double _lastOffset = 0.0;
+
  @override
  Widget build(BuildContext context) {
    _init();

    return PlatformScaffold(
-      body: _buildGridView(),
+      body: _buildBody(),
      bottomNavBar: _buildNavBar()
    );
  }

  void _init(){
+    _gridViewController.addListener(_scrollListener);
+
    if(bloc != null)
        return;

    bloc = HomeBloc(AppProvider.getApplication(context));
-    // bloc.mediaItemsResult.listen((bool status) {
-    // });
+  }
+
+  // Needed Due to Nested Scroll Views
+  void _scrollListener() {
+    // Reflect Downwards & Upwards Scrolling (Respectively) on Parent
+    if (_gridViewController.offset > _lastOffset) {
+      if (_parentController.offset < _parentController.position.maxScrollExtent) {
+        _parentController.jumpTo(_parentController.offset + (_lastOffset - _gridViewController.offset).abs());
+      }
+    } else if (_gridViewController.offset < _lastOffset) {
+      if (_parentController.offset > 0) {
+        _parentController.jumpTo(_parentController.offset - (_lastOffset - _gridViewController.offset).abs());
+      }
+    }
+
+    // Don't update offset on top or bottom bounce
+    if (_gridViewController.offset < _gridViewController.position.maxScrollExtent && _gridViewController.offset > 0)
+      _lastOffset = _gridViewController.offset;
  }

  @override
@@ -46,59 +71,70 @@ class _HomeScreenState extends State<HomeScreen> {
    // bloc.dispose();
  }

-  Widget _buildNavBar() {
-    return PlatformNavBar(
-        currentIndex: 0,
-        itemChanged: (index) => setState(
-          () {
-            // _selectedTabIndex = index;
-            print(index);
-          },
-        ),
-        items: [
-          BottomNavigationBarItem(
-            label: "Gallery",
-            icon: Icon(PlatformIcons(context).collections),
-          ),
-          BottomNavigationBarItem(
-            label: "Me",
-            icon: Icon(PlatformIcons(context).person),
-          ),
-          BottomNavigationBarItem(
-            label: "Settings",
-            icon: Icon(PlatformIcons(context).settings),
-          ),
-        ],
-      );
+  Widget _buildBody() {
+    var widgetMap = [
+      <Widget>[
+        _buildAppBar("Gallery"),
+        SliverFillRemaining(
+          child: _buildGridView()
+        )
+      ],
+      <Widget>[
+        _buildAppBar("Albums"),
+        SliverToBoxAdapter()
+      ],
+      <Widget>[
+        _buildAppBar("Settings"),
+        SliverToBoxAdapter()
+      ],
+    ];
+    return CustomScrollView(
+      shrinkWrap: true,
+      controller: _parentController,
+      slivers: widgetMap[_currentIndex],
+    );
  }

-  Widget _buildGridView() {
-    return StreamBuilder<MediaItems$Query>(
-      stream: bloc.mediaItemsResult,
-      builder: (context, snapshot) {
-        if (snapshot.data == null)
-          return _appLoading();
+  Widget _buildAppBar(String title) {
+    return SliverAppBar(
+      title: new Text(title),
+      pinned: false,
+      snap: false,
+      floating: true,
+      leading: PlatformIconButton(
+        icon: Icon(PlatformIcons(context).person),
+      ),
+      actions: <Widget>[
+        PlatformIconButton(
+          icon: Icon(PlatformIcons(context).search),
+        ),
+        PlatformIconButton(
+          icon: Icon(PlatformIcons(context).add),
+        ),
+      ],
+    );
+  }

-        List<MediaItems$Query$MediaItemResponse$MediaItem> allItems = snapshot.data.mediaItems.data;
-
-        MediaQueryData queryData = MediaQuery.of(context);
-
-        final double screenWidthSize = queryData.size.width * queryData.devicePixelRatio;
-        final int crossAxisCount = (screenWidthSize / 500).ceil();
-        final int derivedContentWidth = (screenWidthSize / crossAxisCount).ceil();
-
-        return new StaggeredGridView.countBuilder(
-          crossAxisCount: crossAxisCount,
-          itemCount: allItems.length,
-          itemBuilder: (BuildContext context, int index) {
-            String fileName = allItems[index].fileName;
-            return _buildCard(fileName, derivedContentWidth);
-          },
-          staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
-          mainAxisSpacing: 4.0,
-          crossAxisSpacing: 4.0,
-        );
-      }
+  Widget _buildNavBar() {
+    return PlatformNavBar(
+      currentIndex: _currentIndex,
+      itemChanged: (index) => setState(() {
+        _currentIndex = index;
+      }),
+      items: [
+        BottomNavigationBarItem(
+          label: "Photos",
+          icon: Icon(isMaterial(context) ? Icons.insert_photo : CupertinoIcons.photo),
+        ),
+        BottomNavigationBarItem(
+          label: "Albums",
+          icon: Icon(isMaterial(context) ? Icons.collections : CupertinoIcons.photo_on_rectangle),
+        ),
+        BottomNavigationBarItem(
+          label: "Settings",
+          icon: Icon(PlatformIcons(context).settings),
+        ),
+      ],
    );
  }

@@ -119,17 +155,60 @@ class _HomeScreenState extends State<HomeScreen> {
    );
  }

-  Widget _buildCard(charImageUrl, derivedContentWidth) {
+  Widget _buildGridView() {
+    MediaQueryData queryData = MediaQuery.of(context);
+
+    final int itemMultiplier = 3;
+    final int crossAxisCount = (queryData.size.width * itemMultiplier / 500).ceil();
+    final int derivedContentWidth = 500;
+
+    return new StaggeredGridView.builder(
+      shrinkWrap: true,
+      itemCount: _totalLength,
+      controller: _gridViewController,
+      gridDelegate: SliverStaggeredGridDelegateWithFixedCrossAxisCount(
+        staggeredTileCount: _totalLength,
+        crossAxisCount: crossAxisCount,
+        mainAxisSpacing: 4.0,
+        crossAxisSpacing: 4.0,
+        staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
+      ),
+      itemBuilder: (BuildContext context, int index) {
+        return _buildCard(index, derivedContentWidth);
+      },
+    );
+  }
+
+  Widget _buildCard(index, derivedContentWidth) {
    return FutureBuilder<CachedNetworkImage>(
-      future: bloc.getImage(charImageUrl, derivedContentWidth),
+      future: bloc.getMedia(index, derivedContentWidth),
      builder: (context, snapshot) {
-        if (!snapshot.hasData) {
-            return PlatformCircularProgressIndicator();
-        }
+        if (!snapshot.hasData)
+          return SizedBox(width: 500, height: 500);
+
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+            if (_totalLength == bloc.totalMediaItems)
+              return;
+
+            setState(() {
+              _totalLength = bloc.totalMediaItems;
+            });
+        });

        return snapshot.data;
-        // Image newImage = snapshot.data;
-        // return newImage;
+
+        // WidgetsBinding.instance.addPostFrameCallback((_) {
+        //   if (_totalLength == bloc.cachedMediaItemList.length - 1)
+        //     return;
+
+        //   if (bloc.cachedMediaItemList.length == 0)
+        //     return;
+
+        //   setState(() {
+        //     _totalLength = bloc.cachedMediaItemList.length - 1;
+        //   });
+        // });
+
      }
    );
  }
--- a/web_native/schema.graphqls
+++ b/web_native/schema.graphqls
@@ -158,6 +158,8 @@ type MediaItem {
    isVideo: Boolean!   @meta(gorm: "default:false;not null")
    fileName: String!   @meta(gorm: "not null")
    origName: String!   @meta(gorm: "not null")
+    width: Int!         @meta(gorm: "not null")
+    height: Int!        @meta(gorm: "not null")
    tags: [Tag]         @meta(gorm: "many2many:media_tags;foreignKey:ID,UserID;References:ID")
    albums: [Album]     @meta(gorm: "many2many:media_albums;foreignKey:ID,UserID;Refrences:ID")
    userID: ID!         @meta(gorm: "not null")