feat: removed dark screen when video ends streaming

Author: freddysundowner

client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx

@@ -189,7 +189,6 @@ const publishVideo = async (
   height: any,
   certifiCateKey: string
 ) => {
-  console.log(appId, certifiCateKey, channel);
   let token = null;
   if (certifiCateKey) {
     token = await generateToken(appId, certifiCateKey, channel);
@@ -562,7 +561,7 @@ MTComp = withMethodExposing(MTComp, [
     },
     execute: async (comp, values) => {
       let value = !comp.children.audioControl.getView().value;
-      let localUserData = comp.children.localUser.change({
+      comp.children.localUser.change({
         user: userId + "",
         audiostatus: value,
       });
@@ -598,8 +597,8 @@ MTComp = withMethodExposing(MTComp, [
         user: userId + "",
         audiostatus: false,
         speaking: false,
+        streamingVideo: true,
       });
-      console.log(userId);
 
       await publishVideo(
         comp.children.appId.getView(),
@@ -671,7 +670,13 @@ MTComp = withMethodExposing(MTComp, [
     execute: async (comp, values) => {
       let value = !comp.children.endCall.getView().value;
       comp.children.endCall.change(value);
+
       await leaveChannel();
+
+      comp.children.localUser.change({
+        user: userId + "",
+        streamingVideo: false,
+      });
     },
   },
   {

client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx

@@ -28,7 +28,10 @@ import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef, useState } from "react";
 
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { client } from "./videoMeetingControllerComp";
+import {
+  VideoMeetingControllerComp,
+  client,
+} from "./videoMeetingControllerComp";
 
 import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
 
@@ -184,6 +187,14 @@ let VideoCompBuilder = (function (props) {
     useEffect(() => {
       if (props.userId.value !== "") {
         let userData = JSON.parse(props.userId?.value);
+        if (
+          userData.user == userId &&
+          userData.streamingVideo == false &&
+          videoRef.current &&
+          videoRef.current?.id == userId + ""
+        ) {
+          videoRef.current.srcObject = null;
+        }
         client.on(
           "user-published",
           async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
@@ -231,6 +242,10 @@ let VideoCompBuilder = (function (props) {
               }
             }
             if (mediaType === "video") {
+              console.log("user-unpublished video");
+              if (videoRef.current && videoRef.current?.id == user.uid + "") {
+                videoRef.current.srcObject = null;
+              }
               if (
                 !user.hasVideo &&
                 user.uid + "" != userData.user &&
@@ -241,10 +256,17 @@ let VideoCompBuilder = (function (props) {
             }
           }
         );
+
         setUserId(userData.user);
       }
     }, [props.userId.value]);
 
+    // useEffect(() => {
+    //   if (videoRef.current && videoRef.current?.id == userId + "") {
+    //     videoRef.current.srcObject = null;
+    //   }
+    // }, []);
+
     return (
       <EditorContext.Consumer>
         {(editorState) => (