ajayyy / DeArrow

Crowdsourcing better titles and thumbnails on YouTube
https://dearrow.ajay.app
GNU General Public License v3.0
1.41k stars 38 forks source link

When thumbnail replacement is disabled, every thumbnail is replaced by a gray box #137

Open megat69 opened 1 year ago

megat69 commented 1 year ago

As the title says ! Unless there is a submission for the video, the thumbnail will disappear.

I think this screenshot will speak for itself. image

As for my settings :

Hope this helps, thank you again for your time :)

ajayyy commented 1 year ago

Can you go to options -> misc -> copy debug info

What other extensions do you have installed?

megat69 commented 1 year ago

As for other extensions... Too many, but none that should be conflicting with DeArrow. Maybe ImprovedTube tho !

And for the debug info... Might need its other issue, but absolutely NOTHING gets copies to my clipboard. I disabled some stuff and tried again, but nothing gets copied.

This error gets thrown when I try to copy the debug info however : image

ajayyy commented 1 year ago

ah yep, I can reproduce that issue. Can you screenshot each option page instead?

megat69 commented 1 year ago

Well sure, but everything here is in French, soooo... Would be great if I could change the language actually 😅

image image image

ajayyy commented 1 year ago

I'm not able to reproduce this unfortunately. Is this something you consistently see?

megat69 commented 1 year ago

Absolutely, every time I load/refresh the page with the extension enabled !

kevinrenskers commented 1 year ago

For me every video below the first row has gray boxes instead of thumbnails.

Screenshot 2023-09-03 at 22 04 09

Sadly it makes the extension kind of unusable.

Settings:

Screenshot 2023-09-03 at 22 04 44

ajayyy commented 1 year ago

@kevinrenskers could you open inspect element, right click the body element, click copy and send it here or via email (dev @ ajay.app)

Also, have you refreshed since installing?

kevinrenskers commented 1 year ago

The whole body element? That is a looooooot of HTML. I've copied one video element first, is that enough?

