4.65.0

* Added: Two settings to improve the FFZ experience for users using their operating system's High Contrast mode. One setting allows you to opt Twitch out of high contrast mode, and the other (which is selectively enabled by default) loads a few more styles to make page elements appear more correctly. * Added: When using link cards to view a link to a Twitch clip, allow the clip to be played with an embedded player. * Changed: When displaying a tool-tip for a link, use the link's accent color along the side of the tool-tip for slightly more branding. * Changed: Make the prompt to accept the YouTube Terms of Service more subtle, and add an option to decline to the settings so it'll stop showing the link to settings altogether. * Changed: Update the icon for Discord in the icon font, and add an icon for TikTok.
2025-06-27 21:05:53 +00:00 · 2023-12-21 17:28:39 -05:00 · 2023-12-21 17:28:39 -05:00 · 5bafc824b1
commit 5bafc824b1
parent 6e78fd7cab
25 changed files with 419 additions and 103 deletions
--- a/fontello.config.json
+++ b/fontello.config.json
@ -394,20 +394,6 @@
      "code": 59434,
      "src": "fontawesome"
    },
-    {
-      "uid": "d6ac2bfbbe55d82aafaa353f66f94412",
-      "css": "discord",
-      "code": 59432,
-      "src": "custom_icons",
-      "selected": true,
-      "svg": {
-        "path": "M435 432.9C411.3 432.9 392.5 453.8 392.5 479.2S411.7 525.4 435 525.4C458.8 525.4 477.5 504.6 477.5 479.2 477.9 453.8 458.8 432.9 435 432.9ZM587.1 432.9C563.3 432.9 544.6 453.8 544.6 479.2S563.8 525.4 587.1 525.4C610.8 525.4 629.6 504.6 629.6 479.2S610.8 432.9 587.1 432.9ZM789.6 83.3H231.3C184.2 83.3 145.8 121.7 145.8 169.2V732.5C145.8 780 184.2 818.3 231.3 818.3H703.8L681.7 741.3 735 790.8 785.4 837.5 875 916.7V169.2C875 121.7 836.7 83.3 789.6 83.3ZM628.8 627.5S613.8 609.6 601.3 593.8C655.8 578.3 676.7 544.2 676.7 544.2 659.6 555.4 643.3 563.3 628.8 568.8 607.9 577.5 587.9 583.3 568.3 586.7 528.3 594.2 491.7 592.1 460.4 586.3 436.7 581.7 416.3 575 399.2 568.3 389.6 564.6 379.2 560 368.8 554.2 367.5 553.3 366.3 552.9 365 552.1 364.2 551.7 363.8 551.3 363.3 550.8 355.8 546.7 351.7 543.8 351.7 543.8S371.7 577.1 424.6 592.9C412.1 608.8 396.7 627.5 396.7 627.5 304.6 624.6 269.6 564.2 269.6 564.2 269.6 430 329.6 321.3 329.6 321.3 389.6 276.3 446.7 277.5 446.7 277.5L450.8 282.5C375.8 304.2 341.3 337.1 341.3 337.1S350.4 332.1 365.8 325C410.4 305.4 445.8 300 460.4 298.8 462.9 298.3 465 297.9 467.5 297.9 492.9 294.6 521.7 293.8 551.7 297.1 591.3 301.7 633.8 313.3 677.1 337.1 677.1 337.1 644.2 305.8 573.3 284.2L579.2 277.5S636.3 276.3 696.3 321.3C696.3 321.3 756.3 430 756.3 564.2 756.3 564.2 720.8 624.6 628.8 627.5Z",
-        "width": 1021
-      },
-      "search": [
-        "discord"
-      ]
-    },
    {
      "uid": "881c3e2491c8027a5f192509ee97627e",
      "css": "views",
@ -895,6 +881,34 @@
      "search": [
        "artist"
      ]
+    },
+    {
+      "uid": "611c2ddea0b5f5978ad6de8e289fd445",
+      "css": "discord",
+      "code": 59471,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M1117.7 83.7A1091.2 1091.2 0 0 0 845.5 0 747.8 747.8 0 0 0 810.6 70.9 1013.7 1013.7 0 0 0 508.5 70.9 751 751 0 0 0 473.6 0 1098.9 1098.9 0 0 0 201.2 84C29 338.8-17.7 587.4 5.6 832.4H5.6A1097.2 1097.2 0 0 0 339.5 1000 806.4 806.4 0 0 0 411 884.7 710 710 0 0 1 298.4 830.9C307.8 824.1 317 817 326 810.2A784.2 784.2 0 0 0 993.5 810.2C1002.5 817.6 1011.7 824.6 1021.1 830.9A712.7 712.7 0 0 1 908.3 884.8 799.1 799.1 0 0 0 979.8 1000 1092.3 1092.3 0 0 0 1313.8 832.5H1313.8C1341.2 548.4 1267 302.1 1117.7 83.7ZM440.5 681.7C375.5 681.7 321.7 622.7 321.7 550S373.6 417.8 440.3 417.8 560.4 477.4 559.3 550 506.8 681.7 440.5 681.7ZM878.9 681.7C813.7 681.7 760.2 622.7 760.2 550S812.1 417.8 878.9 417.8 998.7 477.4 997.5 550 945.2 681.7 878.9 681.7Z",
+        "width": 1319
+      },
+      "search": [
+        "discord"
+      ]
+    },
+    {
+      "uid": "4664ff95d6b02ad18da4f0362da85611",
+      "css": "tiktok",
+      "code": 59432,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M805.1 231.8A213.4 213.4 0 0 1 786.6 221 259.5 259.5 0 0 1 739.2 180.7C703.8 140.3 690.6 99.3 685.8 70.5H686C681.9 46.7 683.6 31.3 683.8 31.3H522.8V653.9C522.8 662.2 522.8 670.5 522.5 678.7 522.5 679.7 522.4 680.6 522.3 681.7 522.3 682.1 522.3 682.6 522.2 683.1V683.4A136.7 136.7 0 0 1 453.4 792 134.4 134.4 0 0 1 386.8 809.5C311.8 809.5 251 748.4 251 672.8S311.8 536.1 386.8 536.1A134.6 134.6 0 0 1 428.6 542.7L428.8 378.8A299.1 299.1 0 0 0 198.4 446.2 316 316 0 0 0 129.4 531.2C122.6 542.9 97 590 93.9 666.4 91.9 709.8 104.9 754.8 111.2 773.3V773.7C115.1 784.7 130.2 822 154.9 853.5A327.2 327.2 0 0 0 224.6 919.3V918.9L225 919.3C302.9 972.2 389.4 968.8 389.4 968.8 404.3 968.1 454.5 968.8 511.4 941.8 574.5 911.9 610.4 867.3 610.4 867.3A309.5 309.5 0 0 0 664.4 777.6C679 739.3 683.8 693.4 683.8 675V344.7C685.8 345.9 711.8 363.1 711.8 363.1S749.3 387.1 807.8 402.8C849.7 413.9 906.2 416.2 906.2 416.2V256.4C886.4 258.5 846.2 252.3 805.1 231.8Z",
+        "width": 1000
+      },
+      "search": [
+        "tiktok"
+      ]
    }
  ]
 }
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
 	"name": "frankerfacez",
 	"author": "Dan Salvato LLC",
