niconico-live-video-flipper.user.js

// ==UserScript==
// @name   Niconico Live Video Flipper
// @match  https://live.nicovideo.jp/watch/*
// @match  https://live2.nicovideo.jp/watch/*
// ==/UserScript==
(function() {
  const addonControllerEl = document.querySelector('[class^="___addon-controller___"]');
  if (!addonControllerEl) {
    console.error('Addon controller element is not found.');
    return;
  }

  const baseButton = addonControllerEl.querySelector('[class^="___fullscreen-button___"');
  if (!baseButton) {
    console.error('Base button element is not found.');
    return;
  }

  const toggleIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 485.383 485.383"><path d="M481.345 152.845L442.302 19.978a7.17 7.17 0 00-6.104-5.065 7.078 7.078 0 00-7.006 3.627L407.07 58.621c-95.252-78.141-233.536-78.177-328.786-.014L56.192 18.539c-1.376-2.508-4.16-3.948-7.036-3.627-2.85.304-5.244 2.316-6.073 5.065L4.039 152.845a7.108 7.108 0 001.822 7.053c1.822 1.869 4.545 2.559 7.069 1.837l132.818-39.054c2.783-.816 4.795-3.231 5.081-6.092.357-2.863-1.117-5.645-3.643-7.02l-31.735-17.506c74.932-57.07 179.535-57.057 254.467 0l-31.752 17.506a7.151 7.151 0 00-3.645 7.02c.319 2.861 2.304 5.275 5.081 6.092l132.852 39.054c2.529.722 5.244.032 7.069-1.837a7.106 7.106 0 001.822-7.053zM176.067 346.448L31.353 228.72a11.92 11.92 0 00-12.66-1.516 11.92 11.92 0 00-6.811 10.772v235.469c0 4.608 2.654 8.81 6.811 10.776a11.916 11.916 0 0012.66-1.52L176.067 364.96a11.947 11.947 0 004.411-9.256 11.948 11.948 0 00-4.411-9.256zM242.689 170.114c-9.047 0-16.37 7.32-16.37 16.369v259.881c0 9.049 7.323 16.373 16.37 16.373 9.051 0 16.375-7.324 16.375-16.373V186.483c0-9.048-7.324-16.369-16.375-16.369zM466.691 227.204a11.917 11.917 0 00-12.66 1.516L309.317 346.448a11.944 11.944 0 00-4.411 9.256c0 3.597 1.629 6.986 4.411 9.256L454.03 482.702a11.918 11.918 0 0012.66 1.52 11.922 11.922 0 006.81-10.776V237.977a11.917 11.917 0 00-6.809-10.773z"/></svg>`;
  const toggleButtonEl = document.createElement('button');
  toggleButtonEl.className = baseButton.className;
  toggleButtonEl.innerHTML = toggleIconSvg;
  toggleButtonEl.setAttribute('aria-label', '映像を左右反転');
  toggleButtonEl.addEventListener('click', function() {
    const videoEl = document.querySelector('[class^="___video-layer"] video');
    if (!videoEl) {
      console.error('Video element is not found.');
      return;
    }

    const flipTransform = 'scale(-1, 1)';
    if (videoEl.style.transform !== flipTransform) {
      videoEl.style.transform = flipTransform;
      toggleButtonEl.setAttribute('aria-pressed', 'true');
    } else {
      videoEl.style.transform = '';
      toggleButtonEl.setAttribute('aria-pressed', 'false');
    }
  });

  addonControllerEl.prepend(toggleButtonEl);
})();