[V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: #000000; --foreground: #22c55e; --primary: #22c55e; --primary-foreground: #000000; --secondary: #065f46; --secondary-foreground: #22c55e; --muted: #0f172a; --muted-foreground: #64748b; --accent: #134e4a; --accent-foreground: #22c55e; --destructive: #ef4444; --destructive-foreground: #f8fafc; --border: #22c55e; --input: #22c55e; --ring: #22c55e; --radius: 0.5rem; } /* Theme variations - Vibrant */ [data-theme="green"] { --background: #000000; --foreground: #22c55e; --primary: #22c55e; --primary-foreground: #000000; --secondary: #065f46; --secondary-foreground: #22c55e; --border: #22c55e; --input: #22c55e; --ring: #22c55e; } [data-theme="blue"] { --background: #000000; --foreground: #3b82f6; --primary: #3b82f6; --primary-foreground: #000000; --secondary: #1e40af; --secondary-foreground: #3b82f6; --border: #3b82f6; --input: #3b82f6; --ring: #3b82f6; } [data-theme="purple"] { --background: #000000; --foreground: #a855f7; --primary: #a855f7; --primary-foreground: #000000; --secondary: #6b21a8; --secondary-foreground: #a855f7; --border: #a855f7; --input: #a855f7; --ring: #a855f7; } [data-theme="red"] { --background: #000000; --foreground: #ef4444; --primary: #ef4444; --primary-foreground: #000000; --secondary: #991b1b; --secondary-foreground: #ef4444; --border: #ef4444; --input: #ef4444; --ring: #ef4444; } [data-theme="cyan"] { --background: #000000; --foreground: #06b6d4; --primary: #06b6d4; --primary-foreground: #000000; --secondary: #0e7490; --secondary-foreground: #06b6d4; --border: #06b6d4; --input: #06b6d4; --ring: #06b6d4; } [data-theme="amber"] { --background: #000000; --foreground: #f59e0b; --primary: #f59e0b; --primary-foreground: #000000; --secondary: #b45309; --secondary-foreground: #f59e0b; --border: #f59e0b; --input: #f59e0b; --ring: #f59e0b; } /* Theme variations - Muted */ [data-theme="teal"] { --background: #000000; --foreground: #14b8a6; --primary: #14b8a6; --primary-foreground: #000000; --secondary: #115e59; --secondary-foreground: #14b8a6; --border: #14b8a6; --input: #14b8a6; --ring: #14b8a6; } [data-theme="indigo"] { --background: #000000; --foreground: #6366f1; --primary: #6366f1; --primary-foreground: #000000; --secondary: #4338ca; --secondary-foreground: #6366f1; --border: #6366f1; --input: #6366f1; --ring: #6366f1; } [data-theme="pink"] { --background: #000000; --foreground: #ec4899; --primary: #ec4899; --primary-foreground: #000000; --secondary: #be185d; --secondary-foreground: #ec4899; --border: #ec4899; --input: #ec4899; --ring: #ec4899; } [data-theme="emerald"] { --background: #000000; --foreground: #10b981; --primary: #10b981; --primary-foreground: #000000; --secondary: #047857; --secondary-foreground: #10b981; --border: #10b981; --input: #10b981; --ring: #10b981; } [data-theme="sky"] { --background: #000000; --foreground: #0ea5e9; --primary: #0ea5e9; --primary-foreground: #000000; --secondary: #0369a1; --secondary-foreground: #0ea5e9; --border: #0ea5e9; --input: #0ea5e9; --ring: #0ea5e9; } [data-theme="violet"] { --background: #000000; --foreground: #8b5cf6; --primary: #8b5cf6; --primary-foreground: #000000; --secondary: #6d28d9; --secondary-foreground: #8b5cf6; --border: #8b5cf6; --input: #8b5cf6; --ring: #8b5cf6; } [data-theme="rose"] { --background: #000000; --foreground: #f43f5e; --primary: #f43f5e; --primary-foreground: #000000; --secondary: #be123c; --secondary-foreground: #f43f5e; --border: #f43f5e; --input: #f43f5e; --ring: #f43f5e; } /* Theme variations - Grayscale */ [data-theme="gray"] { --background: #000000; --foreground: #6b7280; --primary: #6b7280; --primary-foreground: #000000; --secondary: #374151; --secondary-foreground: #6b7280; --border: #6b7280; --input: #6b7280; --ring: #6b7280; } [data-theme="slate"] { --background: #000000; --foreground: #64748b; --primary: #64748b; --primary-foreground: #000000; --secondary: #334155; --secondary-foreground: #64748b; --border: #64748b; --input: #64748b; --ring: #64748b; } [data-theme="zinc"] { --background: #000000; --foreground: #71717a; --primary: #71717a; --primary-foreground: #000000; --secondary: #3f3f46; --secondary-foreground: #71717a; --border: #71717a; --input: #71717a; --ring: #71717a; } [data-theme="neutral"] { --background: #000000; --foreground: #737373; --primary: #737373; --primary-foreground: #000000; --secondary: #404040; --secondary-foreground: #737373; --border: #737373; --input: #737373; --ring: #737373; } [data-theme="stone"] { --background: #000000; --foreground: #78716c; --primary: #78716c; --primary-foreground: #000000; --secondary: #44403c; --secondary-foreground: #78716c; --border: #78716c; --input: #78716c; --ring: #78716c; } body { background-color: var(--background); color: var(--foreground); font-family: "Space Mono", monospace; } /* Custom scrollbar for the playlist */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--background); } ::-webkit-scrollbar-thumb { background: var(--primary); opacity: 0.3; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); opacity: 0.5; } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]css:file="styles/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]javascript:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./pages/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { mono: ["Space Mono", "monospace"], }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/components/TaskList.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Plus, Trash2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" interface Task { id: string text: string completed: boolean } export default function TaskList() { const [tasks, setTasks] = useState([]) const [newTaskText, setNewTaskText] = useState("") useEffect(() => { // Load tasks from localStorage const savedTasks = localStorage.getItem("focusTasks") if (savedTasks) { setTasks(JSON.parse(savedTasks)) } }, []) // Save tasks to localStorage when they change useEffect(() => { localStorage.setItem("focusTasks", JSON.stringify(tasks)) }, [tasks]) const addTask = () => { if (!newTaskText.trim()) return const newTask: Task = { id: Date.now().toString(), text: newTaskText, completed: false, } setTasks([...tasks, newTask]) setNewTaskText("") } const toggleTask = (id: string) => { setTasks(tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task))) } const removeTask = (id: string) => { setTasks(tasks.filter((task) => task.id !== id)) } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter") { addTask() } } return (

(tasks)

setNewTaskText(e.target.value)} onKeyPress={handleKeyPress} placeholder="Add task..." className="flex-grow border-primary/20 bg-background/50 text-primary placeholder:text-primary/30 h-9" />

