@internetstiftelsen/styleguide 2.24.30-beta.0.1 → 2.24.30-beta.0.3

package/src/organisms/video-guide/VideoGuideSubtitles.js

@@ -0,0 +1,43 @@
+export default class VideoGuideSubtitles {
+	constructor(element, video) {
+		this.element = element;
+		this.video = video;
+		this.subtitlesBtn = element.querySelector('.js-subtitles-btn');
+		this.subtitlesContainer = element.querySelector('.js-subtitles-container');
+
+		this.init();
+		this.attach();
+	}
+
+	init() {
+		this.subtitles = this.video.textTracks.getTrackById('video-subtitles');
+	}
+
+	attach() {
+		this.subtitlesBtn.addEventListener('click', this.toggleSubtitles);
+		this.subtitles.addEventListener('cuechange', this.onCueChange);
+	}
+
+	clearSubtitles() {
+		this.subtitlesContainer.innerHTML = '';
+	}
+
+	onEnded = () => {
+		this.clearSubtitles();
+	};
+
+	onCueChange = () => {
+		const { activeCues } = this.subtitles;
+
+		if (activeCues.length > 0) {
+			this.subtitlesContainer.innerHTML = `<span>${activeCues[0].text}</span>`;
+		} else {
+			this.clearSubtitles();
+		}
+	};
+
+	toggleSubtitles = () => {
+		this.subtitlesBtn.classList.toggle('is-active');
+		this.subtitlesContainer.classList.toggle('is-visible');
+	};
+}

package/src/organisms/video-guide/VideoGuideTimeline.js

@@ -0,0 +1,76 @@
+export default class VideoGuideTimeline {
+	constructor(element, video) {
+		this.element = element;
+		this.video = video;
+		this.container = element.querySelector('.js-timeline-posts');
+		this.posts = Array.from(element.querySelectorAll('.js-timeline-post'));
+		this.toggleBtn = element.querySelector('.js-show-timelineposts');
+		this.headlineTpl = element.querySelector('[data-video-headline-tpl]');
+		this.headlineCache = {};
+
+		this.init();
+		this.attach();
+	}
+
+	init() {
+		this.meta = this.video.textTracks.getTrackById('video-metadata');
+	}
+
+	attach() {
+		this.meta.addEventListener('cuechange', this.onCueChange);
+
+		if (this.toggleBtn) {
+			this.toggleBtn.addEventListener('click', this.togglePosts);
+		}
+	}
+
+	togglePosts = () => {
+		this.toggleBtn.classList.toggle('is-toggeled');
+		this.container.classList.toggle('is-visible');
+	};
+
+	createImageHeadline(activeCue, post) {
+		if (activeCue.text in this.headlineCache) {
+			return;
+		}
+
+		let element = post.querySelector('[data-video-headline-tpl]');
+
+		if (post.querySelector('[data-video-headline-tpl]')) {
+			this.headlineCache[activeCue.text] = element;
+			return;
+		}
+
+		element = this.headlineTpl.cloneNode(true);
+		const prevHeadline = element.querySelector('h1');
+		const headline = document.createElement('h2');
+
+		headline.className = prevHeadline.className;
+		headline.innerHTML = activeCue.id;
+
+		prevHeadline.parentNode.replaceChild(headline, prevHeadline);
+		post.appendChild(element);
+
+		this.headlineCache[activeCue.text] = element;
+	}
+
+	onCueChange = () => {
+		const { activeCues } = this.meta;
+
+		if (activeCues.length > 0) {
+			const activeCue = activeCues[0];
+
+			this.posts.forEach((post) => {
+				if (post.dataset.id === activeCue.text) {
+					post.classList.add('is-current');
+
+					if (post.classList.contains('js-timeline-image') && activeCue.id) {
+						this.createImageHeadline(activeCue, post);
+					}
+				} else {
+					post.classList.remove('is-current');
+				}
+			});
+		}
+	};
+}

package/src/organisms/video-guide/_video-guide.scss

@@ -42,7 +42,6 @@
 		bottom: 0;
 		z-index: 1;
 		justify-content: center;
-		opacity: 0;
 		transition: opacity 0.25s ease-out;
 		margin: 0;
 		padding: 0;
@@ -52,6 +51,10 @@
 			opacity: 1;
 		}
 
