From 261c461481a5eb14e27b57336ef5c907c1c63e14 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Wed, 27 May 2020 15:44:37 -0400
Subject: [PATCH] 4.19.12

**Note**: This update does not fix all issues with features not working on Twitch's new channel page layout. Due to changes Twitch has been making to their coding practices, it is significantly harder to support their newer pages. We are still trying to determine the best way to support things going forward.

* Added: Chat Actions can be copied as JSON and imported from JSON. (Closes #782)
* Fixed: The player stuttering when attempting to play a clip when the Audio Compressor is set to be enabled by default.
* Fixed: Custom chat widths, swapping sidebars, and portrait mode not working correctly with the new channel page layout. (Closes #799, Affects #794)
* Fixed: Square Avatars not working correctly on the new channel page layout.
* Fixed: Searching settings would not properly search for items in Experiments.
* Fixed: Emotes ending in punctuation (specifically: `.`, `,`, and `!`) were not being displayed correctly.
* Fixed: The order of actions reversing after an inheritance point. (Closes #791)
* Changed: Rename `Chat > Bits and Cheering > Display Top Cheerers` to `Chat > Appearance > Display Leaderboard` to bring it in line with the current state of the feature.
* Removed: Option to hide offline channels from sidebar. This is no longer trivial to implement due to Twitch changes. (Closes #801)
---
 package.json                                  |  2 +-
 src/experiments.js                            | 22 ++++++
 src/modules/chat/index.js                     | 13 +++-
 .../main_menu/components/action-editor.vue    | 40 ++++++++++-
 .../main_menu/components/chat-actions.vue     | 69 ++++++++++++++++++-
 .../main_menu/components/experiments.vue      | 48 ++++++++++++-
 src/modules/main_menu/index.js                |  1 +
 src/settings/types.js                         | 11 +--
 .../twitch-twilight/modules/chat/index.js     |  8 ++-
 .../modules/css_tweaks/index.js               | 22 ++++--
 .../modules/css_tweaks/styles/chat-fix.scss   | 25 +++++++
 .../modules/css_tweaks/styles/portrait.scss   |  4 ++
 .../css_tweaks/styles/square-avatars.scss     |  5 ++
 src/sites/twitch-twilight/modules/player.jsx  | 10 ++-
 14 files changed, 255 insertions(+), 25 deletions(-)
 create mode 100644 src/sites/twitch-twilight/modules/css_tweaks/styles/chat-fix.scss

diff --git a/package.json b/package.json
index 7400d916..e977b54e 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.19.11",
+  "version": "4.19.12",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {
diff --git a/src/experiments.js b/src/experiments.js
index beea2da5..282807b4 100644
--- a/src/experiments.js
+++ b/src/experiments.js
@@ -38,6 +38,27 @@ export default class ExperimentManager extends Module {
 		this.settings.addUI('experiments', {
 			path: 'Debugging > Experiments',
 			component: 'experiments',
+			no_filter: true,
+
+			getExtraTerms: () => {
+				const values = [];
+
+				for(const [key,val] of Object.entries(this.experiments)) {
+					values.push(key);
+					if ( val.name )
+						values.push(val.name);
+					if ( val.description )
+						values.push(val.description);
+				}
+
+				for(const [key, val] of Object.entries(this.getTwitchExperiments())) {
+					values.push(key);
+					if ( val.name )
+						values.push(val.name);
+				}
+
+				return values;
+			},
 
 			unique_id: () => this.unique_id,
 
@@ -103,6 +124,7 @@ export default class ExperimentManager extends Module {
 		}
 
 		this.log.info(`Loaded information on ${Object.keys(data).length} experiments.${changed > 0 ? ` ${changed} values updated.` : ''}`);
+		//this.emit(':loaded');
 	}
 
 
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index 248d0a6e..ec4a11d3 100644
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@@ -24,6 +24,7 @@ import Actions from './actions';
 
 export const SEPARATORS = '[\\s`~<>!-#%-\\x2A,-/:;\\x3F@\\x5B-\\x5D_\\x7B}\\u00A1\\u00A7\\u00AB\\u00B6\\u00B7\\u00BB\\u00BF\\u037E\\u0387\\u055A-\\u055F\\u0589\\u058A\\u05BE\\u05C0\\u05C3\\u05C6\\u05F3\\u05F4\\u0609\\u060A\\u060C\\u060D\\u061B\\u061E\\u061F\\u066A-\\u066D\\u06D4\\u0700-\\u070D\\u07F7-\\u07F9\\u0830-\\u083E\\u085E\\u0964\\u0965\\u0970\\u0AF0\\u0DF4\\u0E4F\\u0E5A\\u0E5B\\u0F04-\\u0F12\\u0F14\\u0F3A-\\u0F3D\\u0F85\\u0FD0-\\u0FD4\\u0FD9\\u0FDA\\u104A-\\u104F\\u10FB\\u1360-\\u1368\\u1400\\u166D\\u166E\\u169B\\u169C\\u16EB-\\u16ED\\u1735\\u1736\\u17D4-\\u17D6\\u17D8-\\u17DA\\u1800-\\u180A\\u1944\\u1945\\u1A1E\\u1A1F\\u1AA0-\\u1AA6\\u1AA8-\\u1AAD\\u1B5A-\\u1B60\\u1BFC-\\u1BFF\\u1C3B-\\u1C3F\\u1C7E\\u1C7F\\u1CC0-\\u1CC7\\u1CD3\\u2010-\\u2027\\u2030-\\u2043\\u2045-\\u2051\\u2053-\\u205E\\u207D\\u207E\\u208D\\u208E\\u2329\\u232A\\u2768-\\u2775\\u27C5\\u27C6\\u27E6-\\u27EF\\u2983-\\u2998\\u29D8-\\u29DB\\u29FC\\u29FD\\u2CF9-\\u2CFC\\u2CFE\\u2CFF\\u2D70\\u2E00-\\u2E2E\\u2E30-\\u2E3B\\u3001-\\u3003\\u3008-\\u3011\\u3014-\\u301F\\u3030\\u303D\\u30A0\\u30FB\\uA4FE\\uA4FF\\uA60D-\\uA60F\\uA673\\uA67E\\uA6F2-\\uA6F7\\uA874-\\uA877\\uA8CE\\uA8CF\\uA8F8-\\uA8FA\\uA92E\\uA92F\\uA95F\\uA9C1-\\uA9CD\\uA9DE\\uA9DF\\uAA5C-\\uAA5F\\uAADE\\uAADF\\uAAF0\\uAAF1\\uABEB\\uFD3E\\uFD3F\\uFE10-\\uFE19\\uFE30-\\uFE52\\uFE54-\\uFE61\\uFE63\\uFE68\\uFE6A\\uFE6B\\uFF01-\\uFF03\\uFF05-\\uFF0A\\uFF0C-\\uFF0F\\uFF1A\\uFF1B\\uFF1F\\uFF20\\uFF3B-\\uFF3D\\uFF3F\\uFF5B\\uFF5D\\uFF5F-\\uFF65]';
 
+const EMOTE_CHARS = /[ .+!]/;
 
 export default class Chat extends Module {
 	constructor(...args) {
@@ -1184,12 +1185,18 @@ export default class Chat extends Module {
 					if ( Array.isArray(raw_emote) )
 						return msg.ffz_emotes = msg.emotes;
 
-					const em = emotes[raw_emote.id] = emotes[raw_emote.id] || [],
-						idx = chars.indexOf(' ', raw_emote.startIndex);
+					const em = emotes[raw_emote.id] = emotes[raw_emote.id] || [];
+					let idx = raw_emote.startIndex + 1;
+					while(idx < chars.length) {
+						if ( EMOTE_CHARS.test(chars[idx]) )
+							break;
+
+						idx++;
+					}
 
 					em.push({
 						startIndex: raw_emote.startIndex,
-						endIndex: (idx === -1 ? chars.length : idx) - 1
+						endIndex: idx - 1
 					});
 				}
 
diff --git a/src/modules/main_menu/components/action-editor.vue b/src/modules/main_menu/components/action-editor.vue
index 8a8c7697..8c6cfb60 100644
--- a/src/modules/main_menu/components/action-editor.vue
+++ b/src/modules/main_menu/components/action-editor.vue
@@ -14,6 +14,15 @@
 					{{ t('setting.actions.visible', 'visible: {list}', {list: visibility}) }}
 				</div>
 			</template>
+			<template v-else-if="copying">
+				<textarea
+					ref="json"
+					v-model="json"
+					readonly
+					class="tw-full-width tw-full-height tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input"
+					@focus="$event.target.select()"
+				/>
+			</template>
 			<template v-else>
 				<section>
 					<h5>{{ t('setting.actions.appearance', 'Appearance') }}</h5>
@@ -369,7 +378,14 @@
 		</div>
 
 		<div class="tw-mg-l-1 tw-border-l tw-pd-l-1 tw-flex tw-flex-wrap tw-flex-column tw-justify-content-start tw-align-items-start">
-			<template v-if="editing">
+			<template v-if="copying">
+				<button class="tw-button tw-button--text" @click="copying = false">
+					<span class="tw-button__text ffz-i-cancel">
+						{{ t('setting.cancel', 'Cancel') }}
+					</span>
+				</button>
+			</template>
+			<template v-if="editing && ! copying">
 				<button class="tw-button tw-button--text" @click="save">
 					<span class="tw-button__text ffz-i-floppy">
 						{{ t('setting.save', 'Save') }}
@@ -380,8 +396,13 @@
 						{{ t('setting.cancel', 'Cancel') }}
 					</span>
 				</button>
+				<button class="tw-button tw-button--text" @click="prepareCopy">
+					<span class="tw-button__text ffz-i-docs">
+						{{ t('setting.copy-json', 'Copy') }}
+					</span>
+				</button>
 			</template>
-			<template v-else-if="deleting">
+			<template v-else-if="deleting && ! copying">
 				<button class="tw-button tw-button--text" @click="$emit('remove', action)">
 					<span class="tw-button__text ffz-i-trash">
 						{{ t('setting.delete', 'Delete') }}
@@ -393,7 +414,7 @@
 					</span>
 				</button>
 			</template>
-			<template v-else>
+			<template v-else-if="! copying">
 				<button
 					v-if="canEdit"
 					class="tw-button tw-button--text"
@@ -425,6 +446,7 @@ export default {
 	data() {
 		return {
 			id: id++,
+			copying: false,
 			deleting: false,
 			editing: false,
 			edit_data: null
@@ -432,6 +454,10 @@ export default {
 	},
 
 	computed: {
+		json() {
+			return JSON.stringify(this.display)
+		},
+
 		display() {
 			if ( this.editing )
 				return this.edit_data;
@@ -692,7 +718,15 @@ export default {
 			this.cancel();
 		},
 
+		prepareCopy() {
+			this.copying = true;
+			requestAnimationFrame(() => {
+				this.$refs.json.focus();
+			});
+		},
+
 		cancel() {
+			this.copying = false;
 			this.editing = false;
 			this.edit_data = null;
 		},
diff --git a/src/modules/main_menu/components/chat-actions.vue b/src/modules/main_menu/components/chat-actions.vue
index b37cdd66..1d912c5a 100644
--- a/src/modules/main_menu/components/chat-actions.vue
+++ b/src/modules/main_menu/components/chat-actions.vue
@@ -222,10 +222,38 @@
 					v-if="add_open"
 					color="background-alt-2"
 					dir="down-right"
-					size="sm"
+					:size="add_pasting ? 'md' : 'sm'"
 				>
 					<simplebar classes="ffz-mh-30">
-						<div class="tw-pd-y-1">
+						<div v-if="add_pasting" class="tw-pd-1">
+							<div class="tw-flex tw-align-items-center">
+								<input
+									ref="paste"
+									:placeholder="t('setting.paste-json.json', '[json]')"
+									class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input"
+									@keydown.enter="addFromJSON"
+								>
+								<button
+									class="tw-mg-l-05 tw-button"
+									@click="addFromJSON"
+								>
+									<span class="tw-button__text ffz-i-plus">
+										{{ t('setting.add', 'Add') }}
+									</span>
+								</button>
+							</div>
+						</div>
+						<div v-else class="tw-pd-y-1">
+							<button
+								class="tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive tw-full-width"
+								@click="add_pasting = true"
+							>
+								<div class="tw-flex tw-align-items-center tw-pd-y-05 tw-pd-x-1">
+									<div class="tw-flex-grow-1 tw-mg-r-1">
+										{{ t('setting.paste-json', 'Paste JSON') }}
+									</div>
+								</div>
+							</button>
 							<template v-for="(preset, idx) in presets">
 								<div
 									v-if="preset.divider"
@@ -348,6 +376,7 @@ export default {
 
 			maybe_clear: false,
 			add_open: false,
+			add_pasting: false
 		}
 	},
 
@@ -548,10 +577,46 @@ export default {
 
 		closeAdd() {
 			this.add_open = false;
+			this.add_pasting = false;
 		},
 
 		toggleAdd() {
 			this.add_open = ! this.add_open;
+			this.add_pasting = false;
+		},
+
+		addFromJSON() {
+			let value = this.$refs.paste.value;
+			this.closeAdd();
+
+			if ( value ) {
+				try {
+					value = JSON.parse(value);
+				} catch(err) {
+					alert(err); // eslint-disable-line no-alert
+					return;
+				}
+
+				if ( ! value.appearance )
+					value.appearance = {};
+
+				if ( ! value.appearance.type )
+					value.appearance.type = 'text';
+
+				if ( value.appearance.type === 'text' && ! value.appearance.text )
+					value.appearance.text = 'C';
+
+				if ( value.appearance.type === 'icon' && ! value.appearance.icon )
+					value.appearance.icon = 'ffz-i-ok';
+
+				if ( ! value.display )
+					value.display = {};
+
+				if ( ! value.action )
+					value.action = 'chat';
+
+				this.add({v: value});
+			}
 		},
 
 		populate() {
diff --git a/src/modules/main_menu/components/experiments.vue b/src/modules/main_menu/components/experiments.vue
index e28bdfbb..7a278460 100644
--- a/src/modules/main_menu/components/experiments.vue
+++ b/src/modules/main_menu/components/experiments.vue
@@ -28,7 +28,7 @@
 
 		<div class="ffz--experiment-list">
 			<section
-				v-for="({key, exp}) of sorted(ffz_data)"
+				v-for="({key, exp}) of visible_ffz"
 				:key="key"
 				:data-key="key"
 			>
@@ -72,6 +72,9 @@
 			<div v-if="! Object.keys(ffz_data).length">
 				{{ t('setting.experiments.none', 'There are no current experiments.') }}
 			</div>
+			<div v-else-if="! visible_ffz.length">
+				{{ t('setting.experiments.none-filter', 'There are no matching experiments.') }}
+			</div>
 		</div>
 
 		<h3 class="tw-mg-t-5 tw-mg-b-1">
@@ -80,7 +83,7 @@
 
 		<div class="ffz--experiment-list">
 			<section
-				v-for="({key, exp}) of sorted(twitch_data)"
+				v-for="({key, exp}) of visible_twitch"
 				:key="key"
 				:data-key="key"
 			>
@@ -146,6 +149,9 @@
 			<div v-if="! Object.keys(twitch_data).length">
 				{{ t('setting.experiments.none', 'There are no current experiments.') }}
 			</div>
+			<div v-else-if="! visible_twitch.length">
+				{{ t('setting.experiments.none-filter', 'There are no matching experiments.') }}
+			</div>
 		</div>
 	</div>
 </template>
@@ -154,8 +160,16 @@
 
 import {has} from 'utilities/object';
 
+function matches(exp, filter) {
+	return (exp.key && exp.key.toLowerCase().includes(filter)) ||
+			(exp.exp && (
+				(exp.exp.name && exp.exp.name.toLowerCase().includes(filter)) ||
+				(exp.exp.description && exp.exp.description.toLowerCase().includes(filter))
+			));
+}
+
 export default {
-	props: ['item'],
+	props: ['item', 'filter'],
 
 	data() {
 		return {
@@ -166,6 +180,34 @@ export default {
 		}
 	},
 
+	computed: {
+		sorted_ffz() {
+			return this.sorted(this.ffz_data);
+		},
+
+		visible_ffz() {
+			const items = this.sorted_ffz,
+				f = this.filter && this.filter.toLowerCase();
+			if ( ! f )
+				return items;
+
+			return items.filter(x => matches(x, f));
+		},
+
+		sorted_twitch() {
+			return this.sorted(this.twitch_data);
+		},
+
+		visible_twitch() {
+			const items = this.sorted_twitch,
+				f = this.filter && this.filter.toLowerCase();
+			if ( ! f )
+				return items;
+
+			return items.filter(x => matches(x, f));
+		}
+	},
+
 	created() {
 		for(const key in this.ffz_data)
 			if ( has(this.ffz_data, key) ) {
diff --git a/src/modules/main_menu/index.js b/src/modules/main_menu/index.js
index d3bf7bbf..9d20afe3 100644
--- a/src/modules/main_menu/index.js
+++ b/src/modules/main_menu/index.js
@@ -160,6 +160,7 @@ export default class MainMenu extends Module {
 		await this.site.awaitElement(Dialog.EXCLUSIVE);
 
 		this.on('addons:added', this.scheduleUpdate, this);
+		this.on('experiments:enabled', this.scheduleUpdate, this);
 		this.on('i18n:update', this.scheduleUpdate, this);
 
 		this.dialog.on('show', () => {
diff --git a/src/settings/types.js b/src/settings/types.js
index af5bfe4b..cd847f6e 100644
--- a/src/settings/types.js
+++ b/src/settings/types.js
@@ -54,14 +54,15 @@ export const array_merge = {
 
 	get(key, profiles, definition, log) {
 		const values = [],
-			trailing = [],
 			sources = [];
-
+		let trailing = [];
 		let had_value = false;
 
 		for(const profile of profiles)
 			if ( profile.has(key) ) {
-				const value = profile.get(key);
+				const value = profile.get(key),
+					trail = [];
+
 				if ( ! Array.isArray(value) ) {
 					log.warn(`Profile #${profile.id} has an invalid value for "${key}" of type ${typeof value}. Skipping.`);
 					continue;
@@ -74,11 +75,13 @@ export const array_merge = {
 					if ( val.t === 'inherit' )
 						is_trailing = true;
 					else if ( is_trailing )
-						trailing.unshift(val.v);
+						trail.push(val.v);
 					else
 						values.push(val.v);
 				}
 
+				trailing = trail.concat(trailing);
+
 				// If we didn't run into an inherit, don't inherit.
 				if ( ! is_trailing && ! definition.always_inherit )
 					break;
diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js
index b5b7980c..752667db 100644
--- a/src/sites/twitch-twilight/modules/chat/index.js
+++ b/src/sites/twitch-twilight/modules/chat/index.js
@@ -375,9 +375,9 @@ export default class ChatHook extends Module {
 			},
 
 			ui: {
-				path: 'Chat > Bits and Cheering >> Appearance',
-				title: 'Display Top Cheerers',
-				description: 'By default, this inherits its value from Display Bits.',
+				path: 'Chat > Appearance >> Community',
+				title: 'Display Leaderboard',
+				description: 'The leaderboard shows the top cheerers and sub gifters in a channel.\n\nBy default due to a previous implementation, this inherits its value from Chat > Bits and Cheering > Display Bits.',
 				component: 'setting-check-box'
 			}
 		});
@@ -550,6 +550,7 @@ export default class ChatHook extends Module {
 		this.css_tweaks.setVariable('chat-line-height', `${lh/10}rem`);
 		this.css_tweaks.setVariable('chat-font-family', font);
 		this.css_tweaks.setVariable('chat-width', `${width/10}rem`);
+		this.css_tweaks.setVariable('negative-chat-width', `${-width/10}rem`);
 
 		this.css_tweaks.toggle('chat-font', size !== 12 || font);
 		this.css_tweaks.toggle('chat-width', this.settings.get('chat.use-width'));
@@ -558,6 +559,7 @@ export default class ChatHook extends Module {
 		this.css_tweaks.toggle('emote-alignment-baseline', emote_alignment === 2);
 
 		this.emit(':update-chat-css');
+		this.emit('site.player:fix-player');
 	}
 
 	updateLineBorders() {
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/index.js b/src/sites/twitch-twilight/modules/css_tweaks/index.js
index 3191bd97..c0accc14 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/index.js
+++ b/src/sites/twitch-twilight/modules/css_tweaks/index.js
@@ -18,7 +18,7 @@ const CLASSES = {
 	'side-friends': '.side-nav .online-friends',
 	'side-closed-friends': '.side-nav--collapsed .online-friends',
 	'side-closed-rec-channels': '.side-nav--collapsed .recommended-channels',
-	'side-offline-channels': '.side-nav-card__link[href*="/videos/"],.side-nav-card[href*="/videos/"]',
+	//'side-offline-channels': '.side-nav-card__link[href*="/videos/"],.side-nav-card[href*="/videos/"]',
 	'side-rerun-channels': '.side-nav .ffz--side-nav-card-rerun',
 
 	'community-highlights': '.community-highlight-stack__card',
@@ -59,6 +59,17 @@ export default class CSSTweaks extends Module {
 
 		// Layout
 
+		this.settings.add('layout.use-chat-fix', {
+			requires: ['layout.swap-sidebars', 'layout.use-portrait', 'chat.use-width'],
+			process(ctx) {
+				return ctx.get('layout.swap-sidebars') || ctx.get('layout.use-portrait') || ctx.get('chat.use-width')
+			},
+			changed: val => {
+				this.toggle('chat-fix', val);
+				this.emit('site.player:fix-player');
+			}
+		});
+
 		this.settings.add('layout.side-nav.show', {
 			default: true,
 			ui: {
@@ -127,7 +138,7 @@ export default class CSSTweaks extends Module {
 			changed: val => this.toggleHide('side-rec-friends', !val)
 		});
 
-		this.settings.add('layout.side-nav.hide-offline', {
+		/*this.settings.add('layout.side-nav.hide-offline', {
 			default: false,
 			ui: {
 				path: 'Appearance > Layout >> Side Navigation',
@@ -135,7 +146,7 @@ export default class CSSTweaks extends Module {
 				component: 'setting-check-box'
 			},
 			changed: val => this.toggleHide('side-offline-channels', val)
-		});
+		});*/
 
 		this.settings.add('layout.side-nav.rerun-style', {
 			default: 1,
@@ -307,6 +318,7 @@ export default class CSSTweaks extends Module {
 	}
 
 	onEnable() {
+		this.toggle('chat-fix', this.settings.get('layout.use-chat-fix'));
 		this.toggle('swap-sidebars', this.settings.get('layout.swap-sidebars'));
 		this.toggle('minimal-navigation', this.settings.get('layout.minimal-navigation'));
 		this.toggle('theatre-nav', this.settings.get('layout.theatre-navigation'));
@@ -314,7 +326,7 @@ export default class CSSTweaks extends Module {
 		this.toggle('hide-side-nav-avatars', ! this.settings.get('layout.side-nav.show-avatars'));
 		this.toggle('hide-side-nav', !this.settings.get('layout.side-nav.show'));
 		this.toggleHide('side-rec-friends', !this.settings.get('layout.side-nav.show-rec-friends'));
-		this.toggleHide('side-offline-channels', this.settings.get('layout.side-nav.hide-offline'));
+		//this.toggleHide('side-offline-channels', this.settings.get('layout.side-nav.hide-offline'));
 		this.toggleHide('prime-offers', !this.settings.get('layout.prime-offers'));
 		this.toggleHide('top-discover', !this.settings.get('layout.discover'));
 
@@ -339,6 +351,8 @@ export default class CSSTweaks extends Module {
 
 		this.updateFont();
 		this.updateTopNav();
+
+		this.emit('site.player:fix-player');
 	}
 
 	updateTopNav() {
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-fix.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-fix.scss
new file mode 100644
index 00000000..fd96aa3a
--- /dev/null
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-fix.scss
@@ -0,0 +1,25 @@
+body .video-watch-page__right-column,
+body .clips-watch-page__right-column,
+body .channel-page__right-column,
+body .right-column:not(.right-column--collapsed),
+body .channel-videos__right-column,
+body .channel-clips__sidebar,
+body .channel-events__sidebar,
+body .channel-follow-listing__right-column,
+body .channel-follow-listing__right-column,
+body .channel-root__right-column {
+	width: 34rem;
+}
+
+.channel-root__right-column--expanded {
+	position: initial;
+	transform: none !important;
+}
+
+.toggle-visibility__right-column--expanded {
+	transform: none !important;
+}
+
+.channel-root--hold-chat+.persistent-player, .channel-root--watch-chat+.persistent-player, .channel-root__info--with-chat .channel-info-content, .channel-root__player--with-chat {
+	width: 100% !important;
+}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss
index e713f33b..d05de6f8 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss
@@ -50,6 +50,10 @@
 		right: 0 !important;
 	}
 
+	.channel-root__right-column--expanded {
+		min-height: unset !important;
+	}
+
 	.right-column {
 		display: unset !important;
 		position: fixed !important;
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss
index 94743c52..dad1efee 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss
@@ -1,3 +1,4 @@
+.user-avatar-animated,
 .search-result-card,
 .tw-avatar {
 	--border-radius-rounded: 0 !important;
@@ -9,4 +10,8 @@
 
 .bits-leaderboard-medal .tw-avatar {
 	--border-radius-rounded: 9000px !important;
+}
+
+.user-avatar-animated .user-avatar-animated__halo {
+	visibility: hidden;
 }
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/player.jsx b/src/sites/twitch-twilight/modules/player.jsx
index 834ffac4..634fb7b7 100644
--- a/src/sites/twitch-twilight/modules/player.jsx
+++ b/src/sites/twitch-twilight/modules/player.jsx
@@ -59,6 +59,11 @@ export default class Player extends Module {
 			PLAYER_ROUTES
 		);
 
+		this.PersistentPlayer = this.fine.define(
+			'persistent-player',
+			n => n.state && n.state.playerStyles
+		);
+
 		this.Player = this.fine.define(
 			'highwind-player',
 			n => n.setPlayerActive && n.props?.playerEvents && n.props?.mediaPlayerInstance,
@@ -522,10 +527,10 @@ export default class Player extends Module {
 		this.installVisibilityHook();
 
 		this.on(':reset', this.resetAllPlayers, this);
+		this.on(':fix-player', () => this.PersistentPlayer.forceUpdate(), this);
 
 		const t = this;
 
-
 		this.SquadStreamBar.ready(cls => {
 			const old_should_render = cls.prototype.shouldRenderSquadBanner;
 
@@ -1097,7 +1102,8 @@ export default class Player extends Module {
 			const url = new URL(video.src);
 			if ( url.protocol !== 'blob:' )
 				return false;
-		}
+		} else
+			return false;
 
 		/*this.PlayerSource.check();
 		for(const si of this.PlayerSource.instances) {