Sound page: collapse description/tags/file details (let user get to comments faster)

[qubodup]

By default descriptions could be shortened so users see the comments section sooner.

https://freesound.org/s/683298/

This is something YouTube has had for a while:

Test it at https://www.youtube.com/watch?v=BXwifxq4zNo

On Freesound, users could override this behavior via settings (users, not uploaders).

Injection code for prototyping on Freesound:

(() => {
  const section = document.querySelector('#soundDescriptionSection');
  if (!section) return;

  const wrapper = section.closest('.v-spacing-top-1');
  if (!wrapper) return;

  wrapper.querySelector('.desc-toggle-btn')?.remove();

  // save original html once
  if (!section.dataset.originalHtml) {
    section.dataset.originalHtml = section.innerHTML;
  }

  // build collapsed single-line version
  const collapsedText = section.innerText
    .split('\n')
    .map(s => s.trim())
    .filter(Boolean)
    .join(' ');

  let expanded = false;

  function applyCollapsed() {
    section.textContent = collapsedText;

    wrapper.style.overflow = 'hidden';
    wrapper.style.display = '-webkit-box';
    wrapper.style.webkitBoxOrient = 'vertical';
    wrapper.style.webkitLineClamp = '1';
  }

  function applyExpanded() {
    section.innerHTML = section.dataset.originalHtml;

    wrapper.style.overflow = '';
    wrapper.style.display = '';
    wrapper.style.webkitBoxOrient = '';
    wrapper.style.webkitLineClamp = '';
  }

  applyCollapsed();

  const toggle = document.createElement('button');
  toggle.className = 'desc-toggle-btn';
  toggle.textContent = 'Show more';

  Object.assign(toggle.style, {
    display: 'block',
    marginLeft: 'auto',
    marginTop: '6px',
    background: 'none',
    border: 'none',
    padding: '0',
    cursor: 'pointer',
    font: 'inherit',
    color: 'inherit'
  });

  toggle.addEventListener('click', () => {
    expanded = !expanded;

    if (expanded) {
      applyExpanded();
      toggle.textContent = 'Show less';
    } else {
      applyCollapsed();
      toggle.textContent = 'Show more';
    }
  });

  wrapper.parentNode.insertBefore(toggle, wrapper.nextSibling);
})();

Although it might be good to move file details (rate, size) over to the sidebar, closer to the download button, as it's related to getting the file.