initial commit
This commit is contained in:
152
.gitignore
vendored
Normal file
152
.gitignore
vendored
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
.temp
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# vitepress build output
|
||||||
|
**/.vitepress/dist
|
||||||
|
|
||||||
|
# vitepress cache directory
|
||||||
|
**/.vitepress/cache
|
||||||
|
|
||||||
|
# Docusaurus cache and generated files
|
||||||
|
.docusaurus
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
231
App.tsx
Normal file
231
App.tsx
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
|
||||||
|
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
||||||
|
import { VideoCell } from './components/VideoCell';
|
||||||
|
import { BorderlessToolbar } from './components/BorderlessToolbar';
|
||||||
|
import { getYouTubeEmbedUrl } from './utils/youtube';
|
||||||
|
import { loadYouTubeIframeApi } from './utils/youtubeApiLoader';
|
||||||
|
|
||||||
|
const initialVideoUrls = ['', '', '', '']; // Up to 4 videos
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const [videoUrls, setVideoUrls] = useState<string[]>(initialVideoUrls);
|
||||||
|
const [isBorderlessModeActive, setIsBorderlessModeActive] = useState<boolean>(false);
|
||||||
|
const [activeAudioVideoId, setActiveAudioVideoId] = useState<string | null>(null);
|
||||||
|
const [isYtApiReady, setIsYtApiReady] = useState<boolean>(false);
|
||||||
|
const [appErrorMessage, setAppErrorMessage] = useState<string | null>(null);
|
||||||
|
const [toolbarHeight, setToolbarHeight] = useState<number>(0);
|
||||||
|
|
||||||
|
const playerRefs = useRef<{ [key: string]: YT.Player | null }>({});
|
||||||
|
const toolbarRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadYouTubeIframeApi()
|
||||||
|
.then(() => {
|
||||||
|
setIsYtApiReady(true);
|
||||||
|
setAppErrorMessage(null);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("Failed to load YouTube API:", error);
|
||||||
|
setAppErrorMessage("Error: Could not load YouTube player API. Video playback may not work correctly. Please try refreshing the page.");
|
||||||
|
setIsYtApiReady(false);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleUrlChange = useCallback((index: number, newUrl: string) => {
|
||||||
|
setVideoUrls(prevUrls => {
|
||||||
|
const updatedUrls = [...prevUrls];
|
||||||
|
updatedUrls[index] = newUrl;
|
||||||
|
return updatedUrls;
|
||||||
|
});
|
||||||
|
if (!newUrl && activeAudioVideoId === `video-${index}`) {
|
||||||
|
setActiveAudioVideoId(null);
|
||||||
|
}
|
||||||
|
}, [activeAudioVideoId]);
|
||||||
|
|
||||||
|
const setPlayerInstance = useCallback((cellId: string, player: YT.Player | null) => {
|
||||||
|
playerRefs.current[cellId] = player;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSelectAudio = useCallback((cellId: string) => {
|
||||||
|
setActiveAudioVideoId(cellId);
|
||||||
|
Object.keys(playerRefs.current).forEach(key => {
|
||||||
|
const player = playerRefs.current[key];
|
||||||
|
if (player && typeof player.isMuted === 'function') {
|
||||||
|
if (key === cellId) {
|
||||||
|
console.log(`Unmuting player for cell: ${cellId}`);
|
||||||
|
if (player.isMuted()) player.unMute();
|
||||||
|
player.setVolume(100); // Ensure volume is set to audible level
|
||||||
|
} else {
|
||||||
|
console.log(`Muting player for cell: ${key}`);
|
||||||
|
player.mute(); // Always mute without checking current state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const toggleBorderlessMode = () => {
|
||||||
|
setIsBorderlessModeActive(prev => {
|
||||||
|
const newMode = !prev;
|
||||||
|
if (!newMode) { // Exiting borderless mode
|
||||||
|
setActiveAudioVideoId(null);
|
||||||
|
Object.values(playerRefs.current).forEach(player => {
|
||||||
|
if (player && typeof player.isMuted === 'function' && !player.isMuted()) {
|
||||||
|
player.mute();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return newMode;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const calculateToolbarHeight = () => {
|
||||||
|
if (isBorderlessModeActive && toolbarRef.current) {
|
||||||
|
setToolbarHeight(toolbarRef.current.offsetHeight);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isBorderlessModeActive) {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
calculateToolbarHeight(); // Initial calculation
|
||||||
|
window.addEventListener('resize', calculateToolbarHeight);
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
setToolbarHeight(0); // Reset when exiting
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
window.removeEventListener('resize', calculateToolbarHeight);
|
||||||
|
};
|
||||||
|
}, [isBorderlessModeActive]);
|
||||||
|
|
||||||
|
const activeVideoDetails = videoUrls
|
||||||
|
.map((url, index) => ({
|
||||||
|
url,
|
||||||
|
cellId: `video-${index}`,
|
||||||
|
cellNumber: index + 1,
|
||||||
|
originalIndex: index, // Keep original index
|
||||||
|
isValid: getYouTubeEmbedUrl(url) !== null,
|
||||||
|
}))
|
||||||
|
.filter(video => video.isValid);
|
||||||
|
|
||||||
|
let gridLayoutClasses = "grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4 w-full max-w-7xl";
|
||||||
|
let mainContainerStyles: React.CSSProperties = {};
|
||||||
|
|
||||||
|
if (isBorderlessModeActive) {
|
||||||
|
mainContainerStyles = {
|
||||||
|
position: 'fixed',
|
||||||
|
top: `${toolbarHeight}px`, // Offset by toolbar height
|
||||||
|
left: 0,
|
||||||
|
width: '100vw',
|
||||||
|
height: `calc(100vh - ${toolbarHeight}px)`, // Adjust height
|
||||||
|
zIndex: 40, // Below toolbar (z-50) but above default content
|
||||||
|
background: '#000',
|
||||||
|
};
|
||||||
|
switch (activeVideoDetails.length) {
|
||||||
|
case 1:
|
||||||
|
gridLayoutClasses = "grid grid-cols-1 grid-rows-1 h-full";
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
gridLayoutClasses = "grid grid-cols-2 grid-rows-1 h-full";
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
gridLayoutClasses = "grid grid-cols-3 grid-rows-1 h-full";
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
default:
|
||||||
|
gridLayoutClasses = "grid grid-cols-2 grid-rows-2 h-full";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (activeVideoDetails.length === 0) {
|
||||||
|
gridLayoutClasses = "flex items-center justify-center h-full";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`min-h-screen flex flex-col items-center ${isBorderlessModeActive ? 'bg-black' : 'bg-gray-900 text-white p-4 md:p-6 lg:p-8'}`}>
|
||||||
|
{!isBorderlessModeActive && (
|
||||||
|
<header className="w-full max-w-7xl mb-6 text-center">
|
||||||
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-red-500 mb-2">YouTube Redzone Viewer</h1>
|
||||||
|
<p className="text-gray-300 mb-6 text-sm sm:text-base">Load up to four YouTube videos. Enter Borderless Mode for immersive viewing!</p>
|
||||||
|
<button
|
||||||
|
onClick={toggleBorderlessMode}
|
||||||
|
disabled={!isYtApiReady && activeVideoDetails.length > 0}
|
||||||
|
className="px-5 py-2.5 sm:px-6 sm:py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg shadow-md transition-all duration-150 ease-in-out disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:bg-red-600 focus:outline-none focus:ring-4 focus:ring-red-400 focus:ring-opacity-50"
|
||||||
|
aria-label={isBorderlessModeActive ? 'Exit Borderless Mode' : 'Enter Borderless Mode'}
|
||||||
|
>
|
||||||
|
{isBorderlessModeActive ? 'Exit Borderless Mode' : 'Enter Borderless Mode'}
|
||||||
|
</button>
|
||||||
|
{(!isYtApiReady && activeVideoDetails.length > 0) && (
|
||||||
|
<p className="text-xs sm:text-sm text-yellow-300 mt-3 p-2 bg-yellow-800 bg-opacity-30 rounded-md">
|
||||||
|
YouTube Player API is not ready. Borderless mode might not function correctly.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{appErrorMessage && (
|
||||||
|
<p role="alert" aria-live="assertive" className="text-xs sm:text-sm text-red-300 mt-3 p-2 bg-red-800 bg-opacity-40 rounded-md">{appErrorMessage}</p>
|
||||||
|
)}
|
||||||
|
</header>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isBorderlessModeActive && (
|
||||||
|
<BorderlessToolbar
|
||||||
|
ref={toolbarRef}
|
||||||
|
onExitBorderlessMode={toggleBorderlessMode}
|
||||||
|
activeVideos={activeVideoDetails.map(v => ({ cellId: v.cellId, cellNumber: v.cellNumber }))}
|
||||||
|
onSelectAudio={handleSelectAudio}
|
||||||
|
currentActiveAudioVideoId={activeAudioVideoId}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<main
|
||||||
|
id="video-grid-container"
|
||||||
|
className={`${gridLayoutClasses} ${isBorderlessModeActive ? '' : 'w-full max-w-7xl'}`}
|
||||||
|
style={mainContainerStyles}
|
||||||
|
aria-label="Video grid"
|
||||||
|
>
|
||||||
|
{isBorderlessModeActive ? (
|
||||||
|
activeVideoDetails.length > 0 ? (
|
||||||
|
activeVideoDetails.map(video => (
|
||||||
|
<VideoCell
|
||||||
|
key={video.cellId}
|
||||||
|
cellId={video.cellId}
|
||||||
|
initialUrl={video.url}
|
||||||
|
onUrlChange={(newUrl) => handleUrlChange(video.originalIndex, newUrl)}
|
||||||
|
cellNumber={video.cellNumber}
|
||||||
|
isBorderless={true}
|
||||||
|
isAudioActive={activeAudioVideoId === video.cellId}
|
||||||
|
setPlayerInstance={setPlayerInstance}
|
||||||
|
isApiReady={isYtApiReady}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="text-gray-400 text-lg">No active videos to display in borderless mode. Add some URLs!</div>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
videoUrls.map((url, index) => (
|
||||||
|
<VideoCell
|
||||||
|
key={`video-cell-${index}`}
|
||||||
|
cellId={`video-${index}`}
|
||||||
|
initialUrl={url}
|
||||||
|
onUrlChange={(newUrl) => handleUrlChange(index, newUrl)}
|
||||||
|
cellNumber={index + 1}
|
||||||
|
isBorderless={false}
|
||||||
|
isAudioActive={activeAudioVideoId === `video-${index}`}
|
||||||
|
setPlayerInstance={setPlayerInstance}
|
||||||
|
isApiReady={isYtApiReady}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{!isBorderlessModeActive && (
|
||||||
|
<footer className="mt-10 sm:mt-12 text-center text-gray-500 text-xs sm:text-sm">
|
||||||
|
<p>© {new Date().getFullYear()} YouTube Redzone Viewer. All video content is property of its respective owners.</p>
|
||||||
|
<p>Ensure you have the necessary rights to view and display the content.</p>
|
||||||
|
</footer>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
14
README.md
Normal file
14
README.md
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
# Run and deploy your AI Studio app
|
||||||
|
|
||||||
|
This contains everything you need to run your app locally.
|
||||||
|
|
||||||
|
## Run Locally
|
||||||
|
|
||||||
|
**Prerequisites:** Node.js
|
||||||
|
|
||||||
|
|
||||||
|
1. Install dependencies:
|
||||||
|
`npm install`
|
||||||
|
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||||
|
3. Run the app:
|
||||||
|
`npm run dev`
|
||||||
60
components/BorderlessToolbar.tsx
Normal file
60
components/BorderlessToolbar.tsx
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface ActiveVideoInfo {
|
||||||
|
cellId: string;
|
||||||
|
cellNumber: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BorderlessToolbarProps {
|
||||||
|
onExitBorderlessMode: () => void;
|
||||||
|
activeVideos: ActiveVideoInfo[];
|
||||||
|
onSelectAudio: (cellId: string) => void;
|
||||||
|
currentActiveAudioVideoId: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BorderlessToolbar = React.forwardRef<HTMLDivElement, BorderlessToolbarProps>(({
|
||||||
|
onExitBorderlessMode,
|
||||||
|
activeVideos,
|
||||||
|
onSelectAudio,
|
||||||
|
currentActiveAudioVideoId,
|
||||||
|
}, ref) => {
|
||||||
|
if (activeVideos.length === 0) return null; // Don't show toolbar if no videos are active
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className="fixed top-0 left-0 right-0 bg-black bg-opacity-75 p-2 sm:p-3 flex items-center justify-between space-x-2 sm:space-x-4 z-[100]"
|
||||||
|
role="toolbar"
|
||||||
|
aria-label="Borderless mode controls"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={onExitBorderlessMode}
|
||||||
|
className="px-3 py-1.5 sm:px-4 sm:py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-md text-xs sm:text-sm shadow-md transition-colors"
|
||||||
|
aria-label="Exit Borderless Mode"
|
||||||
|
>
|
||||||
|
Exit Borderless
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-1 sm:space-x-2 overflow-x-auto">
|
||||||
|
<span className="text-gray-300 font-medium text-xs sm:text-sm mr-1 sm:mr-2 flex-shrink-0">Audio:</span>
|
||||||
|
{activeVideos.map(({ cellId, cellNumber }) => (
|
||||||
|
<button
|
||||||
|
key={cellId}
|
||||||
|
onClick={() => onSelectAudio(cellId)}
|
||||||
|
className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors shadow flex-shrink-0
|
||||||
|
${currentActiveAudioVideoId === cellId
|
||||||
|
? 'bg-green-500 text-white hover:bg-green-600'
|
||||||
|
: 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`}
|
||||||
|
aria-pressed={currentActiveAudioVideoId === cellId}
|
||||||
|
aria-label={`Play audio from video ${cellNumber}`}
|
||||||
|
>
|
||||||
|
V{cellNumber}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
BorderlessToolbar.displayName = 'BorderlessToolbar';
|
||||||
200
components/VideoCell.tsx
Normal file
200
components/VideoCell.tsx
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
|
||||||
|
import React, { useState, useEffect, useMemo, useRef } from 'react';
|
||||||
|
import { getYouTubeEmbedUrl } from '../utils/youtube';
|
||||||
|
|
||||||
|
interface VideoCellProps {
|
||||||
|
cellId: string;
|
||||||
|
initialUrl: string;
|
||||||
|
onUrlChange: (newUrl: string) => void;
|
||||||
|
cellNumber: number;
|
||||||
|
isBorderless: boolean;
|
||||||
|
isAudioActive: boolean;
|
||||||
|
setPlayerInstance: (cellId: string, player: YT.Player | null) => void;
|
||||||
|
isApiReady: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const VideoCell: React.FC<VideoCellProps> = ({
|
||||||
|
cellId,
|
||||||
|
initialUrl,
|
||||||
|
onUrlChange,
|
||||||
|
cellNumber,
|
||||||
|
isBorderless,
|
||||||
|
isAudioActive,
|
||||||
|
setPlayerInstance,
|
||||||
|
isApiReady,
|
||||||
|
}) => {
|
||||||
|
const [inputValue, setInputValue] = useState<string>(initialUrl);
|
||||||
|
const playerRef = useRef<YT.Player | null>(null);
|
||||||
|
const iframeContainerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const embedUrl = useMemo(() => getYouTubeEmbedUrl(initialUrl), [initialUrl]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialUrl !== inputValue) {
|
||||||
|
setInputValue(initialUrl);
|
||||||
|
}
|
||||||
|
}, [initialUrl]);
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
if (inputValue !== initialUrl) {
|
||||||
|
if (playerRef.current) {
|
||||||
|
playerRef.current.destroy();
|
||||||
|
playerRef.current = null;
|
||||||
|
setPlayerInstance(cellId, null);
|
||||||
|
}
|
||||||
|
onUrlChange(inputValue);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setInputValue(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
handleSubmit();
|
||||||
|
event.currentTarget.blur();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isApiReady || !embedUrl || !window.YT || !iframeContainerRef.current) {
|
||||||
|
if (playerRef.current) {
|
||||||
|
playerRef.current.destroy();
|
||||||
|
playerRef.current = null;
|
||||||
|
setPlayerInstance(cellId, null);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const videoId = embedUrl.split('/embed/')[1]?.split('?')[0];
|
||||||
|
if (!videoId) return;
|
||||||
|
|
||||||
|
if (playerRef.current) {
|
||||||
|
playerRef.current.destroy();
|
||||||
|
playerRef.current = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const playerElementId = `ytplayer-${cellId}`;
|
||||||
|
let playerHostDiv = document.getElementById(playerElementId);
|
||||||
|
if (!playerHostDiv && iframeContainerRef.current) {
|
||||||
|
playerHostDiv = document.createElement('div');
|
||||||
|
playerHostDiv.id = playerElementId;
|
||||||
|
iframeContainerRef.current.innerHTML = '';
|
||||||
|
iframeContainerRef.current.appendChild(playerHostDiv);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!playerHostDiv) return;
|
||||||
|
|
||||||
|
const player = new window.YT.Player(playerElementId, {
|
||||||
|
height: '100%', // Player fills its container (playerHostDiv which is appended to iframeContainerRef)
|
||||||
|
width: '100%', // Player fills its container
|
||||||
|
videoId: videoId,
|
||||||
|
playerVars: {
|
||||||
|
autoplay: 1,
|
||||||
|
mute: 1,
|
||||||
|
controls: isBorderless ? 0 : 1,
|
||||||
|
playsinline: 1,
|
||||||
|
modestbranding: 1,
|
||||||
|
rel: 0,
|
||||||
|
iv_load_policy: 3,
|
||||||
|
origin: window.location.origin,
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
onReady: (event) => {
|
||||||
|
playerRef.current = event.target;
|
||||||
|
setPlayerInstance(cellId, event.target);
|
||||||
|
if (isAudioActive) {
|
||||||
|
event.target.unMute();
|
||||||
|
} else {
|
||||||
|
event.target.mute();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError: (event) => {
|
||||||
|
console.error(`YouTube Player Error for ${cellId}:`, event.data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (playerRef.current) {
|
||||||
|
// Check if destroy method exists before calling, good practice with external APIs
|
||||||
|
if (typeof playerRef.current.destroy === 'function') {
|
||||||
|
playerRef.current.destroy();
|
||||||
|
}
|
||||||
|
playerRef.current = null;
|
||||||
|
setPlayerInstance(cellId, null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [isApiReady, embedUrl, cellId, setPlayerInstance, isBorderless]); // isAudioActive removed as onReady handles initial mute based on it. Mute control is separate effect.
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (playerRef.current && typeof playerRef.current.isMuted === 'function') {
|
||||||
|
if (isAudioActive) {
|
||||||
|
if (playerRef.current.isMuted()) {
|
||||||
|
playerRef.current.unMute();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!playerRef.current.isMuted()) {
|
||||||
|
playerRef.current.mute();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [isAudioActive, cellId]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`flex flex-col bg-gray-800 ${isBorderless ? 'p-0 border-0 rounded-none' : 'p-2 sm:p-3 rounded-lg shadow-xl border border-gray-700 space-y-2'}`}
|
||||||
|
role="region"
|
||||||
|
aria-labelledby={`video-cell-title-${cellId}`}
|
||||||
|
>
|
||||||
|
{!isBorderless && (
|
||||||
|
<>
|
||||||
|
<h2 id={`video-cell-title-${cellId}`} className="sr-only">Video Cell {cellNumber}</h2>
|
||||||
|
<label htmlFor={`url-input-${cellId}`} className="sr-only">YouTube URL for Video {cellNumber}</label>
|
||||||
|
<div className="flex space-x-2 items-center">
|
||||||
|
<span
|
||||||
|
className="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-red-600 flex items-center justify-center text-white font-bold text-sm sm:text-base"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
{cellNumber}
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
id={`url-input-${cellId}`}
|
||||||
|
type="url"
|
||||||
|
value={inputValue}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onBlur={handleSubmit}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
placeholder="Paste YouTube URL & press Enter"
|
||||||
|
className="flex-grow p-2 sm:p-2.5 rounded bg-gray-700 text-white border border-gray-600 focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none placeholder-gray-400 text-sm sm:text-base"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
ref={iframeContainerRef}
|
||||||
|
className={`bg-black ${isBorderless ? 'w-full h-full rounded-none' : 'aspect-video rounded overflow-hidden border border-gray-700 shadow-inner'}`}
|
||||||
|
>
|
||||||
|
{(!isApiReady && embedUrl) && <p className="text-white p-4 text-center">YouTube API loading...</p>}
|
||||||
|
{!embedUrl && !isBorderless && (
|
||||||
|
<div className="w-full h-full flex items-center justify-center text-gray-500 text-xs sm:text-sm p-4 text-center">
|
||||||
|
Paste a YouTube URL above and press Enter or click away.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{embedUrl && !isApiReady && isBorderless && (
|
||||||
|
<div className="w-full h-full flex items-center justify-center text-gray-900 text-xs sm:text-sm p-4 text-center bg-gray-600">
|
||||||
|
Loading video...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(initialUrl && !embedUrl && !isBorderless) && (
|
||||||
|
<div className="w-full h-full flex items-center justify-center text-red-400 text-xs sm:text-sm p-4 text-center">
|
||||||
|
Invalid or unsupported YouTube URL.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
40
index.html
Normal file
40
index.html
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>YouTube Redzone Viewer</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
}
|
||||||
|
/* For Webkit scrollbars */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #4B5563; /* gray-600 */
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #1F2937; /* gray-800 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"react-dom/": "https://esm.sh/react-dom@^19.1.0/",
|
||||||
|
"react/": "https://esm.sh/react@^19.1.0/",
|
||||||
|
"react": "https://esm.sh/react@^19.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<link rel="stylesheet" href="/index.css">
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-900 text-white">
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/index.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
index.tsx
Normal file
15
index.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root');
|
||||||
|
if (!rootElement) {
|
||||||
|
throw new Error("Could not find root element to mount to");
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(rootElement);
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
5
metadata.json
Normal file
5
metadata.json
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"name": "YouTube Redzone Viewer",
|
||||||
|
"description": "Watch up to four YouTube videos simultaneously in a 2x2 grid, with the ability to pop out the entire grid as a Picture-in-Picture window.",
|
||||||
|
"requestFramePermissions": []
|
||||||
|
}
|
||||||
1072
package-lock.json
generated
Normal file
1072
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
package.json
Normal file
20
package.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "youtube-redzone-viewer",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react-dom": "^19.1.0",
|
||||||
|
"react": "^19.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.14.0",
|
||||||
|
"typescript": "~5.7.2",
|
||||||
|
"vite": "^6.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
30
tsconfig.json
Normal file
30
tsconfig.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"useDefineForClassFields": false,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true,
|
||||||
|
|
||||||
|
"paths": {
|
||||||
|
"@/*" : ["./*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
35
utils/youtube.ts
Normal file
35
utils/youtube.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
|
||||||
|
/**
|
||||||
|
* Extracts a YouTube video ID from various URL formats.
|
||||||
|
* @param url The YouTube URL.
|
||||||
|
* @returns The video ID, or null if not found.
|
||||||
|
*/
|
||||||
|
const extractYouTubeVideoId = (url: string): string | null => {
|
||||||
|
if (!url || typeof url !== 'string') return null;
|
||||||
|
|
||||||
|
const regExp = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=|[^\/]+\/(?:live|shorts)\/)|youtu\.be\/)([^"&?\/\s]{11})/;
|
||||||
|
const match = url.match(regExp);
|
||||||
|
|
||||||
|
if (match && match[1]) {
|
||||||
|
return match[1];
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generates a YouTube embed URL with common parameters and API support.
|
||||||
|
* @param url The original YouTube URL.
|
||||||
|
* @returns The embed URL string, or null if the video ID cannot be extracted or URL is invalid.
|
||||||
|
*/
|
||||||
|
export const getYouTubeEmbedUrl = (url: string): string | null => {
|
||||||
|
const videoId = extractYouTubeVideoId(url);
|
||||||
|
if (!videoId) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
// Common parameters + enablejsapi for API control + origin for security
|
||||||
|
// mute=1 is important for allowing autoplay and programmatic unmuting.
|
||||||
|
// The origin parameter MUST match the domain where the iframe is hosted.
|
||||||
|
const origin = typeof window !== 'undefined' ? window.location.origin : '';
|
||||||
|
const params = `autoplay=1&mute=1&playsinline=1&controls=1&modestbranding=1&rel=0&fs=1&iv_load_policy=3&enablejsapi=1&origin=${encodeURIComponent(origin)}`;
|
||||||
|
return `https://www.youtube.com/embed/${videoId}?${params}`;
|
||||||
|
};
|
||||||
73
utils/youtubeApiLoader.ts
Normal file
73
utils/youtubeApiLoader.ts
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
export const loadYouTubeIframeApi = (): Promise<typeof window.YT> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (window.YT && window.YT.Player) {
|
||||||
|
resolve(window.YT);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const existingScript = document.getElementById('youtube-iframe-api');
|
||||||
|
|
||||||
|
const checkReady = () => {
|
||||||
|
if (window.YT && window.YT.Player) {
|
||||||
|
resolve(window.YT);
|
||||||
|
} else {
|
||||||
|
// API script might be loaded but YT object not yet initialized
|
||||||
|
// This can happen if onYouTubeIframeAPIReady hasn't fired or was missed.
|
||||||
|
// We poll briefly.
|
||||||
|
let attempts = 0;
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
attempts++;
|
||||||
|
if (window.YT && window.YT.Player) {
|
||||||
|
clearInterval(interval);
|
||||||
|
resolve(window.YT);
|
||||||
|
} else if (attempts > 20) { // Try for ~2 seconds
|
||||||
|
clearInterval(interval);
|
||||||
|
reject(new Error('YouTube Iframe API loaded but YT object not found after timeout.'));
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (existingScript) {
|
||||||
|
// If script tag exists, it might be loading or loaded.
|
||||||
|
if (window.YT && window.YT.Player) {
|
||||||
|
resolve(window.YT);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Cast to access readyState, which might not be in default TS lib HTMLScriptElement
|
||||||
|
const scriptElement = existingScript as HTMLScriptElement & { readyState?: string };
|
||||||
|
if (scriptElement.readyState === 'loaded' || scriptElement.readyState === 'complete') {
|
||||||
|
checkReady();
|
||||||
|
} else {
|
||||||
|
existingScript.addEventListener('load', checkReady);
|
||||||
|
existingScript.addEventListener('error', () => reject(new Error('Failed to load existing YouTube API script.')));
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tag = document.createElement('script');
|
||||||
|
tag.id = 'youtube-iframe-api';
|
||||||
|
tag.src = 'https://www.youtube.com/iframe_api';
|
||||||
|
const firstScriptTag = document.getElementsByTagName('script')[0];
|
||||||
|
if (firstScriptTag && firstScriptTag.parentNode) {
|
||||||
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||||
|
} else {
|
||||||
|
// Fallback if no script tags exist (unlikely for a working app)
|
||||||
|
document.head.appendChild(tag);
|
||||||
|
}
|
||||||
|
|
||||||
|
(window as any).onYouTubeIframeAPIReady = () => {
|
||||||
|
if (window.YT && window.YT.Player) {
|
||||||
|
resolve(window.YT);
|
||||||
|
} else {
|
||||||
|
// This case should ideally not happen if API is working correctly
|
||||||
|
reject(new Error('onYouTubeIframeAPIReady fired but YT.Player not found.'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
tag.addEventListener('error', (e) => {
|
||||||
|
// Use a more generic error message or inspect 'e' for details if needed
|
||||||
|
reject(new Error('Failed to load YouTube Iframe API script.'));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
17
vite.config.ts
Normal file
17
vite.config.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import { defineConfig, loadEnv } from 'vite';
|
||||||
|
|
||||||
|
export default defineConfig(({ mode }) => {
|
||||||
|
const env = loadEnv(mode, '.', '');
|
||||||
|
return {
|
||||||
|
define: {
|
||||||
|
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||||
|
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, '.'),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
69
youtube.d.ts
vendored
Normal file
69
youtube.d.ts
vendored
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
|
||||||
|
// A type for the global YT object and its Player constructor
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
YT?: {
|
||||||
|
Player: new (frameId: string | HTMLDivElement, options: YT.PlayerOptions) => YT.Player;
|
||||||
|
// Add other YT properties if needed, like enums for player states
|
||||||
|
PlayerState?: {
|
||||||
|
ENDED: number;
|
||||||
|
PLAYING: number;
|
||||||
|
PAUSED: number;
|
||||||
|
BUFFERING: number;
|
||||||
|
CUED: number;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onYouTubeIframeAPIReady?: () => void;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Minimal YT.Player and YT.PlayerOptions types (can be expanded)
|
||||||
|
declare namespace YT {
|
||||||
|
interface Player {
|
||||||
|
playVideo: () => void;
|
||||||
|
pauseVideo: () => void;
|
||||||
|
stopVideo: () => void;
|
||||||
|
mute: () => void;
|
||||||
|
unMute: () => void;
|
||||||
|
isMuted: () => boolean;
|
||||||
|
getVolume: () => number;
|
||||||
|
setVolume: (volume: number) => void;
|
||||||
|
getPlayerState: () => number;
|
||||||
|
addEventListener: <E extends keyof Events>(event: E, listener: Events[E]) => void;
|
||||||
|
destroy: () => void;
|
||||||
|
// Add more methods as needed
|
||||||
|
getIframe: () => HTMLIFrameElement;
|
||||||
|
getVideoUrl: () => string;
|
||||||
|
loadVideoById: (videoId: string, startSeconds?: number, suggestedQuality?: string) => void;
|
||||||
|
cueVideoById: (videoId: string, startSeconds?: number, suggestedQuality?: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PlayerOptions {
|
||||||
|
height?: string;
|
||||||
|
width?: string;
|
||||||
|
videoId?: string;
|
||||||
|
playerVars?: PlayerVars;
|
||||||
|
events?: Events;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PlayerVars {
|
||||||
|
autoplay?: 0 | 1;
|
||||||
|
controls?: 0 | 1 | 2;
|
||||||
|
enablejsapi?: 0 | 1;
|
||||||
|
origin?: string;
|
||||||
|
rel?: 0 | 1;
|
||||||
|
showinfo?: 0 | 1;
|
||||||
|
// Add more playerVars as needed
|
||||||
|
[key: string]: any; // Allow other player vars
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Events {
|
||||||
|
onReady?: (event: { target: Player }) => void;
|
||||||
|
onStateChange?: (event: { data: number; target: Player }) => void;
|
||||||
|
onError?: (event: { data: number; target: Player }) => void;
|
||||||
|
// Add more events as needed
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add this export to make the file a module
|
||||||
|
export {};
|
||||||
Reference in New Issue
Block a user