oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-09-04 04:10: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 // Hosted Channel Header
simplebarContentChildren.push( simplebarContentChildren.push(
e('p', { 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') textContent: this.i18n.t('directory.hosted', 'Hosted Channel')
}) })
); );
@ -267,7 +267,7 @@ export default class Following extends SiteModule {
inst.props.viewerCount.hostData.channel, inst.props.viewerCount.hostData.channel,
this.destroyHostMenu.bind(this) 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', { e('div', {
className: 'ffz-channel-avatar', className: 'ffz-channel-avatar',
@ -276,7 +276,7 @@ export default class Following extends SiteModule {
alt: inst.props.channelName alt: inst.props.channelName
})), })),
e('p', { 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 textContent: inst.props.channelName
}) })
] ]
@ -286,7 +286,7 @@ export default class Following extends SiteModule {
// Hosting Channels Header // Hosting Channels Header
simplebarContentChildren.push( simplebarContentChildren.push(
e('p', { 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') textContent: this.i18n.t('directory.hosting', 'Hosting Channels')
}) })
); );
@ -300,7 +300,7 @@ export default class Following extends SiteModule {
className: 'tw-interactable', className: 'tw-interactable',
href: `/${node.login}`, href: `/${node.login}`,
onclick: event => this.parent.hijackUserClick(event, node.login, this.destroyHostMenu.bind(this)) 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', { e('div', {
className: 'ffz-channel-avatar', className: 'ffz-channel-avatar',
@ -309,7 +309,7 @@ export default class Following extends SiteModule {
alt: node.displayName alt: node.displayName
})), })),
e('p', { 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 textContent: node.displayName
}) })
] ]
@ -317,19 +317,14 @@ export default class Following extends SiteModule {
); );
} }
this.hostMenu = e('div', 'ffz-host-menu tw-balloon block', this.hostMenu = e('div', 'ffz-host-menu tw-balloon tw-block',
e('div', 'selectable-filter__balloon pd-y-05', e('div', 'tw-selectable-filter__balloon tw-pd-y-05',
e('div', { e('div', {
className: 'scrollable-area', className: 'scrollable-area',
'data-simplebar': true, 'data-simplebar': true,
}, [ }, e('div', 'simplebar-scroll-content',
e('div', 'simplebar-track vertical', e('div', 'simplebar-content', simplebarContentChildren)
e('div', 'simplebar-scrollbar') ))
),
e('div', 'simplebar-scroll-content',
e('div', 'simplebar-content', simplebarContentChildren)
)
])
) )
); );
@ -363,7 +358,7 @@ export default class Following extends SiteModule {
// Remove old elements // Remove old elements
const hiddenBodyCard = card.querySelector('.tw-card-body.hide'); 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'); const ffzChannelData = card.querySelector('.ffz-channel-data');
if (ffzChannelData !== null) ffzChannelData.remove(); if (ffzChannelData !== null) ffzChannelData.remove();
@ -388,7 +383,7 @@ export default class Following extends SiteModule {
let avatarDiv; let avatarDiv;
if (avatarSetting === 1) { if (avatarSetting === 1) {
avatarDiv = e('a', { 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, href: hosting ? `/${channel}` : inst.props.linkTo.pathname,
}, e('img', { }, e('img', {
title: inst.props.channelName, title: inst.props.channelName,
@ -399,7 +394,7 @@ export default class Following extends SiteModule {
className: 'ffz-channel-avatar', className: 'ffz-channel-avatar',
href: hosting ? `/${channel}` : inst.props.linkTo.pathname, href: hosting ? `/${channel}` : inst.props.linkTo.pathname,
onclick: event => this.parent.hijackUserClick(event, inst.props.streamNode.broadcaster.login) 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('figure', 'tw-aspect tw-aspect--align-top',
e('img', { e('img', {
title: inst.props.channelName, title: inst.props.channelName,
@ -416,9 +411,9 @@ export default class Following extends SiteModule {
const cardDivParent = cardDiv.parentElement; const cardDivParent = cardDiv.parentElement;
const ffzChannelData = cardDivParent.querySelector('.ffz-channel-data'); const ffzChannelData = cardDivParent.querySelector('.ffz-channel-data');
if (ffzChannelData === null) { 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 avatarDiv, modifiedDiv
]); ]);
cardDivParent.appendChild(newCardDiv); 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); 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) { updateButtons(inst, update = false) {
const container = this.fine.getHostNode(inst); const container = this.fine.getHostNode(inst);
if ( inst.props.directoryType !== 'GAMES' || ! container || ! container.querySelector ) if ( inst.props.directoryType !== 'GAMES' || ! container || ! container.querySelector )
return; 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'); ffz_buttons = buttons && buttons.querySelector('.ffz-buttons');
if ( ! buttons || (ffz_buttons && ! update) ) if ( ! buttons || (ffz_buttons && ! update) )
@ -80,7 +80,7 @@ export default class Game extends SiteModule {
block_btn = e('button', { 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) onClick: this.generateClickHandler('directory.game.blocked-games', game, update_block)
}, block_label = e('span', 'tw-button__text')); }, block_label = e('span', 'tw-button__text'));
@ -100,7 +100,7 @@ export default class Game extends SiteModule {
} }
hidden_btn = e('button', { 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) onClick: this.generateClickHandler('directory.game.hidden-thumbnails', game, update_hidden)
}, hidden_label = e('span', 'tw-button__text')); }, 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 => { changed: value => {
this.css_tweaks.toggleHide('boxart-hide', value === 0); this.css_tweaks.toggleHide('boxart-hide', value === 0);
this.css_tweaks.toggleHide('boxart-hover', value === 1); 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); for(const inst of instances) this.updateChannelCard(inst);
}); });
this.ChannelCard.on('update', inst => this.updateChannelCard(inst), this); this.ChannelCard.on('update', this.updateChannelCard, this);
this.ChannelCard.on('mount', inst => this.updateChannelCard(inst), this); this.ChannelCard.on('mount', this.updateChannelCard, this);
this.ChannelCard.on('unmount', inst => this.clearUptime(inst), 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); 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', 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', '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 inline-flex', [ e('div', 'tw-tooltip-wrapper tw-inline-flex', [
e('div', 'tw-stat', [ 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_span = e('span', 'tw-stat__value')
]), ]),
inst.ffz_uptime_tt = e('div', 'tw-tooltip tw-tooltip--down tw-tooltip--align-center') 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 // Remove old elements
const hiddenBodyCard = card.querySelector('.tw-card-body.hide'); const hiddenBodyCard = card.querySelector('.tw-card-body.hide');
if (hiddenBodyCard !== null) if (hiddenBodyCard !== null)
hiddenBodyCard.classList.remove('hide'); hiddenBodyCard.classList.remove('tw-hide');
const ffzChannelData = card.querySelector('.ffz-channel-data'); const ffzChannelData = card.querySelector('.ffz-channel-data');
if (ffzChannelData !== null) if (ffzChannelData !== null)
@ -267,7 +267,7 @@ export default class Directory extends SiteModule {
}); });
const avatarDiv = e('a', { 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}`, href: `/${inst.props.streamNode.broadcaster.login}`,
onclick: event => this.hijackUserClick(event, inst.props.streamNode.broadcaster.login) onclick: event => this.hijackUserClick(event, inst.props.streamNode.broadcaster.login)
}, e('img', { }, e('img', {
@ -278,9 +278,9 @@ export default class Directory extends SiteModule {
const cardDivParent = cardDiv.parentElement; const cardDivParent = cardDiv.parentElement;
if (cardDivParent.querySelector('.ffz-channel-data') === null) { 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 avatarDiv, modifiedDiv
]); ]);
cardDivParent.appendChild(newCardDiv); cardDivParent.appendChild(newCardDiv);
@ -290,7 +290,7 @@ export default class Directory extends SiteModule {
className: 'ffz-channel-avatar', className: 'ffz-channel-avatar',
href: `/${inst.props.streamNode.broadcaster.login}`, href: `/${inst.props.streamNode.broadcaster.login}`,
onclick: event => this.hijackUserClick(event, 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('figure', 'tw-aspect tw-aspect--align-top',
e('img', { e('img', {
title: inst.props.streamNode.broadcaster.displayName, title: inst.props.streamNode.broadcaster.displayName,