├── .screenshot.png
├── README.md
├── content.js
└── styles.css
/.screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0kzh/minimal-youtube/729f11664edc0f99ecad02a3ff5118eb1b97fa76/.screenshot.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
Minimal YouTube
3 |
4 |
5 | Minimal YouTube is a boost for the Arc browser that replaces the YouTube UI with a minimal design containing no recommendations, shorts, or distractions.
6 |
7 |
8 | 
9 |
10 |
11 | # Installation
12 | * Open https://youtube.com/ in Arc
13 | * Click the + button to create a new Boost
14 | * Select "Custom"
15 | * Replace `styles.css` and `content.js` with the contents of the repo
16 | * Profit
--------------------------------------------------------------------------------
/content.js:
--------------------------------------------------------------------------------
1 | /* This runs after a web page loads */
2 | var oldHref = document.location.href;
3 |
4 | window.onload = function() {
5 | var bodyList = document.querySelector("body")
6 |
7 | var observer = new MutationObserver(function(mutations) {
8 |
9 | mutations.forEach(function() {
10 | if (oldHref !== document.location.href) {
11 | oldHref = document.location.href;
12 | replaceHomePage();
13 | }
14 | });
15 | });
16 |
17 | var config = {
18 | childList: true,
19 | subtree: true
20 | };
21 |
22 | observer.observe(bodyList, config);
23 | replaceHomePage();
24 | };
25 |
26 | const replaceHomePage = () => {
27 | document.querySelector("body").style.cssText = 'display:block !important';
28 | if (window.location.pathname === "/") {
29 | document.querySelector("body").innerHTML = `
30 |
43 | `;
44 |
45 | const input = document.getElementsByClassName("search-input")[0]
46 | const searchBtn = document.getElementsByClassName("search-btn")[0]
47 | input.addEventListener('keypress', function (e) {
48 | if (e.key === 'Enter') {
49 | const inputValue = input.value;
50 | window.location.href = `https://www.youtube.com/results?search_query=${inputValue}`
51 | }
52 | });
53 |
54 | searchBtn.addEventListener("click", function(e) {
55 | const inputValue = input.value;
56 | window.location.href = `https://www.youtube.com/results?search_query=${inputValue}`
57 | });
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | /* this will get overwritten on load */
2 | body {
3 | display: none;
4 | }
5 |
6 | html, body {
7 | height: 100vh;
8 | }
9 |
10 | .home-container {
11 | display: flex;
12 | flex-direction: column;
13 | gap: 24px;
14 | align-items: center;
15 | justify-content: center;
16 | height: 100%;
17 | }
18 |
19 | .search-input {
20 | padding: 8px;
21 | min-width: 250px;
22 | border-top-left-radius: 2px;
23 | border-bottom-left-radius: 2px;
24 | }
25 |
26 | .search-btn {
27 | border: none;
28 | height: 40px;
29 | cursor: pointer;
30 | border-top-right-radius: 2px;
31 | border-bottom-right-radius: 2px;
32 | padding: 0 16px;
33 | transition: background 100ms ease-in-out;
34 | }
35 |
36 | .search-icon-container {
37 | height: 24px;
38 | width: 24px;
39 | }
40 |
41 | @media (prefers-color-scheme: dark) {
42 | .logo {
43 | color: white;
44 | fill: white;
45 | }
46 |
47 | .search-input {
48 | border: 1px solid rgb(48, 48, 48);
49 | background: rgb(18, 18, 18);
50 | color: white;
51 | }
52 |
53 | .search-btn {
54 | background: rgba(255, 255, 255, 0.08);
55 | }
56 |
57 | .search-icon-container {
58 | color: white;
59 | fill: white;
60 | }
61 | }
62 |
63 | @media (prefers-color-scheme: light) {
64 | .search-input {
65 | border: 1px solid rgb(204, 204, 204);
66 | }
67 |
68 | .search-btn {
69 | background: rgb(248, 248, 248);
70 | border: 1px solid rgb(211, 211, 211);
71 | border-left: none;
72 | }
73 |
74 | .search-btn:hover {
75 | background: rgb(240, 240, 240);
76 | border: 1px solid rgb(198, 198, 198);
77 | border-left: none;
78 | }
79 | }
80 |
81 | .logo {
82 | width: 200px;
83 | }
84 |
85 | .search-input:focus {
86 | outline: none;
87 | border: 1px solid rgb(28, 98, 185);
88 | }
89 |
90 | .search-group {
91 | height: 40px;
92 | display: flex;
93 | }
94 |
95 | #columns {
96 | width: 100%;
97 | display: flex;
98 | align-items: center;
99 | justify-content: center;
100 | }
101 |
102 | #columns #secondary {
103 | display: none;
104 | }
105 |
106 | #columns #primary {
107 | max-width: fit-content;
108 | }
109 |
110 | #top-level-buttons-computed,
111 | #voice-search-button,
112 | ytd-mini-guide-renderer,
113 | #related,
114 | tp-yt-app-drawer,
115 | .ytd-masthead #buttons,
116 | #guide-button,
117 | [class="style-scope ytd-comments"] {
118 | display: none !important;
119 | }
120 |
121 | #page-manager {
122 | margin-left: 0 !important;
123 | }
124 |
125 | .ytp-chrome-bottom {
126 | width: calc(98%) !important;
127 | }
128 |
129 | ytd-app[mini-guide-visible] ytd-page-manager.ytd-app {
130 | margin-left: 0 !important;
131 | }
132 |
133 | ytd-watch-flexy:not([theatre]):not([fullscreen]) .html5-video-container,
134 | ytd-watch-flexy:not([theatre]):not([fullscreen]) video {
135 | width: 100% !important;
136 | height: 100% !important;
137 | left: 0 !important;
138 | }
139 |
--------------------------------------------------------------------------------