search

WesselKroos / youtube-ambilight

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

Not always changing from dark to light #170

Closed avi12 closed 9 months ago

avi12 commented 1 year ago

Bug description

Sometimes I leave a YouTube have to be idle and when I return, the theme is set incorrectly

Steps to reproduce the behavior

  1. Open the video
  2. Switch to a different window
  3. Toggle the OS theme to the other one
  4. In some cases, the original theme will stay as-is

Browser

Microsoft Edge

Operating system

Windows

Extension version

2.37.24

The bug still happens in these conditions

Additional context and/or screenshots

No response

WesselKroos commented 1 year ago

I was unable to reproduce this while keeping the browser alive and hiding/minimizing browser tabs/windows. But I did find another theoretical user flow that could cause this. So I have added an extra check to the code that checks the theme when the page becomes visible.

Do you maybe have "restore open tabs from the previous browser session" enabled in your browser? If so, I think this could be happening when a user:

Is this what happend?

avi12 commented 1 year ago

Do you maybe have "restore open tabs from the previous browser session" enabled in your browser?

Yes, but I don't tend to close the browser windows unless Edge is slow or I happen to restart the computer

Is this what happened?

No

WesselKroos commented 1 year ago

Hmm ok. Theoretically my fix should also cover this issue. So I'll set this issue in the testing state, but I won't mark it as closed because I can't verify it.

Once the new version with the potential fix has been released, you can let me know if it happens again. And if it doesn't happen in that testperiod we can mark it as fixed and close it.

At what average frequency does this happen? Then we can extrapolate a reasonable testperiode from that frequency.

avi12 commented 1 year ago

After further trial and error, I found out that if a video has been open for long enough without focusing on its tab, returning to its tab will not trigger the extension to change to dark/light mode

WesselKroos commented 1 year ago

That sounds like the tab is being frozen by some energy/memory saving feature of the browser. Which means that my fix should cover your user flow as well.

How long do I at least need to keep the browser tab unfocused for it to be happening?

avi12 commented 1 year ago

That sounds like the tab is being frozen by some energy/memory saving feature of the browser.

Indeed

How long do I at least need to keep the browser tab unfocused for it to be happening?

No idea, you could probably ask on r/MicrosoftEdge

WesselKroos commented 1 year ago

The new version was released this week. Let me know when it still happens.

avi12 commented 10 months ago

I ran into a similar issue lately If the ambient effect is applied as the video loads up and then the theme changes mid-way, the Like button will retain the previous color (i.e. if the initial theme was light and then changed to dark, the Like button will stay light) Then, if I turn off the ambient effect while it's in a light theme, the action buttons will look: image

