Raw Source Toggle Dropdown

• Minified Source

jnaskali / Piped full-width

// ==UserScript==
// @name        Piped full-width
// @author      jnaskali
// @copyright   2021, Juhani Naskali (www.naskali.fi)
// @license     MIT
// @version     1.72
// @namespace   https://www.naskali.fi
// @updateURL   https://openuserjs.org/meta/jnaskali/Piped_full-width.meta.js
// @downloadURL https://openuserjs.org/install/jnaskali/Piped_full-width.user.js
//
// @match       *://piped.*/*
// @grant       none
// @run-at      document-end
//
// @description Resizes Piped videos to full-width and shows top menu only on hover (even on pages with no video).
// ==/UserScript==

/* jshint esversion: 6 */

var style = document.createElement('style');
style.innerHTML = `

  /* Fix inline checkboxes in settings */
  label[for^="chk"] {
    margin-left: 1.5em;
  }
  input[id^="chk"] {
    position: relative;
    top: -1.5em
  }

  div.player-container.w-full {
    margin: 0 -1vw;
    width: 100vw;
    max-height: 100vh;
  }

  .hover-catcher {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
  }
  .hover-catcher nav {
    display: none;
    padding: 0 20px;
    height: 100px;
    background: rgb(15, 15, 15);
  }
  .hover-catcher:hover nav, .suggestions-container:hover + .hover-catcher nav {
    display: flex;
  }
  .suggestions-container {
    top: 100px;
  }

  form, h1.text-center.font-bold {
    margin-top: 100px;
  }

`;
document.head.appendChild(style);


// Wait for navbar to appear, then add transparent div for catching mouse hover on top of page
function render_navbar() {
  var navbar = document.querySelector('nav');
  if(navbar) {
    var navparent = navbar.parentNode;
    var suggestions = document.querySelector('.suggestions-container');

    var catcher = document.createElement('div');
    catcher.classList.add('hover-catcher');

    // ADD CATCHER AS NAV PARENT
    // also, suggestions needs to be first in html for css sibling selector to work
    navparent.replaceChild(suggestions, navbar);
    suggestions.after(catcher);
    catcher.appendChild(navbar);

  } else {
    setTimeout(render_navbar, 100);
  }
}
// Wait for videolist to appear, then move below video
function render_videolist() {
  var chapter = document.querySelector('div.chapter-vertical');
  if(chapter) {
    var videoList = chapter.parentNode;
    videoList.parentNode.className = 'flex-col';
    videoList.querySelector('h2').hidden = true;
    videoList.className = 'flex overflow-x-auto';
    videoList.querySelectorAll('div.chapter-vertical').forEach((child , index)=>{
      child.className = 'chapter';
      child.querySelector('img').style = 'max-height: 41px; width: auto';
      child.querySelector('div.flex').className = '';
    });

  } else {
    setTimeout(render_videolist, 100);
  }
}
render_navbar();
render_videolist();