Pixeldrain Media Viewer

The "Pixeldrain Media Viewer" script enhances the user experience on the "Pixeldrain.com" website by adding features that make it easier to view single videos and media within albums, improving the convenience of accessing media for users.

当前为 2023-09-21 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Pixeldrain Media Viewer
// @namespace    Magof - pixeldrain-media-viewer
// @version      1.0
// @description  The "Pixeldrain Media Viewer" script enhances the user experience on the "Pixeldrain.com" website by adding features that make it easier to view single videos and media within albums, improving the convenience of accessing media for users.
// @match        https://*.pixeldrain.com/*
// @author       Magof
// ==/UserScript==


(function () {
  'use strict';

  function getContentAfterSlash(type) {
    const currentUrl = window.location.href;
    const startIndex = currentUrl.indexOf(type) + type.length;
    return currentUrl.substring(startIndex);
  }

  function createModal(contentType, fileUrl) {
    const modal = document.createElement('div');
    modal.style.position = 'fixed';
    modal.style.top = '0';
    modal.style.left = '0';
    modal.style.width = '100%';
    modal.style.height = '100%';
    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    modal.style.display = 'flex';
    modal.style.justifyContent = 'center';
    modal.style.alignItems = 'center';
    document.body.appendChild(modal);

    let contentElement;

    if (contentType.startsWith('image')) {
      contentElement = document.createElement('img');
    } else if (contentType.startsWith('video')) {
      contentElement = document.createElement('video');
      contentElement.controls = true;
    } else {
      contentElement = document.createElement('p');
      contentElement.textContent = 'Tipo de arquivo não suportado';
    }

    contentElement.src = fileUrl;
    contentElement.style.maxWidth = '80%';
    contentElement.style.maxHeight = '80%';
    modal.appendChild(contentElement);

    const closeButton = document.createElement('button');
    closeButton.textContent = 'Fechar';
    closeButton.style.marginTop = '10px';
    closeButton.style.padding = '10px 20px';
    closeButton.style.backgroundColor = 'red';
    closeButton.style.color = 'white';
    closeButton.style.border = 'none';
    closeButton.style.cursor = 'pointer';
    closeButton.addEventListener('click', function () {
      document.body.removeChild(modal);
      if (contentType.startsWith('video')) {
        contentElement.pause();
        contentElement.src = '';
      }
    });
    modal.appendChild(closeButton);
  }

  function addPlayButton() {
    const descriptionDiv = document.querySelector('.description.svelte-16pxrp4');
    if (descriptionDiv) {
      const playButton = document.createElement('button');
      const playIcon = document.createElement('i');
      playIcon.textContent = 'play';
      playButton.appendChild(playIcon);

      playButton.style.backgroundColor = 'blue';
      playButton.style.color = 'white';
      playButton.style.border = 'none';
      playButton.style.padding = '5px 10px';

      const brElement = descriptionDiv.querySelector('br');
      if (brElement) {
        brElement.parentNode.insertBefore(playButton, brElement.nextSibling);
      } else {
        descriptionDiv.appendChild(playButton);
      }

      playButton.addEventListener('click', function () {
        const content = getContentAfterSlash('/u/');
        const fileUrl = `https://pixeldrain.com/api/file/${content}`;
        createModal('video', fileUrl);
      });
    }
  }

  function fetchInfoFromAPI() {
    const currentUrl = window.location.href;
    if (currentUrl.includes('/l/')) {
      const content = getContentAfterSlash('/l/');
      const apiUrl = `https://pixeldrain.com/api/list/${content}`;

      fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
          if (data.files && Array.isArray(data.files)) {
            const fileData = data.files.map(file => ({
              id: file.id,
              mimeType: file.mime_type,
            }));

            const aTags = document.querySelectorAll('.gallery.svelte-1arosya a');
            aTags.forEach((a, index) => {
              a.addEventListener('click', function (event) {
                event.preventDefault();
                if (index < fileData.length) {
                  const fileInfo = fileData[index];
                  const fileUrl = `https://pixeldrain.com/api/file/${fileInfo.id}`;
                  createModal(fileInfo.mimeType, fileUrl);
                }
              });
            });
          }
        })
        .catch(error => {
          console.error('Erro ao acessar a API:', error);
        });
    }
  }

  if (window.location.href.includes('/u/')) {
    addPlayButton();
  }

  fetchInfoFromAPI();
})();