BAMBIENT

Bilibili Ambient Mode
当前为 2024-01-19 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         BAMBIENT
// @version      1.0.6
// @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 () => {
  for (;;) {
    const videoPlayer = document.querySelector('#bilibili-player');
    const video = videoPlayer?.querySelector('video');
    if (videoPlayer && video) {
      // eslint-disable-next-line no-undef
      if (player?.getBlackGap?.()) player.setBlackGap?.(false);
      videoPlayer.style.setProperty('box-shadow', 'none', 'important');
      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 =
            '0px';
        bambient.style.filter = 'blur(48px)';
      }
      bambient.style.marginBottom = `${
        videoPlayer.querySelector('.bpx-player-sending-area')?.offsetHeight ||
        46
      }px`;
      let [cinematic0, cinematic1] = [
        bambient.querySelector('#cinematic0'),
        bambient.querySelector('#cinematic1'),
      ];
      if (!cinematic0) {
        cinematic0 = document.createElement('canvas');
        bambient.append(cinematic0);
        cinematic0.id = 'cinematic0';
        cinematic0.style.position = 'absolute';
        cinematic0.style.width = cinematic0.style.height = '100%';
        cinematic0.style.transition = 'opacity 5s';
        cinematic0.style.opacity = '1';
      }
      if (cinematic0.width !== video.videoWidth) {
        cinematic0.width = video.videoWidth;
      }
      if (cinematic0.height !== video.videoHeight) {
        cinematic0.height = video.videoHeight;
      }
      if (!cinematic1) {
        cinematic1 = document.createElement('canvas');
        bambient.append(cinematic1);
        cinematic1.id = 'cinematic1';
        cinematic1.style.position = 'absolute';
        cinematic1.style.width = cinematic1.style.height = '100%';
        cinematic1.style.transition = 'opacity 5s';
        cinematic1.style.opacity = '0';
      }
      if (cinematic1.width !== video.videoWidth) {
        cinematic1.width = video.videoWidth;
      }
      if (cinematic1.height !== video.videoHeight) {
        cinematic1.height = video.videoHeight;
      }
      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(5000);
      continue;
    }
    await sleep(1000);
  }
});
欢迎访问Greasy Fork镜像
