@bailierich/booking-components 2.0.0

package/components/Sections/VideoSection.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+export interface VideoSectionProps {
+  videoUrl: string;
+  aspectRatio?: '16:9' | '4:3' | '1:1' | '9:16';
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  controls?: boolean;
+  allowFullScreen?: boolean;
+  coverImage?: string;
+  maxWidth?: 'full' | 'large' | 'medium' | 'small';
+  alignment?: 'left' | 'center' | 'right';
+  borderRadius?: number;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography?: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function VideoSection({
+  videoUrl,
+  aspectRatio = '16:9',
+  autoplay = false,
+  loop = false,
+  muted = true,
+  controls = true,
+  allowFullScreen = true,
+  coverImage,
+  maxWidth = 'large',
+  alignment = 'center',
+  borderRadius = 12,
+  colors,
+  enableInlineEditing = false,
+  sectionId = ''
+}: VideoSectionProps) {
+  // Helper to extract video ID from YouTube/Vimeo URLs
+  const getEmbedUrl = (url: string): { type: 'youtube' | 'vimeo' | 'direct'; embedUrl: string } | null => {
+    // YouTube
+    const youtubeMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/);
+    if (youtubeMatch) {
+      const videoId = youtubeMatch[1];
+      const params = new URLSearchParams({
+        ...(autoplay ? { autoplay: '1' } : {}),
+        ...(loop ? { loop: '1', playlist: videoId } : {}),
+        ...(muted ? { mute: '1' } : {}),
+        ...(controls ? {} : { controls: '0' }),
+      });
+      return {
+        type: 'youtube',
+        embedUrl: `https://www.youtube.com/embed/${videoId}?${params.toString()}`
+      };
+    }
+
+    // Vimeo
+    const vimeoMatch = url.match(/(?:vimeo\.com\/)(\d+)/);
+    if (vimeoMatch) {
+      const videoId = vimeoMatch[1];
+      const params = new URLSearchParams({
+        ...(autoplay ? { autoplay: '1' } : {}),
+        ...(loop ? { loop: '1' } : {}),
+        ...(muted ? { muted: '1' } : {}),
+        ...(controls ? {} : { controls: '0' }),
+      });
+      return {
+        type: 'vimeo',
+        embedUrl: `https://player.vimeo.com/video/${videoId}?${params.toString()}`
+      };
+    }
+
+    // Direct video URL (mp4, webm, etc.)
+    if (url.match(/\.(mp4|webm|ogg)$/i)) {
+      return {
+        type: 'direct',
+        embedUrl: url
+      };
+    }
+
+    return null;
+  };
+
+  const embedData = getEmbedUrl(videoUrl);
+
+  // Aspect ratio padding hack
+  const aspectRatioMap = {
+    '16:9': '56.25%',
+    '4:3': '75%',
+    '1:1': '100%',
+    '9:16': '177.78%'
+  };
+
+  // Max width classes
+  const maxWidthMap = {
+    full: 'max-w-full',
+    large: 'max-w-6xl',
+    medium: 'max-w-4xl',
+    small: 'max-w-2xl'
+  };
+
+  const alignmentClass = alignment === 'center' ? 'mx-auto' : alignment === 'right' ? 'ml-auto' : 'mr-auto';
+
+  return (
+    <div className="container mx-auto px-4">
+      <div className={`${maxWidthMap[maxWidth]} ${alignmentClass}`}>
+        <div
+          className="relative w-full overflow-hidden"
+          style={{
+            paddingBottom: aspectRatioMap[aspectRatio],
+            borderRadius: `${borderRadius}px`
+          }}
+        >
+          {embedData ? (
+            embedData.type === 'direct' ? (
+              // Direct video
+              <video
+                src={embedData.embedUrl}
+                autoPlay={autoplay}
+                loop={loop}
+                muted={muted}
+                controls={controls}
+                poster={coverImage}
+                className="absolute top-0 left-0 w-full h-full object-cover"
+              />
+            ) : (
+              // YouTube or Vimeo iframe
+              <iframe
+                src={embedData.embedUrl}
+                className="absolute top-0 left-0 w-full h-full"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen={allowFullScreen}
+                title="Video"
+              />
+            )
+          ) : (
+            // Fallback placeholder
+            <div
+              className="absolute top-0 left-0 w-full h-full flex items-center justify-center"
+              style={{ backgroundColor: `${colors.primary}20` }}
+            >
+              <div className="text-center px-4">
+                <svg
+                  className="w-16 h-16 mx-auto mb-4"
+                  fill="none"
+                  stroke={colors.primary}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+                  />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <p style={{ color: colors.text, opacity: 0.6 }}>
+                  {videoUrl ? 'Invalid video URL' : 'Add a video URL to display'}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default VideoSection;

package/components/Sections/index.ts

@@ -0,0 +1,57 @@
+export { Logo } from './Logo';
+export { Header } from './Header';
+export { FeaturedLink } from './FeaturedLink';
+export { LinkList } from './LinkList';
+export { SocialBar } from './SocialBar';
+export { Hero } from './Hero';
+export { About } from './About';
+export { ServicesPreview } from './ServicesPreview';
+export { Gallery } from './Gallery';
+export { Testimonials } from './Testimonials';
+export { Team } from './Team';
+export { Contact } from './Contact';
+export { MinimalHeader } from './MinimalHeader';
+export { MinimalNavigation } from './MinimalNavigation';
+export { MinimalFooter } from './MinimalFooter';
+export { FeatureContent } from './FeatureContent';
+export { BeforeAfter } from './BeforeAfter';
+export { PricingTable } from './PricingTable';
+export { InstagramFeed } from './InstagramFeed';
+export { FixedInfoCard } from './FixedInfoCard';
+export { BookingSection } from './BookingSection';
+export { VideoSection } from './VideoSection';
+export { ScrollingTextDivider } from './ScrollingTextDivider';
+export { LocationMap } from './LocationMap';
+export { ImageSection } from './ImageSection';
+export { FAQSection } from './FAQSection';
+export { Navbar } from './Navbar';
+export { TextSection } from './TextSection';
+
+export type * from './Logo';
+export type * from './Header';
+export type * from './FeaturedLink';
+export type * from './LinkList';
+export type * from './SocialBar';
+export type * from './Hero';
+export type * from './About';
+export type * from './ServicesPreview';
+export type * from './Gallery';
+export type * from './Testimonials';
+export type * from './Team';
+export type * from './Contact';
+export type * from './MinimalHeader';
+export type * from './MinimalNavigation';
+export type * from './MinimalFooter';
+export type * from './FeatureContent';
+export type * from './BeforeAfter';
+export type * from './PricingTable';
+export type * from './InstagramFeed';
+export type * from './FixedInfoCard';
+export type * from './BookingSection';
+export type * from './VideoSection';
+export type * from './ScrollingTextDivider';
+export type * from './LocationMap';
+export type * from './ImageSection';
+export type * from './FAQSection';
+export type * from './Navbar';
+export type * from './TextSection';

package/components/index.ts

@@ -0,0 +1,21 @@
+// Section Components
+export * from './Sections';
+
+// Booking Flow Components
+export { BookingFlow } from './BookingFlow';
+export * from './BookingFlow/steps';
+export type { BookingFlowProps, BookingFlowConfig } from './BookingFlow';
+
+// UI Components
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from '../types';
+
+export { HoldTimer } from './HoldTimer';
+export type { HoldTimerProps } from './HoldTimer';
+
+// Section Renderer
+export { SectionRenderer } from './SectionRenderer';
+export type { SectionRendererProps } from './SectionRenderer';
+
+// Form Components
+export * from './Forms';