[ISSUE 113] fixed

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -970,13 +970,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           }
 
           if (result.canceled) {
-            this.snackBarService.open(
+            // this.snackBarService.open(
-              this.translateService.instant('common.file.results.canceled'),
+            //   this.translateService.instant('common.file.results.canceled'),
-              this.translateService.instant('common.file.errors.label'),
+            //   this.translateService.instant('common.file.errors.label'),
-              {
+            //   {
-                duration: 1000
+            //     duration: 1000
-              }
+            //   }
-            );
+            // );
           } else {
             this.saveFile(value, result.filePath);
           }

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -433,6 +433,7 @@
         "failToSpecifyPath": "Specifing of save path failed.",
         "expired": "This file has expired",
         "noPreview": "This file does not support preview.",
+        "cantPlay": "This file does not support playing.",
         "notSupporedType": "File format is not supported.",
         "oversize": "You cannot upload files larger than {{size}} megabytes."
       }

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -433,6 +433,7 @@
         "failToSpecifyPath": "저장경로 지정에 실패하였습니다.",
         "expired": "기간이 만료된 파일입니다",
         "noPreview": "미리보기를 지원하지 않는 파일입니다.",
+        "cantPlay": "재생을 지원하지 않는 파일입니다.",
         "notSupporedType": "지원하지 않는 파일형식입니다.",
         "oversize": "{{maxSize}}MB 이상 파일을 업로드 할 수 없습니다."
       }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss

@@ -7,7 +7,7 @@
     height: 60px;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
     background-color: #333333;
-    color:#ffffff;
+    color: #ffffff;
 
     .ucap-binary-viewer-icon {
       margin-right: 10px;
@@ -40,25 +40,25 @@
     width: 100%;
     height: calc(100% - 60px);
 
-     .ucap-image-viewer-image-wrapper {
+    .ucap-image-viewer-image-wrapper {
       height: 100%;
       padding: 20px;
       background-color: rgba(0, 0, 0, 0.9);
     }
-    .circle-box{
+    .circle-box {
-      display:flex;
+      display: flex;
-      width:140px;
+      width: 140px;
-      height:140px;
+      height: 140px;
-      border-radius:50%;
+      border-radius: 50%;
       justify-content: center;
       align-items: center;
-      border:2px solid #ffffff;
+      border: 2px solid #ffffff;
-      background-color:rgba(256, 256, 256, 0.7);
+      background-color: rgba(256, 256, 256, 0.7);
     }
-    .guide-msg{
+    .guide-msg {
-      font-size:16px;
+      font-size: 16px;
-      margin:30px;
+      margin: 30px;
-      color:#ffffff;
+      color: #ffffff;
     }
   }
 }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html

@@ -93,6 +93,7 @@
       fxLayoutAlign="center center"
     >
       <video
+        *ngIf="playable"
         #audioPlayer
         [src]="fileDownloadUrl"
         [style.width]="'auto'"
@@ -109,6 +110,9 @@
         (loadstart)="onLoadStartVideo()"
         (loadeddata)="onLoadedDataVideo()"
       ></video>
+      <div *ngIf="!playable" class="guide-msg">
+        {{ 'common.file.errors.cantPlay' | translate }}
+      </div>
     </div>
     <div class="viewer-bottom">
       <div
@@ -142,6 +146,7 @@
             (playing ? 'common.player.stop' : 'common.player.play') | translate
           }}"
           aria-label=""
+          [disabled]="!playable"
           (click)="onClickPlayOrPause()"
         >
           <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss

@@ -13,7 +13,7 @@
     }
 
     .ucap-video-viewer-title {
-      font-size:16px;
+      font-size: 16px;
     }
     .stroke-bar {
       width: 1px;
@@ -35,11 +35,17 @@
 
     .ucap-video-viewer-video-icon {
       width: 100%;
-       height: calc(100% - 80px);
+      height: calc(100% - 80px);
+
+      .guide-msg {
+        font-size: 16px;
+        margin: 30px;
+        color: #ffffff;
+      }
     }
-    .viewer-bottom{
+    .viewer-bottom {
       background-color: #212121;
-      color:#ffffff;
+      color: #ffffff;
       .ucap-video-viewer-video-time {
         width: 100%;
         height: 30px;
@@ -62,11 +68,11 @@
     flex: 1 1 auto;
   }
   .ucap-video-viewer-action {
-    .mat-icon{
+    .mat-icon {
       font-size: 40px;
       width: 100%;
       height: 100%;
-      line-height:40px;
+      line-height: 40px;
     }
   }
 }
@@ -75,9 +81,11 @@ mat-slider {
   width: 94%;
 }
 
-::ng-deep .mat-slider-horizontal .mat-slider-track-background{
+::ng-deep .mat-slider-horizontal .mat-slider-track-background {
   background-color: #999999 !important;
 }
-::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{
+::ng-deep
+  .mat-slider-min-value:not(.mat-slider-thumb-label-showing)
+  .mat-slider-thumb {
   border-color: #999999 !important;
-}
+}

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts

@@ -33,7 +33,7 @@ export class VideoViewerComponent implements OnInit {
   @Output()
   closed = new EventEmitter<void>();
 
-  @ViewChild('audioPlayer', { static: true })
+  @ViewChild('audioPlayer', { static: false })
   audioPlayer: ElementRef<HTMLVideoElement>;
 
   @ViewChild('timeSlider', { static: true })
@@ -49,6 +49,8 @@ export class VideoViewerComponent implements OnInit {
   videoWidth = 0;
   videoHeight = 0;
 
+  playable = true;
+
   Math = Math;
 
   constructor(
@@ -101,6 +103,11 @@ export class VideoViewerComponent implements OnInit {
 
     this.videoWidth = this.audioPlayer.nativeElement.videoWidth;
     this.videoHeight = this.audioPlayer.nativeElement.videoHeight;
+
+    if (0 === this.videoHeight || 0 === this.videoWidth) {
+      this.playable = false;
+      this.duration = 0;
+    }
   }
 
   onClickDownload(): void {