<ytd-rich-item-renderer class="style-scope ytd-rich-grid-row" items-per-row="4"><!--css-build:shady--><!--css_build_mark:video.youtube.src.web.polymer.main_desktop.ui.renderers.home.ytd_rich_item_renderer.ytd.rich.item.renderer.css.js--><style is-scoped="">ytd-rich-item-renderer {position: relative;margin-left: calc(var(--ytd-rich-grid-item-margin)/2);margin-right: calc(var(--ytd-rich-grid-item-margin)/2);margin-bottom: 40px;width: calc(100%/var(--ytd-rich-grid-items-per-row) - var(--ytd-rich-grid-item-margin) - 0.01px);} ytd-rich-item-renderer[reduced-bottom-margin] {margin-bottom: 20px;} ytd-rich-item-renderer[is-slim-grid]:first-of-type {margin-left: 0;} ytd-rich-item-renderer[is-slim-grid]:last-of-type {margin-right: 0;} ytd-rich-item-renderer[is-compact-grid] {margin-left: calc(var(--ytd-rich-grid-compact-item-margin)/2);margin-right: calc(var(--ytd-rich-grid-compact-item-margin)/2);margin-bottom: 24px;} ytd-rich-item-renderer[is-shorts-grid] {margin-left: calc(var(--ytd-rich-grid-shorts-item-margin)/2);margin-right: calc(var(--ytd-rich-grid-shorts-item-margin)/2);margin-bottom: var(--ytd-rich-grid-shorts-item-margin);} ytd-rich-item-renderer[is-shorts-grid]:first-of-type {margin-left: 0;} ytd-rich-item-renderer[is-shorts-grid]:last-of-type {margin-right: 0;} ytd-rich-item-renderer[is-post] {width: calc(100%/var(--ytd-rich-grid-posts-per-row) - var(--ytd-rich-grid-item-margin) - 0.01px);} ytd-rich-item-renderer[is-slim-media] {width: calc(100%/var(--ytd-rich-grid-slim-items-per-row) - var(--ytd-rich-grid-item-margin) - 0.01px);} ytd-rich-item-renderer[is-compact-grid] {width: calc(100%/var(--ytd-rich-grid-slim-items-per-row) - var(--ytd-rich-grid-compact-item-margin) - 0.01px);} ytd-rich-item-renderer[is-shorts-grid][is-slim-media] {width: calc(100%/var(--ytd-rich-grid-slim-items-per-row) - var(--ytd-rich-grid-shorts-item-margin) - 0.01px);} ytd-rich-item-renderer[is-game-card-shelf] {width: calc(100%/var(--ytd-rich-grid-game-cards-per-row) - var(--ytd-rich-grid-item-margin) - 0.01px);} ytd-rich-item-renderer[is-link-card-shelf] {width: calc(50% - var(--ytd-rich-grid-item-margin) - 0.01px);} ytd-rich-item-renderer[is-link-card-shelf][items-per-row="1"],ytd-rich-item-renderer[is-link-card-shelf][items-per-row="2"] {width: calc(100% - var(--ytd-rich-grid-item-margin) - 0.01px);} ytd-rich-item-renderer[is-expand-on-hover-card-shelf] {width: calc(100%/var(--ytd-rich-grid-items-per-row) - var(--ytd-rich-grid-item-margin) - 0.01px);} ytd-rich-item-renderer[is-expand-on-hover-card-shelf][items-per-row="1"][is-shelf-item] {width: calc(100% - var(--ytd-rich-grid-item-margin) - 0.01px);} ytd-rich-item-renderer[is-expand-on-hover-card-shelf][items-per-row="2"][is-shelf-item] {width: calc(100%/min(var(--ytd-rich-shelf-items-count),2) - var(--ytd-rich-grid-item-margin) - 0.01px);} ytd-rich-item-renderer[is-expand-on-hover-card-shelf][is-shelf-item] {width: calc(100%/var(--ytd-rich-shelf-items-count) - var(--ytd-rich-grid-item-margin) - 0.01px);} ytd-rich-item-renderer[contains-lumiere-posters] {width: calc(100%/var(--ytd-rich-grid-slim-items-per-row) * 2 - var(--ytd-rich-grid-item-margin) - 0.01px);} #content.ytd-rich-item-renderer {height: 100%;display: flexbox;display: flex;justify-content: center;} ytd-rich-item-renderer[is-shorts-grid][is-reel-item-style-avatar-circle] #content.ytd-rich-item-renderer {margin-bottom: 16px;} #content.ytd-rich-item-renderer ytd-post-renderer.ytd-rich-item-renderer,#content.ytd-rich-item-renderer ytd-shared-post-renderer.ytd-rich-item-renderer,#content.ytd-rich-item-renderer ytd-mini-game-card-view-model.ytd-rich-item-renderer {max-width: 100%;width: 100%;overflow: hidden;}</style><!--css-build:shady--><!--css_build_scope:ytd-rich-item-renderer--><!--css_build_styles:video.youtube.src.web.polymer.shared.ui.styles.yt_base_styles.yt.base.styles.css.js,video.youtube.src.web.polymer.main_desktop.ui.renderers.home.ytd_rich_item_renderer.ytd.rich.item.renderer.css.js--><div id="content" class="style-scope ytd-rich-item-renderer"><ytd-rich-grid-media class="style-scope ytd-rich-item-renderer" lockup="true"><!--css-build:shady--><!--css_build_mark:video.youtube.src.web.polymer.main_desktop.ui.renderers.home.ytd_rich_grid_media.ytd.rich.grid.media.css.js--><style is-scoped="">html.ytd-rich-grid-media[system-icons] {--yt-spec-icon-active-other: #030303;--yt-spec-icon-inactive: #030303;--yt-spec-icon-disabled: #909090;--yt-spec-brand-icon-active: #030303;--yt-spec-brand-icon-inactive: #030303;--yt-button-icon-button-text-color: var(--yt-spec-text-primary);} html.ytd-rich-grid-media[system-icons][dark],html.ytd-rich-grid-media[system-icons] .ytd-rich-grid-media[dark] {--yt-spec-icon-inactive: #fff;--yt-spec-icon-disabled: #717171;--yt-spec-brand-icon-inactive: #fff;} html.ytd-rich-grid-media,.ytd-rich-grid-media[light] {--yt-spec-base-background: #fff;--yt-spec-raised-background: #fff;--yt-spec-menu-background: #fff;--yt-spec-inverted-background: #0f0f0f;--yt-spec-additive-background: rgba(0, 0, 0, 0.05);--yt-spec-outline: rgba(0, 0, 0, 0.1);--yt-spec-shadow: rgba(0, 0, 0, 0.25);--yt-spec-text-primary: #030303;--yt-spec-text-primary-inverse: #fff;--yt-spec-text-secondary: #606060;--yt-spec-text-disabled: #909090;--yt-spec-call-to-action: #065fd4;--yt-spec-call-to-action-inverse: #3ea6ff;--yt-spec-suggested-action: #def1ff;--yt-spec-suggested-action-inverse: #263850;--yt-spec-icon-active-other: #606060;--yt-spec-icon-inactive: #909090;--yt-spec-icon-disabled: #ccc;--yt-spec-button-chip-background-hover: rgba(0, 0, 0, 0.1);--yt-spec-touch-response: #000;--yt-spec-touch-response-inverse: #fff;--yt-spec-brand-icon-active: #f00;--yt-spec-brand-icon-inactive: #606060;--yt-spec-brand-button-background: #c00;--yt-spec-brand-link-text: #c00;--yt-spec-wordmark-text: #212121;--yt-spec-error-indicator: #990412;--yt-spec-themed-blue: #065fd4;--yt-spec-themed-green: #107516;--yt-spec-ad-indicator: #00716c;--yt-spec-themed-overlay-background: rgba(255, 255, 255, 0.7);--yt-spec-commerce-badge-background: #deffde;--yt-spec-static-brand-red: #f00;--yt-spec-static-brand-white: #fff;--yt-spec-static-brand-black: #212121;--yt-spec-static-clear-color: rgba(255, 255, 255, 0);--yt-spec-static-clear-black: rgba(0, 0, 0, 0);--yt-spec-static-ad-yellow: #fbc02d;--yt-spec-static-grey: #606060;--yt-spec-static-overlay-background-solid: #000;--yt-spec-static-overlay-background-heavy: rgba(0, 0, 0, 0.8);--yt-spec-static-overlay-background-medium: rgba(0, 0, 0, 0.6);--yt-spec-static-overlay-background-medium-light: rgba(0, 0, 0, 0.3);--yt-spec-static-overlay-background-light: rgba(0, 0, 0, 0.1);--yt-spec-static-overlay-text-primary: #fff;--yt-spec-static-overlay-text-primary-inverse: #030303;--yt-spec-static-overlay-text-secondary: rgba(255, 255, 255, 0.7);--yt-spec-static-overlay-text-disabled: rgba(255, 255, 255, 0.3);--yt-spec-static-overlay-call-to-action: #3ea6ff;--yt-spec-static-overlay-icon-active-other: #fff;--yt-spec-static-overlay-icon-inactive: rgba(255, 255, 255, 0.7);--yt-spec-static-overlay-icon-disabled: rgba(255, 255, 255, 0.3);--yt-spec-static-overlay-button-secondary: rgba(255, 255, 255, 0.1);--yt-spec-static-overlay-button-primary: rgba(255, 255, 255, 0.3);--yt-spec-static-overlay-touch-response: #fff;--yt-spec-static-overlay-touch-response-inverse: #000;--yt-spec-static-overlay-background-brand: rgba(204, 0, 0, 0.9);--yt-spec-assistive-feed-vibrant-gradient-1: #007a65;--yt-spec-assistive-feed-vibrant-gradient-2: #7f0e7f;--yt-spec-assistive-feed-vibrant-gradient-3: #ff8983;--yt-spec-assistive-feed-themed-gradient-1: #d4fff8;--yt-spec-assistive-feed-themed-gradient-2: #ffdeff;--yt-spec-assistive-feed-themed-gradient-3: #ffe6e6;--yt-spec-brand-background-solid: #fff;--yt-spec-brand-background-primary: rgba(255, 255, 255, 0.98);--yt-spec-brand-background-secondary: rgba(255, 255, 255, 0.95);--yt-spec-general-background-a: #f9f9f9;--yt-spec-general-background-b: #f1f1f1;--yt-spec-general-background-c: #e9e9e9;--yt-spec-error-background: #181818;--yt-spec-10-percent-layer: rgba(0, 0, 0, 0.1);--yt-spec-snackbar-background: #212121;--yt-spec-snackbar-background-updated: #181818;--yt-spec-badge-chip-background: rgba(0, 0, 0, 0.05);--yt-spec-verified-badge-background: rgba(0, 0, 0, 0.15);--yt-spec-call-to-action-faded: rgba(6, 95, 212, 0.3);--yt-spec-call-to-action-hover: #0551b4;--yt-spec-brand-button-background-hover: #990412;--yt-spec-brand-link-text-faded: rgba(204, 0, 0, 0.3);--yt-spec-filled-button-focus-outline: rgba(0, 0, 0, 0.6);--yt-spec-static-overlay-button-hover: rgba(255, 255, 255, 0.5);--yt-spec-mono-filled-hover: #272727;--yt-spec-commerce-filled-hover: #0556bf;--yt-spec-mono-tonal-hover: rgba(0, 0, 0, 0.1);--yt-spec-commerce-tonal-hover: #dadfe6;--yt-spec-static-overlay-filled-hover: #e6e6e6;--yt-spec-static-overlay-tonal-hover: rgba(255, 255, 255, 0.2);--yt-spec-discover-red: #c00;--yt-spec-discover-green: #007f1b;--yt-spec-discover-blue: #005cff;--yt-spec-filled-button-text: #fff;--yt-spec-paper-tab-ink: rgba(0, 0, 0, 0.3);--yt-spec-selected-nav-text: #c00;} html.ytd-rich-grid-media[darker-dark-theme],.ytd-rich-grid-media[darker-dark-theme] .ytd-rich-grid-media[light] {--yt-spec-text-primary: #0f0f0f;--yt-spec-text-primary-inverse: #fff;} html.ytd-rich-grid-media[dark],.ytd-rich-grid-media[dark] {--yt-spec-base-background: #0f0f0f;--yt-spec-raised-background: #212121;--yt-spec-menu-background: #282828;--yt-spec-inverted-background: #f1f1f1;--yt-spec-additive-background: rgba(255, 255, 255, 0.1);--yt-spec-outline: rgba(255, 255, 255, 0.2);--yt-spec-shadow: rgba(0, 0, 0, 0.25);--yt-spec-text-primary: #fff;--yt-spec-text-secondary: #aaa;--yt-spec-text-disabled: #717171;--yt-spec-text-primary-inverse: #030303;--yt-spec-call-to-action: #3ea6ff;--yt-spec-call-to-action-inverse: #065fd4;--yt-spec-suggested-action: #263850;--yt-spec-suggested-action-inverse: #def1ff;--yt-spec-icon-active-other: #fff;--yt-spec-icon-inactive: #909090;--yt-spec-icon-disabled: #606060;--yt-spec-button-chip-background-hover: rgba(255, 255, 255, 0.2);--yt-spec-touch-response: #fff;--yt-spec-touch-response-inverse: #000;--yt-spec-brand-icon-active: #fff;--yt-spec-brand-icon-inactive: #909090;--yt-spec-brand-button-background: #c00;--yt-spec-brand-link-text: #ff4e45;--yt-spec-wordmark-text: #fff;--yt-spec-error-indicator: #ff8983;--yt-spec-themed-blue: #3ea6ff;--yt-spec-themed-green: #2ba640;--yt-spec-ad-indicator: #00aaa7;--yt-spec-themed-overlay-background: rgba(0, 0, 0, 0.8);--yt-spec-commerce-badge-background: #002d08;--yt-spec-static-brand-red: #f00;--yt-spec-static-brand-white: #fff;--yt-spec-static-brand-black: #212121;--yt-spec-static-clear-color: rgba(255, 255, 255, 0);--yt-spec-static-clear-black: rgba(0, 0, 0, 0);--yt-spec-static-ad-yellow: #fbc02d;--yt-spec-static-grey: #606060;--yt-spec-static-overlay-background-solid: #000;--yt-spec-static-overlay-background-heavy: rgba(0, 0, 0, 0.8);--yt-spec-static-overlay-background-medium: rgba(0, 0, 0, 0.6);--yt-spec-static-overlay-background-medium-light: rgba(0, 0, 0, 0.3);--yt-spec-static-overlay-background-light: rgba(0, 0, 0, 0.1);--yt-spec-static-overlay-text-primary: #fff;--yt-spec-static-overlay-text-primary-inverse: #030303;--yt-spec-static-overlay-text-secondary: rgba(255, 255, 255, 0.7);--yt-spec-static-overlay-text-disabled: rgba(255, 255, 255, 0.3);--yt-spec-static-overlay-call-to-action: #3ea6ff;--yt-spec-static-overlay-icon-active-other: #fff;--yt-spec-static-overlay-icon-inactive: rgba(255, 255, 255, 0.7);--yt-spec-static-overlay-icon-disabled: rgba(255, 255, 255, 0.3);--yt-spec-static-overlay-button-primary: rgba(255, 255, 255, 0.3);--yt-spec-static-overlay-button-secondary: rgba(255, 255, 255, 0.1);--yt-spec-static-overlay-touch-response: #fff;--yt-spec-static-overlay-touch-response-inverse: #000;--yt-spec-static-overlay-background-brand: rgba(204, 0, 0, 0.9);--yt-spec-assistive-feed-themed-gradient-1: #005446;--yt-spec-assistive-feed-themed-gradient-2: #39003f;--yt-spec-assistive-feed-themed-gradient-3: #590000;--yt-spec-discover-red: #ff4e45;--yt-spec-discover-green: #a4ffa4;--yt-spec-discover-blue: #6ea2ff;--yt-spec-brand-background-solid: #212121;--yt-spec-brand-background-primary: rgba(33, 33, 33, 0.98);--yt-spec-brand-background-secondary: rgba(33, 33, 33, 0.95);--yt-spec-general-background-a: #181818;--yt-spec-general-background-b: #0f0f0f;--yt-spec-general-background-c: #030303;--yt-spec-error-background: #f9f9f9;--yt-spec-10-percent-layer: rgba(255, 255, 255, 0.1);--yt-spec-snackbar-background: #030303;--yt-spec-snackbar-background-updated: #f9f9f9;--yt-spec-badge-chip-background: rgba(255, 255, 255, 0.1);--yt-spec-verified-badge-background: rgba(255, 255, 255, 0.25);--yt-spec-call-to-action-faded: rgba(62, 166, 255, 0.3);--yt-spec-call-to-action-hover: #6ebcff;--yt-spec-brand-button-background-hover: #990412;--yt-spec-brand-link-text-faded: rgba(255, 78, 69, 0.3);--yt-spec-filled-button-focus-outline: rgba(255, 255, 255, 0.7);--yt-spec-static-overlay-button-hover: rgba(255, 255, 255, 0.5);--yt-spec-mono-filled-hover: #d9d9d9;--yt-spec-commerce-filled-hover: #65b8ff;--yt-spec-mono-tonal-hover: rgba(255, 255, 255, 0.2);--yt-spec-commerce-tonal-hover: #515561;--yt-spec-static-overlay-filled-hover: #e6e6e6;--yt-spec-static-overlay-tonal-hover: rgba(255, 255, 255, 0.2);--yt-spec-paper-tab-ink: rgba(255, 255, 255, 0.3);--yt-spec-filled-button-text: #030303;--yt-spec-selected-nav-text: #fff;} html.ytd-rich-grid-media[darker-dark-theme][dark],.ytd-rich-grid-media[darker-dark-theme] .ytd-rich-grid-media[dark] {--yt-spec-text-primary: #f1f1f1;--yt-spec-text-primary-inverse: #0f0f0f;} html.ytd-rich-grid-media[darker-dark-theme-deprecate],.ytd-rich-grid-media[darker-dark-theme-deprecate] {--yt-spec-brand-background-solid: var(--yt-spec-raised-background);--yt-spec-brand-background-primary: var(--yt-spec-raised-background);--yt-spec-brand-background-secondary: var(--yt-spec-raised-background);--yt-spec-general-background-a: var(--yt-spec-base-background);--yt-spec-general-background-b: var(--yt-spec-base-background);--yt-spec-general-background-c: var(--yt-spec-base-background);--yt-spec-error-background: var(--yt-spec-inverted-background);--yt-spec-badge-chip-background: var(--yt-spec-additive-background);--yt-spec-verified-badge-background: var(--yt-spec-additive-background);--yt-spec-10-percent-layer: var(--yt-spec-outline);--yt-spec-snackbar-background: var(--yt-spec-inverted-background);} ytd-rich-grid-media {--yt-button-compact-background-color: var(--yt-spec-10-percent-layer);--yt-button-compact-text-color: var(--yt-spec-text-secondary);width: 100%;margin: 0;display: block;max-width: var(--ytd-rich-grid-item-max-width);position: relative;} ytd-rich-grid-media[mini-mode] {max-width: var(--ytd-rich-grid-mini-item-max-width);} ytd-rich-grid-media:not(:hover) ytd-menu-renderer.ytd-rich-grid-media:not([menu-active]):not(:focus-within) {opacity: 0;} ytd-rich-grid-media[is-dismissed] #dismissible.ytd-rich-grid-media,ytd-rich-grid-media #dismissed.ytd-rich-grid-media {display: none;} ytd-rich-grid-media[is-dismissed] #dismissed.ytd-rich-grid-media {display: block;} ytd-rich-grid-media[modern-buttons] #view-more.ytd-rich-grid-media {text-transform: unset;} #dismissible.ytd-rich-grid-media {position: relative;height: 100%;display: flexbox;display: flex;flex-direction: column;} ytd-thumbnail.ytd-rich-grid-media,ytd-playlist-thumbnail.ytd-rich-grid-media {width: 100%;position: relative;} ytd-thumbnail.ytd-rich-grid-media:before,ytd-playlist-thumbnail.ytd-rich-grid-media:before {display: block;content: "";width: 100%;padding-top: 56.25%;background-color: var(--yt-spec-10-percent-layer);} #meta.ytd-rich-grid-media {overflow-x: hidden;padding-right: 24px;} #badges.ytd-rich-grid-media {margin-top: 8px;} #thumbnail-underlay.ytd-rich-grid-media {cursor: pointer;} #details.ytd-rich-grid-media {position: relative;cursor: pointer;margin: 0 12px;flex: auto;display: flexbox;display: flex;flex-direction: row;} @media(min-width:392px) {#details.ytd-rich-grid-media {margin: 0;}} #avatar-link.ytd-rich-grid-media {height: 36px;margin-top: 12px;margin-right: 12px;} #avatar.ytd-rich-grid-media {background-color: var(--yt-spec-10-percent-layer)!important;width: 36px;height: 36px;border-radius: 50%;background-color: transparent;overflow: hidden;} ytd-menu-renderer.ytd-rich-grid-media {position: absolute;top: 4px;right: -12px;} #dismissed.ytd-rich-grid-media {padding-bottom: 56.19%;border: 1px solid var(--yt-spec-10-percent-layer);border-radius: 12px;position: relative;} #dismissed.ytd-rich-grid-media:focus {outline: none;} #dismissed-content.ytd-rich-grid-media {box-sizing: border-box;padding: 8px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;} #video-title-link.ytd-rich-grid-media {display: block;} #video-title.ytd-rich-grid-media {color: var(--yt-spec-text-primary);font-family: "Roboto","Arial",sans-serif;font-size: 1.6rem;line-height: 2.2rem;font-weight: 500;overflow: hidden;display: block;max-height: 4.4rem;-webkit-line-clamp: 2;display: box;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space: normal;} ytd-rich-grid-media[mini-mode] #video-title.ytd-rich-grid-media {font-family: "Roboto","Arial",sans-serif;font-size: 1.4rem;line-height: 2rem;font-weight: 500;overflow: hidden;display: block;max-height: 4rem;-webkit-line-clamp: 2;display: box;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space: normal;} h3.ytd-rich-grid-media {color: var(--yt-spec-text-primary);margin: 12px 0 4px 0;} ytd-rich-grid-media[mini-mode] h3.ytd-rich-grid-media {margin-bottom: 6px;} #buttons.ytd-rich-grid-media>*.ytd-rich-grid-media {margin-top: 4px;} #dismissed-content.ytd-rich-grid-media {display: flexbox;display: flex;justify-content: center;align-items: center;} .title-badge.ytd-rich-grid-media,.video-badge.ytd-rich-grid-media {margin: 4px 4px 0 0;} .top-badge.ytd-rich-grid-media {margin: 4px 4px 2px 0;} #preview-loading-overlay.ytd-rich-grid-media {border-radius: 2px;position: absolute;top: 4px;color: var(--yt-spec-static-brand-white);left: 4px;background: var(--yt-spec-static-overlay-background-solid);padding-left: 8px;display: flexbox;display: flex;align-items: center;justify-content: center;font-family: "Roboto","Arial",sans-serif;font-size: 1.2rem;line-height: 1.8rem;font-weight: 400;} #preview-loading-overlay.ytd-rich-grid-media tp-yt-paper-spinner-lite.ytd-rich-grid-media {--paper-spinner-color: var(--yt-spec-static-brand-white);width: 12px;height: 12px;} #preview-loading-overlay.ytd-rich-grid-media span.ytd-rich-grid-media {padding: 4px 8px;} #view-more.ytd-rich-grid-media {display: block;margin-top: 4px;--yt-endpoint-color: var(--yt-spec-text-secondary);--yt-endpoint-visited-color: var(--yt-spec-text-secondary);--yt-endpoint-color: var(--yt-spec-text-secondary);--yt-endpoint-visited-color: var(--yt-spec-text-secondary);color: var(--yt-spec-text-secondary);font-family: "Roboto","Arial",sans-serif;font-size: 1.2rem;line-height: 1.8rem;font-weight: 500;} #attached-survey.ytd-rich-grid-media {display: block;width: 100%;}</style><!--css-build:shady--><!--css_build_scope:ytd-rich-grid-media--><!--css_build_styles:video.youtube.src.web.polymer.shared.ui.styles.yt_base_styles.yt.base.styles.css.js,video.youtube.src.web.polymer.main_desktop.ui.renderers.home.ytd_rich_grid_media.ytd.rich.grid.media.css.js--><div id="dismissible" class="style-scope ytd-rich-grid-media"><div id="thumbnail" class="style-scope ytd-rich-grid-media"><ytd-thumbnail rich-grid-thumbnail="" use-hovered-property="" width="9999" class="style-scope ytd-rich-grid-media" size="large" loaded=""><!--css-build:shady--><!--css-build:shady--><a id="thumbnail" class="yt-simple-endpoint inline-block style-scope ytd-thumbnail" aria-hidden="true" tabindex="-1" rel="null" href="/watch?v=HM05mJaCGYs">
  <yt-image alt="" ftl-eligible="" notify-on-loaded="" notify-on-unloaded="" class="style-scope ytd-thumbnail"><img alt="" style="background-color: transparent;" class="yt-core-image--fill-parent-height yt-core-image--fill-parent-width yt-core-image yt-core-image--content-mode-scale-aspect-fill yt-core-image--loaded" src="https://i.ytimg.com/vi/HM05mJaCGYs/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&amp;rs=AOn4CLBQW7etGGvU_CqGaXKKzZE03JlP5g"></yt-image>

  <div id="overlays" class="style-scope ytd-thumbnail"><ytd-thumbnail-overlay-time-status-renderer class="style-scope ytd-thumbnail" overlay-style="DEFAULT"><!--css-build:shady--><!--css-build:shady--><ytd-badge-supported-renderer is-thumbnail-badge="" class="style-scope ytd-thumbnail-overlay-time-status-renderer" system-icons=""><!--css-build:shady--><!--css-build:shady--><dom-repeat id="repeat" as="badge" class="style-scope ytd-badge-supported-renderer"><template></template></dom-repeat></ytd-badge-supported-renderer><div id="time-status" class="style-scope ytd-thumbnail-overlay-time-status-renderer"><yt-icon size="16" class="style-scope ytd-thumbnail-overlay-time-status-renderer" disable-upgrade="" hidden=""></yt-icon><span id="text" class="style-scope ytd-thumbnail-overlay-time-status-renderer" aria-label="30 minutes, 36 seconds">
    30:36
  </span></div></ytd-thumbnail-overlay-time-status-renderer><ytd-thumbnail-overlay-now-playing-renderer class="style-scope ytd-thumbnail"><!--css-build:shady--><!--css-build:shady--><span id="overlay-text" class="style-scope ytd-thumbnail-overlay-now-playing-renderer">Now playing</span>
