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] [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;
+    }
+  }
 }