4.0.0-rc9.1

* Changed: Do not hide the emote menu when it's taller than the whisper UI.
* Fixed: Chat features not working on the dashboard.
* Fixed: Player features not working with Twitch's new player loading scheme.

src/main.js

@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc9',
+	major: 4, minor: 0, revision: 0, extra: '-rc9.1',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/modules/metadata.jsx

@@ -109,13 +109,32 @@ export default class Metadata extends Module {
 			setup() {
 				const Player = this.resolve('site.player'),
 					socket = this.resolve('socket'),
-					player = Player.current,
-					stats = player && maybe_call(player.getVideoInfo, player);
+					player = Player.current;
+
+				let stats;
+
+				if ( typeof player.getPlaybackStats === 'function' ) {
+					stats = player.getPlaybackStats();
+
+				} else if ( typeof player.getVideoInfo === 'function' ) {
+					const temp = player.getVideoInfo();
+					stats = {
+						backendVersion: maybe_call(player.getVersion, player),
+						bufferSize: temp.video_buffer_size,
+						displayResolution: `${temp.vid_display_width}x${temp.vid_display_height}`,
+						fps: temp.current_fps,
+						hlsLatencyBroadcaster: temp.hls_latency_broadcaster / 1000,
+						hlsLatencyEncoder: temp.hls_latency_encoder / 1000,
+						memoryUsage: `${temp.totalMemoryNumber} MB`,
+						playbackRate: temp.current_bitrate,
+						skippedFrames: temp.dropped_frames,
+						videoResolution: `${temp.vid_width}x${temp.vid_height}`
+					}
+				}
 
 				if ( ! stats )
 					return {stats};
 
-				const delay = stats.hls_latency_broadcaster / 1000;
 				let drift = 0;
 
 				if ( socket && socket.connected )
@@ -124,8 +143,8 @@ export default class Metadata extends Module {
 				return {
 					stats,
 					drift,
-					delay,
-					old: delay > 180
+					delay: stats.hlsLatencyBroadcaster,
+					old: stats.hlsLatencyBroadcaster > 180
 				}
 			},
 
@@ -171,7 +190,7 @@ export default class Metadata extends Module {
 				const stats = data.stats,
 					video_info = this.i18n.t(
 						'metadata.player-stats.video-info',
-						'Video: %{vid_width}x%{vid_height}p%{current_fps}\nPlayback Rate: %{current_bitrate|number} Kbps\nDropped Frames:%{dropped_frames|number}',
+						'Video: %{videoResolution}p%{fps}\nPlayback Rate: %{playbackRate|number} Kbps\nDropped Frames:%{skippedFrames|number}',
 						stats
 					);
 

src/sites/twitch-twilight/modules/player.jsx

@@ -221,13 +221,21 @@ export default class Player extends Module {
 		this.Player.ready((cls, instances) => {
 			const old_init = cls.prototype.initializePlayer;
 
-			cls.prototype.initializePlayer = function() {
-				const ret = old_init.call(this);
+			if ( old_init ) {
+				cls.prototype.initializePlayer = function(...args) {
+					const ret = old_init.call(this, ...args);
 					t.process(this);
 					return ret;
 				}
 
+			} else {
+				this.Player.on('will-mount', this.overrideInitialize, this);
+			}
+
 			for(const inst of instances) {
+				if ( ! old_init )
+					this.overrideInitialize(inst);
+
 				this.onMount(inst);
 				this.process(inst);
 			}
@@ -240,6 +248,18 @@ export default class Player extends Module {
 	}
 
 
+	overrideInitialize(inst) {
+		const t = this,
+			old_init = inst.initializePlayer;
+
+		inst.initializePlayer = function(...args) {
+			const ret = old_init.call(inst, ...args);
+			t.process(inst);
+			return ret;
+		}
+	}
+
+
 	onMount(inst) {
 		if ( this.settings.get('player.theatre.auto-enter') && inst.onTheatreChange )
 			inst.onTheatreChange(true);
@@ -450,11 +470,12 @@ export default class Player extends Module {
 					player = inst.player;
 
 				if ( player ) {
-					const amount = this.settings.get('player.volume-scroll-steps');
+					const amount = this.settings.get('player.volume-scroll-steps'),
+						volume = Math.max(0, Math.min(1, player.getVolume() + (delta > 0 ? amount : -amount)));
 
-					player.volume = Math.max(0, Math.min(1, player.volume + (delta > 0 ? amount : -amount)));
-					if ( player.volume !== 0 )
-						player.muted = false;
+					player.setVolume(volume);
+					if ( volume !== 0 )
+						player.setMuted(false);
 				}
 
 				e.preventDefault();
@@ -499,10 +520,12 @@ export default class Player extends Module {
 
 		this.cleanup(inst);
 
+		const klass = inst.player.constructor;
+
 		inst.player.destroy();
 		inst.playerRef.innerHTML = '';
 
-		inst.initializePlayer();
+		inst.initializePlayer(klass);
 	}
 
 

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

@@ -150,6 +150,10 @@
         max-height: 50rem;
     }
 
+    .whispers-thread {
+        overflow: visible !important;
+    }
+
     @media only screen and (max-height: 750px) {
         .emote-picker__tab-content {
             .twilight-root & {

src/utilities/compat/fine.js

@@ -224,7 +224,9 @@ export default class Fine extends Module {
 		}
 
 		if ( traverse_roots && inst && inst.props && inst.props.root ) {
-			let child = inst.props.root._reactRootContainer && inst.props.root._reactRootContainer.current;
+			const root = inst.props.root._reactRootContainer;
+			if ( root ) {
+				let child = root._internalRoot && root._internalRoot.current || root.current;
 				while(child) {
 					const result = this.searchTree(child, criteria, max_depth, depth+1, traverse_roots);
 					if ( result )
@@ -234,6 +236,7 @@ export default class Fine extends Module {
 				}
 			}
 		}
+	}
 
 
 	searchAll(node, criterias, max_depth=15, depth=0, data, traverse_roots = true) {
@@ -291,12 +294,15 @@ export default class Fine extends Module {
 		}
 
 		if ( traverse_roots && inst && inst.props && inst.props.root ) {
-			let child = inst.props.root._reactRootContainer && inst.props.root._reactRootContainer.current;
+			const root = inst.props.root._reactRootContainer;
+			if ( root ) {
+				let child = root._internalRoot && root._internalRoot.current || root.current;
 				while(child) {
 					this.searchAll(child, criterias, max_depth, depth+1, data, traverse_roots);
 					child = child.sibling;
 				}
 			}
+		}
 
 		return data.out;
 	}