chore(webapp): display tip of disabled media

Author: huanghuang358

webapp/components/player/player.tsx

@@ -7,7 +7,6 @@ import {
   isFullscreenSupported,
   isPictureInPictureSupported,
 } from '../../lib/util'
-import SvgProgress from '../svg/progress'
 import { deviceSpeakerAtom, speakerStatusAtom } from '../../store/atom'
 import {
   SvgMuted,
@@ -210,7 +209,13 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
   // https://webkit.org/blog/6784/new-video-policies-for-ios/
   return (
     <center className="relative flex flex-col justify-center min-h-60 rounded-xl bg-black m-8" style={{ width: props.width }}>
-      {!props.stream.getTracks().length ? <center><SvgProgress /></center> : null}
+      {!props.stream.getTracks().length ?
+        <p
+          className={`text-white transition-opacity duration-300 ${
+            showControls ? 'opacity-100' : 'opacity-0'
+          }`}>
+          All your media are disabled
+        </p> : null}
       <video
         className="aspect-ratio-[4/3] w-full h-full object-contain rounded-xl"
         playsInline={true}