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 @@ diff --git a/openslides/mediafiles/static/templates/mediafiles/slide_mediafile.html b/openslides/mediafiles/static/templates/mediafiles/slide_mediafile.html index a0606a352..19d5c182a 100644 --- a/openslides/mediafiles/static/templates/mediafiles/slide_mediafile.html +++ b/openslides/mediafiles/static/templates/mediafiles/slide_mediafile.html @@ -1,6 +1,18 @@ -
- +
+ + + + + +
+ + +
+ +