Skip to content

Commit 6970bac

Browse files
neguenegue
authored
Merge pull request #235 from negue/fix/quality-of-life2021-2-1
V2021.2.1: quality of life improvements
2 parents 078dda0 + 3976d56 commit 6970bac

18 files changed

+240
-99
lines changed

‎CHANGELOG.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
## 2021.2.1
2+
3+
### Quality of Life Improvements
4+
5+
* [x] Each Media has a now cornered background to see boundaries
6+
* [x] Advanced: Ability to change the css transform value
7+
* [x] Arrange View: Resizes now also work easier when doing these functions from left/top
8+
* [x] Arrange View: Ability to lock specific arrange / resize functions
9+
* [x] Ability to switch to the "media config"-dialog from the "screen media config"-dialog
10+
11+
112
## 2021.2.0
213

314
* [x] Drag&Drop Media in the `Assign / arrange media`-View

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@ ___
5656
## Roadmap
5757

5858
* [ ] Change media options by triggered variables (e.g. different style, or something)
59-
* [ ] Labels on or around the Media
59+
* [ ] "Media Type": `Scripts` with this more advanced features could be realized
60+
* [ ] Labels on or around the Media, each with their own Position / Animation
6061
* [ ] more to be added :)
6162

6263
## Based on this Template:

‎README_DEV.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,10 @@ Client is in `src/app`
3838
Server is in `main.ts` and `server/*`
3939

4040
Streamdeck-Plugin is in `memebox-streamdeck`
41+
42+
### Development Roadmap
43+
44+
- [ ] cleanup shared constants
45+
- [ ] strict tsconfig / eslint rules
46+
- [ ] Use [`ts.ed`](https://tsed.io/) to improve the backend code by dependency injection and code
47+
- [ ] Probably more to come once more features are added :)

‎projects/contracts/src/lib/types.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,12 @@ export interface ScreenClip extends HasId {
106106
zIndex?: number;
107107

108108
customCss?: string;
109+
110+
arrangeLock?: {
111+
size: boolean;
112+
position: boolean;
113+
transform: boolean;
114+
}
109115
}
110116

111117
export interface ScreenViewEntry extends Screen {

‎server/twitch.handler.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
TwitchConfig,
1010
TwitchEventTypes,
1111
TwitchTriggerCommand
12-
} from '../projects/contracts/src/lib/types';
12+
} from '@memebox/contracts';
1313
import {triggerMediaClipById} from './websocket-server';
1414
import {Logger} from 'winston';
1515
import {newLogger} from './logger.utils';
@@ -218,7 +218,11 @@ export class TwitchHandler {
218218
.catch(console.error);
219219
}
220220

