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

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

@@ -1,269 +1,103 @@
 'use strict';
 
-var video = document.querySelector('.js-video-guide');
-var playBtn = document.querySelector('.js-play-btn');
-var playIcon = document.querySelector('.js-play-icon');
-var pauseIcon = document.querySelector('.js-pause-icon');
-var subtitlesBtn = document.querySelector('.js-subtitles-btn');
-var abortButton = document.querySelector('.js-abort-guide');
-var subtitlesElement = document.getElementById('video-subtitles');
-var subtitlesContainer = document.querySelector('.js-subtitles-container');
-var chapterTrackElement = document.getElementById('video-chapters');
-var trackMetadataElement = document.getElementById('video-metadata');
-var subtitlesTrack = subtitlesElement === null ? '' : subtitlesElement.track;
-var chapterTrack = chapterTrackElement === null ? '' : chapterTrackElement.track;
-var metadataTrack = trackMetadataElement === null ? '' : trackMetadataElement.track;
-var forwardsButton = document.querySelector('.js-next-chapter');
-var backwardsButton = document.querySelector('.js-previous-chapter');
-var timelinePosts = document.querySelectorAll('.js-timeline-post');
-var navigationButton = document.querySelector('.js-show-timelineposts');
-var timeLinePosts = document.querySelector('.js-timeline-posts');
-var currentChapter = 0;
-var manualStep = false;
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-// Set sessionStorage if video has started playing
-function saveState() {
-	if (video.currentTime > 0) {
-		var currentGuideURL = window.location.href;
-		var 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);
-	}
-}
+var _VideoGuideSubtitles = require('./VideoGuideSubtitles');
 
