<div class="wrapper">
    <figure class="o-hero o-hero--no-image ">

        <figcaption class="o-hero__caption">
            <div class="wrapper">
                <div class="o-hero__text">

                    <h1 class="supersize">Gå en guidad tur!</h1>

                    <p class="o-hero__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis, ipsum at porta porta, eros ligula finibus arcu, id placerat augue justo sed mi.</p>
                </div>
            </div>
        </figcaption>
    </figure>
</div>
<div class="wrapper">
    <div class="row justify-content-between">
        <div class="grid-18 grid-sm-9 grid-lg-4">
            <div class="m-card">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="">
                <div class="m-card__content">
                    <a href="#" class="m-card__link">
                        <h2 class="">
                            Den stora berättelsen om internets historia
                        </h2>
                    </a>

                </div>
            </div>
        </div>
        <div class="grid-18 grid-sm-9 grid-lg-4">
            <div class="m-card">
                <img src="/assets/images/ALX_7251.jpg" class="m-card__image m-card__media" alt="">
                <div class="m-card__content">
                    <a href="#" class="m-card__link">
                        <h2 class="">
                            Datadamer, kvinnorna som digitaliserade världen
                        </h2>
                    </a>

                </div>
            </div>
        </div>
        <div class="grid-18 grid-sm-9 grid-lg-4">
            <div class="m-card">
                <img src="/assets/images/KPA_0996.jpg" class="m-card__image m-card__media" alt="">
                <div class="m-card__content">
                    <a href="#" class="m-card__link">
                        <h2 class="">
                            Emojins historia
                        </h2>
                    </a>

                </div>
            </div>
        </div>
        <div class="grid-18 grid-sm-9 grid-lg-4">
            <div class="m-card">
                <img src="/assets/images/bildmaner.jpg" class="m-card__image m-card__media" alt="">
                <div class="m-card__content">
                    <a href="#" class="m-card__link">
                        <h2 class="">
                            Internet för unga
                        </h2>
                    </a>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="wrapper">
	{{> @hero no_image_class="o-hero--no-image" heading="Gå en guidad tur!" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis, ipsum at porta porta, eros ligula finibus arcu, id placerat augue justo sed mi."}}
</div>
<div class="wrapper">
	<div class="row justify-content-between">
		<div class="grid-18 grid-sm-9 grid-lg-4">
			{{> @card title="Den stora berättelsen om internets historia" img_url="/assets/images/ALX_0876.jpg" url="#"}}
		</div>
		<div class="grid-18 grid-sm-9 grid-lg-4">
			{{> @card title="Datadamer, kvinnorna som digitaliserade världen" img_url="/assets/images/ALX_7251.jpg" url="#"}}
		</div>
		<div class="grid-18 grid-sm-9 grid-lg-4">
			{{> @card title="Emojins historia" img_url="/assets/images/KPA_0996.jpg" url="#"}}
		</div>
		<div class="grid-18 grid-sm-9 grid-lg-4">
			{{> @card title="Internet för unga" img_url="/assets/images/bildmaner.jpg" url="#"}}
		</div>
	</div>
</div>
{
  "videoSrc": "/assets/video/Internets-Historia-HEVC-h265-vp9-chrome.webm",
  "videoSrc2": "/assets/video/Internets-Historia-HEVC-h265-HEVC-h265.mov",
  "variants": [
    {
      "name": "List",
      "context": {}
    }
  ]
}
  • Content:
    @charset "UTF-8";
    
    @include organism(video-guide) {
    	flex-direction: column;
    	background-color: $color-snow;
    	border-radius: $border-radius;
    	overflow: hidden;
    
    	@include e(inner-wrapper) {
    		width: 100%;
    		position: relative;
    	}
    
    	> figure {
    		display: flex;
    		overflow: hidden;
    		position: relative;
    	}
    
    	@include e(video-container) {
    		position: relative;
    		padding-top: 70vh;
    		width: 100%;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    
    		@include bp-up(sm) {
    			padding-top: 76.25%;
    		}
    
    		@include bp-up(md) {
    			padding-top: 56.25%;
    		}
    	}
    
    	@include e(timeline-item) {
    		position: absolute;
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		z-index: 1;
    		justify-content: center;
    		opacity: 0;
    		transition: opacity 0.25s ease-out;
    		margin: 0;
    		padding: 0;
    
    		&:first-child,
    		&.is-current {
    			opacity: 1;
    		}
    
    		img {
    			border-radius: 0;
    			object-fit: cover;
    			object-position: 50% 25%;
    			height: 100%;
    			width: 100%;
    		}
    
    		@include e(text) {
    			position: absolute;
    			top: 50%;
    			left: 0;
    			right: 0;
    			text-align: center;
    			padding-left: rhythm(2);
    			padding-right: rhythm(2);
    
    			transform: translateY(-75%);
    
    			@include bp-up(md) {
    				transform: translateY(-50%);
    				padding-left: rhythm(4);
    				padding-right: rhythm(4);
    			}
    
    			@include bp-up(lg) {
    				transform: translateY(-50%);
    			}
    
    			@include bp-up(xl) {
    				left: rhythm(8);
    				width: calc(100% - rhythm(16));
    				text-align: left;
    			}
    
    			@include e(headline) {
    				font-family: $font-family-bold;
    				color: $color-snow;
    				text-shadow: 0 0 rem(50px) rgba($color-black, 1),
    					0 0 rem(10px) rgba($color-black, 1),
    					rem(1px) rem(1px) rem(2px) rgba($color-black, 0.6);
    
    				@include plumber(
    					$font-size: 3,
    					$line-height: 4,
    					$leading-bottom: 1,
    					$baseline: $headings-baseline
    				);
    
    				@include bp-up(sm) {
    					@include plumber(
    						$font-size: 4.5,
    						$line-height: 5,
    						$leading-bottom: 1
    					);
    				}
    
    				@include bp-up(lg) {
    					@include plumber(
    						$font-size: 7,
    						$line-height: 8,
    						$leading-bottom: 2
    					);
    				}
    			}
    
    			> a {
    				font-size: $size-base * 1.3;
    				font-family: $font-family-headings;
    				padding: rhythm(0.5) rhythm(2);
    				color: $color-peacock;
    				text-decoration: none;
    				line-height: 1;
    				position: relative;
    
    				&::after {
    					content: '';
    					position: absolute;
    					z-index: -2;
    					width: 100%;
    					height: 100%;
    					background-color: rgba($color-black, 0.7);
    					bottom: 0;
    					left: 0;
    				}
    
    				&::before {
    					content: '';
    					position: absolute;
    					z-index: -1;
    					width: 100%;
    					height: 100%;
    					background-color: $color-snow;
    					bottom: 0;
    					left: 0;
    					transform-origin: right;
    					transform: scaleX(0);
    					transition: transform .3s ease-in-out;
    				}
    
    				&:hover::before {
    					transform-origin: left;
    					transform: scaleX(1);
    				}
    			}
    		}
    	}
    
    	@include e(video) {
    		display: block;
    		position: absolute;
    		left: auto;
    		right: auto;
    		bottom: 0;
    		z-index: 2;
    		width: 150px;
    		height: 150px;
    
    		&.is-loading {
    			background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ring' style='background: none;'%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.base%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.width%7D%7D' fill='none' r='43' stroke='%23a7d8fd' stroke-width='7'%3E%3C/circle%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.stroke%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.innerWidth%7D%7D' ng-attr-stroke-linecap='%7B%7Bconfig.linecap%7D%7D' fill='none' r='43' stroke='%2350b2fc' stroke-width='7' stroke-linecap='square' transform='rotate(27.6965 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' calcMode='linear' values='0 50 50;180 50 50;720 50 50' keyTimes='0;0.5;1' dur='2.5s' begin='0s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='stroke-dasharray' calcMode='linear' values='9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182' keyTimes='0;0.5;1' dur='2.5' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E%0A");
    			background-repeat: no-repeat;
    			background-position: center center;
    			background-size: 30% 30%;
    		}
    
    		@include bp-up(sm) {
    			left: 0;
    		}
    
    		@include bp-up(lg) {
    			width: 200px;
    			height: 200px;
    		}
    
    		@include bp-up(xxl) {
    			width: 250px;
    			height: 250px;
    		}
    	}
    
    	@include e(controls) {
    		background-color: $color-snow;
    		display: flex;
    		align-items: center;
    		justify-content: space-between;
    		padding: rhythm(2);
    		flex-direction: column-reverse;
    		overflow: hidden;
    
    		@include bp-up(sm) {
    			transform: translateX(0);
    		}
    
    		@include bp-up(md) {
    			align-items: stretch;
    			flex-direction: row;
    		}
    	}
    
    	@include e(title) {
    		line-height: 1;
    		margin-top: rhythm(1);
    	}
    
    	@include e(chapters) {
    		width: 100%;
    		display: flex;
    		flex-direction: column;
    
    		@include e(list) {
    			width: 100%;
    			height: 100%;
    			list-style-type: none;
    			margin: 0;
    			padding: 0;
    
    			> li {
    				display: flex;
    				align-items: center;
    				background-color: $color-snow;
    				font-size: $size-medium;
    				display: none;
    				line-height: 1;
    
    				@include bp-up(md) {
    					font-size: $size-medium-plus;
    				}
    
    				&.is-current-item {
    					display: block;
    				}
    			}
    		}
    
    		@include bp-up(md) {
    			align-items: stretch;
    		}
    	}
    
    	@include e(timelineposts) {
    		z-index: 2;
    		width: 250px;
    		min-width: 250px;
    		background-color: $color-cyberspace;
    		position: relative;
    		transform: translateX(100%);
    		transition: transform 0.25s ease-out;
    		flex-shrink: 0;
    		position: absolute;
    		top: 0;
    		right: 0;
    		bottom: 0;
    
    		@include bp-up(md) {
    			transform: translateX(0);
    			position: relative;
    			top: auto;
    			right: auto;
    			bottom: auto;
    		}
    
    		@include bp-up(xl) {
    			width: 350px;
    		}
    
    		&.is-visible {
    			transform: translateX(0);
    		}
    
    		@include e(list) {
    			position: absolute;
    			top: 0;
    			left: 0;
    			right: 0;
    			bottom: 0;
    			overflow-y: auto;
    
    			dt {
    				color: $color-snow;
    				font-family: $font-family-headings;
    				padding: rhythm(1) rhythm(2);
    
    				@include bp-up(md) {
    					padding-top: rhythm(2);
    					padding-bottom: rhythm(2);
    				}
    			}
    
    			dd {
    				padding: 0;
    				margin: 0;
    				display: block;
    				border-top: 1px solid lighten($color-cyberspace, 10%);
    			}
    		}
    
    		@include e(link) {
    			display: flex;
    			padding: rhythm(1) rhythm(2);
    			color: $color-snow;
    			text-decoration: none;
    			font-size: $size-medium;
    			position: relative;
    			line-height: 1.5;
    			border-left: 0 solid $color-peacock;
    			transition: all 0.25s ease-out;
    
    			&::after {
    				content: attr(data-label);
    				display: block;
    				background-color: $color-lemon;
    				color: $color-cyberspace;
    				font-family: $font-family-headings;
    				padding: rhythm(1);
    				line-height: 1;
    				align-self: flex-end;
    				white-space: nowrap;
    				border-radius: $border-radius;
    				transform: translateX(rhythm(0.5));
    				margin-left: rhythm(1);
    				overflow: hidden;
    				transition: transform 0.25s ease-out;
    				transform: scale(0);
    				opacity: 0;
    			}
    
    			&:hover,
    			&:focus,
    			&.is-current {
    				background-color: lighten($color-cyberspace, 10%);
    
    				&::after {
    					overflow: visible;
    					transform: scale(100%);
    					opacity: 1;
    				}
    			}
    
    			&.is-current {
    				font-family: $font-family-headings;
    				border-left: rhythm(1) solid $color-peacock;
    
    				&::after {
    					background-color: $color-peacock;
    					color: $color-snow;
    				}
    			}
    		}
    
    		@include e(button-navigation) {
    			transform: translateX(-100%);
    			background-color: $color-cyberspace;
    			border-bottom-left-radius: $border-radius;
    
    			@include bp-up(md) {
    				display: none;
    			}
    
    			&.is-toggeled {
    				transform: translateX(0) scaleX(-1);
    				position: absolute;
    				right: rhythm(2);
    				z-index: 2;
    			}
    		}
    	}
    
    	@include e(buttons) {
    		display: flex;
    	}
    
    	@include e(button) {
    		display: flex;
    		align-items: center;
    		margin: 0 rhythm(1);
    		padding: 0;
    		border: 0;
    		background-color: transparent;
    
    		&:disabled,
    		&:disabled:focus,
    		&:not([class*="play"]):not([class*="subtitles"]):not([data-id]),
    		&:disabled:focus-visible {
    			pointer-events: none;
    			cursor: not-allowed;
    
    			> svg {
    				fill: $color-concrete;
    			}
    		}
    
    		&:hover {
    			> svg {
    				fill: $color-peacock;
    			}
    		}
    
    		@include m(subtitles) {
    			&.is-active {
    				svg {
    					fill: $color-peacock;
    				}
    			}
    		}
    	}
    
    	@include e(play-icon) {
    		width: $icon-size-large * 1.5;
    		height: $icon-size-large * 1.5;
    	}
    
    	@include e(rewind-icon) {
    		width: $icon-size-large;
    		height: $icon-size-large;
    	}
    
    	@include e(forward-icon) {
    		width: $icon-size-large;
    		height: $icon-size-large;
    	}
    
    	@include e(subtitles-icon) {
    		width: $icon-size-large * 1.2;
    		height: $icon-size-large * 1.2;
    	}
    
    	@include e(subtitles) {
    		text-align: center;
    		width: auto;
    		position: absolute;
    		bottom: rhythm(1);
    		right: rhythm(1);
    		z-index: 3;
    		font-family: $font-family-headings;
    		min-width: 200px;
    		max-width: 300px;
    		display: none;
    		padding: rhythm(0.5) rhythm(1);
    		line-height: 1.7;
    
    		@include bp-up(sm) {
    			font-size: $size-base;
    			padding: rhythm(1) rhythm(2);
    			min-width: 300px;
    			max-width: 400px;
    		}
    
    		@include bp-up(md) {
    			font-size: $size-base * 1.5;
    			padding: rhythm(2) rhythm(4);
    			min-width: 400px;
    			max-width: 600px;
    		}
    
    		@include bp-up(lg) {
    			font-size: $size-base * 1.7;
    			min-width: 500px;
    			max-width: 700px;
    			bottom: rhythm(2);
    			align-self: flex-end;
    			right: rhythm(2);
    		}
    
    		@include bp-up(xxl) {
    			max-width: 800px;
    		}
    
    		&.is-visible {
    			display: inline-block;
    
    			&:empty {
    				display: none;
    			}
    		}
    
    		> span {
    			background-color: rgba($color-black, 0.8);
    			color: $color-snow;
    		}
    	}
    
    	@include e(button-abort) {
    		position: absolute;
    		top: rhythm(1);
    		left: rhythm(1);
    		flex-grow: 0;
    		z-index: 2;
    		font-size: $size-small;
    
    		@include bp-up(md) {
    			font-size: initial;
    		}
    	}
    }
  • URL: /components/raw/video-guide/_video-guide.scss
  • Filesystem Path: src/organisms/video-guide/_video-guide.scss
  • Size: 10.1 KB
  • Content:
    const video = document.querySelector('.js-video-guide');
    const playBtn = document.querySelector('.js-play-btn');
    const playIcon = document.querySelector('.js-play-icon');
    const pauseIcon = document.querySelector('.js-pause-icon');
    const subtitlesBtn = document.querySelector('.js-subtitles-btn');
    const abortButton = document.querySelector('.js-abort-guide');
    const subtitlesElement = document.getElementById('video-subtitles');
    const subtitlesContainer = document.querySelector('.js-subtitles-container');
    const chapterTrackElement = document.getElementById('video-chapters');
    const trackMetadataElement = document.getElementById('video-metadata');
    const subtitlesTrack = (subtitlesElement === null) ? '' : subtitlesElement.track;
    const chapterTrack = (chapterTrackElement === null) ? '' : chapterTrackElement.track;
    const metadataTrack = (trackMetadataElement === null) ? '' : trackMetadataElement.track;
    const forwardsButton = document.querySelector('.js-next-chapter');
    const backwardsButton = document.querySelector('.js-previous-chapter');
    const timelinePosts = document.querySelectorAll('.js-timeline-post');
    const navigationButton = document.querySelector('.js-show-timelineposts');
    const timeLinePosts = document.querySelector('.js-timeline-posts');
    let currentChapter = 0;
    let manualStep = false;
    
    // Has src attributes been set already?
    if (video) {
    	// Store current time in on page reload
    	window.addEventListener('unload', () => {
    		// Set sessionStorage if video has started playing
    		if (video.currentTime > 0) {
    			const currentGuideURL = window.location.href;
    			const currentGuideImage = video.dataset.featuredImage;
    			sessionStorage.setItem('InmsCurrentTime', video.currentTime);
    			sessionStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
    			sessionStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
    			sessionStorage.setItem('InmsCurrentGuideImage', currentGuideImage);
    		}
    	});
    
    	// Get value from sessionStorage in present
    	if (sessionStorage.getItem('InmsCurrentTime')) {
    		const videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
    
    		if (videoCurrentTime > 0) {
    			video.currentTime = videoCurrentTime;
    		}
    	}
    
    	// Toggle subtitles
    	if (subtitlesBtn) {
    		subtitlesBtn.addEventListener('click', () => {
    			subtitlesBtn.classList.toggle('is-active');
    			subtitlesContainer.classList.toggle('is-visible');
    		});
    	}
    
    	// Play / pause
    	if (playBtn) {
    		playBtn.addEventListener('click', () => {
    			if (video.paused) {
    				video.play();
    				pauseIcon.classList.remove('is-hidden');
    				playIcon.classList.add('is-hidden');
    				manualStep = false;
    			} else {
    				video.pause();
    				pauseIcon.classList.add('is-hidden');
    				playIcon.classList.remove('is-hidden');
    				manualStep = true;
    			}
    		});
    
    		video.addEventListener('playing', () => {
    			pauseIcon.classList.remove('is-hidden');
    			playIcon.classList.add('is-hidden');
    			manualStep = false;
    		});
    
    		video.addEventListener('ended', () => {
    			pauseIcon.classList.add('is-hidden');
    			playIcon.classList.remove('is-hidden');
    			video.currentTime = 0;
    			currentChapter = 1;
    			manualStep = false;
    			forwardsButton.removeAttribute('disabled');
    			subtitlesContainer.innerHTML = '';
    			sessionStorage.removeItem('InmsCurrentTime');
    			sessionStorage.removeItem('InmsDuration');
    			sessionStorage.removeItem('InmsCurrentGuideURL');
    			sessionStorage.removeItem('InmsCurrentGuideImage');
    		});
    	}
    
    	if (abortButton) {
    		abortButton.addEventListener('click', (e) => {
    			e.preventDefault();
    			const urlTarget = abortButton.getAttribute('href');
    			video.pause();
    			video.currentTime = 0;
    			forwardsButton.removeAttribute('disabled');
    			currentChapter = 1;
    			manualStep = false;
    			sessionStorage.removeItem('InmsCurrentTime');
    			sessionStorage.removeItem('InmsDuration');
    			sessionStorage.removeItem('InmsCurrentGuideURL');
    			sessionStorage.removeItem('InmsCurrentGuideImage');
    			window.location.href = urlTarget;
    		});
    	}
    
    	if (navigationButton) {
    		navigationButton.addEventListener('click', () => {
    			navigationButton.classList.toggle('is-toggeled');
    			timeLinePosts.classList.toggle('is-visible');
    		});
    	}
    }
    
    function displayChapters() {
    	if (chapterTrackElement && trackMetadataElement) {
    		// Set all track elements to hidden mode to allow scripting
    		[].forEach.call(video.textTracks, (txtTrack) => {
    			txtTrack.mode = 'hidden';
    		});
    
    		if (chapterTrack.kind === 'chapters') {
    			video.addEventListener('loadedmetadata', () => {
    				// Loop through chapters and create chapter list
    				// Let data load
    				setTimeout(() => {
    					video.classList.remove('is-loading');
    
    					// If not set in sessionStorgare, set first cue on forward button on page load
    					if (!sessionStorage.getItem('InmsCurrentTime')) {
    						forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
    					}
    				}, 100);
    			});
    
    			forwardsButton.addEventListener('click', () => {
    				const dataId = forwardsButton.dataset.id;
    				let currentTime = parseInt(dataId, 10);
    				manualStep = true;
    				currentTime += 1;
    				video.currentTime = currentTime;
    				currentChapter += 1;
    			});
    
    			backwardsButton.addEventListener('click', () => {
    				const dataId = backwardsButton.dataset.id;
    				let lastTime = parseInt(dataId, 10);
    				lastTime -= 1;
    				video.currentTime = lastTime;
    				forwardsButton.removeAttribute('disabled');
    				manualStep = true;
    				currentChapter -= 1;
    
    				if (video.currentTime <= 0) {
    					backwardsButton.removeAttribute('data-id');
    				}
    			});
    
    			chapterTrack.addEventListener('cuechange', () => {
    				// Fire this whenever the chapters changes
    				const myCues = chapterTrack.activeCues;
    				if (myCues.length > 0) {
    					const currentLocation = chapterTrack.activeCues[0].startTime;
    					const nextLocation = chapterTrack.activeCues[0].endTime;
    					const cueMatch = chapterTrack.activeCues[0].text;
    					const matchingCueArray = document.querySelectorAll(`[rel="${currentLocation}"]`);
    
    					// Set Forward and backwards buttons timestamps
    					forwardsButton.setAttribute('data-id', nextLocation);
    					backwardsButton.setAttribute('data-id', currentLocation);
    
    					// Add chapter stepping even when video is played
    					if (manualStep === false) {
    						currentChapter += 1;
    					}
    
    					// Disable forwardsbutton when on last chapter
    					if (currentChapter >= chapterTrack.cues.length) {
    						forwardsButton.setAttribute('disabled', 'disabled');
    					}
    
    					// Handle current and watched items
    					[].forEach.call(matchingCueArray, (matchingCue) => {
    						const thisChapter = matchingCue;
    						if (thisChapter.innerHTML === cueMatch) {
    							const chapter = thisChapter;
    
    							if (chapter === thisChapter) {
    								// get the chapter <li> elements based on the currentLocation
    								const locations = [].slice.call(chapter.closest('figure')
    									.querySelectorAll('.js-chapters li'));
    
    								[].forEach.call(locations, (location) => {
    									// remove current classes from all items on page refresh
    									location.classList.remove('is-current-item');
    									location.querySelector('a').classList.remove('is-current');
    								});
    								chapter.parentNode.classList.add('is-current-item');
    								chapter.classList.add('is-current');
    							}
    						}
    					});
    				}
    			}, false);
    
    			// Get timeline post IDs from metadata.vtt
    			metadataTrack.addEventListener('cuechange', () => {
    				const metadataCues = metadataTrack.activeCues;
    				const chapterCues = chapterTrack.activeCues[0];
    
    				if (metadataCues.length > 0) {
    					const metadataCueMatch = metadataTrack.activeCues[0].text;
    
    					[].forEach.call(timelinePosts, (timelinePost) => {
    						timelinePost.classList.remove('is-current');
    					});
    
    					const idSelectors = document.querySelectorAll(`[data-id="${metadataCueMatch}"]`);
    
    					[].forEach.call(idSelectors, (idSelector) => {
    						idSelector.classList.add('is-current');
    					});
    
    					if (chapterCues) {
    						const chapterStartTime = chapterCues.startTime;
    
    						// Let stuff load
    						let listElement;
    						let timeOut = null;
    
    						setTimeout(() => { listElement = document.getElementById(chapterStartTime); }, 100);
    
    						timeOut = function wait(condition, callback) {
    							if (typeof condition() !== 'undefined' && listElement) {
    								listElement.classList.add('is-current-item');
    							} else {
    								setTimeout(() => {
    									wait(condition, callback);
    								}, 0);
    							}
    						};
    						timeOut(() => listElement, () => { });
    					}
    				}
    			}, false);
    
    			// Get subtitles cues from subtitles.vtt
    			subtitlesTrack.addEventListener('cuechange', () => {
    				const subtitlesCues = subtitlesTrack.activeCues;
    
    				if (subtitlesCues.length > 0) {
    					const subtitlesCuesMatch = subtitlesTrack.activeCues[0].text;
    					subtitlesContainer.innerHTML = `<span>${subtitlesCuesMatch}</span>`;
    				}
    			}, false);
    		}
    	}
    }
    
    displayChapters(chapterTrackElement);
    
  • URL: /components/raw/video-guide/video-guide.js
  • Filesystem Path: src/organisms/video-guide/video-guide.js
  • Size: 8.9 KB

No notes defined.