Plovoucí tlačítko PIP = Povolit obraz v obraze pro mobilní zařízení

Přidává plovoucí tlačítko pro přepínání režimu obraz v obraze pro videa na mobilních zařízeních.
Navštivte stránky autora pro podporu, zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==UserScript==
// @name                Floating PIP Button = Enable Picture in Picture for mobile
// @name:bg             Плаващ PIP бутон = Активиране на картина в картина за мобилни устройства
// @name:cs             Plovoucí tlačítko PIP = Povolit obraz v obraze pro mobilní zařízení
// @name:da             Flydende PIP-knap = Aktiver billede i billede til mobile enheder
// @name:de             Schwebender PIP-Button = Bild-in-Bild für mobile Geräte aktivieren
// @name:el             Επιπλέων κουμπί PIP = Ενεργοποίηση εικόνας σε εικόνα για κινητές συσκευές
// @name:en             Floating PIP Button = Enable Picture in Picture for mobile
// @name:eo             Flosanta PIP-Butono = Ebligi Bildon en Bildo por poŝtelefonoj
// @name:es             Botón Flotante PIP = Habilita Imagen en Imagen para móvil
// @name:es-la          Botón Flotante PIP = Habilita Imagen en Imagen para móvil
// @name:es-419         Botón Flotante PIP = Habilita Imagen en Imagen para móvil
// @name:fi             Kelluva PIP-painike = Ota käyttöön kuva kuvassa mobiililaitteille
// @name:fr             Bouton PIP flottant = Activer l'image dans l'image pour mobile
// @name:fr-CA          Bouton PIP flottant = Activer l'image dans l'image pour mobile
// @name:he             כפתור PIP צף = הפעלת תמונה בתוך תמונה לנייד
// @name:hr             Plutajući PIP gumb = Omogući sliku u slici za mobilne uređaje
// @name:hu             Lebegő PIP gomb = Kép a képben engedélyezése mobil eszközökre
// @name:id             Tombol PIP Mengambang = Aktifkan Gambar dalam Gambar untuk seluler
// @name:it             Pulsante PIP flottante = Abilita immagine nell'immagine per dispositivi mobili
// @name:ja             浮動PIPボタン = モバイル用のピクチャーインピクチャーを有効にする
// @name:ka             მცურავი PIP ღილაკი = ჩართეთ სურათი სურათში მობილური მოწყობილობებისთვის
// @name:ko             플로팅 PIP 버튼 = 모바일용 화면 속 화면 활성화
// @name:nb             Flytende PIP-knapp = Aktiver bilde i bilde for mobil
// @name:nl             Zwevende PIP-knop = Schakel beeld in beeld in voor mobiel
// @name:pl             Pływający przycisk PIP = Włącz obraz w obrazie dla urządzeń mobilnych
// @name:pt-BR          Botão PIP Flutuante = Ativar imagem em imagem para celular
// @name:ro             Buton PIP plutitor = Activează imagine în imagine pentru mobil
// @name:sv             Flytande PIP-knapp = Aktivera bild i bild för mobil
// @name:th             ปุ่ม PIP ลอย = เปิดใช้งานภาพในภาพสำหรับมือถือ
// @name:tr             Yüzen PIP Düğmesi = Mobil için Resim içinde Resim'i etkinleştir
// @name:ug             ھۆلۈپ تۇرغان PIP كۇنۇپكىسى = يانفونلار ئۈچۈن رەسىم ئىچىدە رەسىمنى قوزغىتىش
// @name:uk             Плаваюча кнопка PIP = Увімкнути картинку в картинці для мобільних пристроїв
// @name:vi             Nút PIP nổi = Bật chế độ Hình trong Hình cho di động
// @name:zh-TW          浮動PIP按鈕 = 啟用行動裝置的畫中畫模式
// @namespace           https://jlcareglio.github.io/
// @version             1.1.0
// @description         Adds a floating button to toggle Picture-in-Picture mode for videos on mobile devices.
// @description:bg      Добавя плаващ бутон за превключване на режим картина в картина за видеоклипове на мобилни устройства.
// @description:cs      Přidává plovoucí tlačítko pro přepínání režimu obraz v obraze pro videa na mobilních zařízeních.
// @description:da      Tilføjer en flydende knap til at skifte billede-i-billede-tilstand for videoer på mobile enheder.
// @description:de      Fügt eine schwebende Schaltfläche hinzu, um den Bild-in-Bild-Modus für Videos auf mobilen Geräten umzuschalten.
// @description:el      Προσθέτει ένα επιπλέον κουμπί για εναλλαγή της λειτουργίας εικόνας σε εικόνα για βίντεο σε κινητές συσκευές.
// @description:en      Adds a floating button to toggle Picture-in-Picture mode for videos on mobile devices.
// @description:eo      Aldonas flosantan butonon por ŝalti Bildon en Bildo-reĝimon por videoj en poŝtelefonoj.
// @description:es      Agrega un botón flotante para alternar el modo Imagen en Imagen para videos en dispositivos móviles.
// @description:es-la   Agrega un botón flotante para alternar el modo Imagen en Imagen para videos en dispositivos móviles.
// @description:es-419  Agrega un botón flotante para alternar el modo Imagen en Imagen para videos en dispositivos móviles.
// @description:fi      Lisää kelluvan painikkeen, jolla voi vaihtaa kuva kuvassa -tilan videoille mobiililaitteissa.
// @description:fr      Ajoute un bouton flottant pour basculer en mode image dans l'image pour les vidéos sur les appareils mobiles.
// @description:fr-CA   Ajoute un bouton flottant pour basculer en mode image dans l'image pour les vidéos sur les appareils mobiles.
// @description:he      מוסיף כפתור צף למעבר למצב תמונה בתוך תמונה עבור סרטונים במכשירים ניידים.
// @description:hr      Dodaje plutajući gumb za prebacivanje načina slike u slici za videozapise na mobilnim uređajima.
// @description:hu      Hozzáad egy lebegő gombot a kép a képben mód váltásához videókhoz mobil eszközökön.
// @description:id      Menambahkan tombol mengambang untuk beralih ke mode Gambar dalam Gambar untuk video di perangkat seluler.
// @description:it      Aggiunge un pulsante flottante per attivare la modalità immagine nell'immagine per i video sui dispositivi mobili.
// @description:ja      モバイルデバイスでビデオのピクチャーインピクチャーモードを切り替えるための浮動ボタンを追加します。
// @description:ka      ამატებს მცურავ ღილაკს მობილური მოწყობილობებისთვის ვიდეოების სურათში სურათის რეჟიმის ჩასართავად.
// @description:ko      모바일 장치에서 비디오의 화면 속 화면 모드를 전환하는 플로팅 버튼을 추가합니다.
// @description:nb      Legger til en flytende knapp for å bytte bilde-i-bilde-modus for videoer på mobile enheter.
// @description:nl      Voegt een zwevende knop toe om de modus Beeld-in-Beeld voor video's op mobiele apparaten in te schakelen.
// @description:pl      Dodaje pływający przycisk do przełączania trybu obraz w obrazie dla filmów na urządzeniach mobilnych.
// @description:pt-BR   Adiciona um botão flutuante para alternar o modo Imagem em Imagem para vídeos em dispositivos móveis.
// @description:ro      Adaugă un buton plutitor pentru a comuta modul imagine în imagine pentru videoclipuri pe dispozitive mobile.
// @description:sv      Lägger till en flytande knapp för att växla bild-i-bild-läge för videor på mobila enheter.
// @description:th      เพิ่มปุ่มลอยเพื่อสลับโหมดภาพในภาพสำหรับวิดีโอบนอุปกรณ์เคลื่อนที่
// @description:tr      Mobil cihazlarda videolar için Resim içinde Resim modunu değiştirmek için yüzen bir düğme ekler.
// @description:ug      يانفونلاردا ۋىدىئولار ئۈچۈن رەسىم ئىچىدە رەسىم ھالىتىنى ئالماشتۇرۇش ئۈچۈن ھۆلۈپ تۇرغان كۇنۇپكا قوشىدۇ.
// @description:uk      Додає плаваючу кнопку для перемикання режиму картинка в картинці для відео на мобільних пристроях.
// @description:vi      Thêm nút nổi để chuyển đổi chế độ Hình trong Hình cho video trên thiết bị di động.
// @description:zh-TW   添加一個浮動按鈕，以切換行動裝置上的影片畫中畫模式。
// @icon                https://lh3.googleusercontent.com/cvfpnTKw3B67DtM1ZpJG2PNAIjP6hVMOyYy403X4FMkOuStgG1y4cjCn21vmTnnsip1dTZSVsWBA9IxutGuA3dVDWhg
// @grant               none
// @author              Jesús Lautaro Careglio Albornoz
// @source              https://gist.githubusercontent.com/JLCareglio/22d3f9c9752352a29006f0c90c72d193/raw/01_Floating-PIP-Button.user.js
// @match               *://*/*
// @license             MIT
// @compatible          firefox
// @compatible          edge
// @compatible          kiwi
// @supportURL          https://gist.github.com/JLCareglio/22d3f9c9752352a29006f0c90c72d193/
// ==/UserScript==
 