{tasks.length === 0 ? (

No tasks

) : ( tasks.map((task) => (

toggleTask(task.id)} className="border-primary/30 data-[state=checked]:bg-primary/70 data-[state=checked]:text-primary-foreground mr-2" /> {task.text}

)) )}

) } [V0_FILE]typescript:file="types/youtube.d.ts" isMerged="true" // Type definitions for YouTube IFrame API declare namespace YT { export enum PlayerState { UNSTARTED = -1, ENDED = 0, PLAYING = 1, PAUSED = 2, BUFFERING = 3, CUED = 5, } export interface PlayerOptions { width?: string | number height?: string | number videoId?: string playerVars?: { autoplay?: 0 | 1 controls?: 0 | 1 disablekb?: 0 | 1 enablejsapi?: 0 | 1 fs?: 0 | 1 iv_load_policy?: 1 | 3 modestbranding?: 0 | 1 playsinline?: 0 | 1 rel?: 0 | 1 showinfo?: 0 | 1 loop?: 0 | 1 [key: string]: any } events?: { onReady?: (event: Event) => void onStateChange?: (event: OnStateChangeEvent) => void onPlaybackQualityChange?: (event: Event) => void onPlaybackRateChange?: (event: Event) => void onError?: (event: OnErrorEvent) => void onApiChange?: (event: Event) => void } } export interface Player { playVideo(): void pauseVideo(): void stopVideo(): void seekTo(seconds: number, allowSeekAhead?: boolean): void loadVideoById(videoId: string, startSeconds?: number): void cueVideoById(videoId: string, startSeconds?: number): void loadVideoById(options: { videoId: string; startSeconds?: number; endSeconds?: number }): void cueVideoById(options: { videoId: string; startSeconds?: number; endSeconds?: number }): void loadPlaylist(playlist: string | string[], index?: number, startSeconds?: number): void cuePlaylist(playlist: string | string[], index?: number, startSeconds?: number): void mute(): void unMute(): void isMuted(): boolean setVolume(volume: number): void getVolume(): number getVideoLoadedFraction(): number getPlayerState(): number getCurrentTime(): number getDuration(): number getVideoUrl(): string getVideoEmbedCode(): string getPlaylist(): string[] getPlaylistIndex(): number destroy(): void } export interface OnStateChangeEvent { data: PlayerState target: Player } export interface OnErrorEvent { data: number target: Player } export interface Event { target: Player data: any } export function Player(elementId: string | HTMLElement, options: PlayerOptions): Player } interface Window { onYouTubeIframeAPIReady: () => void YT: typeof YT onSpotifyWebPlaybackSDKReady: () => void Spotify: any } [V0_FILE]typescript:file="utils/youtube.ts" isMerged="true" // utils/youtube.ts import type YT from "types/youtube" export const getYouTubePlayer = (elementId: string, options: YT.PlayerOptions): YT.Player => { return new window.YT.Player(elementId, options) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import "./globals.css" export const metadata: Metadata = { title: "satori", description: "Monochromatic focus environment with Japanese aesthetics.", generator: "v0.dev", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } import "./globals.css" [V0_FILE]typescriptreact:file="app/components/MusicPlayer.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Play, Pause, SkipForward, SkipBack, Trash2, Plus, Music } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Slider } from "@/components/ui/slider" import { getYouTubePlayer } from "@/utils/youtube" declare global { interface Window { onYouTubeIframeAPIReady: () => void YT: any } } interface Track { id: string title: string url: string } export default function MusicPlayer() { const [playlist, setPlaylist] = useState([]) const [currentTrackIndex, setCurrentTrackIndex] = useState(-1) const [isPlaying, setIsPlaying] = useState(false) const [newTrackUrl, setNewTrackUrl] = useState("") const [volume, setVolume] = useState(70) const playerRef = useRef(null) const playerContainerRef = useRef(null) // Load playlist from localStorage on initial render useEffect(() => { if (typeof window !== "undefined") { const savedPlaylist = localStorage.getItem("musicPlaylist") if (savedPlaylist) { setPlaylist(JSON.parse(savedPlaylist)) } } }, []) // Save playlist to localStorage when it changes useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("musicPlaylist", JSON.stringify(playlist)) } }, [playlist]) // Initialize YouTube API useEffect(() => { // Load YouTube IFrame API const tag = document.createElement("script") tag.src = "https://www.youtube.com/iframe_api" const firstScriptTag = document.getElementsByTagName("script")[0] firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag) // Define the onYouTubeIframeAPIReady function window.onYouTubeIframeAPIReady = () => { // @ts-ignore const YT = window.YT // Create a div element for the player const playerDiv = document.createElement("div") playerDiv.id = "youtube-player" playerDiv.style.display = "none" // Append it to the container if (playerContainerRef.current) { playerContainerRef.current.appendChild(playerDiv) // Initialize the player playerRef.current = getYouTubePlayer("youtube-player", { height: "0", width: "0", playerVars: { playsinline: 1, controls: 0, disablekb: 1, }, events: { onStateChange: (event: any) => { if (event.data === YT.PlayerState.ENDED) { playNextTrack() } }, onError: (event: any) => { console.error("YouTube player error:", event.data) playNextTrack() }, }, }) } } return () => { if (playerRef.current) { playerRef.current.destroy() } } }, []) // Extract YouTube video ID from URL const extractVideoId = (url: string): string | null => { const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/ const match = url.match(regExp) return match && match[2].length === 11 ? match[2] : null } // Extract video title from URL (simplified version) const extractTitle = (url: string): string => { const videoId = extractVideoId(url) return videoId ? `YouTube (${videoId.substring(0, 6)}...)` : "Unknown Track" } // Add a new track to the playlist const addTrack = async () => { if (!newTrackUrl.trim()) return let trackId: string | null = null trackId = extractVideoId(newTrackUrl) if (!trackId) { alert("Invalid YouTube URL") return } const title = extractTitle(newTrackUrl) const newTrack: Track = { id: trackId, title, url: newTrackUrl, } setPlaylist([...playlist, newTrack]) setNewTrackUrl("") // If this is the first track, start playing it if (playlist.length === 0) { setCurrentTrackIndex(0) } } // Remove a track from the playlist const removeTrack = (index: number) => { const newPlaylist = [...playlist] newPlaylist.splice(index, 1) setPlaylist(newPlaylist) // Adjust currentTrackIndex if necessary if (index === currentTrackIndex) { if (isPlaying) { playerRef.current?.stopVideo() setIsPlaying(false) } if (newPlaylist.length > 0) { setCurrentTrackIndex(0) } else { setCurrentTrackIndex(-1) } } else if (index < currentTrackIndex) { setCurrentTrackIndex(currentTrackIndex - 1) } } // Play/pause the current track const togglePlay = () => { if (currentTrackIndex === -1 && playlist.length > 0) { setCurrentTrackIndex(0) loadAndPlayTrack(0) return } if (!playlist[currentTrackIndex]) return if (playerRef.current) { if (isPlaying) { playerRef.current.pauseVideo() } else { playerRef.current.playVideo() } } setIsPlaying(!isPlaying) } // Load and play a specific track const loadAndPlayTrack = (index: number) => { if (!playlist[index]) return const track = playlist[index] if (playerRef.current) { const videoId = extractVideoId(track.url) if (videoId) { playerRef.current.loadVideoById(videoId) playerRef.current.setVolume(volume) setIsPlaying(true) } } } // Play the previous track const playPreviousTrack = () => { if (playlist.length === 0) return const newIndex = currentTrackIndex <= 0 ? playlist.length - 1 : currentTrackIndex - 1 setCurrentTrackIndex(newIndex) loadAndPlayTrack(newIndex) } // Play the next track const playNextTrack = () => { if (playlist.length === 0) return const newIndex = (currentTrackIndex + 1) % playlist.length setCurrentTrackIndex(newIndex) loadAndPlayTrack(newIndex) } // Update volume useEffect(() => { if (playerRef.current) { playerRef.current.setVolume(volume) } }, [volume]) // Load and play track when currentTrackIndex changes useEffect(() => { if (currentTrackIndex >= 0) { loadAndPlayTrack(currentTrackIndex) } }, [currentTrackIndex, playlist]) return (

(music)

{/* Hidden player container */}

setNewTrackUrl(e.target.value)} placeholder="Paste YouTube URL" className="flex-grow border-primary/20 bg-background/50 text-primary placeholder:text-primary/30 h-8 text-sm" />

{/* Current track info */}

{currentTrackIndex >= 0 && playlist[currentTrackIndex] ? playlist[currentTrackIndex].title : "No track selected"}

{/* Volume slider */}

setVolume(value[0])} className="h-1.5" />

Vol: {volume}%

{/* Playback controls */}

{/* Playlist */}

{playlist.length === 0 ? (

No tracks added

) : ( playlist.map((track, index) => (

{ setCurrentTrackIndex(index) loadAndPlayTrack(index) }} > {track.title}

)) )}

) } [V0_FILE]typescriptreact:file="app/components/MoviePlayer.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Trash2, Plus, Film } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { getYouTubePlayer } from "@/utils/youtube" interface Movie { id: string title: string url: string } // Declare YT as a global variable to avoid TypeScript errors declare global { interface Window { YT: any onYouTubeIframeAPIReady: () => void } } export default function MoviePlayer({ isBreakTime = false, onClose }: { isBreakTime?: boolean; onClose?: () => void }) { const [movies, setMovies] = useState([]) const [currentMovieIndex, setCurrentMovieIndex] = useState(-1) const [isPlaying, setIsPlaying] = useState(false) const [newMovieUrl, setNewMovieUrl] = useState("") const playerRef = useRef(null) const playerContainerRef = useRef(null) // Load movies from localStorage on initial render useEffect(() => { if (typeof window !== "undefined") { const savedMovies = localStorage.getItem("breakMovies") if (savedMovies) { setMovies(JSON.parse(savedMovies)) } } }, []) // Save movies to localStorage when it changes useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("breakMovies", JSON.stringify(movies)) } }, [movies]) // Initialize YouTube API useEffect(() => { // Load YouTube IFrame API if not already loaded if (!window.YT) { const tag = document.createElement("script") tag.src = "https://www.youtube.com/iframe_api" const firstScriptTag = document.getElementsByTagName("script")[0] firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag) } // Define the onYouTubeIframeAPIReady function if not already defined if (!window.onYouTubeIframeAPIReady) { window.onYouTubeIframeAPIReady = () => { initializePlayer() } } else if (window.YT && window.YT.Player) { // If API is already loaded, initialize player directly initializePlayer() } return () => { if (playerRef.current) { playerRef.current.destroy() } } }, []) // Auto-play first movie when break time starts useEffect(() => { if (isBreakTime && movies.length > 0 && currentMovieIndex === -1) { setCurrentMovieIndex(0) } }, [isBreakTime, movies, currentMovieIndex]) const initializePlayer = () => { // Create a div element for the player if it doesn't exist if (!document.getElementById("movie-player") && playerContainerRef.current) { const playerDiv = document.createElement("div") playerDiv.id = "movie-player" playerContainerRef.current.appendChild(playerDiv) // Initialize the player playerRef.current = getYouTubePlayer("movie-player", { height: "180", width: "320", playerVars: { playsinline: 1, controls: 1, disablekb: 0, }, events: { onStateChange: (event: any) => { if (event.data === window.YT.PlayerState.ENDED) { // Auto-play next movie if available if (currentMovieIndex < movies.length - 1) { setCurrentMovieIndex(currentMovieIndex + 1) } else { setIsPlaying(false) } } else if (event.data === window.YT.PlayerState.PLAYING) { setIsPlaying(true) } else if (event.data === window.YT.PlayerState.PAUSED) { setIsPlaying(false) } }, }, }) } } // Extract YouTube video ID from URL const extractVideoId = (url: string): string | null => { const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/ const match = url.match(regExp) return match && match[2].length === 11 ? match[2] : null } // Extract video title from URL (simplified version) const extractTitle = (url: string): string => { const videoId = extractVideoId(url) return videoId ? `Movie (${videoId.substring(0, 6)}...)` : "Unknown Movie" } // Add a new movie to the list const addMovie = () => { if (!newMovieUrl.trim()) return let movieId: string | null = null movieId = extractVideoId(newMovieUrl) if (!movieId) { alert("Invalid YouTube URL") return } const title = extractTitle(newMovieUrl) const newMovie: Movie = { id: movieId, title, url: newMovieUrl, } setMovies([...movies, newMovie]) setNewMovieUrl("") // If this is the first movie, select it if (movies.length === 0) { setCurrentMovieIndex(0) } } // Remove a movie from the list const removeMovie = (index: number) => { const newMovies = [...movies] newMovies.splice(index, 1) setMovies(newMovies) // Adjust currentMovieIndex if necessary if (index === currentMovieIndex) { if (isPlaying && playerRef.current) { playerRef.current.stopVideo() setIsPlaying(false) } if (newMovies.length > 0) { setCurrentMovieIndex(0) } else { setCurrentMovieIndex(-1) } } else if (index < currentMovieIndex) { setCurrentMovieIndex(currentMovieIndex - 1) } } // Load and play a specific movie const loadAndPlayMovie = (index: number) => { if (!movies[index] || !playerRef.current) return const movie = movies[index] const videoId = extractVideoId(movie.url) if (videoId) { playerRef.current.loadVideoById(videoId) setIsPlaying(true) } } // Effect to load and play movie when currentMovieIndex changes useEffect(() => { if (currentMovieIndex >= 0 && playerRef.current) { loadAndPlayMovie(currentMovieIndex) } }, [currentMovieIndex]) return (

(break movies)

{isBreakTime && onClose && ( )}

{/* Player container */}

setNewMovieUrl(e.target.value)} placeholder="Paste YouTube movie URL" className="flex-grow border-primary/20 bg-background/50 text-primary placeholder:text-primary/30 h-8 text-sm" />

{/* Movie list */}

{movies.length === 0 ? (

No movies added

) : ( movies.map((movie, index) => (

{ setCurrentMovieIndex(index) }} > {movie.title}

)) )}

) } [V0_FILE]typescriptreact:file="app/components/PomodoroTimer.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Play, Pause, RotateCcw, Volume2, VolumeX, Settings, Film } from "lucide-react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import MoviePlayer from "./MoviePlayer" type TimerMode = "work" | "break" type TimerPreset = "25/5" | "50/10" | "90/20" | "custom" interface TimerSettings { workTime: number breakTime: number preset: TimerPreset enableMovieBreaks: boolean } const DEFAULT_SETTINGS: TimerSettings = { workTime: 50 * 60, // 50 minutes in seconds breakTime: 10 * 60, // 10 minutes in seconds preset: "50/10", enableMovieBreaks: false, } export default function PomodoroTimer() { // Load settings from localStorage or use defaults const loadSettings = (): TimerSettings => { if (typeof window === "undefined") return DEFAULT_SETTINGS const saved = localStorage.getItem("pomodoroSettings") return saved ? JSON.parse(saved) : DEFAULT_SETTINGS } const [settings, setSettings] = useState(loadSettings()) const [timeLeft, setTimeLeft] = useState(settings.workTime) const [isActive, setIsActive] = useState(false) const [mode, setMode] = useState("work") const [soundEnabled, setSoundEnabled] = useState(true) const [customWorkTime, setCustomWorkTime] = useState(50) const [customBreakTime, setCustomBreakTime] = useState(10) const [showMoviePlayer, setShowMoviePlayer] = useState(false) // Load settings on initial render useEffect(() => { const savedSettings = loadSettings() setSettings(savedSettings) setTimeLeft(savedSettings.workTime) setCustomWorkTime(Math.floor(savedSettings.workTime / 60)) setCustomBreakTime(Math.floor(savedSettings.breakTime / 60)) }, []) // Save settings when they change useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("pomodoroSettings", JSON.stringify(settings)) } }, [settings]) useEffect(() => { let interval: NodeJS.Timeout | null = null if (isActive && timeLeft > 0) { interval = setInterval(() => { setTimeLeft((prevTime) => prevTime - 1) }, 1000) } else if (isActive && timeLeft === 0) { // Play sound if enabled if (soundEnabled) { const audio = new Audio("/notification.mp3") audio.play().catch((err) => console.error("Error playing sound:", err)) } // Switch modes if (mode === "work") { setMode("break") setTimeLeft(settings.breakTime) // Show movie player if enabled if (settings.enableMovieBreaks) { setShowMoviePlayer(true) } } else { setMode("work") setTimeLeft(settings.workTime) setShowMoviePlayer(false) } } return () => { if (interval) clearInterval(interval) } }, [isActive, timeLeft, mode, soundEnabled, settings]) const toggleTimer = () => { setIsActive(!isActive) } const resetTimer = () => { setIsActive(false) setMode("work") setTimeLeft(settings.workTime) setShowMoviePlayer(false) } const toggleSound = () => { setSoundEnabled(!soundEnabled) } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` } const calculateProgress = () => { const total = mode === "work" ? settings.workTime : settings.breakTime return ((total - timeLeft) / total) * 100 } const applyPreset = (preset: TimerPreset) => { let newSettings: TimerSettings switch (preset) { case "25/5": newSettings = { workTime: 25 * 60, breakTime: 5 * 60, preset, enableMovieBreaks: settings.enableMovieBreaks, } break case "50/10": newSettings = { workTime: 50 * 60, breakTime: 10 * 60, preset, enableMovieBreaks: settings.enableMovieBreaks, } break case "90/20": newSettings = { workTime: 90 * 60, breakTime: 20 * 60, preset, enableMovieBreaks: settings.enableMovieBreaks, } break case "custom": newSettings = { workTime: customWorkTime * 60, breakTime: customBreakTime * 60, preset: "custom", enableMovieBreaks: settings.enableMovieBreaks, } break default: newSettings = DEFAULT_SETTINGS } setSettings(newSettings) // Reset timer with new settings setIsActive(false) setMode("work") setTimeLeft(newSettings.workTime) } const toggleMovieBreaks = (enabled: boolean) => { setSettings({ ...settings, enableMovieBreaks: enabled, }) if (!enabled && showMoviePlayer) { setShowMoviePlayer(false) } } return (

{formatTime(timeLeft)}

{mode === "work" ? "focus" : "break"}

{settings.enableMovieBreaks && mode === "break" && ( )}

{showMoviePlayer && mode === "break" && (

setShowMoviePlayer(false)} />

)}

) } [V0_FILE]typescriptreact:file="app/components/DigitalClock.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Settings } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" type DatePosition = "above" | "below" | "hidden" // Kanji representation of months const monthKanji = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"] // Kanji representation of numbers 1-31 for days const dayKanji = [ "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十", "二十一", "二十二", "二十三", "二十四", "二十五", "二十六", "二十七", "二十八", "二十九", "三十", "三十一", ] export default function DigitalClock() { const [time, setTime] = useState(new Date()) const [datePosition, setDatePosition] = useState("below") useEffect(() => { const timer = setInterval(() => { setTime(new Date()) }, 1000) // Load date position preference const savedPosition = localStorage.getItem("datePosition") as DatePosition if (savedPosition) { setDatePosition(savedPosition) } return () => { clearInterval(timer) } }, []) const updateDatePosition = (position: DatePosition) => { setDatePosition(position) localStorage.setItem("datePosition", position) } const formatTime = (date: Date) => { const hours = date.getHours().toString().padStart(2, "0") const minutes = date.getMinutes().toString().padStart(2, "0") const seconds = date.getSeconds().toString().padStart(2, "0") return `${hours}:${minutes}:${seconds}` } const formatJapaneseDate = (date: Date) => { const day = date.getDate() - 1 // Array is 0-indexed const month = date.getMonth() // Array is 0-indexed const year = date.getFullYear() return `${dayKanji[day]}日 ${monthKanji[month]} ${year}年` } return (

Date Display updateDatePosition("above")}> Above Time updateDatePosition("below")}> Below Time updateDatePosition("hidden")}> Hidden

{datePosition === "above" &&

{formatJapaneseDate(time)}

}

{formatTime(time)}

{datePosition === "below" &&

{formatJapaneseDate(time)}

}

) } [V0_FILE]typescriptreact:file="app/components/ThemeSelector.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Check, Palette } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export type ColorTheme = | "green" | "blue" | "purple" | "red" | "cyan" | "amber" | "teal" | "indigo" | "pink" | "gray" | "slate" | "zinc" | "neutral" | "stone" | "rose" | "emerald" | "sky" | "violet" interface ThemeOption { name: string value: ColorTheme mainColor: string } const themeOptions: ThemeOption[] = [ // Vibrant { name: "Green", value: "green", mainColor: "bg-green-500" }, { name: "Blue", value: "blue", mainColor: "bg-blue-500" }, { name: "Purple", value: "purple", mainColor: "bg-purple-500" }, { name: "Red", value: "red", mainColor: "bg-red-500" }, { name: "Cyan", value: "cyan", mainColor: "bg-cyan-500" }, { name: "Amber", value: "amber", mainColor: "bg-amber-500" }, // Muted { name: "Teal", value: "teal", mainColor: "bg-teal-500" }, { name: "Indigo", value: "indigo", mainColor: "bg-indigo-500" }, { name: "Pink", value: "pink", mainColor: "bg-pink-500" }, { name: "Emerald", value: "emerald", mainColor: "bg-emerald-500" }, { name: "Sky", value: "sky", mainColor: "bg-sky-500" }, { name: "Violet", value: "violet", mainColor: "bg-violet-500" }, { name: "Rose", value: "rose", mainColor: "bg-rose-500" }, // Grayscale { name: "Gray", value: "gray", mainColor: "bg-gray-500" }, { name: "Slate", value: "slate", mainColor: "bg-slate-500" }, { name: "Zinc", value: "zinc", mainColor: "bg-zinc-500" }, { name: "Neutral", value: "neutral", mainColor: "bg-neutral-500" }, { name: "Stone", value: "stone", mainColor: "bg-stone-500" }, ] export default function ThemeSelector() { const [theme, setTheme] = useState("green") const [isOpen, setIsOpen] = useState(false) useEffect(() => { // Load theme from localStorage const savedTheme = localStorage.getItem("colorTheme") as ColorTheme if (savedTheme && themeOptions.some((option) => option.value === savedTheme)) { setTheme(savedTheme) document.documentElement.setAttribute("data-theme", savedTheme) } }, []) const changeTheme = (newTheme: ColorTheme) => { setTheme(newTheme) localStorage.setItem("colorTheme", newTheme) document.documentElement.setAttribute("data-theme", newTheme) setIsOpen(false) } return ( {themeOptions.map((option) => ( changeTheme(option.value)} >

{theme === option.value && }

))} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import DigitalClock from "./components/DigitalClock" import PomodoroTimer from "./components/PomodoroTimer" import MusicPlayer from "./components/MusicPlayer" import TaskList from "./components/TaskList" import ThemeSelector from "./components/ThemeSelector" export default function Home() { return (

(satori)

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This