Instagram - Video Player Control.
// ==UserScript==
// @name Instagram - Video Player Control
// @namespace http://tampermonkey.net/
// @version 1.7
// @description Instagram - Video Player Control.
// @author Martin______X
// @match https://www.instagram.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=instagram.com
// @grant none
// @license MIT
// ==/UserScript==
let $url = "";
let $loaded = false;
let $setup = {
muted: false,
volume: 0.5
};
const instagramVideoInterval = setInterval(() => {
try {
if(!$loaded){
load_storage();
}
//stop_dialog();
article_reset();
let videos = document.querySelectorAll("video");
for (let i = 0; i < videos.length; i++) {
let video = videos[i];
let url = document.URL;
if (!video.hasAttribute("controls") || $url!=url) {
url_check(video);
$url = url;
}
video.muted = false;
video.volume = $setup.volume;
}
} catch (error) {
//console.warn(error);
}
}, 1);
const article_reset = () => {
const articles = document.querySelectorAll("article");
for(let i=0; i < articles.length; i++){
let art = articles[i];
if(!art.hasAttribute("seq-reset")){
const seq_buttons = art.getElementsByClassName("_afxv _al46 _al47");
if(seq_buttons.length>0){
simpleClick(seq_buttons[0]);
}
art.setAttribute("seq-reset","");
}
}
}
const simpleClick = (async (target) => {
if (target) {
target.click();
}
});
const stop_dialog = () =>{
const dialog = document.querySelector('div[aria-modal="true"][role="dialog"]');
if(dialog && !dialog.hasAttribute("dis-event")){
dialog.addEventListener('click', function(event) {
let isClickable = event.target.closest('button, a');
if (!isClickable) {
event.stopImmediatePropagation();
}
}, true);
dialog.setAttribute("dis-event","");
}
}
const url_check = (video)=>{
let url = document.URL;
if(url.includes("instagram.com/reels/")){
show_video_control(video);
keep_reels_ui(video);
}else if(url.includes("instagram.com/stories/")){
keep_stories_ui(video);
}else{
show_video_control(video);
keep_homepage_ui(video);
}
}
const show_video_control = (video)=>{
video.style.objectFit = 'contain';
video.setAttribute("controls", "");
video.setAttribute("controlsList", "nodownload noplaybackrate");
video.setAttribute("disablePictureInPicture", "");
video.onvolumechange = volume_event;
}
const remove_video_control = (video)=>{
video.removeAttribute("controls");
video.removeAttribute("controlsList");
video.removeAttribute("disablePictureInPicture");
video.onvolumechange = null;
}
const keep_reels_ui = (video)=>{
let parent = get_parent_elements(video, 8);
let instancekey = parent.querySelector('[data-instancekey]');
instancekey.style.visibility = 'hidden';
let presentation = instancekey.querySelector('[role="presentation"]');
let info = presentation.firstElementChild.lastElementChild;
info.style.visibility = 'visible';
info.style.position = 'absolute';
info.style.top = '0';
info.style.bottom = 'auto';
let children = info.firstElementChild.firstElementChild;
const a_list = children.querySelectorAll("a");
for(let i=0; i<a_list.length; i++){
let temp = a_list[i].firstElementChild;
if(temp){
temp.style.setProperty('backdrop-filter', 'none', 'important');
temp.style.setProperty('-webkit-backdrop-filter', 'none', 'important');
temp.style.setProperty('filter', 'none', 'important');
temp.style.background = 'transparent';
}
}
}
const keep_homepage_ui = (video)=>{
let a = get_parent_elements(video, 16);
if(a.tagName === "A"){
a.removeAttribute('href');
a.style.cursor = 'default';
}
let parent = get_parent_elements(video, 8);
let instancekey = parent.querySelector('[data-instancekey]');
instancekey.style.visibility = 'hidden';
let divs = instancekey.firstElementChild.children;
let button_divs = [];
for(let i = 0; i < divs.length; i++){
if(divs[i].querySelector("button")){
button_divs.push(divs[i]);
}
}
if(button_divs.length==2){
let temp = button_divs[1];
temp.style.visibility = 'visible';
temp.style.bottom = '80px';
}
}
const keep_stories_ui = (video)=>{
// video.setAttribute("controls","always-show");
// let parent = get_parent_elements(video, 10);
// let bottom_ui = parent.nextElementSibling.firstElementChild;
// //bottom_ui.style.visibility = 'hidden';
// //
// bottom_ui.style.bottom = '70px';
// bottom_ui.style.backgroundColor = 'rgba(0, 0, 0, 0)';
// bottom_ui.style.backgroundImage = 'none';
// //
// bottom_ui = bottom_ui.firstElementChild;
// bottom_ui.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
// bottom_ui.style.borderRadius = '40px';
// let instancekey = video.parentElement.querySelector('[data-instancekey]');
// instancekey.style.visibility = 'hidden';
}
const volume_event = (event) => {
let video = event.target;
if(video.muted){
//console.warn("video.volume:" + video.volume + "----:video.muted+" + video.muted + "----:$setup.volume+" + $setup.volume);
}
if(video.volume === 1 && video.muted && $setup.volume !== 1){
//console.warn("video.volume === 1 && video.muted && $setup.volume !== 1");
video.muted = $setup.muted;
video.volume = $setup.volume;
return;
}
$setup.muted = video.muted;
$setup.volume = video.volume;
localStorage.setItem("ig_setup",JSON.stringify($setup));
}
const load_storage = ()=>{
//localStorage.clear();
let setup = localStorage.getItem("ig_setup");
if(setup!=null){
setup = JSON.parse(setup);
$setup.muted = setup.muted;
$setup.volume = setup.volume;
}
$loaded = true;
}
const get_parent_elements = (element, levels) => {
let current = element;
for (let i = 0; i < levels; i++) {
if (!current) return null;
current = current.parentElement;
}
return current;
};