The new YouTube design is GOD AWFUL

tjc_dev · October 31, 2022, 4:07pm

Sorry - engage rant-mode:

I dislike the new changes, they should have given us a compact view as an option.

To get small thumbnails on the video tab I have to put my tablet into landscape mode, click on the live tab, then click on the video tab and then rotate the tablet back to portrait.
Why explicitly split out Live? Many times viewers see these videos well after the event (due to time zone differences) - it makes no sense to me personally.

This is as bad as Windows trying to get a single interface option for all devices (Phones, tablets, laptops and desktops) and the recent obfuscation of the UI including the MS hypothesis that ‘the more clicks a user has to do the better the interface’.

Argghhh

cowphrase · November 1, 2022, 12:57am

So far I’ve noticed that they’ve removed “Sort by Oldest” on the channel page, which occasionally is very handy. Now you need to spend minutes scrolling through all the videos to reach the bottom. Their lazy load is sooo slow.

Plus you also can’t hover over dates in the channel view to see when videos were actually uploaded. Relative dates are a huge usability issue in many places - a video uploaded 18 months ago is neither “1 year ago” nor “2 years ago”. Every product needs an option for absolute dates.

(Also eww rounded corners everywhere, but that’s personal preference. Like all fads it’ll pass.)

Looks like they haven’t gutted the search too much, you can still hack around to search for recent videos sorted by upload date. They’ll probably remove that soon, can’t have you watching unpopular videos : O

tjc_dev · November 1, 2022, 6:39pm

Thanks for the GitHub link, the extension works and by setting the page zoom to 90-100% in Chrome (I am running a large 4k screen) and ‘Extra Large’ text the video thumbnails are now the right size again too!

Shame that I have no solution on iPad - my fault for buying into Apple’s ecosystem.

FurryJackman · November 2, 2022, 12:01pm

They’re literally stylesheets that work in Stylus on Firefox. I double checked by copying the stylesheets manually into Stylus and it worked. (though remember to restrict it to the specific domains)

MCVET · November 2, 2022, 12:19pm

One thing I noticed today was if I look up all the videos on a channel’s videos page, the thumbnails are large. They used to be small and would show a lot of them(20+?), but now there’s like 4-6 and the usefulness of the page dropped significantly.

FurryJackman · November 2, 2022, 12:21pm

Yeah, they removed all the “sort by” features on the videos tab. So when people like Markiplier say to go to the oldest video on their channel, you can’t get there anymore.

FurryJackman · November 2, 2022, 12:24pm

JSON port of the Github for Stylus for Firefox: (Includes ALL settings, beware)

