Skip to content

Commit ab8b83f

Browse files
meta-network-teammeta-network-team
authored
Merge pull request #12 from Meta-Network/remi/dev
feat: new home layout
2 parents c0c70f3 + ffbb622 commit ab8b83f

File tree

15 files changed

+259
-162
lines changed

15 files changed

+259
-162
lines changed

‎packages/meta-network-home/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
gThis is a starter template for [Learn Next.js](https://nextjs.org/learn).
1+
This is a starter template for [Learn Next.js](https://nextjs.org/learn).

‎packages/meta-network-home/components/ButtonToIndex.module.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
.buttonToIndex {
2-
margin-left: 2vw;
3-
vertical-align: middle;
42
min-width: 9vw;
53
min-height: 2.8vw;
64
font-size: 1vw;

‎packages/meta-network-home/components/ButtonToIndex.js‎ renamed to ‎packages/meta-network-home/components/ButtonToIndex.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1+
import React from 'react';
12
import styles from './ButtonToIndex.module.css';
23

34
export default () => {
45
return (
5-
<a href="https://www.metanetwork.online/" target="__blank">
6+
<a
7+
style={{ verticalAlign: 'sub' }}
8+
href="https://www.metanetwork.online/"
9+
target="__blank"
10+
>
611
<button className={styles.buttonToIndex}>
712
<span>抢先占领</span>
813
</button>

‎packages/meta-network-home/components/Footer.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎packages/meta-network-home/components/Footer.module.css‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
1-
.footer {
1+
.footerWrapper {
22
width: 100%;
3+
bottom: 2vw;
34
display: flex;
45
position: fixed;
5-
bottom: 32px;
6+
flex-direction: column;
7+
justify-content: center;
8+
align-items: center;
9+
}
10+
11+
.footerContacts {
12+
display: flex;
13+
margin-bottom: 2vw;
14+
}
15+
16+
.footerBrands {
17+
display: flex;
618
justify-content: center;
719
align-items: center;
820
}
@@ -13,11 +25,13 @@
1325
}
1426

1527
@media only screen and (max-width: 600px) {
16-
.footer {
17-
flex: 1;
18-
flex-wrap: wrap;
28+
.footerWrapper {
1929
margin-top: 20vw;
2030
position: static;
31+
}
32+
.footerBrands {
33+
flex: 1;
34+
flex-wrap: wrap;
2135
width: auto;
2236
margin-bottom: 10vw;
2337
}

‎packages/meta-network-home/components/Footer.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react';
2+
import styles from './Footer.module.css';
3+
import LogoLink from './LogoLink';
4+
5+
export default () => {
6+
return (
7+
<footer className={styles.footerWrapper}>
8+
<div className={styles.footerContacts}>
9+
<LogoLink
10+
href="https://t.me/metanetwork"
11+
src="/images/logos/telegram.svg"
12+
alt="Telegram"
13+
/>
14+
<LogoLink
15+
href="https://twitter.com/realMetaNetwork"
16+
src="/images/logos/twitter.png"
17+
alt="Twitter"
18+
/>
19+
<LogoLink
20+
href="https://matrix.to/#/!RWJlSDkUlUNMHlXESQ:matrix.org?via=matrix.org"
21+
src="/images/logos/element.svg"
22+
alt="Element"
23+
/>
24+
</div>
25+
<div className={styles.footerBrands}>
26+
<img
27+
className={styles.brandLogo}
28+
src="/images/logos/QTUM.png"
29+
alt="QTUM"
30+
/>
31+
<img className={styles.brandLogo} src="/images/logos/LD.png" alt="LD" />
32+
<img
33+
className={styles.brandLogo}
34+
src="/images/logos/dForce.png"
35+
alt="dForce"
36+
/>
37+
<img
38+
className={styles.brandLogo}
39+
src="/images/logos/MCDEX.png"
40+
alt="MCDEX"
41+
/>
42+
<img
43+
className={styles.brandLogo}
44+
src="/images/logos/YFII.png"
45+
alt="YFII"
46+
/>
47+
<img
48+
className={styles.brandLogo}
49+
src="/images/logos/NGC.png"
50+
alt="NGC"
51+
/>
52+
<img
53+
className={styles.brandLogo}
54+
src="/images/logos/Primitive.png"
55+
alt="Primitive"
56+
/>
57+
<img
58+
className={styles.brandLogo}
59+
src="/images/logos/Cyberright.png"
60+
alt="Cyberright"
61+
/>
62+
<img
63+
className={styles.brandLogo}
64+
src="/images/logos/499Block.png"
65+
alt="499Block"
66+
/>
67+
<img
68+
className={styles.brandLogo}
69+
src="/images/logos/OGlabs.png"
70+
alt="OGlabs"
71+
/>
72+
<img
73+
className={styles.brandLogo}
74+
src="/images/logos/ybb.png"
75+
alt="ybb"
76+
/>
77+
</div>
78+
</footer>
79+
);
80+
};

‎packages/meta-network-home/components/GetLiveStream.module.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.contentCardElement {
2+
width: 40vw;
3+
height: 22vw;
4+
}
5+
6+
@media only screen and (max-width: 600px) {
7+
.contentCardElement {
8+
width: 80vw;
9+
height: 44vw;
10+
}
11+
}

‎packages/meta-network-home/components/GetLiveStream.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useEffect, useRef, useState } from 'react';
2+
import axios from 'axios';
3+
import ReactHlsPlayer from 'react-hls-player';
4+
import styles from './GetLiveStream.module.css';
5+
6+
const liveUrl = `https://${process.env.NEXT_PUBLIC_LIVE_HLS_DOMAIN}/live/${process.env.NEXT_PUBLIC_LIVE_HLS_SECRETS}/index.m3u8`;
7+
8+
export default () => {
9+
const playerRef = useRef();
10+
const [isHLSActive, setIsHLSActive] = useState(false);
11+
12+
async function checkHLSActive(url) {
13+
try {
14+
const res = await axios.head(url);
15+
return /2\d\d/.test(res.status.toString());
16+
} catch (err) {
17+
console.log(`No streaming is available. Message: ${err}`);
18+
return false;
19+
}
20+
}
21+
22+
useEffect(() => {
23+
checkHLSActive(liveUrl).then((result) => {
24+
setIsHLSActive(result);
25+
});
26+
}, []);
27+
28+
if (isHLSActive) {
29+
return (
30+
<ReactHlsPlayer
31+
playerRef={playerRef}
32+
src={liveUrl}
33+
className={styles.contentCardElement}
34+
autoPlay={true}
35+
controls={true}
36+
width="100%"
37+
height="auto"
38+
/>
39+
);
40+
}
41+
42+
if (process.env.NEXT_PUBLIC_CLOUD_FLARE_LIVE_ID) {
43+
return (
44+
<iframe
45+
src={`https://iframe.videodelivery.net/${process.env.NEXT_PUBLIC_CLOUD_FLARE_LIVE_ID}`}
46+
className={styles.contentCardElement}
47+
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
48+
allowFullScreen={true}
49+
id="stream-player"
50+
/>
51+
);
52+
}
53+
54+
return (
55+
<img
56+
className={styles.contentCardElement}
57+
src="/images/card.png"
58+
alt="banner card"
59+
/>
60+
);
61+
};

‎packages/meta-network-home/components/LogoLink.module.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.logoLink {
2+
width: 3vw;
3+
height: 3vw;
4+
padding-right: 2vw;
5+
}
6+
7+
@media only screen and (max-width: 600px) {
8+
.logoLink {
9+
width: 7vw;
10+
height: 7vw;
11+
padding-right: 5vw;
12+
}
13+
}

‎packages/meta-network-home/components/LogoLink.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import styles from './LogoLink.module.css';
3+
4+
export default ({
5+
src,
6+
href,
7+
alt,
8+
}: {
9+
src: string;
10+
href: string;
11+
alt: string;
12+
}) => {
13+
return (
14+
<a href={href} target="__blank">
15+
<img className={styles.logoLink} src={src} alt={alt} />
16+
</a>
17+
);
18+
};

0 commit comments

Comments
 (0)