Force native video controls

force-native-video-controls.user.js

/*
In full screen, force videos to use native browser controls.

Tested in Violentmonkey, fails in Greasemonkey 4 as of 4.11.

Unsurpisingly, this experiment causes sundy problems with various streaming
sites. Its use is *not* recommended.

Copyright 2022 Josiah Ulfers
This work is free. You can redistribute it and/or modify it under the
terms of the Do What The Fuck You Want To Public License, Version 2,
as published by Sam Hocevar. See http://www.wtfpl.net/ for more details.
*/
// ==UserScript==
// @name        Force native video controls
// @namespace   http://josiahulfers.com/force-native-video-controls
// @version     3
// @grant       GM_addStyle
// @description Forces videos in full screen to use native controls
// @updateURL   https://gist.githubusercontent.com/julfers/467cad9864e533a3f46380364640fdb9/raw/force-native-video-controls.user.js
// ==/UserScript==

GM_addStyle(
  // Not available in Greasemonkey 4 as of version 4.11 and injecting styles
  // without GM_addStyle runs afoul of content security policies
  '.ksx-fullscreen-video:not(video) > :not(.ksx-fullscreen-video) '
  + '{ display: none; }')

let requestFull = Element.prototype.requestFullscreen || Element.prototype.mozRequestFullScreen

function forceRequestFullToVideo() {
  // Monkey patch for ``requestFullscreen`` to force the full screen element
  // to be the video instead of some containing element. If the full screen
  // element isn't a video, Firefox doesn't auto-hide the mouse cursor and
  // sometimes doesn't auto-hide the controls for reasons I don't understand.
  //
  // Need to monkey patch instead of doing this in the onfullscreenchange handler
  // because Firefox only lets you request full screen from a user-initiated
  // event handler.
  let vid = this.querySelector('video')
  return vid ? requestFull.apply(vid)
  					 : requestFull.apply(this)
}

exportFunction(
  // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts#exportfunction
  forceRequestFullToVideo, Element.prototype, {defineAs: 'requestFullscreen'})

;(function () {
    var resetProps = {},
        video = null

    function onFull(onfull) {
        if (video) {    
            var fsv = Array.from(document.getElementsByClassName('ksx-fullscreen-video'))
            for (var i = 0; i < fsv.length; i++)
                fsv[i].classList.remove('ksx-fullscreen-video')
            if (video) {
                video.tabIndex = resetProps.tabIndex
                video.controls = resetProps.controls
                video = null
            }
        }
        var fse = document.fullscreenElement
        video = fse && fse.matches('video') ? fse : undefined
        if (video) {
            resetProps.tabIndex = video.tabIndex
            resetProps.controls = video.controls
            video.controls = false
            video.click()
            video.tabIndex = 0
            video.controls = true
            video.focus()
            var node = video
            while (node.parentElement) {
                node.classList.add('ksx-fullscreen-video')
                node = node.parentElement
            }
        }
    }

    document.addEventListener('fullscreenchange', onFull, true)
})()