@djangocfg/ui-nextjs 2.1.66 → 2.1.68

package/src/tools/ImageViewer/ImageViewer.tsx

@@ -1,416 +0,0 @@
-'use client';
-
-/**
- * ImageViewer - Image viewer with zoom, pan, rotate, flip
- *
- * Features:
- * - Zoom with mouse wheel and presets
- * - Pan with drag
- * - Rotate 90°
- * - Flip horizontal/vertical
- * - Fullscreen dialog
- * - Keyboard shortcuts (+/-, 0, r)
- */
-
-import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import { ImageIcon, ZoomIn, ZoomOut, RotateCw, FlipHorizontal, FlipVertical, Maximize2, Expand } from 'lucide-react';
-import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch';
-import { Button, cn, Dialog, DialogContent } from '@djangocfg/ui-core';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../../components/dropdown-menu';
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-export interface ImageFile {
-  name: string;
-  path: string;
-  mimeType?: string;
-}
-
-// Preset zoom levels
-const ZOOM_PRESETS = [
-  { label: 'Fit', value: 'fit' },
-  { label: '25%', value: 0.25 },
-  { label: '50%', value: 0.5 },
-  { label: '100%', value: 1 },
-  { label: '200%', value: 2 },
-  { label: '400%', value: 4 },
-] as const;
-
-export interface ImageViewerProps {
-  /** File info (name, path, mimeType) */
-  file: ImageFile;
-  /** Image content as string (data URL or base64) or ArrayBuffer */
-  content: string | ArrayBuffer;
-  /** Hide expand button when already in dialog */
-  inDialog?: boolean;
-}
-
-interface ImageTransform {
-  rotation: number;
-  flipH: boolean;
-  flipV: boolean;
-}
-
-// Toolbar component
-function ImageToolbar({
-  scale,
-  transform,
-  onRotate,
-  onFlipH,
-  onFlipV,
-  onZoomPreset,
-  onExpand,
-}: {
-  scale: number;
-  transform: ImageTransform;
-  onRotate: () => void;
-  onFlipH: () => void;
-  onFlipV: () => void;
-  onZoomPreset: (value: number | 'fit') => void;
-  onExpand?: () => void;
-}) {
-  const { zoomIn, zoomOut, resetTransform, centerView } = useControls();
-
-  const zoomLabel = useMemo(() => {
-    const percent = Math.round(scale * 100);
-    return `${percent}%`;
-  }, [scale]);
-
-  return (
-    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-0.5 bg-background/90 backdrop-blur-sm border rounded-lg p-1 shadow-lg">
-      {/* Zoom controls */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
-        onClick={() => zoomOut()}
-      >
-        <ZoomOut className="h-3.5 w-3.5" />
-      </Button>
-
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="h-7 px-2 min-w-[52px] font-mono text-xs">
-            {zoomLabel}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="center" className="min-w-[80px]">
-          {ZOOM_PRESETS.map((preset) => (
-            <DropdownMenuItem
-              key={preset.label}
-              onClick={() => onZoomPreset(preset.value)}
-              className="text-xs justify-center"
-            >
-              {preset.label}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
-        onClick={() => zoomIn()}
-      >
-        <ZoomIn className="h-3.5 w-3.5" />
-      </Button>
-
-      <div className="w-px h-4 bg-border mx-1" />
-
-      {/* Fit to view */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
-        onClick={() => resetTransform()}
-        title="Fit to view"
-      >
-        <Maximize2 className="h-3.5 w-3.5" />
-      </Button>
-
-      <div className="w-px h-4 bg-border mx-1" />
-
-      {/* Transform controls */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className={cn("h-7 w-7", transform.flipH && "bg-accent")}
-        onClick={onFlipH}
-        title="Flip horizontal"
-      >
-        <FlipHorizontal className="h-3.5 w-3.5" />
-      </Button>
-
-      <Button
-        variant="ghost"
-        size="icon"
-        className={cn("h-7 w-7", transform.flipV && "bg-accent")}
-        onClick={onFlipV}
-        title="Flip vertical"
-      >
-        <FlipVertical className="h-3.5 w-3.5" />
-      </Button>
-
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
-        onClick={onRotate}
-        title="Rotate 90°"
-      >
-        <RotateCw className="h-3.5 w-3.5" />
-      </Button>
-
-      {transform.rotation !== 0 && (
-        <span className="text-[10px] text-muted-foreground font-mono pl-1">
-          {transform.rotation}°
-        </span>
-      )}
-
-      {onExpand && (
-        <>
-          <div className="w-px h-4 bg-border mx-1" />
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={onExpand}
-            title="Open in fullscreen"
-          >
-            <Expand className="h-3.5 w-3.5" />
-          </Button>
-        </>
-      )}
-    </div>
-  );
-}
-
-// Image dimensions badge
-function ImageInfo({ src }: { src: string }) {
-  const [dimensions, setDimensions] = useState<{ w: number; h: number } | null>(null);
-
-  useEffect(() => {
-    const img = new Image();
-    img.onload = () => setDimensions({ w: img.naturalWidth, h: img.naturalHeight });
-    img.src = src;
-  }, [src]);
-
-  if (!dimensions) return null;
-
-  return (
-    <div className="absolute top-3 right-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono">
-      {dimensions.w} × {dimensions.h}
-    </div>
-  );
-}
-
-export function ImageViewer({ file, content, inDialog = false }: ImageViewerProps) {
-  const contentSize = content ? (typeof content === 'string' ? content.length : content.byteLength) : 0;
-  const hasContent = contentSize > 0;
-
-  const [transform, setTransform] = useState<ImageTransform>({
-    rotation: 0,
-    flipH: false,
-    flipV: false,
-  });
-  const [scale, setScale] = useState(1);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const blobUrlRef = useRef<string | null>(null);
-  const [src, setSrc] = useState<string | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const controlsRef = useRef<ReturnType<typeof useControls> | null>(null);
-
-  // Create blob URL
-  useEffect(() => {
-    if (!hasContent) {
-      setSrc(null);
-      return;
-    }
-
-    if (typeof content === 'string') {
-      const url = content.startsWith('data:') ? content : `data:${file.mimeType};base64,${btoa(content)}`;
-      setSrc(url);
-      return;
-    }
-
-    const blob = new Blob([content], { type: file.mimeType || 'image/png' });
-    const url = URL.createObjectURL(blob);
-    blobUrlRef.current = url;
-    setSrc(url);
-
-    return () => {
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
-      }
-    };
-  }, [content, file.mimeType, hasContent]);
-
-  // Reset transform when file changes
-  useEffect(() => {
-    setTransform({ rotation: 0, flipH: false, flipV: false });
-  }, [file.path]);
-
-  const handleRotate = useCallback(() => {
-    setTransform((prev) => ({ ...prev, rotation: (prev.rotation + 90) % 360 }));
-  }, []);
-
-  const handleFlipH = useCallback(() => {
-    setTransform((prev) => ({ ...prev, flipH: !prev.flipH }));
-  }, []);
-
-  const handleFlipV = useCallback(() => {
-    setTransform((prev) => ({ ...prev, flipV: !prev.flipV }));
-  }, []);
-
-  const handleZoomPreset = useCallback((value: number | 'fit') => {
-    if (!controlsRef.current) return;
-    if (value === 'fit') {
-      controlsRef.current.resetTransform();
-    } else {
-      controlsRef.current.setTransform(0, 0, value);
-    }
-  }, []);
-
-  const handleExpand = useCallback(() => {
-    setDialogOpen(true);
-  }, []);
-
-  // CSS transform for rotation and flip
-  const imageTransform = useMemo(() => {
-    const transforms: string[] = [];
-    if (transform.rotation) transforms.push(`rotate(${transform.rotation}deg)`);
-    if (transform.flipH) transforms.push('scaleX(-1)');
-    if (transform.flipV) transforms.push('scaleY(-1)');
-    return transforms.join(' ') || 'none';
-  }, [transform]);
-
-  // Keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!containerRef.current?.contains(document.activeElement) &&
-          document.activeElement !== containerRef.current) {
-        return;
-      }
-
-      const controls = controlsRef.current;
-      if (!controls) return;
-
-      switch (e.key) {
-        case '+':
-        case '=':
-          e.preventDefault();
-          controls.zoomIn();
-          break;
-        case '-':
-          e.preventDefault();
-          controls.zoomOut();
-          break;
-        case '0':
-          e.preventDefault();
-          controls.resetTransform();
-          break;
-        case 'r':
-          if (!e.metaKey && !e.ctrlKey) {
-            e.preventDefault();
-            handleRotate();
-          }
-          break;
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handleRotate]);
-
-  if (!hasContent) {
-    return (
-      <div className="flex-1 flex flex-col items-center justify-center gap-2 bg-muted/30">
-        <ImageIcon className="w-12 h-12 text-muted-foreground/50" />
-        <p className="text-sm text-muted-foreground">Failed to load image</p>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      ref={containerRef}
-      tabIndex={0}
-      className={cn(
-        "flex-1 h-full relative overflow-hidden outline-none",
-        "bg-[length:16px_16px]",
-        "[background-color:hsl(var(--muted)/0.2)]",
-        "[background-image:linear-gradient(45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(-45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,hsl(var(--muted)/0.4)_75%),linear-gradient(-45deg,transparent_75%,hsl(var(--muted)/0.4)_75%)]",
-        "[background-position:0_0,0_8px,8px_-8px,-8px_0px]"
-      )}
-    >
-      {src && <ImageInfo src={src} />}
-
-      <TransformWrapper
-        initialScale={1}
-        minScale={0.1}
-        maxScale={8}
-        centerOnInit
-        onTransformed={(ref, state) => {
-          setScale(state.scale);
-          controlsRef.current = ref;
-        }}
-        onInit={(ref) => {
-          controlsRef.current = ref;
-        }}
-        wheel={{ step: 0.1 }}
-        doubleClick={{ mode: 'toggle', step: 2 }}
-        panning={{ velocityDisabled: false }}
-      >
-        <ImageToolbar
-          scale={scale}
-          transform={transform}
-          onRotate={handleRotate}
-          onFlipH={handleFlipH}
-          onFlipV={handleFlipV}
-          onZoomPreset={handleZoomPreset}
-          onExpand={!inDialog ? handleExpand : undefined}
-        />
-
-        <TransformComponent
-          wrapperClass="!w-full !h-full cursor-grab active:cursor-grabbing"
-          contentClass="!w-full !h-full flex items-center justify-center"
-        >
-          <img
-            src={src!}
-            alt={file.name}
-            className="max-w-full max-h-full object-contain select-none"
-            style={{ transform: imageTransform, transition: 'transform 0.15s ease-out' }}
-            draggable={false}
-          />
-        </TransformComponent>
-      </TransformWrapper>
-
-      {/* Fullscreen dialog */}
-      {!inDialog && (
-        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-          <DialogContent className="max-w-[95vw] max-h-[95vh] w-[95vw] h-[95vh] p-0 overflow-hidden [&>button]:hidden">
-            <div className="h-full flex flex-col">
-              <div className="flex items-center justify-between px-4 py-2 border-b shrink-0">
-                <span className="text-sm font-medium truncate">{file.name}</span>
-              </div>
-              <div className="flex-1 min-h-0 relative">
-                <div className="absolute inset-0">
-                  <ImageViewer file={file} content={content} inDialog />
-                </div>
-              </div>
-            </div>
-          </DialogContent>
-        </Dialog>
-      )}
-    </div>
-  );
-}

package/src/tools/VideoPlayer/VideoPlayerContext.tsx

@@ -1,125 +0,0 @@
-/**
- * VideoPlayerContext - Context for streaming configuration
- * Simplifies streaming API by providing getStreamUrl globally
- */
-
-'use client';
-
-import React, { createContext, useContext, useMemo } from 'react';
-
-import type { VideoSourceUnion, StreamSource } from './types';
-
-// ============================================================================
-// Context Types
-// ============================================================================
-
-export interface VideoPlayerContextValue {
-  /** Function to generate stream URL (for HTTP Range streaming) */
-  getStreamUrl?: (sessionId: string, path: string) => string;
-  /** Current session ID */
-  sessionId?: string | null;
-}
-
-export interface VideoPlayerProviderProps extends VideoPlayerContextValue {
-  children: React.ReactNode;
-}
-
-// ============================================================================
-// Context
-// ============================================================================
-
-const VideoPlayerContext = createContext<VideoPlayerContextValue | null>(null);
-
-/**
- * Provider for VideoPlayer streaming configuration
- *
- * @example
- * // In your app layout or FileWorkspace
- * <VideoPlayerProvider
- *   sessionId={sessionId}
- *   getStreamUrl={terminalClient.terminal_media.streamStreamRetrieveUrl}
- * >
- *   <VideoPlayer source={{ type: 'stream', path: '/video.mp4' }} />
- * </VideoPlayerProvider>
- */
-export function VideoPlayerProvider({
-  children,
-  getStreamUrl,
-  sessionId,
-}: VideoPlayerProviderProps) {
-  const value = useMemo(
-    () => ({ getStreamUrl, sessionId }),
-    [getStreamUrl, sessionId]
-  );
-
-  return (
-    <VideoPlayerContext.Provider value={value}>
-      {children}
-    </VideoPlayerContext.Provider>
-  );
-}
-
-/**
- * Hook to access VideoPlayer context
- */
-export function useVideoPlayerContext(): VideoPlayerContextValue | null {
-  return useContext(VideoPlayerContext);
-}
-
-// ============================================================================
-// Simplified Stream Source
-// ============================================================================
-
-/** Simplified stream source (uses context for getStreamUrl) */
-export interface SimpleStreamSource {
-  type: 'stream';
-  /** File path on server */
-  path: string;
-  /** Session ID (optional, uses context if not provided) */
-  sessionId?: string;
-  /** MIME type for the video */
-  mimeType?: string;
-  title?: string;
-  poster?: string;
-}
-
-/**
- * Check if source is a simplified stream source (without getStreamUrl)
- */
-export function isSimpleStreamSource(
-  source: VideoSourceUnion | SimpleStreamSource
-): source is SimpleStreamSource {
-  return source.type === 'stream' && !('getStreamUrl' in source);
-}
-
-/**
- * Resolve simplified stream source to full stream source using context
- */
-export function resolveStreamSource(
-  source: SimpleStreamSource,
-  context: VideoPlayerContextValue | null
-): StreamSource | null {
-  if (!context?.getStreamUrl) {
-    console.warn(
-      'VideoPlayer: Stream source requires getStreamUrl. ' +
-      'Either provide it in source or wrap with VideoPlayerProvider.'
-    );
-    return null;
-  }
-
-  const sessionId = source.sessionId || context.sessionId;
-  if (!sessionId) {
-    console.warn('VideoPlayer: Stream source requires sessionId.');
-    return null;
-  }
-
-  return {
-    type: 'stream',
-    sessionId,
-    path: source.path,
-    getStreamUrl: context.getStreamUrl,
-    mimeType: source.mimeType,
-    title: source.title,
-    poster: source.poster,
-  };
-}