Greasy Fork 还支持 简体中文。

YouTube Live Subscriptions

UX for YouTube Livestreams in https://www.youtube.com/feed/subscriptions

As of 2023-09-12. See the latest version.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name        YouTube Live Subscriptions
// @namespace   UserScripts
// @match       https://www.youtube.com/*
// @grant       none
// @version     1.0.0
// @author      CY Fung
// @license     MIT
// @description UX for YouTube Livestreams in https://www.youtube.com/feed/subscriptions
// @unwrap
// @inject-into page
// @run-at      document-start
// ==/UserScript==

(() => {

  /** @type {globalThis.PromiseConstructor} */
  const Promise = (async () => { })().constructor; // YouTube hacks Promise in WaterFox Classic and "Promise.resolve(0)" nevers resolve.

  let proxy = new Proxy({

  }, {
    set(target, prop, value) {
      /*
      if(prop ==='isFeedSubscriptions' && target[prop] !== value){

        target[prop] = value;


        if(!value){


        for(const s of document.querySelectorAll('ytd-rich-grid-row #contents.ytd-rich-grid-row[class], ytd-rich-item-renderer.ytd-rich-grid-row[class]')){

          s.classList.remove('feed-subscriptions');


        }


        }else{

        for(const s of document.querySelectorAll('ytd-rich-grid-row #contents.ytd-rich-grid-row[class], ytd-rich-item-renderer.ytd-rich-grid-row[class]')){


          s.classList.add('feed-subscriptions');


        }
        }

      }
      */

      target[prop] = value;

    }
  })




  const wm = new WeakMap();

  const dm = new WeakMap();

  let foregroundPromise = null;
  const foregroundPromiseFn = () => (foregroundPromise = (foregroundPromise || new Promise(resolve => {
    requestAnimationFrame(() => {
      foregroundPromise = null;
      resolve();
    });
  })));


  let m67t = 0;

  let pendingChannels = new Set();

  const closestYtComponentFn = (e) => {
    while (e instanceof HTMLElement) {
      if (typeof e.is === 'string') return e;
      e = e.parentNode;
    }
    return null;
  };


  const proceedChannels = () => {
    // if(location.pathname!=='/feed/subscriptions') return;
    let channels = [...pendingChannels];
    pendingChannels.clear();
    for (const channel of channels) {

      let videoIds = new Set([...document.querySelectorAll(`[media-owner-id="${channel}"][media-base-video-id]`)].map(e => e.getAttribute('media-base-video-id')))

      let medias = [...videoIds].map(videoId => document.querySelector(`[media-owner-id="${channel}"][media-base-video-id="${videoId}"]`)).filter(e => (e instanceof HTMLElement));
      let csContainer = null;
      // console.log(3343,channel, [...medias])

      for (let mi = 0; mi < medias.length; mi++) {

        const media = medias[mi];
        if (mi > 0) {
          let ytParentComponent = (media.inst || media).parentComponent || 0;

          ytParentComponent = ytParentComponent.inst || ytParentComponent;

          if (ytParentComponent) {

            const ytParentComponentElement = ytParentComponent.hostElement;

            if (ytParentComponentElement && ytParentComponentElement.getElementsByTagName(media.tagName).length === 1) {
              ytParentComponentElement.setAttribute('hidden', '')
            }


          }

        } else {
          csContainer = media.parentNode.querySelector('ytd-channel-subscriptions');
          csContainer.setAttribute('channel-subscriptions-active', '');
          csContainer.textContent = '';



        }

        let videoMedia = ((media.inst || media).hostElement || 0);

        let videoMediaData = videoMedia ? dm.get(videoMedia) : null;


        if (csContainer && videoMediaData) {
          const box = document.createElement('ytd-channel-subscription');

          const tnUrl = videoMediaData.thumbnail.thumbnails[0].url;
          box.style.setProperty('background-image', `url(${tnUrl})`);


          box.setAttribute('data-channel-id', media.getAttribute('media-owner-id'));
          box.setAttribute('data-video-id', media.getAttribute('media-base-video-id'));

          dm.set(box, videoMediaData);

          const data = videoMediaData || 0;
          let type = '';
          if (data.upcomingEventData) {
            type = 'upcoming';
          } else if (data.badges) {
            for (const badge of data.badges) {
              if (badge && badge.metadataBadgeRenderer) {
                const br = badge.metadataBadgeRenderer;
                if (br.style === "BADGE_STYLE_TYPE_LIVE_NOW" || (br.icon || 0).iconType === 'LIVE') {
                  type = 'live-now';
                }
              }
            }
          }

          if (!type && data.publishedTimeText) {
            type = 'published'
          }

          box.setAttribute('video-type', type)

          csContainer.appendChild(box);




        }
        //if(mi>0) let closestYtComponentFn(media)
      }

      if (csContainer) {

        let media = HTMLElement.prototype.querySelector.call(csContainer.parentNode, 'ytd-rich-grid-media');

        if (media) {

          // console.log(media);

          (media.inst || media).setTargetData();
        }
      }




    }
  }

  let m68t = 0;
  let promiseT = Promise.resolve();
  const mo1 = new MutationObserver(() => {

    // if(!isFeedSubscriptions && location.pathname==='/feed/subscriptions') isFeedSubscriptions = true;
    if (!proxy.isFeedSubscriptions) return;
    let p = document.querySelector('a[href="/feed/subscriptions"]');
    if (p) p.setAttribute('href', '/feed/subscriptions?flow=1');




  });




  mo1.observe(document, { subtree: true, childList: true });


  const mo2 = new MutationObserver((entries) => {

    // if(!isFeedSubscriptions && location.pathname==='/feed/subscriptions') isFeedSubscriptions = true;
    if (!proxy.isFeedSubscriptions) return;


    let mx = false;

    for (const entry of entries) {

      const target = entry.target;

      if (target instanceof HTMLElement && target.isConnected === true) {

        foregroundPromiseFn().then(() => {




          let c = target.querySelector('ytd-channel-subscriptions');


          let media = target.querySelector('ytd-rich-grid-media');
          let mediaCnt = media.inst || media;

          let _c72_ = mediaCnt.data._c72_;
          let w = null;
          if (_c72_) {
            w = wm.get(_c72_);

          }


          return;



        })


      }
    }

  });

  document.addEventListener('click', function (evt) {

    if (!proxy.isFeedSubscriptions) return;

    // console.log(3, evt)
    if (evt && evt.isTrusted && evt.target.nodeName === 'YTD-CHANNEL-SUBSCRIPTION') {
      let media = HTMLElement.prototype.querySelector.call(evt.target.parentNode.parentNode, 'ytd-rich-grid-media');
      const videoId = evt.target.getAttribute('data-video-id');
      // console.log(4, media,videoId)
      if (media) {
        (media.inst || media).setTargetData(videoId)
      }
    }

  }, true)

  let runStarted = 0;

  let styleElement = null;

  const runStart = () => {

    if (styleElement) return;

    styleElement = document.createElement('style');

    document.head.appendChild(styleElement).textContent = `


    html {
        --min-preview-size: 128px;
    }

    @media all and (min-width: 792px) {

        html {

            --min-preview-size: 192px;
        }
    }
    .feed-subscriptions ytd-rich-grid-row #contents.ytd-rich-grid-row[class]{
        display:flex;
        flex-direction:column;
    }

    .feed-subscriptions ytd-rich-item-renderer.ytd-rich-grid-row[class]{
        width:100%;
        margin: 4px;
    }



    ytd-rich-grid-media[media-base-video-id] .ytd-rich-grid-media#dismissible {
        justify-content: center;
        display: flex;
        flex-direction: row;

        column-gap: 8px;
        flex-wrap: wrap;
    }


    ytd-rich-grid-media[media-base-video-id] #avatar-link.ytd-rich-grid-media {
        margin: 0;
        padding: 0;
    }

    ytd-rich-grid-media[media-base-video-id] .ytd-rich-grid-media#dismissible > #thumbnail {
        width: 35vw;
        min-width: 288px;
        max-width: 390px;
        margin: 2px;
        height: min-content;
    }

    ytd-rich-grid-media[media-base-video-id] .ytd-rich-grid-media#dismissible > #details {
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    ytd-rich-grid-media[media-base-video-id] #details.ytd-rich-grid-media.no-pointer {
        cursor: initial;
    }


    ytd-rich-grid-media[media-base-video-id] #interaction.ytd-rich-grid-media {
        display: none;
    }

    ytd-rich-grid-media[media-base-video-id] .ytd-rich-grid-media#details {
        width: auto;
        max-width: 390px;
    }

    ytd-rich-grid-media[media-base-video-id] {
        max-width: initial;
        flex: 0;
    }


    ytd-rich-grid-media[media-base-video-id] #video-title.ytd-rich-grid-media[class] {
        -webkit-line-clamp: 4;
        max-height: initial;
        white-space: break;
    }

    ytd-rich-grid-media[media-base-video-id] #video-title.ytd-rich-grid-media[class],
    ytd-rich-grid-media[media-base-video-id] #video-title.ytd-rich-grid-media[class] yt-formatted-string {


        white-space: pre-wrap;
        word-break: keep-all;

        font-family: "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, sans-serif;
        font-size: 14px;
        line-height: 1.5em;
    }

    ytd-rich-grid-media[media-base-video-id] ytd-menu-renderer.ytd-rich-grid-media {
        margin-top: 48px;
        right: 6px;
    }



    ytd-rich-grid-media[media-base-video-id] .ytd-rich-grid-media#attached-survey {
        display: none;
    }

    ytd-rich-grid-media[media-base-video-id] + ytd-channel-subscriptions {
        display: flex;
    }

    ytd-rich-grid-media[media-base-video-id]:last-child {
        display: none;
    }



    ytd-rich-grid-media[media-base-video-id] #avatar-link {

        position: absolute;
        top: 14px;
        left: -45px;
    }

    ytd-rich-grid-media[media-base-video-id] ytd-video-meta-block {

        display: inline-block;
    }
    ytd-rich-grid-media[media-base-video-id] #meta.ytd-rich-grid-media {


        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 16px;

        padding: 0;
        margin: 0;
        margin-bottom: 30px;
    }


    ytd-rich-grid-media[media-base-video-id] ytd-video-meta-block.grid #metadata.ytd-video-meta-block {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        row-gap: 4px;
    }


    ytd-rich-grid-media[media-base-video-id] {
        margin-left: 52px;
    }

    ytd-rich-grid-media[media-base-video-id] .title-badge.ytd-rich-grid-media,
    ytd-rich-grid-media[media-base-video-id] .video-badge.ytd-rich-grid-media {
        margin: 0
    }

    ytd-rich-grid-media[media-base-video-id] ytd-video-meta-block.grid {

        flex-basis: 66%;
    }



    ytd-channel-subscriptions {

        min-width: calc( var(--min-preview-size) + 38px);

        flex-direction: row;
        flex-wrap: wrap;
        flex: 0;
        min-height: 100%;
        height: 0;
        overflow: auto;
        overscroll-behavior: none;
        gap: 4px;

        scroll-snap-type: y proximity;
        scroll-snap-stop: always;

        display: none;

        align-content: flex-start;
        box-sizing: content-box;
    }


    ytd-channel-subscriptions::-webkit-scrollbar {
        width: 16px;
    }
    ytd-channel-subscriptions::-webkit-scrollbar-thumb {
        height: 56px;
        border-radius: 8px;
        border: 4px solid transparent;
        background-clip: content-box;
        background-color: var(--yt-spec-text-secondary);
    }
    ytd-channel-subscriptions::-webkit-scrollbar-thumb {
        height: 56px;
        border-radius: 8px;
        border: 4px solid transparent;
        background-clip: content-box;
        background-color: hsl(0, 0%, 67%);
    }



    ytd-channel-subscription {

        display: block;

        width: var(--min-preview-size);
        height: calc( var(--min-preview-size) / 16 * 9);


        background-repeat: no-repeat;
        background-size: contain;


        scroll-snap-align: center;

        cursor: pointer;

        margin-left: 16px;

        min-width: var(--min-preview-size);
    }

    ytd-channel-subscription:only-child {
        visibility: hidden;
    }

    ytd-channel-subscription[video-type="upcoming"] {
        filter: brightness(0.8);
        background-color: #bdbdbd80;
        background-blend-mode: overlay;
        box-shadow: 0px 0px 2px 3px #ffffffee inset;
        order: 1;
    }


    ytd-channel-subscription[video-type="published"] {
        filter: brightness(0.5);
        background-blend-mode: overlay;
        background-color: #53535380;
        order: 3;
    }

    ytd-channel-subscription[video-type="live-now"] {

        filter: brightness(0.9);
        box-shadow: 0px 0px 2px 3px #ff0000ee inset;
        order: 2;
    }



    ytd-channel-subscription:hover {
        filter: brightness(0.99);
    }



    ytd-channel-subscription.selected::before {
        content: '';
        display: block;
        position: absolute;
        background: transparent;
        top: 50%;
        left: -16px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 10px;
        border-color: transparent transparent transparent var(--yt-spec-text-primary);
    }


    @media all and (min-width: 792px) {

        ytd-rich-grid-media[media-base-video-id] .ytd-rich-grid-media#details {
            width: auto;
            min-width: 390px;
            max-width: 468px;
        }


        ytd-rich-grid-media[media-base-video-id] {


            margin-left: 0;
            max-width: max-content;
            flex-basis: 70%;
            flex-grow: 3;

        }

        ytd-rich-grid-media[media-base-video-id] #meta.ytd-rich-grid-media {




            margin-bottom: 12px;


        }

        ytd-rich-grid-media[media-base-video-id] .ytd-rich-grid-media#dismissible > #details {
            padding: 26px 8px;
        }


        ytd-rich-grid-media[media-base-video-id] ytd-video-meta-block {

            display: flex;
        }



        ytd-rich-grid-media[media-base-video-id] #avatar-link {

            position: static;
            left: auto;
        }


        ytd-channel-subscriptions {
            flex-grow: 1;
            max-width: 440px;
                flex-basis: 220px;
        }
    }


    `
  }

  (async () => {

    await Promise.all([
      customElements.whenDefined('ytd-rich-grid-renderer'),
      customElements.whenDefined('ytd-rich-grid-media'),
      customElements.whenDefined('ytd-rich-item-renderer'),
    ]);

    let dummy = document.createElement('ytd-rich-grid-media');

    let cProto = (dummy.inst || dummy).constructor.prototype;

    cProto.onDetailsClick49 = cProto.onDetailsClick;
    cProto.onDetailsClick = function () {

      if (!proxy.isFeedSubscriptions) return this.onDetailsClick49.apply(this, arguments);

    }

    cProto.setTargetData = function (newVideoId) {
      const hostElement = this.hostElement;
      const baseVideoId = hostElement.getAttribute('media-base-video-id');
      const ownerId = hostElement.getAttribute('media-owner-id');

      if (!baseVideoId || !ownerId) return;
      const currentVideoId = hostElement.getAttribute('data-selected-video-id');
      if (!currentVideoId) {


        let q = document.querySelector(`ytd-channel-subscription[data-video-id="${baseVideoId}"]`);
        for (const p of q.parentNode.querySelectorAll('.selected')) p.classList.remove('selected');
        q.classList.add('selected');

        /*
              let q = document.querySelector(`ytd-channel-subscription[data-video-id="${newVideoId}"]`);
              q.parentNode.scrollTop= q.offsetTop - q.offsetHeight/2;
              */

        newVideoId = baseVideoId;

      } else {

        let q = document.querySelector(`ytd-channel-subscription[data-video-id="${currentVideoId}"]`);

        if (q && !q.classList.contains('selected')) {


          for (const p of q.parentNode.querySelectorAll('.selected')) p.classList.remove('selected');

          q.classList.add('selected');
          hostElement.removeAttribute('data-selected-video-id')
          newVideoId = newVideoId || currentVideoId;
        }


      }



      if (!newVideoId) return;
      newVideoId = `${newVideoId}`;

      Promise.resolve().then(() => {
        const hostElement = this.hostElement;

        if (hostElement.getAttribute('data-selected-video-id') !== newVideoId) {


          hostElement.setAttribute('data-selected-video-id', newVideoId);

          const videoMedia = document.querySelector(`ytd-rich-grid-media[media-base-video-id="${newVideoId}"]`)


          let videoMediaData = videoMedia ? dm.get(videoMedia) : null;

          if (videoMediaData && videoMediaData.videoId === newVideoId && this.data._c72_ && videoMediaData._c72_ && videoMediaData.videoId !== this.data._c72_.vid) {
            this.data = Object.assign({}, videoMediaData);
          }




          let q = document.querySelector(`ytd-channel-subscription[data-video-id="${newVideoId}"]`);
          for (const p of q.parentNode.querySelectorAll('.selected')) p.classList.remove('selected');
          q.classList.add('selected');


          q.parentNode.scrollTop = q.offsetTop - q.offsetHeight / 2;

        }







      })
      // q.scrollIntoView();
    }

    cProto.onDetailsClick._c49_ = 1;

    cProto.__fixPanel__ = function () {

      const _c72_ = ((this || 0).data || 0)._c72_ || 0;
      if (!_c72_) return;
      const media = this.hostElement;
      let ytParentComponent = (media.inst || media).parentComponent;
      if (ytParentComponent) {
        ytParentComponent = ytParentComponent.inst || ytParentComponent;
        ytParentComponent.hostElement.removeAttribute('hidden');
      }
      let elem = wm.get(_c72_);
      if (elem) {

        media.parentNode.insertBefore(elem, media.nextSibling);


      } else {



        let div = document.createElement('ytd-channel-subscriptions');

        media.parentNode.insertBefore(div, media.nextSibling);

        wm.set(_c72_, div);






      }



      pendingChannels.add(_c72_.cid);




      let tid = ++m67t;
      foregroundPromiseFn().then(() => {
        if (tid !== m67t) return;
        proceedChannels();
      });




    }

    cProto.attached49 = cProto.attached;

    cProto.attached = function () {



      if (!proxy.isFeedSubscriptions && location.pathname === '/feed/subscriptions') proxy.isFeedSubscriptions = true;

      if (!proxy.isFeedSubscriptions) return this.attached49.apply(this, arguments);


      if (!this.hostElement) return this.attached49();
      if (this.hostElement && typeof this.hostElement.onDataChanged === 'function' && !this.hostElement.onDataChanged._c49_) {
        this.hostElement.onDataChanged = this.onDataChanged.bind(this);
        this.hostElement.onDataChanged._c49_ = 1;
      }


      if (this.hostElement && typeof this.hostElement.onDetailsClick === 'function' && !this.hostElement.onDetailsClick._c49_) {
        this.hostElement.onDetailsClick = this.onDetailsClick.bind(this);
        this.hostElement.onDetailsClick._c49_ = 1;
      }


      if (!runStarted) {

        runStarted = 1;
        runStart();
      }

      if (!this.hostElement._m51_) {
        this.hostElement._m51_ = true;
        let details = HTMLElement.prototype.querySelector.call(this.hostElement, '#details');
        if (details) {

          details.classList.add('no-pointer');


        }

        mo2.observe(this.hostElement.parentNode, { subtree: false, childList: true });



      }




      this.attached49();

    }

    /*
    cProto.detached49 =cProto.detached
    cProto.detached = function(){
      const data = this.data || 0;
      if(data){
  
        let browseId = null;
        try{
  
          browseId = data.ownerText.runs[0].navigationEndpoint.browseEndpoint.browseId
        }catch(e){}
  
        if(browseId){
  
          pendingChannels.add(browseId)
          foregroundPromiseFn().then(proceedChannels)
  
  
        }
  
      }
    }
    */

    cProto.dc01 = function () {

      const data = this.data || 0;
      if (data) {


        if (data.thumbnail && data.thumbnail.thumbnails) {
          let thumbnails = data.thumbnail.thumbnails;
          if (thumbnails.length > 1) {
            let u = -1;
            for (const tn of thumbnails) {
              let z = Math.round(tn.width * tn.height);
              if (z > u) u = z;
            }
            thumbnails = thumbnails.filter(e => Math.round(e.width * e.height) === u);
            if (thumbnails.length > 1) thumbnails.length = 1;
            data.thumbnail.thumbnails = thumbnails;
          }
        }
      }

    }


    let fetchedType = false;

    document.addEventListener('yt-page-data-fetched', (evt) => {


      if (evt && evt.detail) {

        const detail = evt.detail;

        if (detail.pageData && detail.pageData.page && detail.pageData.url) {
          if (detail.pageData.page === 'browse' && detail.pageData.url === '/feed/subscriptions') {
            proxy.isFeedSubscriptions = true;
          } else {
            proxy.isFeedSubscriptions = false;
          }
          fetchedType = true;
          console.log(proxy.isFeedSubscriptions)
        }

      }
    });



    document.addEventListener('yt-navigate-finish', () => {

      proxy.isFeedSubscriptions = location.pathname === '/feed/subscriptions';

      console.log(proxy.isFeedSubscriptions)

      /*
  
      if(!proxy.isFeedSubscriptions){
  
  
      for(const s of document.querySelectorAll('ytd-rich-grid-row #contents.ytd-rich-grid-row[class], ytd-rich-item-renderer.ytd-rich-grid-row[class]')){
  
        s.classList.remove('feed-subscriptions');
  
  
      }
  
        return;
      }
  
      for(const s of document.querySelectorAll('ytd-rich-grid-row #contents.ytd-rich-grid-row[class], ytd-rich-item-renderer.ytd-rich-grid-row[class]')){
  
  
        s.classList.add('feed-subscriptions');
  
  
      }
      */

      for (const media of document.querySelectorAll('ytd-rich-grid-media:not([media-base-video-id])')) {

        let selectedBox = media.parentNode.querySelector('ytd-channel-subscription.selected');


        let baseData = media.data;

        if (selectedBox) {



          let baseData = media.data;
          let selectedData = dm.get(selectedBox);
          if (baseData && selectedData && baseData._c72_ && selectedData._c72_ && baseData._c72_ === selectedData._c72_) {
            let w = baseData._c72_;
            media.setAttribute('media-base-video-id', w.vid)
            media.setAttribute('media-owner-id', w.cid)


            media.setAttribute('data-selected-video-id', w.vid)


            dm.set(media, baseData)

          } else if (baseData && selectedData && baseData._c72_ && selectedData._c72_ && baseData._c72_ !== selectedData._c72_) {
            let w = baseData._c72_;
            media.setAttribute('media-base-video-id', w.vid)
            media.setAttribute('media-owner-id', w.cid);



            media.setAttribute('data-selected-video-id', selectedData._c72_.vid)
            media.data = Object.assign({}, selectedData)

            dm.set(media, baseData)

          }

          /*
          if(baseData){
  
  
            pendingChannels.add(baseData.cid);
            let tid = ++m67t;
            foregroundPromiseFn().then(()=>{
              if(tid!==m67t) return;
              proceedChannels();
            });
          }
          */

        }

      }



      for (const media of document.querySelectorAll('ytd-rich-grid-media:not([media-base-video-id])')) {

        let baseData = media.data;




        if (baseData) {

          let w = baseData._c72_;

          if (w) {
            media.setAttribute('media-base-video-id', w.vid)
            media.setAttribute('media-owner-id', w.cid)

            dm.set(media, baseData)
          }

        }



      }


    })


    cProto.dc02 = function () {


      const data = this.data || 0;


      const media = this.hostElement;





      let browseId = null;
      try {
        browseId = data.owner.navigationEndpoint.browseEndpoint.browseId
      } catch (e) { }

      let videoId = null;


      try {
        videoId = data.videoId;
      } catch (e) { }



      if (data && browseId && videoId && !data._c72_) {



        data._c72_ = {};
        dm.set(media, data);


        data._c72_.vid = videoId || ''
        data._c72_.cid = browseId || ''

        pendingChannels.add(browseId);
        let tid = ++m67t;
        foregroundPromiseFn().then(() => {
          if (tid !== m67t) return;
          proceedChannels();
        });

        media.setAttribute('media-base-video-id', videoId || '');


        media.setAttribute('media-owner-id', browseId || '');

      }


      if (!videoId || !browseId) {

        media.removeAttribute('media-base-video-id');


        media.removeAttribute('media-owner-id');

      } else if (!media.getAttribute('media-base-video-id') || !media.getAttribute('media-owner-id')) {


        /*
        let box = document.querySelector(`[data-channel-id="${browseId}"][data-video-id="${videoId}"]`);
  
        console.log(123100, box)
        if(box){
          let boxC72 = ((dm.get(box)||0)||0)._c72_||0;
          let thisC72 = (this.data||0)._c72_;
          console.log(123200, boxC72, thisC72,  boxC72 === thisC72)
          if(boxC72 && thisC72 && boxC72 === thisC72){
  
                media.setAttribute('media-base-video-id',videoId );
               media.setAttribute('media-owner-id',  browseId );
          }else if(boxC72 && thisC72 && boxC72 !== thisC72){
  
            let baseVideo = box.parentNode.querySelector('.selected');
            let baseVideoId = baseVideo ? baseVideo.getAttribute('data-video-id') : '';
  
            if(baseVideoId){
  
                media.setAttribute('media-base-video-id',baseVideoId );
  
                media.setAttribute('data-selected-video-id',videoId );
               media.setAttribute('media-owner-id',  browseId );
            }
  
  
  
          }
        }
        */




      }


      if (data && data._c72_ && !this.hostElement.parentNode.querySelector('ytd-channel-subscriptions')) {


        this.__fixPanel__();

      }

    }

    cProto.onDataChanged49 = cProto.onDataChanged;

    cProto.onDataChanged = function () {


      if (!proxy.isFeedSubscriptions && location.pathname === '/feed/subscriptions') proxy.isFeedSubscriptions = true;

      // if(location.pathname!=='/feed/subscriptions') return this.onDataChanged49.apply(this, arguments);
      this.dc01();



      let r = this.onDataChanged49.apply(this, arguments);

      this.dc02();




      return r;

    }

    cProto.onDataChanged._c49_ = 1;






    dummy = document.createElement('ytd-rich-grid-renderer');

    cProto = (dummy.inst || dummy).constructor.prototype;


    cProto._triggerFeedSubscriptions = function () {



      if (!fetchedType && !proxy.isFeedSubscriptions && location.pathname === '/feed/subscriptions') proxy.isFeedSubscriptions = true;

      if (this.hostElement) {
        this.hostElement.classList.toggle('feed-subscriptions', proxy.isFeedSubscriptions)
        if (styleElement && proxy.isFeedSubscriptions && !styleElement.parentNode) document.head.appendChild(styleElement);
        else if (styleElement && !proxy.isFeedSubscriptions && styleElement.parentNode) (styleElement).remove();


      }
    }

    cProto.attached59 = cProto.attached;
    cProto.attached = function () {

      this._triggerFeedSubscriptions();
      return this.attached59();
    }


    cProto.refreshGridLayout49 = cProto.refreshGridLayout;
    cProto.refreshGridLayout = function () {

      this._triggerFeedSubscriptions();
      // console.log(552, proxy.isFeedSubscriptions)
      if (!proxy.isFeedSubscriptions) return this.refreshGridLayout49.apply(this, arguments);

    }

    cProto.calcElementsPerRow49 = cProto.calcElementsPerRow;

    cProto.calcElementsPerRow = function () {

      this._triggerFeedSubscriptions();
      if (!proxy.isFeedSubscriptions) return this.calcElementsPerRow49.apply(this, arguments);

    }



  })();

})();