// ==UserScript==
// @name		Yohoho Watch
// @namespace	https://git.lzrdblzzrd.xyz/lzrdblzzrd/Yohoho-Watch
// @author		lzrdblzzrd
// @description Смотрите фильмы с Kinopoisk.ru на Yohoho бесплатно!
// @downloadURL https://git.lzrdblzzrd.xyz/lzrdblzzrd/Yohoho-Watch/raw/branch/master/yohoho-watch.user.js
// @updateURL   https://git.lzrdblzzrd.xyz/lzrdblzzrd/Yohoho-Watch/raw/branch/master/yohoho-watch.user.js
// @icon		https://git.lzrdblzzrd.xyz/lzrdblzzrd/Yohoho-Watch/raw/branch/master/yohoho-watch.png
// @version		1.2
// @match		*://*.kinopoisk.ru/*
// ==/UserScript==

const BANNER_IMAGE = `<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 128 512" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="a" x1="-96" x2="224" y1="96" y2="416" gradientUnits="userSpaceOnUse">
        <stop stop-color="#BF80FF" offset="0"/>
        <stop stop-color="#8080FF" offset="1"/>
    </linearGradient>
    <path d="m128 0h-128v512l64-32 64 32v-512z" clip-rule="evenodd" fill="url(#a)" fill-rule="evenodd"/>
    <g transform="translate(-64)">
        <path d="m173.1 432.4c-9.1 24.9-36.6 37.7-61.5 28.7-24.9-9.1-37.7-36.6-28.7-61.5 9.1-24.9 36.6-37.7 61.5-28.7 24.9 9.1 37.8 36.6 28.7 61.5zm-39.5-14.3c1.1-3.1-0.5-6.6-3.6-7.7s-6.6 0.5-7.7 3.6 0.5 6.6 3.6 7.7c3.2 1.1 6.6-0.5 7.7-3.6zm-17.4 12.8c2.3-6.2-0.9-13.1-7.2-15.4-6.2-2.3-13.1 0.9-15.4 7.2-2.3 6.2 0.9 13.1 7.2 15.4 6.3 2.2 13.1-1 15.4-7.2zm12.3-33.9c2.3-6.2-0.9-13.1-7.2-15.4-6.2-2.3-13.1 0.9-15.4 7.2-2.3 6.2 0.9 13.1 7.2 15.4s13.2-0.9 15.4-7.2zm33.8 12.3c2.3-6.2-0.9-13.1-7.2-15.4-6.2-2.3-13.1 0.9-15.4 7.2-2.3 6.2 0.9 13.1 7.2 15.4s13.2-0.9 15.4-7.2zm-12.3 33.9c2.3-6.2-0.9-13.1-7.2-15.4-6.2-2.3-13.1 0.9-15.4 7.2-2.3 6.2 0.9 13.1 7.2 15.4 6.3 2.2 13.2-1 15.4-7.2z" fill="#fff"/>
    </g>
</svg>
`;

const BANNER_ID = 'yohoho-watch';
const MOVIE_TYPES = ['film', 'series'];

let currentMovieId = null;
let lastUrl = '/';

function openPlayer() {
	if (!currentMovieId) return;
	const link = new URL('https://4h0y.gitlab.io/');
	link.hash = currentMovieId;
	window.open(link.toString(), '_blank').focus();
}

function mountBanner() {
	const banner = document.createElement('div');
	banner.id = BANNER_ID;
	banner.innerHTML = BANNER_IMAGE;
	banner.style.width = '32px';
	banner.style.height = '128px';
	banner.style.top = '-128px';
	banner.style.left = '8px';
	banner.style.outline = 'none';
	banner.style.cursor = 'pointer';
	banner.style.position = 'fixed';
	banner.style.zIndex = '9000';
	banner.style.transition = 'top 0.2s ease';
	banner.title = 'Смотреть на Yohoho'

	banner.addEventListener('click', () => openPlayer());
	banner.addEventListener('mouseover', () => { banner.style.top = '-24px' });
	banner.addEventListener('mouseout', () => { banner.style.top = '-32px' });

	setTimeout(() => { banner.style.top = '-32px' }, 1000);

	document.body.appendChild(banner);
}

function unmountBanner() {
	const banner = document.getElementById(BANNER_ID);
	if (banner) banner.remove();
}

function updateBanner() {
	const url = location.href;

	if (url === lastUrl) return;
	lastUrl = url;

	const banner = document.getElementById(BANNER_ID);
	const urlData = url.split('/');
	const movieId = urlData[4];
	const movieType = urlData[3];

	if (!movieId || !movieType || !MOVIE_TYPES.includes(movieType)) {
		if (banner) unmountBanner();
		currentMovieId = null;
	} else {
		if (!banner) mountBanner();
		currentMovieId = movieId;
	}

}

function init() {
	const observer = new MutationObserver(() => updateBanner());
	observer.observe(document, { subtree: true, childList: true });

	updateBanner();
	console.log('Yohoho Watch started! 🎥');
}

init();