<ytd-menu-renderer class="style-scope ytd-watch-metadata" safe-area="" tonal-override="" has-items="2" has-flexible-items="">
  <plasmo-csui class="ytr-percentage"></plasmo-csui>
  <!--css-build:shady--><!--css-build:shady-->
  <div id="top-level-buttons-computed" class="top-level-buttons style-scope ytd-menu-renderer">
    <segmented-like-dislike-button-view-model class="YtSegmentedLikeDislikeButtonViewModelHost style-scope ytd-menu-renderer" button-renderer="true">
      <yt-smartimation class="smartimation smartimation--enable-masking">
        <div class="smartimation__content">
          <div class="YtSegmentedLikeDislikeButtonViewModelSegmentedButtonsWrapper">
            <like-button-view-model class="YtLikeButtonViewModelHost">
              <toggle-button-view-model style="">
                <button
                  class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading yt-spec-button-shape-next--segmented-start"
                  aria-label="like this video along with 434 other people"
                  title="Unlike"
                  style=""
                  aria-pressed="true"
                >
                  <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
                    <yt-icon class="undefined" style="">
                      <yt-animated-icon class="style-scope yt-icon" animated-icon-type="LIKE">
                        <!--css-build:shady--><!--css-build:shady-->
                        <ytd-lottie-player class="style-scope yt-animated-icon">
                          <lottie-component class="lottie-component">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 270" width="270" height="270" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);">
                              <defs>
                                <clipPath id="__lottie_element_125"><rect width="270" height="270" x="0" y="0"></rect></clipPath>
                                <clipPath id="__lottie_element_127"><path d="M0,0 L120,0 L120,120 L0,120z"></path></clipPath>
                                <clipPath id="__lottie_element_141"><path d="M0,0 L128,0 L128,128 L0,128z"></path></clipPath>
                              </defs>
                              <g clip-path="url(#__lottie_element_125)">
                                <g clip-path="url(#__lottie_element_141)" style="display: block;" transform="matrix(2.7880001068115234,0,0,2.7880001068115234,-48.0780029296875,-51.58800506591797)" opacity="1">
                                  <g style="display: block;" transform="matrix(0.4056888222694397,0.10870399326086044,-0.10870399326086044,0.4056888222694397,63.819969177246094,55.32201385498047)" opacity="1">
                                    <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                                      <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,78,69)" stroke-opacity="1" stroke-width="5" d="M0 0"></path>
                                    </g>
                                  </g>
                                  <g style="display: block;" transform="matrix(0.6260144710540771,0.13306348025798798,-0.13306348025798798,0.6260144710540771,63.75,70.5)" opacity="1">
                                    <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                                      <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(195,252,193)" stroke-opacity="1" stroke-width="3" d="M0 0"></path>
                                    </g>
                                  </g>
                                  <g style="display: none;" transform="matrix(1,0,0,1,91,46.25)" opacity="0.019681959398923823">
                                    <g opacity="1" transform="matrix(0.17499999701976776,-0.30310890078544617,0.30310890078544617,0.17499999701976776,-5.455959796905518,-3.1499998569488525)">
                                      <path
                                        fill="rgb(180,123,255)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(-0.17499999701976776,-0.30310890078544617,0.30310890078544617,-0.17499999701976776,-5.455959796905518,3.1499998569488525)">
                                      <path
                                        fill="rgb(180,123,255)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(-0.3499999940395355,0,0,-0.3499999940395355,0,6.299999713897705)">
                                      <path
                                        fill="rgb(180,123,255)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(-0.17499999701976776,0.30310890078544617,-0.30310890078544617,-0.17499999701976776,5.455959796905518,3.1499998569488525)">
                                      <path
                                        fill="rgb(180,123,255)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(0.17499999701976776,0.30310890078544617,-0.30310890078544617,0.17499999701976776,5.455959796905518,-3.1499998569488525)">
                                      <path
                                        fill="rgb(180,123,255)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(0.3499999940395355,0,0,0.3499999940395355,0,-6.299999713897705)">
                                      <path
                                        fill="rgb(180,123,255)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                  </g>
                                  <g style="display: block;" transform="matrix(0.6156615018844604,0.7880107760429382,-0.7880107760429382,0.6156615018844604,60.8013916015625,70.60517120361328)" opacity="1">
                                    <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                                      <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(195,252,193)" stroke-opacity="1" stroke-width="4" d="M0 0"></path>
                                    </g>
                                  </g>
                                  <g style="display: block;" transform="matrix(-0.3420201539993286,0.9396926164627075,-0.9396926164627075,-0.3420201539993286,57.86277770996094,63.6497688293457)" opacity="1">
                                    <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                                      <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,78,69)" stroke-opacity="1" stroke-width="4" d="M0 0"></path>
                                    </g>
                                  </g>
                                  <g style="display: none;" transform="matrix(1,0,0,1,39.875,92.75)" opacity="0.019528909028722268">
                                    <g opacity="1" transform="matrix(0.17499999701976776,-0.30310890078544617,0.30310890078544617,0.17499999701976776,-5.455959796905518,-3.1499998569488525)">
                                      <path
                                        fill="rgb(195,252,193)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(-0.17499999701976776,-0.30310890078544617,0.30310890078544617,-0.17499999701976776,-5.455959796905518,3.1499998569488525)">
                                      <path
                                        fill="rgb(195,252,193)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(-0.3499999940395355,0,0,-0.3499999940395355,0,6.299999713897705)">
                                      <path
                                        fill="rgb(195,252,193)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(-0.17499999701976776,0.30310890078544617,-0.30310890078544617,-0.17499999701976776,5.455959796905518,3.1499998569488525)">
                                      <path
                                        fill="rgb(195,252,193)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(0.17499999701976776,0.30310890078544617,-0.30310890078544617,0.17499999701976776,5.455959796905518,-3.1499998569488525)">
                                      <path
                                        fill="rgb(195,252,193)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(0.3499999940395355,0,0,0.3499999940395355,0,-6.299999713897705)">
                                      <path
                                        fill="rgb(195,252,193)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                  </g>
                                  <g style="display: block;" transform="matrix(-0.882947564125061,-0.4694715738296509,0.4694715738296509,-0.882947564125061,54.99470138549805,66.93231201171875)" opacity="1">
                                    <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                                      <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(180,123,255)" stroke-opacity="1" stroke-width="4" d="M0 0"></path>
                                    </g>
                                  </g>
                                  <g style="display: block;" transform="matrix(-0.24192190170288086,-0.9702957272529602,0.9702957272529602,-0.24192190170288086,65.31019592285156,68.61397552490234)" opacity="1">
                                    <g opacity="1" transform="matrix(1,0,0,1,-1,0)">
                                      <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(195,252,193)" stroke-opacity="1" stroke-width="3" d="M0 0"></path>
                                    </g>
                                  </g>
                                  <g style="display: none;" transform="matrix(1,0,0,1,36.0620002746582,47.1879997253418)" opacity="0.019528909028722268">
                                    <g opacity="1" transform="matrix(0.2681155502796173,-0.22497566044330597,0.22497566044330597,0.2681155502796173,-4.499513149261475,-5.362310886383057)">
                                      <path
                                        fill="rgb(255,78,69)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(0.060776859521865845,-0.3446826934814453,0.3446826934814453,0.060776859521865845,-6.8936543464660645,-1.215537190437317)">
                                      <path
                                        fill="rgb(255,78,69)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(-0.17499999701976776,-0.30310890078544617,0.30310890078544617,-0.17499999701976776,-6.062177658081055,3.5)">
                                      <path
                                        fill="rgb(255,78,69)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(-0.32889240980148315,-0.11970704793930054,0.11970704793930054,-0.32889240980148315,-2.3941409587860107,6.577848434448242)">
                                      <path
                                        fill="rgb(255,78,69)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(-0.32889240980148315,0.11970704793930054,-0.11970704793930054,-0.32889240980148315,2.3941409587860107,6.577848434448242)">
                                      <path
                                        fill="rgb(255,78,69)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(-0.17499999701976776,0.30310890078544617,-0.30310890078544617,-0.17499999701976776,6.062177658081055,3.5)">
                                      <path
                                        fill="rgb(255,78,69)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(0.060776859521865845,0.3446826934814453,-0.3446826934814453,0.060776859521865845,6.8936543464660645,-1.215537190437317)">
                                      <path
                                        fill="rgb(255,78,69)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(0.2681155502796173,0.22497566044330597,-0.22497566044330597,0.2681155502796173,4.499513149261475,-5.362310886383057)">
                                      <path
                                        fill="rgb(255,78,69)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                    <g opacity="1" transform="matrix(0.3499999940395355,0,0,0.3499999940395355,0,-7)">
                                      <path
                                        fill="rgb(255,78,69)"
                                        fill-opacity="1"
                                        d=" M0,-3 C1.6556999683380127,-3 3,-1.6556999683380127 3,0 C3,1.6556999683380127 1.6556999683380127,3 0,3 C-1.6556999683380127,3 -3,1.6556999683380127 -3,0 C-3,-1.6556999683380127 -1.6556999683380127,-3 0,-3z"
                                      ></path>
                                    </g>
                                  </g>
                                  <g style="display: block;" transform="matrix(0.8660253882408142,-0.5,0.5,0.8660253882408142,59.2075309753418,70.43893432617188)" opacity="1">
                                    <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                                      <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(229,229,44)" stroke-opacity="1" stroke-width="6" d="M0 0"></path>
                                    </g>
                                  </g>
                                </g>
                                <g clip-path="url(#__lottie_element_127)" transform="matrix(1.0880000591278076,0,0,1.0880000591278076,69.95299530029297,67.9433822631836)" opacity="1" style="display: block;">
                                  <g style="display: block;" transform="matrix(1,0,0,1,60,60)" opacity="1">
                                    <path
                                      fill="rgb(255,255,255)"
                                      fill-opacity="1"
                                      d=" M25.025999069213867,-4.00600004196167 C25.025999069213867,-4.00600004196167 5.992000102996826,-3.996999979019165 5.992000102996826,-3.996999979019165 C5.992000102996826,-3.996999979019165 11.012999534606934,-22.983999252319336 11.012999534606934,-22.983999252319336 C12.230999946594238,-26.90399932861328 13,-31.94300079345703 8.994000434875488,-31.981000900268555 C7,-32 5,-32 4.021999835968018,-31.007999420166016 C4.021999835968018,-31.007999420166016 -19.993000030517578,-5.03000020980835 -19.993000030517578,-5.03000020980835 C-19.993000030517578,-5.03000020980835 -20.027999877929688,32.025001525878906 -20.027999877929688,32.025001525878906 C-20.027999877929688,32.025001525878906 20.97599983215332,31.986000061035156 20.97599983215332,31.986000061035156 C25.010000228881836,31.986000061035156 26.198999404907227,29.562000274658203 26.99799919128418,25.985000610351562 C26.99799919128418,25.985000610351562 31.972000122070312,4.026000022888184 31.972000122070312,4.026000022888184 C33,-0.6930000185966492 30.392000198364258,-4.00600004196167 25.025999069213867,-4.00600004196167z"
                                    ></path>
                                    <path
                                      stroke-linecap="butt"
                                      stroke-linejoin="miter"
                                      fill-opacity="0"
                                      stroke-miterlimit="4"
                                      stroke="rgb(255,255,255)"
                                      stroke-opacity="1"
                                      stroke-width="4"
                                      d=" M25.025999069213867,-4.00600004196167 C25.025999069213867,-4.00600004196167 5.992000102996826,-3.996999979019165 5.992000102996826,-3.996999979019165 C5.992000102996826,-3.996999979019165 11.012999534606934,-22.983999252319336 11.012999534606934,-22.983999252319336 C12.230999946594238,-26.90399932861328 13,-31.94300079345703 8.994000434875488,-31.981000900268555 C7,-32 5,-32 4.021999835968018,-31.007999420166016 C4.021999835968018,-31.007999420166016 -19.993000030517578,-5.03000020980835 -19.993000030517578,-5.03000020980835 C-19.993000030517578,-5.03000020980835 -20.027999877929688,32.025001525878906 -20.027999877929688,32.025001525878906 C-20.027999877929688,32.025001525878906 20.97599983215332,31.986000061035156 20.97599983215332,31.986000061035156 C25.010000228881836,31.986000061035156 26.198999404907227,29.562000274658203 26.99799919128418,25.985000610351562 C26.99799919128418,25.985000610351562 31.972000122070312,4.026000022888184 31.972000122070312,4.026000022888184 C33,-0.6930000185966492 30.392000198364258,-4.00600004196167 25.025999069213867,-4.00600004196167z"
                                    ></path>
                                  </g>
                                  <g transform="matrix(0.9985445737838745,0.05393248796463013,-0.05393248796463013,0.9985445737838745,61.85707473754883,62.73181915283203)" opacity="1" style="display: none;">
                                    <path
                                      stroke-linecap="butt"
                                      stroke-linejoin="miter"
                                      fill-opacity="0"
                                      stroke-miterlimit="4"
                                      stroke="rgb(249,254,249)"
                                      stroke-opacity="1"
                                      stroke-width="4"
                                      d=" M25.025999069213867,-4.00600004196167 C25.025999069213867,-4.00600004196167 5.992000102996826,-3.996999979019165 5.992000102996826,-3.996999979019165 C5.992000102996826,-3.996999979019165 11.012999534606934,-22.983999252319336 11.012999534606934,-22.983999252319336 C12.230999946594238,-26.90399932861328 13,-31.94300079345703 8.994000434875488,-31.981000900268555 C7,-32 5,-32 4.021999835968018,-31.007999420166016 C4.021999835968018,-31.007999420166016 -19.993000030517578,-5.03000020980835 -19.993000030517578,-5.03000020980835 C-19.993000030517578,-5.03000020980835 -20.027999877929688,32.025001525878906 -20.027999877929688,32.025001525878906 C-20.027999877929688,32.025001525878906 20.97599983215332,31.986000061035156 20.97599983215332,31.986000061035156 C25.010000228881836,31.986000061035156 26.198999404907227,29.562000274658203 26.99799919128418,25.985000610351562 C26.99799919128418,25.985000610351562 31.972000122070312,4.026000022888184 31.972000122070312,4.026000022888184 C33,-0.6930000185966492 30.392000198364258,-4.00600004196167 25.025999069213867,-4.00600004196167z"
                                    ></path>
                                  </g>
                                  <g style="display: block;" transform="matrix(1,0,0,1,60,60)" opacity="1">
                                    <path
                                      fill="rgb(255,255,255)"
                                      fill-opacity="1"
                                      d=" M-27.993000030517578,-4.015999794006348 C-27.993000030517578,-4.015999794006348 -36.02799987792969,-3.996999979019165 -36.02799987792969,-3.996999979019165 C-36.02799987792969,-3.996999979019165 -36,31.9950008392334 -36,31.9950008392334 C-36,31.9950008392334 -28.027999877929688,31.976999282836914 -28.027999877929688,31.976999282836914 C-28.027999877929688,31.976999282836914 -27.993000030517578,-4.015999794006348 -27.993000030517578,-4.015999794006348z"
                                    ></path>
                                    <path
                                      stroke-linecap="butt"
                                      stroke-linejoin="miter"
                                      fill-opacity="0"
                                      stroke-miterlimit="4"
                                      stroke="rgb(255,255,255)"
                                      stroke-opacity="1"
                                      stroke-width="4"
                                      d=" M-27.993000030517578,-4.015999794006348 C-27.993000030517578,-4.015999794006348 -36.02799987792969,-3.996999979019165 -36.02799987792969,-3.996999979019165 C-36.02799987792969,-3.996999979019165 -36,31.9950008392334 -36,31.9950008392334 C-36,31.9950008392334 -28.027999877929688,31.976999282836914 -28.027999877929688,31.976999282836914 C-28.027999877929688,31.976999282836914 -27.993000030517578,-4.015999794006348 -27.993000030517578,-4.015999794006348z"
                                    ></path>
                                  </g>
                                  <g transform="matrix(0.9985445737838745,0.05393248796463013,-0.05393248796463013,0.9985445737838745,61.85707473754883,62.73181915283203)" opacity="1" style="display: none;">
                                    <path
                                      stroke-linecap="butt"
                                      stroke-linejoin="miter"
                                      fill-opacity="0"
                                      stroke-miterlimit="4"
                                      stroke="rgb(249,254,249)"
                                      stroke-opacity="1"
                                      stroke-width="4"
                                      d=" M-19.986000061035156,-4.03000020980835 C-19.986000061035156,-4.03000020980835 -36.020999908447266,-3.996999979019165 -36.020999908447266,-3.996999979019165 C-36.020999908447266,-3.996999979019165 -36.00199890136719,31.993000030517578 -36.00199890136719,31.993000030517578 C-36.00199890136719,31.993000030517578 -20.030000686645508,32.02299880981445 -20.030000686645508,32.02299880981445 C-20.030000686645508,32.02299880981445 -19.986000061035156,-4.03000020980835 -19.986000061035156,-4.03000020980835z"
                                    ></path>
                                  </g>
                                </g>
                              </g>
                            </svg>
                          </lottie-component>
                        </ytd-lottie-player>
                      </yt-animated-icon>
                      <!--css-build:shady--><!--css-build:shady-->
                    </yt-icon>
                  </div>
                  <div class="yt-spec-button-shape-next__button-text-content">
                    <yt-animated-rolling-number class="animated-rolling-number-wiz" dir="ltr" aria-hidden="true" style="height: 36px; line-height: 36px;">
                      <animated-rolling-character class="animated-rolling-character-wiz" style="margin-top: 0px;">
                        <div>&nbsp;</div>
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>0</div>
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>0</div>
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>&nbsp;</div>
                      </animated-rolling-character>
                      <animated-rolling-character class="animated-rolling-character-wiz" style="margin-top: 0px;">
                        <div>&nbsp;</div>
                        <div>.</div>
                        <div>&nbsp;</div>
                      </animated-rolling-character>
                      <animated-rolling-character class="animated-rolling-character-wiz" style="margin-top: -504px;">
                        <div>&nbsp;</div>
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>0</div>
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>0</div>
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>&nbsp;</div>
                      </animated-rolling-character>
                      <animated-rolling-character class="animated-rolling-character-wiz" style="margin-top: 0px;">
                        <div>&nbsp;</div>
                        <div>K</div>
                        <div>&nbsp;</div>
                      </animated-rolling-character>
                    </yt-animated-rolling-number>
                  </div>
                  <yt-touch-feedback-shape style="border-radius: inherit;">
                    <div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
                      <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
                      <div class="yt-spec-touch-feedback-shape__fill" style=""></div>
                    </div>
                  </yt-touch-feedback-shape>
                </button>
              </toggle-button-view-model>
            </like-button-view-model>
            <dislike-button-view-model class="YtDislikeButtonViewModelHost">
              <toggle-button-view-model>
                <button
                  class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-button yt-spec-button-shape-next--segmented-end"
                  aria-label="Dislike this video"
                  title="I dislike this"
                  style=""
                  aria-pressed="false"
                >
                  <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
                    <yt-icon class="undefined" style="">
                      <!--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="M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z"
                              ></path>
                            </svg>
                          </div>
                        </icon-shape>
                      </yt-icon-shape>
                    </yt-icon>
                  </div>
                  <yt-touch-feedback-shape style="border-radius: inherit;">
                    <div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
                      <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
                      <div class="yt-spec-touch-feedback-shape__fill" style=""></div>
                    </div>
                  </yt-touch-feedback-shape>
                </button>
              </toggle-button-view-model>
            </dislike-button-view-model>
          </div>
        </div>
      </yt-smartimation>
    </segmented-like-dislike-button-view-model>
    <yt-button-view-model class="style-scope ytd-menu-renderer">
      <button-view-model class="yt-spec-button-view-model">
        <button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading" aria-label="Share" title="Share" style="">
          <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
            <yt-icon class="undefined" style="width: 24px; height: 24px;">
              <!--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="M15 5.63 20.66 12 15 18.37V14h-1c-3.96 0-7.14 1-9.75 3.09 1.84-4.07 5.11-6.4 9.89-7.1l.86-.13V5.63M14 3v6C6.22 10.13 3.11 15.33 2 21c2.78-3.97 6.44-6 12-6v6l8-9-8-9z"></path>
                    </svg>
                  </div>
                </icon-shape>
              </yt-icon-shape>
            </yt-icon>
          </div>
          <div class="yt-spec-button-shape-next__button-text-content">Share</div>
          <yt-touch-feedback-shape style="border-radius: inherit;">
            <div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
              <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
              <div class="yt-spec-touch-feedback-shape__fill" style=""></div>
            </div>
          </yt-touch-feedback-shape>
        </button>
      </button-view-model>
    </yt-button-view-model>
  </div>
  <div id="flexible-item-buttons" class="style-scope ytd-menu-renderer">
    <ytd-download-button-renderer class="style-scope ytd-menu-renderer" button-renderer="true">
      <!--css-build:shady--><!--css-build:shady-->
      <ytd-button-renderer force-modern-icon-button="" class="style-scope ytd-download-button-renderer" button-renderer="" button-next="">
        <!--css-build:shady-->
        <yt-button-shape>
          <button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading" aria-label="Download" title="" style="">
            <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
              <yt-icon style="width: 24px; height: 24px;">
                <!--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="M17 18v1H6v-1h11zm-.5-6.6-.7-.7-3.8 3.7V4h-1v10.4l-3.8-3.8-.7.7 5 5 5-4.9z"></path>
                      </svg>
                    </div>
                  </icon-shape>
                </yt-icon-shape>
              </yt-icon>
            </div>
            <div class="yt-spec-button-shape-next__button-text-content"><span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">Download</span></div>
            <yt-touch-feedback-shape style="border-radius: inherit;">
              <div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
                <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
                <div class="yt-spec-touch-feedback-shape__fill" style=""></div>
              </div>
            </yt-touch-feedback-shape>
          </button>
        </yt-button-shape>
        <tp-yt-paper-tooltip fit-to-visible-bounds="" offset="8" role="tooltip" tabindex="-1">
          <!--css-build:shady-->
          <div id="tooltip" class="hidden style-scope tp-yt-paper-tooltip" style-target="tooltip">
            Download
          </div>
        </tp-yt-paper-tooltip>
      </ytd-button-renderer>
    </ytd-download-button-renderer>
    <yt-button-view-model class="style-scope ytd-menu-renderer">
      <button-view-model class="yt-spec-button-view-model">
        <button
          class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading"
          aria-label="Thanks"
          title="Show support with Super Thanks"
          style=""
        >
          <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
            <yt-icon class="undefined" style="width: 24px; height: 24px;">
              <!--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="M11 17h2v-1h1c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1h-3v-1h4V8h-2V7h-2v1h-1c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3v1H9v2h2v1zm5.5-15c-1.74 0-3.41.88-4.5 2.28C10.91 2.88 9.24 2 7.5 2 4.42 2 2 4.64 2 7.99c0 4.12 3.4 7.48 8.55 12.58L12 22l1.45-1.44C18.6 15.47 22 12.11 22 7.99 22 4.64 19.58 2 16.5 2zm-3.75 17.85-.75.74-.74-.73-.04-.04C6.27 14.92 3 11.69 3 7.99 3 5.19 4.98 3 7.5 3c1.4 0 2.79.71 3.71 1.89L12 5.9l.79-1.01C13.71 3.71 15.1 3 16.5 3 19.02 3 21 5.19 21 7.99c0 3.7-3.28 6.94-8.25 11.86z"
                      ></path>
                    </svg>
                  </div>
                </icon-shape>
              </yt-icon-shape>
            </yt-icon>
          </div>
          <div class="yt-spec-button-shape-next__button-text-content">Thanks</div>
          <yt-touch-feedback-shape style="border-radius: inherit;">
            <div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
              <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
              <div class="yt-spec-touch-feedback-shape__fill" style=""></div>
            </div>
          </yt-touch-feedback-shape>
        </button>
      </button-view-model>
    </yt-button-view-model>
    <yt-button-view-model class="style-scope ytd-menu-renderer">
      <button-view-model class="yt-spec-button-view-model">
        <button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading" aria-label="Clip" title="Clip" style="">
          <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
            <yt-icon class="undefined" style="width: 24px; height: 24px;">
              <!--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="M8 7c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1zm-1 9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm3.79-7.77L21 18.44V20h-3.27l-5.76-5.76-1.27 1.27c.19.46.3.96.3 1.49 0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4c.42 0 .81.08 1.19.2l1.37-1.37-1.11-1.11C8 10.89 7.51 11 7 11c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4c0 .43-.09.84-.21 1.23zm-.71.71-.43-.44.19-.58c.11-.34.16-.64.16-.92 0-1.65-1.35-3-3-3S4 5.35 4 7s1.35 3 3 3c.36 0 .73-.07 1.09-.21l.61-.24.46.46 1.11 1.11.71.71-.71.71-1.37 1.37-.43.43-.58-.18C7.55 14.05 7.27 14 7 14c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3c0-.38-.07-.75-.22-1.12l-.25-.61.47-.47 1.27-1.27.71-.71.71.71L18.15 19H20v-.15l-9.92-9.91zM17.73 4H21v1.56l-5.52 5.52-2.41-2.41L17.73 4zm.42 1-3.67 3.67 1 1L20 5.15V5h-1.85z"
                      ></path>
                    </svg>
                  </div>
                </icon-shape>
              </yt-icon-shape>
            </yt-icon>
          </div>
          <div class="yt-spec-button-shape-next__button-text-content">Clip</div>
          <yt-touch-feedback-shape style="border-radius: inherit;">
            <div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
              <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
              <div class="yt-spec-touch-feedback-shape__fill" style=""></div>
            </div>
          </yt-touch-feedback-shape>
        </button>
      </button-view-model>
    </yt-button-view-model>
    <yt-button-view-model class="style-scope ytd-menu-renderer">
      <button-view-model class="yt-spec-button-view-model">
        <button
          class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading"
          aria-label="Save to playlist"
          title="Save"
          style=""
        >
          <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
            <yt-icon class="undefined" style="width: 24px; height: 24px;">
              <!--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="M22 13h-4v4h-2v-4h-4v-2h4V7h2v4h4v2zm-8-6H2v1h12V7zM2 12h8v-1H2v1zm0 4h8v-1H2v1z"></path>
                    </svg>
                  </div>
                </icon-shape>
              </yt-icon-shape>
            </yt-icon>
          </div>
          <div class="yt-spec-button-shape-next__button-text-content">Save</div>
          <yt-touch-feedback-shape style="border-radius: inherit;">
            <div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
              <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
              <div class="yt-spec-touch-feedback-shape__fill" style=""></div>
            </div>
          </yt-touch-feedback-shape>
        </button>
      </button-view-model>
    </yt-button-view-model>
  </div>
  <yt-icon-button id="button" class="dropdown-trigger style-scope ytd-menu-renderer" style-target="button" hidden="">
    <!--css-build:shady--><!--css-build:shady-->
    <button id="button" class="style-scope yt-icon-button" aria-label="More actions">
      <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" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <path
                  d="M7.5 12c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm4.5-1.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.5zm6 0c-.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.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">
    <button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-button" title="" style="" aria-label="More actions">
      <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
        <yt-icon style="width: 24px; height: 24px;">
          <!--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="M7.5 12c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm4.5-1.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.5zm6 0c-.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.5z"
                  ></path>
                </svg>
              </div>
            </icon-shape>
          </yt-icon-shape>
        </yt-icon>
      </div>
      <yt-touch-feedback-shape style="border-radius: inherit;">
        <div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
          <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
          <div class="yt-spec-touch-feedback-shape__fill" style=""></div>
        </div>
      </yt-touch-feedback-shape>
    </button>
  </yt-button-shape>