<ytd-thumbnail-overlay-equalizer class="style-scope ytd-thumbnail-overlay-now-playing-renderer"><!--css-build:shady--><!--css-build:shady--><svg xmlns="http://www.w3.org/2000/svg" id="equalizer" viewBox="0 0 55 95" class="style-scope ytd-thumbnail-overlay-equalizer">
  <g class="style-scope ytd-thumbnail-overlay-equalizer">
    <rect class="bar style-scope ytd-thumbnail-overlay-equalizer" x="0"></rect>
    <rect class="bar style-scope ytd-thumbnail-overlay-equalizer" x="20"></rect>
    <rect class="bar style-scope ytd-thumbnail-overlay-equalizer" x="40"></rect>
  </g>
</svg>
</ytd-thumbnail-overlay-equalizer>
</ytd-thumbnail-overlay-now-playing-renderer></div>
  <div id="mouseover-overlay" class="style-scope ytd-thumbnail"></div>
  <div id="hover-overlays" class="style-scope ytd-thumbnail"></div>
</a>
</ytd-thumbnail><ytd-playlist-thumbnail is-double-stack="" use-hovered-property="" width="9999" class="style-scope ytd-rich-grid-media" thumbnail-size="large" size="large" hidden=""><!--css-build:shady--><!--css-build:shady--><yt-collections-stack class="collections-stack-wiz style-scope ytd-playlist-thumbnail" hidden="true"><div><div class="collections-stack-wiz__collection-stack2"></div><div class="collections-stack-wiz__collection-stack1 collections-stack-wiz__collection-stack1--large"></div></div></yt-collections-stack>
<a id="thumbnail" class="yt-simple-endpoint style-scope ytd-playlist-thumbnail" tabindex="-1" aria-hidden="true" href="/watch?v=HM05mJaCGYs">
  <div id="playlist-thumbnails" class="style-scope ytd-playlist-thumbnail"></div>
  <yt-formatted-string id="length" class="style-scope ytd-playlist-thumbnail" aria-label="30 minutes, 36 seconds">30:36</yt-formatted-string>
  <div id="overlays" class="style-scope ytd-playlist-thumbnail"><ytd-thumbnail-overlay-time-status-renderer class="style-scope ytd-playlist-thumbnail" overlay-style="DEFAULT"><!--css-build:shady--><!--css-build:shady--><ytd-badge-supported-renderer is-thumbnail-badge="" class="style-scope ytd-thumbnail-overlay-time-status-renderer" system-icons=""><!--css-build:shady--><!--css-build:shady--><dom-repeat id="repeat" as="badge" class="style-scope ytd-badge-supported-renderer"><template></template></dom-repeat></ytd-badge-supported-renderer><div id="time-status" class="style-scope ytd-thumbnail-overlay-time-status-renderer"><yt-icon size="16" class="style-scope ytd-thumbnail-overlay-time-status-renderer" disable-upgrade="" hidden=""></yt-icon><span id="text" class="style-scope ytd-thumbnail-overlay-time-status-renderer" aria-label="30 minutes, 36 seconds">
    30:36
  </span></div></ytd-thumbnail-overlay-time-status-renderer><ytd-thumbnail-overlay-now-playing-renderer class="style-scope ytd-playlist-thumbnail"><!--css-build:shady--><!--css-build:shady--><span id="overlay-text" class="style-scope ytd-thumbnail-overlay-now-playing-renderer">Now playing</span>
