From 324e2228ed8fcb891b7f78a1dd59b79191f0d2b7 Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Wed, 5 Feb 2020 16:18:17 +0900
Subject: [PATCH 1/6] bug fixed

---
 .../ucap-webmessenger-electron/src/index.ts   | 30 ++++++++++++-------
 package.json                                  |  2 +-
 .../native/components/top-bar.component.html  |  9 ++++--
 .../native/components/top-bar.component.ts    | 10 +++++--
 .../components/my-profile-widget.component.ts |  3 +-
 .../src/public-api.ts                         |  2 ++
 6 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/electron-projects/ucap-webmessenger-electron/src/index.ts b/electron-projects/ucap-webmessenger-electron/src/index.ts
index b8d3935b..73bbcf9e 100644
--- a/electron-projects/ucap-webmessenger-electron/src/index.ts
+++ b/electron-projects/ucap-webmessenger-electron/src/index.ts
@@ -47,7 +47,11 @@ import {
 } from '@ucap-webmessenger/native';
 import { ElectronAppChannel } from '@ucap-webmessenger/electron-core';
 
-import { autoUpdater, CancellationToken } from 'electron-updater';
+import {
+  autoUpdater,
+  CancellationToken,
+  UpdateCheckResult
+} from 'electron-updater';
 import log from 'electron-log';
 
 import { RendererUpdater } from './lib/renderer-updater';
@@ -124,6 +128,7 @@ let rendererUpdater: RendererUpdater | undefined;
 log.transports.file.level = 'debug';
 
 let autoUpdaterCancellationToken: CancellationToken;
+let updateCheckResult: UpdateCheckResult;
 autoUpdater.autoDownload = false;
 autoUpdater.logger = log;
 
