On the fly image conversion

web_native/lib/api/api_provider.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'package:flutter/material.dart';
 
 import 'package:imagini/api/cookie_client/cookie_client.dart'
     if (dart.library.html) 'package:imagini/api/cookie_client/browser_cookie_client.dart'
@@ -58,6 +59,16 @@ class APIProvider{
     return response;
   }
 
+  Image getImage(String fileName) {
+    // TODO: Get headers & Server
+    String fullURL = fileName;
+    return new Image.network(
+      fullURL,
+      headers: {},
+      fit: BoxFit.contain,
+    );
+  }
+
   Future<QueryResult> me() async {
     QueryResult response = await _client.query(
       QueryOptions(
@@ -73,8 +84,6 @@ class APIProvider{
         document: MediaItemsQuery().document,
       )
     );
-
-    print(response);
     return response;
   }
 

web_native/lib/api/imagini_api_repository.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 import 'package:imagini/api/api_provider.dart';
 import 'package:imagini/graphql/imagini_graphql.dart';
 import 'package:graphql_flutter/graphql_flutter.dart';
+import 'package:flutter/material.dart';
 
 class ImaginiAPIRepository {
   APIProvider _apiProvider;
@@ -25,6 +26,13 @@ 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;
+    }));
+  }
+
   Stream<bool> isAuthenticated() {
     return Stream.fromFuture(_apiProvider.me().then((QueryResult resp) {
       if (resp.exception != null)
@@ -32,4 +40,8 @@ class ImaginiAPIRepository {
       return true;
     }));
   }
+
+  Image getImage(String fileName) {
+    return _apiProvider.getImage(fileName);
+  }
 }

web_native/lib/blocs/home_bloc.dart

@@ -0,0 +1,52 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+
+import 'package:imagini/core/imagini_application.dart';
+import 'package:imagini/api/imagini_api_repository.dart';
+import 'package:imagini/graphql/imagini_graphql.dart';
+
+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;
+
+  HomeBloc(this._application){
+    _init();
+  }
+
+  void _init(){
+    _imaginiAPI = _application.imaginiAPI;
+    getMediaItems();
+  }
+
+  void dispose(){
+    _loginController.close();
+    _authenticatedController.close();
+    _mediaItemsController.close();
+  }
+
+  Image getImage(String fileName){
+    return _imaginiAPI.getImage(fileName);
+  }
+
+  getMediaItems(){
+    _mediaItemsController.addStream(_imaginiAPI.mediaItems());
+  }
+
+  checkAuthentication(){
+    _authenticatedController.addStream(_imaginiAPI.isAuthenticated());
+  }
+
+  attemptHome(String username, password, server){
+    _loginController.addStream(_imaginiAPI.login(username, password, server));
+  }
+}

web_native/lib/screens/home_screen.dart

@@ -3,6 +3,10 @@ import 'package:flutter/material.dart';
 import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.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';
 