<ytd-thumbnail-overlay-equalizer class="style-scope ytd-thumbnail-overlay-now-playing-renderer"><!--css-build:shady--><!--css-build:shady--><svg xmlns="http://www.w3.org/2000/svg" id="equalizer" viewBox="0 0 55 95" class="style-scope ytd-thumbnail-overlay-equalizer">
  <g class="style-scope ytd-thumbnail-overlay-equalizer">
    <rect class="bar style-scope ytd-thumbnail-overlay-equalizer" x="0"></rect>
    <rect class="bar style-scope ytd-thumbnail-overlay-equalizer" x="20"></rect>
    <rect class="bar style-scope ytd-thumbnail-overlay-equalizer" x="40"></rect>
  </g>
</svg>
</ytd-thumbnail-overlay-equalizer>
</ytd-thumbnail-overlay-now-playing-renderer></div>
  <div id="hover-overlays" class="style-scope ytd-playlist-thumbnail"></div>
</a>
</ytd-playlist-thumbnail></div><div id="thumbnail-underlay" class="style-scope ytd-rich-grid-media" hidden=""></div><div id="details" class="style-scope ytd-rich-grid-media"><a id="avatar-link" class="yt-simple-endpoint style-scope ytd-rich-grid-media" tabindex="-1" title="nathanthepostman" href="/@nathanthepostman"><yt-img-shadow id="avatar" width="48" class="style-scope ytd-rich-grid-media no-transition" loaded="" style="background-color: transparent;"><!--css-build:shady--><!--css-build:shady--><img id="img" draggable="false" class="style-scope yt-img-shadow" alt="" width="48" src="https://yt3.ggpht.com/ytc/AOPolaTyq0qo-q_ZmeEsU_UgZ_5sv15HungLvVbJ82BvpJQ=s68-c-k-c0x00ffffff-no-rj"></yt-img-shadow></a><div id="meta" class="style-scope ytd-rich-grid-media"><h3 class="style-scope ytd-rich-grid-media"><ytd-badge-supported-renderer class="top-badge style-scope ytd-rich-grid-media" collection-truncate="" disable-upgrade="" hidden=""></ytd-badge-supported-renderer><a id="video-title-link" class="yt-simple-endpoint focus-on-expand style-scope ytd-rich-grid-media" aria-label="Voge 300 Rally - 2000 mile test - ride to the Alps by nathanthepostman 4 weeks ago 30 minutes 40,340 views" title="Voge 300 Rally - 2000 mile test - ride to the Alps" href="/watch?v=HM05mJaCGYs"><yt-formatted-string id="video-title" class="style-scope ytd-rich-grid-media" aria-label="Voge 300 Rally - 2000 mile test - ride to the Alps by nathanthepostman 4 weeks ago 30 minutes 40,340 views">Voge 300 Rally - 2000 mile test - ride to the Alps</yt-formatted-string></a></h3><ytd-video-meta-block class="grid style-scope ytd-rich-grid-media byline-separated" rich-meta="" amsterdam-post-mvp=""><!--css-build:shady--><!--css-build:shady-->
<div id="metadata" class="style-scope ytd-video-meta-block">
  <div id="byline-container" class="style-scope ytd-video-meta-block">
    <ytd-channel-name id="channel-name" class=" style-scope ytd-video-meta-block style-scope ytd-video-meta-block"><!--css-build:shady--><!--css-build:shady--><div id="container" class="style-scope ytd-channel-name">
  <div id="text-container" class="style-scope ytd-channel-name">
    <yt-formatted-string id="text" link-inherit-color="" title="nathanthepostman" class="style-scope ytd-channel-name complex-string" ellipsis-truncate="" ellipsis-truncate-styling="" has-link-only_=""><a class="yt-simple-endpoint style-scope yt-formatted-string" spellcheck="false" href="/@nathanthepostman" dir="auto">nathanthepostman</a></yt-formatted-string>
  </div>
  <tp-yt-paper-tooltip fit-to-visible-bounds="" class="style-scope ytd-channel-name" role="tooltip" tabindex="-1" style="inset: -52px auto auto 40.421875px;"><!--css-build:shady--><div id="tooltip" class="style-scope tp-yt-paper-tooltip hidden" style-target="tooltip">

    nathanthepostman

