diff --git a/src/main.js b/src/main.js index cd132bdb..5c204e7a 100644 --- a/src/main.js +++ b/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', + major: 4, minor: 0, revision: 0, extra: '-rc12.1', commit: __git_commit__, build: __webpack_hash__, toString: () => diff --git a/src/sites/twitch-twilight/modules/css_tweaks/index.js b/src/sites/twitch-twilight/modules/css_tweaks/index.js index 4578ca94..5eb75f8f 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/index.js +++ b/src/sites/twitch-twilight/modules/css_tweaks/index.js @@ -62,11 +62,32 @@ export default class CSSTweaks extends Module { } }); + this.settings.add('layout.portrait-threshold', { + default: 1.25, + ui: { + path: 'Appearance > Layout >> Channel', + title: 'Portrait Mode Threshold', + description: 'This is the Width to Height ratio at which point Portrait Mode will begin to activate.', + component: 'setting-text-box', + process(val) { + val = parseFloat(val, 10) + if ( isNaN(val) || ! isFinite(val) || val <= 0 ) + return 1.25; + + return val; + } + } + }) + this.settings.add('layout.use-portrait', { - requires: ['layout.portrait', 'context.ui.rightColumnExpanded', 'context.route.name', 'context.size'], + requires: ['layout.portrait', 'layout.portrait-threshold', '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) + if ( ! size || ! ctx.get('layout.portrait') || ! ctx.get('context.ui.rightColumnExpanded') || ! PORTRAIT_ROUTES.includes(ctx.get('context.route.name')) ) + return false; + + const ratio = size.width / size.height; + return ratio <= ctx.get('layout.portrait-threshold'); }, changed: val => this.toggle('portrait', val) }); diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss index 26faa93a..41f9f5dd 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss @@ -26,6 +26,7 @@ } .right-column { + display: unset !important; position: fixed !important; z-index: 10000; bottom: 0;