@codesweetly/react-youtube-playlist/dist/cjs/youTubePlaylistStyles.js

A simple video gallery with a lightbox for displaying YouTube playlists in React apps.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.youTubePlaylistStyles = youTubePlaylistStyles;
function youTubePlaylistStyles(columnCount, columnWidth, gapSize) {
    var loaderContainerStyle = {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "50vh",
    };
    var galleryContainerStyle = {
        columnCount: columnCount,
        columnWidth: "".concat(columnWidth, "px"),
        columnGap: "".concat(gapSize, "px"),
        textAlign: "center",
    };
    var imageBtnStyle = {
        border: "none",
        background: "none",
        margin: 0,
        padding: 0,
    };
    var videoContainerStyle = {
        margin: "0 0 ".concat(gapSize, "px"),
        position: "relative",
    };
    var videoImageStyle = {
        width: "100%",
        aspectRatio: "16/9 auto",
        backgroundColor: "#D3D3D3",
        cursor: "pointer",
    };
    var videoCaptionStyle = {
        paddingBottom: "2.2rem",
        textAlign: "left",
        fontWeight: 600,
        color: "inherit",
    };
    var modalContainerStyle = {
        outline: "none",
        position: "fixed",
        top: 0,
        left: 0,
        width: "100vw",
        height: "100vh",
        backgroundColor: "rgba(0, 0, 0, 0.73)",
        WebkitBackdropFilter: "blur(5px)",
        backdropFilter: "blur(5px)",
    };
    var modalSlideNumberStyle = {
        zIndex: 1,
        position: "absolute",
        left: 0,
        padding: "13px",
        backgroundColor: "rgba(35, 35, 35, 0.73)",
        color: "#fff",
        fontSize: "0.93rem",
        transition: "opacity 1s ease-in-out",
        userSelect: "none",
        WebkitUserSelect: "none",
    };
    var modalToolbarStyle = {
        zIndex: 1,
        display: "flex",
        position: "absolute",
        right: 0,
        alignItems: "center",
        backgroundColor: "rgba(35, 35, 35, 0.73)",
        transition: "opacity 1s ease-in-out",
        cursor: "pointer",
    };
    var modalToolbarBtnStyle = {
        margin: 0,
        border: "none",
        background: "none",
        padding: "13px",
        color: "#fff",
        cursor: "pointer",
    };
    var modalSlideShowSectionStyle = {
        position: "relative",
        display: "flex",
        alignItems: "center",
        width: "inherit",
        height: "inherit",
    };
    var modalIFrameStyle = {
        margin: "auto",
        width: "80%",
        aspectRatio: "16/9",
        border: "none",
    };
    var modalSlideBtnStyle = {
        position: "absolute",
        border: "none",
        marginInline: "7px",
        padding: "10px 15px",
        backgroundColor: "rgba(35, 35, 35, 0.73)",
        color: "#fff",
        transition: "opacity 1s ease-in-out",
        cursor: "pointer",
        userSelect: "none",
        WebkitUserSelect: "none",
    };
    return {
        loaderContainerStyle: loaderContainerStyle,
        galleryContainerStyle: galleryContainerStyle,
        imageBtnStyle: imageBtnStyle,
        videoContainerStyle: videoContainerStyle,
        videoImageStyle: videoImageStyle,
        videoCaptionStyle: videoCaptionStyle,
        modalContainerStyle: modalContainerStyle,
        modalSlideNumberStyle: modalSlideNumberStyle,
        modalToolbarStyle: modalToolbarStyle,
        modalToolbarBtnStyle: modalToolbarBtnStyle,
        modalSlideShowSectionStyle: modalSlideShowSectionStyle,
        modalIFrameStyle: modalIFrameStyle,
        modalSlideBtnStyle: modalSlideBtnStyle,
    };
}