S = Site mode: ${getSiteOnlyText()}
${!siteSaved ? '' : '
R = Reset to global size
'}
Esc = Cancel
`;
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', resizeDone);
document.addEventListener('keydown', resizeKeyDown);
e.stopImmediatePropagation();
return false;
function getSiteOnlyText() {
return saveAs === 'site' ? `only ${location.hostname}` : 'global';
}
function resize(e) {
let deltaX = e.movementX || e.webkitMovementX || e.mozMovementX || 0;
if (/right/.test(div.getAttribute('pinned')))
deltaX = -deltaX;
const newSize = constrainPinnedSize(div, div.clientWidth + deltaX);
if (newSize.w !== div.clientWidth) {
div.style.setProperty('width', newSize.w + 'px', 'important');
div.style.setProperty('height', newSize.h + 'px', 'important');
gripper.removeAttribute('tried-exceeding');
} else if (newSize.triedExceeding) {
gripper.setAttribute('tried-exceeding', '');
}
window.getSelection().removeAllRanges();
return false;
}
function resizeDone() {
div.draggable = oldDraggable;
gripper.removeAttribute('tried-exceeding');
gripper.innerHTML = '';
document.removeEventListener('mousemove', resize);
document.removeEventListener('mouseup', resizeDone);
document.removeEventListener('keydown', resizeKeyDown);
switch (saveAs) {
case 'site':
localStorage[`width#${location.hostname}`] = div.clientWidth;
break;
case 'global':
cfg.pinnedWidth = div.clientWidth;
GM_setValue('pinnedWidth', cfg.pinnedWidth);
// fallthrough to remove the locally saved value
case 'reset':
localStorage.removeItem(`width#${location.hostname}`);
break;
case '':
return false;
}
gripper.setAttribute('saveAs', saveAs);
setTimeout(() => gripper.removeAttribute('saveAs'), 250);
return false;
}
function resizeKeyDown(e) {
switch (e.code) {
case 'Escape':
saveAs = 'cancel';
div.style.width = oldSizeCSS.w;
div.style.height = oldSizeCSS.h;
break;
case 'KeyS':
saveAs = saveAs === 'site' ? 'global' : 'site';
$('[save-as]', gripper).setAttribute('save-as', saveAs);
$('[save-as] span', gripper).textContent = getSiteOnlyText();
return false;
case 'KeyR': {
if (!siteSaved)
return;
saveAs = 'reset';
const {w, h} = constrainPinnedSize(div, cfg.pinnedWidth);
div.style.width = w;
div.style.height = h;
break;
}
default:
return;
}
document.dispatchEvent(new MouseEvent('mouseup'));
return false;
}
}
}
function makeDraggable(div) {
div.draggable = true;
div.addEventListener('dragstart', e => {
const offsetY = e.offsetY || e.clientY - div.getBoundingClientRect().top;
if (offsetY > div.clientHeight - 30) {
e.preventDefault();
return;
}
e.dataTransfer.setData('text/plain', '');
let dropZone = $create('div.dragndrop-placeholder');
const dropZoneHeight = 400 / div.FYTE.cache.videoWidth * div.FYTE.cache.videoHeight;
document.body.addEventListener('dragenter', dragHandler);
document.body.addEventListener('dragover', dragHandler);
document.body.addEventListener('dragend', dragHandler);
document.body.addEventListener('drop', dragHandler);
function dragHandler(e) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
switch (e.type) {
case 'dragover': {
const playing = div.hasAttribute('playing');
const stub = e.target.closest('.instant-youtube-container[stub]') === div.FYTE.stub &&
div.FYTE.stub;
const gizmo = playing && !stub
? {left: 0, top: 0, right: innerWidth, bottom: innerHeight}
: (stub || div).getBoundingClientRect();
const x = e.clientX;
const y = e.clientY;
const cx = (gizmo.left + gizmo.right) / 2;
const cy = (gizmo.top + gizmo.bottom) / 2;
const stay = !!stub || y >= cy - 200 && y <= cy + 200 && x >= cx - 200 && x <= cx + 200;
overrideCSS(dropZone, {
top: y < cy || stay ? '0' : 'auto',
bottom: y > cy || stay ? '0' : 'auto',
left: x < cx || stay ? '0' : 'auto',
right: x > cx || stay ? '0' : 'auto',
width: playing && stay && stub ? stub.clientWidth + 'px' : '400px',
height: playing && stay && stub ? stub.clientHeight + 'px' : dropZoneHeight + 'px',
margin: playing && stay ? 'auto' : '0',
position: !playing && stay || stub ? 'absolute' : 'fixed',
'background-color': stub ?
'rgba(0,0,255,0.5)' :
stay ? 'rgba(255,255,0,0.4)' : 'rgba(0,255,0,0.2)',
});
adjustPinnedOffset(dropZone, div);
(stay && !playing || stub ? (stub || div) : document.body).appendChild(dropZone);
break;
}
case 'dragend':
case 'drop': {
const corner = calcPinnedCorner(dropZone);
dropZone.remove();
dropZone = null;
document.body.removeEventListener('dragenter', dragHandler);
document.body.removeEventListener('dragover', dragHandler);
document.body.removeEventListener('dragend', dragHandler);
document.body.removeEventListener('drop', dragHandler);
if (e.type === 'dragend')
break;
if (div.hasAttribute('playing'))
(corner ? $(`[pin="${corner}"]`, div) : div.FYTE.stub).click();
else
startPlaying(div, {pin: corner});
}
}
}
});
}
function adjustPinnedOffset(el, self, corner) {
let offset = 0;
if (!corner) corner = calcPinnedCorner(el);
for (const pin of $$(`.instant-youtube-container[pinned] [pin="${corner}"][active]`)) {
const container = pin.closest('[pinned]');
if (container !== el && container !== self) {
const {top, bottom} = container.getBoundingClientRect();
offset = Math.max(offset, el.style.top === '0px' ? bottom : innerHeight - top);
}
}
if (offset)
el.style[el.style.top === '0px' ? 'top' : 'bottom'] = offset + 'px';
}
function calcPinnedCorner(el) {
const t = el.style.top !== 'auto';
const l = el.style.left !== 'auto';
const r = el.style.right !== 'auto';
const b = el.style.bottom !== 'auto';
return t && b && l && r ? '' : `${t ? 'top' : 'bottom'}-${l ? 'left' : 'right'}`;
}
function constrainPinnedSize(div, width) {
const maxWidth = window.innerWidth - 100 | 0;
const triedExceeding = (width | 0) > maxWidth;
width = Math.max(200, Math.min(maxWidth, width | 0));
return {
w: width,
h: width / div.FYTE.cache.videoWidth * div.FYTE.cache.videoHeight,
triedExceeding,
};
}
function showOptions(e) {
const [options] = translateHTML(`