4.66.0

* Added: Option to hide emote tool-tips from the FFZ Emote Menu, which can improve performance.
* Changed: Re-add support for older browsers that do not support `crypto.randomUUID()`. I do not consider this a bug, since users should realistically not be on browsers that old for their own safety, but it is a small enough change that I'll allow it.
* Fixed: The option to report emotes not appearing on emote cards for Twitch emotes. (Closes #1450)
* Fixed: Make rich embeds in Chat on Videos slightly narrower so they don't get cut off.
* API Added: Chat message objects now have `ffz_first_msg` and `ffz_returning` flags for use by add-ons.
* API Fixed: Cut down on unnecessary warning logging from `createElement`

package.json

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

src/sites/twitch-twilight/index.js

@@ -294,7 +294,7 @@ Twilight.KNOWN_MODULES['algolia-search'].use_result = true;
 Twilight.KNOWN_MODULES['algolia-search'].chunks = 'core';
 
 Twilight.KNOWN_MODULES['user-report'].use_result = true;
-Twilight.KNOWN_MODULES['user-report'].chunks = 'core';
+Twilight.KNOWN_MODULES['user-report'].chunks = n => ! n || n.includes('core') || n.includes('common');
 
 Twilight.KNOWN_MODULES['sub-form'].use_result = true;
 Twilight.KNOWN_MODULES['sub-form'].chunks = 'core';

src/sites/twitch-twilight/modules/chat/emote_menu.jsx

@@ -322,6 +322,16 @@ export default class EmoteMenu extends Module {
 			}
 		});
 
