@hellobetterdigitalnz/selwynui 0.0.1-50 → 0.0.1-51

package/src/Components/DataDisplay/ContactsBlock/contactsBlock.module.scss

@@ -37,12 +37,15 @@
                         font-size: var(--font-size-h6);
                         font-weight: var(--font-weight-bold);
                         line-height: var(--line-height-h6);
+                        letter-spacing: -0.56px;
+
                     }
 
                     h2 {
                         font-size: var(--font-size-h6);
                         font-weight: var(--font-weight-h4);
                         line-height: var(--line-height-h6);
+                        letter-spacing: -0.56px;
                     }
                 }
 
@@ -113,11 +116,13 @@
                     }
 
                     .contactMiddleContent {
-                        padding-block: 24px;
+                        padding-block: 58px;
 
                         p {
                             font-size: var(--font-size-small);
                             font-weight: var(--font-weight-h4);
+                            letter-spacing: -0.48px;
+                            text-decoration: underline;
                         }
                     }
 

package/src/Components/DataDisplay/DetailsCard/DetailsCard.tsx

@@ -11,11 +11,13 @@ const DetailsCard = (props: DetailsCardProps) => {
       image = '',
       variation= 'long',
       link = {},
+      pillar = 'visit'
     } = props;
 
     const classes = [
         styles.detailsCard,
-        "detailsCard",  
+        "detailsCard",
+        `${pillar}`
     ];
     
     if(variation==='short') {

package/src/Components/DataDisplay/Media/Media.stories.tsx

@@ -21,17 +21,11 @@ const PathwayBlockTemplate: Story = {
   render: () => {
 
     const mediaProps = {
-      imageSrc: "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=1200&h=675&fit=crop",
+      thumbnail: "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=1200&h=675&fit=crop",
       videoSrc: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
     };
 
-    return (
-      <>
-        <ElementHolder pillar="taste">
-         <Media {...mediaProps} />
-        </ElementHolder>
-      </>
-    )
+    return <Media pillar={'visit'}  {...mediaProps} />
   }
 }
 

package/src/Components/DataDisplay/Media/Media.tsx

@@ -1,57 +1,92 @@
 import MediaProps from "./MediaProps.tsx";
-import {useEffect, useRef} from "react";
+import { useEffect, useRef } from "react";
 import videojs from "video.js";
-import 'video.js/dist/video-js.css';
-import './media.scss'
-
-const Media = (props : MediaProps) => {
-
-  const {imageSrc , videoSrc, thumbnail} = props
+import "video.js/dist/video-js.css";
+import styles from "./media.module.scss";
+import  './mediaVideo.scss'
 
+const Media = ({ imageSrc, videoSrc, thumbnail, pillar }: MediaProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const playerRef = useRef<any>(null);
 
   useEffect(() => {
-    if (!playerRef.current && videoRef.current) {
-      const videoElement = videoRef.current;
 
-      playerRef.current = videojs(videoElement, {
+    if (imageSrc) {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = null;
+      }
+      return;
+    }
+
+    // Init video player only if NO imageSrc
+    if (!playerRef.current && videoRef.current) {
+      playerRef.current = videojs(videoRef.current, {
         controls: true,
         responsive: true,
         fluid: true,
-        preload: 'metadata',
+        preload: "metadata",
         playbackRates: [0.5, 1, 1.5, 2],
         poster: thumbnail,
         controlBar: {
-          volumePanel: {
-            inline: true
-          }
+          volumePanel: { inline: true },
+          playToggle: true,
+          currentTimeDisplay: true,
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          progressControl: true,
+          fullscreenToggle: true,
+          playbackRateMenuButton: true,
+        },
+      });
+
+      // Add custom SVG icon to big play button
+      playerRef.current.ready(() => {
+        const bigPlayButton = playerRef.current.el().querySelector('.vjs-big-play-button');
+        if (bigPlayButton) {
+          bigPlayButton.innerHTML = `
+           <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+            <path d="M13.5 7.47751V40.5225C13.5049 40.7862 13.5792 41.0439 13.7155 41.2698C13.8518 41.4956 14.0452 41.6814 14.2762 41.8086C14.5073 41.9358 14.7678 41.9999 15.0314 41.9943C15.2951 41.9887 15.5527 41.9137 15.7781 41.7769L42.7931 25.2544C43.0089 25.1238 43.1874 24.9397 43.3112 24.72C43.4351 24.5002 43.5001 24.2523 43.5001 24C43.5001 23.7478 43.4351 23.4998 43.3112 23.2801C43.1874 23.0603 43.0089 22.8762 42.7931 22.7456L15.7781 6.22314C15.5527 6.08628 15.2951 6.01128 15.0314 6.00571C14.7678 6.00013 14.5073 6.06418 14.2762 6.19139C14.0452 6.3186 13.8518 6.50448 13.7155 6.73028C13.5792 6.95608 13.5049 7.21382 13.5 7.47751Z" fill="currentColor"/>
+          </svg>
+          `;
         }
       });
     }
 
+
+    if (playerRef.current && videoSrc) {
+      playerRef.current.src({ src: videoSrc, type: "video/mp4" });
+    }
+
+    // Cleanup on unmount
     return () => {
       if (playerRef.current) {
         playerRef.current.dispose();
         playerRef.current = null;
       }
     };
-  }, [imageSrc]);
-
-  return <div className="video-container">
-  <div className="video-wrapper">
-    <div data-vjs-player>
-      <video
-        ref={videoRef}
-        className="video-js vjs-big-play-centered"
-        playsInline
-      >
-        <source src={videoSrc} type="video/mp4" />
-      </video>
-    </div>
-  </div>
-</div>
+  }, [imageSrc, videoSrc, thumbnail]);
 
-}
+  return <div className={`${pillar}`}>
+    {imageSrc ? (
+      <div className={styles.media}>
+        <div className={`${styles.imgWrapper}`}>
+          <img src={imageSrc} alt="" className="media-image" />
+        </div>
+      </div>
+    ) : (
+      <div className="video-container">
+        <div data-vjs-player>
+          <video
+            ref={videoRef}
+            className="video-js vjs-big-play-centered"
+            playsInline
+          />
+        </div>
+      </div>
+    )}
+  </div>
+};
 
-export default Media;
+export default Media;

package/src/Components/DataDisplay/Media/MediaProps.tsx

@@ -2,6 +2,7 @@ interface MediaProps {
   imageSrc?: string
   videoSrc?: string
   thumbnail?:string
+  pillar?: 'live' | 'visit' | 'taste' | 'business' | 'participate'
 }
 
 export default MediaProps

package/src/Components/DataDisplay/Media/media.module.scss

@@ -0,0 +1,16 @@
+.media {
+  .imgWrapper {
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%;
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}

package/src/Components/DataDisplay/Media/{media.scss → mediaVideo.scss}

@@ -1,10 +1,16 @@
+
+
 .video-container{
   .vjs-big-play-button{
     background: var(--color-block-bg) !important;
+    color: var(--color-block-text);
     height: 114px;
     width: 114px;
     border-radius: 100%;
     border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .vjs_video_4320-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {

package/src/Components/Layout/Header/Header.stories.tsx

@@ -61,9 +61,9 @@ const HeaderTemplate: Story = {
         <HeaderRightItem extraClass={'desktop-item'}>
           <MagnifyingGlass/>
         </HeaderRightItem>
-        <HeaderRightItem extraClass={'mobile-item'}>
-          <List/>
-        </HeaderRightItem>
+        {/*<HeaderRightItem extraClass={'mobile-item'}>*/}
+        {/*  <List/>*/}
+        {/*</HeaderRightItem>*/}
       </HeaderRight>
       {/*<MobileNavigation>*/}
       {/*  <li>*/}

package/src/Components/Layout/Header/header.module.scss

@@ -11,6 +11,7 @@
     align-items: flex-end;
     justify-content: space-between;
     min-height: 60px;
+    width: 100%;
   }
 
   .headerLogo{
@@ -33,11 +34,9 @@
   .headerRightWrapper{
     display: flex;
     align-items: center;
-    margin: 0 -12px;
   }
 
   .headerBottomItemHolder{
-    padding: 0 12px 12px 12px;
     transition: all 0.3s ease-in;
 
     a{
@@ -48,6 +47,7 @@
       font-weight: 400;
       line-height: 1.5;
       cursor: pointer;
+      letter-spacing: -0.96px;
 
       .icon{
         display: flex;
@@ -96,19 +96,6 @@
   }
 
 
-  @media screen and (min-width: 1648px) {
-
-    .headerRightWrapper{
-      display: flex;
-      align-items: center;
-      margin: 0 -28px;
-    }
-
-    .headerBottomItemHolder {
-      padding: 0 28px 30px 28px;
-    }
-  }
-
 
   @media screen and (min-width: 992px) {
 
@@ -125,9 +112,15 @@
       }
 
 
-    .headerBottomItemHolder {
-      padding-bottom:30px ;
-    }
+      .headerRightWrapper{
+        display: flex;
+        align-items: center;
+      }
+
+      .headerBottomItemHolder {
+        padding-bottom: 30px;
+        padding-left: 60px;
+      }
 
   }