feat(emulation): allow full range of css dimensions to set video posi…

…tion (fixes #112)

This refactors some of the logic we had before and also fixes some bugs there.
Essentially, rather than figuring out what the 16:9 ratio we need to set the
video is based on the position directly, we apply the position and then call
getClientBoundingRect to determine the outer dimensions, then size the video
accordingly and send it back down to the controls. This is generally more
robust.

package.json

@@ -104,7 +104,7 @@
     "@angular/material": "^5.2.4",
     "@angular/platform-browser": "^5.2.8",
     "@angular/platform-browser-dynamic": "^5.2.8",
-    "@mcph/miix-std": "^0.2.13",
+    "@mixer/cdk-std": "^0.2.13",
     "@ngrx/effects": "^5.2.0",
     "@ngrx/entity": "^5.2.0",
     "@ngrx/store": "^5.2.0",
@@ -163,7 +163,7 @@
     "zone.js": "^0.8.16"
   },
   "dependencies": {
-    "@mcph/miix-webpack-plugin": "^0.1.2",
+    "@mixer/cdk-webpack-plugin": "^0.1.4",
     "chalk": "^2.3.0",
     "command-exists": "^1.2.2",
     "electron-updater": "^2.21.4",

src/app/editor/controls-console/controls-remote-console.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { RPC } from '@mcph/miix-std/dist/internal';
+import { RPC } from '@mixer/cdk-std/dist/internal';
 import { Store } from '@ngrx/store';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 

src/app/editor/controls-console/messages/log-message.ts

@@ -1,4 +1,4 @@
-import { ILogEntry } from '@mcph/miix-std/dist/internal';
+import { ILogEntry } from '@mixer/cdk-std/dist/internal';
 import * as hljs from 'highlight.js';
 import * as JSON5 from 'json5';
 import { IMessage, Message } from './message';

src/app/editor/controls-console/messages/method-message.ts

@@ -1,4 +1,4 @@
-import { IRPCMethod } from '@mcph/miix-std/dist/internal';
+import { IRPCMethod } from '@mixer/cdk-std/dist/internal';
 import * as hljs from 'highlight.js';
 import * as JSON5 from 'json5';
 

src/app/editor/controls-console/messages/reply-message.ts

@@ -1,4 +1,4 @@
-import { IRPCReply } from '@mcph/miix-std/dist/internal';
+import { IRPCReply } from '@mixer/cdk-std/dist/internal';
 import * as hljs from 'highlight.js';
 import * as JSON5 from 'json5';
 

src/app/editor/controls/remote-controls/remote-controls.component.ts

@@ -7,7 +7,7 @@ import {
   OnDestroy,
   ViewChild,
 } from '@angular/core';
-import { ICloseData, Participant } from '@mcph/miix-std/dist/participant';
+import { ICloseData, Participant } from '@mixer/cdk-std/dist/participant';
 import { Store } from '@ngrx/store';
 import { throttle } from 'lodash';
 import {

src/app/editor/controls/sync/base-state-sync.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material';
-import { ISettings, IVideoPositionOptions, RPC } from '@mcph/miix-std/dist/internal';
+import { ISettings, IVideoPositionOptions, RPC } from '@mixer/cdk-std/dist/internal';
 import { Store } from '@ngrx/store';
 import { isEqual, once } from 'lodash';
 import { Observable } from 'rxjs/Observable';

src/app/editor/controls/sync/local-state-sync.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, OnDestroy } from '@angular/core';
-import { RPC } from '@mcph/miix-std/dist/internal';
+import { RPC } from '@mixer/cdk-std/dist/internal';
 import { Store } from '@ngrx/store';
 import { fromEvent } from 'rxjs/observable/fromEvent';
 import { merge as mergeObs } from 'rxjs/observable/merge';

src/app/editor/emulation/devices.ts

@@ -52,7 +52,12 @@ export interface IDevice {
   /**
    * Display returns blocks for the device.
    */
-  display(availableWidth: number, availableHeight: number, orientation: Orientation): IBlock[];
+  display(
+    availableWidth: number,
+    availableHeight: number,
+    fit: boolean,
+    orientation: Orientation,
+  ): IBlock[];
 }
 
 function fitRatio(ratio: number, width: number, height: number): [number, number] {
@@ -78,18 +83,25 @@ class DesktopDevice implements IDevice {
   public readonly displayName = 'Web View (16:9)';
   public readonly canRotate = false;
 
-  public display(availableWidth: number, availableHeight: number): IBlock[] {
+  public display(availableWidth: number, availableHeight: number, exact: boolean): IBlock[] {
     // The goal here is to pretend the scene is 1080p, then scale the 350px
     // default chat sidebar to its scaled size.
-    const [width, height] = fitRatio(16 / 9, availableWidth, availableHeight);
+    let width: number;
+    let height: number;
+    if (!exact) {
+      [width, height] = fitRatio(16 / 9, availableWidth, availableHeight);
+    } else {
+      [width, height] = [availableWidth, availableHeight];
+    }
+
     const chatWidth = 350 / 1920 * availableWidth;
 
     return [
       {
         x: displayPadding,
         y: displayPadding,
         width: width - chatWidth - displayPadding * 2,
-        height: height - displayPadding,
+        height: height - displayPadding * 2,
         type: 'controls',
       },
       {
@@ -113,10 +125,16 @@ class FullscreenDevice implements IDevice {
   public readonly displayName = 'Full Screen (16:9)';
   public readonly canRotate = false;
 
-  public display(availableWidth: number, availableHeight: number): IBlock[] {
+  public display(availableWidth: number, availableHeight: number, exact: boolean): IBlock[] {
     // The goal here is to pretend the scene is 1080p, then scale the 350px
     // default chat sidebar to its scaled size.
-    const [width, height] = fitRatio(16 / 9, availableWidth, availableHeight);
+    let width: number;
+    let height: number;
+    if (!exact) {
+      [width, height] = fitRatio(16 / 9, availableWidth, availableHeight);
+    } else {
+      [width, height] = [availableWidth, availableHeight];
+    }
 
     return [
       {
@@ -145,34 +163,41 @@ class MobileDevice implements IDevice {
     private readonly width: number,
   ) {}
 
-  public display(_w: number, _h: number, orientation: Orientation): IBlock[] {
+  public display(
+    availableWidth: number,
+    availableHeight: number,
+    exact: boolean,
+    orientation: Orientation,
+  ): IBlock[] {
+    const height = exact ? availableHeight : this.height;
+    const width = exact ? availableWidth : this.width;
     if (orientation === Orientation.Landscape) {
       return [
         {
           x: 0,
           y: 0,
-          width: this.width,
-          height: this.height,
+          width,
+          height,
           type: 'controls',
         },
       ];
     }
 
-    const videoHeight = this.height * 9 / 16;
+    const videoHeight = height * 9 / 16;
 
     return [
       {
         x: 0,
         y: 0,
-        width: this.height,
+        width: height,
         height: videoHeight,
         type: 'video',
       },
       {
         x: 0,
         y: videoHeight,
-        width: this.height,
-        height: this.width - videoHeight,
+        width: height,
+        height: width - videoHeight,
         type: 'controls',
       },
     ];

src/app/editor/emulation/emulation-container/emulation-container.component.html

@@ -20,12 +20,7 @@
     [style.left.px]="controlsBlock?.x"
     [style.width.px]="controlsBlock?.width"
     [style.height.px]="controlsBlock?.height">
-    <div class="block block-video"
-      *ngIf="!hasStubbedVideo"
-      [style.top.px]="(videoFilledSize | async)?.top"
-      [style.left.px]="(videoFilledSize | async)?.left"
-      [style.width.px]="(videoFilledSize | async)?.width"
-      [style.height.px]="(videoFilledSize | async)?.height">
+    <div class="block block-video" *ngIf="!hasStubbedVideo" #videoBlock>
       <div></div>
     </div>
     <ng-content></ng-content>