Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
S
standalone-anyremote
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
qlintonger xeno
standalone-anyremote
Commits
970292ee
Commit
970292ee
authored
Apr 30, 2024
by
pangchong
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 样式调整
parent
4da4d06d
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
50 additions
and
50 deletions
+50
-50
src/views/remote/videoCall/videoChat.vue
+1
-1
src/views/remote/videoCall/videoInfo.vue
+12
-12
src/views/remote/videoCall/videoItem.vue
+3
-3
src/views/remote/videoCall/videoSlider.vue
+4
-3
src/views/remote/videoCall/videoTools.vue
+30
-31
No files found.
src/views/remote/videoCall/videoChat.vue
View file @
970292ee
<
template
>
<div
class=
"g-block ml-4 pb-0"
>
<div
class=
"px-4"
>
<div
class=
"px-4
h-[300px]
"
>
<video-item
:is-self=
"true"
:id=
"''"
></video-item>
</div>
<a-row
class=
"mt-2 px-4"
>
...
...
src/views/remote/videoCall/videoInfo.vue
View file @
970292ee
<
template
>
<div
class=
"g-block ml-4
overflow-y-auto
"
>
<div
class=
"g-block ml-4"
>
<div
class=
"flex justify-between items-center mb-4 px-4"
>
<a-typography-paragraph
editable
v-model:editText=
"videoTitle"
>
{{
videoTitle
}}
...
...
@@ -15,30 +15,30 @@
</div>
</a-space>
</div>
<!-- 其余的视频窗口
-->
<!-- 其余的视频窗口
-->
<video-slider
class=
"mb-3 px-4"
:id-set=
"userVideoContainerSet.onTopUserSet"
></video-slider>
<!-- 放大的窗口
-->
<video-tools
:id=
"userVideoContainerSet.inCenter"
class=
"px-4"
></video-tools>
<!-- 放大的窗口
-->
<video-tools
:id=
"userVideoContainerSet.inCenter"
class=
"px-4
flex flex-col flex-auto
"
></video-tools>
</div>
</
template
>
<
script
setup
lang=
"ts"
>
import
VideoSlider
from
'./videoSlider.vue'
import
VideoTools
from
'./videoTools.vue'
import
{
allOtherChattersIdSet
}
from
"AnyR/states/chatChannelStates"
;
import
{
computed
,
ref
,
onMounted
}
from
"vue"
;
import
{
allOtherChattersIdSet
}
from
'AnyR/states/chatChannelStates'
import
{
computed
,
ref
,
onMounted
}
from
'vue'
const
inCenterUserVideoId
=
ref
(
''
)
;
const
inCenterUserVideoId
=
ref
(
''
)
onMounted
(
function
()
{
inCenterUserVideoId
.
value
=
allOtherChattersIdSet
.
value
[
0
];
inCenterUserVideoId
.
value
=
allOtherChattersIdSet
.
value
[
0
]
})
const
userVideoContainerSet
=
computed
(
function
()
{
return
{
onTopUserSet
:
allOtherChattersIdSet
.
value
.
filter
((
a
:
any
)
=>
a
!==
inCenterUserVideoId
.
value
),
inCenter
:
inCenterUserVideoId
.
value
}
return
{
onTopUserSet
:
allOtherChattersIdSet
.
value
.
filter
((
a
:
any
)
=>
a
!==
inCenterUserVideoId
.
value
),
inCenter
:
inCenterUserVideoId
.
value
}
})
const
videoTitle
=
ref
(
'2024-02-17 10:22:23远程协助事件'
)
...
...
src/views/remote/videoCall/videoItem.vue
View file @
970292ee
<
template
>
<div
class=
"relative
"
:id=
"ps.isSelf ? 'LocalVideo' : `RemoteVideo$
{ps.id}`" style="height: 300px;
">
<div
class=
"relative
h-full"
:id=
"ps.isSelf ? 'LocalVideo' : `RemoteVideo$
{ps.id}`
">
<div
class=
"absolute flex justify-between items-center p-1 top-0 left-0 w-full z-10"
>
<div
class=
"text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary"
>
冯云
</div>
<a-space
:size=
"4"
>
...
...
@@ -28,8 +28,8 @@
<
script
setup
lang=
"ts"
>
const
ps
=
defineProps
({
isSelf
:
Boolean
,
id
:
String
isSelf
:
Boolean
,
id
:
String
})
</
script
>
<
style
lang=
"less"
scoped
></
style
>
src/views/remote/videoCall/videoSlider.vue
View file @
970292ee
<
template
>
<a-space
class=
"justify-center"
>
<a-space
class=
"justify-center"
v-if=
"idSet.length"
>
<!-- 往左 -->
<div
class=
"cursor-pointer"
@
click=
"slideLeft"
><icon-left
/></div>
<div
class=
"slider-container mb-1"
>
<a-space
class=
"slider-content overflow-y-hidden"
:size=
"8"
:style=
"sliderStyles"
>
<video-item
class=
"slider-item"
v-for=
"item in
ps.
idSet"
:key=
"item"
:is-self=
"false"
:id=
"item"
></video-item>
<video-item
class=
"slider-item"
v-for=
"item in idSet"
:key=
"item"
:is-self=
"false"
:id=
"item"
></video-item>
</a-space>
</div>
<!-- 往右 -->
...
...
@@ -17,7 +17,7 @@ import VideoItem from './videoItem.vue'
import
{
IconLeft
,
IconRight
}
from
'@arco-design/web-vue/es/icon'
const
ps
=
defineProps
<
{
idSet
:
Array
<
any
>
idSet
:
Array
<
any
>
}
>
()
const
sliderWidth
=
ref
(
150
)
//滑块宽度
...
...
@@ -53,6 +53,7 @@ const getSliderWidth = computed(() => {
position
:
relative
;
.slider-item
{
width
:
v-bind
(
'getSliderWidth'
);
height
:
120px
;
}
}
</
style
>
src/views/remote/videoCall/videoTools.vue
View file @
970292ee
<
template
>
<div>
<div
class=
"relative mb-4
"
style=
"height: 300px
"
:id=
"`RemoteVideo$
{ps.id}`">
<div
class=
"relative mb-4
flex-auto
"
:id=
"`RemoteVideo$
{ps.id}`">
<div
class=
"absolute flex justify-between items-center p-1 t-0 l-0 w-full z-10"
>
<div
class=
"text-xs px-2 rounded-sm leading-5"
style=
"background-color: rgb(var(--success-1)); color: rgb(var(--success-6))"
>
吴彦谦
</div>
<div
class=
"rounded-full size-6 flex-center"
style=
"background-color: var(--color-border-1)"
>
...
...
@@ -13,26 +13,26 @@
<global-icon
icon=
"phone-hangup"
:size=
"21"
color=
"rgb(var(--danger-5))"
></global-icon>
<span
class=
"mt-1"
style=
"color: rgb(var(--danger-5))"
>
挂断
</span>
</div>
<div
v-else
class=
"w-[120px] h-[72px] item"
@
click=
"endMeeting"
>
<global-icon
icon=
"phone-hangup"
:size=
"21"
color=
"rgb(var(--danger-5))"
></global-icon>
<span
class=
"mt-1"
style=
"color: rgb(var(--danger-5))"
>
结束会议
</span>
</div>
<div
v-else
class=
"w-[120px] h-[72px] item"
@
click=
"endMeeting"
>
<global-icon
icon=
"phone-hangup"
:size=
"21"
color=
"rgb(var(--danger-5))"
></global-icon>
<span
class=
"mt-1"
style=
"color: rgb(var(--danger-5))"
>
结束会议
</span>
</div>
<div
class=
"w-[120px] h-[72px] item"
@
click=
"toggleMute"
>
<global-icon
icon=
"mic"
:size=
"21"
></global-icon>
<span
class=
"mt-1 color-text-2"
>
{{
isCurrentUserMuted
?
'取消静音'
:
"静音"
}}
</span>
<span
class=
"mt-1 color-text-2"
>
{{
isCurrentUserMuted
?
'取消静音'
:
'静音'
}}
</span>
</div>
<div
class=
"w-[120px] h-[72px] item"
@
click=
"toggleVoiceChatOnly"
>
<global-icon
icon=
"swap"
:size=
"21"
></global-icon>
<span
class=
"mt-1 color-text-2"
>
{{
isVoiceChatOnly
?
'视频模式'
:
"语音模式"
}}
</span>
<span
class=
"mt-1 color-text-2"
>
{{
isVoiceChatOnly
?
'视频模式'
:
'语音模式'
}}
</span>
</div>
<!--
<div
class=
"w-[120px] h-[72px] item"
>
--
>
<!--
<global-icon
icon=
"screenshot"
:size=
"21"
></global-icon>
--
>
<!--
<span
class=
"mt-1 color-text-2"
>
截图
</span>
--
>
<!--
</div>
-->
<!--
<div
class=
"w-[120px] h-[72px] item"
>
<global-icon
icon=
"screenshot"
:size=
"21"
></global-icon
>
<span
class=
"mt-1 color-text-2"
>
截图
</span
>
</div>
-->
<div
class=
"w-[120px] h-[72px] item"
@
click=
"toggleScreenShare"
>
<global-icon
icon=
"shared-screen"
:size=
"21"
></global-icon>
<span
class=
"mt-1 color-text-2"
>
{{
screenShareMetaData
.
byOther
?
'他人正在共享'
:
screenShareMetaData
.
byCurrentUser
?
'取消屏幕共享'
:
'屏幕共享'
}}
{{
screenShareMetaData
.
byOther
?
'他人正在共享'
:
screenShareMetaData
.
byCurrentUser
?
'取消屏幕共享'
:
'屏幕共享'
}}
</span>
</div>
<div
class=
"w-[120px] h-[72px] item"
>
...
...
@@ -48,49 +48,48 @@
</
template
>
<
script
setup
lang=
"ts"
>
import
{
useAnyR
}
from
"AnyR/index"
;
import
{
isUserHost
}
from
"AnyR/states/chatChannelStates"
;
import
{
ref
}
from
"vue"
import
{
isCurrentUserMuted
}
from
"AnyR/states/chatChannelStates"
;
import
{
screenShareMetaData
}
from
"AnyR/states/chatChannelStates"
;
import
{
useAnyR
}
from
'AnyR/index'
import
{
isUserHost
}
from
'AnyR/states/chatChannelStates'
import
{
ref
}
from
'vue'
import
{
isCurrentUserMuted
}
from
'AnyR/states/chatChannelStates'
import
{
screenShareMetaData
}
from
'AnyR/states/chatChannelStates'
const
ps
=
defineProps
<
{
id
:
any
id
:
any
}
>
()
const
isVoiceChatOnly
=
ref
(
false
)
const
AnyR
=
useAnyR
()
;
const
AnyR
=
useAnyR
()
function
toggleMute
()
{
AnyR
?.
agora
.
toggleMuteSelf
()
AnyR
?.
agora
.
toggleMuteSelf
()
}
function
toggleScreenShare
()
{
if
(
screenShareMetaData
.
value
.
byOther
)
return
;
const
endHandle
=
()
=>
{
if
(
screenShareMetaData
.
value
.
byOther
)
return
const
endHandle
=
()
=>
{
AnyR
?.
agora
.
screenShareHandle
()
}
AnyR
?.
agora
.
screenShareHandle
()
}
AnyR
?.
agora
.
screenShareHandle
()
AnyR
?.
agora
.
agoraApp
.
toggleScreenShare
(
!
screenShareMetaData
.
value
.
byCurrentUser
,
endHandle
,
endHandle
,
()
=>
{})
AnyR
?.
agora
.
agoraApp
.
toggleScreenShare
(
!
screenShareMetaData
.
value
.
byCurrentUser
,
endHandle
,
endHandle
,
()
=>
{})
}
function
allMute
()
{
AnyR
?.
agora
.
muteAllUser
()
AnyR
?.
agora
.
muteAllUser
()
}
function
toggleVoiceChatOnly
()
{
isVoiceChatOnly
.
value
=
!
isVoiceChatOnly
.
value
AnyR
?.
agora
.
toggleVoiceChatOnly
(
isVoiceChatOnly
.
value
);
isVoiceChatOnly
.
value
=
!
isVoiceChatOnly
.
value
AnyR
?.
agora
.
toggleVoiceChatOnly
(
isVoiceChatOnly
.
value
)
}
function
endMeeting
()
{
AnyR
?.
agora
.
endCurrentCall
()
AnyR
?.
agora
.
endCurrentCall
()
}
function
hangupCall
()
{
AnyR
?.
agora
.
hangUpCurrentCall
();
AnyR
?.
agora
.
hangUpCurrentCall
()
}
</
script
>
<
style
lang=
"less"
scoped
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment