Merge pull request #235 from negue/fix/quality-of-life2021-2-1

V2021.2.1: quality of life improvements
negue · Mar 9, 2021 · 6970bac · 6970bac
2 parents 078dda0 + 3976d56
commit 6970bac
Show file tree

Hide file tree

Showing 18 changed files with 240 additions and 99 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,14 @@
+## 2021.2.1
+
+### Quality of Life Improvements
+
+* [x] Each Media has a now cornered background to see boundaries
+* [x] Advanced: Ability to change the css transform value
+* [x] Arrange View: Resizes now also work easier when doing these functions from left/top
+* [x] Arrange View: Ability to lock specific arrange / resize functions
+* [x] Ability to switch to the "media config"-dialog from the "screen media config"-dialog 
+
+
 ## 2021.2.0
 
 * [x] Drag&Drop Media in the `Assign / arrange media`-View

diff --git a/README.md b/README.md
@@ -56,7 +56,8 @@ ___
 ## Roadmap
 
 * [ ] Change media options by triggered variables (e.g. different style, or something)
-* [ ] Labels on or around the Media
+* [ ] "Media Type": `Scripts` with this more advanced features could be realized 
+* [ ] Labels on or around the Media, each with their own Position / Animation
 * [ ] more to be added :)
 
 ## Based on this Template:

diff --git a/README_DEV.md b/README_DEV.md
@@ -38,3 +38,10 @@ Client is in `src/app`
 Server is in `main.ts` and `server/*`
 
 Streamdeck-Plugin is in `memebox-streamdeck`
+
+### Development Roadmap
+
+- [ ] cleanup shared constants
+- [ ] strict tsconfig / eslint rules
+- [ ] Use [`ts.ed`](https://tsed.io/) to improve the backend code by dependency injection and code 
+- [ ] Probably more to come once more features are added :)
diff --git a/projects/contracts/src/lib/types.ts b/projects/contracts/src/lib/types.ts
@@ -106,6 +106,12 @@ export interface ScreenClip extends HasId {
   zIndex?: number;
 
   customCss?: string;
+
+  arrangeLock?: {
+    size: boolean;
+    position: boolean;
+    transform: boolean;
+  }
 }
 
 export interface ScreenViewEntry extends Screen {

diff --git a/server/twitch.handler.ts b/server/twitch.handler.ts
@@ -9,7 +9,7 @@ import {
   TwitchConfig,
   TwitchEventTypes,
   TwitchTriggerCommand
-} from '../projects/contracts/src/lib/types';
+} from '@memebox/contracts';
 import {triggerMediaClipById} from './websocket-server';
 import {Logger} from 'winston';
 import {newLogger} from './logger.utils';
@@ -218,7 +218,11 @@ export class TwitchHandler {
       .catch(console.error);
   }
 
