4.0.0-rc13

* Added: Custom timestamp formats for chat messages.
* Fixed: Hook the correct load event for video elements in rich link tool-tips.
* Fixed: Display Block and Hide Thumbnail buttons on the new game directory pages.
* Changed: Use markdown for rendering item descriptions in the settings menu rather than HTML.

src/main.js

@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc12.23',
+	major: 4, minor: 0, revision: 0, extra: '-rc13',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/modules/chat/index.js

@@ -522,22 +522,27 @@ export default class Chat extends Module {
 			}
 		});
 
+		const ts = new Date(0).toLocaleTimeString().toUpperCase(),
+			default_24 = ts.lastIndexOf('PM') === -1 && ts.lastIndexOf('AM') === -1;
+
 		this.settings.add('chat.timestamp-format', {
-			default: 'H:mm',
+			default: default_24 ? 'H:mm' : 'h:mm',
 			ui: {
 				path: 'Chat > Appearance >> Chat Lines',
 				title: 'Timestamp Format',
-				component: 'setting-select-box',
+				component: 'setting-combo-box',
+
+				description: 'Timestamps are formatted using the [Day.js](https://github.com/iamkun/dayjs#readme) library. More details about formatting strings [can be found here](https://github.com/iamkun/dayjs/blob/HEAD/docs/en/API-reference.md#list-of-all-available-formats)',
 
 				data: [
-					{value: 'h:mm', title: 'Default (h:mm)'},
-					{value: 'h:mm:ss', title: 'Default with Seconds (h:mm:ss)'},
-					{value: 'H:mm', title: '24 Hour (H:mm)'},
-					{value: 'H:mm:ss', title: '24 Hour with Seconds (H:mm:ss)'},
-					{value: 'hh:mm', title: 'Padded (hh:mm)'},
-					{value: 'hh:mm:ss', title: 'Padded with Seconds (hh:mm:ss)'},
-					{value: 'HH:mm', title: 'Padded 24 Hour (HH:mm)'},
-					{value: 'HH:mm:ss', title: 'Padded 24 Hour with Seconds (HH:mm:ss)'},
+					{value: 'h:mm', title: '12 Hour'},
+					{value: 'h:mm:ss', title: '12 Hour with Seconds'},
+					{value: 'H:mm', title: '24 Hour'},
+					{value: 'H:mm:ss', title: '24 Hour with Seconds'},
+					{value: 'hh:mm', title: 'Padded'},
+					{value: 'hh:mm:ss', title: 'Padded with Seconds'},
+					{value: 'HH:mm', title: 'Padded 24 Hour'},
+					{value: 'HH:mm:ss', title: 'Padded 24 Hour with Seconds'},
 				]
 			}
 		});
@@ -939,9 +944,8 @@ export default class Chat extends Module {
 		if (!( time instanceof Date ))
 			time = new Date(time);
 
-		const fmt = this.settings.get('chat.timestamp-format');
-
-		return dayjs(time).format(fmt);
+		const fmt = this.context.get('chat.timestamp-format');
+		return dayjs(time).locale(this.i18n.locale).format(fmt);
 	}
 
 

src/modules/chat/tokenizers.jsx

@@ -78,9 +78,13 @@ export const Links = {
 					content = `<img class="preview-image" src="${sanitize(data.image)}">${content}`
 
 				setTimeout(() => {
-					if ( tip.element )
-						for(const el of tip.element.querySelectorAll('video,img'))
-							el.addEventListener('load', tip.update)
+					if ( tip.element ) {
+						for(const el of tip.element.querySelectorAll('img'))
+							el.addEventListener('load', tip.update);
+
+						for(const el of tip.element.querySelectorAll('video'))
+							el.addEventListener('loadedmetadata', tip.update);
+					}
 				});
 
 			} else if ( content.length )

src/modules/main_menu/components/menu-page.vue

@@ -33,8 +33,9 @@
 		<section
 			v-if="item.description"
 			class="tw-border-t tw-pd-y-1"
-			v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
-		/>
+		>
+			<markdown :source="t(item.desc_i18n_key || `${item.i18n_key}.description`, item.description, item)" />
+		</section>
 		<template v-if="! item.contents || ! item.contents.length">
 			<ul class="tw-border-t tw-pd-y-1">
 				<li

src/modules/main_menu/components/setting-check-box.vue

@@ -38,8 +38,9 @@
 			v-if="item.description"
 			class="tw-c-text-alt-2"
 			style="padding-left:2.2rem"
