☰

Alternative video page layout for Rehike

Makes Rehike use an alternate universe watch9 layout

  1. // ==UserScript==
  2. // @name         Alternative video page layout for Rehike
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0.4
  5. // @description  Makes Rehike use an alternate universe watch9 layout
  6. // @author       lightbeam24
  7. // @match        *.youtube.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12. (function() {
  13.     'use strict';
  14.     /* settings (can be configured by user) */
  15.     const expStickyWatchColumns = false; // default: false
  16.     /* end of settings */
  17.  
  18.     var canGo = false;
  19.  
  20.     function timeout(durationMs) {
  21.         return new Promise((resolve, reject) => {
  22.             setTimeout(function() {
  23.                 resolve();
  24.             }, durationMs);
  25.         });
  26.     }
  27.     async function waitForElement(elm) {
  28.         while (null == document.querySelector(elm)) {
  29.             await new Promise(r => requestAnimationFrame(r));
  30.         }
  31.         await timeout(50).then(function() {
  32.             canGo = true;
  33.             return document.querySelector(elm);
  34.         });
  35.     }
  36.     everyLoadPrep();
  37.     document.addEventListener("spfdone", everyLoadPrep);
  38.  
  39.     function everyLoadPrep() {
  40.         if (document.querySelector("#page.watch") != null) {
  41.             var elm = "#watch-header";
  42.             waitForElement(elm).then(function(elm) {
  43.                 if (canGo != false) {
  44.                     if (document.querySelector('#alt-watch9-container') == null) {
  45.                         everyLoad();
  46.                     }
  47.                 }
  48.             });
  49.         }
  50.     }
  51.  
  52.     function everyLoad() {
  53.         // grab "experiments"
  54.         if (expStickyWatchColumns == true) {
  55.             document.body.classList.add("exp-sticky-watch-columns");
  56.         }
  57.         // create the watch layout itself
  58.         let container = document.querySelector('#watch-header');
  59.         var altWatch9 = document.createElement("div");
  60.         altWatch9.id = "alt-watch9-container";
  61.         altWatch9.innerHTML = `
  62. <style>
  63. @media screen and (min-width: 1294px) and (min-height: 630px) {
  64. .watch #watch9-slider {
  65.   width: calc(1024px - 614px);
  66. }
  67. .scroller-inner {
  68.   max-width: 214px !important;
  69. }
  70. }
  71. @media screen and (min-width: 1720px) and (min-height: 980px) {
  72. .watch #watch9-slider {
  73.   width: calc(1280px);
  74. }
  75. .scroller-inner {
  76.   max-width: 238px !important;
  77. }
  78. }
  79.  
  80. .watch9-expand {
  81.   width: 100%;
  82.   margin-top: 10px;
  83.   border-top: 1px solid #ccc;
  84.   font-size: 11px;
  85.   font-weight: 600;
  86.   cursor: pointer;
  87. }
  88. .expand-inner {
  89.   border: 1px solid transparent;
  90.   background: #fff;
  91.   width: fit-content;
  92.   margin: 0 auto;
  93.   margin-top: -10px;
  94.   padding: 3px 12px;
  95.   border-radius: 2px;
  96. }
  97. .expand-inner:hover {
  98.   border: 1px solid #c6c6c6;
  99.   border-left-color: rgb(198, 198, 198);
  100.   background: #f0f0f0;
  101.   box-shadow: 0 1px 0 rgba(0,0,0,0.10);
  102. }
  103. .expand-inner:active {
  104.   border: 1px solid #c6c6c6;
  105.   border-left-color: rgb(198, 198, 198);
  106.   background: #e9e9e9;
  107.   box-shadow: inset 0 1px 0 #ddd;
  108. }
  109. .expand-button {
  110.   width: 100%;
  111.   border-top: 1px solid var(--section-border);
  112.   text-transform: uppercase;
  113.   font-size: 11px;
  114.   color: #767676;
  115.   font-weight: 600;
  116.   letter-spacing: -0.5px;
  117.   cursor: pointer;
  118.   margin-bottom: -15px;
  119.   margin-top: 15px;
  120. }
  121. .expand-button:hover {
  122.   color: #333;
  123. }
  124. .expand-button span {
  125.   margin: 5px 0;
  126.   display: block;
  127. }
  128. #watch9-title {
  129.   font-size: 20px;
  130.   margin-bottom: 15px;
  131. }
  132. #watch9-sidebar {
  133.   max-width: 143px;
  134.   min-width: 143px;
  135. }
  136. .exp-sticky-watch-columns .watch9-sidebar-inner {
  137.   position: sticky;
  138.   top: 53px;
  139. }
  140. .sidebar-item {
  141.   font-size: 12px;
  142.   padding: 7px 8px;
  143.   color: #333;
  144.   width: 83%;
  145.   border-radius: 2px;
  146.   cursor: pointer;
  147.   border: 1px solid transparent;
  148.   margin: 4px 0;
  149.   height: 13px;
  150.   display: block;
  151. }
  152. button.sidebar-item {
  153.   width: 95.5%;
  154.   display: flex;
  155.   text-align: unset;
  156.   height: 28px;
  157. }
  158. .sidebar-item:hover,
  159. .sidebar-item:focus {
  160.   background: #fafafa;
  161.   border: 1px solid #ccc;
  162. }
  163. .sidebar-item.active {
  164.   background: linear-gradient(to top,#b6d7f591,#e3f2ffa3);
  165.   border: 1px solid #90ccf8;
  166.   background: linear-gradient(to top,#f0f0f0 0,#f8f8f8 100%);
  167.   border: 1px solid #c6c6c6;
  168.   font-weight: 600;
  169.   background: #f8f8f8;
  170.   background: linear-gradient(to top,#f0f0f0 0,#f8f8f8 100%);
  171. }
  172. .sidebar-item:hover::before {
  173.   margin-top: 2px;
  174.   border-color: transparent #ccc;
  175.   content: '';
  176.   border-width: 8px 0 8px 8px;
  177.   border-style: solid;
  178.   position: absolute;
  179.   margin-right: -132px;
  180.   margin-left: 126px;
  181.   margin-top: 0px;
  182. }
  183. .sidebar-item:hover::after {
  184.   content: '';
  185.   border-width: 7px 0px 7px 7px;
  186.   border-style: solid;
  187.   border-color: transparent #fafafa;
  188.   position: absolute;
  189.   margin-right: -137.5px;
  190.   margin-left: 126px;
  191.   margin-top: 1px;
  192. }
  193. .sidebar-item.active::before {
  194.   margin-top: 2px;
  195.   border-color: transparent #90ccf8;
  196.   border-color: transparent #c6c6c6;
  197. }
  198. .sidebar-item.active::before {
  199.   content: '';
  200.   border-width: 8px 0 8px 8px;
  201.   border-style: solid;
  202.   position: absolute;
  203.   margin-right: -132px;
  204.   margin-left: 126px;
  205.   margin-top: 0px;
  206. }
  207. .sidebar-item.active::after {
  208.   margin-top: 2px;
  209. }
  210. .sidebar-item.active::after {
  211.   content: '';
  212.   border-width: 7px 0px 7px 7px;
  213.   border-style: solid;
  214.   border-color: transparent #e1effc;
  215.   border-color: transparent #f4f4f4;
  216.   border-color: transparent #f8f8f8;
  217.   border-color: transparent #f4f4f4;
  218.   position: absolute;
  219.   margin-right: -137.5px;
  220.   margin-left: 126px;
  221.   margin-top: 1px;
  222. }
  223. .sidebar-item-inner {
  224.   display: inline;
  225.   position: absolute;
  226. }
  227. #watch9-slider {
  228.   width: calc(854px - 440px);
  229.   border-left: 1px solid #e8e8e8;
  230.   border-right: 1px solid #e8e8e8;
  231.   margin-right: 15px;
  232.   padding: 0 15px;
  233.   overflow: clip;
  234. }
  235. [show-owner="false"] #watch9-slider {
  236.   width: calc(854px - 420px);
  237. }
  238. .slider-container {
  239.   overflow: clip;
  240. }
  241. .slider-container-inner {
  242.   display: flex;
  243.   transition-duration: 0.3s;
  244.   transform: translateX(0);
  245. }
  246. .slider {
  247.   min-width: 100%;
  248.   margin-right: 0px;
  249.   padding-right: 0px;
  250. }
  251. .slider-inner {
  252.   min-width: 100%;
  253.   margin-right: 0px;
  254.   padding-right: 0px;
  255. }
  256. .toggle-button {
  257.   color: rgb(96,96,96);
  258.   font-size: 11px;
  259.   font-weight: 600;
  260.   padding: 6px 4px;
  261.   padding: 3px 4px;
  262.   cursor: pointer;
  263. }
  264. .toggle-button-inner {
  265.   align-items: center;
  266. }
  267. .toggle-button-icon {
  268.   opacity: 0.6;
  269.   display: block;
  270.   width: 21px;
  271.   height: 21px;
  272.   margin-right: 4px;
  273. }
  274. .watch9:not([scroller-visible="true"]) #watch9-slider:not([state="description"]) #watch9-description {
  275.   max-height: 156px;
  276. }
  277. .watch9:not([scroller-visible="false"]) #watch9-slider:not([state="description"]) #watch9-description {
  278.   max-height: 336px;
  279. }
  280. #watch9-description,
  281. #watch9-description-snippet {
  282.   font-size: 13px;
  283.   line-height: 14px;
  284.   color: #222;
  285. }
  286. #watch9-description-snippet {
  287.   margin-top: 70px;
  288.   margin-top: 44px;
  289.   margin-top: 15px;
  290. }
  291. #watch9-description-snippet .desc-snippet {
  292.   max-height: 58px;
  293.   overflow: hidden;
  294. }
  295. .watch9-category {
  296.   font-size: 11px;
  297.   color: #333;
  298.   margin-top: 14px;
  299. }
  300. .watch9-category .cat-inner {
  301.   font-weight: 600;
  302.   margin-right: 24px;
  303. }
  304. .watch9-header-text {
  305.   font-size: 13px;
  306.   line-height: 14px;
  307.   color: #333;
  308.   font-weight: 600;
  309. }
  310. .author-link {
  311.   color: #333;
  312. }
  313. .slider:hover .author-link {
  314.   color: #167ac6;
  315.   cursor: pointer;
  316. }
  317. .watch9-upload-date .author-link:hover {
  318.   text-decoration: underline;
  319. }
  320. .owner-pfp,
  321. .owner-pfp img {
  322.   width: 48px;
  323.   height: 48px;
  324.   background-size: 48px 48px !important;
  325.   margin-right: 6px;
  326.   cursor: pointer;
  327. }
  328. #watch9-owner {
  329.   width: 250px;
  330. }
  331. .exp-sticky-watch-columns #watch9-owner .owner-inner {
  332.   position: sticky;
  333.   top: 49px;
  334. }
  335. #watch9-sentiment-actions {
  336.   /*position: absolute;*/
  337.   right: 0;
  338.   left: 0;
  339.   margin: 5px 0;
  340.   flex-direction: row-reverse;
  341.   border-bottom: 1px solid #e8e8e8;
  342. }
  343. #watch9-views-info {
  344.   min-width: 160px;
  345.   margin-left: auto;
  346. }
  347. .watch-view-count {
  348.   line-height: 24px;
  349.   max-height: 24px;
  350.   text-align: right;
  351.   font-size: 19px;
  352.   color: #666;
  353.   white-space: nowrap;
  354.   margin-bottom: 2px;
  355.   width: fit-content;
  356.   margin-left: auto;
  357. }
  358. .video-extras-sparkbars {
  359.   height: 2px;
  360.   overflow: hidden;
  361.   min-width: 160px;
  362.   width: fit-content;
  363. }
  364. .video-extras-sparkbar-likes {
  365.   float: left;
  366.   height: 2px;
  367.   background: #167ac6;
  368. }
  369. .video-extras-sparkbar-dislikes {
  370.   float: left;
  371.   height: 2px;
  372.   background: #ccc;
  373. }
  374. .owner-videos-scroller {
  375.   margin-top: 6px;
  376. }
  377. .owner-videos-scroller button {
  378.   margin-right: 8px;
  379. }
  380. [scroller-visible="false"] .scroller-inner {
  381.   display: none;
  382. }
  383. .scroller-inner {
  384.   margin-top: 6px;
  385.   overflow-y: scroll;
  386.   border: 1px solid #ccc;
  387.   padding: 5px;
  388.   max-height: 250px;
  389. }
  390. .super-compact-video {
  391.   cursor: pointer;
  392.   display: block;
  393. }
  394. .super-compact-video:not(:last-of-type) {
  395.   margin-bottom: 6px;
  396. }
  397. .super-compact-video .thumbnail {
  398.   height: 45px;
  399.   width: 80px;
  400. }
  401. .super-compact-video .thumbnail img {
  402.   height: 45px;
  403.   width: 80px;
  404. }
  405. .super-compact-video .meta {
  406.   margin-left: 4px;
  407.   color: #333;
  408.   font-size: 10px;
  409.   color: #767676;
  410. }
  411. .super-compact-video .view-count {
  412.   display: none;
  413. }
  414. .super-compact-video .title {
  415.   color: #126acc;
  416.   font-weight: 600;
  417.   font-size: 11px;
  418. }
  419. .super-compact-video .title:hover {
  420.   text-decoration: underline;
  421. }
  422.  
  423. [show-owner="false"] #watch9-owner {
  424.   display: none;
  425. }
  426. [show-owner="true"] #creator.sidebar-item {
  427.   display: none;
  428. }
  429. [show-owner="true"] #watch9-owner-slider {
  430.   display: none;
  431. }
  432. [state="video-info"] .slider-container-inner {
  433.   transform: translateX(0%);
  434. }
  435. [state="description"] .slider-container-inner {
  436.   transform: translateX(-100%);
  437. }
  438. [state="add-to"] .slider-container-inner {
  439.   transform: translateX(-200%);
  440. }
  441. [state="share"] .slider-container-inner {
  442.   transform: translateX(-300%);
  443. }
  444. [state="more-actions"] .slider-container-inner {
  445.   transform: translateX(-400%);
  446. }
  447. [show-owner="false"] [state="creator"] .slider-container-inner {
  448.   transform: translateX(0%);
  449. }
  450. [show-owner="false"] [state="video-info"] .slider-container-inner {
  451.   transform: translateX(-100%);
  452. }
  453. [show-owner="false"] [state="description"] .slider-container-inner {
  454.   transform: translateX(-200%);
  455. }
  456. [show-owner="false"] [state="add-to"] .slider-container-inner {
  457.   transform: translateX(-300%);
  458. }
  459. [show-owner="false"] [state="share"] .slider-container-inner {
  460.   transform: translateX(-400%);
  461. }
  462. [show-owner="false"] [state="more-actions"] .slider-container-inner {
  463.   transform: translateX(-500%);
  464. }
  465. .flex {
  466.   display: flex;
  467. }
  468. .none {
  469.   display: none;
  470. }
  471.  
  472.  
  473.  
  474. #watch7-headline, .owner-pfp, .owner-name-and-sub, #watch8-action-buttons, #action-panel-details, #watch-action-panels {
  475.   display: none;
  476. }
  477. #alt-watch9-container {
  478.   padding-bottom: 12px;
  479. }
  480. #watch-header .yt-user-info a {
  481.   white-space: nowrap;
  482.   max-width: 159px;
  483.   overflow: clip;
  484.   text-overflow: ellipsis;
  485. }
  486. #action-panel-share {
  487.   margin-left: 2px;
  488.   max-width: 330px;
  489.   position: absolute;
  490. }
  491. </style>
  492. <div class="section">
  493. 	<div class="section-inner">
  494. 		<div id="watch9-title">
  495. 			<span>Me at the zoo</span>
  496. 		</div>
  497. 		<div class="section-items watch9" scroller-visible="false" show-owner="true">
  498. 			<div class="section-items-inner flex">
  499. 				<div id="watch9-sidebar">
  500. 					<div class="watch9-sidebar-inner">
  501.                         <div class="sidebar-item" id="creator">
  502. 							<div class="sidebar-item-inner">
  503. 								<span>Creator</span>
  504. 							</div>
  505. 						</div>
  506. 						<div class="sidebar-item active" id="video-info">
  507. 							<div class="sidebar-item-inner">
  508. 								<span>Video info</span>
  509. 							</div>
  510. 						</div>
  511. 						<div class="sidebar-item" id="description">
  512. 							<div class="sidebar-item-inner">
  513. 								<span>Description</span>
  514. 							</div>
  515. 						</div>
  516. 						<div class="sidebar-item" id="add-to">
  517. 							<div class="sidebar-item-inner">
  518. 								<span>Add to playlist</span>
  519. 							</div>
  520. 						</div>
  521. 						<div class="sidebar-item" id="share">
  522. 							<div class="sidebar-item-inner">
  523. 								<span>Share this video</span>
  524. 							</div>
  525. 						</div>
  526. 						<div class="sidebar-item" id="more-actions">
  527. 							<div class="sidebar-item-inner">
  528. 								<span>More actions</span>
  529. 							</div>
  530. 						</div>
  531. 					</div>
  532. 				</div>
  533. 				<div id="watch9-slider" state="video-info">
  534. 					<div class="slider-container">
  535. 						<div class="slider-container-inner">
  536.                             <div id="watch9-owner-slider" class="slider">
  537. 								<div class="slider-inner">
  538. 								</div>
  539. 							</div>
  540. 							<div id="watch9-stats" class="slider">
  541. 								<div class="slider-inner">
  542. 									<div id="watch9-sentiment-actions" class="flex">
  543. 										<div id="watch9-views-info">
  544. 											<div class="watch-view-count">
  545. 												???,??? views
  546. 											</div>
  547. 											<div class="video-extras-sparkbars yt-uix-tooltip">
  548. 												<div class="video-extras-sparkbar-likes" style="width: 98.0012039305%">
  549. 												</div>
  550. 												<div class="video-extras-sparkbar-dislikes" style="width: 1.99879606949%">
  551. 												</div>
  552. 											</div>
  553. 										</div>
  554. 										<div id="ltod">
  555. 										</div>
  556. 									</div>
  557. 									<div id="watch9-description-snippet">
  558. 										<div class="desc-snippet">
  559. 											<div class="watch9-upload-date watch9-header-text">
  560.                                                 <span id="first-part">
  561. 												    <span>Uploaded by </span>
  562. 												    <a class="author-link spf-link">????</a>
  563. 												    <span>on </span>
  564.                                                 </span>
  565.                                                 <span id="second-part">
  566.                                                     <span class="upload-date">??? ??, ????</span>
  567.                                                 </span>
  568.                                                 <span id="third-part">
  569.                                                     <span>by </span>
  570. 												    <a class="author-link spf-link">????</a>
  571.                                                 </span>
  572. 											</div>
  573. 											<div class="description-inner">
  574. 											</div>
  575. 										</div>
  576. 									</div>
  577. 									<div class="watch9-expand">
  578. 										<div class="expand-inner">
  579. 											<span>Show more</span>
  580. 										</div>
  581. 									</div>
  582. 									<div class="watch9-category">
  583. 									</div>
  584. 								</div>
  585. 							</div>
  586. 							<div id="watch9-description" class="slider">
  587. 								<div class="slider-inner">
  588. 									<div class="watch9-header-text">
  589. 										<span>Description</span>
  590. 									</div>
  591. 									<div class="description-inner">
  592. 									</div>
  593. 									<div class="watch9-expand">
  594. 										<div class="expand-inner">
  595. 											<span>Show less</span>
  596. 										</div>
  597. 									</div>
  598. 								</div>
  599. 							</div>
  600. 							<div id="watch9-addto" class="slider">
  601. 								<div class="slider-inner">
  602. 									<div class="watch9-header-text">
  603. 										<span>Add to playlist</span>
  604. 									</div>
  605. 								</div>
  606. 							</div>
  607. 							<div id="watch9-share" class="slider">
  608. 								<div class="slider-inner">
  609. 									<!--div class="watch9-header-text">
  610. 										<span>Share this video</span>
  611. 									</div-->
  612. 								</div>
  613. 							</div>
  614. 							<div id="watch9-more-actions" class="slider">
  615. 								<div class="slider-inner">
  616. 									<div class="watch9-header-text">
  617.                                         <span>This feature is unavailable.</span>
  618.                                     </div>
  619. 								</div>
  620. 							</div>
  621. 						</div>
  622. 					</div>
  623. 				</div>
  624. 				<div id="watch9-owner">
  625. 					<div class="owner-inner">
  626. 						<div class="owner-videos-scroller">
  627. 							<button class="yt-uix-button yt-uix-button-size-default yt-uix-button-default yt-uix-tooltip">
  628. 								<span>Videos</span>
  629. 								<span class="yt-uix-button-arrow yt-sprite"></span>
  630. 							</button>
  631.                             <a class="yt-uix-tooltip spf-link" data-tooltip-text="See user's videos">
  632. 								<span>See all</span>
  633. 							</a>
  634. 							<div class="scroller-inner">
  635. 							</div>
  636. 						</div>
  637. 					</div>
  638. 				</div>
  639. 			</div>
  640. 		</div>
  641. 	</div>
  642. </div>
  643. `;
  644.         container.insertBefore(altWatch9, container.children[0]);
  645.         var elm = ".watch-time-text";
  646.         waitForElement(elm).then(function(elm) {
  647.             if (canGo != false) {
  648.                 applyMetadata();
  649.             }
  650.         });
  651.  
  652.         function applyMetadata() {
  653.             if (document.querySelector("#eow-title") != null) {
  654.                 var videoTitle = document.querySelector("#eow-title").textContent;
  655.                 document.querySelector("#watch9-title span").textContent = videoTitle;
  656.             }
  657.             if (document.querySelector(".watch-time-text") != null) {
  658.                 var uploadDateRaw = document.querySelector(".watch-time-text").textContent;
  659.                 let notNeedNewString = uploadDateRaw.includes("Published");
  660.                 if (notNeedNewString == true) {
  661.                     var cutString = uploadDateRaw.split('on ');
  662.                     var uploadDate = cutString[1];
  663.                     document.querySelector("#first-part").style.display = "inline";
  664.                     document.querySelector("#third-part").style.display = "none";
  665.                 } else {
  666.                     var uploadDate = uploadDateRaw;
  667.                     document.querySelector("#first-part").style.display = "none";
  668.                     document.querySelector("#third-part").style.display = "inline";
  669.                 }
  670.                 document.querySelector(".watch9-upload-date .upload-date").textContent = uploadDate;
  671.             }
  672.             if (document.querySelector("#eow-description") != null) {
  673.                 var descHTML = document.querySelector("#eow-description").innerHTML;
  674.                 document.querySelector(".desc-snippet .description-inner").innerHTML = descHTML;
  675.                 document.querySelector("#watch9-description .description-inner").innerHTML = descHTML;
  676.             }
  677.             if (document.querySelector(".yt-user-info") != null) {
  678.                 var authorElem = document.querySelector(".yt-user-info a");
  679.                 var authorName = authorElem.textContent;
  680.                 var authorLink = document.querySelector(".yt-user-photo").getAttribute("href");
  681.                 var authorPfp = document.querySelector(".yt-user-photo img").getAttribute("data-thumb");
  682.                 document.querySelector(".author-link").textContent = authorName;
  683.                 document.querySelector(".author-link").setAttribute("href", authorLink);
  684.                 document.querySelector("#third-part .author-link").textContent = authorName;
  685.                 document.querySelector("#third-part .author-link").setAttribute("href", authorLink);
  686.                 document.querySelector(".owner-videos-scroller a").setAttribute("href", authorLink + "/videos");
  687.                 document.querySelector(".owner-videos-scroller a").setAttribute("data-tooltip-text", "View " + authorName + "'s videos");
  688.                 authorElem.classList.add("yt-uix-tooltip");
  689.                 authorElem.setAttribute("data-tooltip-text", "View " + authorName + "'s channel");
  690.             }
  691.             if (document.querySelector("#watch8-action-buttons") != null) {
  692.                 var viewCount = document.querySelector("#watch8-action-buttons .watch-view-count").textContent;
  693.                 document.querySelector("#watch9-views-info .watch-view-count").textContent = viewCount;
  694.                 var videoLikes = document.querySelector("#watch8-action-buttons .video-extras-sparkbar-likes").getAttribute("style");
  695.                 var videoDislikes = document.querySelector("#watch8-action-buttons .video-extras-sparkbar-dislikes").getAttribute("style");
  696.                 document.querySelector("#watch9-stats .video-extras-sparkbar-likes").setAttribute("style", videoLikes);
  697.                 document.querySelector("#watch9-stats .video-extras-sparkbar-dislikes").setAttribute("style", videoDislikes);
  698.                 var ltodBar = document.querySelector("#watch9-stats .video-extras-sparkbars");
  699.                 var likesPercent = ltodBar.querySelector("#watch9-stats .video-extras-sparkbar-likes").style.width;
  700.                 ltodBar.setAttribute("data-tooltip-text", likesPercent + " of viewers like this video");
  701.                 ltodBar.style.display = "block";
  702.                 ltodBar.style.padding = "5px 0";
  703.                 ltodBar.style.marginBottom = "-5px";
  704.                 document.querySelector(".watch-view-count").style.marginBottom = "-3px";
  705.             }
  706.             var theAddToBtn = document.querySelector("[data-menu-content-id='yt-uix-videoactionmenu-menu']");
  707.             var newHome = document.querySelector('#watch9-addto');
  708.             newHome.appendChild(theAddToBtn);
  709.             var theOwner = document.querySelector("#watch7-user-header");
  710.             var newHome2 = document.querySelector('#watch9-owner .owner-inner');
  711.             newHome2.insertBefore(theOwner, newHome2.children[0]);
  712.             var theExtras = document.querySelector("#watch-description-extras");
  713.             var newHome3 = document.querySelector('.watch9-category');
  714.             newHome3.insertBefore(theExtras, newHome3.children[0]);
  715.             var theLtod = document.querySelector(".like-button-renderer");
  716.             var newHome4 = document.querySelector('#ltod');
  717.             newHome4.insertBefore(theLtod, newHome4.children[0]);
  718.             var theSharePanel = document.querySelector("#action-panel-share");
  719.             var newHome5 = document.querySelector('#watch9-share .slider-inner');
  720.             newHome5.insertBefore(theSharePanel, newHome5.children[1]);
  721.             if (document.querySelector("#watch9-owner .owner-inner") != null) {
  722.                 var ownerHTML = document.querySelector("#watch9-owner .owner-inner").innerHTML;
  723.                 document.querySelector("#watch9-owner-slider .slider-inner").innerHTML = ownerHTML;
  724.             }
  725.             var creator = document.querySelector("#creator.sidebar-item");
  726.             var videoInfo = document.querySelector("#video-info.sidebar-item");
  727.             var description = document.querySelector("#description.sidebar-item");
  728.             var addTo = document.querySelector("#add-to.sidebar-item");
  729.             var share = document.querySelector("#share.sidebar-item");
  730.             var moreActions = document.querySelector("#more-actions.sidebar-item");
  731.             var showMore = document.querySelector("#watch9-stats .watch9-expand");
  732.             var showLess = document.querySelector("#watch9-description .watch9-expand");
  733.             var addToBtn = document.querySelector(".addto-button");
  734.             var showScroller = document.querySelector(".owner-videos-scroller button");
  735.             var showScroller2 = document.querySelector("#watch9-owner .owner-videos-scroller button");
  736.             creator.addEventListener("click", function() {
  737.                 creatorClicked();
  738.             });
  739.             videoInfo.addEventListener("click", function() {
  740.                 vidInfoClicked();
  741.             });
  742.             description.addEventListener("click", function() {
  743.                 descClicked();
  744.             });
  745.             showMore.addEventListener("click", function() {
  746.                 descClicked();
  747.             });
  748.             showLess.addEventListener("click", function() {
  749.                 vidInfoClicked();
  750.             });
  751.  
  752.             function creatorClicked() {
  753.                 document.querySelector("#watch9-slider").setAttribute("state", "creator");
  754.                 document.querySelector(".sidebar-item.active").classList.remove("active");
  755.                 document.querySelector("#creator.sidebar-item").classList.add("active");
  756.                 setTimeout(checkIfShowOwner, 10);
  757.             }
  758.  
  759.             function vidInfoClicked() {
  760.                 document.querySelector("#watch9-slider").setAttribute("state", "video-info");
  761.                 document.querySelector(".sidebar-item.active").classList.remove("active");
  762.                 document.querySelector("#video-info.sidebar-item").classList.add("active");
  763.                 setTimeout(checkIfShowOwner, 10);
  764.             }
  765.  
  766.             function descClicked() {
  767.                 document.querySelector("#watch9-slider").setAttribute("state", "description");
  768.                 document.querySelector(".sidebar-item.active").classList.remove("active");
  769.                 document.querySelector("#description.sidebar-item").classList.add("active");
  770.                 setTimeout(checkIfShowOwner, 10);
  771.             }
  772.             addTo.addEventListener("click", function() {
  773.                 document.querySelector("#watch9-slider").setAttribute("state", "add-to");
  774.                 document.querySelector(".sidebar-item.active").classList.remove("active");
  775.                 document.querySelector("#add-to.sidebar-item").classList.add("active");
  776.                 setTimeout(checkIfShowOwner, 10);
  777.             });
  778.             share.addEventListener("click", function() {
  779.                 document.querySelector("#watch9-slider").setAttribute("state", "share");
  780.                 document.querySelector(".sidebar-item.active").classList.remove("active");
  781.                 document.querySelector("#share.sidebar-item").classList.add("active");
  782.                 if (document.querySelector("#watch9-share #action-panel-share.hid") != null) {
  783.                     document.querySelector("#watch8-secondary-actions .action-panel-trigger-share").click();
  784.                 }
  785.                 setTimeout(checkIfShowOwner, 10);
  786.             });
  787.             moreActions.addEventListener("click", function() {
  788.                 document.querySelector("#watch9-slider").setAttribute("state", "more-actions");
  789.                 document.querySelector(".sidebar-item.active").classList.remove("active");
  790.                 document.querySelector("#more-actions.sidebar-item").classList.add("active");
  791.                 setTimeout(checkIfShowOwner, 10);
  792.             });
  793.             showScroller.addEventListener("click", function() {
  794.                 if (document.querySelector(".watch9[scroller-visible='false']") != null) {
  795.                     document.querySelector(".watch9").setAttribute("scroller-visible", "true");
  796.                 } else {
  797.                     document.querySelector(".watch9").setAttribute("scroller-visible", "false");
  798.                 }
  799.             });
  800.             showScroller2.addEventListener("click", function() {
  801.                 if (document.querySelector(".watch9[scroller-visible='false']") != null) {
  802.                     document.querySelector(".watch9").setAttribute("scroller-visible", "true");
  803.                 } else {
  804.                     document.querySelector(".watch9").setAttribute("scroller-visible", "false");
  805.                 }
  806.             });
  807.             setTimeout(checkIfShowOwner, 200);
  808.             window.addEventListener("resize", checkIfShowOwner);
  809.  
  810.             function checkIfShowOwner() {
  811.                 setTimeout(check, 200);
  812.  
  813.                 function check() {
  814.                     var playerHeight = document.querySelector("video").style.height;
  815.                     //console.log(playerHeight);
  816.                     if (playerHeight == "360px") {
  817.                         document.querySelector(".section-items.watch9").setAttribute("show-owner", "false");
  818.                     } else {
  819.                         document.querySelector(".section-items.watch9").setAttribute("show-owner", "true");
  820.                         if (document.querySelector("#creator.sidebar-item.active") != null) {
  821.                             vidInfoClicked();
  822.                         }
  823.                     }
  824.                 }
  825.             }
  826.             requestData();
  827.  
  828.             function requestData() {
  829.                 const location = window.location;
  830.                 var vidLink = location.href;
  831.                 var cutString1 = vidLink.split('v=');
  832.                 var vidLink2 = cutString1[1];
  833.                 if (vidLink2.includes('&')) {
  834.                     var cutString2 = vidLink2.split('&');
  835.                     var vidId = cutString2[0];
  836.                 } else {
  837.                     var vidId = vidLink2;
  838.                 }
  839.                 //console.log(vidId);
  840.                 setTimeout(doData, 1);
  841.  
  842.                 function doData() {
  843.                     fetch("https://www.youtube.com/youtubei/v1/next?key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8", {
  844.                         "headers": {
  845.                             "accept": "application/json, text/plain, /",
  846.                             "accept-language": "en-US,en;q=0.9",
  847.                             "Content-type": "application/json",
  848.                             "sec-ch-ua-mobile": "?0",
  849.                             "sec-fetch-dest": "empty",
  850.                             "sec-fetch-mode": "cors",
  851.                             "sec-fetch-site": "same-origin",
  852.                             "x-goog-authuser": "0",
  853.                             "x-origin": "https://www.youtube.com/"
  854.                         },
  855.                         "referrer": "https://www.youtube.com/",
  856.                         "referrerPolicy": "strict-origin-when-cross-origin",
  857.                         "body": JSON.stringify({
  858.                             "context": {
  859.                                 "client": {
  860.                                     "clientName": "WEB",
  861.                                     "clientVersion": "2.20230301.00.00",
  862.                                     "hl": "en",
  863.                                     "gl": "US"
  864.                                 }
  865.                             },
  866.                             "videoId": vidId
  867.                         }),
  868.                         "method": "POST",
  869.                         "mode": "cors",
  870.                         "credentials": "include"
  871.                     }).then(response => response.json()).then(data => {
  872.                         var dataFromAPI = data;
  873.                         //console.log(dataFromAPI);
  874.                         doChannelDataPrep();
  875.  
  876.                         function doChannelDataPrep() {
  877.                             if (dataFromAPI.contents.twoColumnWatchNextResults.results.results.contents[0].videoPrimaryInfoRenderer != null) {
  878.                                 var channelUrl = dataFromAPI.contents.twoColumnWatchNextResults.results.results.contents[1].videoSecondaryInfoRenderer.owner.videoOwnerRenderer.navigationEndpoint.browseEndpoint.browseId;
  879.                             } else if (dataFromAPI.contents.twoColumnWatchNextResults.results.results.contents[1].videoPrimaryInfoRenderer != null) {
  880.                                 var channelUrl = dataFromAPI.contents.twoColumnWatchNextResults.results.results.contents[2].videoSecondaryInfoRenderer.owner.videoOwnerRenderer.navigationEndpoint.browseEndpoint.browseId;
  881.                             }
  882.                             setTimeout(doChannelData, 1);
  883.  
  884.                             function doChannelData() {
  885.                                 fetch("https://www.youtube.com/youtubei/v1/browse?key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8", {
  886.                                     "headers": {
  887.                                         "accept": "application/json, text/plain, /",
  888.                                         "accept-language": "en-US,en;q=0.9",
  889.                                         "Content-type": "application/json",
  890.                                         "sec-ch-ua-mobile": "?0",
  891.                                         "sec-fetch-dest": "empty",
  892.                                         "sec-fetch-mode": "cors",
  893.                                         "sec-fetch-site": "same-origin",
  894.                                         "x-goog-authuser": "0",
  895.                                         "x-origin": "https://www.youtube.com/"
  896.                                     },
  897.                                     "referrer": "https://www.youtube.com/",
  898.                                     "referrerPolicy": "strict-origin-when-cross-origin",
  899.                                     "body": JSON.stringify({
  900.                                         "context": {
  901.                                             "client": {
  902.                                                 "clientName": "WEB",
  903.                                                 "clientVersion": "2.20230301.00.00",
  904.                                                 "hl": "en",
  905.                                                 "gl": "US"
  906.                                             }
  907.                                         },
  908.                                         "browseId": channelUrl,
  909.                                         "params": "EgZ2aWRlb3PyBgQKAjoA"
  910.                                     }),
  911.                                     "method": "POST",
  912.                                     "mode": "cors",
  913.                                     "credentials": "include"
  914.                                 }).then(response => response.json()).then(data => {
  915.                                     var dataFromAPI2 = data;
  916.                                     //console.log(dataFromAPI2);
  917.                                     if (dataFromAPI2.header != null) {
  918.                                         if (dataFromAPI2.header.c4TabbedHeaderRenderer.videosCountText != null) {
  919.                                             var videoCount = dataFromAPI2.header.c4TabbedHeaderRenderer.videosCountText.runs[0].text;
  920.                                             //console.log(videoCount);
  921.                                             if (dataFromAPI2.header.c4TabbedHeaderRenderer.videosCountText.runs[1] != null) {
  922.                                                 var videoCountString = dataFromAPI2.header.c4TabbedHeaderRenderer.videosCountText.runs[1].text;
  923.                                                 document.querySelector(".owner-videos-scroller button span").textContent = videoCount + videoCountString;
  924.                                                 document.querySelector("#watch9-owner .owner-videos-scroller button span").textContent = videoCount + videoCountString;
  925.                                             } else {
  926.                                                 document.querySelector(".owner-videos-scroller button span").textContent = videoCount;
  927.                                                 document.querySelector("#watch9-owner .owner-videos-scroller button span").textContent = videoCount;
  928.                                             }
  929.                                             if (document.querySelector(".owner-videos-scroller button[disabled]") != null) {
  930.                                                 document.querySelector(".owner-videos-scroller button").removeAttribute("disabled");
  931.                                                 document.querySelector("#watch9-owner .owner-videos-scroller button").removeAttribute("disabled");
  932.                                             }
  933.                                         } else {
  934.                                             document.querySelector(".owner-videos-scroller button span").textContent = "No videos";
  935.                                             document.querySelector(".owner-videos-scroller button").setAttribute("disabled", "");
  936.                                             document.querySelector("#watch9-owner .owner-videos-scroller button span").textContent = "No videos";
  937.                                             document.querySelector("#watch9-owner .owner-videos-scroller button").setAttribute("disabled", "");
  938.                                         }
  939.                                         var newChannelLink = dataFromAPI2.header.c4TabbedHeaderRenderer.channelId;
  940.                                         if (dataFromAPI2.contents.twoColumnBrowseResultsRenderer.tabs[1] != null) {
  941.                                             if (dataFromAPI2.contents.twoColumnBrowseResultsRenderer.tabs[1].tabRenderer.content != null) {
  942.                                                 var richGrid = dataFromAPI2.contents.twoColumnBrowseResultsRenderer.tabs[1].tabRenderer.content.richGridRenderer;
  943.                                                 var richItemNo = 0;
  944.                                                 richGridGet();
  945.  
  946.                                                 function richGridGet() {
  947.                                                     if (richGrid.contents[richItemNo].richItemRenderer != null) {
  948.                                                         var richItem = richGrid.contents[richItemNo].richItemRenderer.content.videoRenderer;
  949.                                                         var itemTitle = richItem.title.runs[0].text;
  950.                                                         var itemThumbnail = richItem.thumbnail.thumbnails[0].url;
  951.                                                         var itemLink = richItem.videoId;
  952.                                                         let container = document.querySelector('.scroller-inner');
  953.                                                         var newElem = document.createElement("a");
  954.                                                         newElem.classList.add("super-compact-video");
  955.                                                         newElem.classList.add("spf-link");
  956.                                                         newElem.innerHTML = `
  957. 														<div class="super-compact-video-inner flex">
  958. 															<div class="thumbnail">
  959. 																<img src=""></img>
  960. 															</div>
  961. 															<div class="meta">
  962. 																<div class="title">
  963. 																	<span></span>
  964. 																</div>
  965. 																<div class="view-count">
  966. 																	<span>???,??? views</span>
  967. 																</div>
  968. 															</div>
  969. 														</div>
  970. 														`;
  971.                                                         container.insertBefore(newElem, container.children[richItemNo]);
  972.                                                         let container2 = document.querySelector('#watch9-owner .scroller-inner');
  973.                                                         var newElem2 = document.createElement("a");
  974.                                                         newElem2.classList.add("super-compact-video");
  975.                                                         newElem2.classList.add("spf-link");
  976.                                                         newElem2.innerHTML = `
  977. 														<div class="super-compact-video-inner flex">
  978. 															<div class="thumbnail">
  979. 																<img src=""></img>
  980. 															</div>
  981. 															<div class="meta">
  982. 																<div class="title">
  983. 																	<span></span>
  984. 																</div>
  985. 																<div class="view-count">
  986. 																	<span>???,??? views</span>
  987. 																</div>
  988. 															</div>
  989. 														</div>
  990. 														`;
  991.                                                         container2.insertBefore(newElem2, container2.children[richItemNo]);
  992.                                                         var w9o = document.querySelector("#watch9-owner");
  993.                                                         var w9os = document.querySelector("#watch9-owner-slider");
  994.                                                         var theSCVid = w9o.querySelectorAll(".super-compact-video")[richItemNo];
  995.                                                         theSCVid.querySelector(".title span").textContent = itemTitle;
  996.                                                         theSCVid.querySelector("img").src = itemThumbnail;
  997.                                                         theSCVid.setAttribute("href", "/watch?v=" + itemLink);
  998.                                                         theSCVid = w9os.querySelectorAll(".super-compact-video")[richItemNo];
  999.                                                         theSCVid.querySelector(".title span").textContent = itemTitle;
  1000.                                                         theSCVid.querySelector("img").src = itemThumbnail;
  1001.                                                         theSCVid.setAttribute("href", "/watch?v=" + itemLink);
  1002.                                                         richItemNo++;
  1003.                                                         richGridGet();
  1004.                                                     } else {
  1005.                                                         console.log("All available rich items gotten.");
  1006.                                                     }
  1007.                                                 }
  1008.                                             } else {
  1009.                                                 document.querySelector(".owner-videos-scroller button span").textContent = "No videos";
  1010.                                                 document.querySelector(".owner-videos-scroller button").setAttribute("disabled", "");
  1011.                                                 document.querySelector("#watch9-owner .owner-videos-scroller button span").textContent = "No videos";
  1012.                                                 document.querySelector("#watch9-owner .owner-videos-scroller button").setAttribute("disabled", "");
  1013.                                             }
  1014.                                         } else {
  1015.                                             document.querySelector(".owner-videos-scroller button span").textContent = "No videos";
  1016.                                             document.querySelector(".owner-videos-scroller button").setAttribute("disabled", "");
  1017.                                             document.querySelector("#watch9-owner .owner-videos-scroller button span").textContent = "No videos";
  1018.                                             document.querySelector("#watch9-owner .owner-videos-scroller button").setAttribute("disabled", "");
  1019.                                         }
  1020.                                     } else {
  1021.                                         document.querySelector(".owner-videos-scroller button span").textContent = "No videos";
  1022.                                         document.querySelector(".owner-videos-scroller button").setAttribute("disabled", "");
  1023.                                         document.querySelector("#watch9-owner .owner-videos-scroller button span").textContent = "No videos";
  1024.                                         document.querySelector("#watch9-owner .owner-videos-scroller button").setAttribute("disabled", "");
  1025.                                     }
  1026.                                 });
  1027.                             }
  1028.                         }
  1029.                     });
  1030.                 }
  1031.             }
  1032.         }
  1033.     }
  1034. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址