[
  {
    "settings": {
      "openEditInWindow": false,
      "openEditInWindow.popup": false,
      "windowPosition": {},
      "show-badge": true,
      "disableAll": false,
      "exposeIframes": false,
      "exposeStyleName": false,
      "newStyleAsUsercss": false,
      "styleViaXhr": false,
      "patchCsp": false,
      "config.autosave": true,
      "schemeSwitcher.enabled": "system",
      "schemeSwitcher.nightStart": "18:00",
      "schemeSwitcher.nightEnd": "06:00",
      "popup.breadcrumbs": true,
      "popup.breadcrumbs.usePath": false,
      "popup.enabledFirst": true,
      "popup.stylesFirst": true,
      "popup.autoResort": false,
      "popup.borders": false,
      "popup.findSort": "u",
      "manage.onlyEnabled": false,
      "manage.onlyLocal": false,
      "manage.onlyUsercss": false,
      "manage.onlyEnabled.invert": false,
      "manage.onlyLocal.invert": false,
      "manage.onlyUsercss.invert": false,
      "manage.actions.expanded": true,
      "manage.backup.expanded": true,
      "manage.filters.expanded": true,
      "manage.newUI": true,
      "manage.newUI.favicons": false,
      "manage.newUI.faviconsGray": true,
      "manage.newUI.targets": 3,
      "manage.newUI.sort": "title,asc",
      "editor.options": {},
      "editor.toc.expanded": true,
      "editor.options.expanded": true,
      "editor.lint.expanded": true,
      "editor.publish.expanded": true,
      "editor.lineWrapping": true,
      "editor.smartIndent": true,
      "editor.indentWithTabs": false,
      "editor.tabSize": 4,
      "editor.keyMap": "default",
      "editor.theme": "default",
      "editor.beautify": {
        "selector_separator_newline": true,
        "newline_before_open_brace": false,
        "newline_after_open_brace": true,
        "newline_between_properties": true,
        "newline_before_close_brace": true,
        "newline_between_rules": false,
        "preserve_newlines": true,
        "end_with_newline": false,
        "indent_conditional": true,
        "indent_mozdoc": true
      },
      "editor.beautify.hotkey": "",
      "editor.lintDelay": 300,
      "editor.linter": "csslint",
      "editor.lintReportDelay": 500,
      "editor.matchHighlight": "token",
      "editor.autoCloseBrackets": true,
      "editor.autocompleteOnTyping": false,
      "editor.contextDelete": false,
      "editor.selectByTokens": true,
      "editor.appliesToLineWidget": true,
      "editor.autosaveDraft": 10,
      "editor.livePreview": true,
      "editor.colorpicker": true,
      "editor.colorpicker.hexUppercase": false,
      "editor.colorpicker.hotkey": "",
      "editor.colorpicker.color": "",
      "editor.colorpicker.maxHeight": 300,
      "hotkey._execute_browser_action": "",
      "hotkey.openManage": "",
      "hotkey.styleDisableAll": "",
      "sync.enabled": "none",
      "iconset": -1,
      "badgeDisabled": "#8B0000",
      "badgeNormal": "#006666",
      "headerWidth.edit": 280,
      "headerWidth.install": 280,
      "headerWidth.manage": 280,
      "popupWidth": 246,
      "updateInterval": 24
    },
    "order": {
      "main": [],
      "prio": []
    }
  },
  {
    "enabled": true,
    "updateUrl": "https://github.com/Bowserinator/hellomouse-youtube-style/raw/master/css/desc.css",
    "installDate": 1666923401637,
    "name": "desc",
    "sections": [
      {
        "code": "/* Better descriptions and titles */\n\n/* Restore old playlist title style */\nytd-playlist-panel-renderer[modern-panels]:not([hide-header-text]) .title.ytd-playlist-panel-renderer {\n    font-family: \"Roboto\",\"Arial\",sans-serif !important;\n    font-size: 1.4rem !important;\n    line-height: 2rem !important;\n    font-weight: 500 !important;\n}\n\n/* Restore video title style */\nh1.ytd-watch-metadata {\n    font-family: \"Roboto\",\"Arial\",sans-serif !important;\n    font-size: 1.8rem !important;\n    line-height: 2.6rem !important;\n    font-weight: 400 !important;\n    max-height: 5.2rem !important;\n}\n\n/* Move video buttons to top */\n#top-row.ytd-watch-metadata {\n    flex-direction: column-reverse !important;\n}\n\n/* Move Info box */\n#info-container.ytd-watch-metadata {\n    position: absolute !important;\n    top: -115px !important;\n    left: 0 !important;\n    font-size: 1.4rem !important;\n    line-height: 2rem !important;\n    font-weight: 400 !important;\n    color: var(--yt-spec-text-secondary) !important;\n    display: block !important;\n    max-width: calc(100% - 400px);\n    -webkit-mask-image: none !important;\n}\n\n#info-container.ytd-watch-metadata span.bold.style-scope.yt-formatted-string {\n    font-weight: 400 !important;\n}\n\n/* Remove description flash when expanding */\nyt-interaction {\n    display: none !important;\n}\n\n/* Remove description background color */\nytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata {\n    background-color: transparent !important;\n}\n\n/* Show more button always on new row and blue */\n#expand.ytd-text-inline-expander {\n    /* Original was all title case and faded gray */\n    position: relative !important;\n    left: 0 !important;\n}\n\n/* Show more and less */\n.button.ytd-text-inline-expander,\n#expand.ytd-text-inline-expander {\n    text-transform: uppercase !important;\n    font-weight: normal !important;\n    color: var(--yt-spec-text-secondary) !important;\n    font-size: 1.2rem !important;\n    margin-top: 8px !important;\n}\n\n/* Dislike ratio bar placement (Return youtube dislike) */\n.ryd-tooltip {\n    left: calc(100% - 365px) !important;\n    top: 4px !important;\n}\n/* Red green coloring */\n#ryd-bar {\n    background: #81c784 !important;\n}\n#ryd-bar-container {\n    background: #ef5350 !important;\n}\n\n/* Increase gap between video and title as was before */\nytd-watch-metadata.ytd-watch-flexy {\n    margin-top: 20px !important;\n}\n",
        "domains": [
          "youtube.com",
          "youtube-nocookie.com"
        ]
      }
    ],
    "updateDate": 1667390619920,
    "_id": "eaf9d24e-0465-4f86-ac94-e0dd8f47f66e",
    "_rev": 1667391192414,
    "id": 1
  },
  {
    "enabled": true,
    "updateUrl": "https://github.com/Bowserinator/hellomouse-youtube-style/raw/master/css/ui.css",
    "installDate": 1666923490531,
    "name": "ui",
    "sections": [
      {
        "code": "/* Buttons and UI fixes */\n\n/* Subscribe button */\n#owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,\n#owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {\n    background-color: var(--yt-spec-brand-button-background) !important;\n    border-radius: 2px;\n    color: var(--yt-spec-static-brand-white) !important;\n    padding: var(--yt-button-padding) !important;\n    margin: auto var(--ytd-subscribe-button-margin,4px) !important;\n    font-size: var(--ytd-tab-system-font-size) !important;\n    font-weight: var(--ytd-tab-system-font-weight) !important;\n    letter-spacing: var(--ytd-tab-system-letter-spacing) !important;\n    text-transform: var(--ytd-tab-system-text-transform) !important;\n}\n\n/* Already subscribed button */\n#owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {\n    background-color: var(--yt-spec-badge-chip-background) !important;\n    color: var(--yt-spec-text-secondary) !important;\n}\n\n/* Move subscribe button to right */\n#owner.ytd-watch-metadata {\n    justify-content: space-between !important;\n}\n\n.item.ytd-watch-metadata {\n    margin-right: 0 !important;\n}\n\n/* Old username style */\n/*#text.ytd-channel-name {\n    color: rgb(255, 255, 255) !important;\n    font-family: Roboto, Arial, sans-serif !important;\n    font-size: 14px !important;\n    font-weight: 500 !important;\n    line-height: 20px !important;\n}*/\n\n/* Playlists page left side */\n.immersive-header-background-wrapper.ytd-playlist-header-renderer {\n    opacity: 0.2 !important;\n}\n\n/* Buttons no margin: */\n#flexible-item-buttons.ytd-menu-renderer:not(:empty)>.ytd-menu-renderer[button-renderer] {\n    margin-left: 0 !important;\n}\n\n/* Video buttons: no bg and border: */\nytd-watch-metadata[flex-menu-enabled] #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata .yt-spec-button-shape-next--size-m,\nytd-watch-metadata[flex-menu-enabled] #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {\n    border-radius: 2px !important;\n    background-color: transparent !important;\n}\n\n/* Video buttons: Remove labels for clip, share, and save */\n#actions.ytd-watch-metadata ytd-segmented-like-dislike-button-renderer .yt-spec-button-shape-next--button-text-content {\n    display: block !important;\n}\n#actions.ytd-watch-metadata ytd-segmented-like-dislike-button-renderer .yt-spec-button-shape-next__icon {\n    margin-right: 6px !important;\n    margin-left: -6px !important;\n}\n#actions.ytd-watch-metadata .yt-spec-button-shape-next--button-text-content {\n    display: none !important;\n}\n#actions.ytd-watch-metadata .yt-spec-button-shape-next__icon {\n    margin-right: 0 !important;\n    margin-left: 0 !important;\n}\n\n/* Thumbnail channel name */\n/*#text.ytd-channel-name {\n    color: var(--yt-spec-text-secondary) !important;\n    font-size: 12px !important;\n    font-weight: 400 !important;\n    line-height: 18px !important;\n}*/\n",
        "domains": [
          "youtube.com",
          "youtube-nocookie.com"
        ]
      }
    ],
    "updateDate": 1667390926606,
    "_id": "0cd6b392-af00-4c22-9c0c-d8626d4c059c",
    "_rev": 1667391172551,
    "id": 2,
    "updatable": false
  },
  {
    "enabled": true,
    "updateUrl": "https://github.com/Bowserinator/hellomouse-youtube-style/raw/master/css/unround.css",
    "installDate": 1666923573709,
    "name": "unround",
    "sections": [
      {
        "code": "/* Change border-radius for most elements: */\n\n:root {\n    --border-radius: 0px;\n    --yt-img-border-radius: var(--border-radius) !important;\n    --paper-menu-button-content-border-radius: var(--border-radius) !important;\n}\n\n/** Search button in nav, rounded on right */\nytd-searchbox[desktop-searchbar-style=rounded_corner_borders_light_btn] #search-icon-legacy.ytd-searchbox,\nytd-searchbox[desktop-searchbar-style=rounded_corner_autofocus] #search-icon-legacy.ytd-searchbox {\n    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;\n}\n\n/** Nav search input, rounded on left */\nytd-searchbox[desktop-searchbar-style=rounded_corner_borders_light_btn] #container.ytd-searchbox,\nytd-searchbox[desktop-searchbar-style=rounded_corner_autofocus] #container.ytd-searchbox {\n    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;\n}\n\n/** Playlist container */\nytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer,\n\n/* Thumbnails */\nytd-thumbnail[size=medium] a.ytd-thumbnail, ytd-thumbnail[size=medium]:before,\nytd-thumbnail[size=large] a.ytd-thumbnail, ytd-thumbnail[size=large]:before,\nytd-playlist-thumbnail[size=medium] a.ytd-playlist-thumbnail,\nytd-playlist-thumbnail[size=medium]:before,\nytd-ghost-grid-renderer[rounded-container] .rich-thumbnail.ytd-ghost-grid-renderer,\n\n/* Selecting a playlist / channel on left */\nytd-guide-entry-renderer[guide-refresh],\nytd-mini-guide-entry-renderer[guide-refresh],\nytd-guide-entry-renderer[guide-refresh] yt-interaction.ytd-guide-entry-renderer,\nytd-guide-entry-renderer[guide-refresh] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover,\nytd-guide-entry-renderer[guide-refresh] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:focus,\n\n/* Description */\nytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata,\nyt-interaction.rounded-large .fill.yt-interaction,\nyt-interaction.rounded-large .stroke.yt-interaction,\n\n/* Cards for games / category */\nytd-rich-metadata-renderer[rounded],\n\n/* Popups */\nytd-menu-popup-renderer[sheets-refresh],\n.ytp-settings-menu.ytp-rounded-menu,\n.ytp-screen-mode-menu.ytp-rounded-menu,\nytd-multi-page-menu-renderer[sheets-refresh],\n.dropdown-content.tp-yt-paper-menu-button,\nyt-dropdown-menu[rounded-container],\nyt-dropdown-menu[modern-dialogs] #menu.yt-dropdown-menu,\nytd-menu-popup-renderer[sheets-refresh],\n\n/* Playlist video */\nytd-playlist-video-renderer[amsterdam],\n\n/* Modal */\ntp-yt-paper-dialog[modern],\n\n/* Playlist page side */\n.immersive-header-container.ytd-playlist-header-renderer,\n.image-wrapper.ytd-hero-playlist-thumbnail-renderer,\n\n/* Search results */\n.sbdd_b,\n\n/* Thread posts */\nytd-backstage-post-thread-renderer[rounded-container],\n\n/* Live chat */\nytd-live-chat-frame[rounded-container],\nytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,\n\n/* Buttons */\n.yt-spec-touch-feedback-shape,\n.yt-spec-button-shape-next--size-m,\n\n/* Clip panel */\nytd-engagement-panel-section-list-renderer[modern-panels],\n\n/* Share URL */\nyt-copy-link-renderer[rounded-container] #bar.yt-copy-link-renderer {\n    border-radius: var(--border-radius) !important;\n}\n\n/* Miniplayer */\n.ytp-player-minimized.ytp-rounded-miniplayer .html5-main-video,\n.ytp-player-minimized.ytp-rounded-miniplayer .ytp-miniplayer-scrim,\n.ytp-player-minimized.ytp-rounded-miniplayer.html5-video-player {\n    border-radius: 0 !important;\n}\n\n/* Channel video player */\n.ytd-channel-video-player-renderer {\n    border-radius: 0 !important;\n}\n\n/* Community poll */\nytd-backstage-poll-renderer:not([is-image-poll]) .choice-info.ytd-backstage-poll-renderer {\n    border-radius: 0 !important; /* Used to be 4px */\n}\n",
        "domains": [
          "youtube.com",
          "youtube-nocookie.com"
        ]
      }
    ],
    "updateDate": 1667563164996,
    "_id": "552b976f-f779-45c3-83ae-4b797d887de2",
    "_rev": 1667563179920,
    "id": 3,
    "updatable": false
  }
]

