npm - @djangocfg/layouts - Versions diffs - 1.4.30 → 2.0.1 - Mend

@djangocfg/layouts 1.4.30 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/src/layouts/SimpleLayout/SimpleLayout.tsx DELETED Viewed

@@ -1,72 +0,0 @@
-// @ts-nocheck
-/**
- * SimpleLayout - Lightweight provider for docs and marketing sites
- *
- * Provides essential UI infrastructure without the overhead of full AppLayout:
- * - TooltipProvider for all tooltip components
- * - Toaster for notifications
- * - Basic theme support
- *
- * Perfect for documentation sites, landing pages, and simple apps.
- */
-'use client';
-import React from 'react';
-import { TooltipProvider, Toaster } from '@djangocfg/ui';
-export interface SimpleLayoutProps {
-  children: React.ReactNode;
-  /**
-   * Delay before tooltips appear (in milliseconds)
-   * @default 200
-   */
-  tooltipDelayDuration?: number;
-  /**
-   * Skip delay when moving between tooltips
-   * @default 300
-   */
-  tooltipSkipDelayDuration?: number;
-}
-/**
- * Lightweight layout provider for documentation and marketing sites.
- *
- * @example
- * ```tsx
- * // In your root layout.tsx
- * import { SimpleLayout } from '@djangocfg/layouts';
- *
- * export default function RootLayout({ children }) {
- *   return (
- *     <html>
- *       <body>
- *         <SimpleLayout>
- *           {children}
- *         </SimpleLayout>
- *       </body>
- *     </html>
- *   );
- * }
- * ```
- */
-export function SimpleLayout({
-  children,
-  tooltipDelayDuration = 200,
-  tooltipSkipDelayDuration = 300,
-}: SimpleLayoutProps) {
-  return (
-    <>
-      <TooltipProvider
-        delayDuration={tooltipDelayDuration}
-        skipDelayDuration={tooltipSkipDelayDuration}
-      >
-        {children}
-      </TooltipProvider>
-      <Toaster />
-    </>
-  );
-}
-SimpleLayout.displayName = 'SimpleLayout';

package/src/layouts/SimpleLayout/index.ts DELETED Viewed

@@ -1,3 +0,0 @@
-export { SimpleLayout } from './SimpleLayout';
-export type { SimpleLayoutProps } from './SimpleLayout';

package/src/snippets/VideoPlayer/README.md DELETED Viewed

