Tabview Youtube

Make comments and lists into tabs for YouTube Videos

< Feedback on Tabview Youtube

Question/comment

§
Posted: 2024-05-05

This code causes some nodes to be wrapped by \uF204 and \uF205.

if (text && !text.startsWith('\uF204')) {
  node.nodeValue = `\uF204${text.replace(/[\uF204\uF205]/g, '')}\uF205`;
}

These characters are retained after the function has finished running, which affects some buttons or elements.

e.g. #tab-info #left-arrow or :fullscreen ytd-watch-metadata[description-collapsed].


Loading a live stream in the background may cause the chat room to fail to load.

i.e. The iframe src is about:blank

How to reproduce:

  1. Open a live stream in a new tab. (Ctrl + Click)
  2. Wait for the title of the tab to change. (Video Title→YouTube→Video Title).
  3. Switch to this tab and you can see that the chat room is always loading.


In full screen mode, every time I click on a tab (info, video, chat, etc.) the page automatically scrolls to the bottom, is this the behavior you expect?

§
Posted: 2024-05-05

These characters are retained after the function has finished running, which affects some buttons or elements.e.g. #tab-info #left-arrow or :fullscreen ytd-watch-metadata[description-collapsed].

What is the exact issue of that? Can you provide some screenshots to illustrate?

This should not affect anything of YouTube. The texts inside [hidden] elements are all hidden.

When the UI element is being reused, the data and then text will be changed.

§
Posted: 2024-05-05

Loading a live stream in the background may cause the chat room to fail to load.

Could you let me know which browser and OS you are using?

I am still checking this issue.

§
Posted: 2024-05-05

In full screen mode, every time I click on a tab (info, video, chat, etc.) the page automatically scrolls to the bottom, is this the behavior you expect?

It should scroll down such that the full content of the tab can be shown. If your case is like this, it is the expected behavior.

If not, it should be a bug.

§
Posted: 2024-05-06

https://www.youtube.com/watch?v=nVKsV6bozwM

#tab-info #left-arrow


:fullscreen ytd-watch-metadata[description-collapsed]


This should not affect anything of YouTube. The texts inside [hidden] elements are all hidden.

How do you make sure that the [hidden] attribute has no chance of being removed?


Could you let me know which browser and OS you are using?

Windows Chrome/124.0.0.0 Tampermonkey v5.1.1


It should scroll down such that the full content of the tab can be shown.

You didn't take into account that ytd-masthead will cover some of the content, you can't just use chatFrame.scrollIntoView().

§
Posted: 2024-05-06
Edited: 2024-05-06
  • Have you use any script to remove the [hidden] ?

    How do you make sure that the [hidden] attribute has no chance of being removed?

    [hidden] attribute will be enabled and disabled dynamically. When it is removed, the text inside will be changed too.

  • because the height of the tab is limited so that ytd-masthead height + tab height < screenheight


I can add the fix for [hidden] nodes, but I need to understand why you are facing this issue.


ytd-masthead height + tab height < screenheight

§
Posted: 2024-05-06

I can reproduce your issue for :fullscreen ytd-watch-metadata[description-collapsed]

Anyway, I will fix it later.

Thanks for reporting.

§
Posted: 2024-05-07

ytd-masthead height + tab height < screenheight

Have you ever tried clicking on a chat room?

It automatically aligns to the top, but you need to scroll up again to see the close button because it's covered by ytd-masthead.


Before we go any further, I have found a new problem.

In full screen mode, you can have more than one tab open at the same time and keep it open after exiting full screen.

How to reproduce:

  1. https://www.youtube.com/watch?v=L_tg2u26tCU
  2. Enter full screen.
  3. Click Show chat replay.
  4. Click Show transcript in the description on the left.
  5. Click Show chat replay.
  6. Exit full Screen.

On the basis that you will fix the above problem, I suggest you consider using the following method instead of scrollIntoView:

      if (!!(tab_change & LAYOUT_CHATROOM_EXPANDED) && new_isExpandedChat) {
        //tab_change = LAYOUT_CHATROOM_EXPANDED
        //tab_change = LAYOUT_CHATROOM_EXPANDED|LAYOUT_TAB_EXPANDED


        timeline.setTimeout(() => {
          let scrollElement = document.querySelector('ytd-app[scrolling]')
          if (!scrollElement) return;
          // single column view; click button; scroll to tab content area 100%
          let chatFrame = document.querySelector('ytd-live-chat-frame#chat');
          if (chatFrame && isChatExpand()) {
            // _console.log(7290, 1)
            let secondary = document.getElementById('secondary');
            let masthead = document.getElementById('masthead');
            if (!secondary || !masthead) return;
            scrollElement.scrollTo({ top: secondary.offsetTop - masthead.offsetHeight, behavior: 'smooth' });
          }
        }, 60)

      }

      if (!!(tab_change & LAYOUT_ENGAGEMENT_PANEL_EXPANDED) && new_isExpandedEPanel) {

        timeline.setTimeout(() => {
          let scrollElement = document.querySelector('ytd-app[scrolling]')
          if (!scrollElement) return;
          // single column view; click button; scroll to tab content area 100%
          let epPanel = document.querySelector('ytd-watch-flexy[flexy][tyt-tab] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden])');
          if (epPanel) {
            // _console.log(7290, 2)

            let secondary = document.getElementById('secondary');
            let masthead = document.getElementById('masthead');
            if (!secondary || !masthead) return;
            let scrollTop = secondary.offsetTop - masthead.offsetHeight;

            let pi = 50;
            let cid = setInterval(() => {
              if (--pi) scrollElement.scrollTo({ top: scrollTop, behavior: 'smooth' }); else clearInterval(cid)
            }, 17)
            //
          }
        }, 60)

      }

      const fullScreenTabScrollIntoView = () => {
        let scrollElement = document.querySelector('ytd-app[scrolling]')
        if (!scrollElement) return;
        // single column view; click button; scroll to tab content area 100%
        let rightTabs = document.querySelector('#right-tabs');
        if (rightTabs && tabBtn.classList.contains('active')) {
          let secondary = document.getElementById('secondary');
          let masthead = document.getElementById('masthead');
          if (!secondary || !masthead) return;
          scrollElement.scrollTo({ top: secondary.offsetTop - masthead.offsetHeight, behavior: 'smooth' });
        }
      }


The problem of loading YouTube in the background is no longer reproducible in v4.71.1.

Did you fix it already?

But when the video to be loaded in the background has a donation-shelf, the shelf keep collapsed and the tyt-donation-shelf-toggle-btn does not appear.

And it also happens after I refresh the page (not too often).


There are some videos that can't hide the description, could you take a look?

https://www.youtube.com/watch?v=Hq0UJ2Z1vS0

https://www.youtube.com/watch?v=5SjuE8SKegg


Anyway, I will fix it later.

I saw your update, thanks.

Post reply

Sign in to post a reply.