diff --git a/src/main.js b/src/main.js index 86d47886..019c5277 100644 --- a/src/main.js +++ b/src/main.js @@ -151,7 +151,7 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}` FrankerFaceZ.Logger = Logger; const VER = FrankerFaceZ.version_info = { - major: 4, minor: 2, revision: 5, + major: 4, minor: 2, revision: 6, commit: __git_commit__, build: __webpack_hash__, toString: () => diff --git a/src/sites/twitch-twilight/modules/css_tweaks/index.js b/src/sites/twitch-twilight/modules/css_tweaks/index.js index 926582e5..b74f936f 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/index.js +++ b/src/sites/twitch-twilight/modules/css_tweaks/index.js @@ -11,11 +11,11 @@ import {has} from 'utilities/object'; const CLASSES = { 'top-discover': '.top-nav__nav-link[data-a-target="discover-link"]', 'side-nav': '.side-nav', - 'side-rec-channels': '.side-nav .recommended-channels', + 'side-rec-channels': '.side-nav .recommended-channels,.side-nav .ffz--popular-channels', 'side-rec-friends': '.side-nav .recommended-friends', 'side-friends': '.side-nav .online-friends', 'side-closed-friends': '.side-nav--collapsed .online-friends', - 'side-closed-rec-channels': '.side-nav--collapsed .recommended-channels', + 'side-closed-rec-channels': '.side-nav--collapsed .recommended-channels,.side-nav--collapsed .ffz--popular-channels', 'side-offline-channels': '.side-nav-card__link[href*="/videos/"]', 'prime-offers': '.top-nav__prime', @@ -77,7 +77,7 @@ export default class CSSTweaks extends Module { default: 1, ui: { path: 'Appearance > Layout >> Side Navigation', - title: 'Display Recommended Channels', + title: 'Display Recommended / Popular Channels', component: 'setting-select-box', data: [ {value: 0, title: 'Never'}, diff --git a/src/sites/twitch-twilight/modules/layout.js b/src/sites/twitch-twilight/modules/layout.js index c95e7eab..8eb0f1a7 100644 --- a/src/sites/twitch-twilight/modules/layout.js +++ b/src/sites/twitch-twilight/modules/layout.js @@ -5,6 +5,7 @@ // ============================================================================ import Module from 'utilities/module'; +import {has} from 'utilities/object'; const PORTRAIT_ROUTES = ['user', 'video', 'user-video', 'user-clip', 'user-videos', 'user-clips', 'user-collections', 'user-events', 'user-followers', 'user-following']; const MINIMAL_ROUTES = ['popout', 'embed-chat']; @@ -24,6 +25,11 @@ export default class Layout extends Module { n => n.hideOnBreakpoint && n.handleToggleVisibility ); + this.PopularChannels = this.fine.define( + 'nav-popular', + n => n.getPopularChannels && n.props && has(n.props, 'locale') + ); + this.settings.add('layout.portrait', { default: false, ui: { @@ -146,6 +152,14 @@ export default class Layout extends Module { this.css_tweaks.setVariable('portrait-extra-width', `${this.settings.get('layout.portrait-extra-width')}rem`); this.css_tweaks.setVariable('portrait-extra-height', `${this.settings.get('layout.portrait-extra-height')}rem`); + this.PopularChannels.ready((cls, instances) => { + for(const inst of instances) + this.updatePopular(inst); + }); + + this.PopularChannels.on('mount', this.updatePopular, this); + this.PopularChannels.on('update', this.updatePopular, this); + const t = this; this.RightColumn.ready((cls, instances) => { cls.prototype.ffzHideOnBreakpoint = function() { @@ -196,6 +210,12 @@ export default class Layout extends Module { return this.settings.get('layout.is-minimal') } + updatePopular(inst) { + const node = this.fine.getChildNode(inst); + if ( node ) + node.classList.add('ffz--popular-channels'); + } + updatePortraitMode() { for(const inst of this.RightColumn.instances) inst.hideOnBreakpoint(); diff --git a/src/sites/twitch-twilight/switchboard.js b/src/sites/twitch-twilight/switchboard.js index b9ccd1a4..e92b3566 100644 --- a/src/sites/twitch-twilight/switchboard.js +++ b/src/sites/twitch-twilight/switchboard.js @@ -33,21 +33,38 @@ export default class Switchboard extends Module { } + awaitRoute(count = 0) { + const route = this.fine.searchTree(null, + n => n.props && n.props.component && n.props.path, + 100); + + if ( route ) + return Promise.resolve(route); + + if ( count > 50 ) + return Promise.resolve(null); + + return new Promise(r => setTimeout(r, 50)).then(() => this.awaitRoute(count + 1)); + } + + async onEnable() { await this.parent.awaitElement('.twilight-minimal-root,.twilight-root,#root>div'); if ( this.web_munch._require || this.web_munch.v4 === false ) return; - const router = await this.awaitRouter(), - da_switch = router && this.fine.searchTree(router, n => n.context && n.context.router && n.props && n.props.children && n.componentWillMount && n.componentWillMount.toString().includes('Switch')); + // Find the current route. + const route = await this.awaitRoute(), + da_switch = route && this.fine.searchParent(route, n => n.props && n.props.children); if ( ! da_switch ) return new Promise(r => setTimeout(r, 50)).then(() => this.onEnable()); // Identify Router - this.log.info(`Found Router and Switch with ${da_switch.props.children.length} routes.`); + const router = await this.awaitRouter(); - const location = da_switch.context.router.route.location.pathname; + this.log.info(`Found Route and Switch with ${da_switch.props.children.length} routes.`); + const location = router.props.location.pathname; for(const route of da_switch.props.children) { if ( ! route.props || ! route.props.component ) diff --git a/src/std-components/icon-picker.vue b/src/std-components/icon-picker.vue new file mode 100644 index 00000000..b2e51421 --- /dev/null +++ b/src/std-components/icon-picker.vue @@ -0,0 +1,144 @@ + + + \ No newline at end of file