oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-06-27 21:05:53 +00:00
Code Wiki Activity

4.22.8

Browse source 
* Fixed: Setting to display square avatars not functioning. (Closes #1042)
* Fixed: Chat message backgrounds on clips pages not appearing as full width.
* Fixed: Style of the Gain Control input element.
* Fixed: Shortcuts not being appended to live channel pages next to the channel name.
* Fixed: The Mod View button not being hidden correctly. (Closes #1044)
* Fixed: The "Hide Stream Info" button not being hidden in mod view.
* Fixed: The setting to use the FFZ logo for the emote menu button not functioning.
* Fixed: Multiple issues with portrait mode appearing incorrectly.
* Fixed: Block and Hide Thumbnails buttons not appearing on game directory pages.
This commit is contained in:
SirStendec 2021-05-19 16:59:26 -04:00
parent 432ac86342
commit fd0361b6e0
16 changed files with 214 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,7 +1,7 @@
{
"name": "frankerfacez",
"author": "Dan Salvato LLC",
"version": "4.22.7",
"version": "4.22.8",
"description": "FrankerFaceZ is a Twitch enhancement suite.",
"private": true,
"license": "Apache-2.0",

9
src/sites/clips/chat.jsx
View file

@ -151,6 +151,11 @@ export default class Chat extends Module {
const room = thing._ffz_room = this.chat.getRoom(channel_id, null, false, true);
room.ref(thing);
this.settings.updateContext({
channelID: channel_id
});
return room;
}
@ -161,6 +166,10 @@ export default class Chat extends Module {
thing._ffz_room.unref(thing);
thing._ffz_room = null;
this.settings.updateContext({
channelID: null
});
}

1
src/sites/clips/css_tweaks/square-avatars.scss
View file

@ -5,6 +5,7 @@
--border-radius-rounded: 0 !important;
}
.tw-image-avatar,
.user-avatar-card__halo,
.player-streaminfo__picture img[src] {
border-radius: 0 !important;

4
src/sites/clips/styles/clips-main.scss
View file

@ -31,9 +31,7 @@
}
.clips-chat-replay {
&.tw-flex {
display: block !important;
}
display: block !important;
& > div {
margin: 0 -1rem !important;

2
src/sites/clips/theme.js
View file

@ -396,7 +396,7 @@ export default class ThemeEngine extends Module {
this.toggleNormalizer(chat_bits.length || bits.length);
if ( bits.length )
this.css_tweaks.set('colors', `body {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content .gocjHQ{${accent_bits.join('\n')}}`);
this.css_tweaks.set('colors', `body {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content div[class^="ScAccentRegion"]{${accent_bits.join('\n')}}`);
else
this.css_tweaks.delete('colors');
}

10
src/sites/shared/player.jsx
View file

@ -1187,7 +1187,7 @@ export default class PlayerBase extends Module {
<label class="tw-hide-accessible">{this.i18n.t('player.gain.label','Gain Control')}</label>
<div class="tw-flex tw-full-width tw-relative tw-z-above">
{input = (<input
class="tw-range tw-range--overlay"
class="ffz-range ffz-range--overlay"
type="range"
min="0"
max="100"
@ -1195,11 +1195,11 @@ export default class PlayerBase extends Module {
data-a-target="player-gain-slider"
value="100"
/>)}
<div class="tw-absolute tw-border-radius-large tw-bottom-0 tw-flex tw-flex-column tw-full-width tw-justify-content-center tw-range__fill tw-range__fill--overlay tw-top-0 tw-z-below">
<div class="tw-border-radius-large tw-range__fill-container">
<div class="tw-absolute tw-border-radius-large tw-bottom-0 tw-flex tw-flex-column tw-full-width tw-justify-content-center ffz-range__fill ffz-range__fill--overlay tw-top-0 tw-z-below">
<div class="tw-border-radius-large ffz-range__fill-container">
{fill = (<div
class="tw-border-radius-large tw-range__fill-value ffz--gain-value"
data-test-selector="tw-range__fill-value-selector"
class="tw-border-radius-large ffz-range__fill-value ffz--gain-value"
data-test-selector="ffz-range__fill-value-selector"
/>)}
</div>
</div>

4
src/sites/twitch-twilight/modules/channel.jsx
View file

@ -332,9 +332,9 @@ export default class Channel extends Module {
}
if ( ! el._ffz_links && want_links ) {
const link = el.querySelector('a .tw-line-height-heading'),
const link = el.querySelector('a .tw-title'),
anchor = link && link.closest('a'),
cont = anchor && anchor.closest('.tw-flex');
cont = anchor && anchor.closest('div');
if ( cont && el.contains(cont) ) {
el._ffz_links = <div class="ffz--links tw-mg-l-1"></div>;

4
src/sites/twitch-twilight/modules/css_tweaks/index.js
View file

@ -22,7 +22,7 @@ const CLASSES = {
'side-closed-rec-channels': '.side-nav--collapsed .recommended-channels,.side-nav--collapsed .side-nav-section + .side-nav-section:not(.online-friends)',
'side-offline-channels': '.ffz--side-nav-card-offline',
'side-rerun-channels': '.side-nav .ffz--side-nav-card-rerun',
'modview-hide-info': '.tw-flex.modview-player-widget__hide-stream-info',
'modview-hide-info': '.modview-player-widget__hide-stream-info',
'community-highlights': '.community-highlight-stack__card',
@ -44,7 +44,7 @@ const CLASSES = {
'not-live-bar': 'div[data-test-selector="non-live-video-banner-layout"]',
'channel-live-ind': '.channel-header__user .tw-channel-status-text-indicator,.channel-info-content .tw-halo__indicator',
'celebration': 'body .celebration__overlay',
'mod-view': '.chat-input__buttons-container .tw-core-button[href*="/moderator"]'
'mod-view': '.chat-input__buttons-container a[href*="/moderator"]'
};

8
src/sites/twitch-twilight/modules/css_tweaks/styles/emote-menu.scss
View file

@ -1,8 +1,10 @@
button[data-a-target="emote-picker-button"] {
.tw-button-icon__icon {
padding: .6rem .4rem .2rem .4rem;
div[class^="ScButtonIcon"] {
padding: .2rem .2rem 0 0;
div > div {
overflow: unset !important;
&:before {
display: inline-block;
width: 2.4rem;
@ -12,8 +14,6 @@ button[data-a-target="emote-picker-button"] {
font-weight: normal;
speak: none;
margin-top: -.3rem;
font-variant: normal;
text-transform: none;

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

@ -4,7 +4,7 @@
--ffz-theater-height: calc(calc(100vw * 0.5625) + var(--ffz-portrait-extra-height));
--ffz-chat-height: calc(100vh - var(--ffz-player-height));
& > .tw-flex-column > .tw-full-height {
& > div:first-child > div[class^="sc"] {
.ffz--portrait-invert & {
position: absolute;
left: 0;

1
src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss
View file

@ -5,6 +5,7 @@
--border-radius-rounded: 0 !important;
}
.tw-image-avatar,
.user-avatar-card__halo,
.player-streaminfo__picture img[src],
.channel-info-content .tw-halo,

22
src/sites/twitch-twilight/modules/directory/game.jsx
View file

@ -63,10 +63,22 @@ export default class Game extends SiteModule {
for(const inst of instances)
this.updateGameHeader(inst);
});
this.on('site.router:route', route => {
if ( route && route.name === 'dir-game-index' )
this.updateGameHeader();
})
}
updateGameHeader(inst) {
if ( inst === undefined ) {
for(const inst of this.GameHeader.instances)
this.updateGameHeader(inst);
return;
}
this.updateButtons(inst);
const category = inst?.props?.data?.game;
@ -83,14 +95,14 @@ export default class Game extends SiteModule {
if ( get('data.game', inst.props) == null || ! container || ! container.querySelector )
return;
const buttons = container.querySelector('.tw-flex > .tw-flex-column');
if ( ! buttons )
return;
const ffz_buttons = buttons.querySelector('.ffz-directory-buttons');
const ffz_buttons = container.querySelector('.ffz-directory-buttons');
if ( ffz_buttons )
ffz_buttons.remove();
const buttons = container.querySelector('.directory-header-new__info > div > div + div');
if ( ! buttons )
return;
let block_btn, block_label,
hidden_btn, hidden_label;

2
src/sites/twitch-twilight/modules/theme/index.js
View file

@ -485,7 +485,7 @@ The CSS loaded by this setting is far too heavy and can cause performance issues
this.toggleNormalizer(chat_bits.length || bits.length);
if ( bits.length )
this.css_tweaks.set('colors', `body,body .tw-root--theme-light,body .tw-root--theme-dark {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content .gocjHQ{${accent_bits.join('\n')}}`);
this.css_tweaks.set('colors', `body,body .tw-root--theme-light,body .tw-root--theme-dark {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content div[class^="ScAccentRegion"]{${accent_bits.join('\n')}}`);
else
this.css_tweaks.delete('colors');
}

15
src/sites/twitch-twilight/styles/channel.scss
View file

@ -1,4 +1,4 @@
.channel-info-bar__content-right > .tw-align-items-start > .tw-flex:last-child,
/*.channel-info-bar__content-right > .tw-align-items-start > .tw-flex:last-child,
.channel-info-bar__action-container > .tw-flex {
.channel-info-bar__viewers-wrapper > div:first-child {
margin-right: 0;
@ -32,7 +32,7 @@
& > .tw-flex:last-child > :last-child {
margin-right: 0 !important
}
}
}*/
.tw-root--theme-ffz, .tw-root--theme-ffz.tw-root--theme-dark, .tw-root--theme-dark, body {
.ffz-stat > .tw-button--text,
@ -70,21 +70,14 @@
}
}
.ffz--meta-tray:not(.tw-flex-wrap) {
.ffz--meta-tray {
& > *:not(.ffz-stat) {
order: 500;
}
}
.ffz--meta-tray.tw-flex-wrap {
& > :first-child {
& > :first-child:not(.ffz-stat) {
order: 1;
}
& > :nth-child(0n+2) {
order: 500;
}
}
.ffz-stat {

3
styles/native/index.scss
View file

@ -7,4 +7,5 @@
@import "tag";
@import "progress";
@import "tooltip";
@import "balloon";
@import "balloon";
@import "slider";

162
styles/native/slider.scss Normal file
View file

@ -0,0 +1,162 @@
.ffz-range {
appearance: none;
cursor: pointer;
height: 1.6rem;
vertical-align: middle;
width: 100%;
&, &:active, &:hover, &:focus {
background: transparent;
border: none;
box-shadow: none;
}
&:disabled,
&:disabled + &__fill {
opacity: 0.5;
pointer-events: none;
}
&::-moz-range-track {
cursor: pointer;
height: .2rem;
width: 100%;
}
&::-ms-track {
cursor: pointer;
height: .2rem;
width: 100%;
}
&::-webkit-slider-runnable-track {
cursor: pointer;
height: .2rem;
width: 100%;
}
&::-moz-range-thumb {
appearance: none;
background: var(--color-white);
border: var(--border-width-default) solid var(--color-border-range-handle);
border-radius: var(--border-radius-rounded);
box-shadow: var(--shadow-elevation-1);
height: 1.6rem;
margin-top: -.7rem;
width: 1.6rem;
}
&::-ms-thumb {
appearance: none;
background: var(--color-white);
border: var(--border-width-default) solid var(--color-border-range-handle);
border-radius: var(--border-radius-rounded);
box-shadow: var(--shadow-elevation-1);
height: 1.6rem;
margin-top: -.7rem;
width: 1.6rem;
}
&::-webkit-slider-thumb {
appearance: none;
background: var(--color-white);
border: var(--border-width-default) solid var(--color-border-range-handle);
border-radius: var(--border-radius-rounded);
box-shadow: var(--shadow-elevation-1);
height: 1.6rem;
margin-top: -.7rem;
width: 1.6rem;
}
&[data-focus-visible-added] {
outline: none;
&::-moz-range-thumb {
border: var(--border-width-default) solid var(--color-background-range-fill);
}
&::-ms-thumb {
border: var(--border-width-default) solid var(--color-background-range-fill);
}
&::-webkit-slider-thumb {
border: var(--border-width-default) solid var(--color-background-range-fill);
}
}
&--error {
&::-moz-range-thumb {
border: var(--border-width-default) solid var(--color-border-input-error);
}
&::-ms-thumb {
border: var(--border-width-default) solid var(--color-border-input-error);
}
&::-webkit-slider-thumb {
border: var(--border-width-default) solid var(--color-border-input-error);
}
}
&--unfilled {
&::-moz-range-track {
background-color: var(--color-background-range);
}
&::-ms-track {
background-color: var(--color-background-range);
}
&::-webkit-slider-runnable-track {
background-color: var(--color-background-range);
}
}
&--unfilled.ffz-range-overlay {
&::-moz-range-track {
background-color: var(--color-background-range-overlay);
}
&::-ms-track {
background-color: var(--color-background-range-overlay);
}
&::-webkit-slider-runnable-track {
background-color: var(--color-background-range-overlay);
}
}
&--unfilled,
&--unfilled.ffz-range--overlay {
&::-moz-range-track {
border-radius: var(--border-radius-large);
cursor: pointer;
height: .2rem;
width: 100%;
}
&::-ms-track {
border-radius: var(--border-radius-large);
cursor: pointer;
height: .2rem;
width: 100%;
}
&::-webkit-slider-runnable-track {
border-radius: var(--border-radius-large);
cursor: pointer;
height: .2rem;
width: 100%;
}
}
&__fill {
height: 100%;
&-container {
background-color: var(--color-background-range);
cursor: pointer;
height: .2rem;
width: 100%;
}
&-value {
background-color: var(--color-background-range-fill);
height: 100%;
}
&--overlay &-container {
background-color: var(--color-background-range-overlay);
}
&--overlay &-value {
background-color: var(--color-background-range-overlay-fill);
}
}
}