Adds the possibility to switch to/from bordered fullscreen, use some hotkeys inside YouTube fullscreen mode, and other features
// ==UserScript==
// @name Watch2Gether Improver
// @namespace NLinconScripts
// @version 2024-08-29
// @description Adds the possibility to switch to/from bordered fullscreen, use some hotkeys inside YouTube fullscreen mode, and other features
// @author NLincon
// @license GPL-3.0-or-later
// @match https://w2g.tv/*/room/*
// @match https://www.youtube.com/embed/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=w2g.tv
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addValueChangeListener
// @require http://code.jquery.com/jquery-1.11.3.min.js
// ==/UserScript==
var $ = window.jQuery;
var isInterfaceChanged = false;
$(document).ready(function () {
if (location.hostname === 'w2g.tv') {
// COMMENTED DUE TO PLAYBACK FREEZE DEFECT
// ---------------------------------------
// Automatically join the room with an auto-generated nickname
// TODO: Comment this section if you want to set different custom nicknames for each session
// $('#intro-modal').ready(function() {
// setTimeout(function() {
// // TODO: Uncomment and change your permanent nickname if necessary
// // document.getElementById('intro-nickname').value = 'Cool Nickname';
// const event = new Event('change');
// document.getElementById('intro-nickname').dispatchEvent(event);
// $('#w2g-join-button').trigger("click");
// }, 300);
// });
// ---------------------------------------
// remove 'Popular Videos' section
$('.w2g-editorial').remove();
// create custom events to fire w2g hotkeys events
createCustomEvents();
window.addEventListener('keydown', function (e) {
// TODO: Change key code to switch bordered fullscreen if necessary
if (e.code === 'NumpadAdd') {
e.preventDefault();
isInterfaceChanged = !isInterfaceChanged;
var displayValue = isInterfaceChanged ? 'none' : '';
var height = isInterfaceChanged ? '100vh' : 'auto';
var minWidth = isInterfaceChanged ? 'auto' : '800px';
var maxWidth = isInterfaceChanged ? 'auto' : 'calc(177.777vh - 40.8871px - 6.2222rem)';
var marginLeft = isInterfaceChanged ? '1rem' : '0';
// hide/show elements
$('.h-screen.shrink-0').css('display', displayValue); // left side panel with logo and settings
$('.bg-w2g-very-dark-var').css('display', displayValue); // top side panel with search
$('#w2g-right').css('display', displayValue); // right side panel with history, playlists, chat
$('.bg-w2g-dark-userlist').css('display', displayValue); // down side panel with users
// change elements style to activate/deactivate bordered fullscreen mode
$('#player_container').css('height', height);
$('.w2g-player-width').css('min-width', minWidth);
$('.w2g-player-width').css('max-width', maxWidth);
$('.w2g-player-width').css('marin-left', marginLeft);
}
});
}
if (location.hostname === 'www.youtube.com') {
// activate only when location contains player.w2g.tv
if (!location.search.includes("player.w2g.tv")) {
return;
}
// for some reason YouTube Embed can hide the info bar in Firefox
// show the info bar if it disappeared
var moviePlayer = document.getElementById('movie_player');
var className = 'ytp-hide-info-bar';
if (moviePlayer.classList.contains(className)) {
moviePlayer.classList.remove(className);
}
// disable pause/unpause click on YouTube player
var playerOverlayElement = document.createElement('div');
playerOverlayElement.style.cssText = 'width: 100%; height: 100%; position: absolute; z-index: 10;';
playerOverlayElement.addEventListener('dblclick', function (e) {
var dblClickEvent = new MouseEvent('dblclick', {
'bubbles': true,
'cancelable': true
});
moviePlayer.dispatchEvent(dblClickEvent);
})
moviePlayer.appendChild(playerOverlayElement);
window.addEventListener('keydown', function (e) {
switch (e.code) {
case ('Space'):
GM_setValue('pauseFired', Math.random());
break;
case ('ArrowLeft'):
GM_setValue('moveBackFired', Math.random());
break;
case ('ArrowRight'):
GM_setValue('moveForwardFired', Math.random());
break;
}
});
}
})
function createCustomEvents() {
GM_addValueChangeListener('pauseFired', function () {
const pauseEvent = new KeyboardEvent('keydown', {
key: 'k',
bubbles: true
});
document.documentElement.dispatchEvent(pauseEvent);
});
GM_addValueChangeListener('moveBackFired', function () {
const keyLeftEvent = new KeyboardEvent('keydown', {
key: 'ArrowLeft',
bubbles: true
});
document.documentElement.dispatchEvent(keyLeftEvent);
});
GM_addValueChangeListener('moveForwardFired', function () {
const keyRightEvent = new KeyboardEvent('keydown', {
key: 'ArrowRight',
bubbles: true
});
document.documentElement.dispatchEvent(keyRightEvent);
});
}