@@ -1,238 +0,0 @@
-# VideoPlayer - Professional Vidstack Implementation
-A professional, accessible video player built with Vidstack React that supports YouTube, Vimeo, MP4, HLS, and more.
-## Features
-- ✅ **Multi-platform support**: YouTube, Vimeo, MP4, HLS, DASH
-- ✅ **Custom controls**: Professional UI with hover effects
-- ✅ **Accessibility**: Full keyboard navigation and screen reader support
-- ✅ **Responsive**: Works on all screen sizes
-- ✅ **TypeScript**: Full type safety
-- ✅ **Themes**: Default, minimal, and modern themes
-- ✅ **No recommendations**: Clean playback without YouTube distractions
-## Installation
-The VideoPlayer is already included in the UI package with all dependencies:
-```bash
-pnpm add @vidstack/react@next media-icons@next
-```
-## Basic Usage
-```tsx
-import { VideoPlayer } from '@repo/ui/snippets/VideoPlayer';
-function MyComponent() {
-  return (
-    <VideoPlayer
-      source={{
-        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
-        title: 'Never Gonna Give You Up',
-        description: 'Rick Astley - Never Gonna Give You Up (Official Video)'
-      }}
-      autoplay={false}
-      controls={true}
-      className="max-w-4xl mx-auto"
-    />
-  );
-}
-```
-## Advanced Usage
-```tsx
-import { VideoPlayer, VideoPlayerRef } from '@repo/ui/snippets/VideoPlayer';
-import { useRef } from 'react';
-function AdvancedPlayer() {
-  const playerRef = useRef<VideoPlayerRef>(null);
-  const handleCustomPlay = () => {
-    playerRef.current?.play();
-  };
-  return (
-    <VideoPlayer
-      ref={playerRef}
-      source={{
-        url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-        title: 'Big Buck Bunny',
-        poster: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
-        duration: 596
-      }}
-      theme="modern"
-      autoplay={false}
-      muted={false}
-      playsInline={true}
-      showInfo={true}
-      onPlay={() => console.log('Video started')}
-      onPause={() => console.log('Video paused')}
-      onEnded={() => console.log('Video ended')}
-      onError={(error) => console.error('Video error:', error)}
-    />
-  );
-}
-```
-## Supported Video Sources
-### YouTube
-- **URL Format**: `https://www.youtube.com/watch?v=VIDEO_ID` or `youtube/VIDEO_ID`
-- **Auto-conversion**: Full YouTube URLs are automatically converted to `youtube/ID` format
-- **Poster**: ⚠️ YouTube iframe ignores custom poster images and always shows YouTube's thumbnail
-- **Examples**:
-  ```tsx
-  url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-  url: 'https://youtu.be/dQw4w9WgXcQ'
-  url: 'youtube/dQw4w9WgXcQ'
-  ```
-### Vimeo
-- **URL Format**: `https://vimeo.com/VIDEO_ID` or `vimeo/VIDEO_ID`
-- **Auto-conversion**: Full Vimeo URLs are automatically converted to `vimeo/ID` format
-- **Poster**: ⚠️ Vimeo may ignore custom poster and use their own thumbnail
-- **Example**: `url: 'vimeo/76979871'`
-### Direct Video Files (MP4, WebM, OGG)
-- **Poster**: ✅ **Works perfectly!** Custom poster images are fully supported
-- **Examples**:
-  ```tsx
-  url: 'https://example.com/video.mp4',
-  poster: '/images/video-poster.jpg'  // This works!
-  ```
-### HLS Streams
-- **Poster**: ✅ Custom poster supported
-- **Example**: `url: 'https://example.com/stream.m3u8'`
-### DASH Streams
-- **Poster**: ✅ Custom poster supported
-- **Example**: `url: 'https://example.com/stream.mpd'`
-> **Note**: The `poster` prop works for direct video files, HLS, and DASH streams. For YouTube and Vimeo, the platform's own thumbnail is displayed regardless of the `poster` prop due to iframe limitations.
-### YouTube
-```tsx
-<VideoPlayer
-  source={{
-    url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
-    title: 'YouTube Video'
-  }}
-/>
-```
-### Vimeo
-```tsx
-<VideoPlayer
-  source={{
-    url: 'https://vimeo.com/76979871',
-    title: 'Vimeo Video'
-  }}
-/>
-```
-### Direct MP4
-```tsx
-<VideoPlayer
-  source={{
-    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-    title: 'Direct MP4',
-    poster: 'https://example.com/poster.jpg'
-  }}
-/>
-```
-### HLS Stream
-```tsx
-<VideoPlayer
-  source={{
-    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-    title: 'HLS Stream'
-  }}
-/>
-```
-## API Reference
-### VideoPlayerProps
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `source` | `VideoSource` | - | Video source configuration |
-| `aspectRatio` | `number` | `16/9` | Video aspect ratio |
-| `autoplay` | `boolean` | `false` | Auto-play video |
-| `muted` | `boolean` | `false` | Mute video by default |
-| `playsInline` | `boolean` | `true` | Play inline on mobile |
-| `controls` | `boolean` | `true` | Show custom controls |
-| `showInfo` | `boolean` | `false` | Show video info below player |
-| `theme` | `'default' \| 'minimal' \| 'modern'` | `'default'` | Player theme |
-| `className` | `string` | - | Custom CSS class |
-| `onPlay` | `() => void` | - | Play event callback |
-| `onPause` | `() => void` | - | Pause event callback |
-| `onEnded` | `() => void` | - | End event callback |
-| `onError` | `(error: string) => void` | - | Error event callback |
-### VideoSource
-| Property | Type | Description |
-|----------|------|-------------|
-| `url` | `string` | Video URL (YouTube, Vimeo, MP4, HLS, etc.) |
-| `title` | `string?` | Video title |
-| `description` | `string?` | Video description |
-| `poster` | `string?` | Custom poster/thumbnail URL |
-| `duration` | `number?` | Video duration in seconds |
-### VideoPlayerRef Methods
-| Method | Description |
-|--------|-------------|
-| `play()` | Play the video |
-| `pause()` | Pause the video |
-| `togglePlay()` | Toggle play/pause |
-| `seekTo(time: number)` | Seek to specific time |
-| `setVolume(volume: number)` | Set volume (0-1) |
-| `toggleMute()` | Toggle mute |
-| `enterFullscreen()` | Enter fullscreen |
-| `exitFullscreen()` | Exit fullscreen |
-## Themes
-### Default Theme
-Clean, professional look with rounded corners and subtle shadows.
-### Minimal Theme
-No rounded corners, minimal styling for embedding in tight spaces.
-### Modern Theme
-Enhanced shadows and larger border radius for a contemporary look.
-## Accessibility
-The VideoPlayer includes full accessibility support:
-- ✅ Keyboard navigation (Space, Arrow keys, F for fullscreen)
-- ✅ Screen reader announcements
-- ✅ Focus indicators
-- ✅ ARIA labels and roles
-- ✅ High contrast support
-## Performance
-- ✅ Lazy loading of video content
-- ✅ Efficient re-renders with Vidstack's optimized state management
-- ✅ Minimal bundle size impact
-- ✅ Hardware-accelerated playback when available
-## Browser Support
-Supports all modern browsers through Vidstack's comprehensive compatibility layer:
-- ✅ Chrome 63+
-- ✅ Firefox 67+
-- ✅ Safari 12+
-- ✅ Edge 79+
-- ✅ iOS Safari 12+
-- ✅ Chrome Android 63+

