fix calling

any-hooks/common/useAgoraClient.ts

@@ -25,6 +25,7 @@ export function useAgoraClient() {
     client = new sdk.Client() as AgoraSdkClient;    
     subscribeRemoteStream();    
     client.init(appid, () => {      
+      // client.setRole('audience');
       client.join(
         token, 
         cid, 

any-hooks/communication/useCallCenter.ts

@@ -19,6 +19,7 @@ export function useCallCenter() {
 
   const { sendMsg, currentMsg } = useInjector(useNetSocketStore);
   const { authData } = useInjector(useAuthData);
+  const [, changeCallingState] = useRequest('/updateUsersCallState', {auto: false});
 
   let timer;
   
@@ -28,8 +29,8 @@ export function useCallCenter() {
   const {currentChannel, channelMembers, isEmpty, createChannel, getTokenByChannel, updateMembers, clearChannel} = useInjector(useChannelStore);
   const callContact = (user: UserData) => {
     setTarget({...user, action: 'none'}); //保存呼叫目标的信息    
-    setCallState('calling'); //主动呼叫别人时将自己的呼叫状态更改为‘calling’
     createChannel().then( data => {
+      setCallState('calling'); //主动呼叫别人时将自己的呼叫状态更改为‘calling’
       sendMsg({
         toID: user.id,
         toName: user.nickname,
@@ -50,19 +51,18 @@ export function useCallCenter() {
   /** 回应呼叫功能 */
   const answerCaller = (subFlag: AnyRemoteSubFlag, user?: UserData) => {
     if(subFlag === 'Connect') {      
-      setCallState('call_accepted');
-      getTokenByChannel(caller.value.channel);      
+      getTokenByChannel(caller.value.channel).then( _ => setCallState('call_accepted')); 
       updateMembers(caller.value.members, 'join');
     };
 
-    const target = user || caller.value
+    const target = user || caller.value;
     sendMsg({      
       toID: target.id,
       toName: target.nickname,
       msgMainFlag: 'CallAnswer',
       msgSubFlag: subFlag
     })
-    clearTimeout(timer)
+    clearTimeout(timer);
   }
 
   /** 呼叫监听功能  */
@@ -126,7 +126,7 @@ export function useCallCenter() {
   })  
 
   /** 呼叫挂断功能 */
-  const [, changeCallingState] = useRequest('/updateUsersCallState', {auto: false});
+  
   const hangup = (type?: 'leave' | 'cancel') => {    
     let flag: AnyRemoteMainFlag, toID: string;
     switch(myCallState.value) {
@@ -168,7 +168,10 @@ export function useCallCenter() {
         toID: '0'
       })
     }     
-    changeCallingState({userIDs: JSON.stringify([{userID: authData.value.id, callState: state==='free' ? 'idle' : 'calling'}])});
+    changeCallingState({channel_id: currentChannel.value?.channel_id, userIDs: JSON.stringify([
+      {userID: authData.value.id, callState: state==='free' ? 'idle' : 'callout'},
+      {userID: target.value?.id || caller.value?.id, callState: state==='free' ? 'idle' : 'callin'}
+    ])});
   })
 
   return {

any-hooks/communication/useChannelStore.ts

@@ -29,7 +29,7 @@ export function useChannelStore() {
   const getTokenByChannel = (cid: string) => {
     console.log('根据对方呼叫人的频道获取token');
     updateMembers([authData.value.id], 'join');
-    request({channel_id: cid});    
+    return request({channel_id: cid});    
   } 
   
 

any-hooks/communication/useMeetingCenter.ts

@@ -23,7 +23,7 @@ interface MeetingMember {
 /** 会议中心功能, 该功能在呼叫功能生效后使用，此模块会将其他即时交互模块集中到一起，如：音视频通讯模块、文本聊天模块等(目前只有音视频通讯) */
 export function useMeetingCenter() {  
   const {hangup, myCallState}   = useInjector(useCallCenter);
-  const {streamList, localPushurl, voiceMute, mode, stopVideoConference, switchLocalMicState, switchVideoOrAudio} = useInjector(useVideoConference);  
+  const {streamList, localPushurl, voiceMute, mode, join, stopVideoConference, switchLocalMicState, switchVideoOrAudio} = useInjector(useVideoConference);  
 
   /** 离开会议(分两步：1.挂断当前呼叫， 2.停止音视频功能) */
   const leave = () => {
@@ -68,6 +68,7 @@ export function useMeetingCenter() {
     localPushurl,
     voiceMute,
     mode,
+    join,
     leave,
     switchLocalMicState,
     switchVideoOrAudio

any-hooks/communication/useVideoConference.ts

@@ -22,18 +22,22 @@ export function useVideoConference() {
   /** 监听频道模块，频道被创建、更新后自动将agora的音视频通讯功能载入频道 */
   watch(currentChannel, channel => {    
     if(!channel) return;    
+    join();
+  })
+
+  const join = () => {
     joinChannelWithAgora(
-      channel.agora_token,
-      channel.channel_id,
+      currentChannel.value.agora_token,
+      currentChannel.value.channel_id,
       parseInt(authData.value.peer_id)
     )
-  })
+  }
 
   /** 切换麦克风使用状态  */
   const [voiceMute, setVoiceMute] = useState(false);
   const switchLocalMicState = () => {
     if(!voiceMute.value) {
-      setVoiceMute(true)
+      setVoiceMute(true);
       muteLocalStream('audio');
     } else {
       setVoiceMute(false);
@@ -69,6 +73,7 @@ export function useVideoConference() {
     localPushurl,
     voiceMute,
     mode,
+    join,
     switchLocalMicState,
     switchVideoOrAudio,
     stopVideoConference

any-hooks/contacts/useContacts.ts

@@ -25,8 +25,10 @@ export function useContacts() {
   const roleContacts = computed( () => {
     const contactHome = {} as {[props: string]: UserData[]}
     contacts.value?.forEach( item => {
+      if(['3','4'].includes(item.permission) ) {
         if(!contactHome[item.group_name]) contactHome[item.group_name] = [];
         contactHome[item.group_name].push(item);
+      };      
     })
     return contactHome
   })

src/components/contact-item.vue

@@ -40,8 +40,8 @@
 
 <style lang="less">
   .contact-item{
-    margin: 30px 0;
-    padding: 30px 0;
+    margin-bottom: 30px;
+    // padding: 30px 0;
     border-bottom: 1px solid #f8f8f8;
     display: flex;
     align-items: center;

src/components/data-empty.vue

@@ -14,5 +14,4 @@
       height: auto;      
     }
   }
-
 </style>
\ No newline at end of file

src/pages/calling/index.vue

@@ -17,7 +17,6 @@
   })
 
   onBeforeUnmount(() => {    
-    hangup();
     console.log('leave')
   })
   
@@ -51,7 +50,8 @@ page{
   background:#333;
   width:100%;
   height:100%;
-  background-image: url(https://platserver.anyremote.cn/static/img/small_routine/1.gif);
+  // background-image: url(https://platserver.anyremote.cn/static/img/small_routine/1.gif);
+  background-image: url(https://platserver.anyremote.cn/static/img/small_routine/bg3.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   .call-box{

src/pages/contact-detail/index.vue

@@ -9,7 +9,7 @@ import { useInjector, useState } from 'vue-vulcan';
 
 const { getContactById } = useInjector(useContacts);
 const { callContact }    = useInjector(useCallCenter);
-const [currentContact, setContact] = useState<UserData>(null)
+const [currentContact, setContact] = useState<UserData>(null);
 
 onMounted( () => {
   const ins = getCurrentInstance();
@@ -42,6 +42,7 @@ onMounted( () => {
 
     <view class="call-btn" @tap="callContact(currentContact)" v-if="currentContact.is_signin==='1'">
       <image class="call-icon" src="../../assets/call-small2x.png"></image>
+      &nbsp;&nbsp;
       <text>视频通话</text>
     </view>
   </view>

src/pages/index/contacts-list.vue

@@ -5,10 +5,11 @@
   import { navigateTo, showToast } from '@tarojs/taro';
   import { useAppInitInfo } from 'src/hooks/common/useAppInitInfo';
   import { UserData } from 'any-hooks/types/user';
+  import { reactive } from '@vue/reactivity';
 
   const { callContact, myCallState } = useInjector(useCallCenter);
   const { contacts, roleContacts }   = useInjector(useContacts);
-  const { checkCamearSetting } = useInjector(useAppInitInfo)
+  const { checkCamearSetting }       = useInjector(useAppInitInfo);
 
   const gotoDetail = (id: string) => {
     navigateTo({url: '/pages/contact-detail/index?id='+ id})
@@ -24,18 +25,24 @@
       })      
     }    
   }
+
+  // 联系人折叠隐藏功能
+  const hideConfig = reactive({});
+  const toggleHideByIndex = (index: number) => {
+    hideConfig[index] = !hideConfig[index]
+  }
 </script>
 
 <template>
   <view class="contact-list">    
     <view class="contact-role-group" v-for="(group, key, index) in roleContacts" :key="index">
-      <view class="role-name pd-2">{{key}}</view>
-      <view class="white-box">        
-        <view class="contact-item pd-2" v-for="(item, i) in group" :key="i"  @tap="gotoDetail(item.id)">
+      <view class="role-name pd-2" :class="{hide: hideConfig[index]}" @tap="toggleHideByIndex(index)">{{key}}</view>
+      <view class="white-box" :style="{display: hideConfig[index] ? 'none' : 'block'}">        
+        <view class="contact-item" v-for="(item, i) in group" :key="i"  @tap="gotoDetail(item.id)">
           <image class="avatar" :src="item.avatar" />
           <view class="info">
             <view>{{item.nickname}}</view>
-            <text>{{item.group_name}}</text>              
+            <text style="color:#999">{{item.group_name}}</text>              
           </view>
           <image v-if="item.is_signin === '1'" @tap.stop="onTapCall(item)" class="call" src="../../assets/call3x.png" mode="widthFix"/>
           <image v-else class="call" src="../../assets/call-no3x.png" mode="widthFix"/>
@@ -51,7 +58,23 @@
     .contact-role-group{      
       background-color: #fff;
       .role-name{
-        background-color: #f5f5f5;
+        // background-color: #f5f5f5;
+        position: relative;
+        padding-left: 60px;
+        &.hide::before{
+          transform: rotate(-90deg);
+        }
+        &::before{
+          content: '';
+          width: 0;
+          height: 0;
+          position: absolute;
+          border-left: 10px solid transparent;
+          border-right: 10px solid transparent;
+          border-top: 16px solid #aaa;
+          left:25px;
+          top:37px;
+        }
       }      
     }
   }

src/pages/index/index.vue

@@ -47,7 +47,6 @@
 </template>
 
 <style lang="less" >    
-    
   .search-box{
     display: flex;
     align-items: center;
@@ -95,11 +94,14 @@
     }
     .contact-list{          
       .contact-item{
-        margin: 30px 0;
-        padding: 30px 0;
-        border-bottom: 1px solid #f8f8f8;
+        margin-bottom: 65px;
+        // padding: 25px 0;
+        // border-bottom: 1px solid #f8f8f8;
         display: flex;
         align-items: center;
+        &:last-child{
+          margin-bottom: 15px;
+        }
         .avatar{
           width: 80px;
           height: 80px;

src/pages/index/work-groups-list.vue

@@ -3,7 +3,6 @@
   import { useContacts } from 'any-hooks/contacts/useContacts';  
   import { useInjector } from 'vue-vulcan';
 
-
   const { filterGroups } = useInjector(useContacts);
   const gotoGroupContacts = (id: string) => {
     navigateTo({url: `/pages/group-contacts/index?id=${id}`})

src/pages/meeting/index.vue

@@ -9,11 +9,17 @@
   import Invite from './invite.vue';
   import { useCallCenter } from 'any-hooks/communication/useCallCenter';
   import { UserData } from 'any-hooks/types/user';
+  import { useChannelStore } from 'any-hooks/communication/useChannelStore';
   
   const { target } = useInjector(useCallCenter);  
+  const { currentChannel } = useInjector(useChannelStore);
   const { streamList, localPushurl, voiceMute, mode, switchLocalMicState, switchVideoOrAudio, leave } = useInjector(useMeetingCenter);  
   const { topDistance, rect } = useAppInitInfo(); 
 
+  // onMounted(() => {
+  //   join();
+  // })
+  
   /* 监听流的数量，自动退出会议 */
   watch(streamList, (current, last) => {
     if(current.length > last.length) return;
@@ -23,10 +29,10 @@
     }
   })
 
-  const context = createLivePusherContext()
+  const context = createLivePusherContext();
 
   watch(localPushurl, url => {
-    url && context.start()
+    url && context.start();
   })
 
   /* 用户主动退出会议 */
@@ -73,18 +79,18 @@
 
 <template>
   <image class="navi-back" src="../../assets/arrow_left.png" mode="widthFix" :style="{top: rect.top+'px'}" @tap="navigateBack()"></image>
-  <view class ="meeting-container page col-page" :style="{paddingTop: topDistance+'px'}">    
   <invite v-if="inviting" @choose="onInvite($event)" @cancel="setInviting(false)"></invite>
-    <!-- <view class="c-info" style="color:#fff">
+  <view class ="meeting-container page col-page" @tap="setInviting(false)">        
+    <view class="c-info" style="color:#fff">
       {{currentChannel?.channel_id}}
-    </view> -->
+    </view>
     <view class="videos">
       <stream-player 
         class="video-item"        
         v-for="(item, key) in streamList" 
         :key="key" 
         :stream="item"
-        :class="{active: activeVideo===key, hide: activeVideo!==-2, mini: streamList.length > 5}"
+        :class="{active: activeVideo===key, hide: activeVideo!==-2, mini: streamList.length > 5, big: streamList.length < 3}"
         @tap="toggleActive(key)"
       >
       </stream-player>
@@ -92,7 +98,7 @@
         class="video-item"
         v-if="localPushurl" 
         :url="localPushurl" 
-        :class="{active: activeVideo===-1, hide: activeVideo!==-2, mini: streamList.length > 5}"
+        :class="{active: activeVideo===-1, hide: activeVideo!==-2, mini: streamList.length > 5, big: streamList.length < 3}"
         @tap="toggleActive(-1)"
       >
       </stream-pusher>
@@ -101,7 +107,7 @@
         <text>等待中...</text>
       </view>     
       
-      <view class="add-operator" @tap="setInviting(true)">
+      <view class="add-operator" @tap.stop="setInviting(true)">
         <image class="add-icon" src="../../assets/add.png" mode="widthFix"></image>
         <text>添加联系人</text>
       </view>
@@ -148,7 +154,6 @@
   }
   .meeting-container{
     background: #333;    
-    
     .videos{      
       flex:1;  
       text-align: center;      
@@ -162,6 +167,10 @@
         display: inline-block;
         background: #000;
         color: #fff;
+        &.big{
+          width: 100%;
+          height: 400px;
+        }
         &.mini{
           width: 33.3%;
           height: 200px;

src/pages/meeting/invite.vue

@@ -2,13 +2,13 @@
   import { useContacts } from "any-hooks/contacts/useContacts";
   import { UserData } from "any-hooks/types/user";
   import { useAppInitInfo } from "src/hooks/common/useAppInitInfo";
-  import { defineEmit } from "vue";
+  import { defineEmit, reactive } from "vue";
   import { useInjector } from "vue-vulcan";
 
   const { topDistance } = useAppInitInfo();
 
   /* 获取在线且空闲的联系人 */
-  const { freeContacts } = useInjector(useContacts);  
+  const { freeContacts, roleContacts } = useInjector(useContacts);  
 
   const emit = defineEmit();
   const onChoose = (user: UserData) => {
@@ -17,18 +17,31 @@
   const cancelChoose = () => {
     emit('cancel');
   }
+
+  // 联系人折叠隐藏功能
+  const hideConfig = reactive({});
+  const toggleHideByIndex = (index: number) => {
+    hideConfig[index] = !hideConfig[index]
+  }
 </script>
 
 <template>
-  <view class="invite-container page" :style="{paddingTop: topDistance+'px'}" @tap="cancelChoose()">    
-    <view class="contacts">
-      <view class="contact-item" v-for="(item, key) in freeContacts" :key="key" @tap.stop="onChoose(item)">
-        <image class="avatar" :src="item.avatar"></image>
-        <view class="name">{{item.nickname}}</view>
+  <scroll-view :scrollY="true" class="invite-container page" :style="{top: topDistance+'px'}" >      
+    <view class="contact-role-group" v-for="(group, key, index) in roleContacts" :key="index">
+      <view class="role-name pd-2" :class="{hide: hideConfig[index]}" @tap="toggleHideByIndex(index)">{{key}}</view>
+      <view class="white-box" :style="{display: hideConfig[index] ? 'none' : 'block'}">        
+        <view class="contact-item" v-for="(item, i) in group" :key="i"  >
+          <image class="avatar" :src="item.avatar" />
+          <view class="info">
+            <view>{{item.nickname}}</view>
+            <text style="color:#999">{{item.group_name}}</text>              
+          </view>
+          <button class="call invite-btn" @tap.stop="onChoose(item)">邀请</button>          
         </view>
       </view>      
-    <data-empty v-if="!freeContacts?.length"></data-empty>
     </view>
+    <data-empty v-if="!roleContacts?.length"></data-empty>
+  </scroll-view>
 </template>
 
 <style lang="less">
@@ -37,9 +50,61 @@
     z-index: 1000;
     top: 0;
     left: 0;
+    bottom: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.65); 
+    z-index: 10000;
+    .contact-role-group{      
+      background-color: #fff;
+      .role-name{
+        // background-color: #f5f5f5;
+        position: relative;
+        padding-left: 60px;
+        &.hide::before{
+          transform: rotate(-90deg);
+        }
+        &::before{
+          content: '';
+          width: 0;
+          height: 0;
+          position: absolute;
+          border-left: 10px solid transparent;
+          border-right: 10px solid transparent;
+          border-top: 16px solid #aaa;
+          left:25px;
+          top:37px;
+        }
+      }
+               
+      .contact-item{
+        margin-bottom: 65px;
+        // padding: 25px 0;
+        // border-bottom: 1px solid #f8f8f8;
+        display: flex;
+        align-items: center;
+        &:last-child{
+          margin-bottom: 15px;
+        }
+        .avatar{
+          width: 80px;
+          height: 80px;
+          border-radius: 50%;
+          overflow:hidden;
+        }
+        .info{
+          flex: 1;
+          padding: 0 20px;
+        }
+        .invite-btn{
+          display: inline-block;
+          background: #2b91e2;
+          color: #fff;
+          padding: 6px 12px;
+        } 
+      }                 
+    }
+    
     .contacts{
       display: flex;      
       padding: 0 30px;