fix code review += metadataseparator += inplacevideo boundedcontext n…

…on-void check
decheng-zhang · Oct 2, 2018 · 57aa318 · 57aa318
1 parent 590fded
commit 57aa318
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 132 deletions.
diff --git a/nunaliit2-js/src/main/js/nunaliit2/css/basic/n2.couchShow.css b/nunaliit2-js/src/main/js/nunaliit2/css/basic/n2.couchShow.css
@@ -42,6 +42,10 @@ div.n2Show_icon_speaker:hover {
 	background-position: -75px 0;
 }
 
+div.n2s_insertedMediaView br.n2MediaDisplay_metaDataSeparator {
+	line-height: 3;
+}
+
 .n2Show_docNotFound {
 	color: #ff0000;
 }

diff --git a/nunaliit2-js/src/main/js/nunaliit2/n2.mediaDisplay.js b/nunaliit2-js/src/main/js/nunaliit2/n2.mediaDisplay.js
@@ -327,191 +327,210 @@ $n2.MediaDisplay = $n2.Class({
 	}
 
 	,_displayVideoMediaElementInplace: function(opts) {
-		var $inplaceDiv = opts.insertView || null;
-		// TODO: Must do something if the opts.insertView is not provided.
-		// Log an error or put something somewhere. Do not fail silently.
-		if($inplaceDiv != null){
-			var thumbnailUrl = $inplaceDiv.find(".n2Show_thumb_wrapper img").attr("src");
-			$inplaceDiv.find(".n2Show_thumb_wrapper img").remove();
 
-			var mediaInplaceId = $n2.getUniqueId();
-			var videoId = $n2.getUniqueId();
-
-			var width = DEFAULT_VIDEO_WIDTH_INPLACE;
-			if( opts.mediaDisplayVideoWidth ) {
-				width = opts.mediaDisplayVideoWidth;
-			} else if( opts.width ) {
-				width = opts.width;
-			};
-
-			var height = DEFAULT_VIDEO_HEIGHT_INPLACE;
-			if( opts.mediaDisplayVideoHeight ) {
-				height = opts.mediaDisplayVideoHeight + DEFAULT_VIDEO_CONTROLLER_HEIGHT;
-			} else if( opts.height ) {
-				height = opts.height + DEFAULT_VIDEO_CONTROLLER_HEIGHT;
-			};
-
-			var mkup = [];
-			mkup.push('<div id="'+mediaInplaceId+'">');
-
-			mkup.push('<video id="'+videoId+'" controls="controls" poster="'+thumbnailUrl+'" width="100%">');
-
-			mkup.push('<source src="'+opts.url+'"');
-			if( opts.mimeType ){
-				mkup.push(' type="'+opts.mimeType+'"');
-			};
-			mkup.push('>');
-
-			mkup.push('</video>');
-
-			var $mediaInplace = $( mkup.join('') );
-			var _this = this;
-
-			this._addMetaData(opts, $mediaInplace);
-			this._addDownloadButton(opts, $mediaInplace);
+		if (typeof opts.insertView === "undefined"
+			|| opts.insertView == null) {
+			$n2.log('The context view must be provided when creating a inplace media player');
+		} else {
+			var $inplaceDiv = opts.insertView || null;
+			if ($inplaceDiv != null) {
+				var thumbnailUrl = $inplaceDiv.find(
+					".n2Show_thumb_wrapper img").attr("src");
+				$inplaceDiv.find(".n2Show_thumb_wrapper img").remove();
+
+				var mediaInplaceId = $n2.getUniqueId();
+				var videoId = $n2.getUniqueId();
+
+				var width = DEFAULT_VIDEO_WIDTH_INPLACE;
+				if (opts.mediaDisplayVideoWidth) {
+					width = opts.mediaDisplayVideoWidth;
+				} else if (opts.width) {
+					width = opts.width;
+				};
+				var height = DEFAULT_VIDEO_HEIGHT_INPLACE;
+				if (opts.mediaDisplayVideoHeight) {
+					height = opts.mediaDisplayVideoHeight
+						+ DEFAULT_VIDEO_CONTROLLER_HEIGHT;
+				} else if (opts.height) {
+					height = opts.height
+							+ DEFAULT_VIDEO_CONTROLLER_HEIGHT;
+				};
 
-			$inplaceDiv.append($mediaInplace);
-			$('#'+videoId).mediaelementplayer({
-				features: ['playpause','progress','volume','sourcechooser','fullscreen'],
-			});
+				var mkup = [];
+				mkup.push('<div id="' + mediaInplaceId + '" class="n2MediaDisplay_videoWrapper">');
+				mkup.push('<video id="' + videoId
+										+ '" controls="controls" poster="'
+										+ thumbnailUrl + '" width="100%">');
+				mkup.push('<source src="' + opts.url + '"');
+				if (opts.mimeType) {
+					mkup.push(' type="' + opts.mimeType + '"');
+				};
+				mkup.push('>');
+				mkup.push('</video>');
+				var $mediaInplace = $(mkup.join(''));
+				var _this = this;
+
+				this._addMetaData(opts, $mediaInplace);
+				this._addDownloadButton(opts, $mediaInplace);
+				$inplaceDiv.append($mediaInplace);
+				$('#' + videoId).mediaelementplayer(
+						{
+							features : [ 'playpause', 'progress',
+								'volume', 'sourcechooser',
+								'fullscreen' ],
+						});
+			}
 		}
 	}
 
-	,_displayVideoMediaElement: function(opts) {
+	,_displayVideoMediaElement : function(opts) {
 		var dialogTitle = defaultDialogTitle;
-		if( opts.title ) {
+		if (opts.title) {
 			dialogTitle = opts.title;
-		};
+		}
+		;
 
 		var mediaDialogId = $n2.getUniqueId();
 		var videoId = $n2.getUniqueId();
 
 		var width = DEFAULT_VIDEO_WIDTH;
-		if( opts.mediaDisplayVideoWidth ) {
+		if (opts.mediaDisplayVideoWidth) {
 			width = opts.mediaDisplayVideoWidth;
-		} else if( opts.width ) {
+		} else if (opts.width) {
 			width = opts.width;
-		};
+		}
+		;
 
 		var height = DEFAULT_VIDEO_HEIGHT;
-		if( opts.mediaDisplayVideoHeight ) {
-			height = opts.mediaDisplayVideoHeight + DEFAULT_VIDEO_CONTROLLER_HEIGHT;
-		} else if( opts.height ) {
+		if (opts.mediaDisplayVideoHeight) {
+			height = opts.mediaDisplayVideoHeight
+			+ DEFAULT_VIDEO_CONTROLLER_HEIGHT;
+		} else if (opts.height) {
 			height = opts.height + DEFAULT_VIDEO_CONTROLLER_HEIGHT;
-		};
-
+		}
+		;
+
 		var mkup = [];
-		mkup.push('<div id="'+mediaDialogId+'">');
+		mkup.push('<div id="' + mediaDialogId + '">');
 
-		mkup.push('<video id="'+videoId+'" controls="controls"  width="'+width+'" height="'+height+'">');
-
-		mkup.push('<source src="'+opts.url+'"');
-		if( opts.mimeType ){
-			mkup.push(' type="'+opts.mimeType+'"');
-		};
+		mkup.push('<video id="' + videoId
+				+ '" controls="controls"  width="' + width
+				+ '" height="' + height + '">');
+
+		mkup.push('<source src="' + opts.url + '"');
+		if (opts.mimeType) {
+			mkup.push(' type="' + opts.mimeType + '"');
+		}
+		;
 		mkup.push('>');
-		
+
 		mkup.push('</video>');
-		
-		var $mediaDialog = $( mkup.join('') );
-		
+
+		var $mediaDialog = $(mkup.join(''));
+
 		this._addMetaData(opts, $mediaDialog);
 		this._addDownloadButton(opts, $mediaDialog);
 
-		var dialogOptions = $n2.extend({}
-			,baseDialogOptions
-			,{
-				title: dialogTitle
-				,width: width + MEDIAELEMENT_DIALOG_EXTRA_WIDTH
-				,close: function(){
-					$('#'+mediaDialogId).remove();
-					opts.onCloseHook();
-				}
+		var dialogOptions = $n2.extend({}, baseDialogOptions, {
+			title : dialogTitle,
+			width : width + MEDIAELEMENT_DIALOG_EXTRA_WIDTH,
+			close : function() {
+				$('#' + mediaDialogId).remove();
+				opts.onCloseHook();
 			}
-		);
-
-		$mediaDialog.dialog(dialogOptions);
-
-		$('#'+videoId).mediaelementplayer({
-			features: ['playpause','progress','volume','sourcechooser','fullscreen']
 		});
+
+		$mediaDialog.dialog(dialogOptions);
+
+		$('#' + videoId).mediaelementplayer(
+				{
+					features : [ 'playpause', 'progress', 'volume',
+						'sourcechooser', 'fullscreen' ]
+				});
 	}
 
-	,_displayAudio: function(opts) {
+	,_displayAudio : function(opts) {
 		var dialogTitle = defaultDialogTitle;
-		if( opts.title ) {
+		if (opts.title) {
 			dialogTitle = opts.title;
-		};
+		}
+		;
 
 		var mediaDialogId = $n2.getUniqueId();
 
-		if( $.jPlayer ) {
-			var $mediaDialog = $('<div id="'+mediaDialogId+'"></div>');
+		if ($.jPlayer) {
+			var $mediaDialog = $('<div id="' + mediaDialogId
+					+ '"></div>');
 			var $player = $('<div class="n2Media_jPlayer"></div>');
 			$mediaDialog.append($player);
-			
+
 		} else {
 			var browserInfo = $n2.utils.getBrowserInfo();
 
 			// Generate local markup
 			var mkup = [];
-			mkup.push('<div id="'+mediaDialogId+'">');
-			if( "Safari" === browserInfo.browser &&
-					5.0 <= browserInfo.version){
+			mkup.push('<div id="' + mediaDialogId + '">');
+			if ("Safari" === browserInfo.browser
+					&& 5.0 <= browserInfo.version) {
 				var embedHtml = this.generateHtml5Tag({
-					url: opts.url
-					,sourceType: 'audio'
-					,mimeType: opts.mimeType
-//					,width: 200
-//					,height: 16
-					,autoplay: true
-					,loop: false
-					,controller: true
+					url : opts.url,
+					sourceType : 'audio',
+					mimeType : opts.mimeType
+					// ,width: 200
+					// ,height: 16
+					,
+					autoplay : true,
+					loop : false,
+					controller : true
 				});
 			} else {
 				var embedHtmlOpts = {
-						url: opts.url
-						,sourceType: 'audio'
-						,mimeType: opts.mimeType
+						url : opts.url,
+						sourceType : 'audio',
+						mimeType : opts.mimeType
 						// Let float
-						//,height: 16
-						,controller: true
-					};
-				var embedHtml = this.generateEmbedMarkup(embedHtmlOpts);
-			};
+						// ,height: 16
+						,
+						controller : true
+				};
+				var embedHtml = this
+				.generateEmbedMarkup(embedHtmlOpts);
+			}
+			;
 			mkup.push(embedHtml);
-	
+
 			mkup.push('</div>');
-
-			var $mediaDialog = $( mkup.join('') );
-		};
-
+
+			var $mediaDialog = $(mkup.join(''));
+		}
+		;
+
 		this._addMetaData(opts, $mediaDialog);
 		this._addDownloadButton(opts, $mediaDialog);
 
-		var dialogOptions = $n2.extend({},baseDialogOptions,{
-			title: dialogTitle
-			,width: 320
-			,close: function(){
-				$('#'+mediaDialogId).remove();
+		var dialogOptions = $n2.extend({}, baseDialogOptions, {
+			title : dialogTitle,
+			width : 320,
+			close : function() {
+				$('#' + mediaDialogId).remove();
 				opts.onCloseHook();
 			}
 		});
 		$mediaDialog.dialog(dialogOptions);
-		
-		if( $.jPlayer ) {
+
+		if ($.jPlayer) {
 			var $player = $mediaDialog.find('.n2Media_jPlayer');
 			$player.jPlayer({
-				ready: function(){
+				ready : function() {
 					var $m = $(this);
-					$m.jPlayer('setMedia',{
-						mp3: opts.url
+					$m.jPlayer('setMedia', {
+						mp3 : opts.url
 					});
-				}
-				,swfPath:'./js-external/jQuery.jPlayer/'
-				,size: {
-					width: 100
-					,height: 100
+				},
+				swfPath : './js-external/jQuery.jPlayer/',
+				size : {
+					width : 100,
+					height : 100
 				}
 			});
 		};
@@ -608,9 +627,7 @@ $n2.MediaDisplay = $n2.Class({
 	,_addMetaData: function(opts, $elem) {
 		// TODO: Spacing and alignment should be fixed by CSS,
 		// not adding more elements
-		$elem.append( $('<br/>') );
-		//$elem.append( $('<br/>') );
-		//$elem.append( $('<br/>') );
+		$elem.append( $('<br class="n2MediaDisplay_metaDataSeparator"/>') );
 
 		if( opts.metaDataHtml ) {
 			var $meta = $('<span></span>');

diff --git a/nunaliit2-js/src/main/js/nunaliit2/n2.widgetTranscript.js b/nunaliit2-js/src/main/js/nunaliit2/n2.widgetTranscript.js
@@ -585,8 +585,8 @@ var SrtToJsonConvertor = $n2.Class('SrtToJsonConvertor',{
 							"fin": null,
 							"text": ""
 					};
-					$n2.log("The"+tmpIdx+"-th transcript");
-					$n2.log("The timecode: "+ tmpTimecode);
+					//$n2.log("The"+tmpIdx+"-th transcript");
+					//$n2.log("The timecode: "+ tmpTimecode);
 
 					curEntry.start  =  tmpTimecode.substring(0,2)*3600 + tmpTimecode.substring(3,5)*60 
 					+ tmpTimecode.substring(6,8);