@cocalc/static
Version:
CoCalc's static frontend Webpack-based build system and framework
74 lines (73 loc) • 3.38 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/* The startup banner
If you want to develop this, edit packages/frontend/app/render.tsx as indicated there so the
startup banner doesn't vanish.
*/
const react_1 = __importDefault(require("react"));
// @ts-ignore -- this is a webpack thing, which confuses typescript.
const cocalc_word_svg_1 = __importDefault(require("./cocalc-word.svg"));
// @ts-ignore
const cocalc_circle_svg_1 = __importDefault(require("./cocalc-circle.svg"));
// @ts-ignore
require("./startup-banner.css");
const path_1 = require("path");
const app_base_path_1 = require("@cocalc/frontend/customize/app-base-path");
function StartupBanner() {
// The hook business below loads the custom logo via the customize
// JSON endpoint, then updates the component and displays the
// logo if still mounted. We have to wrap the async calls in
// an async function, since useEffect has to return a normal function.
const isMountedRef = react_1.default.useRef(true);
const [logo, setLogo] = react_1.default.useState(undefined);
react_1.default.useEffect(() => {
(async () => {
let logo = undefined;
try {
// check for a custom logo
const customizeData = await fetch((0, path_1.join)(app_base_path_1.appBasePath, "customize"));
logo = (await customizeData.json())?.configuration?.logo_rectangular;
}
catch (err) {
console.log("WARNING: problem loading customize data", err);
}
if (logo && isMountedRef.current) {
// got a logo and still mounted, so set the logo.
setLogo(logo);
}
})();
return () => {
// component unmounted, so don't bother setting the logo.
isMountedRef.current = false;
};
}, []);
return ((0, jsx_runtime_1.jsx)("div", { className: "cocalc-fade-in", style: {
height: "100vh",
width: "100vw",
position: "fixed",
display: "flex",
justifyContent: "center" /* horizontally center */,
alignItems: "center" /* vertically center */,
}, children: logo ? ((0, jsx_runtime_1.jsx)("img", { style: { maxWidth: "50%" }, src: logo })) : ((0, jsx_runtime_1.jsxs)("div", { style: {
backgroundColor: "#4474c0",
borderRadius: "5px",
padding: "15px",
height: "75vh",
width: "90%",
maxWidth: "350px",
maxHeight: "400px",
textAlign: "center",
}, children: [(0, jsx_runtime_1.jsx)("img", { src: cocalc_circle_svg_1.default, className: "cocalc-spin", style: {
height: "70%",
maxWidth: "75%",
} }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("img", { src: cocalc_word_svg_1.default, style: {
height: "30%",
width: "100%",
} })] })) }));
}
exports.default = StartupBanner;
//# sourceMappingURL=startup-banner.js.map