+		&.is-current ~ & {
+			opacity: 0;
+		}
+
 		img {
 			border-radius: 0;
 			object-fit: cover;
@@ -381,6 +384,7 @@
 
 	@include e(buttons) {
 		display: flex;
+		align-items: center;
 	}
 
 	@include e(button) {
@@ -393,7 +397,7 @@
 
 		&:disabled,
 		&:disabled:focus,
-		&:not([class*="play"]):not([class*="subtitles"]):not([data-id]),
+		&:not([class*="play"]):not([class*="subtitles"]):not([class*="chapter"]),
 		&:disabled:focus-visible {
 			pointer-events: none;
 			cursor: not-allowed;
@@ -418,6 +422,12 @@
 		}
 	}
 
+	@include e(countdown) {
+		font-size: $size-medium-plus;
+		padding-left: rhythm(1);
+		padding-right: rhythm(1);
+	}
+
 	@include e(play-icon) {
 		width: $icon-size-large * 1.5;
 		height: $icon-size-large * 1.5;
@@ -505,4 +515,4 @@
 			font-size: initial;
 		}
 	}
-}
+}

package/src/organisms/video-guide/getCurrentCueIndex.js

@@ -0,0 +1,6 @@
+export default function getCurrentCueIndex(target) {
+	const activeCue = target.activeCues[0];
+	const { cues } = target;
+
+	return Math.max(Array.prototype.indexOf.call(cues, activeCue), 0);
+}

package/src/organisms/video-guide/video-guide.config.js

@@ -2,8 +2,8 @@ module.exports = {
 	status: 'prototype',
 
 	context: {
-		videoSrc: '/assets/video/Internets-Historia-HEVC-h265-vp9-chrome.webm',
-		videoSrc2: '/assets/video/Internets-Historia-HEVC-h265-HEVC-h265.mov',
+		videoSrc: 'https://ny.internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-till-svenska-hem.mp4',
+		videoSrc2: 'https://ny.internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-till-svenska-hem-vp9-chrome.webm',
 
 		variants: [
 			{
@@ -14,4 +14,4 @@ module.exports = {
 			}
 		]
 	}
-}
+}

package/src/organisms/video-guide/video-guide.js

@@ -1,264 +1,68 @@
-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;
+import VideoGuideSubtitles from './VideoGuideSubtitles';
+import VideoGuideTimeline from './VideoGuideTimeline';
+import VideoGuidePlayback from './VideoGuidePlayback';
+
+class VideoGuide {
+	constructor(element) {
+		this.element = element;
+		this.video = element.querySelector('.js-video-guide');
+		this.abortBtn = element.querySelector('.js-abort-guide');
+		this.playback = null;
+		this.subtitles = null;
+		this.timeline = null;
 
-// Set sessionStorage if video has started playing
-function saveState() {
-	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);
-	}
-}
-
-// Has src attributes been set already?
-if (video) {
-	// Store current time in on page reload
-	window.addEventListener('visibilitychange', saveState);
-	window.addEventListener('beforeunload', saveState);
+		// Set all track elements to hidden mode to allow scripting
+		[].forEach.call(this.video.textTracks, (txtTrack) => {
+			txtTrack.mode = 'hidden';
+		});
 
-	// Get value from sessionStorage if present
-	if (sessionStorage.getItem('InmsCurrentTime')) {
-		const videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
+		this.attach();
 
-		if (videoCurrentTime > 0) {
-			video.currentTime = videoCurrentTime;
+		// loadedmetadata might not be fired if the video is already loaded
+		if (this.video.readyState >= 1) {
+			this.onLoadedMetadata();
 		}
 	}
 
-	// Toggle subtitles
-	if (subtitlesBtn) {
-		subtitlesBtn.addEventListener('click', () => {
-			subtitlesBtn.classList.toggle('is-active');
-			subtitlesContainer.classList.toggle('is-visible');
-		});
+	attach() {
+		this.video.addEventListener('loadedmetadata', this.onLoadedMetadata);
+		this.video.addEventListener('play', this.onPlay);
+		this.video.addEventListener('pause', this.onPause);
+		this.video.addEventListener('ended', this.onEnded);
+		this.video.addEventListener('timeupdate', this.onTimeUpdate);
+		this.abortBtn.addEventListener('click', this.onAbort);
 	}
 
-	// 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;
-		});
+	onLoadedMetadata = () => {
+		this.playback = new VideoGuidePlayback(this.element, this.video);
+		this.subtitles = new VideoGuideSubtitles(this.element, this.video);
+		this.timeline = new VideoGuideTimeline(this.element, this.video);
 
-		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');
-		});
+		this.video.classList.remove('is-loading');
 	}
 
