Dark mode, chat enhancements (#55)

* added message coloring, dark mode, corrected bugs

* removed scrolling for new messages, only scroll when sending

* updated splash screen to be dark gray

* resolved analysis issues

flutter_app/ios/Runner/Base.lproj/LaunchScreen.storyboard

@@ -1,8 +1,10 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12121" systemVersion="16G29" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12089"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
         <!--View Controller-->
@@ -14,12 +16,14 @@
                         <viewControllerLayoutGuide type="bottom" id="xbc-2k-c8Z"/>
                     </layoutGuides>
                     <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4">
+                                <rect key="frame" x="207" y="448" width="0.5" height="0.5"/>
                             </imageView>
                         </subviews>
-                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" red="0.095834682642487068" green="0.095834682642487068" blue="0.095834682642487068" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
                             <constraint firstItem="YRO-k0-Ey4" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="1a2-6s-vTC"/>
                             <constraint firstItem="YRO-k0-Ey4" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="4X2-HB-R7a"/>
@@ -28,10 +32,10 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="53" y="375"/>
+            <point key="canvasLocation" x="76.811594202898561" y="251.11607142857142"/>
         </scene>
     </scenes>
     <resources>
-        <image name="LaunchImage" width="168" height="185"/>
+        <image name="LaunchImage" width="0.5" height="0.5"/>
     </resources>
 </document>

flutter_app/lib/domains/avatar/Avatar.dart

@@ -0,0 +1,6 @@
+class UserAvatar {
+  static String formatIconName(String icon) {
+    icon = icon.replaceAll(" ", "");
+    return icon.replaceAll("/", "");
+  }
+}

flutter_app/lib/domains/messages/incoming-messages/ReceivedMessageUtility.dart

@@ -14,8 +14,6 @@ class ReceivedMessageUtility {
   static ReceivedMessage fromString(String message) {
     SocketMessage socketMessage = new SocketMessage.fromString(message);
 
-    debugPrint('received: ${socketMessage.buildString(0)}');
-
     Map<String, dynamic> messageContentMap = socketMessage.content.toMap();
 
     if (messageContentMap.containsKey('sid')) {

flutter_app/lib/domains/messages/incoming-messages/UserMessage.dart

@@ -1,7 +1,3 @@
-import 'dart:convert';
-
-import 'package:flutter/cupertino.dart';
-
 class UserMessage {
   String body;
   bool isSystemMessage;
@@ -19,6 +15,5 @@ class UserMessage {
     permId = objectFromMessage['permId'];
     userIcon = objectFromMessage['userIcon'];
     userNickname = objectFromMessage['userNickname'];
-    debugPrint('\n !!!! ' + json.encode(objectFromMessage));
   }
 }

flutter_app/lib/domains/messages/outgoing-messages/join-session/UserSettings.dart

@@ -16,6 +16,18 @@ class UserSettings implements Mappable {
     _userNickname = userNickname;
   }
 
+  String getNickname() {
+    return _userNickname;
+  }
+
+  String getIcon() {
+    return _userIcon;
+  }
+
+  String getId() {
+    return _userId;
+  }
+
   @override
   Map<String, dynamic> toMap() =>
       {

flutter_app/lib/main.dart

@@ -7,11 +7,15 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:flutterapp/domains/messages/incoming-messages/ErrorMessage.dart';
+import 'package:flutterapp/theming/AppTheme.dart';
+import 'package:flutterapp/theming/UserColors.dart';
+import 'package:flutterapp/widgets/ChatStream.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:progress_button/progress_button.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:web_socket_channel/io.dart';
 
+import 'domains/avatar/Avatar.dart';
 import 'pages/UserSettingsScreen.dart';
 import 'domains/messages/SocketMessage.dart';
 import 'domains/messages/incoming-messages/ReceivedMessage.dart';
@@ -46,9 +50,8 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Netflix Party Harder',
-      theme: new ThemeData(
-        primaryColor: Colors.redAccent,
-      ),
+      theme: PartyHarderTheme.getLightTheme(),
+      darkTheme: PartyHarderTheme.getDarkTheme(),
       home:  MyHomePage(
         title: 'Netflix Party Harder',
       )
@@ -68,7 +71,7 @@ class MyHomePage extends StatefulWidget {
 class _MyHomePageState extends State<MyHomePage> {
   IOWebSocketChannel currentChannel;
   Messenger messenger = new Messenger();
-  String userId;
+  String _userId;
   String sessionId;
   int currentServerTime = 0;
   int currentLocalTime = 0;
@@ -78,6 +81,7 @@ class _MyHomePageState extends State<MyHomePage> {
   bool isAttemptingToJoinSessionFromQR = false;
   SidMessage sidMessage;
   TextEditingController _urlTextController = TextEditingController();
+  ScrollController _chatStreamScrollController = ScrollController();
   Timer serverTimeTimer;
   Timer pingTimer;
   String _username;
@@ -86,7 +90,7 @@ class _MyHomePageState extends State<MyHomePage> {
   bool connected = false;
   int videoDuration = 655550;
   List<UserMessage> userMessages = new List();
-  List<ChatMessage> chatMessages = new List();
+  List<ChatMessage> _chatMessages = new List();
 
   _MyHomePageState() {
     _loadUsernameAndIcon();
@@ -98,7 +102,7 @@ class _MyHomePageState extends State<MyHomePage> {
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
-        backgroundColor: Colors.red,
+        backgroundColor: Theme.of(context).primaryColor,
       ),
       body: connected ? _getConnectedWidget() : _getNotConnectedWidget(),
       bottomNavigationBar: _getBottomAppBarWidget(),
@@ -142,21 +146,15 @@ class _MyHomePageState extends State<MyHomePage> {
   Widget _getConnectedWidget() {
     return Padding(
       padding: new EdgeInsets.all(10),
-      child: DashChat(
-          scrollToBottom: false,
-          messages: chatMessages,
-          onSend: (message) {
-            postMessageText(message.text);
-          },
-          user: ChatUser(
-            name: _username,
-            uid: userId,
-            avatar: _icon,
-          ),
-        avatarBuilder: (chatUser) {
-            debugPrint(chatUser.avatar);
-            return new SvgPicture.asset('assets/avatars/${chatUser.avatar}', height: 35);
-        },),
+      child: ChatStream.getChatStream(
+        context: context,
+        messages: _chatMessages,
+        onSend: (message) {
+          postMessageText(message.text);
+        },
+        userSettings: new UserSettings(false, _icon, _userId, _username),
+        scrollController: _chatStreamScrollController,
+      ),
     );
   }
 
@@ -184,14 +182,14 @@ class _MyHomePageState extends State<MyHomePage> {
   }
 
   _sendBroadcastUserSettingsMessage() {
-    sendMessage(BroadcastUserSettingsMessage(BroadCastUserSettingsContent(UserSettings(true, _icon, userId, _username))));
+    sendMessage(BroadcastUserSettingsMessage(BroadCastUserSettingsContent(UserSettings(true, _icon, _userId, _username))));
   }
 
   void postMessageText(String messageText) {
     int currentTimeInMilliseconds = (new DateTime.now().millisecondsSinceEpoch);
     int millisecondsSinceLastUpdate = currentTimeInMilliseconds - currentLocalTime;
     int expectedServerTime = currentServerTime + millisecondsSinceLastUpdate;
-    SendMessageContent sendMessageContent = new SendMessageContent(new SendMessageBody(messageText, false, expectedServerTime, userId, userId, _icon, _username));
+    SendMessageContent sendMessageContent = new SendMessageContent(new SendMessageBody(messageText, false, expectedServerTime, _userId, _userId, _icon, _username));
     sendMessage(new SendMessageMessage(sendMessageContent));
   }
 
@@ -280,11 +278,11 @@ class _MyHomePageState extends State<MyHomePage> {
     debugPrint('got $message');
     ReceivedMessage messageObj = ReceivedMessageUtility.fromString(message);
     if(messageObj is UserIdMessage) {
-      userId = messageObj.userId;
+      _userId = messageObj.userId;
       sendGetServerTimeMessage();
     } else if(messageObj is ServerTimeMessage) {
       if (!sessionJoined) {
-        joinSession(userId, "Mobile User", sessionId);
+        joinSession(sessionId);
       }
     } else if(messageObj is UpdateMessage) {
       lastKnownMoviePosition = messageObj.lastKnownTime;
@@ -324,22 +322,16 @@ class _MyHomePageState extends State<MyHomePage> {
       else if(messageObj is SentMessageMessage) {
         setState(() {
           this.userMessages.add(messageObj.userMessage);
-          this.chatMessages.add(new ChatMessage(createdAt: DateTime.fromMillisecondsSinceEpoch(messageObj.userMessage.timestamp), text: messageObj.userMessage.body, user: new ChatUser.fromJson({
-            'uid': messageObj.userMessage.userId,
-            'name': messageObj.userMessage.userNickname,
-            'avatar': messageObj.userMessage.userIcon
-          })));
+          this._chatMessages.add(new ChatMessage(createdAt: DateTime.fromMillisecondsSinceEpoch(messageObj.userMessage.timestamp), text: messageObj.userMessage.body, user: _buildChatUser(messageObj.userMessage)));
+          _scrollToBottomOfChatStream();
         });
       }
       else if(messageObj is VideoIdAndMessageCatchupMessage) {
         this.userMessages.addAll(messageObj.userMessages);
-        this.chatMessages.addAll(messageObj.userMessages.map((userMessage) {
-          return new ChatMessage(text: userMessage.body, user: new ChatUser.fromJson({
-            'uid': userMessage.userId,
-            'name': userMessage.userNickname,
-            'avatar': userMessage.userIcon
-          }));
+        this._chatMessages.addAll(messageObj.userMessages.map((userMessage) {
+          return new ChatMessage(text: userMessage.body, user: _buildChatUser(userMessage));
         }));
+        _scrollToBottomOfChatStream();
         lastKnownMoviePosition = messageObj.lastKnownTime;
         currentServerTime = messageObj.lastKnownTimeUpdatedAt;
         currentLocalTime = (new DateTime.now().millisecondsSinceEpoch);
@@ -362,6 +354,19 @@ class _MyHomePageState extends State<MyHomePage> {
     }
   }
 
+  ChatUser _buildChatUser(UserMessage userMessage) {
+    return new ChatUser.fromJson({
+      'uid': userMessage.userId,
+      'name': userMessage.userNickname,
+      'avatar': UserAvatar.formatIconName(userMessage.userIcon),
+      'containerColor': UserColors.getColor(userMessage.userIcon)
+      });
+  }
+
+  void _scrollToBottomOfChatStream() {
+    _chatStreamScrollController.animateTo(_chatStreamScrollController.position.maxScrollExtent + 50, duration: new Duration(milliseconds: 300), curve: Curves.bounceIn);
+  }
+
   void showToastMessage(String message) {
     Fluttertoast.showToast(
         msg: message,
@@ -374,9 +379,9 @@ class _MyHomePageState extends State<MyHomePage> {
     );
   }
 
-  void joinSession(String userIdForJoin, String nickNameForJoin, String sessionIdForJoin) {
-    UserSettings userSettings = new UserSettings(true, "Sailor Cat.svg", userIdForJoin, nickNameForJoin);
-    JoinSessionContent joinSessionContent = new JoinSessionContent(sessionIdForJoin, userIdForJoin, userSettings);
+  void joinSession(String sessionIdForJoin) {
+    UserSettings userSettings = new UserSettings(true, _icon, _userId, _username);
+    JoinSessionContent joinSessionContent = new JoinSessionContent(sessionIdForJoin, _userId, userSettings);
     sendMessage(new JoinSessionMessage(joinSessionContent));
     sessionJoined = true;
     setState(() {
@@ -409,7 +414,7 @@ class _MyHomePageState extends State<MyHomePage> {
         pingTimer = null;
       }
       currentChannel = null;
-      userId = null;
+      _userId = null;
       sessionId = null;
       currentServerTime = 0;
       currentLocalTime = 0;
@@ -418,7 +423,7 @@ class _MyHomePageState extends State<MyHomePage> {
       isAttemptingToJoinSessionFromText = false;
       isAttemptingToJoinSessionFromQR = false;
       userMessages.clear();
-      chatMessages.clear();
+      _chatMessages.clear();
 
     });
   }
@@ -443,7 +448,6 @@ class _MyHomePageState extends State<MyHomePage> {
   }
 
   List<Widget> getNotConnectedWidgets() {
-    debugPrint('remove me');
     List<Widget> widgets = new List<Widget>();
     widgets.add(TextFormField(
       textInputAction: TextInputAction.go,
@@ -481,14 +485,12 @@ class _MyHomePageState extends State<MyHomePage> {
   }
 
   void _onScanQRPressed() async {
-    debugPrint('qr pressed');
     var result = await BarcodeScanner.scan();
     _urlTextController.text = result;
     _connectToServer();
     setState(() {
       isAttemptingToJoinSessionFromQR = true;
     });
-    debugPrint(result);
   }
 
   void disconnectButtonPressed() {

flutter_app/lib/pages/UserSettingsScreen.dart

@@ -35,7 +35,7 @@ class _UserSettingsScreenState extends State<UserSettingsScreen> {
     images.add(SvgPicture.asset("assets/avatars/Pizza.svg", height: 85));
     images.add(SvgPicture.asset("assets/avatars/Poohbear.svg", height: 85));
     images.add(SvgPicture.asset("assets/avatars/Popcorn.svg", height: 85));
-    images.add(SvgPicture.asset("assets/avatars/Sailor Cat.svg", height: 85));
+    images.add(SvgPicture.asset("assets/avatars/SailorCat.svg", height: 85));
     images.add(SvgPicture.asset("assets/avatars/Sailormoon.svg", height: 85));
     images.add(SvgPicture.asset("assets/avatars/Snow-White.svg", height: 85));
     images.add(SvgPicture.asset("assets/avatars/Wolverine.svg", height: 85));

flutter_app/lib/theming/AppTheme.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class PartyHarderTheme {
+  static getLightTheme() {
+    return new ThemeData(
+        primaryColor: Colors.redAccent,
+        unselectedWidgetColor: Colors.black,
+        cardColor: Colors.black12
+    );
+  }
+  static getDarkTheme() {
+    return new ThemeData(
+        brightness: Brightness.dark,
+        primaryColor: Colors.redAccent,
+        accentColor: Colors.redAccent,
+        buttonColor: Colors.redAccent,
+        dialogBackgroundColor: Colors.blueGrey,
+        cardColor: Colors.white12,
+        unselectedWidgetColor: Colors.white60
+    );
+  }
+}