started implementation

classes/class.ilObjInteractiveVideoGUI.php

@@ -203,6 +203,8 @@ public function showContent()
 		$ilTabs->activateTab('content');
 
 		$tpl->addCss($this->plugin->getDirectory() . '/templates/default/xvid.css');
+		$tpl->addCss($this->plugin->getDirectory() . '/libs/Bootstraptoggle/bootstrap2-toggle.min.css');
+		$tpl->addJavaScript($this->plugin->getDirectory() . '/libs/Bootstraptoggle/bootstrap2-toggle.min.js');
 		ilObjMediaObjectGUI::includePresentationJS($tpl);
 
 		$video_tpl = new ilTemplate("tpl.video_tpl.html", true, true, $this->plugin->getDirectory());
@@ -264,6 +266,7 @@ public function showContent()
 	        $video_tpl->setVariable('ALREADY_ANSWERED_TEXT', $this->plugin->txt('already_answered'));
 		$video_tpl->setVariable('QUESTION_TEXT', $this->plugin->txt('question'));
 		$video_tpl->setVariable('PRIVATE_TEXT', $this->plugin->txt('is_private_comment'));
+		$video_tpl->setVariable('RESET_TEXT', $this->plugin->txt('reset'));
 		$tpl->addJavaScript($this->plugin->getDirectory() . '/js/jquery.InteractiveVideoQuestionViewer.js');
 		$tpl->addJavaScript($this->plugin->getDirectory() . '/js/jquery.InteractiveVideoPlayer.js');
 		$tpl->addJavaScript($this->plugin->getDirectory() . '/js/InteractiveVideoPlayerUtils.js');

js/InteractiveVideoPlayerUtils.js