</div>
</tp-yt-paper-tooltip>
</div>
<ytd-badge-supported-renderer class="style-scope ytd-channel-name" disable-upgrade="" hidden="">
</ytd-badge-supported-renderer>
</ytd-channel-name>
    <div id="separator" class="style-scope ytd-video-meta-block">•</div>
    <yt-formatted-string id="video-info" class="style-scope ytd-video-meta-block" is-empty="" hidden=""><!--css-build:shady--><!--css-build:shady--><yt-attributed-string class="style-scope yt-formatted-string"></yt-attributed-string></yt-formatted-string>
  </div>
  <div id="metadata-line" class="style-scope ytd-video-meta-block">

    <ytd-badge-supported-renderer class="inline-metadata-badge style-scope ytd-video-meta-block" hidden="" system-icons=""><!--css-build:shady--><!--css-build:shady--><dom-repeat id="repeat" as="badge" class="style-scope ytd-badge-supported-renderer"><template></template></dom-repeat></ytd-badge-supported-renderer>
    <div id="separator" class="style-scope ytd-video-meta-block" hidden="">•</div>

      <span class="inline-metadata-item style-scope ytd-video-meta-block">40K views</span>

      <span class="inline-metadata-item style-scope ytd-video-meta-block">4 weeks ago</span>
    <dom-repeat strip-whitespace="" class="style-scope ytd-video-meta-block"><template></template></dom-repeat>
  </div>
