feat(DeviceDetailOverlay, StatusPage): integrate MediaSet component for media switching functionality
This commit is contained in:
parent
70796a9ccd
commit
135d10861d
|
|
@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'motion/react';
|
|||
import { toast } from 'sonner';
|
||||
import { getFileContents, joinPath } from '../webdav';
|
||||
import FileBrowser from './FileBrowser';
|
||||
import MediaSet from './MediaSet';
|
||||
|
||||
interface Device {
|
||||
id: string;
|
||||
|
|
@ -340,26 +341,7 @@ export default function DeviceDetailOverlay({
|
|||
|
||||
{mediaSetFiles && (
|
||||
<div className="mt-3">
|
||||
<label className="text-sm text-neutral-500 block mb-2">Media Set</label>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{mediaSetFiles.map((file: string, index: number) => {
|
||||
const fileName = file.split('/').pop() || file;
|
||||
const title = fileName.replace(/\.[^.]+$/, '');
|
||||
return (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => switchMedia(file)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm ${
|
||||
deviceData.url === file
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
|
||||
}`}
|
||||
>
|
||||
{`${index + 1}: ${title}`}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<MediaSet files={mediaSetFiles} activeUrl={deviceData.url ?? ''} onSwitch={switchMedia} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
33
src/app/components/MediaSet.tsx
Normal file
33
src/app/components/MediaSet.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
interface MediaSetProps {
|
||||
files: string[];
|
||||
activeUrl: string;
|
||||
onSwitch: (file: string) => void;
|
||||
}
|
||||
|
||||
export default function MediaSet({ files, activeUrl, onSwitch }: MediaSetProps) {
|
||||
return (
|
||||
<div>
|
||||
<div className="text-sm text-neutral-500 mb-2">Media Set</div>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{files.map((file, index) => {
|
||||
const fileName = file.split('/').pop() || file;
|
||||
const title = fileName.replace(/\.[^.]+$/, '');
|
||||
const active = activeUrl === file;
|
||||
return (
|
||||
<button
|
||||
key={file}
|
||||
onClick={() => onSwitch(file)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm ${
|
||||
active
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
|
||||
}`}
|
||||
>
|
||||
{`${index + 1}: ${title}`}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { HardDrive, Activity, Wifi, Signal, Clock, RefreshCw, FolderOpen, Map, Loader2 } from 'lucide-react';
|
||||
import DeviceDetailOverlay from './DeviceDetailOverlay';
|
||||
import MediaSet from './MediaSet';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import { Dialog, DialogContent, DialogTitle, DialogDescription } from './ui/dialog';
|
||||
import DirectoryListing from './DirectoryListing';
|
||||
|
|
@ -34,6 +35,24 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
|
||||
const activeDevice = findActiveDevice();
|
||||
|
||||
const mediaSetFiles: string[] | null = (() => {
|
||||
if (!activeDevice?.url) return null;
|
||||
if (Array.isArray(activeDevice.mediaSet) && activeDevice.mediaSet.length > 0)
|
||||
return activeDevice.mediaSet as string[];
|
||||
const match = (activeDevice.url as string).match(/^(.+?)(\d+)(\.[^.]+)$/);
|
||||
if (!match) return null;
|
||||
const [, prefix, , ext] = match;
|
||||
return Array.from({ length: 10 }, (_, i) => `${prefix}${i + 1}${ext}`);
|
||||
})();
|
||||
|
||||
const switchActiveMedia = (file: string) => {
|
||||
const newConfig = JSON.parse(JSON.stringify(config));
|
||||
if (newConfig.iec?.devices?.drive?.[activeDevice!.number]) {
|
||||
newConfig.iec.devices.drive[activeDevice!.number].url = file;
|
||||
setConfig(newConfig);
|
||||
}
|
||||
};
|
||||
|
||||
// Mock activity log - in a real app this would come from device monitoring
|
||||
const activityLog = [
|
||||
{ time: '14:32:15', event: 'File opened: game.d64', type: 'info' },
|
||||
|
|
@ -133,6 +152,12 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
<div className="w-2 h-2 rounded-full bg-green-500" />
|
||||
</div>
|
||||
|
||||
{mediaSetFiles && (
|
||||
<div className="mt-2">
|
||||
<MediaSet files={mediaSetFiles} activeUrl={activeDevice.url ?? ''} onSwitch={switchActiveMedia} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Directory and Disk Map buttons at bottom */}
|
||||
|
||||
{/* New device info cards */}
|
||||
|
|
@ -170,47 +195,6 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Media switch buttons if media set is detected */}
|
||||
{(() => {
|
||||
// Media set detection logic (copied from DeviceDetailOverlay)
|
||||
const url = activeDevice.url;
|
||||
if (!url) return null;
|
||||
const match = url.match(/^(.+?)(\d+)(\.[^.]+)$/);
|
||||
if (!match) return null;
|
||||
const [, prefix, num, ext] = match;
|
||||
const currentNum = parseInt(num);
|
||||
const mediaSet = [];
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
mediaSet.push(`${prefix}${i}${ext}`);
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{mediaSet.map((file, idx) => {
|
||||
const fileName = file.split('/').pop() || file;
|
||||
const title = fileName.replace(/\.[^.]+$/, '');
|
||||
return (
|
||||
<button
|
||||
key={file}
|
||||
className={`px-2 py-1 rounded text-xs border ${url === file ? 'bg-blue-600 text-white border-blue-600' : 'bg-neutral-100 text-neutral-700 border-neutral-300'}`}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
if (setConfig) {
|
||||
const newConfig = JSON.parse(JSON.stringify(config));
|
||||
let current = newConfig;
|
||||
if (current.iec && current.iec.devices && current.iec.devices.drive && current.iec.devices.drive[num]) {
|
||||
current.iec.devices.drive[num].url = file;
|
||||
setConfig(newConfig);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{`${idx + 1}: ${title}`}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
<div className="flex flex-col gap-2 mt-6">
|
||||
<button
|
||||
className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-base font-medium w-full"
|
||||
|
|
@ -249,9 +233,9 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
|
||||
{/* Directory Overlay */}
|
||||
{showDirectory && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-black/40 backdrop-blur-md" onClick={() => setShowDirectory(false)} />
|
||||
<div className="relative w-full h-full bg-white/90 shadow-2xl overflow-auto flex flex-col" onClick={(e) => e.stopPropagation()}>
|
||||
<>
|
||||
<div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-md" onClick={() => setShowDirectory(false)} />
|
||||
<div className="fixed inset-0 z-50 bg-white shadow-2xl flex flex-col" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-xl font-medium">Directory</h2>
|
||||
|
|
@ -261,7 +245,7 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
</div>
|
||||
<button onClick={() => setShowDirectory(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' /></svg></button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto flex flex-col">
|
||||
<div className="flex-1 min-h-0 flex flex-col">
|
||||
{!activeDevice?.url && (
|
||||
<div className="p-8 text-center text-neutral-500 text-sm">
|
||||
No file mounted on this device.
|
||||
|
|
@ -293,24 +277,24 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Disk Map Overlay */}
|
||||
{showDiskMap && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-black/40 backdrop-blur-md" onClick={() => setShowDiskMap(false)} />
|
||||
<div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
|
||||
<>
|
||||
<div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-md" onClick={() => setShowDiskMap(false)} />
|
||||
<div className="fixed inset-0 z-50 bg-white shadow-2xl flex flex-col" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h2 className="text-xl font-medium">Disk Map</h2>
|
||||
<button onClick={() => setShowDiskMap(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' /></svg></button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto flex items-center justify-center text-neutral-500 p-4">
|
||||
<div className="flex-1 min-h-0 overflow-auto flex items-center justify-center text-neutral-500 p-4">
|
||||
<span>Disk map visualization goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{/* Reset Activity Modal */}
|
||||
<Dialog open={!!showResetModal} onOpenChange={open => !open && setShowResetModal(null)}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user