-// Has src attributes been set already?
-if (video) {
-	// Store current time in on page reload
-	window.addEventListener('visibilitychange', saveState);
-	window.addEventListener('beforeunload', saveState);
+var _VideoGuideSubtitles2 = _interopRequireDefault(_VideoGuideSubtitles);
 
-	// Get value from sessionStorage if present
-	if (sessionStorage.getItem('InmsCurrentTime')) {
-		var videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
+var _VideoGuideTimeline = require('./VideoGuideTimeline');
 
-		if (videoCurrentTime > 0) {
-			video.currentTime = videoCurrentTime;
-		}
-	}
-
-	// Toggle subtitles
-	if (subtitlesBtn) {
-		subtitlesBtn.addEventListener('click', function () {
-			subtitlesBtn.classList.toggle('is-active');
-			subtitlesContainer.classList.toggle('is-visible');
-		});
-	}
+var _VideoGuideTimeline2 = _interopRequireDefault(_VideoGuideTimeline);
 
-	// Play / pause
-	if (playBtn) {
-		playBtn.addEventListener('click', function () {
-			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;
-			}
-		});
+var _VideoGuidePlayback = require('./VideoGuidePlayback');
 
-		video.addEventListener('playing', function () {
-			pauseIcon.classList.remove('is-hidden');
-			playIcon.classList.add('is-hidden');
-			manualStep = false;
-		});
+var _VideoGuidePlayback2 = _interopRequireDefault(_VideoGuidePlayback);
 
-		video.addEventListener('ended', function () {
-			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');
-		});
-	}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-	if (abortButton) {
-		abortButton.addEventListener('click', function (e) {
-			e.preventDefault();
-			var 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', function () {
-			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, function (txtTrack) {
-			txtTrack.mode = 'hidden';
-		});
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-		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');
+var VideoGuide = function () {
+	function VideoGuide(element) {
+		var _this = this;
 
-					// 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);
-			});
+		_classCallCheck(this, VideoGuide);
 
-			forwardsButton.addEventListener('click', function () {
-				var dataId = forwardsButton.dataset.id;
-				var currentTime = parseInt(dataId, 10);
-				manualStep = true;
-				currentTime += 1;
-				video.currentTime = currentTime;
-				currentChapter += 1;
-			});
+		this.onLoadedMetadata = function () {
+			_this.playback = new _VideoGuidePlayback2.default(_this.element, _this.video);
+			_this.subtitles = new _VideoGuideSubtitles2.default(_this.element, _this.video);
+			_this.timeline = new _VideoGuideTimeline2.default(_this.element, _this.video);
 
-			backwardsButton.addEventListener('click', function () {
-				var dataId = backwardsButton.dataset.id;
-				var lastTime = parseInt(dataId, 10);
-				lastTime -= 1;
-				video.currentTime = lastTime;
-				forwardsButton.removeAttribute('disabled');
-				manualStep = true;
-				currentChapter -= 1;
+			_this.video.classList.remove('is-loading');
+		};
 
-				if (video.currentTime <= 0) {
-					backwardsButton.removeAttribute('data-id');
+		this.dispatchEvent = function (eventName) {
+			[_this.playback, _this.subtitles, _this.timeline].forEach(function (instance) {
+				if (instance && eventName in instance) {
+					instance[eventName]();
 				}
 			});
+		};
 
-			chapterTrack.addEventListener('cuechange', function () {
-				// Fire this whenever the chapters changes
-				var myCues = chapterTrack.activeCues;
-				if (myCues.length > 0) {
-					var currentLocation = chapterTrack.activeCues[0].startTime;
-					var nextLocation = chapterTrack.activeCues[0].endTime;
-					var cueMatch = chapterTrack.activeCues[0].text;
-					var 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');
-					}
+		this.onPlay = function () {
+			return _this.dispatchEvent('onPlay');
+		};
 
-					// Handle current and watched items
-					[].forEach.call(matchingCueArray, function (matchingCue) {
-						var thisChapter = matchingCue;
-						if (thisChapter.innerHTML === cueMatch) {
-							var chapter = thisChapter;
+		this.onPause = function () {
+			return _this.dispatchEvent('onPause');
+		};
 
-							if (chapter === thisChapter) {
-								// get the chapter <li> elements based on the currentLocation
-								var locations = [].slice.call(chapter.closest('figure').querySelectorAll('.js-chapters li'));
+		this.onEnded = function () {
+			return _this.dispatchEvent('onEnded');
+		};
 
-								[].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');
-								});
-								chapter.parentNode.classList.add('is-current-item');
-								chapter.classList.add('is-current');
-							}
-						}
-					});
-				}
-			}, false);
-
-			// Get timeline post IDs from metadata.vtt
-			metadataTrack.addEventListener('cuechange', function () {
-				var metadataCues = metadataTrack.activeCues;
-				var chapterCues = chapterTrack.activeCues[0];
-
-				if (metadataCues.length > 0) {
-					var metadataCueMatch = metadataTrack.activeCues[0].text;
+		this.onTimeUpdate = function () {
+			return _this.dispatchEvent('onTimeUpdate');
+		};
 
-					[].forEach.call(timelinePosts, function (timelinePost) {
-						timelinePost.classList.remove('is-current');
-					});
+		this.onAbort = function () {
+			_this.dispatchEvent('onAbort');
+			window.location.href = _this.abortBtn.href;
+		};
 
-					var idSelectors = document.querySelectorAll('[data-id="' + metadataCueMatch + '"]');
+		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;
 
-					[].forEach.call(idSelectors, function (idSelector) {
-						idSelector.classList.add('is-current');
-					});
-
-					if (chapterCues) {
-						var chapterStartTime = chapterCues.startTime;
+		// Set all track elements to hidden mode to allow scripting
+		[].forEach.call(this.video.textTracks, function (txtTrack) {
+			txtTrack.mode = 'hidden';
+		});
 
-						// Let stuff load
-						var listElement = void 0;
-						var timeOut = null;
+		this.attach();
 
-						setTimeout(function () {
-							listElement = document.getElementById(chapterStartTime);
-						}, 100);
+		// loadedmetadata might not be fired if the video is already loaded
+		if (this.video.readyState >= 1) {
+			this.onLoadedMetadata();
+		}
+	}
 
-						timeOut = function wait(condition, callback) {
-							if (typeof condition() !== 'undefined' && listElement) {
-								listElement.classList.add('is-current-item');
-							} else {
-								setTimeout(function () {
-									wait(condition, callback);
-								}, 0);
-							}
-						};
-						timeOut(function () {
-							return listElement;
-						}, function () {});
-					}
-				}
-			}, false);
+	_createClass(VideoGuide, [{
+		key: 'attach',
+		value: function 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);
+		}
+	}]);
 
