BAMBIENT

Bilibili Ambient Mode
当前为 2024-01-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         BAMBIENT
// @version      1.0.0
// @description  Bilibili Ambient Mode
// @author       jamesliu96
// @license      MIT
// @namespace    https://jamesliu.info/
// @homepage     https://gist.github.com/jamesliu96/03775eba64ff6b26efd6ee2676354f52
// @match        https://*.bilibili.com/*
// @icon         https://www.bilibili.com/favicon.ico
// @connect      bilibili.com
// ==/UserScript==

const sleep = (t) => new Promise((r) => setTimeout(r, t));

addEventListener('load', async () => {
  let videoPlayer, video;
  while (
    (videoPlayer = document.querySelector('#bilibili-player')) &&
    (video = videoPlayer.querySelector('video'))
  ) {
    if (player?.getBlackGap?.()) {
      player.setBlackGap?.(false);
    }
    let bambient = videoPlayer.querySelector('#bambient');
    if (!bambient) {
      bambient = document.createElement('div');
      videoPlayer.prepend(bambient);
      bambient.id = 'bambient';
      bambient.style.pointerEvents = 'none';
      bambient.style.position = 'absolute';
      bambient.style.top =
        bambient.style.right =
        bambient.style.bottom =
        bambient.style.left =
          '0';
      bambient.style.filter = 'blur(32px)';
    }
    let [cinematic0, cinematic1] = [
      bambient.querySelector('#cinematic0'),
      bambient.querySelector('#cinematic1'),
    ];
    if (!cinematic0) {
      cinematic0 = document.createElement('canvas');
      bambient.append(cinematic0);
      cinematic0.id = 'cinematic0';
      cinematic0.width = video.videoWidth;
      cinematic0.height = video.videoHeight;
      cinematic0.style.position = 'absolute';
      cinematic0.style.width = cinematic0.style.height = '100%';
      cinematic0.style.transition = 'opacity 5s';
      cinematic0.style.opacity = '1';
    }
    if (!cinematic1) {
      cinematic1 = document.createElement('canvas');
      bambient.append(cinematic1);
      cinematic1.id = 'cinematic1';
      cinematic1.width = video.videoWidth;
      cinematic1.height = video.videoHeight;
      cinematic1.style.position = 'absolute';
      cinematic1.style.width = cinematic1.style.height = '100%';
      cinematic1.style.transition = 'opacity 5s';
      cinematic1.style.opacity = '0';
    }
    if (cinematic0.style.opacity === '1') {
      cinematic1
        .getContext('2d')
        .drawImage(video, 0, 0, cinematic1.width, cinematic1.height);
      cinematic0.style.opacity = '0';
      cinematic1.style.opacity = '1';
    } else {
      cinematic0
        .getContext('2d')
        .drawImage(video, 0, 0, cinematic0.width, cinematic0.height);
      cinematic0.style.opacity = '1';
      cinematic1.style.opacity = '0';
    }
    await sleep(10000);
  }
});
欢迎访问Greasy Fork镜像
