☰

VK/VKVideo: sort by time by ChatGPT 5 (v2.0 – fixed selectors)

Sorts visible videos by length (↑/↓) on VK Video channel pages

// ==UserScript==
// @name         VK/VKVideo: sort by time by ChatGPT 5 (v2.0 – fixed selectors) 
// @namespace    https://vkvideo.ru/
// @version      2.0
// @description  Sorts visible videos by length (↑/↓) on VK Video channel pages
// @match        *://vkvideo.ru/*
// @match        *://vk.com/*
// @icon         https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/VK.com-logo.svg/1200px-VK.com-logo.svg.png
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  // Selectors from your page:
  const SEL = {
    LIST: '[data-testid="catalog_list_videos"]',
    ITEM: ':scope > [data-testid="grid-item"]',
    DURATION: '[data-testid="video_card_duration"]',
  };

  const MAX_Z = 2147483647;
  let ascending = true;

  const log = (...a) => console.log('[VK sort 2.0]', ...a);

  function timeToSeconds(t) {
    if (!t) return 0;
    const p = t.trim().split(':').map(Number);
    if (p.some(Number.isNaN)) return 0;
    if (p.length === 2) return p[0] * 60 + p[1];
    if (p.length === 3) return p[0] * 3600 + p[1] * 60 + p[2];
    return 0;
  }

  function toast(msg) {
    const t = document.createElement('div');
    t.textContent = msg;
    Object.assign(t.style, {
      position: 'fixed', bottom: '140px', right: '20px',
      zIndex: MAX_Z, padding: '10px 14px',
      background: '#2b2b2b', color: '#fff',
      borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,.35)',
      fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
    });
    document.body.appendChild(t);
    setTimeout(() => t.remove(), 1600);
  }

  function findListAndItems() {
    const list = document.querySelector(SEL.LIST);
    if (!list) return { list: null, items: [] };
    const items = Array.from(list.querySelectorAll(SEL.ITEM));
    return { list, items };
  }

  function collect() {
    const { list, items } = findListAndItems();
    if (!list || !items.length) return { list: null, rows: [] };
    const rows = items.map(li => {
      const dur = li.querySelector(SEL.DURATION);
      return { li, seconds: timeToSeconds(dur?.textContent || ''), txt: dur?.textContent?.trim() || '' };
    });
    return { list, rows };
  }

  function sortNow() {
    const { list, rows } = collect();
    if (!list || !rows.length) {
      toast('Could not find the list/tiles. Scroll to load more and try again.');
      log('collect()', { list, rowsLen: rows.length });
      return;
    }

    rows.sort((a, b) => ascending ? a.seconds - b.seconds : b.seconds - a.seconds);

    const frag = document.createDocumentFragment();
    rows.forEach(r => frag.appendChild(r.li));
    list.appendChild(frag);

    toast(ascending ? 'Sorted ↑ (shorter → longer)' : 'Sorted ↓ (longer → shorter)');
    const btn = document.getElementById('vkvideo-sort-btn');
    if (btn) btn.textContent = ascending ? 'Sort by time ↓' : 'Sort by time ↑';
    ascending = !ascending;
  }

  function addButton() {
    if (document.getElementById('vkvideo-sort-btn')) return;
    const btn = document.createElement('button');
    btn.id = 'vkvideo-sort-btn';
    btn.textContent = 'Sort by time ↑';
    Object.assign(btn.style, {
      position: 'fixed', bottom: '200px', right: '20px', zIndex: MAX_Z,
      padding: '12px 18px', fontSize: '16px', lineHeight: '1',
      background: '#4a76a8', color: '#fff', border: 'none',
      borderRadius: '10px', cursor: 'pointer',
      boxShadow: '0 4px 12px rgba(0,0,0,.35)', pointerEvents: 'auto', userSelect: 'none',
    });
    btn.addEventListener('click', e => { e.preventDefault(); e.stopPropagation(); sortNow(); }, true);
    document.body.appendChild(btn);

    // shortcut: Alt+S
    window.addEventListener('keydown', e => {
      if (e.altKey && e.key.toLowerCase() === 's') { e.preventDefault(); sortNow(); }
    }, true);
  }

  function init() {
    addButton();
    // SPA: ensure the button remains when the DOM changes
    const obs = new MutationObserver(() => addButton());
    obs.observe(document.documentElement, { childList: true, subtree: true });
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();