@@ -24,7 +24,7 @@ il.InteractiveVideoPlayerUtils = (function () {
 		var i;
 		for (i  = 0; i < Object.keys(comments).length; i++)
 		{
-			if (comments[i].comment_time <= time && comments[i].comment_text !== null && parseInt(comments[i].is_interactive, 10) === 0)
+			if (comments[i].comment_time <= time && comments[i].comment_text !== null)
 			{
 				html = pub.buildListElement(comments[i], comments[i].comment_time, comments[i].user_name) + html;
 			}
@@ -53,16 +53,36 @@ il.InteractiveVideoPlayerUtils = (function () {
 		}
 	};
 
+	pro.isBuildListElementAllowed = function(username)
+	{
+		if(InteractiveVideo.is_show_all_active === false)
+		{
+			if(InteractiveVideo.filter_by_user === false ||
+					(InteractiveVideo.filter_by_user !== false && InteractiveVideo.filter_by_user === username))
+			{
+				return true;
+			}
+		}
+		return false;
+	};
+
 	pub.buildListElement = function (comment, time, username, counter)
 	{
-		return 	'<li class="list_item_' + counter + '">' +
+		if(pro.isBuildListElementAllowed(username))
+		{
+			return 	'<li class="list_item_' + counter + '">' +
 					pro.builCommentTimeHtml(time, comment.is_interactive) +
 					pro.builCommentUsernameHtml(username, comment.is_interactive) +
 					pro.builCommentTitleHtml(comment.comment_title) +
 					pro.builCommentTextHtml(comment.comment_text ) +
 					pro.appendPrivateHtml(comment.is_private) +
 					pro.builCommentTagsHtml(comment.comment_tags) +
-				'</li>';
+					'</li>';
+		}
+		else
+		{
+			return '';
+		}
 	};
 
 	pro.builCommentTimeHtml = function (time, is_interactice)
@@ -94,7 +114,7 @@ il.InteractiveVideoPlayerUtils = (function () {
 
 	pro.builCommentTitleHtml = function (title)
 	{
-		if(title === null)
+		if(title === null || title === undefined)
 		{
 			title = '';
 		}
@@ -134,6 +154,55 @@ il.InteractiveVideoPlayerUtils = (function () {
 		return '<br/><div class="comment_tags">' + comment_tags + '</div>';
 	};
 
+	pub.displayAllCommentsAndDeactivateCommentStream = function(on)
+	{
+		var html = '';
+		var i;
+		if(on)
+		{
+			for (i  = 0; i < Object.keys(comments).length; i++)
+			{
+				if (comments[i].comment_text !== null)
+				{
+					html = pub.buildListElement(comments[i], comments[i].comment_time, comments[i].user_name) + html;
+				}
+			}
+			InteractiveVideo.is_show_all_active = true;
+			$("#ul_scroll").html(html);
+		}
+		else
+		{
+			InteractiveVideo.is_show_all_active = false;
+			pub.replaceCommentsAfterSeeking(InteractiveVideo.last_time);
+		}
+	};
+
+	pro.getAllUserWithComment = function()
+	{
+		var i, author_list = [];
+		for (i  = 0; i < Object.keys(comments).length; i++)
+		{
+			if ($.inArray( comments[i].user_name, author_list ) === -1)
+			{
+				author_list[comments[i].user_name] = comments[i].user_name;
+			}
+		}
+		return author_list;
+	};
+
+	pub.loadAllUserWithCommentsIntoFilterList = function()
+	{
+		var element;
+		var author_list = pro.getAllUserWithComment();
+		var dropdownList = $('#dropdownMenuInteraktiveList');
+		dropdownList.html('');
+		for ( element in author_list) 
+		{
+			element = '<li><a href="#">' + element + '</a></li>';
+			dropdownList.append(element);
+		}
+	};
+
 	pub.protect = pro;
 	return pub;
 

js/jquery.InteractiveVideoPlayer.js

@@ -27,7 +27,7 @@ $( document ).ready(function() {
 			}
 		});
 	});
-
+	
 	$("#ilInteractiveVideoCommentCancel").on("click", function(e) {
 		$('#comment_text').val("");
 	});
@@ -45,6 +45,27 @@ $( document ).ready(function() {
 			$('#ilInteractiveVideo')["0"].pause();
 		}
 	});
+	$('#show_all_comments').change(function() {
+		il.InteractiveVideoPlayerUtils.displayAllCommentsAndDeactivateCommentStream($(this).prop('checked'));
+	});
+
+	il.InteractiveVideoPlayerUtils.loadAllUserWithCommentsIntoFilterList();
+
+	$('#dropdownMenuInteraktiveList a').click(function(){
+		var value = $(this).html();
+		var is_show_all_active = InteractiveVideo.is_show_all_active;
+		if(value === reset_text)
+		{
+			InteractiveVideo.filter_by_user = false;
+		}
+		else
+		{
+			InteractiveVideo.filter_by_user = value;
+		}
+		InteractiveVideo.is_show_all_active = false;
+		il.InteractiveVideoPlayerUtils.displayAllCommentsAndDeactivateCommentStream(is_show_all_active);
+		InteractiveVideo.is_show_all_active = is_show_all_active;
+	});
 });
 
 
@@ -76,7 +97,11 @@ $( document ).ready(function() {
 					} else if (InteractiveVideo.last_time < media.currentTime) {
 						InteractiveVideo.last_time = media.currentTime;
 					}
-					il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(media.currentTime);
+					if(	InteractiveVideo.is_show_all_active === false)
+					{
+						il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(media.currentTime);
+					}
+
 				}, false);
 
 				media.addEventListener('pause', function(e) {

js/test/InteractiveVideoPlayerUtilsTest.js

@@ -114,19 +114,51 @@ describe("InteractiveVideoPlayerUtils Tests", function () {
 
 		it("replaceCommentsAfterSeeking", function () {
 			var expec = '';
+			InteractiveVideo.is_show_all_active = false;
+			InteractiveVideo.filter_by_user = false;
 			loadFixtures('InteractiveVideoPlayerUtils_fixtures.html');
 			il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(1);
 			expect($("#ul_scroll").html()).toEqual(expec);
-			expec = '<li class="list_item_undefined"><time class="time"> <a onclick="il.InteractiveVideoPlayerUtils.jumpToTimeInVideo(1); return false;">undefined</a></time><span class="comment_username"> [undefined]</span> <span class="comment_title">undefined</span> <span class="comment_text">Text</span> <span class="private_text"></span> <br><div class="comment_tags"></div></li>';
-			comments = [{comment_time: 1, comment_text: 'Text', is_interactive: 0, comment_tags: null}];
-			il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(5);
-			expect($("#ul_scroll").html()).toEqual(expec);
 			expec = '';
 			comments = [{comment_time: 5, comment_text: 'Text', is_interactive: 1, comment_tags: null}];
-			il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(1);
+			il.InteractiveVideoPlayerUtils.replaceCommentsAfterSeeking(6);
 			expect('').toEqual(expec);
 		});
 
+		it("isBuildListElementAllowed", function () {
+			InteractiveVideo.is_show_all_active = true;
+			expect(il.InteractiveVideoPlayerUtils.protect.isBuildListElementAllowed('dummy')).toEqual(false);
+			InteractiveVideo.is_show_all_active = false;
+			expect(il.InteractiveVideoPlayerUtils.protect.isBuildListElementAllowed('dummy')).toEqual(false);
+			InteractiveVideo.filter_by_user = true;
+			InteractiveVideo.filter_by_user = 'dummy';
+			expect(il.InteractiveVideoPlayerUtils.protect.isBuildListElementAllowed('dummy')).toEqual(true);
+		});
+
+		it("getAllUserWithComment", function () {
+			var expec = [];
+			expec['my name'] = 'my name';
+			comments = [{'user_name': 'my name'}];
+			expect(il.InteractiveVideoPlayerUtils.protect.getAllUserWithComment()).toEqual(expec);
+			expec['my name2'] = 'my name2';
+			comments = [{'user_name': 'my name'}, {'user_name': 'my name2'}];
+			expect(il.InteractiveVideoPlayerUtils.protect.getAllUserWithComment()).toEqual(expec);
+			comments = [{'user_name': 'my name'}, {'user_name': 'my name2'}, {'user_name': 'my name2'}, {'user_name': 'my name2'}];
+			expect(il.InteractiveVideoPlayerUtils.protect.getAllUserWithComment()).toEqual(expec);
+		});
+
+		it("loadAllUserWithCommentsIntoFilterList", function () {
+			var expec = '<li><a href="#">my name</a></li>';
+			loadFixtures('InteractiveVideoPlayerUtils_fixtures.html');
+			comments = [{'user_name': 'my name'}];
+			il.InteractiveVideoPlayerUtils.loadAllUserWithCommentsIntoFilterList();
+			expect($('#dropdownMenuInteraktiveList').html()).toEqual(expec);
+			comments = [{'user_name': 'my name'}, {'user_name': 'my name2'}];
+			expec = '<li><a href="#">my name</a></li><li><a href="#">my name2</a></li>';
+			il.InteractiveVideoPlayerUtils.loadAllUserWithCommentsIntoFilterList()
+			expect($('#dropdownMenuInteraktiveList').html()).toEqual(expec);
+		});
+
 		describe("Utils Test Calling Cases", function () {
 			beforeEach(function () {
 				loadFixtures('InteractiveVideoPlayerUtils_fixtures.html');

js/test/spec/javascripts/fixtures/InteractiveVideoPlayerUtils_fixtures.html

@@ -1,2 +1,3 @@
 <div id="ul_scroll"></div>
 <div id="ilInteractiveVideo"></div>
+<div id="dropdownMenuInteraktiveList"></div>

libs/Bootstraptoggle/bootstrap2-toggle.min.css

@@ -0,0 +1,28 @@
+/*! ========================================================================
+ * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0
+ * http://www.bootstraptoggle.com
+ * ========================================================================
+ * Copyright 2014 Min Hur, The New York Times Company
+ * Licensed under MIT
+ * ======================================================================== */
+label.checkbox .toggle,label.checkbox.inline .toggle{margin-left:-20px;margin-right:5px}
+.toggle{min-width:40px;height:20px;position:relative;overflow:hidden}
+.toggle input[type=checkbox]{display:none}
+.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
+.toggle.off .toggle-group{left:-100%}
+.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
+.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
+.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
+.toggle-handle.btn-mini{top:-1px}
+.toggle.btn{min-width:30px}
+.toggle-on.btn{padding-right:24px}
+.toggle-off.btn{padding-left:24px}
+.toggle.btn-large{min-width:40px}
+.toggle-on.btn-large{padding-right:35px}
+.toggle-off.btn-large{padding-left:35px}
+.toggle.btn-small{min-width:25px}
+.toggle-on.btn-small{padding-right:20px}
+.toggle-off.btn-small{padding-left:20px}
+.toggle.btn-mini{min-width:20px}
+.toggle-on.btn-mini{padding-right:12px}
+.toggle-off.btn-mini{padding-left:12px}

templates/default/tpl.video_tpl.html

@@ -1,3 +1,31 @@
+<nav class="ilToolbar navbar navbar-default" role="navigation">
+	<div class="collapse navbar-collapse" id="tb-collapse-2">
+		<ul class="ilToolbarItems nav navbar-nav ilFloatRight">
+			<li>
+				<div class="navbar-form">
+					<div class="dropdown">
+						<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuInteraktiveVideo" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+							xxxAuthorfilter
+							<span class="caret"></span>
+						</button>
+						<ul id="dropdownMenuInteraktiveList" class="dropdown-menu" aria-labelledby="dropdownMenuInteraktiveVideo">
+							<li><a href="#">{RESET_TEXT}</a></li>
+							<li role="separator" class="divider"></li>
+						</ul>
+					</div>
+				</div>
+			</li>
+			<li>
+				<div class="navbar-form">
+					<label>
+						xxxShow all Comments:
+					</label>
+						<input id="show_all_comments" type="checkbox" data-toggle="toggle" data-width="50" data-height="30">
+				</div>
+			</li>
+		</ul>
+	</div>
+</nav>
 <div class="row">
 	<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 		<div id="ilInteractiveVideoPlayerContainer">
@@ -46,6 +74,7 @@ <h3 class="ilHeader">{TXT_COMMENTS}</h3>
 		var answered_text	    = "{ALREADY_ANSWERED_TEXT}";
 		var question_text	    = "{QUESTION_TEXT}";
 		var private_text	   	= "{PRIVATE_TEXT}";
+		var reset_text	   		= "{RESET_TEXT}";
 		var comments 			= {COMMENTS};
 		var stopPoints 			= {STOP_POINTS};
 		var ignore_questions	= {IGNORE_QUESTIONS};
@@ -57,7 +86,9 @@ <h3 class="ilHeader">{TXT_COMMENTS}</h3>
 			pause_on_click_in_comment_field	: true,
 			iv_debug						: false,
 			last_stopPoint 					: -1,
-			last_time						: 0
+			last_time						: 0,
+			is_show_all_active				: false,
+			filter_by_user					: false
 		};
 
 		$.fn.debugPrinter = function (message, element)