-	"version": "4.64.0",
+	"version": "4.65.0",
 	"description": "FrankerFaceZ is a Twitch enhancement suite.",
 	"private": true,
 	"license": "Apache-2.0",
--- a/res/font/ffz-fontello.eot
+++ b/res/font/ffz-fontello.eot
--- a/res/font/ffz-fontello.svg
+++ b/res/font/ffz-fontello.svg
@ -86,7 +86,7 @@

 <glyph glyph-name="gift" unicode="&#xe827;" d="M518 93v400h-179v-400q0-14 10-21t26-8h107q16 0 26 8t10 21z m-255 471h109l-70 90q-15 17-39 17-22 0-38-15t-15-38 15-38 38-16z m384 54q0 22-15 38t-38 15q-24 0-39-17l-69-90h108q22 0 38 16t15 38z m210-143v-179q0-7-5-12t-13-5h-53v-233q0-22-16-37t-38-16h-607q-22 0-38 16t-16 37v233h-53q-8 0-13 5t-5 12v179q0 8 5 13t13 5h245q-51 0-88 36t-37 89 37 88 88 37q60 0 94-43l72-92 71 92q34 43 94 43 52 0 88-37t37-88-37-89-88-36h245q8 0 13-5t5-13z" horiz-adv-x="857.1" />

-<glyph glyph-name="discord" unicode="&#xe828;" d="M435 417c-24 0-42-21-42-46s19-46 42-46c24 0 43 20 43 46 0 25-19 46-43 46z m152 0c-24 0-42-21-42-46s19-46 42-46c24 0 43 20 43 46s-19 46-43 46z m203 350h-559c-47 0-85-39-85-86v-563c0-48 38-86 85-86h473l-22 77 53-50 50-46 90-80v748c0 47-38 86-85 86z m-161-544s-15 17-28 33c55 16 76 50 76 50-17-11-34-19-48-25-21-8-41-14-61-18-40-7-76-5-108 1-23 4-44 11-61 18-9 3-20 8-30 14-1 1-3 1-4 2-1 0-1 1-2 1-7 4-11 7-11 7s20-33 73-49c-13-16-28-34-28-34-92 2-127 63-127 63 0 134 60 243 60 243 60 45 117 44 117 44l4-5c-75-22-110-55-110-55s9 5 25 12c44 20 80 25 94 26 3 1 5 1 8 1 25 3 54 4 84 1 39-5 82-16 125-40 0 0-33 31-104 53l6 7s57 1 117-44c0 0 60-109 60-243 0 0-35-61-127-63z" horiz-adv-x="1021" />
+<glyph glyph-name="tiktok" unicode="&#xe828;" d="M805 618a213 213 0 0 0-18 11 260 260 0 0 0-48 40c-35 41-48 82-53 111h0c-4 23-2 39-2 39h-161v-623c0-8 0-16 0-25 0-1-1-2-1-3 0 0 0-1 0-1v0a137 137 0 0 0-69-109 134 134 0 0 0-66-17c-75 0-136 61-136 136s61 137 136 137a135 135 0 0 0 42-7l0 164a299 299 0 0 1-231-67 316 316 0 0 1-69-85c-6-12-32-59-35-135-2-44 11-89 17-107v-1c4-11 19-48 44-80a327 327 0 0 1 70-65v0l0 0c78-53 164-50 164-50 15 1 66 0 122 27 64 30 99 75 99 75a310 310 0 0 1 54 89c15 39 20 85 20 103v330c2-1 28-18 28-18s37-24 96-40c42-11 98-13 98-13v160c-20-2-60 4-101 24z" horiz-adv-x="1000" />

 <glyph glyph-name="eye" unicode="&#xe829;" d="M929 314q-85 132-213 197 34-58 34-125 0-103-73-177t-177-73-177 73-73 177q0 67 34 125-128-65-213-197 75-114 187-182t242-68 243 68 186 182z m-402 215q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-11 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19z m473-215q0-19-11-38-78-129-210-206t-279-77-279 77-210 206q-11 19-11 38t11 39q78 128 210 205t279 78 279-78 210-205q11-20 11-39z" horiz-adv-x="1000" />

