BetterAvBase

Modify image display, add video preview
目前為 2024-09-10 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         BetterAvBase
// @namespace    http://tampermonkey.net/
// @version      1.7.1
// @description  Modify image display, add video preview
// @match        https://www.avbase.net/*
// @grant        GM_addStyle
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 添加自定義 CSS
    GM_addStyle(`
        @media (min-width: 1024px) {
            .cl-container {
                width: 100%; /* 或您想要的其他寬度 */
            }
        }

        .sm\\:grid-cols-2 {
            grid-template-columns: repeat(5, minmax(0, 1fr)); /* 修改為您想要的列數 */
        }
    `);

    let lastUrl = location.href;
    new MutationObserver(() => {
        const url = location.href;
        if (url !== lastUrl) {
            lastUrl = url;
            location.reload();
        }
    }).observe(document, {subtree: true, childList: true});

    function initializePage() {
        const container = document.querySelector('.flex.overflow-x-auto.overflow-y-hidden');
        if (!container) return;

        const verticalContainer = document.createElement('div');
        verticalContainer.style.display = 'flex';
        verticalContainer.style.flexDirection = 'column';
        verticalContainer.style.alignItems = 'center';
        verticalContainer.style.gap = '0px';
        verticalContainer.style.padding = '0px';
        verticalContainer.style.width = '100%';
        verticalContainer.style.overflowX = 'auto';

        container.parentNode.replaceChild(verticalContainer, container);

        const codeElement = document.querySelector('.p-2.rounded-lg.text-sm.justify-center.items-center.grow.flex.flex-nowrap.overflow-hidden.bg-base-200 span');
        const code = codeElement ? codeElement.textContent.trim() : null;

        if (code) {
            let videoUrl;
            const isVR = code.toLowerCase().includes('vr') || code.toLowerCase().includes('aqu') || code.toLowerCase().includes('exmo');
            if (isVR) {
                videoUrl = `https://cc3001.dmm.co.jp/vrsample/${code.charAt(0)}/${code.substr(0,3)}/${code}/${code}vrlite.mp4`;
            } else {
                videoUrl = `https://cc3001.dmm.co.jp/litevideo/freepv/${code.charAt(0)}/${code.substr(0,3)}/${code}/${code}hhb.mp4`;
            }

            // 創建視頻播放器
            const videoElement = document.createElement('video');
            videoElement.src = videoUrl;
            videoElement.controls = true;
            videoElement.style.width = '100%';
            videoElement.style.maxWidth = '800px';
            videoElement.style.marginBottom = '5px';
            verticalContainer.appendChild(videoElement);
        }

        const imageContainer = document.createElement('div');
        imageContainer.style.display = 'none';
        imageContainer.style.flexDirection = 'column';
        imageContainer.style.alignItems = 'center';
        imageContainer.style.gap = '1px';
        verticalContainer.appendChild(imageContainer);

        container.querySelectorAll('a').forEach(link => {
            const newSrc = link.href;
            const img = link.querySelector('img');
            if (img) {
                img.src = newSrc;
                img.style.width = 'auto';
                img.style.height = 'auto';
                img.style.maxWidth = '100%';
                img.style.objectFit = 'contain';
            }

            link.style.display = 'block';
            link.style.width = 'auto';
            link.style.height = 'auto';

            imageContainer.appendChild(link);
        });

        const toggleButton = document.createElement('button');
        toggleButton.textContent = '展開圖片';
        toggleButton.style.padding = '10px 20px';
        toggleButton.style.backgroundColor = '#1e293b';
        toggleButton.style.color = 'white';
        toggleButton.style.border = 'none';
        toggleButton.style.borderRadius = '10px';
        toggleButton.style.cursor = 'pointer';
        toggleButton.style.marginTop = '0px';
        toggleButton.style.marginBottom = '5px';

        toggleButton.addEventListener('click', () => {
            if (imageContainer.style.display === 'none') {
                imageContainer.style.display = 'flex';
                toggleButton.textContent = '收起圖片';
            } else {
                imageContainer.style.display = 'none';
                toggleButton.textContent = '展開圖片';
            }
        });

        verticalContainer.insertBefore(toggleButton, imageContainer);

        const parentContainer = verticalContainer.closest('.h-28.w-full.flex.items-center');
        if (parentContainer) {
            parentContainer.style.height = 'auto';
            parentContainer.style.maxHeight = 'none';
            parentContainer.style.width = '100%';
            parentContainer.style.display = 'block';
        }
    }

    // 初始化頁面
    initializePage();
})();