Adds Picture-in-Picture (PiP) and loop controls to supported HTML5 video players.
// ==UserScript==
// @name chimo-chimo-loop
// @name:zh-CN chimo-chimo-loop
// @namespace https://github.com/ryu-dayo/chimo-chimo-loop
// @version 0.2.2
// @description Adds Picture-in-Picture (PiP) and loop controls to supported HTML5 video players.
// @description:zh-CN 为支持的网站的视频播放器添加画中画（PiP）和循环播放按钮。
// @author ryu-dayo
// @match https://www.douyin.com/*
// @match https://www.instagram.com/*
// @match https://www.xiaohongshu.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=douyin.com
// @grant none
// @license MIT
// ==/UserScript==
(function () {
'use strict';
// Inline base64-encoded SVG icons
const icons = {
enterPip: 'data:image/svg+xml,%3Csvg%20width%3D%22101%22%20height%3D%2282%22%20viewBox%3D%220%200%20101%2082%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.4512%2063.2813H68.2129C76.5625%2063.2813%2080.6641%2059.2285%2080.6641%2051.0254V12.2559C80.6641%204.0527%2076.5625%200%2068.2129%200H12.4512C4.10158%200%200%204.0527%200%2012.2559V51.0254C0%2059.2285%204.10158%2063.2813%2012.4512%2063.2813ZM7.03128%2050.6348V12.6465C7.03128%208.9356%209.03318%207.0313%2012.5489%207.0313H68.1153C71.6309%207.0313%2073.6328%208.9356%2073.6328%2012.6465V50.6348C73.6328%2054.3457%2071.6309%2056.25%2068.1153%2056.25H12.5489C9.03318%2056.25%207.03128%2054.3457%207.03128%2050.6348Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M30.957%2016.8457C30.8105%2015.625%2029.1991%2014.209%2027.6366%2015.8692L23.4374%2019.9707L17.5781%2014.1113C16.5527%2013.0371%2014.8437%2013.0371%2013.8183%2014.1113C12.7441%2015.1367%2012.7441%2016.8457%2013.8183%2017.8711L19.6777%2023.7305L15.5761%2027.9297C13.9159%2029.4922%2015.332%2031.1035%2016.5527%2031.25L30.664%2033.3984C31.3476%2033.4961%2032.0312%2033.252%2032.5195%2032.8125C32.9589%2032.3242%2033.2031%2031.6406%2033.1054%2030.957L30.957%2016.8457Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M50.4883%2081.6407H87.6953C95.9964%2081.6407%20100.146%2077.5879%20100.146%2069.3848V44.7754C100.146%2036.6211%2095.9964%2032.5195%2087.6953%2032.5195H50.4883C42.1875%2032.5195%2038.0371%2036.5723%2038.0371%2044.7754V69.3848C38.0371%2077.5879%2042.1875%2081.6407%2050.4883%2081.6407Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E',
exitPip: 'data:image/svg+xml,%3Csvg%20width%3D%22101%22%20height%3D%2282%22%20viewBox%3D%220%200%20101%2082%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.4512%2063.2813H68.2129C76.5625%2063.2813%2080.6641%2059.2285%2080.6641%2051.0254V12.2559C80.6641%204.0527%2076.5625%200%2068.2129%200H12.4512C4.10158%200%200%204.0527%200%2012.2559V51.0254C0%2059.2285%204.10158%2063.2813%2012.4512%2063.2813ZM7.03128%2050.6348V12.6465C7.03128%208.9356%209.03318%207.0313%2012.5489%207.0313H68.1153C71.6309%207.0313%2073.6328%208.9356%2073.6328%2012.6465V50.6348C73.6328%2054.3457%2071.6309%2056.25%2068.1153%2056.25H12.5489C9.03318%2056.25%207.03128%2054.3457%207.03128%2050.6348Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M15.1366%2029.8827C15.2831%2031.1034%2016.9433%2032.4706%2018.5058%2030.8593L22.6562%2026.7577L28.5644%2032.6171C29.5898%2033.6425%2031.2988%2033.6425%2032.3241%2032.6171C33.3495%2031.5917%2033.3495%2029.8827%2032.3241%2028.8573L26.4648%2022.9491L30.5663%2018.7987C32.1777%2017.2362%2030.8105%2015.5761%2029.5409%2015.4296L15.4784%2013.33C14.746%2013.2323%2014.1113%2013.4765%2013.623%2013.9159C13.1835%2014.4042%2012.9394%2015.0878%2013.037%2015.7714L15.1366%2029.8827Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M50.4883%2081.6407H87.6953C95.9964%2081.6407%20100.146%2077.5879%20100.146%2069.3848V44.7754C100.146%2036.6211%2095.9964%2032.5195%2087.6953%2032.5195H50.4883C42.1875%2032.5195%2038.0371%2036.5723%2038.0371%2044.7754V69.3848C38.0371%2077.5879%2042.1875%2081.6407%2050.4883%2081.6407Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E',
enableLoop: 'data:image/svg+xml,%3Csvg%20width%3D%2299%22%20height%3D%2266%22%20viewBox%3D%220%200%2099%2066%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M28.1739%2065.8691H70.6543C87.6953%2065.8691%2098.8284%2054.834%2098.8284%2037.7441C98.8284%2020.6543%2087.6953%209.47259%2070.6543%209.47259H62.2559C60.3028%209.47259%2058.7403%2011.084%2058.7403%2012.9883C58.7403%2014.9414%2060.3028%2016.5527%2062.2559%2016.5527H70.6543C83.252%2016.5527%2091.7964%2025.1465%2091.7964%2037.7441C91.7964%2050.3418%2083.252%2058.8379%2070.6543%2058.8379H28.1739C15.5274%2058.8379%207.03128%2050.3418%207.03128%2037.7441C7.03128%2025.1465%2015.5274%2016.5527%2028.1739%2016.5527H33.3496C33.1055%2015.332%2032.959%2014.0625%2032.959%2012.7441C32.959%2011.6699%2033.0567%2010.5957%2033.252%209.52149L28.1739%209.47259C11.0352%209.32619%200%2020.6543%200%2037.7441C0%2054.834%2011.0352%2065.8691%2028.1739%2065.8691Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M51.3672%2025.4394C58.4473%2025.4394%2064.1114%2019.7266%2064.1114%2012.6953C64.1114%205.6641%2058.4473%200%2051.3672%200C44.336%200%2038.6719%205.6641%2038.6719%2012.6953C38.6719%2019.7266%2044.336%2025.4394%2051.3672%2025.4394ZM51.3672%2018.6035C48.0957%2018.6035%2045.5078%2015.9668%2045.5078%2012.6953C45.5078%209.375%2048.0957%206.8359%2051.3672%206.8359C54.7364%206.8359%2057.2754%209.375%2057.2754%2012.6953C57.2754%2015.9668%2054.7364%2018.6035%2051.3672%2018.6035Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E',
disableLoop: 'data:image/svg+xml,%3Csvg%20width%3D%2299%22%20height%3D%2266%22%20viewBox%3D%220%200%2099%2066%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M28.1739%2065.8691H70.6543C87.6953%2065.8691%2098.8284%2054.834%2098.8284%2037.7441C98.8284%2020.6543%2087.6953%209.47259%2070.6543%209.47259H62.2559C60.3028%209.47259%2058.7403%2011.084%2058.7403%2012.9883C58.7403%2014.9414%2060.3028%2016.5527%2062.2559%2016.5527H70.6543C83.252%2016.5527%2091.7964%2025.1465%2091.7964%2037.7441C91.7964%2050.3418%2083.252%2058.8379%2070.6543%2058.8379H28.1739C15.5274%2058.8379%207.03128%2050.3418%207.03128%2037.7441C7.03128%2025.1465%2015.5274%2016.5527%2028.1739%2016.5527H33.3496C33.1055%2015.332%2032.959%2014.0625%2032.959%2012.7441C32.959%2011.6699%2033.0567%2010.5957%2033.252%209.52149L28.1739%209.47259C11.0352%209.32619%200%2020.6543%200%2037.7441C0%2054.834%2011.0352%2065.8691%2028.1739%2065.8691Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M51.3672%2025.4394C58.4473%2025.4394%2064.1114%2019.7266%2064.1114%2012.6953C64.1114%205.6641%2058.4473%200%2051.3672%200C44.336%200%2038.6719%205.6641%2038.6719%2012.6953C38.6719%2019.7266%2044.336%2025.4394%2051.3672%2025.4394Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E',
};
const MIN_VIDEO_WIDTH = 300;
const MIN_VIDEO_HEIGHT = 200;
const BTN = 16;
let currentPipButton = null;
let currentVideo = null;
const isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
// === Styles ===
const injectStyle = () => {
if (!document.querySelector('style[data-from="chimo-loop"]')) {
const style = document.createElement('style');
style.setAttribute('data-from', 'chimo-loop');
style.textContent = `
#controls-bar {
position: absolute;
top: 6px;
left: 6px;
z-index: 999;
display: inline-flex;
will-change: z-index;
cursor: default;
height: 31px;
}
.background-tint, .background-tint > div {
position: absolute;
width: 100%;
height: 100%;
border-radius: 8px;
pointer-events: none;
}
.background-tint > .blur {
background-color: rgba(0, 0, 0, 0.55);
backdrop-filter: saturate(180%) blur(17.5px);
-webkit-backdrop-filter: saturate(180%) blur(17.5px);
}
.background-tint > .tint {
background-color: rgba(255, 255, 255, 0.14);
mix-blend-mode: lighten;
}
.pip-button, .loop-button {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-width: 0;
background-color: transparent !important;
appearance: none;
transition: opacity 0.1s linear;
}
.picture {
background-color: rgba(255, 255, 255, 1);
mix-blend-mode: plus-lighter;
mask-size: 100% 100%;
mask-repeat: no-repeat;
transition: transform 150ms;
will-change: transform;
pointer-events: none;
}
.pip-button:active picture,
.loop-button:active picture {
transform: scale(0.89);
}
#buttons-container {
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
padding: 0 16px;
}
#controls-bar.hidden {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
#controls-bar.visible {
opacity: 1;
pointer-events: auto;
transition: opacity 0.3s ease;
}
`;
document.head.appendChild(style);
}
};
const getActiveVideo = () => {
const videos = Array.from(document.querySelectorAll('video'));
if (videos.length === 0) return null;
// Filter: Only consider videos that are visible in the viewport and sufficiently large
const filtered = videos.filter(v => {
const rect = v.getBoundingClientRect();
return rect.width > MIN_VIDEO_WIDTH && rect.height > MIN_VIDEO_HEIGHT && rect.bottom > 0 && rect.top < window.innerHeight;
});
if (filtered.length === 0) return null;
const playing = filtered.find(v => !v.paused && !v.ended);
if (playing && !playing.__chimoControlsAttached) return playing;
// Prefer videos without existing controls
const unpatched = filtered.find(v => !v.__chimoControlsAttached);
if (unpatched) return unpatched;
// Fallback: select the video element closest to the center of the screen
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
let best = null;
let minDist = Infinity;
for (const v of filtered) {
const rect = v.getBoundingClientRect();
const dx = rect.left + rect.width / 2 - centerX;
const dy = rect.top + rect.height / 2 - centerY;
const dist = dx * dx + dy * dy;
if (dist < minDist) {
best = v;
minDist = dist;
}
}
return best;
};
// Glassmorphic background (blur and tint) for the control bar
const buildBackgroundTint = () => {
const backgroundTint = document.createElement('div');
backgroundTint.id = 'background-tint';
backgroundTint.classList.add('background-tint');
const blur = document.createElement('div');
blur.classList.add('blur');
const tint = document.createElement('div');
tint.classList.add('tint');
backgroundTint.append(blur, tint);
return backgroundTint;
};
const createButton = ({ className, onClick }) => {
const picture = document.createElement('picture');
picture.classList.add('picture');
picture.style.width = `${BTN}px`;
picture.style.height = `${BTN}px`;
const button = document.createElement('button');
button.classList.add(className);
button.style.pointerEvents = 'auto';
button.append(picture);
button.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
onClick?.();
});
return button;
};
// Ensure PiP attributes and iframe permissions are set
const ensurePipEnabled = (video) => {
if (!video) return false;
try {
// Remove disablepictureinpicture attribute if present
if (video.hasAttribute('disablepictureinpicture')) {
video.removeAttribute('disablepictureinpicture');
}
// Set disablePictureInPicture property to false if supported
if ('disablePictureInPicture' in video) {
try { video.disablePictureInPicture = false; } catch (_) { }
}
// Ensure iframe allows picture-in-picture if inside an iframe
const frame = window.frameElement;
if (frame && frame.tagName === 'IFRAME') {
const allow = frame.getAttribute('allow') || '';
if (!/picture-in-picture/.test(allow)) {
frame.setAttribute('allow', (allow ? allow + ';' : '') + 'picture-in-picture');
}
}
return true;
} catch (e) {
console.warn('[chimo] Failed to ensure PiP enabled:', e);
return false;
}
};
const updatePipButton = () => {
if (!currentPipButton || !currentVideo) return;
const isInPip = document.pictureInPictureElement === currentVideo;
const pipBase64 = isInPip ? icons.exitPip : icons.enterPip;
currentPipButton.querySelector('picture').style.maskImage = `url('${pipBase64}')`;
};
const createPipButton = (video) => {
if (!document.pictureInPictureEnabled || !ensurePipEnabled(video)) return null;
const supportsSafariPip = typeof video.webkitSetPresentationMode === 'function';
if (isSafari && !supportsSafariPip) return null;
const togglePip = () => {
if (!video) {
console.log("[chimo-chimo-loop]Video not found");
return;
}
if (isSafari) {
const mode = video.webkitPresentationMode;
video.webkitSetPresentationMode(mode === 'picture-in-picture' ? 'inline' : 'picture-in-picture');
console.log(mode);
return;
}
if (document.pictureInPictureElement === video) {
document.exitPictureInPicture().catch(err => console.warn(err));
console.log("[chimo-chimo-loop]Exit PiP");
} else {
video.requestPictureInPicture().catch(err => console.warn(err));
console.log("[chimo-chimo-loop]Request PiP");
}
};
const btn = createButton({ className: 'pip-button', onClick: togglePip });
currentVideo = video;
currentPipButton = btn;
updatePipButton();
return btn;
};
const createLoopButton = (video) => {
// Update loop icon to reflect current loop state
const updateLoopButton = () => {
const loopBase64 = video?.loop ? icons.disableLoop : icons.enableLoop;
btn.querySelector('picture').style.maskImage = `url('${loopBase64}')`;
};
const toggleLoop = () => {
if (!video) {
console.log("[chimo-chimo-loop]Video not found");
return;
}
video.loop = !video.loop;
updateLoopButton();
};
const btn = createButton({ className: 'loop-button', onClick: toggleLoop });
updateLoopButton();
return btn;
};
const buildButtonsContainer = (video) => {
const buttonsContainer = document.createElement('div');
buttonsContainer.id = 'buttons-container';
buttonsContainer.classList.add('buttons-container');
const pipBtn = createPipButton(video);
const loopBtn = createLoopButton(video);
if (pipBtn) buttonsContainer.append(pipBtn);
if (loopBtn) buttonsContainer.append(loopBtn);
return buttonsContainer;
};
const buildControlsBar = (video) => {
const backgroundTint = buildBackgroundTint();
const buttonsContainer = buildButtonsContainer(video);
// Root element for the control bar
const controlsBar = document.createElement('div');
controlsBar.id = 'controls-bar';
controlsBar.classList.add('hidden', 'controls-bar');
controlsBar.append(backgroundTint, buttonsContainer);
return controlsBar;
};
const attachControls = (video, controlsBar) => {
// Attach to the video's parent if possible
const parent = video.parentElement || document.body;
const parentStyle = getComputedStyle(parent);
if (parentStyle.position === 'static') {
parent.style.position = 'relative';
}
parent.appendChild(controlsBar);
};
const setupAutoHide = (controlsBar, targetElement) => {
let hideTimeout;
const showControls = () => {
controlsBar.classList.remove('hidden');
controlsBar.classList.add('visible');
clearTimeout(hideTimeout);
hideTimeout = setTimeout(() => {
controlsBar.classList.remove('visible');
controlsBar.classList.add('hidden');
}, 3000);
};
// Show controls on user interaction
targetElement.addEventListener('pointermove', showControls, { passive: true });
targetElement.addEventListener('touchstart', showControls, { passive: true });
showControls();
};
const initializeControls = (video) => {
if (video.__chimoControlsAttached) return;
video.__chimoControlsAttached = true;
injectStyle();
const controlsBar = buildControlsBar(video);
attachControls(video, controlsBar);
setupAutoHide(controlsBar, video.parentElement);
};
// === Observers ===
const observeVideoDom = () => {
let moTimer = null;
const observer = new MutationObserver((mutations) => {
if (!mutations.some(mutation => mutation.type === 'childList')) return;
if (moTimer) return;
moTimer = requestAnimationFrame(() => {
moTimer = null;
const video = getActiveVideo();
if (video) initializeControls(video);
});
});
observer.observe(document.body, { childList: true, subtree: true });
};
const setupGlobalPipEvents = () => {
document.addEventListener("enterpictureinpicture", updatePipButton);
document.addEventListener("leavepictureinpicture", updatePipButton);
};
// === Init ===
const main = () => {
setupGlobalPipEvents();
observeVideoDom();
};
main();
})();