-			v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
-		/>
+		>
+			<markdown :source="t(item.desc_i18n_key || `${item.i18n_key}.description`, item.description, item)" />
+		</section>
 	</div>
 </template>
 

src/modules/main_menu/components/setting-hotkey.vue

@@ -23,8 +23,10 @@
 		</div>
 		<section
 			v-if="item.description"
-			v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
-		/>
+			class="tw-c-text-alt-2"
+		>
+			<markdown :source="t(item.desc_i18n_key || `${item.i18n_key}.description`, item.description, item)" />
+		</section>
 	</div>
 </template>
 

src/modules/main_menu/components/setting-radio-buttons.vue

@@ -6,8 +6,9 @@
 		<section
 			v-if="item.description"
 			class="tw-c-text-alt-2"
-			v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
-		/>
+		>
+			<markdown :source="t(item.desc_i18n_key || `${item.i18n_key}.description`, item.description, item)" />
+		</section>
 		<div v-for="(i, idx) in data" :key="idx" class="tw-mg-l-1">
 			<input
 				:name="item.full_key"

src/modules/main_menu/components/setting-select-box.vue

@@ -44,8 +44,9 @@
 		<section
 			v-if="item.description"
 			class="tw-c-text-alt-2"
-			v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
-		/>
+		>
+			<markdown :source="t(item.desc_i18n_key || `${item.i18n_key}.description`, item.description, item)" />
+		</section>
 	</div>
 </template>
 

src/modules/main_menu/components/setting-text-box.vue

@@ -12,7 +12,7 @@
 				ref="control"
 				:id="item.full_key"
 				:value="value"
-				class="tw-border-radius-medium tw-font-size-6 tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-05 tw-input"
+				class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-mg-05 tw-input"
 				@change="onChange"
 			>
 
@@ -37,8 +37,9 @@
 		<section
 			v-if="item.description"
 			class="tw-c-text-alt-2"
-			v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
-		/>
+		>
+			<markdown :source="t(item.desc_i18n_key || `${item.i18n_key}.description`, item.description, item)" />
+		</section>
 	</div>
 </template>
 

src/modules/metadata.jsx

@@ -256,11 +256,11 @@ export default class Metadata extends Module {
 				legacy_bar.updateMetadata(inst, keys);
 		}
 
-		const game_header = this.resolve('site.directory.game');
+		/*const game_header = this.resolve('site.directory.game');
 		if ( game_header ) {
 			for(const inst of game_header.GameHeader.instances)
 				game_header.updateMetadata(inst, keys);
-		}
+		}*/
 	}
 
 

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

