Add: Auto Theatre Mode, Hide Whispers in Theatre. Fix: Player width in theatre. Cache message deleted status at chat line render to avoid a second render.

changelog.html

@@ -1,3 +1,18 @@
+<div class="list-header">4.0.0-beta1.3<span>@c89ba74a13dda449dfec</span> <time datetime="2017-11-16">(2017-11-16)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Automatic Theatre Mode</li>
+	<li>Added: Hide Whispers in Theatre Mode</li>
+	<li>Fixed: The player could be the wrong width in theatre mode when used with a custom chat width.</li>
+</ul>
+
+<div class="list-header">4.0.0-beta1.3<span>@c89ba74a13dda449dfec</span> <time datetime="2017-11-16">(2017-11-16)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Old-style RGB Loop color adjustment for the users that prefer it.</li>
+	<li>Fixed: Clicking chat when Chat Freeze is working will no longer set the chat to not auto-scroll.</li>
+	<li>Fixed: The Chat Freeze warning will not be displayed over the More Messages Below warning.</li>
+	<li>Fixed: Make proper use of the the chat buffer maximum size variable.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.3<span>@bdf2ec93761131252233</span> <time datetime="2017-11-16">(2017-11-16)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Issue with chat scrolling when the world doesn't make any sense.</li>

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

@@ -261,7 +261,7 @@ export default class ChatHook extends Module {
 		if ( width === 340 )
 			this.css_tweaks.style.delete('chat-width');
 		else
-			this.css_tweaks.style.set('chat-width', `.whispers--theatre-mode.whispers--right-column-expanded{right:${width}px!important}.channel-page__video-player--theatre-mode{width:calc(100% - ${width}px)!important}.channel-page__right-column{width:${width}px!important}`);
+			this.css_tweaks.style.set('chat-width', `.whispers--theatre-mode.whispers--right-column-expanded{right:${width}px!important}.persistent-player--theatre,.channel-page__video-player--theatre-mode{width:calc(100% - ${width}px)!important}.channel-page__right-column{width:${width}px!important}`);
 	}
 
 	updateLineBorders() {

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

@@ -4,8 +4,8 @@
 // Chat Line
 // ============================================================================
 
-import {createElement as e} from 'utilities/dom';
 import Module from 'utilities/module';
+//import {Color} from 'utilities/color';
 
 export default class ChatLine extends Module {
 	constructor(...args) {
@@ -57,9 +57,12 @@ export default class ChatLine extends Module {
 					is_action = msg.type === 1,
 					user = msg.user,
 					color = t.parent.colors.process(user.color),
+					/*bg_rgb = Color.RGBA.fromHex(user.color),
+					bg_color = bg_rgb.luminance() < .005 ? bg_rgb : bg_rgb.toHSLA().targetLuminance(0.005).toRGBA(),
+					bg_css = bg_color.toCSS(),*/
 					room = msg.channel ? msg.channel.slice(1) : undefined,
 
-					show = this.state.alwaysShowMessage || ! this.props.message.deleted;
+					show = this._ffz_show = this.state.alwaysShowMessage || ! this.props.message.deleted;
 
 				if ( ! msg.message && msg.messageParts )
 					detokenizeMessage(msg);
@@ -69,6 +72,7 @@ export default class ChatLine extends Module {
 
 				const out = e('div', {
 					className: 'chat-line__message',
+					//style: { backgroundColor: bg_css },
 					'data-room-id': this.props.channelID,
 					'data-room': room,
 					'data-user-id': user.userID,

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

@@ -0,0 +1,5 @@
+.video-player--theatre.video-player--logged-in .player.video-player__container {
+	bottom: 0;
+}
+
+.whispers--theatre-mode { display: none }

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

@@ -41,6 +41,24 @@ export default class Player extends Module {
 			}
 		});
 
+		this.settings.add('player.theatre.no-whispers', {
+			default: false,
+			ui: {
+				path: 'Channel > Player >> Theatre Mode',
+				title: 'Hide whispers when Theatre Mode is enabled.',
+				component: 'setting-check-box'
+			},
+			changed: val => this.css_tweaks.toggle('theatre-no-whispers', val)
+		});
+
+		this.settings.add('player.theatre.auto-enter', {
+			default: false,
+			ui: {
+				path: 'Channel > Player >> Theatre Mode',
+				title: 'Automatically open Theatre Mode when visiting a channel.',
+				component: 'setting-check-box'
+			}
+		});
 
 		this.settings.add('player.ext-hide', {
 			default: 0,
@@ -91,10 +109,13 @@ export default class Player extends Module {
 	onEnable() {
 		this.css_tweaks.toggle('player-volume', this.settings.get('player.volume-always-shown'));
 		this.css_tweaks.toggle('player-ext-mouse', !this.settings.get('player.ext-interaction'));
+		this.css_tweaks.toggle('theatre-no-whispers', this.settings.get('player.theatre.no-whispers'));
 		this.updateHideExtensions();
 
 		const t = this;
 
+		this.Player.on('mount', this.onMount, this);
+
 		this.Player.ready((cls, instances) => {
 			const old_init = cls.prototype.initializePlayer;
 
@@ -104,8 +125,10 @@ export default class Player extends Module {
 				return ret;
 			}
 
-			for(const inst of instances)
+			for(const inst of instances) {
+				this.onMount(inst);
 				this.process(inst);
+			}
 		});
 
 		this.on('i18n:update', () => {
@@ -115,6 +138,12 @@ export default class Player extends Module {
 	}
 
 
+	onMount(inst) {
+		if ( this.settings.get('player.theatre.auto-enter') && inst.onTheatreChange )
+			inst.onTheatreChange(true);
+	}
+
+
 	process(inst) {
 		this.addResetButton(inst);
 		this.updateVolumeScroll(inst);