+		this.settings.add('chat.emote-menu.tooltips', {
+			default: true,
+			ui: {
+				path: 'Chat > Emote Menu >> Appearance',
+				title: 'Display emote preview tool-tips in the FFZ Emote Menu.',
+				component: 'setting-check-box',
+				description: 'You may wish to disable this for performance reasons.'
+			}
+		});
+
 		this.settings.add('chat.emote-menu.show-emoji', {
 			default: true,
 			ui: {
@@ -418,6 +428,7 @@ export default class EmoteMenu extends Module {
 		this.chat.context.on('changed:chat.emotes.enabled', rebuild);
 		this.chat.context.on('changed:chat.emote-menu.modifiers', rebuild);
 		this.chat.context.on('changed:chat.emote-menu.show-emoji', rebuild);
+		this.chat.context.on('changed:chat.emote-menu.tooltips', rebuild);
 		this.chat.context.on('changed:chat.fix-bad-emotes', rebuild);
 		this.chat.context.on('changed:chat.emote-menu.effect-tab', rebuild);
 		this.chat.context.on('changed:chat.emote-menu.sort-emotes', rebuild);
@@ -909,7 +920,9 @@ export default class EmoteMenu extends Module {
 					has_modifiers = Array.isArray(modifiers) && modifiers.length > 0,
 					//has_menu = has_modifiers && this.state.open_menu == emote.id,
 					animated = this.props.animated,
-					hidden = visibility && emote.hidden;
+					hidden = visibility && emote.hidden,
+
+					tt = t.chat.context.get('chat.emote-menu.tooltips');
 
 				let src, srcSet;
 				if ( animated && emote.animSrc ) {
@@ -922,7 +935,7 @@ export default class EmoteMenu extends Module {
 
 				return (<button
 					key={emote.id}
-					class={`ffz-tooltip emote-picker__emote-link${!visibility && locked ? ' locked' : ''}${hidden ? ' emote-hidden' : ''}`}
+					class={`${tt ? 'ffz-tooltip ' : ''}emote-picker__emote-link${!visibility && locked ? ' locked' : ''}${hidden ? ' emote-hidden' : ''}`}
 					data-tooltip-type="emote"
 					data-provider={emote.provider}
 					data-id={emote.id}
@@ -1014,11 +1027,13 @@ export default class EmoteMenu extends Module {
 					emoji_y = (emote.y * (t.emoji_size + 2)) + 1,
 
 					x_pct = 100 * emoji_x / t.emoji_sheet_remain,
-					y_pct = 100 * emoji_y / t.emoji_sheet_remain;
+					y_pct = 100 * emoji_y / t.emoji_sheet_remain,
+
+					tt = t.chat.context.get('chat.emote-menu.tooltips');
 
 				return (<button
 					key={emote.id}
-					class={`ffz-tooltip emote-picker__emote-link${locked ? ' locked' : ''}${emote.emoji ? ' emote-picker__emoji' : ''}`}
+					class={`${tt ? 'ffz-tooltip ' : ''}emote-picker__emote-link${locked ? ' locked' : ''}${emote.emoji ? ' emote-picker__emoji' : ''}`}
 					data-tooltip-type="emote"
 					data-provider={emote.provider}
 					data-id={emote.id}

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

@@ -2968,6 +2968,9 @@ export default class ChatHook extends Module {
 				message.roomLogin = chan;
 			}
 
+			message.ffz_first_msg = message.isFirstMsg || original.message?.isFirstMsg || false;
+			message.ffz_returning = original.message?.isReturningChatter || false;
+
 			if ( original.message ) {
 				const user = original.message.user,
 					flags = original.message.flags;

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

@@ -136,6 +136,9 @@
 
 .ffz--chat-card {
 	.vod-message & {
+
+		width: calc(100% - 1.5rem) !important;
+
 		.ffz--card-text {
 			max-width: 18rem;
 		}

src/utilities/dom.ts

@@ -1,6 +1,7 @@
 
 import {has} from 'utilities/object';
 import type { DomFragment, OptionalArray } from './types';
+import { DEBUG } from './constants';
 
 const ATTRS = [
 	'accept', 'accept-charset', 'accesskey', 'action', 'align', 'alt', 'async',
@@ -184,7 +185,7 @@ export function createElement(tag: string, props?: any, ...children: DomFragment
 							else
 								el.style.setProperty(key, prop[key]);
 						}
-					else
+					else if ( DEBUG && prop != null )
 						console.warn('unsupported style value', prop);
 
 				} else if ( lk === 'dataset' ) {
@@ -192,7 +193,7 @@ export function createElement(tag: string, props?: any, ...children: DomFragment
 						for(const k in prop)
 							if ( has(prop, k) )
 								el.dataset[camelCase(k)] = prop[k];
-					} else
+					} else if ( DEBUG && prop != null )
 						console.warn('unsupported dataset value', prop);
 
 				} else if ( key === 'dangerouslySetInnerHTML' ) {

src/utilities/object.ts

@@ -59,9 +59,30 @@ export function isValidShortcut(key: string) {
 /**
  * Generate a random UUIDv4.
  *
- * @deprecated Just use {@link crypto.randomUUID} directly.
+ * This method has a fallback implementation for people using
+ * ancient browsers without {@link crypto.randomUUID}.
  */
-export const generateUUID = () => crypto.randomUUID();
+export const generateUUID = crypto.randomUUID
+	? () => crypto.randomUUID()
+	: function generateUUID(input?: any) {
+		return input           // if the placeholder was passed, return
+			? (              // a random number from 0 to 15
+				input ^            // unless b is 8,
+				Math.random()  // in which case
+				* 16           // a random number from
+				>> input/4         // 8 to 11
+			).toString(16) // in hexadecimal
+			: (              // or otherwise a concatenated string:
+				[1e7] as any +        // 10000000 +
+				-1e3 +         // -1000 +
+				-4e3 +         // -4000 +
+				-8e3 +         // -80000000 +
+				-1e11          // -100000000000,
+			).replace(     // replacing
+				/[018]/g,    // zeroes, ones, and eights with
+				generateUUID            // random hex digits
+			);
+	};
 
 
 /**