tee3apps-cms-sdk-react 0.0.20 → 0.0.23

package/src/PageComponents/Visual-Components/GroupVideoList.tsx

@@ -1,590 +1,694 @@
-import React, { useState } from 'react';
-import { Linodeurl } from '../../const';
-
-interface VideoItem {
-  id: number;
-  attr: {
-    playerType: 'Video' | 'Youtube' | 'Vimeo' | 'Dailymotion';
-      controls?: boolean;
-      loop?: boolean;
-      alt?: string;
-      url: string;
-      autoplay?: boolean;
-      muted?: boolean;
-  };
-  title: string;
-  subTitle: string;
-}
-
-interface GroupVideoStatic {
-  _id: string;
-  name: string;
-  code: string;
-}
-
-interface GroupVideoDynamic {
-  code: string;
-  name: { all: string };
-  list: VideoItem[];
-  isActive?: boolean;
-}
-
-interface GroupVideoData {
-  static: GroupVideoStatic;
-  dynamic: GroupVideoDynamic;
-  groupvideodata: VideoItem[];
-  groupimagedata: any[];
-}
-
-interface HeaderTextStyle {
-  fontSize: number;
-  fontColor: string;
-  isBold: boolean;
-  isItalic: boolean;
-  isUnderline: boolean;
-}
-
-interface DeviceBooleanProps {
-  web: boolean;
-  mobileweb: boolean;
-  mobileapp: boolean;
-  tablet: boolean;
-}
-
-interface DeviceLayoutProps {
-  web: string;
-  mobileweb: string;
-  mobileapp: string;
-  tablet: string;
-}
-
-export interface GroupVideoListProps {
-  nameData: string;
-  type: string;
-  groupvideo: GroupVideoData;
-  headerText: string;
-  activeStatus: boolean;
-  headerImage: string;
-  headerTextStyle: HeaderTextStyle;
-  layout: DeviceLayoutProps;
-  showHeader: DeviceBooleanProps;
-  isHorizontalScroll: DeviceBooleanProps;
-  headerBackground: string;
-  carouselBackground: string;
-  cardcolor: string;
-  showSubtitle?: boolean;
-  showTitle?: boolean;
-  titleStyle?: {
-    fontSize: number;
-    fontColor: string;
-    isBold: boolean;
-    isItalic: boolean;
-    isUnderline: boolean;
-  };
-  subtitleStyle?: {
-    fontSize: number;
-    fontColor: string;
-    isBold: boolean;
-    isItalic: boolean;
-    isUnderline: boolean;
-  };
-}
-
-interface GroupVideoListMainProps {
-  props: GroupVideoListProps;
-  deviceMode?: string;
-  boxHeight?: string;
-}
-
-// Helper functions for extracting video IDs
-const extractYouTubeId = (url: string): string | null => {
-  try {
-    const parsed = new URL(url);
-    if (parsed.hostname.includes('youtu.be')) {
-      return parsed.pathname.replace('/', '') || null;
-    }
-    if (parsed.hostname.includes('youtube.com')) {
-      if (parsed.pathname.startsWith('/watch')) {
-        return parsed.searchParams.get('v');
-      }
-      if (parsed.pathname.startsWith('/embed/')) {
-        return parsed.pathname.split('/embed/')[1] || null;
-      }
-    }
-  } catch {}
-  return null;
-};
-
-const extractVimeoId = (url: string): string | null => {
-  try {
-    const parsed = new URL(url);
-    if (parsed.hostname.includes('vimeo.com')) {
-      const parts = parsed.pathname.split('/').filter(Boolean);
-      if (parts[0] === 'video') return parts[1] || null;
-      return parts[0] || null;
-    }
-    if (parsed.hostname.includes('player.vimeo.com')) {
-      const parts = parsed.pathname.split('/').filter(Boolean);
-      return parts[1] || null;
-    }
-  } catch {}
-  return null;
-};
-
-const extractDailymotionId = (url: string): string | null => {
-  try {
-    const parsed = new URL(url);
-    if (parsed.hostname.includes('dailymotion.com')) {
-      const parts = parsed.pathname.split('/').filter(Boolean);
-      if (parts[0] === 'video') return parts[1] || null;
-    }
-    if (parsed.hostname.includes('dai.ly')) {
-      return parsed.pathname.replace('/', '') || null;
-    }
-  } catch {}
-  return null;
-};
-
-// Video Component
-interface VideoComponentProps {
-  videoData: {
-    url: string;
-    type: 'Youtube' | 'Vimeo' | 'Dailymotion' | 'Video';
-    controls?: boolean;
-    loop?: boolean;
-    alt?: string;
-    autoplay?: boolean;
-    muted?: boolean;
-  };
-  borderRadius?: number;
-  height?: string;
-}
-
-const VideoComponent: React.FC<VideoComponentProps> = ({
-  videoData,
-  borderRadius = 6,
-  height = '100%'
-}) => {
-  const renderPlayer = () => {
-    const commonStyle: React.CSSProperties = {
-      width: '100%',
-      height: '100%',
-      border: 0,
-      borderRadius: `${borderRadius}px`,
-    };
-
-    if (videoData.type === 'Youtube') {
-      const id = extractYouTubeId(videoData.url);
-      const src = id ? `https://www.youtube.com/embed/${id}` : videoData.url;
-      return (
-        <iframe
-          title={videoData.alt || 'YouTube video'}
-          src={src}
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          allowFullScreen
-          style={commonStyle}
-        />
-      );
-    }
-
-    if (videoData.type === 'Vimeo') {
-      const id = extractVimeoId(videoData.url);
-      const src = id ? `https://player.vimeo.com/video/${id}` : videoData.url;
-      return (
-        <iframe
-          title={videoData.alt || 'Vimeo video'}
-          src={src}
-          allow="autoplay; fullscreen; picture-in-picture"
-          allowFullScreen
-          style={commonStyle}
-        />
-      );
-    }
-
-    if (videoData.type === 'Dailymotion') {
-      const id = extractDailymotionId(videoData.url);
-      const src = id ? `https://www.dailymotion.com/embed/video/${id}` : videoData.url;
-      return (
-        <iframe
-          title={videoData.alt || 'Dailymotion video'}
-          src={src}
-          allow="autoplay; fullscreen; picture-in-picture"
-          allowFullScreen
-          style={commonStyle}
-        />
-      );
-    }
-
-    // Default: normal video
-    return (
-      <video
-        autoPlay={videoData.autoplay !== false}
-        muted={videoData.muted !== false}
-        playsInline
-        controls={videoData.controls !== false}
-        loop={videoData.loop === true}
-        style={{ width: '100%', height: '100%', borderRadius: `${borderRadius}px` }}
-      >
-        <source src={`${Linodeurl}${videoData.url}`} />
-        Your browser does not support the video tag.
-      </video>
-    );
-  };
-
-  return (
-    <div
-      style={{
-        borderRadius: `${borderRadius}px`,
-        height: height,
-        overflow: 'hidden'
-      }}
-    >
-      {renderPlayer()}
-    </div>
-  );
-};
-
-// Main GroupVideoList Component
-const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode = 'web', boxHeight }) => {
-  const getCurrentBooleanProp = (prop?: DeviceBooleanProps) => {
-    if (!prop) return false;
-    switch (deviceMode) {
-      case 'mobileweb': return !!prop.mobileweb;
-      case 'mobileapp': return !!prop.mobileapp;
-      case 'tablet': return !!prop.tablet;
-      case 'web':
-      default: return !!prop.web;
-    }
-  };
-
-  const getCurrentLayout = () => {
-    if (!props.layout) return 'NONE';
-    switch (deviceMode) {
-      case 'mobileweb': return props.layout.mobileweb || 'NONE';
-      case 'mobileapp': return props.layout.mobileapp || 'NONE';
-      case 'tablet': return props.layout.tablet || 'NONE';
-      case 'web':
-      default: return props.layout.web || 'NONE';
-    }
-  };
-
-  const showHeader = getCurrentBooleanProp(props.showHeader);
-  const isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
-  const currentLayout = getCurrentLayout();
-
-  const getVideos = (): VideoItem[] => {
-    if (props.type === 'dynamic') {
-      if (props.groupvideo?.dynamic?.list?.length) return props.groupvideo.dynamic.list;
-    }
-    if (props.groupvideo?.groupvideodata?.length) return props.groupvideo.groupvideodata;
-    return [];
-  };
-
-  const videos = getVideos();
-
-  // Carousel navigation buttons (layout NONE)
-  const scrollLeft = () => {
-    const scrollableContainer = document.querySelector('.scrollable-container');
-    if (scrollableContainer) {
-      (scrollableContainer as HTMLElement).scrollBy({ left: -200, behavior: 'smooth' });
-    }
-  };
-
-  const scrollRight = () => {
-    const scrollableContainer = document.querySelector('.scrollable-container');
-    if (scrollableContainer) {
-      (scrollableContainer as HTMLElement).scrollBy({ left: 200, behavior: 'smooth' });
-    }
-  };
-
-  const VideoCard = ({ item, large = false }: { item: VideoItem; large?: boolean }) => {
-    const [isHovered, setIsHovered] = useState(false);
-    
-    return (
-      <div
-        className="videoCard"
-        style={{
-          height: 'auto',
-          borderRadius: '8px',
-          overflow: 'hidden',
-          border: '1px solid #eee',
-          backgroundColor: props.cardcolor || '#fff',
-          display: 'flex',
-          flexDirection: 'column',
-          padding: large ? '16px' : '12px',
-          boxShadow: isHovered ? '0 4px 8px rgba(0,0,0,0.15)' : '0 2px 4px rgba(0,0,0,0.1)',
-          transition: 'all 0.2s ease',
-          cursor: 'pointer',
-          transform: isHovered ? 'translateY(-2px)' : 'translateY(0px)',
-          flex: 1
-        }}
-        onMouseOver={() => setIsHovered(true)}
-        onMouseOut={() => setIsHovered(false)}
-      >
-        <div style={{ width: '100%', marginBottom: large ? '12px' : '8px' }}>
-          <VideoComponent
-            videoData={{
-              url: item.attr.url,
-              type: item.attr.playerType,
-              controls: item.attr.controls,
-              loop: item.attr.loop,
-              alt: item.attr.alt,
-              autoplay: item.attr.autoplay !== false,
-              muted: item.attr.muted !== false
-            }}
-            borderRadius={6}
-            height={`${parseInt(boxHeight || '280') - 160}px`}
-          />
-        </div>
-        {(props?.showTitle !== false) && item.title && (
-          <div style={{ 
-            textAlign: 'center', 
-            fontSize: props.titleStyle ? `${props.titleStyle.fontSize}px` : (large ? '16px' : '14px'), 
-            fontWeight: props.titleStyle?.isBold ? 'bold' : (large ? 600 : 500), 
-            color: props.titleStyle?.fontColor || '#333', 
-            fontStyle: props.titleStyle?.isItalic ? 'italic' : 'normal',
-            textDecoration: props.titleStyle?.isUnderline ? 'underline' : 'none',
-            lineHeight: '1.4', 
-            marginBottom: '4px'
-          }}>
-            {item.title}
-          </div>
-        )}
-        {(props?.showSubtitle !== false) && item.subTitle && (
-          <div style={{ 
-            textAlign: 'center', 
-            fontSize: props.subtitleStyle ? `${props.subtitleStyle.fontSize}px` : (large ? '14px' : '12px'), 
-            fontWeight: props.subtitleStyle?.isBold ? 'bold' : 400, 
-            color: props.subtitleStyle?.fontColor || '#666', 
-            fontStyle: props.subtitleStyle?.isItalic ? 'italic' : 'normal',
-            textDecoration: props.subtitleStyle?.isUnderline ? 'underline' : 'none',
-            lineHeight: '1.3'
-          }}>
-            {item.subTitle}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  return (
-    <div
-      style={{
-        border: '1px solid #e1e1e1',
-        width: '100%',
-        maxWidth: '100%',
-        borderRadius: '0px',
-        height: boxHeight || 'auto',
-        minHeight: boxHeight ? boxHeight : '100px',
-        position: 'relative',
-        overflow: 'hidden',
-        marginBottom: '20px',
-        marginTop: '0px',
-        display: 'flex',
-        flexDirection: 'column'
-      }}
-      className='GroupVideoListComponent'
-    >
-      {showHeader && (
-        <div
-          className="groupVideoHeader"
-          style={{
-            backgroundColor: props.headerBackground,
-            padding: '12px 16px',
-            borderRadius: '0px',
-            marginBottom: '4px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            flexWrap: 'wrap',
-            gap: '12px',
-          }}
-        >
-          <p style={{
-            color: props.headerTextStyle.fontColor,
-            fontSize: `${props.headerTextStyle.fontSize}px`,
-            fontWeight: props.headerTextStyle.isBold ? 'bold' : 'normal',
-            fontStyle: props.headerTextStyle.isItalic ? 'italic' : 'normal',
-            textDecoration: props.headerTextStyle.isUnderline ? 'underline' : 'none',
-            margin: 0
-          }}>
-            {props.headerText || 'Video List'}
-          </p>
-
-          {currentLayout === 'NONE' && videos.length > 2 && (
-            <div style={{ display: 'flex', gap: '8px' }}>
-              <button
-                onClick={scrollLeft}
-                style={{
-                  width: '32px',
-                  height: '32px',
-                  borderRadius: '50%',
-                  border: '1px solid #ddd',
-                  backgroundColor: '#fff',
-                  cursor: 'pointer',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: '16px',
-                  fontWeight: 'bold'
-                }}
-                onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
-                onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
-              >
-                ‹
-              </button>
-              <button
-                onClick={scrollRight}
-                style={{
-                  width: '32px',
-                  height: '32px',
-                  borderRadius: '50%',
-                  border: '1px solid #ddd',
-                  backgroundColor: '#fff',
-                  cursor: 'pointer',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: '16px',
-                  fontWeight: 'bold'
-                }}
-                onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
-                onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
-              >
-                ›
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-
-      <div
-        style={{
-          display: currentLayout === 'NONE' ? 'flex' : 'block',
-          overflowX: currentLayout === 'NONE' ? (isHorizontalScroll ? 'auto' : 'hidden') : 'visible',
-          gap: currentLayout === 'NONE' ? '12px' : '0',
-          padding: '12px',
-          scrollBehavior: 'smooth',
-          backgroundColor: props.carouselBackground || '#fff',
-          scrollbarWidth: 'thin',
-          borderRadius: '8px',
-          position: 'relative',
-          scrollbarColor: '#c1c1c1 transparent',
-          flex: 1,
-          overflow: 'hidden'
-        }}
-        className="groupVideoCarousel"
-      >
-        {/* Navigation buttons - positioned like carousel */}
-        {!showHeader && currentLayout === 'NONE' && videos.length > 2 && (
-          <>
-            <button
-              onClick={scrollLeft}
-              style={{
-                position: 'absolute',
-                left: '10px',
-                top: '50%',
-                transform: 'translateY(-50%)',
-                background: 'rgba(0,0,0,0.5)',
-                color: 'white',
-                border: 'none',
-                borderRadius: '50%',
-                width: '40px',
-                height: '40px',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '18px',
-                zIndex: 10,
-                transition: 'all 0.2s ease'
-              }}
-              onMouseOver={(e) => { 
-                e.currentTarget.style.background = 'rgba(0,0,0,0.7)';
-                e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
-              }}
-              onMouseOut={(e) => { 
-                e.currentTarget.style.background = 'rgba(0,0,0,0.5)';
-                e.currentTarget.style.transform = 'translateY(-50%) scale(1)';
-              }}
-            >
-              ‹
-            </button>
-            <button
-              onClick={scrollRight}
-              style={{
-                position: 'absolute',
-                right: '10px',
-                top: '50%',
-                transform: 'translateY(-50%)',
-                background: 'rgba(0,0,0,0.5)',
-                color: 'white',
-                border: 'none',
-                borderRadius: '50%',
-                width: '40px',
-                height: '40px',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '18px',
-                zIndex: 10,
-                transition: 'all 0.2s ease'
-              }}
-              onMouseOver={(e) => { 
-                e.currentTarget.style.background = 'rgba(0,0,0,0.7)';
-                e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
-              }}
-              onMouseOut={(e) => { 
-                e.currentTarget.style.background = 'rgba(0,0,0,0.5)';
-                e.currentTarget.style.transform = 'translateY(-50%) scale(1)';
-              }}
-            >
-              ›
-            </button>
-          </>
-        )}
-        {videos.length > 0 ? (
-          currentLayout === 'NONE' ? (
-            videos.map((video) => (
-              <div key={video.id} style={{ minWidth: '200px',height: 'auto' }}>
-                <VideoCard item={video} />
-              </div>
-            ))
-          ) : currentLayout === 'SMALL' ? (
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px', padding: '8px' }}>
-              {videos.map((video) => (
-                <VideoCard key={video.id} item={video} />
-              ))}
-            </div>
-          ) : currentLayout === 'MEDIUM' ? (
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', padding: '8px' }}>
-              {videos.map((video) => (
-                <VideoCard key={video.id} item={video} />
-              ))}
-            </div>
-          ) : currentLayout === 'MEDIUM_THREE' ? (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
-              {videos.length > 0 && (
-                <VideoCard item={videos[0]} large />
-              )}
-              {videos.length > 1 && (
-                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
-                  {videos.slice(1).map((video) => (
-                    <VideoCard key={video.id} item={video} />
-                  ))}
-                </div>
-              )}
-            </div>
-          ) : null
-        ) : (
-          <div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
-            <p>No videos available.</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
+import React, { useState } from 'react';
+import { Linodeurl } from '../../const';
+
+interface VideoItem {
+  id: number;
+  attr: {
+    playerType: 'Video' | 'Youtube' | 'Vimeo' | 'Dailymotion';
+      controls?: boolean;
+      loop?: boolean;
+      alt?: string;
+      url: string;
+      autoplay?: boolean;
+      muted?: boolean;
+  };
+  title: string;
+  subTitle: string;
+}
+
+interface GroupVideoStatic {
+  _id: string;
+  name: string;
+  code: string;
+}
+
+interface GroupVideoDynamic {
+  code: string;
+  name: { all: string };
+  list: VideoItem[];
+  isActive?: boolean;
+}
+
+interface GroupVideoData {
+  static: GroupVideoStatic;
+  dynamic: GroupVideoDynamic;
+  groupvideodata: VideoItem[];
+  groupimagedata: any[];
+}
+
+interface HeaderTextStyle {
+  fontSize: number;
+  fontColor: string;
+  isBold: boolean;
+  isItalic: boolean;
+  isUnderline: boolean;
+}
+
+interface DeviceBooleanProps {
+  web: boolean;
+  mobileweb: boolean;
+  mobileapp: boolean;
+  tablet: boolean;
+}
+
+interface DeviceLayoutProps {
+  web: string;
+  mobileweb: string;
+  mobileapp: string;
+  tablet: string;
+}
+
+export interface GroupVideoListProps {
+  nameData: string;
+  type: string;
+  groupvideo: GroupVideoData;
+  headerText: string;
+  activeStatus: boolean;
+  headerImage: string;
+  headerTextStyle: HeaderTextStyle;
+  layout: DeviceLayoutProps;
+  showHeader: DeviceBooleanProps;
+  isHorizontalScroll: DeviceBooleanProps;
+  headerBackground: string;
+  carouselBackground: string;
+  cardcolor: string;
+  showSubtitle?: boolean | DeviceBooleanProps;
+  showTitle?: boolean | DeviceBooleanProps;
+  titleStyle?: {
+    fontSize: number;
+    fontColor: string;
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+  };
+  subtitleStyle?: {
+    fontSize: number;
+    fontColor: string;
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+  };
+}
+
+interface GroupVideoListMainProps {
+  props: GroupVideoListProps;
+  deviceMode?: string;
+  boxHeight?: string;
+}
+
+// Helper functions for extracting video IDs
+const extractYouTubeId = (url: string): string | null => {
+  try {
+    const parsed = new URL(url);
+    if (parsed.hostname.includes('youtu.be')) {
+      return parsed.pathname.replace('/', '') || null;
+    }
+    if (parsed.hostname.includes('youtube.com')) {
+      if (parsed.pathname.startsWith('/watch')) {
+        return parsed.searchParams.get('v');
+      }
+      if (parsed.pathname.startsWith('/embed/')) {
+        return parsed.pathname.split('/embed/')[1] || null;
+      }
+    }
+  } catch {}
+  return null;
+};
+
+const extractVimeoId = (url: string): string | null => {
+  try {
+    const parsed = new URL(url);
+    if (parsed.hostname.includes('vimeo.com')) {
+      const parts = parsed.pathname.split('/').filter(Boolean);
+      if (parts[0] === 'video') return parts[1] || null;
+      return parts[0] || null;
+    }
+    if (parsed.hostname.includes('player.vimeo.com')) {
+      const parts = parsed.pathname.split('/').filter(Boolean);
+      return parts[1] || null;
+    }
+  } catch {}
+  return null;
+};
+
+const extractDailymotionId = (url: string): string | null => {
+  try {
+    const parsed = new URL(url);
+    if (parsed.hostname.includes('dailymotion.com')) {
+      const parts = parsed.pathname.split('/').filter(Boolean);
+      if (parts[0] === 'video') return parts[1] || null;
+    }
+    if (parsed.hostname.includes('dai.ly')) {
+      return parsed.pathname.replace('/', '') || null;
+    }
+  } catch {}
+  return null;
+};
+
+// Video Component
+interface VideoComponentProps {
+  videoData: {
+    url: string;
+    type: 'Youtube' | 'Vimeo' | 'Dailymotion' | 'Video';
+    controls?: boolean;
+    loop?: boolean;
+    alt?: string;
+    autoplay?: boolean;
+    muted?: boolean;
+  };
+  borderRadius?: number;
+  height?: string;
+}
+
+const VideoComponent: React.FC<VideoComponentProps> = ({
+  videoData,
+  borderRadius = 6,
+  height = '100%'
+}) => {
+  const renderPlayer = () => {
+    const commonStyle: React.CSSProperties = {
+      width: '100%',
+      height: '100%',
+      border: 0,
+      borderRadius: `${borderRadius}px`,
+    };
+
+    if (videoData.type === 'Youtube') {
+      const id = extractYouTubeId(videoData.url);
+      const src = id ? `https://www.youtube.com/embed/${id}` : videoData.url;
+      return (
+        <iframe
+          title={videoData.alt || 'YouTube video'}
+          src={src}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+          style={commonStyle}
+        />
+      );
+    }
+
+    if (videoData.type === 'Vimeo') {
+      const id = extractVimeoId(videoData.url);
+      const src = id ? `https://player.vimeo.com/video/${id}` : videoData.url;
+      return (
+        <iframe
+          title={videoData.alt || 'Vimeo video'}
+          src={src}
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowFullScreen
+          style={commonStyle}
+        />
+      );
+    }
+
+    if (videoData.type === 'Dailymotion') {
+      const id = extractDailymotionId(videoData.url);
+      const src = id ? `https://www.dailymotion.com/embed/video/${id}` : videoData.url;
+      return (
+        <iframe
+          title={videoData.alt || 'Dailymotion video'}
+          src={src}
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowFullScreen
+          style={commonStyle}
+        />
+      );
+    }
+
+    // Default: normal video
+    return (
+      <video
+        autoPlay={videoData.autoplay !== false}
+        muted={videoData.muted !== false}
+        playsInline
+        controls={videoData.controls !== false}
+        loop={videoData.loop === true}
+        style={{ width: '100%', height: '100%', borderRadius: `${borderRadius}px` }}
+      >
+        <source src={`${Linodeurl}${videoData.url}`} />
+        Your browser does not support the video tag.
+      </video>
+    );
+  };
+
+  return (
+    <div
+      style={{
+        borderRadius: `${borderRadius}px`,
+        height: height,
+        overflow: 'hidden'
+      }}
+    >
+      {renderPlayer()}
+    </div>
+  );
+};
+
+// Main GroupVideoList Component
+const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode = 'web', boxHeight }) => {
+  const getCurrentBooleanProp = (prop?: DeviceBooleanProps) => {
+    if (!prop) return false;
+    switch (deviceMode) {
+      case 'mobileweb': return !!prop.mobileweb;
+      case 'mobileapp': return !!prop.mobileapp;
+      case 'tablet': return !!prop.tablet;
+      case 'web':
+      default: return !!prop.web;
+    }
+  };
+
+  const getCurrentLayout = () => {
+    if (!props.layout) return 'NONE';
+    switch (deviceMode) {
+      case 'mobileweb': return props.layout.mobileweb || 'NONE';
+      case 'mobileapp': return props.layout.mobileapp || 'NONE';
+      case 'tablet': return props.layout.tablet || 'NONE';
+      case 'web':
+      default: return props.layout.web || 'NONE';
+    }
+  };
+
+  const showHeader = getCurrentBooleanProp(props.showHeader);
+  const isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
+  const currentLayout = getCurrentLayout();
+  
+  // Handle showTitle and showSubtitle - can be boolean or DeviceBooleanProps
+  const showTitle = typeof props.showTitle === 'boolean' 
+    ? props.showTitle 
+    : getCurrentBooleanProp(props.showTitle as DeviceBooleanProps | undefined);
+  const showSubtitle = typeof props.showSubtitle === 'boolean' 
+    ? props.showSubtitle 
+    : getCurrentBooleanProp(props.showSubtitle as DeviceBooleanProps | undefined);
+
+  const getVideos = (): VideoItem[] => {
+    if (props.type === 'dynamic') {
+      if (props.groupvideo?.dynamic?.list?.length) return props.groupvideo.dynamic.list;
+    }
+    if (props.groupvideo?.groupvideodata?.length) return props.groupvideo.groupvideodata;
+    return [];
+  };
+
+  const videos = getVideos();
+
+  // Calculate consistent dimensions for all video cards
+  const calculateCardDimensions = (large = false) => {
+    // Fixed heights for title and subtitle
+    const titleHeight = showTitle ? 24 : 0;
+    const subtitleHeight = showSubtitle ? 20 : 0;
+    const spacing = (showTitle ? 8 : 0) + (showSubtitle && showTitle ? 4 : (showSubtitle ? 8 : 0));
+    const cardPadding = large ? 32 : 24; // 16px top + 16px bottom or 12px top + 12px bottom
+    
+    if (!boxHeight) {
+      // When no boxHeight, use a default video height
+      const defaultVideoHeight = 200;
+      const defaultCardHeight = defaultVideoHeight + cardPadding + titleHeight + subtitleHeight + spacing;
+      return {
+        cardHeight: `${defaultCardHeight}px`,
+        videoHeight: `${defaultVideoHeight}px`,
+        titleHeight: showTitle ? `${titleHeight}px` : '0px',
+        subtitleHeight: showSubtitle ? `${subtitleHeight}px` : '0px',
+        titleMarginBottom: showTitle && showSubtitle ? '4px' : '0px',
+        videoMarginBottom: showTitle || showSubtitle ? '8px' : '0px'
+      };
+    }
+    
+    const totalHeight = parseInt(boxHeight);
+    const headerHeight = showHeader ? 60 : 0;
+    const containerPadding = 24; // 12px top + 12px bottom
+    
+    // Calculate available height for video
+    const availableHeight = totalHeight - headerHeight - containerPadding - cardPadding - titleHeight - subtitleHeight - spacing;
+    const videoHeight = Math.max(availableHeight, 150);
+    
+    // Card height should match the container height minus header and container padding
+    const cardHeight = totalHeight - headerHeight - containerPadding;
+    
+    return {
+      cardHeight: `${cardHeight}px`,
+      videoHeight: `${videoHeight}px`,
+      titleHeight: showTitle ? `${titleHeight}px` : '0px',
+      subtitleHeight: showSubtitle ? `${subtitleHeight}px` : '0px',
+      titleMarginBottom: showTitle && showSubtitle ? '4px' : '0px',
+      videoMarginBottom: showTitle || showSubtitle ? '8px' : '0px'
+    };
+  };
+
+  // Carousel navigation buttons (layout NONE)
+  const scrollLeft = () => {
+    const scrollableContainer = document.querySelector('.groupVideoCarousel');
+    if (scrollableContainer) {
+      (scrollableContainer as HTMLElement).scrollBy({ left: -300, behavior: 'smooth' });
+    }
+  };
+
+  const scrollRight = () => {
+    const scrollableContainer = document.querySelector('.groupVideoCarousel');
+    if (scrollableContainer) {
+      (scrollableContainer as HTMLElement).scrollBy({ left: 300, behavior: 'smooth' });
+    }
+  };
+
+  const VideoCard = ({ item, large = false }: { item: VideoItem; large?: boolean }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const dimensions = calculateCardDimensions(large);
+    
+    return (
+      <div
+        className="videoCard"
+        style={{
+          height: dimensions.cardHeight,
+          borderRadius: '8px',
+          overflow: 'hidden',
+          border: '1px solid #eee',
+          backgroundColor: props.cardcolor || '#fff',
+          display: 'flex',
+          flexDirection: 'column',
+          padding: large ? '16px' : '12px',
+          boxShadow: isHovered ? '0 4px 8px rgba(0,0,0,0.15)' : '0 2px 4px rgba(0,0,0,0.1)',
+          transition: 'all 0.2s ease',
+          cursor: 'pointer',
+          transform: isHovered ? 'translateY(-2px)' : 'translateY(0px)',
+          flex: currentLayout === 'NONE' ? '0 0 auto' : 1,
+          minWidth: currentLayout === 'NONE' ? '280px' : 'auto',
+          width: currentLayout === 'NONE' ? '280px' : '100%'
+        }}
+        onMouseOver={() => setIsHovered(true)}
+        onMouseOut={() => setIsHovered(false)}
+      >
+        <div 
+          style={{ 
+            width: '100%', 
+            height: dimensions.videoHeight,
+            minHeight: dimensions.videoHeight,
+            maxHeight: dimensions.videoHeight,
+            marginBottom: dimensions.videoMarginBottom,
+            flexShrink: 0,
+            overflow: 'hidden',
+            borderRadius: '6px'
+          }}
+        >
+          <VideoComponent
+            videoData={{
+              url: item.attr.url,
+              type: item.attr.playerType,
+              controls: item.attr.controls,
+              loop: item.attr.loop,
+              alt: item.attr.alt,
+              autoplay: item.attr.autoplay !== false,
+              muted: item.attr.muted !== false
+            }}
+            borderRadius={6}
+            height="100%"
+          />
+        </div>
+        {showTitle && (
+          <div style={{ 
+            textAlign: 'center', 
+            fontSize: props.titleStyle ? `${props.titleStyle.fontSize}px` : (large ? '16px' : '14px'), 
+            fontWeight: props.titleStyle?.isBold ? 'bold' : (large ? 600 : 500), 
+            color: props.titleStyle?.fontColor || '#333', 
+            fontStyle: props.titleStyle?.isItalic ? 'italic' : 'normal',
+            textDecoration: props.titleStyle?.isUnderline ? 'underline' : 'none',
+            lineHeight: '1.4', 
+            height: dimensions.titleHeight,
+            minHeight: dimensions.titleHeight,
+            marginBottom: dimensions.titleMarginBottom,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+            {item.title || ''}
+          </div>
+        )}
+        {showSubtitle && (
+          <div style={{ 
+            textAlign: 'center', 
+            fontSize: props.subtitleStyle ? `${props.subtitleStyle.fontSize}px` : (large ? '14px' : '12px'), 
+            fontWeight: props.subtitleStyle?.isBold ? 'bold' : 400, 
+            color: props.subtitleStyle?.fontColor || '#666', 
+            fontStyle: props.subtitleStyle?.isItalic ? 'italic' : 'normal',
+            textDecoration: props.subtitleStyle?.isUnderline ? 'underline' : 'none',
+            lineHeight: '1.3',
+            height: dimensions.subtitleHeight,
+            minHeight: dimensions.subtitleHeight,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+            {item.subTitle || ''}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <style>{`
+        .groupVideoCarousel::-webkit-scrollbar {
+          height: 8px;
+          width: 8px;
+        }
+        .groupVideoCarousel::-webkit-scrollbar-track {
+          background: transparent;
+          border-radius: 4px;
+        }
+        .groupVideoCarousel::-webkit-scrollbar-thumb {
+          background: #c1c1c1;
+          border-radius: 4px;
+        }
+        .groupVideoCarousel::-webkit-scrollbar-thumb:hover {
+          background: #a1a1a1;
+        }
+      `}</style>
+      <div
+        style={{
+          border: '1px solid #e1e1e1',
+          width: '100%',
+          maxWidth: '100%',
+          borderRadius: '0px',
+          height: boxHeight || 'auto',
+          minHeight: boxHeight ? boxHeight : '100px',
+          position: 'relative',
+          overflow: 'hidden',
+          marginBottom: '20px',
+          marginTop: '0px',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+        className='GroupVideoListComponent'
+      >
+      {showHeader && (
+        <div
+          className="groupVideoHeader"
+          style={{
+            backgroundColor: props.headerBackground,
+            padding: '12px 16px',
+            borderRadius: '0px',
+            marginBottom: '4px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+            gap: '12px',
+          }}
+        >
+          <p style={{
+            color: props.headerTextStyle.fontColor,
+            fontSize: `${props.headerTextStyle.fontSize}px`,
+            fontWeight: props.headerTextStyle.isBold ? 'bold' : 'normal',
+            fontStyle: props.headerTextStyle.isItalic ? 'italic' : 'normal',
+            textDecoration: props.headerTextStyle.isUnderline ? 'underline' : 'none',
+            margin: 0
+          }}>
+            {props.headerText || 'Video List'}
+          </p>
+
+          {currentLayout === 'NONE' && isHorizontalScroll && videos.length > 1 && (
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <button
+                onClick={scrollLeft}
+                style={{
+                  width: '32px',
+                  height: '32px',
+                  borderRadius: '50%',
+                  border: '1px solid #ddd',
+                  backgroundColor: '#fff',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '16px',
+                  fontWeight: 'bold'
+                }}
+                onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
+                onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
+              >
+                ‹
+              </button>
+              <button
+                onClick={scrollRight}
+                style={{
+                  width: '32px',
+                  height: '32px',
+                  borderRadius: '50%',
+                  border: '1px solid #ddd',
+                  backgroundColor: '#fff',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '16px',
+                  fontWeight: 'bold'
+                }}
+                onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
+                onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
+              >
+                ›
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div
+        style={{
+          display: currentLayout === 'NONE' ? 'flex' : 'block',
+          overflowX: currentLayout === 'NONE' ? (isHorizontalScroll ? 'auto' : 'hidden') : 'visible',
+          overflowY: currentLayout === 'NONE' ? 'hidden' : (boxHeight ? 'auto' : 'visible'),
+          gap: currentLayout === 'NONE' ? '12px' : '0',
+          padding: '12px',
+          scrollBehavior: 'smooth',
+          backgroundColor: props.carouselBackground || '#fff',
+          scrollbarWidth: 'thin',
+          borderRadius: '8px',
+          position: 'relative',
+          scrollbarColor: '#c1c1c1 transparent',
+          flex: 1,
+          minHeight: 0,
+          height: boxHeight ? `calc(${boxHeight} - ${showHeader ? '60px' : '0px'})` : 'auto'
+        }}
+        className="groupVideoCarousel"
+      >
+        {/* Navigation buttons - positioned like carousel */}
+        {!showHeader && currentLayout === 'NONE' && isHorizontalScroll && videos.length > 1 && (
+          <>
+            <button
+              onClick={scrollLeft}
+              style={{
+                position: 'absolute',
+                left: '10px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                background: 'rgba(0,0,0,0.5)',
+                color: 'white',
+                border: 'none',
+                borderRadius: '50%',
+                width: '40px',
+                height: '40px',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '18px',
+                zIndex: 10,
+                transition: 'all 0.2s ease'
+              }}
+              onMouseOver={(e) => { 
+                e.currentTarget.style.background = 'rgba(0,0,0,0.7)';
+                e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
+              }}
+              onMouseOut={(e) => { 
+                e.currentTarget.style.background = 'rgba(0,0,0,0.5)';
+                e.currentTarget.style.transform = 'translateY(-50%) scale(1)';
+              }}
+            >
+              ‹
+            </button>
+            <button
+              onClick={scrollRight}
+              style={{
+                position: 'absolute',
+                right: '10px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                background: 'rgba(0,0,0,0.5)',
+                color: 'white',
+                border: 'none',
+                borderRadius: '50%',
+                width: '40px',
+                height: '40px',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '18px',
+                zIndex: 10,
+                transition: 'all 0.2s ease'
+              }}
+              onMouseOver={(e) => { 
+                e.currentTarget.style.background = 'rgba(0,0,0,0.7)';
+                e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
+              }}
+              onMouseOut={(e) => { 
+                e.currentTarget.style.background = 'rgba(0,0,0,0.5)';
+                e.currentTarget.style.transform = 'translateY(-50%) scale(1)';
+              }}
+            >
+              ›
+            </button>
+          </>
+        )}
+        {videos.length > 0 ? (
+          currentLayout === 'NONE' ? (
+            videos.map((video) => (
+              <div key={video.id} style={{ minWidth: '280px', width: '280px', height: '100%', display: 'flex', alignItems: 'stretch' }}>
+                <VideoCard item={video} />
+              </div>
+            ))
+          ) : currentLayout === 'SMALL' ? (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px', padding: '8px' }}>
+              {videos.map((video) => (
+                <VideoCard key={video.id} item={video} />
+              ))}
+            </div>
+          ) : currentLayout === 'MEDIUM' ? (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', padding: '8px' }}>
+              {videos.map((video) => (
+                <VideoCard key={video.id} item={video} />
+              ))}
+            </div>
+          ) : currentLayout === 'MEDIUM_THREE' ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
+              {videos.length > 0 && (
+                <VideoCard item={videos[0]} large />
+              )}
+              {videos.length > 1 && (
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+                  {videos.slice(1).map((video) => (
+                    <VideoCard key={video.id} item={video} />
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : null
+        ) : (
+          <div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
+            <p>No videos available.</p>
+          </div>
+        )}
+      </div>
+    </div>
+    </>
+  );
+};
+
 export default GroupVideoList;