diff --git a/package.json b/package.json index d9465fed..f76d7db1 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.75.3", + "version": "4.75.4", "description": "FrankerFaceZ is a Twitch enhancement suite.", "private": true, "license": "Apache-2.0", @@ -88,7 +88,7 @@ "mnemonist": "^0.38.5", "path-to-regexp": "^3.2.0", "raven-js": "^3.27.2", - "react": "^17.0.2", + "react": "^18.3.1", "safe-regex": "^2.1.1", "sortablejs": "^1.14.0", "sourcemapped-stacktrace": "^1.1.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 78103434..0c2cf654 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -63,8 +63,8 @@ dependencies: specifier: ^3.27.2 version: 3.27.2 react: - specifier: ^17.0.2 - version: 17.0.2 + specifier: ^18.3.1 + version: 18.3.1 safe-regex: specifier: ^2.1.1 version: 2.1.1 @@ -195,7 +195,7 @@ devDependencies: version: 5.2.2 vue-loader: specifier: ^15.10.2 - version: 15.10.2(css-loader@6.8.1)(react@17.0.2)(vue-template-compiler@2.6.14)(webpack@5.88.2) + version: 15.10.2(css-loader@6.8.1)(react@18.3.1)(vue-template-compiler@2.6.14)(webpack@5.88.2) vue-template-compiler: specifier: ^2.6.14 version: 2.6.14 @@ -842,10 +842,10 @@ packages: '@types/node': 20.5.7 dev: true - /@vue/component-compiler-utils@3.3.0(react@17.0.2): + /@vue/component-compiler-utils@3.3.0(react@18.3.1): resolution: {integrity: sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==} dependencies: - consolidate: 0.15.1(react@17.0.2) + consolidate: 0.15.1(react@18.3.1) hash-sum: 1.0.2 lru-cache: 4.1.5 merge-source-map: 1.1.0 @@ -2163,7 +2163,7 @@ packages: dev: true optional: true - /consolidate@0.15.1(react@17.0.2): + /consolidate@0.15.1(react@18.3.1): resolution: {integrity: sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==} engines: {node: '>= 0.10.0'} deprecated: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog @@ -2330,7 +2330,7 @@ packages: optional: true dependencies: bluebird: 3.7.2 - react: 17.0.2 + react: 18.3.1 dev: true /content-disposition@0.5.4: @@ -4583,6 +4583,7 @@ packages: /object-assign@4.1.1: resolution: {integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=} engines: {node: '>=0.10.0'} + dev: true /object-inspect@1.11.0: resolution: {integrity: sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==} @@ -5035,12 +5036,11 @@ packages: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} dev: true - /react@17.0.2: - resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==} + /react@18.3.1: + resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} dependencies: loose-envify: 1.4.0 - object-assign: 4.1.1 /readable-stream@2.3.7: resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==} @@ -6101,7 +6101,7 @@ packages: resolution: {integrity: sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==} dev: true - /vue-loader@15.10.2(css-loader@6.8.1)(react@17.0.2)(vue-template-compiler@2.6.14)(webpack@5.88.2): + /vue-loader@15.10.2(css-loader@6.8.1)(react@18.3.1)(vue-template-compiler@2.6.14)(webpack@5.88.2): resolution: {integrity: sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==} peerDependencies: '@vue/compiler-sfc': ^3.0.8 @@ -6120,7 +6120,7 @@ packages: vue-template-compiler: optional: true dependencies: - '@vue/component-compiler-utils': 3.3.0(react@17.0.2) + '@vue/component-compiler-utils': 3.3.0(react@18.3.1) css-loader: 6.8.1(webpack@5.88.2) hash-sum: 1.0.2 loader-utils: 1.4.0 diff --git a/src/entry.js b/src/entry.js index 3f08c848..6cfbff7e 100644 --- a/src/entry.js +++ b/src/entry.js @@ -8,6 +8,11 @@ if ( /disable_frankerfacez/.test(location.search) ) return; + if ( document.body.dataset.ffzSource ) + return; + + document.body.dataset.ffzSource = 'script'; + const DEBUG = localStorage.ffzDebugMode == 'true' && document.body.classList.contains('ffz-dev'), HOST = location.hostname, SERVER = DEBUG ? '//localhost:8000' : '//cdn2.frankerfacez.com', diff --git a/src/entry_ext.js b/src/entry_ext.js index 64d801b4..bd59b44c 100644 --- a/src/entry_ext.js +++ b/src/entry_ext.js @@ -9,6 +9,9 @@ || // Don't run on pages that have disabled FFZ. /disable_frankerfacez/.test(location.search) + || + // Don't run on pages we've already run on. + document.body.dataset.ffzSource ) { // Tell the service worker we aren't injecting. browser.runtime.sendMessage({ @@ -17,6 +20,8 @@ return; } + document.body.dataset.ffzSource = 'extension'; + // Make sure to wake the service worker up early. browser.runtime.sendMessage({ type: 'ffz_injecting' diff --git a/src/experiments.json b/src/experiments.json index d1e3c436..248eb9e8 100644 --- a/src/experiments.json +++ b/src/experiments.json @@ -20,8 +20,8 @@ "name": "EMQX MQTT-Based PubSub", "description": "An experimental pubsub system running on an EMQX cluster, to see how that performs.", "groups": [ - {"value": true, "weight": 50}, - {"value": false, "weight": 50} + {"value": true, "weight": 0}, + {"value": false, "weight": 100} ] }, "cf_pubsub": { diff --git a/src/pubsub/index.ts b/src/pubsub/index.ts index bab3cea9..8ca22c6d 100644 --- a/src/pubsub/index.ts +++ b/src/pubsub/index.ts @@ -101,7 +101,7 @@ export default class PubSub extends Module<'pubsub', PubSubEvents> { return Promise.resolve(this._mqtt); if ( ! this._mqtt_loader ) - this._mqtt_loader = import('utilities/pubsub') + this._mqtt_loader = import(/* webpackChunkName: 'pubsub' */ 'utilities/pubsub') .then(thing => { this._mqtt = thing.default; return thing.default; diff --git a/src/sites/base.js b/src/sites/base.js index 9876580a..9f936fad 100644 --- a/src/sites/base.js +++ b/src/sites/base.js @@ -38,6 +38,15 @@ export default class BaseSite extends Module { return this._react = react; } + getReactDom() { + if ( this._reactDom ) + return this._reactDom; + + let reactDom = this.resolve('site.web_munch')?.getModule?.('react-dom'); + if ( reactDom?.createPortal ) + return this._reactDom = reactDom; + } + findReact() { const react = this.getReact(); if ( react ) diff --git a/src/sites/twitch-twilight/index.js b/src/sites/twitch-twilight/index.js index e2903dab..71b1ff3d 100644 --- a/src/sites/twitch-twilight/index.js +++ b/src/sites/twitch-twilight/index.js @@ -205,6 +205,7 @@ const CALCULATE_BITS = '_calculateChangedBits'; Twilight.KNOWN_MODULES = { simplebar: n => n.globalObserver && n.initDOMLoadedElements, react: n => n.Component && n.createElement, + 'react-dom': n => n.createRoot && n.createPortal, core: n => { if ( n.x2?.experiments && n.x2.intl ) return n.x2; diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js index 19efecb8..48440dc7 100644 --- a/src/sites/twitch-twilight/modules/chat/index.js +++ b/src/sites/twitch-twilight/modules/chat/index.js @@ -182,6 +182,7 @@ export default class ChatHook extends Module { this.inject('site.web_munch'); this.inject('site.css_tweaks'); this.inject('site.subpump'); + //this.inject('site.loadable'); this.inject('chat'); @@ -1101,6 +1102,21 @@ export default class ChatHook extends Module { } + /*setChatPortal(node) { + if ( ! node ) + node = null; + + if ( node === this.chat_portal ) + return; + + if ( node && !(node instanceof HTMLElement) ) + throw new Error('Tried to set invalid chat portal, must be null or HTMLElement'); + + this.chat_portal = node; + this.loadable.ErrorBoundaryComponent.forceUpdate(); + }*/ + + onEnable() { this.on('site.web_munch:loaded', this.grabTypes); this.on('site.web_munch:loaded', this.defineClasses); @@ -1293,6 +1309,33 @@ export default class ChatHook extends Module { } }); + /*this.loadable.ErrorBoundaryComponent.ready(cls => { + const t = this, + proto = cls.prototype, + old_render = proto.render; + + proto.render = function() { + try { + const type = this.props.name; + if ( type === 'ChatLive' && t.chat_portal ) { + const ReactDOM = t.site.getReactDom(), + createPortal = ReactDOM?.createPortal; + + if ( createPortal ) { + const out = old_render.call(this); + console.log('creating portal', out); + return createPortal(out, t.chat_portal, 'ffz-chat-portal'); + } + } + + } catch(err) { + /* no-op * / + } + + return old_render.call(this); + } + });*/ + this.RaidController.on('mount', this.wrapRaidController, this); this.RaidController.on('update', this.noAutoRaids, this); this.RaidController.ready((cls, instances) => { @@ -1591,8 +1634,9 @@ export default class ChatHook extends Module { className: 'tw-border-l tw-c-background-alt-2 tw-c-text-base tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative' }, 'There was an error displaying chat.'); - } else - return old_render.call(this); + } + + return old_render.call(this); } for(const inst of instances) diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss index 5bf8b064..043581dc 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss @@ -50,4 +50,4 @@ & > .tw-pd-y-05 { padding-top: calc(.5rem - 1px) !important; } -} \ No newline at end of file +} diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss index 2722062e..021b0bfb 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss @@ -1,10 +1,13 @@ .chat-line__message:not(.chat-line--inline), .user-notice-line { - &.ffz-mentioned:not(.ffz-custom-color):nth-child(2n+0) { - background-color: rgba(255,127,127,.4) !important; + .chat-scrollable-area__message-container > div:nth-child(2n+0) > &, + &:nth-child(2n+0) { + &.ffz-mentioned:not(.ffz-custom-color) { + background-color: rgba(255,127,127,.4) !important; - .tw-root--theme-dark & { - background-color: rgba(255,0,0,.3) !important; + .tw-root--theme-dark & { + background-color: rgba(255,0,0,.3) !important; + } } } } @@ -15,4 +18,4 @@ .tw-root--theme-dark & { background-color: rgba(255,0,0,.3) !important; } -} \ No newline at end of file +} diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-custom.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-custom.scss index 07b43cab..ea29dc3b 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-custom.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-custom.scss @@ -3,8 +3,9 @@ .user-notice-line { &.ffz-mentioned:not(.ffz-custom-color) { &, + .chat-scrollable-area__message-container > div:nth-child(2n+0) > &, &:nth-child(2n+0) { background-color: var(--ffz-chat-mention-color) !important; } } -} \ No newline at end of file +} diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss index 9e7821e1..e0ddab9e 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss @@ -8,10 +8,12 @@ .chat-list__lines .chat-line__bits-charity, .user-notice-line, .ffz-notice-line, + .chat-line__message:not(.chat-line--inline) { &:not(.ffz-custom-color) { background-color: transparent !important; + .chat-scrollable-area__message-container > div:nth-child(2n+0) > &, &:nth-child(2n+0) { background-color: rgba(0,0,0,0.1) !important; @@ -37,4 +39,4 @@ .video-chat__message-list-wrapper li:nth-child(2n+0) .ffz--points-highlight, .ffz--points-highlight:nth-child(2n+0) { background-color: var(--ffz-channel-color-30); -} \ No newline at end of file +} diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/dir-reveal.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/dir-reveal.scss index 72375ce9..7f2dad88 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/dir-reveal.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/dir-reveal.scss @@ -14,4 +14,10 @@ transition-delay: 1s; filter: blur(0) !important; } -} \ No newline at end of file + + .blurred-preview-card-image div[class^=ScPositionOver] { + transition: opacity 0.2s; + transition-delay: 1s; + opacity: 0; + } +} diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-costream-border.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-costream-border.scss new file mode 100644 index 00000000..8904caca --- /dev/null +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-costream-border.scss @@ -0,0 +1,16 @@ +.guest-star-live-card-border { + background: unset !important; +} + +.guest-star-live-card-clip-edge { + clip-path: unset !important; +} + +.guest-star-live-card-branding-image { + display: none !important; +} + +.guest-star-live-card-clip-corner { + -webkit-mask: unset !important; + mask: unset !important; +} diff --git a/src/sites/twitch-twilight/modules/directory/index.jsx b/src/sites/twitch-twilight/modules/directory/index.jsx index 996bda36..b66641a2 100644 --- a/src/sites/twitch-twilight/modules/directory/index.jsx +++ b/src/sites/twitch-twilight/modules/directory/index.jsx @@ -106,6 +106,17 @@ export default class Directory extends Module { } }); + this.settings.add('directory.hide-costream-border', { + default: false, + + ui: { + path: 'Directory > Channels >> Appearance', + title: 'Hide border on streams with guest stars.', + component: 'setting-check-box', + getExtraTerms: () => ['costream', 'co-stream'] + } + }); + this.settings.add('directory.hidden.reveal', { default: false, @@ -511,6 +522,7 @@ export default class Directory extends Module { this.css_tweaks.toggleHide('profile-hover', this.settings.get('directory.show-channel-avatars') === 2); this.css_tweaks.toggleHide('dir-live-ind', this.settings.get('directory.hide-live')); this.css_tweaks.toggle('dir-reveal', this.settings.get('directory.hidden.reveal')); + this.settings.getChanges('directory.hide-costream-border', val => this.css_tweaks.toggle('hide-costream-border', val)); const blur = this.settings.get('directory.hidden.style'); diff --git a/src/utilities/dom.ts b/src/utilities/dom.ts index 070f232c..a9c619f0 100644 --- a/src/utilities/dom.ts +++ b/src/utilities/dom.ts @@ -517,7 +517,7 @@ export function highlightJson(object: any, pretty = false, depth = 1, max_depth return `${object}`; if ( typeof object === 'string' ) - return `"${sanitize(object)}"`; + return `${sanitize(JSON.stringify(object))}`; if ( Array.isArray(object) ) return `[` @@ -535,7 +535,7 @@ export function highlightJson(object: any, pretty = false, depth = 1, max_depth if ( pretty ) out.push(`\n${indent_inner}`); - out.push(`"${sanitize(key)}": `); + out.push(`${sanitize(JSON.stringify(key))}: `); out.push(highlightJson(val, pretty, depth + 1, max_depth)); }