<div class="wrapper">
    <div class="o-video-guide">
        <figure>
            <div class="o-video-guide__inner-wrapper">
                <div class="o-video-guide__video-container">
                    <div class="o-video-guide__subtitles js-subtitles-container"></div>
                    <video class="o-video-guide__video js-video-guide is-loading" disablePictureInPicture disableRemotePlayback playsinline preload="metadata" data-featured-image="/assets/images/sticky-guide.png">
                        <source src="/assets/video/Internets-Historia-HEVC-h265-HEVC-h265.mov" type='video/mp4; codecs="hvc1"'>
                        <source src="/assets/video/Internets-Historia-HEVC-h265-vp9-chrome.webm" type="video/webm">
                        <track id="video-subtitles" kind="metadata" src="/assets/video/videoplayer.vtt" srclang="sv" default>
                        <track id="video-chapters" kind="chapters" label="Kapitel" src="/assets/video/chapters.vtt" srclang="sv">
                        <track id="video-metadata" kind="metadata" label="timeLineItems" src="/assets/video/metadata.vtt" srclang="sv">
                    </video>
                    <ul class="u-list-clean">
                        <li class="o-video-guide__timeline-item js-timeline-post" data-id="89108">
                            <div class="o-video-guide__timeline-item__text">
                                <h1 class="o-video-guide__timeline-item__text__headline">Den stora berättelsen om internet</h1>
                            </div>
                            <img src="/assets/images/adalovelace.jpg" class="" alt="Man using his phone">
                        </li>
                        <li class="o-video-guide__timeline-item js-timeline-post" data-id="91027">
                            <img src="/assets/images/US-Robotics-56k-modem.jpg" class="" alt="Man using his phone">
                        </li>
                        <li class="o-video-guide__timeline-item js-timeline-post" data-id="81345">
                            <img src="/assets/images/8-interesting-facts-about-the-internet-1875674595-jul-12-2012-600x400.jpeg" class="" alt="JCR Licklider">
                        </li>
                        <li class="o-video-guide__timeline-item js-timeline-post" data-id="76810">
                            <img src="/assets/images/arpanet2.png" class="" alt="Arpanet">
                        </li>
                        <li class="o-video-guide__timeline-item js-timeline-post" data-id="86454">
                            <img src="/assets/images/tcpiptecknad.png" class="" alt="TCP/IP">
                        </li>
                        <li class="o-video-guide__timeline-item js-timeline-post" data-id="80127">
                            <img src="/assets/images/ulf-bilting.jpeg" class="" alt="Ulf Bilting">
                        </li>
                        <li class="o-video-guide__timeline-item js-timeline-post" data-id="76325">
                            <img src="/assets/images/bjorneriksen-260x390.jpeg" class="" alt="Björn Eriksen">
                        </li>
                        <li class="o-video-guide__timeline-item js-timeline-post" data-id="76280">
                            <img src="/assets/images/wwwtimbernerslee.png" class="" alt="Tim Berners-Lee">
                        </li>
                        <li class="o-video-guide__timeline-item js-timeline-post" data-id="80725">
                            <img src="/assets/images/mos-10-e1504100510732.jpeg" class="" alt="Mosaic">
                        </li>
                    </ul>
                </div>
                <div class="o-video-guide__controls">
                    <figcaption class="o-video-guide__chapters">
                        <span class="o-video-guide__title delta">Den stora berättelsen om internet</span>
                        <ol class="o-video-guide__chapters__list js-chapters">
                            <li id="0" class="is-current-item"><a rel="0" tabindex="0">Kapitel 1 / 8: Introduktion</a></li>
                            <li id="39"><a rel="39" tabindex="0">Kapitel 2 / 8: Idén om internet</a></li>
                            <li id="111.5"><a rel="111.5" tabindex="0">Kapitel 3 / 8: Arpanet blir till</a></li>
                            <li id="173"><a rel="173" tabindex="0">Kapitel 4 / 8: TCP/IP uppfinns</a></li>
                            <li id="207"><a rel="207" tabindex="0">Kapitel 5 / 8: Sveriges första internetnod</a></li>
                            <li id="236.5"><a rel="236.5" tabindex="0">Kapitel 6 / 8: Toppdomänen .se registreras</a></li>
                            <li id="274"><a rel="274" tabindex="0">Kapitel 7 / 8: World Wide Web</a></li>
                            <li id="317"><a rel="317" tabindex="0">Kapitel 8 / 8: Mosaic - den grafiska webbläsaren</a></li>
                        </ol>
                    </figcaption>
                    <div class="o-video-guide__buttons">
                        <button type="button" class="o-video-guide__button js-previous-chapter" title="Föregående kapitel">
                            <span class="u-visuallyhidden">Föregående kapitel</span>
                            <svg class="icon o-video-guide__rewind-icon">
                                <use xlink:href="#icon-step-backwards"></use>
                            </svg>
                        </button>
                        <button type="button" class="o-video-guide__button o-video-guide__button--play js-play-btn" title="Play/Pause">
                            <span class="u-visuallyhidden">Play/Pause</span>
                            <svg class="icon o-video-guide__play-icon js-play-icon">
                                <use xlink:href="#icon-play"></use>
                            </svg>
                            <svg class="icon o-video-guide__play-icon js-pause-icon is-hidden">
                                <use xlink:href="#icon-pause"></use>
                            </svg>
                        </button>
                        <button type="button" class="o-video-guide__button o-video-guide__button--next js-next-chapter" title="Nästa kapitel">
                            <span class="u-visuallyhidden">Nästa kapitel</span>
                            <svg class="icon o-video-guide__forward-icon">
                                <use xlink:href="#icon-step-forwards"></use>
                            </svg>
                        </button>
                        <button type="button" class="o-video-guide__button o-video-guide__button--subtitles js-subtitles-btn" title="Undertexter">
                            <span class="u-visuallyhidden">Undertexter</span>
                            <svg class="icon o-video-guide__subtitles-icon">
                                <use xlink:href="#icon-subtitles"></use>
                            </svg>
                        </button>
                    </div>
                </div>
                <a href="/components/detail/video-guide--list" target="_parent" class="o-video-guide__button-abort a-button a-button--small a-button--peacock js-abort-guide">
                    <span class="a-button__text color-snow u-nowrap">Avsluta</span>
                </a>
            </div>
            <nav class="o-video-guide__timelineposts js-timeline-posts">
                <button type="button" class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-video-guide__timelineposts__button-navigation js-show-timelineposts">
                    <span class="a-button__text">Visa navigering</span>
                    <svg class="icon a-button__icon">
                        <use xlink:href="#icon-arrow-backwards"></use>
                    </svg>
                </button>
                <dl class="u-list-clean o-video-guide__timelineposts__list">
                    <dt>Fördjupa dig</dt>
                    <dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="81345" data-label="Läs mer">1963 - JCR Licklider formulerar idén om internet – ett ”intergalaktiskt nätverk”</a></dd>
                    <dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="76810" data-label="Läs mer">1969 - Starten på internet heter Arpanet</a></dd>
                    <dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="86454" data-label="Läs mer">1974 - Det här är TCP/IP – nu uppfinns tekniken bakom internet</a></dd>
                    <dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="80127" data-label="Läs mer">1984 - Nu kommer internet till Sverige – Ulf Bilting skapar första uppkopplingen</a></dd>
                    <dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="76325" data-label="Läs mer">1986 - Björn Eriksen kniper toppdomänen – så blir Sverige .se på internet</a></dd>
                    <dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="76280" data-label="Läs mer">1989 - World Wide Web skapas – nu kan internet bli en publiksuccé</a></dd>
                    <dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="80725" data-label="Läs mer">1993 - Webbläsaren Mosaic blir en dundersuccé – nu blir surfandet njutbart</a></dd>
                </dl>
            </nav>
        </figure>
    </div>
    <div class="m-continue-video-guide js-guide-continue u-visuallyhidden">
        <div class="m-continue-video-guide__inner">
            <a href="/components/detail/video-guide.html" class="m-continue-video-guide__continue js-guide-continue-link" data-alt-text="Fortsätt den guidade turen">
                <span class="u-visuallyhidden">Guidad tur</span>
                <div class="m-continue-video-guide__arrow"></div>
            </a>
            <progress-ring class="m-continue-video-guide__progressbar" stroke="4" radius="50" progress="70"></progress-ring>
            <img class="m-continue-video-guide__image js-guide-continue-image" src="/assets/images/sticky-guide.png" alt="Fortsätt den guidade turen">
        </div>
    </div>
