♻️ refactor video block

libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.html

@@ -52,7 +52,7 @@ <h4 class="block-title"> {{ blockTitle | transloco }}</h4>
         <app-audio-block [id]="id" [block]="block" [audioMessageForm]="blockFormGroup" [jsPlumb]="jsPlumb" class="block"></app-audio-block>
     </div>
     <div *ngSwitchCase="videoType">
-        <app-video-block [id]="id" [block]="block" [videoMessageForm]="blockFormGroup"  class="block"></app-video-block>
+        <app-video-block [id]="id" [block]="block" [videoMessageForm]="blockFormGroup" [jsPlumb]="jsPlumb" class="block"></app-video-block>
     </div>
     <div *ngSwitchCase="stickerType">
         <app-sticker-block [id]="id" [block]="block" [stickerMessageForm]="blockFormGroup" [jsPlumb]="jsPlumb" class="block"></app-sticker-block>

libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/video-block-form.model.ts

@@ -12,6 +12,7 @@ import {VideoMessageBlock } from "@app/model/convs-mgr/stories/blocks/messaging"
  export function _CreateVideoMessageBlockForm(_fb: FormBuilder, blockData: VideoMessageBlock): FormGroup {
   return _fb.group({
     id: [blockData?.id! ?? ''],
+    defaultTarget: [blockData.defaultTarget ?? ''],
     message: [blockData?.message! ?? ''],
     fileSrc:[blockData?.fileSrc! ?? ''],
     fileName:[blockData?.fileName! ?? ''],

libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/video-block.jsplumb.ts

@@ -21,15 +21,9 @@ export function _VideoBlockDecoratePlumb(block: VideoMessageBlock, comp: Compone
     // Whether the anchor is target (Other Block -> This Block)
     target: true,
     cssClass:"block_endpoint",
-    endpoint: "Dot",
+    endpoint: "Rectangle",
     anchor: "Left"
   });
-  jsPlumb.addEndpoint(comp.location.nativeElement, {
-    source: true,
-    cssClass:"block_endpoint",
-    endpoint: "Dot",
-    anchor: "Right"
-  });
 
   return comp;
 }

libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.html

@@ -3,23 +3,23 @@
 		<form [formGroup]="videoMessageForm" fxLayout="column" fxLayoutALign="start center">
 
 			<div [id]="videoInputId">
-				<input (change)="processVideo($event)" type="file" accept=".mp3,.mp4,.webm,.ogg " id="upload" hidden class="video" />
-				<label for="upload">
+				<input (change)="processVideo($event)" type="file" accept=".mp4" [id]="videoInputUpload" hidden class="video" />
+				<label [for]="videoInputUpload">
 					<div *ngIf="!hasVideo; else inputHasVideo">
 						<i id="icon" class="fas fa-play-circle"></i>
 					</div>
 					<ng-template #inputHasVideo>
 						<video class="upload-video" alt="" controls autoplay>
-							<source [src]="videoUrl" type="video/*">
+							<source [src]="videoUrl" type="video/mp4">
 						</video>
 					</ng-template>
 				</label>
 			</div>
 
-			<input type="text " [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.CAPTION' | transloco " formControlName="caption" name="caption" 
-				id="caption ">
-			<input type="text " [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.VIDEO-LINK' | transloco " formControlName="videoLink" name="video-link" value = "{{ videoUrl }}"
-				id="video-link ">
+			<app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="videoMessageForm"></app-default-option-field>
+
+			<input type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.CAPTION' | transloco" formControlName="message">
+			<input type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.VIDEO-LINK' | transloco" formControlName="fileSrc">
 		</form>
 	</mat-card-content>
 </mat-card>

libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.scss

@@ -1,20 +1,25 @@
+mat-card {
+	min-width: 200px;
+	padding: 10px;
+}
+
 input {
-	margin: 5px 0;
-	max-width: 100%;
-	height: fit-content;
-	padding: 5px 5px;
-	border: 1px solid var(--convs-mgr-color-primary-black);
-	border-radius: 5px;
-	text-indent: 10px;
-	font-size: 1rem;
-	background-color: rgb(242, 241, 241);
-	font-weight: 400;
+  max-width: 100%;
+  height: fit-content!important;
+  padding: 5px 10px;
+	margin-bottom: 5px;
+  border-radius: 3px;
+  caret-color: var(--convs-mgr-color-text-black);
+  color: var(--convs-mgr-color-text-black);
+  outline: none;
+  border: 1px solid var(--convs-mgr-color-text-black);
 }
 
 label {
 	background-color: white;
 	width: 100%;
-	min-height: 150px;
+	font-size: 2rem;
+	min-height: 100px;
 	font-size: 3rem;
 	justify-content: center;
 	display: flex;
@@ -26,20 +31,12 @@ label {
 	margin-bottom: 10px;
 }
 
-.video {
-	width: 13em;
-	height: 12em;
-	border-radius: 10px;
-	border-color: var(--convs-mgr-color-primary-purple)
+video {
+	max-width: 220px;
 }
 
 .upload-video {
 	max-width: 100%;
 	max-height: 150px;
 	object-fit: cover;
-}
-
-label {
-	font-size: 3rem;
-
 }

libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.ts

@@ -1,18 +1,15 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
-
-import { Logger } from '@iote/bricks-angular';
-// import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+import { FormGroup } from '@angular/forms';
+import { AngularFireStorage } from '@angular/fire/compat/storage';
 
-// import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 
 import { VideoMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
-import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
-import { StoryBlocksStore } from '@app/state/convs-mgr/stories/blocks'
-import { UploadFileService } from '@app/state/file';
-import { AngularFireStorage } from '@angular/fire/compat/storage';
+import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
 
+import { UploadFileService } from '@app/state/file';
 
+import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 @Component({
   selector: 'app-video-block',
@@ -25,7 +22,7 @@ export class VideoBlockComponent implements OnInit {
   @Input() id: string;
   @Input() block: VideoMessageBlock;
   @Input() videoMessageForm: FormGroup;
-  // @Input() jsPlumb: BrowserJsPlumbInstance;
+  @Input() jsPlumb: BrowserJsPlumbInstance;
 
   type: StoryBlockTypes;
   videoType = StoryBlockTypes.Video;
@@ -39,24 +36,25 @@ export class VideoBlockComponent implements OnInit {
   hasVideo: boolean;
   videoUrl: string;
 
+  videoInputUpload: string = '';
 
   constructor(private _videoUploadService: UploadFileService,
-    private _logger: Logger,
-    private _storyBlockService: StoryBlocksStore,
-    private _ngfiStorage:AngularFireStorage) { }
+              private _ngfiStorage:AngularFireStorage
+  ) 
+  {
+    this.block = this.block as VideoMessageBlock;
+  }
 
   ngOnInit(): void {
     this.videoInputId = `vid-${this.id}`;
+    this.videoInputUpload = `vid-${this.id}-upload`;
+
+    this.checkIfVideoExists();
   }
-  updateForm (){
-     this.videoMessageForm.patchValue({
-      caption: this.block.message = this.videoMessageForm.value.caption,
-      videoLink: this.block.fileSrc = this.videoUrl
-     });
-     if (this.hasVideo){
-      this.videoLink = this.videoMessageForm.value.videoLink
-     }
-     console.log(this.videoLink)
+
+  checkIfVideoExists(){
+    this.videoUrl = this.videoMessageForm.value.fileSrc;
+    this.hasVideo = this.videoUrl && this.videoUrl != '' ? true : false;
   }
 
   async processVideo(event: any) {
@@ -71,23 +69,8 @@ export class VideoBlockComponent implements OnInit {
     const vidFilePath = `videos/${this.file.name}_${new Date().getTime()}`;
     this.isLoadingVideo = true;
     this.videoMessageForm.get('fileName')?.setValue(this.file.name);
-
 
     this.videoUrl =await (await this._ngfiStorage.upload(vidFilePath, this.file)).ref.getDownloadURL();
     (await this._videoUploadService.uploadFile(this.file, this.block, vidFilePath)).subscribe();
   }
-
-
-
-  // changeVideo() {
-
-  //   const newBlock: VideoMessageBlock = {
-  //     ...this.block as VideoMessageBlock,
-  //     fileSrc: '',
-  //     fileName: ''
-  //   }
-  //   this._storyBlockService.update(newBlock).subscribe();
-  // }
-
-
 }

libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/convs-mgr-video-message-block.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {  HttpClientModule } from '@angular/common/http';
 
+import { ConvsMgrBlockOptionsModule } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 import {
   FlexLayoutModule,
@@ -26,7 +27,7 @@ import { VideoBlockComponent } from './components/video-block/video-block.compon
     ReactiveFormsModule,
 
     HttpClientModule,
-
+    ConvsMgrBlockOptionsModule,
   ],
 
   declarations: [VideoBlockComponent],