Fixed the issue with empty spaces being left behind when removing Sho…

…rts from the Subscriptions feed
probablyraging · Jun 8, 2023 · 56a664e · 56a664e
1 parent b85beed
commit 56a664e
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 35 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -22,6 +22,9 @@
             ],
             "js": [
                 "assets/main.js"
+            ],
+            "css": [
+                "assets/styles.css"
             ]
         }
     ],

diff --git a/src/App.jsx b/src/App.jsx
@@ -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);

diff --git a/src/components/ModalDisplay.jsx b/src/components/ModalDisplay.jsx
@@ -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>

diff --git a/src/constants/background.js b/src/constants/background.js
@@ -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 => {
@@ -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) {

diff --git a/src/constants/main.js b/src/constants/main.js
@@ -19,7 +19,6 @@ function checkStates() {
         'toggleTurboState',
         'toggleRegularState',
         'toggleNotificationState',
-        'toggleEmptySpaceState',
     ]);
 }
 
@@ -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);
@@ -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/"]');
@@ -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;
@@ -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);
                     }
                 }
             });
@@ -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);
                     }
                 }
             });

diff --git a/src/constants/popup.js b/src/constants/popup.js
@@ -17,7 +17,6 @@ export const getSwitchStates = async () => {
         'toggleTurboState',
         'toggleRegularState',
         'toggleNotificationState',
-        'toggleEmptySpaceState',
     ]);
     return switchStates;
 }

diff --git a/src/constants/styles.css b/src/constants/styles.css
@@ -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;
+}
diff --git a/src/views/MiscPage.jsx b/src/views/MiscPage.jsx
@@ -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'}