oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-10-18 17:02:00 +00:00
Code Wiki Activity

Add experiments system. Add experiments UI. Update disabled buttons to use tw-button--disabled. Update chat line rendering. Add preset emote sizes to the emote menu to reduce reflows when loading. Fix directory issues caused by fixes to route sorting. Update the theme. Add a current route name value to fine router. Add recursive object protection to deep_copy.

Browse source
This commit is contained in:
SirStendec 2018-04-10 21:13:34 -04:00
parent 1841ab156c
commit e3a7e3b64d
35 changed files with 1075 additions and 451 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/sites/twitch-twilight/index.js
View file

@ -96,12 +96,28 @@ export default class Twilight extends BaseSite {
const session = this.getSession();
return session && session.user;
}
getCore() {
if ( this._core )
return this._core;
let core = this.web_munch.getModule('core-1');
if ( core )
return this._core = core.o;
core = this.web_munch.getModule('core-2');
if ( core )
return this._core = core.p;
}
}
Twilight.KNOWN_MODULES = {
simplebar: n => n.globalObserver && n.initDOMLoadedElements,
react: n => n.Component && n.createElement,
'core-1': n => n.o && n.o.experiments,
'core-2': n => n.p && n.p.experiments,
cookie: n => n && n.set && n.get && n.getJSON && n.withConverter,
'extension-service': n => n.extensionService,
'chat-types': n => n.a && n.a.PostWithMention,
'gql-printer': n => n !== window && n.print

6
src/sites/twitch-twilight/modules/chat/emote_menu.jsx
View file

@ -313,6 +313,8 @@ export default class EmoteMenu extends Module {
src={data.src}
srcSet={data.srcSet}
alt={data.name}
height={data.height ? `${data.height}px` : null}
width={data.width ? `${data.width}px` : null}
/>
</figure>
{favorite && (<figure class="ffz--favorite ffz-i-star" />)}
@ -1007,7 +1009,9 @@ export default class EmoteMenu extends Module {
src: emote.urls[1],
srcSet: emote.srcSet,
name: emote.name,
favorite: is_fav
favorite: is_fav,
height: emote.height,
width: emote.width
};
emotes.push(em);

18
src/sites/twitch-twilight/modules/chat/line.js
View file

@ -168,9 +168,9 @@ export default class ChatLine extends Module {
months = msg.sub_months || 1,
tier = SUB_TIERS[plan.plan] || 1;
cls = 'chat-line__subscribe';
cls = 'user-notice-line tw-pd-y-05 tw-pd-r-2 ffz--subscribe-line';
out = [
e('span', null, [
e('div', {className: 'tw-c-text-alt-2'}, [
t.i18n.t('chat.sub.main', '%{user} just subscribed with %{plan}!', {
user: user.userDisplayName,
plan: plan.prime ?
@ -187,7 +187,7 @@ export default class ChatLine extends Module {
})}` : null
]),
out && e('div', {
className: 'chat-line__subscribe--message',
className: 'chat-line--inline chat-line__message',
'data-room-id': this.props.channelID,
'data-room': room,
'data-user-id': user.userID,
@ -198,16 +198,18 @@ export default class ChatLine extends Module {
} else if ( msg.ffz_type === 'ritual' && t.chat.context.get('chat.rituals.show') ) {
let system_msg;
if ( msg.ritual === 'new_chatter' )
system_msg = t.i18n.t('chat.ritual', '%{user} is new here. Say hello!', {
user: user.userDisplayName
});
system_msg = e('div', {className: 'tw-c-text-alt-2'}, [
t.i18n.t('chat.ritual', '%{user} is new here. Say hello!', {
user: user.userDisplayName
})
]);
if ( system_msg ) {
cls = 'chat-line__ritual';
cls = 'user-notice-line tw-pd-y-05 tw-pd-r-2 ffz--ritual-line';
out = [
system_msg,
out && e('div', {
className: 'chat-line__ritual--message',
className: 'chat-line--inline chat-line__message',
'data-room-id': this.props.channelID,
'data-room': room,
'data-user-id': user.userID,

4
src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss
View file

@ -2,11 +2,11 @@
.thread-message__timestamp,
.thread-message__warning,
.chat-line__message,
.chat-line__message:not(.chat-line--inline),
.chat-line__moderation,
.chat-line__status,
.chat-line__raid,
.chat-line__subscribe {
.user-notice-line {
padding-top: calc(.5rem - 1px) !important;
border-top: 1px solid #aaa;

4
src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss
View file

@ -2,11 +2,11 @@
.thread-message__timestamp,
.thread-message__warning,
.chat-line__message,
.chat-line__message:not(.chat-line--inline),
.chat-line__moderation,
.chat-line__status,
.chat-line__raid,
.chat-line__subscribe {
.user-notice-line {
padding-top: calc(.5rem - 1px) !important;
border-top: 1px solid rgba(255,255,255,0.5);

4
src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-wide.scss
View file

@ -2,11 +2,11 @@
.thread-message__timestamp,
.thread-message__warning,
.chat-line__message,
.chat-line__message:not(.chat-line--inline),
.chat-line__moderation,
.chat-line__status,
.chat-line__raid,
.chat-line__subscribe {
.user-notice-line {
padding-top: calc(.5rem - 1px) !important;
border-top: 1px solid var(--ffz-border-color);

4
src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders.scss
View file

@ -2,11 +2,11 @@
.thread-message__timestamp,
.thread-message__warning,
.chat-line__message,
.chat-line__message:not(.chat-line--inline),
.chat-line__moderation,
.chat-line__status,
.chat-line__raid,
.chat-line__subscribe {
.user-notice-line {
padding-bottom: calc(.5rem - 1px) !important;
border-bottom: 1px solid var(--ffz-border-color);

4
src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss
View file

@ -1,5 +1,5 @@
.chat-line__message,
.chat-line__subscribe {
.chat-line__message:not(.chat-line--inline),
.user-notice-line {
&.ffz-mentioned:nth-child(2n+0) {
background-color: rgba(255,127,127,.4) !important;

4
src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss
View file

@ -1,5 +1,5 @@
.chat-line__message,
.chat-line__subscribe {
.chat-line__message:not(.chat-line--inline),
.user-notice-line {
&.ffz-mentioned {
background-color: rgba(255,127,127,.2) !important;

10
src/sites/twitch-twilight/modules/css_tweaks/styles/chat-padding.scss
View file

@ -1,7 +1,11 @@
.chat-line__message,
.chat-line__message:not(.chat-line--inline),
.chat-line__moderation,
.chat-line__status,
.chat-line__raid,
.chat-line__subscribe {
.chat-line__raid {
padding: .5rem 1rem !important;
}
.user-notice-line {
padding: .5rem 1rem !important;
padding-left: .6rem !important;
}

6
src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss
View file

@ -5,11 +5,9 @@
.chat-line__moderation,
.chat-line__status,
.chat-list__lines .chat-line__raid,
.chat-list__lines .chat-line__subscribe,
.chat-list__lines .chat-line__bits-charity,
.chat-list__lines .chat-line__ritual,
.chat-line__subscribe,
.chat-line__message {
.user-notice-line,
.chat-line__message:not(.chat-line--inline) {
background-color: transparent !important;
&:nth-child(2n+0) {

2
src/sites/twitch-twilight/modules/directory/browse_popular.gql
View file

@ -4,7 +4,7 @@ query {
node {
createdAt
broadcaster {
profileImageURL(width: 70)
profileImageURL(width: 50)
}
}
}

2
src/sites/twitch-twilight/modules/directory/followed_channels.gql
View file

@ -2,7 +2,7 @@ query {
currentUser {
followedLiveUsers {
nodes {
profileImageURL(width: 70)
profileImageURL(width: 50)
stream {
type
createdAt

4
src/sites/twitch-twilight/modules/directory/followed_hosts.gql
View file

@ -2,9 +2,9 @@ query {
currentUser {
followedHosts {
nodes {
profileImageURL(width: 70)
profileImageURL(width: 50)
hosting {
profileImageURL(width: 70)
profileImageURL(width: 50)
stream {
createdAt
}

6
src/sites/twitch-twilight/modules/directory/followed_index.gql
View file

@ -2,7 +2,7 @@ query {
currentUser {
followedLiveUsers {
nodes {
profileImageURL(width: 70)
profileImageURL(width: 50)
stream {
createdAt
}
@ -10,9 +10,9 @@ query {
}
followedHosts {
nodes {
profileImageURL(width: 70)
profileImageURL(width: 50)
hosting {
profileImageURL(width: 70)
profileImageURL(width: 50)
stream {
createdAt
type

2
src/sites/twitch-twilight/modules/directory/followed_live.gql
View file

@ -3,7 +3,7 @@ query {
followedLiveUsers {
edges {
node {
profileImageURL(width: 70)
profileImageURL(width: 50)
stream {
createdAt
}

56
src/sites/twitch-twilight/modules/directory/following.jsx
View file

@ -89,11 +89,6 @@ export default class Following extends SiteModule {
this.apollo.registerModifier('FollowingHosts_CurrentUser', res => this.modifyLiveHosts(res), false);
}
isRouteAcceptable() {
return this.router.current.name === 'dir-following'
|| this.router.current.name === 'dir-category' && this.router.match[1] === 'following';
}
modifyLiveUsers(res) {
const hiddenThumbnails = this.settings.provider.get('directory.game.hidden-thumbnails') || [];
const blockedGames = this.settings.provider.get('directory.game.blocked-games') || [];
@ -167,34 +162,35 @@ export default class Following extends SiteModule {
}
ensureQueries () {
if (this.router && this.router.match) {
this.apollo.ensureQuery(
'FollowedChannels',
'data.currentUser.followedLiveUsers.nodes.0.profileImageURL'
);
if ( this.router.current_name !== 'dir-following' )
return;
const bit = this.router.match[1];
if ( ! bit )
this.apollo.ensureQuery(
'FollowedChannels',
'data.currentUser.followedLiveUsers.nodes.0.profileImageURL'
'FollowedIndex_CurrentUser',
n =>
get('data.currentUser.followedLiveUsers.nodes.0.stream.createdAt', n) !== undefined ||
get('data.currentUser.followedHosts.nodes.0.hosting.stream.createdAt', n) !== undefined
);
if (!this.router.match[1] || this.router.match[1] === 'following') {
this.apollo.ensureQuery(
'FollowedIndex_CurrentUser',
n =>
get('data.currentUser.followedLiveUsers.nodes.0.profileImageURL', n) !== undefined
||
get('data.currentUser.followedLiveUsers.edges.0.node.profileImageURL', n) !== undefined
||
get('data.currentUser.followedHosts.nodes.0.hosting.profileImageURL', n) !== undefined
);
} else if (this.router.match[1] === 'live') {
this.apollo.ensureQuery(
'FollowingLive_CurrentUser',
'data.currentUser.followedLiveUsers.nodes.0.profileImageURL' || 'data.currentUser.followedLiveUsers.edges.0.node.profileImageURL'
);
} else if (this.router.match[1] === 'hosts') {
this.apollo.ensureQuery(
'FollowingHosts_CurrentUser',
'data.currentUser.followedHosts.nodes.0.hosting.profileImageURL'
);
}
}
else if ( bit === 'live' )
this.apollo.ensureQuery(
'FollowingLive_CurrentUser',
'data.currentUser.followedLiveUsers.nodes.0.stream.createdAt'
);
else if ( bit === 'hosts' )
this.apollo.ensureQuery(
'FollowingHosts_CurrentUser',
'data.currentUser.followedHosts.nodes.0.hosting.stream.createdAt'
);
}
onEnable() {

6
src/sites/twitch-twilight/modules/directory/game.gql
View file

@ -6,9 +6,6 @@ query {
node {
createdAt
type
broadcaster {
profileImageURL(width: 70)
}
}
}
}
@ -19,9 +16,6 @@ query {
node {
createdAt
type
broadcaster {
profileImageURL(width: 70)
}
}
}
}

11
src/sites/twitch-twilight/modules/featured-follow.vue
View file

@ -1,10 +1,14 @@
<template lang="html">
<div class="ffz-featured-follow tw-c-background">
<header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap">
<h4>{{ t('metadata.featured-follow.title', 'Featured Follow') }}</h4>
<h4>{{ t('metadata.featured-follow.title', 'Featured Channels') }}</h4>
<div class="tw-flex-grow-1 tw-pd-x-2"/>
<button :class="{ 'ffz--featured-follow-update': hasUpdate, 'tw-button--disabled': !hasUpdate }" class="tw-button tw-button--hollow" @click="refresh">
<button
v-if="hasUpdate"
class="ffz--featured-follow-update tw-button tw-button--hollow"
@click="refresh"
>
<span class="tw-button__icon tw-button__icon--left">
<figure class="ffz-i-arrows-cw"/>
</span>
@ -32,6 +36,7 @@
<button
v-if="user.following"
:disabled="user.loading"
:class="{'tw-button--disabled': user.loading}"
:data-title="user.loading ? null : t('featured-follow.button.unfollow', 'Unfollow %{user}', {user: user.displayName})"
data-tooltip-type="html"
class="tw-button tw-button--status tw-button--success ffz-tooltip ffz--featured-button-unfollow"
@ -44,6 +49,7 @@
<button
v-if="user.following"
:disabled="user.loading"
:class="{'tw-button--disabled': user.loading}"
:data-title="notifyTip(user.disableNotifications)"
data-tooltip-type="html"
class="tw-button-icon tw-mg-l-05 ffz-tooltip ffz--featured-button-notification"
@ -56,6 +62,7 @@
<button
v-else
:disabled="user.loading"
:class="{'tw-button--disabled': user.loading}"
class="tw-button"
@click="followUser(user.id)"
>

2
src/sites/twitch-twilight/modules/featured_follow_query.gql
View file

@ -3,7 +3,7 @@ query($logins: [String!]) {
id
login
displayName
profileImageURL(width: 70)
profileImageURL(width: 50)
self {
follower {
disableNotifications

2
src/sites/twitch-twilight/modules/following_link.off
View file

@ -25,7 +25,7 @@ export default class FollowingText extends SiteModule {
currentUser {
followedLiveUsers {
nodes {
profileImageURL(width: 70)
profileImageURL(width: 50)
stream {
type
createdAt

5
src/sites/twitch-twilight/styles/chat.scss
View file

@ -11,6 +11,11 @@
will-change: opacity;
}
.user-notice-line.tw-mg-y-05 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.autocomplete-balloon {
.autocomplete-balloon__item {
> .tw-flex {

741
src/sites/twitch-twilight/styles/theme.scss
View file

File diff suppressed because it is too large Load diff