Video and Playlist popup buttons

[MAZ01001]

Feature request

[1] Video popup button should include the playlist (add support)

[1] has been merged ( #1806 & #1813 & #1834 )

[1] What

When opening a video within a playlist via the popup button (Player→Butttons→Popup player), it opens the video but not with the playlist.

Video: https://www.youtube.com/watch?v=CBIQNiNBbYs?list=PLTfxJETd3IiArIOQSSYLAsYXui34D1cnW

Video-Popup: https://www.youtube.com/embed/CBIQNiNBbYs?start=25&autoplay=1
Does not include the playlist ID (list).

[1] Implementation

When opening the popup, if the current URL includes a list parameter, add it to the embed URL.

Video: https://www.youtube.com/watch?v=CBIQNiNBbYs?list=PLTfxJETd3IiArIOQSSYLAsYXui34D1cnW

Popup: https://www.youtube.com/embed/CBIQNiNBbYs?start=25&autoplay=1&list=PLTfxJETd3IiArIOQSSYLAsYXui34D1cnW

Something like this:

youtube/js&css/web-accessible/www.youtube.com/player.js

Lines 726 to 732 in 454b460

	onclick: function () {
	var player = ImprovedTube.elements.player;
	player.pauseVideo();
	window.open('//www.youtube.com/embed/' + location.href.match(/watch\?v=([A-Za-z0-9\-\_]+)/g)[0].slice(8) + '?start=' + parseInt(player.getCurrentTime()) + '&autoplay=' + (ImprovedTube.storage.player_autoplay == false ? '0' : '1'), '_blank', 'directories=no,toolbar=no,location=no,menubar=no,status=no,titlebar=no,scrollbars=no,resizable=no,width=' + player.offsetWidth + ',height=' + player.offsetHeight);
	},

↓ modify as follows ↓

function () {
    var player = ImprovedTube.elements.player;

    player.pauseVideo();

    const urlSearch = new URLSearchParams(location.search),
        urlPopup = new URL(`${location.protocol}//www.youtube.com/embed/${urlSearch.get('v')}`);

    urlPopup.searchParams.set('start', parseInt(player.getCurrentTime()));
    urlPopup.searchParams.set('autoplay', (ImprovedTube.storage.player_autoplay ?? true) ? '1' : '0');
    if (urlSearch.has('list')) urlPopup.searchParams.set('list', urlSearch.get('list'));

    window.open(urlPopup.href, '_blank', `directories=no,toolbar=no,location=no,menubar=no,status=no,titlebar=no,scrollbars=no,resizable=no,width=${player.offsetWidth},height=${player.offsetHeight}`);
}

[2] playlist popup button (new)

[2] has been merged ( #1832 )

[2] What

Add a button to the playlist window (ytd-playlist-panel-renderer) like the playlist reverse button ( #1544 ) or sites like youtube.com/playlist?list=... that opens that playlist embed page.

Playlist: https://www.youtube.com/playlist?list=PLTfxJETd3IiArIOQSSYLAsYXui34D1cnW

Playlist-Popup: https://www.youtube.com/embed/videoseries?list=PLTfxJETd3IiArIOQSSYLAsYXui34D1cnW

[2] Implementation

For the playlist window, the same functionality as in [1] Implementation can be used, but instead of /embed/<video-ID>?list=<playlist-ID> it's /embed/videoseries?list=<playlist-ID>.

I'd say It can be an option like the video popup button (default off) under the playlist menu of the extension, maybe "popup playlist".

This probably goes in js&css/web-accessible/www.youtube.com/playlist.js, but I don't understand enough about the project to know where else to add things.

Workaround

Bookmark can now also be found here: code-charity/bookmarklets-hub/yt_popup_player.md

In the meantime, I made myself (and you reading) a quick workaround (updated to #1813 ).

Navigate to a YouTube video or playlist page, open dev-console (F12), and copy & paste the following.

(()=>{// Open YouTube video or playlist as embed in a popup window (reads `v` and `list` URL parameters and get the time from the first `video.video-stream.html5-main-video` element found)
    "use strict";
    const player=document.body.querySelector("video.video-stream.html5-main-video"),
        video=window.location.search.match(/[?&]v=([^&]+)/)?.[1],
        list=window.location.search.match(/[?&]list=([^&]+)/)?.[1];
    if(!video&&!list)return alert("No video and/or playlist found");
    const popup=player?(()=>{
        "use strict";
        player.pause();
        const{left,top,width,height}=player.getBoundingClientRect();
        return window.open(
            `${window.location.protocol}//www.youtube.com/embed/${video??"videoseries"}?autoplay=1&start=${Math.trunc(player.currentTime)}${video?`&v=${video}`:""}${list?`&list=${list}`:""}`,
            "_blank",
            `menubar=0,status=0,titlebar=0,top=${window.screenTop+top},left=${window.screenLeft+left},width=${Math.max(100,width)},height=${Math.max(100,height)}`
        );
    })():window.open(
        `${window.location.protocol}//www.youtube.com/embed/${video??"videoseries"}?autoplay=1${video?`&v=${video}`:""}${list?`&list=${list}`:""}`,
        "_blank",
        `menubar=0,status=0,titlebar=0,top=${window.screenTop},left=${window.screenLeft},width=${Math.max(100,window.innerWidth)},height=${Math.max(100,window.innerHeight)}`
    );
    if(popup&&video&&list){
        popup.addEventListener("load",()=>{
            "use strict";
            const title=popup.document.querySelector("div#player div.ytp-title-text>a[href]");
            if(title&&title.href.match(/[?&]v=([^&]+)/)?.[1]!==video)popup.location.search=popup.location.search.replace(/(\?)list=[^&]+&|&list=[^&]+/,"$1");
        },{passive:true,once:true});
    }
})();

Or, even better, create a bookmark with any name and use the following as the URL (above JS minified).

javascript:(()=>{"use strict";const t=document.body.querySelector("video.video-stream.html5-main-video"),e=window.location.search.match(/[?&]v=([^&]+)/)?.[1],o=window.location.search.match(/[?&]list=([^&]+)/)?.[1];if(!e&&!o)return alert("No video and/or playlist found");const i=t?(()=>{t.pause();const{left:i,top:n,width:a,height:r}=t.getBoundingClientRect();return window.open(`${window.location.protocol}//www.youtube.com/embed/${e??"videoseries"}?autoplay=1&start=${Math.trunc(t.currentTime)}${e?`&v=${e}`:""}${o?`&list=${o}`:""}`,"_blank",`menubar=0,status=0,titlebar=0,top=${window.screenTop+n},left=${window.screenLeft+i},width=${Math.max(100,a)},height=${Math.max(100,r)}`)})():window.open(`${window.location.protocol}//www.youtube.com/embed/${e??"videoseries"}?autoplay=1${e?`&v=${e}`:""}${o?`&list=${o}`:""}`,"_blank",`menubar=0,status=0,titlebar=0,top=${window.screenTop},left=${window.screenLeft},width=${Math.max(100,window.innerWidth)},height=${Math.max(100,window.innerHeight)}`);i&&e&&o&&i.addEventListener("load",(()=>{const t=i.document.querySelector("div#player div.ytp-title-text>a[href]");t&&t.href.match(/[?&]v=([^&]+)/)?.[1]!==e&&(i.location.search=i.location.search.replace(/(\?)list=[^&]+&|&list=[^&]+/,"$1"))}),{passive:!0,once:!0})})();

Then, you can click on the bookmark to open the video or playlist as a popup.

[MAZ01001]

By the way, for Chromium users, I can suggest the Open-as-Popup extension to toggle the popup back to a normal tab...to put back to all the other tabs...or open as popup again, because somehow this extension can get rid of the URL bar, making the popup-window even more minimal in appearance...

[ImprovedTube]

Or, even better, create a bookmark with any name and use the following as the URL (above JS minified).

https://github.com/code-charity/bookmarklets

[ImprovedTube]

Open-as-Popup extension

the following also doesnt hide the URL bar. whats the trick?

chrome.windows.create chrome.windows.create
		chrome.windows.create({
			url: message.url,
			type: 'popup', ....

https://crxcavator.io/source/peoodjkcnljekllfedckepfejklfomed/0.1.0?file=background.js&platform=Chrome

[MAZ01001]

Open-as-Popup extension

the following allow doesnt hide the URL bar. whats the trick?

I don't know for sure, but after some searching, I only found that it's not possible to hide the URL bar with window.open for security reasons, which makes sense I suppose (on W3Schools it says opera allows the use of loaction=0 which hides the URL bar).

But if one has access to a terminal, then chrome.exe --app="<url>" does open a minimal window without a URL bar.

[ImprovedTube]

the extensions work though with the chrome/browser API and

[MAZ01001]

I just noticed that the video popup button has issues and checked the code and the commit from #1813 is somehow reverted but without any revert commit.

the fix ( #1813 ):

youtube/js&css/web-accessible/www.youtube.com/player.js

Lines 737 to 743 in 43d0cd3

	const popup = window.open(urlPopup, '_blank', `directories=no,toolbar=no,location=no,menubar=no,status=no,titlebar=no,scrollbars=no,resizable=no,width=${player.offsetWidth},height=${player.offsetHeight}`);
	if(popup && listMatch){
	popup.addEventListener('load', function () {
	const videoLink = popup.document.querySelector('div#player div.ytp-title-text>a[href]');
	if (videoLink && videoLink.href.match(ImprovedTube.regex.video_id)[1] !== videoID) popup.location.search = popup.location.search.replace(/(\?)list=[^&]+&|&list=[^&]+/, '$1');
	}, {passive: true, once: true});
	}

is now back to (most recent state):

youtube/js&css/web-accessible/www.youtube.com/player.js

Line 736 in bbe2df3

window.open(urlPopup, '_blank', `directories=no,toolbar=no,location=no,menubar=no,status=no,titlebar=no,scrollbars=no,resizable=no,width=${player.offsetWidth},height=${player.offsetHeight}`);

which has the same issues as in #1812, but there is no commit that has the lines marked as deleted and when looking at the git blame it shows the commits from #1806 and not #1813 as expected.

[ImprovedTube]

hi! @MAZ01001

7fbb43f

complicated :D (and maybe takes longer to load now?)
but had to show you appreciation.

( there also is "panel"? yet cant apply for this permission it seems https://stackoverflow.com/questions/26250131/difference-between-a-chrome-popup-and-panel )