Change on load default HTML5 video behavior
// ==UserScript==
// @name HTML5 video settings
// @name:ru Настройки HTML5 видео
// @namespace html5-video-settings
// @author smut
// @version 2020.09.30.1
// @icon https://img.icons8.com/color/344/video.png
// @description Change on load default HTML5 video behavior
// @description:ru Изменение дефолтных параметров воспроизведения HTML5 видео
// @grant GM_log
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_listValues
// @grant GM_registerMenuCommand
// @grant GM.cookie
// @grant GM_util
// @grant GM_util.timeout
// @grant unsafeWindow
// @grant window.close
// @exclude /^https?:\/\/([^.]+\.)*?(youtube\.com|coub\.com|youtu\.be|pikabu\.ru)([:/]|$)/
// @match *://*/*
// ==/UserScript==
(function() {
'use strict';
const win = (unsafeWindow || window);
const
_Document = Object.getPrototypeOf(HTMLDocument.prototype),
_Element = Object.getPrototypeOf(HTMLElement.prototype);
const
_Node = Object.getPrototypeOf(_Element);
const
isSafari =
Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 ||
(function (p) {
return p.toString() === "[object SafariRemoteNotification]";
})(!window.safari || window.safari.pushNotification),
isFirefox = 'InstallTrigger' in win,
inIFrame = (win.self !== win.top);
const
_bindCall = fun => Function.prototype.call.bind(fun),
_getAttribute = _bindCall(_Element.getAttribute),
_setAttribute = _bindCall(_Element.setAttribute),
_removeAttribute = _bindCall(_Element.removeAttribute),
_hasOwnProperty = _bindCall(Object.prototype.hasOwnProperty),
_toString = _bindCall(Function.prototype.toString),
_document = win.document,
_de = _document.documentElement,
_appendChild = _Document.appendChild.bind(_de),
_removeChild = _Document.removeChild.bind(_de),
_createElement = _Document.createElement.bind(_document),
_querySelector = _Document.querySelector.bind(_document),
_querySelectorAll = _Document.querySelectorAll.bind(_document),
_attachShadow = ('attachShadow' in _Element) ? _bindCall(_Element.attachShadow) : null,
_apply = Reflect.apply,
_construct = Reflect.construct;
let skipLander = true;
try {
skipLander = !(isFirefox && 'StopIteration' in win);
} catch (ignore) {}
const jsf = (function () {
const opts = {};
let getValue = (a, b) => b,
setValue = () => null,
listValues = () => [];
try {
[getValue, setValue, listValues] = [GM_getValue, GM_setValue, GM_listValues];
} catch (ignore) {}
// defaults
opts.Lang = 'eng';
opts.controls = true;
opts.loop = false;
opts.autoplay = false;
opts.muted = false;
// load actual values
for (let name of listValues())
opts[name] = getValue(name, opts[name]);
const checkName = name => {
if (!_hasOwnProperty(opts, name))
throw new Error('Attempt to access missing option value.');
return true;
};
return new Proxy(opts, {
get(opts, name) {
if (name === 'toString')
return () => JSON.stringify(opts);
if (checkName(name))
return opts[name];
},
set(opts, name, value) {
if (checkName(name)) {
opts[name] = value;
setValue(name, value);
}
return true;
}
});
})();
if (isFirefox && _document.constructor.prototype.toString() === '[object ImageDocumentPrototype]')
return;
if (!NodeList.prototype[Symbol.iterator])
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
if (!HTMLCollection.prototype[Symbol.iterator])
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
if (GM.cookie === undefined)
GM.cookie = {
list: () => ({
then: () => null
})
};
const
batchLand = [],
batchPrepend = new Set(),
_APIString = `const win = window, isFirefox = ${isFirefox}, inIFrame = ${inIFrame}, _document = win.document, _de = _document.documentElement,
_Document = Object.getPrototypeOf(HTMLDocument.prototype), _Element = Object.getPrototypeOf(HTMLElement.prototype), _Node = Object.getPrototypeOf(_Element),
_appendChild = _Document.appendChild.bind(_de), _removeChild = _Document.removeChild.bind(_de), skipLander = ${skipLander},
_createElement = _Document.createElement.bind(_document), _querySelector = _Document.querySelector.bind(_document),
_querySelectorAll = _Document.querySelectorAll.bind(_document), _bindCall = fun => Function.prototype.call.bind(fun),
_getAttribute = _bindCall(_Element.getAttribute), _setAttribute = _bindCall(_Element.setAttribute),
_removeAttribute = _bindCall(_Element.removeAttribute), _hasOwnProperty = _bindCall(Object.prototype.hasOwnProperty),
_toString = _bindCall(Function.prototype.toString), _apply = Reflect.apply, _construct = Reflect.construct;
const GM = { info: { version: '0.0', scriptHandler: null }, cookie: { list: () => ({ then: () => null }) } };
const jsf = ${jsf.toString()}`,
landScript = (f, pre) => {
const script = _createElement('script');
script.textContent = `(()=>{${_APIString}${[...pre].join(';')};(${f.join(')();(')})();})();`;
_appendChild(script);
_removeChild(script);
},
startdelay = 2000,
clickdelay = 1000,
playdelay = 200;
var first_load_mute = false;
var play_click_iframe = false;
var play_click_timeout;
let scriptLander = f => f();
if (!skipLander) {
scriptLander = (func, ...prepend) => {
prepend.forEach(x => batchPrepend.add(x));
batchLand.push(func);
};
_document.addEventListener(
'DOMContentLoaded', () => void(scriptLander = (f, ...prep) => landScript([f], prep)), false
);
}
function play_click_switch(play_switch) {
play_click_iframe = play_switch;
}
function html5_video_set(play_click) {
for (var e of document.getElementsByTagName('video')){
if (jsf.controls){
e.setAttribute('controls', '');
e.controls = "controls";
if (play_click){
if (window.location.hostname === 'www.instagram.com'){
var instaoverlay = document.querySelector('.PyenC');
var isntacontrol = document.querySelector('.fXIG0');
//console.log (instaoverlay);
if(document.querySelector('.PyenC')){
instaoverlay.parentNode.removeChild(instaoverlay);
}
if(document.querySelector('.fXIG0')){
isntacontrol.parentNode.removeChild(isntacontrol);
}
}
}
}else{
e.removeAttribute('controls');
e.controls = "";
}
if (jsf.loop){
e.setAttribute('loop', '');
e.loop = "loop";
}else{
e.removeAttribute('loop');
e.loop = "";
}
if (jsf.muted && !play_click){
e.setAttribute('muted', '');
e.muted = "muted";
first_load_mute = true;
}else{
e.removeAttribute('muted');
}
if (jsf.autoplay && !play_click){
//console.log("autoplay");
e.setAttribute('autoplay', '');
e.autoplay = "autoplay";
e.play();
}else if (!play_click){
e.removeAttribute('autoplay');
e.autoplay = "";
e.pause();
//console.log("pause");
}
};
}
const createStyle = (function createStyleModule() {
function createStyleElement(rules, opts) {
const style = _createElement('style');
Object.assign(style, opts.props);
opts.root.appendChild(style);
if (style.sheet) // style.sheet is only available when style attached to DOM
rules.forEach(style.sheet.insertRule.bind(style.sheet));
else
style.textContent = rules.join('\n');
if (opts.protect) {
Object.defineProperty(style, 'sheet', {
value: null,
enumerable: true
});
Object.defineProperty(style, 'disabled', { //pretend to be disabled
enumerable: true,
set() {},
get() {
return true;
}
});
(new MutationObserver(
() => opts.root.removeChild(style)
)).observe(style, {
childList: true
});
}
return style;
}
// functions to parse object-based rulesets
function parseRule(rec) {
/* jshint validthis: true */
return this.concat(rec[0], ' {\n', Object.entries(rec[1]).map(parseProperty, this + '\t').join('\n'), '\n', this, '}');
}
function parseProperty(rec) {
/* jshint validthis: true */
return rec[1] instanceof Object ? parseRule.call(this, rec) : `${this}${rec[0].replace(/_/g, '-')}: ${rec[1]};`;
}
// main
const createStyle = (rules, opts) => {
// parse options
opts = Object.assign({
protect: true,
root: _de,
type: 'text/css'
}, opts);
// move style properties into separate property
// { a, b, ...rest } construction is not available in Fx 52
opts.props = Object.assign({}, opts);
delete opts.props.protect;
delete opts.props.root;
// store binded methods instead of element
opts.root = {
appendChild: opts.root.appendChild.bind(opts.root),
removeChild: opts.root.removeChild.bind(opts.root)
};
// convert rules set into an array if it isn't one already
rules = Array.isArray(rules) ? rules : rules instanceof Object ? Object.entries(rules).map(parseRule, '') : [rules];
// could be reassigned when protection triggered
let style = createStyleElement(rules, opts);
if (!opts.protect)
return style;
const replaceStyle = () => new Promise(
resolve => setTimeout(re => re(createStyleElement(rules, opts)), 0, resolve)
).then(st => (style = st)); // replace poiner to style object with a new style object
(new MutationObserver(ms => {
for (let m of ms)
for (let node of m.removedNodes)
if (node === style) replaceStyle();
})).observe(_de, {
childList: true
});
return style;
};
createStyle.toString = () => `const createStyle = (${createStyleModule.toString()})();`;
return createStyle;
})();
const lines = {
linked: [],
MenuOptions: {
eng: 'Options',
rus: 'Настройки'
},
langs: {
eng: 'English',
rus: 'Русский'
},
HeaderName: {
eng: 'HTML5 video settings',
rus: 'Настройки HTML5 видео'
},
HeaderTools: {
eng: 'Tools',
rus: 'Инструменты'
},
HeaderOptions: {
eng: 'Options',
rus: 'Настройки'
},
controlsLabel: {
eng: 'Show controls',
rus: 'Отображать элементы управления'
},
loopLabel: {
eng: 'Loop video',
rus: 'Повтор видео'
},
autoplayLabel: {
eng: 'Autoplay video',
rus: 'Автоматическое воспроизведение видео'
},
autoplayTip: {
eng: 'Autoplay may not working if "Mute sound" not enabled',
rus: 'Автовоспроизведение может не работать, если не установлен режим \"отключить звук\"'
},
mutedLabel: {
eng: 'Mute sound',
rus: 'Отключить звук'
},
reg(el, name) {
this[name].link = el;
this.linked.push(name);
},
setLang(lang = 'eng') {
for (let name of this.linked) {
const el = this[name].link;
const label = this[name][lang];
el.textContent = label;
}
this.langs.link.value = lang;
jsf.Lang = lang;
}
};
const _createTextNode = _Document.createTextNode.bind(_document);
const createOptionsWindow = () => {
const root = _createElement('div'),
shadow = _attachShadow ? _attachShadow(root, {
mode: 'closed'
}) : root,
overlay = _createElement('div'),
inner = _createElement('div');
overlay.id = 'overlay';
overlay.appendChild(inner);
shadow.appendChild(overlay);
inner.id = 'inner';
inner.br = function appendBreakLine() {
return this.appendChild(_createElement('br'));
};
createStyle({
'h2': {
margin_top: 0,
white_space: 'nowrap'
},
'h2, h3': {
margin_block_end: '0.5em'
},
'h4': {
margin_block_start: '0em',
margin_block_end: '0.5em',
margin_left: '0.4em',
font_family: 'Helvetica, Arial, sans-serif',
font_size: '8pt',
font_style: 'italic',
font_weight: 'normal'
},
'div, button, select, input': {
font_family: 'Helvetica, Arial, sans-serif',
font_size: '12pt'
},
'select': {
border: '1px solid darkgrey',
border_radius: '0px 0px 5px 5px',
border_top: '0px'
},
'#overlay': {
position: 'fixed',
top: 0,
left: 0,
bottom: 0,
right: 0,
background: 'rgba(0,0,0,0.65)',
z_index: 2147483647 // Highest z-index: Math.pow(2, 31) - 1
},
'#inner': {
background: 'whitesmoke',
color: 'black',
padding: '1.5em 1em 1.5em 1em',
max_width: '150ch',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
border: '1px solid darkgrey',
border_radius: '5px'
},
'#closeOptionsButton': {
float: 'right',
transform: 'translate(1em, -1.5em)',
border: 0,
border_radius: 0,
background: 'none',
box_shadow: 'none'
},
'#selectLang': {
float: 'right',
transform: 'translate(0, -1.5em)'
},
'.optionsLabel': {
padding_left: '1.5em',
text_indent: '-1em',
display: 'block'
},
'.optionsCheckbox': {
left: '-0.25em',
width: '1em',
height: '1em',
padding: 0,
margin: 0,
position: 'relative',
vertical_align: 'middle'
},
'@media (prefers-color-scheme: dark)': {
'#inner': {
background_color: '#292a2d',
color: 'white',
border: '1px solid #1a1b1e'
},
'input': {
filter: 'invert(100%)'
},
'select': {
background_color: '#303030',
color: '#f0f0f0',
border: '1px solid #1a1b1e',
border_radius: '0px 0px 5px 5px',
border_top: '0px'
},
'#overlay': {
background: 'rgba(0,0,0,.85)',
}
}
}, {
root: shadow,
protect: false
});
// components
function createCheckbox(name) {
const checkbox = _createElement('input'),
label = _createElement('label');
checkbox.type = 'checkbox';
checkbox.classList.add('optionsCheckbox');
checkbox.checked = jsf[name];
checkbox.id = name+'_checkbox';
checkbox.onclick = e => {
jsf[name] = e.target.checked;
return true;
};
label.classList.add('optionsLabel');
label.appendChild(checkbox);
const text = _createTextNode('');
label.appendChild(text);
Object.defineProperty(label, 'textContent', {
set(title) {
text.textContent = title;
}
});
return label;
}
// language & close
const closeBtn = _createElement('button');
closeBtn.onclick = () => _removeChild(root);
closeBtn.textContent = '\u2715';
closeBtn.id = 'closeOptionsButton';
inner.appendChild(closeBtn);
overlay.addEventListener('click', e => {
if (e.target === overlay) {
_removeChild(root);
e.preventDefault();
}
e.stopPropagation();
}, false);
const selectLang = _createElement('select');
for (let name in lines.langs) {
const langOption = _createElement('option');
langOption.value = name;
langOption.innerText = lines.langs[name];
selectLang.appendChild(langOption);
}
selectLang.id = 'selectLang';
lines.langs.link = selectLang;
inner.appendChild(selectLang);
selectLang.onchange = e => {
const lang = e.target.value;
lines.setLang(lang);
};
// fill options form
lines.reg(inner.appendChild(_createElement('h2')), 'HeaderName');
lines.reg(inner.appendChild(_createElement('h3')), 'HeaderOptions');
lines.reg(inner.appendChild(createCheckbox('controls')), 'controlsLabel');
lines.reg(inner.appendChild(createCheckbox('loop')), 'loopLabel');
lines.reg(inner.appendChild(createCheckbox('autoplay')), 'autoplayLabel');
lines.reg(inner.appendChild(_createElement('h4')), 'autoplayTip');
lines.reg(inner.appendChild(createCheckbox('muted')), 'mutedLabel');
lines.setLang(jsf.Lang);
return root;
};
let optionsWindow;
GM_registerMenuCommand(lines.MenuOptions[jsf.Lang], () => _appendChild(optionsWindow = optionsWindow || createOptionsWindow()));
if( document.readyState !== 'loading' ) {
setTimeout (function () {html5_video_set;}, startdelay);
} else {
document.addEventListener('DOMContentLoaded', function () {
setTimeout (function () {html5_video_set;}, startdelay);
});
}
function video_click(){
play_click_iframe = true;
//console.log("play_click_iframe = " + play_click_iframe);
if(play_click_iframe) {
clearTimeout(play_click_timeout);
play_click_timeout = setTimeout(function () {play_click_switch(false);}, clickdelay);
//setTimeout(function () {console.log("play_click_iframe = " + play_click_iframe);}, clickdelay+100);
}
//console.log("clicked");
};
document.addEventListener('play', function(e){
document.addEventListener('click', video_click, true);
setTimeout (function () {html5_video_set(play_click_iframe);}, playdelay);
//console.log("play");
}, true);
})();