4.0.0-rc12.6

* Fixed: Socket server not joining the correct room when using the new channel layout, causing some metadata to work incorrectly.
* Fixed: Featured Follow buttons not disappearing correctly when they are removed from a channel.

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.5',
+	major: 4, minor: 0, revision: 0, extra: '-rc12.6',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/modules/metadata.jsx

@@ -689,7 +689,23 @@ export default class Metadata extends Module {
 							if ( el._ffz_popup )
 								return el._ffz_destroy();
 
+							const listeners = [],
+								add_listener = cb => listeners.push(cb);
+
 							const destroy = el._ffz_destroy = () => {
+								for(const cb of listeners) {
+									try {
+										cb();
+									} catch(err) {
+										this.log.capture(err, {
+											tags: {
+												metadata: key
+											}
+										});
+										this.log.error('Error when running a callback for pop-up destruction for metadata:', key, err);
+									}
+								}
+
 								if ( el._ffz_outside )
 									el._ffz_outside.destroy();
 
@@ -725,7 +741,7 @@ export default class Metadata extends Module {
 											}
 										}
 									},
-									content: (t, tip) => def.popup.call(this, el._ffz_data, tip, () => refresh_fn(key)),
+									content: (t, tip) => def.popup.call(this, el._ffz_data, tip, () => refresh_fn(key), add_listener),
 									onShow: (t, tip) =>
 										setTimeout(() => {
 											el._ffz_outside = new ClickOutside(tip.outer, destroy);

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

@@ -5,6 +5,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
+import { get } from 'utilities/object';
 
 import CHANNEL_QUERY from './channel_bar_query.gql';
 
@@ -51,7 +52,7 @@ export default class ChannelBar extends Module {
 
 
 	updateChannelBar(inst) {
-		const login = inst.props.channelLogin;
+		const login = get('props.data.user.login', inst);
 		if ( login !== inst._ffz_old_login ) {
 			if ( inst._ffz_old_login )
 				this.socket.unsubscribe(inst, `channel.${inst._ffz_old_login}`);

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

@@ -50,7 +50,7 @@ export default class FeaturedFollow extends Module {
 			order: 150,
 			button: true,
 
-			popup: async (data, tip) => {
+			popup: async (data, tip, refresh_fn, add_callback) => {
 				const vue = this.resolve('vue'),
 					_featured_follow_vue = import(/* webpackChunkName: "featured-follow" */ './featured-follow.vue'),
 					_follows = this.getFollowsForLogin(data.channel.login);
@@ -61,7 +61,7 @@ export default class FeaturedFollow extends Module {
 				tip.element.classList.remove('tw-pd-1');
 				tip.element.classList.add('tw-balloon--lg');
 				vue.component('featured-follow', featured_follows_vue.default);
-				return this.buildFeaturedFollowMenu(vue, data.channel.login, follows);
+				return this.buildFeaturedFollowMenu(vue, data.channel.login, follows, add_callback);
 			},
 
 			label: data => {
@@ -71,7 +71,7 @@ export default class FeaturedFollow extends Module {
 				const follows = this.follow_data[data.channel.login];
 				if (!follows || !Object.keys(follows).length) {
 					if (!this.vueFeaturedFollow || !this.vueFeaturedFollow.data.hasUpdate) {
-						return '';
+						return null;
 					}
 				}
 
@@ -127,7 +127,7 @@ export default class FeaturedFollow extends Module {
 		return follows;
 	}
 
-	buildFeaturedFollowMenu(vue, login, follows) {
+	buildFeaturedFollowMenu(vue, login, follows, add_close_callback) {
 		const vueEl = new vue.Vue({
 			el: createElement('div'),
 			render: h => this.vueFeaturedFollow = h('featured-follow', {
@@ -139,7 +139,8 @@ export default class FeaturedFollow extends Module {
 				unfollowUser: id => this.unfollowUser(follows, id),
 				updateNotificationStatus: (id, oldStatus) => this.updateNotificationStatus(follows, id, oldStatus),
 				refresh: async () => {
-					if (!this.vueFeaturedFollow.data.hasUpdate) return;
+					if ( ! this.vueFeaturedFollow || ! this.vueFeaturedFollow.data.hasUpdate )
+						return;
 
 					this.vueFeaturedFollow.data.follows = await this.getFollowsForLogin(login);
 					this.vueFeaturedFollow.data.hasUpdate = false;
@@ -151,6 +152,10 @@ export default class FeaturedFollow extends Module {
 			}),
 		});
 
+		add_close_callback(() => {
+			this.vueFeaturedFollow = null;
+		})
+
 		return vueEl.$el;
 	}