lightbeam24 / customtube Goto Github PK
View Code? Open in Web Editor NEWChoose your own YouTube layout, plus some other settings!
License: MIT License
Choose your own YouTube layout, plus some other settings!
License: MIT License
Actual screenshots: 2019 video screen, 2016 video screen, 2017 home screen, 2013 video screen, 2012 video screen.
Missing screenshots: 2019 home screen, 2016 home screen, 2017 video screen, 2013 home screen, 2012 home screen.
The share button on watch pages only works on the first video I watch, if I switch to another video, the share button still acts like if I was still watching the first video. No matter how many videos I open, it always showing the first video's url.
This is the first video i opened. The share button shows the correct url.
This is the second video I opened. The share button shows the previous video's url.
And this is the third video I opened. Still showing the first video's url.
thats all (i think)
Hello, I am the lead developer of the Rehike project, and I have a fair amount of experience working with ECMAScript and I know how to design good code. If I take it correctly, you seem to have some beginner level code that has some simple mistakes that complicate the flow of your code a lot.
For example, look at this section of the main JS file that forms a triangle with nested if statements. There are a few bad things going on, notably, a lack of proper formatting and an unclear use of asynchronous code. I recommend that you format long conditional operations like this to use &&
rather than using multiple nested if statements. That is to say:
// Instead of this:
if (flags.hasOperationA) {
if (flags.hasOperationB) {
if (flags.hasOperationC) {
operationD();
}
}
}
// Do this:
if (
flags.hasOperationA &&
flags.hasOperationB &&
flags.hasOperationC
) {
operationD();
}
This approach not only makes it more clear to you and other developers what is going on here and doesn't require scrolling in the same way, but it also makes you intent more obvious and looks nicer to the eyes. It's just all around a better way to write the same thing.
I also reckon you're unfamiliar with asynchronous ECMAScript, which is fine because I made many mistakes when I first started working with it too. I highly recommend you build your APIs around Promises rather than pure setInterval
or setTimeout
calls. It sounds complicated at first, especially if you're still thinking with a synchronous mindset like I did, but it is so much easier than what you're doing right now. A benefit of using Promises is you can break up your tasks system that you used in the aforementioned examples into multiple functions that each return a Promise, with a master function that returns a status based on a composite response of the Promises. To put that simply, you can easily implement a nuanced API that has error handling functionality and so on while just using regular function-based programming like you are using. It'll be less global state to keep track of, easier to understand and maintain, and more stable.
Finally, there are quite a few behavioral quirks of how Polymer YouTube works that I haven't really written documentation on, but they're worth knowing, especially for a project of your calibre, and I wish to inform you of them. I'll share some code snippets and techniques I've used in my various Polymer modifications I've made which you can also use for certain purposes involving the modification of any Polymer HTML.
Polymer or how YouTube implements it (I'm not sure which) is very odd in that it reuses elements (and in a very weird way too). I am not sure how any of it works or the motivations for implementing this in such a manner. All I can tell you is that once a custom element (ytd
elements) is created, it will not be deleted by YouTube's scripts, but simply moved to outside the DOM. Yes, you can actually do this. I believe that you can use DOMDocument objects in ECMAScript or something similar to create a user-inaccessible element, even through Inspect Element. Though, obviously, I haven't looked into this much to prove that this is something that they do.
You can get the InnerTube API data of most ytd
elements by accessing their data
property. As an example, document.querySelector("ytd-app").data
will give you data for the entire website, including the current page and some miscellaneous information as well. This is provided in a pretty consistent format. For the main watch page contents, the data schema has hardly changed since 2016, which marks our earliest sight of it, so it has pretty much been the same for as long as we know. You can also modify this, to some degree, on certain elements, although that gets pretty complicated quickly.
If you are modifying the data of an element, it can often help to "data cycle" it. This is a term we have adopted in my little community for forcing an element to refresh its data. Here are the two methods that we developed to do this:
// The simple, "classical" method. Simply refreshes the same element:
var dataCopy = elm.data;
elm.data = {};
elm.data = dataCopy;
// The new, advanced method. Creates a new copy element to replace the original:
var newElm = elm.cloneNode();
newElm.data = elm.data;
for (var i in elm.properties)
newElm[i] = elm[i];
elm.insertAdjacentElement("afterend", newElm);
elm.remove();
I use this code snippet a lot to wait for elements that I am certain that are going to exist:
async function waitForElement(elm)
{
while (null == document.querySelector(elm))
{
await new Promise(r => requestAnimationFrame(r);
}
return document.querySelector(elm);
}
Finally, you can look through my profile or ask me further questions wherever about this. I have a good repo where I demonstrate use of a lot of what I described here called yt-anti-shorts. I highly recommend that you look through it no matter what you intend on doing with this project, since I think it is a very high quality project for modifying Polymer reliably.
OS: Windows 11 22631.1835 (Insider beta)
Browser: Firefox Nightly 116.0a1
Hey,
I read the other "issues" and it helped learn more about the project. Big respect to you lightbeam24 for making this.
I don't think that button is supposed to be up there with the logo, is it?
Apart from that - great work dude. Is there any way to support the project monetarily? Anything that allows me to remember my childhood in the modern age is priceless to me! But this does seem like something that might need constant maintenance, so best of luck to you! If the project is still around in 3, 6, 12 months from now, and still being worked on, I would be amazed and thankful.
The surprising thing to me is the sheer number of options you've gone for - one year is not enough, huh? Hey what if you could take "return youtube dislike" data, combined with real like data use it to visually represent dislikes as 5 stars, like really old youtube - 50 likes 50 dislikes could be 2.5 stars, 100 likes 50 dislikes could be 3.3333 stars, etc. I am just messing with you lol but having written that just now I like the idea myself.
Hi!!
Can you add the Watch11 classic layout which was a watchpage layout that youtube used from June 2021 up until May 2022 here are the different versions shown in this video:https://m.youtube.com/watch?v=84eafpC16XQ
I'm stuck on the 2017 layout even after reinstalling the extension and changing the style
Attempting to delete a comment creates a confirmation dialogue to confirm the deletion. This dialogue closes itself after a few hundred milliseconds before the user has an opportunity to make a selection. Refreshing the page shows that the comment has not been deleted.
Using latest version of Firefox on Windows 10. Confirmed on all layouts (while using a few other extensions). Confirmed on the 2019 layout in a clean instance of Firefox with all other extensions disabled.
I guess that in July 12, YouTube moved the Shorts from https://www.youtube.com/feed/subscriptions to a separate bar, which points to https://www.youtube.com/feed/subscriptions/shorts, but if you try to access that link directly, it's empty.
Enabling the extension, the new separate bar is gone and you don't have access to the Shorts anymore.
Note: Betas are discontinued (for now), please use the Stable version.
This issue will contain all the fixes that CustomTube Stable has gotten, but CustomTube Beta hasn't. You can use this CSS by putting it into a userstyle in the Stylus extension.
Important: These fixes are made for CustomTube V1.2.0 Beta 3. The Beta version does not update, so make sure to download the newest Beta if you don't have it.
There are currently no fixes that the Beta version hasn't gotten.
This was fixed on the June 30th update but broken by todays update. It affects all layouts and causes them to change text color when hovered over with the cursor. Minor issue,
Hello, I want to say, that the Manifest v2 is slowly being outdated, so it would be good if you update this extension to Manifest v3.
When trying to open the description box under videos, the "Show More" button often doesn't do anything. Refreshing the page fixes the problem. I tested with every layout and all of them have this issue (except the disabled option).
When I visit the YouTube homepage, it either moves rapidly up and down, or the top row of videos is slightly obscured by the bar that lets you sort by different recommended categories. This seems to be happening on every layout after 2013.
When using anything other than "Use current YouTube layout", the topbar does not become black in Cinema mode. The icons on the topbar still change color to white though, which makes them invisible.
Screenshot of how it looks:
And how it should look loke:
(Very nice addon btw, I'll likely keep using it until Google inevitably breaks it)
Something like YouTube Redux has.
Hello, this is not an issue, but a question. It would be possible to tweak/change the YouTube player's CSS to have an old Adobe flash player-like controls in 2012 layout?
NO! I'm NOT saying, that “restore the Adobe flash plug-in!”, I'm saying only Adobe flash player-like video player controls.
Thank you for understanding!
Clicking on the video pauses after a couple seconds of delay, pressing the button pauses instantly and pressing space/k pauses instantly but there is a delay to when the pause icon appears on screen.
This doesn't happen on the 2017 layout but that layout looks very strange with dark mode enabled and I'd prefer to use the polymer layout.
The sidebar sometimes won't instantly disappear if I switch from YouTube home page to any channel (In this case the “Andrej Danko” channel).
See it yourself from this short video:
https://www.mediafire.com/file/sa9vc089hzjxjdj/The_sidebar_sometimes_won%2527t_disappear_if_switching_from_YouTube_home_page_to_channel.mp4/file
Actual order of screenshots: 2019 > 2016 > 2017 > 2013 > 2012
Expected order of screenshots: 2019 > 2017 > 2016 > 2013 > 2012
Here: https://addons.mozilla.org/en-CA/firefox/addon/customtube/
This seems to cause added lag on the YouTube site.
Console logs from youtube.com:
[main.js:1532:14](moz-extension://0edcb5d9-321a-471f-8913-edb711bb2142/main.js)
TypeError: document.querySelector(...) is null
watchPageEveryLoad moz-extension://0edcb5d9-321a-471f-8913-edb711bb2142/main.js:1532
wait moz-extension://0edcb5d9-321a-471f-8913-edb711bb2142/main.js:38
(Async: setInterval handler)
waitFor moz-extension://0edcb5d9-321a-471f-8913-edb711bb2142/main.js:33
urlListen moz-extension://0edcb5d9-321a-471f-8913-edb711bb2142/main.js:818
Seems to be from this line in main.js:
if (notNeedNewString == true) {
document.querySelector("#bt-desc-upload-date #published-on").style.display = "none";
Browser: Firefox 112.0.2
Layout Select: Disabled
I like the extension so far, but there are some features I miss. One of them being the option to choose a preferred video player size. The current video player in my opinion is too small. I know if I turn off the "Force consistent video size" option, then the video player is reverted to the default YouTube size, but that's too big for my taste lol. Also the video player won't keep the 16:9 aspect ratio that way.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.