search

WesselKroos / youtube-ambilight

This browser extension adds ambient light to YouTube videos
MIT License
78 stars 8 forks source link

Slightly breaks the diclaimer #208

Closed avi12 closed 2 months ago

avi12 commented 6 months ago

Bug description

Slightly breaks the disclaimer

Steps to reproduce the behavior

https://www.youtube.com/watch?v=7Zau3jgUJWU https://www.youtube.com/watch?v=3eErk9PapoQ https://www.youtube.com/watch?v=twIIkXqBV1w

Browser

Microsoft Edge

Operating system

Windows

Extension version

2.38.0

The bug still happens in these conditions

Additional context and/or screenshots

https://github.com/WesselKroos/youtube-ambilight/assets/6422804/a71f5f09-5fdd-47e1-85c1-6b9ac047c993

WesselKroos commented 6 months ago

I don't see a disclaimer. Should I enable something in the YouTube settings to get it?

avi12 commented 6 months ago

No, it's video-dependent, often based on the title For example COVID-19 videos have a disclaimer in my country

WesselKroos commented 6 months ago

Maybe the Climate change disclaimer is only shown in some countries.

I do see the COVID-19 disclaimer, but that one doesn't have the unstyled "Context" header in your screenrecording: image

Can you share the html of the disclaimer? I can probably just copy and paste it below a video, so that I can style it.

avi12 commented 6 months ago

I will when I can, in a few hours

avi12 commented 6 months ago 
<div id="clarify-box" class="attached-message style-scope ytd-watch-flexy"><ytd-info-panel-container-renderer class="style-scope ytd-watch-flexy" rounded-container="" amsterdam-enabled="" has-title="" background="BLUE"><!--css-build:shady--><!--css-build:shady--><div class="header style-scope ytd-info-panel-container-renderer">
  <h2 class="header-left-items style-scope ytd-info-panel-container-renderer">
    <yt-icon class="header-icon style-scope ytd-info-panel-container-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 xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"><path d="M13 17H6v-2h7v2zm0-4H6v-2h7v2zm0-4H6V7h7v2zm5 8h-2V7h2v10zm2-13v16H4V4h16m1-1H3v18h18V3z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon>
    <yt-formatted-string class="style-scope ytd-info-panel-container-renderer">Context</yt-formatted-string>
  </h2>
  <div id="header-menu" class="style-scope ytd-info-panel-container-renderer"><ytd-menu-renderer class="style-scope ytd-info-panel-container-renderer" 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 xmlns="http://www.w3.org/2000/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 class="divider-container style-scope ytd-info-panel-container-renderer">
  <div class="divider-offset style-scope ytd-info-panel-container-renderer"></div>
  <div class="divider style-scope ytd-info-panel-container-renderer"></div>
  <div class="divider-offset style-scope ytd-info-panel-container-renderer"></div>
