From 5e5b3280762678201973f45f605ade90a8ddba5e Mon Sep 17 00:00:00 2001 From: SirStendec Date: Tue, 24 Nov 2020 16:43:51 -0500 Subject: [PATCH] 4.20.51 * Added: Setting to display chat more compactly in Portrait Mode. * Fixed: Display the Picture by Picture player more appropriately in Portrait Mode. --- package.json | 2 +- src/experiments.json | 4 +-- .../twitch-twilight/modules/chat/index.js | 7 +++++ .../modules/css_tweaks/styles/chat-rows.scss | 1 + .../css_tweaks/styles/portrait-chat.scss | 26 +++++++++++++++++++ .../modules/css_tweaks/styles/portrait.scss | 9 +++++++ src/sites/twitch-twilight/modules/layout.js | 19 ++++++++++++++ 7 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 src/sites/twitch-twilight/modules/css_tweaks/styles/portrait-chat.scss diff --git a/package.json b/package.json index fa744561..8fd8ecfd 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.20.50", + "version": "4.20.51", "description": "FrankerFaceZ is a Twitch enhancement suite.", "license": "Apache-2.0", "scripts": { diff --git a/src/experiments.json b/src/experiments.json index 11e83ce7..4b20e7e3 100644 --- a/src/experiments.json +++ b/src/experiments.json @@ -11,8 +11,8 @@ "name": "API-Based Link Lookups", "description": "Use the new API to look up links instead of the socket cluster.", "groups": [ - {"value": true, "weight": 75}, - {"value": false, "weight": 25} + {"value": true, "weight": 50}, + {"value": false, "weight": 50} ] } } \ No newline at end of file diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js index fc17e97a..aff890b7 100644 --- a/src/sites/twitch-twilight/modules/chat/index.js +++ b/src/sites/twitch-twilight/modules/chat/index.js @@ -392,6 +392,13 @@ export default class ChatHook extends Module { this.settings.add('chat.points.show-rewards', { default: true, + requires: ['layout.portrait-min-chat'], + process(ctx, val) { + if ( ctx.get('layout.portrait-min-chat') ) + return false; + + return val; + }, ui: { path: 'Chat > Channel Points >> Behavior', title: 'Allow available rewards to appear next to the Channel Points button.', diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss index 0c4f3d0f..9e7821e1 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss @@ -7,6 +7,7 @@ .chat-list__lines .chat-line__raid, .chat-list__lines .chat-line__bits-charity, .user-notice-line, +.ffz-notice-line, .chat-line__message:not(.chat-line--inline) { &:not(.ffz-custom-color) { background-color: transparent !important; diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait-chat.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait-chat.scss new file mode 100644 index 00000000..650fdcc2 --- /dev/null +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait-chat.scss @@ -0,0 +1,26 @@ +.chat-input > div:last-child { + display: flex; + + & > div { + flex-grow: 3; + align-self: flex-end; + } + + .chat-input__buttons-container { + flex-grow: 1; + margin-top: 0 !important; + margin-bottom: 0.5rem; + margin-left: 1rem; + } +} + +.right-column:not(.right-column--collapsed) { + .right-column__toggle-visibility { + top: 0; + } +} + +.chat-viewers__header, +.stream-chat-header { + height: 3rem !important; +} \ No newline at end of file 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 d05de6f8..bed67c65 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss @@ -28,6 +28,15 @@ } } + .picture-by-picture-player { + position: absolute; + z-index: 100; + top: 0; + right: 5rem; + height: 20vh; + width: calc(20vh * calc(16 / 9)) !important; + } + .persistent-player.persistent-player--theatre { .ffz--portrait-invert & { top: unset !important; diff --git a/src/sites/twitch-twilight/modules/layout.js b/src/sites/twitch-twilight/modules/layout.js index ca793934..95cac74b 100644 --- a/src/sites/twitch-twilight/modules/layout.js +++ b/src/sites/twitch-twilight/modules/layout.js @@ -76,6 +76,24 @@ export default class Layout extends Module { return val; } } + }); + + this.settings.add('layout.portrait-min-chat', { + default: false, + requires: ['layout.use-portrait'], + process(ctx, val) { + if ( ! ctx.get('layout.use-portrait') ) + return false; + + return val; + }, + ui: { + path: 'Appearance > Layout >> Channel', + title: 'Use compact chat in Portrait Mode.', + description: 'When enabled, this minimizes the chat header and places the chat input box in line with the chat buttons in order to present a more compact chat able to display more lines with limited vertical space.', + component: 'setting-check-box' + }, + changed: val => this.css_tweaks.toggle('portrait-chat', val) }) this.settings.add('layout.use-portrait', { @@ -192,6 +210,7 @@ export default class Layout extends Module { this.on(':update-nav', this.updateNavLinks, this); this.on(':resize', this.handleResize, this); + this.css_tweaks.toggle('portrait-chat', this.settings.get('layout.portrait-min-chat')); 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.toggle('portrait-metadata', this.settings.get('layout.use-portrait-meta'));