package/src/snippets/VideoPlayer/VideoControls.tsx DELETED Viewed

@@ -1,137 +0,0 @@
-/**
- * Custom Video Controls for Vidstack Player
- */
-'use client';
-import React from 'react';
-import { useMediaStore, useMediaRemote } from '@vidstack/react';
-import type { MediaPlayerInstance } from '@vidstack/react';
-import { Play, Pause, Volume2, VolumeX, Maximize, Minimize } from 'lucide-react';
-import { cn } from '@djangocfg/ui';
-interface VideoControlsProps {
-  player: React.RefObject<MediaPlayerInstance | null>;
-  className?: string;
-}
-export function VideoControls({ player, className }: VideoControlsProps) {
-  const store = useMediaStore(player);
-  const remote = useMediaRemote();
-  const isPaused = store.paused;
-  const isMuted = store.muted;
-  const isFullscreen = store.fullscreen;
-  const currentTime = store.currentTime;
-  const duration = store.duration;
-  const volume = store.volume;
-  const formatTime = (seconds: number): string => {
-    if (!seconds || seconds < 0) return '0:00';
-    const minutes = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${minutes}:${secs.toString().padStart(2, '0')}`;
-  };
-  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!duration) return;
-    const rect = e.currentTarget.getBoundingClientRect();
-    const clickX = e.clientX - rect.left;
-    const percentage = clickX / rect.width;
-    const newTime = percentage * duration;
-    remote.seek(newTime);
-  };
-  const handleVolumeChange = (e: React.MouseEvent<HTMLDivElement>) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const clickX = e.clientX - rect.left;
-    const percentage = Math.max(0, Math.min(1, clickX / rect.width));
-    remote.changeVolume(percentage);
-    if (percentage > 0 && isMuted) {
-      remote.toggleMuted();
-    }
-  };
-  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
-  return (
-    <div
-      className={cn(
-        "absolute inset-0 flex flex-col justify-end transition-opacity duration-300",
-        "bg-gradient-to-t from-black/80 via-black/20 to-transparent",
-        "opacity-0 group-hover:opacity-100 focus-within:opacity-100",
-        "pointer-events-none group-hover:pointer-events-auto",
-        className
-      )}
-    >
-      {/* Progress Bar */}
-      <div className="px-4 pb-2 pointer-events-auto">
-        <div
-          className="h-1.5 bg-white/20 rounded-full cursor-pointer hover:h-2 transition-all group"
-          onClick={handleProgressClick}
-        >
-          <div
-            className="h-full bg-primary rounded-full transition-all relative group-hover:bg-primary/90"
-            style={{ width: `${progress}%` }}
-          >
-            <div className="absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
-          </div>
-        </div>
-      </div>
-      {/* Control Bar */}
-      <div className="flex items-center gap-4 px-4 pb-4 pointer-events-auto">
-        {/* Play/Pause */}
-        <button
-          onClick={() => remote.togglePaused()}
-          className="text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full"
-        >
-          {isPaused ? <Play className="h-6 w-6" /> : <Pause className="h-6 w-6" />}
-        </button>
-        {/* Time */}
-        <div className="text-white text-sm font-medium">
-          {formatTime(currentTime)} / {formatTime(duration)}
-        </div>
-        <div className="flex-1" />
-        {/* Volume Control */}
-        <div className="flex items-center gap-2 group/volume">
-          <button
-            onClick={() => remote.toggleMuted()}
-            className="text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full"
-          >
-            {isMuted || volume === 0 ? (
-              <VolumeX className="h-5 w-5" />
-            ) : (
-              <Volume2 className="h-5 w-5" />
-            )}
-          </button>
-          <div
-            className="w-0 group-hover/volume:w-20 transition-all overflow-hidden"
-          >
-            <div
-              className="h-1.5 bg-white/20 rounded-full cursor-pointer hover:h-2 transition-all"
-              onClick={handleVolumeChange}
-            >
-              <div
-                className="h-full bg-white rounded-full transition-all"
-                style={{ width: `${volume * 100}%` }}
-              />
-            </div>
-          </div>
-        </div>
-        {/* Fullscreen */}
-        <button
-          onClick={() => isFullscreen ? remote.exitFullscreen() : remote.enterFullscreen()}
-          className="text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full"
-        >
-          {isFullscreen ? <Minimize className="h-5 w-5" /> : <Maximize className="h-5 w-5" />}
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/snippets/VideoPlayer/VideoPlayer.tsx DELETED Viewed

@@ -1,248 +0,0 @@
-// @ts-nocheck
-/**
- * Professional VideoPlayer - Vidstack Implementation
- * Supports YouTube, Vimeo, MP4, HLS and more with custom controls
- */
-'use client';
-import React, { forwardRef, useImperativeHandle, useRef, useMemo } from 'react';
-import { MediaPlayer, MediaProvider, Poster } from '@vidstack/react';
-import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
-import type { MediaPlayerInstance } from '@vidstack/react';
-import consola from 'consola';
-import { cn } from '@djangocfg/ui';
-import { type VideoPlayerProps, type VideoPlayerRef } from './types';
-// Import Vidstack base styles
-import '@vidstack/react/player/styles/base.css';
-// Import default theme
-import '@vidstack/react/player/styles/default/theme.css';
-import '@vidstack/react/player/styles/default/layouts/video.css';
-/**
- * Custom error class for invalid video URLs
- */
-export class VideoUrlError extends Error {
-  constructor(
-    message: string,
-    public readonly url: string,
-    public readonly suggestion?: string
-  ) {
-    super(message);
-    this.name = 'VideoUrlError';
-  }
-}
-/**
- * Validates and normalizes video URL for Vidstack
- * @throws {VideoUrlError} If URL format is invalid for the detected provider
- */
-function normalizeVideoUrl(url: string): string {
-  if (!url || typeof url !== 'string') {
-    throw new VideoUrlError('Video URL is required', url || '');
-  }
-  const trimmedUrl = url.trim();
-  // Already in correct format (youtube/ID, vimeo/ID, or direct URL)
-  if (trimmedUrl.startsWith('youtube/') || trimmedUrl.startsWith('vimeo/')) {
-    return trimmedUrl;
-  }
-  // YouTube URL patterns - auto-convert to youtube/ID format
-  const youtubePatterns = [
-    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
-    /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/,
-  ];
-  for (const pattern of youtubePatterns) {
-    const match = trimmedUrl.match(pattern);
-    if (match) {
-      // Auto-convert YouTube URL to youtube/ID format
-      const videoId = match[1];
-      if (process.env.NODE_ENV === 'development') {
-        consola.info(
-          `[VideoPlayer] Auto-converted YouTube URL to "youtube/${videoId}" format`
-        );
-      }
-      return `youtube/${videoId}`;
-    }
-  }
-  // Vimeo URL patterns - auto-convert to vimeo/ID format
-  const vimeoPattern = /vimeo\.com\/(\d+)/;
-  const vimeoMatch = trimmedUrl.match(vimeoPattern);
-  if (vimeoMatch) {
-    const videoId = vimeoMatch[1];
-    if (process.env.NODE_ENV === 'development') {
-      consola.info(
-        `[VideoPlayer] Auto-converted Vimeo URL to "vimeo/${videoId}" format`
-      );
-    }
-    return `vimeo/${videoId}`;
-  }
-  // Direct video URLs (mp4, webm, etc.) - allow as-is
-  if (/\.(mp4|webm|ogg|m3u8|mpd)(\?.*)?$/i.test(trimmedUrl)) {
-    return trimmedUrl;
-  }
-  // HLS/DASH streams
-  if (trimmedUrl.includes('.m3u8') || trimmedUrl.includes('.mpd')) {
-    return trimmedUrl;
-  }
-  // Unknown format - return as-is but warn in dev
-  if (process.env.NODE_ENV === 'development') {
-    consola.warn(
-      `[VideoPlayer] Unknown URL format: "${trimmedUrl}". ` +
-      `Supported formats: youtube/{id}, vimeo/{id}, or direct video URLs (.mp4, .webm, .m3u8)`
-    );
-  }
-  return trimmedUrl;
-}
-export const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(({
-  source,
-  aspectRatio = 16 / 9,
-  autoplay = false,
-  muted = false,
-  playsInline = true,
-  controls = true,
-  className,
-  showInfo = false,
-  theme = 'default',
-  onPlay,
-  onPause,
-  onEnded,
-  onError,
-}, ref) => {
-  const playerRef = useRef<MediaPlayerInstance | null>(null);
-  // Debug log
-  if (process.env.NODE_ENV === 'development') {
-    consola.info('[VideoPlayer] Received props:', {
-      url: source.url,
-      poster: source.poster,
-      title: source.title,
-    });
-  }
-  // Validate and normalize URL - throws VideoUrlError if invalid
-  const normalizedUrl = useMemo(() => {
-    try {
-      return normalizeVideoUrl(source.url);
-    } catch (error) {
-      if (error instanceof VideoUrlError) {
-        // Call onError callback and re-throw
-        onError?.(error.message + (error.suggestion ? ` Use: "${error.suggestion}"` : ''));
-        throw error;
-      }
-      throw error;
-    }
-  }, [source.url, onError]);
-  // Expose player methods via ref
-  useImperativeHandle(ref, () => {
-    const player = playerRef.current;
-    return {
-      play: () => player?.play(),
-      pause: () => player?.pause(),
-      togglePlay: () => {
-        if (player) {
-          player.paused ? player.play() : player.pause();
-        }
-      },
-      seekTo: (time: number) => {
-        if (player) player.currentTime = time;
-      },
-      setVolume: (volume: number) => {
-        if (player) player.volume = Math.max(0, Math.min(1, volume));
-      },
-      toggleMute: () => {
-        if (player) player.muted = !player.muted;
-      },
-      enterFullscreen: () => player?.enterFullscreen(),
-      exitFullscreen: () => player?.exitFullscreen(),
-    };
-  }, []);
-  const handlePlay = () => {
-    onPlay?.();
-  };
-  const handlePause = () => {
-    onPause?.();
-  };
-  const handleEnded = () => {
-    onEnded?.();
-  };
-  const handleError = (detail: any) => {
-    onError?.(detail?.message || 'Video playback error');
-  };
-  return (
-    <div className={cn("w-full", className)}>
-      {/* Video Player */}
-      <div
-        className={cn(
-          "relative w-full rounded-sm bg-black overflow-hidden",
-          theme === 'minimal' && "rounded-none",
-          theme === 'modern' && "rounded-xl shadow-2xl"
-        )}
-        style={{ aspectRatio: aspectRatio }}
-      >
-        <MediaPlayer
-          ref={playerRef}
-          title={source.title || 'Video'}
-          src={normalizedUrl}
-          autoPlay={autoplay}
-          muted={muted}
-          playsInline={playsInline}
-          onPlay={handlePlay}
-          onPause={handlePause}
-          onEnded={handleEnded}
-          onError={handleError}
-          className="w-full h-full"
-        >
-          <MediaProvider />
-          {/* Poster with proper aspect ratio handling */}
-          {source.poster && (
-            <Poster
-              className="vds-poster"
-              src={source.poster}
-              alt={source.title || 'Video poster'}
-              style={{ objectFit: 'cover' }}
-            />
-          )}
-          {/* Use Vidstack's built-in default layout */}
-          {controls && (
-            <DefaultVideoLayout
-              icons={defaultLayoutIcons}
-              thumbnails={source.poster}
-            />
-          )}
-        </MediaPlayer>
-      </div>
-      {/* Video Info */}
-      {showInfo && source.title && (
-        <div className="mt-4 space-y-2">
-          <h3 className="text-xl font-semibold text-foreground">{source.title}</h3>
-          {source.description && (
-            <p className="text-muted-foreground">{source.description}</p>
-          )}
-        </div>
-      )}
-    </div>
-  );
-});
-VideoPlayer.displayName = 'VideoPlayer';

package/src/snippets/VideoPlayer/index.ts DELETED Viewed

@@ -1,8 +0,0 @@
-/**
- * Professional VideoPlayer - Vidstack Implementation
- * Export all components and types
- */
-export { VideoPlayer, VideoUrlError } from './VideoPlayer';
-export { VideoControls } from './VideoControls';
-export type { VideoSource, VideoPlayerProps, VideoPlayerRef } from './types';