</div>
<div class="wrapper">
	<div class="o-video-guide">
		<figure>
			<div class="o-video-guide__inner-wrapper">
				<div class="o-video-guide__video-container">
					<div class="o-video-guide__subtitles js-subtitles-container"></div>
					<video class="o-video-guide__video js-video-guide is-loading" disablePictureInPicture disableRemotePlayback playsinline preload="metadata" data-featured-image="/assets/images/sticky-guide.png">
						<source src="{{videoSrc2}}" type='video/mp4; codecs="hvc1"'>
						<source src="{{videoSrc}}" type="video/webm">
						<track id="video-subtitles" kind="metadata" src="/assets/video/videoplayer.vtt" srclang="sv" default>
						<track id="video-chapters" kind="chapters" label="Kapitel" src="/assets/video/chapters.vtt" srclang="sv">
						<track id="video-metadata" kind="metadata" label="timeLineItems" src="/assets/video/metadata.vtt" srclang="sv">
					</video>
					<ul class="u-list-clean">
						<li class="o-video-guide__timeline-item js-timeline-post" data-id="89108">
							<div class="o-video-guide__timeline-item__text">
								<h1 class="o-video-guide__timeline-item__text__headline">Den stora berättelsen om internet</h1>
							</div>
							<img src="/assets/images/adalovelace.jpg" class="" alt="Man using his phone">
						</li>
						<li class="o-video-guide__timeline-item js-timeline-post" data-id="91027">
							<img src="/assets/images/US-Robotics-56k-modem.jpg" class="" alt="Man using his phone">
						</li>
						<li class="o-video-guide__timeline-item js-timeline-post" data-id="81345">
							<img src="/assets/images/8-interesting-facts-about-the-internet-1875674595-jul-12-2012-600x400.jpeg" class="" alt="JCR Licklider">
						</li>
						<li class="o-video-guide__timeline-item js-timeline-post" data-id="76810">
							<img src="/assets/images/arpanet2.png" class="" alt="Arpanet">
						</li>
						<li class="o-video-guide__timeline-item js-timeline-post" data-id="86454">
							<img src="/assets/images/tcpiptecknad.png" class="" alt="TCP/IP">
						</li>
						<li class="o-video-guide__timeline-item js-timeline-post" data-id="80127">
							<img src="/assets/images/ulf-bilting.jpeg" class="" alt="Ulf Bilting">
						</li>
						<li class="o-video-guide__timeline-item js-timeline-post" data-id="76325">
							<img src="/assets/images/bjorneriksen-260x390.jpeg" class="" alt="Björn Eriksen">
						</li>
						<li class="o-video-guide__timeline-item js-timeline-post" data-id="76280">
							<img src="/assets/images/wwwtimbernerslee.png" class="" alt="Tim Berners-Lee">
						</li>
						<li class="o-video-guide__timeline-item js-timeline-post" data-id="80725">
							<img src="/assets/images/mos-10-e1504100510732.jpeg" class="" alt="Mosaic">
						</li>
					</ul>
				</div>
				<div class="o-video-guide__controls">
					<figcaption class="o-video-guide__chapters">
						<span class="o-video-guide__title delta">Den stora berättelsen om internet</span>
						<ol class="o-video-guide__chapters__list js-chapters">
							<li id="0" class="is-current-item"><a rel="0" tabindex="0">Kapitel 1 / 8: Introduktion</a></li>
							<li id="39"><a rel="39" tabindex="0">Kapitel 2 / 8: Idén om internet</a></li>
							<li id="111.5"><a rel="111.5" tabindex="0">Kapitel 3 / 8: Arpanet blir till</a></li>
							<li id="173"><a rel="173" tabindex="0">Kapitel 4 / 8: TCP/IP uppfinns</a></li>
							<li id="207"><a rel="207" tabindex="0">Kapitel 5 / 8: Sveriges första internetnod</a></li>
							<li id="236.5"><a rel="236.5" tabindex="0">Kapitel 6 / 8: Toppdomänen .se registreras</a></li>
							<li id="274"><a rel="274" tabindex="0">Kapitel 7 / 8: World Wide Web</a></li>
							<li id="317"><a rel="317" tabindex="0">Kapitel 8 / 8: Mosaic - den grafiska webbläsaren</a></li>
						</ol>
					</figcaption>
					<div class="o-video-guide__buttons">
						<button type="button" class="o-video-guide__button js-previous-chapter" title="Föregående kapitel">
							<span class="u-visuallyhidden">Föregående kapitel</span>
							{{>@ icon id="step-backwards" additional_classes="o-video-guide__rewind-icon"}}
						</button>
						<button type="button" class="o-video-guide__button o-video-guide__button--play js-play-btn" title="Play/Pause">
							<span class="u-visuallyhidden">Play/Pause</span>
							{{>@ icon id="play" additional_classes="o-video-guide__play-icon js-play-icon"}}
							{{>@ icon id="pause" additional_classes="o-video-guide__play-icon js-pause-icon is-hidden"}}
						</button>
						<button type="button" class="o-video-guide__button o-video-guide__button--next js-next-chapter" title="Nästa kapitel">
							<span class="u-visuallyhidden">Nästa kapitel</span>
							{{>@ icon id="step-forwards" additional_classes="o-video-guide__forward-icon"}}
						</button>
						<button type="button" class="o-video-guide__button o-video-guide__button--subtitles js-subtitles-btn" title="Undertexter">
							<span class="u-visuallyhidden">Undertexter</span>
							{{>@ icon id="subtitles" additional_classes="o-video-guide__subtitles-icon"}}
						</button>
					</div>
				</div>
				<a href="/components/detail/video-guide--list" target="_parent" class="o-video-guide__button-abort a-button a-button--small a-button--peacock js-abort-guide">
					<span class="a-button__text color-snow u-nowrap">Avsluta</span>
				</a>
			</div>
			<nav class="o-video-guide__timelineposts js-timeline-posts">
				<button type="button" class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-video-guide__timelineposts__button-navigation js-show-timelineposts">
					<span class="a-button__text">Visa navigering</span>
					<svg class="icon a-button__icon">
						<use xlink:href="#icon-arrow-backwards"></use>
					</svg>
				</button>
				<dl class="u-list-clean o-video-guide__timelineposts__list">
					<dt>Fördjupa dig</dt>
					<dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="81345" data-label="Läs mer">1963 - JCR Licklider formulerar idén om internet – ett ”intergalaktiskt nätverk”</a></dd>
					<dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="76810" data-label="Läs mer">1969 - Starten på internet heter Arpanet</a></dd>
					<dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="86454" data-label="Läs mer">1974 - Det här är TCP/IP – nu uppfinns tekniken bakom internet</a></dd>
					<dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="80127" data-label="Läs mer">1984 - Nu kommer internet till Sverige – Ulf Bilting skapar första uppkopplingen</a></dd>
					<dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="76325" data-label="Läs mer">1986 - Björn Eriksen kniper toppdomänen – så blir Sverige .se på internet</a></dd>
					<dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="76280" data-label="Läs mer">1989 - World Wide Web skapas – nu kan internet bli en publiksuccé</a></dd>
					<dd><a href="#" class="o-video-guide__timelineposts__link js-timeline-post" data-id="80725" data-label="Läs mer">1993 - Webbläsaren Mosaic blir en dundersuccé – nu blir surfandet njutbart</a></dd>
				</dl>
			</nav>
		</figure>
	</div>
	{{> @continue-video-guide additional_classes="u-visuallyhidden"}}

</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.