An old version of a video tutorial with sliding pages

vidtute.js

(function ($) {

	VIDTUTE = {};

	VIDTUTE.Utils = {
		timecodeToSeconds: function (strTimecode) {

			arrTime = strTimecode.split(':');
			//console.log(arrTime);

			return (parseInt(arrTime[0]) * 60) + (parseInt(arrTime[1])) + (parseInt(arrTime[2]) / 60);
		}
	};

	VIDTUTE.setupVideo = {
		init                 : function () {
			var _this = VIDTUTE.setupVideo;

			_this.$videoFrame = $('.video-frame');
			_this.$chaptersContainer = $('.chapters-container');

			if (_this.$videoFrame.length > 0 && _this.$chaptersContainer.length > 0) {
				_this.$chapters = _this.$chaptersContainer.find('.chapter');

				if (_this.$chapters.length > 0) {
					_this.$playButton = _this.$videoFrame.find('.btn-video-start');
					_this.videoIsLoaded = false;

					_this.setupChapters();
					_this.setupVideo();
					_this.setupFlickity();
					_this.bindEvents();
				}
			}
		},
		bindEvents           : function () {
			var _this = VIDTUTE.setupVideo;

			_this.$videoFrame.on('click', '.btn-video-start', function () {
				console.log('Clicked!');
				_this.loadVideo();
			});


			_this.flickity.on('cellSelect', function () {
				var selectedIndex = _this.flickity.selectedIndex;
				_this.currentChapterIndex = selectedIndex;
				console.log('on', selectedIndex, _this.videoIsLoaded);
				if (_this.videoIsLoaded) {
					console.log('Flickity select ', selectedIndex);
					_this.gotoVideoChapter(selectedIndex);
				}
			})
		},
		setupChapters        : function () {
			var _this = VIDTUTE.setupVideo,
				numChapters = _this.$chapters.length;

			if (0 === numChapters) {
				console.error('No chapters found. Cannot set anything up');
				return false;
			}
			_this.Data = {};
			_this.Data.Chapters = [];

			for (var i = 0; i < _this.$chapters.length; i++) {
				var $chapter = _this.$chapters[i],
					chapterStart = $($chapter).data('chapter-start');

				if ('' !== chapterStart) {
					_this.Data.Chapters.push({
						'chapterStartTimeCode': chapterStart,
						'chapterStartDecimals': VIDTUTE.Utils.timecodeToSeconds(chapterStart),
						'chapterContent'      : $chapter
					});
				}

			} // gathering chapter info

			for (var i = 0; i < _this.Data.Chapters.length - 1; i++) {
				var chapterObj = _this.Data.Chapters[i];

				chapterObj['chapterEndTimeCode'] = _this.Data.Chapters[i + 1]['chapterStartTimeCode'] - 0.1;
				chapterObj['chapterEndDecimals'] = _this.Data.Chapters[i + 1]['chapterStartDecimals'] - 0.1;

			}

			_this.currentChapterIndex = 0;

			console.table(_this.Data.Chapters);
		},
		setupVideo           : function () {
			var _this = VIDTUTE.setupVideo;

			_this.videoId = _this.$videoFrame.data('video-id');
			_this.videoUrl = _this.$videoFrame.data('video-url');
		},
		setupFlickity        : function () {
			var _this = VIDTUTE.setupVideo;

			_this.flickity = new Flickity('.chapters-container');

		},
		loadVideo            : function () {
			var _this = VIDTUTE.setupVideo;

			if ('' !== _this.videoId && '' !== _this.videoUrl) {
				if (_this.$videoFrame.find('#video-tutorial-player').length === 0) {

					var videoHtml = '<video id="video-tutorial-player" width="640" height="360" style="width: 100%; height: 100%;" preload="none" autoplay="true">';
					videoHtml += '<source type="video/youtube" src="' + _this.videoUrl + '" />';
					videoHtml += '</video>';

					_this.$videoFrame.html(videoHtml);
					_this.$player = _this.$videoFrame.find('#video-tutorial-player');

					_this.player = new MediaElementPlayer(_this.$player, {

						success: function (media, domNode) {
							_this.videoIsLoaded = true;


							// add HTML5 events to the YouTube API media object
							media.addEventListener('play', function () {
								console.log('yeah, it is playing!');
							}, false);

							media.addEventListener('timeupdate', function () {
								// access HTML5-like properties
								//console.log('current: ' + media.currentTime);
								_this.maybeChangeChapter(media.currentTime)

							}, false);

							// add click events to control player
							myMuteButton.addEventListener('click', function () {
								// HTML5 has a "muted" setter, but we have to use a function here
								media.setMuted(true);
							}, false);

							media.play();

						}
					});
				}
			}
		},
		setupVideoChapterLink: function () {
			var _this = VIDTUTE.setupVideo;


		},
		maybeChangeChapter   : function (currentTime) {
			var _this = VIDTUTE.setupVideo;

			//console.log(currentTime);
			for (var i = 0; i < _this.Data.Chapters.length; i++) {
				var thisChapter = _this.Data.Chapters[i],
					chapterStart = thisChapter['chapterStartDecimals'],
					isLast = _this.Data.Chapters.length - i == 1,
					chapterEnd = isLast ? '' : thisChapter['chapterEndDecimals'];

				if ((currentTime > chapterStart && currentTime < chapterEnd ) || (currentTime > chapterStart && isLast)) {
					if (_this.currentChapterIndex != i) {
						_this.currentChapterIndex = i;
						_this.flickity.select(i);
						console.log('Switching to chapter ' + i, chapterStart, chapterEnd);
					}
				}
			}
		},
		gotoVideoChapter     : function (index) {
			var _this = VIDTUTE.setupVideo;

			var chapterStartTime = _this.Data.Chapters[index]['chapterStartDecimals'];

			console.log(index, chapterStartTime);
			//	_this.player.pause();
			_this.player.setCurrentTime(chapterStartTime);
			//	_this.player.play();
		}
	};


	$(document).ready(function () {
		VIDTUTE.setupVideo.init();
	});


})(jQuery);