oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-09-01 02:40:56 +00:00
Code Wiki Activity

Fix directory stuff for new Twitch website (#357)

Browse source
This commit is contained in:
Lordmau5 2017-12-13 23:12:42 +01:00 • committed by Mike
parent e623becb9c
commit 5a9a3d221b
3 changed files with 34 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/sites/twitch-twilight/modules/directory/following.js
View file

@ -251,7 +251,7 @@ export default class Following extends SiteModule {
// Hosted Channel Header
simplebarContentChildren.push(
e('p', {
className: 'pd-t-05 pd-x-1 c-text-alt-2',
className: 'tw-pd-t-05 tw-pd-x-1 tw-c-text-alt-2',
textContent: this.i18n.t('directory.hosted', 'Hosted Channel')
})
);
@ -267,7 +267,7 @@ export default class Following extends SiteModule {
inst.props.viewerCount.hostData.channel,
this.destroyHostMenu.bind(this)
)
}, e('div', 'align-items-center flex flex-row flex-nowrap mg-x-1 mg-y-05',
}, e('div', 'tw-align-items-center tw-flex tw-flex-row tw-flex-nowrap tw-mg-x-1 tw-mg-y-05',
[
e('div', {
className: 'ffz-channel-avatar',
@ -276,7 +276,7 @@ export default class Following extends SiteModule {
alt: inst.props.channelName
})),
e('p', {
className: 'ellipsis flex-grow-1 mg-l-1 font-size-5',
className: 'tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5',
textContent: inst.props.channelName
})
]
@ -286,7 +286,7 @@ export default class Following extends SiteModule {
// Hosting Channels Header
simplebarContentChildren.push(
e('p', {
className: 'pd-t-05 pd-x-1 c-text-alt-2',
className: 'tw-pd-t-05 tw-pd-x-1 tw-c-text-alt-2',
textContent: this.i18n.t('directory.hosting', 'Hosting Channels')
})
);
@ -300,7 +300,7 @@ export default class Following extends SiteModule {
className: 'tw-interactable',
href: `/${node.login}`,
onclick: event => this.parent.hijackUserClick(event, node.login, this.destroyHostMenu.bind(this))
}, e('div', 'align-items-center flex flex-row flex-nowrap mg-x-1 mg-y-05',
}, e('div', 'tw-align-items-center tw-flex tw-flex-row tw-flex-nowrap tw-mg-x-1 tw-mg-y-05',
[
e('div', {
className: 'ffz-channel-avatar',
@ -309,7 +309,7 @@ export default class Following extends SiteModule {
alt: node.displayName
})),
e('p', {
className: 'ellipsis flex-grow-1 mg-l-1 font-size-5',
className: 'tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5',
textContent: node.displayName
})
]
@ -317,19 +317,14 @@ export default class Following extends SiteModule {
);
}
this.hostMenu = e('div', 'ffz-host-menu tw-balloon block',
e('div', 'selectable-filter__balloon pd-y-05',
this.hostMenu = e('div', 'ffz-host-menu tw-balloon tw-block',
e('div', 'tw-selectable-filter__balloon tw-pd-y-05',
e('div', {
className: 'scrollable-area',
'data-simplebar': true,
}, [
e('div', 'simplebar-track vertical',
e('div', 'simplebar-scrollbar')
),
e('div', 'simplebar-scroll-content',
e('div', 'simplebar-content', simplebarContentChildren)
)
])
}, e('div', 'simplebar-scroll-content',
e('div', 'simplebar-content', simplebarContentChildren)
))
)
);
@ -363,7 +358,7 @@ export default class Following extends SiteModule {
// Remove old elements
const hiddenBodyCard = card.querySelector('.tw-card-body.hide');
if (hiddenBodyCard !== null) hiddenBodyCard.classList.remove('hide');
if (hiddenBodyCard !== null) hiddenBodyCard.classList.remove('tw-hide');
const ffzChannelData = card.querySelector('.ffz-channel-data');
if (ffzChannelData !== null) ffzChannelData.remove();
@ -388,7 +383,7 @@ export default class Following extends SiteModule {
let avatarDiv;
if (avatarSetting === 1) {
avatarDiv = e('a', {
className: 'ffz-channel-avatar mg-r-05 mg-t-05',
className: 'ffz-channel-avatar tw-mg-r-05 tw-mg-t-05',
href: hosting ? `/${channel}` : inst.props.linkTo.pathname,
}, e('img', {
title: inst.props.channelName,
@ -399,7 +394,7 @@ export default class Following extends SiteModule {
className: 'ffz-channel-avatar',
href: hosting ? `/${channel}` : inst.props.linkTo.pathname,
onclick: event => this.parent.hijackUserClick(event, inst.props.streamNode.broadcaster.login)
}, e('div', 'live-channel-card__boxart bottom-0 absolute',
}, e('div', 'live-channel-card__boxart tw-bottom-0 tw-absolute',
e('figure', 'tw-aspect tw-aspect--align-top',
e('img', {
title: inst.props.channelName,
@ -416,9 +411,9 @@ export default class Following extends SiteModule {
const cardDivParent = cardDiv.parentElement;
const ffzChannelData = cardDivParent.querySelector('.ffz-channel-data');
if (ffzChannelData === null) {
cardDiv.classList.add('hide');
cardDiv.classList.add('tw-hide');
const newCardDiv = e('div', 'ffz-channel-data flex flex-nowrap', [
const newCardDiv = e('div', 'ffz-channel-data tw-flex tw-flex-nowrap', [
avatarDiv, modifiedDiv
]);
cardDivParent.appendChild(newCardDiv);

10
src/sites/twitch-twilight/modules/directory/game.js
View file

@ -46,15 +46,15 @@ export default class Game extends SiteModule {
for(const inst of instances) this.updateButtons(inst);
});
this.GameHeader.on('update', inst => this.updateButtons(inst));
this.GameHeader.on('update', this.updateButtons, this);
}
updateButtons(inst, update = false) {
const container = this.fine.getHostNode(inst);
if ( inst.props.directoryType !== 'GAMES' || ! container || ! container.querySelector )
return;
const buttons = container.querySelector('div > div.align-items-center'),
const buttons = container.querySelector('div > div.tw-align-items-center'),
ffz_buttons = buttons && buttons.querySelector('.ffz-buttons');
if ( ! buttons || (ffz_buttons && ! update) )
@ -80,7 +80,7 @@ export default class Game extends SiteModule {
block_btn = e('button', {
className: 'mg-l-1 tw-button ffz-directory-toggle-block',
className: 'tw-mg-l-1 tw-button ffz-directory-toggle-block',
onClick: this.generateClickHandler('directory.game.blocked-games', game, update_block)
}, block_label = e('span', 'tw-button__text'));
@ -100,7 +100,7 @@ export default class Game extends SiteModule {
}
hidden_btn = e('button', {
className: 'mg-l-1 tw-button ffz-directory-toggle-thumbnail',
className: 'tw-mg-l-1 tw-button ffz-directory-toggle-thumbnail',
onClick: this.generateClickHandler('directory.game.hidden-thumbnails', game, update_hidden)
}, hidden_label = e('span', 'tw-button__text'));

26
src/sites/twitch-twilight/modules/directory/index.js
View file

@ -103,7 +103,7 @@ export default class Directory extends SiteModule {
changed: value => {
this.css_tweaks.toggleHide('boxart-hide', value === 0);
this.css_tweaks.toggleHide('boxart-hover', value === 1);
this.ChannelCard.forceUpdate()
this.ChannelCard.forceUpdate();
}
});
}
@ -128,9 +128,9 @@ export default class Directory extends SiteModule {
for(const inst of instances) this.updateChannelCard(inst);
});
this.ChannelCard.on('update', inst => this.updateChannelCard(inst), this);
this.ChannelCard.on('mount', inst => this.updateChannelCard(inst), this);
this.ChannelCard.on('unmount', inst => this.clearUptime(inst), this);
this.ChannelCard.on('update', this.updateChannelCard, this);
this.ChannelCard.on('mount', this.updateChannelCard, this);
this.ChannelCard.on('unmount', this.clearUptime, this);
}
@ -206,12 +206,12 @@ export default class Directory extends SiteModule {
const up_text = duration_to_string(uptime, false, false, false, setting === 1);
if ( ! inst.ffz_uptime_el ) {
if ( ! inst.ffz_uptime_el || card.querySelector('.ffz-uptime-element') === undefined ) {
card.appendChild(inst.ffz_uptime_el = e('div',
'video-preview-card__preview-overlay-stat c-background-overlay c-text-overlay font-size-6 top-0 right-0 z-default inline-flex absolute mg-05',
e('div', 'tw-tooltip-wrapper inline-flex', [
'video-preview-card__preview-overlay-stat tw-c-background-overlay tw-c-text-overlay tw-font-size-6 tw-top-0 tw-right-0 tw-z-default tw-inline-flex tw-absolute tw-mg-05 ffz-uptime-element',
e('div', 'tw-tooltip-wrapper tw-inline-flex', [
e('div', 'tw-stat', [
e('span', 'c-text-live tw-stat__icon', e('figure', 'ffz-i-clock')),
e('span', 'tw-c-text-live tw-stat__icon', e('figure', 'ffz-i-clock')),
inst.ffz_uptime_span = e('span', 'tw-stat__value')
]),
inst.ffz_uptime_tt = e('div', 'tw-tooltip tw-tooltip--down tw-tooltip--align-center')
@ -246,7 +246,7 @@ export default class Directory extends SiteModule {
// Remove old elements
const hiddenBodyCard = card.querySelector('.tw-card-body.hide');
if (hiddenBodyCard !== null)
hiddenBodyCard.classList.remove('hide');
hiddenBodyCard.classList.remove('tw-hide');
const ffzChannelData = card.querySelector('.ffz-channel-data');
if (ffzChannelData !== null)
@ -267,7 +267,7 @@ export default class Directory extends SiteModule {
});
const avatarDiv = e('a', {
className: 'ffz-channel-avatar mg-r-05 mg-t-05',
className: 'ffz-channel-avatar tw-mg-r-05 tw-mg-t-05',
href: `/${inst.props.streamNode.broadcaster.login}`,
onclick: event => this.hijackUserClick(event, inst.props.streamNode.broadcaster.login)
}, e('img', {
@ -278,9 +278,9 @@ export default class Directory extends SiteModule {
const cardDivParent = cardDiv.parentElement;
if (cardDivParent.querySelector('.ffz-channel-data') === null) {
cardDiv.classList.add('hide');
cardDiv.classList.add('tw-hide');
const newCardDiv = e('div', 'ffz-channel-data flex flex-nowrap', [
const newCardDiv = e('div', 'ffz-channel-data tw-flex tw-flex-nowrap', [
avatarDiv, modifiedDiv
]);
cardDivParent.appendChild(newCardDiv);
@ -290,7 +290,7 @@ export default class Directory extends SiteModule {
className: 'ffz-channel-avatar',
href: `/${inst.props.streamNode.broadcaster.login}`,
onclick: event => this.hijackUserClick(event, inst.props.streamNode.broadcaster.login)
}, e('div', 'live-channel-card__boxart bottom-0 absolute',
}, e('div', 'live-channel-card__boxart tw-bottom-0 tw-absolute',
e('figure', 'tw-aspect tw-aspect--align-top',
e('img', {
title: inst.props.streamNode.broadcaster.displayName,