Greasy Fork is available in English.
Powerful control on YouTube
And a suggestion, please add classes to the html or body elements when certain actions are done, such as when the floating player is visible etc... By doing this you can improve compatibility with other scripts (they will still have to adapt their code, but it will be much easier to do so).
Another thing I've noticed that can be improved significantly is the video thumbnail button.
Currently it cycles through the different sizes and once we go through all of them, it stops working.
Instead, it could open a modal window popup and show all the different sizes that we can download.
Also, please show the jpg instead of the webp, thanks.
Something like this:
always be a 16:9 ratio (add black bars if necessary)
enable this plugin "Player force resize 16:9"
go through all of them, it stops working
Not a script looking for the thumbnail with the largest extension available. As soon as he finds it. And returns in jpg format and not webp
when exiting fullscreen, the floating player appears instead of the normal video
Fixed in beta version which I may never release publicly.
compatibility with other scripts
It makes sense. At the moment, those elements that change are marked with a id/class that starts with the word "nova-" ex 1, ex 2. Plugins perform the task with the minimal modifications that are available. No author has reported conflicts yet. Conflicts are possible only if you activate 2 scripts with similar functionality. For example, install 2 antiviruses - these are the problems of the user that he does not think with his head.
Force player resize doesn't work as it should. The player size is not changed to 16:9 all the time. I've tried to do something with css only, but it's not enough. This video for example is changed back to the ugly square when navigating back to it (open another video then use the browser back button, I've tried with music only vids for now)
Thumbnail opening webp, I actually tested on this video and it shows a webp, rather than a jpg (the jpg does exist btw)
Anyway, it's probably worth saying that I've been using Iridium script, I've had to completely remove some features as it wouldn't work otherwise... That script can force player to 16:9 which works more consistently, as well as the proper thumbnails. Maybe some of it can be reused here?
in Iridium, the function is called initializeBypasses
just enter it in the browser console to apply
compact:
document.querySelector('ytd-watch-flexy').updateStyles({
"--ytd-watch-flexy-width-ratio": 1,
"--ytd-watch-flexy-height-ratio": 0.5625,
})
full:
if (ytd_watch = document.querySelector('ytd-watch-flexy')) {
if (ytd_watch.calculateCurrentPlayerSize_) {
if (!ytd_watch.calculateCurrentPlayerSize_.bypassed) {
ytd_watch.calculateCurrentPlayerSize_ = sizeBypass;
ytd_watch.calculateCurrentPlayerSize_.bypassed = true;
}
if (!ytd_watch.calculateNormalPlayerSize_.bypassed) {
ytd_watch.calculateNormalPlayerSize_ = sizeBypass;
ytd_watch.calculateNormalPlayerSize_.bypassed = true;
}
}
sizeBypass();
function sizeBypass() {
let width, height;
if (!ytd_watch.theater) {
width = movie_player.offsetWidth;
height = Math.round(movie_player.offsetWidth / (16 / 9));
if (ytd_watch.updateStyles) {
ytd_watch.updateStyles({
"--ytd-watch-flexy-width-ratio": 1,
"--ytd-watch-flexy-height-ratio": 0.5625,
"--ytd-watch-width-ratio": 1,
"--ytd-watch-height-ratio": 0.5625
});
}
} else {
width = window.NaN;
height = window.NaN;
}
return {
width: width,
height: height
};
}
}
Nova uses a similar implementation but only for 4:3 video
Thumbnail opening webp
no idea what is the reason. Here is the code. Most likely a redirect is happening.
in the code of each plugin there are links to alternative implementations
https://github.com/raingart/Nova-YouTube-extension/blob/master/plugins/player/quick-buttons.js#L354-L358
Thanks for that player resize code.
I also managed to add the thumbnails code from iridium.
And I moved the buttons below the player.
Now to fix that fullscreen exit bug
BTW, Is it possible to have the page be scrolled back to where we were after exiting fullscreen?
Find bug reason with thumbnails
I forgot that 2 methods are used. One of the API gets the thumbnail. And if you try to check again, then webp disappears from the list. And not maxres but hq is returned. Next in the list in the array. I don't even know. Everything seems to be done logically. If there is an API then why not use it. And the fact that it does not work correctly.
about compatibility with plans. Send me the name of the plugin and I'll add a stigma (or whatever you prefer). I'm too lazy to do this for all plugins.
I don't have much time to take care of "probably" other scripts looking for compatibility. I think they don't care
BTW, Is it possible to have the page be scrolled back to where we were after exiting fullscreen?
I sent you a ver. with a beta rev. of the pin player plugin in PM
in the release ver. there will be an item with the setting. You will have this option applied by default after activating the `pin`
for the compatibility, I was thinking a class could be added to the root element to indicate that nova-youtube is running. But more importantly I needed this for the pinned player, seeing as that changes the page in a significant manner. Some of my css that I had in stylus I can't easily adapt to this script because of the lack of identifiers/classes.
ok, I'll think about the implementation
can now be defined
#movie_player.nova-player-pin
I noticed another issue with the pinned player. It's impossible to drag the seek bar on the player.
I guess adding its own button where the 'x' button is will solve this. Then the drag to move won't interfere with the seek bar..
seek works for me.
https://drive.google.com/file/d/12pUqw6h5iDMreSaewFawhD_yB5UCX-Xz/view?usp=share_link
Or are you talking about dragging the player?
don't know try this script
https://greasyfork.org/en/scripts/463426-pip-my-youtube/code
Those who implemented before me were much more prudent
They just pinned the video itself without a player. And there are no gaps either with the player's scaling or the label.
Essentially pip emulation
you can't imagine how much effort I spent to solve the problem - when drag/drop and clicking on the player - there was no start/stop video
and then there were bug with video 4:3
https://drive.google.com/file/d/1iWVdtf_PcOq_lKVIMOGYKo2mv2558No_/view?usp=share_link
I had to prevent the click event if it's on the seekbar. There might be a better way, but hey, it works now.
document.addEventListener('mousedown', evt => {
if (evt.target.closest('.ytp-progress-bar-container')) { return; } // prevent click drag
if (!el_target.classList.contains(CLASS_VALUE)) return;
this.dragStart.apply(this, [evt]);
});
Also, what happend to the settings page. It's missing lots of settings...
edit: Maybe the userscript can be not reliant on the github page?
A quick search showed me this: https://stackoverflow.com/questions/14594346/ Maybe it can be used here?
another thing i've noticed is that it seems to stop/pause embedded videos.
How can I disable this behavior?
It's especially annoying when we have to click multiple times to start the video, such as on discord..
Is it possible to show the length of the shorts on the thumbnail?
Instead of showing the text 'shorts', to display the exact length (these thumbnails are in subs feed).
I'm redirecting shorts to regular watch page and it's something that I would like to see.
Also is it possible to show the length of the shorts on the other vertical thumbnails (home, related, channel videos/shorts, etc)?
And finally a feature that I used to have, but just can't find a working script anymore is to show a label with the max resolution of a video directly on the thumbnail. For reference the old "Youtube Center" script by YePpHa had this feature.
Is that still possible?
Is that still possible?
possible. And even it was implemented in the previous versions. But it was disabled due to failures, limited use and low demand
Here I activated the last implementation (in the 'Redirect Shorts to regular (watch) URLs')
https://gist.github.com/raingart/e5d3d255dd9506adac9df77d85e95a24 - not tested now
>show a label with the max resolution
no idea what you're on about. Specify or throw off a piece of code in "Youtube Center" or in manual (https://github.com/YePpHa/YouTubeCenter/wiki/Features#user-content-Auto_Resolution)
Nice, that works to show the shorts length in the subs feed. A bit slow to load, but it's fine.
Those vertical thumbnails in home/related/channel/etc don't have the length, but this is still better than nothing.
- the quality label is in the overlays
https://github.com/YePpHa/YouTubeCenter/wiki/Features#overlays
I remember having it set to show in the top-right corner, it showed different colored labels for each of the different resolutions (red was 1080p, green was 720p, ...).
It was especially useful when searching something and it shows multiple of the same thing. Of course it would be best to open the one that has the highest resolution.
About labels resolutions "Youtube Center" uses an API. But it seems as a limitation, the request occurs on hover.
I previously implemented the thumbs-rating plugin and even then there were not enough quotas. There were attempts by other scripts to steal keys.
But I remembered another script:
https://greasyfork.org/en/scripts/397094-youtube-video-preview-and-ratings-keyless (It doesn't seem to work right now, but it took me 2 minutes to fix it)
It works by pretending to be an internal API request using an internal API key. When the active phase of NOVA development was underway, a universal function for searching data in any element on the page (inside tags, scripts - whatever) was created. Something similar was used in Iridium and the script above.
I tried looking for data directly stored in the thumbnail, but it turned out that there is only data about thumbnails, but not about resolutions (I added a screenshot)
It turns out that the only way known to me at the moment is an API request using the video id. The only difference is the API version.
I'll consider the implementation, but displaying such information for all thumbnails is overkill. Perhaps it is worth pointing out anomalies. When the maximum expansion is below the threshold. Most users mindlessly use opportunities. What leads to problems
Just opened network tab in dev tools. Seems like it returns pretty much everything about the video.
Most importantly it returns the length of the video even for the shorts.
Not sure how I should go about adding that label to the thumbnail...
just test my version. works disgusting. If there are a large number of thumbnails on the screen, then failures occur. Obvious result if you make a request for each thumbnail separately. It was obvious to me the wretchedness of this method.
How much useless load and code for the sake of the ephemeral "useful when searching something and it shows multiple of the same thing" - What kind of nonsense? Do you watch content or videos? When searching for a video, there is an option to specify the quality. or dates. It's the same in shorts - what's the difference between 59sec and 30sec? Therefore, I abandoned this functionality. It works like shit.
I send you the implementation if you want (check it). But there is no desire to add this garbage to Nova
A lazy load could be implemented, only ask for data on the visible thumbnails. Then as we scroll ask for those that become visible. How many can you see on one viewport? 8, maybe 10?
Another thing that could be added.
Linked comments should auto expand the comment box. Maybe an additional setting can be added for this when the comment box is collapsed/hidden.
The link with comment can be &lc= or google_comment_id.
Also I noticed that the floating progress bar sometimes can be wider than the video or the sections aren't the proper size.
I went and changed a few things in the css and it works better now.
I removed the margins and paddings, and only used border-left excluding the first-child:
Ofcourse we'll also need to use box-sizing:border-box otherwise the borders will increase the width of the bar.
#nova-player-float-progress-bar-chapters span {
border-left: 2px solid rgba(255,255,255,.55);
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nova-player-float-progress-bar-chapters span:first-child {
border: none !important;
}
I forgot about the existence of `box-sizing`
Before I figured out the chapter container API, a different type of implementation was used (it was left as a fallback). Where I calculated the size of chapters-blocks in the progress-bar. There I had to do some arithmetic:
`newChapter.style.width = (((parseInt(width, 10) + chapterMargin) / progressContainerWidth) * 100) + '%';`
There is a much simpler implementation (https://greasyfork.org/en/scripts/434990-youtube-always-show-progress-bar-forked) see other alternatives really a lot.
But my own implementation can find explicitly unmarked chapters. like in the comments. The price for this fragility of the code
// for test:
// CHAPTER without description
// https://www.youtube.com/watch?v=lQPp7xNOoe4
// https://www.youtube.com/watch?v=PtSNcZLyNaU
// MANUAL CHAPTER
// timestamp in (description + comment):
// https://www.youtube.com/watch?v=IvZOmE36PLc&lc=UgznihSt34vx093bT9p4AaABAg
// https://www.youtube.com/watch?v=Xt2sbtvBuk8&lc=UgzAWQZfFFq2nzZ4gtp4AaABAg - have 3-digit timestamps
// timestamp in pinned comment:
// https://www.youtube.com/watch?v=SgQ_Jk49FRQ
// https://www.youtube.com/watch?v=tlICDvcCkog
// https://www.youtube.com/watch?v=_-5cYbk-QYI&lc=UgxgHkAhtabuiFsFHAp4AaABAg
// timestamp in description
// https://www.youtube.com/watch?v=hLXIK9DBxAo - title of chapters before timestamp. very long text line of timestamp
About the linked comment. Previously, the lack of `:has()` css selector was a major impediment to implementation. Without "has" need to use `closest`. Or constantly wait the selectors. The function was not worth those resources.
The problem is that how to find out if there are replays and "more" in the comment? No way but to wait for the right selectors. And in the theater mode, the block of comments may not be displayed at all. It seems that waiting for a pair of selectors is not too expensive. But there are a lot of plugins, and if you thoughtlessly use such methods, the amount of resources used will accumulate like a snowball. Over the past decades, code has become much slower, while hardware resources have made a significant jump in performance. But illiterate programming erased them. I also have a lot of sub-optimal implementations. But I try to distinguish between execution speed and just code size. If the code weighs more but at the same time becomes more understandable, then it's worth it. But to donate resources and in vain gnaw at me.
Therefore, I will not implement, for example, your request for thumbs-quality-show. I can send you a vanilla JS implementation code in PM if you really need it.
I added it to the beta
https://gist.github.com/raingart/793d5bc762e041d421b644932e777eb5
I just remembered, Youtube+ had the auto expand comments if there's a linked comment, which I had added to Iridium later.
https://github.com/ParticleCore/Particle/blob/master/src/Userscript/YouTubePlus.user.js
yes indeed there is
if (window.location.search.match(/&?(lc|google_comment_id)=/)) {
modComments.wrapper.querySelector("button").click();
}
I hope you don't mind me asking but why is the script incompatible with Greasemonkey?
I don't use it, Tampermonkey has much better support for older scripts.
I also know that the new GM.functions are actually asynchronous unlike the old GM_functions which aren't supported in Greasemonkey, And can sometimes be a hassle to deal with.
But I guess a wrapper can be used so if GM_xx is available then use that, otherwise use await GM.xx.
So my question was: why Greasemonkey isn't supported? Is it because of the asynchronous nature of the APIs or is it something else?
For a complete understanding, read this thread. But general - writing to global variables
Hmm. I once needed to quickly access some things in console and couldn't read the variables from Tampermonkey.
So instead of using console.log all the time, I used @grant unsafeWindow then define them as unsafeWindow.variable and I could use them in console.
But seems like now we can just define as window.variable and it should work just fine, though it might fail in some cases. But unsafeWindow should work in all cases.
I guess Greasemonkey has it a bit more locked down than the other script managers.
Did you try with unsafeWindow?
install and try to finish it so that the variable is read in alert
Greasemonkey is too exotic. He chose his path and fell - an obvious and well-deserved outcome.
Or try to read other variables in youtube. For example movie_player
All global variables have to be accessed with unsafeWindow.variable.
Anyway, my choice of script manager is Tampermonkey which has much better support for older scripts, and a much better UI.
I actually preferred Greasemonkey before Firefox went the webextensions route and GM had to change.
Tampermonkey was terrible when it first came to Firefox, but then they surpassed the now outdated Greasemonkey.
On the Greasemonkey 4 I wanted to make a settings option. But GM just doesn't show the menu commands anywhere in the UI. It worked fine in TM but GM just failed. Even after following their instructions, it still didn't work.
>All global variables have to be accessed with unsafeWindow.variable.
Where? I'm blind and can't see
I use and test everything only on Violentmonkey
But liked [this one](https://github.com/raingart/Nova-YouTube-extension/issues/81#:~:text=easy%20to%20fix-,ScriptCat,-%2D%20fully%20compatible). Where both APIs are combined. Why didn’t others do this before, probably because in 3 years I can’t remember a single script specifically for Greasemonkey
What has Greasemonkey actually achieved? By inventing your own API. And you are the guy with the issue asking about Greasemonkey. While both use alternatives. I advise you to directly install userscript in the browser and see how the scripts will work (without an API at all). Because apparently this is the future
https://superuser.com/questions/433546/install-user-scripts-on-chrome
Actually, if I remember correctly early Chrome versions allowed installing userscripts directly into the browser, but then they locked it down and an extension was needed.
Are they reverting what they disabled all those years ago?
Yes, as I understand it, monkeys cannot work with manifest v3. Google left this option for those who will whine that it is no longer possible to install userscript. What can I say - here it is! And close the mouths of all those who disagree. And the fact that she works through the ass does not bother them
With manifest 3 adblockers will also lose functionality. AdGuard have explained this pretty well.
Userscript/styles managers will also lose the most important part, custom scripts. Here's some info about this.
Would be nice to have the player would not change size, make it always be a 16:9 ratio (add black bars if necessary).
Another thing I'd like is to have the controls always visible (basically the old smaller player), something that Youtube UI fix does, but since it hasn't been updated for quite some time, it doesn't work well anymore.
Also, a bug I've noticed with Nova Youtube is when exiting fullscreen, the floating player appears instead of the normal video.