Tabview Youtube

Make comments and lists into tabs for YouTube Videos

As of 2022-11-09. See the latest version.

Author
𝖢𝖸 𝖥𝗎𝗇𝗀
Ratings
0 0 0
Version
2.12.3
Created
2021-06-29
Updated
2022-11-09
License
MIT https://github.com/cyfung1031/Tabview-Youtube/blob/main/LICENSE
Applies to

English | 日本語 | 中文

Beta Version 2.12.1

  • Removed the hover meta for old layout.
  • Added multi lang support for tab button.
  • Removed modern layout round angle
  • Major Code Changed in 2.11.1 for Modern Layout with #cinematics (2022.10.07)
  • Fixed bugs related to playlist (Issue 157029)

Stable Version 2.9.9

  • Support Miniview - Switch between Video and Main Page
  • Rewrite the mechanism for comment count detection
  • Rewrite the coding for "show more"/"show less" for window resize & layout change
  • Delayed Update for Chatroom
  • Improved Transcript for effected subtitles
  • Fixed Experimental Teaser UI
  • New Feature - Font size adjustment for tab content (2.4.1)
  • A critical bug since 2.1.0 is found and fixed in 2.5.0
  • fixed new UI #below in 2.7.0
  • chatroom message performance improved in 2.7.2
  • newline for chatroom message in 2.7.14
  • Changed Layout Behaviour in 2.9.0
  • Changed Hiding Comment Checker in 2.9.3

Suggested Minium browser versions (IntersectionObserver, customElements, Element.prepend()):



For Firefox, we recommend to set layout.css.has-selector.enabled to true for the css selector :has being used.

Old Version 1.8.51 (Broken since 2022/07/12)

  • Fixed Youtube CSS Change (dated 2022.04.20) Related Issues
  • Effective Fix for Show More/Less not displaying correctly (-webkit-line-clamp bug)
  • Fixed Comments Not loaded before clicking

Suggested Minium browser versions (ES6 Class):



Details

MIT license; https://github.com/cyfung1031/Tabview-Youtube


Compatible Userscript Manager List:

  • Tampermonkey / Tampermonkey beta
  • Violetmonkey

Compatible Browser List:

  • Chrome / Chromium / Edge
  • Firefox / Waterfox
  • Safari
  • Waterfox Classic
  • Vivaldi
  • Cent / Catsxp / Maxthon

Remarks

Please install this userscript with Tampermonkey (Edge/Firefox/Chrome/Waterfox) or Tampermonkey Version 4.8.5847 (Waterfox Classic).
Using latest modern browser (Edge/Firefox/Chrome) is encouraged but backward compatible is also available for some browsers like Waterfox Classic.
FireMonkey is not recommended due to limitation of feature.

At this moment, I have no plan to publish this in Chrome Web Store as I do not have such a time to deal with Chrome Web Store's requirement.
Please do NOT publish this in Chrome Web Store on behalf of youself.

The source code and design were orginally inspired by SuperYouTube (Extension for Youtube™), but I have done many coding improvement and design changes for better and faster experience (for example, dark / light theme adaptation). This userscript has NO relationship with SuperYouTube.

The reason I created this userscript is, I do not like there are so many settings in SuperYouTube and waste my RAM for just watching youtube as a separate extension, and also I feel buggy and slow for SuperYouTube.

As for performance boost, I imposed many CSS hacks for this userscript to maximize the user experience (contain and content-visibility). Some might make other userscripts or plugins broken. So please let me know and I will try to fix the bugs.


Preview (Dark Theme - Two Columns)

Theater Mode

Live Chat - Live / Replay

Video Info


Normal Comment Mode, if available

Related Videos

Playlist, if available

Chapter & Caption, if available





Sample Youtube Links - Standard Test Case (2000+ Comments + Live Chat Playback):

Sample Youtube Links - Long Comments (229,342+):Sample Youtube Links - Live Chat Playback:Sample Youtube Links - Live Chat Playback Disabled:Sample Youtube Links - Playlist:Sample Youtube Links - Chapter:Sample Youtube Links - DISABLED Comment Section (by Uploader Setting):Sample Youtube Links - NO COMMENT SECTION:Sample Youtube Links - Youtube's incorrect counting of comments:Sample Youtube Links - Old Static Background Video (Sqaure or 4:3):Sample Youtube Links - New Static Background Video (Transparent 16:9):Sample Youtube Links - 21:9 VideoSample Youtube Links - Effected subtitles:
(Be careful - opening the transcript panel without Tabview YouTube 2.1.0 might make your browser crash)Sample Yotubue Links - Live Chat / Reply with Reduced Refresh Speed:Youtube Transcript only lang bugDefault Chatroom Expanded3D VideoYouTube Modern Layout 2022 - #cinematics


Known Issues

  1. abnormal attribute "hidden" in invisible layout - Sometimes the playlist is still hidden after clicking the playlist item.
  2. Youtube Coding Bug: No chat replay if the video is paused
  3. Webkit bug - comments lines clamped without "show more" button
  4. Show More / Show Less Button might be always visible for full content after resizing the comments section
  5. MiniView Switching Video Not Available Yet (v2.1.0 feature)
  6. Sometime the player go miniview after the page is just loaded (v2.1.0 feature)
  7. Request Default Tab Feature 94022 92458
  8. Text Size for Tab Info - will let users to adjust the text size (v2.4.1 feature)
  9. Teaser UI - when window.yt.config_.EXPERIMENT_FLAGS.kevlar_watch_metadata_refresh is true Removed due to Teaser UI abandoned by YouTube
  10. playing -> show comment -> auto play next -> css not injected to iframe? Fixed in v2.11.3 by using Iframe load event checking

De-customize Tabview Youtube CSS rules

Some CSS rules used in Tabview Youtube change the default appearance for a better user experience.
You can de-customize (revert to YouTube default) by adding the following:

Chatroom Iframe

span#message {
    --tabview-chat-message-display: 'invalid' !important;
    --tabview-chat-message-mt: 'invalid' !important;
    --tabview-chat-message-mb: 'invalid' !important;
}

Main Page

yt-formatted-string.ytd-transcript-segment-renderer > span {
    --tabview-transcript-segment-span-display: 'invalid' !important;
}

APIs


    Element
    ytd-comments#comments
    Property
    loadComments
    Description
    Function; trigger comments to load


    Element
    ytd-comments#comments ytd-expander[max-number-of-lines]
    Property
    recomputeOnResize
    Description
    Boolean; default = false; changed to true


    Element
    ytd-comments#comments ytd-expander[max-number-of-lines]
    Property
    calculateCanCollapse
    Description
    Function; changed to this.$.content.scrollHeight>this.collapsedHeight

Compatible Features

Also see...