NukeDukem · November 2, 2022, 1:29pm

Sorry for going off tangent.

I’m here only to remind that there is an alternative FOSS YT frontend that might need your help if you can code, or at least report a bug:

FurryJackman · November 3, 2022, 3:22pm

Unfortunately chasing nsig failures (the decryption key for unthrottled connections) like cat and mouse has been the experience of using third party clients. Also third party clients fail within minutes of streaming a continuous livestream.

Newpipe has been fighting nsig failures, age gate failures, and livestream HLS URL failures that it became basically unusable for me.

Streamlink always fails to recover after a livestream URL failure.

The immediate effect of a nsig failure is you are throttled to 5KB/s.

merry · November 3, 2022, 10:53pm

Whatever they’ve done has broken NewPipe’s channel scraping, so NewPipe is currently barely usable.

sisuboba · November 4, 2022, 1:28am

The new design is in my opinion one of the best they made in years, in dark mode it even features ambilight which is a great addition to youtube

KenPC · November 4, 2022, 2:17am

I hate the new design.

I was recently searching the LTT YouTube channel for the latest WAN show and it does not show up anywhere.

I had to literally type it into the search bar at the top to find it.

Little did I know that long videos are on a separate tab and that’s where I could have found it but that is just BS.

If you’re going to separate long videos like that then give me the fucking option to remove all of the shorts content from my home recommendations.

