tee3apps-cms-sdk-react 0.0.32 → 0.0.34

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

@@ -5,12 +5,12 @@ interface VideoItem {
   id: number;
   attr: {
     playerType: 'Video' | 'Youtube' | 'Vimeo' | 'Dailymotion';
-      controls?: boolean;
-      loop?: boolean;
-      alt?: string;
-      url: string;
-      autoplay?: boolean;
-      muted?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    alt?: string;
+    url: string;
+    autoplay?: boolean;
+    muted?: boolean;
   };
   title: string;
   subTitle: string;
@@ -111,7 +111,7 @@ const extractYouTubeId = (url: string): string | null => {
         return parsed.pathname.split('/embed/')[1] || null;
       }
     }
-  } catch {}
+  } catch { }
   return null;
 };
 
@@ -127,7 +127,7 @@ const extractVimeoId = (url: string): string | null => {
       const parts = parsed.pathname.split('/').filter(Boolean);
       return parts[1] || null;
     }
-  } catch {}
+  } catch { }
   return null;
 };
 
@@ -141,7 +141,7 @@ const extractDailymotionId = (url: string): string | null => {
     if (parsed.hostname.includes('dai.ly')) {
       return parsed.pathname.replace('/', '') || null;
     }
-  } catch {}
+  } catch { }
   return null;
 };
 
@@ -271,13 +271,13 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
   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 
+  const showTitle = typeof props.showTitle === 'boolean'
+    ? props.showTitle
     : getCurrentBooleanProp(props.showTitle as DeviceBooleanProps | undefined);
-  const showSubtitle = typeof props.showSubtitle === 'boolean' 
-    ? props.showSubtitle 
+  const showSubtitle = typeof props.showSubtitle === 'boolean'
+    ? props.showSubtitle
     : getCurrentBooleanProp(props.showSubtitle as DeviceBooleanProps | undefined);
 
   const getVideos = (): VideoItem[] => {
@@ -297,7 +297,7 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
     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;
@@ -311,18 +311,18 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
         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`,
@@ -351,7 +351,7 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
   const VideoCard = ({ item, large = false }: { item: VideoItem; large?: boolean }) => {
     const [isHovered, setIsHovered] = useState(false);
     const dimensions = calculateCardDimensions(large);
-    
+
     return (
       <div
         className="videoCard"
@@ -375,9 +375,9 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
         onMouseOver={() => setIsHovered(true)}
         onMouseOut={() => setIsHovered(false)}
       >
-        <div 
-          style={{ 
-            width: '100%', 
+        <div
+          style={{
+            width: '100%',
             height: dimensions.videoHeight,
             minHeight: dimensions.videoHeight,
             maxHeight: dimensions.videoHeight,
@@ -402,14 +402,14 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
           />
         </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', 
+          <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', 
+            lineHeight: '1.4',
             height: dimensions.titleHeight,
             minHeight: dimensions.titleHeight,
             marginBottom: dimensions.titleMarginBottom,
@@ -425,11 +425,11 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
           </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', 
+          <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',
@@ -454,19 +454,11 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
     <>
       <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;
+          display: none;
         }
-        .groupVideoCarousel::-webkit-scrollbar-thumb:hover {
-          background: #a1a1a1;
+        .groupVideoCarousel {
+          scrollbar-width: none;
+          -ms-overflow-style: none;
         }
       `}</style>
       <div
@@ -486,207 +478,207 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
         }}
         className='GroupVideoListComponent'
       >
-      {showHeader && (
+        {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
-          className="groupVideoHeader"
           style={{
-            backgroundColor: props.headerBackground,
-            padding: '12px 16px',
-            borderRadius: '0px',
-            marginBottom: '4px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            flexWrap: 'wrap',
-            gap: '12px',
+            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"
         >
-          <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' }}>
+          {/* Navigation buttons - positioned like carousel */}
+          {!showHeader && currentLayout === 'NONE' && isHorizontalScroll && videos.length > 1 && (
+            <>
               <button
                 onClick={scrollLeft}
                 style={{
-                  width: '32px',
-                  height: '32px',
+                  position: 'absolute',
+                  left: '10px',
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  background: 'rgba(0,0,0,0.5)',
+                  color: 'white',
+                  border: 'none',
                   borderRadius: '50%',
-                  border: '1px solid #ddd',
-                  backgroundColor: '#fff',
+                  width: '40px',
+                  height: '40px',
                   cursor: 'pointer',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  fontSize: '16px',
-                  fontWeight: 'bold'
+                  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)';
                 }}
-                onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
-                onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
               >
                 ‹
               </button>
               <button
                 onClick={scrollRight}
                 style={{
-                  width: '32px',
-                  height: '32px',
+                  position: 'absolute',
+                  right: '10px',
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  background: 'rgba(0,0,0,0.5)',
+                  color: 'white',
+                  border: 'none',
                   borderRadius: '50%',
-                  border: '1px solid #ddd',
-                  backgroundColor: '#fff',
+                  width: '40px',
+                  height: '40px',
                   cursor: 'pointer',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  fontSize: '16px',
-                  fontWeight: 'bold'
+                  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)';
                 }}
-                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} />
-                  ))}
+          {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>
-          ) : 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>
-    </div>
     </>
   );
 };

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

@@ -129,11 +129,11 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
   const link = bannerLink(props);
   
   // Use nullish coalescing to safely access image properties
-  const imageUrl = `${Linodeurl}${props.images?.url ?? props.images?.all?.url ?? ''}`;
-  const altText = props.images?.alt ?? props.images?.all?.alt ?? '';
+  const imageUrl = `${Linodeurl}${props.images?.url}`;
+  const altText = props.images?.alt ?? '';
 
   // Don't render if no image URL is available
-  if (!props.images || (!props.images?.url && !props.images?.all?.url)) {
+  if (!props.images || (!props.images?.url)) {
     return (
       <div
         className="image-box"