yeppha/maia-yt

Currently codenamed maia-yt is a userscript (and browser extension) that enhances the user's experience on YouTube.

maia-yt

Currently codenamed maia-yt is a userscript (and browser extension) that enhances the user's experience on YouTube.

What's in this at the moment

It will only work for the new YouTube layout and will only repeat a video. A lot of the core functionality of this project hasn't been finalized yet.

Current plan moving forward

I will at some point also add these as issues and create proper milestones on GitHub.

Alpha milestone (current)

Before anything else, the groundwork for this project needs to be completed. Here's a simplistic overview of what needs to be done:

• Only inject scripts into the page that is necessary for it to control the player and other essential things. We don't want to degrade the performance as in the old YouTube Center.
• Player controller that will dispatch player events (play, pause, end, video quality change, etc.).
• Simple functionality like the repeat functionality. This depends on the end video event.
• Support for the new YouTube layout (including the old one)
• (Maybe UI components on the page - only for testing)
• Simple settings

Beta milestone

In this stage a lot of missing things in the first milestone will be added. This will be the first usable version.

• Implement settings UI. I might decide on a whole page/website for the settings.
• Implement a lot of basic features (haven't decided on what to add yet).
• Add Chrome extension, Edge extension, Firefox extension, Maxthon extension and Safari extension (if I'm missing some create an issue about it and I will consider adding it to the list).
• Implement an i18n system.
• ...

Release milestone

Not sure what should be in this milestone yet.

maia-yt's Issues

Implement default channel page view

Default to another channel page than home

Switch to use preact instead of react

Branch: https://github.com/YePpHa/maia-yt/tree/feat-preact

I will be switching to using preact instead of react. This is because it reduced the file size of v0.1-alpha.4 by 103 KB.

Fix issue with the auto-play patch being applied twice

Fix an issue where the auto-play patch is being applied twice. This is caused by yt.player.Application.create being called more than once.

I will need to add a check to determine whether the patch has already been applied or only just do it on the first call of yt.player.Application.create .

Implement quality module

The quality module will set the quality of the video you're watching to your preferred quality.

I've added the following options:

• Enable/disable this module
• Preferred quality, which quality that's the target for your videos.
• Whether to go for the higher qualities or the lower qualities if the preferred quality is not available for the video you're watching.

I'm not sure if I've gotten all the needed features for this module implemented.

Implement Opera extension

Process should almost be identical to #46.

End screen video links doesn't work

The video links on the end screen doesn't work if you do the following:

1. Go from a video to the channel page where the featured channel video will start playing.
2. After that go back by pressing the back button.
3. Seek to the end of the video.
4. Click on the video thumbnails displayed on the end screen.
5. Nothing happens.

Implement full upload time of videos where the upload dates are available for videos

Implement floating player when scrolling down

Disable that blue focus bracket thing on the scrollbar and volume bar that ruins shortcut.

Hi!

I thought I'd throw this in here, before it skips my mind. There's this extremely annoying feature of YT that activates every time you use the the volume bar or the scrollbar. It does nothing useful but it practically steals, ruins the arrow hotkey. When this feature is activated both up/down and left/right will do the same thing. So you'll end up seeking when you want to change the volume or the other way around.

Here are some pictures for clarity (I never found out what's the proper name of this horrible "feature"):

I know it's not the sort of feature that would be on top of the to-do list but. But it's one of the top nuisances of youtube in my opinion.

Disable loading of "Up Next" video [?]

I have searched the issues but could not find any mention of it...

the option to disable pre-loading of the "Up Next" video.

The 'Up Next' video loads and stops autoplay as expected, no problem there but I would like to prevent pre-loading completely.

I have a long list of YT filters in uBlock0 and hopefully will be able to remove those eventually.
The maia script is coming along great, thanks !

When opening one of the suggested videos in fullscreen, a broken ad appears when exiting .

At least I think it's supposed to be an ad. A box appears to the right of the player above the suggested videos with a partially visible page load error.
The ID of the page element seems to be "watch7-sidebar-offer" or "watch7-sidebar-ads".

Integrate nightly builds

Implement downloadable builds that are build every night from the master branch.

Doesn't work on embedded videos?

Is it supposed to work for embedded videos, like YTC, or not yet?

If I ask for that, of course, it's because it doesn't work for me but I have a lot of other extensions, protections etc. so maybe it's a specific problem to me.

Implement auto-play prevention

Name	Type	Description
enabled	boolean	whether to prevent auto-play.
mode	enum	the different modes of auto-play prevention: PAUSE and STOP.

Currently for the pause mode it's possible that a few milliseconds of the video will be played before it's paused. I might experiment with muting the volume or something along those lines or perhaps doing some hacky stuff to the HTML5 player.

Implement animated thumbnail

I've started work on this, however, I will need to do some more work on handling of video data before I will be finishing this.

All current progress can be found in this branch: https://github.com/YePpHa/maia-yt/tree/feat-animated-thumbnail

Implement volume change by scrolling on the player

Implement Edge extension

Implement comment country flags

This will make it easier to identify where a user originates from.

Getting "An error occurred. Please try again later. [...]" frequently.

Hi!

I've been getting this recently, maybe maia-yt has a hand in it, because I started experiencing it in roughly the same timeframe as I've been using maia.
It seems to happen after a youtube tab was idle for a while. Either a video page or after opening a video from an idle search page.

Here's an example of YT's debug info:

{
  "ns": "yt",
  "el": "detailpage",
  "cpn": "NRNsCIK4jCwxH__e",
  "ver": 2,
  "cmt": "0",
  "fs": "0",
  "rt": "22.407",
  "euri": "",
  "lact": 5,
  "cl": "",
  "mos": 0,
  "state": "80",
  "volume": 21,
  "c": "WEB",
  "cver": "1.20171004",
  "cplayer": "UNIPLAYER",
  "cbr": "Firefox",
  "cbrver": "56.0",
  "cos": "Windows",
  "cosver": "6.3",
  "hl": "en_US",
  "cr": "HU",
  "len": "0",
  "fexp": "23700224,23700451,23700586,23702322,23702700,23703266,23703840,23704161,23704248,23704745,23705218,23705739,23706129,9410705,9422596,9431754,9441152,9449243,9463611,9463830,9466594,9467502,9471239,9474594,9476026,9476327,9477103,9477113,9480475,9483010,9484238,9484473,9485000,9488038",
  "vct": "0.000",
  "vd": "NaN",
  "vpl": "",
  "vbu": "",
  "vpa": "true",
  "vsk": "false",
  "ven": "false",
  "vpr": "1",
  "vrs": "0",
  "vns": "0",
  "vec": "null",
  "vvol": "0.21",
  "creationTime": 3084666.865,
  "totalVideoFrames": 0,
  "droppedVideoFrames": 0,
  "corruptedVideoFrames": 0,
  "debug_error": {
    "errorCode": "api.invalidparam",
    "errorDetail": "invalidVideodata.1",
    "message": "An error occurred. Please try again later.",
    "messageKey": "YTP_ERROR_GENERIC_WITHOUT_LINK"
  },
  "relative_loudness": "NaN",
  "user_qual": "small",
  "0sz": false,
  "op": "",
  "yof": false,
  "dis": "",
  "gpu": "ANGLE_(NVIDIA_GeForce_GTS_450_Direct3D11_vs_5_0_ps_5_0)",
  "cgr": true,
  "debug_playbackQuality": "unknown",
  "debug_date": "Thu Oct 05 2017 15:20:51 GMT+0200"
}

Implement Player class

The player class will need to be able to do the following:

• Create a new player instance by Element. new Player(document.getElementById("movie_player"))
• Make the YouTube Player methods easily callable from the player instance.
• Player configuration are sent to the main before initializing the player.
• Propagate all events from the YouTube player to the player instance including working e.preventDefault() and e.stopPropagation(). The special YouTube Player addEventListener needs to be proxied including overwriting the methods in window (window.ytPlayeronStateChangeplayer_uid_207650594_477) for the preventDefault() to work.
• Implement SIZE_CHANGE event and other missing events.

The event onStateChange will be split into multiple events:

• UNSTARTED
• ENDED
• PLAYING
• PAUSED
• BUFFERING
• CUED

Annotations, cards, endscreens

Hi!

It might be a little early for feature issues, but it seems like none of the old scripts can disable annotations anymore. I also didn't find any that supports the "new annotations" cards end endscreens. This is actually with the old layout, but I guess the player itself is not different.
(I actually don't mind the endscreens, but the cards tend to be annoying)

So I guess it makes sense for these to be some of the earlier features to implement.

Implement disabling of 60fps

Blank space to the right of full screen video (scrollbar space?)

I'm not sure if it's a maia thing, but it's a recent thing and I thought I'd open an issue for it so others can keep an eye out.

I often notice blank white stripe appearing on the right of the video in fullscreen mode. It's exactly the same width as the scrollbar would be if it were present, so I guess it's related to the scrollbar. It disappears if leave and enter fullscreen again.

How do I build this ?

Is it possible to build this?

Implement automatic release on release-* tag.

Use Travis as a build server that will on release-* tag build a new version and upload it to Github.

Better modularity and settings accessible outside youtube

Hi!

I think a huge issue with YTC is that when one crucial thing breaks you can't use the whole script because you can't disable only that part.
I suspect sometimes it's impossible to fully disable features, or stuff breaks regardless of enabled features, because of the injected script.
On the UI side (taking YTC as example) I imagine a practical solution would be to have all the categories and subcategories have checkboxes. And if they're unchecked all of the including features would be completely omitted.
(I'm hoping the "Only inject scripts into the page that is necessary for it to control the player and other essential things." milestone supports this)

Another thing is that I can't even try to disable features if the youtube page is sufficiently broken, because the ytc settings menu is only acessible from within the youtube page itself.

Video quality preview on thumbnails.

Hi!

I think this is one of the most unique and useful features of YTC, so I thought I'd open an issue for it.

(The animating thumbnails with video content feature can also be quite useful)

Implement core module functionality

The core of Maia should call methods specified in the modules. Currently I've only added 3 methods that can be called, but I will definitely be adding more.

Name	Arguments	Description
onPlayerBeforeCreated	player	Called before the YouTube player is created.
onPlayerCreated	player	Called when a new player has been created.
onPlayerConfig	player, config	Called when a player receives a new configuration.
onPlayerData	player, data	Called when a player receives new configuration data. This can be called more times than onPlayerConfig due to only the data changing and not the configuration.
onPageNavigationFinish	detail	Called when page has finished navigating using SPF. The detail argument will contain information about the page type and whether it's from history.
onPlayerApiCall	player, name, ...args	Called whenever the player's API has been called. If onPlayerApiCallResponse is returned it will not call the API but instead return the value instead.
onSettingsReactRegister		Return instance of interface ISettingsReact.
...	...	I will be adding more of these.

Argument	Description
player	The player instance that API calls are made available from (play(), pause(), stop(), seek(), etc.).
config	The player configuration, see below for an example of the content.
data	The player configuration data. It contains information about the video that's to be played. It's also accessible from config. See below for an example of what it contains.

Example of config:

{
  "html5": true,
  "url": "https://s.ytimg.com/yts/swfbin/player-vflllF9lA/watch_as3.swf",
  "sts": 17416,
  "attrs": {
    "wmode": "transparent",
    "id": "movie_player"
  },
  "min_version": "8.0.0",
  "args": Data,
  "params": {
    "allowfullscreen": "true",
    "allowscriptaccess": "always",
    "bgcolor": "#000000"
  },
  "messages": {
    "player_fallback": [
      "Adobe Flash Player or an HTML5 supported browser is required for video playback.<br><a href=\"https://get.adobe.com/flashplayer/\">Get the latest Flash Player </a><br><a href=\"/html5\">Learn more about upgrading to an HTML5 browser</a>"
    ]
  },
  "assets": {
    "css": "/yts/cssbin/www-player-webp-vflfSMY_c.css",
    "js": "/yts/jsbin/player-en_US-vflJERB2m/base.js"
  },
  "loaded": true
}

Example of data (I've excluded a lot of content due to it containing a lot of data):

{
  ...,
  "adaptive_fmts": "index=716-1215&type=video%2Fmp4%3B+codecs%3D%22avc1.640028%22&size=1920x1080&projection_type=1&bitrate=4346774&quality_label=1080p&xtags=&url=https%3A%2F%2Fr4---sn-uqj-j2i6.googlevideo.com%2Fvideoplayback ...",
  "allow_embed": "1",
  "length_seconds": "194",
  "storyboard_spec": "https://i9.ytimg.com/sb/...",
  "thumbnail_url": "https://i.ytimg.com/vi/ID/default.jpg",
  "title": "Video title",
  ...
}

Implement Maxthon extension

Move to TypeScript

Most work has already been done in the typescript branch. However, some work is still needed for the build process and I plan on also adding some unit testing.

Current progress

• Most of the current codebase has been converted.
• Implement ability to use e.preventDefault().
• Implement handling of left over events.
• Look over the player injection.
• Finalize the build process
• Add unit testing (might not be finished before merging branch into master).

Edit: I merged the Typescript branch into master.

Implement function to create a subscription playlist

Implement adblock

Adblocker that will block ads on videos.

Name	Type	Description
enabled	boolean	whether the adblock should be enabled.
subscribedChannelsWhitelisted	boolean	whether to whitelist subscribed channel's videos.
videoBlacklist	string[]	videos to blocklist.
videoWhitelist	string[]	videos to whitelist.
channelBlacklist	string[]	channels to blocklist.
channelWhitelist	string[]	channels to whitelist.

Whitelisted videos/channels will show ads however, if any of them are blacklisted ads will not be shown.

Perhaps I will try to implement an option to block preroll ads.

Implement disabling of SPF

Implement Firefox extension

Auto show all of the video description.

By default you only get shown a few lines, you need to click, show all of it.

(Since many feature issues were opened I thought I'd open issues for features that I use in YTC, and probably aren't too complicated.)

Implement Firefox legacy extension

Clean up the webpack configurations

Implement Chrome extension

Compatibility with Greasemonkey 4

Because Greasemonkey are updating to be compatible with the new Browser Extension API, they have made a backwards incompatible change.

URL's to there blog:
http://www.greasespot.net/2017/09/greasemonkey-4-announcement.html
http://www.greasespot.net/2017/09/greasemonkey-4-for-script-authors.html

TL;DR:

• The new greasemonkey is going to use GM. variable instead of the old GM_ (both in grand and code)
• GM. returns a promise instead of a value.

Version 4 is still in alpha and not finalized yet, but i thought a heads up would be in place here

Implement settings page

Currently having this as a beta milestone. I'm not sure if I will split this one up to one in alpha and a more polished version on beta.

For the settings page it will be made completely different from how YouTube Center's settings page was done. For one it will be on a completely separate page.

As userscripts and extensions are different. I imagine that for userscripts it will take a single 404 page from YouTube and render the settings onto that page. While for extensions I will have an HTML page that will be accessible from i.e. chrome://[extension-path]/settings.html.
If the 404 page isn't an option I will most likely create a placeholder website (using github.io) that will be overwritten instead.

Implement resize

Click to load comment section. (And maybe suggestions)

Loading of comments can be quite heavy. And not really necessary until you finish viewing the video.

The same might be true for suggestions. (Though I for one use suggestions more often)

Add ability to set default volume level

Youtube still refuses to leave it where I set it...

AutoPlay patch making player not auto-play

Description

The AutoPlay patch that's being applied will prevent the code that auto-play's a video to not work. However, normally the video detail page (/watch) will execute the playVideo() method, but there's a bug in YouTube that makes the newly created player to not be registered correctly.

Reproduce

1. Go to a video
2. Go to that video's channel page with a featured video (not sure if it still breaks if there's no featured video).
3. Go back to the previous video.
4. Video will be stopped.

Workaround 1 (done)

Only apply the patch if autoplay property is set and the el is either not defined or it's detailpage.

Workaround 2

Fix YouTube's own bug and manually register the new player. This is slightly more complicated and requires some research.

Implement grid view for search

Implement watched videos

Mark videos as watched if you've watched them once (even if you haven't completed it).

add option for dark theme mode

it would be nice of you to add an option that makes sure that the dark theme mode is on for the new design and add a dark theme for the old design.

Implement theming

The new YouTube layout is using CSS variables for all colors. This will make it easy to change something from one color to another.

I'm not sure if I will implement this for the old design.

Create a proper readme.

Current readme is just a placeholder for the future of this project.

Implement ability to disable the bell notifications