@internetstiftelsen/styleguide 2.22.3-beta.0.58 → 2.22.3-beta.0.60

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

@@ -21,20 +21,9 @@ var navigationButton = document.querySelector('.js-show-timelineposts');
 var timeLinePosts = document.querySelector('.js-timeline-posts');
 var currentChapter = 1;
 var manualStep = false;
-var sourceElement = null;
 
 // Has src attributes been set already?
-if (sourceElement) {
-	document.location.reload();
-} else if (video) {
-	var dataSrc = video.dataset.src;
-
-	sourceElement = document.createElement('source');
-	sourceElement.setAttribute('src', dataSrc);
-	sourceElement.setAttribute('type', 'video/mp4');
-
-	video.appendChild(sourceElement);
-
+if (video) {
 	// Store current time in on page reload
 	window.addEventListener('unload', function () {
 		// Set localStorage if video has started playing
@@ -135,38 +124,36 @@ function displayChapters() {
 		});
 
 		if (chapterTrack.kind === 'chapters') {
-			video.addEventListener('loadedmetadata', function () {
-				// Loop through chapters and create chapter list
-				// Let data load
-				setTimeout(function () {
-					video.classList.remove('is-loading');
-					[].forEach.call(chapterTrack.cues, function (cues) {
-						var chapterName = cues.text;
-						var start = cues.startTime;
-						var newLocale = document.createElement('li');
-						var location = document.createElement('a');
-
-						location.setAttribute('rel', start);
-						newLocale.setAttribute('id', start);
-						location.setAttribute('tabindex', '0');
-
-						// Plain text from the chapter file into HTML text
-						var localeDescription = chapterName;
-						location.innerHTML = localeDescription;
-						newLocale.appendChild(location);
-						locationList.appendChild(newLocale);
-
-						location.addEventListener('click', function () {
-							video.currentTime = location.id;
-						}, false);
-					});
-
-					// If not set in sessionStorgare, set first cue on forward button on page load
-					if (!localStorage.getItem('InmsCurrentTime')) {
-						forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
-					}
-				}, 100);
-			});
+			// Loop through chapters and create chapter list
+			// Let data load
+			setTimeout(function () {
+				video.classList.remove('is-loading');
+				[].forEach.call(chapterTrack.cues, function (cues) {
+					var chapterName = cues.text;
+					var start = cues.startTime;
+					var newLocale = document.createElement('li');
+					var location = document.createElement('a');
+
+					location.setAttribute('rel', start);
+					newLocale.setAttribute('id', start);
+					location.setAttribute('tabindex', '0');
+
+					// Plain text from the chapter file into HTML text
+					var localeDescription = chapterName;
+					location.innerHTML = localeDescription;
+					newLocale.appendChild(location);
+					locationList.appendChild(newLocale);
+
+					location.addEventListener('click', function () {
+						video.currentTime = location.id;
+					}, false);
+				});
+
+				// If not set in sessionStorgare, set first cue on forward button on page load
+				if (!localStorage.getItem('InmsCurrentTime')) {
+					forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
+				}
+			}, 100);
 
 			forwardsButton.addEventListener('click', function () {
 				var dataId = forwardsButton.dataset.id;
@@ -224,23 +211,10 @@ function displayChapters() {
 								// get the chapter <li> elements based on the currentLocation
 								var locations = [].slice.call(chapter.closest('figure').querySelectorAll('.js-chapters li'));
 
-								var counter = 0;
-
 								[].forEach.call(locations, function (location) {
 									// remove current classes from all items on page refresh
 									location.classList.remove('is-current-item');
 									location.querySelector('a').classList.remove('is-current');
-
-									if (location.classList.contains('is-current-item')) {
-										counter += 1; // iterate counter when active chapter is reached
-									}
-									if (counter < 1) {
-										// add watched class to everything before the current chapter to show progress
-										location.classList.add('is-watched');
-									} else {
-										// remove watched on all other items
-										location.classList.remove('is-watched');
-									}
 								});
 								chapter.parentNode.classList.add('is-current-item');
 								chapter.classList.add('is-current');
@@ -253,7 +227,7 @@ function displayChapters() {
 			// Get timeline post IDs from metadata.vtt
 			metadataTrack.addEventListener('cuechange', function () {
 				var metadataCues = metadataTrack.activeCues;
-				var chapterCues = chapterTrack.activeCues;
+				var chapterCues = chapterTrack.activeCues[0];
 
 				if (metadataCues.length > 0) {
 					var metadataCueMatch = metadataTrack.activeCues[0].text;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.3-beta.0.58",
+	"version": "2.22.3-beta.0.60",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

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

@@ -19,20 +19,9 @@ const navigationButton = document.querySelector('.js-show-timelineposts');
 const timeLinePosts = document.querySelector('.js-timeline-posts');
 let currentChapter = 1;
 let manualStep = false;
-let sourceElement = null;
 
 // Has src attributes been set already?
-if (sourceElement) {
-	document.location.reload();
-} else if (video) {
-	const dataSrc = video.dataset.src;
-
-	sourceElement = document.createElement('source');
-	sourceElement.setAttribute('src', dataSrc);
-	sourceElement.setAttribute('type', 'video/mp4');
-
-	video.appendChild(sourceElement);
-
+if (video) {
 	// Store current time in on page reload
 	window.addEventListener('unload', () => {
 		// Set localStorage if video has started playing
@@ -133,38 +122,36 @@ function displayChapters() {
 		});
 
 		if (chapterTrack.kind === 'chapters') {
-			video.addEventListener('loadedmetadata', () => {
-				// Loop through chapters and create chapter list
-				// Let data load
-				setTimeout(() => {
-					video.classList.remove('is-loading');
-					[].forEach.call(chapterTrack.cues, (cues) => {
-						const chapterName = cues.text;
-						const start = cues.startTime;
-						const newLocale = document.createElement('li');
-						const location = document.createElement('a');
-
-						location.setAttribute('rel', start);
-						newLocale.setAttribute('id', start);
-						location.setAttribute('tabindex', '0');
-
-						// Plain text from the chapter file into HTML text
-						const localeDescription = chapterName;
-						location.innerHTML = localeDescription;
-						newLocale.appendChild(location);
-						locationList.appendChild(newLocale);
-
-						location.addEventListener('click', () => {
-							video.currentTime = location.id;
-						}, false);
-					});
-
-					// If not set in sessionStorgare, set first cue on forward button on page load
-					if (!localStorage.getItem('InmsCurrentTime')) {
-						forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
-					}
-				}, 100);
-			});
+			// Loop through chapters and create chapter list
+			// Let data load
+			setTimeout(() => {
+				video.classList.remove('is-loading');
+				[].forEach.call(chapterTrack.cues, (cues) => {
+					const chapterName = cues.text;
+					const start = cues.startTime;
+					const newLocale = document.createElement('li');
+					const location = document.createElement('a');
+
+					location.setAttribute('rel', start);
+					newLocale.setAttribute('id', start);
+					location.setAttribute('tabindex', '0');
+
+					// Plain text from the chapter file into HTML text
+					const localeDescription = chapterName;
+					location.innerHTML = localeDescription;
+					newLocale.appendChild(location);
+					locationList.appendChild(newLocale);
+
+					location.addEventListener('click', () => {
+						video.currentTime = location.id;
+					}, false);
+				});
+
+				// If not set in sessionStorgare, set first cue on forward button on page load
+				if (!localStorage.getItem('InmsCurrentTime')) {
+					forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
+				}
+			}, 100);
 
 			forwardsButton.addEventListener('click', () => {
 				const dataId = forwardsButton.dataset.id;
@@ -223,23 +210,10 @@ function displayChapters() {
 								const locations = [].slice.call(chapter.closest('figure')
 									.querySelectorAll('.js-chapters li'));
 
-								let counter = 0;
-
 								[].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');
-
-									if (location.classList.contains('is-current-item')) {
-										counter += 1; // iterate counter when active chapter is reached
-									}
-									if (counter < 1) {
-										// add watched class to everything before the current chapter to show progress
-										location.classList.add('is-watched');
-									} else {
-										// remove watched on all other items
-										location.classList.remove('is-watched');
-									}
 								});
 								chapter.parentNode.classList.add('is-current-item');
 								chapter.classList.add('is-current');
@@ -252,7 +226,7 @@ function displayChapters() {
 			// Get timeline post IDs from metadata.vtt
 			metadataTrack.addEventListener('cuechange', () => {
 				const metadataCues = metadataTrack.activeCues;
-				const chapterCues = chapterTrack.activeCues;
+				const chapterCues = chapterTrack.activeCues[0];
 
 				if (metadataCues.length > 0) {
 					const metadataCueMatch = metadataTrack.activeCues[0].text;