yourduskquibbles / webannoyances

Fix and remove annoying web elements such as sticky headers, floating boxes, floating videos, dickbars, social share bars and other distracting elements.
Creative Commons Attribution Share Alike 4.0 International
1.29k stars 48 forks source link

youtube miniplayer #198

Open Javran opened 4 years ago

Javran commented 4 years ago

URL(s) where the issue occurs

Any type of playlist or mix in any youtube search result should work:

YDQ Edit: YouTube search link aaaa - filtered to Playlists only - Videos loaded through any of the playlists in this link will auto display the miniplayer and continue playing the video and sound (annoyance!) when the user navigates back from the video page to the search page.

YDQ Edit: YouTube search link aaaa - unfilterered - Videos loaded through this like will not auto display the miniplayer when user navigates back to the search page.

Describe the issue

To reproduce the problem, click on any playlist or mix, let it play, and go back to search results page without pausing the video. Some genius think this is a clear sign that the user want to keep watching a video that they have already left from.

There is some official support thread like this, just to demonstrate that (1) this meets the definition of annoyance (2) this is unlikely to be resolved by 1st party by making it possible to turn this "feature" off.

Also note that this is different from #127, this one always floats on bottom-right corner of the page regardless of scrolling.

Screenshot(s)

2020-02-18_220106_4480x1440_scrot

Versions

Settings

Notes

I use the following rule, however it only hides the ui element, and sound from the video still plays.

www.youtube.com##ytd-miniplayer
yourduskquibbles commented 4 years ago

@Javran How are you navigating back to search list after loading the video? Just a mouse click on back arrow? I currently can't reproduce the described behaviour on either firefox or chrome, logged in and not logged in to youtube or with uBO enabled/disabled and even on a stock browser profile with no extensions at all. That being said I have seen the described behaviour in the past and agree it is annoying and is counter to expectations for browser back button.

I think it is some type of A/B test they are performing and I'm currently stuck in the wrong side so can't reproduce to look for a filter option unless you know of a way to force enable this "feature".

One thing I did notice, the video size, shape and behaviour you describe CAN be user selected if one chooses to enter the miniplayer (keyboard i shortcut)[1.] but I think you are talking about miniplayer occurring without any user interaction to enable it when they just hit the browse button backwards after loading a video from playlist.

scaled down screen cap of me trying to reproduce is below. Notice that I can only get the miniplayer to appear when it is user selected option to use the miniplayer. yttest2323342323

Not sure what I can inspect in the code that would preserve user enabled miniplayer but keep the youtube forced miniplayer with no user action to not appear.

Any suggestions or comments to help are appreciated.

[1] miniplayer toggle
Javran commented 4 years ago

@yourduskquibbles I have a back button on my trackball, probably mapped to some media "navigate back" key code. I've just tried with back button on my browser similar to what you used in your screen cap and I can reproduce it. Note that this miniplayer is only kept when watching playlist or mix, but you seems to only click on those regular videos.

yourduskquibbles commented 4 years ago

Note that this miniplayer is only kept when watching playlist or mix, but you seems to only click on those regular videos.

OK, I didn't notice that it needed to be in a playlist in your original report, I will test that and see if there is anything that I can figure out that wouldn't also remove the user OPTIONAL miniplayer which I would prefer not to nuke since some people may choose that is how they want to use the site for some specific reason.

FWIW, you can use the filter option at top of search result page and restrict the search results to TYPE Playlist and then the problem is easy to see and recreate. e.g. here is the search URL youtube creates when Playlist search restriction is used https://www.youtube.com/results?search_query=aaaa&sp=EgIQAw%253D%253D

yourduskquibbles commented 4 years ago

I'm still looking through and testing this issue. From, what I've found, the following filter will cosmetically remove the mini player ONLY from the playlist page so it would not break a user from choosing miniplayer themselves. However with this there is still sound playing in a hidden video, so I actually think this is more annoying solution than youtube's behavior so I won't deploy this filter but if someone thinks it is good enough solution they can add to their personal filter list.

youtube.com##ytd-miniplayer[has-playlist-data=""]

I will continue to test, I think there should be a way through +js() filter to keep the miniplayer from appearing on playlist pages but I'm not great with developing these filters. I will continue to test and look for a solution however and leave this issue open in case someone else is able to help. From my testing, I think the eventual answer will be found hidden somewhere in either the desktop_polymer_v2 or the miniplayer.js javascript files that youtube uses on desktop.

What youtube is doing is essentially keeping two pages loaded at all times, the search page and the video page and then just cosmetically hiding the page that is not being displayed. So when you hit back on the video page, it is really just setting display:none on the video page and display:block on the search page as well as moving the video stream into the miniplayer for the video to continue playing in. Likewise, when you go back to the video page, that then gets set back to display: block and the search page is set as display: none.

