Add link to '/clear_watch_history' in '/feed/history'

Add Made with Invidious Section

CHANGELOG.md

@@ -1,10 +1,71 @@
-# 0.7.0 (2018-09-25)
-
-## Week 7: 1080p and Search Types
-
+# 0.11.0 (2018-10-23)
+
+## Week 11: FreeTube and Styling
+
+This past Friday I'm been very excited to see that FreeTube version [0.4.0](https://github.com/FreeTubeApp/FreeTube/tree/0.4.0) has been released! I'd recommend taking a look at the official patch notes, but to spoil a little bit here: FreeTube now uses the Invidious API for _all_ requests previously sent to YouTube, and has also seen support for playlists, keyboard shortcuts, and more default settings (speed, autoplay, and subtitles). I'm happy to see that FreeTube has reached 500 stars on Github, and I think it's very much deserved. I'd recommend keeping an eye on the newly-launched [FreeTube blog](https://freetube.writeas.com/) for updates on the project.
+
+Quite a few styling changes have been added this past week, including channel subscriber count to the subscribe and unsubscribe buttons. The changes sound small, but they've been a very big improvement and I'm quite satisfied with how they look. Also to note is that partial support for duration in thumbnails have been added with [#202](https://github.com/omarroth/invidious/issues/202). Overall, I think the site is becoming much more pleasing visually, and I hope to continue to improve it.
+
+I've been very pleased to see Invidious in its current state, and I believe it's many times more mature compared to even a month ago. Changes have also started slowing down a bit as it's become more mature, and therefore I'd like to transition to a monthly update schedule in order to provide more comprehensive updates for everyone. I want to thank you all for helping me reach this point. I can't say how happy I am for Invidious to be where it is now.
+
+Enjoy the rest of your week everyone, I'll see you in November!
+
+# 0.10.0 (2018-10-16)
+
+## Week 10: Subscriptions
+
+This week I'm happy to announce that subscriptions have been drastically sped up with
+35e63fa. As I mentioned last week, this essentially "caches" a user's feed, meaning that operations that previously took 20 seconds or timed out, now can load in under a second. I'd take a look at [#173](https://github.com/omarroth/invidious/issues/173) for a sample benchmark. Previously features that made Invidious's feed so useful, such as filtering by unseen and by author would take too long to load, and so instead would timeout. I'm very happy that this has been fixed, and folks can get back to using these features.
+
+Among some smaller features that have been added this week include [#118](https://github.com/omarroth/invidious/issues/118), which adds, in my opinion, some very attractive subscribe and unsubscribe buttons. I think it's also a bit of a functional improvement as well, since it doesn't require a user to reload the page in order to subscribe or unsubscribe to a channel, and also gives the opportunity to put the channel's sub count on display.
+
+An option to swap between Reddit and YouTube comments without a page reload has been added with
+5eefab6, bringing it somewhat closer in functionality to the popular [AlienTube](https://github.com/xlexi/alientube) extension, on which it is based (although the extension unfortunately appears now to be fragmented).
+
+As always, there are a couple smaller improvements this week, including some minor fixes for geo-bypass with
+e46e618 and [`245d0b5`](https://github.com/omarroth/invidious/245d0b5), playlist preferences with [`81b4477`](https://github.com/omarroth/invidious/81b4477), and YouTube comments with [`02335f3`](https://github.com/omarroth/invidious/02335f3).
+
+This coming week I'd also recommend keeping an eye on the excellent [FreeTube](https://github.com/FreeTubeApp/FreeTube), which is looking forward to a new release. I've been very lucky to work with [**@PrestonN**](https://github.com/PrestonN) for the past few weeks to improve the Invidious API, and I'm quite looking forward to the new release.
+
+That's all for this week folks, thank you all again for your continued interest and support.
+
+# 0.9.0 (2018-10-08)
+
+## Week 9: Playlists
+
+Not as much to announce this week, but I'm still quite happy to announce a couple things, namely:
+
+Playback support for playlists has finally been added with [`88430a6`](https://github.com/omarroth/invidious/88430a6). You can now view playlists with the `&list=` query param, as you would on YouTube. You can also view mixes with the mentioned `&list=`, although they require some extra handling that I would like to add in the coming week, as well as adding playlist looping and shuffle. I think playback support has been a roadblock for more exciting features such as [#114](https://github.com/omarroth/invidious/issues/114), and I look forward to improving the experience.
+
+Comments have had a bit of a cosmetic upgrade with [#132](https://github.com/omarroth/invidious/issues/132), which I think helps better distinguish between Reddit and YouTube comments, as it makes them appear similarly to their respective sites. You can also now switch between YouTube and Reddit comments with a push of a button, which I think is quite an improvement, especially for newer or less popular videos with fewer comments.
+
+I've had a small breakthrough in speeding up users' subscription feeds with PostgreSQL's [materialized views](https://www.postgresql.org/docs/current/static/rules-materializedviews.html). Without going into too much detail, materialized views essentially cache the result of a query, making it possible to run resource-intensive queries once, rather than every time a user visits their feed. In the coming week I hope to push this out to users, and hopefully close [#173](https://github.com/omarroth/invidious/issues/173).
+
+I haven't had as much time to work on the project this week, but I'm quite happy to have added some new features. Have a great week everyone.
+
+# 0.8.0 (2018-10-02)
+
+## Week 8: Mixes
+
+Hello again!
+
+Mixes have been added with [`20130db`](https://github.com/omarroth/invidious/20130db), which makes it easy to create a playlist of related content. See [#188](https://github.com/omarroth/invidious/issues/188) for more info on how they work. Currently, they return the first 50 videos rather than a continuous feed to avoid tracking by Google/YouTube, which I think is a good trade-off between usability and privacy, and I hope other folks agree. You can create mixes by adding `RD` to the beginning of a video ID, an example is provided [here](https://www.invidio.us/mix?list=RDYE7VzlLtp-4) based on Big Buck Bunny. I've been quite happy with the results returned for the mixes I've tried, and it is not limited to music, which I think is a big plus. To emulate a continuous feed provided many are used to, using the last video of each mix as a new 'seed' has worked well for me. In the coming week I'd like to to add playback support in the player to listen to these easily.
+
+A very big thanks to [**@flourgaz**](https://github.com/flourgaz) for Docker support with [#186](https://github.com/omarroth/invidious/pull/186). This is an enormous improvement in portability for the project, and opens the door for Heroku support (see [#162](https://github.com/omarroth/invidious/issues/162)), and seamless support on Windows. For most users, it should be as easy as running `docker-compose up`.
+
+I've spent quite a bit of time this past week improving support for geo-bypass (see [#92](https://github.com/omarroth/invidious/issues/92)), and am happy to note that Invidious has been able to proxy ~50% of the geo-restricted videos I've tried. In addition, you can now watch geo-restricted videos if you have `dash` enabled as your `preferred quality`, for more details see [#34](https://github.com/omarroth/invidious/issues/34) and [#185](https://github.com/omarroth/invidious/issues/185), or last week's update. For folks interested in replicating these results for themselves, I'd take a look [here](https://gist.github.com/omarroth/3ce0f276c43e0c4b13e7d9cd35524688) for the script used, and [here](https://gist.github.com/omarroth/beffc4a76a7b82a422e1b36a571878ef) for a list of videos restricted in the US.
+
+1080p has seen a fairly smooth roll-out, although there have been a couple issues reported, mainly [#193](https://github.com/omarroth/invidious/issues/193), which is likely an issue in the player. I've also encountered a couple other issues myself that I would like to investigate. Although none are major, I'd like to keep 1080p opt-in for registered users another week to better address these issues.
+
+Have an excellent week everyone.
+
+# 0.7.0 (2018-09-25)
+
+## Week 7: 1080p and Search Types
+
 Hello again everyone! I've got quite a couple announcements this week:
 
-Experimental 1080p support has been added with [`b3ca392`](https://github.com/omarroth/invidious/b3ca392)2a9073b4abb0d7fde58a3e6098668f53e, and can be enabled by going to preferences and changing `preferred video quality` to `dash`. You can find more details [here](https://github.com/omarroth/invidious/issues/34#issuecomment-424171888). Currently quality and speed controls have not yet been integrated into the player, but I'd still appreciate feedback, mainly on any issues with buffering or DASH playback. I hope to integrate 1080p support into the player and push support site-wide in the coming weeks.
+Experimental 1080p support has been added with [`b3ca392`](https://github.com/omarroth/invidious/b3ca392), and can be enabled by going to preferences and changing `preferred video quality` to `dash`. You can find more details [here](https://github.com/omarroth/invidious/issues/34#issuecomment-424171888). Currently quality and speed controls have not yet been integrated into the player, but I'd still appreciate feedback, mainly on any issues with buffering or DASH playback. I hope to integrate 1080p support into the player and push support site-wide in the coming weeks.
 
 You can now filter content types in search with the `type:TYPE` filter. Supported content types are `playlist`, `channel`, and `video`. More info is available [here](https://github.com/omarroth/invidious/issues/126#issuecomment-423823148). I think this is quite an improvement in usability and I hope others find the same.
 
@@ -13,19 +74,20 @@ A [CHANGELOG](https://github.com/omarroth/invidious/blob/master/CHANGELOG.md) ha
 Recently, users have been reporting 504s when attempting to access their subscriptions, which is tracked in [#173](https://github.com/omarroth/invidious/issues/173). This is most likely caused by an uptick in usage, which I am absolutely grateful for, but unfortunately has resulted in an increase in costs for hosting the site, which is why I will be bumping my goal on Patreon from $60 to $80. I would appreciate any feedback on how subscriptions could be improved.
 
 Other minor improvements include:
-- Additional regions added to bypass geo-block with [`9a78523`](https://github.com/omarroth/invidious/9a78523)41d9d67b6bddd8a9836c1b71c124c3614
-- Fix for playlists containing less than 100 videos (previously shown as empty) with [`35ac887`](https://github.com/omarroth/invidious/35ac887)13320a970e3a87a26249c2a18a709f020
-- Fix for `published` date for Reddit comments (previously showing negative seconds) with [`6e09202`](https://github.com/omarroth/invidious/6e09202)6d29eccc3e3adf02be138fddec2354027
 
-Thank you everyone for your support!
-
-# 0.6.0 (2018-09-18)
-
-## Week 6: Filters and Thumbnails
-
+- Additional regions added to bypass geo-block with [`9a78523`](https://github.com/omarroth/invidious/9a78523)
+- Fix for playlists containing less than 100 videos (previously shown as empty) with [`35ac887`](https://github.com/omarroth/invidious/35ac887)
+- Fix for `published` date for Reddit comments (previously showing negative seconds) with [`6e09202`](https://github.com/omarroth/invidious/6e09202)
+
+Thank you everyone for your support!
+
+# 0.6.0 (2018-09-18)
+
+## Week 6: Filters and Thumbnails
+
 Hello again! This week I'm happy to mention a couple new features to search as well as some miscellaneous usability improvements.
 
-You can now constrain your search query to a specific channel with the `channel:CHANNEL` filter (see [#165](https://github.com/omarroth/invidious/issues/165) for more details). Unfortunately, other search filters combined with channel search are not yet supported. I hope to add support for them in the coming weeks. 
+You can now constrain your search query to a specific channel with the `channel:CHANNEL` filter (see [#165](https://github.com/omarroth/invidious/issues/165) for more details). Unfortunately, other search filters combined with channel search are not yet supported. I hope to add support for them in the coming weeks.
 
 You can also now search only your subscriptions by adding `subscriptions:true` to your query (see [#30](https://github.com/omarroth/invidious/issues/30) for more details). It's not quite ready for widespread use but I would appreciate feedback as the site updates to fully support it. Other search filters are not yet supported with `subscriptions:true`, but I hope to add more functionality to this as well.
 
@@ -35,12 +97,12 @@ As a smaller improvement to the site, you can also now view RSS feeds for playli
 
 These updates are also now listed under Github's [releases](https://github.com/omarroth/invidious/releases). I'm also planning on adding them as a `CHANGELOG.md` in the repository itself so people can receive a copy with the project's source.
 
-That's all for this week. Thank you everyone for your support!
-
-# 0.5.0 (2018-09-11)
-
-## Week 5: Privacy and Security
-
+That's all for this week. Thank you everyone for your support!
+
+# 0.5.0 (2018-09-11)
+
+## Week 5: Privacy and Security
+
 I hope everyone had a good weekend! This past week I've been fixing some issues that have been brought to my attention to help better protect users and help them keep their anonymity.
 
 An issue with open referers has been fixed with [`29a2186`](https://github.com/omarroth/invidious/29a2186), which prevents potential redirects to external sites on actions such as login or modifying preferences.
@@ -51,7 +113,7 @@ A potential XSS vector has also been fixed in YouTube comments with [`8c45694`](
 
 All the above vulnerabilities were brought to my attention by someone who wishes to remain anonymous, but I would like to say again here how thankful I am. If anyone else would like to get in touch please feel free to email me at omarroth@hotmail.com or omarroth@protonmail.com.
 
-This week a couple changes have been made to better protect user's privacy as well. 
+This week a couple changes have been made to better protect user's privacy as well.
 All CSS and JS assets are now served locally with [`3ec684a`](https://github.com/omarroth/invidious/3ec684a), which means users no longer need to whitelist unpkg.com. Although I personally have encountered few issues, I understand that many folks would like to keep their browsing activity contained to as few parties as possible. In the coming week I also hope to proxy YouTube images, so that no user data is sent to Google.
 
 YouTube links in comments now should redirect properly to the Invidious alternate with [`1c8bd67`](https://github.com/omarroth/invidious/1c8bd67) and [`cf63c82`](https://github.com/omarroth/invidious/cf63c82), so users can more easily evade Google tracking.
@@ -67,12 +129,12 @@ Folks have also probably noticed that the gutters on either side of the screen h
 "Music", "Sports", and "Popular on YouTube" channels now properly display their videos. You can subscribe to these channels just as you would normally.
 
 This coming week I'm planning on spending time with my family, so I unfortunately may not be as responsive. I do still hope to add some smaller features for next week however, and I hope to continue development soon.
-Thank you everyone again for your support.
-
-# 0.4.0 (2018-09-06)
-
-## Week 4: Genre Channels
-
+Thank you everyone again for your support.
+
+# 0.4.0 (2018-09-06)
+
+## Week 4: Genre Channels
+
 Hello! I hope everyone enjoyed their weekend. Without further ado:
 Just today genre channels have been added with [#119](https://github.com/omarroth/invidious/issues/119). More information on genre channels is available [here](https://support.google.com/youtube/answer/2579942). You can subscribe to them as normally, and view them as RSS. I think they offer an interesting alternative way to find new content and I hope people find them useful.
 
@@ -84,12 +146,12 @@ One of the major use cases for Invidious is as a stripped-down version of YouTub
 
 Finally, I'm pleased to announce that Invidious has hit 100 stars on GitHub. I am very happy that Invidious has proven to be useful to so many people, and I can't say how grateful I am to everyone for their continued support.
 
-Enjoy the rest of your week everyone!
-
-# 0.3.0 (2018-09-06)
-
-## Week 3: Quality of Life
-
+Enjoy the rest of your week everyone!
+
+# 0.3.0 (2018-09-06)
+
+## Week 3: Quality of Life
+
 Hello everyone! This week I've been working on some smaller features that will hopefully make the site more functional.
 Search filters have been added with [#126](https://github.com/omarroth/invidious/issues/126). You can now specify 'sort', 'date', 'duration', and 'features' within your query using the 'operator:value' syntax. I'd recommend taking a look [here](https://github.com/omarroth/invidious/blob/master/src/invidious/search.cr#L33-L114) for a list of supported options and at [#126](https://github.com/omarroth/invidious/issues/126) for some examples. This also opens the door for features such as [#30](https://github.com/omarroth/invidious/issues/30) which can be implemented as filters. I think advanced search is a major point in which Invidious can improve on YouTube and hope to add more features soon!
 
@@ -101,12 +163,12 @@ I'd also like to announce that I've set up an account on [Liberapay](https://lib
 
 [Two weeks ago](https://github.com/omarroth/invidious/releases/tag/0.1.0) I mentioned adding 1080p support into the player. Currently, the only thing blocking is [#207](https://github.com/videojs/http-streaming/pull/207) in the excellent [http-streaming](https://github.com/videojs/http-streaming) library. I hope to work with the videojs team to merge it soon and finally implement 1080p support!
 
-That's all for this week, thank you again everyone for your support! 
-
-# 0.2.0 (2018-09-06)
-
-## Week 2: Toward Playlists
-
+That's all for this week, thank you again everyone for your support!
+
+# 0.2.0 (2018-09-06)
+
+## Week 2: Toward Playlists
+
 Sorry for the late update! Not as much to announce this week, but still a couple things of note:
 I'm happy to announce that a playlists page and API endpoint has been added so you can now view playlists. Currently, you cannot watch playlists through the player, but I hope to add that in the coming week as well as adding functionality to add and modify playlists. There is a good conversation on [#114](https://github.com/omarroth/invidious/issues/114) about giving playlists even more functionality, which I think is interesting and would appreciate feedback on.
 
@@ -116,16 +178,16 @@ A couple of miscellaneous features and bugfixes:
 
 - You can now login to Invidious simultaneously from multiple devices - [#109](https://github.com/omarroth/invidious/issues/109)
 
-- Added a note for scheduled livestreams - [#124](https://github.com/omarroth/invidious/issues/124) 
+- Added a note for scheduled livestreams - [#124](https://github.com/omarroth/invidious/issues/124)
 
-- Changed YouTube comment header to "View x comments" - [#120](https://github.com/omarroth/invidious/issues/120) 
+- Changed YouTube comment header to "View x comments" - [#120](https://github.com/omarroth/invidious/issues/120)
+
+Enjoy your week everyone!
+
+# 0.1.0 (2018-09-06)
+
+## Week 1: Invidious API and Geo-Bypass
 
-Enjoy your week everyone!
-
-# 0.1.0 (2018-09-06)
-
-## Week 1: Invidious API and Geo-Bypass
-
 Hello everyone! This past week there have been quite a few things worthy of mention:
 
 I'm happy to announce the [Invidious Developer API](https://github.com/omarroth/invidious/wiki/API). The Invidious API does not use any of the official YouTube APIs, and instead crawls the site to provide a JSON interface for other developers to use. It's still under development but is already powering [CloudTube](https://github.com/cloudrac3r/cadencegq). The API currently does not have a quota (compared to YouTube) which I hope to continue thanks to continued support from my Patrons. Hopefully other developers find it useful, and I hope to continue to improve it so it can better serve the community.
@@ -134,4 +196,4 @@ Just today partial support for bypassing geo-restrictions has been added with [f
 
 Support for generating DASH manifests has been fixed, in the coming week I hope to integrate this functionality into the watch page, so users can view videos in 1080p and above.
 
-Thank you everyone for your continued interest and support!
+Thank you everyone for your continued interest and support!

README.md

@@ -2,7 +2,7 @@
 
 ## Invidious is an alternative front-end to YouTube
 
-- Audio-only (and no need to keep window open on mobile)
+- Audio-only mode (and no need to keep window open on mobile)
 - [Open-source](https://github.com/omarroth/invidious) (AGPLv3 licensed)
 - No ads
 - No need to create a Google account to save subscriptions
@@ -18,8 +18,9 @@
 - Set default player options (speed, quality, autoplay, loop)
 - Does not require JS to play videos
 - Support for Reddit comments in place of YT comments
-- Import/Export subscriptions, watch history, preference
+- Import/Export subscriptions, watch history, preferences
 - Does not use any of the official YouTube APIs
+- Developer [API](https://github.com/omarroth/invidious/wiki/API)
 
 Liberapay: https://liberapay.com/omarroth  
 Patreon: https://patreon.com/omarroth  
@@ -51,47 +52,65 @@ $ docker volume rm invidious_postgresdata
 $ docker-compose build
 ```
 
-### Installing [Crystal](https://github.com/crystal-lang/crystal):
-
-#### On Arch:
+### Arch Linux:
 
 ```bash
-$ sudo pacman -S shards crystal
-$ shards
-```
+# Install dependencies
+$ sudo pacman -S shards crystal imagemagick librsvg
 
-#### On OSX:
+# Setup PostgresSQL
+$ sudo systemctl enable postgresql
+$ sudo systemctl start postgresql
+$ sudo -i -u postgres
+$ createuser -s YOUR_USER_NAME
+$ createdb      YOUR_USER_NAME
+$ exit
 
-```bash
-$ brew update
-$ brew install shards crystal-lang
-$ shards
-```
-
-### Installing Postgres:
-
-#### On Arch:
-
-Install according to the [wiki](https://wiki.archlinux.org/index.php/PostgreSQL#Installing_PostgreSQL)
-
-#### On OSX:
-
-```bash
-$ brew install postgres
-```
-
-### Setup Postgres:
-
-```bash
+# Setup Invidious
+$ git clone https://github.com/omarroth/invidious
+$ cd invidious
 $ ./setup.sh
+$ shards
+$ crystal build src/invidious.cr --release
 ```
 
-### Installing ImageMagick (required for CAPTCHA):
-
-#### On Arch:
+### On Ubuntu:
 
 ```bash
-$ sudo pacman -S imagemagick librsvg
+# Install dependencies
+$ curl -sSL https://dist.crystal-lang.org/apt/setup.sh | sudo bash
+$ sudo apt update
+$ sudo apt install crystal libssl-dev libxml2-dev libyaml-dev libgmp-dev libreadline-dev librsvg2-dev postgresql imagemagick
+
+# Setup PostgreSQL
+$ sudo systemctl enable postgresql
+$ sudo systemctl start postgresql
+$ sudo -i -u postgres
+$ createuser -s YOUR_USER_NAME_HERE
+$ createdb      YOUR_USER_NAME_HERE
+$ exit
+
+# Setup Invidious
+$ git clone https://github.com/omarroth/invidious
+$ cd invidious
+$ ./setup.sh
+$ shards
+$ crystal build src/invidious.cr --release
+```
+
+### On OSX:
+
+```bash
+# Install dependencies
+$ brew update
+$ brew install shards crystal-lang postgres imagemagick librsvg
+
+# Setup Invidious
+$ git clone https://github.com/omarroth/invidious
+$ cd invidious
+$ ./setup.sh
+$ shards
+$ crystal build src/invidious.cr --release
 ```
 
 ## Usage:
@@ -110,6 +129,8 @@ Usage: invidious [arguments]
                                      Number of threads for crawling (default: 1)
     -c THREADS, --channel-threads=THREADS
                                      Number of threads for refreshing channels (default: 1)
+    -f THREADS, --feed-threads=THREADS
+                                     Number of threads for refreshing feeds (default: 1)
     -v THREADS, --video-threads=THREADS
                                      Number of threads for refreshing videos (default: 1)
 ```
@@ -125,7 +146,15 @@ $ ./sentry
 
 - [Alternate Tube Redirector](https://addons.mozilla.org/en-US/firefox/addon/alternate-tube-redirector/): Automatically open Youtube Videos on alternate sites like Invidious or Hooktube.
 - [Invidious Redirect](https://greasyfork.org/en/scripts/370461-invidious-redirect): Redirects Youtube URLs to Invidio.us (userscript)
+- [iPhone Redirector Shortcut](https://www.icloud.com/shortcuts/6bbf26d989cf4d07a5fe1626efbc0950): Automatically open YouTube videos in Invidious (iPhone shortcut)
 - [Invidio.us embed](https://greasyfork.org/en/scripts/370442-invidious-embed): Replaces YouTube embeds with Invidio.us embeds (userscript)
+- [Invidious Downloader](https://github.com/erupete/InvidiousDownloader): Tampermonkey userscript for downloading videos or audio on Invidious (userscript)
+
+## Made with Invidious
+
+- [FreeTube](https://github.com/FreeTubeApp/FreeTube): An Open Source YouTube app for privacy.
+- [CloudTube](https://github.com/cloudrac3r/cadencegq): Website featuring pastebin, image host, and YouTube player
+- [PeerTubeify](https://gitlab.com/Ealhad/peertubeify): On YouTube, displays a link to the same video on PeerTube, if it exists.
 
 ## Contributing
 

assets/.well-known/dnt-policy.txt

@@ -0,0 +1,218 @@
+Do Not Track Compliance Policy 
+
+Version 1.0
+
+This domain complies with user opt-outs from tracking via the "Do Not Track"
+or "DNT" header  [http://www.w3.org/TR/tracking-dnt/].  This file will always
+be posted via HTTPS at https://example-domain.com/.well-known/dnt-policy.txt
+to indicate this fact.
+
+SCOPE
+
+This policy document allows an operator of a Fully Qualified Domain Name
+("domain") to declare that it respects Do Not Track as a meaningful privacy
+opt-out of tracking, so that privacy-protecting software can better determine
+whether to block or anonymize communications with this domain.  This policy is
+intended first and foremost to be posted on domains that publish ads, widgets,
+images, scripts and other third-party embedded hypertext (for instance on
+widgets.example.com), but it can be posted on any domain, including those users
+visit directly (such as www.example.com). The policy may be applied to some
+domains used by a company, site, or service, and not to others.  Do Not Track
+may be sent by any client that uses the HTTP protocol, including websites,
+mobile apps, and smart devices like TVs. Do Not Track also works with all
+protocols able to read HTTP headers, including SPDY.
+
+NOTE: This policy contains both Requirements and Exceptions. Where possible
+terms are defined in the text, but a few additional definitions are included
+at the end.
+
+REQUIREMENTS
+
+When this domain receives Web requests from a user who enables DNT by actively
+choosing an opt-out setting in their browser or by installing software that is
+primarily designed to protect privacy ("DNT User"), we will take the following
+measures with respect to those users' data, subject to the Exceptions, also
+listed below:  
+
+1. END USER IDENTIFIERS:         
+
+  a. If a DNT User has logged in to our service, all user identifiers, such as
+     unique or nearly unique cookies, "supercookies" and fingerprints are 
+     discarded as soon as the HTTP(S) response is issued.                                    
+
+     Data structures which associate user identifiers with accounts may be
+     employed to recognize logged in users per Exception 4 below, but may not
+     be associated with records of the user's activities unless otherwise
+     excepted.
+
+  b. If a DNT User is not logged in to our service, we will take steps to ensure 
+     that no user identifiers are transmitted to us at all.         
+
+2. LOG RETENTION: 
+
+  a. Logs with DNT Users' identifiers removed (but including IP addresses and
+     User Agent strings) may be retained for a period of 10 days or less,
+     unless an Exception (below) applies. This period of time balances privacy
+     concerns with the need to ensure that log processing systems have time to
+     operate; that operations engineers have time to monitor and fix technical
+     and performance problems; and that security and data aggregation systems
+     have time to operate.
+
+  b. These logs will not be used for any other purposes.         
+
+3. OTHER DOMAINS: 
+
+  a. If this domain transfers identifiable user data about DNT Users to
+     contractors, affiliates or other parties, or embeds from or posts data to
+     other domains, we will either:         
+
+  b. ensure that the operators of those domains abide by this policy overall
+     by posting it at /.well-known/dnt-policy.txt via HTTPS on the domains in
+     question,
+
+    OR
+
+     ensure that the recipient's policies and practices require the recipient
+     to respect the policy for our DNT Users' data.
+
+    OR  
+
+     obtain a contractual commitment from the recipient to respect this policy
+     for our DNT Users' data.
+
+    NOTE: if an “Other Domain” does not receive identifiable user information
+    from the domain because such information has been removed, because the
+    Other Domain does not log that information, or for some other reason, these
+    requirements do not apply.
+
+  c. "Identifiable" means any records which are not Anonymized or otherwise
+     covered by the Exceptions below.
+
+4. PERIODIC REASSERTION OF COMPLIANCE: 
+
+  At least once every 12 months, we will take reasonable steps commensurate
+  with the size of our organization and the nature of our service to confirm
+  our ongoing compliance with this document, and we will publicly reassert our
+  compliance.
+
+5. USER NOTIFICATION: 
+
+  a. If we are required by law to retain or disclose user identifiers, we will
+     attempt to provide the users with notice (unless we are prohibited or it
+     would be futile) that a request for their information has been made in
+     order to give the users an opportunity to object to the retention or
+     disclosure.
+
+  b. We will attempt to provide this notice by email, if the users have given
+     us an email address, and by postal mail if the users have provided a
+     postal address.                                   
+
+  c. If the users do not challenge the disclosure request, we may be legally
+     required to turn over their information.
+
+  d. We may delay notice if we, in good faith, believe that an emergency
+     involving danger of death or serious physical injury to any person
+     requires disclosure without delay of information relating to the
+     emergency.
+
+EXCEPTIONS
+
+Data from DNT Users collected by this domain may be logged or retained only in
+the following specific situations:
+
+1. CONSENT / "OPT BACK IN"         
+
+  a. DNT Users are opting out from tracking across the Web.  It is possible
+     that for some feature or functionality, we will need to ask a DNT User to
+     "opt back in" to be tracked by us across the entire Web.                                    
+
+  b. If we do that, we will take reasonable steps to verify that the users who
+     select this option have genuinely intended to opt back in to tracking.
+     One way to do this is by performing scientifically reasonable user
+     studies with a representative sample of our users, but smaller
+     organizations can satisfy this requirement by other means.         
+
+  c. Where we believe that we have opt back in consent, our server will
+     send a tracking value status header "Tk: C" as described in section 6.2
+     of the W3C Tracking Preference Expression draft:
+
+     http://www.w3.org/TR/tracking-dnt/#tracking-status-value
+
+2. TRANSACTIONS         
+
+   If a DNT User actively and knowingly enters a transaction with our
+   services (for instance, clicking on a clearly-labeled advertisement,
+   posting content to a widget, or purchasing an item), we will retain
+   necessary data for as long as required to perform the transaction. This
+   may for example include keeping auditing information for clicks on
+   advertising links; keeping a copy of posted content and the name of the
+   posting user; keeping server-side session IDs to recognize logged in
+   users; or keeping a copy of the physical address to which a purchased
+   item will be shipped.  By their nature, some transactions will require data
+   to be retained indefinitely.
+
+3. TECHNICAL AND SECURITY LOGGING:                   
+
+  a. If, during the processing of the initial request (for unique identifiers)
+     or during the subsequent 10 days (for IP addresses and User Agent strings),
+     we obtain specific information that causes our employees or systems to
+     believe that a request is, or is likely to be, part of a security attack,
+     spam submission, or fraudulent transaction, then logs of those requests 
+     are not subject to this policy.                                   
+
+  b. If we encounter technical problems with our site, then, in rare
+     circumstances, we may retain logs for longer than 10 days, if that is
+     necessary to diagnose and fix those problems, but this practice will not be
+     routinized and we will strive to delete such logs as soon as possible.         
+
+4. AGGREGATION:
+
+  a. We may retain and share anonymized datasets, such as aggregate records of
+     readership patterns; statistical models of user behavior; graphs of system
+     variables; data structures to count active users on monthly or yearly
+     bases; database tables mapping authentication cookies to logged in
+     accounts; non-unique data structures constructed within browsers for tasks
+     such as ad frequency capping or conversion tracking; or logs with truncated
+     and/or encrypted IP addresses and simplified User Agent strings.
+
+  b. "Anonymized" means we have conducted risk mitigation to ensure
+     that the dataset, plus any additional information that is in our
+     possession or likely to be available to us, does not allow the
+     reconstruction of reading habits, online or offline activity of groups of
+     fewer than 5000 individuals or devices. 
+
+  c. If we generate anonymized datasets under this exception we will publicly
+     document our anonymization methods in sufficient detail to allow outside
+     experts to evaluate the effectiveness of those methods.
+
+5. ERRORS: 
+
+From time to time, there may be errors by which user data is temporarily
+logged or retained in violation of this policy.  If such errors are
+inadvertent, rare, and made in good faith, they do not constitute a breach
+of this policy.  We will delete such data as soon as practicable after we
+become aware of any error and take steps to ensure that it is deleted by any
+third-party who may have had access to the data.
+
+ADDITIONAL DEFINITIONS
+
+"Fully Qualified Domain Name" means a domain name that addresses a computer
+connected to the Internet.  For instance, example1.com; www.example1.com;
+ads.example1.com; and widgets.example2.com are all distinct FQDNs.
+
+"Supercookie" means any technology other than an HTTP Cookie which can be used
+by a server to associate identifiers with the clients that visit it.  Examples
+of supercookies include Flash LSO cookies, DOM storage, HTML5 storage, or
+tricks to store information in caches or etags.
+
+"Risk mitigation" means an engineering process that evaluates the possibility
+and likelihood of various adverse outcomes, considers the available methods of
+making those adverse outcomes less likely, and deploys sufficient mitigations
+to bring the probability and harm from adverse outcomes below an acceptable
+threshold.
+
+"Reading habits" includes amongst other things lists of visited DNS names, if
+those domains pertain to specific topics or activities, but records of visited
+DNS names are not reading habits if those domain names serve content of a very
+diverse and general nature, thereby revealing minimal information about the
+opinions, interests or activities of the user.

assets/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

assets/css/default.css

@@ -17,6 +17,57 @@ div {
   animation: spin 2s linear infinite;
 }
 
+.playlist-restricted {
+  height: 20em;
+  padding-right: 10px;
+}
+
+a.pure-button-primary {
+  background-color: #a0a0a0;
+  color: rgba(35, 35, 35, 1);
+}
+
+a.pure-button-primary:hover {
+  background-color: rgba(0, 182, 240, 1);
+  color: #fff;
+}
+
+div.thumbnail {
+  position: relative;
+}
+
+img.thumbnail {
+  width: 100%;
+  left: 0;
+  top: 0;
+}
+
+.length {
+  z-index: 100;
+  position: absolute;
+  background-color: rgba(35, 35, 35, 0.75);
+  color: #fff;
+  border-radius: 2px;
+  padding: 2px;
+  font-size: 16px;
+  font-family: sans-serif;
+  right: 0.5em;
+  bottom: -0.5em;
+}
+
+.watched {
+  z-index: 100;
+  position: absolute;
+  background-color: rgba(35, 35, 35, 0.75);
+  color: #fff;
+  border-radius: 2px;
+  padding: 4px 8px 4px 8px;
+  font-size: 16px;
+  font-family: sans-serif;
+  left: 0.2em;
+  top: -0.7em;
+}
+
 /*
  * Navbar
  */

assets/js/videojs.hotkeys.js

@@ -0,0 +1,413 @@
+/*
+ * Video.js Hotkeys
+ * https://github.com/ctd1500/videojs-hotkeys
+ *
+ * Copyright (c) 2015 Chris Dougherty
+ * Licensed under the Apache-2.0 license.
+ */
+
+;(function(root, factory) {
+  if (typeof window !== 'undefined' && window.videojs) {
+    factory(window.videojs);
+  } else if (typeof define === 'function' && define.amd) {
+    define('videojs-hotkeys', ['video.js'], function (module) {
+      return factory(module.default || module);
+    });
+  } else if (typeof module !== 'undefined' && module.exports) {
+    module.exports = factory(require('video.js'));
+  }
+}(this, function (videojs) {
+  "use strict";
+  if (typeof window !== 'undefined') {
+    window['videojs_hotkeys'] = { version: "0.2.22" };
+  }
+
+  var hotkeys = function(options) {
+    var player = this;
+    var pEl = player.el();
+    var doc = document;
+    var def_options = {
+      volumeStep: 0.1,
+      seekStep: 5,
+      enableMute: true,
+      enableVolumeScroll: true,
+      enableHoverScroll: true,
+      enableFullscreen: true,
+      enableNumbers: true,
+      enableJogStyle: false,
+      alwaysCaptureHotkeys: false,
+      enableModifiersForNumbers: true,
+      enableInactiveFocus: true,
+      skipInitialFocus: false,
+      playPauseKey: playPauseKey,
+      rewindKey: rewindKey,
+      forwardKey: forwardKey,
+      volumeUpKey: volumeUpKey,
+      volumeDownKey: volumeDownKey,
+      muteKey: muteKey,
+      fullscreenKey: fullscreenKey,
+      customKeys: {}
+    };
+
+    var cPlay = 1,
+      cRewind = 2,
+      cForward = 3,
+      cVolumeUp = 4,
+      cVolumeDown = 5,
+      cMute = 6,
+      cFullscreen = 7;
+
+    // Use built-in merge function from Video.js v5.0+ or v4.4.0+
+    var mergeOptions = videojs.mergeOptions || videojs.util.mergeOptions;
+    options = mergeOptions(def_options, options || {});
+
+    var volumeStep = options.volumeStep,
+      seekStep = options.seekStep,
+      enableMute = options.enableMute,
+      enableVolumeScroll = options.enableVolumeScroll,
+      enableHoverScroll = options.enableHoverScroll,
+      enableFull = options.enableFullscreen,
+      enableNumbers = options.enableNumbers,
+      enableJogStyle = options.enableJogStyle,
+      alwaysCaptureHotkeys = options.alwaysCaptureHotkeys,
+      enableModifiersForNumbers = options.enableModifiersForNumbers,
+      enableInactiveFocus = options.enableInactiveFocus,
+      skipInitialFocus = options.skipInitialFocus;
+
+    // Set default player tabindex to handle keydown and doubleclick events
+    if (!pEl.hasAttribute('tabIndex')) {
+      pEl.setAttribute('tabIndex', '-1');
+    }
+
+    // Remove player outline to fix video performance issue
+    pEl.style.outline = "none";
+
+    if (alwaysCaptureHotkeys || !player.autoplay()) {
+      if (!skipInitialFocus) {
+        player.one('play', function() {
+          pEl.focus(); // Fixes the .vjs-big-play-button handing focus back to body instead of the player
+        });
+      }
+    }
+
+    if (enableInactiveFocus) {
+      player.on('userinactive', function() {
+        // When the control bar fades, re-apply focus to the player if last focus was a control button
+        var cancelFocusingPlayer = function() {
+          clearTimeout(focusingPlayerTimeout);
+        };
+        var focusingPlayerTimeout = setTimeout(function() {
+          player.off('useractive', cancelFocusingPlayer);
+          var activeElement = doc.activeElement;
+          var controlBar = pEl.querySelector('.vjs-control-bar');
+          if (activeElement && activeElement.parentElement == controlBar) {
+            pEl.focus();
+          }
+        }, 10);
+
+        player.one('useractive', cancelFocusingPlayer);
+      });
+    }
+
+    player.on('play', function() {
+      // Fix allowing the YouTube plugin to have hotkey support.
+      var ifblocker = pEl.querySelector('.iframeblocker');
+      if (ifblocker && ifblocker.style.display === '') {
+        ifblocker.style.display = "block";
+        ifblocker.style.bottom = "39px";
+      }
+    });
+
+    var keyDown = function keyDown(event) {
+      var ewhich = event.which, wasPlaying, seekTime;
+      var ePreventDefault = event.preventDefault;
+      var duration = player.duration();
+      // When controls are disabled, hotkeys will be disabled as well
+      if (player.controls()) {
+
+        // Don't catch keys if any control buttons are focused, unless alwaysCaptureHotkeys is true
+        var activeEl = doc.activeElement;
+        if (alwaysCaptureHotkeys ||
+            activeEl == pEl ||
+            activeEl == pEl.querySelector('.vjs-tech') ||
+            activeEl == pEl.querySelector('.vjs-control-bar') ||
+            activeEl == pEl.querySelector('.iframeblocker')) {
+
+          switch (checkKeys(event, player)) {
+            // Spacebar toggles play/pause
+            case cPlay:
+              ePreventDefault();
+              if (alwaysCaptureHotkeys) {
+                // Prevent control activation with space
+                event.stopPropagation();
+              }
+
+              if (player.paused()) {
+                player.play();
+              } else {
+                player.pause();
+              }
+              break;
+
+            // Seeking with the left/right arrow keys
+            case cRewind: // Seek Backward
+              wasPlaying = !player.paused();
+              ePreventDefault();
+              if (wasPlaying) {
+                player.pause();
+              }
+              seekTime = player.currentTime() - seekStepD(event);
+              // The flash player tech will allow you to seek into negative
+              // numbers and break the seekbar, so try to prevent that.
+              if (seekTime <= 0) {
+                seekTime = 0;
+              }
+              player.currentTime(seekTime);
+              if (wasPlaying) {
+                player.play();
+              }
+              break;
+            case cForward: // Seek Forward
+              wasPlaying = !player.paused();
+              ePreventDefault();
+              if (wasPlaying) {
+                player.pause();
+              }
+              seekTime = player.currentTime() + seekStepD(event);
+              // Fixes the player not sending the end event if you
+              // try to seek past the duration on the seekbar.
+              if (seekTime >= duration) {
+                seekTime = wasPlaying ? duration - .001 : duration;
+              }
+              player.currentTime(seekTime);
+              if (wasPlaying) {
+                player.play();
+              }
+              break;
+
+            // Volume control with the up/down arrow keys
+            case cVolumeDown:
+              ePreventDefault();
+              if (!enableJogStyle) {
+                player.volume(player.volume() - volumeStep);
+              } else {
+                seekTime = player.currentTime() - 1;
+                if (player.currentTime() <= 1) {
+                  seekTime = 0;
+                }
+                player.currentTime(seekTime);
+              }
+              break;
+            case cVolumeUp:
+              ePreventDefault();
+              if (!enableJogStyle) {
+                player.volume(player.volume() + volumeStep);
+              } else {
+                seekTime = player.currentTime() + 1;
+                if (seekTime >= duration) {
+                  seekTime = duration;
+                }
+                player.currentTime(seekTime);
+              }
+              break;
+
+            // Toggle Mute with the M key
+            case cMute:
+              if (enableMute) {
+                player.muted(!player.muted());
+              }
+              break;
+
+            // Toggle Fullscreen with the F key
+            case  cFullscreen:
+              if (enableFull) {
+                if (player.isFullscreen()) {
+                  player.exitFullscreen();
+                } else {
+                  player.requestFullscreen();
+                }
+              }
+              break;
+
+            default:
+              // Number keys from 0-9 skip to a percentage of the video. 0 is 0% and 9 is 90%
+              if ((ewhich > 47 && ewhich < 59) || (ewhich > 95 && ewhich < 106)) {
+                // Do not handle if enableModifiersForNumbers set to false and keys are Ctrl, Cmd or Alt
+                if (enableModifiersForNumbers || !(event.metaKey || event.ctrlKey || event.altKey)) {
+                  if (enableNumbers) {
+                    var sub = 48;
+                    if (ewhich > 95) {
+                      sub = 96;
+                    }
+                    var number = ewhich - sub;
+                    ePreventDefault();
+                    player.currentTime(player.duration() * number * 0.1);
+                  }
+                }
+              }
+
+              // Handle any custom hotkeys
+              for (var customKey in options.customKeys) {
+                var customHotkey = options.customKeys[customKey];
+                // Check for well formed custom keys
+                if (customHotkey && customHotkey.key && customHotkey.handler) {
+                  // Check if the custom key's condition matches
+                  if (customHotkey.key(event)) {
+                    ePreventDefault();
+                    customHotkey.handler(player, options, event);
+                  }
+                }
+              }
+          }
+        }
+      }
+    };
+
+    var doubleClick = function doubleClick(event) {
+      // When controls are disabled, hotkeys will be disabled as well
+      if (player.controls()) {
+
+        // Don't catch clicks if any control buttons are focused
+        var activeEl = event.relatedTarget || event.toElement || doc.activeElement;
+        if (activeEl == pEl ||
+            activeEl == pEl.querySelector('.vjs-tech') ||
+            activeEl == pEl.querySelector('.iframeblocker')) {
+
+          if (enableFull) {
+            if (player.isFullscreen()) {
+              player.exitFullscreen();
+            } else {
+              player.requestFullscreen();
+            }
+          }
+        }
+      }
+    };
+
+    var volumeHover = false;
+    var volumeSelector = pEl.querySelector('.vjs-volume-menu-button') || pEl.querySelector('.vjs-volume-panel');
+    volumeSelector.onmouseover = function() { volumeHover = true; }
+    volumeSelector.onmouseout = function() { volumeHover = false; }
+    
+    var mouseScroll = function mouseScroll(event) {
+      if (enableHoverScroll) {
+        // If we leave this undefined then it can match non-existent elements below
+        var activeEl = 0;
+      } else {
+        var activeEl = doc.activeElement;
+      }
+
+      // When controls are disabled, hotkeys will be disabled as well
+      if (player.controls()) {
+        if (alwaysCaptureHotkeys ||
+            activeEl == pEl ||
+            activeEl == pEl.querySelector('.vjs-tech') ||
+            activeEl == pEl.querySelector('.iframeblocker') ||
+            activeEl == pEl.querySelector('.vjs-control-bar') ||
+            volumeHover) {
+
+          if (enableVolumeScroll) {
+            event = window.event || event;
+            var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
+            event.preventDefault();
+
+            if (delta == 1) {
+              player.volume(player.volume() + volumeStep);
+            } else if (delta == -1) {
+              player.volume(player.volume() - volumeStep);
+            }
+          }
+        }
+      }
+    };
+
+    var checkKeys = function checkKeys(e, player) {
+      // Allow some modularity in defining custom hotkeys
+
+      // Play/Pause check
+      if (options.playPauseKey(e, player)) {
+        return cPlay;
+      }
+
+      // Seek Backward check
+      if (options.rewindKey(e, player)) {
+        return cRewind;
+      }
+
+      // Seek Forward check
+      if (options.forwardKey(e, player)) {
+        return cForward;
+      }
+
+      // Volume Up check
+      if (options.volumeUpKey(e, player)) {
+        return cVolumeUp;
+      }
+
+      // Volume Down check
+      if (options.volumeDownKey(e, player)) {
+        return cVolumeDown;
+      }
+
+      // Mute check
+      if (options.muteKey(e, player)) {
+        return cMute;
+      }
+
+      // Fullscreen check
+      if (options.fullscreenKey(e, player)) {
+        return cFullscreen;
+      }
+    };
+
+    function playPauseKey(e) {
+      // Space bar or MediaPlayPause
+      return (e.which === 32 || e.which === 179);
+    }
+
+    function rewindKey(e) {
+      // Left Arrow or MediaRewind
+      return (e.which === 37 || e.which === 177);
+    }
+
+    function forwardKey(e) {
+      // Right Arrow or MediaForward
+      return (e.which === 39 || e.which === 176);
+    }
+
+    function volumeUpKey(e) {
+      // Up Arrow
+      return (e.which === 38);
+    }
+
+    function volumeDownKey(e) {
+      // Down Arrow
+      return (e.which === 40);
+    }
+
+    function muteKey(e) {
+      // M key
+      return (e.which === 77);
+    }
+
+    function fullscreenKey(e) {
+      // F key
+      return (e.which === 70);
+    }
+
+    function seekStepD(e) {
+      // SeekStep caller, returns an int, or a function returning an int
+      return (typeof seekStep === "function" ? seekStep(e) : seekStep);
+    }
+
+    player.on('keydown', keyDown);
+    player.on('dblclick', doubleClick);
+    player.on('mousewheel', mouseScroll);
+    player.on("DOMMouseScroll", mouseScroll);
+
+    return this;
+  };
+
+  var registerPlugin = videojs.registerPlugin || videojs.plugin;
+  registerPlugin('hotkeys', hotkeys);
+}));

assets/js/watch.js

@@ -0,0 +1,52 @@
+function toggle_parent(target) {
+  body = target.parentNode.parentNode.children[1];
+  if (body.style.display === null || body.style.display === "") {
+    target.innerHTML = "[ + ]";
+    body.style.display = "none";
+  } else {
+    target.innerHTML = "[ - ]";
+    body.style.display = "";
+  }
+}
+
+function toggle_comments(target) {
+  body = target.parentNode.parentNode.parentNode.children[1];
+  if (body.style.display === null || body.style.display === "") {
+    target.innerHTML = "[ + ]";
+    body.style.display = "none";
+  } else {
+    target.innerHTML = "[ - ]";
+    body.style.display = "";
+  }
+}
+
+function swap_comments(source) {
+  if (source == "youtube") {
+    get_youtube_comments();
+  } else if (source == "reddit") {
+    get_reddit_comments();
+  }
+}
+
+String.prototype.supplant = function(o) {
+  return this.replace(/{([^{}]*)}/g, function(a, b) {
+    var r = o[b];
+    return typeof r === "string" || typeof r === "number" ? r : a;
+  });
+};
+
+function show_youtube_replies(target) {
+  body = target.parentNode.parentNode.children[1];
+  body.style.display = "";
+
+  target.innerHTML = "Hide replies";
+  target.setAttribute("onclick", "hide_youtube_replies(this)");
+}
+
+function hide_youtube_replies(target) {
+  body = target.parentNode.parentNode.children[1];
+  body.style.display = "none";
+
+  target.innerHTML = "Show replies";
+  target.setAttribute("onclick", "show_youtube_replies(this)");
+}

assets/safari-pinned-tab.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="607.000000pt" height="607.000000pt" viewBox="0 0 607.000000 607.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,607.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2770 5949 c-775 -68 -1523 -436 -2020 -994 -491 -551 -743 -1200
+-743 -1915 -1 -466 100 -884 312 -1296 146 -284 307 -502 540 -734 172 -171
+264 -247 461 -378 415 -277 905 -452 1404 -501 161 -16 508 -14 666 4 914 105
+1715 590 2213 1342 306 462 467 995 467 1553 0 268 -22 448 -85 699 -94 378
+-293 778 -541 1091 -156 196 -449 465 -665 611 -405 272 -894 453 -1379 509
+-130 15 -502 21 -630 9z m475 -139 c527 -39 1012 -203 1435 -485 176 -117 274
+-198 436 -360 315 -313 518 -633 664 -1045 52 -148 112 -399 131 -555 19 -150
+17 -533 -4 -684 -102 -730 -489 -1382 -1092 -1836 -332 -250 -716 -425 -1135
+-519 -348 -77 -784 -87 -1150 -25 -1214 205 -2177 1157 -2350 2324 -56 377
+-30 801 70 1148 151 520 427 950 850 1326 566 502 1368 768 2145 711z"/>
+<path d="M2787 4669 c-124 -65 -123 -255 3 -319 86 -44 196 -16 247 62 58 87
+26 211 -67 258 -51 26 -132 26 -183 -1z"/>
+<path d="M2882 4108 c-12 -16 -63 -166 -102 -303 -30 -104 -101 -350 -165
+-565 -20 -69 -58 -199 -85 -290 -26 -91 -64 -221 -85 -290 -20 -69 -58 -199
+-85 -290 -26 -91 -64 -221 -85 -290 -20 -69 -57 -195 -81 -280 -59 -207 -93
+-299 -115 -310 -10 -6 -35 -10 -56 -10 -73 0 -84 -8 -81 -54 l3 -41 228 -3
+228 -2 -3 47 -3 48 -73 3 c-66 3 -74 5 -84 27 -13 28 0 104 37 225 13 41 47
+156 75 255 28 99 66 230 85 290 18 61 56 191 85 290 28 99 66 230 85 290 18
+61 56 191 85 290 85 297 123 419 131 429 5 5 17 -11 28 -35 10 -24 192 -393
+403 -819 211 -426 447 -902 523 -1058 l139 -282 168 0 c92 0 168 4 168 8 0 4
+-75 158 -166 342 -588 1183 -969 1958 -1033 2100 -29 63 -69 151 -89 195 -44
+95 -58 110 -80 83z"/>
+</g>
+</svg>

assets/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Invidious",
+    "short_name": "Invidious",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#575757",
+    "background_color": "#575757",
+    "display": "standalone"
+}

config/config.yml

@@ -1,6 +1,7 @@
-crawl_threads: 1
+video_threads: 0
+crawl_threads: 0
 channel_threads: 1
-video_threads: 1
+feed_threads: 1
 db:
   user: kemal
   password: kemal
@@ -8,4 +9,4 @@ db:
   port: 5432
   dbname: invidious
 full_refresh: false
-https_only: false
+https_only: false

config/sql/channel_videos.sql

@@ -4,35 +4,33 @@
 
 CREATE TABLE public.channel_videos
 (
-    id text COLLATE pg_catalog."default" NOT NULL,
-    title text COLLATE pg_catalog."default",
-    published timestamp with time zone,
-    updated timestamp with time zone,
-    ucid text COLLATE pg_catalog."default",
-    author text COLLATE pg_catalog."default",
-    CONSTRAINT channel_videos_id_key UNIQUE (id)
-)
-WITH (
-    OIDS = FALSE
-)
-TABLESPACE pg_default;
+  id text NOT NULL,
+  title text,
+  published timestamp with time zone,
+  updated timestamp with time zone,
+  ucid text,
+  author text,
+  length_seconds integer,
+  CONSTRAINT channel_videos_id_key UNIQUE (id)
+);
 
 GRANT ALL ON TABLE public.channel_videos TO kemal;
 
--- Index: channel_videos_published_idx
+-- Index: public.channel_videos_published_idx
 
 -- DROP INDEX public.channel_videos_published_idx;
 
 CREATE INDEX channel_videos_published_idx
-    ON public.channel_videos USING btree
-    (published)
-    TABLESPACE pg_default;
+  ON public.channel_videos
+  USING btree
+  (published);
 
--- Index: channel_videos_ucid_idx
+-- Index: public.channel_videos_ucid_idx
 
 -- DROP INDEX public.channel_videos_ucid_idx;
 
 CREATE INDEX channel_videos_ucid_idx
-    ON public.channel_videos USING hash
-    (ucid COLLATE pg_catalog."default")
-    TABLESPACE pg_default;
+  ON public.channel_videos
+  USING hash
+  (ucid COLLATE pg_catalog."default");
+

config/sql/channels.sql

@@ -4,23 +4,20 @@
 
 CREATE TABLE public.channels
 (
-    id text COLLATE pg_catalog."default" NOT NULL,
-    author text COLLATE pg_catalog."default",
-    updated timestamp with time zone,
-    CONSTRAINT channels_id_key UNIQUE (id)
-)
-WITH (
-    OIDS = FALSE
-)
-TABLESPACE pg_default;
+  id text NOT NULL,
+  author text,
+  updated timestamp with time zone,
+  CONSTRAINT channels_id_key UNIQUE (id)
+);
 
 GRANT ALL ON TABLE public.channels TO kemal;
 
--- Index: channels_id_idx
+-- Index: public.channels_id_idx
 
 -- DROP INDEX public.channels_id_idx;
 
 CREATE INDEX channels_id_idx
-    ON public.channels USING btree
-    (id COLLATE pg_catalog."default")
-    TABLESPACE pg_default;
+  ON public.channels
+  USING btree
+  (id COLLATE pg_catalog."default");
+

config/sql/nonces.sql

@@ -0,0 +1,14 @@
+-- Table: public.nonces
+
+-- DROP TABLE public.nonces;
+
+CREATE TABLE public.nonces
+(
+  nonce text,
+  expire timestamp with time zone
+)
+WITH (
+  OIDS=FALSE
+);
+
+GRANT ALL ON TABLE public.nonces TO kemal;

config/sql/users.sql

@@ -2,22 +2,28 @@
 
 -- DROP TABLE public.users;
 
-CREATE TABLE public.users 
+CREATE TABLE public.users
 (
-    id text[] COLLATE pg_catalog."default" NOT NULL,
-    updated timestamp with time zone,
-    notifications text[] COLLATE pg_catalog."default",
-    subscriptions text[] COLLATE pg_catalog."default",
-    email text COLLATE pg_catalog."default" NOT NULL,
-    preferences text COLLATE pg_catalog."default",
-    password text COLLATE pg_catalog."default",
-    token text COLLATE pg_catalog."default",
-    watched text[] COLLATE pg_catalog."default",
-    CONSTRAINT users_email_key UNIQUE (email)
-)
-WITH (
-    OIDS = FALSE
-)
-TABLESPACE pg_default;
+  id text[] NOT NULL,
+  updated timestamp with time zone,
+  notifications text[],
+  subscriptions text[],
+  email text NOT NULL,
+  preferences text,
+  password text,
+  token text,
+  watched text[],
+  CONSTRAINT users_email_key UNIQUE (email)
+);
 
 GRANT ALL ON TABLE public.users TO kemal;
+
+-- Index: public.email_unique_idx
+
+-- DROP INDEX public.email_unique_idx;
+
+CREATE UNIQUE INDEX email_unique_idx
+  ON public.users
+  USING btree
+  (lower(email) COLLATE pg_catalog."default");
+

config/sql/videos.sql

@@ -4,38 +4,37 @@
 
 CREATE TABLE public.videos
 (
-    id text COLLATE pg_catalog."default" NOT NULL,
-    info text COLLATE pg_catalog."default",
-    updated timestamp with time zone,
-    title text COLLATE pg_catalog."default",
-    views bigint,
-    likes integer,
-    dislikes integer,
-    wilson_score double precision,
-    published timestamp with time zone,
-    description text COLLATE pg_catalog."default",
-    language text COLLATE pg_catalog."default",
-    author text COLLATE pg_catalog."default",
-    ucid text COLLATE pg_catalog."default",
-    allowed_regions text[] COLLATE pg_catalog."default",
-    is_family_friendly boolean,
-    genre text COLLATE pg_catalog."default",
-    genre_url text COLLATE pg_catalog."default",
-    license text COLLATE pg_catalog."default",
-    CONSTRAINT videos_pkey PRIMARY KEY (id)
-)
-WITH (
-    OIDS = FALSE
-)
-TABLESPACE pg_default;
+  id text NOT NULL,
+  info text,
+  updated timestamp with time zone,
+  title text,
+  views bigint,
+  likes integer,
+  dislikes integer,
+  wilson_score double precision,
+  published timestamp with time zone,
+  description text,
+  language text,
+  author text,
+  ucid text,
+  allowed_regions text[],
+  is_family_friendly boolean,
+  genre text,
+  genre_url text,
+  license text,
+  sub_count_text text,
+  author_thumbnail text,
+  CONSTRAINT videos_pkey PRIMARY KEY (id)
+);
 
 GRANT ALL ON TABLE public.videos TO kemal;
 
--- Index: id_idx
+-- Index: public.id_idx
 
 -- DROP INDEX public.id_idx;
 
 CREATE UNIQUE INDEX id_idx
-    ON public.videos USING btree
-    (id COLLATE pg_catalog."default")
-    TABLESPACE pg_default;
+  ON public.videos
+  USING btree
+  (id COLLATE pg_catalog."default");
+

locales/en-US.json

@@ -0,0 +1,155 @@
+{
+  "`x` subscribers": "`x` subscribers",
+  "`x` videos": "`x` videos",
+  "LIVE": "LIVE",
+  "Shared `x` ago": "Shared `x` ago",
+  "Unsubscribe": "Unsubscribe",
+  "Subscribe": "Subscribe",
+  "Login to subscribe to `x`": "Login to subscribe to `x`",
+  "View channel on YouTube": "View channel on YouTube",
+  "newest": "newest",
+  "oldest": "oldest",
+  "popular": "popular",
+  "Preview page": "Preview page",
+  "Next page": "Next page",
+  "Clear watch history?": "Clear watch history?",
+  "Yes": "Yes",
+  "No": "No",
+  "Import and Export Data": "Import and Export Data",
+  "Import": "Import",
+  "Import Invidious data": "Import Invidious data",
+  "Import YouTube subscriptions": "Import YouTube subscriptions",
+  "Import FreeTube subscriptions (.db)": "Import FreeTube subscriptions (.db)",
+  "Import NewPipe subscriptions (.json)": "Import NewPipe subscriptions (.json)",
+  "Import NewPipe data (.zip)": "Import NewPipe data (.zip)",
+  "Export": "Export",
+  "Export subscriptions as OPML": "Export subscriptions as OPML",
+  "Export subscriptions as OPML (for NewPipe & FreeTube)": "Export subscriptions as OPML (for NewPipe & FreeTube)",
+  "Export data as JSON": "Export data as JSON",
+  "Delete account?": "Delete account?",
+  "History": "History",
+  "Previous page": "Previous page",
+  "An alternative front-end to YouTube": "An alternative front-end to YouTube",
+  "JavaScript license information": "JavaScript license information",
+  "source": "source",
+  "Login": "Login",
+  "Login/Register": "Login/Register",
+  "Login to Google": "Login to Google",
+  "User ID:": "User ID:",
+  "Password:": "Password:",
+  "Time (h:mm:ss):": "Time (h:mm:ss):",
+  "Text CAPTCHA": "Text CAPTCHA",
+  "Image CAPTCHA": "Image CAPTCHA",
+  "Sign In": "Sign In",
+  "Register": "Register",
+  "Email:": "Email:",
+  "Google verification code:": "Google verification code:",
+  "Preferences": "Preferences",
+  "Player preferences": "Player preferences",
+  "Always loop: ": "Always loop: ",
+  "Autoplay: ": "Autoplay: ",
+  "Autoplay next video: ": "Autoplay next video: ",
+  "Listen by default: ": "Listen by default: ",
+  "Default speed: ": "Default speed: ",
+  "Preferred video quality: ": "Preferred video quality: ",
+  "Player volume: ": "Player volume: ",
+  "Default comments: ": "Default comments: ",
+  "Default captions: ": "Default captions: ",
+  "Fallback captions: ": "Fallback captions: ",
+  "Show related videos? ": "Show related videos? ",
+  "Visual preferences": "Visual preferences",
+  "Dark mode: ": "Dark mode: ",
+  "Thin mode: ": "Thin mode: ",
+  "Subscription preferences": "Subscription preferences",
+  "Redirect homepage to feed: ": "Redirect homepage to feed: ",
+  "Number of videos shown in feed: ": "Number of videos shown in feed: ",
+  "Sort videos by: ": "Sort videos by: ",
+  "published": "published",
+  "published - reverse": "published - reverse",
+  "alphabetically": "alphabetically",
+  "alphabetically - reverse": "alphabetically - reverse",
+  "channel name": "channel name",
+  "channel name - reverse": "channel name - reverse",
+  "Only show latest video from channel: ": "Only show latest video from channel: ",
+  "Only show latest unwatched video from channel: ": "Only show latest unwatched video from channel: ",
+  "Only show unwatched: ": "Only show unwatched: ",
+  "Only show notifications (if there are any): ": "Only show notifications (if there are any): ",
+  "Data preferences": "Data preferences",
+  "Clear watch history": "Clear watch history",
+  "Import/Export data": "Import/Export data",
+  "Manage subscriptions": "Manage subscriptions",
+  "Watch history": "Watch history",
+  "Delete account": "Delete account",
+  "Save preferences": "Save preferences",
+  "Subscription manager": "Subscription manager",
+  "`x` subscriptions": "`x` subscriptions",
+  "Import/Export": "Import/Export",
+  "unsubscribe": "unsubscribe",
+  "Subscriptions": "Subscriptions",
+  "`x` unseen notifications": "`x` unseen notifications",
+  "search": "search",
+  "Sign out": "Sign out",
+  "Released under the AGPLv3 by Omar Roth.": "Released under the AGPLv3 by Omar Roth.",
+  "Source available here.": "Source available here.",
+  "View JavaScript license information.": "View JavaScript license information.",
+  "Trending": "Trending",
+  "Watch video on Youtube": "Watch video on Youtube",
+  "Genre: ": "Genre: ",
+  "License: ": "License: ",
+  "Family friendly? ": "Family friendly? ",
+  "Wilson score: ": "Wilson score: ",
+  "Engagement: ": "Engagement: ",
+  "Whitelisted regions: ": "Whitelisted regions: ",
+  "Blacklisted regions: ": "Blacklisted regions: ",
+  "Shared `x`": "Shared `x`",
+  "Hi! Looks like you have JavaScript disabled. Click here to view comments, keep in mind it may take a bit longer to load.": "Hi! Looks like you have JavaScript disabled. Click here to view comments, keep in mind it may take a bit longer to load.",
+  "View YouTube comments": "View YouTube comments",
+  "View more comments on Reddit": "View more comments on Reddit",
+  "View `x` comments": "View `x` comments",
+  "View Reddit comments": "View Reddit comments",
+  "Hide replies": "Hide replies",
+  "Show replies": "Show replies",
+  "Incorrect password": "Incorrect password",
+  "Quota exceeded, try again in a few hours": "Quota exceeded, try again in a few hours",
+  "Unable to login, make sure two-factor authentication (Authenticator or SMS) is enabled.": "Unable to login, make sure two-factor authentication (Authenticator or SMS) is enabled.",
+  "Invalid TFA code": "Invalid TFA code",
+  "Login failed. This may be because two-factor authentication is not enabled on your account.": "Login failed. This may be because two-factor authentication is not enabled on your account.",
+  "Invalid answer": "Invalid answer",
+  "Invalid CAPTCHA": "Invalid CAPTCHA",
+  "CAPTCHA is a required field": "CAPTCHA is a required field",
+  "User ID is a required field": "User ID is a required field",
+  "Password is a required field": "Password is a required field",
+  "Invalid username or password": "Invalid username or password",
+  "Please sign in using 'Sign in with Google'": "Please sign in using 'Sign in with Google'",
+  "Password cannot be empty": "Password cannot be empty",
+  "Password cannot be longer than 55 characters": "Password cannot be longer than 55 characters",
+  "Please sign in": "Please sign in",
+  "Invidious Private Feed for `x`": "Invidious Private Feed for `x`",
+  "channel:`x`": "channel:`x`",
+  "Deleted or invalid channel": "Deleted or invalid channel",
+  "This channel does not exist.": "This channel does not exist.",
+  "Could not get channel info.": "Could not get channel info.",
+  "Could not fetch comments": "Could not fetch comments",
+  "View `x` replies": "View `x` replies",
+  "`x` ago": "`x` ago",
+  "Load more": "Load more",
+  "`x` points": "`x` points",
+  "Could not create mix.": "Could not create mix.",
+  "Playlist is empty": "Playlist is empty",
+  "Invalid playlist.": "Invalid playlist.",
+  "Playlist does not exist.": "Playlist does not exist.",
+  "Could not pull trending pages.": "Could not pull trending pages.",
+  "Hidden field \"challenge\" is a required field": "Hidden field \"challenge\" is a required field",
+  "Hidden field \"token\" is a required field": "Hidden field \"token\" is a required field",
+  "Invalid challenge": "Invalid challenge",
+  "Invalid token": "Invalid token",
+  "Invalid user": "Invalid user",
+  "Token is expired, please try again": "Token is expired, please try again",
+  "`x` years": "`x` years",
+  "`x` months": "`x` months",
+  "`x` weeks": "`x` weeks",
+  "`x` days": "`x` days",
+  "`x` hours": "`x` hours",
+  "`x` minutes": "`x` minutes",
+  "`x` seconds": "`x` seconds"
+}

setup.sh

@@ -7,3 +7,4 @@ psql invidious < config/sql/channels.sql
 psql invidious < config/sql/videos.sql
 psql invidious < config/sql/channel_videos.sql
 psql invidious < config/sql/users.sql
+psql invidious < config/sql/nonces.sql

shard.yml

@@ -1,5 +1,5 @@
 name: invidious
-version: 0.7.0
+version: 0.11.0
 
 authors:
   - Omar Roth <omarroth@hotmail.com>
@@ -13,9 +13,12 @@ dependencies:
     github: detectlanguage/detectlanguage-crystal
   kemal:
     github: kemalcr/kemal
+    commit: afd17fc
   pg:
     github: will/crystal-pg
+  sqlite3:
+    github: crystal-lang/crystal-sqlite3
 
-crystal: 0.26.1
+crystal: 0.27.0
 
 license: AGPLv3

src/invidious/channels.cr

@@ -8,12 +8,16 @@ end
 
 class ChannelVideo
   add_mapping({
-    id:        String,
-    title:     String,
-    published: Time,
-    updated:   Time,
-    ucid:      String,
-    author:    String,
+    id:             String,
+    title:          String,
+    published:      Time,
+    updated:        Time,
+    ucid:           String,
+    author:         String,
+    length_seconds: {
+      type:    Int32,
+      default: 0,
+    },
   })
 end
 
@@ -31,8 +35,10 @@ def get_channel(id, client, db, refresh = true, pull_all_videos = true)
     end
   else
     channel = fetch_channel(id, client, db, pull_all_videos)
-    args = arg_array(channel.to_a)
-    db.exec("INSERT INTO channels VALUES (#{args})", channel.to_a)
+    channel_array = channel.to_a
+    args = arg_array(channel_array)
+
+    db.exec("INSERT INTO channels VALUES (#{args})", channel_array)
   end
 
   return channel
@@ -56,6 +62,25 @@ def fetch_channel(ucid, client, db, pull_all_videos = true)
   end
 
   if !pull_all_videos
+    url = produce_channel_videos_url(ucid, 1, auto_generated: auto_generated)
+    response = client.get(url)
+    json = JSON.parse(response.body)
+
+    if json["content_html"]? && !json["content_html"].as_s.empty?
+      document = XML.parse_html(json["content_html"].as_s)
+      nodeset = document.xpath_nodes(%q(//li[contains(@class, "feed-item-container")]))
+
+      if auto_generated
+        videos = extract_videos(nodeset)
+      else
+        videos = extract_videos(nodeset, ucid)
+        videos.each { |video| video.ucid = ucid }
+        videos.each { |video| video.author = author }
+      end
+    end
+
+    videos ||= [] of ChannelVideo
+
     rss.xpath_nodes("//feed/entry").each do |entry|
       video_id = entry.xpath_node("videoid").not_nil!.content
       title = entry.xpath_node("title").not_nil!.content
@@ -64,16 +89,20 @@ def fetch_channel(ucid, client, db, pull_all_videos = true)
       author = entry.xpath_node("author/name").not_nil!.content
       ucid = entry.xpath_node("channelid").not_nil!.content
 
-      video = ChannelVideo.new(video_id, title, published, Time.now, ucid, author)
+      length_seconds = videos.select { |video| video.id == video_id }[0]?.try &.length_seconds
+      length_seconds ||= 0
+
+      video = ChannelVideo.new(video_id, title, published, Time.now, ucid, author, length_seconds)
 
       db.exec("UPDATE users SET notifications = notifications || $1 \
         WHERE updated < $2 AND $3 = ANY(subscriptions) AND $1 <> ALL(notifications)", video.id, video.published, ucid)
 
       video_array = video.to_a
       args = arg_array(video_array)
+
       db.exec("INSERT INTO channel_videos VALUES (#{args}) \
-        ON CONFLICT (id) DO UPDATE SET title = $2, published = $3, \
-        updated = $4, ucid = $5, author = $6", video_array)
+      ON CONFLICT (id) DO UPDATE SET title = $2, published = $3, \
+      updated = $4, ucid = $5, author = $6, length_seconds = $7", video_array)
     end
   else
     page = 1
@@ -100,7 +129,7 @@ def fetch_channel(ucid, client, db, pull_all_videos = true)
       end
 
       count = nodeset.size
-      videos = videos.map { |video| ChannelVideo.new(video.id, video.title, video.published, Time.now, video.ucid, video.author) }
+      videos = videos.map { |video| ChannelVideo.new(video.id, video.title, video.published, Time.now, video.ucid, video.author, video.length_seconds) }
 
       videos.each do |video|
         ids << video.id
@@ -112,8 +141,9 @@ def fetch_channel(ucid, client, db, pull_all_videos = true)
 
           video_array = video.to_a
           args = arg_array(video_array)
+
           db.exec("INSERT INTO channel_videos VALUES (#{args}) ON CONFLICT (id) DO UPDATE SET title = $2, \
-          published = $3, updated = $4, ucid = $5, author = $6", video_array)
+          published = $3, updated = $4, ucid = $5, author = $6, length_seconds = $7", video_array)
         end
       end
 
@@ -133,16 +163,16 @@ def fetch_channel(ucid, client, db, pull_all_videos = true)
   return channel
 end
 
-def produce_channel_videos_url(ucid, page = 1, auto_generated = nil)
+def produce_channel_videos_url(ucid, page = 1, auto_generated = nil, sort_by = "newest")
   if auto_generated
-    seed = Time.epoch(1525757349)
+    seed = Time.unix(1525757349)
 
     until seed >= Time.now
       seed += 1.month
     end
     timestamp = seed - (page - 1).months
 
-    page = "#{timestamp.epoch}"
+    page = "#{timestamp.to_unix}"
     switch = "\x36"
   else
     page = "#{page}"
@@ -160,6 +190,16 @@ def produce_channel_videos_url(ucid, page = 1, auto_generated = nil)
   meta += page.size.to_u8.unsafe_chr
   meta += page
 
+  case sort_by
+  when "newest"
+    # Empty tags can be omitted
+    # meta += "\x18\x00"
+  when "popular"
+    meta += "\x18\x01"
+  when "oldest"
+    meta += "\x18\x02"
+  end
+
   meta = Base64.urlsafe_encode(meta)
   meta = URI.escape(meta)
 
@@ -176,7 +216,7 @@ def produce_channel_videos_url(ucid, page = 1, auto_generated = nil)
   continuation = Base64.urlsafe_encode(continuation)
   continuation = URI.escape(continuation)
 
-  url = "/browse_ajax?continuation=#{continuation}"
+  url = "/browse_ajax?continuation=#{continuation}&gl=US&hl=en"
 
   return url
 end
@@ -184,19 +224,33 @@ end
 def get_about_info(ucid)
   client = make_client(YT_URL)
 
-  about = client.get("/user/#{ucid}/about?disable_polymer=1")
+  about = client.get("/channel/#{ucid}/about?disable_polymer=1&gl=US&hl=en")
+  if about.status_code == 404
+    about = client.get("/user/#{ucid}/about?disable_polymer=1&gl=US&hl=en")
+  end
+
   about = XML.parse_html(about.body)
 
-  if !about.xpath_node(%q(//span[@class="qualified-channel-title-text"]/a))
-    about = client.get("/channel/#{ucid}/about?disable_polymer=1")
-    about = XML.parse_html(about.body)
+  if about.xpath_node(%q(//div[contains(@class, "channel-empty-message")]))
+    error_message = "This channel does not exist."
+
+    raise error_message
   end
 
-  if !about.xpath_node(%q(//span[@class="qualified-channel-title-text"]/a))
-    raise "User does not exist."
+  if about.xpath_node(%q(//span[contains(@class,"qualified-channel-title-text")]/a)).try &.content.empty?
+    error_message = about.xpath_node(%q(//div[@class="yt-alert-content"])).try &.content.strip
+    error_message ||= "Could not get channel info."
+
+    raise error_message
   end
 
-  author = about.xpath_node(%q(//span[@class="qualified-channel-title-text"]/a)).not_nil!.content
+  sub_count = about.xpath_node(%q(//span[contains(text(), "subscribers")]))
+  if sub_count
+    sub_count = sub_count.content.delete(", subscribers").to_i?
+  end
+  sub_count ||= 0
+
+  author = about.xpath_node(%q(//span[contains(@class,"qualified-channel-title-text")]/a)).not_nil!.content
   ucid = about.xpath_node(%q(//link[@rel="canonical"])).not_nil!["href"].split("/")[-1]
 
   # Auto-generated channels
@@ -207,5 +261,37 @@ def get_about_info(ucid)
     auto_generated = true
   end
 
-  return {author, ucid, auto_generated}
+  return {author, ucid, auto_generated, sub_count}
+end
+
+def get_60_videos(ucid, page, auto_generated, sort_by = "newest")
+  count = 0
+  videos = [] of SearchVideo
+
+  client = make_client(YT_URL)
+
+  2.times do |i|
+    url = produce_channel_videos_url(ucid, page * 2 + (i - 1), auto_generated: auto_generated, sort_by: sort_by)
+    response = client.get(url)
+    json = JSON.parse(response.body)
+
+    if json["content_html"]? && !json["content_html"].as_s.empty?
+      document = XML.parse_html(json["content_html"].as_s)
+      nodeset = document.xpath_nodes(%q(//li[contains(@class, "feed-item-container")]))
+
+      if !json["load_more_widget_html"]?.try &.as_s.empty?
+        count += 30
+      end
+
+      if auto_generated
+        videos += extract_videos(nodeset)
+      else
+        videos += extract_videos(nodeset, ucid)
+      end
+    else
+      break
+    end
+  end
+
+  return videos, count
 end

src/invidious/comments.cr

@@ -8,11 +8,11 @@ end
 class RedditComment
   module TimeConverter
     def self.from_json(value : JSON::PullParser) : Time
-      Time.epoch(value.read_float.to_i)
+      Time.unix(value.read_float.to_i)
     end
 
     def self.to_json(value : Time, json : JSON::Builder)
-      json.number(value.epoch)
+      json.number(value.to_unix)
     end
   end
 
@@ -56,7 +56,222 @@ class RedditListing
   })
 end
 
-def get_reddit_comments(id, client, headers)
+def fetch_youtube_comments(id, continuation, proxies, format)
+  client = make_client(YT_URL)
+  html = client.get("/watch?v=#{id}&gl=US&hl=en&disable_polymer=1&has_verified=1&bpctr=9999999999")
+  headers = HTTP::Headers.new
+  headers["cookie"] = html.cookies.add_request_headers(headers)["cookie"]
+  body = html.body
+
+  session_token = body.match(/'XSRF_TOKEN': "(?<session_token>[A-Za-z0-9\_\-\=]+)"/).not_nil!["session_token"]
+  itct = body.match(/itct=(?<itct>[^"]+)"/).not_nil!["itct"]
+  ctoken = body.match(/'COMMENTS_TOKEN': "(?<ctoken>[^"]+)"/)
+
+  if body.match(/<meta itemprop="regionsAllowed" content="">/)
+    bypass_channel = Channel({String, HTTPClient, HTTP::Headers} | Nil).new
+
+    proxies.each do |proxy_region, list|
+      spawn do
+        proxy_client = make_client(YT_URL, proxies, proxy_region)
+
+        response = proxy_client.get("/watch?v=#{id}&gl=US&hl=en&disable_polymer=1&has_verified=1&bpctr=9999999999")
+        proxy_headers = HTTP::Headers.new
+        proxy_headers["Cookie"] = response.cookies.add_request_headers(headers)["cookie"]
+        proxy_html = response.body
+
+        if !proxy_html.match(/<meta itemprop="regionsAllowed" content="">/)
+          bypass_channel.send({proxy_html, proxy_client, proxy_headers})
+        else
+          bypass_channel.send(nil)
+        end
+      end
+    end
+
+    proxies.size.times do
+      response = bypass_channel.receive
+      if response
+        html, client, headers = response
+
+        session_token = html.match(/'XSRF_TOKEN': "(?<session_token>[A-Za-z0-9\_\-\=]+)"/).not_nil!["session_token"]
+        itct = html.match(/itct=(?<itct>[^"]+)"/).not_nil!["itct"]
+        ctoken = html.match(/'COMMENTS_TOKEN': "(?<ctoken>[^"]+)"/)
+
+        break
+      end
+    end
+  end
+
+  if !ctoken
+    if format == "json"
+      return {"comments" => [] of String}.to_json
+    else
+      return {"contentHtml" => "", "commentCount" => 0}.to_json
+    end
+  end
+  ctoken = ctoken["ctoken"]
+
+  if !continuation.empty?
+    ctoken = continuation
+  else
+    continuation = ctoken
+  end
+
+  post_req = {
+    "session_token" => session_token,
+  }
+  post_req = HTTP::Params.encode(post_req)
+
+  headers["content-type"] = "application/x-www-form-urlencoded"
+
+  headers["x-client-data"] = "CIi2yQEIpbbJAQipncoBCNedygEIqKPKAQ=="
+  headers["x-spf-previous"] = "https://www.youtube.com/watch?v=#{id}&gl=US&hl=en&disable_polymer=1&has_verified=1&bpctr=9999999999"
+  headers["x-spf-referer"] = "https://www.youtube.com/watch?v=#{id}&gl=US&hl=en&disable_polymer=1&has_verified=1&bpctr=9999999999"
+
+  headers["x-youtube-client-name"] = "1"
+  headers["x-youtube-client-version"] = "2.20180719"
+  response = client.post("/comment_service_ajax?action_get_comments=1&pbj=1&ctoken=#{ctoken}&continuation=#{continuation}&itct=#{itct}&hl=en&gl=US", headers, post_req)
+  response = JSON.parse(response.body)
+
+  if !response["response"]["continuationContents"]?
+    raise "Could not fetch comments"
+  end
+
+  response = response["response"]["continuationContents"]
+  if response["commentRepliesContinuation"]?
+    body = response["commentRepliesContinuation"]
+  else
+    body = response["itemSectionContinuation"]
+  end
+
+  contents = body["contents"]?
+  if !contents
+    if format == "json"
+      return {"comments" => [] of String}.to_json
+    else
+      return {"contentHtml" => "", "commentCount" => 0}.to_json
+    end
+  end
+
+  comments = JSON.build do |json|
+    json.object do
+      if body["header"]?
+        comment_count = body["header"]["commentsHeaderRenderer"]["countText"]["simpleText"].as_s.delete("Comments,").to_i
+        json.field "commentCount", comment_count
+      end
+
+      json.field "comments" do
+        json.array do
+          contents.as_a.each do |node|
+            json.object do
+              if !response["commentRepliesContinuation"]?
+                node = node["commentThreadRenderer"]
+              end
+
+              if node["replies"]?
+                node_replies = node["replies"]["commentRepliesRenderer"]
+              end
+
+              if !response["commentRepliesContinuation"]?
+                node_comment = node["comment"]["commentRenderer"]
+              else
+                node_comment = node["commentRenderer"]
+              end
+
+              content_html = node_comment["contentText"]["simpleText"]?.try &.as_s.rchop('\ufeff')
+              if content_html
+                content_html = HTML.escape(content_html)
+              end
+
+              content_html ||= content_to_comment_html(node_comment["contentText"]["runs"].as_a)
+              content_html, content = html_to_content(content_html)
+
+              author = node_comment["authorText"]?.try &.["simpleText"]
+              author ||= ""
+
+              json.field "author", author
+              json.field "authorThumbnails" do
+                json.array do
+                  node_comment["authorThumbnail"]["thumbnails"].as_a.each do |thumbnail|
+                    json.object do
+                      json.field "url", thumbnail["url"]
+                      json.field "width", thumbnail["width"]
+                      json.field "height", thumbnail["height"]
+                    end
+                  end
+                end
+              end
+
+              if node_comment["authorEndpoint"]?
+                json.field "authorId", node_comment["authorEndpoint"]["browseEndpoint"]["browseId"]
+                json.field "authorUrl", node_comment["authorEndpoint"]["browseEndpoint"]["canonicalBaseUrl"]
+              else
+                json.field "authorId", ""
+                json.field "authorUrl", ""
+              end
+
+              published = decode_date(node_comment["publishedTimeText"]["runs"][0]["text"].as_s.rchop(" (edited)"))
+
+              json.field "content", content
+              json.field "contentHtml", content_html
+              json.field "published", published.to_unix
+              json.field "publishedText", "#{recode_date(published)} ago"
+              json.field "likeCount", node_comment["likeCount"]
+              json.field "commentId", node_comment["commentId"]
+
+              if node_replies && !response["commentRepliesContinuation"]?
+                reply_count = node_replies["moreText"]["simpleText"].as_s.delete("View all reply replies,")
+                if reply_count.empty?
+                  reply_count = 1
+                else
+                  reply_count = reply_count.try &.to_i?
+                  reply_count ||= 1
+                end
+
+                continuation = node_replies["continuations"].as_a[0]["nextContinuationData"]["continuation"].as_s
+
+                json.field "replies" do
+                  json.object do
+                    json.field "replyCount", reply_count
+                    json.field "continuation", continuation
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+
+      if body["continuations"]?
+        continuation = body["continuations"][0]["nextContinuationData"]["continuation"]
+        json.field "continuation", continuation
+      end
+    end
+  end
+
+  if format == "html"
+    comments = JSON.parse(comments)
+    content_html = template_youtube_comments(comments)
+
+    comments = JSON.build do |json|
+      json.object do
+        json.field "contentHtml", content_html
+
+        if comments["commentCount"]?
+          json.field "commentCount", comments["commentCount"]
+        else
+          json.field "commentCount", 0
+        end
+      end
+    end
+  end
+
+  return comments
+end
+
+def fetch_reddit_comments(id)
+  client = make_client(REDDIT_URL)
+  headers = HTTP::Headers{"User-Agent" => "web:invidio.us:v0.11.0 (by /u/omarroth)"}
+
   query = "(url:3D#{id}%20OR%20url:#{id})%20(site:youtube.com%20OR%20site:youtu.be)"
   search_results = client.get("/search.json?q=#{query}", headers)
 
@@ -104,21 +319,21 @@ def template_youtube_comments(comments)
 
     html += <<-END_HTML
     <div class="pure-g">
-      <div class="pure-u-2-24">
+      <div class="pure-u-4-24 pure-u-md-2-24">
         <img style="width:90%; padding-right:1em; padding-top:1em;" src="#{author_thumbnail}">
       </div>
-      <div class="pure-u-22-24">
+      <div class="pure-u-20-24 pure-u-md-22-24">
         <p>
-            <a href="javascript:void(0)" onclick="toggle(this)">[ - ]</a> 
-            <i class="icon ion-ios-thumbs-up"></i> #{child["likeCount"]} 
-            <b><a href="#{child["authorUrl"]}">#{child["author"]}</a></b> 
-            - #{recode_date(Time.epoch(child["published"].as_i64))} ago
-          </p>
-          <div>
+          <b>
+            <a href="#{child["authorUrl"]}">#{child["author"]}</a>
+          </b> 
           <p style="white-space:pre-wrap">#{child["contentHtml"]}</p>
-          #{replies_html}
-          </div>
-        </div>
+          #{recode_date(Time.unix(child["published"].as_i64))} ago
+          | 
+          <i class="icon ion-ios-thumbs-up"></i> #{number_with_separator(child["likeCount"])} 
+        </p>
+        #{replies_html}
+      </div>
     </div>
     END_HTML
   end
@@ -129,7 +344,7 @@ def template_youtube_comments(comments)
       <div class="pure-u-1">
         <p>
           <a href="javascript:void(0)" data-continuation="#{comments["continuation"]}"
-            onclick="get_youtube_replies(this)">Load more</a>
+            onclick="get_youtube_replies(this, true)">Load more</a>
         </p>
       </div>
     </div>
@@ -156,10 +371,10 @@ def template_reddit_comments(root)
 
       content = <<-END_HTML
       <p>
-        <a href="javascript:void(0)" onclick="toggle(this)">[ - ]</a> 
-        <i class="icon ion-ios-thumbs-up"></i> #{score} 
+        <a href="javascript:void(0)" onclick="toggle_parent(this)">[ - ]</a> 
         <b><a href="https://www.reddit.com/user/#{author}">#{author}</a></b> 
-        - #{recode_date(child.created_utc)} ago
+        #{number_with_separator(score)} points 
+        #{recode_date(child.created_utc)} ago
       </p>
       <div>
       #{body_html}
@@ -260,8 +475,7 @@ def content_to_comment_html(content)
     end
 
     if run["navigationEndpoint"]?
-      url = run["navigationEndpoint"]["urlEndpoint"]?.try &.["url"].as_s
-      if url
+      if url = run["navigationEndpoint"]["urlEndpoint"]?.try &.["url"].as_s
         url = URI.parse(url)
 
         if !url.host || {"m.youtube.com", "www.youtube.com", "youtu.be"}.includes? url.host
@@ -271,11 +485,16 @@ def content_to_comment_html(content)
             url = url.full_path
           end
         end
-      else
-        url = run["navigationEndpoint"]["commandMetadata"]?.try &.["webCommandMetadata"]["url"].as_s
-      end
 
-      text = %(<a href="#{url}">#{text}</a>)
+        text = %(<a href="#{url}">#{text}</a>)
+      elsif watch_endpoint = run["navigationEndpoint"]["watchEndpoint"]?
+        length_seconds = watch_endpoint["startTimeSeconds"].as_i
+        video_id = watch_endpoint["videoId"].as_s
+
+        text = %(<a href="javascript:void(0)" onclick="player.currentTime(#{length_seconds})">#{text}</a>)
+      elsif url = run["navigationEndpoint"]["commandMetadata"]?.try &.["webCommandMetadata"]["url"].as_s
+        text = %(<a href="#{url}">#{text}</a>)
+      end
     end
 
     text

src/invidious/helpers/helpers.cr

@@ -2,6 +2,7 @@ class Config
   YAML.mapping({
     crawl_threads:   Int32,
     channel_threads: Int32,
+    feed_threads:    Int32,
     video_threads:   Int32,
     db:              NamedTuple(
       user: String,
@@ -14,6 +15,7 @@ class Config
     https_only:   Bool?,
     hmac_key:     String?,
     full_refresh: Bool,
+    domain:       String?,
   })
 end
 
@@ -127,55 +129,6 @@ def login_req(login_form, f_req)
   return HTTP::Params.encode(data)
 end
 
-def generate_captcha(key)
-  minute = Random::Secure.rand(12)
-  minute_angle = minute * 30
-  minute = minute * 5
-
-  hour = Random::Secure.rand(12)
-  hour_angle = hour * 30 + minute_angle.to_f / 12
-  if hour == 0
-    hour = 12
-  end
-
-  clock_svg = <<-END_SVG
-  <svg viewBox="0 0 100 100" width="200px">
-  <circle cx="50" cy="50" r="45" fill="#eee" stroke="black" stroke-width="2"></circle>
-  
-  <text x="69"     y="20.091" text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 1</text>
-  <text x="82.909" y="34"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 2</text>
-  <text x="88"     y="53"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 3</text>
-  <text x="82.909" y="72"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 4</text>
-  <text x="69"     y="85.909" text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 5</text>
-  <text x="50"     y="91"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 6</text>
-  <text x="31"     y="85.909" text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 7</text>
-  <text x="17.091" y="72"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 8</text>
-  <text x="12"     y="53"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 9</text>
-  <text x="17.091" y="34"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px">10</text>
-  <text x="31"     y="20.091" text-anchor="middle" fill="black" font-family="Arial" font-size="10px">11</text>
-  <text x="50"     y="15"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px">12</text>
-
-  <circle cx="50" cy="50" r="3" fill="black"></circle>
-  <line id="minute" transform="rotate(#{minute_angle}, 50, 50)" x1="50" y1="50" x2="50" y2="16" fill="black" stroke="black" stroke-width="2"></line>
-  <line id="hour"   transform="rotate(#{hour_angle}, 50, 50)" x1="50" y1="50" x2="50" y2="24" fill="black" stroke="black" stroke-width="2"></line>
-  </svg>
-  END_SVG
-
-  challenge = ""
-  convert = Process.run(%(convert -density 1200 -resize 400x400 -background none svg:- png:-), shell: true,
-    input: IO::Memory.new(clock_svg), output: Process::Redirect::Pipe) do |proc|
-    challenge = proc.output.gets_to_end
-    challenge = Base64.strict_encode(challenge)
-    challenge = "data:image/png;base64,#{challenge}"
-  end
-
-  answer = "#{hour}:#{minute.to_s.rjust(2, '0')}"
-  token = OpenSSL::HMAC.digest(:sha256, key, answer)
-  token = Base64.urlsafe_encode(token)
-
-  return {challenge: challenge, token: token}
-end
-
 def html_to_content(description_html)
   if !description_html
     description = ""
@@ -296,7 +249,9 @@ def extract_items(nodeset, ucid = nil)
       )
     when .includes? "yt-lockup-channel"
       author = title.strip
-      ucid = id.split("/")[-1]
+
+      ucid = node.xpath_node(%q(.//button[contains(@class, "yt-uix-subscription-button")])).try &.["data-channel-external-id"]?
+      ucid ||= id.split("/")[-1]
 
       author_thumbnail = node.xpath_node(%q(.//div/span/img)).try &.["data-thumb"]?
       author_thumbnail ||= node.xpath_node(%q(.//div/span/img)).try &.["src"]
@@ -327,7 +282,7 @@ def extract_items(nodeset, ucid = nil)
       rescue ex
       end
       begin
-        published ||= Time.epoch(metadata[0].xpath_node(%q(.//span)).not_nil!["data-timestamp"].to_i64)
+        published ||= Time.unix(metadata[0].xpath_node(%q(.//span)).not_nil!["data-timestamp"].to_i64)
       rescue ex
       end
       published ||= Time.now
@@ -356,6 +311,18 @@ def extract_items(nodeset, ucid = nil)
         live_now = false
       end
 
+      if node.xpath_node(%q(.//span[text()="Premium"]))
+        premium = true
+      else
+        premium = false
+      end
+
+      if node.xpath_node(%q(.//span[contains(text(), "Get YouTube Premium")]))
+        paid = true
+      else
+        paid = false
+      end
+
       items << SearchVideo.new(
         title,
         id,
@@ -366,7 +333,9 @@ def extract_items(nodeset, ucid = nil)
         description,
         description_html,
         length_seconds,
-        live_now
+        live_now,
+        paid,
+        premium
       )
     end
   end

src/invidious/helpers/utils.cr

@@ -18,16 +18,28 @@ def elapsed_text(elapsed)
   "#{(millis * 1000).round(2)}µs"
 end
 
-def make_client(url)
+def make_client(url, proxies = {} of String => Array({ip: String, port: Int32}), region = nil)
   context = OpenSSL::SSL::Context::Client.new
   context.add_options(
     OpenSSL::SSL::Options::ALL |
     OpenSSL::SSL::Options::NO_SSL_V2 |
     OpenSSL::SSL::Options::NO_SSL_V3
   )
-  client = HTTP::Client.new(url, context)
+  client = HTTPClient.new(url, context)
   client.read_timeout = 10.seconds
   client.connect_timeout = 10.seconds
+
+  if region
+    proxies[region]?.try &.sample(40).each do |proxy|
+      begin
+        proxy = HTTPProxy.new(proxy_host: proxy[:ip], proxy_port: proxy[:port])
+        client.set_proxy(proxy)
+        break
+      rescue ex
+      end
+    end
+  end
+
   return client
 end
 
@@ -40,6 +52,23 @@ def decode_length_seconds(string)
   return length_seconds
 end
 
+def recode_length_seconds(time)
+  if time <= 0
+    return ""
+  else
+    time = time.seconds
+    text = "#{time.minutes.to_s.rjust(2, '0')}:#{time.seconds.to_s.rjust(2, '0')}"
+
+    if time.hours > 0
+      text = "#{time.hours.to_s.rjust(2, '0')}:#{text}"
+    end
+
+    text = text.lchop('0')
+
+    return text
+  end
+end
+
 def decode_time(string)
   time = string.try &.to_f?
 
@@ -138,6 +167,25 @@ def number_with_separator(number)
   number.to_s.reverse.gsub(/(\d{3})(?=\d)/, "\\1,").reverse
 end
 
+def number_to_short_text(number)
+  seperated = number_with_separator(number).gsub(",", ".").split("")
+  text = seperated.first(2).join
+
+  if seperated[2]? && seperated[2] != "."
+    text += seperated[2]
+  end
+
+  text = text.rchop(".0")
+
+  if number / 1000000 != 0
+    text += "M"
+  elsif number / 1000 != 0
+    text += "K"
+  end
+
+  text
+end
+
 def arg_array(array, start = 1)
   if array.size == 0
     args = "NULL"
@@ -238,3 +286,9 @@ def write_var_int(value : Int)
 
   return bytes
 end
+
+def sha256(text)
+  digest = OpenSSL::Digest.new("SHA256")
+  digest << text
+  return digest.hexdigest
+end

src/invidious/jobs.cr

@@ -104,6 +104,44 @@ def refresh_videos(db)
   end
 end
 
+def refresh_feeds(db, max_threads = 1)
+  max_channel = Channel(Int32).new
+
+  spawn do
+    max_threads = max_channel.receive
+    active_threads = 0
+    active_channel = Channel(Bool).new
+
+    loop do
+      db.query("SELECT email FROM users") do |rs|
+        rs.each do
+          email = rs.read(String)
+          view_name = "subscriptions_#{sha256(email)[0..7]}"
+
+          if active_threads >= max_threads
+            if active_channel.receive
+              active_threads -= 1
+            end
+          end
+
+          active_threads += 1
+          spawn do
+            begin
+              db.exec("REFRESH MATERIALIZED VIEW #{view_name}")
+            rescue ex
+              STDOUT << "REFRESH " << email << " : " << ex.message << "\n"
+            end
+
+            active_channel.send(true)
+          end
+        end
+      end
+    end
+  end
+
+  max_channel.send(max_threads)
+end
+
 def pull_top_videos(config, db)
   if config.dl_api_key
     DetectLanguage.configure do |dl_config|
@@ -142,6 +180,21 @@ def pull_top_videos(config, db)
   end
 end
 
+def pull_popular_videos(db)
+  loop do
+    subscriptions = PG_DB.query_all("SELECT channel FROM \
+      (SELECT UNNEST(subscriptions) AS channel FROM users) AS d \
+    GROUP BY channel ORDER BY COUNT(channel) DESC LIMIT 40", as: String)
+
+    videos = PG_DB.query_all("SELECT DISTINCT ON (ucid) * FROM \
+      channel_videos WHERE ucid IN (#{arg_array(subscriptions)}) \
+    ORDER BY ucid, published DESC", subscriptions, as: ChannelVideo).sort_by { |video| video.published }.reverse
+
+    yield videos
+    Fiber.yield
+  end
+end
+
 def update_decrypt_function
   loop do
     begin
@@ -156,39 +209,14 @@ def update_decrypt_function
 end
 
 def find_working_proxies(regions)
-  proxy_channel = Channel({String, Array({ip: String, port: Int32})}).new
+  loop do
+    regions.each do |region|
+      proxies = get_proxies(region).first(20)
+      proxies = proxies.map { |proxy| {ip: proxy[:ip], port: proxy[:port]} }
+      # proxies = filter_proxies(proxies)
 
-  regions.each do |region|
-    spawn do
-      loop do
-        begin
-          proxies = get_proxies(region).first(20)
-        rescue ex
-          next proxy_channel.send({region, Array({ip: String, port: Int32}).new})
-        end
-
-        proxies.select! do |proxy|
-          begin
-            client = HTTPClient.new(YT_URL)
-            client.read_timeout = 10.seconds
-            client.connect_timeout = 10.seconds
-
-            proxy = HTTPProxy.new(proxy_host: proxy[:ip], proxy_port: proxy[:port])
-            client.set_proxy(proxy)
-
-            client.get("/").status_code == 200
-          rescue ex
-            false
-          end
-        end
-        proxies = proxies.map { |proxy| {ip: proxy[:ip], port: proxy[:port]} }
-
-        proxy_channel.send({region, proxies})
-      end
+      yield region, proxies
+      Fiber.yield
     end
   end
-
-  loop do
-    yield proxy_channel.receive
-  end
 end

src/invidious/mixes.cr

@@ -6,6 +6,7 @@ class MixVideo
     ucid:           String,
     length_seconds: Int32,
     index:          Int32,
+    mixes:          Array(String),
   })
 end
 
@@ -25,7 +26,7 @@ def fetch_mix(rdid, video_id, cookies = nil)
   if cookies
     headers = cookies.add_request_headers(headers)
   end
-  response = client.get("/watch?v=#{video_id}&list=#{rdid}&bpctr=#{Time.new.epoch + 2000}&gl=US&hl=en", headers)
+  response = client.get("/watch?v=#{video_id}&list=#{rdid}&gl=US&hl=en&has_verified=1&bpctr=9999999999", headers)
 
   yt_data = response.body.match(/window\["ytInitialData"\] = (?<data>.*);/)
   if yt_data
@@ -34,6 +35,10 @@ def fetch_mix(rdid, video_id, cookies = nil)
     raise "Could not create mix."
   end
 
+  if !yt_data["contents"]["twoColumnWatchNextResults"]["playlist"]?
+    raise "Could not create mix."
+  end
+
   playlist = yt_data["contents"]["twoColumnWatchNextResults"]["playlist"]["playlist"]
   mix_title = playlist["title"].as_s
 
@@ -59,7 +64,8 @@ def fetch_mix(rdid, video_id, cookies = nil)
       author,
       ucid,
       length_seconds,
-      index
+      index,
+      [rdid]
     )
   end
 
@@ -72,3 +78,37 @@ def fetch_mix(rdid, video_id, cookies = nil)
   videos = videos.first(50)
   return Mix.new(mix_title, rdid, videos)
 end
+
+def template_mix(mix)
+  html = <<-END_HTML
+  <h3>
+    <a href="/mix?list=#{mix["mixId"]}">
+      #{mix["title"]}
+    </a>
+  </h3>
+  <div class="pure-menu pure-menu-scrollable playlist-restricted">
+    <ol class="pure-menu-list">
+  END_HTML
+
+  mix["videos"].as_a.each do |video|
+    html += <<-END_HTML
+      <li class="pure-menu-item">
+        <a href="/watch?v=#{video["videoId"]}&list=#{mix["mixId"]}">
+          <img style="width:100%;" src="/vi/#{video["videoId"]}/mqdefault.jpg">
+          <p style="width:100%">#{video["title"]}</p>
+          <p>
+              <b style="width: 100%">#{video["author"]}</b>
+          </p>
+        </a>
+      </li>
+    END_HTML
+  end
+
+  html += <<-END_HTML
+    </ol>
+  </div>
+  <hr>
+  END_HTML
+
+  html
+end

src/invidious/playlists.cr

@@ -26,11 +26,23 @@ class Playlist
   })
 end
 
-def fetch_playlist_videos(plid, page, video_count)
+def fetch_playlist_videos(plid, page, video_count, continuation = nil)
   client = make_client(YT_URL)
 
-  if video_count > 100
+  if continuation
+    html = client.get("/watch?v=#{continuation}&list=#{plid}&gl=US&hl=en&disable_polymer=1&has_verified=1&bpctr=9999999999")
+    html = XML.parse_html(html.body)
+
+    index = html.xpath_node(%q(//span[@id="playlist-current-index"])).try &.content.to_i?
+    if index
+      index -= 1
+    end
+    index ||= 0
+  else
     index = (page - 1) * 100
+  end
+
+  if video_count > 100
     url = produce_playlist_url(plid, index)
 
     response = client.get(url)
@@ -53,6 +65,11 @@ def fetch_playlist_videos(plid, page, video_count)
       nodeset = document.xpath_nodes(%q(.//tr[contains(@class, "pl-video")]))
 
       videos = extract_playlist(plid, nodeset, 0)
+      if continuation
+        until videos[0].id == continuation
+          videos.shift
+        end
+      end
     end
   end
 
@@ -150,11 +167,10 @@ def fetch_playlist(plid)
     raise "Invalid playlist."
   end
 
-  body = response.body.gsub(<<-END_BUTTON
+  body = response.body.gsub(%(
   <button class="yt-uix-button yt-uix-button-size-default yt-uix-button-link yt-uix-expander-head playlist-description-expander yt-uix-inlineedit-ignore-edit" type="button" onclick=";return false;"><span class="yt-uix-button-content">  less <img alt="" src="/yts/img/pixel-vfl3z5WfW.gif">
   </span></button>
-  END_BUTTON
-  , "")
+  ), "")
   document = XML.parse_html(body)
 
   title = document.xpath_node(%q(//h1[@class="pl-header-title"]))
@@ -171,7 +187,7 @@ def fetch_playlist(plid)
   author = anchor.xpath_node(%q(.//li[1]/a)).not_nil!.content
   author_thumbnail = document.xpath_node(%q(//img[@class="channel-header-profile-image"])).try &.["src"]
   author_thumbnail ||= ""
-  ucid = anchor.xpath_node(%q(.//li[1]/a)).not_nil!["href"].split("/")[2]
+  ucid = anchor.xpath_node(%q(.//li[1]/a)).not_nil!["href"].split("/")[-1]
 
   video_count = anchor.xpath_node(%q(.//li[2])).not_nil!.content.delete("videos, ").to_i
   views = anchor.xpath_node(%q(.//li[3])).not_nil!.content.delete("No views, ")
@@ -199,3 +215,37 @@ def fetch_playlist(plid)
 
   return playlist
 end
+
+def template_playlist(playlist)
+  html = <<-END_HTML
+  <h3>
+    <a href="/playlist?list=#{playlist["playlistId"]}">
+      #{playlist["title"]}
+    </a>
+  </h3>
+  <div class="pure-menu pure-menu-scrollable playlist-restricted">
+    <ol class="pure-menu-list">
+  END_HTML
+
+  playlist["videos"].as_a.each do |video|
+    html += <<-END_HTML
+      <li class="pure-menu-item">
+        <a href="/watch?v=#{video["videoId"]}&list=#{playlist["playlistId"]}">
+          <img style="width:100%;" src="/vi/#{video["videoId"]}/mqdefault.jpg">
+          <p style="width:100%">#{video["title"]}</p>
+          <p>
+              <b style="width: 100%">#{video["author"]}</b>
+          </p>
+        </a>
+      </li>
+    END_HTML
+  end
+
+  html += <<-END_HTML
+    </ol>
+  </div>
+  <hr>
+  END_HTML
+
+  html
+end

src/invidious/search.cr

@@ -10,6 +10,8 @@ class SearchVideo
     description_html: String,
     length_seconds:   Int32,
     live_now:         Bool,
+    paid:             Bool,
+    premium:          Bool,
   })
 end
 
@@ -49,12 +51,12 @@ alias SearchItem = SearchVideo | SearchChannel | SearchPlaylist
 def channel_search(query, page, channel)
   client = make_client(YT_URL)
 
-  response = client.get("/user/#{channel}")
+  response = client.get("/user/#{channel}?disable_polymer=1&hl=en&gl=US")
   document = XML.parse_html(response.body)
   canonical = document.xpath_node(%q(//link[@rel="canonical"]))
 
   if !canonical
-    response = client.get("/channel/#{channel}")
+    response = client.get("/channel/#{channel}?disable_polymer=1&hl=en&gl=US")
     document = XML.parse_html(response.body)
     canonical = document.xpath_node(%q(//link[@rel="canonical"]))
   end

src/invidious/trending.cr

@@ -0,0 +1,41 @@
+def fetch_trending(trending_type, proxies, region)
+  client = make_client(YT_URL)
+  headers = HTTP::Headers.new
+  headers["User-Agent"] = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36"
+
+  region ||= "US"
+  region = region.upcase
+
+  trending = ""
+  if trending_type
+    trending_type = trending_type.downcase.capitalize
+
+    response = client.get("/feed/trending?gl=#{region}&hl=en", headers).body
+
+    yt_data = response.match(/window\["ytInitialData"\] = (?<data>.*);/)
+    if yt_data
+      yt_data = JSON.parse(yt_data["data"].rchop(";"))
+    else
+      raise "Could not pull trending pages."
+    end
+
+    tabs = yt_data["contents"]["twoColumnBrowseResultsRenderer"]["tabs"][0]["tabRenderer"]["content"]["sectionListRenderer"]["subMenu"]["channelListSubMenuRenderer"]["contents"].as_a
+    url = tabs.select { |tab| tab["channelListSubMenuAvatarRenderer"]["title"]["simpleText"] == trending_type }[0]?
+
+    if url
+      url = url["channelListSubMenuAvatarRenderer"]["navigationEndpoint"]["commandMetadata"]["webCommandMetadata"]["url"].as_s
+      url += "&disable_polymer=1&gl=#{region}&hl=en"
+      trending = client.get(url).body
+    else
+      trending = client.get("/feed/trending?gl=#{region}&hl=en&disable_polymer=1").body
+    end
+  else
+    trending = client.get("/feed/trending?gl=#{region}&hl=en&disable_polymer=1").body
+  end
+
+  trending = XML.parse_html(trending)
+  nodeset = trending.xpath_nodes(%q(//ul/li[@class="expanded-shelf-content-item-wrapper"]))
+  trending = extract_videos(nodeset)
+
+  return trending
+end

src/invidious/users.cr

@@ -1,3 +1,5 @@
+require "crypto/bcrypt/password"
+
 class User
   module PreferencesConverter
     def self.from_rs(rs)
@@ -70,10 +72,18 @@ class Preferences
   JSON.mapping({
     video_loop: Bool,
     autoplay:   Bool,
-    speed:      Float32,
-    quality:    String,
-    volume:     Int32,
-    comments:   {
+    continue:   {
+      type:    Bool,
+      default: false,
+    },
+    listen: {
+      type:    Bool,
+      default: false,
+    },
+    speed:    Float32,
+    quality:  String,
+    volume:   Int32,
+    comments: {
       type:      Array(String),
       default:   ["youtube", ""],
       converter: StringToArray,
@@ -119,6 +129,15 @@ def get_user(sid, client, headers, db, refresh = true)
 
       db.exec("INSERT INTO users VALUES (#{args}) \
       ON CONFLICT (email) DO UPDATE SET id = users.id || $1, updated = $2, subscriptions = $4", user_array)
+
+      begin
+        view_name = "subscriptions_#{sha256(user.email)[0..7]}"
+        PG_DB.exec("CREATE MATERIALIZED VIEW #{view_name} AS \
+        SELECT * FROM channel_videos WHERE \
+        ucid = ANY ((SELECT subscriptions FROM users WHERE email = '#{user.email}')::text[]) \
+        ORDER BY published DESC;")
+      rescue ex
+      end
     end
   else
     user = fetch_user(sid, client, headers, db)
@@ -129,6 +148,15 @@ def get_user(sid, client, headers, db, refresh = true)
 
     db.exec("INSERT INTO users VALUES (#{args}) \
     ON CONFLICT (email) DO UPDATE SET id = users.id || $1, updated = $2, subscriptions = $4", user_array)
+
+    begin
+      view_name = "subscriptions_#{sha256(user.email)[0..7]}"
+      PG_DB.exec("CREATE MATERIALIZED VIEW #{view_name} AS \
+      SELECT * FROM channel_videos WHERE \
+      ucid = ANY ((SELECT subscriptions FROM users WHERE email = '#{user.email}')::text[]) \
+      ORDER BY published DESC;")
+    rescue ex
+    end
   end
 
   return user
@@ -173,3 +201,117 @@ def create_user(sid, email, password)
 
   return user
 end
+
+def create_response(user_id, operation, key, db, expire = 6.hours)
+  expire = Time.now + expire
+  nonce = Random::Secure.hex(16)
+  db.exec("INSERT INTO nonces VALUES ($1, $2) ON CONFLICT DO NOTHING", nonce, expire)
+
+  challenge = "#{expire.to_unix}-#{nonce}-#{user_id}-#{operation}"
+  token = OpenSSL::HMAC.digest(:sha256, key, challenge)
+
+  challenge = Base64.urlsafe_encode(challenge)
+  token = Base64.urlsafe_encode(token)
+
+  return challenge, token
+end
+
+def validate_response(challenge, token, user_id, operation, key, db)
+  if !challenge
+    raise "Hidden field \"challenge\" is a required field"
+  end
+
+  if !token
+    raise "Hidden field \"token\" is a required field"
+  end
+
+  challenge = Base64.decode_string(challenge)
+  if challenge.split("-").size == 4
+    expire, nonce, challenge_user_id, challenge_operation = challenge.split("-")
+
+    expire = expire.to_i?
+    expire ||= 0
+  else
+    raise "Invalid challenge"
+  end
+
+  challenge = OpenSSL::HMAC.digest(:sha256, HMAC_KEY, challenge)
+  challenge = Base64.urlsafe_encode(challenge)
+
+  if db.query_one?("SELECT EXISTS (SELECT true FROM nonces WHERE nonce = $1)", nonce, as: Bool)
+    db.exec("DELETE FROM nonces * WHERE nonce = $1", nonce)
+  else
+    raise "Invalid token"
+  end
+
+  if challenge != token
+    raise "Invalid token"
+  end
+
+  if challenge_operation != operation
+    raise "Invalid token"
+  end
+
+  if challenge_user_id != user_id
+    raise "Invalid user"
+  end
+
+  if expire < Time.now.to_unix
+    raise "Token is expired, please try again"
+  end
+end
+
+def generate_captcha(key, db)
+  second = Random::Secure.rand(12)
+  second_angle = second * 30
+  second = second * 5
+
+  minute = Random::Secure.rand(12)
+  minute_angle = minute * 30
+  minute = minute * 5
+
+  hour = Random::Secure.rand(12)
+  hour_angle = hour * 30 + minute_angle.to_f / 12
+  if hour == 0
+    hour = 12
+  end
+
+  clock_svg = <<-END_SVG
+  <svg viewBox="0 0 100 100" width="200px">
+  <circle cx="50" cy="50" r="45" fill="#eee" stroke="black" stroke-width="2"></circle>
+  
+  <text x="69"     y="20.091" text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 1</text>
+  <text x="82.909" y="34"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 2</text>
+  <text x="88"     y="53"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 3</text>
+  <text x="82.909" y="72"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 4</text>
+  <text x="69"     y="85.909" text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 5</text>
+  <text x="50"     y="91"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 6</text>
+  <text x="31"     y="85.909" text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 7</text>
+  <text x="17.091" y="72"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 8</text>
+  <text x="12"     y="53"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 9</text>
+  <text x="17.091" y="34"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px">10</text>
+  <text x="31"     y="20.091" text-anchor="middle" fill="black" font-family="Arial" font-size="10px">11</text>
+  <text x="50"     y="15"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px">12</text>
+
+  <circle cx="50" cy="50" r="3" fill="black"></circle>
+  <line id="second" transform="rotate(#{second_angle}, 50, 50)" x1="50" y1="50" x2="50" y2="12" fill="black" stroke="black" stroke-width="1"></line>
+  <line id="minute" transform="rotate(#{minute_angle}, 50, 50)" x1="50" y1="50" x2="50" y2="16" fill="black" stroke="black" stroke-width="2"></line>
+  <line id="hour"   transform="rotate(#{hour_angle}, 50, 50)" x1="50" y1="50" x2="50" y2="24" fill="black" stroke="black" stroke-width="2"></line>
+  </svg>
+  END_SVG
+
+  image = ""
+  convert = Process.run(%(convert -density 1200 -resize 400x400 -background none svg:- png:-), shell: true,
+    input: IO::Memory.new(clock_svg), output: Process::Redirect::Pipe) do |proc|
+    image = proc.output.gets_to_end
+    image = Base64.strict_encode(image)
+    image = "data:image/png;base64,#{image}"
+  end
+
+  answer = "#{hour}:#{minute.to_s.rjust(2, '0')}:#{second.to_s.rjust(2, '0')}"
+  answer = OpenSSL::HMAC.hexdigest(:sha256, key, answer)
+
+  challenge, token = create_response(answer, "sign_in", key, db)
+
+  return {image: image, challenge: challenge, token: token}
+end

src/invidious/videos.cr

@@ -262,6 +262,13 @@ class Video
     end
   end
 
+  def keywords
+    keywords = self.player_response["videoDetails"]["keywords"]?.try &.as_a
+    keywords ||= [] of String
+
+    return keywords
+  end
+
   def fmt_stream(decrypt_function)
     streams = [] of HTTP::Params
     self.info["url_encoded_fmt_stream_map"].split(",") do |string|
@@ -312,7 +319,7 @@ class Video
           clen = url.match(/clen\/(?<clen>\d+)/).try &.["clen"]
           clen ||= "0"
           lmt = url.match(/lmt\/(?<lmt>\d+)/).try &.["lmt"]
-          lmt ||= "#{((Time.now + 1.hour).epoch_f.to_f64 * 1000000).to_i64}"
+          lmt ||= "#{((Time.now + 1.hour).to_unix_f.to_f64 * 1000000).to_i64}"
 
           segment_list = representation.xpath_node(%q(.//segmentlist)).not_nil!
           init = segment_list.xpath_node(%q(.//initialization))
@@ -407,6 +414,23 @@ class Video
     return @player_json.not_nil!
   end
 
+  def paid
+    reason = self.player_response["playabilityStatus"]?.try &.["reason"]?
+
+    if reason == "This video requires payment to watch."
+      paid = true
+    else
+      paid = false
+    end
+
+    return paid
+  end
+
+  def premium
+    premium = self.player_response.to_s.includes? "Get YouTube without the ads."
+    return premium
+  end
+
   def captions
     captions = [] of Caption
     if player_response["captions"]?
@@ -434,6 +458,10 @@ class Video
     return description
   end
 
+  def length_seconds
+    return self.info["length_seconds"].to_i
+  end
+
   add_mapping({
     id:   String,
     info: {
@@ -456,10 +484,9 @@ class Video
     is_family_friendly: Bool,
     genre:              String,
     genre_url:          String,
-    license:            {
-      type:    String,
-      default: "",
-    },
+    license:            String,
+    sub_count_text:     String,
+    author_thumbnail:   String,
   })
 end
 
@@ -477,21 +504,24 @@ class CaptionName
   )
 end
 
-def get_video(id, db, proxies = {} of String => Array({ip: String, port: Int32}), refresh = true)
-  if db.query_one?("SELECT EXISTS (SELECT true FROM videos WHERE id = $1)", id, as: Bool)
+class VideoRedirect < Exception
+end
+
+def get_video(id, db, proxies = {} of String => Array({ip: String, port: Int32}), refresh = true, region = nil)
+  if db.query_one?("SELECT EXISTS (SELECT true FROM videos WHERE id = $1)", id, as: Bool) && !region
     video = db.query_one("SELECT * FROM videos WHERE id = $1", id, as: Video)
 
     # If record was last updated over 10 minutes ago, refresh (expire param in response lasts for 6 hours)
     if refresh && Time.now - video.updated > 10.minutes
       begin
-        video = fetch_video(id, proxies)
+        video = fetch_video(id, proxies, region)
         video_array = video.to_a
 
         args = arg_array(video_array[1..-1], 2)
 
         db.exec("UPDATE videos SET (info,updated,title,views,likes,dislikes,wilson_score,\
-          published,description,language,author,ucid, allowed_regions, is_family_friendly,\
-          genre, genre_url, license)\
+          published,description,language,author,ucid,allowed_regions,is_family_friendly,\
+          genre,genre_url,license,sub_count_text,author_thumbnail)\
           = (#{args}) WHERE id = $1", video_array)
       rescue ex
         db.exec("DELETE FROM videos * WHERE id = $1", id)
@@ -499,31 +529,37 @@ def get_video(id, db, proxies = {} of String => Array({ip: String, port: Int32})
       end
     end
   else
-    video = fetch_video(id, proxies)
+    video = fetch_video(id, proxies, region)
     video_array = video.to_a
 
     args = arg_array(video_array)
 
-    db.exec("INSERT INTO videos VALUES (#{args}) ON CONFLICT (id) DO NOTHING", video_array)
+    if !region
+      db.exec("INSERT INTO videos VALUES (#{args}) ON CONFLICT (id) DO NOTHING", video_array)
+    end
   end
 
   return video
 end
 
-def fetch_video(id, proxies)
-  html_channel = Channel(XML::Node).new
+def fetch_video(id, proxies, region)
+  html_channel = Channel(XML::Node | String).new
   info_channel = Channel(HTTP::Params).new
 
   spawn do
-    client = make_client(YT_URL)
-    html = client.get("/watch?v=#{id}&bpctr=#{Time.new.epoch + 2000}&gl=US&hl=en&disable_polymer=1")
-    html = XML.parse_html(html.body)
+    client = make_client(YT_URL, proxies, region)
+    html = client.get("/watch?v=#{id}&gl=US&hl=en&disable_polymer=1&has_verified=1&bpctr=9999999999")
 
+    if md = html.headers["location"]?.try &.match(/v=(?<id>[a-zA-Z0-9_-]{11})/)
+      next html_channel.send(md["id"])
+    end
+
+    html = XML.parse_html(html.body)
     html_channel.send(html)
   end
 
   spawn do
-    client = make_client(YT_URL)
+    client = make_client(YT_URL, proxies, region)
     info = client.get("/get_video_info?video_id=#{id}&el=detailpage&ps=default&eurl=&gl=US&hl=en&disable_polymer=1")
     info = HTTP::Params.parse(info.body)
 
@@ -536,57 +572,43 @@ def fetch_video(id, proxies)
   end
 
   html = html_channel.receive
+  if html.as?(String)
+    raise VideoRedirect.new("#{html.as(String)}")
+  end
+  html = html.as(XML::Node)
+
   info = info_channel.receive
 
   if info["reason"]? && info["reason"].includes? "your country"
-    bypass_channel = Channel(HTTPProxy | Nil).new
+    bypass_channel = Channel({HTTPClient, String} | Nil).new
 
-    proxies.each do |region, list|
+    proxies.each do |proxy_region, list|
       spawn do
-        list.each do |proxy|
-          begin
-            client = HTTPClient.new(YT_URL)
-            client.read_timeout = 10.seconds
-            client.connect_timeout = 10.seconds
+        client = make_client(YT_URL, proxies, proxy_region)
 
-            proxy = HTTPProxy.new(proxy_host: proxy[:ip], proxy_port: proxy[:port])
-            client.set_proxy(proxy)
-
-            info = HTTP::Params.parse(client.get("/get_video_info?video_id=#{id}&ps=default&eurl=&gl=US&hl=en&disable_polymer=1").body)
-            if !info["reason"]?
-              bypass_channel.send(proxy)
-            else
-              bypass_channel.send(nil)
-            end
-
-            break
-          rescue ex
-          end
+        info = HTTP::Params.parse(client.get("/get_video_info?video_id=#{id}&ps=default&eurl=&gl=US&hl=en&disable_polymer=1").body)
+        if !info["reason"]?
+          bypass_channel.send({client, proxy_region})
+        else
+          bypass_channel.send(nil)
         end
       end
     end
 
     proxies.size.times do
-      proxy = bypass_channel.receive
-      if proxy
+      response = bypass_channel.receive
+      if response
         begin
-          client = HTTPClient.new(YT_URL)
-          client.read_timeout = 10.seconds
-          client.connect_timeout = 10.seconds
-          client.set_proxy(proxy)
+          client, proxy_region = response
 
-          html = XML.parse_html(client.get("/watch?v=#{id}&bpctr=#{Time.new.epoch + 2000}&gl=US&hl=en&disable_polymer=1").body)
+          html = XML.parse_html(client.get("/watch?v=#{id}&gl=US&hl=en&disable_polymer=1&has_verified=1&bpctr=9999999999").body)
           info = HTTP::Params.parse(client.get("/get_video_info?video_id=#{id}&el=detailpage&ps=default&eurl=&gl=US&hl=en&disable_polymer=1").body)
 
           if info["reason"]?
             info = HTTP::Params.parse(client.get("/get_video_info?video_id=#{id}&ps=default&eurl=&gl=US&hl=en&disable_polymer=1").body)
           end
 
-          proxy = {ip: proxy.proxy_host, port: proxy.proxy_port}
-          region = proxies.select { |region, list| list.includes? proxy }
-          if !region.empty?
-            info["region"] = region.keys[0]
-          end
+          info["region"] = proxy_region
 
           break
         rescue ex
@@ -596,20 +618,35 @@ def fetch_video(id, proxies)
   end
 
   if info["reason"]?
-    raise info["reason"]
+    html_info = html.to_s.match(/ytplayer\.config = (?<info>.*?);ytplayer\.load/).try &.["info"]
+    if html_info
+      html_info = JSON.parse(html_info)["args"].as_h
+      info.delete("reason")
+
+      html_info.each do |k, v|
+        info[k] = v.to_s
+      end
+    end
+
+    if info["reason"]?
+      raise info["reason"]
+    end
   end
 
   title = info["title"]
-  views = info["view_count"].to_i64
   author = info["author"]
   ucid = info["ucid"]
 
+  views = html.xpath_node(%q(//meta[@itemprop="interactionCount"]))
+  views = views.try &.["content"].to_i64?
+  views ||= 0_i64
+
   likes = html.xpath_node(%q(//button[@title="I like this"]/span))
-  likes = likes.try &.content.delete(",").try &.to_i
+  likes = likes.try &.content.delete(",").try &.to_i?
   likes ||= 0
 
   dislikes = html.xpath_node(%q(//button[@title="I dislike this"]/span))
-  dislikes = dislikes.try &.content.delete(",").try &.to_i
+  dislikes = dislikes.try &.content.delete(",").try &.to_i?
   dislikes ||= 0
 
   description = html.xpath_node(%q(//p[@id="eow-description"]))
@@ -617,7 +654,8 @@ def fetch_video(id, proxies)
 
   wilson_score = ci_lower_bound(likes, likes + dislikes)
 
-  published = html.xpath_node(%q(//meta[@itemprop="datePublished"])).not_nil!["content"]
+  published = html.xpath_node(%q(//meta[@itemprop="datePublished"])).try &.["content"]
+  published ||= Time.now.to_s("%Y-%m-%d")
   published = Time.parse(published, "%Y-%m-%d", Time::Location.local)
 
   allowed_regions = html.xpath_node(%q(//meta[@itemprop="regionsAllowed"])).try &.["content"].split(",")
@@ -625,15 +663,16 @@ def fetch_video(id, proxies)
   is_family_friendly = html.xpath_node(%q(//meta[@itemprop="isFamilyFriendly"])).try &.["content"] == "True"
   is_family_friendly ||= true
 
-  genre = html.xpath_node(%q(//meta[@itemprop="genre"])).not_nil!["content"]
+  genre = html.xpath_node(%q(//meta[@itemprop="genre"])).try &.["content"]
+  genre ||= ""
+
   genre_url = html.xpath_node(%(//a[text()="#{genre}"])).try &.["href"]
   case genre
   when "Movies"
     genre_url = "/channel/UClgRkhTL3_hImCAmdLfDE4g"
   when "Education"
     # Education channel is linked but does not exist
-    # genre_url = "/channel/UC3yA8nDwraeOfnYfBWun83g"
-    genre_url = ""
+    genre_url = "/channel/UC3yA8nDwraeOfnYfBWun83g"
   end
   genre_url ||= ""
 
@@ -641,11 +680,25 @@ def fetch_video(id, proxies)
   if license
     license = license.content
   else
-    license ||= ""
+    license = ""
+  end
+
+  sub_count_text = html.xpath_node(%q(//span[contains(@class, "yt-subscriber-count")]))
+  if sub_count_text
+    sub_count_text = sub_count_text["title"]
+  else
+    sub_count_text = "0"
+  end
+
+  author_thumbnail = html.xpath_node(%(//span[@class="yt-thumb-clip"]/img))
+  if author_thumbnail
+    author_thumbnail = author_thumbnail["data-thumb"]
+  else
+    author_thumbnail = ""
   end
 
   video = Video.new(id, info, Time.now, title, views, likes, dislikes, wilson_score, published, description,
-    nil, author, ucid, allowed_regions, is_family_friendly, genre, genre_url, license)
+    nil, author, ucid, allowed_regions, is_family_friendly, genre, genre_url, license, sub_count_text, author_thumbnail)
 
   return video
 end
@@ -656,14 +709,20 @@ end
 
 def process_video_params(query, preferences)
   autoplay = query["autoplay"]?.try &.to_i?
+  continue = query["continue"]?.try &.to_i?
+  listen = query["listen"]? && (query["listen"] == "true" || query["listen"] == "1").to_unsafe
   preferred_captions = query["subtitles"]?.try &.split(",").map { |a| a.downcase }
   quality = query["quality"]?
+  region = query["region"]?
   speed = query["speed"]?.try &.to_f?
   video_loop = query["loop"]?.try &.to_i?
   volume = query["volume"]?.try &.to_i?
 
   if preferences
+    # region ||= preferences.region
     autoplay ||= preferences.autoplay.to_unsafe
+    continue ||= preferences.continue.to_unsafe
+    listen ||= preferences.listen.to_unsafe
     preferred_captions ||= preferences.captions
     quality ||= preferences.quality
     speed ||= preferences.speed
@@ -672,6 +731,8 @@ def process_video_params(query, preferences)
   end
 
   autoplay ||= 0
+  continue ||= 0
+  listen ||= 0
   preferred_captions ||= [] of String
   quality ||= "hd720"
   speed ||= 1
@@ -679,6 +740,8 @@ def process_video_params(query, preferences)
   volume ||= 100
 
   autoplay = autoplay == 1
+  continue = continue == 1
+  listen = listen == 1
   video_loop = video_loop == 1
 
   if query["t"]?
@@ -698,11 +761,6 @@ def process_video_params(query, preferences)
   end
   video_end ||= -1
 
-  if query["listen"]? && (query["listen"] == "true" || query["listen"] == "1")
-    listen = true
-  end
-  listen ||= false
-
   raw = query["raw"]?.try &.to_i?
   raw ||= 0
   raw = raw == 1
@@ -713,11 +771,13 @@ def process_video_params(query, preferences)
 
   params = {
     autoplay:           autoplay,
+    continue:           continue,
     controls:           controls,
     listen:             listen,
     preferred_captions: preferred_captions,
     quality:            quality,
     raw:                raw,
+    region:             region,
     speed:              speed,
     video_end:          video_end,
     video_loop:         video_loop,

src/invidious/views/channel.ecr

@@ -13,46 +13,120 @@
     </div>
 </div>
 
-<p class="h-box">
+<div class="h-box">
 <% if user %>
     <% if subscriptions.includes? ucid %>
-    <a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>">
-        <b>Unsubscribe from <%= author %></b>
-    </a>
+    <p>
+        <a id="subscribe" onclick="unsubscribe()" class="pure-button pure-button-primary" 
+            href="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>">
+            <b>Unsubscribe | <%= number_to_short_text(sub_count) %></b>
+        </a>
+    </p>
     <% else %>
-    <a href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>">
-        <b>Subscribe to <%= author %></b>
-    </a>
+    <p>
+        <a id="subscribe" onclick="subscribe()" class="pure-button pure-button-primary" 
+            href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>">
+            <b>Subscribe | <%= number_to_short_text(sub_count) %></b>
+        </a>
+    </p>
     <% end %>
 <% else %>
-    <a href="/login?referer=<%= env.get("current_page") %>">
-        <b>Login to subscribe to <%= author %></b>
-    </a>
+    <p>
+        <a id="subscribe" class="pure-button pure-button-primary" 
+            href="/login?referer=<%= env.get("current_page") %>">
+            <b>Login to subscribe to <%= author %></b>
+        </a>
+    </p>
 <% end %>
-</p>
+</div>
 
-<p class="h-box">
-    <a href="https://www.youtube.com/channel/<%= ucid %>">View channel on YouTube</a>
-</p>
+<div class="pure-g h-box">
+    <div class="pure-u-1-3">
+        <a href="https://www.youtube.com/channel/<%= ucid %>">View channel on YouTube</a>
+    </div>
+    <div class="pure-u-1-3">
+    </div>
+    <div class="pure-u-1-3">
+        <div class="pure-g" style="text-align:right;">
+        <% {"newest", "oldest", "popular"}.each do |sort| %>
+            <div class="pure-u-1 pure-md-1-3">
+                <% if sort_by == sort %>
+                <b><%= sort %></b>
+                <% else %>
+                <a href="/channel/<%= ucid %>?page=<%= page %>&sort_by=<%= sort %>">
+                <%= sort %>
+                </a>
+                <% end %>
+            </div>
+        <% end %>
+        </div>
+    </div>
+</div>
+
+<div class="h-box">
+    <hr>
+</div>
 
-<% videos.each_slice(4) do |slice| %>
 <div class="pure-g">
+<% videos.each_slice(4) do |slice| %>
     <% slice.each do |item| %>
         <%= rendered "components/item" %>
     <% end %>
-</div> 
 <% end %>
+</div> 
 
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-md-1-5">
     <% if page >= 2 %>
-        <a href="/channel/<%= ucid %>?page=<%= page - 1 %>">Previous page</a>
+        <a href="/channel/<%= ucid %>?page=<%= page - 1 %><% if sort_by != "newest" %>&sort_by=<%= sort_by %><% end %>">Previous page</a>
     <% end %>
     </div>
     <div class="pure-u-1 pure-u-md-3-5"></div>
     <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
-    <% if videos.size == 60 %>
-        <a href="/channel/<%= ucid %>?page=<%= page + 1 %>">Next page</a>
+    <% if count == 60 %>
+        <a href="/channel/<%= ucid %>?page=<%= page + 1 %><% if sort_by != "newest" %>&sort_by=<%= sort_by %><% end %>">Next page</a>
     <% end %>
     </div>
 </div>
+
+<script>
+document.getElementById("subscribe")["href"] = "javascript:void(0)"
+
+function subscribe() {
+    var url = "/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>";
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "json";
+    xhr.timeout = 20000;
+    xhr.open("GET", url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                subscribe_button = document.getElementById("subscribe");
+                subscribe_button.onclick = unsubscribe;
+                subscribe_button.innerHTML = '<b>Unsubscribe | <%= number_to_short_text(sub_count) %></b>'
+            }
+        }
+    }
+}
+
+function unsubscribe() {
+    var url = "/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>";
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "json";
+    xhr.timeout = 20000;
+    xhr.open("GET", url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                subscribe_button = document.getElementById("subscribe");
+                subscribe_button.onclick = subscribe;
+                subscribe_button.innerHTML = '<b>Subscribe | <%= number_to_short_text(sub_count) %></b>'
+            }
+        }
+    }
+}
+</script>

src/invidious/views/clear_watch_history.ecr

@@ -0,0 +1,17 @@
+<div class="h-box">
+    <form class="pure-form pure-form-aligned" action="/clear_watch_history?referer=<%= URI.escape(referer) %>" method="post">
+        <legend>Clear watch history?</legend>
+
+        <div class="pure-g">
+            <div class="pure-u-1-2">
+                <button type="submit" name="submit" value="clear_watch_history" class="pure-button pure-button-primary">Yes</button>
+            </div>
+            <div class="pure-u-1-2">
+                <a class="pure-button" href="<%= referer %>">No</a>
+            </div>
+        </div>
+
+        <input type="hidden" name="token" value="<%= token %>">
+        <input type="hidden" name="challenge" value="<%= challenge %>">
+    </form>
+</div>

src/invidious/views/components/item.ecr

@@ -12,6 +12,7 @@
             <p><%= item.author %></p>
         </a>
         <p><%= number_with_separator(item.subscriber_count) %> subscribers</p>
+        <p><%= number_with_separator(item.video_count) %> videos</p>
         <h5><%= item.description_html %></h5>
     <% when SearchPlaylist %>
         <% if item.id.starts_with? "RD" %>
@@ -22,36 +23,38 @@
         <a style="width:100%;" href="<%= url %>">
             <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
             <% else %>
-            <img style="width:100%;" src="/vi/<%= item.videos[0]?.try &.id %>/mqdefault.jpg"/>
+            <div class="thumbnail">
+                <img class="thumbnail" src="/vi/<%= item.videos[0]?.try &.id %>/mqdefault.jpg"/>
+                <p class="length"><%= number_with_separator(item.video_count) %> videos</p>
+            </div>
             <% end %>
             <p><%= item.title %></p>
         </a>
         <p>
             <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
         </p>
-        <p><%= number_with_separator(item.video_count) %> videos</p>
-        <p>PLAYLIST</p>
     <% when MixVideo %>
-        <a style="width:100%;" href="/watch?v=<%= item.id %>">
+        <a style="width:100%;" href="/watch?v=<%= item.id %>&list=<%= item.mixes[0] %>">
             <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
             <% else %>
-            <img style="width:100%;" src="/vi/<%= item.id %>/mqdefault.jpg"/>
+            <div class="thumbnail">
+                <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
+                <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
+            </div>
             <% end %>
             <p><%= item.title %></p>
         </a>
         <p>
             <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
         </p>
-    <% else %>
-        <% if item.responds_to?(:playlists) && !item.playlists.empty? %>
-        <% params = "&list=#{item.playlists[0]}" %>
-        <% else %>
-        <% params = nil %>
-        <% end %>
-        <a style="width:100%;" href="/watch?v=<%= item.id %><%= params %>">
+    <% when PlaylistVideo %>
+        <a style="width:100%;" href="/watch?v=<%= item.id %>&list=<%= item.playlists[0] %>">
             <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
             <% else %>
-            <img style="width:100%;" src="/vi/<%= item.id %>/mqdefault.jpg"/>
+            <div class="thumbnail">
+                <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
+                <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
+            </div>
             <% end %>
             <p><%= item.title %></p>
         </a>
@@ -62,6 +65,40 @@
             <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
         </p>
         
+        <% if Time.now - item.published > 1.minute %>
+        <h5>Shared <%= recode_date(item.published) %> ago</h5>
+        <% end %>
+    <% else %>
+        <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
+        <% else %>
+        <a style="width:100%;" href="/watch?v=<%= item.id %>">
+            <div class="thumbnail">
+                <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
+                <% if env.get? "show_watched" %>
+                <p class="watched">
+                    <a onclick="mark_watched(this)"
+                        data-id="<%= item.id %>"
+                        onmouseenter='this["href"]="javascript:void(0)"'
+                        href="/mark_watched?id=<%= item.id %>">
+                        <i onmouseenter='this.setAttribute("class", "icon ion-ios-eye-off")'
+                            onmouseleave='this.setAttribute("class", "icon ion-ios-eye")'
+                            class="icon ion-ios-eye">
+                        </i>
+                    </a>
+                </p>
+                <% end %>
+                <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
+            </div>
+        </a>
+        <% end %>
+        <p><a href="/watch?v=<%= item.id %>"><%= item.title %></a></p>
+        <% if item.responds_to?(:live_now) && item.live_now %>
+        <p>LIVE</p>
+        <% end %>
+        <p>
+            <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
+        </p>
+        
         <% if Time.now - item.published > 1.minute %>
         <h5>Shared <%= recode_date(item.published) %> ago</h5>
         <% end %>

src/invidious/views/components/player.ecr

@@ -1,5 +1,8 @@
-<video style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" 
+<<% if params[:listen]%>audio<% else %>video<% end %> style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" 
     id="player" class="video-js"
+    onmouseenter='this["data-title"]=this["title"];this["title"]=""'
+    onmouseleave='this["title"]=this["data-title"];this["data-title"]=""'
+    oncontextmenu='this["title"]=this["data-title"]'
     <% if params[:autoplay] %>autoplay<% end %>
     <% if params[:video_loop] %>loop<% end %>
     <% if params[:controls] %>controls<% end %>>
@@ -33,7 +36,7 @@
             label="<%= caption.name.simpleText %>">
         <% end %>
     <% end %>
-</video>
+</<% if params[:listen]%>audio<% else %>video<% end %>>
 
 <script>
 var options = {
@@ -137,18 +140,29 @@ player.markers({
 player.currentTime(<%= params[:video_start] %>);
 <% end %>
 
-<% if !params[:listen] %>
-var currentSources = player.currentSources();
-for (var i = 0; i < currentSources.length; i++) {
-  if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") {
-    currentSources.splice(i);
-    i--;
-  }
-}
-
-player.src(currentSources);
-<% end %>
-
 player.volume(<%= params[:volume].to_f / 100 %>);
 player.playbackRate(<%= params[:speed] %>);
+
+<% if params[:autoplay] %>
+var bpb = player.getChild('bigPlayButton');
+
+if (bpb) {
+  bpb.hide();
+  
+  player.ready(function() {
+    new Promise(function(resolve, reject) {
+      setTimeout(() => resolve(1), 1);
+    }).then(function(result) {
+      var promise = player.play();
+
+      if (promise !== undefined) {
+          promise.then(_ => {
+          }).catch(error => {
+              bpb.show();
+          });
+      }
+    });
+  });
+}
+<% end %>
 </script>

src/invidious/views/delete_account.ecr

@@ -0,0 +1,17 @@
+<div class="h-box">
+    <form class="pure-form pure-form-aligned" action="/delete_account?referer=<%= URI.escape(referer) %>" method="post">
+        <legend>Delete account?</legend>
+
+        <div class="pure-g">
+            <div class="pure-u-1-2">
+                <button type="submit" name="submit" value="delete_account" class="pure-button pure-button-primary">Yes</button>
+            </div>
+            <div class="pure-u-1-2">
+                <a class="pure-button" href="<%= referer %>">No</a>
+            </div>
+        </div>
+
+        <input type="hidden" name="token" value="<%= token %>">
+        <input type="hidden" name="challenge" value="<%= challenge %>">
+    </form>
+</div>

src/invidious/views/history.ecr

@@ -0,0 +1,81 @@
+<% content_for "header" do %>
+<title>History - Invidious</title>
+<% end %>
+
+<div class="pure-g h-box">
+    <div class="pure-u-2-3">
+        <h3><span id="count"><%= user.watched.size %></span> videos</h3>
+    </div>
+    <div class="pure-u-1-3" style="text-align:right;">
+        <h3>
+            <a href="/clear_watch_history">Clear watch history</a>
+        </h3>
+    </div>
+</div>
+
+<div class="pure-g">
+<% watched.each_slice(4) do |slice| %>
+        <% slice.each do |item| %>
+        <div class="pure-u-1 pure-u-md-1-4">
+            <div class="h-box">
+                <a style="width:100%;" href="/watch?v=<%= item %>">
+                    <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
+                    <% else %>
+                    <div class="thumbnail">
+                        <img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg"/>
+                        <p class="watched">
+                            <a onclick="mark_unwatched(this)"
+                                data-id="<%= item %>"
+                                onmouseenter='this["href"]="javascript:void(0)"'
+                                href="/mark_unwatched?id=<%= item %>">
+                                <i class="icon ion-md-trash"></i>
+                            </a>
+                        </p>
+                    </div>
+                    <p></p>
+                    <% end %>
+                </a>
+            </div>
+        </div>
+        <% end %>
+<% end %>
+</div>
+
+<script>
+function mark_unwatched(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = "none";
+    var count = document.getElementById("count")
+    count.innerText = count.innerText - 1;
+
+    var url = "/mark_unwatched?redirect=false&id=" + target.getAttribute("data-id");
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "json";
+    xhr.timeout = 20000;
+    xhr.open("GET", url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status != 200) {
+                count.innerText = count.innerText - 1 + 2;
+                tile.style.display = "";
+            }
+        }
+    }
+}
+</script>
+
+<div class="pure-g h-box">
+    <div class="pure-u-1 pure-u-md-1-5">
+    <% if page >= 2 %>
+        <a href="/feed/history?page=<%= page - 1 %>">Previous page</a>
+    <% end %>
+    </div>
+    <div class="pure-u-1 pure-u-md-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <% if watched.size >= limit %>
+        <a href="/feed/history?page=<%= page + 1 %>">Next page</a>
+    <% end %>
+    </div>
+</div>

src/invidious/views/index.ecr

@@ -1,11 +1,12 @@
 <% content_for "header" do %>
+<meta name="description" content="An alternative front-end to YouTube">
 <title>Invidious</title>
 <% end %>
 
+<div class="pure-g">
 <% top_videos.each_slice(4) do |slice| %>
-    <div class="pure-g">
         <% slice.each do |item| %>
             <%= rendered "components/item" %>
         <% end %>
-    </div>
 <% end %>
+</div>

src/invidious/views/licenses.ecr

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+    <h1>JavaScript license information</h1>
+    <table id="jslicense-labels1">
+        <tr>
+            <td>
+                <a href="/js/dash.mediaplayer.min.js">dash.mediaplayer.min.js</a>
+            </td>
+
+            <td>
+                <a href="http://directory.fsf.org/wiki/License:BSD_3Clause">Modified-BSD</a>
+            </td>
+
+            <td>
+                <a href="https://unpkg.com/dashjs@2.9.0/dist/dash.mediaplayer.debug.js">source</a>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <a href="/js/silvermine-videojs-quality-selector.min.js">silvermine-videojs-quality-selector.min.js</a>
+            </td>
+
+            <td>
+                <a href="http://www.jclark.com/xml/copying.txt">Expat</a>
+            </td>
+
+            <td>
+                <a href="/js/silvermine-videojs-quality-selector.js">source</a>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <a href="/js/video.min.js">video.min.js</a>
+            </td>
+
+            <td>
+                <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache-2.0-only</a>
+            </td>
+
+            <td>
+                <a href="https://unpkg.com/video.js@6.12.1/dist/video.js">source</a>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <a href="/js/videojs-contrib-quality-levels.min.js">videojs-contrib-quality-levels.min.js</a>
+            </td>
+
+            <td>
+                <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache-2.0-only</a>
+            </td>
+
+            <td>
+                <a href="https://unpkg.com/videojs-contrib-quality-levels@2.0.7/dist/videojs-contrib-quality-levels.js">source</a>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <a href="/js/videojs-dash.min.js">videojs-dash.min.js</a>
+            </td>
+
+            <td>
+                <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache-2.0-only</a>
+            </td>
+
+            <td>
+                <a href="https://unpkg.com/videojs-contrib-dash@2.8.2/dist/videojs-dash.js">source</a>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <a href="/js/videojs-http-streaming.min.js">videojs-http-streaming.min.js</a>
+            </td>
+
+            <td>
+                <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache-2.0-only</a>
+            </td>
+
+            <td>
+                <a href="https://unpkg.com/@videojs/http-streaming@1.2.2/dist/videojs-http-streaming.js">source</a>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <a href="/js/videojs-markers.min.js">videojs-markers.min.js</a>
+            </td>
+
+            <td>
+                <a href="http://www.jclark.com/xml/copying.txt">Expat</a>
+            </td>
+
+            <td>
+                <a href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.js">source</a>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <a href="/js/videojs-share.min.js">videojs-share.min.js</a>
+            </td>
+
+            <td>
+                <a href="http://www.jclark.com/xml/copying.txt">Expat</a>
+            </td>
+
+            <td>
+                <a href="https://unpkg.com/videojs-share@2.0.1/dist/videojs-share.js">source</a>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <a href="/js/videojs.hotkeys.min.js">videojs.hotkeys.min.js</a>
+            </td>
+
+            <td>
+                <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache-2.0-only</a>
+            </td>
+
+            <td>
+                <a href="/js/videojs.hotkeys.js">source</a>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <a href="/js/watch.js">watch.js</a>
+            </td>
+
+            <td>
+                <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0</a>
+            </td>
+
+            <td>
+                <a href="/js/watch.js">source</a>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>

src/invidious/views/login.ecr

@@ -24,10 +24,28 @@
                     <label for="password">Password:</label>
                     <input required class="pure-input-1" name="password" type="password" placeholder="Password">
                 
-                    <img style="width:100%" src='<%= captcha.not_nil![:challenge] %>'/>
+                <% if captcha_type == "image" %>
+                    <img style="width:100%" src='<%= captcha.not_nil![:image] %>'/>
                     <input type="hidden" name="token" value="<%= captcha.not_nil![:token] %>">
-                    <label for="challenge_response">Time (h:mm):</label>
-                    <input required type="text" name="challenge_response" type="text>" placeholder="hh:mm">
+                    <input type="hidden" name="challenge" value="<%= captcha.not_nil![:challenge] %>">
+                    <label for="answer">Time (h:mm:ss):</label>
+                    <input required type="text" name="answer" type="text" placeholder="h:mm:ss">
+                    
+                    <label>
+                        <a href="/login?referer=<%= URI.escape(referer) %>&type=invidious&captcha=text">Text CAPTCHA</a>
+                    </label>
+                <% else %>
+                    <% text_captcha.not_nil![:tokens].each_with_index do |token, i| %>
+                        <input type="hidden" name="text_challenge<%= i %>" value="<%= token[0] %>">
+                        <input type="hidden" name="text_token<%= i %>" value="<%= token[1] %>">
+                    <% end %>
+                    <label for="text_answer"><%= text_captcha.not_nil![:question] %></label>
+                    <input required type="text" name="text_answer" type="text" placeholder="Answer">
+
+                    <label>
+                        <a href="/login?referer=<%= URI.escape(referer) %>&type=invidious">Image CAPTCHA</a>
+                    </label>
+                <% end %>
 
                     <button type="submit" name="action" value="signin" class="pure-button pure-button-primary">Sign In</button>
                     <button type="submit" name="action" value="register" class="pure-button pure-button-primary">Register</button>
@@ -47,7 +65,7 @@
                     <input required class="pure-input-1" name="tfa" type="text" placeholder="Google verification code">
                     <% end %>
 
-                    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
+                    <button type="submit" class="pure-button pure-button-primary">Sign In</button>
                 </fieldset>
             </form>
             <% end %>

src/invidious/views/mix.ecr

@@ -13,10 +13,10 @@
     </div>
 </div>
 
-<% mix.videos.each_slice(4) do |slice| %>
 <div class="pure-g">
+<% mix.videos.each_slice(4) do |slice| %>
     <% slice.each do |item| %>
         <%= rendered "components/item" %>
     <% end %>
-</div> 
 <% end %>
+</div> 

src/invidious/views/playlist.ecr

@@ -24,13 +24,13 @@
     <p><%= playlist.description_html %></p>
 </div>
 
-<% videos.each_slice(4) do |slice| %>
 <div class="pure-g">
+<% videos.each_slice(4) do |slice| %>
     <% slice.each do |item| %>
         <%= rendered "components/item" %>
     <% end %>
-</div> 
 <% end %>
+</div> 
 
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-md-1-5">

src/invidious/views/popular.ecr

@@ -0,0 +1,7 @@
+<div class="pure-g">
+<% popular_videos.each_slice(4) do |slice| %>
+        <% slice.each do |item| %>
+            <%= rendered "components/item" %>
+        <% end %>
+<% end %>
+</div>

src/invidious/views/preferences.ecr

@@ -23,6 +23,16 @@ function update_value(element) {
                 <input name="autoplay" id="autoplay" type="checkbox" <% if user.preferences.autoplay %>checked<% end %>>
             </div>
 
+            <div class="pure-control-group">
+                <label for="continue">Autoplay next video: </label>
+                <input name="continue" id="continue" type="checkbox" <% if user.preferences.continue %>checked<% end %>>
+            </div>
+
+            <div class="pure-control-group">
+                <label for="listen">Listen by default: </label>
+                <input name="listen" id="listen" type="checkbox" <% if user.preferences.listen %>checked<% end %>>
+            </div>
+
             <div class="pure-control-group">
                 <label for="speed">Default speed: </label>
                 <select name="speed" id="speed">
@@ -121,41 +131,49 @@ function update_value(element) {
             <div class="pure-control-group">
                 <label for="sort">Sort videos by: </label>
                 <select name="sort" id="sort">
-                <% ["published", "alphabetically", "alphabetically - reverse", "channel name", "channel name - reverse"].each do |option| %>
+                <% {"published", "published - reverse", "alphabetically", "alphabetically - reverse", "channel name", "channel name - reverse"}.each do |option| %>
                     <option <% if user.preferences.sort == option %> selected <% end %>><%= option %></option>
                 <% end %>
                 </select>
             </div>
 
             <div class="pure-control-group">
-                <label for="latest_only">Only show latest <% if user.preferences.unseen_only %>unseen<% end %> video from channel: </label>
+                <label for="latest_only">Only show latest <% if user.preferences.unseen_only %>unwatched<% end %> video from channel: </label>
                 <input name="latest_only" id="latest_only" type="checkbox" <% if user.preferences.latest_only %>checked<% end %>>
             </div>
 
             <div class="pure-control-group">
-                <label for="unseen_only">Only show unseen: </label>
+                <label for="unseen_only">Only show unwatched: </label>
                 <input name="unseen_only" id="unseen_only" type="checkbox" <% if user.preferences.unseen_only %>checked<% end %>>
             </div>
 
             <div class="pure-control-group">
-                <label for="notifications_only">Only show notifications: </label>
+                <label for="notifications_only">Only show notifications (if there are any): </label>
                 <input name="notifications_only" id="notifications_only" type="checkbox" <% if user.preferences.notifications_only %>checked<% end %>>
             </div>
 
             <legend>Data preferences</legend>
 
             <div class="pure-control-group">
-                <a href="/clear_watch_history?referer=<%= referer %>">Clear watch history</a>
+                <a href="/clear_watch_history?referer=<%= URI.escape(referer) %>">Clear watch history</a>
             </div>
             
             <div class="pure-control-group">
-                <a href="/data_control?referer=<%= referer %>">Import/Export data</a>
+                <a href="/data_control?referer=<%= URI.escape(referer) %>">Import/Export data</a>
             </div>
 
             <div class="pure-control-group">
                 <a href="/subscription_manager">Manage subscriptions</a>
             </div>
 
+            <div class="pure-control-group">
+                <a href="/feed/history">Watch history</a>
+            </div>
+
+            <div class="pure-control-group">
+                <a href="/delete_account?referer=<%= URI.escape(referer) %>">Delete account</a>
+            </div>
+
             <div class="pure-controls">
                 <button type="submit" class="pure-button pure-button-primary">Save preferences</button>
             </div>

src/invidious/views/search.ecr

@@ -1,25 +1,25 @@
 <% content_for "header" do %>
-<title><%= search_query.not_nil!.size > 30 ? query.not_nil![0,30].rstrip(".") + "..." : query.not_nil! %> - Invidious</title>
+<title><%= search_query.not_nil!.size > 30 ? HTML.escape(query.not_nil![0,30].rstrip(".") + "...") : HTML.escape(query.not_nil!) %> - Invidious</title>
 <% end %>
 
-<% videos.each_slice(4) do |slice| %>
 <div class="pure-g">
+<% videos.each_slice(4) do |slice| %>
     <% slice.each do |item| %>
         <%= rendered "components/item" %>
     <% end %>
-</div> 
 <% end %>
+</div> 
 
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-md-1-5">
     <% if page >= 2 %>
-        <a href="/search?q=<%= query %>&page=<%= page - 1 %>">Previous page</a>
+        <a href="/search?q=<%= HTML.escape(query.not_nil!) %>&page=<%= page - 1 %>">Previous page</a>
     <% end %>
     </div>
     <div class="pure-u-1 pure-u-md-3-5"></div>
     <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
     <% if count >= 20 %>
-        <a href="/search?q=<%= query %>&page=<%= page + 1 %>">Next page</a>
+        <a href="/search?q=<%= HTML.escape(query.not_nil!) %>&page=<%= page + 1 %>">Next page</a>
     <% end %>
     </div>
 </div>

src/invidious/views/subscription_manager.ecr

@@ -4,7 +4,7 @@
 
 <div class="pure-g h-box">
     <div class="pure-u-2-3">
-        <h3><%= subscriptions.size %> subscriptions</h3>
+        <h3><span id="count"><%= subscriptions.size %></span> subscriptions</h3>
     </div>
     <div class="pure-u-1-3" style="text-align:right;">
         <h3>
@@ -24,7 +24,12 @@
         <div class="pure-u-2-5"></div>
         <div class="pure-u-1-5" style="text-align: right;">
             <h3>
-                <a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>">unsubscribe</a>
+                <a onclick="remove_subscription(this)"
+                    data-id="<%= channel.id %>"
+                    onmouseenter='this["href"]="javascript:void(0)"'
+                    href="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>">
+                    unsubscribe
+                </a>
             </h3>
         </div>
     </div>
@@ -34,3 +39,28 @@
     <% end %>
 </div>
 <% end %>
+
+<script>
+function remove_subscription(target) {
+    var row = target.parentNode.parentNode.parentNode.parentNode;
+    row.style.display = "none";
+    var count = document.getElementById("count")
+    count.innerText = count.innerText - 1;
+
+    var url = "/subscription_ajax?action_remove_subscriptions=1&redirect=false&c=" + target.getAttribute("data-id");
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "json";
+    xhr.timeout = 20000;
+    xhr.open("GET", url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status != 200) {
+                count.innerText = count.innerText - 1 + 2;
+                row.style.display = "";
+            }
+        }
+    }
+}
+</script>

src/invidious/views/subscriptions.ecr

@@ -23,25 +23,47 @@
 </div>
 <% end %>
 
+<div class="pure-g">
 <% notifications.each_slice(4) do |slice| %>
-    <div class="pure-g">
         <% slice.each do |item| %>
             <%= rendered "components/item" %>
         <% end %>
-    </div>
 <% end %>
+</div>
 
 <div class="h-box">
     <hr>
 </div>
 
+<div class="pure-g">
 <% videos.each_slice(4) do |slice| %>
-    <div class="pure-g">
         <% slice.each do |item| %>
             <%= rendered "components/item" %>
         <% end %>
-    </div>
 <% end %>
+</div>
+
+<script>
+function mark_watched(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = "none";
+
+    var url = "/mark_watched?redirect=false&id=" + target.getAttribute("data-id");
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "json";
+    xhr.timeout = 20000;
+    xhr.open("GET", url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status != 200) {
+                tile.style.display = "";
+            }
+        }
+    }
+}
+</script>
 
 <div class="pure-g">
     <div class="pure-u-1 pure-u-md-1-5">

src/invidious/views/template.ecr

@@ -6,6 +6,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="referrer" content="no-referrer">
   <%= yield_content "header" %>
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#575757">
+  <meta name="msapplication-TileColor" content="#575757">
+  <meta name="theme-color" content="#575757">
+  <link title="Invidious" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml">
   <link rel="stylesheet" href="/css/pure-min.css">
   <link rel="stylesheet" href="/css/grids-responsive-min.css">
   <link rel="stylesheet" href="/css/ionicons.min.css">
@@ -28,7 +36,7 @@
         <div class="pure-u-1 pure-u-md-12-24 searchbar">
           <form class="pure-form" action="/search" method="get">
             <fieldset>
-              <input type="search" style="width:100%;" name="q" placeholder="search" value="<%= env.params.query["q"]?.try {|x| HTML.escape(x)} || env.get?("search").try {|x| HTML.escape(x.as(String)) }  %>">
+              <input type="search" style="width:100%;" name="q" placeholder="search" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } || env.params.query["q"]?.try {|x| HTML.escape(x)} %>">
             </fieldset>
           </form>
         </div>
@@ -60,7 +68,7 @@
           </a>
         </div>
         <div class="pure-u-1-4">
-          <a href="/signout?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">Sign out</a>
+          <a href="/signout?referer=<%= env.get?("current_page") %>&token=<%= env.get?("token") %>&challenge=<%= env.get?("challenge") %>" class="pure-menu-heading">Sign out</a>
         </div>
         <% else %>
           <a href="/login?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">Login</a>
@@ -69,7 +77,7 @@
       </div>
       <%= content %>
       <div class="footer">
-        Released under AGPLv3 by <a href="https://github.com/omarroth">Omar
+        Released under the AGPLv3 by <a href="https://github.com/omarroth">Omar
           Roth</a>.
         Source available <a
           href="https://github.com/omarroth/invidious">here</a>.
@@ -85,9 +93,11 @@
         </p>
         <p>BTC: 356DpZyMXu6rYd55Yqzjs29n79kGKWcYrY</p>
         <p>BCH: qq4ptclkzej5eza6a50et5ggc58hxsq5aylqut2npk</p>
+        <p>View <a rel="jslicense" href="/licenses">JavaScript license information</a>.</p>
       </div>
     </div>
     <div class="pure-u-1 pure-u-md-2-24"></div>
+  </div>
 </body>
 
 </html>

src/invidious/views/top.ecr

@@ -0,0 +1,7 @@
+<div class="pure-g">
+<% top_videos.each_slice(4) do |slice| %>
+        <% slice.each do |item| %>
+            <%= rendered "components/item" %>
+        <% end %>
+<% end %>
+</div>

src/invidious/views/trending.ecr

@@ -0,0 +1,11 @@
+<% content_for "header" do %>
+<title>Trending - Invidious</title>
+<% end %>
+
+<div class="pure-g">
+<% trending.each_slice(4) do |slice| %>
+        <% slice.each do |item| %>
+            <%= rendered "components/item" %>
+        <% end %>
+<% end %>
+</div>

src/invidious/views/watch.ecr

@@ -1,7 +1,7 @@
 <% content_for "header" do %>
 <meta name="thumbnail" content="<%= thumbnail %>">
 <meta name="description" content="<%= description %>">
-<meta name="keywords" content="<%= video.info["keywords"] %>">
+<meta name="keywords" content="<%= video.keywords.join(",") %>">
 <meta property="og:site_name" content="Invidious">
 <meta property="og:url" content="<%= host_url %>/watch?v=<%= video.id %>">
 <meta property="og:title" content="<%= HTML.escape(video.title) %>">
@@ -18,10 +18,11 @@
 <meta name="twitter:url" content="<%= host_url %>/watch?v=<%= video.id %>">
 <meta name="twitter:title" content="<%= HTML.escape(video.title) %>">
 <meta name="twitter:description" content="<%= description %>">
-<meta name="twitter:image" content="<%= thumbnail %>">
+<meta name="twitter:image" content="/vi/<%= video.id %>/hqdefault.jpg">
 <meta name="twitter:player" content="<%= host_url %>/embed/<%= video.id %>">
 <meta name="twitter:player:width" content="1280">
 <meta name="twitter:player:height" content="720">
+<script src="/js/watch.js"></script>
 <%= rendered "components/player_sources" %>
 <title><%= HTML.escape(video.title) %> - Invidious</title>
 <% end %>
@@ -34,7 +35,7 @@
 <h1>
     <%= HTML.escape(video.title) %> 
     <% if params[:listen] %>
-    <a href="/watch?<%= env.params.query %>">
+    <a href="/watch?<%= env.params.query %>&listen=0">
         <i class="icon ion-ios-videocam"></i>
     </a>
     <% else %>
@@ -65,8 +66,8 @@
             <% if !video.license.empty? %>
             <p id="License">License: <%= video.license %></p>
             <% end %>
-            <p id="FamilyFriendly">Family Friendly? <%= video.is_family_friendly %></p>
-            <p id="Wilson">Wilson Score: <%= video.wilson_score.round(4) %></p>
+            <p id="FamilyFriendly">Family friendly? <%= video.is_family_friendly %></p>
+            <p id="Wilson">Wilson score: <%= video.wilson_score.round(4) %></p>
             <p id="Rating">Rating: <%= rating.round(4) %> / 5</p>
             <p id="Engagement">Engagement: <%= engagement.round(2) %>%</p>
             <% if video.allowed_regions.size != REGIONS.size %>
@@ -81,7 +82,7 @@
         </div>
     </div>
 
-    <div class="pure-u-1 pure-u-md-3-5">
+    <div class="pure-u-1 <% if preferences && !preferences.related_videos && !plid %>pure-u-md-4-5<% else %>pure-u-md-3-5<% end %>">
         <div class="h-box">
             <p>
                 <a href="/channel/<%= video.ucid %>">
@@ -91,20 +92,23 @@
         <% if user %>
             <% if subscriptions.includes? video.ucid %>
             <p>
-                <a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
-                    <b>Unsubscribe from <%= video.author %></b>
+                <a id="subscribe" onclick="unsubscribe()" class="pure-button pure-button-primary" 
+                    href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
+                    <b>Unsubscribe | <%= video.sub_count_text %></b>
                 </a>
             </p>
             <% else %>
             <p>
-                <a href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
-                    <b>Subscribe to <%= video.author %></b>
+                <a id="subscribe" onclick="subscribe()" class="pure-button pure-button-primary" 
+                    href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
+                    <b>Subscribe | <%= video.sub_count_text %></b>
                 </a>
             </p>
             <% end %>
         <% else %>
             <p>
-                <a href="/login?referer=<%= env.get("current_page") %>">
+                <a id="subscribe" class="pure-button pure-button-primary" 
+                    href="/login?referer=<%= env.get("current_page") %>">
                     <b>Login to subscribe to <%= video.author %></b>
                 </a>
             </p>
@@ -117,19 +121,46 @@
             </div>
             <hr>
             <div id="comments">
-                <h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>
+                <% if nojs %>
+                    <%= comment_html %>
+                <% else %>
+                <noscript>
+                Hi! Looks like you have JavaScript disabled. Click <a href="/watch?<%= env.params.query %>&nojs=1">here</a> to view
+                comments, keep in mind it may take a bit longer to load.
+                </noscript>
+                <% end %>
             </div>
         </div>
     </div>
+    <% if preferences && preferences.related_videos || plid %>
     <div class="pure-u-1 pure-u-md-1-5">
+        <% if plid %>
+        <div id="playlist" class="h-box">
+        </div>
+        <% end %>
+
         <% if !preferences || preferences && preferences.related_videos %>
         <div class="h-box">
+        
+        <% if !rvs.empty? %>
+        <div id="continue" <% if plid %>style="display:none"<% end %>>
+            <div class="pure-control-group">
+                <label for="continue">Autoplay next video: </label>
+                <input name="continue" onclick="continue_autoplay(this)" id="continue" type="checkbox" <% if params[:continue] %>checked<% end %>>
+            </div>
+            <hr>
+        </div>
+        <% end %>
+
         <% rvs.each do |rv| %>
-            <% if rv.has_key?("id") %>
+            <% if rv["id"]? %>
             <a href="/watch?v=<%= rv["id"] %>">
                 <% if preferences && preferences.thin_mode %>
                 <% else %>
-                <img style="width:100%;" src="/vi/<%= rv["id"] %>/mqdefault.jpg">
+                <div class="thumbnail">
+                    <img class="thumbnail" src="/vi/<%= rv["id"] %>/mqdefault.jpg">
+                    <p class="length"><%= recode_length_seconds(rv["length_seconds"]?.try &.to_i? || 0) %></p>
+                </div>
                 <% end %>
                 <p style="width:100%"><%= rv["title"] %></p>
                 <p>
@@ -141,41 +172,170 @@
         </div>
         <% end %>
     </div>
+    <% end %>
 </div>
 
 <script>
-function toggle(target) {
-  body = target.parentNode.parentNode.children[1];
-  if (body.style.display === null || body.style.display === "") {
-    target.innerHTML = "[ + ]";
-    body.style.display = "none";
-  } else {
-    target.innerHTML = "[ - ]";
-    body.style.display = "";
-  }
+<% if !rvs.empty? && !plid && params[:continue] %>
+player.on('ended', function() {
+    window.location.replace("/watch?v=" 
+        + "<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>"
+        + "&continue=1"
+        <% if params[:listen] %>
+        + "&listen=1"
+        <% end %>
+        <% if params[:autoplay] %>
+        + "&autoplay=1"
+        <% end %>
+        <% if params[:speed] %>
+        + "&speed=<%= params[:speed] %>"
+        <% end %>
+    );
+});
+<% end %>
+
+function continue_autoplay(target) {
+    if (target.checked) {
+        player.on('ended', function() {
+            window.location.replace("/watch?v=" 
+                + "<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>"
+                + "&continue=1"
+                <% if params[:listen] %>
+                + "&listen=1"
+                <% end %>
+                <% if params[:autoplay] %>
+                + "&autoplay=1"
+                <% end %>
+                <% if params[:speed] %>
+                + "&speed=<%= params[:speed] %>"
+                <% end %>
+            );
+        });
+    } else {
+        player.off('ended');
+    }
 }
 
-function toggle_comments(target) {
-  body = target.parentNode.parentNode.parentNode.children[1];
-  if (body.style.display === null || body.style.display === "") {
-    target.innerHTML = "[ + ]";
-    body.style.display = "none";
-  } else {
-    target.innerHTML = "[ - ]";
-    body.style.display = "";
+function number_with_separator(val) {
+  while (/(\d+)(\d{3})/.test(val.toString())) {
+    val = val.toString().replace(/(\d+)(\d{3})/, "$1" + "," + "$2");
   }
+  return val;
 }
 
-function get_youtube_replies(target) {
-  var continuation = target.getAttribute("data-continuation");
+subscribe_button = document.getElementById("subscribe");
+if (subscribe_button.getAttribute('onclick')) {
+    subscribe_button["href"] = "javascript:void(0)";
+}
 
-  var body = target.parentNode.parentNode;
-  var fallback = body.innerHTML;
-  body.innerHTML =
+function subscribe() {
+    var url = "/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>";
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "json";
+    xhr.timeout = 20000;
+    xhr.open("GET", url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                subscribe_button = document.getElementById("subscribe");
+                subscribe_button.onclick = unsubscribe;
+                subscribe_button.innerHTML = '<b>Unsubscribe | <%= video.sub_count_text %></b>'
+            }
+        }
+    }
+}
+
+function unsubscribe() {
+    var url = "/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>";
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "json";
+    xhr.timeout = 20000;
+    xhr.open("GET", url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                subscribe_button = document.getElementById("subscribe");
+                subscribe_button.onclick = subscribe;
+                subscribe_button.innerHTML = '<b>Subscribe | <%= video.sub_count_text %></b>'
+            }
+        }
+    }
+}
+
+<% if plid %>
+function get_playlist() {
+    playlist = document.getElementById("playlist");
+    playlist.innerHTML = ' \
+      <h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3> \
+      <hr>'
+
+    var plid = "<%= plid %>"
+
+    if (plid.startsWith("RD")) {
+        var plid_url = "/api/v1/mixes/<%= plid %>?continuation=<%= video.id %>&format=html";
+    } else {
+        var plid_url = "/api/v1/playlists/<%= plid %>?continuation=<%= video.id %>&format=html";
+    }
+
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "json";
+    xhr.timeout = 20000;
+    xhr.open("GET", plid_url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                playlist.innerHTML = xhr.response.playlistHtml;
+                
+                if (xhr.response.nextVideo) {
+                    player.on('ended', function() {
+                        window.location.replace("/watch?v=" 
+                            + xhr.response.nextVideo
+                            + "&list=<%= plid %>"
+                            <% if params[:listen] %>
+                            + "&listen=1"
+                            <% end %>
+                            <% if params[:autoplay] %>
+                            + "&autoplay=1"
+                            <% end %>
+                            <% if params[:speed] %>
+                            + "&speed=<%= params[:speed] %>"
+                            <% end %>
+                        );
+                    });
+                }
+            } else {
+                playlist.innerHTML = "";
+                document.getElementById('continue').style.display = "";
+            }
+        }
+    };
+
+    xhr.ontimeout = function() {
+        console.log("Pulling playlist timed out.");
+
+        comments = document.getElementById("playlist");
+        comments.innerHTML =
+            '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3><hr>';
+        get_playlist();
+    };
+}
+
+get_playlist();
+<% end %>
+
+function get_reddit_comments() {
+  comments = document.getElementById("comments");
+  var fallback = comments.innerHTML;
+  comments.innerHTML =
     '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
 
-  var url =
-    "/api/v1/comments/<%= video.id %>?format=html&continuation=" + continuation;
+  var url = "/api/v1/comments/<%= video.id %>?source=reddit&format=html";
   var xhr = new XMLHttpRequest();
   xhr.responseType = "json";
   xhr.timeout = 20000;
@@ -185,38 +345,19 @@ function get_youtube_replies(target) {
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
       if (xhr.status == 200) {
-        body.innerHTML = xhr.response.contentHtml;
-      } else {
-        body.innerHTML = fallback;
-      }
-    }
-  };
-
-  xhr.ontimeout = function() {
-    console.log("Pulling comments timed out.");
-
-    body.innerHTML = fallback;
-  };
-}
-
-function get_reddit_comments() {
-  var url = "/api/v1/comments/<%= video.id %>?source=reddit&format=html";
-  var xhr = new XMLHttpRequest();
-  xhr.responseType = "json";
-  xhr.timeout = 20000;
-  xhr.open("GET", url, true);
-  xhr.send();
-
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState == 4)
-      if (xhr.status == 200) {
-        comments = document.getElementById("comments");
         comments.innerHTML = ' \
             <div> \
                 <h3> \
                     <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
                     {title} \
                 </h3> \
+                <p> \
+                    <b> \
+                        <a href="javascript:void(0)" onclick="swap_comments(\'youtube\')"> \
+                            View YouTube comments \
+                        </a> \
+                    </b> \
+                </p> \
                 <b> \
                     <a rel="noopener" target="_blank" href="https://reddit.com{permalink}">View more comments on Reddit</a> \
                 </b> \
@@ -231,10 +372,10 @@ function get_reddit_comments() {
         <% if preferences && preferences.comments[1] == "youtube" %> 
         get_youtube_comments();
         <% else %>
-        comments = document.getElementById("comments");
-        comments.innerHTML = "";
+        comments.innerHTML = fallback;
         <% end %>
       }
+    }
   };
 
   xhr.ontimeout = function() {
@@ -245,6 +386,11 @@ function get_reddit_comments() {
 }
 
 function get_youtube_comments() {
+  comments = document.getElementById("comments");
+  var fallback = comments.innerHTML;
+  comments.innerHTML =
+    '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
+
   var url = "/api/v1/comments/<%= video.id %>?format=html";
   var xhr = new XMLHttpRequest();
   xhr.responseType = "json";
@@ -253,9 +399,8 @@ function get_youtube_comments() {
   xhr.send();
 
   xhr.onreadystatechange = function() {
-    if (xhr.readyState == 4)
+    if (xhr.readyState == 4) {
       if (xhr.status == 200) {
-        comments = document.getElementById("comments");
         if (xhr.response.commentCount > 0)  {
             comments.innerHTML = ' \
                 <div> \
@@ -263,11 +408,16 @@ function get_youtube_comments() {
                         <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
                         View {commentCount} comments \
                     </h3> \
+                    <b> \
+                        <a href="javascript:void(0)" onclick="swap_comments(\'reddit\')"> \
+                            View Reddit comments \
+                        </a> \
+                    </b> \
                 </div> \
                 <div>{contentHtml}</div> \
                 <hr>'.supplant({
             contentHtml: xhr.response.contentHtml,
-            commentCount: commaSeparateNumber(xhr.response.commentCount)
+            commentCount: number_with_separator(xhr.response.commentCount)
             });
         } else {
           comments.innerHTML = "";
@@ -276,35 +426,65 @@ function get_youtube_comments() {
         <% if preferences && preferences.comments[1] == "youtube" %> 
         get_youtube_comments();
         <% else %>
-        comments = document.getElementById("comments");
         comments.innerHTML = "";
         <% end %>
       }
+    }
   };
 
   xhr.ontimeout = function() {
     console.log("Pulling comments timed out.");
 
-    comments = document.getElementById("comments");
     comments.innerHTML =
       '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
     get_youtube_comments();
   };
 }
 
-function commaSeparateNumber(val){
-  while (/(\d+)(\d{3})/.test(val.toString())){
-    val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
-  }
-  return val;
-}
+function get_youtube_replies(target, load_more) {
+  var continuation = target.getAttribute('data-continuation');
 
-String.prototype.supplant = function(o) {
-  return this.replace(/{([^{}]*)}/g, function(a, b) {
-    var r = o[b];
-    return typeof r === "string" || typeof r === "number" ? r : a;
-  });
-};
+  var body = target.parentNode.parentNode;
+  var fallback = body.innerHTML;
+  body.innerHTML =
+      '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
+
+  var url = '/api/v1/comments/<%= video.id %>?format=html&continuation=' +
+      continuation;
+  var xhr = new XMLHttpRequest();
+  xhr.responseType = 'json';
+  xhr.timeout = 20000;
+  xhr.open('GET', url, true);
+  xhr.send();
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      if (xhr.status == 200) {
+        if (load_more) {
+            body = body.parentNode.parentNode;
+            body.removeChild(body.lastElementChild);
+            body.innerHTML += xhr.response.contentHtml;
+        } else {
+            body.innerHTML = ' \
+                <p><a href="javascript:void(0)" \
+                    onclick="hide_youtube_replies(this)">Hide replies \
+                </a></p> \
+                <div>{contentHtml}</div>'.supplant({
+                contentHtml: xhr.response.contentHtml,
+            });
+        }
+      } else {
+        body.innerHTML = fallback;
+      }
+    }
+  };
+
+  xhr.ontimeout = function() {
+    console.log('Pulling comments timed out.');
+
+    body.innerHTML = fallback;
+  };
+}
 
 <% if preferences %>
     <% if preferences.comments[0] == "youtube" %>
@@ -324,5 +504,4 @@ String.prototype.supplant = function(o) {
 <% else %>
 get_youtube_comments();
 <% end %>
-
-</script>
+</script>