Use ref-counting with socket topic subscriptions to make it easy to tell when we should and shouldn't actually unsubscribe. Add route awareness to FineWrapper so that we can unregister the MutationObserver when we know we won't be suddenly finding an instance that we're looking for. Have the channel bar register for the channel pubsub topic. Fix minimize navigation showing the navigation bar over top of theater mode.

src/sites/twitch-twilight/index.js

@@ -50,8 +50,12 @@ export default class Twilight extends BaseSite {
 
 		this.router.on(':route', (route, match) => {
 			this.log.info('Navigation', route && route.name, match && match[0]);
+			this.fine.route(route && route.name);
 		});
 
+		const current = this.router.current;
+		this.fine.route(current && current.name);
+
 		document.head.appendChild(e('link', {
 			href: MAIN_URL,
 			rel: 'stylesheet',
@@ -95,6 +99,19 @@ Twilight.KNOWN_MODULES = {
 }
 
 
+Twilight.CHAT_ROUTES = [
+	'collection',
+	'popout',
+	'video',
+	'user-videos',
+	'user-clips',
+	'user-events',
+	'user-followers',
+	'user-following',
+	'user'
+]
+
+
 Twilight.ROUTES = {
 	'front-page': '/',
 	'collection': '/collections/:collectionID',
@@ -110,10 +127,13 @@ Twilight.ROUTES = {
 	'dir-all': '/directory/all/:filter?',
 	'dir-category': '/directory/:category?',
 	'event': '/event/:eventName',
-	'following': '/following',
-	'popout': '/popout',
+	'popout': '/popout/:userName/chat',
 	'video': '/videos/:videoID',
 	'user-videos': '/:userName/videos/:filter?',
-	'user-clips': '/:userName/manager/clips',
+	'user-clips': '/:userName/clips',
+	'user-collections': '/:userName/collections',
+	'user-events': '/:userName/events',
+	'user-followers': '/:userName/followers',
+	'user-following': '/:userName/following',
 	'user': '/:userName'
 }

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

@@ -19,6 +19,7 @@ export default class ChannelBar extends Module {
 		this.inject('site.fine');
 		this.inject('site.apollo');
 		this.inject('metadata');
+		this.inject('socket');
 
 		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', CHANNEL_QUERY);
 		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', data => {
@@ -32,39 +33,60 @@ export default class ChannelBar extends Module {
 
 		this.ChannelBar = this.fine.define(
 			'channel-bar',
-			n => n.getTitle && n.getGame && n.renderGame
+			n => n.getTitle && n.getGame && n.renderGame,
+			['user']
 		);
 
 
 		this.HostBar = this.fine.define(
 			'host-container',
-			n => n.handleReportHosterClick
+			n => n.handleReportHosterClick,
+			['user']
 		)
 	}
 
 	onEnable() {
+		this.ChannelBar.on('unmount', this.unmountChannelBar, this);
+		this.ChannelBar.on('mount', this.updateChannelBar, this);
+		this.ChannelBar.on('update', this.updateChannelBar, this);
+
 		this.ChannelBar.ready((cls, instances) => {
 			for(const inst of instances)
 				this.updateChannelBar(inst);
 		});
 
-		this.ChannelBar.on('unmount', this.unmountChannelBar, this);
-		this.ChannelBar.on('mount', this.updateChannelBar, this);
-		this.ChannelBar.on('update', this.updateChannelBar, this);
 
-		/*this.HostBar.on('mount', inst => {
-			this.log.info('host-mount', inst, this.fine.getChildNode(inst));
-		});
+		/*this.HostBar.on('unmount', this.unmountHostBar, this);
+		this.HostBar.on('mount', this.updateHostBar, this);
+		this.HostBar.on('update', this.updateHostBar, this);
 
 		this.HostBar.ready((cls, instances) => {
 			for(const inst of instances)
-				this.log.info('host-found', inst, this.fine.getChildNode(inst));
-		})*/
-
+				this.updateHostBar(inst);
+		});*/
 	}
 
 
-	unmountChannelBar(inst) { // eslint-disable-line class-methods-use-this
+	updateChannelBar(inst) {
+		const login = inst.props.channelLogin;
+		if ( login !== inst._ffz_old_login ) {
+			if ( inst._ffz_old_login )
+				this.socket.unsubscribe(inst, `channel.${inst._ffz_old_login}`);
+
+			if ( login )
+				this.socket.subscribe(inst, `channel.${login}`);
+			inst._ffz_old_login = login;
+		}
+
+		this.updateMetadata(inst);
+	}
+
+	unmountChannelBar(inst) {
+		if ( inst._ffz_old_login ) {
+			this.socket.unsubscribe(inst, `channel.${inst._ffz_old_login}`);
+			inst._ffz_old_login = null;
+		}
+
 		const timers = inst._ffz_meta_timers;
 		if ( timers )
 			for(const key in timers)
@@ -75,11 +97,6 @@ export default class ChannelBar extends Module {
 	}
 
 
-	updateChannelBar(inst) {
-		this.updateMetadata(inst);
-	}
-
-
 	updateMetadata(inst, keys) {
 		const container = this.fine.getChildNode(inst),
 			metabar = container && container.querySelector && container.querySelector('.channel-info-bar__action-container > .tw-flex');

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

@@ -10,6 +10,8 @@ import {has, split_chars} from 'utilities/object';
 
 import Module from 'utilities/module';
 
+import Twilight from 'site';
+
 import Scroller from './scroller';
 import ChatLine from './line';
 import SettingsMenu from './settings_menu';
@@ -114,17 +116,20 @@ export default class ChatHook extends Module {
 
 		this.ChatController = this.fine.define(
 			'chat-controller',
-			n => n.chatService
+			n => n.chatService,
+			Twilight.CHAT_ROUTES
 		);
 
 		this.ChatContainer = this.fine.define(
 			'chat-container',
-			n => n.showViewersList && n.onChatInputFocus
+			n => n.showViewersList && n.onChatInputFocus,
+			Twilight.CHAT_ROUTES
 		);
 
 		this.PinnedCheer = this.fine.define(
 			'pinned-cheer',
-			n => n.collapseCheer && n.saveRenderedMessageRef
+			n => n.collapseCheer && n.saveRenderedMessageRef,
+			Twilight.CHAT_ROUTES
 		);
 
 

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

@@ -4,6 +4,7 @@
 // Chat Line
 // ============================================================================
 
+import Twilight from 'site';
 import Module from 'utilities/module';
 //import {Color} from 'utilities/color';
 
@@ -25,12 +26,14 @@ export default class ChatLine extends Module {
 
 		this.ChatLine = this.fine.define(
 			'chat-line',
-			n => n.renderMessageBody && ! n.getMessageParts
+			n => n.renderMessageBody && ! n.getMessageParts,
+			Twilight.CHAT_ROUTES
 		);
 
 		this.ChatRoomLine = this.fine.define(
 			'chat-room-line',
-			n => n.renderMessageBody && n.getMessageParts
+			n => n.renderMessageBody && n.getMessageParts,
+			Twilight.CHAT_ROUTES
 		);
 	}
 
@@ -46,7 +49,7 @@ export default class ChatLine extends Module {
 
 		const e = React.createElement;
 
-		this.ChatLine.ready((cls, instances) => {
+		this.ChatLine.ready(cls => {
 			cls.prototype.shouldComponentUpdate = function(props, state) {
 				const show = state.alwaysShowMessage || ! props.message.deleted,
 					old_show = this._ffz_show;

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

@@ -5,6 +5,7 @@
 // ============================================================================
 
 import {createElement as e} from 'utilities/dom';
+import Twilight from 'site';
 import Module from 'utilities/module';
 
 export default class Scroller extends Module {
@@ -19,7 +20,8 @@ export default class Scroller extends Module {
 
 		this.ChatScroller = this.fine.define(
 			'chat-scroller',
-			n => n.saveScrollRef && n.handleScrollEvent
+			n => n.saveScrollRef && n.handleScrollEvent,
+			Twilight.CHAT_ROUTES
 		);
 
 		this.settings.add('chat.scroller.freeze', {

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

@@ -4,7 +4,7 @@
 // Chat Settings Menu
 // ============================================================================
 
-import {createElement as e} from 'utilities/dom';
+import Twilight from 'site';
 import Module from 'utilities/module';
 
 export default class SettingsMenu extends Module {
@@ -19,7 +19,8 @@ export default class SettingsMenu extends Module {
 
 		this.SettingsMenu = this.fine.define(
 			'chat-settings',
-			n => n.renderUniversalOptions && n.dismissRaidsTooltip
+			n => n.renderUniversalOptions && n.dismissRaidsTooltip,
+			Twilight.CHAT_ROUTES
 		);
 	}
 

src/sites/twitch-twilight/modules/css_tweaks/styles/minimal-navigation.scss

@@ -1,7 +1,5 @@
 .twilight-root {
 	.top-nav {
-		z-index: 9999;
-
 		> div {
 			height: 5rem !important;
 		}

src/sites/twitch-twilight/modules/directory/browse_popular.js

@@ -21,7 +21,8 @@ export default class BrowsePopular extends SiteModule {
 
 		this.ChannelCard = this.fine.define(
 			'browse-all-channel-card',
-			n => n.props && n.props.channelName && n.props.linkTo && n.props.linkTo.state && n.props.linkTo.state.medium === 'twitch_browse_directory'
+			n => n.props && n.props.channelName && n.props.linkTo && n.props.linkTo.state && n.props.linkTo.state.medium === 'twitch_browse_directory',
+			['dir-all']
 		);
 
 		this.apollo.registerModifier('BrowsePage_Popular', res => this.modifyStreams(res), false);

src/sites/twitch-twilight/modules/directory/following.js

@@ -70,7 +70,8 @@ export default class Following extends SiteModule {
 
 		this.ChannelCard = this.fine.define(
 			'following-channel-card',
-			n => n.renderGameBoxArt && n.renderContentType
+			n => n.renderGameBoxArt && n.renderContentType,
+			['dir-following']
 		);
 
 		this.apollo.registerModifier('FollowedIndex_CurrentUser', res => {

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

@@ -1,6 +1,6 @@
 query {
 	directory {
-		... on Game {
+		... on Community {
 			streams {
 				edges {
 					node {
@@ -13,7 +13,7 @@ query {
 				}
 			}
 		}
-		... on Community {
+		... on Game {
 			streams {
 				edges {
 					node {

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

@@ -21,7 +21,8 @@ export default class Game extends SiteModule {
 
 		this.GameHeader = this.fine.define(
 			'game-header',
-			n => n.renderFollowButton && n.renderGameDetailsTab
+			n => n.renderFollowButton && n.renderGameDetailsTab,
+			['dir-game-index', 'dir-community']
 		);
 
 		this.apollo.registerModifier('GamePage_Game', GAME_QUERY);

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

@@ -35,7 +35,8 @@ export default class Directory extends SiteModule {
 
 		this.ChannelCard = this.fine.define(
 			'channel-card',
-			n => n.props && n.props.streamNode
+			n => n.props && n.props.streamNode,
+			['dir-community', 'dir-game-index']
 		);
 
 

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

@@ -23,7 +23,8 @@ export default class Player extends Module {
 
 		this.Player = this.fine.define(
 			'twitch-player',
-			n => n.player && n.onPlayerReady
+			n => n.player && n.onPlayerReady,
+			['front-page', 'user', 'video']
 		);
 
 

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

@@ -32,7 +32,8 @@ export default class SubButton extends Module {
 
 		this.SubButton = this.fine.define(
 			'sub-button',
-			n => n.reportSubMenuAction && n.isUserDataReady
+			n => n.reportSubMenuAction && n.isUserDataReady,
+			['user', 'video']
 		);
 	}