diff --git a/changelog.html b/changelog.html index e05217c0..3c8244a8 100644 --- a/changelog.html +++ b/changelog.html @@ -350,7 +350,7 @@
4.0.0-beta1.7@a50bda0e204137eb8f28
diff --git a/src/main.js b/src/main.js index dc83ad00..31011eb2 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: '-rc13.6', + major: 4, minor: 0, revision: 0, extra: '-rc13.7', commit: __git_commit__, build: __webpack_hash__, toString: () => diff --git a/src/modules/chat/badges.jsx b/src/modules/chat/badges.jsx index 5b4a96ca..072a9fb1 100644 --- a/src/modules/chat/badges.jsx +++ b/src/modules/chat/badges.jsx @@ -435,12 +435,14 @@ export default class Badges extends Module { } if (no_invert) { + slotted[slot].full_size = true; + style.background = 'unset'; style.backgroundSize = 'unset'; style[CSS_MASK_IMAGE] = 'unset'; } - if ( has_image && urls ) { + if ( (has_image || color === 'transparent') && urls ) { const image = `url("${urls[1]}")`; let image_set; if ( urls[2] || urls[4] ) @@ -464,7 +466,7 @@ export default class Badges extends Module { const data = slotted[slot], props = data.props; - props.className = 'ffz-tooltip ffz-badge'; + props.className = `ffz-tooltip ffz-badge${data.full_size ? ' ffz-full-size' : ''}`; props.key = `${props['data-provider']}-${props['data-badge']}`; props['data-tooltip-type'] = 'badge'; props['data-badge-data'] = JSON.stringify(data.badges); diff --git a/src/sites/twitch-clips/modules/theme/index.js b/src/sites/twitch-clips/modules/theme/index.js index 4ace5564..53a714dd 100644 --- a/src/sites/twitch-clips/modules/theme/index.js +++ b/src/sites/twitch-clips/modules/theme/index.js @@ -66,8 +66,8 @@ export default class ThemeEngine extends Module { const dark = this.settings.get('theme.is-dark'), gray = this.settings.get('theme.dark'); - document.body.classList.toggle('tw-theme--dark', dark); - document.body.classList.toggle('tw-theme--ffz', gray); + document.body.classList.toggle('tw-root--theme-dark', dark); + document.body.classList.toggle('tw-root--theme-ffz', gray); } diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js index 8a85a18a..34ec6c8e 100644 --- a/src/sites/twitch-twilight/modules/chat/index.js +++ b/src/sites/twitch-twilight/modules/chat/index.js @@ -88,7 +88,9 @@ const CHAT_TYPES = make_enum( 'Subscription', 'Resubscription', 'GiftPaidUpgrade', + 'AnonGiftPaidUpgrade', 'SubGift', + 'AnonSubGift', 'Clear', 'RoomMods', 'RoomState', @@ -102,7 +104,8 @@ const CHAT_TYPES = make_enum( 'BitsCharity', 'CrateGift', 'RewardGift', - 'SubMysteryGift' + 'SubMysteryGift', + 'AnonSubMysteryGift' ); diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss index 07f45a32..2d858b40 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss @@ -14,7 +14,7 @@ border-top: 1px solid #aaa; border-bottom-color: var rgba(255,255,255,0.5); - .tw-theme--dark & { + .tw-root--theme-dark & { border-top-color: #000; border-bottom-color: rgba(255,255,255,0.1); } @@ -30,7 +30,7 @@ border-top: 1px solid #aaa; border-bottom-color: var rgba(255,255,255,0.5); - .tw-theme--dark & { + .tw-root--theme-dark & { border-top-color: #000; border-bottom-color: rgba(255,255,255,0.1); } diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss index 0d78fa6a..04450603 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss @@ -12,7 +12,7 @@ border-top: 1px solid rgba(255,255,255,0.5); border-bottom-color: #aaa; - .tw-theme--dark & { + .tw-root--theme-dark & { border-top-color: rgba(255,255,255,0.1); border-bottom-color: #000; } @@ -28,7 +28,7 @@ border-top: 1px solid rgba(255,255,255,0.5); border-bottom-color: #aaa; - .tw-theme--dark & { + .tw-root--theme-dark & { border-top-color: rgba(255,255,255,0.1); border-bottom-color: #000; } diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss index 528d8745..2722062e 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss @@ -3,7 +3,7 @@ &.ffz-mentioned:not(.ffz-custom-color):nth-child(2n+0) { background-color: rgba(255,127,127,.4) !important; - .tw-theme--dark & { + .tw-root--theme-dark & { background-color: rgba(255,0,0,.3) !important; } } @@ -12,7 +12,7 @@ .video-chat__message-list-wrapper li:nth-child(2n+0) .vod-message.ffz-mentioned:not(.ffz-custom-color) { background-color: rgba(255,127,127,.4) !important; - .tw-theme--dark & { + .tw-root--theme-dark & { background-color: rgba(255,0,0,.3) !important; } } \ No newline at end of file diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss index ea113526..b8aceae0 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss @@ -4,7 +4,7 @@ &.ffz-mentioned:not(.ffz-custom-color) { background-color: rgba(255,127,127,.2) !important; - .tw-theme--dark & { + .tw-root--theme-dark & { background-color: rgba(255,0,0,.2) !important; } } diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-token.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-token.scss index f41a3d03..ab41a174 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-token.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-token.scss @@ -7,7 +7,7 @@ color: #fff; background: rgba(0,0,0,0.5); - .tw-theme--dark & { + .tw-root--theme-dark & { color: #000; background-color: rgba(255,255,255,0.5); } 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 44d582b4..e0e8db23 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 @@ -14,7 +14,7 @@ &:nth-child(2n+0) { background-color: rgba(0,0,0,0.1) !important; - .tw-theme--dark & { + .tw-root--theme-dark & { background-color: rgba(255,255,255,0.05) !important; } } @@ -28,7 +28,7 @@ .video-chat__message-list-wrapper li:nth-child(2n+0) .vod-message:not(.ffz-custom-color) { background-color: rgba(0,0,0,0.1) !important; - .tw-theme--dark & { + .tw-root--theme-dark & { background-color: rgba(255,255,255,0.05) !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 5d364ce8..4c3a597e 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss @@ -38,6 +38,7 @@ left: 0 !important; right: 0 !important; height: calc(100vh - var(--ffz-player-height)) !important; + width: unset !important; border-top: 1px solid #dad8de; .right-column__toggle-visibility { @@ -60,7 +61,7 @@ } } - .tw-theme--dark & { + .tw-root--theme-dark & { border-top-color: #2a2a2a } diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss index ccafb98e..fb240afb 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss @@ -18,11 +18,11 @@ border-right: none !important; border-left: 1px solid #dad8de; - .tw-theme--dark & { + .tw-root--theme-dark & { border-left-color: #2c2541; } - .tw-theme--ffz.tw-theme--dark & { + .tw-root--theme-ffz.tw-root--theme-dark & { border-left-color: var(--ffz-color-20); } } @@ -31,12 +31,12 @@ border-left: none !important; border-right: 1px solid #dad8de; - .tw-theme--dark & { + .tw-root--theme-dark & { border-right-color: #2c2541; } - .tw-theme--ffz.tw-theme--dark & { + .tw-root--theme-ffz.tw-root--theme-dark & { border-right-color: var(--ffz-color-20); } } diff --git a/src/sites/twitch-twilight/modules/directory/browse_popular.gql b/src/sites/twitch-twilight/modules/directory/browse_popular.gql index 6ea15342..419b25a3 100644 --- a/src/sites/twitch-twilight/modules/directory/browse_popular.gql +++ b/src/sites/twitch-twilight/modules/directory/browse_popular.gql @@ -1,4 +1,4 @@ -fragment browsePagePopularStreamsWithTagsEdge2 on StreamEdge { +fragment browsePagePopularStreamsWithTagsEdge on StreamEdge { node { createdAt } diff --git a/src/sites/twitch-twilight/modules/directory/browse_popular.js b/src/sites/twitch-twilight/modules/directory/browse_popular.js index bce8416e..df7b8d73 100644 --- a/src/sites/twitch-twilight/modules/directory/browse_popular.js +++ b/src/sites/twitch-twilight/modules/directory/browse_popular.js @@ -25,7 +25,7 @@ export default class BrowsePopular extends SiteModule { // Popular Directory Channel Cards this.apollo.ensureQuery( 'BrowsePage_Popular', - 'data.streams.edges.node.0.createdAt' + 'data.streams.edges.0.node.createdAt' ); } diff --git a/src/sites/twitch-twilight/modules/directory/game.jsx b/src/sites/twitch-twilight/modules/directory/game.jsx index 7751fbdc..755b1be4 100644 --- a/src/sites/twitch-twilight/modules/directory/game.jsx +++ b/src/sites/twitch-twilight/modules/directory/game.jsx @@ -72,21 +72,21 @@ export default class Game extends SiteModule { updateButtons(inst) { const container = this.fine.getChildNode(inst); - if ( get('data.variables.type', inst.props) !== 'GAME' || ! container || ! container.querySelector ) + if ( get('data.game', inst.props) == null || ! container || ! container.querySelector ) return; const buttons = container.querySelector('.tw-flex > .tw-inline-flex'); if ( ! buttons ) return; - const ffz_buttons = buttons.querySelector('.ffz-buttons'); + const ffz_buttons = buttons.querySelector('.ffz-directory-buttons'); if ( ffz_buttons ) ffz_buttons.remove(); let block_btn, block_label, hidden_btn, hidden_label; - const game = get('data.directory.name', inst.props), + const game = get('data.game.name', inst.props) || inst.props.directoryName, update_block = () => { const blocked_games = this.settings.provider.get('directory.game.blocked-games', []), blocked = blocked_games.includes(game); @@ -124,7 +124,7 @@ export default class Game extends SiteModule { update_hidden(); - buttons.appendChild(
+ buttons.appendChild(
{block_btn} {hidden_btn}
); diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js index 6057f2a4..9b14bfa1 100644 --- a/src/sites/twitch-twilight/modules/theme/index.js +++ b/src/sites/twitch-twilight/modules/theme/index.js @@ -52,9 +52,9 @@ This is a very early feature and will change as there is time.`, }); this.settings.add('theme.is-dark', { - requires: ['theme.can-dark', 'context.ui.theme'], + requires: ['theme.can-dark', 'context.ui.theme', 'context.ui.theatreModeEnabled'], process(ctx) { - return ctx.get('theme.can-dark') && ctx.get('context.ui.theme') === 1; + return ctx.get('context.ui.theatreModeEnabled') || (ctx.get('theme.can-dark') && ctx.get('context.ui.theme') === 1); }, changed: () => this.updateCSS() }); @@ -74,8 +74,8 @@ This is a very early feature and will change as there is time.`, const dark = this.settings.get('theme.is-dark'), gray = this.settings.get('theme.dark'); - document.body.classList.toggle('tw-theme--dark', dark); - document.body.classList.toggle('tw-theme--ffz', gray); + document.body.classList.toggle('tw-root--theme-dark', dark); + document.body.classList.toggle('tw-root--theme-ffz', gray); this.css_tweaks.setVariable('border-color', dark ? (gray ? '#2a2a2a' : '#2c2541') : '#dad8de'); } diff --git a/src/sites/twitch-twilight/styles/channel.scss b/src/sites/twitch-twilight/styles/channel.scss index 5dbc299e..e8462e71 100644 --- a/src/sites/twitch-twilight/styles/channel.scss +++ b/src/sites/twitch-twilight/styles/channel.scss @@ -33,7 +33,7 @@ } } -.tw-theme--ffz, .tw-theme--ffz.tw-theme--dark, .tw-theme--dark, body { +.tw-root--theme-ffz, .tw-root--theme-ffz.tw-root--theme-dark, .tw-root--theme-dark, body { .ffz-stat > .tw-button--text, .ffz-stat.tw-button--text { color: inherit; diff --git a/src/sites/twitch-twilight/styles/chat.scss b/src/sites/twitch-twilight/styles/chat.scss index 14ac9ba0..2185d2bc 100644 --- a/src/sites/twitch-twilight/styles/chat.scss +++ b/src/sites/twitch-twilight/styles/chat.scss @@ -101,7 +101,7 @@ .ffz--action &, .tw-interactable:hover &, &:hover { - .tw-theme--dark &, & { + .tw-root--theme-dark &, & { &.tw-c-text-alt-2 { color: inherit !important; } diff --git a/src/sites/twitch-twilight/styles/directory.scss b/src/sites/twitch-twilight/styles/directory.scss index 512589c1..32284936 100644 --- a/src/sites/twitch-twilight/styles/directory.scss +++ b/src/sites/twitch-twilight/styles/directory.scss @@ -9,6 +9,10 @@ pointer-events: all; } +.ffz-directory-buttons { + order: 1; +} + // TODO: Color variables diff --git a/src/sites/twitch-twilight/styles/fixes.scss b/src/sites/twitch-twilight/styles/fixes.scss index 4a9c7ce5..0bc7180e 100644 --- a/src/sites/twitch-twilight/styles/fixes.scss +++ b/src/sites/twitch-twilight/styles/fixes.scss @@ -1,4 +1,4 @@ -.tw-theme--dark .live-channel-card__boxart { +.tw-root--theme-dark .live-channel-card__boxart { border-right: none; border-bottom: none; } diff --git a/src/sites/twitch-twilight/styles/theme.scss b/src/sites/twitch-twilight/styles/theme.scss index e67469a8..b2b21339 100644 --- a/src/sites/twitch-twilight/styles/theme.scss +++ b/src/sites/twitch-twilight/styles/theme.scss @@ -1,4 +1,4 @@ -.tw-theme--ffz { +.tw-root--theme-ffz { --ffz-color-0: #1d1d1d; --ffz-color-1: #dadada; --ffz-color-2: #a6a6a6; @@ -78,7 +78,7 @@ --ffz-color-74: rgba(125, 125, 125, 0.5); } -.tw-theme--ffz, .tw-theme--ffz .tw-theme--dark, .tw-theme--ffz.tw-theme--dark { +.tw-root--theme-ffz, .tw-root--theme-ffz .tw-root--theme-dark, .tw-root--theme-ffz.tw-root--theme-dark { .modal__backdrop { background-color: var(--ffz-color-25); } diff --git a/styles/chat.scss b/styles/chat.scss index ed78f4d2..8902886a 100644 --- a/styles/chat.scss +++ b/styles/chat.scss @@ -33,6 +33,13 @@ margin: 0 .3rem .2rem 0; background-position: center; vertical-align: middle; + + &.ffz-full-size { + min-width: 1.8rem; + height: 1.8rem; + margin: 0 .3rem .2rem 0; + border-radius: 0; + } } diff --git a/styles/dialog.scss b/styles/dialog.scss index ffeca61d..915d5a53 100644 --- a/styles/dialog.scss +++ b/styles/dialog.scss @@ -33,7 +33,7 @@ width: 100%; height: 100%; - &, .tw-theme--dark & { + &, .tw-root--theme-dark & { border: none !important; } diff --git a/styles/tooltips.scss b/styles/tooltips.scss index bd8adf39..1a01a616 100644 --- a/styles/tooltips.scss +++ b/styles/tooltips.scss @@ -116,7 +116,7 @@ body { } - .tw-theme--dark & { + .tw-root--theme-dark & { background: #fff; color: #0e0c13; diff --git a/styles/widgets.scss b/styles/widgets.scss index 9d57612c..b0bf8818 100644 --- a/styles/widgets.scss +++ b/styles/widgets.scss @@ -175,7 +175,7 @@ border-radius: 2px; background-color: rgba(0,0,0,0.1); - .tw-theme--dark & { + .tw-root--theme-dark & { background-color: rgba(255,255,255,0.05); } } diff --git a/styles/widgets/color-picker.scss b/styles/widgets/color-picker.scss index bb5be553..a1a85b0e 100644 --- a/styles/widgets/color-picker.scss +++ b/styles/widgets/color-picker.scss @@ -8,7 +8,7 @@ $input-border: #392e5c; $input-active-border: #7d5bbe; -.tw-theme--dark { +.tw-root--theme-dark { .vc-sketch { background: $bg-color; box-shadow: 0 0 0 1px $border-color, @@ -57,7 +57,7 @@ $input-border: var(--ffz-color-26); $input-active-border: var(--ffz-color-5); -.tw-theme--dark.tw-theme--ffz { +.tw-root--theme-dark.tw-root--theme-ffz { .vc-sketch { background: $bg-color; box-shadow: 0 0 0 1px $border-color, diff --git a/styles/widgets/menu-container.scss b/styles/widgets/menu-container.scss index ac795d4d..c01384d7 100644 --- a/styles/widgets/menu-container.scss +++ b/styles/widgets/menu-container.scss @@ -16,7 +16,7 @@ background-color: $bg-light; - .tw-theme--dark & { + .tw-root--theme-dark & { background-color: $bg-dark; } diff --git a/styles/widgets/menu-tree.scss b/styles/widgets/menu-tree.scss index 7b59463b..2167b659 100644 --- a/styles/widgets/menu-tree.scss +++ b/styles/widgets/menu-tree.scss @@ -19,7 +19,7 @@ .active > div, .active > div:hover, - .tw-theme--dark & .active > div:hover { + .tw-root--theme-dark & .active > div:hover { background-color: #6441a4; color: #fff; } @@ -29,7 +29,7 @@ background-color: #fff; - .tw-theme--dark & { + .tw-root--theme-dark & { background-color: #201c2b; } } diff --git a/styles/widgets/profile-selector.scss b/styles/widgets/profile-selector.scss index c80326aa..2ccbd6be 100644 --- a/styles/widgets/profile-selector.scss +++ b/styles/widgets/profile-selector.scss @@ -23,7 +23,7 @@ opacity: .5; font-variant: italic; - .tw-theme--dark & { + .tw-root--theme-dark & { opacity: .25; } } @@ -37,7 +37,7 @@ } &:last-child { - &, .tw-theme--dark & { + &, .tw-root--theme-dark & { border-bottom: none !important } } @@ -69,7 +69,7 @@ &:not(.live):not(:hover):not(:focus) { opacity: 0.5; - .tw-theme--dark & { + .tw-root--theme-dark & { opacity: .25; } } diff --git a/styles/widgets/tab-container.scss b/styles/widgets/tab-container.scss index 4d788a10..0ac085c4 100644 --- a/styles/widgets/tab-container.scss +++ b/styles/widgets/tab-container.scss @@ -20,7 +20,7 @@ border-color: $border-light; - .tw-theme--dark & { + .tw-root--theme-dark & { border-color: $border-dark; }