Updated videos templates
authorThierry Florac <thierry.florac@onf.fr>
Mon, 18 Feb 2019 16:08:57 +0100
changeset 127 ab50b62aa21b
parent 126 cecf279f28a6
child 128 61709f7d6755
Updated videos templates
src/pyams_media/skin/resources/js/pyams_media.min.js
src/pyams_media/skin/templates/video.pt
src/pyams_media/zmi/templates/audio-preview.pt
--- a/src/pyams_media/skin/resources/js/pyams_media.min.js	Fri Jan 18 15:34:46 2019 +0100
+++ b/src/pyams_media/skin/resources/js/pyams_media.min.js	Mon Feb 18 16:08:57 2019 +0100
@@ -1,1 +1,1 @@
-!function(t,a){"use strict";var n=a.MyAMS,y={initPlayer:function(o){n.ajax.check(t.fn.flowplayer,"/--static--/pyams_media/flowplayer/flowplayer"+n.devext+".js",function(a){a&&(n.dialog&&n.dialog.registerShownCallback(y.initPlayerDialog,e),n.dialog&&n.dialog.registerHideCallback(y.shutdownPlayerDialog,e));var e=t(o),l=e.flowplayer(),i=e.data("ams-flowplayer-events");if(i)for(var r in i)i.hasOwnProperty(r)&&l.on(r,MyAMS.getFunctionByName(i[r]))})},initPlayerDialog:function(){var a=t(this);t(".modal-viewport",a).removeAttr("style").removeClass("modal-viewport")},shutdownPlayerDialog:function(){var a=t(this),e=t(".flowplayer",a).data("flowplayer");e&&e.shutdown()},getPlayerTime:function(){var a=t(this);a.hasClass("flowplayer")||(a=t(".flowplayer",a));var e=a.data("flowplayer");if(e){var l=e.video;if(!l.time&&e.conf.flowplayer&&(l=e.conf.flowplayer.video),l&&l.time){var i=l.time,r=a.parents("form");t('INPUT[name="thumbnail_form.widgets.time"]',r).val(i)}}},pausePlayer:function(){var a=t(this),e=t(".flowplayer",a).data("flowplayer");return e&&e.playing&&e.pause(),y.getPlayerTime.call(a),{}}};a.PyAMS_media=y}(jQuery,this);
+!function(a,e){"use strict";var l=e.MyAMS,i={initPlayer:function(e){l.ajax.check(a.fn.flowplayer,"/--static--/pyams_media/flowplayer/flowplayer"+l.devext+".js",function(r){r&&(l.dialog&&l.dialog.registerShownCallback(i.initPlayerDialog,o),l.dialog&&l.dialog.registerHideCallback(i.shutdownPlayerDialog,o));var o=a(e),t=o.flowplayer(),n=o.data("ams-flowplayer-events");if(n)for(var y in n)n.hasOwnProperty(y)&&t.on(y,MyAMS.getFunctionByName(n[y]))})},initPlayerDialog:function(){var e=a(this);a(".modal-viewport",e).removeAttr("style").removeClass("modal-viewport")},shutdownPlayerDialog:function(){var e=a(this),l=a(".flowplayer",e).data("flowplayer");l&&l.shutdown()},getPlayerTime:function(){var e=a(this);e.hasClass("flowplayer")||(e=a(".flowplayer",e));var l=e.data("flowplayer");if(l){var i=l.video;if(!i.time&&l.conf.flowplayer&&(i=l.conf.flowplayer.video),i&&i.time){var r=i.time,o=e.parents("form");a('INPUT[name="thumbnail_form.widgets.time"]',o).val(r)}}},pausePlayer:function(){var e=a(this),l=a(".flowplayer",e).data("flowplayer");return l&&l.playing&&l.pause(),i.getPlayerTime.call(e),{}}};e.PyAMS_media=i}(jQuery,this);
--- a/src/pyams_media/skin/templates/video.pt	Fri Jan 18 15:34:46 2019 +0100
+++ b/src/pyams_media/skin/templates/video.pt	Mon Feb 18 16:08:57 2019 +0100
@@ -3,16 +3,24 @@
 				   thumbnails tales:thumbnails(video);
 				   size thumbnails.get_image_size();
 				   thumbnail thumbnails.get_thumbnail('{0}x{1}'.format(size[0], size[1]), 'png');
-				   timestamp tales:timestamp(thumbnail);"
+				   global media_width 0;
+				   global min_width 0;
+				   global previous_type None;"
 	   controls="${'controls' if controls else None}"
-	   poster="${href}/++thumb++${size[0]}x${size[1]}.png?_=${timestamp}">
-	<tal:loop repeat="conversion conversions.get_conversions(order=('video/webm','video/mp4','video/x-flv'))">
-		<source tal:define="media_width conversions.get_conversion_width(conversion.__name__);
-							media_src tales:absolute_url(conversion);
-							video_type tales:video_type(conversion);"
-				tal:condition="video_type"
-				type="${video_type}"
-				src="${media_src.replace('+', '%2b')}"
-				media="${'all and (max-width: {0}px)'.format(media_width) if media_width else None}" />
+	   poster="${href}/++thumb++${size[0]}x${size[1]}.png?_=${tales:timestamp(thumbnail)}">
+	<tal:loop repeat="conversion conversions.get_conversions(order=('video/mp4','video/webm','video/ogg','video/x-flv'))">
+		<tal:var define="video_type tales:video_type(conversion);
+						 min_width ((media_width or 0) + 1) if (video_type == previous_type) else 0;
+						 global media_width conversions.get_conversion_width(conversion.__name__);
+						 media_src tales:absolute_url(conversion);
+						 media_url media_src.replace('+', '%2b');">
+			<source tal:condition="video_type"
+					type="${video_type}"
+					src="${media_url}?_=${tales:timestamp(conversion)}"
+					media="${'screen only{}{}'.format(
+								 ' and (min-width: {}px)'.format(min_width) if min_width else '',
+								 ' and (max-width: {}px)'.format(media_width) if media_width else '')}" />
+			<tal:var define="global previous_type video_type;" />
+		</tal:var>
 	</tal:loop>
 </video>
--- a/src/pyams_media/zmi/templates/audio-preview.pt	Fri Jan 18 15:34:46 2019 +0100
+++ b/src/pyams_media/zmi/templates/audio-preview.pt	Mon Feb 18 16:08:57 2019 +0100
@@ -8,7 +8,7 @@
 	<video
 		tal:define="href tales:absolute_url(context);
 					conversions tales:conversions(context);">
-		<tal:loop repeat="conversion conversions.get_conversions(order=('audio/ogg', 'audio/mpeg', 'audio/wav'))">
+		<tal:loop repeat="conversion conversions.get_conversions(order=('audio/mpeg','audio/ogg','audio/wav'))">
 			<source type="audio/ogg"
 					tal:define="audio_type tales:audio_type(conversion);"
 					tal:condition="audio_type"