Tampermonkey: Force enable picture-in-picture on Crunchyroll, as of Nov 2024

force_enable_pip.js

// ==UserScript==
// @name         Force enable PiP on Crunchyroll
// @namespace    http://tampermonkey.net/
// @version      2024-11-01
// @description  Adds a "Force PiP" button to the top of the Crunchyroll Vilos player
// @author       tobebuilds.com
// @match        https://static.crunchyroll.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=crunchyroll.com
// @grant        none
// ==/UserScript==

/*
Copyright 2024 Tobe Osakwe

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the “Software”), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

(function() {
    'use strict';

    function main() {
        // Remove 'display: flex', so the button isn't huge.
        document.body.style.display = 'initial';
        
        function enablePip() {
            var videos = Array.from(document.querySelectorAll('video'));
            if (!videos.length) {
                alert("enablePip error: No video found on page");
                return;
            }

            // Assume the first video is the player
            var video = videos[0];

            if (video.disablePictureInPicture) {
                video.disablePictureInPicture = false;
            }
            
            video.controls = true;
            video.requestPictureInPicture().then(function(result) {
                // Enjoy picture-in-picture anime
                console.log('enablePip: forced', {video, result});
            }).catch(function (e) {
                // Notify user of failure
                console.error('enablePip: failed', e, {video});

                if (e instanceof Error) {
                    alert("enablePip error: " + e.message);
                } else {
                    alert("enablePip error");
                }
            });
        }


        // Make a "Force PIP" button
        var button = document.createElement('button');
        button.onclick = enablePip;
        button.textContent = "Force PiP";
        document.body.prepend(button);
    }

    // Set up listener on page load. If the load event has already fired, set it up now.
    if (document.readyState == "complete" || document.readyState == "loaded" || document.readyState == "interactive") {
        main();
    } else {
        document.addEventListener("DOMContentLoaded", function(event) {
            main();
        });
    }
})();