4.5.0

* Added: Setting to hide the "LIVE" indicator on live channel pages.
* Added: Setting to invert portrait mode, placing chat at the top rather than the bottom.
* API Added: New icons to the default icon set: `user`, `clip`, `sort-down`, `sort-up`, `sort-alt-up`, `sort-alt-down`, and `language`.
* API Added: All Vue components now have access to a `getReactURL(route, ...)` method for building URLs.
* API Fixed: `<react-link />` will not attempt a React navigation if given a non-relative link.
* API Fixed: Issue with `getTagImmediate` throwing an exception when not given a callback function.

res/font/ffz-fontello.svg

@@ -108,6 +108,10 @@
 
 <glyph glyph-name="play" unicode="&#xe832;" d="M772 333l-741-412q-13-7-22-2t-9 20v822q0 14 9 20t22-2l741-412q13-7 13-17t-13-17z" horiz-adv-x="785.7" />
 
+<glyph glyph-name="user" unicode="&#xe833;" d="M714 69q0-60-35-104t-84-44h-476q-49 0-84 44t-35 104q0 48 5 90t17 85 33 73 52 50 76 19q73-72 174-72t175 72q42 0 75-19t52-50 33-73 18-85 4-90z m-143 495q0-88-62-151t-152-63-151 63-63 151 63 152 151 63 152-63 62-152z" horiz-adv-x="714.3" />
+
+<glyph glyph-name="clip" unicode="&#xe834;" d="M900 608l-14 99a50 50 0 0 1-57 43l-123-18 95-138 99 14z m-251-35l-96 138-148-21 95-138 149 21z m-287-42l-95 138-124-17a50 50 0 0 1-42-57l14-99 247 35z m538-131v-404c0-28-22-46-50-46h-700c-28 0-50 18-50 46v404h250l-100-150h150l100 150h150l-100-150h150l100 150h100z" 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" />
 
 <glyph glyph-name="twitter" unicode="&#xf099;" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 115 44-21-64-80-100 52 6 104 28z" horiz-adv-x="928.6" />

src/main.js

@@ -151,7 +151,7 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 4, revision: 2,
+	major: 4, minor: 5, revision: 0,
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/modules/tooltips.js

@@ -31,6 +31,30 @@ export default class TooltipProvider extends Module {
 			]
 		}
 
+		this.types.child = target => {
+			const child = target.querySelector(':scope > .ffz-tooltip-child');
+			if ( ! child )
+				return null;
+
+			target._ffz_child = child;
+			child.remove();
+			child.classList.remove('ffz-tooltip-child');
+			return child;
+		};
+
+		this.types.child.onHide = target => {
+			const child = target._ffz_child;
+			if ( child ) {
+				target._ffz_child = null;
+				child.remove();
+
+				if ( ! target.querySelector(':scope > .ffz-tooltip-child') ) {
+					child.classList.add('ffz-tooltip-child');
+					target.appendChild(child);
+				}
+			}
+		}
+
 		this.types.text = target => sanitize(target.dataset.title);
 		this.types.html = target => target.dataset.title;
 	}
