YouTube offline subscription box

DataMine
by DataMine · 3 posts
8 years ago in Javascript
Posted 7 years ago · Author
About
This is a GreaseMonkey script I am working on for displaying a subscription box on YT when not signed in. It's just something for me to use since I needed a quick and easy way to check when my favorite channels had new videos but I do not like signing into Google to use YoutTube.

It's basically the original subscription box but instead of populating with data from YouTube's server it populates with data you supply it.

Currently, it works but there is at least 1 bug, which is that it doesn't expand the sidebar or add a scroll bar so if you have too many channels on the list, you have to fullscreen your browser or it cuts them off.

I plan on cleaning up the code and originally I wanted to only supply the usernames and have the code automatically grab everything else but that seemed to be more effort than it was worth.


Prerequisites
For FireFox users install Greasemonkey: https://addons.mozilla.org/en-US/firefo ... asemonkey/

Downloads
This script is subjective. You will not want the same channels as me. Therefore there is no install link, you must install it manually and edit it as you see fit.


Code
// ==UserScript==
// @name        YT Subscription Offline Box
// @namespace   TIM-DM
// @include     https://www.youtube.com*
// @description
// @version     1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==

//Hide everything in the sidebar
$("ul.guide-toplevel > li.guide-section").hide();

var channels = [
   ["ADoseofBuckley","UC9kMnSZQd53hE-1sb1f9sdA","--xQG1n4u_qw/AAAAAAAAAAI/AAAAAAAAAAA/3GVRrk80vKE/s176-c-k-no/photo.jpg"],
   ["Numberphile","UCoxcjq-8xIDTYp3uz647V5A","-ObcwfadZ5MI/AAAAAAAAAAI/AAAAAAAAAAA/qxNULGXLkd4/s100-c-k-no/photo.jpg"],
   ["Numberphile2", "UCyp1gCHZJU_fGWFf2rtMkCg", "-AfT-CyBL4us/AAAAAAAAAAI/AAAAAAAAAAA/59e3G-iR-U0/s100-c-k-no-rj-c0xffffff/photo.jpg"],
   ["Computerphile","UC9-y-6csu5WGm29I7JiwpnA","-JFhbdoLwRlI/AAAAAAAAAAI/AAAAAAAAAAA/RemIzWPj2ZA/s100-c-k-no/photo.jpg"],
   ["Objectivity","UCtwKon9qMt5YLVgQt1tvJKg","-I9VY5RfBJ1Y/AAAAAAAAAAI/AAAAAAAAAAA/ozZ86FnBpFw/s100-c-k-no-rj-c0xffffff/photo.jpg"],
   ["superspeedersRob","UC1nstSui0tPnJtMF2OZx5tw","-zIyEd8xceXQ/AAAAAAAAAAI/AAAAAAAAAAA/5Ioi5ynw_UA/s100-c-k-no/photo.jpg"],
   ["engineerguy","UC2bkHVIDjXS7sgrgjFtzOXQ","-q15PcbNg4cw/AAAAAAAAAAI/AAAAAAAAAAA/E7D7QZnDBIo/s100-c-k-no-rj-c0xffffff/photo.jpg"],
   ["Wendoverproductions","UC9RM-iSvTu1uPJb8X5yp3EQ","-PsahvzwfwpI/AAAAAAAAAAI/AAAAAAAAAAA/HSOuDfb3kC0/s100-c-k-no-mo-rj-c0xffffff/photo.jpg"],
];

function buildChannelListHtml() {
   //Set up YouTube styling HTML
   var channelListWrap = $("<div>", {class: "guide-section hover-action-menu-trigger vve-check", id: "guide-subscriptions-section"});
   $(channelListWrap).append($("<h3>", {text: "People I Watch"}));
   var div1 = $("<div>", {id: "guide-subs-footer-container"});
   var div2 = $("<div>", {id: "guide-subscriptions-container", class: "overflowable-list-root"});
   var div3 = $("<div>", {class: "guide-channels-content yt-scrollbar"});
   $(div1).append($(div2));
   $(div2).append($(div3));
   var channelList = $("<ul>", {class: "guide-channels-list guide-item-container parent-list guide-infinite-list yt-uix-scroller filter-has-matches yt-uix-tdl", id: "guide-channels", role: "menu"});

   for(var i = 0; i < channels.length; ++i) {
      var channel = channels[i];
      var channelName = channel[0];
      var channelID = channel[1];
      var channelIcon = channel[2];

      var channelListItem = $("<li>").append(
         $("<a>", {title: channelName, href: "https://www.youtube.com/channel/" + channelID + "/videos", class: "guide-item yt-valign"}).append(
            $("<span>", {class: "yt-valign-container"}).append(
               $("<span>", {class: "thumb"}).append(
                  $("<span>", {class: "video-thumb  yt-thumb yt-thumb-20"}).append(
                     $("<span>", {class: "yt-thumb-square"}).append(
                        $("<span>", {class: "yt-thumb-clip"}).append(
                           $("<img>", {width: "20", height: "20", src: "https://yt3.ggpht.com/" + channelIcon}),
                           $("<span>", {class: "vertical-align"})
                        )
                     )
                  )
               ),
               $("<span>", {class: "display-name no-count"}).append(
                  $("<span>", {text: channelName})
               )
            )
         )
      );

      $(channelList).append($(channelListItem));
   }

  $(div3).append($(channelList));
  $(channelListWrap).append($(div3));
  $("ul.guide-toplevel").prepend($(channelListWrap));
}

buildChannelListHtml();


-- Sat Aug 08, 2015 8:17 am --

I've updated the script:

-Made the list scroll if you have more channels than your browser height can show
-Commented the code for readability
-Restructured the code into functions
-Renamed some variables
Posted 7 years ago
great job DM
Posted 6 years ago · Author
I've completely rewritten the script. I managed to cut the number of lines down by about half using object-literals to create and populate the html.

I've also hidden everything else on the side bar so only the channels you choose to display will be visible. No more trending, or categories.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

Sign up for a new account in our community. It's easy!

REGISTER A NEW ACCOUNT
Select a forum Protection     Help & Support     Introductions     Mafia News     IMVU News General Discussion     IMVU Lounge        IMVU Series / Roleplaying        Social Games     Mafia Market     Mafia Tools        Premium IMVU Tools        Off Topic Tools     Off Topic     Contests Creator Corner     Graphics Design        Photoshop        GIMP     Basic Creator Help     Catalog And Product Showcase     3D Meshing        3Ds Max        Sketchup        Blender Gangsters with Connections     White Hat Activities        Google Hacking        Trackers Programming Corner     Coding        Python        .Net (C#, VB, etc)        Flash        JAVA        Autoit        Batch        HTML & CSS        Javascript        PHP        Other        IMVU Homepage Codes           General           About me Panel           Messages Panel           Special Someone Panel           Visitors Panel           New Products Panel           Rankings Panel           Wishlist Panel           My Badges Panel           Outfits Panel           Url Panel           Groups Panel           Slideshow Panel           My Room Panel           Sandbox panel           Layouts     Help & Requests Free Credits     Approved Methods     Submit Methods Free Money     Approved Methods     Submit Methods Adult Corner     Get Mafia AP Here     AP Lounge        AP Social Games        Casual Dating Tips     IMVU Slave Market & Escorts