CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome-extensionyoutube
Armaan Shah
Armaan Shah

Reputation: 15

Find out when the Youtube HUD fades out, and fade out an element with it

I am creating a chrome extension that adds a button to the youtube player HUD (to the left of the watch later button). This works fine, but the only problem is that when the HUD autofades after a few seconds of inactivity, this button element doesn't. I've added the button to the following div using javascript:

<div class="ytp-chrome-top-buttons"> </div>

and my button looks like this:

<button class="customClass" id="customID" title="custom title"><svg class="customClass"></svg></button>

I've looked through the source of the page to try and see how exactly youtube makes the other icons disappear, and whether I can copy a class to my svg to make it disappear, but I haven't been able to find it. I've looked at using a timer and javascript to make the element disappear, but I figured if the functionality is already there, why complicate it. As a last resort I will be resorting to using the timer method, but I'd much prefer using CSS classes. I have had a cursory glance into the Youtube Player API, but to be frank, I'm having a hard time understanding how it works (While I have a few years of programming experience, I only started learning javascript, HTML, and CSS yesterday). I also understand that this API is only for embedded youtube videos? To clarify, I DO know how to use API's in javascript, just not this particular one. I have used the youtube data API to implement the button's functionality successfully. Any help is appreciated. Thanks.

Upvotes: 0

Views: 108

Answers (1)

bl4cktrum
bl4cktrum

Reputation: 58

If you examine the element changes, you can see that the class list of the video has changed with the change of the bottom bar. When the bottom bar is hidden, the ytp-autohide class is added. Keeping this in mind, after scanning the class changes with the mutation observer, you will reach the desired result when the ytp-autohide class's existence status changes.

    var video = document.querySelector("#movie_player");
    var lastState = video.classList.contains('ytp-autohide');
    var observer = new MutationObserver(function(mutations) {
                        mutations.forEach(function(mutation) {
                            if(mutation.attributeName == "class"){
                                var currentState = mutation.target.classList.contains('ytp-autohide');
                                if(lastState !== currentState)    {
                                    lastState = currentState;
                                    if(currentState)
                                        console.log("Hided");
                                    else
                                        console.log("Shown");
                                }
                            }
                        });
                    });
    observer.observe(video, {attributes: true});

Upvotes: 1

Related Questions