</div>
<div id="content" class="style-scope ytd-info-panel-container-renderer"><ytd-info-panel-content-renderer class="style-scope ytd-info-panel-container-renderer" rounded-container="" amsterdam-enabled="" skip-rounding-top="" truncate-paragraphs="" background="BLUE"><!--css-build:shady--><!--css-build:shady--><div class="content style-scope ytd-info-panel-content-renderer">
  <yt-icon class="inline-icon style-scope ytd-info-panel-content-renderer" disable-upgrade="" hidden="">
  </yt-icon>
  <div class="text-content style-scope ytd-info-panel-content-renderer">
    <div class="metadata-container style-scope ytd-info-panel-content-renderer" hidden="">
      <yt-formatted-string class="style-scope ytd-info-panel-content-renderer"><span dir="auto" class="bold style-scope yt-formatted-string" style-target="bold">United Nations</span></yt-formatted-string>
      <div class="published-time style-scope ytd-info-panel-content-renderer" hidden="">
        •
        <yt-formatted-string class="style-scope ytd-info-panel-content-renderer" is-empty=""><!--css-build:shady--><!--css-build:shady--><yt-attributed-string class="style-scope yt-formatted-string"></yt-attributed-string></yt-formatted-string>
      </div>
    </div>
    <a class="yt-simple-endpoint title-container style-scope ytd-info-panel-content-renderer" href="https://www.un.org/en/climatechange/what-is-climate-change">
      <yt-formatted-string class="style-scope ytd-info-panel-content-renderer">Climate change</yt-formatted-string>
      <yt-icon class="inline-link-icon style-scope ytd-info-panel-content-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 xmlns="http://www.w3.org/2000/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="M21 21H3V3h9v1H4v16h16v-8h1v9zM15 3v1h4.32l-8.03 8.03.71.71 8-8V9h1V3h-6z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon>
    </a>
    <div class="metadata-container style-scope ytd-info-panel-content-renderer">
      <yt-formatted-string class="style-scope ytd-info-panel-content-renderer"><span dir="auto" class="bold style-scope yt-formatted-string" style-target="bold">United Nations</span></yt-formatted-string>
      <div class="published-time style-scope ytd-info-panel-content-renderer" hidden="">
        •
        <yt-formatted-string class="style-scope ytd-info-panel-content-renderer" is-empty=""><!--css-build:shady--><!--css-build:shady--><yt-attributed-string class="style-scope yt-formatted-string"></yt-attributed-string></yt-formatted-string>
      </div>
    </div>
    <div class="paragraphs style-scope ytd-info-panel-content-renderer">

        <div class="style-scope ytd-info-panel-content-renderer">
          <yt-formatted-string class="paragraph style-scope ytd-info-panel-content-renderer">Climate change refers to long-term shifts in temperatures and weather patterns, mainly caused by human activities, especially the burning of fossil fuels.</yt-formatted-string>
          <div class="inline-source style-scope ytd-info-panel-content-renderer" hidden="">
            <yt-formatted-string force-default-style="" class="style-scope ytd-info-panel-content-renderer" is-empty=""><!--css-build:shady--><!--css-build:shady--><yt-attributed-string class="style-scope yt-formatted-string"></yt-attributed-string></yt-formatted-string>
            <yt-icon class="inline-link-icon style-scope ytd-info-panel-content-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 xmlns="http://www.w3.org/2000/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="M21 21H3V3h9v1H4v16h16v-8h1v9zM15 3v1h4.32l-8.03 8.03.71.71 8-8V9h1V3h-6z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon>
          </div>
        </div>
      <dom-repeat class="style-scope ytd-info-panel-content-renderer"><template is="dom-repeat"></template></dom-repeat>
      <dom-repeat class="style-scope ytd-info-panel-content-renderer"><template is="dom-repeat"></template></dom-repeat>
      <div class="disclaimer-container style-scope ytd-info-panel-content-renderer" hidden="">
        <a class="yt-simple-endpoint style-scope ytd-info-panel-content-renderer" target="_blank" href="https://www.un.org/en/climatechange/what-is-climate-change">
          <yt-formatted-string class="disclaimer style-scope ytd-info-panel-content-renderer" is-empty=""><!--css-build:shady--><!--css-build:shady--><yt-attributed-string class="style-scope yt-formatted-string"></yt-attributed-string></yt-formatted-string>
          <yt-icon class="inline-link-icon inline-disclaimer-icon style-scope ytd-info-panel-content-renderer" disable-upgrade="" hidden="">
          </yt-icon>
        </a>
      </div>
    </div>
  </div>
  <yt-img-shadow class="thumbnail style-scope ytd-info-panel-content-renderer" object-fit="COVER" disable-upgrade="" hidden="">
  </yt-img-shadow>
</div>
<div id="menu" class="style-scope ytd-info-panel-content-renderer"></div>
</ytd-info-panel-content-renderer></div>
</ytd-info-panel-container-renderer></div>
WesselKroos commented 6 months ago

Does this style block make it look correct?

<style>
html[data-ambientlight-enabled=true] ytd-info-panel-container-renderer .header {
  background: none !important;
}
html[data-ambientlight-enabled=true] ytd-info-panel-container-renderer .divider-offset {
  border-color: var(--yt-spec-outline) !important;
}
html[data-ambientlight-enabled=true] ytd-info-panel-container-renderer .header,
html[data-ambientlight-enabled=true] ytd-info-panel-container-renderer .content {
  border: 1px solid var(--yt-spec-outline) !important;
}
html[data-ambientlight-enabled=true] ytd-info-panel-container-renderer .header {
  border-bottom-style: none !important;
}
html[data-ambientlight-enabled=true] ytd-info-panel-container-renderer .content {
  border-top-style: none !important;
}
</style>
avi12 commented 6 months ago

image