Added the option to hide lives and premieres in feed pages

src/components/Badge.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Badge = ({ darkMode, content }) => {
+ return (
+ <div className={`flex justify-center items-center px-[4px] py-0 ${darkMode ? 'bg-[#5086c3]' : 'bg-[#3694ff]'} rounded-full h-[16px] select-none`}>
+ <span className='text-white text-[10px] font-semibold leading-[0]'>{content}</span>
+ </div>
+ )
+}
+
+export default Badge;

src/components/InfoTooltip.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text, Tooltip } from '@nextui-org/react';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+
+const InfoTooltip = ({ darkMode, content }) => {
+ return (
+ <div className={`flex justify-center items-center select-none`}>
+ <Tooltip
+ hideArrow
+ color='invert'
+ offset={0}
+ css={{ backgroundColor: darkMode ? '#1c1d20' : '#f7f7f7', border: `1px solid ${darkMode ? '#2f2f2f' : '#dbdbdb'}` }}
+ content={<Text className={`text-[12px] ${darkMode ? 'text-white' : 'text-black'}`}>This feature only works on the <a href='https://i.imgur.com/j6i2yB4.png' target='_blank'>new YouTube UI</a></Text>}>
+ <HelpOutlineIcon className='text-[16px] text-[gray]' />
+ </Tooltip>
+ </div>
+ )
+}
+
+export default InfoTooltip;

src/components/ModalDisplay.jsx

@@ -38,18 +38,20 @@ 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.5
+ What's New In 1.6.6
  </Text>
  <Text className='text-[12px]'>
  June 8, 2023
  </Text>
  </Modal.Header>
  <Modal.Body className='mt-[50px]'>
- <Text className='changed mb-4'>
- Oversized Placeholder Images
+ <Text className='added mb-4'>
+ Lives & Premieres
  </Text>
  <Text className='text-[13px] mb-2'>
- Fixed an issue with the "Shorts Hidden By HYS" placeholder image being too large sometimes
+ 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
  </Text>
  </Modal.Body>
  <Modal.Footer>

src/components/SwitchContainer.jsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { Text } from '@nextui-org/react';
 import { Switch } from '@nextui-org/react';
 import { turbo } from '../assets';
+import { Badge, InfoTooltip } from '../components'
 import { updateSwitchState } from '../constants/popup';
 
