Fix mediafile control buttons for fullscreen and play.

This commit is contained in:
Emanuel Schuetze 2016-09-30 19:57:23 +02:00
parent 8427ffd816
commit 6f2a509ebf
3 changed files with 33 additions and 35 deletions

View File

@ -74,7 +74,7 @@ angular.module('OpenSlidesApp.core.projector', ['OpenSlidesApp.core'])
$scope.$watch(function () { $scope.$watch(function () {
return Projector.lastModified($scope.projector_id); return Projector.lastModified($scope.projector_id);
}, function () { }, function () {
var projector = Projector.get($scope.projector_id) var projector = Projector.get($scope.projector_id);
if (projector) { if (projector) {
$scope.error = ''; $scope.error = '';
$scope.projectorWidth = projector.width; $scope.projectorWidth = projector.width;

View File

@ -252,25 +252,17 @@ angular.module('OpenSlidesApp.mediafiles.site', ['ngFileUpload', 'OpenSlidesApp.
{rotate: rotation} {rotate: rotation}
); );
}; };
$scope.mediafileScroll = function(scroll) { $scope.mediafileToggleFullscreen = function(mediafile) {
var mediafileElement = getCurrentlyPresentedMediafile(); sendMediafileCommand(
sendMediafileCommand({ mediafile,
scroll: scroll {fullscreen: !mediafile.fullscreen}
}); );
}; };
var setFullscreen = function(fullscreen) { $scope.mediafileTogglePlaying = function(mediafile) {
sendMediafileCommand({ sendMediafileCommand(
fullscreen: fullscreen mediafile,
}); {playing: !mediafile.playing}
}; );
$scope.mediafileToggleFullscreen = function() {
var mediafileElement = getCurrentlyPresentedMediafile();
setFullscreen(!mediafileElement.fullscreen);
};
$scope.setPlaying = function(playing) {
sendMediafileCommand({
playing: playing
});
}; };
} }
]) ])

View File

@ -26,6 +26,7 @@
<div class="col-md-12"> <div class="col-md-12">
<div ng-repeat="presentedMediafile in presentedMediafiles"> <div ng-repeat="presentedMediafile in presentedMediafiles">
<h3>{{ getTitle(presentedMediafile) }}</h3> <h3>{{ getTitle(presentedMediafile) }}</h3>
<!-- PDF -->
<nav ng-show="getType(presentedMediafile) === 'pdf'" ng-class="getNavStyle(scroll)" class="form-inline"> <nav ng-show="getType(presentedMediafile) === 'pdf'" ng-class="getNavStyle(scroll)" class="form-inline">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default" ng-click="mediafileGoToPage(presentedMediafile, presentedMediafile.page - 1)" <button class="btn btn-default" ng-click="mediafileGoToPage(presentedMediafile, presentedMediafile.page - 1)"
@ -46,53 +47,58 @@
<span class="input-group-addon"><translate>of</translate> {{presentedMediafile.numPages}}</span> <span class="input-group-addon"><translate>of</translate> {{presentedMediafile.numPages}}</span>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default" ng-click="mediafileRotate(presentedMediafile)" title="{{ 'Rotate clockwise' | translate }}"> <button class="btn btn-default" ng-click="mediafileRotate(presentedMediafile)"
title="{{ 'Rotate clockwise' | translate }}">
<i class="fa fa-repeat"></i> <i class="fa fa-repeat"></i>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default" ng-click="mediafileZoomOut(presentedMediafile)" title="{{ 'Zoom out' | translate }}"> <button class="btn btn-default" ng-click="mediafileZoomOut(presentedMediafile)"
title="{{ 'Zoom out' | translate }}">
<i class="fa fa-search-minus"></i> <i class="fa fa-search-minus"></i>
</button> </button>
<button class="btn" ng-click="mediafileFit(presentedMediafile)" title="{{ 'Reset zoom' | translate }}" <button class="btn" ng-click="mediafileFit(presentedMediafile)"
title="{{ 'Reset zoom' | translate }}"
ng-class="presentedMediafile.scale=='page-fit' ? 'btn-primary' : 'btn-default'"> ng-class="presentedMediafile.scale=='page-fit' ? 'btn-primary' : 'btn-default'">
<i class="fa fa-arrows-alt"></i> <i class="fa fa-arrows-alt"></i>
</button> </button>
<button class="btn btn-default" ng-click="mediafileZoomIn(presentedMediafile)" title="{{ 'Zoom in' | translate }}"> <button class="btn btn-default" ng-click="mediafileZoomIn(presentedMediafile)"
title="{{ 'Zoom in' | translate }}">
<i class="fa fa-search-plus"></i> <i class="fa fa-search-plus"></i>
</button> </button>
</div> </div>
</nav> </nav>
<!-- Image -->
<nav ng-show="getType(presentedMediafile) === 'image'" ng-class="getNavStyle(scroll)" class="form-inline"> <nav ng-show="getType(presentedMediafile) === 'image'" ng-class="getNavStyle(scroll)" class="form-inline">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default" ng-click="mediafileToggleFullscreen()" title="{{ 'Toggle fullscreen' | translate }}" <button class="btn btn-default" ng-click="mediafileToggleFullscreen(presentedMediafile)"
title="{{ 'Toggle fullscreen' | translate }}"
ng-class="presentedMediafile.fullscreen ? 'btn-primary' : 'btn-default'"> ng-class="presentedMediafile.fullscreen ? 'btn-primary' : 'btn-default'">
<i class="fa fa-arrows-alt"></i> <i class="fa fa-arrows-alt"></i>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default" ng-click="mediafileRotate()" title="{{ 'Rotate clockwise' | translate }}"> <button class="btn btn-default" ng-click="mediafileRotate(presentedMediafile)"
title="{{ 'Rotate clockwise' | translate }}">
<i class="fa fa-repeat"></i> <i class="fa fa-repeat"></i>
</button> </button>
</div> </div>
</nav> </nav>
<!-- Video -->
<nav ng-show="getType(presentedMediafile) === 'video'" ng-class="getNavStyle(scroll)" class="form-inline"> <nav ng-show="getType(presentedMediafile) === 'video'" ng-class="getNavStyle(scroll)" class="form-inline">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default" ng-click="mediafileToggleFullscreen()" title="{{ 'Toggle fullscreen' | translate }}" <button class="btn btn-default" ng-click="mediafileToggleFullscreen(presentedMediafile)"
title="{{ 'Toggle fullscreen' | translate }}"
ng-class="presentedMediafile.fullscreen ? 'btn-primary' : 'btn-default'"> ng-class="presentedMediafile.fullscreen ? 'btn-primary' : 'btn-default'">
<i class="fa fa-arrows-alt"></i> <i class="fa fa-arrows-alt"></i>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default" ng-click="setPlaying(false)" title="{{ 'Stop' | translate }}" <button class="btn btn-default" ng-click="mediafileTogglePlaying(presentedMediafile)"
ng-class="presentedMediafile.playing ? 'btn-default' : 'btn-primary'"> title="{{ 'Start/stop video' | translate }}">
<i class="fa fa-stop"></i> <i class="fa" ng-class="presentedMediafile.playing ? 'fa-stop' : 'fa-play'"></i>
</button>
</div>
<div class="btn-group">
<button class="btn btn-default" ng-click="setPlaying(true)" title="{{ 'Play' | translate }}"
ng-class="presentedMediafile.playing ? 'btn-primary' : 'btn-default'">
<i class="fa fa-play"></i>
</button> </button>
</div> </div>
</nav> </nav>