@codesinger0/shared-components 1.1.65 → 1.1.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/components/Hero.jsx
CHANGED
|
@@ -7,6 +7,8 @@ const Hero = ({
|
|
|
7
7
|
// Media props
|
|
8
8
|
mediaType = 'image', // 'video' or 'image'
|
|
9
9
|
videoId = '', // YouTube video ID
|
|
10
|
+
useYoutube = true, // Use YouTube or direct video
|
|
11
|
+
videoUrl = '', // Direct video URL (when useYoutube is false)
|
|
10
12
|
imageUrl = '', // Image URL for static background
|
|
11
13
|
mediaHeight = '70vh', // Height of the media section
|
|
12
14
|
|
|
@@ -53,7 +55,11 @@ const Hero = ({
|
|
|
53
55
|
{/* Media Background Container */}
|
|
54
56
|
<div className="absolute inset-0 w-full h-full" aria-hidden="true">
|
|
55
57
|
{mediaType === 'video' ? (
|
|
56
|
-
<FixedWidthHeroVideo
|
|
58
|
+
<FixedWidthHeroVideo
|
|
59
|
+
useYoutube={useYoutube}
|
|
60
|
+
youtubeVideoId={videoId}
|
|
61
|
+
videoUrl={videoUrl}
|
|
62
|
+
/>
|
|
57
63
|
) : (
|
|
58
64
|
<div
|
|
59
65
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
2
|
|
|
3
|
-
const FixedWidthHeroVideo = ({
|
|
3
|
+
const FixedWidthHeroVideo = ({
|
|
4
|
+
youtubeVideoId = "dQw4w9WgXcQ",
|
|
5
|
+
useYoutube = false,
|
|
6
|
+
videoUrl = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
|
|
7
|
+
}) => {
|
|
4
8
|
const [viewportSize, setViewportSize] = useState({ width: 0, height: 0 });
|
|
5
9
|
|
|
6
10
|
useEffect(() => {
|
|
@@ -56,7 +60,7 @@ const FixedWidthHeroVideo = ({ youtubeVideoId = "dQw4w9WgXcQ", useYoutube = fals
|
|
|
56
60
|
loop
|
|
57
61
|
playsInline
|
|
58
62
|
>
|
|
59
|
-
<source src=
|
|
63
|
+
<source src={videoUrl} type="video/mp4" />
|
|
60
64
|
Your browser does not support the video tag.
|
|
61
65
|
</video>
|
|
62
66
|
)}
|
|
@@ -81,6 +85,7 @@ const FixedWidthHeroVideo = ({ youtubeVideoId = "dQw4w9WgXcQ", useYoutube = fals
|
|
|
81
85
|
|
|
82
86
|
// Usage examples:
|
|
83
87
|
// <FixedWidthHeroVideo useYoutube={false} />
|
|
88
|
+
// <FixedWidthHeroVideo useYoutube={false} videoUrl="path/to/your/video.mp4" />
|
|
84
89
|
// <FixedWidthHeroVideo useYoutube={true} youtubeVideoId="dQw4w9WgXcQ" />
|
|
85
90
|
|
|
86
91
|
export default FixedWidthHeroVideo;
|