-	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');
+	dispatchEvent = (eventName) => {
+		[this.playback, this.subtitles, this.timeline].forEach((instance) => {
+			if (instance && eventName in instance) {
+				instance[eventName]();
+			}
 		});
 	}
-}
-
-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');
+	onPlay = () => this.dispatchEvent('onPlay');
 
-					// 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);
-			});
+	onPause = () => this.dispatchEvent('onPause');
 
-			forwardsButton.addEventListener('click', () => {
-				const dataId = forwardsButton.dataset.id;
-				let currentTime = parseInt(dataId, 10);
-				manualStep = true;
-				currentTime += 1;
-				video.currentTime = currentTime;
-				currentChapter += 1;
-			});
+	onEnded = () => this.dispatchEvent('onEnded');
 
-			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;
+	onTimeUpdate = () => this.dispatchEvent('onTimeUpdate');
 
-				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);
-		}
-	}
+	onAbort = () => {
+		this.dispatchEvent('onAbort');
+		window.location.href = this.abortBtn.href;
+	};
 }
 
-displayChapters(chapterTrackElement);
+const elements = document.querySelectorAll('[data-video-guide]');
+
+elements.forEach((element) => new VideoGuide(element));

package/src/assets/video/chapters.vtt

@@ -1,25 +0,0 @@
-WEBVTT
-
-00:00:00.000 --> 00:00:39.000
-Kapitel 1 / 8: Introduktion
-
-00:00:39.000 --> 00:01:51.500
-Kapitel 2 / 8: Idén om internet
-
-00:01:51.500 --> 00:02:53.000
-Kapitel 3 / 8: Arpanet blir till
-
-00:02:53.000 --> 00:03:27.000
-Kapitel 4 / 8: TCP/IP uppfinns
-
-00:03:27.000 --> 00:03:56.500
-Kapitel 5 / 8: Sveriges första internetnod
-
-00:03:56.500 --> 00:04:34.000
-Kapitel 6 / 8: Toppdomänen .se registreras
-
-00:04:34.000 --> 00:05:17.000
-Kapitel 7 / 8: World Wide Web
-
-00:05:17.000 --> 00:06:28.000
-Kapitel 8 / 8: Mosaic - den grafiska webbläsaren

package/src/assets/video/metadata.vtt

@@ -1,28 +0,0 @@
-WEBVTT
-
-00:00:00.000 --> 00:00:25.000
-89108
-
-00:00:25.000 --> 00:00:39.000
-91027
-
-00:00:39.000 --> 00:01:51.500
-81345
-
-00:01:51.500 --> 00:02:23.000
-76810
-
-00:02:23.000 --> 00:03:27.000
-86454
-
-00:03:27.000 --> 00:03:56.500
-80127
-
-00:03:56.500 --> 00:04:34.000
-76325
-
-00:04:34.000 --> 00:05:17.000
-76280
-
-00:05:17.000 --> 00:06:28.000
-80725

package/src/assets/video/videoplayer.vtt

@@ -1,25 +0,0 @@
-WEBVTT
-
-1
-00:00:00.500 --> 00:00:02.000
-Lorem ipsum dolor sit amet, consectetur adipiscing elit
-
-2
-00:00:02.100 --> 00:00:03.000
-Phasellus eget lorem dui
-
-3
-00:00:03.100 --> 00:00:04.500
-Morbi ac nisi ac purus maximus semper a vitae diam fusce sit amet libero non tortor
-
-4
-00:00:04.600 --> 00:00:05.500
-Ut scelerisque sagittis justo vitae viverra
-
-5
-00:00:05.600 --> 00:00:06.500
-unc blandit justo sed odio tempus ultrices. Pellentesque sollicitudin justo.
-
-6
-00:00:06.100 --> 00:00:08.000
-Etiam ut volutpat tortor. Nunc iaculis luctus sapien.