@@ -46,6 +70,10 @@ export default class TooltipProvider extends Module {
 			content: this.process.bind(this),
 			interactive: this.checkInteractive.bind(this),
 			hover_events: this.checkHoverEvents.bind(this),
+
+			onShow: this.delegateOnShow.bind(this),
+			onHide: this.delegateOnHide.bind(this),
+
 			popper: {
 				placement: 'top',
 				modifiers: {
@@ -74,6 +102,22 @@ export default class TooltipProvider extends Module {
 		this.tips.cleanup();
 	}
 
+	delegateOnShow(target, tip) {
+		const type = target.dataset.tooltipType,
+			handler = this.types[type];
+
+		if ( handler && handler.onShow )
+			handler.onShow(target, tip);
+	}
+
+	delegateOnHide(target, tip) {
+		const type = target.dataset.tooltipType,
+			handler = this.types[type];
+
+		if ( handler && handler.onHide )
+			handler.onHide(target, tip);
+	}
+
 	checkDelayShow(target, tip) {
 		const type = target.dataset.tooltipType,
 			handler = this.types[type];

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

@@ -32,6 +32,7 @@ const CLASSES = {
 	'dir-live-ind': '.live-channel-card:not([data-a-target*="host"]) .stream-type-indicator.stream-type-indicator--live,.stream-thumbnail__card .stream-type-indicator.stream-type-indicator--live,.preview-card .stream-type-indicator.stream-type-indicator--live,.preview-card .preview-card-stat.preview-card-stat--live',
 	'profile-hover': '.preview-card .tw-relative:hover .ffz-channel-avatar',
 	'not-live-bar': 'div[data-test-selector="non-live-video-banner-layout"]',
+	'channel-live-ind': 'div[data-target="channel-header__live-indicator"]'
 };
 
 
@@ -220,6 +221,20 @@ export default class CSSTweaks extends Module {
 
 		// Other?
 
+		this.settings.add('channel.hide-live-indicator', {
+			requires: ['context.route.name'],
+			process(ctx, val) {
+				return ctx.get('context.route.name') === 'user' ? val : false
+			},
+			default: false,
+			ui: {
+				path: 'Channel > Appearance >> General',
+				title: 'Hide the "LIVE" indicator on live channel pages.',
+				component: 'setting-check-box'
+			},
+			changed: val => this.toggleHide('channel-live-ind', val)
+		});
+
 		this.settings.add('channel.round-avatars', {
 			default: true,
 			ui: {
@@ -231,7 +246,7 @@ export default class CSSTweaks extends Module {
 		});
 
 		this.settings.add('channel.hide-not-live-bar', {
-			default: true,
+			default: false,
 			ui: {
 				path: 'Channel > Appearance >> General',
 				title: 'Hide the "Not Live" bar.',
@@ -256,6 +271,7 @@ export default class CSSTweaks extends Module {
 
 		this.toggle('square-avatars', ! this.settings.get('channel.round-avatars'));
 		this.toggleHide('not-live-bar', this.settings.get('channel.hide-not-live-bar'));
+		this.toggleHide('channel-live-ind', this.settings.get('channel.hide-live-indicator'));
 
 		const recs = this.settings.get('layout.side-nav.show-rec-channels');
 		this.toggleHide('side-rec-channels', recs === 0);

src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss

@@ -2,14 +2,22 @@
 	--ffz-player-width: calc(100vw - var(--ffz-portrait-extra-width));
 	--ffz-player-height: calc(calc(calc(var(--ffz-player-width) * 0.5625) + var(--ffz-portrait-extra-height)));
 	--ffz-theater-height: calc(calc(100vw * 0.5625) + var(--ffz-portrait-extra-height));
+	--ffz-chat-height: calc(100vh - var(--ffz-player-height));
+
+	& > .tw-flex-column {
+		.ffz--portrait-invert & {
+			top: var(--ffz-chat-height) !important;
+		}
 
-	& > .tw-full-height {
 		height: var(--ffz-player-height) !important;
 	}
 
 	.persistent-player.persistent-player__border--mini {
 		pointer-events: none;
-		bottom: calc(100vh - var(--ffz-player-height)) !important;
+
+		body:not(.ffz--portrait-invert) & {
+			bottom: var(--ffz-chat-height) !important;
+		}
 
 		> * {
 			pointer-events: auto;
@@ -17,10 +25,18 @@
 	}
 
 	.persistent-player.persistent-player--theatre {
+		.ffz--portrait-invert & {
+			top: unset !important;
+			bottom: 0 !important;
+		}
+
+		body:not(.ffz--portrait-invert) & {
 			top: 0 !important;
+			bottom: unset !important;
+		}
+
 		left: 0 !important;
 		right: 0 !important;
-		bottom: unset !important;
 		height: var(--ffz-theater-height) !important;
 		width: 100% !important;
 	}
@@ -37,28 +53,62 @@
 		bottom: 0 !important;
 		left: 0 !important;
 		right: 0 !important;
-		height: calc(100vh - var(--ffz-player-height)) !important;
+		height: var(--ffz-chat-height) !important;
 		width: unset !important;
+
+		body:not(.ffz--portrait-invert) & {
+			top: unset !important;
+			bottom: 0 !important;
 			border-top: 1px solid #dad8de;
 
+			.tw-root--theme-dark & {
+				border-top-color: #2a2a2a;
+			}
+		}
+
+		.ffz--portrait-invert & {
+			top: 0 !important;
+			bottom: unset !important;
+			border-bottom: 1px solid #dad8de;
+
+			.tw-root--theme-dark & {
+				border-bottom-color: #2a2a2a;
+			}
+		}
+
 		& > .tw-full-height {
 			width: 100% !important;
 		}
 
 		.right-column__toggle-visibility {
 			position: fixed !important;
+
+			body:not(.ffz--portrait-invert) & {
 				top: 6.5rem;
+			}
+
+			.ffz--portrait-invert & {
+				top: calc(var(--ffz-chat-height) + 6.5rem);
+			}
+
 			right: .5rem;
 			left: unset !important;
 			transform: rotate(90deg);
 		}
 
 		.emote-picker__tab-content {
-			max-height: calc(calc(100vh - var(--ffz-player-height)) - 26rem);
+			max-height: calc(var(--ffz-chat-height) - 26rem);
 		}
 
 		&.right-column--theatre {
+			.ffz--portrait-invert & {
+				bottom: unset !important;
+			}
+
+			body:not(.ffz--portrait-invert) & {
 				top: unset !important;
+			}
+
 			height: calc(100vh - var(--ffz-theater-height)) !important;
 
 			.emote-picker__tab-content {
@@ -66,10 +116,6 @@
 			}
 		}
 
-		.tw-root--theme-dark & {
-			border-top-color: #2a2a2a
-		}
-
 		.video-chat {
 			flex-basis: unset;
 		}

src/sites/twitch-twilight/modules/layout.js

@@ -40,6 +40,16 @@ export default class Layout extends Module {
 			}
 		});
 
+		this.settings.add('layout.portrait-invert', {
+			default: false,
+			ui: {
+				path: 'Appearance > Layout >> Channel',
+				title: 'When in portrait mode, place chat at the top.',
+				component: 'setting-check-box'
+			},
+			changed: val => document.body.classList.toggle('ffz--portrait-invert', val)
+		});
+
 		this.settings.add('layout.portrait-threshold', {
 			default: 1.25,
 			ui: {
@@ -147,6 +157,8 @@ export default class Layout extends Module {
 	}
 
 	onEnable() {
+		document.body.classList.toggle('ffz--portrait-invert', this.settings.get('layout.portrait-invert'));
+
 		this.css_tweaks.toggle('portrait', this.settings.get('layout.inject-portrait'));
 		this.css_tweaks.toggle('portrait-swapped', this.settings.get('layout.use-portrait-swapped'));
 		this.css_tweaks.setVariable('portrait-extra-width', `${this.settings.get('layout.portrait-extra-width')}rem`);

src/std-components/aspect.vue

@@ -4,7 +4,7 @@
 		class="tw-aspect"
 	>
 		<div
-			:style="{paddingBottom: (100 * (1 / (props.ratio || 1))) + '%'}"
+			:style="{paddingBottom: (props.padding ? props.padding : (100 * (1 / (props.ratio || 1)))) + '%'}"
 			class="tw-aspect__spacer"
 		/>
 		<slot />

src/std-components/icon-picker.vue

@@ -130,9 +130,13 @@ const FFZ_ICONS = [
 	'up-dir',
 	'up-big',
 	'play',
+	'user',
+	'clip',
 	'link-ext',
 	'twitter',
 	'github',
+	'sort-down',
+	'sort-up',
 	'gauge',
 	'download-cloud',
 	'upload-cloud',
@@ -140,6 +144,9 @@ const FFZ_ICONS = [
 	'keyboard',
 	'calendar-empty',
 	'ellipsis-vert',
+	'sort-alt-up',
+	'sort-alt-down',
+	'language',
 	'twitch',
 	'bell-off',
 	'trash',

src/std-components/react-link.vue

@@ -13,7 +13,7 @@ export default {
 		onClick(event) {
 			this.$emit('click', event);
 
-			if ( ! event.defaultPrevented )
+			if ( ! event.defaultPrevented && ! this.href.includes('//') )
 				this.reactNavigate(this.href, event);
 		}
 	}

src/utilities/compat/fine-router.js

@@ -73,11 +73,26 @@ export default class FineRouter extends Module {
 		this.emit(':route', null, null);
 	}
 
-	getURL(route, data, opts) {
+	getURL(route, data, opts, ...args) {
 		const r = this.routes[route];
 		if ( ! r )
 			throw new Error(`unable to find route "${route}"`);
 
+		if ( typeof data !== 'object' ) {
+			const parts = [data, opts, ...args];
+			data = {};
+
+			let i = 0;
+			for(const part of r.parts) {
+				if ( part && part.name ) {
+					data[part.name] = parts[i];
+					i++;
+					if ( i >= parts.length )
+						break;
+				}
+			}
+		}
+
 		return r.url(data, opts);
 	}
 

src/utilities/time.js

@@ -22,9 +22,11 @@ export function duration_to_string(elapsed, separate_days, days_only, no_hours,
 		days = days > 0 ? `${days} days, ` : '';
 	}
 
+	const show_hours = (!no_hours || days || hours);
+
 	return `${days}${
-		(!no_hours || days || hours) ? `${days && hours < 10 ? '0' : ''}${hours}:` : ''
+		show_hours ? `${days && hours < 10 ? '0' : ''}${hours}:` : ''
-	}${minutes < 10 ? '0' : ''}${minutes}${
+	}${show_hours && minutes < 10 ? '0' : ''}${minutes}${
 		no_seconds ? '' : `:${seconds < 10 ? '0' : ''}${seconds}`}`;
 }
 

src/utilities/twitch-data.js

@@ -378,8 +378,11 @@ export default class TwitchData extends Module {
 		if ( this.tag_cache.has(id) )
 			out = this.tag_cache.get(id);
 
-		if ( ! out || (want_description && ! out.description) )
+		if ( (want_description && (! out || ! out.description)) || (! out && callback) ) {
-			this.getTag(id, want_description).then(tag => callback(id, tag)).catch(err => callback(id, null, err));
+			const promise = this.getTag(id, want_description);
+			if ( callback )
+				promise.then(tag => callback(id, tag)).catch(err => callback(id, null, err));
+		}
 
 		return out;
 	}

src/utilities/vue.js

@@ -170,6 +170,10 @@ export class Vue extends Module {
 						router.history.push(url);
 					}
 				},
+				getReactURL(route, data, opts, ...args) {
+					const router = t.resolve('site.router');
+					return router.getURL(route, data, opts, ...args);
+				},
 				t(key, phrase, options) {
 					return this.$i18n.t_(key, phrase, options);
 				},

styles/icons.scss

@@ -125,6 +125,8 @@
 .ffz-i-up-dir:before { content: '\e830'; } /* '' */
 .ffz-i-up-big:before { content: '\e831'; } /* '' */
 .ffz-i-play:before { content: '\e832'; } /* '' */
+.ffz-i-user:before { content: '\e833'; } /* '' */
+.ffz-i-clip:before { content: '\e834'; } /* '' */
 .ffz-i-link-ext:before { content: '\f08e'; } /* '' */
 .ffz-i-twitter:before { content: '\f099'; } /* '' */
 .ffz-i-github:before { content: '\f09b'; } /* '' */

styles/tooltips.scss

@@ -8,6 +8,18 @@ body {
 }
 
 
+.ffz-tooltip.ffz-tooltip--no-mouse {
+	> * {
+		pointer-events: none;
+	}
+}
+
+
+.ffz-tooltip-child {
+	display: none !important;
+}
+
+
 .tw-balloon {
 	&[x-placement^="bottom"] > .tw-balloon__tail {
 		bottom: 100%;