ui/components/subscribeButton has glitchy visual behavior.

abueide commented

2019-07-26 10:33:58 +02:00

(Migrated from github.com)

The Issue

When hovering over the heart icon of the unsubscribeButton, glitchy visual behavior happens.

Steps to Reproduce

Hover over heart icon in a very specific pixel.

Recorded Video of the Bug

https://beta.lbry.tv/bug/f

## The Issue When hovering over the heart icon of the unsubscribeButton, glitchy visual behavior happens. ### Steps to Reproduce Hover over heart icon in a very specific pixel. ### Recorded Video of the Bug https://beta.lbry.tv/bug/f

tzarebczan commented

2019-07-26 17:24:00 +02:00

(Migrated from github.com)

Thanks for opening the issue @abueide ! I was able to reproduce...,yeah, looks like it's in very particular spot.

Can we show you some appreciation for the issue?

Thanks for opening the issue @abueide ! I was able to reproduce...,yeah, looks like it's in very particular spot. Can we show you some [appreciation](https://lbry.com/faq/appreciation) for the issue?

kauffj commented

2019-07-26 22:04:05 +02:00

(Migrated from github.com)

I love the usage of LBRY to report bugs on LBRY. It's LBRY all the way down!

@seanyesmunt Even with a resolution of this specific issue, I've found that it can create a feeling of "jumpiness" in other places. I really like the new behavior - maybe we need to fix the width?

I love the usage of LBRY to report bugs on LBRY. It's LBRY all the way down! @seanyesmunt Even with a resolution of this specific issue, I've found that it can create a feeling of "jumpiness" in other places. I really like the new behavior - maybe we need to fix the width?

abueide commented

2019-07-27 00:16:49 +02:00

(Migrated from github.com)

Haha, yeah no matter how I tried to make the gif, it was bigger than github/imgur's limit of 10/20 mb, so I thought why sacrifice quality might as well upload to lbry.

ICTman1076 commented

2019-10-06 16:42:33 +02:00

(Migrated from github.com)

I think I might have a crack at this. My initial thought is to change the character spacing ever so slightly so that "unfollow" is slightly wider, and "following" is either the same width or slightly thinner, so that the two become equal width and result in this glitchy situation to be resolved. Having different character spacing may make it look worse, but it's worth a shot, right?

ICTman1076 commented

2019-10-06 19:33:44 +02:00

(Migrated from github.com)

^ Sorry for the first PR, I made a mistake on that one. #2990 is the one that should be merged.

VeroniqueHuang commented

2020-02-19 15:37:30 +01:00

(Migrated from github.com)

Hi, I'd like to work on this if it's not fixed yet !

neb-b commented

2020-02-19 15:38:49 +01:00

(Migrated from github.com)

@VeroniqueHuang It's all yours!

sloganking commented

2020-04-01 05:07:23 +02:00

(Migrated from github.com)

Hello, I am looking at fixing this issue. This is my first time developing with LBRY and I am having trouble seeing my changes take place.

I am currently trying to modify the string 'Following' here

however after running yarn dev to compile the project I am not seeing that the text has changed. Any help is appreciated. I am currently using

https://spee.ch/7da73fc508ffc4ff8b2711e3c3950110430b0c5f/LBRYAppDesign.mp4

as a reference to start developing. If there is a more up to date reference I would be happy to look at it.