@@ -14,19 +18,7 @@ class HomeScreen extends StatefulWidget {
 
 class _HomeScreenState extends State<HomeScreen> {
 
-  // HomeBloc bloc;
-
-  void _init(){
-    // if(null == bloc){
-    //   bloc = HomeBloc(AppProvider.getApplication(context));
-    // }
-  }
-
-  @override
-  void dispose() {
-    super.dispose();
-    // bloc.dispose();
-  }
+  HomeBloc bloc;
 
   @override
   Widget build(BuildContext context) {
@@ -38,6 +30,21 @@ class _HomeScreenState extends State<HomeScreen> {
     );
   }
 
+  void _init(){
+    if(bloc != null)
+        return;
+
+    bloc = HomeBloc(AppProvider.getApplication(context));
+    // bloc.mediaItemsResult.listen((bool status) {
+    // });
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    // bloc.dispose();
+  }
+
   Widget _buildNavBar() {
     return PlatformNavBar(
         currentIndex: 0,
@@ -76,29 +83,80 @@ class _HomeScreenState extends State<HomeScreen> {
     // );
 
 
-    return new StaggeredGridView.countBuilder(
-      crossAxisCount: 4,
-      itemCount: 80,
-      itemBuilder: (BuildContext context, int index) => _buildCard("https://i.imgur.com/CgSGqUz.jpeg"),
-      // itemBuilder: (BuildContext context, int index) => new Container(
-      //     color: Colors.green,
-      //     child: new Center(
-      //       child: new CircleAvatar(
-      //         backgroundColor: Colors.white,
-      //         child: new Text('$index'),
-      //       ),
-      //     )),
-      staggeredTileBuilder: (int index) =>
-          // new StaggeredTile.count(2, index.isEven ? 2 : 1),
-          new StaggeredTile.fit(2),
-      mainAxisSpacing: 4.0,
-      crossAxisSpacing: 4.0,
+    // return new StaggeredGridView.countBuilder(
+    //   crossAxisCount: 4,
+    //   itemCount: 80,
+    //   itemBuilder: (BuildContext context, int index) => _buildCard("https://i.imgur.com/CgSGqUz.jpeg"),
+    //   // itemBuilder: (BuildContext context, int index) => new Container(
+    //   //     color: Colors.green,
+    //   //     child: new Center(
+    //   //       child: new CircleAvatar(
+    //   //         backgroundColor: Colors.white,
+    //   //         child: new Text('$index'),
+    //   //       ),
+    //   //     )),
+    //   staggeredTileBuilder: (int index) =>
+    //       // new StaggeredTile.count(2, index.isEven ? 2 : 1),
+    //       new StaggeredTile.fit(2),
+    //   mainAxisSpacing: 4.0,
+    //   crossAxisSpacing: 4.0,
+    // );
+
+    return StreamBuilder<MediaItems$Query>(
+      stream: bloc.mediaItemsResult,
+      builder: (context, snapshot) {
+        if (snapshot.data == null)
+          return _appLoading();
+
+        List<MediaItems$Query$MediaItemResponse$MediaItem> allItems = snapshot.data.mediaItems.data;
+
+        return new StaggeredGridView.countBuilder(
+          crossAxisCount: 4,
+          itemCount: allItems.length,
+          itemBuilder: (BuildContext context, int index) {
+            String fileName = allItems[index].fileName;
+            print(fileName);
+            return _buildCard("https://i.imgur.com/CgSGqUz.jpeg");
+          },
+          staggeredTileBuilder: (int index) =>
+              // new StaggeredTile.count(2, index.isEven ? 2 : 1),
+              new StaggeredTile.fit(2),
+          mainAxisSpacing: 4.0,
+          crossAxisSpacing: 4.0,
+        );
+      }
+    );
+  }
+
+  Widget _appLoading(){
+    return Center(
+      child: ConstrainedBox(
+        constraints: BoxConstraints(maxWidth: 500),
+        child: Container(
+          margin: EdgeInsets.fromLTRB(50, 0, 50, 0),
+          height: 270,
+          child: Column(
+            children: <Widget>[
+              Container(
+                child: FittedBox(
+                  fit: BoxFit.contain,
+                  child: const FlutterLogo(),
+                ),
+                width: 175,
+                margin: EdgeInsets.fromLTRB(0, 0, 0, 50),
+              ),
+              PlatformCircularProgressIndicator()
+            ],
+          ),
+        ),
+      ),
     );
   }
 
   Widget _buildCard(charImageUrl) {
     return new Image.network(
       charImageUrl,
+      headers: {},
       fit: BoxFit.contain,
     );
   }

web_native/lib/screens/login_screen.dart

@@ -19,12 +19,6 @@ class _LoginScreenState extends State<LoginScreen> {
 
   LoginBloc bloc;
 
-  @override
-  void dispose() {
-    super.dispose();
-    // bloc.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
     _init();
@@ -42,9 +36,8 @@ class _LoginScreenState extends State<LoginScreen> {
   }
 
   void _init(){
-    if(bloc != null){
+    if(bloc != null)
         return;
-    }
 
     bloc = LoginBloc(AppProvider.getApplication(context));
     bloc.authenticatedResult.listen((bool status) {
@@ -60,6 +53,12 @@ class _LoginScreenState extends State<LoginScreen> {
     });
   }
 
+  @override
+  void dispose() {
+    super.dispose();
+    // bloc.dispose();
+  }
+
   Widget _appLoading(){
     return Center(
       child: ConstrainedBox(

web_native/lib/widgets/imagini_image_provider.dart.tmp

@@ -0,0 +1,40 @@
+import 'dart:ui';
+import 'package:flutter/material.dart';
+
+class ImaginiImageProvider extends ImageProvider<ImaginiImageProvider> {
+  @override
+  final String url;
+
+  @override
+  final double scale;
+
+  @override
+  final Map<String, String> headers;
+
+  ImaginiImageProvider(this.url, {this.scale = 1.0, this.headers})
+      : assert(url != null),
+        assert(scale != null);
+
+  NetworkImage _netImg;
+
+  @override
+  ImageStreamCompleter load(ImaginiImageProvider key, DecoderCallback decode) {
+    return MultiFrameImageStreamCompleter(
+      codec: _loadAsync(decode),
+      scale: 1.0,
+      debugLabel: fileId,
+      informationCollector: () sync* {
+        yield ErrorDescription('Path: $fileId');
+      },
+    );
+  }
+
+  Future<Codec> _loadAsync(DecoderCallback decode) async {
+    _netImg._loadAsync(decode);
+  }
+
+  @override
+  Future<ImaginiImageProvider> obtainKey(ImageConfiguration configuration) {
+
+  }
+}