bump version and improve reversed chat direction

package.json

@@ -1,7 +1,7 @@
 {
   "name": "BetterTTV",
   "author": "Night",
-  "version": "7.2.50",
+  "version": "7.2.51",
   "description": "BetterTTV enhances Twitch with new features, emotes, and more.",
   "main": "betterttv.js",
   "scripts": {

src/modules/chat_direction/index.js

@@ -1,22 +1,37 @@
 const $ = require('jquery');
 const settings = require('../../settings');
+const twitch = require('../../utils/twitch');
 
-const CHAT_LINE_SELECTOR = '.chat-list__lines .chat-line__message';
+const CHAT_LIST_SCROLL_CONTENT = '.chat-list .chat-list__lines .simplebar-scroll-content';
 
 class ChatDirection {
     constructor() {
         settings.add({
-            id: 'chatDirection',
+            id: 'reverseChatDirection',
             name: 'Reverse Chat Messages Direction',
             defaultValue: false,
             description: 'New chat messages come from the top'
         });
-        settings.on('changed.chatDirection', () => this.toggleChatDirection());
+        settings.on('changed.reverseChatDirection', () => this.toggleChatDirection());
+        settings.on('load.chat', () => this.toggleChatAutoScrolling());
         this.toggleChatDirection();
     }
 
+    toggleChatAutoScrolling() {
+        const scroller = twitch.getChatScroller();
+        const reverseChatDirection = settings.get('reverseChatDirection');
+        if (!scroller) return;
+        scroller.setState({
+            isAutoScrolling: !reverseChatDirection
+        });
+        if (reverseChatDirection) {
+            $(CHAT_LIST_SCROLL_CONTENT)[0].scrollTop = 0;
+        }
+    }
+
     toggleChatDirection() {
-        $(CHAT_LINE_SELECTOR).parent().toggleClass('bttv-chat-direction-reversed', settings.get('chatDirection'));
+        $('body').toggleClass('bttv-chat-direction-reversed', settings.get('reverseChatDirection'));
+        this.toggleChatAutoScrolling();
     }
 }
 

src/modules/chat_direction/style.css

@@ -1,4 +1,10 @@
 .bttv-chat-direction-reversed {
-    display: flex;
-    flex-direction: column-reverse;
+    .chat-list__more-messages-placeholder {
+        display: none;
+    }
+
+    .chat-list .chat-list__lines div[role="log"] {
+        display: flex;
+        flex-direction: column-reverse;
+    }
 }