Initial commit

.gitignore

+# Node
+node_modules
+test/results
+test/coverage
+dist
+## OS X
+.DS_Store
+._*
+.Spotlight-V100
+.Trashes
\ No newline at end of file

.idea/.gitignore

+# Default ignored files
+/workspace.xml
\ No newline at end of file

.idea/VideoProject_3_Streams.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/dictionaries/eh2321.xml

+<component name="ProjectDictionaryState">
+  <dictionary name="eh2321">
+    <words>
+      <w>audioplayer</w>
+      <w>currenttime</w>
+      <w>videoplayer</w>
+      <w>videostream</w>
+    </words>
+  </dictionary>
+</component>
\ No newline at end of file

.idea/inspectionProfiles/Project_Default.xml

+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <Languages>
+        <language minSize="56" name="JavaScript" />
+      </Languages>
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/VideoProject_3_Streams.iml" filepath="$PROJECT_DIR$/.idea/VideoProject_3_Streams.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

.travis.yml

+language: node_js
+node_js:
+  - "7"
+before_script:
+  - npm install --global gulp-cli
+script: gulp
\ No newline at end of file

LICENSE.md

+# The MIT License (MIT)
+
+Copyright (c) Go Make Things, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file

README.md

+# Interactive Videoplayer
+
+This is the repository for the interactive videoplayer used by SEK and ZML. 
+
+## Getting Started
+This project uses [Gulp boilerplate](https://github.com/cferdinandi/gulp-boilerplate). 
+If this boilerplate has not been used before, you have to install the following dependencies first:
+
+### Dependencies 
+*__Note:__ if you've previously installed Gulp globally, run `npm rm --global gulp` to remove it. [Details here.](https://medium.com/gulpjs/gulp-sips-command-line-interface-e53411d4467)*
+
+Make sure these are installed first:
+
+- [Node.js](http://nodejs.org)
+- [Gulp Command Line Utility](http://gulpjs.com) `npm install --global gulp-cli`
+
+### Quick Start
+
+1. In bash/terminal/command line, `cd` into your project directory.
+2. Run `npm install` to install required files and dependencies.
+3. When it's done installing, run one of the task runners to get going:
+	- `gulp` manually compiles files.
+	- `gulp watch` automatically compiles files and applies changes using [BrowserSync](https://browsersync.io/) when you make changes to your source files.
+
+
+## Documentation
+Add your source files to the appropriate `src` subdirectories. Gulp will process and and compile them into `dist`.
+- JavaScript files in the `src/js` directory will be compiled to `dist/js`. 
+    - `main`folder: Contains the code used for the videoplayer.
+    - `vendor`: Contains compressed files of `jQuery` and `Howlerjs`. 
+    -  `audioworker.js` and `videoworker.js` are the web workers for the video- and audioplayer
+- Files in the `src/sass` directory will be compiled to `dist/css`. 
+    - `components` folder: Contains all the different css files. 
+    - `main.scss`: Contains imports for the files in `components`.
+- SVG files placed in the `src/svg` directory will be optimized with SVGO and compiled into `dist/svg`.
+- Files and folders placed in the `copy` directory will be copied as-is into the `dist` directory.
+    - `files`: Contains all external files needed for the videoplayer
+        - `audio`: Contains the audio files.
+        - `video`: Contains the video files in different qualities (HD and SD) and the placeholder image named poster.png.
+        - `config.json`: Is the config file used by the videoplayer to import the video and audio files. 
+    - `fonts`: Contains the font used by this project (open sans).
+    - `index.html`: Main HTML file.
+
+### config.json
+
+The `config.json` file contains the import details used by the videoplayer:
+
+```json
+{
+  "video": {
+    "url-hd": "files/video/hd.mp4",
+    "url-sd": "files/video/sd.mp4"
+  },
+  "audio": {
+    "url-0": "files/audio/a1.mp3",
+    "url-1": "files/audio/a2.mp3",
+    "url-2": "files/audio/a3.mp3"
+  },
+  "streams": 3 
+}
+```
+### Video settings for 3 streams:
+|Quality | Width | Height |
+|:-----------------:|:-------------:|:---------------:|
+| SD | 1280  | 2160 | 
+|HD     | 640          | 1080      |

gulpfile.js

+/**
+ * Settings
+ * Turn on/off build features
+ */
+
+var settings = {
+	clean: true,
+	scripts: true,
+	polyfills: true,
+	styles: true,
+	svgs: true,
+	copy: true,
+	reload: true
+};
+
+
+/**
+ * Paths to project folders
+ */
+
+var paths = {
+	input: 'src/',
+	output: 'dist/',
+	scripts: {
+		input: 'src/js/*',
+		polyfills: '.polyfill.js',
+		output: 'dist/js/'
+	},
+	styles: {
+		input: 'src/sass/**/*.{scss,sass}',
+		output: 'dist/css/'
+	},
+	svgs: {
+		input: 'src/svg/*.svg',
+		output: 'dist/svg/'
+	},
+	copy: {
+		input: 'src/copy/**/*',
+		output: 'dist/'
+	},
+	reload: './dist/'
+};
+
+
+/**
+ * Template for banner to add to file headers
+ */
+
+var banner = {
+	full:
+		'/*!\n' +
+		' * <%= package.name %> v<%= package.version %>\n' +
+		' * <%= package.description %>\n' +
+		' * (c) ' + new Date().getFullYear() + ' <%= package.author.name %>\n' +
+		' * <%= package.license %> License\n' +
+		' * <%= package.repository.url %>\n' +
+		' */\n\n',
+	min:
+		'/*!' +
+		' <%= package.name %> v<%= package.version %>' +
+		' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
+		' | <%= package.license %> License' +
+		' | <%= package.repository.url %>' +
+		' */\n'
+};
+
+
+/**
+ * Gulp Packages
+ */
+
+// General
+var {gulp, src, dest, watch, series, parallel} = require('gulp');
+var del = require('del');
+var flatmap = require('gulp-flatmap');
+var lazypipe = require('lazypipe');
+var rename = require('gulp-rename');
+var header = require('gulp-header');
+var package = require('./package.json');
+
+// Scripts
+var jshint = require('gulp-jshint');
+var stylish = require('jshint-stylish');
+var concat = require('gulp-concat');
+var uglify = require('gulp-terser');
+var optimizejs = require('gulp-optimize-js');
+
+// Styles
+var sass = require('gulp-sass');
+var prefix = require('gulp-autoprefixer');
+var minify = require('gulp-cssnano');
+
+// SVGs
+var svgmin = require('gulp-svgmin');
+
+// BrowserSync
+var browserSync = require('browser-sync');
+
+
+/**
+ * Gulp Tasks
+ */
+
+// Remove pre-existing content from output folders
+var cleanDist = function (done) {
+
+	// Make sure this feature is activated before running
+	if (!settings.clean) return done();
+
+	// Clean the dist folder
+	del.sync([
+		paths.output
+	]);
+
+	// Signal completion
+	return done();
+
+};
+
+// Repeated JavaScript tasks
+var jsTasks = lazypipe()
+	.pipe(header, banner.full, {package: package})
+	.pipe(optimizejs)
+	.pipe(dest, paths.scripts.output)
+	.pipe(rename, {suffix: '.min'})
+	.pipe(uglify)
+	.pipe(optimizejs)
+	.pipe(header, banner.min, {package: package})
+	.pipe(dest, paths.scripts.output);
+
+// Lint, minify, and concatenate scripts
+var buildScripts = function (done) {
+
+	// Make sure this feature is activated before running
+	if (!settings.scripts) return done();
+
+	// Run tasks on script files
+	return src(paths.scripts.input)
+		.pipe(flatmap(function(stream, file) {
+
+			// If the file is a directory
+			if (file.isDirectory()) {
+
+				// Setup a suffix variable
+				var suffix = '';
+
+				// If separate polyfill files enabled
+				if (settings.polyfills) {
+
+					// Update the suffix
+					suffix = '.polyfills';
+
+					// Grab files that aren't polyfills, concatenate them, and process them
+					src([file.path + '/*.js', '!' + file.path + '/*' + paths.scripts.polyfills])
+						.pipe(concat(file.relative + '.js'))
+						.pipe(jsTasks());
+
+				}
+
+				// Grab all files and concatenate them
+				// If separate polyfills enabled, this will have .polyfills in the filename
+				src(file.path + '/*.js')
+					.pipe(concat(file.relative + suffix + '.js'))
+					.pipe(jsTasks());
+
+				return stream;
+
+			}
+
+			// Otherwise, process the file
+			return stream.pipe(jsTasks());
+
+		}));
+
+};
+
+// Lint scripts
+var lintScripts = function (done) {
+
+	// Make sure this feature is activated before running
+	if (!settings.scripts) return done();
+
+	// Lint scripts
+	return src(paths.scripts.input)
+		.pipe(jshint())
+		.pipe(jshint.reporter('jshint-stylish'));
+
+};
+
+// Process, lint, and minify Sass files
+var buildStyles = function (done) {
+
+	// Make sure this feature is activated before running
+	if (!settings.styles) return done();
+
+	// Run tasks on all Sass files
+	return src(paths.styles.input)
+		.pipe(sass({
+			outputStyle: 'expanded',
+			sourceComments: true
+		}))
+		.pipe(prefix({
+			browsers: ['last 2 version', '> 0.25%'],
+			cascade: true,
+			remove: true
+		}))
+		.pipe(header(banner.full, { package : package }))
+		.pipe(dest(paths.styles.output))
+		.pipe(rename({suffix: '.min'}))
+		.pipe(minify({
+			discardComments: {
+				removeAll: true
+			}
+		}))
+		.pipe(header(banner.min, { package : package }))
+		.pipe(dest(paths.styles.output));
+
+};
+
+// Optimize SVG files
+var buildSVGs = function (done) {
+
+	// Make sure this feature is activated before running
+	if (!settings.svgs) return done();
+
+	// Optimize SVG files
+	return src(paths.svgs.input)
+		.pipe(svgmin())
+		.pipe(dest(paths.svgs.output));
+
+};
+
+// Copy static files into output folder
+var copyFiles = function (done) {
+
+	// Make sure this feature is activated before running
+	if (!settings.copy) return done();
+
+	// Copy static files
+	return src(paths.copy.input)
+		.pipe(dest(paths.copy.output));
+
+};
+
+// Watch for changes to the src directory
+var startServer = function (done) {
+
+	// Make sure this feature is activated before running
+	if (!settings.reload) return done();
+
+	// Initialize BrowserSync
+	browserSync.init({
+		server: {
+			baseDir: paths.reload
+		}
+	});
+
+	// Signal completion
+	done();
+
+};
+
+// Reload the browser when files change
+var reloadBrowser = function (done) {
+	if (!settings.reload) return done();
+	browserSync.reload();
+	done();
+};
+
+// Watch for changes
+var watchSource = function (done) {
+	watch(paths.input, series(exports.default, reloadBrowser));
+	done();
+};
+
+
+/**
+ * Export Tasks
+ */
+
+// Default task
+// gulp
+exports.default = series(
+	cleanDist,
+	parallel(
+		buildScripts,
+		lintScripts,
+		buildStyles,
+		buildSVGs,
+		copyFiles
+	)
+);
+
+// Watch and reload
+// gulp watch
+exports.watch = series(
+	exports.default,
+	startServer,
+	watchSource
+);
\ No newline at end of file

package.json

+{
+	"name": "interactive-videoplayer",
+	"version": "1.0.0",
+	"description": "This is an interactive videoplayer.",
+	"main": "./dist/main.js",
+	"author": {
+		"name": "Zentrum für Mediales Lernen",
+		"url": "https://git.scc.kit.edu/zml"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://git.scc.kit.edu/zml/interactive-videoplayer.git"
+	},
+	"devDependencies": {
+		"browser-sync": "^2.26.7",
+		"del": "3.0.0",
+		"gulp": "4.0.0",
+		"gulp-autoprefixer": "6.0.0",
+		"gulp-concat": "2.6.1",
+		"gulp-cssnano": "2.1.3",
+		"gulp-flatmap": "1.0.2",
+		"gulp-header": "2.0.5",
+		"gulp-jshint": "2.1.0",
+		"gulp-optimize-js": "1.1.0",
+		"gulp-rename": "1.4.0",
+		"gulp-sass": "4.0.2",
+		"gulp-svgmin": "2.1.0",
+		"gulp-terser": "1.1.7",
+		"jshint": "2.9.6",
+		"jshint-stylish": "2.2.1",
+		"lazypipe": "1.0.1",
+		"howler": "^2.1.2"
+	}
+}

src/copy/files/config.json

+{
+  "video": {
+    "url-hd": "files/video/hd.mp4",
+    "url-sd": "files/video/sd.mp4"
+  },
+  "audio": {
+    "url-0": "files/audio/a1.mp3",
+    "url-1": "files/audio/a2.mp3",
+    "url-2": "files/audio/a3.mp3"
+  },
+  "streams": 3
+}

src/copy/index.html

+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <title>Video</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="css/main.css">
+    <meta charset="utf-8">
+    <script src="js/vendor.polyfills.js"></script>
+
+</head>
+<body>
+<div id="container">
+    <!-- The Modal -->
+    <div id="share-modal" class="modal">
+
+        <!-- Modal content -->
+        <div class="modal-content">
+            <div class="modal-header">
+                <span class="close" onclick="closeModal()">&times;</span>
+                <h3>Video teilen</h3>
+            </div>
+            <div class="modal-body">
+                <div id="share-menu" class="flex ">
+                    <div id="url-btn-container" class="tab-container show">
+                        <button id="share-url-btn" onclick="showTab( 'link-container')">
+                            <span id="link-icon"></span>
+                        </button>
+                        <p class="btn-text">URL</p>
+                    </div>
+                    <div id="embed-btn-container" class="tab-container m-left show">
+                        <button id="share-embed-btn" class="active" onclick="showTab( 'embed-container')">
+                            <span id="embed-icon"></span>
+                        </button>
+                        <p class="btn-text">Einbetten</p>
+
+                    </div>
+
+                </div>
+                <div id="link-container" class="hide">
+                    <p>Sie können die Url des Videos kopieren:</p>
+                    <div id="share-url-container" class="flex flex-auto">
+                        <input id="share-url" readonly placeholder="https://zml.kit.edu">
+                        <button class="flex-end" onclick="copyUrl('share-url')">Kopieren</button>
+                    </div>
+                </div>
+                <div id="embed-container" class="show">
+                    <p>Sie können das Video mittels iFrame auf Ihrer Homepage einbetten:</p>
+                    <div id="share-embed-container" class="flex flex-auto">
+                        <textarea id="share-embed" autocomplete="off" rows="3" placeholder="text"></textarea>
+                        <div id="share-embed-btn-container">
+                            <button id="embed-button" onclick="copyUrl('share-embed')">Kopieren</button>
+
+                        </div>
+                    </div>
+                </div>
+                <p id="disclaimer">Der interaktive Vidoeplayer für diese besondere Form von synchronisierten Videos ist
+                    eine gemeinsame
+                    Entwicklung am KIT von <a target="_blank" href="https://www.sek.kit.edu">SEK</a>
+                    und <a target="_blank" href="http://www.zml.kit.edu/">ZML</a>.
+                    Er kann als Open Source mit einer CC-BY Lizenz
+                    auch durch Dritte verwendet werden. Mehr dazu <a target="_blank" href="http://www.zml.kit.edu/videoplayer">hier</a>.
+                </p>
+
+            </div>
+            <div class="modal-footer flex ">
+                <div style="width: 100%;" class="flex flex-center ">
+                    <a href="https://www.kit.edu" target="_blank" style="margin-right: 32px">
+                        <img src="svg/kit_logo_color.svg" style="display: block; height: 72px; margin: auto;">
+                    </a>
+                    <a href="https://zml.kit.edu" target="_blank">
+                        <img src="svg/zml_textlogo.svg" style="display: block; height: 64px; margin: auto;">
+                    </a>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <div id="container-loader" class="hide">
+        <div class="flex center-items loader-container">
+            <div class="lds-default">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+    </div><!--END DIV LOADER-->
+
+    <!--    <div id="container-loader" class="hide">-->
+    <!--        <div class="circle-loader"></div>-->
+    <!--    </div>-->
+
+    <div id="placeholder" class="show">
+        <div class="flex center-items placeholder-container">
+            <button id="start-video" onclick="initVideo()"><span id="start-video-icon"></span></button>
+        </div><!--END DIV PLACEHOLDER-CONTAINER-->
+        <img id="placeholder-img" src="files/video/poster.png" alt="placeholder image">
+    </div><!--END DIV PLACEHOLDER-->
+    <div class="container-video" id="container-video">
+        <div id="container-navigation" class="row hide">
+            <div class="column" id="left">
+                <button id="video-1" onclick="changePosition('left')">
+
+                </button>
+            </div>
+            <div class="column" id="right">
+                <button id="video-2" onclick="changePosition('right')">
+
+                </button>
+            </div>
+        </div><!--END DIV CONTAINER-NAVIGATION-->
+        <video class="videoplayer hide" id="player" muted preload="metadata" playsinline="true"
+               webkit-playsinline="true">
+
+        </video>
+    </div><!--END DIV CONTAINTER-VIDEO-->
+    <div class="container-controls hide" id="container-controls">
+
+        <div style="height: 100%">
+            <div class="video-slider video-slider__player">
+                <time id="time-change"></time>
+                <progress id="video-buffer" class="video-slider__buffer" value="0" max="100"></progress>
+                <progress id="video-progress" class="video-slider__progress" value="0" max="100"></progress>
+                <input id="video-progress-bar" type="range" class="video-slider__slider slider" min="0" max="100"
+                       value="0">
+            </div>
+            <div id="video-controls" class="flex center-items">
+                <button type="button" id="play-pause" onclick="startStopVideo()">
+                    <span id="play-pause-icon"></span>
+                </button>
+                <div class="flex flex-auto center-items m-both">
+                    <time id="time-up">00:00</time>
+                    <time class="m-left" id="time-duration"></time>
+                </div><!--END DIV CONTROLS-SEEKBAR-TIME -->
+                <div class="flex flex-auto">
+                    <div id="video-stream-icon">
+                        <div class="flex flex-auto" id="monitor">
+                            <button onclick="changeVideo(1)"></button>
+                            <button onclick="changeVideo(2)"></button>
+                            <button onclick="changeVideo(3)"></button>
+                        </div>
+                    </div>
+
+                </div>
+
+                <button id="volume" onclick="Audioplayer.mute()" class="m-both">
+                    <span id="volume-icon"></span>
+                </button>
+
+                <input id="volume-slider" class="slider" type="range" min="0" max="100" step="1"
+                       value="100">
+                <button id="hd-sd" onclick="changeVideoQuality()" class="m-left"><span id="hd-sd-icon"></span></button>