Torrent page has broken styles

[mkarolin]

This maybe related to cr99, happens on Nightly (1.38.x) and Beta (1.37.x).
Does not happen on current release 1.35.x (1.35.103 Chromium: 98.0.4758.102)
Only tried on Windows.

STR:

1. Start Brave
2. Paste a magnet link into the navigation bar, e.g. magnet:?xt=urn:btih:dd8255ecdc7ca55fb0bbf81323d87062db1f6d1c&dn=Big+Buck+Bunny&tr=udp://explodie.org:6969&tr=udp:/2Ftracker.coppersurfer.tk:6969&tr=udp://tracker.empire-js.us:1337&tr=udp://tracker.leechers-paradise.org:6969&tr=udp://tracker.opentrackr.org:1337&tr=wss://tracker.btorrent.xyz&tr=wss://tracker.fastcast.nz&tr=wss://tracker.openwebtorrent.com&ws=https://webtorrent.io/torrents/&xs=https://webtorrent.io/torrents/big-buck-bunny.torrent
3. The loaded page is empty
4. Hit reload and the Webtorrent page loads but it's misaligned
   

Expected:
Page loads the first time and correctly:

cc: @rebron @kjozwiak

[emerick]

Console contains the following errors when this happens:

[4836:16008:0301/100346.070:ERROR:CONSOLE(35058)] "The above error occurred in the <ConnectFunction> component:
    in ConnectFunction
    in Le
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.", source: chrome-extension://lgjmpdmojkpocjcopdikifhejkkjglho/extension/out/brave_webtorrent.bundle.js (35058)
[4836:16008:0301/100346.071:ERROR:CONSOLE(8392)] "Problem mounting webtorrent", source: chrome-extension://lgjmpdmojkpocjcopdikifhejkkjglho/extension/out/brave_webtorrent.bundle.js (8392)

[rebron]

cc: @yrliou @petemill

[kjozwiak]

I couldn't reproduce the alignment issues that @mkarolin mentioned above but needing to reload the page when initially pasting a magnet link into the URL doesn't seem to be a new regression as per #7061. I managed to reproduce the issue on the following builds using macOS:

Brave | 1.36.108 Chromium: 99.0.4844.51 (Official Build) (x86_64)
--- | ---
Revision | d537ec02474b5afe23684e7963d538896c63ac77-refs/branch-heads/4844@{#875}
OS | macOS Version 12.2.1 (Build 21D62)

Brave | 1.35.104 Chromium: 98.0.4758.109 (Official Build) (x86_64)
--- | ---
Revision | 03268453da2c7409eb1ee934d97abfc6f3b45420-refs/branch-heads/4758@{#1179}
OS | macOS Version 12.2.1 (Build 21D62)

What happens is when you restart the browser, loading any mangnet link will be blank. However, refreshing it will fix the issue for that session only. If you restart the browser, the same issue will happen again and you'll need to refresh the page again. This has been around for a while and @btlechowski created an issue via #7061.

Example	Example

This also happens with Windows as well. Managed to reproduce the same behaviour on 1.35.x & 1.36.x and as per #7061, it's also happening on Linux so unrelated to a specific platform.

[emerick]

FYI, the uncaught type error happens here:
https://github.com/brave/brave-core/blob/master/components/brave_webtorrent/extension/constants/webtorrentState.ts#L6

because of this call in mapStateToProps:
https://github.com/brave/brave-core/blob/master/components/brave_webtorrent/extension/components/app.tsx#L67

If we just perform a null check in getTorrentState, it seems to fix the error causing the load to fail the first time (it doesn't fix the problem with the WebUI, however). Not sure if that's the best approach, though. If @petemill or @yrliou have any thoughts, would love to hear!

[emerick]

Now that we've rebased cr100 on master I am seeing the problem with the misaligned WebUI there as well. From what I can see, no styles are included in the WebUI page at all which accounts for the strange look.

[LaurenWags]

Reproduced @kjozwiak comment from #21381 (comment) / blank magnet page from #7061 using

Brave | 1.36.108 Chromium: 99.0.4844.51 (Official Build) (x86_64)
-- | --
Revision | d537ec02474b5afe23684e7963d538896c63ac77-refs/branch-heads/4844@{#875}
OS | macOS Version 12.2.1 (Build 21D62)

[emerick]

Hi @petemill, I think this commit may be the root cause of the styling failure we're seeing in the torrent WebUI now: brave/brave-core@fdc3905. At least, reverting that change appears to fix the issue for me.

Is there a problem with that commit or is this something we need to adapt to in that WebUI?

[stephendonner]

brave_webtorrent.bundle.js:26 TypeError: Cannot read properties of undefined (reading 'torrentStateMap')
    at Gt (brave_webtorrent.bundle.js:186:1381)
    at Function.mapToProps (brave_webtorrent.bundle.js:186:1878)
    at r (brave_webtorrent.bundle.js:58:17721)
    at Function.r.mapToProps (brave_webtorrent.bundle.js:58:17857)
    at r (brave_webtorrent.bundle.js:58:17721)
    at brave_webtorrent.bundle.js:58:19053
    at brave_webtorrent.bundle.js:58:16518
    at Object.useMemo (brave_webtorrent.bundle.js:26:62781)
    at t.useMemo (brave_webtorrent.bundle.js:18:5983)
    at m (brave_webtorrent.bundle.js:58:16462)
el @ brave_webtorrent.bundle.js:26
brave_webtorrent.bundle.js:186 Problem mounting webtorrent

is the latest stack from magnet: URLs in nightly; HTH

[LaurenWags]

Reproduced misalignment using

Brave | 1.38.105 Chromium: 101.0.4951.41 (Official Build) (x86_64)
-- | --
Revision | 93c720db8323b3ec10d056025ab95c23a31997c9-refs/branch-heads/4951@{#904}
OS | macOS Version 12.3.1 (Build 21E258)

[rebron]

dupe of #21381?

[stephendonner]

dupe of #21381?

Wrong issue #? That's this issue :-)

[rebron]

dupe of #22596 Not the first time I've done that :-)

[kjozwiak]

dupe of #22596 Not the first time I've done that :-)

I would close off #22596 as this one seems to have more information/context and STR/Cases. But definitely looks like the same issue.

[fallaciousreasoning]

Fixed by brave/brave-core#13214