cwdoe-1358 Right side embedded and html block bug

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cite-ui",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/components/home-app/home-app.component.html

@@ -174,10 +174,12 @@ <h2>Please contact the site administrator or your event facilator.</h2>
       <div [ngClass]="getAppContentClass()" *ngIf="(activeScoringModel$ | async)?.rightSideDisplay !== 'ScoreSummary' && (activeScoringModel$ | async)?.rightSideDisplay !== 'None' && selectedSection !== section.report" class="app-score-container flex-50 mat-elevation-z8" autosize>
         <app-right-side-html
           *ngIf="(activeScoringModel$ | async)?.rightSideDisplay === 'HtmlBlock'"
-          [evaluation$]="activeEvaluation$"
+          [scoringModel$]="activeScoringModel$"
+          [hideTopbar]="hideTopbar"
         ></app-right-side-html>
         <app-right-side-iframe
           *ngIf="(activeScoringModel$ | async)?.rightSideDisplay === 'EmbeddedUrl'"
+          [hideTopbar]="hideTopbar"
         ></app-right-side-iframe>
         <app-scoresheet
           *ngIf="(activeScoringModel$ | async)?.rightSideDisplay === 'Scoresheet'"

src/app/components/right-side-html/right-side-html.component.html

@@ -5,5 +5,5 @@
 -->
 
 <div class="top-level-container">
-  <angular-editor class="angular-editor" [ngModel]="(evaluation$ | async)?.rightSideHtmlBlock" [config]="editorConfig"></angular-editor>
+  <angular-editor class="angular-editor" [ngModel]="(scoringModel$ | async)?.rightSideHtmlBlock" [config]="editorConfig"></angular-editor>
 </div>

src/app/components/right-side-html/right-side-html.component.scss

@@ -9,8 +9,16 @@
   align-self: flex-start;
   text-align: left;
   width: 99%;
-  height: calc(100% - 53px);
   overflow-y: auto;
   margin-top: -6px;
   margin-left: -2px;
 }
+
+.in-player {
+  height: calc(100vh - 60px);
+}
+
+.out-of-player {
+  height: calc(100vh - 100px);
+}
+

src/app/components/right-side-html/right-side-html.component.ts

@@ -3,7 +3,7 @@
 // project root for license information or contact [email protected] for full terms.
 
 import { Component, Input, OnDestroy } from '@angular/core';
-import { Evaluation } from 'src/app/generated/cite.api/model/models';
+import { ScoringModel } from 'src/app/generated/cite.api';
 import { SubmissionQuery } from 'src/app/data/submission/submission.query';
 import { Subject, Observable } from 'rxjs';
 import { AngularEditorConfig } from '@kolkov/angular-editor';
@@ -15,7 +15,8 @@ import { AngularEditorConfig } from '@kolkov/angular-editor';
 })
 export class RightSideHtmlComponent implements OnDestroy {
   isLoading = false;
-  @Input() evaluation$: Observable<Evaluation>;
+  @Input() scoringModel$: Observable<ScoringModel>;
+  @Input() hideTopbar: boolean;
   editorConfig: AngularEditorConfig = {
     editable: false,
     height: 'auto',
@@ -38,6 +39,14 @@ export class RightSideHtmlComponent implements OnDestroy {
     private submissionQuery: SubmissionQuery
   ) {}
 
+  getTopClass() {
+    if (this.hideTopbar) {
+      return 'top-level-container in-player'
+    } else {
+      return 'top-level-container out-of-player'
+    }
+  }
+
   ngOnDestroy() {
     this.unsubscribe$.next(null);
     this.unsubscribe$.complete();

src/app/components/right-side-iframe/right-side-iframe.component.html

@@ -4,7 +4,7 @@
 project root for license information or contact [email protected] for full terms.
 -->
 
-<div class="top-level-container">
+<div [ngClass]="getTopClass()">
   <iframe
     title="focused app"
     allow="fullscreen"

src/app/components/right-side-iframe/right-side-iframe.component.scss

@@ -8,13 +8,20 @@
   justify-content: flex-start;
   align-self: flex-start;
   text-align: left;
-  width: 99%;
-  height: calc(100% - 53px);
+  width: 100%;
   overflow-y: auto;
 }
 
+.in-player {
+  height: calc(100vh - 60px);
+}
+
+.out-of-player {
+  height: calc(100vh - 100px);
+}
+
 .focused-app-iframe {
   height: 100%;
-  width: 100%;
+  width: 99%;
 }
 

src/app/components/right-side-iframe/right-side-iframe.component.ts

@@ -3,35 +3,43 @@
 // project root for license information or contact [email protected] for full terms.
 
 import { Component, Input, OnDestroy } from '@angular/core';
-import { Evaluation } from 'src/app/generated/cite.api';
+import { ScoringModel } from 'src/app/generated/cite.api';
 import { SafeUrl, DomSanitizer } from '@angular/platform-browser';
-import { map, takeUntil } from 'rxjs/operators';
-import { Subject, Observable } from 'rxjs';
-import { AngularEditorConfig } from '@kolkov/angular-editor';
-import { EvaluationQuery } from 'src/app/data/evaluation/evaluation.query';
+import { takeUntil } from 'rxjs/operators';
+import { Subject, Observable, combineLatest } from 'rxjs';
+import { ScoringModelQuery } from 'src/app/data/scoring-model/scoring-model.query';
 
 @Component({
   selector: 'app-right-side-iframe',
   templateUrl: './right-side-iframe.component.html',
   styleUrls: ['./right-side-iframe.component.scss'],
 })
 export class RightSideIframeComponent implements OnDestroy {
+  @Input() hideTopbar: boolean;
   safeUrl: SafeUrl = this.sanitizer.bypassSecurityTrustResourceUrl('');
   private unsubscribe$ = new Subject();
 
 
   constructor(
     private sanitizer: DomSanitizer,
-    private evaluationQuery: EvaluationQuery
+    private scoringModelQuery: ScoringModelQuery
   ) {
     // observe active evaluation
-    (this.evaluationQuery.selectActive() as Observable<Evaluation>).pipe(takeUntil(this.unsubscribe$)).subscribe(active => {
+    (this.scoringModelQuery.selectActive() as Observable<ScoringModel>).pipe(takeUntil(this.unsubscribe$)).subscribe(active => {
       if (active) {
-        this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(active.scoringModel.rightSideEmbeddedUrl);
+        this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(active.rightSideEmbeddedUrl);
       }
     });
   }
 
+  getTopClass() {
+    if (this.hideTopbar) {
+      return 'top-level-container in-player'
+    } else {
+      return 'top-level-container out-of-player'
+    }
+  }
+
   ngOnDestroy() {
     this.unsubscribe$.next(null);
     this.unsubscribe$.complete();