</div>
<div id="additional-metadata-line" class="style-scope ytd-video-meta-block">
  <dom-repeat class="style-scope ytd-video-meta-block"><template></template></dom-repeat>
</div>

</ytd-video-meta-block><ytd-badge-supported-renderer class="video-badge style-scope ytd-rich-grid-media" disable-upgrade="" hidden=""></ytd-badge-supported-renderer><ytd-badge-supported-renderer class="title-badge style-scope ytd-rich-grid-media" disable-upgrade="" hidden=""></ytd-badge-supported-renderer><yt-formatted-string id="view-more" link-inherit-color="" class="style-scope ytd-rich-grid-media" is-empty="" hidden=""><!--css-build:shady--><!--css-build:shady--><yt-attributed-string class="style-scope yt-formatted-string"></yt-attributed-string></yt-formatted-string><div id="buttons" class="style-scope ytd-rich-grid-media"></div></div><div id="menu" class="style-scope ytd-rich-grid-media"><ytd-menu-renderer class="style-scope ytd-rich-grid-media" safe-area=""><!--css-build:shady--><!--css-build:shady--><div id="top-level-buttons-computed" class="top-level-buttons style-scope ytd-menu-renderer"></div><div id="flexible-item-buttons" class="style-scope ytd-menu-renderer"></div><yt-icon-button id="button" class="dropdown-trigger style-scope ytd-menu-renderer" style-target="button"><!--css-build:shady--><!--css-build:shady--><button id="button" class="style-scope yt-icon-button" aria-label="Action menu"><yt-icon class="style-scope ytd-menu-renderer"><!--css-build:shady--><!--css-build:shady--><yt-icon-shape class="style-scope yt-icon"><icon-shape class="yt-spec-icon-shape"><div style="width: 100%; height: 100%; fill: currentcolor;"><svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"><path d="M12 16.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zM10.5 12c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5zm0-6c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon></button><yt-interaction id="interaction" class="circular style-scope yt-icon-button"><!--css-build:shady--><!--css-build:shady--><div class="stroke style-scope yt-interaction"></div><div class="fill style-scope yt-interaction"></div></yt-interaction></yt-icon-button><yt-button-shape id="button-shape" version="modern" class="style-scope ytd-menu-renderer" disable-upgrade="" hidden=""></yt-button-shape></ytd-menu-renderer></div></div><div id="attached-survey" class="style-scope ytd-rich-grid-media"></div></div><div id="dismissed" class="style-scope ytd-rich-grid-media"><div id="dismissed-content" class="style-scope ytd-rich-grid-media"></div></div><yt-interaction id="interaction" class="extended style-scope ytd-rich-grid-media"><!--css-build:shady--><!--css-build:shady--><div class="stroke style-scope yt-interaction"></div><div class="fill style-scope yt-interaction"></div></yt-interaction></ytd-rich-grid-media></div>
</ytd-rich-item-renderer>

