Skip to content

Commit 0dd95a2

Browse files
gtnardygtnardy
committed
All images are lazy load
Implemented lazy load + autoplay for VideoExternal
1 parent 8883da0 commit 0dd95a2

File tree

5 files changed

+69
-15
lines changed

5 files changed

+69
-15
lines changed

‎src/components/ClassBuilder.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -552,7 +552,7 @@ export const HeaderDeclaration = ({ type, name, image, is_static, open_source_ur
552552
const class_data = GetClassData(type, name);
553553
return (<>
554554
<p dangerouslySetInnerHTML={{ __html: class_data.description }}></p>
555-
{ image ? <><p><img src={image} /></p><hr /></> : "" }
555+
{ image ? <><p><img src={image} loading={"lazy"} /></p><hr /></> : "" }
556556
{ is_static ? <StaticClassAdmonition /> : "" }
557557
{ class_data.authority ? <AuthorityAdmonition authority={class_data.authority} is_static={is_static} /> : "" }
558558
{ class_data.network_distribution ? <NetAuthorityDistributionAdmonition network_distribution={class_data.network_distribution} /> : "" }

‎src/components/EnumDeclaration.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const EnumDeclaration = ({ enum_name, enum_data, is_tooltip }) => (
77
<>
88
{
99
is_tooltip ? <h3>
10-
<img src={"/img/scripting/lua.webp"} title={"Lua"} className={"tooltip-img"} />
10+
<img src={"/img/scripting/lua.webp"} title={"Lua"} className={"tooltip-img"} loading={"lazy"} />
1111
<span className={"tooltip-span"}>
1212
<div>{enum_name}</div>
1313
<div className={"tooltip-sub"}>Enum (integer)</div>

‎src/components/Tooltips.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { GetFunctionSignature, GetStaticFunctionSignature, GetEventSignature, Ge
88
export const AuthorityTooltip = ({ img, title, subtitle, description }) => (
99
<>
1010
<h3 className={"tooltip-header"}>
11-
<img src={img} title={title} className={"tooltip-img"} />
11+
<img src={img} title={title} className={"tooltip-img"} loading={"lazy"} />
1212
<span className={"tooltip-span"}>
1313
<div>{title}</div>
1414
<div className={"tooltip-sub"}>{subtitle}</div>

‎src/components/Utils.jsx‎

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,71 @@
11
import { useActiveVersion } from '@docusaurus/plugin-content-docs/client';
22
import { Link } from "react-router-dom";
33
import ThemedImage from '@theme/ThemedImage'
4+
import { useRef, useEffect, useState } from 'react';
45

56
export const GetExternalPath = () => {
67
return process.env.NODE_ENV === 'development' ? "" : "https://github.com/nanos-world/docs/raw/master/external";
78
}
89

9-
// External Video from Github
10-
export const VideoExternal = ({ path, noplay, controls = true, className, style }) => (
11-
<video key={path} controls={controls} allowFullScreen={true} preload={"none"} autoPlay={!noplay} loop={!noplay} muted={!noplay} className={className} style={style}>
12-
<source src={`${ GetExternalPath() }/videos${ path }`} />
13-
</video>
14-
)
10+
// External Video from Github (with lazy load)
11+
export const VideoExternal = ({ path, noplay, controls = true, className, style }) => {
12+
const videoRef = useRef(null);
13+
const [isVisible, setIsVisible] = useState(false);
14+
const src = `${ GetExternalPath() }/videos${ path }`;
15+
16+
useEffect(() => {
17+
// Create an Intersection Observer
18+
const observer = new IntersectionObserver(
19+
([entry]) => {
20+
// If the video is intersecting with the viewport
21+
if (entry.isIntersecting) {
22+
setIsVisible(true);
23+
observer.disconnect(); // Stop observing once visible
24+
}
25+
},
26+
{
27+
root: null, // observe against the viewport
28+
rootMargin: '0px',
29+
threshold: 0.1, // trigger when 10% of the video is visible
30+
}
31+
);
32+
33+
if (videoRef.current) {
34+
observer.observe(videoRef.current);
35+
}
36+
37+
// Cleanup function
38+
return () => {
39+
if (videoRef.current && observer) {
40+
observer.unobserve(videoRef.current);
41+
}
42+
};
43+
}, []);
44+
45+
useEffect(() => {
46+
if (isVisible && videoRef.current) {
47+
// Set the source and load the video
48+
videoRef.current.src = src;
49+
videoRef.current.play();
50+
}
51+
}, [isVisible, src]);
52+
53+
return (
54+
<video
55+
ref={videoRef}
56+
loop={!noplay}
57+
autoPlay={!noplay}
58+
muted={!noplay}
59+
className={className}
60+
style={style}
61+
controls={controls}
62+
allowFullScreen={true}
63+
playsInline
64+
>
65+
Your browser does not support the video tag.
66+
</video>
67+
);
68+
};
1569

1670
// External Image from Github
1771
export const ImageExternal = ({ path, className }) => (
@@ -42,7 +96,7 @@ export const getActiveVersionPath = () => {
4296

4397
// Function to convert PascalCase string to kebab-case
4498
export const getKebabFromPascal = (str) => {
45-
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
99+
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
46100
};
47101

48102
// Getter to get the current version path - for links

‎src/components/_nanos.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import APIData from '@site/src/components/APIData.jsx';
1414
// Square Card Link
1515
export const CardLink = ({ title, description, href, image_src, is_lean }) => (
1616
<a className={`card-link ${is_lean ? "card-link-lean" : ""}`} href={href.startsWith("http") ? href : `${getActiveVersionPath()}/${href}`} target="_blank">
17-
<img src={image_src ? image_src : '/img/docs/nanos-world-background.webp'} />
17+
<img src={image_src ? image_src : '/img/docs/nanos-world-background.webp'} loading={"lazy"} />
1818
<h4>{title}</h4>
1919
<p>{description}</p>
2020
</a>
@@ -35,7 +35,7 @@ export const ReferenceLink = ({ children, href }) => (
3535
export const BaseNative = (img, title, description) => (
3636
<Tippy maxWidth={400} animation={"scale-subtle"} placement={"left"} content={<AuthorityTooltip img={img} title={title} description={description} subtitle={"Nativity"} />}>
3737
<span className="native-type">
38-
<img src={img} title={title} />
38+
<img src={img} title={title} loading={"lazy"} />
3939
</span>
4040
</Tippy>
4141
);
@@ -44,7 +44,7 @@ export const BaseNative = (img, title, description) => (
4444
export const BaseEfficiency = (img, title, description) => (
4545
<Tippy maxWidth={400} animation={"scale-subtle"} placement={"left"} content={<AuthorityTooltip img={img} title={title} description={description} subtitle={"Method Efficiency"} />}>
4646
<span className="efficiency-type">
47-
<img src={img} title={title} />
47+
<img src={img} title={title} loading={"lazy"} />
4848
</span>
4949
</Tippy>
5050
);
@@ -53,7 +53,7 @@ export const BaseEfficiency = (img, title, description) => (
5353
export const BaseAuthority = (img, title, description) => (
5454
<Tippy maxWidth={400} animation={"scale-subtle"} placement={"left"} content={<AuthorityTooltip img={img} title={title} description={description} subtitle={"Authority Side"} />}>
5555
<Link className="authority-availability" to={`${getActiveVersionPath()}/core-concepts/scripting/authority-concepts#methods-and-events-availability`}>
56-
<img src={img} title={title} />
56+
<img src={img} title={title} loading={"lazy"} />
5757
</Link>
5858
</Tippy>
5959
);
@@ -63,7 +63,7 @@ export const BaseBasicType = (label, description) => (
6363
<Tippy interactive={true} maxWidth={400} animation={"scale-subtle"} placement={"left"} content={
6464
<>
6565
<h3 className={"tooltip-header"}>
66-
<img src={"/img/scripting/lua.webp"} title={"Lua"} className={"tooltip-img"} />
66+
<img src={"/img/scripting/lua.webp"} title={"Lua"} className={"tooltip-img"} loading={"lazy"} />
6767
<span className={"tooltip-span"}>
6868
<div>{label}</div>
6969
<div className={"tooltip-sub"}>Basic Type</div>

0 commit comments

Comments
 (0)