Fix FFZ settings not showing up in chat settings menu. Fix overlay extensions not hiding properly. Fix #384. Update subscriber notifications.

changelog.html

@@ -1,3 +1,11 @@
+<div class="list-header">4.0.0-beta1.6<span>@66bf9e883f32aba529af</span> <time datetime="2018-03-11">(2018-03-11)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Metadata covering chat in theater mode with Swap Sidebars enabled.</li>
+	<li>Fixed: Player Overlay Extensions not being hidden properly.</li>
+	<li>Fixed: FFZ settings not being added to the chat settings menu.</li>
+	<li>Changed: Display subscriber notifications as <code>Tier X</code> like Twitch does rather than with the monetary value.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.6<span>@0a9fd7bd2f3805c7acc9</span> <time datetime="2018-03-07">(2018-03-07)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Gap at the top of the page with Minimize Navigation enabled.</li>

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

@@ -8,9 +8,9 @@ import Module from 'utilities/module';
 //import {Color} from 'utilities/color';
 
 const SUB_TIERS = {
-	1000: '$4.99',
-	2000: '$9.99',
-	3000: '$24.99'
+	1000: 1,
+	2000: 2,
+	3000: 3
 };
 
 export default class ChatLine extends Module {
@@ -148,7 +148,7 @@ export default class ChatLine extends Module {
 				if ( msg.ffz_type === 'resub' ) {
 					const plan = msg.sub_plan || {},
 						months = msg.sub_months || 1,
-						tier = SUB_TIERS[plan.plan] || '$4.99';
+						tier = SUB_TIERS[plan.plan] || 1;
 
 					cls = 'chat-line__subscribe';
 					out = [
@@ -157,7 +157,7 @@ export default class ChatLine extends Module {
 								user: user.userDisplayName,
 								plan: plan.prime ?
 									t.i18n.t('chat.sub.twitch-prime', 'Twitch Prime') :
-									t.i18n.t('chat.sub.plan', 'a %{tier} sub', {tier})
+									t.i18n.t('chat.sub.plan', 'a Tier %{tier} sub', {tier})
 							}),
 							months > 1 ?
 								` ${t.i18n.t(

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

@@ -19,7 +19,7 @@ export default class SettingsMenu extends Module {
 
 		this.SettingsMenu = this.fine.define(
 			'chat-settings',
-			n => n.renderUniversalOptions && n.renderModTools
+			n => n.renderUniversalOptions && n.dismissRaidsTooltip
 		);
 	}
 
@@ -55,10 +55,7 @@ export default class SettingsMenu extends Module {
 	}
 
 	click(inst) {
-		const mb = this.resolve('site.menu_button');
-		if ( mb )
-			mb.emit(':clicked');
-
+		this.emit('site.menu_button:clicked');
 		const parent = this.fine.searchParent(inst, n => n.toggleBalloonId);
 		parent && parent.handleButtonClick();
 	}

src/sites/twitch-twilight/modules/css_tweaks/index.js

@@ -17,8 +17,8 @@ const CLASSES = {
 	'side-closed-friends': '.side-nav--collapsed .online-friends',
 	'side-closed-rec-channels': '.side-nav--collapsed .recommended-channels',
 
-	'player-ext': '.player-extensions',
-	'player-ext-hover': '.player[data-controls="false"] .player-extensions',
+	'player-ext': '.player .extension-overlay',
+	'player-ext-hover': '.player:not([data-controls="true"]) .extension-overlay',
 
 	'pinned-cheer': '.pinned-cheer,.pinned-cheer-v2',
 	'whispers': '.whispers',

src/sites/twitch-twilight/modules/css_tweaks/styles/player-ext-mouse.scss

@@ -1,3 +1,3 @@
-.player .extension-overlay__iframe {
+.player .extension-overlay {
 	pointer-events: none !important;
 }

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

@@ -57,3 +57,8 @@ body .whispers--theatre-mode.whispers--right-column-expanded {
 	left: var(--ffz-chat-width) !important;
 	right: 0 !important;
 }
+
+.channel-page-layout__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,8 +1,8 @@
 .channel-page-layout__scroll-area--theatre-mode .channel-info-bar {
 	position: fixed;
-	bottom: 100px;
-	left: 50px;
-	right: calc(var(--ffz-chat-width) + 250px);
+	bottom: 10rem;
+	left: 5rem;
+	right: calc(var(--ffz-chat-width) + 25rem);
 	z-index: 3500;
 	opacity: 0;
 }

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

@@ -203,9 +203,36 @@ export default class Player extends Module {
 
 	process(inst) {
 		this.addResetButton(inst);
+		this.addControlVisibility(inst);
 		this.updateVolumeScroll(inst);
 	}
 
+	addControlVisibility(inst) { // eslint-disable-line class-methods-use-this
+		const p = inst.playerRef;
+		if ( ! p )
+			return;
+
+		if ( inst._ffz_visibility_handler ) {
+			p.removeEventListener('mousemove', inst._ffz_visibility_handler);
+			p.removeEventListener('mouseleave', inst._ffz_visibility_handler);
+		}
+
+		let timer;
+
+		const c = () => { p.dataset.controls = false };
+		const f = inst._ffz_visibility_handler = e => {
+			clearTimeout(timer);
+			if ( e.type === 'mouseleave' )
+				return c();
+
+			timer = setTimeout(c, 5000);
+			p.dataset.controls = true;
+		};
+
+		p.addEventListener('mousemove', f);
+		p.addEventListener('mouseleave', f);
+	}
+
 	disableAutoplay(inst) {
 		if ( ! inst.player ) {
 			this.log.warn('disableAutoplay() called but Player was not ready');