Split Content Video

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-split-content-video {
    background-color: var(--primary);
    height: 100%;
    border-radius: 47px;
    aspect-ratio: 4/3;

	.image-overlay {
        img {
            border-radius: 50px;

            @include bp($md, true) {
                border-radius: 30px;
            }
        }
        &:after {
            content: '';
            background: linear-gradient(to top, var(--primary) 10%, transparent 50%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 40px;
            z-index: 1;
        }
    }

    .video-title {
        position: absolute;
        left: 2rem;
        bottom: 2rem;
        right: 6rem;
        font-family: 'Montserrat';
        font-size: clamp(1.5rem, 2.5vw, 2rem);
        font-weight: 600;
        line-height: 40.8px;
        color: var(--white);
        z-index: 2;
    }

    .play-button {
        position: absolute;
        bottom: 2rem;
        right: 2rem;
        width: 44px;
        height: 44px;
        background-color: var(--secondary);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        z-index: 2;

        &:hover {
            background-color: var(--primary);
            svg {
                fill: var(--white);
            }
        }

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 15px solid var(--white);
        }
    }
}

class SplitContentVideo {
	block;
	videoLoaded = false;
	anchor;

	constructor(block) {
		this.block = block;
		this.anchor = this.block.querySelector('a');
		this.init();
	}

	init() {
		this.block.addEventListener('click', () => {
			// console.log('clicked', this.block);
			if (!this.videoLoaded) {
				// find the video element using the href of the block
				const videoContainer = document.querySelector(this.anchor.getAttribute('href'));
				// console.log(videoContainer);
				if(videoContainer) {
					const video = videoContainer.querySelector('video');
					// console.log(video);
					if(video) {
						video.play();
						this.videoLoaded = true;
					}
				}
			}
		}, { once: true });
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-split-content-video').forEach((block) => {
		new SplitContentVideo(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/split-content-video",
    "title": "Split Content Video",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-split-content-video.php"
    },
    "parent": [ "strategiq/split-content" ],
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Split Content Video",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/split-content-video/block-split-content-video.css", "lity-css"],
    "viewScript": ["vimeo-player", "lity-js", "split-content-video"]
}