Adds a button to open a direct, hotlinked video player in a modal, bypassing Pixeldrain limits. No need for a new tab. Also works with my Pixeldrain SRT Subtitle Injector.
// ==UserScript== // @name Pixeldrain Bypass Player (Modal Overlay) // @namespace pixeldrain-direct-player-modal // @version 3.1.2 // @description Adds a button to open a direct, hotlinked video player in a modal, bypassing Pixeldrain limits. No need for a new tab. Also works with my Pixeldrain SRT Subtitle Injector. // @author medy (logic inspired by Sak32009) // @license MIT // @match *://pixeldrain.com/u/* // @match *://pixeldrain.com/l/* // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js // @grant GM_addStyle // @grant unsafeWindow // @run-at document-end // @noframes // ==/UserScript== /* global bootstrap, jQuery */ // Inject the entire minified Bootstrap 5.3 CSS, scoped to our container class. (t=> { if(typeof GM_addStyle=="function") { GM_addStyle(t); return } const r=document.createElement("style"); r.textContent=t,document.head.append(r) }) (` .pd-player-scope { all:initial } .pd-player-scope * { all:revert } .pd-player-scope,.pd-player-scope[data-bs-theme=light] { --bs-blue:#0d6efd; --bs-indigo:#6610f2; --bs-purple:#6f42c1; --bs-pink:#d63384; --bs-red:#dc3545; --bs-orange:#fd7e14; --bs-yellow:#ffc107; --bs-green:#198754; --bs-teal:#20c997; --bs-cyan:#0dcaf0; --bs-black:#000; --bs-white:#fff; --bs-gray:#6c757d; --bs-gray-dark:#343a40; --bs-gray-100:#f8f9fa; --bs-gray-200:#e9ecef; --bs-gray-300:#dee2e6; --bs-gray-400:#ced4da; --bs-gray-500:#adb5bd; --bs-gray-600:#6c757d; --bs-gray-700:#495057; --bs-gray-800:#343a40; --bs-gray-900:#212529; --bs-primary:#0d6efd; --bs-secondary:#6c757d; --bs-success:#198754; --bs-info:#0dcaf0; --bs-warning:#ffc107; --bs-danger:#dc3545; --bs-light:#f8f9fa; --bs-dark:#212529; --bs-primary-rgb:13,110,253; --bs-secondary-rgb:108,117,125; --bs-success-rgb:25,135,84; --bs-info-rgb:13,202,240; --bs-warning-rgb:255,193,7; --bs-danger-rgb:220,53,69; --bs-light-rgb:248,249,250; --bs-dark-rgb:33,37,41; --bs-primary-text-emphasis:#052c65; --bs-secondary-text-emphasis:#2b2f32; --bs-success-text-emphasis:#0a3622; --bs-info-text-emphasis:#055160; --bs-warning-text-emphasis:#664d03; --bs-danger-text-emphasis:#58151c; --bs-light-text-emphasis:#495057; --bs-dark-text-emphasis:#495057; --bs-primary-bg-subtle:#cfe2ff; --bs-secondary-bg-subtle:#e2e3e5; --bs-success-bg-subtle:#d1e7dd; --bs-info-bg-subtle:#cff4fc; --bs-warning-bg-subtle:#fff3cd; --bs-danger-bg-subtle:#f8d7da; --bs-light-bg-subtle:#fcfcfd; --bs-dark-bg-subtle:#ced4da; --bs-primary-border-subtle:#9ec5fe; --bs-secondary-border-subtle:#c4c8cb; --bs-success-border-subtle:#a3cfbb; --bs-info-border-subtle:#9eeaf9; --bs-warning-border-subtle:#ffe69c; --bs-danger-border-subtle:#f1aeb5; --bs-light-border-subtle:#e9ecef; --bs-dark-border-subtle:#adb5bd; --bs-white-rgb:255,255,255; --bs-black-rgb:0,0,0; --bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0)); --bs-body-font-family:var(--bs-font-sans-serif); --bs-body-font-size:1rem; --bs-body-font-weight:400; --bs-body-line-height:1.5; --bs-body-color:#212529; --bs-body-color-rgb:33,37,41; --bs-body-bg:#fff; --bs-body-bg-rgb:255,255,255; --bs-emphasis-color:#000; --bs-emphasis-color-rgb:0,0,0; --bs-secondary-color:rgba(33,37,41,.75); --bs-secondary-color-rgb:33,37,41; --bs-secondary-bg:#e9ecef; --bs-secondary-bg-rgb:233,236,239; --bs-tertiary-color:rgba(33,37,41,.5); --bs-tertiary-color-rgb:33,37,41; --bs-tertiary-bg:#f8f9fa; --bs-tertiary-bg-rgb:248,249,250; --bs-heading-color:inherit; --bs-link-color:#0d6efd; --bs-link-color-rgb:13,110,253; --bs-link-decoration:underline; --bs-link-hover-color:#0a58ca; --bs-link-hover-color-rgb:10,88,202; --bs-code-color:#d63384; --bs-highlight-color:#212529; --bs-highlight-bg:#fff3cd; --bs-border-width:1px; --bs-border-style:solid; --bs-border-color:#dee2e6; --bs-border-color-translucent:rgba(0,0,0,.175); --bs-border-radius:.375rem; --bs-border-radius-sm:.25rem; --bs-border-radius-lg:.5rem; --bs-border-radius-xl:1rem; --bs-border-radius-xxl:2rem; --bs-border-radius-2xl:var(--bs-border-radius-xxl); --bs-border-radius-pill:50rem; --bs-box-shadow:0 .5rem 1rem rgba(0,0,0,.15); --bs-box-shadow-sm:0 .125rem .25rem rgba(0,0,0,.075); --bs-box-shadow-lg:0 1rem 3rem rgba(0,0,0,.175); --bs-box-shadow-inset:inset 0 1px 2px rgba(0,0,0,.075); --bs-focus-ring-width:.25rem; --bs-focus-ring-opacity:.25; --bs-focus-ring-color:rgba(13,110,253,.25); --bs-form-valid-color:#198754; --bs-form-valid-border-color:#198754; --bs-form-invalid-color:#dc3545; --bs-form-invalid-border-color:#dc3545 } .pd-player-scope[data-bs-theme=dark] { color-scheme:dark; --bs-body-color:#dee2e6; --bs-body-color-rgb:222,226,230; --bs-body-bg:#212529; --bs-body-bg-rgb:33,37,41; --bs-emphasis-color:#fff; --bs-emphasis-color-rgb:255,255,255; --bs-secondary-color:rgba(222,226,230,.75); --bs-secondary-color-rgb:222,226,230; --bs-secondary-bg:#343a40; --bs-secondary-bg-rgb:52,58,64; --bs-tertiary-color:rgba(222,226,230,.5); --bs-tertiary-color-rgb:222,226,230; --bs-tertiary-bg:#2b3035; --bs-tertiary-bg-rgb:43,48,53; --bs-primary-text-emphasis:#6ea8fe; --bs-secondary-text-emphasis:#a7acb1; --bs-success-text-emphasis:#75b798; --bs-info-text-emphasis:#6edff6; --bs-warning-text-emphasis:#ffda6a; --bs-danger-text-emphasis:#ea868f; --bs-light-text-emphasis:#f8f9fa; --bs-dark-text-emphasis:#dee2e6; --bs-primary-bg-subtle:#031633; --bs-secondary-bg-subtle:#161719; --bs-success-bg-subtle:#051b11; --bs-info-bg-subtle:#032830; --bs-warning-bg-subtle:#332701; --bs-danger-bg-subtle:#2c0b0e; --bs-light-bg-subtle:#343a40; --bs-dark-bg-subtle:#1a1d20; --bs-primary-border-subtle:#084298; --bs-secondary-border-subtle:#41464b; --bs-success-border-subtle:#0f5132; --bs-info-border-subtle:#087990; --bs-warning-border-subtle:#997404; --bs-danger-border-subtle:#842029; --bs-light-border-subtle:#495057; --bs-dark-border-subtle:#343a40; --bs-heading-color:inherit; --bs-link-color:#6ea8fe; --bs-link-hover-color:#8bb9fe; --bs-link-color-rgb:110,168,254; --bs-link-hover-color-rgb:139,185,254; --bs-code-color:#e685b5; --bs-highlight-color:#dee2e6; --bs-highlight-bg:#664d03; --bs-border-color:#495057; --bs-border-color-translucent:rgba(255,255,255,.15); --bs-form-valid-color:#75b798; --bs-form-valid-border-color:#75b798; --bs-form-invalid-color:#ea868f; --bs-form-invalid-border-color:#ea868f } .pd-player-scope *,.pd-player-scope :before,.pd-player-scope :after { box-sizing:border-box } .pd-player-scope h1,.pd-player-scope h2,.pd-player-scope h3,.pd-player-scope h4,.pd-player-scope h5,.pd-player-scope h6 { margin-top:0; margin-bottom:.5rem; font-weight:500; line-height:1.2; color:var(--bs-heading-color) } .pd-player-scope .btn-close { --bs-btn-close-color:#000; --bs-btn-close-bg:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e\"); --bs-btn-close-opacity:.5; --bs-btn-close-hover-opacity:.75; --bs-btn-close-focus-shadow:0 0 0 .25rem rgba(13,110,253,.25); --bs-btn-close-focus-opacity:1; --bs-btn-close-disabled-opacity:.25; --bs-btn-close-white-filter:invert(1) grayscale(100%) brightness(200%); box-sizing:content-box; width:1em; height:1em; padding:.25em .25em; color:var(--bs-btn-close-color); background:transparent var(--bs-btn-close-bg) center/1em auto no-repeat; border:0; border-radius:.375rem; opacity:var(--bs-btn-close-opacity) } .pd-player-scope .btn-close:hover { color:var(--bs-btn-close-color); text-decoration:none; opacity:var(--bs-btn-close-hover-opacity) } .pd-player-scope .btn-close:focus { outline:0; box-shadow:var(--bs-btn-close-focus-shadow); opacity:var(--bs-btn-close-focus-opacity) } .pd-player-scope .btn-close:disabled,.pd-player-scope .btn-close.disabled { pointer-events:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; opacity:var(--bs-btn-close-disabled-opacity) } .pd-player-scope .btn-close-white,.pd-player-scope[data-bs-theme=dark] .btn-close { filter:var(--bs-btn-close-white-filter) } .pd-player-scope .modal { --bs-modal-zindex:1055; --bs-modal-width:500px; --bs-modal-padding:1rem; --bs-modal-margin:.5rem; --bs-modal-color:; --bs-modal-bg:var(--bs-body-bg); --bs-modal-border-color:var(--bs-border-color-translucent); --bs-modal-border-width:var(--bs-border-width); --bs-modal-border-radius:var(--bs-border-radius-lg); --bs-modal-box-shadow:var(--bs-box-shadow-sm); --bs-modal-inner-border-radius:calc(var(--bs-border-radius-lg) - var(--bs-border-width)); --bs-modal-header-padding-x:1rem; --bs-modal-header-padding-y:1rem; --bs-modal-header-padding:1rem 1rem; --bs-modal-header-border-color:var(--bs-border-color); --bs-modal-header-border-width:var(--bs-border-width); --bs-modal-title-line-height:1.5; --bs-modal-footer-gap:.5rem; --bs-modal-footer-bg:; --bs-modal-footer-border-color:var(--bs-border-color); --bs-modal-footer-border-width:var(--bs-border-width); position:fixed; top:0; left:0; z-index:var(--bs-modal-zindex); display:none; width:100%; height:100%; overflow-x:hidden; overflow-y:auto; outline:0 } .pd-player-scope .modal-dialog { position:relative; width:auto; margin:var(--bs-modal-margin); pointer-events:none } .pd-player-scope .modal.fade .modal-dialog { transition:transform .3s ease-out; transform:translate(0,-50px) } @media (prefers-reduced-motion:reduce) { .pd-player-scope .modal.fade .modal-dialog { transition:none } } .pd-player-scope .modal.show .modal-dialog { transform:none } .pd-player-scope .modal.modal-static .modal-dialog { transform:scale(1.02) } .pd-player-scope .modal-dialog-scrollable { height:calc(100% - var(--bs-modal-margin)*2) } .pd-player-scope .modal-dialog-scrollable .modal-content { max-height:100%; overflow:hidden } .pd-player-scope .modal-dialog-scrollable .modal-body { overflow-y:auto } .pd-player-scope .modal-dialog-centered { display:flex; align-items:center; min-height:calc(100% - var(--bs-modal-margin)*2) } .pd-player-scope .modal-content { position:relative; display:flex; flex-direction:column; width:100%; color:var(--bs-modal-color); pointer-events:auto; background-color:var(--bs-modal-bg); background-clip:padding-box; border:var(--bs-modal-border-width) solid var(--bs-modal-border-color); border-radius:var(--bs-modal-border-radius); outline:0 } .modal-backdrop { --bs-backdrop-zindex:1050; --bs-backdrop-bg:#000; --bs-backdrop-opacity:.5; position:fixed; top:0; left:0; z-index:var(--bs-backdrop-zindex); width:100vw; height:100vh; background-color:var(--bs-backdrop-bg) } .modal-backdrop.fade { opacity:0 } .modal-backdrop.show { opacity:var(--bs-backdrop-opacity) } .pd-player-scope .modal-header { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; padding:var(--bs-modal-header-padding); border-bottom:var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color); border-top-left-radius:var(--bs-modal-inner-border-radius); border-top-right-radius:var(--bs-modal-inner-border-radius) } .pd-player-scope .modal-header .btn-close { padding:calc(var(--bs-modal-header-padding-y)*.5) calc(var(--bs-modal-header-padding-x)*.5); margin:calc(var(--bs-modal-header-padding-y)*-.5) calc(var(--bs-modal-header-padding-x)*-.5) calc(var(--bs-modal-header-padding-y)*-.5) auto } .pd-player-scope .modal-title { margin-bottom:0; line-height:var(--bs-modal-title-line-height) } .pd-player-scope .modal-body { position:relative; flex:1 1 auto; padding:var(--bs-modal-padding) } .pd-player-scope .modal-footer { display:flex; flex-shrink:0; flex-wrap:wrap; align-items:center; justify-content:flex-end; padding:calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap)*.5); background-color:var(--bs-modal-footer-bg); border-top:var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color); border-bottom-right-radius:var(--bs-modal-inner-border-radius); border-bottom-left-radius:var(--bs-modal-inner-border-radius) } .pd-player-scope .modal-footer>* { margin:calc(var(--bs-modal-footer-gap)*.5) } @media (min-width:576px) { .pd-player-scope .modal { --bs-modal-margin:1.75rem; --bs-modal-box-shadow:var(--bs-box-shadow) } .pd-player-scope .modal-dialog { max-width:var(--bs-modal-width); margin-right:auto; margin-left:auto } .pd-player-scope .modal-sm { --bs-modal-width:300px } } @media (min-width:992px) { .pd-player-scope .modal-lg,.pd-player-scope .modal-xl { --bs-modal-width:800px } } @media (min-width:1200px) { .pd-player-scope .modal-xl { --bs-modal-width:1140px } } .pd-player-scope .fade { transition:opacity .15s linear } @media (prefers-reduced-motion:reduce) { .pd-player-scope .fade { transition:none } } .pd-player-scope .fade:not(.show) { opacity:0 } .pd-player-scope .p-0 { padding:0!important } .pd-player-scope .fw-bold { font-weight:700!important } .pd-player-scope .modal-body video { width:100%; max-height:calc(100vh - 100px); display:block; outline:none; background-color:#000; } `); (function($, bootstrap) { 'use strict'; // Use .noConflict to avoid clashes with the site's own jQuery if it has one. $ = $.noConflict(true); const SCRIPT_NAME = 'Pixeldrain Direct Player'; const BYPASS_URL_BASE = 'https://pd.cybar.xyz'; const CONTAINER_CLASS = 'pd-player-scope'; const MODAL_ID = 'pd-direct-player-modal'; let uiInitialized = false; // --- HTML Templates --- const MODAL_HTML = ` <div class="modal fade" id="$ { MODAL_ID } " tabindex="-1"> <div class="modal-dialog modal-xl modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title fw-bold">Direct Player</h5> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body p-0"> <!-- Video tag will be injected here --> </div> </div> </div> </div> `; /** * Finds the current file ID and checks if it's a video. * @returns { { id: string, name: string } |null } */ function getCurrentFileInfo() { // Primary Method: Read from the global viewer_data object. It's more comprehensive. if (typeof unsafeWindow.viewer_data?.api_response !== 'undefined') { const data = unsafeWindow.viewer_data; const api = data.api_response; // Handle list pages (/l/...) if (data.type === 'list' && data.file_id && api.files) { const currentFile = api.files.find(f => f.id === data.file_id); if (currentFile && currentFile.mime_type?.startsWith('video/')) { return { id: currentFile.id, name: currentFile.name }; } } // Handle single file pages (/u/...) else if (data.type === 'file' && api.id && api.mime_type?.startsWith('video/')) { return { id: api.id, name: api.name }; } } // Fallback Method: For initial load before viewer_data might be populated. const videoMetaTag = document.querySelector('meta[property="og:video"]'); if (videoMetaTag?.content) { const urlParts = videoMetaTag.content.split('/'); const fileId = urlParts.pop(); const fileName = document.title.split('~')[0].trim(); if (fileId) return { id: fileId, name: fileName }; } return null; } /** * Creates and injects the toolbar button. * @param { { id: string, name: string } } fileInfo */ function createOrUpdateButton(fileInfo) { const toolbar = document.querySelector('.toolbar'); const templateButton = document.querySelector('.toolbar_button'); const separatorTemplate = document.querySelector('.toolbar .separator'); if (!toolbar || !templateButton || !separatorTemplate) { console.log(`[$ { SCRIPT_NAME } ] Toolbar elements not found yet`); return false; } // Check if button already exists let directButton = document.querySelector('#pd-direct-player-btn'); if (!directButton) { // Create the button using Pixeldrain's template directButton = templateButton.cloneNode(true); directButton.id = 'pd-direct-player-btn'; directButton.removeAttribute('href'); directButton.removeAttribute('title'); directButton.querySelector('i').textContent = 'play_arrow'; directButton.querySelector('span').textContent = 'Play Direct'; directButton.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const currentId = directButton.getAttribute('data-file-id'); const currentName = directButton.getAttribute('data-file-name'); if (currentId) { createAndShowModal(currentId, currentName); } }); // Insert into toolbar (after the last separator) const newSeparator = separatorTemplate.cloneNode(true); separatorTemplate.parentNode.insertBefore(newSeparator, separatorTemplate.nextSibling); newSeparator.parentNode.insertBefore(directButton, newSeparator.nextSibling); console.log(`[$ { SCRIPT_NAME } ] Direct player button created`); } // Update button data directButton.setAttribute('data-file-id', fileInfo.id); directButton.setAttribute('data-file-name', fileInfo.name); return true; } /** * Removes the toolbar button if it exists. */ function removeButton() { const directButton = document.querySelector('#pd-direct-player-btn'); if (directButton) { // Also remove the separator that was added with it const prevSeparator = directButton.previousElementSibling; if (prevSeparator && prevSeparator.classList.contains('separator')) { prevSeparator.remove(); } directButton.remove(); console.log(`[$ { SCRIPT_NAME } ] Direct player button removed`); } } /** * Creates the Bootstrap modal, injects the video player, and shows it. * @param { string } fileId * @param { string } fileName */ function createAndShowModal(fileId, fileName) { // Ensure we have our container let $container = $(`.$ { CONTAINER_CLASS } `); if (!$container.length) { $container = $('<div>').addClass(CONTAINER_CLASS).attr('data-bs-theme', 'dark').appendTo('body'); } // Remove any old modal instance first $(`#$ { MODAL_ID } `).remove(); const videoUrl = `$ { BYPASS_URL_BASE } /$ { fileId } `; const $modal = $(MODAL_HTML); $modal.find('.modal-title').text(fileName); const $video = $('<video>').attr( { src: videoUrl, controls: true, autoplay: true }); $modal.find('.modal-body').append($video); $modal.appendTo($container); const modalInstance = new bootstrap.Modal($modal[0]); // Add event listener for when the modal is closed, to stop the video and clean up. $modal[0].addEventListener('hidden.bs.modal', event => { const videoEl = $modal.find('video')[0]; if (videoEl) { videoEl.pause(); videoEl.src = ''; // Detach the source } modalInstance.dispose(); $modal.remove(); // Remove from DOM }); modalInstance.show(); console.log(`[$ { SCRIPT_NAME } ] Modal opened for $ { fileName } `); } /** * Main execution logic. */ function run() { const fileInfo = getCurrentFileInfo(); if (fileInfo) { console.log(`[$ { SCRIPT_NAME } ] Video detected: $ { fileInfo.name } ($ { fileInfo.id }) `); const buttonCreated = createOrUpdateButton(fileInfo); if (!buttonCreated) { // If we couldn't create the button, try again later setTimeout(run, 1000); } } else { console.log(`[$ { SCRIPT_NAME } ] No video detected on this page/view.`); removeButton(); } } /** * Sets up UI when toolbar is available. */ function setupUI() { if (uiInitialized) return; const toolbar = document.querySelector('.toolbar'); const templateButton = document.querySelector('.toolbar_button'); const separatorTemplate = document.querySelector('.toolbar .separator'); if (!toolbar || !templateButton || !separatorTemplate) { console.log(`[$ { SCRIPT_NAME } ] Toolbar not ready yet, retrying...`); return false; } uiInitialized = true; console.log(`[$ { SCRIPT_NAME } ] UI Initialized`); // Run initial setup run(); return true; } // --- Script Entry Point --- function initializeScript() { // Wait for document body to be available if (!document.body) { setTimeout(initializeScript, 100); return; } // Try to setup UI immediately if (setupUI()) { return; // Success } // If immediate setup failed, use observer const observer = new MutationObserver((mutations, obs) => { if (setupUI()) { obs.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true }); // Fallback timeout setTimeout(() => { if (!uiInitialized) { console.log(`[$ { SCRIPT_NAME } ] Fallback initialization`); setupUI(); } }, 3000); } // Start initialization if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initializeScript); } else { initializeScript(); } // Listen for hash changes on list pages to update the button for the new file. $(window).on('hashchange', function() { // Give the site's JS time to update viewer_data setTimeout(run, 200); }); }) (jQuery, bootstrap);
