From 3e40e2f4963e27b43d249b89094deeb797e7bde3 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Thu, 29 Dec 2022 20:45:14 +0800
Subject: [PATCH] refactor: add canPlay check to media message

---
 public/widget_demo.html                       | 20 +++++++++++++-
 .../component/FileMessage/AudioMessage.tsx    |  9 +++++--
 .../component/FileMessage/VideoMessage.tsx    | 26 +++++++++++++++++--
 3 files changed, 50 insertions(+), 5 deletions(-)
diff --git a/public/widget_demo.html b/public/widget_demo.html
index c4a116a1..f7240dfb 100644
--- a/public/widget_demo.html
+++ b/public/widget_demo.html
@@ -8,6 +8,24 @@
     <script src="https://cdn.tailwindcss.com"></script>
   </head>
 
-  <body class="w-sreen h-screen bg-slate-800 text-stone-50"></body>
+  <body class="w-sreen h-screen flex justify-center items-center bg-slate-800 text-stone-50">
+    <div class="w-96 flex flex-col gap-2">
+      <div class="flex flex-col gap-1">
+        <h2 class="text-gray-100">S3:</h2>
+        <video class="w-full h-full object-cover" controls>
+          <source src="https://s.voce.chat/demo/how_to_install_vocechat.mp4" type="video/mp4" />
+        </video>
+      </div>
+      <div class="flex flex-col gap-1">
+        <h2 class="text-gray-100">VoceChat:</h2>
+        <video class="w-full h-full object-cover" controls>
+          <source
+            src="https://dev.voce.chat/api/resource/file?file_path=2022%2F12%2F29%2F6803d8ad-8857-464b-a0a3-5d0f45bc1682"
+            type="video/mp4"
+          />
+        </video>
+      </div>
+    </div>
+  </body>
   <script src="/widget.js" data-host-id="1" async></script>
 </html>
diff --git a/src/common/component/FileMessage/AudioMessage.tsx b/src/common/component/FileMessage/AudioMessage.tsx
index 722efe63..7f23ab70 100644
--- a/src/common/component/FileMessage/AudioMessage.tsx
+++ b/src/common/component/FileMessage/AudioMessage.tsx
@@ -1,7 +1,8 @@
-// import { useState } from 'react';
+import { useState } from 'react';
 import { formatBytes } from '../../utils';
 import IconDownload from "../../../assets/icons/download.svg";
 import IconAudio from "../../../assets/icons/file.audio.svg";
+import clsx from 'clsx';
 
 type Props = {
     url: string,
@@ -11,6 +12,10 @@ type Props = {
 }
 
 const AudioMessage = ({ url, name, size, download }: Props) => {
+    const [canPlay, setCanPlay] = useState(false);
+    const handleCanPlay = () => {
+        setCanPlay(true);
+    };
     const _size = formatBytes(size);
     return (
         <div className='w-96 flex flex-col gap-2 px-3 py-2 rounded-md border border-solid border-gray-300 overflow-hidden bg-[#f1f3f4]'>
@@ -24,7 +29,7 @@ const AudioMessage = ({ url, name, size, download }: Props) => {
                 </div>
                 <a href={download} className="mt-2"><IconDownload className="download_icon gray" /></a>
             </div>
-            <audio src={url} controls className="w-full object-cover z-10" />
+            <audio src={url} onCanPlay={handleCanPlay} controls className={clsx("w-full object-cover z-10", canPlay ? "" : "hidden")} />
         </div>
     );
 };
diff --git a/src/common/component/FileMessage/VideoMessage.tsx b/src/common/component/FileMessage/VideoMessage.tsx
index 997b547c..bfd601cd 100644
--- a/src/common/component/FileMessage/VideoMessage.tsx
+++ b/src/common/component/FileMessage/VideoMessage.tsx
@@ -1,7 +1,9 @@
-import { SyntheticEvent } from 'react';
+import { SyntheticEvent, useState } from 'react';
+import { Orbit } from "@uiball/loaders";
 import { formatBytes } from '../../utils';
 import IconDownload from "../../../assets/icons/download.svg";
 import IconVideo from "../../../assets/icons/file.video.svg";
+// import clsx from 'clsx';
 
 type Props = {
     url: string,
@@ -11,6 +13,8 @@ type Props = {
 }
 
 const VideoMessage = ({ url, name, size, download }: Props) => {
+    const [canPlay, setCanPlay] = useState(false);
+    const [error, setError] = useState(false);
     const _size = formatBytes(size);
     const handlePlay = (evt: SyntheticEvent<HTMLVideoElement>) => {
         const infoEle = evt.currentTarget.previousSibling;
@@ -24,6 +28,14 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
             (infoEle as HTMLDivElement).classList.remove("hidden");
         }
     };
+    const handleCanPlay = () => {
+        setCanPlay(true);
+    };
+    const handleError = () => {
+        setCanPlay(false);
+        setError(true);
+    };
+    const tipClass = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2';
     return (
         <div className='w-96 h-52 relative rounded-md border border-solid border-gray-300 overflow-hidden group'>
             <div className="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div>
@@ -37,7 +49,17 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
                 </div>
                 <a href={download} className="mt-2"><IconDownload className="fill-white" /></a>
             </div>
-            <video onPlay={handlePlay} onPause={handlePause} src={url} controls className="absolute left-0 top-0 w-full h-full object-cover z-10" />
+            {!canPlay ?
+                <div className={tipClass}>
+                    <Orbit color='#fff' />
+                </div> :
+                (error ?
+                    <span className={`${tipClass} text-red-500`}>Error</span> :
+                    null)
+            }
+            <video onPlay={handlePlay} onError={handleError} onCanPlay={handleCanPlay} onPause={handlePause} controls={canPlay} className="absolute left-0 top-0 w-full h-full object-cover z-10">
+                <source src={url} type="video/mp4"></source>
+            </video>
         </div>
     );
 };
