Hero Video Cards Playlist

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-hero-video-cards-playlist {
	background-color: $primary;
	background-image: url( '/wp-content/themes/british-esports/assets/images/gradients/gradient.svg' );
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;

	@include padding-bottom( rem-calc(55) );

	.block-breadcrumb {
		@include margin-bottom( rem-calc(58) );
	}

	&__separator {
		position: relative;
		margin-top: rem-calc(32);
		margin-bottom: rem-calc(32);

		@include bp($lg) {
			margin-top: 0;
			margin-bottom: 0;
		}

		&:before {
			width: calc(100% - 30px);
			height: rem-calc(1);
			content: '';
			background-color: $white;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-50%,-50%,0);
			pointer-events: none;
			opacity: 0.3;

			@include bp($lg) {
				width: rem-calc(1);
				height: 100%;
				top: 0;
				left: 50%;
				transform: translate3d(-50%,0,0);
			}
		}
	}

	p,
	h3 {
		color: var(--text-color);

		&.heading {
			opacity: 0.3;
			@include margin-bottom( rem-calc(24) );
		}

		&.post-card__title {
			@include margin-bottom( rem-calc(54) );
		}

		&.post-card__category,
		&.post-card__reading-time {
			border-color: $white;
		}
	}

	.video-card {
		padding: 0;

		&:hover {
			box-shadow: none;
		}

		.post-card__image-row {
			position: relative;
			display: flex;
			flex-direction: column;
			@include margin-bottom( rem-calc(45) );

			.poster-image,
			iframe,
			video {
				width: 100%;
				aspect-ratio: 16/9;
			}

			iframe,
			video {
				z-index: 10;
			}
		}

		.post-card__content-container {
			&:hover {
				p {
					&.post-card__title {
						color: $secondary;
					}
				}
			}
		}

		p {
			&.post-card__title {
				@include fluid-type(28, 56);
				line-height: 1.2;
				margin-bottom: 0;
			}
		}
	}

	&__playlist {
		height: calc(90% - 4px);
		overflow-y: scroll;
		padding-right: rem-calc(6);
		display: flex;
		flex-direction: column;

		@include bp($md) {
			flex-direction: row;
			flex-wrap: wrap;
			gap: rem-calc(16);
		}

		@include bp($lg) {
			flex-direction: column;
			flex-wrap: nowrap;
			gap: 0;
		}

		&::-webkit-scrollbar-track {
			width: 2px;
			-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
			border-radius: 8px;
			background-color: transparent;
		}

		&::-webkit-scrollbar {
			width: 2px;
			background-color: transparent;

			@include bp($lg) {
				width: 4px;
			}
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: none;
			background-color: $white;
		}

		.post-card {
			padding: 0;
			opacity: 1;
			@include margin-bottom( rem-calc(46) );

			@include bp($md) {
				width: calc(50% - #{rem-calc(16)});
				flex-grow: 0;
				margin-bottom: 0;
			}

			@include bp($lg) {
				width: 100%;
				@include margin-bottom( rem-calc(46) );
			}

			&:first-of-type {
				// &:before {
				// 	position: absolute;
				// 	top: 0;
				// 	left: 0;
				// 	content: 'Up next';
				// 	@include padding( rem-calc(6 10) );
				// 	background-color: $white;
				// 	color: $primary;
				// 	text-transform: uppercase;
				// 	font-weight: 500;
				// 	@include fluid-type(10, 10);
				// 	z-index: 5;
				// }
			}

			&:last-of-type {
				margin-bottom: 0;
			}

			&:hover {
				box-shadow: none;

				p {
					&.post-card__title {
						color: $secondary;
					}
				}
			}

			.post-card__image-row {
				&:after {
					width: rem-calc(40);
					height: rem-calc(40);
					background-size: rem-calc(14);
				}
			}
		}
	}
}

class VideoCardsPlaylist {
	/**
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;
		this.swiper = null;

		this.videoCard = this.block.querySelector( '.video-card' );
		this.scrollingCols = this.block.querySelectorAll( '.block-hero-video-cards-playlist__scrolling' );

		ScrollTrigger.create({
			trigger: this.block,
			start: 'top bottom',
			end: 'bottom top',
			onEnter: () => this.init(),
		});
	}

	init() {
		let height = this.videoCard.clientHeight;
		this.setHeight( height );

		const resizeHandler = debounce( () => {
			let height = this.videoCard.clientHeight;

			if ( window.innerWidth < 768 ) {
				height = height + height;
			}
			this.setHeight( height );
		}, 250);
		window.addEventListener('resize', resizeHandler);
	}

	setHeight( height ) {
		this.scrollingCols.forEach (col => col.style.height = `${height}px`);
	}
}

document.querySelectorAll('.block-hero-video-cards-playlist').forEach((block) => {
	new VideoCardsPlaylist( block );
});