-			// Get subtitles cues from subtitles.vtt
-			subtitlesTrack.addEventListener('cuechange', function () {
-				var subtitlesCues = subtitlesTrack.activeCues;
+	return VideoGuide;
+}();
 
-				if (subtitlesCues.length > 0) {
-					var subtitlesCuesMatch = subtitlesTrack.activeCues[0].text;
-					subtitlesContainer.innerHTML = '<span>' + subtitlesCuesMatch + '</span>';
-				}
-			}, false);
-		}
-	}
-}
+var elements = document.querySelectorAll('[data-video-guide]');
 
-displayChapters(chapterTrackElement);
+elements.forEach(function (element) {
+	return new VideoGuide(element);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.24.30-beta.0.1",
+	"version": "2.24.30-beta.0.3",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/assets/video/guidad-tur-nar-internet-kom-chapters.vtt

@@ -0,0 +1,22 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:31.000
+Kapitel 1 / 7: Introduktion
+
+00:00:32.000 --> 00:02:18.000
+Kapitel 2 / 7: Minns du ditt första möte med internet?
+
+00:02:19.000 --> 00:03:44.000
+Kapitel 3 / 7: Tidiga internet i hemmet
+
+00:03:45.000 --> 00:05:59.000
+Kapitel 4 / 7: De första hemsidorna
+
+00:06:00.000 --> 00:08:21.000
+Kapitel 5 / 7: Lunarstorm och nätet innan sociala medier
+
+00:08:22.000 --> 00:09:36.000
+Kapitel 6 / 7: Flash-explosionen
+
+00:09:37.000 --> 00:11:36.000
+Kapitel 7 / 7: 2000-talet

package/src/assets/video/guidad-tur-nar-internet-kom-metadata.vtt

@@ -0,0 +1,89 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:08.000
+95494
+
+A second headline
+00:00:08.000 --> 00:00:32.000
+95497
+
+A third headline
+00:00:32.000 --> 00:01:12.000
+95463
+
+00:01:12.000 --> 00:01:24.000
+95461
+
+00:01:24.000 --> 00:01:40.000
+95475
+
+00:01:40.000 --> 00:02:02.000
+95459
+
+00:02:02.000 --> 00:02:19.000
+95450
+
+00:02:19.000 --> 00:02:47.000
+76402
+
+00:02:47.000 --> 00:03:17.000
+76293
+
+00:03:17.000 --> 00:03:45.000
+80889
+
+00:03:45.000 --> 00:04:08.000
+95472
+
+00:04:08.000 --> 00:04:24.000
+95471
+
+00:04:24.000 --> 00:04:50.000
+90431
+
+00:04:50.000 --> 00:05:30.000
+95464
+
+00:05:30.000 --> 00:06:00.000
+95448
+
+00:06:00.000 --> 00:06:53.000
+76309
+
+00:06:53.000 --> 00:07:16.000
+95456
+
+00:07:16.000 --> 00:07:43.000
+76300
+
+00:07:43.000 --> 00:07:57.000
+95447
+
+00:07:57.000 --> 00:08:22.000
+80888
+
+00:08:22.000 --> 00:08:56.000
+80747
+
+00:08:56.000 --> 00:09:37.000
+84790
+
+00:09:37.000 --> 00:10:15.000
+95455
+
+00:10:15.000 --> 00:10:27.000
+80637
+
+00:10:27.000 --> 00:10:50.000
+95477
+
+00:10:50.000 --> 00:11:00.000
+95466
+
+00:11:00.000 --> 00:11:37.000
+95467
+
+
+
+
+