4.77.11

* Fixed: Scrolling issues after Twitch removed the simplebar library. (Fixes #1718)
* Fixed: Chat action hotkeys not working correctly.

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "frankerfacez",
 	"author": "Dan Salvato LLC",
-	"version": "4.77.10",
+	"version": "4.77.11",
 	"description": "FrankerFaceZ is a Twitch enhancement suite.",
 	"private": true,
 	"license": "Apache-2.0",

src/modules/chat/actions/actions.jsx

@@ -553,13 +553,9 @@ export default class Actions extends Module {
 			{reason_text ? <div class="tw-pd-05 tw-border-b">
 				{reason_text}
 			</div> : null}
-			<div class="scrollable-area" data-simplebar>
+			<div class="ffz-scrollable scrollable-area simplebar-content">
-				<div class="simplebar-scroll-content">
-					<div class="simplebar-content">
 				<ul>{reason_elements}</ul>
 			</div>
-				</div>
-			</div>
 		</div>);
 	}
 

src/sites/twitch-twilight/index.js

@@ -21,6 +21,8 @@ import {has} from 'utilities/object';
 
 import MAIN_URL from 'site/styles/main.scss';
 
+//import SimpleBar from 'simplebar';
+
 
 // ============================================================================
 // The Site
@@ -67,10 +69,12 @@ export default class Twilight extends BaseSite {
 	onEnable() {
 		this.settings = this.resolve('settings');
 
-		this.web_munch.findModule('simplebar').then(sb => {
+		//window.ffzSimplebar = window.ffzSimplebar || SimpleBar;
+
+		/*this.web_munch.findModule('simplebar').then(sb => {
 			if (! window.ffzSimplebar && sb )
 				window.ffzSimplebar = sb;
-		}).catch(() => {});
+		}).catch(() => {});*/
 
 		const thing = this.fine.searchNode(null, n => n?.pendingProps?.store?.getState),
 			store = this.store = thing?.pendingProps?.store;
@@ -466,6 +470,8 @@ Twilight.ROUTES = {
 	'user-events': '/:userName/events',
 	'user-followers': '/:userName/followers',
 	'user-following': '/:userName/following',
+	'user-schedule': '/:userName/schedule',
+	'user-about': '/:userName/about',
 	'product': '/products/:productName',
 	'prime': '/prime',
 	'turbo': '/turbo',

src/sites/twitch-twilight/modules/chat/emote_menu.jsx

@@ -2749,12 +2749,9 @@ export default class EmoteMenu extends Module {
 							<div class={`emote-picker${whisper ? '__whisper' : ''}`}>
 								<div class="tw-flex">
 									<div
-										class={`emote-picker__tab-content${whisper ? '-whisper' : ''} tw-full-width scrollable-area scrollable-area--suppress-scroll-x`}
+										ref={this.saveScrollRef}
-										data-test-selector="scrollable-area-wrapper"
+										class={`emote-picker__tab-content${whisper ? '-whisper' : ''} tw-full-width ffz-emote-menu--scroll-area`}
-										data-simplebar
 									>
-										<div ref={this.saveScrollRef} class="simplebar-scroll-content">
-											<div class="simplebar-content">
 										{loading && this.renderLoading()}
 										{!loading && sets && sets.map((data,idx) => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
 											data.emoji ? t.EmojiSection : t.MenuSection,
@@ -2778,16 +2775,11 @@ export default class EmoteMenu extends Module {
 										))}
 										{! loading && (! sets || ! sets.length) && this.renderEmpty()}
 									</div>
-										</div>
-									</div>
 									{(! loading && this.state.quickNav && ! is_favs) && (<div class={`emote-picker__nav_content${whisper ? '-whisper' : ''} tw-block tw-border-radius-none tw-c-background-alt-2`}>
 										<div
-											class={`emote-picker__nav-content-overflow${whisper ? '-whisper' : ''} scrollable-area scrollable-area--suppress-scroll-x`}
+											ref={this.saveNavRef}
-											data-test-selector="scrollable-area-wrapper"
+											class={`emote-picker__nav-content-overflow${whisper ? '-whisper' : ''} ffz-emote-menu--scroll-area tw-pd-x-05`}
-											data-simplebar
 										>
-											<div ref={this.saveNavRef} class="simplebar-scroll-content">
-												<div class="simplebar-content">
 											{!loading && sets && sets.map(data => {
 												if ( ! data || (visibility && (data.is_favorites || data.emoji)) )
 													return null;
@@ -2825,8 +2817,6 @@ export default class EmoteMenu extends Module {
 												</div>
 											</button>)}
 										</div>
-											</div>
-										</div>
 									</div>)}
 								</div>
 								<div class="emote-picker__controls-container tw-relative">

src/sites/twitch-twilight/modules/chat/scroller.js

@@ -562,10 +562,11 @@ export default class Scroller extends Module {
 			cls.prototype.ffz_updateActing = function() {
 				this._ffz_key_frame_acting = null;
 
-				if ( ! this.scrollRef?.root )
+				const root = t.fine.getChildNode(this);
+				if ( ! root )
 					return;
 
-				this.scrollRef.root.dataset.acting = this.ffz_acting;
+				root.dataset.acting = this.ffz_acting;
 			}
 
 			cls.prototype.ffzUpdateKeyTags = function() {
@@ -579,13 +580,14 @@ export default class Scroller extends Module {
 				if ( ! t.use_keys && this.ffz_use_keys === t.use_keys )
 					return;
 
-				if ( ! this.scrollRef?.root )
+				const root = t.fine.getChildNode(this);
+				if ( ! root )
 					return;
 
 				this.ffz_use_keys = t.use_keys;
-				this.scrollRef.root.classList.toggle('ffz--keys', t.use_keys);
+				root.classList.toggle('ffz--keys', t.use_keys);
 
-				const ds = this.scrollRef.root.dataset;
+				const ds = root.dataset;
 
 				if ( ! t.use_keys ) {
 					delete ds.alt;

src/sites/twitch-twilight/styles/chat.scss

@@ -538,3 +538,9 @@
 		}
 	}
 }
+
+.ffz-emote-menu--scroll-area {
+	overflow-y: auto;
+	overflow-x: hidden;
+	scrollbar-width: thin;;
+}

src/std-components/simplebar.vue

@@ -2,18 +2,10 @@
 	<div
 		ref="scroller"
 		:class="classes"
-		:data-simplebar-auto-hide="autoHide"
+		class="ffz-scrollable scrollable-area simplebar-content"
-		:data-simplebar-scrollbar-min-size="scrollbarMinSize"
-		data-simplebar
-		class="scrollable-area"
-		@scroll="onScroll"
 	>
-		<div class="simplebar-scroll-content">
-			<div class="simplebar-content">
 		<slot />
 	</div>
-		</div>
-	</div>
 </template>
 
 <script>
@@ -29,26 +21,6 @@ export default {
 			type: Number,
 			default: 10
 		}
-	},
-
-	mounted() {
-		const scroller = this.$refs.scroller;
-		if (!scroller || ! window.ffzSimplebar || scroller.SimpleBar)
-			return;
-
-		new ffzSimplebar(scroller, ffzSimplebar.getElOptions(scroller));
-	},
-
-	methods: {
-		onScroll() {
-			// We do this to avoid the scroll position getting screwed up on
-			// an element that should never scroll. Thanks, web browsers.
-			const scroller = this.$refs.scroller;
-			if ( ! scroller || scroller.scrollTop == 0 )
-				return;
-
-			scroller.scrollTop = 0;
-		}
 	}
 }
 

styles/main.scss

@@ -180,3 +180,7 @@
 .ffz-aspect--align-bottom > :not(.ffz-aspect__spacer) {
 	bottom: 0;
 }
+
+.ffz-scrollable {
+	scrollbar-width: thin;
+}