4.0.0-rc12

* Added: Portrait Mode! Put chat beneath the player when your window is taller than it is wide to make the best use of space for both the player and chat.
* Fixed: Better route matching for when we're actually on the new channel page.
* Fixed: Unable to effectively collapse chat with a custom width on the new layout.

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

src/sites/twitch-twilight/index.js

@@ -48,6 +48,17 @@ export default class Twilight extends BaseSite {
 		if ( ! store )
 			return new Promise(r => setTimeout(r, 50)).then(() => this.onEnable());
 
+		// Window Size
+		const update_size = () => this.settings.updateContext({
+			size: {
+				height: window.innerHeight,
+				width: window.innerWidth
+			}
+		});
+
+		window.addEventListener('resize', update_size);
+		update_size();
+
 		// Share Context
 		store.subscribe(() => this.updateContext());
 		this.updateContext();
@@ -152,6 +163,8 @@ Twilight.CHAT_ROUTES = [
 	'collection',
 	'popout',
 	'video',
+	'user-video',
+	'user-clip',
 	'user-videos',
 	'user-clips',
 	'user-events',
@@ -181,15 +194,17 @@ Twilight.ROUTES = {
 	'event': '/event/:eventName',
 	'popout': '/popout/:userName/chat',
 	'video': '/videos/:videoID',
+	'user-video': '/:userName/video/:videoID',
 	'user-videos': '/:userName/videos/:filter?',
 	'user-clips': '/:userName/clips',
+	'user-clip': '/:userName/clip/:clipID',
 	'user-collections': '/:userName/collections',
 	'user-events': '/:userName/events',
 	'user-followers': '/:userName/followers',
 	'user-following': '/:userName/following',
 	'product': '/products/:productName',
 	'prime': '/prime',
-	'user': '/:userName'
+	'user': '/:userName',
 }
 
 

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

@@ -45,7 +45,7 @@ export default class Channel extends Module {
 		this.ChannelPage = this.fine.define(
 			'channel-page',
 			n => (n.getHostedChannelLogin && n.handleHostingChange) || n.hostModeFromGraphQL,
-			['user', 'user-videos', 'user-clips', 'user-collections', 'user-events', 'user-followers', 'user-following']
+			['user', 'video', 'user-video', 'user-clip', 'user-videos', 'user-clips', 'user-collections', 'user-events', 'user-followers', 'user-following']
 		);
 
 		this.RaidController = this.fine.define(

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

@@ -32,7 +32,7 @@ export default class ChannelBar extends Module {
 		this.ChannelBar = this.fine.define(
 			'channel-bar',
 			n => n.renderChannelMetadata && n.renderTitleInfo,
-			['user', 'video', 'user-videos', 'user-clips', 'user-collections', 'user-events', 'user-followers', 'user-following']
+			['user', 'user-video', 'user-clip', 'video', 'user-videos', 'user-clips', 'user-collections', 'user-events', 'user-followers', 'user-following']
 		)
 	}
 

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

@@ -9,6 +9,8 @@ import {ManagedStyle} from 'utilities/dom';
 import {has} from 'utilities/object';
 
 
+const PORTRAIT_ROUTES = ['user', 'video', 'user-video', 'user-clip', 'user-videos', 'user-clips', 'user-collections', 'user-events', 'user-followers', 'user-following']
+
 const CLASSES = {
 	'side-nav': '.side-nav',
 	'side-rec-channels': '.side-nav .recommended-channels',
@@ -50,16 +52,37 @@ export default class CSSTweaks extends Module {
 
 		// Layout
 
-		/*this.settings.add('layout.portrait', {
+		this.settings.add('layout.portrait', {
 			default: false,
 			ui: {
 				path: 'Appearance > Layout >> Channel',
 				title: 'Enable Portrait Mode',
 				description: 'In Portrait Mode, chat will be displayed beneath the player when the window is taller than it is wide.',
 				component: 'setting-check-box'
+			}
+		});
+
+		this.settings.add('layout.use-portrait', {
+			requires: ['layout.portrait', 'context.ui.rightColumnExpanded', 'context.route.name', 'context.size'],
+			process(ctx) {
+				const size = ctx.get('context.size');
+				return ctx.get('layout.portrait') && ctx.get('context.ui.rightColumnExpanded') && PORTRAIT_ROUTES.includes(ctx.get('context.route.name')) && (size && size.height > size.width)
 			},
 			changed: val => this.toggle('portrait', val)
-		});*/
+		});
+
+		this.settings.add('layout.sidenav-width', {
+			require: ['context.ui.theatreModeEnabled', 'context.ui.sideNavExpanded'],
+			process(ctx) {
+				if ( ctx.get('context.ui.theatreModeEnabled') )
+					return '0';
+
+				return ctx.get('context.ui.sideNavExpanded') ? '24rem' : '5rem'
+			},
+
+			changed: val => this.setVariable('sidenav-width', val)
+		});
+
 
 		this.settings.add('layout.side-nav.show', {
 			default: true,
@@ -212,7 +235,7 @@ export default class CSSTweaks extends Module {
 		this.toggle('swap-sidebars', this.settings.get('layout.swap-sidebars'));
 		this.toggle('minimal-navigation', this.settings.get('layout.minimal-navigation'));
 		this.toggle('theatre-nav', this.settings.get('layout.theatre-navigation'));
-		//this.toggle('portrait', this.settings.get('layout.portrait'));
+		this.toggle('portrait', this.settings.get('layout.use-portrait'));
 
 		this.toggle('hide-side-nav-avatars', ! this.settings.get('layout.side-nav.show-avatars'));
 		this.toggleHide('side-nav', !this.settings.get('layout.side-nav.show'));
@@ -228,8 +251,9 @@ export default class CSSTweaks extends Module {
 		this.toggleHide('side-closed-friends', friends === 2);
 
 		this.toggleHide('whispers', !this.settings.get('whispers.show'));
-	}
 
+		this.setVariable('sidenav-width', this.settings.get('layout.sidenav-width'))
+	}
 
 	toggleHide(key, val) {
 		const k = `hide--${key}`;

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-width.scss

@@ -9,7 +9,7 @@ body .channel-page__video-player--theatre-mode {
 
 body .video-watch-page__right-column,
 body .channel-page__right-column,
-body .right-column,
+body .right-column:not(.right-column--collapsed),
 body .channel-root__right-column {
 	width: var(--ffz-chat-width);
 }

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

@@ -0,0 +1,65 @@
+.twilight-root {
+	--ffz-player-width: calc(100vw - var(--ffz-sidenav-width));
+	--ffz-player-height: calc(calc(var(--ffz-player-width) * 0.5625) + 10rem);
+	--ffz-theater-height: calc(100vw * 0.5625);
+
+	& > .tw-full-height {
+		height: var(--ffz-player-height) !important;
+	}
+
+	.persistent-player {
+		pointer-events: none;
+		bottom: calc(100vh - var(--ffz-player-height)) !important;
+
+		> * {
+			pointer-events: auto;
+		}
+	}
+
+	.persistent-player--theatre {
+		top: 0 !important;
+		left: 0 !important;
+		right: 0 !important;
+		bottom: unset !important;
+		height: var(--ffz-theater-height) !important;
+		width: 100% !important;
+	}
+
+	.right-column {
+		position: fixed !important;
+		z-index: 10000;
+		bottom: 0;
+		left: 0; right: 0;
+		height: calc(100vh - var(--ffz-player-height)) !important;
+		border-top: 1px solid #dad8de;
+
+		.right-column__toggle-visibility {
+			position: fixed !important;
+			top: 6.5rem;
+			right: .5rem;
+			left: unset !important;
+		}
+
+		.emote-picker__tab-content {
+			max-height: calc(calc(100vh - var(--ffz-player-height)) - 26rem);
+		}
+
+		&.right-column--theatre {
+			top: unset !important;
+			height: calc(100vh - var(--ffz-theater-height)) !important;
+
+			.emote-picker__tab-content {
+				max-height: calc(calc(100vh - var(--ffz-theater-height)) - 26rem);
+			}
+		}
+
+		.tw-theme--dark & {
+			border-top-color: #2a2a2a
+		}
+
+		.channel-root__right-column,
+		.channel-page__right-column {
+			width: 100%;
+		}
+	}
+}

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

@@ -7,6 +7,7 @@
 import Module from 'utilities/module';
 import {createElement, on, off} from 'utilities/dom';
 
+export const PLAYER_ROUTES = ['front-page', 'user', 'video', 'user-video', 'user-clip', 'user-videos', 'user-clips', 'user-collections', 'user-events', 'user-followers', 'user-following', 'dash'];
 
 export default class Player extends Module {
 	constructor(...args) {
@@ -24,13 +25,13 @@ export default class Player extends Module {
 		this.Player = this.fine.define(
 			'twitch-player',
 			n => n.player && n.onPlayerReady,
-			['front-page', 'user', 'video', 'dash']
+			PLAYER_ROUTES
 		);
 
 		this.PersistentPlayer = this.fine.define(
 			'twitch-player-persistent',
 			n => n.renderMiniHoverControls && n.togglePause,
-			['front-page', 'user', 'video', 'dash']
+			PLAYER_ROUTES
 		);
 
 		this.settings.add('player.volume-scroll', {

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

@@ -33,7 +33,7 @@ export default class SubButton extends Module {
 		this.SubButton = this.fine.define(
 			'sub-button',
 			n => n.handleSubMenuAction && n.isUserDataReady,
-			['user', 'video']
+			['user', 'user-video', 'user-clip', 'video', 'user-videos', 'user-clips', 'user-collections', 'user-events', 'user-followers', 'user-following']
 		);
 	}
 

src/sites/twitch-twilight/modules/video_chat/index.jsx

@@ -33,13 +33,13 @@ export default class VideoChatHook extends Module {
 		this.VideoChatController = this.fine.define(
 			'video-chat-controller',
 			n => n.onMessageScrollAreaMount && n.createReply,
-			['video']
+			['user-video', 'user-clip', 'video']
 		);
 
 		this.VideoChatLine = this.fine.define(
 			'video-chat-line',
 			n => n.onReplyClickHandler && n.shouldFocusMessage,
-			['video']
+			['user-video', 'user-clip', 'video']
 		);
 
 		// Settings