@bytebrand/fe-ui-core 4.2.213 → 4.2.214

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.213",
+  "version": "4.2.214",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.styl

@@ -100,3 +100,11 @@
 
 .blurred
   filter: blur(3px)
+
+.frame 
+  aspect-ratio:4/3     
+  height: auto;
+  border-radius: 10px;
+  display: block;
+  border: none;
+

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -34,6 +34,7 @@ interface IProps {
   powerKW: number;
   powerPS: number;
   financingConfig:any;
+  youtubeId:string;
   showModal?: (id: string, props?: any) => void;
   hideModal: (id: string) => void;
   onCarFavorite: (event: MouseEvent<HTMLElement>) => void;
@@ -78,6 +79,7 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
 
   handleSetFirstSlide = () => {
     this.slider.slickGoTo(0);
+
   };
 
   componentDidUpdate(prevProps: IProps) {
@@ -113,7 +115,7 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
   };
 
   getImages = () => {
-    const { photos, mainImageUrl, mainImageBlur } = this.props;
+    const { photos, mainImageUrl, mainImageBlur, youtubeId } = this.props;
     const { activeSlide, largeLoaded, smallLoaded, largeLoaded1, largeLoaded01 } = this.state;
 
     const imageProps = {
@@ -123,6 +125,7 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       className: styles.image,
       withLoader: false
     };
+
     if (Array.isArray(photos) && photos.length > 0 && largeLoaded && smallLoaded && largeLoaded1 && largeLoaded01) {
       let isMouseDown = false;
       let isDragging = false;
@@ -151,7 +154,6 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       const currentSlide = activeSlide;
       const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
       const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
-
       return photos.map((item: IImage, index: number) => {
         const showImage = index === currentSlide || index === prevSlide || index === nextSlide || this.imagesCache[index] !== undefined;
         const imageUrlSmall = _get(item, 'imageUrlSmall', null);
@@ -169,7 +171,7 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
             onMouseMove={handleMouseMove}
             onMouseUp={handleMouseUp}
           >
-            {showImage && (
+            {showImage && !item.videoUrl && (
               <MagnifyGlassImage
                 src={index !== 0 ? imageUrlLarge : null}
                 srcSmall={index === 0 ? imageUrlSmall : null}
@@ -177,50 +179,61 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
                 {...imageProps}
               />
             )}
+             {showImage && item.videoUrl && (
+               <iframe
+               width='100%'
+               height='441'
+               src={`https://www.youtube.com/embed/${item.videoUrl}?&enablejsapi=1&&rel=0&showinfo=0&html5=1`}
+               title='YouTube Video'
+               className={styles.frame}
+             ></iframe>
+            )}
           </div>
         );
       });
     }
-
     if (mainImageUrl) {
-      const imagesCount = Array.isArray(photos) && photos.length > 0 ? photos.length : 0;
+      const imagesCount = Array.isArray(photos) && photos.length > 0 ? photos.length  : 0;
       const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
       const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
       return (
-        // preload cached photos from props
-        <div className={classnames(styles.photo, { [styles.blurred]: (mainImageBlur && mainImageUrl !== PLACEHOLDER_IMAGE_SMALL_URL) })} key={mainImageUrl}>
-          {(!largeLoaded || !smallLoaded || !largeLoaded1 || !largeLoaded01) && <Image src={mainImageUrl} {...imageProps} /> }
-
-          { Array.isArray(photos) && photos.length > 0 && <Image
-            style={ { display: 'none' } }
-            src={ photos[activeSlide].imageUrlSmall }
-            onLoad={ () => this.setState({ smallLoaded: true }) }
-            {...imageProps}
-            />
-          }
-          { Array.isArray(photos) && photos.length > 0 && <Image
-            style={ { display: 'none' } }
-            src={ photos[activeSlide].imageUrlLarge }
-            onLoad={ () => this.setState({ largeLoaded: true }) }
-            {...imageProps}
-            />
-          }
-          { Array.isArray(photos) && photos.length > 0 && <Image
-            style={ { display: 'none' } }
-            src={ photos[nextSlide].imageUrlLarge }
-            onLoad={ () => this.setState({ largeLoaded1: true }) }
-            {...imageProps}
-            />
-          }
-          { Array.isArray(photos) && photos.length > 0 && <Image
-            style={ { display: 'none' } }
-            src={ photos[prevSlide].imageUrlLarge }
-            onLoad={ () => this.setState({ largeLoaded01: true }) }
-            {...imageProps}
-            />
-          }
-        </div>
+          // preload cached photos from props
+
+          <div className={classnames(styles.photo, { [styles.blurred]: (mainImageBlur && mainImageUrl !== PLACEHOLDER_IMAGE_SMALL_URL) })} key={mainImageUrl}>
+            {(!largeLoaded || !smallLoaded || !largeLoaded1 || !largeLoaded01) && <Image src={mainImageUrl} {...imageProps} /> }
+
+            { Array.isArray(photos) && photos.length > 0 &&  <Image
+              style={ { display: 'none' } }
+              src={ photos[activeSlide]?.imageUrlSmall }
+              onLoad={ () => this.setState({ smallLoaded: true }) }
+              {...imageProps}
+              />
+            }
+            { Array.isArray(photos) && photos.length > 0  && <Image
+              style={ { display: 'none' } }
+              src={ photos[activeSlide]?.imageUrlLarge }
+              onLoad={ () => this.setState({ largeLoaded: true }) }
+              {...imageProps}
+              />
+            }
+
+            { Array.isArray(photos) && photos.length > 0  && <Image
+              style={ { display: 'none' } }
+              src={ photos[nextSlide]?.imageUrlLarge }
+              onLoad={ () => this.setState({ largeLoaded1: true }) }
+              {...imageProps}
+              />
+            }
+            { Array.isArray(photos) && photos.length > 0  && <Image
+              style={ { display: 'none' } }
+              src={ photos[prevSlide]?.imageUrlLarge }
+              onLoad={ () => this.setState({ largeLoaded01: true }) }
+              {...imageProps}
+              />
+            }
+          </div>
       );
+
     }
 
     return (
@@ -249,7 +262,6 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       onCarFavorite
     } = this.props;
     const { activeSlide } = this.state;
-
     const sliderProps = {
       autoPlay: false,
       speed: 300,
@@ -293,11 +305,13 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
           <Title {...{ t, make, model, subModel, powerKW, powerPS, onCarFavorite, isFavorite }}/>
         }
         <div className={styles.slider}>
-          <PriceData {...priceProps}/>
+          {!photos[activeSlide]?.videoUrl && <PriceData {...priceProps}/>}
           <Slider ref={slider => (this.slider = slider)} {...sliderProps}>
             {this.getImages()}
           </Slider>
-          {isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps}/>}
+          {!photos[activeSlide]?.videoUrl ? (
+             isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps} />
+            ) : null}
         </div>
       </div>
     );

package/source/framework/types/types.ts

@@ -32,6 +32,7 @@ export interface IImage {
   isSimpleTemp: boolean;
   isInProcessing: boolean;
   isTemp: boolean;
+  videoUrl:string;          // youtube link that can be used in src in youtube video,
 }
 
 export interface IPrice {