TuxedoTako / 4chan-xt

Adds various features to anonymous imageboards.
Other
134 stars 9 forks source link

fxtwitter Issues #60

Open saxamaphone69 opened 6 months ago

saxamaphone69 commented 6 months ago

Personally I've never had any issues with Twitframe, so not sure why this change was forced. I think most of these issues stem from the floating embed option

image

The setting appears incomplete?

image

Not even sure what 'resolve' means?

Depending on the content of the tweet, clicking (embed) on a tweet then fills up my entire browser and I need to click Esc just to close (before I didn't have to)

image

Or they are too long

image

Originally on twitframe I could at least click on the page, any links, and interact

image

I understand it's meant to be simpler, and I guess inline it looks fine enough

image

Inspecting the element I see a [data-options="undefined"], so something has gone wrong there (no errors in console)

image

And other than the height issue (which I've addressed in my userstyle), I kinda like how the tweet itself was it's "own" element/card.

image

Just my two cents

TuxedoTako commented 6 months ago

Personally I've never had any issues with Twitframe, so not sure why this change was forced.

It's not forced. If you turn off "Embed Tweets inline with fxTwitter", it uses twitframe.

The reason for this change is that I got a pull request from someone claiming to have problems with twitframe: https://github.com/TuxedoTako/4chan-xt/pull/57, and I don't get PR's often, so I didn't just want to dismiss or nitpick the few that I get.

@irystocratanon, what are your thoughts on this?

irystocratanon commented 6 months ago

I can't look into this right now (probably not until Saturday at the earliest) but I guess it wouldn't hurt to keep the default on false for now.

irystocratanon commented 6 months ago

@saxamaphone69 can you share the CSS you added?

I think the way forward would be to set a fixed height and make the blockquote scrollable.

It should also be possible to make it look more like a card and less like something embedded inline.

Links should be clickable already, but we could add extra code to link @ user accounts and hashtags too.

saxamaphone69 commented 6 months ago

not forced

More in the sense that I was using twitframe, and my default was switched to fxtwitter. Yes I can switch it back, I know, and have. In the "this change on the default 4chan XT experience did not meet parity of the previous feature it was trying to replace"-sense.

pr merge

I agree, are great. Unfortunately with the way 4chan X/XT is, there are a lot of options to consider. Working with a variety of different settings, working across boards types, working across domains, accounting for people blocking Twitter or other requests who may need to add new exceptions, OneeChan support.

off by default

If it is a better replacement than twitframe, I'd be happy to switch. Again it's more because my workflow was changed.

css

It's somewhere around here, but I think this is only for the floating embed. I also remove all 4chan XT CSS so there's that too. Doesn't actually fix fix the issue, I think the height being grabbed and the interaction with the iframe (in the original code) is the issue.

It would probably be a case of all the content of the tweet being chucked in a div and then max-height and max-width, with an overflow-y: scroll or something. Card-style would be a personal preference, not something I think should be default. I can see the appeal of it looking like the tweet was part of the post, and also see the appeal of it being self-contained. Would need to see an example of when someone links a tweet mid-sentence, or several tweets one after the other. Middle clicking the profile picture/username or hashtag or even the X logo to be open more info in a new tab is handy. Plus you can click the heart to be taken to the tweet to like it when signed in, reply starts a reply in a new tab, and clicking 'view replies' takes you to the original tweet too.

Overall, I'm not against the change, just need a bit more convincing.

saxamaphone69 commented 6 months ago

Interestingly enough, I just got a message that all the URLs are going to be updated to x.com now, so wonder if that might affect this too. Already handles it!

Other things now that I'm playing around

image When a link is the last part of the tweet, the dash and hr are actually part of the link, meaning the link doesn't work. image

Quote tweets include profile picture and other clickable bits image

Got something in the console for that undefined

SyntaxError: Unexpected token 'N', "Not Found" is not valid JSON
    at JSON.parse (<anonymous>)
    at Object.onload (userscript.html?name=4chan-XT.user.js&id=10d5d7a8-76a3-49ab-a7bd-3d6108ba965d:18766:35)
    at wt (<anonymous>:9:89)
    at s.onload (<anonymous>:27:260)
    at wt (<anonymous>:9:89)
    at <anonymous>:36:335
    at wt (<anonymous>:9:89)
    at r (<anonymous>:24:484)
    at <anonymous>:25:112
    at <anonymous>:76:491

Probably intentional, but tweets within a .quote, as expected, also turn olive. image

Taking a hunch but the translate feature might also be flawed in some way (und as a language, for a full stop) image

Videos in tweets preload, which I'm fine with, but maybe some way of disabling it? Not sure if that would be from 4chan XT or fxtwitter's side though. Not sure if this URL helps finding the poster. https://pbs.twimg.com/ext_tw_video_thumb/1790653231661760512/pu/img/dMbpMkS6fFi-pus2.jpg or even https://pbs.twimg.com/ext_tw_video_thumb/1790653231661760512/pu/img/dMbpMkS6fFi-pus2?format=webp&name=tiny

Unsure if 4chan XT or fxtwitter is dictating the HTML structure, but things like the username/time being wrapped in its own element and the 'stats' being wrapped in an element would make things easier to style and sort with flexbox.

image Tweets with multiple images appear all in a row, so unsure what would happen with 4. I also assume the no-referrer should be on the a not the img?

I might be going crazy, but does it not support polls with images? https://x.com/MKBHD/status/1203439521179820032

TuxedoTako commented 6 months ago

Unsure if 4chan XT or fxtwitter is dictating the HTML structure, but things like the username/time being wrapped in its own element and the 'stats' being wrapped in an element would make things easier to style and sort with flexbox.

4chan XT builds the html in src/Linkification/Embedding.tsx. The pull request used template strings, but I changed it to jsx to make sure everything is escaped.

saxamaphone69 commented 6 months ago

This probably helps in absolutely no way, but I (ChatGPT + I) mucked around with some ideas on Codepen as to what the card idea could be. Though admittedly, I like how embed tweets look already, so essentially just recreated that look.

irystocratanon commented 6 months ago

This probably helps in absolutely no way, but I (ChatGPT + I) mucked around with some ideas on Codepen as to what the card idea could be. Though admittedly, I like how embed tweets look already, so essentially just recreated that look.

This looks very nice. I happen to like the inline look but I can see the appeal of something like this. I wonder if we can make a re-usable web component out of this (ideally without pulling in all of React, some quick searching makes me think this should be possible with just jsx).

This could better contain the logic and would also make it easier to style it if you use custom styles and would also serve as a nice example of how we can split out embedding into separate modules instead of one big Embedding.tsx.

Just a thought.

saxamaphone69 commented 6 months ago

Without looking too much into it, you mean essentially recreating this? https://www.webcomponents.org/element/twitter-status I'm not too familiar with React/JSX. My mind struggles enough with template literals (which is what I used in that example... I think?)

If you comment out all the CSS, other than the huge profile pictures and media, it looks pretty much inline, like it is now. As long as things are wrapped in elements with discernible class names, people can style them however they want. Add a section to the wiki for different style options (default inline, twitter card, make it look like its own 4chan post) that people can add to their own Custom CSS, as to not add bloat within 4chan XT itself.

twitter card
  ?(twitter reply)
  twitter text
  ?(twitter translate)
  ?(twitter rich content)
    ?(twitter poll | twitter media)
  twitter info
  twitter stats

Maybe all the extra settings, after the initial "switch to fxTwitter", can be put into Advanced instead? There you could add the translation options, quote tweet options, options for media or polls, or even themes. These can just be extra classes added to the main twitter-card parent.

Main focus I think should be fixing bugs and ensuring all options are supported out of the box. The foundation/base needs to be solid first.

TuxedoTako commented 6 months ago

I started a new branch based on the codepen: fxtwitter-improvements. It's work in progress at the moment (see the commit message for to do's, it has old code in comments or after a return), but suggestions are already welcome.

irystocratanon commented 6 months ago

I'm not too familiar with React/JSX. My mind struggles enough with template literals (which is what I used in that example... I think?)

Template literals are confusing, yes. I did an experiment but it doesn't look good: https://github.com/TuxedoTako/4chan-xt/compare/project-XT...irystocratanon:4chan-xt:fxtwitter-webcomponent

The