</ytd-menu-renderer>
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
  color: #f1f1f1;
  background-color: rgba(255,255,255,0.1);
}

Ignore the <plasmo-csui> as it's injected by an extension of mine

FYI, when the ambient effect is on: image

WesselKroos commented 10 months ago

Thanks for the report. I'll take a look

WesselKroos commented 10 months ago

@avi12 I've fixed the like button icon. YouTube had changed the ytd-segmented-like-dislike-button-renderer element to a segmented-like-dislike-button-view-model element.

I can't reproduce the white icons you get when I turn off the ambient light. Are there any additional steps that I should take?/Could you add some details about your Windows, browser, youtube and ambient light settings and optionally any additional extensions you've running on youtube.com?

avi12 commented 10 months ago

I'm on Windows 10, using the Chrome extension on Edge I turned off your ext today after Edge started complaining about performance issues (high CPU usage), and so far it worked Either I'm getting performance issues because the ext isn't optimized enough or because my computer is 6 years old

Regarding exts that run beside yours, I'm mostly running exts that I developed that have nothing to do with your ext

avi12 commented 10 months ago

Here's a screen recording that will assist:

https://github.com/WesselKroos/youtube-ambilight/assets/6422804/36b81593-f769-44ac-b339-47700a182602

WesselKroos commented 10 months ago