Screenshot 2023-09-03 at 23 19 25

kevinrenskers commented 1 year ago

Also, have you refreshed since installing?

I've loaded and refreshed the YouTube site plenty of times since installing the extension, yes. Refreshing the page almost always works and fills up the missing images. But next time I visit YouTube, same problem and I need to refresh again.

ajayyy commented 1 year ago

@kevinrenskers what are the other extensions you have installed?

Also, do you have any channel allowlists configured?

ajayyy commented 1 year ago

@kevinrenskers @megat69 can both of you check the console and send any errors

ajayyy commented 1 year ago

@megat69 can you try after deleting all your channel overrides and see if the issue still occurs? Also the HTML like kevin sent would be helpful

ajayyy commented 1 year ago

@kevinrenskers what happens if you are in this scenario (where only the top videos load), then you scroll the page until more videos load in. Do these videos have visible titles and thumbnails? Does this fix all of them?

kevinrenskers commented 1 year ago

@kevinrenskers what are the other extensions you have installed?

SponsorBlock, DuckDuckGo Privacy for Safari, Wipr.

Also, do you have any channel allowlists configured?

No

@kevinrenskers @megat69 can both of you check the console and send any errors

Screenshot 2023-09-04 at 11 02 16

@kevinrenskers what happens if you are in this scenario (where only the top videos load), then you scroll the page until more videos load in. Do these videos have visible titles and thumbnails? Does this fix all of them?

Scrolling down only loads videos with gray boxes.

megat69 commented 1 year ago

@megat69 can you try after deleting all your channel overrides and see if the issue still occurs? Also the HTML like kevin sent would be helpful

I just did. Now it works as intended. The problem is having a channel override.

ajayyy commented 1 year ago

I just did. Now it works as intended. The problem is having a channel override.

Ah, thanks.

I'm guessing that it is failing to load the video information then (so it doesn't know what channel the video is from). That's weird that it is happening only for you though, and consistently for almost every video.