Hello, I am looking at fixing this issue. This is my first time developing with LBRY and I am having trouble seeing my changes take place. I am currently trying to modify the string ``'Following'`` here ![](https://i.imgur.com/5DHWPle.png) however after running ``yarn dev`` to compile the project I am not seeing that the text has changed. Any help is appreciated. I am currently using https://spee.ch/7da73fc508ffc4ff8b2711e3c3950110430b0c5f/LBRYAppDesign.mp4 as a reference to start developing. If there is a more up to date reference I would be happy to look at it.

neb-b commented

2020-04-01 05:18:04 +02:00

(Migrated from github.com)

Hey @SleepingFox88

That video is still (sort of) up to date. You might need to refresh when developing with Electron. If that still doesn't work maybe try yarn dev:web to develop against lbry.tv?

Let me know if that works.

Hey @SleepingFox88 That video is still (sort of) up to date. You might need to refresh when developing with Electron. If that still doesn't work maybe try `yarn dev:web` to develop against lbry.tv? Let me know if that works.

sloganking commented

2020-04-01 05:32:46 +02:00

(Migrated from github.com)

@seanyesmunt

The program successfully compiles with yarn dev:web and opens a browser tab to http://localhost:9090/ however the page title is "Error" and the only text on the web page is Cannot GET /

Chromium's development console displays this error

Firefox's development console displays something similar.

Edit:

I am attempting all this on Manjaro Linux if that matters.

@seanyesmunt The program successfully compiles with ``yarn dev:web`` and opens a browser tab to ``http://localhost:9090/`` however the page title is "Error" and the only text on the web page is ``Cannot GET /`` Chromium's development console displays this error ![](https://i.imgur.com/uvHy7pG.png) Firefox's development console displays something similar. ![](https://i.imgur.com/v9JNTdv.png) Edit: I am attempting all this on Manjaro Linux if that matters.

neb-b commented

2020-04-01 05:34:09 +02:00

(Migrated from github.com)

@SleepingFox88 Ah sorry about that. I forgot you need to run yarn compile:web first, since it's your first time building the app
https://github.com/lbryio/lbry-desktop#run-the-web-app

@SleepingFox88 Ah sorry about that. I forgot you need to run `yarn compile:web` first, since it's your first time building the app https://github.com/lbryio/lbry-desktop#run-the-web-app

sloganking commented

2020-04-01 06:01:11 +02:00

(Migrated from github.com)

@seanyesmunt Thanks. The application compiled and launched after that but I am still not seeing the changes I made. Both the web app and the electron app are giving me three console errors after launching the application.

The error of "react does not recognise" occurs for isSelected (as seen in pic) _userInteractedRef and _onSelect

I am not sure if these are related to my problem or if they are naturally in the main branch.

EDIT: However I now notice the same issues are in this issue's reporter's screen capture so I am assuming they are unrelated

A quick test shows any console.log()'s I add aren't showing up in console either.

Edit:

I am going to try this on Windows 10 to see if my issue is system specific.

@seanyesmunt Thanks. The application compiled and launched after that but I am still not seeing the changes I made. Both the web app and the electron app are giving me three console errors after launching the application. ![](https://i.imgur.com/6QnCqD8.png) The error of "react does not recognise" occurs for ``isSelected`` (as seen in pic) ``_userInteractedRef`` and ``_onSelect`` I am not sure if these are related to my problem or if they are naturally in the main branch. **EDIT: However I now notice the same issues are in this issue's reporter's screen capture so I am assuming they are unrelated** A quick test shows any console.log()'s I add aren't showing up in console either. Edit: I am going to try this on Windows 10 to see if my issue is system specific.

sloganking commented

2020-04-01 06:21:46 +02:00

(Migrated from github.com)

Having the same issue on windows. Can anyone else verify that if they modify the Following string in lbry-desktop\ui\page\discover\view.jsx

that their compiled web or electron app updates the Following string in the top right?

Having the same issue on windows. Can anyone else verify that if they modify the ``Following`` string in ``lbry-desktop\ui\page\discover\view.jsx`` ![](https://i.imgur.com/CFxTwbL.png) that their compiled web or electron app updates the ``Following`` string in the top right? ![](https://i.imgur.com/8Mhf96c.png)

sloganking commented

2020-04-01 06:32:41 +02:00

(Migrated from github.com)

After further searching through the repository I see that string is updated in ui/component/subscribeButton/view.jsx instead of lbry-desktop\ui\page\discover\view.jsx. My apologies that was an error on my part. I can now confirm that my development app is successfully updating. Thank you @seanyesmunt for helping me set up.

After further searching through the repository I see that string is updated in ``ui/component/subscribeButton/view.jsx`` instead of ``lbry-desktop\ui\page\discover\view.jsx``. My apologies that was an error on my part. I can now confirm that my development app is successfully updating. Thank you @seanyesmunt for helping me set up.

kauffj commented

2020-04-01 15:59:06 +02:00

(Migrated from github.com)

@seanyesmunt are there any README changes to make so that the next person has a better experience than @SleepingFox88? Thanks for getting set up Logan!

neb-b commented

2020-04-01 19:34:39 +02:00

(Migrated from github.com)

Glad you got it working! Sorry I missed the wrong file name.

@kauffj Maybe, I'm not sure. Maybe we could point a string on the homepage that users can change to confirm it's updating?

Glad you got it working! Sorry I missed the wrong file name. @kauffj Maybe, I'm not sure. Maybe we could point a string on the homepage that users can change to confirm it's updating?

sloganking commented

2020-04-01 23:29:41 +02:00

(Migrated from github.com)

@kauffj My primary problem was that I was modifying the wrong file which was my own fault. I was searching this repository for a certain string and only saw the results on the first page of results instead of realizing that there were multiple pages of results.

In terms of what documentation could be improved, I first found this video in contributing.md which was marketed as a quickstart guide to running and developing the desktop app. I did run into one of my issues because that video just runs yarn dev to start the application without mentioning that the first time you run the application you need to run yarn compile:electron before you run yarn dev These instructions are found in this repo's readme but not in the video quickstart guide.

I should mention that he quickstart guide video also seems to be old enough that this repo's file structure has changed but I don't think that really stops people from getting started.

On another note, I saw it mentioned in a closed PR for this issue that LBRY supports multiple languages and our solution to this issue may need to work for all of them. If we have multi-language support, is there a way to test that our solution works with other languages as well? I don't suppose modifying the hard coded English strings would be accepted if this problem persists with other languages.

@kauffj My primary problem was that I was modifying the wrong file which was my own fault. I was searching this repository for a certain string and only saw the results on the first page of results instead of realizing that there were multiple pages of results. In terms of what documentation could be improved, I first found [this video](https://spee.ch/7da73fc508ffc4ff8b2711e3c3950110430b0c5f/LBRYAppDesign.mp4) in [contributing.md](https://github.com/lbryio/lbry-desktop/blob/master/CONTRIBUTING.md) which was marketed as a **quickstart guide to running and developing the desktop app**. I did run into one of my issues because that video just runs ``yarn dev`` to start the application without mentioning that the first time you run the application you need to run ``yarn compile:electron`` before you run ``yarn dev`` These instructions are found in [this repo's readme](https://github.com/lbryio/lbry-desktop#run-the-electron-app) but not in the video quickstart guide. I should mention that he quickstart guide video also seems to be old enough that this repo's file structure has changed but I don't think that really stops people from getting started. On another note, [I saw it mentioned](https://github.com/lbryio/lbry-desktop/pull/2990#issuecomment-538819612) in a closed PR for this issue that LBRY supports multiple languages and our solution to this issue may need to work for all of them. If we have multi-language support, is there a way to test that our solution works with other languages as well? I don't suppose modifying the hard coded English strings would be accepted if this problem persists with other languages.

sloganking commented

2020-04-02 01:09:16 +02:00

(Migrated from github.com)

I see from PR #2790 we have a way to manually set the pixel width of the subscribe button. Does anyone know a way to get the current pixel width and store it in a variable instead? I am not yet the most experienced with web development. Any tips or documentation is appreciated.

sloganking commented

2020-04-04 01:58:00 +02:00

(Migrated from github.com)

a580097096

So I have created a PoC for how I'd like to fix the issue. It's still messy in that my current implementation has an issue that causes the buttons to be larger than they should be and moves the content closer to the icon but that should be able to be fixed. I enabled borders around the button divs to aid in debugging but those would be removed before merging back to master.

I initially thought this issue was caused by the size of the subscriptionButton's hitbox shrinking when the mouse went over it, and expanding when the mouse was not over it. This would cause there to be a space on the screen where the mouse, without moving, would continually enter and exit the button's hitbox thus updating the visual state.

However in my testing I have found that the state jittering still occurs on occasion even after that button hitbox stays the same size. It happens less often when I enable the visual borders around the divs although I am not sure why.

https://streamable.com/06sfa2

This jittering only occasionally occurs when the mouse enters the heart icon from the left and stays hovered over it. If the user first mouses over the button label to the right of the heart icon, and then hovers over the heart icon, there does not appear to be any chance that jittering will occur until the mouse leaves the button hitbox. This is more than a 1 pixel issue as while jittering, the mouse is able to move over different parts of the heart icon and the issue still persists. because of this I am no longer certain what's causing the issue.

Edit:

Also as a separate issue, it should be noted that the subscribe button text can become in the opposite state that it should be if the state is changed very quickly. This can be seen in the last pat of the video above

https://github.com/sloganking/lbry-desktop/tree/a5800970960c292fcd5a9d3d4df7cd5b1c9cb8fd So I have created a PoC for how I'd like to fix the issue. It's still messy in that my current implementation has an issue that causes the buttons to be larger than they should be and moves the content closer to the icon but that should be able to be fixed. I enabled borders around the button divs to aid in debugging but those would be removed before merging back to master. I initially thought this issue was caused by the size of the subscriptionButton's hitbox shrinking when the mouse went over it, and expanding when the mouse was not over it. This would cause there to be a space on the screen where the mouse, without moving, would continually enter and exit the button's hitbox thus updating the visual state. However in my testing I have found that the state jittering still occurs on occasion even after that button hitbox stays the same size. It happens less often when I enable the visual borders around the divs although I am not sure why. https://streamable.com/06sfa2 This jittering only occasionally occurs when the mouse enters the heart icon from the left and stays hovered over it. If the user first mouses over the button label to the right of the heart icon, and then hovers over the heart icon, there does not appear to be any chance that jittering will occur until the mouse leaves the button hitbox. This is more than a 1 pixel issue as while jittering, the mouse is able to move over different parts of the heart icon and the issue still persists. because of this I am no longer certain what's causing the issue. Edit: Also as a separate issue, it should be noted that the subscribe button text can become in the opposite state that it should be if the state is changed very quickly. This can be seen in the last pat of the video above

neb-b commented

2020-04-06 17:15:45 +02:00

(Migrated from github.com)

Hey @SleepingFox88

I'll check this out today!

Hey @SleepingFox88 I'll check this out today!

ghost commented

2020-04-06 17:24:54 +02:00

(Migrated from github.com)

Look for this: ICONS.UNSUBSCRIBE and issue #2272

lbry-desktop/ui/component/common/icon-custom.jsx

Maybe the svg path should be examined here :

https://github.com/lbryio/lbry-desktop/pull/2272/commits/85fbea818008b5f61f78d775fb0076f76cb80117#diff-c4ac894f79900ba50f77cf36fe95fd39

https://github.com/lbryio/lbry-desktop/pull/2272/commits/85fbea818008b5f61f78d775fb0076f76cb80117#

The icon changes shape by adding the central part, the rollover is done and undone immediately.

lbry-desktop/ui/component/common/icon-custom.jsx

It would be nice to see if with another icon for the unsubscribe state this also happens.

Look for this: ICONS.UNSUBSCRIBE and issue #2272 * lbry-desktop/ui/component/common/icon-custom.jsx Maybe the svg path should be examined here : https://github.com/lbryio/lbry-desktop/pull/2272/commits/85fbea818008b5f61f78d775fb0076f76cb80117#diff-c4ac894f79900ba50f77cf36fe95fd39 https://github.com/lbryio/lbry-desktop/pull/2272/commits/85fbea818008b5f61f78d775fb0076f76cb80117# The icon changes shape by adding the central part, the rollover is done and undone immediately. __lbry-desktop/ui/component/common/icon-custom.jsx__ It would be nice to see if with another icon for the unsubscribe state this also happens.

neb-b commented

2020-04-06 20:16:27 +02:00

(Migrated from github.com)

@SleepingFox88 I left a comment on your latest commit. I think something like that should work. We would just need to make sure the hidden label isn't read by screen readers.

Can you open a PR? (FYI there are some recent changes to those buttons)

@SleepingFox88 I left a comment on your latest commit. I think something like that should work. We would just need to make sure the hidden label isn't read by screen readers. Can you open a PR? (FYI there are some recent changes to those buttons)

Rows
Columns

ui/components/subscribeButton has glitchy visual behavior. #2677

The Issue

Steps to Reproduce

Recorded Video of the Bug