@avi12 That icon is what I had fixed. I'm hinting to this screenshot of yours: image

Can you share a screenrecording of that bug?

avi12 commented 10 months ago

https://github.com/WesselKroos/youtube-ambilight/assets/6422804/052e65ed-6484-4765-aa55-50db6a8144bc

WesselKroos commented 10 months ago

@avi12 Aha, that bug is not caused by my extension. It is a bug in YouTube:

https://github.com/WesselKroos/youtube-ambilight/assets/31220528/2479d715-bcdc-4724-a627-8b2a98e6e24a

avi12 commented 10 months ago

Lmao Can your extension fix it until YouTube comes up with a patch?

WesselKroos commented 10 months ago

My extension only applies it's custom style to YouTube's UI elements when it's enabled, to prevent conflicts with other extensions. So once it's disabled, it's up to YouTube.

Btw, I believe this bug exists in YouTube's UI since 1 may 2023. So I doubt they will fix this soon. I noticed this change a year ago, when you had created this issue. They changed the behaviour of their appearance/theme switch setting from "toggling the dark attribute on the html element" to "refreshing the whole webpage".

avi12 commented 10 months ago

I could make a user script for it What styles do I apply to make it work?

WesselKroos commented 10 months ago

It's a mix of selectors. Some are applied to all elements, some only on the buttons in the menu. They can be found in this stylesheet: https://github.com/WesselKroos/youtube-ambilight/blob/master/src/styles/content.scss

WesselKroos commented 9 months ago

When version 2.38.2 has been released you can be in full control of the theme of the webpage because of bugreport #218. The theme setting "Default" will leave the theme as is without checking YouTube's theme cookie or system theme. For example: You can leave the YouTube theme setting to "Light" and use Darkreader to style the webpage as dark. The ambient light extension will then not modify the dark attribute on the html element anymore.