This JavaScript bookmarklet is designed to manipulate the visibility of videos on a YouTube Subscription page. It alternates between three states - 'initial', 'hide-shorts', and 'hide-others'. In the 'initial' state, all videos are visible. In the 'hide-shorts' state, YouTube 'Shorts' videos are hidden, while other videos remain visible. In the …

yt-subscription-toggle-bookmark.js

javascript:(function() {
    const hide = e => e.style.display = 'none';
    const show = e => e.style.display = 'inline-block';
    
    const states = ['initial', 'hide-shorts', 'hide-others'];
    const isHidden = e => e.style.display === 'none';

    const allElements = Array.from(document.querySelectorAll("ytd-grid-video-renderer"));
    const shorts = allElements.filter(e => e.querySelector("span[aria-label='Shorts']"));
    const others = allElements.filter(e => !e.querySelector("span[aria-label='Shorts']"));
    
    
  const switchStates = (state) => {
    console.log(state);
    
    if (state === 'initial') {
      allElements.forEach(show);
    } else if (state === 'hide-shorts') {
      shorts.forEach(hide);
      others.forEach(show);
    } else if (state === 'hide-others') {
      shorts.forEach(show);
      others.forEach(hide);
    }
  };

  const loopStates = () => {
    const getCurrentState = () => {
      if (shorts.every(isHidden)) return 'hide-shorts';
      if (others.every(isHidden)) return 'hide-others';
      return 'initial';
    };

    const getNextState = (currentState) => {
      const currentStateIndex = states.indexOf(currentState);

      if (currentStateIndex === -1 || currentStateIndex === states.length - 1) {
        return states[0];
      }

      return states[currentStateIndex + 1];
    };

    const switchToNextState = () => {
      const currentState = getCurrentState();
      const nextState = getNextState(currentState);

      switchStates(nextState);
    };

    switchToNextState();
  };

  loopStates();
})();