Video 切换地址逻辑优化

src/renderers/Video.tsx

@@ -50,6 +50,10 @@ export interface FlvSourceProps {
 
 export class FlvSource extends React.Component<FlvSourceProps, any> {
   flvPlayer: any;
+  loaded = false;
+  timer: any;
+  unsubscribe: any;
+
   componentDidMount() {
     let {
       src,
@@ -62,61 +66,49 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
       setError
     } = this.props;
 
-    (require as any)(['flv.js'], (flvjs: any) => {
+    this.initFlv({
-      if (flvjs.isSupported()) {
+      video,
-        video = video || (manager.video && manager.video.video);
+      manager,
-
+      src,
-        let flvPlayer = flvjs.createPlayer(
+      isLive,
-          {
+      config,
-            type: 'flv',
+      actions,
-            url: src,
+      setError,
-            isLive: isLive
+      autoPlay
-          },
-          config
-        );
-        flvPlayer.attachMediaElement(video);
-        this.flvPlayer = flvPlayer;
-        let loaded = false;
-        let timer: any;
-
-        manager.subscribeToOperationStateChange((operation: any) => {
-          const type = operation.operation.action;
-
-          if (type === 'play') {
-            clearTimeout(timer);
-            if (!loaded) {
-              loaded = true;
-              flvPlayer.load();
-            }
-
-            flvPlayer.play();
-          } else if (type === 'pause') {
-            flvPlayer.pause();
-
-            if (isLive) {
-              timer = setTimeout(() => {
-                actions.seek(0);
-                flvPlayer.unload();
-                loaded = false;
-              }, 30000);
-            }
-          }
-        });
-
-        flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, () => {
-          setError('直播已经结束');
-        });
-        flvPlayer.on(flvjs.Events.ERROR, () => {
-          setError('视频加载失败');
-        });
-
-        if (autoPlay) {
-          setTimeout(() => actions.play(), 200);
-        }
-      }
     });
   }
 
+  componentDidUpdate(prevProps: FlvSourceProps) {
+    const props = this.props;
+    let {
+      autoPlay,
+      actions,
+      src,
+      setError,
+      isLive,
+      config,
+      video,
+      manager
+    } = props;
+
+    if (src !== prevProps.src) {
+      setError('');
+      this.flvPlayer?.destroy();
+      this.unsubscribe?.();
+      this.loaded = false;
+      this.initFlv({
+        video,
+        manager,
+        src,
+        isLive,
+        config,
+        actions,
+        setError,
+        autoPlay
+      });
+    }
+  }
+
   componentWillUnmount() {
     if (this.flvPlayer) {
       this.flvPlayer.unload();
@@ -125,6 +117,70 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
     }
   }
 
+  initFlv({
+    video,
+    manager,
+    src,
+    isLive,
+    config,
+    actions,
+    setError,
+    autoPlay
+  }: any) {
+    (require as any)(['flv.js'], (flvjs: any) => {
+      video = video || (manager.video && manager.video.video);
+
+      let flvPlayer = flvjs.createPlayer(
+        {
+          type: 'flv',
+          url: src,
+          isLive: isLive
+        },
+        config
+      );
+      flvPlayer.attachMediaElement(video);
+      this.flvPlayer = flvPlayer;
+
+      this.unsubscribe = manager.subscribeToOperationStateChange(
+        (operation: any) => {
+          const type = operation.operation.action;
+
+          if (type === 'play') {
+            clearTimeout(this.timer);
+            if (!this.loaded) {
+              this.loaded = true;
+              flvPlayer.load();
+            }
+
+            flvPlayer.play();
+          } else if (type === 'pause') {
+            flvPlayer.pause();
+
+            if (isLive) {
+              this.timer = setTimeout(() => {
+                actions.seek(0);
+                flvPlayer.unload();
+                this.loaded = false;
+              }, 30000);
+            }
+          }
+        }
+      );
+
+      flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, () => {
+        setError('直播已经结束');
+      });
+      flvPlayer.on(flvjs.Events.ERROR, () => {
+        setError('视频加载失败');
+        flvPlayer.unload();
+      });
+
+      if (autoPlay) {
+        setTimeout(() => actions.play(), 200);
+      }
+    });
+  }
+
   render() {
     return (
       <source src={this.props.src} type={this.props.type || 'video/x-flv'} />