4.55.0

* Added: Link Cards. As an option, you can open a preview card when clicking on links in chat. These preview cards function similarly to the existing tool-tip or rich embed options but can provide for enhanced interaction (e.g. an embedded video player), with potential for more in the future.
* Changed: When using a custom theme with a dark background, use lighter border colors.
* Changed: Draw the FFZ Control Center and other dialogs with rounded corners.
* Fixed: Issue when clicking certain global Twitch emotes preventing the emote card from appearing correctly.
* Fixed: Issue with URL/safety data not being loaded correctly from the link service when the overall result was an error.
* Fixed: Issue with link tool-tips still appearing, but with no content, when link tool-tips are disabled.
* Fixed: Issue where (re)subscription notices in chat for multiple-month-at-once subscriptions would not be displayed correctly.
* Fixed: Tool-tips not displaying correctly in chat pop-outs in some circumstances.
* Fixed: Incorrect border styles when the chat is in portrait mode.
* Experiment Added: Set up an MQTT-based PubSub system. Let's see how well this scales.

src/modules/chat/index.js

@@ -7,9 +7,11 @@
 import dayjs from 'dayjs';
 
 import Module from 'utilities/module';
-import {createElement, ManagedStyle} from 'utilities/dom';
-import {timeout, has, addWordSeparators, glob_to_regex, escape_regex, split_chars} from 'utilities/object';
 import {Color} from 'utilities/color';
+import {createElement, ManagedStyle} from 'utilities/dom';
+import {FFZEvent} from 'utilities/events';
+import {getFontsList} from 'utilities/fonts';
+import {timeout, has, addWordSeparators, glob_to_regex, escape_regex, split_chars} from 'utilities/object';
 
 import Badges from './badges';
 import Emotes from './emotes';
@@ -23,7 +25,7 @@ import * as RICH_PROVIDERS from './rich_providers';
 import * as LINK_PROVIDERS from './link_providers';
 
 import Actions from './actions/actions';
-import { getFontsList } from 'src/utilities/fonts';
+
 
 function sortPriorityColorTerms(list) {
 	list.sort((a,b) => {
@@ -83,6 +85,7 @@ export default class Chat extends Module {
 
 		// Bind for JSX stuff
 		this.clickToReveal = this.clickToReveal.bind(this);
+		this.handleLinkClick = this.handleLinkClick.bind(this);
 		this.handleMentionClick = this.handleMentionClick.bind(this);
 		this.handleReplyClick = this.handleReplyClick.bind(this);
 
@@ -1266,6 +1269,7 @@ export default class Chat extends Module {
 
 	onEnable() {
 		this.socket = this.resolve('socket');
+		this.pubsub = this.resolve('pubsub');
 
 		this.on('site.subpump:pubsub-message', this.onPubSub, this);
 
@@ -1503,6 +1507,31 @@ export default class Chat extends Module {
 	}
 
 
+	handleLinkClick(event) {
+		if ( event.ctrlKey || event.shiftKey )
+			return;
+
+		const target = event.currentTarget,
+			ds = target?.dataset;
+
+		if ( ! ds )
+			return;
+
+		const evt = new FFZEvent({
+			url: ds.url ?? target.href,
+			source: event
+		});
+
+		this.emit('chat:click-link', evt);
+		if ( evt.defaultPrevented ) {
+			event.preventDefault();
+			event.stopPropagation();
+			return true;
+		}
+
+	}
+
+
 	handleReplyClick(event) {
 		const target = event.target,
 			fine = this.resolve('site.fine');
@@ -2318,7 +2347,9 @@ export default class Chat extends Module {
 					image: {type: 'image', url: ERROR_IMAGE},
 					title: {type: 'i18n', key: 'card.error', phrase: 'An error occurred.'},
 					subtitle: data.error
-				}
+				},
+				unsafe: data.unsafe,
+				urls: data.urls
 			}
 
 		if ( data.v < 5 && ! data.short && ! data.full && (data.title || data.desc_1 || data.desc_2) ) {