4.22.4

* Fixed: Duplicate more CSS that Twitch is removing in favor of styled components.
* Fixed: Do not display theater metadata when viewing a video.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.22.3",
+  "version": "4.22.4",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "private": true,
   "license": "Apache-2.0",

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

@@ -406,14 +406,14 @@ export default class MenuButton extends SiteModule {
 
 			progress_bar = (<div class="ffz-toast--progress tw-absolute tw-overflow-hidden tw-z-below">
 				<div
-					class="tw-border-radius-rounded tw-progress-bar tw-progress-bar--countdown tw-progress-bar--default tw-progress-bar--mask"
+					class="tw-border-radius-rounded ffz-progress-bar ffz-progress-bar--countdown ffz-progress-bar--default ffz-progress-bar--mask"
 					role="progressbar"
 					aria-valuenow={percentage}
 					aria-valuemin="0"
 					aria-valuemax="100"
 				>
 					<div
-						class={`tw-block tw-border-bottom-left-radius-rounded tw-border-top-left-radius-rounded tw-progress-bar__fill`}
+						class={`tw-block tw-border-bottom-left-radius-rounded tw-border-top-left-radius-rounded ffz-progress-bar__fill`}
 						data-a-target="tw-progress-bar-animation"
 						style={{
 							width: `${percentage}%`,

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

@@ -108,6 +108,12 @@ export default class Player extends PlayerBase {
 
 		this.settings.add('player.theatre.metadata', {
 			default: false,
+			requires: ['context.route.name'],
+			process(ctx, val) {
+				if ( ctx.get('context.route.name') === 'video' )
+					return false;
+				return val
+			},
 			ui: {
 				path: 'Player > General >> Theatre Mode',
 				title: 'Show metadata when mousing over the player.',

src/sites/twitch-twilight/styles/menu_button.scss

@@ -33,7 +33,7 @@
 	}
 
 	.ffz-toast {
-		&.ffz-toast--paused .tw-progress-bar--countdown .tw-progress-bar__fill {
+		&.ffz-toast--paused .ffz-progress-bar--countdown .ffz-progress-bar__fill {
 			animation: none !important;
 		}
 

styles/native/index.scss

@@ -5,3 +5,4 @@
 @import "link";
 @import "card";
 @import "tag";
+@import "progress";

styles/native/progress.scss

@@ -0,0 +1,30 @@
+.ffz-progress-bar {
+	&--default {
+		overflow: hidden;
+		width: 100%;
+		height: 1rem;
+		background: var(--color-background-progress);
+	}
+
+	&__fill {
+		max-width: 100%;
+		height: 100%;
+		background: var(--color-background-progress-status);
+		animation-timing-function: linear;
+		animation-fill-mode: both;
+	}
+
+	&--countdown &__fill {
+		animation-name: ffz-progress-down;
+	}
+
+	.thingy {
+		bottom: -4px;
+	}
+}
+
+@keyframes ffz-progress-down {
+	100% {
+		width: 0%;
+	}
+}