Merge OpenOLAT 10.3 to OpenOLAT default with eb89b8f3aed0e284ab655f654c7d8f05f21635e5

src/main/java/org/olat/core/gui/components/image/ImageRenderer.java

@@ -92,7 +92,7 @@ public class ImageRenderer extends DefaultComponentRenderer {
 		sb.append("<div id='").append(compId).append("' class='o_video'>"); // START component
 		// The inner component 
 		String imgId = "mov_" + ic.getDispatchID();
-		sb.append("<div id='").append(imgId).append("' name='").append(imgId).append("'></div>")
+		sb.append("<div id='").append(imgId).append("' name='").append(imgId).append("' style='width:").append(width).append("px; height:").append(height).append("px;' class='o_video_wrapper'></div>")
 		  .append("<script type='text/javascript'>")
 		  .append("/* <![CDATA[ */")
 		  .append("BPlayer.insertPlayer('").append(Settings.createServerURI()).append(mapperUrl);

src/main/java/org/olat/modules/webFeed/ui/podcast/_content/episode.html

@@ -54,7 +54,7 @@
 				#if ($!helper.getMediaType($item.getEnclosure()) == "video")
 					BPlayer.insertPlayer("$!helper.getMediaUrl($item)","o_podcast_episode_$velocityCount",$!helper.getWidth($item),$!helper.getHeight($item),false,null,"video");
 				#else
-					BPlayer.insertPlayer("$!helper.getMediaUrl($item)","o_podcast_episode_$velocityCount",400,24,false,null,"sound");
+					BPlayer.insertPlayer("$!helper.getMediaUrl($item)","o_podcast_episode_$velocityCount",400,30,false,null,"sound");
 				#end
 				/* ]]> */
 				</script>

src/main/java/org/olat/modules/webFeed/ui/podcast/_content/episodes.html

@@ -77,7 +77,7 @@
 					#if ($!helper.getMediaType($episode.getEnclosure()) == "video")
 						BPlayer.insertPlayer("$!helper.getMediaUrl($episode)","o_podcast_${podId}_episode",$!helper.getWidth($episode),$!helper.getHeight($episode),false,null,"video");
 					#else
-						BPlayer.insertPlayer("$!helper.getMediaUrl($episode)","o_podcast_${podId}_episode",400,24,false,null,"sound");
+						BPlayer.insertPlayer("$!helper.getMediaUrl($episode)","o_podcast_${podId}_episode",400,30,false,null,"sound");
 					#end
 					/* ]]> */
 					</script>

src/main/java/org/olat/repository/ui/list/_content/details.html

@@ -14,7 +14,7 @@
 		</div>
 		#end
 		#if($r.available("thumbnail"))
-		<div class="o_media">
+		<div class="o_media #if(!$description || $description.length() == 0) o_desc_empty"#end ">
 			$r.render("thumbnail")
 		</div>
 		#end

src/main/webapp/static/js/tinymce4/tinymce/plugins/olatmovieviewer/plugin.js

@@ -367,7 +367,7 @@
 					id:domIdentity,
 					name:domIdentity,
 					"class":"olatFlashMovieViewer",
-					"style":'display:block;border:solid 1px #000; width:auto; height:auto; max-width:100%;'
+					"style":'display:block;border:solid 1px #000; width:' + playerWidth + 'px; height:' + playerHeight + 'px;'
 				},h);
 				return node;
 			};

src/main/webapp/static/movie/player.js

@@ -229,7 +229,21 @@ var BPlayer = {
 			content += "&amp;file=" + config.file + "' /></object></video>";
 		}
 
-		jQuery('#' + domId).html(content);
+		var target = jQuery('#' + domId);
+		// Set height on target element to auto to support responsive scaling
+		// with auto-resize
+		target.css({'height' : 'auto'});
+		// Set also width to auto in case the video is larger than the window.
+		// Normally the max-width on the target does already fix this responsive
+		// problem, but this does not work on iOS. 
+		// Don't set it permanently to auto because this will expand all videos
+		// to 100% and discard the configured width
+		if (jQuery(window).width() <= config.width) {
+			target.css({ 'width' : 'auto'});
+		}
+		// Now finally add video tags and flash fallback HTML code to DOM and
+		// call player on new video element
+		target.html(content);
 		jQuery('#' + mediaDomId).mediaelementplayer(meConfig);
 	},
 	

src/main/webapp/static/themes/light/modules/_content_embedded.scss

@@ -210,11 +210,10 @@ img.b_with_border {
 	@extend %o_video;
 } 
 
-/* movie player responsive fix, compatibility with old embedded movies */
+/* Movie player responsive fix. Must correspond with js code in player.js*/
 span.olatFlashMovieViewer {
 	max-width: 100% !important;
-	width: auto !important;
-	height: auto !important;
+	border: none !important;
 }
 .mejs-container, .mejs-mediaelement video, .mejs-layers div, .me-cannotplay {
 	max-width: 100%;

src/main/webapp/static/themes/light/modules/_helpers.scss

@@ -182,11 +182,13 @@
 }
 
 /* media classes for video and image component */
-.o_video, %o_video {
+.o_video, .o_video video, %o_video, .o_video_wrapper {
 	@include img-responsive(inline-block);
+	max-width: 100%;
 }
-.o_image, %o_image {
+.o_image, .o_image img, %o_image {
 	@include img-responsive(inline-block);
+	max-width: 100%;
 }
 
 /* Hyphenated text */

src/main/webapp/static/themes/light/modules/_repository.scss

@@ -15,7 +15,14 @@
 			float: right;
 			margin-left: 2em;
 			margin-bottom: 2em;			
-		}
+			/* reset when no description is there to render left aligned */
+			&.o_desc_empty {
+				float: none;
+				margin-left: 0;
+				margin-bottom: 0;						
+			}
+		}		
+		
 		h1 i {
 			display: none;
 		}