Makes Rehike use an alternate universe watch9 layout
目前為
// ==UserScript==
// @name Alternative video page layout for Rehike
// @namespace http://tampermonkey.net/
// @version 1.0.1
// @description Makes Rehike use an alternate universe watch9 layout
// @author lightbeam24
// @match *.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
var canGo = false;
function timeout(durationMs)
{
return new Promise( (resolve, reject) => {
setTimeout(function() {
resolve();
}, durationMs);
} );
}
async function waitForElement(elm)
{
while (null == document.querySelector(elm))
{
await new Promise(r => requestAnimationFrame(r));
}
await timeout(50).then(function() {
canGo = true;
return document.querySelector(elm);
});
}
everyLoadPrep();
document.addEventListener("spfdone", everyLoadPrep);
function everyLoadPrep() {
if (document.querySelector("#page.watch") != null) {
var elm = "#watch-header";
waitForElement(elm).then(function(elm) {
if (canGo != false) {
if (document.querySelector('#alt-watch9-container') == null) {
everyLoad();
}
}
});
}
}
function everyLoad() {
let container = document.querySelector('#watch-header');
var altWatch9 = document.createElement("div");
altWatch9.id = "alt-watch9-container";
altWatch9.innerHTML=`
<style>
@media screen and (min-width: 1294px) and (min-height: 630px) {
.watch #watch9-slider {
width: calc(1024px - 614px);
}
}
@media screen and (min-width: 1720px) and (min-height: 980px) {
.watch #watch9-slider {
width: calc(1280px);
}
}
.watch9-expand {
width: 100%;
margin-top: 10px;
border-top: 1px solid #ccc;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
.expand-inner {
border: 1px solid transparent;
background: #fff;
width: fit-content;
margin: 0 auto;
margin-top: -10px;
padding: 3px 12px;
border-radius: 2px;
}
.expand-inner:hover {
border: 1px solid #c6c6c6;
border-left-color: rgb(198, 198, 198);
background: #f0f0f0;
box-shadow: 0 1px 0 rgba(0,0,0,0.10);
}
.expand-inner:active {
border: 1px solid #c6c6c6;
border-left-color: rgb(198, 198, 198);
background: #e9e9e9;
box-shadow: inset 0 1px 0 #ddd;
}
.expand-button {
width: 100%;
border-top: 1px solid var(--section-border);
text-transform: uppercase;
font-size: 11px;
color: #767676;
font-weight: 600;
letter-spacing: -0.5px;
cursor: pointer;
margin-bottom: -15px;
margin-top: 15px;
}
.expand-button:hover {
color: #333;
}
.expand-button span {
margin: 5px 0;
display: block;
}
#watch9-title {
font-size: 20px;
margin-bottom: 15px;
}
#watch9-sidebar {
max-width: 143px;
min-width: 143px;
}
.sidebar-item {
font-size: 12px;
padding: 7px 8px;
color: #333;
width: 83%;
border-radius: 2px;
cursor: pointer;
border: 1px solid transparent;
margin: 4px 0;
height: 13px;
}
.sidebar-item:hover {
background: #fafafa;
border: 1px solid #ccc;
}
.sidebar-item.active {
background: linear-gradient(to top,#b6d7f591,#e3f2ffa3);
border: 1px solid #90ccf8;
background: linear-gradient(to top,#f0f0f0 0,#f8f8f8 100%);
border: 1px solid #c6c6c6;
font-weight: 600;
background: #f8f8f8;
background: linear-gradient(to top,#f0f0f0 0,#f8f8f8 100%);
}
.sidebar-item:hover::before {
margin-top: 2px;
border-color: transparent #ccc;
content: '';
border-width: 8px 0 8px 8px;
border-style: solid;
position: absolute;
margin-right: -132px;
margin-left: 126px;
margin-top: 0px;
}
.sidebar-item:hover::after {
content: '';
border-width: 7px 0px 7px 7px;
border-style: solid;
border-color: transparent #fafafa;
position: absolute;
margin-right: -137.5px;
margin-left: 126px;
margin-top: 1px;
}
.sidebar-item.active::before {
margin-top: 2px;
border-color: transparent #90ccf8;
border-color: transparent #c6c6c6;
}
.sidebar-item.active::before {
content: '';
border-width: 8px 0 8px 8px;
border-style: solid;
position: absolute;
margin-right: -132px;
margin-left: 126px;
margin-top: 0px;
}
.sidebar-item.active::after {
margin-top: 2px;
}
.sidebar-item.active::after {
content: '';
border-width: 7px 0px 7px 7px;
border-style: solid;
border-color: transparent #e1effc;
border-color: transparent #f4f4f4;
border-color: transparent #f8f8f8;
border-color: transparent #f4f4f4;
position: absolute;
margin-right: -137.5px;
margin-left: 126px;
margin-top: 1px;
}
.sidebar-item-inner {
display: inline;
position: absolute;
}
#watch9-slider {
width: calc(854px - 440px);
border-left: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
margin-right: 15px;
padding: 0 15px;
overflow: clip;
}
[show-owner="false"] #watch9-slider {
width: calc(854px - 420px);
}
.slider-container {
overflow: clip;
}
.slider-container-inner {
display: flex;
transition-duration: 0.3s;
transform: translateX(0);
}
.slider {
min-width: 100%;
margin-right: 0px;
padding-right: 0px;
}
.slider-inner {
min-width: 100%;
margin-right: 0px;
padding-right: 0px;
}
.toggle-button {
color: rgb(96,96,96);
font-size: 11px;
font-weight: 600;
padding: 6px 4px;
padding: 3px 4px;
cursor: pointer;
}
.toggle-button-inner {
align-items: center;
}
.toggle-button-icon {
opacity: 0.6;
display: block;
width: 21px;
height: 21px;
margin-right: 4px;
}
.watch9:not([scroller-visible="true"]) #watch9-slider:not([state="description"]) #watch9-description {
max-height: 156px;
}
.watch9:not([scroller-visible="false"]) #watch9-slider:not([state="description"]) #watch9-description {
max-height: 336px;
}
#watch9-description,
#watch9-description-snippet {
font-size: 13px;
line-height: 14px;
color: #222;
}
#watch9-description-snippet {
margin-top: 70px;
margin-top: 44px;
margin-top: 15px;
}
#watch9-description-snippet .desc-snippet {
max-height: 58px;
overflow: hidden;
}
.watch9-category {
font-size: 11px;
color: #333;
margin-top: 14px;
}
.watch9-category .cat-inner {
font-weight: 600;
margin-right: 24px;
}
.watch9-header-text {
font-size: 13px;
line-height: 14px;
color: #333;
font-weight: 600;
}
.author-link {
color: #333;
}
.slider:hover .author-link {
color: #167ac6;
cursor: pointer;
}
.watch9-upload-date .author-link:hover {
text-decoration: underline;
}
.owner-pfp,
.owner-pfp img {
width: 48px;
height: 48px;
background-size: 48px 48px !important;
margin-right: 6px;
cursor: pointer;
}
#watch9-owner {
width: 250px;
}
#watch9-sentiment-actions {
/*position: absolute;*/
right: 0;
left: 0;
margin: 5px 0;
flex-direction: row-reverse;
border-bottom: 1px solid #e8e8e8;
}
#watch9-views-info {
min-width: 160px;
margin-left: auto;
}
.watch-view-count {
line-height: 24px;
max-height: 24px;
text-align: right;
font-size: 19px;
color: #666;
white-space: nowrap;
margin-bottom: 2px;
width: fit-content;
margin-left: auto;
}
.video-extras-sparkbars {
height: 2px;
overflow: hidden;
min-width: 160px;
width: fit-content;
}
.video-extras-sparkbar-likes {
float: left;
height: 2px;
background: #167ac6;
}
.video-extras-sparkbar-dislikes {
float: left;
height: 2px;
background: #ccc;
}
.owner-videos-scroller {
margin-top: 6px;
}
[scroller-visible="false"] .scroller-inner {
display: none;
}
.scroller-inner {
margin-top: 6px;
overflow: scroll;
border: 1px solid #ccc;
padding: 5px;
height: 250px;
}
.super-compact-video {
cursor: pointer;
margin-bottom: 6px;
}
.super-compact-video .thumbnail {
height: 45px;
width: 80px;
}
.super-compact-video .thumbnail img {
height: 45px;
width: 80px;
}
.super-compact-video .meta {
margin-left: 4px;
color: #333;
font-size: 10px;
color: #767676;
}
.super-compact-video .view-count {
display: none;
}
.super-compact-video .title {
color: #126acc;
font-weight: 600;
font-size: 11px;
}
.super-compact-video .title:hover {
text-decoration: underline;
}
[show-owner="false"] #watch9-owner {
display: none;
}
[show-owner="true"] #creator.sidebar-item {
display: none;
}
[show-owner="true"] #watch9-owner-slider {
display: none;
}
[state="video-info"] .slider-container-inner {
transform: translateX(0%);
}
[state="description"] .slider-container-inner {
transform: translateX(-100%);
}
[state="add-to"] .slider-container-inner {
transform: translateX(-200%);
}
[state="share"] .slider-container-inner {
transform: translateX(-300%);
}
[state="more-actions"] .slider-container-inner {
transform: translateX(-400%);
}
[show-owner="false"] [state="creator"] .slider-container-inner {
transform: translateX(0%);
}
[show-owner="false"] [state="video-info"] .slider-container-inner {
transform: translateX(-100%);
}
[show-owner="false"] [state="description"] .slider-container-inner {
transform: translateX(-200%);
}
[show-owner="false"] [state="add-to"] .slider-container-inner {
transform: translateX(-300%);
}
[show-owner="false"] [state="share"] .slider-container-inner {
transform: translateX(-400%);
}
[show-owner="false"] [state="more-actions"] .slider-container-inner {
transform: translateX(-500%);
}
.flex {
display: flex;
}
.none {
display: none;
}
#watch7-headline, .owner-pfp, .owner-name-and-sub, #watch8-action-buttons, #action-panel-details, #watch-action-panels {
display: none;
}
#alt-watch9-container {
padding-bottom: 12px;
}
#watch-header .yt-user-info a {
white-space: nowrap;
max-width: 159px;
overflow: clip;
text-overflow: ellipsis;
}
#action-panel-share {
margin-left: 2px;
max-width: 330px;
position: absolute;
}
</style>
<div class="section">
<div class="section-inner">
<div id="watch9-title">
<span>Me at the zoo</span>
</div>
<div class="section-items watch9" scroller-visible="false" show-owner="true">
<div class="section-items-inner flex">
<div id="watch9-sidebar">
<div class="watch9-sidebar-inner">
<div class="sidebar-item" id="creator">
<div class="sidebar-item-inner">
<span>Creator</span>
</div>
</div>
<div class="sidebar-item active" id="video-info">
<div class="sidebar-item-inner">
<span>Video info</span>
</div>
</div>
<div class="sidebar-item" id="description">
<div class="sidebar-item-inner">
<span>Description</span>
</div>
</div>
<div class="sidebar-item" id="add-to">
<div class="sidebar-item-inner">
<span>Add to playlist</span>
</div>
</div>
<div class="sidebar-item" id="share">
<div class="sidebar-item-inner">
<span>Share this video</span>
</div>
</div>
<div class="sidebar-item" id="more-actions">
<div class="sidebar-item-inner">
<span>More actions</span>
</div>
</div>
</div>
</div>
<div id="watch9-slider" state="video-info">
<div class="slider-container">
<div class="slider-container-inner">
<div id="watch9-owner-slider" class="slider">
<div class="slider-inner">
</div>
</div>
<div id="watch9-stats" class="slider">
<div class="slider-inner">
<div id="watch9-sentiment-actions" class="flex">
<div id="watch9-views-info">
<div class="watch-view-count">
???,??? views
</div>
<div class="video-extras-sparkbars yt-uix-tooltip">
<div class="video-extras-sparkbar-likes" style="width: 98.0012039305%">
</div>
<div class="video-extras-sparkbar-dislikes" style="width: 1.99879606949%">
</div>
</div>
</div>
<div id="ltod">
</div>
</div>
<div id="watch9-description-snippet">
<div class="desc-snippet">
<div class="watch9-upload-date watch9-header-text">
<span id="first-part">
<span>Uploaded by </span>
<a class="author-link spf-link">????</a>
<span>on </span>
</span>
<span id="second-part">
<span class="upload-date">??? ??, ????</span>
</span>
<span id="third-part">
<span>by </span>
<a class="author-link spf-link">????</a>
</span>
</div>
<div class="description-inner">
</div>
</div>
</div>
<div class="watch9-expand">
<div class="expand-inner">
<span>Show more</span>
</div>
</div>
<div class="watch9-category">
</div>
</div>
</div>
<div id="watch9-description" class="slider">
<div class="slider-inner">
<div class="watch9-header-text">
<span>Description</span>
</div>
<div class="description-inner">
</div>
<div class="watch9-expand">
<div class="expand-inner">
<span>Show less</span>
</div>
</div>
</div>
</div>
<div id="watch9-addto" class="slider">
<div class="slider-inner">
<div class="watch9-header-text">
<span>Add to playlist</span>
</div>
</div>
</div>
<div id="watch9-share" class="slider">
<div class="slider-inner">
<!--div class="watch9-header-text">
<span>Share this video</span>
</div-->
</div>
</div>
<div id="watch9-more-actions" class="slider">
<div class="slider-inner">
<div class="watch9-header-text">
<span>This feature is unavailable.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="watch9-owner">
<div class="owner-inner">
<div class="owner-videos-scroller">
<a class="yt-uix-button yt-uix-button-size-default yt-uix-button-default yt-uix-tooltip spf-link" data-tooltip-text="See user's videos">
<span>See user videos</span>
<!--span class="yt-uix-button-arrow yt-sprite"></span-->
</a>
<div class="scroller-inner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`
;
container.insertBefore(altWatch9, container.children[0]);
var elm = ".watch-time-text";
waitForElement(elm).then(function(elm) {
if (canGo != false) {
applyMetadata();
}
});
function applyMetadata() {
if (document.querySelector("#eow-title") != null) {
var videoTitle = document.querySelector("#eow-title").textContent;
document.querySelector("#watch9-title span").textContent = videoTitle;
}
if (document.querySelector(".watch-time-text") != null) {
var uploadDateRaw = document.querySelector(".watch-time-text").textContent;
let notNeedNewString = uploadDateRaw.includes("Published");
if (notNeedNewString == true) {
var cutString = uploadDateRaw.split('on ');
var uploadDate = cutString[1];
document.querySelector("#first-part").style.display = "inline";
document.querySelector("#third-part").style.display = "none";
} else {
var uploadDate = uploadDateRaw;
document.querySelector("#first-part").style.display = "none";
document.querySelector("#third-part").style.display = "inline";
}
document.querySelector(".watch9-upload-date .upload-date").textContent = uploadDate;
}
if (document.querySelector("#eow-description") != null) {
var descHTML = document.querySelector("#eow-description").innerHTML;
document.querySelector(".desc-snippet .description-inner").innerHTML = descHTML;
document.querySelector("#watch9-description .description-inner").innerHTML = descHTML;
}
if (document.querySelector(".yt-user-info") != null) {
var authorElem = document.querySelector(".yt-user-info a");
var authorName = authorElem.textContent;
var authorLink = document.querySelector(".yt-user-photo").getAttribute("href");
var authorPfp = document.querySelector(".yt-user-photo img").getAttribute("data-thumb");
document.querySelector(".author-link").textContent = authorName;
document.querySelector(".author-link").setAttribute("href",authorLink);
document.querySelector("#third-part .author-link").textContent = authorName;
document.querySelector("#third-part .author-link").setAttribute("href",authorLink);
document.querySelector(".owner-videos-scroller a").setAttribute("href",authorLink + "/videos");
document.querySelector(".owner-videos-scroller a").setAttribute("data-tooltip-text","View " + authorName + "'s videos");
authorElem.classList.add("yt-uix-tooltip");
authorElem.setAttribute("data-tooltip-text","View " + authorName + "'s channel");
}
if (document.querySelector("#watch8-action-buttons") != null) {
var viewCount = document.querySelector("#watch8-action-buttons .watch-view-count").textContent;
document.querySelector("#watch9-views-info .watch-view-count").textContent = viewCount;
var videoLikes = document.querySelector("#watch8-action-buttons .video-extras-sparkbar-likes").getAttribute("style");
var videoDislikes = document.querySelector("#watch8-action-buttons .video-extras-sparkbar-dislikes").getAttribute("style");
document.querySelector("#watch9-stats .video-extras-sparkbar-likes").setAttribute("style", videoLikes);
document.querySelector("#watch9-stats .video-extras-sparkbar-dislikes").setAttribute("style", videoDislikes);
var ltodBar = document.querySelector("#watch9-stats .video-extras-sparkbars");
var likesPercent = ltodBar.querySelector("#watch9-stats .video-extras-sparkbar-likes").style.width;
ltodBar.setAttribute("data-tooltip-text",likesPercent + " of viewers like this video");
ltodBar.style.display = "block";
ltodBar.style.padding = "5px 0";
ltodBar.style.marginBottom = "-5px";
document.querySelector(".watch-view-count").style.marginBottom = "-3px";
}
var theAddToBtn = document.querySelector("[data-menu-content-id='yt-uix-videoactionmenu-menu']");
var newHome = document.querySelector('#watch9-addto');
newHome.appendChild(theAddToBtn);
var theOwner = document.querySelector("#watch7-user-header");
var newHome2 = document.querySelector('#watch9-owner .owner-inner');
newHome2.insertBefore(theOwner, newHome2.children[0]);
var theExtras = document.querySelector("#watch-description-extras");
var newHome3 = document.querySelector('.watch9-category');
newHome3.insertBefore(theExtras, newHome3.children[0]);
var theLtod = document.querySelector(".like-button-renderer");
var newHome4 = document.querySelector('#ltod');
newHome4.insertBefore(theLtod, newHome4.children[0]);
var theSharePanel = document.querySelector("#action-panel-share");
var newHome5 = document.querySelector('#watch9-share .slider-inner');
newHome5.insertBefore(theSharePanel, newHome5.children[1]);
if (document.querySelector("#watch9-owner .owner-inner") != null) {
var ownerHTML = document.querySelector("#watch9-owner .owner-inner").innerHTML;
document.querySelector("#watch9-owner-slider .slider-inner").innerHTML = ownerHTML;
}
var creator = document.querySelector("#creator.sidebar-item");
var videoInfo = document.querySelector("#video-info.sidebar-item");
var description = document.querySelector("#description.sidebar-item");
var addTo = document.querySelector("#add-to.sidebar-item");
var share = document.querySelector("#share.sidebar-item");
var moreActions = document.querySelector("#more-actions.sidebar-item");
var showMore = document.querySelector("#watch9-stats .watch9-expand");
var showLess = document.querySelector("#watch9-description .watch9-expand");
var addToBtn = document.querySelector(".addto-button");
creator.addEventListener("click", function() {
creatorClicked();
});
videoInfo.addEventListener("click", function() {
vidInfoClicked();
});
description.addEventListener("click", function() {
descClicked();
});
showMore.addEventListener("click", function() {
descClicked();
});
showLess.addEventListener("click", function() {
vidInfoClicked();
});
function creatorClicked() {
document.querySelector("#watch9-slider").setAttribute("state","creator");
document.querySelector(".sidebar-item.active").classList.remove("active");
document.querySelector("#creator.sidebar-item").classList.add("active");
setTimeout(checkIfShowOwner, 10);
}
function vidInfoClicked() {
document.querySelector("#watch9-slider").setAttribute("state","video-info");
document.querySelector(".sidebar-item.active").classList.remove("active");
document.querySelector("#video-info.sidebar-item").classList.add("active");
setTimeout(checkIfShowOwner, 10);
}
function descClicked() {
document.querySelector("#watch9-slider").setAttribute("state","description");
document.querySelector(".sidebar-item.active").classList.remove("active");
document.querySelector("#description.sidebar-item").classList.add("active");
setTimeout(checkIfShowOwner, 10);
}
addTo.addEventListener("click", function() {
document.querySelector("#watch9-slider").setAttribute("state","add-to");
document.querySelector(".sidebar-item.active").classList.remove("active");
document.querySelector("#add-to.sidebar-item").classList.add("active");
setTimeout(checkIfShowOwner, 10);
});
share.addEventListener("click", function() {
document.querySelector("#watch9-slider").setAttribute("state","share");
document.querySelector(".sidebar-item.active").classList.remove("active");
document.querySelector("#share.sidebar-item").classList.add("active");
if (document.querySelector("#watch9-share #action-panel-share.hid") != null) {
document.querySelector("#watch8-secondary-actions .action-panel-trigger-share").click();
}
setTimeout(checkIfShowOwner, 10);
});
moreActions.addEventListener("click", function() {
document.querySelector("#watch9-slider").setAttribute("state","more-actions");
document.querySelector(".sidebar-item.active").classList.remove("active");
document.querySelector("#more-actions.sidebar-item").classList.add("active");
setTimeout(checkIfShowOwner, 10);
});
setTimeout(checkIfShowOwner, 200);
window.addEventListener("resize",checkIfShowOwner);
function checkIfShowOwner() {
setTimeout(check, 200);
function check() {
var playerHeight = document.querySelector("video").style.height;
console.log(playerHeight);
if (playerHeight == "360px") {
document.querySelector(".section-items.watch9").setAttribute("show-owner","false");
} else {
document.querySelector(".section-items.watch9").setAttribute("show-owner","true");
if (document.querySelector("#creator.sidebar-item.active") != null) {
vidInfoClicked();
}
}
}
}
}
}
})();