@ -164,6 +164,8 @@

 <glyph glyph-name="artist" unicode="&#xe84e;" d="M200 350v-35c0-150 120-265 265-265h70a95 95 0 0 1 95 95v15a150 150 0 0 0 50 105l90 85c20 20 30 45 30 70v30l80 80c15-35 20-70 20-110a200 200 0 0 0-65-145l-85-85a50 50 0 0 1-15-30v-15a195 195 0 0 0-200-195h-65c-200 0-365 165-365 365v35a400 400 0 0 0 400 400h70c100 0 185-40 250-110l-20-15-100-100-100-80v-45a150 150 0 0 0-150-150h-155l35 35c15 15 25 40 25 65a150 150 0 0 0 150 150h35l80 100 25 25 10 10c-30 10-55 15-90 15h-70a300 300 0 0 1-300-300z" horiz-adv-x="1000" />

+<glyph glyph-name="discord" unicode="&#xe84f;" d="M1118 766a1091 1091 0 0 1-272 84 748 748 0 0 1-35-71 1014 1014 0 0 1-302 0 751 751 0 0 1-35 71 1099 1099 0 0 1-273-84c-172-255-219-503-195-748h0a1097 1097 0 0 1 334-168 806 806 0 0 1 71 115 710 710 0 0 0-113 54c10 7 19 14 28 21a784 784 0 0 1 668 0c9-8 18-15 27-21a713 713 0 0 0-113-54 799 799 0 0 1 72-115 1092 1092 0 0 1 334 168h0c27 284-47 530-196 748z m-677-598c-65 0-119 59-119 132s52 132 118 132 120-59 119-132-52-132-118-132z m438 0c-65 0-119 59-119 132s52 132 119 132 120-59 119-132-53-132-119-132z" horiz-adv-x="1319" />
+
 <glyph glyph-name="move" unicode="&#xf047;" d="M1000 350q0-14-11-25l-142-143q-11-11-26-11t-25 11-10 25v72h-215v-215h72q14 0 25-10t11-25-11-25l-143-143q-10-11-25-11t-25 11l-143 143q-11 10-11 25t11 25 25 10h72v215h-215v-72q0-14-10-25t-25-11-25 11l-143 143q-11 11-11 25t11 25l143 143q10 11 25 11t25-11 10-25v-72h215v215h-72q-14 0-25 10t-11 25 11 26l143 142q11 11 25 11t25-11l143-142q11-11 11-26t-11-25-25-10h-72v-215h215v72q0 14 10 25t25 11 26-11l142-143q11-10 11-25z" horiz-adv-x="1000" />

 <glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
--- a/res/font/ffz-fontello.ttf
+++ b/res/font/ffz-fontello.ttf
--- a/res/font/ffz-fontello.woff
+++ b/res/font/ffz-fontello.woff
--- a/res/font/ffz-fontello.woff2
+++ b/res/font/ffz-fontello.woff2
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@ -1092,6 +1092,7 @@ export default class Chat extends Module {
 				component: 'tooltip-tos',
 				item: key,
 				override_setting: 'agreed-tos',
+				getChat: () => this,
 				data: deep_copy(info),
 				onUIChange: () => this.emit(':update-link-resolver')
 			});
