@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
169 lines (166 loc) • 5.99 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/*
Created by Hassan Steven Compton.
March 7, 2024.
*/
import React, { useState, useEffect } from "react";
import HUDTyper from "../../../HUDComponents/HUDTyper.js";
var HUDBanneredShowcaseMediaComponent = function HUDBanneredShowcaseMediaComponent(_ref) {
var type = _ref.type,
source = _ref.source,
headline = _ref.headline,
articleContext = _ref.articleContext,
publishDate = _ref.publishDate,
author = _ref.author;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
scrolledToBottom = _useState2[0],
setScrolledToBottom = _useState2[1];
var _useState3 = useState(0),
_useState4 = _slicedToArray(_useState3, 2),
scrollPosition = _useState4[0],
setScrollPosition = _useState4[1];
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
paragraphIndex = _useState6[0],
setParagraphIndex = _useState6[1];
var showcaseBannerStyle = {
width: "100%",
maxHeight: "569.69px",
position: "absolute",
objectFit: "cover",
outline: "none",
border: "none",
top: "0%"
};
var contentStyle = {
flexDirection: "column",
background: "#f5f3f2",
minHeight: "100vh",
display: "flex",
flexGrow: 1
};
var footerStyle = {
justifyContent: "center",
background: "#1a1313",
transition: "opacity 0.69s ease",
opacity: scrolledToBottom ? "1" : "0",
width: "100%",
borderRadius: "15px 15px 0px 0px",
boxShadow: "3px -5px 5px -4px #4f0303",
position: "fixed",
bottom: 0
};
var authorLabelStyle = {
textAlign: "center",
color: "#f5f3f2",
fontFamily: "Verdana",
fontWeight: "bold",
fontSize: "1rem",
marginBottom: "10px"
};
var publishDateStyle = {
textAlign: "center",
fontFamily: "Verdana",
fontStyle: "italic",
fontWeight: "bold",
fontSize: "0.69rem",
marginBottom: "10px"
};
var headlineStyle = {
textAlign: "center",
fontFamily: "Verdana",
fontWeight: "bold",
fontSize: "1.5rem",
marginBottom: "10px"
};
var bodyStyle = {
fontFamily: "Montserrat",
fontSize: "1rem",
margin: "21px",
textIndent: "20px"
};
var typeNextParagraph = function typeNextParagraph() {
if (paragraphIndex < articleContext.length - 1) {
setParagraphIndex(function (prevIndex) {
return prevIndex + 1;
});
return;
}
return;
};
useEffect(function () {
var intervalIndex = setInterval(typeNextParagraph, 6999);
return function () {
return clearInterval(intervalIndex);
};
}, [paragraphIndex]);
useEffect(function () {
var handleScroll = function handleScroll() {
var windowHeight = 'innerHeight' in window ? window.innerHeight : document.documentElement.offsetHeight;
var body = document.body;
var html = document.documentElement;
var docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
var windowBottom = windowHeight + window.pageYOffset;
setScrolledToBottom(windowBottom >= docHeight || windowBottom >= docHeight - 47.69);
return;
};
window.addEventListener('scroll', handleScroll);
return function () {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return /*#__PURE__*/React.createElement("div", {
style: contentStyle
}, type === "video" ? /*#__PURE__*/React.createElement("video", {
style: showcaseBannerStyle,
autoPlay: true,
preload: "auto",
muted: true,
loop: true
}, /*#__PURE__*/React.createElement("source", {
src: source,
type: "video/mp4"
})) : type === "gif" ? /*#__PURE__*/React.createElement("img", {
style: showcaseBannerStyle,
src: source,
alt: "SC Media Thumbnail"
}) : /*#__PURE__*/React.createElement("img", {
style: showcaseBannerStyle,
src: source,
alt: "SC Media GIF"
}), /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread({}, contentStyle), {}, {
marginTop: "471.69px"
})
}, /*#__PURE__*/React.createElement("div", {
style: {
background: "rgba(245, 243, 242, 0.69)",
width: "calc(100%)",
zIndex: "115"
}
}, /*#__PURE__*/React.createElement("h2", {
style: headlineStyle
}, /*#__PURE__*/React.createElement(HUDTyper, {
speed: 1
}, headline)), /*#__PURE__*/React.createElement("p", {
style: publishDateStyle
}, /*#__PURE__*/React.createElement(HUDTyper, {
speed: 15
}, "Published ~ ".concat(publishDate)))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), articleContext.slice(0, paragraphIndex + 1).map(function (paragraph, index) {
return /*#__PURE__*/React.createElement("p", {
style: bodyStyle,
key: index
}, /*#__PURE__*/React.createElement(HUDTyper, {
speed: 15
}, paragraph));
})), /*#__PURE__*/React.createElement("div", {
style: footerStyle
}, /*#__PURE__*/React.createElement("p", {
style: authorLabelStyle
}, "Author(s) ~ ", author)));
};
export default HUDBanneredShowcaseMediaComponent;