☰

Gartic.io OpenTogetherTube dum

OpenTogetherTube penceresi - Mobil uyumlu

// ==UserScript==
// @name         Gartic.io OpenTogetherTube dum
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  OpenTogetherTube penceresi - Mobil uyumlu
// @author       You
// @match        https://gartic.io/*
// @match        http://gartic.io/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let iframe;
    let container;
    let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

    // Sayfa yüklendiğinde başlat
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeScript);
    } else {
        initializeScript();
    }

    function initializeScript() {
        // Hemen pencereyi oluştur
        createFloatingWindow();
    }

    function createFloatingWindow() {
        // Ana container - mobil ve desktop için farklı boyutlar
        container = document.createElement('div');
        container.id = 'ott-container';
        
        const mobileStyles = isMobile ? `
            width: 90vw;
            height: 50vh;
            left: 5vw;
            bottom: 10px;
            min-width: 280px;
            min-height: 200px;
            max-width: 95vw;
            max-height: 80vh;
        ` : `
            width: 480px;
            height: 350px;
            left: 20px;
            bottom: 20px;
            min-width: 350px;
            min-height: 250px;
            max-width: 1000px;
            max-height: 800px;
        `;

        container.style.cssText = `
            position: fixed;
            ${mobileStyles}
            background: #1e1e1e;
            border: 2px solid #ff6b35;
            border-radius: 15px;
            z-index: 9999;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            resize: ${isMobile ? 'none' : 'both'};
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            touch-action: none;
        `;

        // Header
        const header = document.createElement('div');
        header.style.cssText = `
            background: linear-gradient(135deg, #ff6b35, #f39c12);
            color: white;
            padding: ${isMobile ? '15px' : '12px 15px'};
            font-size: ${isMobile ? '14px' : '13px'};
            cursor: ${isMobile ? 'grab' : 'move'};
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
            font-weight: 600;
            touch-action: none;
        `;

        header.innerHTML = `
            <span>🎵 OpenTogetherTube</span>
            <div>
                <button id="minimize-btn" style="background: #666; border: none; color: white; padding: ${isMobile ? '8px 12px' : '5px 10px'}; border-radius: 6px; cursor: pointer; font-size: ${isMobile ? '16px' : '14px'}; touch-action: manipulation;">−</button>
            </div>
        `;

        // Content area
        const content = document.createElement('div');
        content.id = 'ott-content';
        content.style.cssText = `
            width: 100%;
            height: calc(100% - ${isMobile ? '63px' : '55px'});
            position: relative;
            background: #2c2c2c;
            overflow: hidden;
        `;

        // Activation overlay
        const overlay = document.createElement('div');
        overlay.id = 'activation-overlay';
        overlay.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255,107,53,0.9), rgba(231,76,60,0.9));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 10;
            color: white;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            touch-action: manipulation;
        `;

        overlay.innerHTML = `
            <div style="font-size: ${isMobile ? '80px' : '60px'}; margin-bottom: ${isMobile ? '30px' : '20px'}; animation: bounce 2s infinite;">🎵</div>
            <div style="font-size: ${isMobile ? '20px' : '18px'}; font-weight: bold; margin-bottom: ${isMobile ? '15px' : '10px'};">OpenTogetherTube'u Başlat</div>
            <div style="font-size: ${isMobile ? '16px' : '14px'}; opacity: 0.9; margin-bottom: ${isMobile ? '30px' : '20px'};">Video izlemek için dokunun</div>
            <div style="padding: ${isMobile ? '15px 30px' : '12px 24px'}; background: rgba(255,255,255,0.2); border-radius: 25px; font-size: ${isMobile ? '16px' : '14px'}; font-weight: 600;">BAŞLAT</div>
        `;

        // İframe oluştur
        iframe = document.createElement('iframe');
        iframe.style.cssText = `
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 0 0 15px 15px;
            background: #000;
        `;
        
        iframe.setAttribute('allow', 'autoplay; fullscreen; microphone; camera; midi; encrypted-media; payment; clipboard-read; clipboard-write; web-share; picture-in-picture');
        iframe.setAttribute('allowfullscreen', 'true');

        // Elementleri birleştir
        content.appendChild(overlay);
        content.appendChild(iframe);
        container.appendChild(header);
        container.appendChild(content);
        document.body.appendChild(container);

        setupEventListeners();
        
        showNotification('OpenTogetherTube hazır! Başlatmak için pencereye dokunun.', 'info');
    }

    function setupEventListeners() {
        // Ana aktivasyon
        document.getElementById('activation-overlay').addEventListener('click', function() {
            activatePlayer();
        });

        // Touch için de ekle
        document.getElementById('activation-overlay').addEventListener('touchend', function(e) {
            e.preventDefault();
            activatePlayer();
        });

        setupWindowControls();
    }

    function activatePlayer() {
        const overlay = document.getElementById('activation-overlay');
        overlay.style.opacity = '0';
        
        setTimeout(() => {
            overlay.style.display = 'none';
        }, 300);

        // 3131 odasına bağlan
        const fullUrl = 'https://opentogethertube.com/room/3131';
        iframe.src = fullUrl;

        showNotification('OpenTogetherTube yükleniyor...', 'info');
    }

    function setupWindowControls() {
        const header = container.querySelector('div');
        let isDragging = false;
        let dragOffset = { x: 0, y: 0 };

        // Mouse events (Desktop)
        header.addEventListener('mousedown', startDrag);
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', stopDrag);

        // Touch events (Mobile)
        header.addEventListener('touchstart', startDragTouch);
        document.addEventListener('touchmove', dragTouch);
        document.addEventListener('touchend', stopDrag);

        function startDrag(e) {
            if (e.target.tagName === 'BUTTON') return;
            isDragging = true;
            dragOffset.x = e.clientX - container.offsetLeft;
            dragOffset.y = e.clientY - container.offsetTop;
            document.body.style.userSelect = 'none';
            header.style.cursor = 'grabbing';
            e.preventDefault();
        }

        function startDragTouch(e) {
            if (e.target.tagName === 'BUTTON') return;
            isDragging = true;
            const touch = e.touches[0];
            dragOffset.x = touch.clientX - container.offsetLeft;
            dragOffset.y = touch.clientY - container.offsetTop;
            document.body.style.userSelect = 'none';
            header.style.cursor = 'grabbing';
            e.preventDefault();
        }

        function drag(e) {
            if (!isDragging) return;
            
            const newLeft = Math.max(0, Math.min(window.innerWidth - container.offsetWidth, e.clientX - dragOffset.x));
            const newTop = Math.max(0, Math.min(window.innerHeight - container.offsetHeight, e.clientY - dragOffset.y));
            
            container.style.left = newLeft + 'px';
            container.style.top = newTop + 'px';
        }

        function dragTouch(e) {
            if (!isDragging) return;
            
            const touch = e.touches[0];
            const newLeft = Math.max(0, Math.min(window.innerWidth - container.offsetWidth, touch.clientX - dragOffset.x));
            const newTop = Math.max(0, Math.min(window.innerHeight - container.offsetHeight, touch.clientY - dragOffset.y));
            
            container.style.left = newLeft + 'px';
            container.style.top = newTop + 'px';
            e.preventDefault();
        }

        function stopDrag() {
            isDragging = false;
            document.body.style.userSelect = '';
            header.style.cursor = isMobile ? 'grab' : 'move';
        }

        // Minimize/Maximize
        let isMinimized = false;
        document.getElementById('minimize-btn').addEventListener('click', function() {
            const content = document.getElementById('ott-content');
            if (isMinimized) {
                content.style.display = 'block';
                container.style.height = isMobile ? '50vh' : '350px';
                this.textContent = '−';
                isMinimized = false;
            } else {
                content.style.display = 'none';
                container.style.height = isMobile ? '63px' : '55px';
                this.textContent = '+';
                isMinimized = true;
            }
        });

        // Touch için minimize butonu
        document.getElementById('minimize-btn').addEventListener('touchend', function(e) {
            e.preventDefault();
            this.click();
        });
    }

    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        
        const mobileNotificationStyles = isMobile ? `
            top: 10px;
            left: 5vw;
            right: 5vw;
            width: auto;
            font-size: 14px;
            padding: 18px 20px;
        ` : `
            top: 20px;
            left: 20px;
            max-width: 300px;
            font-size: 13px;
            padding: 15px 20px;
        `;

        notification.style.cssText = `
            position: fixed;
            ${mobileNotificationStyles}
            border-radius: 10px;
            color: white;
            font-family: 'Segoe UI', sans-serif;
            font-weight: 500;
            z-index: 10001;
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease;
        `;

        const colors = {
            success: '#27ae60',
            warning: '#f39c12',
            error: '#e74c3c',
            info: '#3498db'
        };

        notification.style.background = colors[type] || colors.info;
        notification.textContent = message;
        document.body.appendChild(notification);

        requestAnimationFrame(() => {
            notification.style.opacity = '1';
            notification.style.transform = 'translateY(0)';
        });

        setTimeout(() => {
            notification.style.opacity = '0';
            notification.style.transform = 'translateY(-20px)';
            setTimeout(() => notification.remove(), 300);
        }, 4000);
    }

    // CSS
    const style = document.createElement('style');
    style.textContent = `
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-20px); }
            60% { transform: translateY(-10px); }
        }

        #ott-container button {
            transition: all 0.2s ease;
        }

        #ott-container button:hover {
            opacity: 0.85;
            transform: scale(1.05);
        }

        #activation-overlay:hover {
            transform: scale(1.02);
        }

        #ott-container {
            backdrop-filter: blur(10px);
        }

        /* Mobil için özel stiller */
        @media (max-width: 768px) {
            #ott-container {
                border-width: 3px;
            }
            
            #ott-container button:active {
                transform: scale(0.95);
                opacity: 0.7;
            }
            
            #activation-overlay:active {
                transform: scale(0.98);
            }
        }

        /* Touch cihazları için scroll engelleyici */
        body.dragging {
            overflow: hidden;
            -webkit-overflow-scrolling: none;
        }
    `;
    document.head.appendChild(style);

    // Mobil cihazlarda scroll engellemek için
    if (isMobile) {
        header.addEventListener('touchstart', () => {
            document.body.classList.add('dragging');
        });
        
        document.addEventListener('touchend', () => {
            document.body.classList.remove('dragging');
        });
    }

    console.log(`Gartic.io OpenTogetherTube Script yüklendi! (${isMobile ? 'Mobil' : 'Desktop'} Mod)`);

})();