-  getCommandOfMessage(message: string, event: TwitchEventTypes, eventOptions?: TwitchEventOptions): Twitch {
+  getCommandOfMessage(
+    message: string,
+    event: TwitchEventTypes,
+    eventOptions?: TwitchEventOptions
+  ): Twitch {
     if (!message && !eventOptions) {
       return null;
     }

diff --git a/src/app/app.icons.ts b/src/app/app.icons.ts
@@ -17,6 +17,8 @@ export const APP_ICONS = [
   'info',
   'insert_photo',
   'launch',
+  'lock',
+  'lock_open',
   'mobile_friendly',
   'mobile_off',
   'network_wifi',

diff --git a/src/app/shared/dialogs/media-edit/media-edit.module.ts b/src/app/shared/dialogs/media-edit/media-edit.module.ts
@@ -1,24 +1,24 @@
-import { NgModule } from "@angular/core";
-import { MediaEditComponent } from "./media-edit.component";
-import { CommonModule } from "@angular/common";
-import { DialogContract } from "../dialog.contract";
-import { MatDialog, MatDialogModule } from "@angular/material/dialog";
-import { Clip } from "@memebox/contracts";
-import { MatDialogRef } from "@angular/material/dialog/dialog-ref";
-import { MatCheckboxModule } from "@angular/material/checkbox";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { ReactiveFormsModule } from "@angular/forms";
-import { MatButtonModule } from "@angular/material/button";
-import { MatIconModule } from "@angular/material/icon";
-import { MatSelectModule } from "@angular/material/select";
-import { MatSliderModule } from "@angular/material/slider";
-import { MatChipsModule } from "@angular/material/chips";
-import { MatAutocompleteModule } from "@angular/material/autocomplete";
-import { CompactClipCardModule } from "../../components/compact-clip-card/compact-clip-card.module";
-import { DynamicIframeModule } from "../../components/dynamic-iframe/dynamic-iframe.module";
-import { AutoScaleModule } from "@gewd/components/auto-scale";
-import { ClipPreviewModule } from "../../components/clip-preview/clip-preview.module";
+import {NgModule} from "@angular/core";
+import {MediaEditComponent} from "./media-edit.component";
+import {CommonModule} from "@angular/common";
+import {DialogContract} from "../dialog.contract";
+import {MatDialog, MatDialogModule} from "@angular/material/dialog";
+import {Clip} from "@memebox/contracts";
+import {MatDialogRef} from "@angular/material/dialog/dialog-ref";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInputModule} from "@angular/material/input";
+import {ReactiveFormsModule} from "@angular/forms";
+import {MatButtonModule} from "@angular/material/button";
+import {MatIconModule} from "@angular/material/icon";
+import {MatSelectModule} from "@angular/material/select";
+import {MatSliderModule} from "@angular/material/slider";
+import {MatChipsModule} from "@angular/material/chips";
+import {MatAutocompleteModule} from "@angular/material/autocomplete";
+import {CompactClipCardModule} from "../../components/compact-clip-card/compact-clip-card.module";
+import {DynamicIframeModule} from "../../components/dynamic-iframe/dynamic-iframe.module";
+import {AutoScaleModule} from "@gewd/components/auto-scale";
+import {ClipPreviewModule} from "../../components/clip-preview/clip-preview.module";
 
 @NgModule({
   declarations: [
@@ -48,6 +48,7 @@ export class MediaEditModule implements DialogContract<Partial<Clip>> {
   constructor(private dialog: MatDialog) {
   }
 
+  // TODO refactor to use only the ID?
   public openDialog (payload: Partial<Clip>): MatDialogRef<any> {
     const dialogRef = this.dialog.open(MediaEditComponent, {
       data: payload,

diff --git a/src/app/shared/dialogs/screen-arrange/drag-resize-media/drag-resize-media.component.html b/src/app/shared/dialogs/screen-arrange/drag-resize-media/drag-resize-media.component.html
@@ -2,20 +2,6 @@
                   [setting]="settings"
                   draggable="false"></app-clip-preview>
 
-<!--
-
-<gewd-auto-scale [width]="element?.nativeElement.clientWidth  || 200"
-              [height]="element?.nativeElement.clientHeight || 100"
-                 #autoScale
->
-
-
-</gewd-auto-scale>
-
-<div class="title-element mat-caption">
-  {{ clip.name }}
-</div>
--->
 <ngx-moveable
   #moveableInstance
   [target]="showResizeBorder ? element?.nativeElement : null"

diff --git a/src/app/shared/dialogs/screen-arrange/drag-resize-media/drag-resize-media.component.ts b/src/app/shared/dialogs/screen-arrange/drag-resize-media/drag-resize-media.component.ts
@@ -1,6 +1,5 @@
 import {
   AfterViewInit,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -84,33 +83,12 @@ export class DragResizeMediaComponent implements OnInit, AfterViewInit ,OnChange
 
   private warpExist = false;
 
-  constructor(public element: ElementRef<HTMLElement>,
-              private cd: ChangeDetectorRef) {
-
-    // Yes its weird but the auto-scale sometimes doesn't
-    // get the inner content sizes to resize its own
-
-    // TODO Fix the autoscaling component somehow to "auto" scale on size changes
-    // until then let the timeouts begin...
-    setTimeout(() => {
-      this.cd.detectChanges();
-    }, 10);
-    setTimeout(() => {
-      this.cd.detectChanges();
-    }, 50);
-
-    setTimeout(() => {
-      this.cd.detectChanges();
-    }, 100);
-
-    setTimeout(() => {
-      this.cd.detectChanges();
-    }, 200);
+  constructor(public element: ElementRef<HTMLElement>) {
   }
 
   ngAfterViewInit(): void {
 
-    }
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     console.info('DragResize ngChanges');
@@ -172,6 +150,13 @@ export class DragResizeMediaComponent implements OnInit, AfterViewInit ,OnChange
 
     this.updateCSSVar('width', newPosition.x);
     this.updateCSSVar('height', newPosition.y);
+
+    const beforeTranslate = drag.beforeTranslate;
+
+    this.frame.translate = beforeTranslate;
+
+    // smooth resizing from left / top
+    target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`;
   }
   onResizeEnd({ target, isDrag, clientX, clientY }) {
     console.log("onResizeEnd", target, isDrag);

diff --git a/src/app/shared/dialogs/screen-arrange/screen-arrange.component.html b/src/app/shared/dialogs/screen-arrange/screen-arrange.component.html
@@ -156,13 +156,13 @@ <h3>Visible Media</h3>
           >
             <ng-container *ngFor="let pair of visibleItems$|async; trackBy: trackByClip">
               <!-- improve the duplicate settings -->
-              <ng-container *ngIf="pair.clipSetting.position === 0">
+              <ng-container *ngIf="pair.clipSetting.position === PositionEnum.FullScreen">
                 <app-clip-preview [clip]="pair.clip"
                                   [style.z-index]="pair === currentSelectedClip ? 10000 : pair.clipSetting.zIndex"
                                   [style.position]="'absolute'"
-                                  draggable="false"></app-clip-preview>
+                                  draggable="false" class="dragable-preview"></app-clip-preview>
               </ng-container>
-              <app-drag-resize-media *ngIf="pair.clipSetting.position === 2"
+              <app-drag-resize-media *ngIf="pair.clipSetting.position === PositionEnum.Centered"
                                      [clip]="pair.clip"
                                      [style.z-index]="pair === currentSelectedClip ? 10000 : pair.clipSetting.zIndex"
                                      [screen]="screen"
@@ -174,13 +174,14 @@ <h3>Visible Media</h3>
 
                                      transformOrigin="center center"
                                      [draggingEnabled]="false"
-                                     [resizeEnabled]="resizeCheckbox.checked"
-                                     [rotateEnabled]="rotateCheckbox.checked"
-                                     [warpEnabled]="warpingCheckbox.checked"
+                                     [resizeEnabled]="pair.clipSetting.arrangeLock?.size ? false : resizeCheckbox.checked"
+                                     [rotateEnabled]="pair.clipSetting.arrangeLock?.transform ? false : rotateCheckbox.checked"
+                                     [warpEnabled]="pair.clipSetting.arrangeLock?.transform ? false : warpingCheckbox.checked"
+                                     class="dragable-preview"
               >
 
               </app-drag-resize-media>
-              <app-drag-resize-media *ngIf="pair.clipSetting.position === 3"
+              <app-drag-resize-media *ngIf="pair.clipSetting.position === PositionEnum.Random"
                                      [clip]="pair.clip"
                                      [style.z-index]="pair === currentSelectedClip ? 10000 : pair.clipSetting.zIndex"
                                      [screen]="screen"
@@ -190,15 +191,16 @@ <h3>Visible Media</h3>
                                      (elementClicked)="elementClicked(dragResizeMediaComponent, pair)"
                                      (inputApplied)="elementCreated(dragResizeMediaComponent, pair)"
                                      [draggingEnabled]="false"
-                                     [resizeEnabled]="true"
-                                     [rotateEnabled]="rotateCheckbox.checked"
-                                     [warpEnabled]="warpingCheckbox.checked"
+                                     [resizeEnabled]="pair.clipSetting.arrangeLock?.size ? false : true"
+                                     [rotateEnabled]="pair.clipSetting.arrangeLock?.transform ? false : rotateCheckbox.checked"
+                                     [warpEnabled]="pair.clipSetting.arrangeLock?.transform ? false : warpingCheckbox.checked"
+                                     class="dragable-preview"
               >
 
               </app-drag-resize-media>
 
                 <app-drag-resize-media
-                  *ngIf="pair.clipSetting.position === 1"
+                  *ngIf="pair.clipSetting.position === PositionEnum.Absolute"
                   [clip]="pair.clip"
                   [screen]="screen"
                   [sizeType]="sizeType.value"
@@ -208,10 +210,12 @@ <h3>Visible Media</h3>
                   [settings]="pair.clipSetting" #dragResizeMediaComponent
                   (inputApplied)="elementCreated(dragResizeMediaComponent, pair)"
 
-                  [draggingEnabled]="dragCheckbox.checked"
-                  [resizeEnabled]="resizeCheckbox.checked"
-                  [rotateEnabled]="rotateCheckbox.checked"
-                  [warpEnabled]="warpingCheckbox.checked"
+                  [draggingEnabled]="pair.clipSetting.arrangeLock?.position ? false : dragCheckbox.checked"
+                  [resizeEnabled]="pair.clipSetting.arrangeLock?.size ? false : resizeCheckbox.checked"
+                  [rotateEnabled]="pair.clipSetting.arrangeLock?.transform ? false : rotateCheckbox.checked"
+                  [warpEnabled]="pair.clipSetting.arrangeLock?.transform ? false : warpingCheckbox.checked"
+
+                  class="dragable-preview"
                 >
 
                 </app-drag-resize-media>
@@ -237,13 +241,25 @@ <h2>
               </mat-select>
             </mat-form-field>
 
-            <mat-checkbox [checked]="true" #dragCheckbox>Drag</mat-checkbox>
+            <mat-checkbox [checked]="true" #dragCheckbox
+                          [disabled]="currentSelectedClip?.clipSetting.arrangeLock?.position">
+              Drag
+            </mat-checkbox>
             <mat-checkbox [checked]="true" #resizeCheckbox
-                          (change)="onCheckedToggle($event, warpingCheckbox)">Resizing</mat-checkbox>
+                          (change)="onCheckedToggle($event, warpingCheckbox)"
+                          [disabled]="currentSelectedClip?.clipSetting.arrangeLock?.size">
+              Resizing
+            </mat-checkbox>
             <mat-checkbox #rotateCheckbox
-                          [checked]="true">Rotating</mat-checkbox>
+                          [checked]="true"
+                          [disabled]="currentSelectedClip?.clipSetting.arrangeLock?.transform">
+              Rotating
+            </mat-checkbox>
             <mat-checkbox #warpingCheckbox
-                          (change)="onCheckedToggle($event, resizeCheckbox)">Warping</mat-checkbox>
+                          (change)="onCheckedToggle($event, resizeCheckbox)"
+                          [disabled]="currentSelectedClip?.clipSetting.arrangeLock?.transform">
+              Warping
+            </mat-checkbox>
           </div>
         <button mat-raised-button (click)="reset()" color="warn">
             Reset

diff --git a/src/app/shared/dialogs/screen-arrange/screen-arrange.component.scss b/src/app/shared/dialogs/screen-arrange/screen-arrange.component.scss
@@ -191,3 +191,18 @@ mat-card-title {
     border: 3px mat-css-color-accent() solid;
   }
 }
+
+// cornered example of https://css-tricks.com/more-control-over-css-borders-with-background-image/
+.dragable-preview {
+  --clr-border: #d3d3d3b0;
+  background-position:  0 0, 0 0, 100% 0, 0 100%;
+  background-size: 1vw 100%, 100% 1vw, 1vw 100% , 100% 1vw;
+  background-repeat: no-repeat;
+
+  background-image:
+    linear-gradient(0deg, var(--clr-border), var(--clr-border) 25%, transparent 25%, transparent 75%, var(--clr-border) 75%), // left
+    linear-gradient(90deg, var(--clr-border), var(--clr-border) 25%, transparent 25%, transparent 75%, var(--clr-border) 75%), // top
+    linear-gradient(180deg, var(--clr-border), var(--clr-border) 25%, transparent 25%, transparent 75%, var(--clr-border) 75%), // right
+    linear-gradient(270deg, var(--clr-border), var(--clr-border) 25%, transparent 25%, transparent 75%, var(--clr-border) 75%) // bottom
+;
+}
diff --git a/src/app/shared/dialogs/screen-arrange/screen-arrange.component.ts b/src/app/shared/dialogs/screen-arrange/screen-arrange.component.ts
@@ -30,6 +30,7 @@ import {MatRipple} from "@angular/material/core";
 export class ScreenArrangeComponent implements OnInit {
 
   MediaType = MediaType;
+  PositionEnum = PositionEnum;
 
   screen$ = this.appQueries.screenMap$.pipe(
     map(screenMap => screenMap[this.screen.id])