☰

leminoViwerSizeTuner

Place a slider bar to adjust lemino viwer size.

// ==UserScript==
// @name            leminoViwerSizeTuner
// @namespace       https://greasyfork.org/ja/users/1328592-naoqv
// @description     Place a slider bar to adjust lemino viwer size.
// @description:ja  lemino ビューワーサイズ調整スライダーバー設置
// @version         0.4
// @match           https://lemino.docomo.ne.jp/*
// @grant           none
// @license         MIT
// ==/UserScript==


(() => {
  'use strict';

  // modalパーツのidは '*_madal'
  const REGEX_MODAL = /_modal/;

  const styleText = `
  #__next {
    z-index: 2147483646;
  }
  #slider-container {
    margin-top: 20px;
    width: 200px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    z-index:2147483647;
  }

  #size-display {
    margin-top: 10px;
    font-family: monospace;
  }`;

  const styleElem = document.createElement("style");
  styleElem.setAttribute("rel", "stylesheet");
  styleElem.textContent = styleText;
  document.head.appendChild(styleElem);

  const minScale = 0.5;
  const maxScale = 2.0;
  let baseWidth = Math.floor(window.screen.width/2.58);

  const htmltext = `
    <div id="slider-container">
      <label for="scale-slider">サイズ調整:</label>
      <input type="range" id="scale-slider" min="0.5" max="2" step="0.01" value="1">
      <div id="size-display">現在のサイズ: 200 × 150</div>
    </div>`;

  const VIDEO_SELECTOR = '[id$="_modal"] div:nth-child(5)';
  
  /**
   * ビューワーサイズを更新する
   * @param {number} scale 
   */
  function updateSize(scale) {
    // 制限内に収める
    scale = Math.min(Math.max(scale, minScale), maxScale);

    const newWidth = Math.round(baseWidth * scale);

    const video = document.querySelector(VIDEO_SELECTOR);
    video.style.width = `${newWidth}px`;

    const currentWidth = video.clientWidth;
    const currentHeight = video.clientHeight;

    const sizeDisplay = document.getElementById('size-display');
    sizeDisplay.textContent = `現在のサイズ: ${currentWidth} × ${currentHeight}`;
  }

  /**
   * 指定したidのタグ内にビューワーサイズ調整するスライダーを配置する
   * 
   * @param {string} スライダーを配置するタグのid属性
   */
  const placeSlider = (id) => {

    const video = document.querySelector(VIDEO_SELECTOR);
    if (!video) return;
    
    
    const vod = document.getElementById(id);
    vod.insertAdjacentHTML('beforeend', htmltext);

    const slider = document.getElementById('scale-slider');

    // 初期表示
    updateSize(parseFloat(slider.value));

    slider.addEventListener('input', (e) => {

      updateSize(parseFloat(slider.value));
    });

    document.getElementById('slider-container').addEventListener('mousedown', (e) => {
      e.stopImmediatePropagation();
    });

    document.getElementById('slider-container').addEventListener('click', (e) => {
      e.stopImmediatePropagation();
    });
  };

	// DOM監視 
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      for (const node of mutation.addedNodes) {
        
        if (node.tagName === "DIV" && node.hasChildNodes()) {

          const modal = Array.prototype.find.call(node.children, (n) => n.id.match(REGEX_MODAL));
 
					if (modal) {
            
            placeSlider(modal.id);
           	return;
          }
        }
      }
    }
  });

  // DOM監視スタート
  observer.observe(document.getElementById('__next'), {
    childList: true,
    subtree: true
  });

})();