-const SwitchContainer = ({ darkMode, title, description, switchName, state }) => {
+const SwitchContainer = ({ darkMode, title, description, switchName, state, isNew, hasInfo }) => {
  return (
  <>
  {title === 'TURBO' ? (
@@ -25,7 +26,11 @@ const SwitchContainer = ({ darkMode, title, description, switchName, state }) =>
  ) : (
  <Text blockquote className='flex flex-row justify-between pl-4 pr-4 py-2 mt-2 mb-2 drop-shadow-card'>
  <div className='flex flex-col justify-between'>
- <Text className='text-[14px] font-medium'>{title}</Text>
+ <div className='flex items-center gap-1'>
+ <Text className='text-[14px] font-medium'>{title}</Text>
+ {hasInfo && <InfoTooltip darkMode={darkMode} ></InfoTooltip>}
+ {isNew && <Badge content={'new'} darkMode={darkMode} ></Badge>}
+ </div>
  <Text className={`text-[10px] ${darkMode ? 'text-textAltDark' : 'text-textAlt'} pr-5`}>{description}</Text>
  </div>
  <Switch

src/components/index.js

@@ -7,6 +7,8 @@ import ThemeSwitch from "./ThemeSwitch";
 import SwitchContainer from "./SwitchContainer";
 import ModalDisplay from "./ModalDisplay";
 import PowerButton from "./PowerButton";
+import Badge from "./Badge";
+import InfoTooltip from "./InfoTooltip";
 
 export {
  MainPage,
@@ -17,5 +19,7 @@ export {
  ThemeSwitch,
  SwitchContainer,
  ModalDisplay,
- PowerButton
+ PowerButton,
+ Badge,
+ InfoTooltip
 }

src/constants/background.js

@@ -8,7 +8,11 @@ chrome.runtime.onInstalled.addListener(async (details) => {
  toggleState: true,
  toggleNavState: true,
  toggleHomeFeedState: true,
+ toggleHomeFeedStateLives: false,
+ toggleHomeFeedStatePremieres: false,
  toggleSubscriptionFeedState: true,
+ toggleSubscriptionFeedStateLives: false,
+ toggleSubscriptionFeedStatePremieres: false,
  toggleTrendingFeedState: true,
  toggleSearchState: true,
  toggleRecommendedState: true,
@@ -34,7 +38,11 @@ chrome.runtime.onInstalled.addListener(async (details) => {
  'toggleState',
  'toggleNavState',
  'toggleHomeFeedState',
+ 'toggleHomeFeedStateLives',
+ 'toggleHomeFeedStatePremieres',
  'toggleSubscriptionFeedState',
+ 'toggleSubscriptionFeedStateLives',
+ 'toggleSubscriptionFeedStatePremieres',
  'toggleTrendingFeedState',
  'toggleSearchState',
  'toggleRecommendedState',
@@ -43,19 +51,19 @@ chrome.runtime.onInstalled.addListener(async (details) => {
  'toggleTurboState',
  'toggleRegularState',
  'toggleNotificationState',
- 'toggleEmptySpaceState'
+ 'toggleEmptySpaceState',
  ];
  const states = await chrome.storage.sync.get(keys);
  for (const key of keys) {
  if (!(key in states) || states[key] === undefined) {
- await chrome.storage.sync.set({ [key]: true });
+ await chrome.storage.sync.set({ [key]: false });
  }
  }
- chrome.tabs.query({ url: ['https://www.youtube.com/*', 'https://m.youtube.com/*'] }, function (tabs) {
- tabs.forEach(tab => {
- chrome.tabs.reload(tab.id);
- });
- });
+ // chrome.tabs.query({ url: ['https://www.youtube.com/*', 'https://m.youtube.com/*'] }, function (tabs) {
+ //  tabs.forEach(tab => {
+ //  chrome.tabs.reload(tab.id);
+ //  });
+ // });
  chrome.storage.sync.set({ presentModal: true }).catch(() => { console.log('[STORAGE] Could not set storage item') });
  chrome.action.setBadgeBackgroundColor({ color: '#ed5a64' });
  chrome.action.setBadgeText({ text: '1' });

src/constants/main.js

@@ -6,7 +6,11 @@ function checkStates() {
  'toggleState',
  'toggleNavState',
  'toggleHomeFeedState',
+ 'toggleHomeFeedStateLives',
+ 'toggleHomeFeedStatePremieres',
  'toggleSubscriptionFeedState',
+ 'toggleSubscriptionFeedStateLives',
+ 'toggleSubscriptionFeedStatePremieres',
  'toggleTrendingFeedState',
  'toggleSearchState',
  'toggleRecommendedState',
@@ -15,7 +19,7 @@ function checkStates() {
  'toggleTurboState',
  'toggleRegularState',
  'toggleNotificationState',
- 'toggleEmptySpaceState'
+ 'toggleEmptySpaceState',
  ]);
 }
 
@@ -30,7 +34,11 @@ async function hideShorts() {
  const isMobile = location.href.includes('https://m.youtube.com/');
  if (states.toggleNavState) hideShortsNavButton(isMobile);
  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.toggleTrendingFeedState) hideShortsVideosTrendingFeed(isMobile);
  if (states.toggleSearchState) hideShortsVideosSearchResults(isMobile);
  if (states.toggleRecommendedState) hideShortsVideosRecommendedList(isMobile);
@@ -138,6 +146,36 @@ function hideShortsVideosHomeFeed(isMobile) {
  }
 }
 
+// Hide live video elements in the home feed
+function hideLiveVideosHomeFeed(isMobile) {
+ if (!isMobile) {
+ if (location.href === 'https://www.youtube.com/') {
+ const elements = document.querySelectorAll('ytd-badge-supported-renderer');
+
+ elements.forEach(el => {
+ if (el.innerText.replace(/\s/g, '').replace(/\n/g, '') === 'LIVE') {
+ el.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display = 'none';
+ }
+ });
+ }
+ }
+}
+
+// Hide premiere video elements in the home feed
+function hidePremiereVideosHomeFeed(isMobile) {
+ if (!isMobile) {
+ if (location.href === 'https://www.youtube.com/') {
+ const elements = document.querySelectorAll('ytd-badge-supported-renderer');
+
+ elements.forEach(el => {
+ if (el.innerText.replace(/\s/g, '').replace(/\n/g, '') === 'PREMIERE') {
+ el.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display = 'none';
+ }
+ });
+ }
+ }
+}
+
 // Hide shorts video elements in the subscription feed
 function hideShortsVideosSubscriptionFeed(isMobile, fillEmptySpace) {
  if (!isMobile) {
@@ -151,13 +189,13 @@ 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";
- newDiv.style.borderRadius = '12px'
  grandParent.parentNode.appendChild(newDiv);
  }
  }
@@ -192,6 +230,52 @@ function hideShortsVideosSubscriptionFeed(isMobile, fillEmptySpace) {
  }
 }
 
+// Hide live video elements in the subscriptions feed
+function hideLiveVideosSubscriptionFeed(isMobile) {
+ if (!isMobile) {
+ if (location.href.includes('youtube.com/feed/subscriptions')) {
+ const elements = document.querySelectorAll('ytd-badge-supported-renderer');
+
+ 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);
+ }
+ }
+ });
+ }
+ }
+}
+
+// Hide premiere video elements in the subscriptions feed
+function hidePremiereVideosSubscriptionFeed(isMobile) {
+ if (!isMobile) {
+ if (location.href.includes('youtube.com/feed/subscriptions')) {
+ const elements = document.querySelectorAll('ytd-badge-supported-renderer');
+
+ 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);
+ }
+ }
+ });
+ }
+ }
+}
+
 // Hide shorts videos elements and shorts shelf elements on the trending feed
 function hideShortsVideosTrendingFeed(isMobile) {
  if (!isMobile) {

src/constants/popup.js

@@ -4,7 +4,11 @@ export const getSwitchStates = async () => {
  'toggleState',
  'toggleNavState',
  'toggleHomeFeedState',
+ 'toggleHomeFeedStateLives',
+ 'toggleHomeFeedStatePremieres',
  'toggleSubscriptionFeedState',
+ 'toggleSubscriptionFeedStateLives',
+ 'toggleSubscriptionFeedStatePremieres',
  'toggleTrendingFeedState',
  'toggleSearchState',
  'toggleRecommendedState',
@@ -13,7 +17,7 @@ export const getSwitchStates = async () => {
  'toggleTurboState',
  'toggleRegularState',
  'toggleNotificationState',
- 'toggleEmptySpaceState'
+ 'toggleEmptySpaceState',
  ]);
  return switchStates;
 }

src/views/FeedPage.jsx

@@ -39,22 +39,61 @@ const FeedPage = ({ darkMode }) => {
  </div>
 
  <div className='flex flex-col w-full'>
+ {/* Home */}
  <SwitchContainer
- title={'Home Feed'}
+ title={'Home Feed Shorts'}
  description={'Hide Shorts videos on the home page'}
  darkMode={darkMode}
  switchName={'toggleHomeFeedState'}
  state={switchState.toggleHomeFeedState} />
 
  <SwitchContainer
- title={'Subscriptions Feed'}
+ title={'Home Feed Lives'}
+ description={'Hide Live videos on the home page'}
+ darkMode={darkMode}
+ switchName={'toggleHomeFeedStateLives'}
+ state={switchState.toggleHomeFeedStateLives}
+ isNew={true}
+ hasInfo={true} />
+
+ <SwitchContainer
+ title={'Home Feed Premieres'}
+ description={'Hide Premiere videos on the home page'}
+ darkMode={darkMode}
+ switchName={'toggleHomeFeedStatePremieres'}
+ state={switchState.toggleHomeFeedStatePremieres}
+ isNew={true}
+ hasInfo={true} />
+
+ {/* Subscriptions */}
+ <SwitchContainer
+ title={'Subscriptions Feed Shorts'}
  description={'Hide Shorts videos on the subscriptions page'}
  darkMode={darkMode}
  switchName={'toggleSubscriptionFeedState'}
  state={switchState.toggleSubscriptionFeedState} />
 
  <SwitchContainer
- title={'Trending Feed'}
+ title={'Subscriptions Feed Lives'}
+ description={'Hide Live videos on the subscriptions page'}
+ darkMode={darkMode}
+ switchName={'toggleSubscriptionFeedStateLives'}
+ state={switchState.toggleSubscriptionFeedStateLives}
+ isNew={true}
+ hasInfo={true} />
+
+ <SwitchContainer
+ title={'Subscriptions Feed Premieres'}
+ description={'Hide Premiere videos on the subscriptions page'}
+ darkMode={darkMode}
+ switchName={'toggleSubscriptionFeedStatePremieres'}
+ state={switchState.toggleSubscriptionFeedStatePremieres}
+ isNew={true}
+ hasInfo={true} />
+
+ {/* Trending */}
+ <SwitchContainer
+ title={'Trending Feed Shorts'}
  description={'Hide Shorts videos on the trending page'}
  darkMode={darkMode}
  switchName={'toggleTrendingFeedState'}