4.0.0-rc13.21

* Fixed: Disable Autoplay, and other player settings not working correctly.
* Fixed: Metadata on Theater Hover not working correctly.

src/main.js

@@ -149,7 +149,7 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc13.20',
+	major: 4, minor: 0, revision: 0, extra: '-rc13.21',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss

@@ -58,7 +58,7 @@ body .whispers--theatre-mode.whispers--right-column-expanded {
 	right: 0 !important;
 }
 
-.channel-page-layout__scroll-area--theatre-mode .channel-info-bar {
+.channel-root__scroll-area--theatre-mode .channel-info-bar {
 	left: calc(var(--ffz-chat-width) + 5rem) !important;
 	right: 25rem !important;
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss

@@ -1,4 +1,4 @@
-.channel-page-layout__scroll-area--theatre-mode .channel-info-bar {
+.channel-root__scroll-area--theatre-mode .channel-info-bar {
 	position: fixed;
 	bottom: 10rem;
 	left: 5rem;
@@ -13,6 +13,6 @@
 	}
 }
 
-.channel-page-layout__scroll-area--theatre-mode:hover .channel-info-bar {
+.channel-root__scroll-area--theatre-mode:hover .channel-info-bar {
 	opacity: 0.75;
 }

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

@@ -355,10 +355,13 @@ export default class Player extends Module {
 
 
 	addEndedListener(inst) {
-		const p = inst.player;
+		let p = inst.player;
 		if ( ! p )
 			return;
 
+		if ( p.player )
+			p = p.player;
+
 		if ( inst._ffz_on_ended )
 			off(p, 'ended', inst._ffz_on_ended);
 
@@ -401,10 +404,13 @@ export default class Player extends Module {
 
 
 	addStateTags(inst) {
-		const p = inst.player;
+		let p = inst.player;
 		if ( ! p )
 			return;
 
+		if ( p.player )
+			p = p.player;
+
 		if ( inst._ffz_on_state ) {
 			off(p, 'ended', inst._ffz_on_state);
 			off(p, 'pause', inst._ffz_on_state);
@@ -424,21 +430,27 @@ export default class Player extends Module {
 
 
 	updateStateTags(inst) { // eslint-disable-line class-methods-use-this
-		const p = inst.playerRef,
+		const p = inst.playerRef;
-			player = inst.player;
+		let player = inst.player;
 		if ( ! p || ! player )
 			return;
 
+		if ( player.player )
+			player = player.player;
+
 		p.dataset.ended = player.ended;
 		p.dataset.paused = player.paused;
 	}
 
 
 	disableAutoplay(inst) {
-		const p = inst.player;
+		let p = inst.player;
 		if ( ! p )
 			return this.log.warn('disableAutoplay() called without Player');
 
+		if ( p.player )
+			p = p.player;
+
 		if ( p.readyState > 0 ) {
 			this.log.info('Player already playing. Pausing.');
 			return p.pause();
@@ -446,14 +458,17 @@ export default class Player extends Module {
 
 		if ( ! inst._ffz_autoplay_handler ) {
 			const listener = inst._ffz_autoplay_handler = () => {
-				inst._ffz_autoplay_handler = null;
-				p.pause();
-
 				setTimeout(() => {
-					off(p, 'play', listener);
+					this.log.info('Pausing due to playback.');
-					off(p, 'playing', listener);
+					inst._ffz_autoplay_handler = null;
-					off(p, 'contentShowing', listener);
+					p.pause();
-				}, 1000);
+
+					setTimeout(() => {
+						off(p, 'play', listener);
+						off(p, 'playing', listener);
+						off(p, 'contentShowing', listener);
+					}, 250);
+				});
 			}
 
 			on(p, 'play', listener);
@@ -477,8 +492,10 @@ export default class Player extends Module {
 
 		} else if ( enabled && ! inst._ffz_scroll_handler ) {
 			on(pr, 'wheel', inst._ffz_scroll_handler = e => {
-				const delta = e.wheelDelta || -(e.deltaY || e.detail || 0),
+				const delta = e.wheelDelta || -(e.deltaY || e.detail || 0);
-					player = inst.player;
+				let player = inst.player;
+				if ( player.player )
+					player = player.player;
 
 				if ( player ) {
 					const amount = this.settings.get('player.volume-scroll-steps'),
@@ -496,13 +513,17 @@ export default class Player extends Module {
 	}
 
 
-	addResetButton(inst) {
+	addResetButton(inst, tries = 0) {
 		const t = this,
 			el = inst.playerRef && inst.playerRef.querySelector('.player-buttons-right .pl-flex'),
 			container = el && el.parentElement;
 
-		if ( ! container )
+		if ( ! container ) {
+			if ( tries < 5 )
+				return setTimeout(this.addResetButton.bind(this, inst, (tries||0) + 1), 250);
+
 			return this.log.warn('Unable to find container element for Reset Button');
+		}
 
 		let tip = container.querySelector('.ffz--player-reset .player-tip');