221-
getCommandOfMessage(message: string, event: TwitchEventTypes, eventOptions?: TwitchEventOptions): Twitch {
221+
getCommandOfMessage(
222+
message: string,
223+
event: TwitchEventTypes,
224+
eventOptions?: TwitchEventOptions
225+
): Twitch {
222226
if (!message && !eventOptions) {
223227
return null;
224228
}

‎src/app/app.icons.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export const APP_ICONS = [
1717
'info',
1818
'insert_photo',
1919
'launch',
20+
'lock',
21+
'lock_open',
2022
'mobile_friendly',
2123
'mobile_off',
2224
'network_wifi',

‎src/app/shared/dialogs/media-edit/media-edit.module.ts

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import { NgModule } from "@angular/core";
2-
import { MediaEditComponent } from "./media-edit.component";
3-
import { CommonModule } from "@angular/common";
4-
import { DialogContract } from "../dialog.contract";
5-
import { MatDialog, MatDialogModule } from "@angular/material/dialog";
6-
import { Clip } from "@memebox/contracts";
7-
import { MatDialogRef } from "@angular/material/dialog/dialog-ref";
8-
import { MatCheckboxModule } from "@angular/material/checkbox";
9-
import { MatFormFieldModule } from "@angular/material/form-field";
10-
import { MatInputModule } from "@angular/material/input";
11-
import { ReactiveFormsModule } from "@angular/forms";
12-
import { MatButtonModule } from "@angular/material/button";
13-
import { MatIconModule } from "@angular/material/icon";
14-
import { MatSelectModule } from "@angular/material/select";
15-
import { MatSliderModule } from "@angular/material/slider";
16-
import { MatChipsModule } from "@angular/material/chips";
17-
import { MatAutocompleteModule } from "@angular/material/autocomplete";
18-
import { CompactClipCardModule } from "../../components/compact-clip-card/compact-clip-card.module";
19-
import { DynamicIframeModule } from "../../components/dynamic-iframe/dynamic-iframe.module";
20-
import { AutoScaleModule } from "@gewd/components/auto-scale";
21-
import { ClipPreviewModule } from "../../components/clip-preview/clip-preview.module";
1+
import {NgModule} from "@angular/core";
2+
import {MediaEditComponent} from "./media-edit.component";
3+
import {CommonModule} from "@angular/common";
4+
import {DialogContract} from "../dialog.contract";
5+
import {MatDialog, MatDialogModule} from "@angular/material/dialog";
6+
import {Clip} from "@memebox/contracts";
7+
import {MatDialogRef} from "@angular/material/dialog/dialog-ref";
8+
import {MatCheckboxModule} from "@angular/material/checkbox";
9+
import {MatFormFieldModule} from "@angular/material/form-field";
10+
import {MatInputModule} from "@angular/material/input";
11+
import {ReactiveFormsModule} from "@angular/forms";
12+
import {MatButtonModule} from "@angular/material/button";
13+
import {MatIconModule} from "@angular/material/icon";
14+
import {MatSelectModule} from "@angular/material/select";
15+
import {MatSliderModule} from "@angular/material/slider";
16+
import {MatChipsModule} from "@angular/material/chips";
17+
import {MatAutocompleteModule} from "@angular/material/autocomplete";
18+
import {CompactClipCardModule} from "../../components/compact-clip-card/compact-clip-card.module";
19+
import {DynamicIframeModule} from "../../components/dynamic-iframe/dynamic-iframe.module";
20+
import {AutoScaleModule} from "@gewd/components/auto-scale";
21+
import {ClipPreviewModule} from "../../components/clip-preview/clip-preview.module";
2222

2323
@NgModule({
2424
declarations: [
@@ -48,6 +48,7 @@ export class MediaEditModule implements DialogContract<Partial<Clip>> {
4848
constructor(private dialog: MatDialog) {
4949
}
5050

51+
// TODO refactor to use only the ID?
5152
public openDialog (payload: Partial<Clip>): MatDialogRef<any> {
5253
const dialogRef = this.dialog.open(MediaEditComponent, {
5354
data: payload,

‎src/app/shared/dialogs/screen-arrange/drag-resize-media/drag-resize-media.component.html

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,6 @@
22
[setting]="settings"
33
draggable="false"></app-clip-preview>
44

5-
<!--
6-
7-
<gewd-auto-scale [width]="element?.nativeElement.clientWidth || 200"
8-
[height]="element?.nativeElement.clientHeight || 100"
9-
#autoScale
10-
>
11-
12-
13-
</gewd-auto-scale>
14-
15-
<div class="title-element mat-caption">
16-
{{ clip.name }}
17-
</div>
18-
-->
195
<ngx-moveable
206
#moveableInstance
217
[target]="showResizeBorder ? element?.nativeElement : null"

‎src/app/shared/dialogs/screen-arrange/drag-resize-media/drag-resize-media.component.ts

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {
22
AfterViewInit,
3-
ChangeDetectorRef,
43
Component,
54
ElementRef,
65
EventEmitter,
@@ -84,33 +83,12 @@ export class DragResizeMediaComponent implements OnInit, AfterViewInit ,OnChange
8483

8584
private warpExist = false;
8685

87-
constructor(public element: ElementRef<HTMLElement>,
88-
private cd: ChangeDetectorRef) {
89-
90-
// Yes its weird but the auto-scale sometimes doesn't
91-
// get the inner content sizes to resize its own
92-
93-
// TODO Fix the autoscaling component somehow to "auto" scale on size changes
94-
// until then let the timeouts begin...
95-
setTimeout(() => {
96-
this.cd.detectChanges();
97-
}, 10);
98-
setTimeout(() => {
99-
this.cd.detectChanges();
100-
}, 50);
101-
102-
setTimeout(() => {
103-
this.cd.detectChanges();
104-
}, 100);
105-
106-
setTimeout(() => {
107-
this.cd.detectChanges();
108-
}, 200);
86+
constructor(public element: ElementRef<HTMLElement>) {
10987
}
11088

11189
ngAfterViewInit(): void {
11290

113-
}
91+
}
11492

11593
ngOnChanges(changes: SimpleChanges): void {
11694
console.info('DragResize ngChanges');
@@ -172,6 +150,13 @@ export class DragResizeMediaComponent implements OnInit, AfterViewInit ,OnChange
172150

173151
this.updateCSSVar('width', newPosition.x);
174152
this.updateCSSVar('height', newPosition.y);
153+
154+
const beforeTranslate = drag.beforeTranslate;
155+
156+
this.frame.translate = beforeTranslate;
157+
158+
// smooth resizing from left / top
159+
target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`;
175160
}
176161
onResizeEnd({ target, isDrag, clientX, clientY }) {
177162
console.log("onResizeEnd", target, isDrag);

‎src/app/shared/dialogs/screen-arrange/screen-arrange.component.html

Lines changed: 35 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,13 @@ <h3>Visible Media</h3>
156156
>
157157
<ng-container *ngFor="let pair of visibleItems$|async; trackBy: trackByClip">
158158
<!-- improve the duplicate settings -->
159-
<ng-container *ngIf="pair.clipSetting.position === 0">
159+
<ng-container *ngIf="pair.clipSetting.position === PositionEnum.FullScreen">
160160
<app-clip-preview [clip]="pair.clip"
161161
[style.z-index]="pair === currentSelectedClip ? 10000 : pair.clipSetting.zIndex"
162162
[style.position]="'absolute'"
163-
draggable="false"></app-clip-preview>
163+
draggable="false" class="dragable-preview"></app-clip-preview>
164164
</ng-container>
165-
<app-drag-resize-media *ngIf="pair.clipSetting.position === 2"
165+
<app-drag-resize-media *ngIf="pair.clipSetting.position === PositionEnum.Centered"
166166
[clip]="pair.clip"
167167
[style.z-index]="pair === currentSelectedClip ? 10000 : pair.clipSetting.zIndex"
168168
[screen]="screen"
@@ -174,13 +174,14 @@ <h3>Visible Media</h3>
174174

175175
transformOrigin="center center"
176176
[draggingEnabled]="false"
177-
[resizeEnabled]="resizeCheckbox.checked"
178-
[rotateEnabled]="rotateCheckbox.checked"
179-
[warpEnabled]="warpingCheckbox.checked"
177+
[resizeEnabled]="pair.clipSetting.arrangeLock?.size ? false : resizeCheckbox.checked"
178+
[rotateEnabled]="pair.clipSetting.arrangeLock?.transform ? false : rotateCheckbox.checked"
179+
[warpEnabled]="pair.clipSetting.arrangeLock?.transform ? false : warpingCheckbox.checked"
180+
class="dragable-preview"
180181
>
181182

182183
</app-drag-resize-media>
183-
<app-drag-resize-media *ngIf="pair.clipSetting.position === 3"
184+
<app-drag-resize-media *ngIf="pair.clipSetting.position === PositionEnum.Random"
184185
[clip]="pair.clip"
185186
[style.z-index]="pair === currentSelectedClip ? 10000 : pair.clipSetting.zIndex"
186187
[screen]="screen"
@@ -190,15 +191,16 @@ <h3>Visible Media</h3>
190191
(elementClicked)="elementClicked(dragResizeMediaComponent, pair)"
191192
(inputApplied)="elementCreated(dragResizeMediaComponent, pair)"
192193
[draggingEnabled]="false"
193-
[resizeEnabled]="true"
194-
[rotateEnabled]="rotateCheckbox.checked"
195-
[warpEnabled]="warpingCheckbox.checked"
194+
[resizeEnabled]="pair.clipSetting.arrangeLock?.size ? false : true"
195+
[rotateEnabled]="pair.clipSetting.arrangeLock?.transform ? false : rotateCheckbox.checked"
196+
[warpEnabled]="pair.clipSetting.arrangeLock?.transform ? false : warpingCheckbox.checked"
197+
class="dragable-preview"
196198
>
197199

198200
</app-drag-resize-media>
199201

200202
<app-drag-resize-media
201-
*ngIf="pair.clipSetting.position === 1"
203+
*ngIf="pair.clipSetting.position === PositionEnum.Absolute"
202204
[clip]="pair.clip"
203205
[screen]="screen"
204206
[sizeType]="sizeType.value"
@@ -208,10 +210,12 @@ <h3>Visible Media</h3>
208210
[settings]="pair.clipSetting" #dragResizeMediaComponent
209211
(inputApplied)="elementCreated(dragResizeMediaComponent, pair)"
210212

211-
[draggingEnabled]="dragCheckbox.checked"
212-
[resizeEnabled]="resizeCheckbox.checked"
213-
[rotateEnabled]="rotateCheckbox.checked"
214-
[warpEnabled]="warpingCheckbox.checked"
213+
[draggingEnabled]="pair.clipSetting.arrangeLock?.position ? false : dragCheckbox.checked"
214+
[resizeEnabled]="pair.clipSetting.arrangeLock?.size ? false : resizeCheckbox.checked"
215+
[rotateEnabled]="pair.clipSetting.arrangeLock?.transform ? false : rotateCheckbox.checked"
216+
[warpEnabled]="pair.clipSetting.arrangeLock?.transform ? false : warpingCheckbox.checked"
217+
218+
class="dragable-preview"
215219
>
216220

217221
</app-drag-resize-media>
@@ -237,13 +241,25 @@ <h2>
237241
</mat-select>
238242
</mat-form-field>
239243

240-
<mat-checkbox [checked]="true" #dragCheckbox>Drag</mat-checkbox>
244+
<mat-checkbox [checked]="true" #dragCheckbox
245+
[disabled]="currentSelectedClip?.clipSetting.arrangeLock?.position">
246+
Drag
247+
</mat-checkbox>
241248
<mat-checkbox [checked]="true" #resizeCheckbox
242-
(change)="onCheckedToggle($event, warpingCheckbox)">Resizing</mat-checkbox>
249+
(change)="onCheckedToggle($event, warpingCheckbox)"
250+
[disabled]="currentSelectedClip?.clipSetting.arrangeLock?.size">
251+
Resizing
252+
</mat-checkbox>
243253
<mat-checkbox #rotateCheckbox
244-
[checked]="true">Rotating</mat-checkbox>
254+
[checked]="true"
255+
[disabled]="currentSelectedClip?.clipSetting.arrangeLock?.transform">
256+
Rotating
257+
</mat-checkbox>
245258
<mat-checkbox #warpingCheckbox
246-
(change)="onCheckedToggle($event, resizeCheckbox)">Warping</mat-checkbox>
259+
(change)="onCheckedToggle($event, resizeCheckbox)"
260+
[disabled]="currentSelectedClip?.clipSetting.arrangeLock?.transform">
261+
Warping
262+
</mat-checkbox>
247263
</div>
248264
<button mat-raised-button (click)="reset()" color="warn">
249265
Reset

‎src/app/shared/dialogs/screen-arrange/screen-arrange.component.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,3 +191,18 @@ mat-card-title {
191191
border: 3px mat-css-color-accent() solid;
192192
}
193193
}
194+
195+
// cornered example of https://css-tricks.com/more-control-over-css-borders-with-background-image/
196+
.dragable-preview {
197+
--clr-border: #d3d3d3b0;
198+
background-position: 0 0, 0 0, 100% 0, 0 100%;
199+
background-size: 1vw 100%, 100% 1vw, 1vw 100% , 100% 1vw;
200+
background-repeat: no-repeat;
201+
202+
background-image:
203+
linear-gradient(0deg, var(--clr-border), var(--clr-border) 25%, transparent 25%, transparent 75%, var(--clr-border) 75%), // left
204+
linear-gradient(90deg, var(--clr-border), var(--clr-border) 25%, transparent 25%, transparent 75%, var(--clr-border) 75%), // top
205+
linear-gradient(180deg, var(--clr-border), var(--clr-border) 25%, transparent 25%, transparent 75%, var(--clr-border) 75%), // right
206+
linear-gradient(270deg, var(--clr-border), var(--clr-border) 25%, transparent 25%, transparent 75%, var(--clr-border) 75%) // bottom
207+
;
208+
}

‎src/app/shared/dialogs/screen-arrange/screen-arrange.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {MatRipple} from "@angular/material/core";
3030
export class ScreenArrangeComponent implements OnInit {
3131

3232
MediaType = MediaType;
33+
PositionEnum = PositionEnum;
3334

3435
screen$ = this.appQueries.screenMap$.pipe(
3536
map(screenMap => screenMap[this.screen.id])

0 commit comments

Comments
 (0)