@@ -299,6 +304,8 @@ app.on(ElectronAppChannel.Ready, () => {
     },
     onDenyUpdate: () => {
       log.info('OnDenyUpdate');
+
+      updateCheckResult.cancellationToken.cancel();
       updateWindowService.close();
     },
     onCancelDownload: () => {
@@ -353,20 +360,19 @@ function onDidLoad(fn: OnDidLoadFn) {
 }
 
 ipcMain.on(UpdaterChannel.Apply, (event: IpcMainEvent, ...args: any[]) => {
-  // if (__DEV__) {
-  //   event.returnValue = false;
-  //   return;
-  // }
+  if (!autoUpdater.isUpdaterActive()) {
+    log.info('autoUpdater is not active');
+    return;
+  }
 
   const ver = args[0];
 
   if (semver.lt(app.getVersion(), ver)) {
-    autoUpdater
-      .checkForUpdatesAndNotify()
-      .then(result => {})
-      .catch(reason => {
-        log.error(reason);
-      });
+    updateCheckResult = undefined;
+    autoUpdater.checkForUpdatesAndNotify().then(r => {
+      log.debug('checkForUpdatesAndNotify.then');
+      updateCheckResult = r;
+    });
   }
 });
 
@@ -770,6 +776,8 @@ autoUpdater.on('update-not-available', info => {
   log.info('Update not available.');
 });
 autoUpdater.on('error', err => {
+  updateWindowService.close();
+
   log.info('Error in auto-updater. ' + err);
 });
 autoUpdater.on('download-progress', progressObj => {
diff --git a/package.json b/package.json
index 3f20a6b8..6343ed6d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ucap-webmessenger",
-  "version": "0.0.14",
+  "version": "0.0.13",
   "author": {
     "name": "LG CNS",
     "email": "lgucap@lgcns.com"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index e59e270a..3fcf99a9 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -5,8 +5,10 @@
   <div class="app-layout-native-title-bar-title">DS Talk</div>
   <div class="btn-area">
     <ucap-integrated-search-form
-    *ngIf="!!loginRes"
-    (search)="onIntegratedSearch($event)" class="input-lineless integrated-search">
+      *ngIf="!!loginRes"
+      (search)="onIntegratedSearch($event)"
+      class="input-lineless integrated-search"
+    >
     </ucap-integrated-search-form>
     <div
       *ngIf="!!loginRes && !!weblink"
@@ -160,6 +162,7 @@
       *ngIf="!!loginRes"
       class="myprofile-item"
       [matMenuTriggerFor]="profileMenu"
+      #profileMenuTrigger="matMenuTrigger"
     ></ucap-profile-my-profile-widget>
 
     <div class="app-layout-native-title-bar-actions">
@@ -498,7 +501,7 @@
           </span>
           <span class="version-info-button">
             <button
-              *ngIf="checkingUpdateIsExist"
+
               mat-flat-button
               class="mat-primary"
               (click)="onClickApplyUpdate($event)"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
index d53fe63f..e900a82b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
@@ -63,7 +63,7 @@ import {
 } from '@app/layouts/messenger/dialogs/profile/profile.dialog.component';
 import { DialogService } from '@ucap-webmessenger/ui';
 import { DOCUMENT } from '@angular/common';
-import { MatMenu, MatRadioChange } from '@angular/material';
+import { MatMenu, MatRadioChange, MatMenuTrigger } from '@angular/material';
 import { StatusCode, StatusType } from '@ucap-webmessenger/core';
 import {
   StatusInfo,
@@ -119,6 +119,9 @@ export class TopBarComponent implements OnInit, OnDestroy {
 
   readonly awayTimeList = [10, 20, 30];
 
+  @ViewChild('profileMenuTrigger', { static: false })
+  profileMenuTrigger: MatMenuTrigger;
+
   @ViewChild('profileMenu', { static: true })
   profileMenu: MatMenu;
 
@@ -558,7 +561,10 @@ export class TopBarComponent implements OnInit, OnDestroy {
   }
 
   onClickApplyUpdate(event: Event) {
-    this.nativeService.checkForUpdates(this.checkingUpdateAppVersion);
+    // this.profileMenuTrigger.closeMenu();
+    setTimeout(() => {
+      this.nativeService.checkForUpdates(this.checkingUpdateAppVersion);
+    }, 1000);
   }
 
   onIntegratedSearch(keyword: string) {
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.ts b/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.ts
index 659e7395..9e346ee0 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.ts
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { StatusBulkInfo, StatusInfo } from '@ucap-webmessenger/protocol-status';
 import { StatusCode, PresenceType } from '@ucap-webmessenger/core';
+import { MatMenu, MatMenuTrigger } from '@angular/material';
 
 @Component({
   selector: 'ucap-profile-my-profile-widget',
diff --git a/projects/ucap-webmessenger-ui-profile/src/public-api.ts b/projects/ucap-webmessenger-ui-profile/src/public-api.ts
index 2f183b98..0d84ceee 100644
--- a/projects/ucap-webmessenger-ui-profile/src/public-api.ts
+++ b/projects/ucap-webmessenger-ui-profile/src/public-api.ts
@@ -3,6 +3,8 @@
  */
 
 export * from './lib/components/list-item.component';
+export * from './lib/components/my-profile-widget.component';
+export * from './lib/components/profile.component';
 export * from './lib/components/user-list-item.component';
 
 export * from './lib/ucap-ui-profile.module';

From c51016983d47261c267e0746130c1c49abbf66ed Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Wed, 5 Feb 2020 16:18:31 +0900
Subject: [PATCH 2/6] bug fixed

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6343ed6d..3f20a6b8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ucap-webmessenger",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "author": {
     "name": "LG CNS",
     "email": "lgucap@lgcns.com"

From ec57bc484cb14de1491c95c0c39f5990a3e7dfad Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Wed, 5 Feb 2020 16:20:22 +0900
Subject: [PATCH 3/6] version of app is changed from 0.0.14 to 0.0.15

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3f20a6b8..a2726d77 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ucap-webmessenger",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "author": {
     "name": "LG CNS",
     "email": "lgucap@lgcns.com"

From d4a5f2b3355fac390ee84f857645a433f1e3a9ad Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Wed, 5 Feb 2020 16:39:39 +0900
Subject: [PATCH 4/6] =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=20=EA=B0=80?=
 =?UTF-8?q?=EC=8B=9C=EC=84=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/messages.component.scss         | 18 +++++++++++++-----
 .../src/assets/scss/global/_default.scss       | 13 ++-----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index 555bb867..cc7b7a67 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@@ -174,11 +174,19 @@
   }
 }
 
-::ng-deep .chat-snackbar-class {
-  .mat-simple-snackbar {
-    justify-content: center;
-    span {
-      @include ellipsis(1);
+::ng-deep .cdk-global-overlay-wrapper {
+  .mat-snack-bar-container {
+    margin: 0;
+    padding: 30px;
+    .mat-simple-snackbar {
+      justify-content: center;
+      span {
+        @include ellipsis(1);
+        padding: 10px 40px;
+        border: 1px solid #ffffff;
+        background-color: rgb(255, 255, 255, 0.2);
+        color: #ffffff;
+      }
     }
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
index 1bc5df8a..bb7e0219 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -275,15 +275,6 @@ $daesang-grey: (
     cursor: pointer;
   }
 
-  //snackbar
-  .cdk-global-overlay-wrapper {
-    align-items: center !important;
-    justify-content: center !important;
-    .mat-simple-snackbar {
-      justify-content: center;
-    }
-  }
-
   .policy {
     color: mat-color($accent, B100);
   }
@@ -452,8 +443,8 @@ $daesang-grey: (
   .mat-calendar-body-selected {
     background-color: mat-color($accent);
   }
-  .list-item{
-    &.selected{
+  .list-item {
+    &.selected {
       background-color: mat-color($accent, 100);
     }
   }

From 0dfd7d9beee8dd7abdbeae2125071fa6d26a157f Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Wed, 5 Feb 2020 17:06:00 +0900
Subject: [PATCH 5/6] [ISSUE 113] fixed

---
 .../components/messages.component.ts          | 14 +++++-----
 .../src/assets/i18n/en.json                   |  1 +
 .../src/assets/i18n/ko.json                   |  1 +
 .../file-viewer/binary-viewer.component.scss  | 26 +++++++++----------
 .../file-viewer/video-viewer.component.html   |  5 ++++
 .../file-viewer/video-viewer.component.scss   | 26 ++++++++++++-------
 .../file-viewer/video-viewer.component.ts     |  9 ++++++-
 7 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index 1af9a30a..1ebcf98d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/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.translateService.instant('common.file.results.canceled'),
-              this.translateService.instant('common.file.errors.label'),
-              {
-                duration: 1000
-              }
-            );
+            // this.snackBarService.open(
+            //   this.translateService.instant('common.file.results.canceled'),
+            //   this.translateService.instant('common.file.errors.label'),
+            //   {
+            //     duration: 1000
+            //   }
+            // );
           } else {
             this.saveFile(value, result.filePath);
           }
diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/en.json b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
index a66e1fc9..a639afa6 100644
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/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."
       }
diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
index 2acce2d4..bee364bc 100644
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
@@ -433,6 +433,7 @@
         "failToSpecifyPath": "저장경로 지정에 실패하였습니다.",
         "expired": "기간이 만료된 파일입니다",
         "noPreview": "미리보기를 지원하지 않는 파일입니다.",
+        "cantPlay": "재생을 지원하지 않는 파일입니다.",
         "notSupporedType": "지원하지 않는 파일형식입니다.",
         "oversize": "{{maxSize}}MB 이상 파일을 업로드 할 수 없습니다."
       }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss
index cc42df30..3385ef7e 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss
+++ b/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{
-      display:flex;
-      width:140px;
-      height:140px;
-      border-radius:50%;
+    .circle-box {
+      display: flex;
+      width: 140px;
+      height: 140px;
+      border-radius: 50%;
       justify-content: center;
       align-items: center;
-      border:2px solid #ffffff;
-      background-color:rgba(256, 256, 256, 0.7);
+      border: 2px solid #ffffff;
+      background-color: rgba(256, 256, 256, 0.7);
     }
-    .guide-msg{
-      font-size:16px;
-      margin:30px;
-      color:#ffffff;
+    .guide-msg {
+      font-size: 16px;
+      margin: 30px;
+      color: #ffffff;
     }
   }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
index d09bda20..b928bdac 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
+++ b/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>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss
index 0e1f1c55..9b060d85 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts
index a6c9c50c..38e9cd59 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts
+++ b/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 {

From e307cdb3b6f3f38c65d8c3d6738641b27763161a Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Wed, 5 Feb 2020 17:21:08 +0900
Subject: [PATCH 6/6] [ISSUE 113] fixed

---
 .../right-drawer/album-box.component.html     | 13 ++++++++--
 .../right-drawer/album-box.component.ts       | 24 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
index e7046c96..9110e07e 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
@@ -66,10 +66,19 @@
         <video
           controls
           controlsList="nodownload nofullscreen"
-          *ngIf="selectedFile.info.type === FileType.Video"
-          [src]="getImageUrl(selectedFile)"
           class="preview-video"
+          #videoPlayer
+          *ngIf="selectedFile.info.type === FileType.Video && playable"
+          [src]="getImageUrl(selectedFile)"
+          (loadeddata)="onLoadedDataVideo()"
         ></video>
+        <div
+          *ngIf="selectedFile.info.type === FileType.Video && !playable"
+          fxFlexFill
+          class="guide-msg"
+        >
+          {{ 'common.file.errors.cantPlay' | translate }}
+        </div>
       </div>
       <ul>
         <li class="name">{{ selectedFile.info.name }}</li>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
index f5045111..e8fc9e0d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
@@ -1,4 +1,11 @@
-import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  Inject,
+  ElementRef,
+  ViewChild
+} from '@angular/core';
 import {
   FileInfo,
   FileDownloadInfo,
@@ -45,6 +52,9 @@ export interface FileInfoTotal {
   styleUrls: ['./album-box.component.scss']
 })
 export class AlbumBoxComponent implements OnInit, OnDestroy {
+  @ViewChild('videoPlayer', { static: false })
+  videoPlayer: ElementRef<HTMLVideoElement>;
+
   filteredList: FileInfoTotal[] = [];
   fileInfoTotal: FileInfoTotal[];
   fileInfoList: FileInfo[];
@@ -62,6 +72,8 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
 
   thumbBaseUrl: string;
 
+  playable = true;
+
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
@@ -186,6 +198,7 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
       event.stopPropagation();
     }
 
+    this.playable = true;
     this.selectedFile = fileInfo;
   }
 
@@ -323,4 +336,13 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
         this.logger.error(reason);
       });
   }
+
+  onLoadedDataVideo(): void {
+    if (
+      0 === this.videoPlayer.nativeElement.videoWidth ||
+      0 === this.videoPlayer.nativeElement.videoHeight
+    ) {
+      this.playable = false;
+    }
+  }
 }