tee3apps-cms-sdk-react 0.0.1

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

@@ -0,0 +1,590 @@
+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>
+  );
+};
+
+export default GroupVideoList;