@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/MediaShowcaseList.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 from "react";
import { useEffect } from "react";
import HUDScrollerObserver from "../HUDComponents/HUDScrollerObserver.js";
import HUDTyper from "../HUDComponents/HUDTyper.js";
var MediaShowcaseList = function MediaShowcaseList(_ref) {
  var showcaseItems = _ref.showcaseItems,
    gridConfigurationStyle = _ref.gridConfigurationStyle,
    cellConfigurationStyle = _ref.cellConfigurationStyle,
    mediaConfigurationStyle = _ref.mediaConfigurationStyle,
    contentConfigurationStyle = _ref.contentConfigurationStyle,
    titleConfigurationStyle = _ref.titleConfigurationStyle,
    descriptionConfigurationStyle = _ref.descriptionConfigurationStyle;
  var listStyle = _objectSpread({
    display: "flex",
    gap: "20px",
    padding: "20px",
    overflowX: "auto"
  }, gridConfigurationStyle);
  var cellStyle = _objectSpread({
    position: "relative",
    borderRadius: "15px",
    overflow: "hidden",
    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
    transition: "transform 0.3s ease-in-out"
  }, cellConfigurationStyle);
  var mediaStyle = _objectSpread({
    objectFit: "cover",
    height: "100%",
    width: "100%"
  }, mediaConfigurationStyle);
  var contentStyle = _objectSpread({
    position: "absolute",
    top: "0",
    left: "0",
    right: "0",
    bottom: "0",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
    padding: "15px",
    opacity: "0",
    transition: "opacity 0.3s ease"
  }, contentConfigurationStyle);
  var overlayStyle = {
    position: "absolute",
    top: "0",
    left: "0",
    right: "0",
    bottom: "0",
    background: "rgba(0, 0, 0, 0.69)",
    zIndex: "1"
  };
  var titleStyle = _objectSpread({}, titleConfigurationStyle);
  var descriptionStyle = _objectSpread({}, descriptionConfigurationStyle);
  var handleCellHover = function handleCellHover(index, isHovered) {
    var contentElement = document.getElementById("content-".concat(index));
    if (contentElement) {
      contentElement.style.opacity = isHovered ? "1" : "0";
    }
  };
  useEffect(function () {
    HUDScrollerObserver(document);
    return;
  }, [document]);
  return /*#__PURE__*/React.createElement("div", {
    className: "hud-scroller",
    style: listStyle
  }, showcaseItems && showcaseItems.length > 0 ? showcaseItems.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: index,
      style: cellStyle,
      onMouseEnter: function onMouseEnter() {
        return handleCellHover(index, true);
      },
      onMouseLeave: function onMouseLeave() {
        return handleCellHover(index, false);
      },
      onClick: item.hudAction
    }, item.type === "image" ? /*#__PURE__*/React.createElement("img", {
      src: item.source,
      alt: item.title,
      style: mediaStyle
    }) : /*#__PURE__*/React.createElement("video", {
      src: item.source,
      alt: item.title,
      style: mediaStyle,
      autoPlay: true,
      loop: true,
      muted: true,
      playsInline: true
    }), /*#__PURE__*/React.createElement("div", {
      id: "content-".concat(index),
      style: contentStyle
    }, /*#__PURE__*/React.createElement("div", {
      style: overlayStyle
    }), /*#__PURE__*/React.createElement("h3", {
      style: titleStyle
    }, item.title), /*#__PURE__*/React.createElement("p", {
      style: descriptionStyle
    }, item.description)));
  }) : /*#__PURE__*/React.createElement("label", {
    style: {
      position: "absolute",
      background: "transparent",
      color: "black",
      transition: "font-size 0.469s ease",
      fontWeight: "bolder",
      fontSize: "37.69px",
      textAlign: "center",
      width: "100%"
    }
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 21
  }, "No media yet....")));
};
export default MediaShowcaseList;