☰

BiliBili+

在B站个人动态的视频列表里直接加入稍后看按钮

  1. // ==UserScript==
  2. // @name        BiliBili+
  3. // @namespace   BiliBili+@Byzod.user.js
  4. // @include     /https?:\/\/www\.bilibili\.com\/account\/dynamic/
  5. // @version     2017-6-21b
  6. // @grant       none
  7. // jshint esversion:6
  8. // @description 在B站个人动态的视频列表里直接加入稍后看按钮
  9. // ==/UserScript==
  10.  
  11. const WATCH_LATER_TEXT = "  【稍候再看】  ";
  12. const REMOVE_WATCH_LATER_TEXT = "  【移除稍候再看】  ";
  13. const WATCH_LATER_BG_COLOR = "#1672A4";
  14.  
  15. // 观察者，执行“添加稍后看按钮”
  16. let observer = new MutationObserver(AddWatchLaterButton);
  17. // 视频列表
  18. let vidsList = document.querySelector(".stm-lst");
  19. if(vidsList){
  20. 	observer.observe( vidsList, { childList: true } );
  21. } else {
  22. 	alert("[Bili+]: Vids list not exist");
  23. }
  24.  
  25. // 添加稍候看按钮
  26. async function AddWatchLaterButton(recs){
  27. 	// console.log("[Bili+]: recs %o", recs); // DEBUG
  28. 	
  29. 	// 先获取稍后看列表
  30. 	let addedVids = await GettingAddedWatchList();
  31. 	
  32. 	// console.log("[Bili+]: addedVids %o", addedVids); // DEBUG
  33. 	for(let rec of recs){
  34. 		rec.addedNodes.forEach(vidRow => {
  35. 			// 如果是视频，加个按钮
  36. 			if(vidRow.className == "stm-lst-item"){
  37. 				
  38. 				let vid = vidRow.querySelector(".hint>a");
  39. 				let av = vid.href;
  40. 				av = av.match(/\d+/)[0];
  41. 				
  42. 				// console.log("[Bili+]: av " + av); // DEBUG
  43. 				if(!vid.parentNode.querySelector(".watch-later-btn")){
  44. 					let watchLaterBtn = document.createElement("button");
  45. 					watchLaterBtn.className = "watch-later-btn";
  46. 					watchLaterBtn.style.trasition = "0.5s";
  47. 					
  48. 					if(!addedVids.includes(parseInt(av))){
  49. 						// 不在稍后看里，只改提示
  50. 						watchLaterBtn.innerText = WATCH_LATER_TEXT;
  51. 					} else {
  52. 						// 已在稍后看里，改为移除按钮样式
  53. 						watchLaterBtn.innerText = REMOVE_WATCH_LATER_TEXT;
  54. 						watchLaterBtn.style.backgroundColor = WATCH_LATER_BG_COLOR;
  55. 					}
  56. 					
  57. 					// 挂添加/移除事件处理
  58. 					watchLaterBtn.onclick = ()=>{ ToggleWatchLater(av, watchLaterBtn); };
  59. 					
  60. 					// 加在链接后面
  61. 					vid.parentNode.appendChild(document.createElement("br"));
  62. 					vid.parentNode.appendChild(watchLaterBtn);
  63. 				}
  64. 			}
  65. 		});
  66. 	}
  67. }
  68.  
  69. // 获取稍后看列表
  70. async function GettingAddedWatchList(){
  71. 	return new Promise(async (resolve, reject)=>{
  72. 		let r = null;
  73. 		
  74. 		let url = new URL(location.protocol + "//api.bilibili.com/x/v2/history/toview/web");
  75. 		let params = {
  76. 			jsonp: "jsonp",
  77. 			sid: GetCookieValue('sid'), // 大概是用户id
  78. 			csrf: GetCookieValue('bili_jct') // 并不清楚这是啥
  79. 		}
  80. 		Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
  81. 		
  82. 		try{
  83. 			r = await (await fetch(url, {method: "GET", credentials: "include"})).json();
  84. 		} catch (ex) {
  85. 			r = null;
  86. 		}
  87. 		// console.log("[Bili+]: fetch result %o", r); // DEBUG
  88. 		
  89. 		if(r && r.data && r.data.list){
  90. 			resolve(r.data.list.map(vid=>vid.aid));
  91. 		} else {
  92. 			reject([])
  93. 		}
  94. 	});
  95. }
  96.  
  97. // 切换稍后看状态
  98. async function ToggleWatchLater(av, btn){
  99. 	// console.log("[Bili+]: Toggle av %o", av); // DEBUG
  100. 	
  101. 	// 先获取稍后看列表
  102. 	let addedVids = await GettingAddedWatchList();
  103. 	
  104. 	let isWatchLater = addedVids.includes(parseInt(av));
  105. 	// console.log("[Bili+]: " + (isWatchLater ? "Removing from watch later" : "Adding to watch later")); // DEBUG
  106. 	
  107. 	let result = null;
  108. 	let url = new URL(location.protocol + "//api.bilibili.com/x/v2/history/toview/" + (isWatchLater ? "del" : "add"));
  109.  
  110. 	let params = {
  111. 		aid: av,
  112. 		jsonp: "jsonp",
  113. 		csrf: GetCookieValue('bili_jct') // 并不清楚这是啥
  114. 	}
  115. 	Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
  116. 	
  117. 	try{
  118. 		result = await (await fetch(url, {method: "POST", credentials: "include"})).json();
  119. 	} catch (ex) {
  120. 		// 一般来说是网络错误
  121. 		result = ex;
  122. 		btn.innerText = "  【操作失败，请重试】 ";
  123. 	}
  124. 	
  125. 	if(result.code == "0"){
  126. 		// 添加/移除成功
  127. 		btn.innerText = (isWatchLater ? WATCH_LATER_TEXT : REMOVE_WATCH_LATER_TEXT);
  128. 		btn.style.backgroundColor = (isWatchLater ? "" : WATCH_LATER_BG_COLOR);
  129. 		if(MessageBox){(new MessageBox).show(btn, "已" + (isWatchLater ? "移除" : "添加"), 700, "info")};
  130. 	} else {
  131. 		// 服务器返回失败
  132. 		if(MessageBox){(new MessageBox).show(btn, "粗错啦：\n" + result.message, 3000, "error")};
  133. 		btn.innerText = result.message;
  134. 	}
  135. }
  136.  
  137. // 获取cookie
  138. function GetCookieValue(name) {
  139. 	var valueMatch = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
  140. 	return valueMatch ? valueMatch.pop() : '';
  141. }