Adds a Prime Video-like X-Ray panel to cineby.app, fetching data from OMDb API using IMDb ID.
// ==UserScript==
// @name Cineby.app X-Ray Feature (OMDb API)
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Adds a Prime Video-like X-Ray panel to cineby.app, fetching data from OMDb API using IMDb ID.
// @author Gemini
// @match *://*.cineby.app/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// IMPORTANT: Replace 'YOUR_OMDB_API_KEY' with your actual OMDb API key.
// Get your free API key from: http://www.omdbapi.com/
const OMDB_API_KEY = 'YOUR_OMDB_API_KEY';
// --- Helper function to add CSS styles ---
function addGlobalStyle(css) {
const style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
}
// --- Inject CSS for the X-Ray panel and button ---
addGlobalStyle(`
/* Inter font for a modern look */
body {
font-family: 'Inter', sans-serif;
}
/* X-Ray Button Styling */
#xray-toggle-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #0A84FF; /* A vibrant blue */
color: white;
border: none;
border-radius: 8px; /* Slightly rounded */
padding: 12px 20px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Soft shadow */
z-index: 10000; /* Ensure it's on top */
transition: background-color 0.3s ease, transform 0.2s ease;
}
#xray-toggle-button:hover {
background-color: #0070e0; /* Darker blue on hover */
transform: translateY(-2px); /* Slight lift effect */
}
#xray-toggle-button:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* X-Ray Panel Styling */
#xray-panel {
position: fixed;
top: 0;
right: 0;
width: 350px; /* Fixed width */
height: 100%;
background-color: rgba(26, 26, 26, 0.95); /* Dark, slightly transparent background */
color: white;
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3); /* Shadow on the left edge */
z-index: 9999;
transform: translateX(100%); /* Initially off-screen */
transition: transform 0.4s ease-out; /* Smooth slide-in/out */
padding: 20px;
box-sizing: border-box; /* Include padding in width */
overflow-y: auto; /* Scroll for long content */
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
#xray-panel.open {
transform: translateX(0); /* Slide into view */
}
#xray-panel h2 {
font-size: 24px;
margin-bottom: 20px;
color: #E0E0E0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
#xray-panel h3 {
font-size: 18px;
margin-top: 20px;
margin-bottom: 10px;
color: #CCCCCC;
}
#xray-panel p, #xray-panel ul, #xray-panel li {
font-size: 15px;
line-height: 1.6;
color: #B0B0B0;
margin-bottom: 15px;
}
#xray-panel ul {
list-style: none;
padding: 0;
}
#xray-panel li {
margin-bottom: 5px;
}
/* Close button styling for the panel */
#xray-close-button {
position: absolute;
top: 15px;
left: 15px;
background: none;
border: none;
font-size: 28px;
color: #CCCCCC;
cursor: pointer;
padding: 5px;
border-radius: 50%;
transition: background-color 0.2s ease;
}
#xray-close-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* Loading indicator styling */
.loader {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #0A84FF; /* Blue */
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto;
display: none; /* Hidden by default */
}
.loader.active {
display: block; /* Show when active */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`);
// --- Create X-Ray Toggle Button ---
const toggleButton = document.createElement('button');
toggleButton.id = 'xray-toggle-button';
toggleButton.innerText = 'X-Ray';
document.body.appendChild(toggleButton);
// --- Create X-Ray Panel ---
const xrayPanel = document.createElement('div');
xrayPanel.id = 'xray-panel';
xrayPanel.innerHTML = `
<button id="xray-close-button">×</button>
<h2>X-Ray Information</h2>
<div class="loader" id="xray-loader"></div>
<div id="xray-content">
<p>Click "X-Ray" and enter an IMDb ID to fetch movie details.</p>
<p>Example IMDb ID: tt0133093 (The Matrix)</p>
</div>
`;
document.body.appendChild(xrayPanel);
const closeButton = xrayPanel.querySelector('#xray-close-button');
const xrayContentDiv = xrayPanel.querySelector('#xray-content');
const xrayLoader = xrayPanel.querySelector('#xray-loader');
// --- Function to fetch movie data from OMDb API ---
async function fetchMovieData(imdbID) {
if (!OMDB_API_KEY || OMDB_API_KEY === 'YOUR_OMDB_API_KEY') {
xrayContentDiv.innerHTML = `<p style="color: red;">Error: OMDb API Key is missing or invalid. Please update the script with your key.</p>`;
return;
}
xrayLoader.classList.add('active'); // Show loader
xrayContentDiv.innerHTML = ''; // Clear previous content
const apiUrl = `https://www.omdbapi.com/?i=${imdbID}&apikey=${OMDB_API_KEY}&plot=full`; // Request full plot
try {
const response = await fetch(apiUrl);
const data = await response.json();
if (data.Response === 'True') {
displayMovieData(data);
} else {
xrayContentDiv.innerHTML = `<p style="color: red;">Error: ${data.Error || 'Movie not found or API issue.'}</p>`;
}
} catch (error) {
console.error('Error fetching movie data:', error);
xrayContentDiv.innerHTML = `<p style="color: red;">Failed to fetch movie data. Check console for details.</p>`;
} finally {
xrayLoader.classList.remove('active'); // Hide loader
}
}
// --- Function to display fetched movie data ---
function displayMovieData(movie) {
xrayContentDiv.innerHTML = `
<h3>Title:</h3>
<p>${movie.Title || 'N/A'}</p>
<h3>Year:</h3>
<p>${movie.Year || 'N/A'}</p>
<h3>Genre:</h3>
<p>${movie.Genre || 'N/A'}</p>
<h3>Director:</h3>
<p>${movie.Director || 'N/A'}</p>
<h3>Writer(s):</h3>
<p>${movie.Writer || 'N/A'}</p>
<h3>Cast:</h3>
<p>${movie.Actors || 'N/A'}</p>
<h3>Plot:</h3>
<p>${movie.Plot || 'N/A'}</p>
<h3>IMDb Rating:</h3>
<p>${movie.imdbRating || 'N/A'}</p>
${movie.Poster && movie.Poster !== 'N/A' ? `
<h3>Poster:</h3>
<img src="${movie.Poster}" alt="${movie.Title} Poster" style="max-width: 100%; height: auto; border-radius: 8px;">
` : ''}
`;
}
// --- Event Listeners ---
toggleButton.addEventListener('click', async () => {
// If the panel is closed, prompt for IMDb ID and fetch data
if (!xrayPanel.classList.contains('open')) {
const imdbID = prompt('Please enter the IMDb ID for the movie (e.g., tt0133093 for The Matrix):');
if (imdbID) {
await fetchMovieData(imdbID.trim());
} else {
// User cancelled or entered empty, reset content
xrayContentDiv.innerHTML = `<p>Click "X-Ray" and enter an IMDb ID to fetch movie details.</p><p>Example IMDb ID: tt0133093 (The Matrix)</p>`;
xrayLoader.classList.remove('active');
}
}
xrayPanel.classList.toggle('open');
});
closeButton.addEventListener('click', () => {
xrayPanel.classList.remove('open');
});
})();