diff --git a/openslides/core/static/css/projector.css b/openslides/core/static/css/projector.css
index 2b2d5c4d3..e5b358381 100644
--- a/openslides/core/static/css/projector.css
+++ b/openslides/core/static/css/projector.css
@@ -430,3 +430,32 @@ tr.elected td {
.motion-text.line-numbers-none .os-line-number {
visibility: hidden;
}
+
+/*** Video and Image projection ***/
+img.projector-image {
+ width: 100%;
+}
+
+div.projector-image {
+ width: 100%;
+ height: 100%;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+}
+
+.video-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.video-container > * {
+ flex: 1 1 auto;
+ max-width: 100%;
+ max-height: 100%;
+ width: 100%;
+ height: 100%;
+}
diff --git a/openslides/core/static/templates/projector.html b/openslides/core/static/templates/projector.html
index c8f24b630..f4e59dd7d 100644
--- a/openslides/core/static/templates/projector.html
+++ b/openslides/core/static/templates/projector.html
@@ -40,6 +40,12 @@
margin-top: {{scroll}}px !important;
font-size: {{scale}}%;
}
+ .mediascrollcontent {
+ margin-top: {{scroll/2}}em !important;
+ -webkit-transform: scale({{scale/100}});
+ -ms-transform: scale({{scale/100}});
+ transform: scale({{scale/100}});
+ }
diff --git a/openslides/mediafiles/static/js/mediafiles/base.js b/openslides/mediafiles/static/js/mediafiles/base.js
index 6611b8a77..c33255fa6 100644
--- a/openslides/mediafiles/static/js/mediafiles/base.js
+++ b/openslides/mediafiles/static/js/mediafiles/base.js
@@ -38,14 +38,23 @@ angular.module('OpenSlidesApp.mediafiles', [])
},
},
computed: {
- is_presentable: ['filetype', function (filetype) {
- var PRESENTABLE_FILE_TYPES = ['application/pdf'];
- return _.contains(PRESENTABLE_FILE_TYPES, filetype);
+ is_pdf: ['filetype', function (filetype) {
+ var PDF_FILE_TYPES = ['application/pdf'];
+ return _.contains(PDF_FILE_TYPES, filetype);
}],
is_image: ['filetype', function (filetype) {
var IMAGE_FILE_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
return _.contains(IMAGE_FILE_TYPES, filetype);
}],
+ is_video: ['filetype', function (filetype) {
+ var VIDEO_FILE_TYPES = [ 'video/quicktime', 'video/mp4', 'video/webm',
+ 'video/ogg', 'video/x-flv', 'application/x-mpegURL', 'video/MP2T',
+ 'video/3gpp', 'video/x-msvideo', 'video/x-ms-wmv', 'video/x-matroska' ];
+ return _.contains(VIDEO_FILE_TYPES, filetype);
+ }],
+ is_presentable: ['is_pdf', 'is_image', 'is_video', function (is_pdf, is_image, is_video) {
+ return is_pdf || is_image || is_video;
+ }],
mediafileUrl: [function () {
return this.media_url_prefix + this.mediafile.name;
}],
diff --git a/openslides/mediafiles/static/js/mediafiles/projector.js b/openslides/mediafiles/static/js/mediafiles/projector.js
index b19bb4839..784c0240b 100644
--- a/openslides/mediafiles/static/js/mediafiles/projector.js
+++ b/openslides/mediafiles/static/js/mediafiles/projector.js
@@ -19,8 +19,22 @@ angular.module('OpenSlidesApp.mediafiles.projector', ['OpenSlidesApp.mediafiles'
function($scope, Mediafile) {
// load mediafile object
var mediafile = Mediafile.get($scope.element.id);
- $scope.pdfName = mediafile.title;
- $scope.pdfUrl = mediafile.mediafileUrl;
+ $scope.mediafile = mediafile;
+
+ // Allow the elements to render properly
+ setTimeout(function() {
+ if ($scope.mediafile.is_pdf) {
+ $scope.pdfName = mediafile.title;
+ $scope.pdfUrl = mediafile.mediafileUrl;
+ } else if ($scope.mediafile.is_video) {
+ var player = angular.element.find('#video-player')[0];
+ if ($scope.element.playing) {
+ player.play();
+ } else {
+ player.pause();
+ }
+ }
+ }, 0);
}
]);
diff --git a/openslides/mediafiles/static/js/mediafiles/site.js b/openslides/mediafiles/static/js/mediafiles/site.js
index 4254028ec..38c561f90 100644
--- a/openslides/mediafiles/static/js/mediafiles/site.js
+++ b/openslides/mediafiles/static/js/mediafiles/site.js
@@ -138,7 +138,7 @@ angular.module('OpenSlidesApp.mediafiles.site', ['ngFileUpload', 'OpenSlidesApp.
// ** PDF presentation functions **/
// show document on projector
- $scope.showPdf = function (mediafile) {
+ $scope.showMediafile = function (mediafile) {
var postUrl = '/rest/core/projector/1/prune_elements/';
var data = [{
name: 'mediafiles/mediafile',
@@ -147,7 +147,9 @@ angular.module('OpenSlidesApp.mediafiles.site', ['ngFileUpload', 'OpenSlidesApp.
page: 1,
scale: 'page-fit',
rotate: 0,
- visible: true
+ visible: true,
+ playing: false,
+ fullscreen: mediafile.is_pdf
}];
$http.post(postUrl, data);
};
@@ -169,6 +171,11 @@ angular.module('OpenSlidesApp.mediafiles.site', ['ngFileUpload', 'OpenSlidesApp.
return Mediafile.get(presentedMediafile.id).title;
};
+ $scope.getType = function(presentedMediafile) {
+ var mediafile = Mediafile.get(presentedMediafile.id);
+ return mediafile.is_pdf ? 'pdf' : mediafile.is_image ? 'image' : 'video';
+ };
+
$scope.mediafileGoToPage = function (page) {
var mediafileElement = getCurrentlyPresentedMediafile();
if (parseInt(page) > 0) {
@@ -219,6 +226,26 @@ angular.module('OpenSlidesApp.mediafiles.site', ['ngFileUpload', 'OpenSlidesApp.
rotate: rotation
});
};
+ $scope.mediafileScroll = function(scroll) {
+ var mediafileElement = getCurrentlyPresentedMediafile();
+ sendMediafileCommand({
+ scroll: scroll
+ });
+ };
+ var setFullscreen = function(fullscreen) {
+ sendMediafileCommand({
+ fullscreen: fullscreen
+ });
+ };
+ $scope.mediafileToggleFullscreen = function() {
+ var mediafileElement = getCurrentlyPresentedMediafile();
+ setFullscreen(!mediafileElement.fullscreen);
+ };
+ $scope.setPlaying = function(playing) {
+ sendMediafileCommand({
+ playing: playing
+ });
+ };
}
])
diff --git a/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html b/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html
index 7ac7a156b..2d8dcb43c 100644
--- a/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html
+++ b/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html
@@ -26,7 +26,7 @@
{{ getTitle(presentedMediafile) }}
-
- No PDF file projected.
+ No media file projected.
@@ -163,9 +196,9 @@