Skip to content

A
anyremote-miniapp
Commit 92b5c4ae by wxl
Options

fix bugs

parent e7d97607
Showing with 116 additions and 43 deletions
any-hooks/auth/useLogOut.ts
......@@ -5,12 +5,12 @@ import { useAuthData } from "./useAuthData";
export function useLogOut() {
const [, request] = useRequest<any>('/loginOut', { auto: false });
const { setAuth } = useInjector(useAuthData);
const { close } = useInjector(useNetSocketStore)
const { close } = useInjector(useNetSocketStore);
const submitLogOut = (data: {login_id: string}) => {
return request(data).then( _ => {
setAuth(null);
close();
setAuth(null);
});
}
......
any-hooks/communication/useCallCenter.ts
......@@ -20,6 +20,8 @@ export function useCallCenter() {
const { sendMsg, currentMsg } = useInjector(useNetSocketStore);
const { authData } = useInjector(useAuthData);
let timer;
/** 主动呼叫功能 */
const [target, setTarget] = useState<Caller>(null);
const [myCallState, setCallState] = useState<CallingState>('free');
......@@ -39,8 +41,8 @@ export function useCallCenter() {
}
})
})
//8S后若本地用户仍处于主动呼叫状态，则自动挂断
setTimeout(() => {
//18S后若本地用户仍处于主动呼叫状态，则自动挂断
timer = setTimeout(() => {
if(myCallState.value === 'calling') hangup();
}, 18000)
}
......@@ -60,6 +62,7 @@ export function useCallCenter() {
msgMainFlag: 'CallAnswer',
msgSubFlag: subFlag
})
clearTimeout(timer)
}
/** 呼叫监听功能 */
......@@ -83,13 +86,13 @@ export function useCallCenter() {
} else{
answerCaller('Busying', {id: msg.fromID, nickname: msg.fromName});
}
//10S秒后若本地用户仍然处于被呼叫状态，则自动发出繁忙恢复，且将状态恢复为free
setTimeout( () => {
//15S秒后若本地用户仍然处于被呼叫状态，则自动发出繁忙恢复，且将状态恢复为free
timer = setTimeout( () => {
if(myCallState.value === 'being_called'){
answerCaller('Busying', {id: currentMsg.value.fromID, nickname: currentMsg.value.fromName});
setCallState('free');
}
}, 10000)
}, 15000)
break;
case 'Hangup':
//对方中断呼叫，则将呼叫状态改为free
......@@ -133,11 +136,11 @@ export function useCallCenter() {
break;
case 'calling':
flag = 'CallOffer';
toID = target.value.id;
toID = target.value?.id;
break;
case 'being_called':
flag = 'CallAnswer';
toID = caller.value.id;
toID = caller.value?.id;
break;
}
......@@ -151,6 +154,7 @@ export function useCallCenter() {
type === 'leave' && setCallState('free');
setTarget(null);
setCaller(null);
clearTimeout(timer);
}
/** 监听呼叫状态，当状态变回free时，重置channel的信息,同时向服务器广播 */
......
any-hooks/types/socket.ts
......@@ -17,7 +17,7 @@ export interface SocketSettings {
export type ConnectStatus = 'ready' | 'opening' | 'onerror' | 'closed' | 'reconnect';
export type AnyRemoteMainFlag = 'Heart' | 'Login' | 'Broadcast' | 'Home' | 'CallOffer' | 'CallAnswer' | 'ChannelChat' | 'NotifyUpdateUserList' | 'SetAtts' | 'Login';
export type AnyRemoteSubFlag = 'Request' | 'Busying' | 'Connect' | 'Hangup' | 'UpdateUserList' | 'OtherLoginIn';
export type AnyRemoteSubFlag = 'Request' | 'Busying' | 'Connect' | 'Hangup' | 'UpdateUserList' | 'OtherLoginIn' | 'NoDevice';
export interface AnyRemoteSocketMessage {
fromID?: string;
......
src/app.config.ts
......@@ -22,15 +22,15 @@ export default {
{
"pagePath": "pages/index/index",
"text": "联系人",
"iconPath": "assets/contacts.png",
"selectedIconPath": "assets/contacts_a.png"
"iconPath": "assets/Contact@3x.png",
"selectedIconPath": "assets/Contact-Check@3x.png"
},
{
"pagePath": "pages/mine/index",
"text": "个人中心",
"iconPath": "assets/user_center.png",
"selectedIconPath": "assets/user_center_a.png"
"iconPath": "assets/Personal@3x.png",
"selectedIconPath": "assets/Personal-Check@3x.png"
}
]
},
}
}
src/components/contact-item.vue
<script lang="ts" setup="">
import { navigateTo } from "@tarojs/taro";
<script lang="ts" setup>
import { navigateTo, showToast } from "@tarojs/taro";
import { defineProps } from "@vue/runtime-core";
import { useCallCenter } from "any-hooks/communication/useCallCenter";
import { UserData } from "any-hooks/types/user";
import { useAppInitInfo } from "src/hooks/common/useAppInitInfo";
import { useInjector } from "vue-vulcan";
const {data} = defineProps<{data: UserData}>();
const { callContact } = useInjector(useCallCenter);
const { callContact, myCallState } = useInjector(useCallCenter);
const { checkCamearSetting } = useInjector(useAppInitInfo);
const gotoDetail = (id: string) => {
navigateTo({url: '/pages/contact-detail/index?id='+ id})
navigateTo({url: '/pages/contact-detail/index?id='+ id});
}
const onTapCall = (data: UserData) => {
if(myCallState.value !== 'free') {
showToast({title: '您当前已在通话中，无法发起呼叫'});
} else {
checkCamearSetting().then( r => {
r ? callContact(data) : showToast({title: '您未授权摄像头权限，请在设置中打开摄像头授权', icon: 'none'});
})
}
}
</script>
......@@ -21,7 +33,7 @@
<view>{{data.nickname}}</view>
<text>{{data.group_name}}</text>
</view>
<image v-if="data.is_signin === '1'" @tap.stop="callContact(data)" class="call" src="../assets/call3x.png" mode="widthFix"/>
<image v-if="data.is_signin === '1'" @tap.stop="onTapCall(data)" class="call" src="../assets/call3x.png" mode="widthFix"/>
<image v-else class="call" src="../assets/call-no3x.png" mode="widthFix"/>
</view>
</template>
......
src/components/stream-pusher.vue
<script lang="ts" setup>
import { useAuthData } from 'any-hooks/auth/useAuthData';;
import { useAuthData } from 'any-hooks/auth/useAuthData';
import { useMeetingCenter } from 'any-hooks/communication/useMeetingCenter';
import { defineProps } from 'vue';
import { useInjector } from 'vue-vulcan';
......@@ -28,7 +28,7 @@
v-on:error="onError"
:debug="!0"
/>
<view class="cover" >
<view class="cover">
<text class="name">{{authData.nickname}}</text>
<image class="avatar" v-if="mode==='audio'" :src="authData.avatar" mode="widthFix"/>
</view>
......
src/hooks/call/useCallerListener.ts
......@@ -2,11 +2,13 @@ import { navigateTo, redirectTo, showToast } from "@tarojs/taro";
import { useCallCenter } from "any-hooks/communication/useCallCenter";
import { watch } from "vue";
import { useInjector } from "vue-vulcan";
import { useAppInitInfo } from "../common/useAppInitInfo";
/** 在小程序平台监听远程联系人的呼叫动作 */
export function useCallerListener() {
const { caller, target, myCallState } = useInjector(useCallCenter);
const { caller, target, myCallState, answerCaller } = useInjector(useCallCenter);
const { checkCamearSetting } = useInjector(useAppInitInfo)
watch(caller, current => {
if(!current) return;
......@@ -41,7 +43,10 @@ export function useCallerListener() {
}
break;
case 'being_called':
navigateTo({url: '/pages/calling/index'});
checkCamearSetting().then(r => {
r ? navigateTo({url: '/pages/calling/index'}) : answerCaller('NoDevice')
})
break;
case 'call_accepted':
case 'call_successed':
......
src/hooks/common/useAppInitInfo.ts
import { getMenuButtonBoundingClientRect } from "@tarojs/taro";
import { authorize, getMenuButtonBoundingClientRect, getSetting } from "@tarojs/taro";
import { ref } from "vue";
export function useAppInitInfo() {
const rect = getMenuButtonBoundingClientRect();
const topDistance = ref(rect.height + rect.top + 10)
const topDistance = ref(rect.height + rect.top + 10);
const checkCamearSetting = () => {
return getSetting().then(res => {
if(res.authSetting["scope.camera"]) {
return true
} else {
return new Promise((resolve) => {
authorize({
scope: 'scope.camera',
success: () => resolve(true),
fail: () => resolve(false)
})
})
}
})
}
return {
rect,
topDistance
topDistance,
checkCamearSetting
}
}
\ No newline at end of file
src/hooks/http/useCustomeRequest.ts
import { CUSTOME_REQUESTER, RequesterFunc, RequestOptions } from 'vue-vulcan';
import { request } from '@tarojs/taro';
import { request, showToast } from '@tarojs/taro';
export function useCustomeRequest(): RequesterFunc {
return function (url: string, reqs: RequestOptions) {
......@@ -7,6 +7,9 @@ export function useCustomeRequest(): RequesterFunc {
return request({
...reqs,
url,
fail(err) {
showToast({title: '网络错误，请稍后再试', icon: 'none'})
}
}) as Promise<any>
};
}
......
src/pages/index/contacts-list.vue
......@@ -2,14 +2,28 @@
import { useInjector } from 'vue-vulcan';
import { useContacts } from 'any-hooks/contacts/useContacts';
import { useCallCenter } from 'any-hooks/communication/useCallCenter';
import { navigateTo } from '@tarojs/taro';
import { navigateTo, showToast } from '@tarojs/taro';
import { useAppInitInfo } from 'src/hooks/common/useAppInitInfo';
import { UserData } from 'any-hooks/types/user';
const { callContact } = useInjector(useCallCenter);
const { callContact, myCallState } = useInjector(useCallCenter);
const { contacts, roleContacts } = useInjector(useContacts);
const { checkCamearSetting } = useInjector(useAppInitInfo)
const gotoDetail = (id: string) => {
navigateTo({url: '/pages/contact-detail/index?id='+ id})
}
const onTapCall = (data: UserData) => {
if(myCallState.value !== 'free') {
showToast({title: '您当前已在通话中，无法发起呼叫'})
} else {
console.log('检查摄像头权限')
checkCamearSetting().then( r => {
r ? callContact(data) : showToast({title: '您未授权摄像头权限，请在设置中打开摄像头授权', icon: 'none'});
})
}
}
</script>
<template>
......@@ -23,7 +37,7 @@
<view>{{item.nickname}}</view>
<text>{{item.group_name}}</text>
</view>
<image v-if="item.is_signin === '1'" @tap.stop="callContact(item)" class="call" src="../../assets/call3x.png" mode="widthFix"/>
<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"/>
</view>
</view>
......
src/pages/index/index.vue
......@@ -35,7 +35,7 @@
<scroll-view class="home-contents" :scrollY="true" @scroll="onScroll">
<view class="tabs pd-1">
<text class="tab-item contacts" :class="{active: viewMode==='items'}" @tap="setViewMode('items');setKeyWord('')">联系人</text>
<text class="tab-item group" :class="{active: viewMode==='groups'}" @tap="setViewMode('groups');setKeyWord('')">群组</text>
<!-- <text class="tab-item group" :class="{active: viewMode==='groups'}" @tap="setViewMode('groups');setKeyWord('')">群组</text> -->
</view>
<view class="list">
<contacts-list v-if="viewMode === 'items'"></contacts-list>
......@@ -88,9 +88,10 @@
}
}
.list{
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
min-height: 600px;
overflow: hidden;
}
.contact-list{
.contact-item{
......
src/pages/meeting/index.vue
......@@ -12,7 +12,7 @@
const { target } = useInjector(useCallCenter);
const { streamList, localPushurl, voiceMute, mode, switchLocalMicState, switchVideoOrAudio, leave } = useInjector(useMeetingCenter);
const { topDistance } = useAppInitInfo();
const { topDistance, rect } = useAppInitInfo();
/* 监听流的数量，自动退出会议 */
watch(streamList, (current, last) => {
......@@ -58,7 +58,7 @@
if(activeVideo.value === -2) {
setActive(index);
} else {
setActive(-2)
setActive(-2);
}
}
......@@ -69,10 +69,10 @@
callContact(user);
setInviting(false);
}
</script>
<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">
......@@ -84,7 +84,7 @@
v-for="(item, key) in streamList"
:key="key"
:stream="item"
:class="{active: activeVideo===key, hide: activeVideo!==-2}"
:class="{active: activeVideo===key, hide: activeVideo!==-2, mini: streamList.length > 5}"
@tap="toggleActive(key)"
>
</stream-player>
......@@ -92,7 +92,7 @@
class="video-item"
v-if="localPushurl"
:url="localPushurl"
:class="{active: activeVideo===-1, hide: activeVideo!==-2}"
:class="{active: activeVideo===-1, hide: activeVideo!==-2, mini: streamList.length > 5}"
@tap="toggleActive(-1)"
>
</stream-pusher>
......@@ -139,8 +139,16 @@
</template>
<style lang="less">
.navi-back{
width: 20px;
height: 20px;
left: 20px;
position: absolute;
z-index: 1000;
}
.meeting-container{
background: #333;
.videos{
flex:1;
text-align: center;
......@@ -154,6 +162,10 @@
display: inline-block;
background: #000;
color: #fff;
&.mini{
width: 33.3%;
height: 200px;
}
&.waiting{
line-height: 300px;
}
......
src/pages/meeting/invite.vue
......@@ -42,13 +42,17 @@
background-color: rgba(0, 0, 0, 0.65);
.contacts{
display: flex;
// justify-content: space-between;
padding: 0 30px;
flex-wrap: wrap;;
flex-wrap: wrap;
.contact-item{
color: #fff;
margin: 0 15px;
width: 175px;
text-align: center;
.avatar{
width: 80px;
height: 80px;
}
}
}
}
......
src/pages/mine/index.vue
......@@ -10,9 +10,9 @@
const { submitLogOut } = useLogOut();
const onLogOut = () => {
showModal({
title: '是否确认退出当前账号?',
title: '是否确认退出当前账号?'
}).then( res => {
if(res.confirm) return submitLogOut({login_id: authData.value.id});
if(res.confirm) return submitLogOut({login_id: authData.value?.id});
return null
}).then(res => {
res!== null && reLaunch({url: '/pages/login/index'});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment