"use client";
import React, { useState, useRef, useEffect } from 'react';
import { Play, Pause, Volume2, VolumeX, SkipBack, SkipForward, Maximize, Settings, Music, Video, FileText, Search } from 'lucide-react';
import Footer from '../footer';
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable";
// Media type detection
const getMediaType = (url) => {
const extension = url.split('.').pop()?.toLowerCase();
if (['mp4', 'webm', 'ogg', 'mov', 'avi'].includes(extension || '')) return 'video';
if (['mp3', 'wav', 'flac', 'aac', 'm4a'].includes(extension || '')) return 'audio';
if (['pdf', 'ppt', 'pptx'].includes(extension || '')) return 'slides';
return 'video'; // default
};
import './style.css'; // Ensure you have a styles.css file for custom styles
// Waveform Component (Winamp inspired)
const WaveformVisualizer = ({ isPlaying, currentTime = 0 }) => {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
// Generate mock waveform data
const bars = 100;
const barWidth = width / bars;
const animate = () => {
ctx.clearRect(0, 0, width, height);
for (let i = 0; i < bars; i++) {
const barHeight = isPlaying
? Math.random() * height * 0.7 + height * 0.1
: height * 0.2;
const x = i * barWidth;
const progress = currentTime * bars;
// Gradient effect
const gradient = ctx.createLinearGradient(0, 0, 0, height);
if (i < progress) {
gradient.addColorStop(0, 'hsl(207, 90%, 54%)'); // accent color
gradient.addColorStop(1, 'hsl(207, 90%, 64%)');
} else {
gradient.addColorStop(0, 'hsl(0, 0%, 85%)'); // muted color
gradient.addColorStop(1, 'hsl(0, 0%, 75%)');
}
ctx.fillStyle = gradient;
ctx.fillRect(x, height - barHeight, barWidth - 1, barHeight);
}
if (isPlaying) {
requestAnimationFrame(animate);
}
};
animate();
}, [isPlaying, currentTime]);
return (
);
};
// Media Player Component
const MediaPlayer = ({ media }) => {
const [isPlaying, setIsPlaying] = useState(false);
const [volume, setVolume] = useState(0.7);
const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(0);
const [isMuted, setIsMuted] = useState(false);
const [playbackSpeed, setPlaybackSpeed] = useState(1);
const videoRef = useRef(null);
const playerContainerRef = useRef(null);
const mediaType = getMediaType(media.url);
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
};
const handlePlayPause = () => {
if (videoRef.current) {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
}
};
const handleVolumeChange = (e) => {
const newVolume = parseFloat(e.target.value);
setVolume(newVolume);
if (videoRef.current) {
videoRef.current.volume = newVolume;
}
};
const handleProgressChange = (e) => {
const newTime = (parseFloat(e.target.value) / 100) * duration;
setCurrentTime(newTime);
if (videoRef.current) {
videoRef.current.currentTime = newTime;
}
};
const toggleMute = () => {
setIsMuted(!isMuted);
if (videoRef.current) {
videoRef.current.muted = !isMuted;
}
};
const toggleFullscreen = () => {
if (!document.fullscreenElement) {
playerContainerRef.current?.requestFullscreen();
} else {
document.exitFullscreen();
}
};
const skipTime = (seconds) => {
if (videoRef.current) {
videoRef.current.currentTime += seconds;
}
};
return (
{/* Media Display Area */}
{mediaType === 'video' && (
)}
{mediaType === 'audio' && (
{media.title}
{media.artist || 'Unknown Artist'}
)}
{mediaType === 'slides' && (
{media.title}
Presentation Slides
)}
{/* Overlay Controls */}
{/* Waveform for Audio */}
{mediaType === 'audio' && (
)}
{/* Controls */}
{/* Progress Bar */}
{/* Control Buttons */}
);
};
// Media Library Component
const MediaLibrary = ({ mediaList, onSelectMedia, selectedMedia }) => {
const [searchQuery, setSearchQuery] = useState('');
const filteredMedia = mediaList.filter(media =>
media.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
(media.artist && media.artist.toLowerCase().includes(searchQuery.toLowerCase()))
);
const getMediaIcon = (url) => {
const type = getMediaType(url);
switch (type) {
case 'video': return ;
case 'audio': return ;
case 'slides': return ;
default: return ;
}
};
return (
{/* Header */}
{/* Media List */}
{filteredMedia.map((media, index) => (
onSelectMedia(media)}
className={`cursor-pointer transition-all hover:bg-muted rounded p-2 flex items-center space-x-2 ${
selectedMedia?.url === media.url ? 'bg-primary/10 border-l-2 border-primary' : ''
}`}
>
{getMediaIcon(media.url)}
{media.title}
{media.artist && (
{media.artist}
)}
))}
);
};
// Main App Component
const CorporateMediaPlayer = () => {
const [selectedMedia, setSelectedMedia] = useState(null);
// Sample media library
const mediaLibrary = [
{
title: "Corporate Overview Video",
url: "https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4",
type: "video"
},
{
title: "Quarterly Results Presentation",
url: "https://example.com/presentation.pdf",
type: "slides"
},
{
title: "Background Music",
artist: "Corporate Audio",
url: "https://www2.cs.uic.edu/~i101/SoundFiles/BabyElephantWalk60.wav",
type: "audio"
},
{
title: "Product Demo",
url: "https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",
type: "video"
},
{
title: "Conference Call Audio",
artist: "Meeting Recording",
url: "https://www2.cs.uic.edu/~i101/SoundFiles/StarWars60.wav",
type: "audio"
}
];
useEffect(() => {
// Auto-select first media item
if (mediaLibrary.length > 0 && !selectedMedia) {
setSelectedMedia(mediaLibrary[0]);
}
}, []);
const shortcuts = [
// Media control row
[
{ key: 'Space', label: 'Play/Pause', action: () => console.log('Play/Pause') },
{ key: '←', label: 'Skip Back', action: () => console.log('Skip Back') },
{ key: '→', label: 'Skip Forward', action: () => console.log('Skip Forward') },
{ key: '↑', label: 'Volume Up', action: () => console.log('Volume Up') },
{ key: '↓', label: 'Volume Down', action: () => console.log('Volume Down') },
],
// Navigation row
[
{ key: 'F', label: 'Fullscreen', action: () => console.log('Fullscreen') },
{ key: 'M', label: 'Mute', action: () => console.log('Mute') },
{ key: 'L', label: 'Playlist', action: () => console.log('Playlist') },
{ key: 'S', label: 'Settings', action: () => console.log('Settings') },
{ key: 'H', label: 'Help', action: () => console.log('Help') },
]
];
return (
How to use LLMs
The guide to LLMs in tutorials
{/* Media Player */}
{selectedMedia && (
)}
{/* Media Library */}
{/* Footer */}
);
};
export default CorporateMediaPlayer;