projector scroll and contdown offset

client/src/app/core/repositories/projector/projector-repository.service.ts

@@ -90,9 +90,10 @@ export class ProjectorRepositoryService extends BaseRepository<ViewProjector, Pr
      *
      * @param projector The projector to scroll
      * @param direction The direction.
+     * @param step (default 1) The amount of scroll-steps
      */
-    public async scroll(projector: ViewProjector, direction: ScrollScaleDirection): Promise<void> {
+    public async scroll(projector: ViewProjector, direction: ScrollScaleDirection, step: number = 1): Promise<void> {
-        await this.controlView(projector, direction, 'scroll');
+        await this.controlView(projector, direction, 'scroll', step);
     }
 
     /**
@@ -100,9 +101,10 @@ export class ProjectorRepositoryService extends BaseRepository<ViewProjector, Pr
      *
      * @param projector The projector to scale
      * @param direction The direction.
+     * @param step (default 1) The amount of scale-steps
      */
-    public async scale(projector: ViewProjector, direction: ScrollScaleDirection): Promise<void> {
+    public async scale(projector: ViewProjector, direction: ScrollScaleDirection, step: number = 1): Promise<void> {
-        await this.controlView(projector, direction, 'scale');
+        await this.controlView(projector, direction, 'scale', step);
     }
 
     /**
@@ -111,15 +113,18 @@ export class ProjectorRepositoryService extends BaseRepository<ViewProjector, Pr
      * @param projector The projector to control.
      * @param direction The direction
      * @param action The action. Can be scale or scroll.
+     * @param step The amount of steps to make.
      */
     private async controlView(
         projector: ViewProjector,
         direction: ScrollScaleDirection,
-        action: 'scale' | 'scroll'
+        action: 'scale' | 'scroll',
+        step: number
     ): Promise<void> {
         await this.http.post<void>(`/rest/core/projector/${projector.id}/control_view/`, {
             action: action,
-            direction: direction
+            direction: direction,
+            step: step
         });
     }
 }

client/src/app/shared/components/slide-container/slide-container.component.ts

@@ -76,6 +76,7 @@ export class SlideContainerComponent extends BaseComponent {
     public set projector(projector: ViewProjector) {
         this._projector = projector;
         this.setProjectorForComponent();
+        this.updateScroll();
     }
 
     public get projector(): ViewProjector {
@@ -137,7 +138,7 @@ export class SlideContainerComponent extends BaseComponent {
     private updateScroll(): void {
         if (this.slideOptions.scrollable) {
             let value = this.scroll;
-            value *= -50;
+            value *= -100;
             if (this.projector.show_header_footer) {
                 value += 50; // Default offset for the header
             }

client/src/app/site/projector/components/projector-detail/projector-detail.component.html

@@ -29,14 +29,45 @@
             <!-- scaling indicator -->
             <div class="button-size" [ngClass]="projector.scale != 0 ? 'warn' : ''">{{ projector.scale }}</div>
 
-            <!-- scroll down -->
+            <!-- scroll viewport up (fast), decrease scroll counter -->
-            <button type="button" class="spacer-left-40" mat-icon-button (click)="scroll(scrollScaleDirection.Down)">
+            <button
-                <mat-icon>arrow_downward</mat-icon>
+                [disabled]="projector.scroll <= 4"
-            </button>
+                type="button"
-            <!-- scroll up -->
+                class="spacer-left-50"
-            <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Up)">
+                mat-icon-button
+                (click)="scroll(scrollScaleDirection.Down, 5)"
+                matTooltip="{{ 'Scroll up (big step)' | translate }}"
+            >
                 <mat-icon>arrow_upward</mat-icon>
             </button>
+            <!-- scroll viewport up (slow), decrease scroll counter -->
+            <button
+                [disabled]="projector.scroll <= 0"
+                type="button"
+                mat-icon-button
+                (click)="scroll(scrollScaleDirection.Down)"
+                matTooltip="{{ 'Scroll up' | translate }}"
+            >
+                <mat-icon>arrow_drop_up</mat-icon>
+            </button>
+            <!-- scroll viewport down (slow), increase scroll counter -->
+            <button
+                type="button"
+                mat-icon-button
+                (click)="scroll(scrollScaleDirection.Up)"
+                matTooltip="{{ 'Scroll down' | translate }}"
+            >
+                <mat-icon>arrow_drop_down</mat-icon>
+            </button>
+            <!-- scroll viewport down (fast), increase scroll counter -->
+            <button
+                type="button"
+                mat-icon-button
+                (click)="scroll(scrollScaleDirection.Up, 5)"
+                matTooltip="{{ 'Scroll down (big step)' | translate }}"
+            >
+                <mat-icon>arrow_downward</mat-icon>
+            </button>
             <!-- reset button -->
             <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Reset)">
                 <mat-icon>refresh</mat-icon>

client/src/app/site/projector/components/projector-detail/projector-detail.component.ts

@@ -90,18 +90,22 @@ export class ProjectorDetailComponent extends BaseViewComponent implements OnIni
 
     /**
      * Change the scroll
+     *
      * @param direction The direction to send.
+     * @param step (optional) The amount of steps to make.
      */
-    public scroll(direction: ScrollScaleDirection): void {
+    public scroll(direction: ScrollScaleDirection, step: number = 1): void {
-        this.repo.scroll(this.projector, direction).then(null, this.raiseError);
+        this.repo.scroll(this.projector, direction, step).then(null, this.raiseError);
     }
 
     /**
      * Change the scale
+     *
      * @param direction The direction to send.
+     * @param step (optional) The amount of steps to make.
      */
-    public scale(direction: ScrollScaleDirection): void {
+    public scale(direction: ScrollScaleDirection, step: number = 1): void {
-        this.repo.scale(this.projector, direction).then(null, this.raiseError);
+        this.repo.scale(this.projector, direction, step).then(null, this.raiseError);
     }
 
     public projectNextSlide(): void {

client/src/app/slides/core/countdown/countdown-slide.component.html

@@ -1,4 +1,4 @@
-<div class="countdown overlay" *ngIf="data && !data.element.fullscreen">
+<div class="countdown overlay" *ngIf="data && !data.element.fullscreen" [ngStyle]="{'margin-top': (!projector || projector.show_header_footer) ? '80px' : '30px'}">
     <os-countdown-time [countdown]="data.data" [warningTime]="data.data.warning_time"></os-countdown-time>
     <div class="description">
         {{ data.data.description }}

client/src/styles.scss

@@ -412,8 +412,8 @@ button.mat-menu-item.selected {
 .spacer-left-10 {
     margin-left: 10px;
 }
-.spacer-left-40 {
+.spacer-left-50 {
-    margin-left: 40px !important;
+    margin-left: 50px !important;
 }
 
 .button24 {

openslides/core/views.py

@@ -204,7 +204,8 @@ class ProjectorViewSet(ModelViewSet):
         It expects a POST request to
         /rest/core/projector/<pk>/control_view/ with a dictionary with an
         action ('scale' or 'scroll') and a direction ('up', 'down' or
-        'reset').
+        'reset'). An optional 'step' can be given to control the amount
+        of scrolling and scaling. The default is 1.
 
         Example:
 
@@ -226,20 +227,24 @@ class ProjectorViewSet(ModelViewSet):
             )
 
         projector_instance = self.get_object()
+        step = request.data.get("step", 1)
+        if step < 1:
+            step = 1
+
         if request.data["action"] == "scale":
             if request.data["direction"] == "up":
-                projector_instance.scale = F("scale") + 1
+                projector_instance.scale = F("scale") + step
             elif request.data["direction"] == "down":
-                projector_instance.scale = F("scale") - 1
+                projector_instance.scale = F("scale") - step
             else:
                 # request.data['direction'] == 'reset'
                 projector_instance.scale = 0
         else:
             # request.data['action'] == 'scroll'
             if request.data["direction"] == "up":
-                projector_instance.scroll = F("scroll") + 1
+                projector_instance.scroll = F("scroll") + step
             elif request.data["direction"] == "down":
-                projector_instance.scroll = F("scroll") - 1
+                projector_instance.scroll = F("scroll") - step
             else:
                 # request.data['direction'] == 'reset'
                 projector_instance.scroll = 0