Merge pull request #229 from negue/fix/ready-to-release

List of fixes for 2021.2

Author: negue

CHANGELOG.md

@@ -1,9 +1,10 @@
-## Unreleased
+## 2021.2.0
 
-* [x] Drag&Drop Media in a preview Area
+* [x] Drag&Drop Media in the `Assign / arrange media`-View
 * [x] Select the media folder in Electron with a dialog
 * [x] Open multiple target screens with one URL
 * [x] QR-Code to scan a target screen url to open it easier on tablets
+* [x] Support full animation list from https://animate.style/
 
 ## 2021.1.2
 

projects/contracts/src/lib/animations.ts

@@ -1,4 +1,3 @@
-
 export const ATTENTION_SEEKERS = [
   'animate__bounce',
   'animate__flash',
@@ -12,6 +11,8 @@ export const ATTENTION_SEEKERS = [
   'animate__wobble',
   'animate__jello',
   'animate__heartBeat',
+  'animate__flip',
+
 ]
 
 export const ANIMATION_IN_ARRAY = [
@@ -20,10 +21,49 @@ export const ANIMATION_IN_ARRAY = [
   'animate__backInRight',
   'animate__backInUp',
   'animate__flipInX',
+  'animate__flipInY',
   'animate__lightSpeedInRight',
+  'animate__lightSpeedInLeft',
   'animate__jackInTheBox',
   'animate__rollIn',
 
+  "animate__bounceIn",
+  "animate__bounceInDown",
+  "animate__bounceInLeft",
+  "animate__bounceInRight",
+  "animate__bounceInUp",
+
+  "animate__fadeIn",
+  "animate__fadeInDown",
+  "animate__fadeInDownBig",
+  "animate__fadeInLeft",
+  "animate__fadeInLeftBig",
+  "animate__fadeInRight",
+  "animate__fadeInRightBig",
+  "animate__fadeInUp",
+  "animate__fadeInUpBig",
+  "animate__fadeInTopLeft",
+  "animate__fadeInTopRight",
+  "animate__fadeInBottomLeft",
+  "animate__fadeInBottomRight",
+
+  "animate__rotateIn",
+  "animate__rotateInDownLeft",
+  "animate__rotateInDownRight",
+  "animate__rotateInUpLeft",
+  "animate__rotateInUpRight",
+
+  "animate__zoomIn",
+  "animate__zoomInDown",
+  "animate__zoomInLeft",
+  "animate__zoomInRight",
+  "animate__zoomInUp",
+
+  "animate__slideInDown",
+  "animate__slideInLeft",
+  "animate__slideInRight",
+  "animate__slideInUp",
+
   ...ATTENTION_SEEKERS
 ];
 
@@ -32,7 +72,50 @@ export const ANIMATION_OUT_ARRAY = [
   'animate__backOutLeft',
   'animate__backOutRight',
   'animate__backOutUp',
+  'animate__bounceOut',
+  'animate__bounceOutDown',
+  'animate__bounceOutLeft',
   'animate__bounceOutRight',
+  'animate__bounceOutUp',
+
+
+  "animate__fadeOut",
+  "animate__fadeOutDown",
+  "animate__fadeOutDownBig",
+  "animate__fadeOutLeft",
+  "animate__fadeOutLeftBig",
+  "animate__fadeOutRight",
+  "animate__fadeOutRightBig",
+  "animate__fadeOutUp",
+  "animate__fadeOutUpBig",
+  "animate__fadeOutTopLeft",
+  "animate__fadeOutTopRight",
+  "animate__fadeOutBottomRight",
+  "animate__fadeOutBottomLeft",
+
+  "animate__lightSpeedOutRight",
+  "animate__lightSpeedOutLeft",
+
+  "animate__flipOutX",
+  "animate__flipOutY",
+
+  "animate__rotateOut",
+  "animate__rotateOutDownLeft",
+  "animate__rotateOutDownRight",
+  "animate__rotateOutUpLeft",
+  "animate__rotateOutUpRight",
+
+  "animate__zoomOut",
+  "animate__zoomOutDown",
+  "animate__zoomOutLeft",
+  "animate__zoomOutRight",
+  "animate__zoomOutUp",
+
+
+  "animate__slideOutDown",
+  "animate__slideOutLeft",
+  "animate__slideOutRight",
+  "animate__slideOutUp",
 
   'animate__hinge',
   'animate__rollOut',

projects/utils/src/lib/dynamicIframe.ts

@@ -1,4 +1,4 @@
-import { Clip } from "@memebox/contracts";
+import {Clip} from "@memebox/contracts";
 
 export interface HtmlExternalFile {
   type: 'css'|'script';
@@ -69,13 +69,16 @@ export function dynamicIframe (iframe: HTMLIFrameElement,
 
   // HTML => collection HTML-Elements as string
 
-  if (content.css) {
-    elementsToReplace.push(`
-      <style>
-        ${content.css}
-      </style>
-    `);
-  }
+
+  elementsToReplace.push(`
+    <style>
+      body {
+        overflow: hidden;
+      }
+      ${content.css}
+    </style>
+  `);
+
   // add all strings into one?  and then apply innerHTML
 
   let targetElement = iframeDocument.body.querySelector('.customHTML');

server/express-server.ts

@@ -215,13 +215,15 @@ app.get(FILE_BY_ID_ENDPOINT, function(req, res){
   }
 
   console.error(`file not found: ${mediaId}`);
+
+  res.status(404);
+  res.send({
+    ok: false
+  });
 });
 
 
-// TODO use IDs instead of names ?
-// TODO use express.static ?
-// after the json "database" is done
-// use filename which is under
+// TODO - Remove on the next version
 // dev mode : "/src/assets"
 // prod mode:  "/assets"
 app.get(FILE_ENDPOINT, function(req, res){
@@ -251,6 +253,11 @@ app.get(FILE_ENDPOINT, function(req, res){
   }
 
   console.error(`file not found: ${firstParam}`);
+
+  res.status(404);
+  res.send({
+    ok: false
+  });
 });
 
 

src/app/core/pipes/media-to-url.pipe.ts

@@ -1,13 +1,27 @@
 import {Pipe, PipeTransform} from '@angular/core';
 import {EXPRESS_BASE} from "../../state/app.service";
+import {Clip, SERVER_URL} from "@memebox/contracts";
 
 @Pipe({
   name: 'mediaToUrl'
 })
 export class MediaToUrlPipe implements PipeTransform {
 
-  transform(mediaId: string): string {
-    return `${EXPRESS_BASE}/fileById/${mediaId}`;
+  transform(media: Clip, useOldWay = false): string {
+    if (media.path?.includes(SERVER_URL) && media.id && !useOldWay) {
+      return `${EXPRESS_BASE}/fileById/${media.id}`;
+    } else {
+      // Online URL (not local) OR new media dialog
+      return replaceholder(media.path);
+    }
   }
 
 }
+
+function replaceholder (value: string): string{
+  if (value) {
+    return value.replace(SERVER_URL, EXPRESS_BASE);
+  }
+
+  return '';
+}

src/app/core/pipes/pipes.module.ts

@@ -2,7 +2,6 @@ import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 
 import {SafePipe} from "./safe-url/safe-url.pipe";
-import {ReplaceholderPipe} from './replaceholder.pipe';
 import {ReadableMsPipe} from './readable-ms.pipe';
 import {ClipToIframePipe} from './clip-to-iframe.pipe';
 import {PositionToStringPipe} from "./position-to-string.pipe";
@@ -11,7 +10,7 @@ import {VisibilityToStringPipe} from "./visibility-to-string.pipe";
 import {MediaToUrlPipe} from "./media-to-url.pipe";
 
 const PIPES = [
-  SafePipe, ReplaceholderPipe,
+  SafePipe,
   ReadableMsPipe, ClipToIframePipe,
   PositionToStringPipe, SettingsToSizingTypePipe,
   VisibilityToStringPipe, MediaToUrlPipe

src/app/core/pipes/replaceholder.pipe.ts

@@ -36,7 +36,7 @@ <h2 class="mat-h2 mediaInfo__titleRow__name">{{info.name}}</h2>
       <gewd-auto-scale *ngIf="info.type === 0 && (info.previewUrl || info.path)"
                        width="300" height="188"
                        class="mediaInfo__preview__img">
-        <img [src]="info.id | mediaToUrl | safeurl"
+        <img [src]="info | mediaToUrl | safeurl"
              [alt]="info.name">
       </gewd-auto-scale>
 

src/app/manage/media/media-overview/media-info/media-info.component.html

@@ -44,7 +44,7 @@
            (playing)="addLog('playing', $event)"
            (progress)="addLog('progress', $event)"
            [class.visible]="mediaToggleVar.isVisible$ | async"
-           [src]="entry.value.clip.id | mediaToUrl"
+           [src]="entry.value.clip | mediaToUrl"
            [loop]="entry.value.clipSetting.loop"
            [volume]="entry.value.clip.volumeSetting / 100"
     ></video>
@@ -54,7 +54,7 @@
            (play)="addLog('play', $event)"
            (playing)="addLog('playing', $event)"
            [class.visible]="mediaToggleVar.isVisible$ | async"
-           [src]="entry.value.clip.id | mediaToUrl"
+           [src]="entry.value.clip | mediaToUrl"
            [volume]="entry.value.clip.volumeSetting / 100"
            [loop]="entry.value.clipSetting.loop"
            controls
@@ -63,7 +63,7 @@
     <img #img *ngSwitchCase="0"  class="media-clip"
          (loadstart)="addToMap(entry.value.clip, img)"
          [class.visible]="mediaToggleVar.isVisible$ | async"
-         [src]="entry.value.clip.id | mediaToUrl"
+         [src]="entry.value.clip | mediaToUrl"
     />
     <iframe #iFrame *ngSwitchCase="3"  class="media-clip"
             (load)="addToMap(entry.value.clip, iFrame)"

src/app/screens/target-screen/target-screen.component.html

@@ -9,7 +9,6 @@ import {AppService} from "../../state/app.service";
 import {ActivatedRoute} from "@angular/router";
 import {KeyValue} from "@angular/common";
 import {ConnectionState, WebsocketService} from "../../core/services/websocket.service";
-import {replaceholder} from "../../core/pipes/replaceholder.pipe";
 
 // TODO Extract Target-Screen Component from the PAGE itself
 
@@ -51,8 +50,7 @@ export class TargetScreenComponent implements OnInit, OnDestroy {
         result[key] = {
           clipSetting: entry,
           clip: {
-            ...allClips[key],
-            path: replaceholder(allClips?.[key]?.path)
+            ...allClips[key]
           },
           backgroundColor: this.random_rgba()
         }

src/app/screens/target-screen/target-screen.component.ts

@@ -5,11 +5,11 @@
        [style.width]="width"
 
        [style.--clip-setting-img-fit]="setting?.imgFit"
-       [src]="clip.id | mediaToUrl"
+       [src]="clip | mediaToUrl: useOldPathEndpoint"
        draggable="false"/>
 
   <!-- Iframe => Iframe -->
-  <div *ngSwitchCase="MediaType.IFrame">
+  <ng-container *ngSwitchCase="MediaType.IFrame">
     <ng-container *ngIf="(height || width) || !showIframe; else canShowIframe">
       <app-clip-type [type]="clip.type"
                      [iconSize]="height || width"></app-clip-type>
@@ -21,7 +21,7 @@
         [src]="clip.path | safeurl"
       ></iframe>
     </ng-template>
-  </div>
+  </ng-container>
 
 
   <!-- All others => AppClipType -->

src/app/shared/components/clip-preview/clip-preview.component.html

@@ -23,6 +23,9 @@ export class ClipPreviewComponent implements OnInit {
   @Input()
   public showIframe = true;
 
+  @Input()
+  public useOldPathEndpoint = false;
+
   constructor() { }
 
   ngOnInit(): void {

src/app/shared/components/clip-preview/clip-preview.component.ts

@@ -20,8 +20,8 @@
 
 .filterRow__icon {
   margin-right: 1rem;
-  height: 4rem;
-  width: 4rem;
+  height: 3rem;
+  width: 3rem;
 }
 
 .filterChip {
@@ -40,3 +40,7 @@
 .filterEntry__icon {
   margin-right: 0.5rem;
 }
+
+mat-chip-list {
+  flex: 1;
+}

src/app/shared/components/filter/filter.component.scss

@@ -19,7 +19,7 @@ <h1 mat-dialog-title>Choose media for "{{ data.dialogTitle }}"</h1>
 
           </app-clip-type>
           {{clip.name}}</figcaption>
-        <img [alt]="clip.name" [src]="clip.path | replaceholder" class="mediaList__img"/>
+        <img [alt]="clip.name" [src]="clip | mediaToUrl" class="mediaList__img"/>
       </figure>
 
       <span *ngIf="clip.type === 1" class="mediaList__audioContainer">

src/app/shared/dialogs/clip-assigning-dialog/clip-assigning-dialog.component.html

@@ -210,7 +210,8 @@ <h3>Assigned Clips by Tags</h3>
     <!-- All others => AppClipType -->
     <gewd-auto-scale width="500" height="500"
                      *ngSwitchDefault>
-      <app-clip-preview [clip]="form.value">
+      <app-clip-preview [clip]="form.value"
+                        [useOldPathEndpoint]="true">
 
       </app-clip-preview>
     </gewd-auto-scale>