☰

Greasy Fork 支持简体中文。

Title Youtube Locations

Puts the video title in the location bar of all YouTube video pages. Now with extra features addScrollbars, animateThumbnails and reduceFontSizes!

目前為 2015-09-09 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name           Title Youtube Locations
  3. // @namespace      TYTLs
  4. // @description    Puts the video title in the location bar of all YouTube video pages.  Now with extra features addScrollbars, animateThumbnails and reduceFontSizes!
  5. // @version        1.1.7
  6. // @downstreamURL  http://userscripts.org/scripts/source/87416.user.js
  7. // @include        http://*.youtube.*/*
  8. // @include        http://youtube.*/*
  9. // @include        https://*.youtube.*/*
  10. // @include        https://youtube.*/*
  11. //// YouTube thumbnails almost certainly appear if you do a video search:
  12. // @include        https://www.google.co.uk/search?*&tbm=vid&*
  13. //// YouTube thumbnails occasionally appear in normal Google search results:
  14. // @include        https://www.google.co.uk/search*
  15. // @grant          GM_addStyle
  16. // @grant          GM_log
  17. // ==/UserScript==
  18.  
  19. // TODO: In case for some reason YouTube or another script redirects us to
  20. // another URL which has lost the title param we added, we will re-run forever.
  21. // To avoid this we should have a fallback.  E.g. if the title we want to set
  22. // is the same as the last one we did set (via GM_set/getValue) then do not try
  23. // again.
  24. // This has never happened so far.  :)
  25.  
  26. // If you are interested in YouTube images:
  27. // Thumbnails url looks like http://img.youtube.com/vi/8aYQ_wjmriQ/2.jpg
  28. // Youtube generates 4 thumbnails: 0.jpg at 320x240, and 1.jpg, 2.jpg, 3.jpg
  29. // Also large: hqdefault.jpg (480x360) and sometimes but not always hq1.jpg, hq2.jpg, hq3.jpg
  30.  
  31.  
  32.  
  33. var addTitleToLocation = true;
  34. var reduceFontSizes    = true;
  35. var addScrollbars      = true;
  36. var scrollDownToVideo  = false; // YouTube's header ("masthead") is now floating.  Setting this true will un-float it, then scroll down to hide it.  But scrolling containers should then be enlarged.
  37. var animateThumbnails  = true;
  38.  
  39.  
  40.  
  41. if (addTitleToLocation) {
  42.  
  43. 	// NOTE: This code is deprecated, as I now use the userscripts URLs_Need_Titles
  44.  
  45. 	setTimeout(function(){
  46. 		if (document.location.pathname == "/watch") {
  47.  
  48. 			var title = document.title.replace(/ - YouTube$/,'')
  49. 				|| null;
  50.  
  51. 			if (title)
  52. 				title = title.replace(/ /g,'_').replace(/^[\r\n_]*/,'').replace(/[\r\n_]*$/,''); // "_"s paste better into IRC, since " "s become "%20"s which are hard to read.  The second and third parts trim "_"s and newlines from the start and end of the string.
  53.  
  54. 			if (title) {
  55. 				if (!document.location.hash) {
  56. 					document.location.replace(document.location.href + '#' + title); // Does not alter browser history
  57. 					// document.location.hash = title; // Crashes Chrome less often
  58. 				}
  59. 			}
  60. 		}
  61. 	},5000); // This is what really stops the crashing!
  62.  
  63. }
  64.  
  65.  
  66.  
  67. if (reduceFontSizes) {
  68. 	// == Reduce font size of thumbnail titles ==
  69. 	GM_addStyle(".yt-tile-default.video-list-item a .title, #watch-sidebar .video-list-item .title { font-size: 11px; line-height: 10px; }");
  70. 	// Defaults are font-size: 13px; and line-height: 15px; which show only two lines in my browser.
  71. }
  72.  
  73.  
  74.  
  75. if (addScrollbars) {
  76.  
  77. 	// == Scrollbars on comments and related vids, to keep the video in view. ==
  78. 	setTimeout(function(){
  79. 		// We could alternatively act on watch-panel but that includes the video navigation buttons!
  80. 		// BUG: Interferes with YouTube's lazy-loading of thumbnails for related video.
  81. 		if (document.location.href.indexOf("/all_comments?") >= 0) {
  82. 			return;   // Leave the full comments page alone.
  83. 		}
  84.  
  85. 		// The top of watch7-content has become very large, so put a scrollbar on the whole lot.
  86. 		var watchDiscussion = /* document.getElementById("watch-discussion") || */ document.getElementById("watch7-content");
  87. 		if (watchDiscussion) {
  88. 			var toSubtract = 464;     // Small video screen
  89. 			//var toSubtract = 544;   // Medium size video screen
  90. 			var roomForComments = window.innerHeight - toSubtract;
  91. 			if (roomForComments < 200) {
  92. 				roomForComments = 200;
  93. 			}
  94. 			watchDiscussion.style.overflow = "auto";
  95. 			watchDiscussion.style.maxHeight = roomForComments+"px"; /* For a video height 360p */
  96. 			GM_addStyle(" #watch7-content { border: 1px solid; border-color: #c8c8c8 #dddddd #dddddd #c8c8c8; margin-top: 5px; } #watch-header { margin-top: 0px; margin-bottom: 0px; } ");
  97. 		}
  98.  
  99. 		var watchSidebar = document.getElementById("watch-sidebar") || document.getElementById("watch7-sidebar");
  100. 		if (watchSidebar) {
  101. 			watchSidebar.style.overflow = "auto";
  102. 			watchSidebar.style.maxHeight = (window.innerHeight - 69)+"px";
  103. 			// May 2012 - fixes below no longer needed.
  104. 			// Now the text wraps because of the scrollbar, so we widen the element:
  105. 			// watchSidebar.style.width = (320+24)+"px";
  106. 			// watchSidebar.style.width = '300px';
  107. 			// And we must widen its container also:
  108. 			// TODO BUG: Why does this work in the console, but not from the userscript?
  109. 			// document.getElementById("watch-main").style.width = (960+24)+"px";
  110. 			GM_addStyle(" #watch-sidebar, #watch7-sidebar { border: 1px solid; border-color: #c8c8c8 #dddddd #dddddd #c8c8c8; } ");
  111. 		}
  112.  
  113. 		if (scrollDownToVideo) {
  114. 			// Un-float the header:
  115. 			GM_addStyle(" #masthead-positioner { position: initial; } #masthead-positioner-height-offset { height: 0px; } ");
  116. 			//// Title text
  117. 			// document.getElementById("eow-title").scrollIntoView();
  118. 			//// Uploader info and videolist popdown.
  119. 			// document.getElementById("watch-headline-user-info").scrollIntoView();
  120. 			//// The author's video list (was supposed to be a small gap above the video when collapsed, but it's not)
  121. 			// document.getElementById("watch-more-from-user").scrollIntoView();
  122. 			//// The video
  123. 			// document.getElementsByTagName("embed")[0].scrollIntoView();
  124. 			//// The video
  125. 			var watchVideo = document.getElementById("movie_player") || document.getElementById("player-api");
  126. 			if (watchVideo) {
  127. 				watchVideo.scrollIntoView();
  128. 			}
  129. 			//// Slight gap above the video (I prefer that)
  130. 			// var watchContainer = document.getElementById("watch7-container");
  131. 			// if (watchContainer) {
  132. 			// 	watchContainer.scrollIntoView();
  133. 			// }
  134. 		}
  135.  
  136. 		// ~ October 2014
  137. 		// This feels like a bug in Chrome 38.  The element is given position:absolute but it does not move up when its parent does!  We can fix it anyway:
  138. 		GM_addStyle(" #watch8-secondary-actions { position: initial; } ");
  139. 	},1000);
  140.  
  141. }
  142.  
  143.  
  144.  
  145. if (animateThumbnails) {
  146.  
  147. 	// == Thumbnail animation ==
  148. 	// TODO: This is working fine on "related videos" thumbnails, but not on queue
  149. 	// thumbnails, even if I have the queue open when I load the page.
  150. 	// Perhaps we are responding to a mouseout event from a child element, because
  151. 	// we are not checking the event target like we should do.
  152. 	function initThumbnailAnimator() {
  153. 		// function createThumbnailAnimatorEvent(thumbImage) {
  154. 		var thumbImage    = null;
  155. 		var originalHref  = null;
  156. 		var evt    = null;
  157. 		var timer  = null;
  158. 		//var frames = ["1.jpg","2.jpg","3.jpg"];   // "default.jpg",
  159. 		var frames = ["1","2","3"];
  160. 		var frameI = 0;
  161. 		function changeFrame() {
  162. 			frameI = (frameI + 1) % frames.length;
  163. 			var extension = originalHref.replace(/^.*\./, '');
  164. 			var filename = frames[frameI] + '.' + extension;
  165. 			thumbImage.src = originalHref.replace(/\/[^/]*$/,'') + '/' + filename;
  166. 		}
  167. 		function startAnimation() {
  168. 			originalHref = thumbImage.src;
  169. 			if (originalHref.match(/^data:/)) {
  170. 				return;
  171. 			}
  172. 			// We make this check quite late, due to lazy loading
  173. 			if (originalHref.match(/\/(.qdefault|default|0)\.(jpg|webp)$/)) {
  174. 				// logElem("Starting animation",thumbImage);
  175. 				timer = setInterval(changeFrame,600);
  176. 			}
  177. 		}
  178. 		function stopAnimation() {
  179. 			if (timer) {
  180. 				// logElem("Stopping animation",thumbImage);
  181. 				clearInterval(timer);
  182. 				timer = null;
  183. 				// This isn't really neccessary, except to ensure the check for default\.jpg above works next time!
  184. 				//thumbImage.src = thumbImage.src.replace(/\/[^/]*$/,'') + '/' + "default.jpg";
  185. 				thumbImage.src = originalHref;
  186. 			}
  187. 		}
  188. 		function logElem(name,elem) {
  189. 			report = "<"+elem.tagName+" id="+elem.id+" class="+elem.className+" src="+elem.src+" />";
  190. 			GM_log(name+" = "+report);
  191. 		}
  192. 		function check(fn) {
  193. 			return function(evt) {
  194. 				// logElem("["+evt.type+"] evt.target",evt.target);
  195. 				var elemToCheck = evt.target || evt.srcElement;
  196. 				if (elemToCheck.tagName == "IMG") {
  197. 					thumbImage = elemToCheck;
  198. 					return fn();
  199. 				} else if (elemToCheck.className=='screen') {
  200. 					var seekImg = elemToCheck.parentNode.getElementsByTagName("img")[0];
  201. 					if (seekImg) {
  202. 						thumbImage = seekImg;
  203. 						return fn();
  204. 					}
  205. 				// } else {
  206. 					// var imgCount = elemToCheck.getElementsByTagName("img").length;
  207. 					// if (imgCount == 1) {
  208. 						// thumbImage = elemToCheck.getElementsByTagName("img")[0];
  209. 						// // logElem("["+evt.type+"] checking sub-image",thumbImage);
  210. 						// logElem("Whilst checking",elemToCheck);
  211. 						// logElem("  Animating elem",thumbImage);
  212. 						// logElem("  with parent",thumbImage.parentNode);
  213. 						// logElem("  whilst currentTarget",evt.currentTarget);
  214. 						// logElem("  and srcElement",evt.srcElement);
  215. 						// return fn();
  216. 					// }
  217. 				}
  218. 			};
  219. 		}
  220. 		//// Unfortunately these do not fire on any HTMLImageElements when browsing the queue.
  221. 		document.body.addEventListener("mouseover",check(startAnimation),false);
  222. 		document.body.addEventListener("mouseout",check(stopAnimation),false);
  223. 		// var videoList = document.getElementById("watch-sidebar"); // or watch-module or watch-module-body or watch-related or watch-more-related
  224. 		// var videoList = document.getElementsByClassName("video-list")[0]; // can be 4 of these!
  225. 		// var thumbs = document.getElementsByTagName("img");
  226. 		// for (var i=0;i<thumbs.length;i++) {
  227. 			// createThumbnailAnimatorEvent(thumbs[i]);
  228. 		// }
  229. 	}
  230. 	setTimeout(initThumbnailAnimator,1000);
  231.  
  232. }
  233.