(async () => {
  const CONSTANTS = {
    BUTTON: {
      STYLE: `.pipButton { position: fixed; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; width: 60px; height: 60px; cursor: pointer; z-index: 9999; display: none; --delete-progress: 0; isolation: isolate; transform: scale(1); transition: transform 0.1s ease-out; } .pipButton:before { pointer-events: none; content: ""; position: absolute; top: 0; bottom: 0; width: 100%; z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='100%25' height='100%25'%3E%3Cpath d='M25,17 L17,17 L17,23 L25,23 L25,17 L25,17 Z M29,25 L29,10.98 C29,9.88 28.1,9 27,9 L9,9 C7.9,9 7,9.88 7,10.98 L7,25 C7,26.1 7.9,27 9,27 L27,27 C28.1,27 29,26.1 29,25 L29,25 Z M27,25.02 L9,25.02 L9,10.97 L27,10.97 L27,25.02 L27,25.02 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center; } .pipButton:after { content: ""; position: absolute; inset: 0; background-color: rgba(255, 0, 0, 0.8); border-radius: 50%; transform: scale(var(--delete-progress)); transition: transform 0.5s ease; z-index: 1; }`,
      DEFAULT_POSITION: {
        right: 20,
        bottom: 20,
      },
    },
    TOUCH: {
      MOVE_THRESHOLD: 10,
      CLICK_TIMEOUT: 200,
      LONG_PRESS_TIMEOUT: 1000,
      LONG_PRESS_MOVE_THRESHOLD: 15,
      ANIMATION_DELAY: 300,
    },
    STORAGE: {
      POSITION_KEY: "pip_button_position",
    },
  };
 
  class PIPButton {
    button;
    watchedVideos;
    observer;
    isDragging = false;
    touchStartTime = 0;
    dragOffset = { x: 0, y: 0 };
    initialPosition = { x: 0, y: 0 };
    longPressTimer = null;
    longPressStartPosition = { x: 0, y: 0 };
    animationTimer = null;
    isManuallyHidden = false;
 
    constructor() {
      this.initializeButton();
      this.initializeVideoObserver();
      this.initializeDragHandlers();
      this.detectInitialVideos();
      this.initializeLongPressHandlers();
    }
 
    initializeButton() {
      this.button = document.createElement("div");
      this.button.classList.add("pipButton");
      this.injectStyles();
      document.body.appendChild(this.button);
      this.watchedVideos = new Set();
      this.loadButtonPosition();
      this.checkButtonPosition();
      window.addEventListener("resize", () => this.checkButtonPosition());
    }
 
    injectStyles() {
      const style = document.createElement("style");
      style.textContent = CONSTANTS.BUTTON.STYLE;
      document.head.appendChild(style);
    }
 
    initializeVideoObserver() {
      this.observer = new MutationObserver(this.handleMutations.bind(this));
      this.observer.observe(document.body, {
        childList: true,
        subtree: true,
      });
    }
 
    handleMutations(mutations) {
      mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
          if (node instanceof HTMLVideoElement) {
            this.addVideo(node);
          }
        });
      });
      this.updateButtonVisibility();
    }
 
    addVideo(video) {
      if (!this.watchedVideos.has(video)) {
        this.watchedVideos.add(video);
      }
    }
 
    detectInitialVideos() {
      document
        .querySelectorAll("video")
        .forEach((video) => this.addVideo(video));
      this.updateButtonVisibility();
    }
 
    togglePIP() {
      try {
        if (this.watchedVideos.size === 0) return;
        if (document.pictureInPictureElement) {
          document.exitPictureInPicture();
          return;
        }
        const playingVideo = Array.from(this.watchedVideos).find(
          (video) => !video.paused && !video.ended && video.currentTime > 0
        );
        const videoToShow = playingVideo || Array.from(this.watchedVideos)[0];
        videoToShow
          ?.requestPictureInPicture()
          .then(() => {
            Object.defineProperty(document, "visibilityState", {
              get: () => "visible",
            });
          })
          .catch(console.error);
      } catch (error) {
        console.error("Error toggling PIP:", error);
      }
    }
 
    initializeDragHandlers() {
      this.button.addEventListener(
        "mousedown",
        this.handleDragStart.bind(this)
      );
      this.button.addEventListener(
        "touchstart",
        this.handleDragStart.bind(this)
      );
      document.addEventListener("mousemove", this.handleDragMove.bind(this));
      document.addEventListener("touchmove", this.handleDragMove.bind(this), {
        passive: false,
      });
      document.addEventListener("mouseup", this.handleDragEnd.bind(this));
      document.addEventListener("touchend", this.handleDragEnd.bind(this));
      document.addEventListener("touchcancel", this.handleDragEnd.bind(this));
    }
 
    handleDragStart(event) {
      this.isDragging = true;
      this.button.style.transform = "scale(2)";
      const rect = this.button.getBoundingClientRect();
      this.initialPosition = { x: rect.left, y: rect.top };
      const clientX = event.clientX || event.touches[0].clientX;
      const clientY = event.clientY || event.touches[0].clientY;
      this.dragOffset = {
        x: clientX - this.initialPosition.x,
        y: clientY - this.initialPosition.y,
      };
      this.touchStartTime = Date.now();
      event.preventDefault();
      event.stopPropagation();
      if (this.longPressTimer) {
        clearTimeout(this.longPressTimer);
      }
    }
 
    handleDragMove(event) {
      if (!this.isDragging) return;
      const clientX = event.clientX || event.touches[0].clientX;
      const clientY = event.clientY || event.touches[0].clientY;
      const newPosition = this.calculateNewPosition(
        clientX - this.dragOffset.x,
        clientY - this.dragOffset.y
      );
      this.updateButtonPosition(newPosition);
      event.preventDefault();
      event.stopPropagation();
    }
 
    calculateNewPosition(x, y) {
      const maxX = window.innerWidth - this.button.offsetWidth;
      const maxY = window.innerHeight - this.button.offsetHeight;
      return {
        x: Math.max(0, Math.min(x, maxX)),
        y: Math.max(0, Math.min(y, maxY)),
      };
    }
 
    updateButtonPosition(position) {
      this.button.style.left = `${position.x}px`;
      this.button.style.top = `${position.y}px`;
      this.button.style.right = "auto";
      this.button.style.bottom = "auto";
    }
 
    handleDragEnd(event) {
      if (!this.isDragging) return;
      this.button.style.transform = "scale(1)";
      const distance = this.calculateDragDistance();
      const elapsedTime = Date.now() - this.touchStartTime;
      if (
        elapsedTime < CONSTANTS.TOUCH.CLICK_TIMEOUT &&
        distance <= CONSTANTS.TOUCH.MOVE_THRESHOLD &&
        event.button !== 2
      )
        this.togglePIP();
      const position = {
        x: this.button.offsetLeft,
        y: this.button.offsetTop,
      };
      if (!this.isManuallyHidden)
        localStorage.setItem(
          CONSTANTS.STORAGE.POSITION_KEY,
          JSON.stringify(position)
        );
      this.isDragging = false;
      event.preventDefault();
      event.stopPropagation();
    }
 
    calculateDragDistance() {
      const dx = this.button.offsetLeft - this.initialPosition.x;
      const dy = this.button.offsetTop - this.initialPosition.y;
      return Math.sqrt(dx * dx + dy * dy);
    }
 
    updateButtonVisibility() {
      this.button.style.display =
        this.watchedVideos.size > 0 && !this.isManuallyHidden
          ? "block"
          : "none";
    }
 
    initializeLongPressHandlers() {
      this.button.addEventListener("contextmenu", (e) => {
        e.preventDefault();
        this.hideButton();
      });
      const startLongPress = (e) => {
        const pos = e.touches ? e.touches[0] : e;
        this.longPressStartPosition = { x: pos.clientX, y: pos.clientY };
        this.button.style.setProperty("--delete-progress", "0");
        this.animationTimer = setTimeout(() => {
          requestAnimationFrame(() => {
            this.button.style.setProperty("--delete-progress", "1");
          });
        }, CONSTANTS.TOUCH.ANIMATION_DELAY);
        this.longPressTimer = setTimeout(() => {
          this.hideButton();
        }, CONSTANTS.TOUCH.LONG_PRESS_TIMEOUT);
      };
      const moveDuringPress = (e) => {
        if (this.longPressTimer) {
          const pos = e.touches ? e.touches[0] : e;
          const moveDistance = Math.sqrt(
            Math.pow(pos.clientX - this.longPressStartPosition.x, 2) +
              Math.pow(pos.clientY - this.longPressStartPosition.y, 2)
          );
          if (moveDistance > CONSTANTS.TOUCH.LONG_PRESS_MOVE_THRESHOLD) {
            clearTimeout(this.longPressTimer);
            clearTimeout(this.animationTimer);
            this.longPressTimer = null;
            this.animationTimer = null;
            this.button.style.setProperty("--delete-progress", "0");
          }
        }
      };
      const endLongPress = () => {
        if (this.longPressTimer) {
          clearTimeout(this.longPressTimer);
          clearTimeout(this.animationTimer);
          this.button.style.setProperty("--delete-progress", "0");
        }
      };
      // Touch events
      this.button.addEventListener("touchstart", startLongPress);
      this.button.addEventListener("touchmove", moveDuringPress);
      this.button.addEventListener("touchend", endLongPress);
      // Mouse events
      this.button.addEventListener("mousedown", (e) => {
        if (e.button === 0) startLongPress(e);
      });
      this.button.addEventListener("mousemove", moveDuringPress);
      this.button.addEventListener("mouseup", endLongPress);
      this.button.addEventListener("mouseleave", endLongPress);
    }
 
    hideButton() {
      this.isManuallyHidden = true;
      this.button.style.display = "none";
    }
 
    loadButtonPosition() {
      const savedPosition = localStorage.getItem(
        CONSTANTS.STORAGE.POSITION_KEY
      );
      if (savedPosition) {
        const position = JSON.parse(savedPosition);
        this.updateButtonPosition(position);
      } else {
        this.button.style.right = `${CONSTANTS.BUTTON.DEFAULT_POSITION.right}px`;
        this.button.style.bottom = `${CONSTANTS.BUTTON.DEFAULT_POSITION.bottom}px`;
      }
    }
 
    checkButtonPosition() {
      const rect = this.button.getBoundingClientRect();
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
 
      const newLeft = Math.max(
        0,
        Math.min(rect.left, windowWidth - rect.width)
      );
      const newTop = Math.max(
        0,
        Math.min(rect.top, windowHeight - rect.height)
      );
 
      if (newLeft !== rect.left || newTop !== rect.top)
        this.updateButtonPosition({ x: newLeft, y: newTop });
    }
  }
 
  if (document.readyState === "loading")
    document.addEventListener("DOMContentLoaded", () => new PIPButton());
  else new PIPButton();
})();