4.20.51

* Added: Setting to display chat more compactly in Portrait Mode.
* Fixed: Display the Picture by Picture player more appropriately in Portrait Mode.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.20.50",
+  "version": "4.20.51",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {

src/experiments.json

@@ -11,8 +11,8 @@
 		"name": "API-Based Link Lookups",
 		"description": "Use the new API to look up links instead of the socket cluster.",
 		"groups": [
-			{"value": true, "weight": 75},
-			{"value": false, "weight": 25}
+			{"value": true, "weight": 50},
+			{"value": false, "weight": 50}
 		]
 	}
 }

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

@@ -392,6 +392,13 @@ export default class ChatHook extends Module {
 
 		this.settings.add('chat.points.show-rewards', {
 			default: true,
+			requires: ['layout.portrait-min-chat'],
+			process(ctx, val) {
+				if ( ctx.get('layout.portrait-min-chat') )
+					return false;
+
+				return val;
+			},
 			ui: {
 				path: 'Chat > Channel Points >> Behavior',
 				title: 'Allow available rewards to appear next to the Channel Points button.',

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss

@@ -7,6 +7,7 @@
 .chat-list__lines .chat-line__raid,
 .chat-list__lines .chat-line__bits-charity,
 .user-notice-line,
+.ffz-notice-line,
 .chat-line__message:not(.chat-line--inline) {
 	&:not(.ffz-custom-color) {
 		background-color: transparent !important;

src/sites/twitch-twilight/modules/css_tweaks/styles/portrait-chat.scss

@@ -0,0 +1,26 @@
+.chat-input > div:last-child {
+	display: flex;
+
+	& > div {
+		flex-grow: 3;
+		align-self: flex-end;
+	}
+
+	.chat-input__buttons-container {
+		flex-grow: 1;
+		margin-top: 0 !important;
+		margin-bottom: 0.5rem;
+		margin-left: 1rem;
+	}
+}
+
+.right-column:not(.right-column--collapsed) {
+	.right-column__toggle-visibility {
+		top: 0;
+	}
+}
+
+.chat-viewers__header,
+.stream-chat-header {
+	height: 3rem !important;
+}

src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss

@@ -28,6 +28,15 @@
 		}
 	}
 
+	.picture-by-picture-player {
+		position: absolute;
+		z-index: 100;
+		top: 0;
+		right: 5rem;
+		height: 20vh;
+		width: calc(20vh * calc(16 / 9)) !important;
+	}
+
 	.persistent-player.persistent-player--theatre {
 		.ffz--portrait-invert & {
 			top: unset !important;

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

@@ -76,6 +76,24 @@ export default class Layout extends Module {
 					return val;
 				}
 			}
+		});
+
+		this.settings.add('layout.portrait-min-chat', {
+			default: false,
+			requires: ['layout.use-portrait'],
+			process(ctx, val) {
+				if ( ! ctx.get('layout.use-portrait') )
+					return false;
+
+				return val;
+			},
+			ui: {
+				path: 'Appearance > Layout >> Channel',
+				title: 'Use compact chat in Portrait Mode.',
+				description: 'When enabled, this minimizes the chat header and places the chat input box in line with the chat buttons in order to present a more compact chat able to display more lines with limited vertical space.',
+				component: 'setting-check-box'
+			},
+			changed: val => this.css_tweaks.toggle('portrait-chat', val)
 		})
 
 		this.settings.add('layout.use-portrait', {
@@ -192,6 +210,7 @@ export default class Layout extends Module {
 		this.on(':update-nav', this.updateNavLinks, this);
 		this.on(':resize', this.handleResize, this);
 
+		this.css_tweaks.toggle('portrait-chat', this.settings.get('layout.portrait-min-chat'));
 		this.css_tweaks.toggle('portrait', this.settings.get('layout.inject-portrait'));
 		this.css_tweaks.toggle('portrait-swapped', this.settings.get('layout.use-portrait-swapped'));
 		this.css_tweaks.toggle('portrait-metadata', this.settings.get('layout.use-portrait-meta'));