Repository: 0kzh/minimal-youtube
Branch: master
Commit: 729f11664edc
Files: 3
Total size: 10.4 KB
Directory structure:
gitextract_gd3x7q9h/
├── README.md
├── content.js
└── styles.css
================================================
FILE CONTENTS
================================================
================================================
FILE: README.md
================================================
Minimal YouTube
Minimal YouTube is a boost for the Arc browser that replaces the YouTube UI with a minimal design containing no recommendations, shorts, or distractions.
# Installation
* Open https://youtube.com/ in Arc
* Click the + button to create a new Boost
* Select "Custom"
* Replace `styles.css` and `content.js` with the contents of the repo
* Profit
================================================
FILE: content.js
================================================
/* This runs after a web page loads */
var oldHref = document.location.href;
window.onload = function() {
var bodyList = document.querySelector("body")
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function() {
if (oldHref !== document.location.href) {
oldHref = document.location.href;
replaceHomePage();
}
});
});
var config = {
childList: true,
subtree: true
};
observer.observe(bodyList, config);
replaceHomePage();
};
const replaceHomePage = () => {
document.querySelector("body").style.cssText = 'display:block !important';
if (window.location.pathname === "/") {
document.querySelector("body").innerHTML = `
`;
const input = document.getElementsByClassName("search-input")[0]
const searchBtn = document.getElementsByClassName("search-btn")[0]
input.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
const inputValue = input.value;
window.location.href = `https://www.youtube.com/results?search_query=${inputValue}`
}
});
searchBtn.addEventListener("click", function(e) {
const inputValue = input.value;
window.location.href = `https://www.youtube.com/results?search_query=${inputValue}`
});
}
}
================================================
FILE: styles.css
================================================
/* this will get overwritten on load */
body {
display: none;
}
html, body {
height: 100vh;
}
.home-container {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
justify-content: center;
height: 100%;
}
.search-input {
padding: 8px;
min-width: 250px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.search-btn {
border: none;
height: 40px;
cursor: pointer;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
padding: 0 16px;
transition: background 100ms ease-in-out;
}
.search-icon-container {
height: 24px;
width: 24px;
}
@media (prefers-color-scheme: dark) {
.logo {
color: white;
fill: white;
}
.search-input {
border: 1px solid rgb(48, 48, 48);
background: rgb(18, 18, 18);
color: white;
}
.search-btn {
background: rgba(255, 255, 255, 0.08);
}
.search-icon-container {
color: white;
fill: white;
}
}
@media (prefers-color-scheme: light) {
.search-input {
border: 1px solid rgb(204, 204, 204);
}
.search-btn {
background: rgb(248, 248, 248);
border: 1px solid rgb(211, 211, 211);
border-left: none;
}
.search-btn:hover {
background: rgb(240, 240, 240);
border: 1px solid rgb(198, 198, 198);
border-left: none;
}
}
.logo {
width: 200px;
}
.search-input:focus {
outline: none;
border: 1px solid rgb(28, 98, 185);
}
.search-group {
height: 40px;
display: flex;
}
#columns {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#columns #secondary {
display: none;
}
#columns #primary {
max-width: fit-content;
}
#top-level-buttons-computed,
#voice-search-button,
ytd-mini-guide-renderer,
#related,
tp-yt-app-drawer,
.ytd-masthead #buttons,
#guide-button,
[class="style-scope ytd-comments"] {
display: none !important;
}
#page-manager {
margin-left: 0 !important;
}
.ytp-chrome-bottom {
width: calc(98%) !important;
}
ytd-app[mini-guide-visible] ytd-page-manager.ytd-app {
margin-left: 0 !important;
}
ytd-watch-flexy:not([theatre]):not([fullscreen]) .html5-video-container,
ytd-watch-flexy:not([theatre]):not([fullscreen]) video {
width: 100% !important;
height: 100% !important;
left: 0 !important;
}