Add setting to auto load comment section #3352

PikachuEXE · 2023-03-24T03:31:17Z

Pull Request Type

Bugfix
Feature Implementation
Documentation
Other

Related issue

N/A

Description

Add a setting to allow comment section to be auto loaded, default disabled
When enabled (with a percentage), comment section bottom when appears pass N% above bottom of viewport will have comment data auto loaded once (won't load it if data already being loaded, loaded)

Screenshots

New setting position (can be adjusted)

Testing

A. Disabled

No setting change should be required, it's default
View a video with comment
Scroll~~~
Ensure comment not auto loaded

B. 0% from window/view port bottom

Update setting
View a video with multiple pages of comment (e.g. https://youtu.be/h-qHtElnTbE)
Scroll carefully and observe comment section
Ensure comments auto loaded once comment section bottom is 0% above bottom of window/view port
Scroll down again
Ensure more comments auto loaded

You can test other settings as well, those percentage values (yes zero or negative values) are just passed into IntersectionObserver rootMargin

Desktop

OS:
OS Version:
FreeTube version:

Additional context

To prevent comment autoload on page load (when video player is minimized for a moment), a timeout is used (1000ms)
I am not sure if that's good enough
Updating setting won't adjust behaviour until video switched

ChunkyProgrammer · 2023-03-24T04:46:19Z

I think a toggle should probably be used instead (percentage might be confusing for users)

PikachuEXE · 2023-03-24T05:14:50Z

I don't understand
Toggle to enable and another setting to adjust percentage?

Note: Percentage is required to adjust to user device screen size & preference (on window size)

absidue · 2023-03-24T08:02:10Z

Chunky means don't expose any percentages to the user, pick one and then have a single on and off switch.

Also instead of writing your own IntersectionObserver code, you can use vue-observe-visibility, which we already have to lazy load the videos etc in the lists. See ft-list-lazy-wrapper to see how it's used there.

PikachuEXE · 2023-03-24T11:42:48Z

Problem is

small number like 0% = Auto load on large windows anyway
large number = inconvenient

Let me take a look at vue-observe-visibility...

absidue · 2023-03-24T12:14:31Z

If the comment section is always visible in large windows people will expect it to auto load straight away anyway.

PikachuEXE · 2023-03-25T03:07:34Z

Updated

static/locales/en-US.yaml

src/renderer/components/player-settings/player-settings.js

src/renderer/store/modules/settings.js

efb4f5ff-1298-471a-8973-3d47447115dc

It would be nice to autoload comments when i almost reach the 'load more comments' button

PikachuEXE · 2023-03-26T01:00:55Z

It would be nice to autoload comments when i almost reach the 'load more comments' button
Do you mean mouse cursor?

PikachuEXE · 2023-03-26T01:09:17Z

Unnecessary translation entries removed

PikachuEXE

It's my habit to ensure the values in DB is more flexible than the UI when possibility of future change is present

PikachuEXE · 2023-03-26T01:07:53Z

src/renderer/components/player-settings/player-settings.js

+      return this.$store.getters.getCommentAutoLoadCondition
+    },
+
+    commentAutoLoadConditionEnabled: function () {


Using string is intentional even though UI is a toggle
I am not excluding the possibility to introduce other values later
No DB change needed when that's the case

PikachuEXE · 2023-03-26T01:08:28Z

src/renderer/components/player-settings/player-settings.js

@@ -266,6 +274,12 @@ export default defineComponent({
      })
    },

+    updateCommentAutoLoadConditionEnabled: function(enabled) {
+      this.updateCommentAutoLoadCondition(
+        enabled ? '0%' : 'disabled'


Intentional "frontend boolean to backend enum" conversion

efb4f5ff-1298-471a-8973-3d47447115dc · 2023-03-26T09:29:47Z

It would be nice to autoload comments when i almost reach the 'load more comments' button
Do you mean mouse cursor?

When i reach the bottom of the comment section i want it to auto load more comments

VirtualBoxVM_R1XNzfC1mb.mp4

PikachuEXE · 2023-03-26T09:51:15Z

Different feature, different PR please
Update 1: Or do you mean it should be done in this PR too???
Update 2: Will try to implement it if not merged within 2 days

absidue · 2023-03-26T09:58:44Z

@PikachuEXE I doubt we'll be adding more values in the future, not having it be a boolean sounds like unnecessary complication to me.

Although considering that in most screenshots you've sent, you have had FreeTube at a massive window size, I'm guessing that the reason you don't want to switch to a boolean, is so that you can have a different percentage in your personal settings db, while everyone else uses 0%.

efb4f5ff-1298-471a-8973-3d47447115dc · 2023-03-26T10:31:35Z

Different feature, different PR please Update 1: Or do you mean it should be done in this PR too??? Update 2: Will try to implement it if not merged within 2 days

As user i expect the following when i enable this feature:

When i navigate to a video it loads the comments section (current behavior of PR)
When i scroll down the comment section it should load more comments

IMO (again from an user perspective) the PR in its current iteration is a half baked feature. So to come back to your question i dont see this as a different feature.

PikachuEXE · 2023-03-26T11:25:11Z

Is there a path to update the setting from boolean to string if it ever happens?
Update reader code?

Also are 4 new methods instead of 2 really that complicated?

absidue · 2023-03-26T11:28:42Z

I just don't think it's necessary to over engineer something, just in case we change our minds in the future, as that is extremely unlikely to happen.

PikachuEXE · 2023-03-26T12:57:42Z

Updated

src/renderer/components/watch-video-comments/watch-video-comments.vue

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

PikachuEXE · 2023-04-08T06:48:54Z

Setting updated

Also removed the delay on comment loading (I didn't know there is a ready event)

src/renderer/views/Watch/Watch.js

src/renderer/components/watch-video-comments/watch-video-comments.js

efb4f5ff-1298-471a-8973-3d47447115dc · 2023-04-08T21:58:59Z

it shows being greyed out but enabled. That could potentially be confusing so i think u should also disable it.. AFAIK we also do that with other settings like that

PikachuEXE · 2023-04-09T01:47:44Z

Done

efb4f5ff-1298-471a-8973-3d47447115dc · 2023-04-26T08:35:14Z

@ChunkyProgrammer ur powers are needed

PikachuEXE requested review from absidue, efb4f5ff-1298-471a-8973-3d47447115dc and ChunkyProgrammer March 24, 2023 03:31

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Mar 24, 2023

FreeTubeBot enabled auto-merge (squash) March 24, 2023 03:31

ChunkyProgrammer reviewed Mar 25, 2023

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc reviewed Mar 25, 2023

View reviewed changes

PikachuEXE commented Mar 26, 2023

View reviewed changes

absidue added PR: changes requested and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Mar 26, 2023

PikachuEXE requested review from efb4f5ff-1298-471a-8973-3d47447115dc and ChunkyProgrammer March 26, 2023 12:57

PikachuEXE added PR: waiting for review For PRs that are complete, tested, and ready for review and removed PR: changes requested labels Mar 26, 2023

absidue reviewed Mar 26, 2023

View reviewed changes

src/renderer/components/watch-video-comments/watch-video-comments.vue Outdated Show resolved Hide resolved

PikachuEXE and others added 8 commits April 8, 2023 14:30

* Use vue-observe-visibility to implement comment autoload

3a75a35

- Remove unused translation entries

23fcabc

- Remove no longer valid code comment

bec8417

* Rename & retype new setting

15096ef

* Implement auto more comment loading

a1f8d63

- Remove outdated comment

f4c25a9

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Disable new setting switch when hide comments enabled

56dec89

* Remove the unnecessary delay on video comment loading

31d16a0

PikachuEXE force-pushed the feature/video-comment-auto-load-on-scroll branch from beaa8cf to 31d16a0 Compare April 8, 2023 06:48

absidue reviewed Apr 8, 2023

View reviewed changes

src/renderer/views/Watch/Watch.js Show resolved Hide resolved

src/renderer/components/watch-video-comments/watch-video-comments.js Outdated Show resolved Hide resolved

* Update according to review

6e831f0

PikachuEXE requested a review from absidue April 8, 2023 10:59

* Disable autoload when hide comment enabled

26ddc77

efb4f5ff-1298-471a-8973-3d47447115dc approved these changes Apr 9, 2023

View reviewed changes

PikachuEXE requested review from absidue and ChunkyProgrammer and removed request for absidue and ChunkyProgrammer April 9, 2023 23:38

absidue approved these changes Apr 18, 2023

View reviewed changes

PikachuEXE requested review from ChunkyProgrammer and removed request for ChunkyProgrammer April 19, 2023 00:06

efb4f5ff-1298-471a-8973-3d47447115dc requested a review from MarmadileManteater April 25, 2023 22:38

ChunkyProgrammer approved these changes Apr 27, 2023

View reviewed changes

FreeTubeBot merged commit b5e35d0 into FreeTubeApp:development Apr 27, 2023

github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Apr 27, 2023

PikachuEXE mentioned this pull request Jan 17, 2024

Update most paginated places to auto load next page (except comments) #4565

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add setting to auto load comment section #3352

Add setting to auto load comment section #3352

PikachuEXE commented Mar 24, 2023 •

edited

Loading

ChunkyProgrammer commented Mar 24, 2023

PikachuEXE commented Mar 24, 2023 •

edited

Loading

absidue commented Mar 24, 2023

PikachuEXE commented Mar 24, 2023

absidue commented Mar 24, 2023

PikachuEXE commented Mar 25, 2023

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

PikachuEXE commented Mar 26, 2023

PikachuEXE commented Mar 26, 2023

PikachuEXE left a comment

PikachuEXE Mar 26, 2023

PikachuEXE Mar 26, 2023

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 26, 2023

PikachuEXE commented Mar 26, 2023 •

edited

Loading

absidue commented Mar 26, 2023 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 26, 2023

PikachuEXE commented Mar 26, 2023

absidue commented Mar 26, 2023

PikachuEXE commented Mar 26, 2023

PikachuEXE commented Apr 8, 2023

efb4f5ff-1298-471a-8973-3d47447115dc commented Apr 8, 2023

PikachuEXE commented Apr 9, 2023

efb4f5ff-1298-471a-8973-3d47447115dc commented Apr 26, 2023

Add setting to auto load comment section #3352

Add setting to auto load comment section #3352

Conversation

PikachuEXE commented Mar 24, 2023 • edited Loading

Pull Request Type

Related issue

Description

Screenshots

Testing

Desktop

Additional context

ChunkyProgrammer commented Mar 24, 2023

PikachuEXE commented Mar 24, 2023 • edited Loading

absidue commented Mar 24, 2023

PikachuEXE commented Mar 24, 2023

absidue commented Mar 24, 2023

PikachuEXE commented Mar 25, 2023

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

Choose a reason for hiding this comment

PikachuEXE commented Mar 26, 2023

PikachuEXE commented Mar 26, 2023

PikachuEXE left a comment

Choose a reason for hiding this comment

PikachuEXE Mar 26, 2023

Choose a reason for hiding this comment

PikachuEXE Mar 26, 2023

Choose a reason for hiding this comment

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 26, 2023

PikachuEXE commented Mar 26, 2023 • edited Loading

absidue commented Mar 26, 2023 • edited Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Mar 26, 2023

PikachuEXE commented Mar 26, 2023

absidue commented Mar 26, 2023

PikachuEXE commented Mar 26, 2023

PikachuEXE commented Apr 8, 2023

efb4f5ff-1298-471a-8973-3d47447115dc commented Apr 8, 2023

PikachuEXE commented Apr 9, 2023

efb4f5ff-1298-471a-8973-3d47447115dc commented Apr 26, 2023

PikachuEXE commented Mar 24, 2023 •

edited

Loading

PikachuEXE commented Mar 24, 2023 •

edited

Loading

PikachuEXE commented Mar 26, 2023 •

edited

Loading

absidue commented Mar 26, 2023 •

edited

Loading