Based on my testing I believe the only way it will be possible to come up with an effective block solution for the autoplaying miniplayer (that doesn't leave sound playing with no video shown) is with some type of script injection filter that would set some variable that would trick the playing video into thinking it is still on the player page and not back on the search page so it never goes into miniplayer mode. Unfortunately, I am not great with developing those so it might take some time to find a proper solution and will leave this issue open.

Javran commented 4 years ago

Thanks for looking into this!

This post is for those interested and never ever want to see that miniplayer and have greasemonkey or tampermonkey installed. I also took a look a bit and come up with a sort-of-working shotgun approach if you have greasemonkey or tampermonkey:

// ==UserScript==
// @name AutoCloseYoutubeMiniplayer
// @namespace javran
// @version 0.1
// @description Auto close Youtube miniplayer
// @author Javran
// @include https://www.youtube.com/*
// @require https://code.jquery.com/jquery-3.4.1.js
// @grant none
// ==/UserScript==

(() => {
    'use strict'
    // credit: https://stackoverflow.com/a/46428962
    let oldHref = document.location.href
    window.onload = () => {
        let bodyList = document.querySelector('body')
        let observer = new MutationObserver(ms => {
            ms.forEach(_m => {
                if (oldHref != document.location.href) {
                    oldHref = document.location.href
                    // allow some delay for page to load.
                    setTimeout(() => {
                        const jq = $('#movie_player > div.ytp-miniplayer-ui > div > button.ytp-miniplayer-close-button.ytp-button')
                        if (jq.length && !document.location.href.startsWith('https://www.youtube.com/watch?')) {
                            jq.click()
                            console.log('[AutoCloseYoutubeMiniplayer] miniplayer dismissed')
                        }}, 200)
                }
            })
        })
        observer.observe(bodyList, {childList: true, subtree: true})
    }
})()

Adjust that 200 (which stands for 200 ms) to something higher if the page loads too fast for this script to dismiss - I'm too lazy to do this properly.

yourduskquibbles commented 4 years ago

Thanks for looking into this!

This post is for those interested and never ever want to see that miniplayer and have greasemonkey or tampermonkey installed. I also took a look a bit and come up with a sort-of-working shotgun approach if you have greasemonkey or tampermonkey:

// ==UserScript==
// @name AutoCloseYoutubeMiniplayer
// @namespace javran
// @version 0.1
// @description Auto close Youtube miniplayer
// @author Javran
// @include https://www.youtube.com/*
// @require https://code.jquery.com/jquery-3.4.1.js
// @grant none
// ==/UserScript==

(() => {
    'use strict'
    // credit: https://stackoverflow.com/a/46428962
    let oldHref = document.location.href
    window.onload = () => {
        let bodyList = document.querySelector('body')
        let observer = new MutationObserver(ms => {
            ms.forEach(_m => {
                if (oldHref != document.location.href) {
                    oldHref = document.location.href
                    // allow some delay for page to load.
                    setTimeout(() => {
                        const jq = $('#movie_player > div.ytp-miniplayer-ui > div > button.ytp-miniplayer-close-button.ytp-button')
                        if (jq.length && !document.location.href.startsWith('https://www.youtube.com/watch?')) {
                            jq.click()
                            console.log('[AutoCloseYoutubeMiniplayer] miniplayer dismissed')
                        }}, 200)
                }
            })
        })
        observer.observe(bodyList, {childList: true, subtree: true})
    }
})()

Adjust that 200 (which stands for 200 ms) to something higher if the page loads too fast for this script to dismiss - I'm too lazy to do this properly.

Just saw this discussion as well, looks like someone else created a userscript that maybe kills this and worth testing as well.

yourduskquibbles commented 4 years ago

I believe there is now a uBO feature in development that would work to remove the playlist enabled miniplayer once it has been implemented via a uBO filter only. I will need to revisit once the next development version of uBO is released with this new script for removing DOM element is released.

Discussion occurring in private (for reminder to self) @ https://github.com/orgs/uBlockOrigin/teams/ublock-filters-volunteers/discussions/261

uBlock-user commented 4 years ago

Until the said feature makes it into uBO, you can use to run these on the browser console on YT --

document.querySelectorAll('ytd-miniplayer, ytd-watch-flexy[hidden]')[0].remove();
document.querySelectorAll('ytd-miniplayer, ytd-watch-flexy[hidden]')[1].remove();

or make a javascript out of it.

gwarser commented 8 months ago
www.youtube.com##ytd-miniplayer, ytd-watch-flexy[hidden]:remove()