@ -2644,31 +2645,53 @@ export default class Chat extends Module {

 	handleLinkToS(data) {
 		// Check for YouTube
-		const agreed = this.settings.provider.get('agreed-tos', []);
+		const agreed = this.settings.provider.get('agreed-tos', []),
+			rejected = this.settings.provider.get('declined-tos', []);
+
 		const resolvers = data.urls ? new Set(data.urls.map(x => x.resolver).filter(x => x)) : null;
 		if ( resolvers ) {
 			for(const [key, info] of Object.entries(RESOLVERS_REQUIRE_TOS)) {
 				if ( resolvers.has(key) && ! agreed.includes(key) ) {
+					const declined = rejected.includes(key);
+
 					return {
 						...data,
 						url: null,
 						short: [
 							{
 								type: 'box',
-								content:
+								content: [
 									info.i18n_key
 										? {type: 'i18n', key: info.i18n_key, phrase: info.label}
-										: info.label
+										: info.label,
+									declined ? null : ' ',
+									declined ? null : {
+										type: 'conditional',
+										tooltip: false,
+										content: {
+											type: 'i18n',
+											key: 'embed.tos-open-settings',
+											phrase: '{link} to open your settings.',
+											content: {
+												link: {
+													type: 'open_settings',
+													item: 'chat.tooltips',
+													content: {
+														type: 'i18n',
+														key: 'embed.tos-open-settings.click',
+														phrase: 'Click here'
+													}
+												}
+											}
+										},
+										alternative: {
+											type: 'i18n',
+											key: 'embed.tos-settings',
+											phrase: 'Open the FFZ Control Center and navigate to Chat > Tooltips to agree.'
+										}
+									}
+								]
 							},
-							{
-								type: 'flex',
-								'justify-content': 'center',
-								'align-items': 'center',
-								content: {
-									type: 'open_settings',
-									item: 'chat.tooltips'
-								}
-							}
 						],
 						mid: null,
 						full: null
@ -2691,8 +2714,28 @@ export default class Chat extends Module {
 	}


+	declineTerms(service) {
+		const declined = this.settings.provider.get('declined-tos', []);
+		if ( declined.includes(service) )
+			return;
+
+		this.settings.provider.set('declined-tos', [...declined, service]);
+		this.emit(':update-link-resolver');
+	}
+
+	hasAgreedToTerms(service) {
+		const agreed = this.settings.provider.get('agreed-tos');
+		return agreed ? agreed.includes(service) : false;
+	}
+
+	hasDeclinedTerms(service) {
+		const declined = this.settings.provider.get('declined-tos');
+		return declined ? declined.includes(service) : false;
+	}
+
+
 	onProviderChange(key, value) {
-		if ( key !== 'agreed-tos' )
+		if ( key !== 'agreed-tos' && key !== 'declined-tos' )
 			return;

 		this.emit(':update-link-resolver');
--- a/src/modules/chat/link_providers.js
+++ b/src/modules/chat/link_providers.js
@ -128,16 +128,55 @@ export const Clip = {
 				}
 			};

+		const header = {
+			type: 'header',
+			image: {type: 'image', url: clip.thumbnailURL, sfw: true, aspect: 16/9},
+			title: clip.title,
+			subtitle,
+			extra
+		};
+
 		return {
 			accent: '#6441a4',

-			short: {
-				type: 'header',
-				image: {type: 'image', url: clip.thumbnailURL, sfw: true, aspect: 16/9},
-				title: clip.title,
-				subtitle,
-				extra
-			}
+			fragments: {
+				header
+			},
+
+			short: {type: 'ref', name: 'header'},
+
+			full: [
+				{type: 'ref', name: 'header'},
+				{
+					type: 'conditional',
+					media: true,
+					content: {
+						type: 'gallery',
+						items: [{
+							type: 'player',
+							iframe: `https://clips.twitch.tv/embed?parent=twitch.tv&clip=${match}`,
+							aspect: 16/9,
+							content: {
+								type: 'overlay',
+								content: {
+									type: 'image',
+									url: clip.thumbnailURL,
+									sfw: true,
+									aspect: 16/9
+								},
+								'center': {
+									type: 'style',
+									size: '2',
+									content: {
+										type: 'icon',
+										name: 'play'
+									}
+								}
+							}
+						}]
+					}
+				}
+			]
 		};
 	}
 }
@ -456,4 +495,4 @@ export const Video = {
 		};
 	}

-}
+}
--- a/src/modules/chat/tokenizers.jsx
+++ b/src/modules/chat/tokenizers.jsx
@ -123,6 +123,11 @@ export const Links = {
 				tip.element.classList.add('tw-align-left');
 			}

+			if ( tip.outer && data.accent ) {
+				tip.outer.classList.add('ffz-accent-tip');
+				tip.outer.style.setProperty('--ffz-color-accent', data.accent);
+			}
+
 			if ( data.full ) {
 				content = rich_tokens.renderTokens(data.full, createElement, ctx);

--- a/src/modules/main_menu/components/tooltip-tos.vue
+++ b/src/modules/main_menu/components/tooltip-tos.vue
@ -2,24 +2,31 @@
 	<section class="ffz--widget ffz--service-tos">
 		<h4>{{ key }}</h4>
 		<markdown class="tw-mg-b-05" :source="linkText" />
-		<button
-			v-if="hasAccepted"
-			class="tw-button tw-button--disabled"
-			disabled
-		>
-			<span class="tw-button__text">
-				{{ t('tooltip.has-accepted', 'You have accepted the Terms of Service.') }}
-			</span>
-		</button>
-		<button
-			v-else
-			@click="accept"
-			class="tw-button"
-		>
-			<span class="tw-button__text">
-				{{ t('tooltip.accept-tos', 'Accept Terms of Service') }}
-			</span>
-		</button>
+		<div v-if="hasAccepted">
+			{{ t('tooltip.has-accepted', 'You have accepted the Terms of Service.') }}
+		</div>
+		<template v-else>
+			<button
+				@click="accept"
+				class="tw-button tw-mg-b-05"
+			>
+				<span class="tw-button__text">
+					{{ acceptText }}
+				</span>
+			</button>
+			<button
+				v-if="! declined"
+				@click="reject"
+				class="tw-button tw-button--text tw-block"
+			>
+				<span class="tw-button__text">
+					{{ t('tooltip.decline-tos', 'I do not accept.') }}
+				</span>
+			</button>
+			<div v-else>
+				{{ t('tooltip.has-declined-tos', 'We won\'t ask you to accept the terms again, but you can still change your mind on this page.') }}
+			</div>
+		</template>
 	</section>
 </template>

@ -35,14 +42,27 @@ export default {
 	props: ['item', 'context'],

 	data() {
+		const chat = this.item.getChat();
+
 		return {
 			id: last_id++,

+			declined: chat ? chat.hasDeclinedTerms(this.item.item) : false,
+
 			key: this.item.item
 		}
 	},

 	computed: {
+		acceptText() {
+			if ( this.data.i18n_accept )
+				return this.t(this.data.i18n_accept, this.data.accept);
+			else if ( this.data.accept )
+				return this.data.accept;
+
+			return this.t('tooltip.accept-tos', 'Yes, I accept the Terms of Service.');
+		},
+
 		linkText() {
 			if ( this.data.i18n_links )
 				return this.t(this.data.i18n_links, this.data.links);
@ -59,6 +79,18 @@ export default {
 			const val = Array.isArray(this.value) ? [...this.value] : [];
 			val.push(this.key);
 			this.set(val);
+		},
+
+		reject() {
+			if ( this.declined )
+				return;
+
+			const chat = this.item.getChat();
+			if ( ! chat )
+				return;
+
+			this.declined = true;
+			chat.declineTerms(this.key);
 		}
 	}

--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/hc-tweaks.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/hc-tweaks.scss
@ -0,0 +1,103 @@
+.vc-sketch-saturation-wrap,
+.vc-sketch-presets-color,
+.vc-sketch-controls,
+.ffz-badge,
+.ffz-color-preview {
+	forced-color-adjust: none;
+}
+
+@media (forced-colors: active) {
+	.ffz__tooltip,
+	.ffz-viewer-card,
+	.ffz-dialog,
+	.ffz-balloon,
+	.tw-balloon,
+	.ffz-il-tooltip,
+	.vc-sketch,
+	.viewer-card {
+		&, &.tw-border {
+			border: 4px solid !important;
+		}
+	}
+
+	.ffz__tooltip, .ffz-il-tooltip {
+		&:before, &:after {
+			display: none !important;
+		}
+	}
+
+	.ffz--chat-card,
+	.chat-wysiwyg-input__editor,
+	.chat-wysiwyg-input__editor:hover {
+		&, &.tw-border {
+			border: 1px solid !important;
+		}
+	}
+
+	.ffz--profile-row {
+		background-color: ButtonFace !important;
+		color: ButtonText !important;
+
+		&.current {
+			background-color: Highlight !important;
+			color: HighlightText !important;
+		}
+
+		.ffz--profile-row__icon {
+			color: inherit !important;
+		}
+
+		div, h4 {
+			forced-color-adjust: none;
+		}
+	}
+
+	.ffz--menu-tree .active > div,
+	.ffz--menu-tree .active > div:hover,
+	.tw-root--theme-dark .ffz--menu-tree .active > div:hover {
+		& {
+			background-color: Highlight !important;
+			color: HighlightText !important;
+		}
+
+		span {
+			forced-color-adjust: none;
+		}
+	}
+
+	.ffz-checkbox__input:checked + .ffz-checkbox__label:after,
+	.ffz-checkbox__input:indeterminate + .ffz-checkbox__label:after {
+		background-color: ButtonText !important;
+	}
+
+	.ffz-checkbox__input:checked + .ffz-checkbox__label:before,
+	.ffz-checkbox__input:indeterminate + .ffz-checkbox__label:before {
+		border-color: ButtonText !important;
+	}
+
+	.ffz-input,
+	.chat-wysiwyg-input__editor {
+		background-color: Field !important;
+		color: FieldText !important;
+	}
+
+	.tw-button.ffz--ffz-button,
+	.tw-button.ffz--discord-button,
+	.tw-button.ffz--github-button {
+		background-color: Canvas !important;
+		color: LinkText !important;
+	}
+
+	.tw-button, .tw-core-button {
+		background-color: ButtonFace !important;
+		color: ButtonText !important;
+	}
+}
+
+@media (forced-colors: active) and (prefers-color-scheme: dark) {
+	/* High Contrast #1, #2 or Black is active (or custom theme) */
+}
+
+@media (forced-colors: active) and (prefers-color-scheme: light) {
+	/* High Contrast White is active (or custom theme) */
+}
--- a/src/sites/twitch-twilight/modules/theme/index.js
+++ b/src/sites/twitch-twilight/modules/theme/index.js
@ -19,7 +19,8 @@ const COLORS = [
 	0.08, 0.151, 0.212, 0.271, 0.31, 0.351 // 10-15
 ];

-const NO_AUTO_DARK = `:root{color-scheme: only light}`;
+const NO_AUTO_DARK = `:root{color-scheme: only light}`,
+	NO_FORCED_COLOR = `:root{forced-color-adjust: none}`;


 const ACCENT_COLORS = {
@ -49,6 +50,36 @@ export default class ThemeEngine extends Module {

 		// Tweaks

+		this.settings.add('theme.high-contrast-tweaks', {
+			default: null,
+			requires: ['context.is-forced-colors', 'theme.disable-high-contrast'],
+			process(ctx, val) {
+				if ( val === null ) {
+					if ( ctx.get('theme.disable-high-contrast') )
+						return false;
+					return ctx.get('context.is-forced-colors') ?? false;
+				}
+				return val;
+			},
+			ui: {
+				path: 'Appearance > Theme >> Tweaks',
+				title: 'Enable the use of High Contrast tweaks.',
+				description: 'This loads an additional set of styles when Forced Color / OS High Contrast mode is enabled to ensure page elements are displayed more appropriately.',
+				component: 'setting-check-box'
+			},
+		});
+
+		this.settings.add('theme.disable-high-contrast', {
+			default: false,
+			ui: {
+				path: 'Appearance > Theme >> Tweaks',
+				title: 'Disable Forced Color / OS High Contrast',
+				component: 'setting-check-box',
+				description: 'Enabling this will instruct your browser to not respect your operating system\'s High Contrast settings when displaying Twitch. You may need to refresh for this to take full effect.'
+			},
+			changed: () => this.updateCSS()
+		});
+
 		this.settings.add('theme.disable-auto-dark', {
 			default: false,
 			ui: {
@ -348,6 +379,11 @@ export default class ThemeEngine extends Module {
 	updateCSS() {
 		//this.updateOldCSS();

+		if ( this.settings.get('theme.disable-high-contrast'))
+			this.css_tweaks.set('nofc', NO_FORCED_COLOR);
+		else
+			this.css_tweaks.delete('nofc');
+
 		if ( this.settings.get('theme.disable-auto-dark') )
 			this.css_tweaks.set('nodark', NO_AUTO_DARK);
 		else
@ -541,7 +577,21 @@ export default class ThemeEngine extends Module {
 	}

 	onEnable() {
+		// TODO: Detect if this changes?
+		let has_forced;
+		try {
+			has_forced = window.matchMedia('(forced-colors: active)')?.matches;
+		} catch(err) { /* no-op */ }
+
+		this.settings.updateContext({
+			'is-forced-colors': has_forced ?? false
+		});
+
+		this.settings.getChanges('theme.high-contrast-tweaks', val => {
+			this.css_tweaks.toggle('hc-tweaks', val);
+		});
+
 		this.updateCSS();
 		this.updateFont();
 	}
-}
+}
--- a/src/sites/twitch-twilight/styles/chat.scss
+++ b/src/sites/twitch-twilight/styles/chat.scss
@ -526,4 +526,4 @@
 			color: var(--color-fill-button-icon-hover);
 		}
 	}
-}
+}
--- a/src/utilities/constants.ts
+++ b/src/utilities/constants.ts
@ -373,6 +373,10 @@ export const RESOLVERS_REQUIRE_TOS = {
 		i18n_links: 'embed.warn.youtube.links',
 		links: `To view YouTube embeds, you must agree to YouTube's Terms of Service:
 * [Terms of Service](https://www.youtube.com/t/terms)
-* [Privacy Policy](https://policies.google.com/privacy)`
-	}
+* [Privacy Policy](https://policies.google.com/privacy)`,
+
+		i18n_accept: 'embed.warn.youtube.agree',
+		accept: 'Yes, I accept the YouTube Terms of Service.'
+	},
+
 } as Record<string, any>;
--- a/src/utilities/ffz-icons.ts
+++ b/src/utilities/ffz-icons.ts
@ -69,7 +69,6 @@ export default [
 	"eyedropper",
 	"eye",
 	"eye-off",
-	"discord",
 	"views",
 	"conversations",
 	"user-secret",
@ -121,5 +120,7 @@ export default [
 	"mange-suspicious",
 	"doc-text",
 	"fx",
-	"artist"
+	"artist",
+	"discord",
+	"tiktok"
 ] as const;
--- a/src/utilities/rich_tokens.js
+++ b/src/utilities/rich_tokens.js
@ -338,10 +338,9 @@ TOKEN_TYPES.box = function(token, createElement, ctx) {

 TOKEN_TYPES.open_settings = function(token, createElement, ctx) {

-	if ( ctx.tooltip )
-		return null;
-
 	const handler = event => {
+		event.preventDefault();
+
 		const evt = new FFZEvent({
 			item: token.item,
 			event,
@ -351,28 +350,24 @@ TOKEN_TYPES.open_settings = function(token, createElement, ctx) {
 		window.FrankerFaceZ.get().emit('main_menu:open', evt);
 	}

-	const label = ctx.i18n.t('embed.show-settings', 'Open Settings');
+	const markdown = token.markdown,
+		content = renderTokens(token.content, createElement, ctx, markdown);

 	if ( ctx.vue )
-		return createElement('button', {
-			class: 'tw-button',
+		return createElement('a', {
+			class: 'tw-link',
+			href: '#',
 			on: {
 				click: handler
 			}
-		}, [
-			createElement('span', {
-				class: 'tw-button__text'
-			}, [
-				label
-			])
-		]);
+		}, content);

-	return createElement('button', {
-		className: 'tw-button',
+	return createElement('a', {
+		class: 'tw-link',
+		href: '#',
 		onClick: handler
-	}, createElement('span', {
-		className: 'tw-button__text'
-	}, label));
+	}, content);
+
 }


@ -389,6 +384,14 @@ TOKEN_TYPES.conditional = function(token, createElement, ctx) {
 	if ( token.nsfw && ! ctx.allow_unsafe )
 		passed = false;

+	if ( token.skip_nsfw && ctx.allow_unsafe )
+		passed = false;
+
+	if ( token.tooltip && ! ctx.tooltip )
+		passed = false;
+	else if ( token.tooltip === false && ctx.tooltip )
+		passed = false;
+
 	if ( passed )
 		return renderTokens(token.content, createElement, ctx);

@ -689,7 +692,7 @@ function header_vue(token, h, ctx) {

 		if ( image ) {
 			image = h('div', {
-				class: `ffz--header-sublogo tw-flex-shrink-0 ${subtok.youtube_dumb ? 'tw-mg-l-05 tw-mg-r-1' : 'tw-mg-r-05'}${aspect ? ' ffz--header-aspect' : ''}`,
+				class: `ffz--header-sublogo tw-flex-shrink-0 ${subtok.extra_pad ? 'tw-mg-l-05 tw-mg-r-1' : 'tw-mg-r-05'}${aspect ? ' ffz--header-aspect' : ''}`,
 				style: {
 					width: aspect ? `${aspect * 2}rem` : null
 				}
--- a/styles/chat.scss
+++ b/styles/chat.scss
@ -221,7 +221,11 @@

 	figure {
 		line-height: 4.8rem;
-		font-size: 2.4rem;
+		font-size: 4.8rem;
+
+		&:before {
+			margin: 0 !important;
+		}
 	}

 	img {
@ -240,7 +244,7 @@

 	figure {
 		line-height: 2.4rem;
-		font-size: 1.6rem;
+		font-size: 2.4rem;
 	}

 }
--- a/styles/fontello/ffz-fontello-codes.scss
+++ b/styles/fontello/ffz-fontello-codes.scss
@ -39,7 +39,7 @@
 .ffz-i-pin:before { content: '\e825'; } /* '' */
 .ffz-i-pin-outline:before { content: '\e826'; } /* '' */
 .ffz-i-gift:before { content: '\e827'; } /* '' */
-.ffz-i-discord:before { content: '\e828'; } /* '' */
+.ffz-i-tiktok:before { content: '\e828'; } /* '' */
 .ffz-i-eye:before { content: '\e829'; } /* '' */
 .ffz-i-eye-off:before { content: '\e82a'; } /* '' */
 .ffz-i-views:before { content: '\e82b'; } /* '' */
@ -78,6 +78,7 @@
 .ffz-i-mange-suspicious:before { content: '\e84c'; } /* '' */
 .ffz-i-fx:before { content: '\e84d'; } /* '' */
 .ffz-i-artist:before { content: '\e84e'; } /* '' */
+.ffz-i-discord:before { content: '\e84f'; } /* '' */
 .ffz-i-move:before { content: '\f047'; } /* '' */
 .ffz-i-link-ext:before { content: '\f08e'; } /* '' */
 .ffz-i-twitter:before { content: '\f099'; } /* '' */
--- a/styles/fontello/ffz-fontello-embedded.scss
+++ b/styles/fontello/ffz-fontello-embedded.scss
--- a/styles/fontello/ffz-fontello-ie7-codes.scss
+++ b/styles/fontello/ffz-fontello-ie7-codes.scss
@ -39,7 +39,7 @@
 .ffz-i-pin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe825;&nbsp;'); }
 .ffz-i-pin-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe826;&nbsp;'); }
 .ffz-i-gift { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe827;&nbsp;'); }
-.ffz-i-discord { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe828;&nbsp;'); }
+.ffz-i-tiktok { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe828;&nbsp;'); }
 .ffz-i-eye { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe829;&nbsp;'); }
 .ffz-i-eye-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe82a;&nbsp;'); }
 .ffz-i-views { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe82b;&nbsp;'); }
@ -78,6 +78,7 @@
 .ffz-i-mange-suspicious { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84c;&nbsp;'); }
 .ffz-i-fx { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84d;&nbsp;'); }
 .ffz-i-artist { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84e;&nbsp;'); }
+.ffz-i-discord { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84f;&nbsp;'); }
 .ffz-i-move { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf047;&nbsp;'); }
 .ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
 .ffz-i-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf099;&nbsp;'); }
--- a/styles/fontello/ffz-fontello-ie7.scss
+++ b/styles/fontello/ffz-fontello-ie7.scss
@ -50,7 +50,7 @@
 .ffz-i-pin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe825;&nbsp;'); }
 .ffz-i-pin-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe826;&nbsp;'); }
 .ffz-i-gift { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe827;&nbsp;'); }
-.ffz-i-discord { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe828;&nbsp;'); }
+.ffz-i-tiktok { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe828;&nbsp;'); }
 .ffz-i-eye { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe829;&nbsp;'); }
 .ffz-i-eye-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe82a;&nbsp;'); }
 .ffz-i-views { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe82b;&nbsp;'); }
@ -89,6 +89,7 @@
 .ffz-i-mange-suspicious { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84c;&nbsp;'); }
 .ffz-i-fx { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84d;&nbsp;'); }
 .ffz-i-artist { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84e;&nbsp;'); }
+.ffz-i-discord { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84f;&nbsp;'); }
 .ffz-i-move { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf047;&nbsp;'); }
 .ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
 .ffz-i-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf099;&nbsp;'); }
--- a/styles/fontello/ffz-fontello.scss
+++ b/styles/fontello/ffz-fontello.scss
@ -1,11 +1,11 @@
@font-face {
  font-family: 'ffz-fontello';
-  src: url('../font/ffz-fontello.eot?56551965');
-  src: url('../font/ffz-fontello.eot?56551965#iefix') format('embedded-opentype'),
-       url('../font/ffz-fontello.woff2?56551965') format('woff2'),
-       url('../font/ffz-fontello.woff?56551965') format('woff'),
-       url('../font/ffz-fontello.ttf?56551965') format('truetype'),
-       url('../font/ffz-fontello.svg?56551965#ffz-fontello') format('svg');
+  src: url('../font/ffz-fontello.eot?21539525');
+  src: url('../font/ffz-fontello.eot?21539525#iefix') format('embedded-opentype'),
+       url('../font/ffz-fontello.woff2?21539525') format('woff2'),
+       url('../font/ffz-fontello.woff?21539525') format('woff'),
+       url('../font/ffz-fontello.ttf?21539525') format('truetype'),
+       url('../font/ffz-fontello.svg?21539525#ffz-fontello') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'ffz-fontello';
-    src: url('../font/ffz-fontello.svg?56551965#ffz-fontello') format('svg');
+    src: url('../font/ffz-fontello.svg?21539525#ffz-fontello') format('svg');
  }
 }
 */
@ -94,7 +94,7 @@
 .ffz-i-pin:before { content: '\e825'; } /* '' */
 .ffz-i-pin-outline:before { content: '\e826'; } /* '' */
 .ffz-i-gift:before { content: '\e827'; } /* '' */
-.ffz-i-discord:before { content: '\e828'; } /* '' */
+.ffz-i-tiktok:before { content: '\e828'; } /* '' */
 .ffz-i-eye:before { content: '\e829'; } /* '' */
 .ffz-i-eye-off:before { content: '\e82a'; } /* '' */
 .ffz-i-views:before { content: '\e82b'; } /* '' */
@ -133,6 +133,7 @@
 .ffz-i-mange-suspicious:before { content: '\e84c'; } /* '' */
 .ffz-i-fx:before { content: '\e84d'; } /* '' */
 .ffz-i-artist:before { content: '\e84e'; } /* '' */
+.ffz-i-discord:before { content: '\e84f'; } /* '' */
 .ffz-i-move:before { content: '\f047'; } /* '' */
 .ffz-i-link-ext:before { content: '\f08e'; } /* '' */
 .ffz-i-twitter:before { content: '\f099'; } /* '' */
--- a/styles/icons.scss
+++ b/styles/icons.scss
@ -47,6 +47,11 @@
 	font-size: 0.8em;
 }

+.ffz-i-discord:before {
+	width: 1.4em;
+	margin-left: 0.05rem;
+}
+

 .ffz-player-icon {
 	font-size: 2rem !important;
@ -93,4 +98,4 @@

 .ffz-i-pd-1:before { margin-right: 1rem }
 .ffz-i-pd-2:before { margin-right: 2rem }
-.ffz-i-pd-3:before { margin-right: 3rem }
+.ffz-i-pd-3:before { margin-right: 3rem }
--- a/styles/tooltips.scss
+++ b/styles/tooltips.scss
@ -234,6 +234,12 @@ body {
 }


+.ffz-accent-tip {
+	border-right: .5rem solid var(--ffz-color-accent);
+	border-radius: 2px;
+}
+
+
 .ffz-rich-tip {
 	max-width: 340px;
 	width: 340px;
@ -260,4 +266,4 @@ body {
 	.tw-c-text-alt-2 {
 		color: var(--color-text-tooltip-alt-2) !important;
 	}
-}
+}