Skip to content
This repository has been archived by the owner on Sep 12, 2023. It is now read-only.

Commit

Permalink
Fixed the issue with empty spaces being left behind when removing Sho…
Browse files Browse the repository at this point in the history
…rts from the Subscriptions feed
  • Loading branch information
probablyraging committed Jun 8, 2023
1 parent b85beed commit 56a664e
Show file tree
Hide file tree
Showing 8 changed files with 26 additions and 35 deletions.
3 changes: 3 additions & 0 deletions public/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
],
"js": [
"assets/main.js"
],
"css": [
"assets/styles.css"
]
}
],
Expand Down
1 change: 1 addition & 0 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { darkTheme, lightTheme } from './constants/themes';
const MainPage = lazy(() => import('./components/MainPage'));
const publicBackground = lazy(() => import('./constants/background'));
const publickMain = lazy(() => import('./constants/main'));
const publickStyles = lazy(() => import('./constants/styles.css'));

const App = () => {
const [darkMode, setDarkMode] = useState(false);
Expand Down
10 changes: 4 additions & 6 deletions src/components/ModalDisplay.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,20 +38,18 @@ const ModalDisplay = () => {
>
<Modal.Header className='absolute flex flex-col items-start top-0'>
<Text className='font-semibold' size={16}>
What's New In 1.6.6
What's New In 1.6.7
</Text>
<Text className='text-[12px]'>
June 8, 2023
June 9, 2023
</Text>
</Modal.Header>
<Modal.Body className='mt-[50px]'>
<Text className='added mb-4'>
Lives & Premieres
No More Placeholder Images
</Text>
<Text className='text-[13px] mb-2'>
Added the option to hide Live and Premiere videos in the Home and Subscriptions feeds. This feature currently only works on the <a href='https://i.imgur.com/j6i2yB4.png' target='_blank'>new YouTube UI</a>.
<br></br><br></br>
Enabled/disable it in the Feed Pages tab
The empty spaces and placeholder images left behind when removing Shorts from the subscription feed is no longer an issue. Massive credit to Horsy Nox for reaching out and providing the fix!
</Text>
</Modal.Body>
<Modal.Footer>
Expand Down
2 changes: 0 additions & 2 deletions src/constants/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ chrome.runtime.onInstalled.addListener(async (details) => {
toggleTurboState: false,
toggleRegularState: true,
toggleNotificationState: true,
toggleEmptySpaceState: true,
}).catch(() => { console.log('[STORAGE] Could not set storage item') });
chrome.tabs.query({ url: ['https://www.youtube.com/*', 'https://m.youtube.com/*'] }, function (tabs) {
tabs.forEach(tab => {
Expand Down Expand Up @@ -51,7 +50,6 @@ chrome.runtime.onInstalled.addListener(async (details) => {
'toggleTurboState',
'toggleRegularState',
'toggleNotificationState',
'toggleEmptySpaceState',
];
const states = await chrome.storage.sync.get(keys);
for (const key of keys) {
Expand Down
23 changes: 4 additions & 19 deletions src/constants/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ function checkStates() {
'toggleTurboState',
'toggleRegularState',
'toggleNotificationState',
'toggleEmptySpaceState',
]);
}

Expand All @@ -36,9 +35,9 @@ async function hideShorts() {
if (states.toggleHomeFeedState) hideShortsShelf(isMobile), hideShortsVideosHomeFeed(isMobile);
if (states.toggleHomeFeedStateLives) hideLiveVideosHomeFeed(isMobile);
if (states.toggleHomeFeedStatePremieres) hidePremiereVideosHomeFeed(isMobile);
if (states.toggleSubscriptionFeedState) hideShortsVideosSubscriptionFeed(isMobile, states.toggleEmptySpaceState);
if (states.toggleSubscriptionFeedStateLives) hideLiveVideosSubscriptionFeed(isMobile, states.toggleEmptySpaceState);
if (states.toggleSubscriptionFeedStatePremieres) hidePremiereVideosSubscriptionFeed(isMobile, states.toggleEmptySpaceState);
if (states.toggleSubscriptionFeedState) hideShortsVideosSubscriptionFeed(isMobile);
if (states.toggleSubscriptionFeedStateLives) hideLiveVideosSubscriptionFeed(isMobile);
if (states.toggleSubscriptionFeedStatePremieres) hidePremiereVideosSubscriptionFeed(isMobile);
if (states.toggleTrendingFeedState) hideShortsVideosTrendingFeed(isMobile);
if (states.toggleSearchState) hideShortsVideosSearchResults(isMobile);
if (states.toggleRecommendedState) hideShortsVideosRecommendedList(isMobile);
Expand Down Expand Up @@ -177,7 +176,7 @@ function hidePremiereVideosHomeFeed(isMobile) {
}

// Hide shorts video elements in the subscription feed
function hideShortsVideosSubscriptionFeed(isMobile, fillEmptySpace) {
function hideShortsVideosSubscriptionFeed(isMobile) {
if (!isMobile) {
if (location.href.includes('youtube.com/feed/subscriptions')) {
const elements = document.querySelectorAll('[href^="/shorts/"]');
Expand All @@ -188,15 +187,11 @@ function hideShortsVideosSubscriptionFeed(isMobile, fillEmptySpace) {

// Start New UI
if (element.parentNode.parentNode.parentNode.parentNode.parentNode.style.display !== 'none') subFeedShortHiddenCount++;
const newDiv = document.createElement('div');
newDiv.style.borderRadius = '12px'
if (fillEmptySpace) newDiv.innerHTML = `<div style="display: flex; flex-direction: column; margin-left: 10px; margin-right: 10px;"><img src="https://i.imgur.com/yBUVeQ3.png" style="width: 100%; height: 100%;" /><a href="https://creatordiscord.xyz/whyamiseeingthis" target="_blank" style="color: #4381c1; font-size: 12px; margin-top: 10px; text-decoration: none;">Why am I seeing this?</a></div>`;

const grandParent = parent.parentNode.parentNode.parentNode.parentNode;
if (grandParent.classList.contains('ytd-rich-grid-row') || grandParent.classList.contains('ytd-rich-item-renderer')) {
if (grandParent.style.display !== "none") {
grandParent.style.display = "none";
grandParent.parentNode.appendChild(newDiv);
}
}
if (grandParent.classList.contains('ytd-rich-grid-row') || grandParent.classList.contains('ytd-rich-item-renderer')) return;
Expand Down Expand Up @@ -238,14 +233,9 @@ function hideLiveVideosSubscriptionFeed(isMobile) {

elements.forEach(el => {
if (el.innerText.replace(/\s/g, '').replace(/\n/g, '') === 'LIVE') {
const newDiv = document.createElement('div');
newDiv.style.borderRadius = '12px'
if (fillEmptySpace) newDiv.innerHTML = `<div style="display: flex; flex-direction: column; margin-left: 10px; margin-right: 10px;"><img src="https://i.imgur.com/yBUVeQ3.png" style="width: 100%; height: 100%;" /><a href="https://creatordiscord.xyz/whyamiseeingthis" target="_blank" style="color: #4381c1; font-size: 12px; margin-top: 10px; text-decoration: none;">Why am I seeing this?</a></div>`;

if (grandParent.classList.contains('ytd-rich-grid-row') || grandParent.classList.contains('ytd-rich-item-renderer')) {
const grandParent = el.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
grandParent.style.display = 'none';
grandParent.parentNode.appendChild(newDiv);
}
}
});
Expand All @@ -261,14 +251,9 @@ function hidePremiereVideosSubscriptionFeed(isMobile) {

elements.forEach(el => {
if (el.innerText.replace(/\s/g, '').replace(/\n/g, '') === 'PREMIERE') {
const newDiv = document.createElement('div');
newDiv.style.borderRadius = '12px'
if (fillEmptySpace) newDiv.innerHTML = `<div style="display: flex; flex-direction: column; margin-left: 10px; margin-right: 10px;"><img src="https://i.imgur.com/yBUVeQ3.png" style="width: 100%; height: 100%;" /><a href="https://creatordiscord.xyz/whyamiseeingthis" target="_blank" style="color: #4381c1; font-size: 12px; margin-top: 10px; text-decoration: none;">Why am I seeing this?</a></div>`;

if (grandParent.classList.contains('ytd-rich-grid-row') || grandParent.classList.contains('ytd-rich-item-renderer')) {
const grandParent = el.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
grandParent.style.display = 'none';
grandParent.parentNode.appendChild(newDiv);
}
}
});
Expand Down
1 change: 0 additions & 1 deletion src/constants/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export const getSwitchStates = async () => {
'toggleTurboState',
'toggleRegularState',
'toggleNotificationState',
'toggleEmptySpaceState',
]);
return switchStates;
}
Expand Down
14 changes: 14 additions & 0 deletions src/constants/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
#contents {
justify-content: center !important;
}

#contents>ytd-rich-grid-row,
#contents>ytd-rich-grid-row>#contents {
display: contents;
}

#contents>ytd-rich-grid-row>#contents>ytd-rich-item-renderer {
margin: 0;
margin-bottom: 18px;
margin-top: 18px;
}
7 changes: 0 additions & 7 deletions src/views/MiscPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,6 @@ const MiscPage = ({ darkMode }) => {
switchName={'toggleRegularState'}
state={switchState.toggleRegularState} />

<SwitchContainer
title={'Fill Empty Space'}
description={'Fill empty space left behind when removing shorts on the subscriptions page'}
darkMode={darkMode}
switchName={'toggleEmptySpaceState'}
state={switchState.toggleEmptySpaceState} />

<SwitchContainer
title={'TURBO'}
description={'Boosts speed and efficiency at the cost of system resources'}
Expand Down

0 comments on commit 56a664e

Please sign in to comment.