☰

BetterAvBase

Modify image display, add video preview

Version vom 10.09.2024. Aktuellste Version

  1. // ==UserScript==
  2. // @name         BetterAvBase
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.7.1
  5. // @description  Modify image display, add video preview
  6. // @match        https://www.avbase.net/*
  7. // @grant        GM_addStyle
  8. // @license MIT
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // 添加自定義 CSS
  15.     GM_addStyle(`
  16.         @media (min-width: 1024px) {
  17.             .cl-container {
  18.                 width: 100%; /* 或您想要的其他寬度 */
  19.             }
  20.         }
  21.  
  22.         .sm\\:grid-cols-2 {
  23.             grid-template-columns: repeat(5, minmax(0, 1fr)); /* 修改為您想要的列數 */
  24.         }
  25.     `);
  26.  
  27.     let lastUrl = location.href;
  28.     new MutationObserver(() => {
  29.         const url = location.href;
  30.         if (url !== lastUrl) {
  31.             lastUrl = url;
  32.             location.reload();
  33.         }
  34.     }).observe(document, {subtree: true, childList: true});
  35.  
  36.     function initializePage() {
  37.         const container = document.querySelector('.flex.overflow-x-auto.overflow-y-hidden');
  38.         if (!container) return;
  39.  
  40.         const verticalContainer = document.createElement('div');
  41.         verticalContainer.style.display = 'flex';
  42.         verticalContainer.style.flexDirection = 'column';
  43.         verticalContainer.style.alignItems = 'center';
  44.         verticalContainer.style.gap = '0px';
  45.         verticalContainer.style.padding = '0px';
  46.         verticalContainer.style.width = '100%';
  47.         verticalContainer.style.overflowX = 'auto';
  48.  
  49.         container.parentNode.replaceChild(verticalContainer, container);
  50.  
  51.         const codeElement = document.querySelector('.p-2.rounded-lg.text-sm.justify-center.items-center.grow.flex.flex-nowrap.overflow-hidden.bg-base-200 span');
  52.         const code = codeElement ? codeElement.textContent.trim() : null;
  53.  
  54.         if (code) {
  55.             let videoUrl;
  56.             const isVR = code.toLowerCase().includes('vr') || code.toLowerCase().includes('aqu') || code.toLowerCase().includes('exmo');
  57.             if (isVR) {
  58.                 videoUrl = `https://cc3001.dmm.co.jp/vrsample/${code.charAt(0)}/${code.substr(0,3)}/${code}/${code}vrlite.mp4`;
  59.             } else {
  60.                 videoUrl = `https://cc3001.dmm.co.jp/litevideo/freepv/${code.charAt(0)}/${code.substr(0,3)}/${code}/${code}hhb.mp4`;
  61.             }
  62.  
  63.             // 創建視頻播放器
  64.             const videoElement = document.createElement('video');
  65.             videoElement.src = videoUrl;
  66.             videoElement.controls = true;
  67.             videoElement.style.width = '100%';
  68.             videoElement.style.maxWidth = '800px';
  69.             videoElement.style.marginBottom = '5px';
  70.             verticalContainer.appendChild(videoElement);
  71.         }
  72.  
  73.         const imageContainer = document.createElement('div');
  74.         imageContainer.style.display = 'none';
  75.         imageContainer.style.flexDirection = 'column';
  76.         imageContainer.style.alignItems = 'center';
  77.         imageContainer.style.gap = '1px';
  78.         verticalContainer.appendChild(imageContainer);
  79.  
  80.         container.querySelectorAll('a').forEach(link => {
  81.             const newSrc = link.href;
  82.             const img = link.querySelector('img');
  83.             if (img) {
  84.                 img.src = newSrc;
  85.                 img.style.width = 'auto';
  86.                 img.style.height = 'auto';
  87.                 img.style.maxWidth = '100%';
  88.                 img.style.objectFit = 'contain';
  89.             }
  90.  
  91.             link.style.display = 'block';
  92.             link.style.width = 'auto';
  93.             link.style.height = 'auto';
  94.  
  95.             imageContainer.appendChild(link);
  96.         });
  97.  
  98.         const toggleButton = document.createElement('button');
  99.         toggleButton.textContent = '展開圖片';
  100.         toggleButton.style.padding = '10px 20px';
  101.         toggleButton.style.backgroundColor = '#1e293b';
  102.         toggleButton.style.color = 'white';
  103.         toggleButton.style.border = 'none';
  104.         toggleButton.style.borderRadius = '10px';
  105.         toggleButton.style.cursor = 'pointer';
  106.         toggleButton.style.marginTop = '0px';
  107.         toggleButton.style.marginBottom = '5px';
  108.  
  109.         toggleButton.addEventListener('click', () => {
  110.             if (imageContainer.style.display === 'none') {
  111.                 imageContainer.style.display = 'flex';
  112.                 toggleButton.textContent = '收起圖片';
  113.             } else {
  114.                 imageContainer.style.display = 'none';
  115.                 toggleButton.textContent = '展開圖片';
  116.             }
  117.         });
  118.  
  119.         verticalContainer.insertBefore(toggleButton, imageContainer);
  120.  
  121.         const parentContainer = verticalContainer.closest('.h-28.w-full.flex.items-center');
  122.         if (parentContainer) {
  123.             parentContainer.style.height = 'auto';
  124.             parentContainer.style.maxHeight = 'none';
  125.             parentContainer.style.width = '100%';
  126.             parentContainer.style.display = 'block';
  127.         }
  128.     }
  129.  
  130.     // 初始化頁面
  131.     initializePage();
  132. })();