Google loves to make something and gradually make it worse.

diizzy · November 4, 2022, 7:23am

GitHub - TeamPiped/Piped: An alternative privacy-friendly YouTube frontend which is efficient by design. ?

Whizdumb · November 4, 2022, 9:10am

This is actually one of the things I dislike about the new update. It makes it look like there’s backlight bleed all over my monitor and it’s distracting. Much of the other stuff doesn’t really bother me but this one thing does. I actually started watching more videos in fullscreen just to get rid of this effect.

MilzyBee · November 4, 2022, 10:06am

that’s the new ambient mode, i like that setting a lot but you just have to tap the gear icon and turn that setting off if that effect isn’t good for you

Summary

Screenshot from 2022-11-04 21-03-53

FurryJackman · November 4, 2022, 11:58am

Have some additional CSS to unround the channel trailer:

/* Channel video player */
.ytd-channel-video-player-renderer {
    border-radius: 0 !important;
}

ChoplifterZ · November 19, 2022, 7:50pm

Latest update of chrome leaves this static line. It seems like it lines up w the bottom edge of the YT drop menu. It remains there as I scroll down (menu disappears) through the feed. I thought it was a screen artifact drom a drop or something but its only there on my yt home page as I scroll not in any vids.
Fwiw

bedHedd · November 24, 2022, 1:52am

Oh neat I tried it, but didn’t notice it on videos I watch

FurryJackman · November 24, 2022, 6:38pm

There’s a new userCSS for Stylus that just got released:

MilzyBee · November 24, 2022, 7:51pm

might be more for music or stuff like that but try it with dark mode and theatrical mode and you’ll see… its subtle and pretty