@@ -61,6 +61,7 @@ export default class ChatLine extends Module {
 		this.chat.context.on('changed:chat.actions.inline', this.updateLines, this);
 		this.chat.context.on('changed:chat.filtering.show-deleted', this.updateLines, this);
 		this.chat.context.on('changed:chat.filtering.process-own', this.updateLines, this);
+		this.chat.context.on('changed:chat.timestamp-format', this.updateLines, this);
 		this.chat.context.on('changed:chat.filtering.highlight-basic-terms--color-regex', this.updateLines, this);
 		this.chat.context.on('changed:chat.filtering.highlight-basic-blocked--regex', this.updateLines, this);
 

src/sites/twitch-twilight/modules/directory/game.jsx

@@ -6,6 +6,7 @@
 
 import {SiteModule} from 'utilities/module';
 import {createElement} from 'utilities/dom';
+import { get } from 'utilities/object';
 
 import GAME_QUERY from './game.gql';
 
@@ -16,11 +17,11 @@ export default class Game extends SiteModule {
 		this.inject('site.fine');
 		this.inject('site.apollo');
 
-		this.inject('metadata');
+		//this.inject('metadata');
 		this.inject('i18n');
 		this.inject('settings');
 
-		this.metadata.definitions.block_game = {
+		/*this.metadata.definitions.block_game = {
 			type: 'directory',
 			button(data) {
 				return `ffz-directory-toggle-block${data.blocked ? ' active' : ''}`
@@ -83,17 +84,11 @@ export default class Game extends SiteModule {
 			},
 
 			click: this.generateClickHandler('directory.game.hidden-thumbnails')
-		}
-
-		this.LegacyGameHeader = this.fine.define(
-			'legacy-game-header',
-			n => n.renderFollowButton && n.renderGameDetailsTab,
-			['dir-game-index', 'dir-community']
-		);
+		}*/
 
 		this.GameHeader = this.fine.define(
 			'game-header',
-			n => n.renderDirectoryMetadata,
+			n => n.props && n.props.data && n.renderDropsAvailable,
 			['dir-game-index', 'dir-community', 'dir-game-videos', 'dir-game-clips', 'dir-game-details']
 		);
 
@@ -101,27 +96,99 @@ export default class Game extends SiteModule {
 	}
 
 	onEnable() {
-		this.GameHeader.on('unmount', this.unmountGameHeader, this);
 		this.GameHeader.on('mount', this.updateGameHeader, this);
 		this.GameHeader.on('update', this.updateGameHeader, this);
 
 		this.GameHeader.ready((cls, instances) => {
-			this.settings.updateContext({new_channel: true});
-
 			for(const inst of instances)
 				this.updateGameHeader(inst);
 		});
-
-		this.LegacyGameHeader.ready((cls, instances) => {
-			for(const inst of instances)
-				this.updateButtons(inst);
-		});
-
-		this.LegacyGameHeader.on('update', this.updateButtons, this);
 	}
 
 
-	unmountGameHeader(inst) { // eslint-disable-line class-methods-use-this
+	updateGameHeader(inst) {
+		this.updateButtons(inst);
+	}
+
+
+	updateButtons(inst) {
+		const container = this.fine.getChildNode(inst);
+		if ( get('data.variables.type', inst.props) !== 'GAME' || ! container || ! container.querySelector )
+			return;
+
+		const buttons = container.querySelector('.tw-flex > .tw-inline-flex');
+		if ( ! buttons )
+			return;
+
+		const ffz_buttons = buttons.querySelector('.ffz-buttons');
+		if ( ffz_buttons )
+			ffz_buttons.remove();
+
+		let block_btn, block_label,
+			hidden_btn, hidden_label;
+
+		const game = get('data.directory.name', inst.props),
+			update_block = () => {
+				const blocked_games = this.settings.provider.get('directory.game.blocked-games', []),
+					blocked = blocked_games.includes(game);
+
+				block_btn.classList.toggle('active', blocked);
+				block_label.textContent = blocked ?
+					this.i18n.t('directory.unblock', 'Unblock') :
+					this.i18n.t('directory.block', 'Block');
+			},
+			update_hidden = () => {
+				const hidden_games = this.settings.provider.get('directory.game.hidden-thumbnails', []),
+					hidden = hidden_games.includes(game);
+
+				hidden_btn.classList.toggle('active', hidden);
+				hidden_label.textContent = hidden ?
+					this.i18n.t('directory.show-thumbnails', 'Show Thumbnails') :
+					this.i18n.t('directory.hide-thumbnails', 'Hide Thumbnails');
+			};
+
+		block_btn = (<button
+			class="tw-mg-l-1 tw-button ffz-directory-toggle-block"
+			onClick={this.generateClickHandler('directory.game.blocked-games', game, update_block)}
+		>
+			{block_label = <span class="tw-button__text" />}
+		</button>);
+
+		update_block();
+
+		hidden_btn = (<button
+			class="tw-mg-l-1 tw-button ffz-directory-toggle-thumbnail"
+			onClick={this.generateClickHandler('directory.game.hidden-thumbnails', game, update_hidden)}
+		>
+			{hidden_label = <span class="tw-button__text" />}
+		</button>);
+
+		update_hidden();
+
+		buttons.appendChild(<div class="ffz-buttons">
+			{block_btn}
+			{hidden_btn}
+		</div>);
+	}
+
+	generateClickHandler(setting, game, update_func) {
+		return e => {
+			e.preventDefault();
+			const values = this.settings.provider.get(setting) || [],
+				idx = values.indexOf(game);
+
+			if ( idx === -1 )
+				values.push(game);
+			else
+				values.splice(idx, 1);
+
+			this.settings.provider.set(setting, values);
+			this.parent.DirectoryCard.forceUpdate();
+			update_func();
+		}
+	}
+
+	/*unmountGameHeader(inst) { // eslint-disable-line class-methods-use-this
 		const timers = inst._ffz_meta_timers;
 		if ( timers )
 			for(const key in timers)
@@ -134,7 +201,6 @@ export default class Game extends SiteModule {
 		this.updateMetadata(inst);
 	}
 
-
 	updateMetadata(inst, keys) {
 		const container = this.fine.getChildNode(inst),
 			wrapper = container && container.querySelector && container.querySelector('.side-nav-directory-info__info-wrapper > div + div');
@@ -164,90 +230,6 @@ export default class Game extends SiteModule {
 			this.metadata.render(key, data, metabar, timers, refresh_func);
 	}
 
-
-	updateButtons(inst, update = false) {
-		const container = this.fine.getChildNode(inst);
-		if ( inst.props.directoryType !== 'GAMES' || ! container || ! container.querySelector )
-			return;
-
-		const buttons = container.querySelector('div > div.tw-align-items-center'),
-			ffz_buttons = buttons && buttons.querySelector('.ffz-buttons');
-
-		if ( ! buttons || (ffz_buttons && ! update) )
-			return;
-
-		if ( ffz_buttons )
-			ffz_buttons.remove();
-
-		// The Block / Unblock Button
-		let block_btn, block_label,
-			hidden_btn, hidden_label;
-
-		const game = inst.props.directoryName,
-			update_block = () => {
-				const blocked_games = this.settings.provider.get('directory.game.blocked-games') || [],
-					blocked = blocked_games.includes(game);
-
-				block_btn.classList.toggle('active', blocked);
-				block_label.textContent = blocked ?
-					this.i18n.t('directory.unblock', 'Unblock') :
-					this.i18n.t('directory.block', 'Block');
-			}
-
-
-		block_btn = (<button
-			class="tw-mg-l-1 tw-button ffz-directory-toggle-block"
-			onClick={this.generateLegacyClickHandler('directory.game.blocked-games', game, update_block)}
-		>
-			{block_label = <span class="tw-button__text" />}
-		</button>);
-
-		update_block();
-
-
-		const update_hidden = () => {
-			const hidden_games = this.settings.provider.get('directory.game.hidden-thumbnails') || [],
-				hidden = hidden_games.includes(game);
-
-			hidden_btn.classList.toggle('active', hidden);
-			hidden_label.textContent = hidden ?
-				this.i18n.t('directory.show-thumbnails', 'Show Thumbnails') :
-				this.i18n.t('directory.hide-thumbnails', 'Hide Thumbnails');
-
-			this.parent.DirectoryCard.forceUpdate();
-		}
-
-		hidden_btn = (<button
-			class="tw-mg-l-1 tw-button ffz-directory-toggle-thumbnail"
-			onClick={this.generateLegacyClickHandler('directory.game.hidden-thumbnails', game, update_hidden)}
-		>
-			{hidden_label = <span class="tw-button__text" />}
-		</button>)
-
-		update_hidden();
-
-		buttons.appendChild(<div class="ffz-buttons">
-			{block_btn}
-			{hidden_btn}
-		</div>);
-	}
-
-	generateLegacyClickHandler(setting, game, update_func) {
-		return e => {
-			e.preventDefault();
-			const values = this.settings.provider.get(setting) || [],
-				idx = values.indexOf(game);
-
-			if ( idx === -1 )
-				values.push(game);
-			else
-				values.splice(idx, 1);
-
-			this.settings.provider.set(setting, values);
-			update_func();
-		}
-	}
-
 	generateClickHandler(setting) {
 		return (data, event, update_func) => {
 			const values = this.settings.provider.get(setting, []),
@@ -263,5 +245,5 @@ export default class Game extends SiteModule {
 			this.parent.DirectoryCard.forceUpdate();
 			update_func();
 		}
-	}
+	}*/
 }

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

@@ -39,7 +39,7 @@ export default class Player extends Module {
 			ui: {
 				path: 'Channel > Player >> Volume',
 				title: 'Adjust volume by scrolling with the mouse wheel.',
-				description: '<em>This setting will not work properly on streams with visible extensions when mouse interaction with extensions is allowed.</em>',
+				description: '*This setting will not work properly on streams with visible extensions when mouse interaction with extensions is allowed.*',
 				component: 'setting-check-box'
 			},
 

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

@@ -33,7 +33,11 @@ export default class ThemeEngine extends Module {
 			ui: {
 				path: 'Appearance @{"description": "Personalize the appearance of Twitch. Change the color scheme and fonts and tune the layout to optimize your experience."} > Theme >> General',
 				title: 'Gray (no Purple)',
-				description: '<em>Requires Dark Theme to be Enabled.</em><br>I see my website and I want it painted black...<br>This is a very early feature and will change as there is time.',
+				description: `*Requires Dark Theme to be Enabled.*
+
+I see my website and I want it painted black...
+
+This is a very early feature and will change as there is time.`,
 				component: 'setting-check-box'
 			},