Skip to content

Commit 616591e

Browse files
AntreesyAntreesy
authored
Merge pull request #16534 from nextcloud/fix/noid/video-vue-remove-transitions
2 parents 1af125b + 28a56ab commit 616591e

File tree

2 files changed

+69
-86
lines changed

2 files changed

+69
-86
lines changed

‎src/components/CallView/shared/VideoBottomBar.vue‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,25 @@
99
:class="{ 'wrapper--big': isBig }"
1010
@mouseover.stop="mouseover = true"
1111
@mouseleave.stop="mouseover = false">
12-
<TransitionWrapper name="fade">
13-
<div v-if="showRaiseHandIndicator" class="status-indicator raiseHandIndicator">
14-
<IconHandBackLeft :size="18" fill-color="#ffffff" />
15-
</div>
16-
</TransitionWrapper>
12+
<div v-if="showRaiseHandIndicator" class="status-indicator raiseHandIndicator">
13+
<IconHandBackLeft :size="18" fill-color="#ffffff" />
14+
</div>
1715

1816
<div v-if="!isSidebar" class="bottom-bar">
19-
<TransitionWrapper name="fade">
20-
<div
21-
v-show="showParticipantName"
22-
class="participant-name"
23-
:class="{
24-
'participant-name--active': isCurrentlyActive,
25-
'participant-name--has-shadow': hasShadow,
26-
}">
27-
{{ participantName }}
28-
</div>
29-
</TransitionWrapper>
17+
<div
18+
v-show="showParticipantName"
19+
class="participant-name"
20+
:class="{
21+
'participant-name--active': isCurrentlyActive,
22+
'participant-name--has-shadow': hasShadow,
23+
}">
24+
{{ participantName }}
25+
</div>
3026

31-
<TransitionWrapper
27+
<div
3228
v-if="!isScreen"
3329
v-show="showVideoOverlay"
34-
class="media-indicators"
35-
name="fade"
36-
group>
30+
class="media-indicators">
3731
<NcButton
3832
v-if="showAudioIndicator"
3933
:title="audioButtonTitle"
@@ -79,7 +73,7 @@
7973
class="status-indicator iceFailedIndicator">
8074
<IconAlertCircleOutline :size="20" />
8175
</div>
82-
</TransitionWrapper>
76+
</div>
8377

8478
<NcButton
8579
v-if="showStopFollowingButton"
@@ -103,7 +97,6 @@ import IconMicrophone from 'vue-material-design-icons/Microphone.vue' // Filled
10397
import IconMonitor from 'vue-material-design-icons/Monitor.vue'
10498
import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
10599
import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
106-
import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
107100
import IconMicrophoneOffOutline from '../../../../img/material-icons/microphone-off-outline.svg?raw'
108101
import { PARTICIPANT } from '../../../constants.ts'
109102
import { useActorStore } from '../../../stores/actor.ts'
@@ -122,7 +115,6 @@ export default {
122115
IconVideoOffOutline,
123116
NcButton,
124117
NcIconSvgWrapper,
125-
TransitionWrapper,
126118
},
127119
128120
inheritAttrs: false,
@@ -351,6 +343,7 @@ export default {
351343
align-items: center;
352344
gap: var(--default-grid-baseline);
353345
width: 100%;
346+
min-height: var(--default-clickable-area);
354347
355348
& .media-indicators {
356349
display: flex;

‎src/components/CallView/shared/VideoVue.vue‎

Lines changed: 53 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -13,68 +13,60 @@
1313
@mouseover="mouseover = true"
1414
@mouseleave="mouseover = false"
1515
@click="$emit('clickVideo')">
16-
<TransitionWrapper name="fade">
17-
<div
18-
v-show="showVideo"
19-
:class="videoWrapperClass"
20-
class="videoWrapper"
21-
:style="videoWrapperStyle">
22-
<video
23-
ref="video"
24-
:disablePictureInPicture="!isBig"
25-
:class="fitVideo ? 'video--fit' : 'video--fill'"
26-
class="video"
27-
@playing="updateVideoAspectRatio" />
28-
<IconAccountOffOutline
29-
v-if="isPresenterOverlay && mouseover"
30-
class="presenter-icon__hide"
31-
:aria-label="t('spreed', 'Hide presenter video')"
32-
:title="t('spreed', 'Hide presenter video')"
33-
:size="32"
34-
@click="$emit('clickPresenter')" />
35-
<NcLoadingIcon
36-
v-if="isLoading"
37-
:size="avatarSize / 2"
38-
class="video-loading" />
39-
40-
<img
41-
v-if="screenshotModeUrl && isPresenterOverlay"
42-
class="dev-mode-video--presenter"
43-
alt="dev-mode-video--presenter"
44-
:src="screenshotModeUrl">
45-
</div>
46-
</TransitionWrapper>
47-
<TransitionWrapper name="fade">
48-
<ScreenShare
49-
v-if="showSharedScreen"
50-
:is-big="isBig"
16+
<div
17+
v-show="showVideo"
18+
:class="videoWrapperClass"
19+
class="videoWrapper"
20+
:style="videoWrapperStyle">
21+
<video
22+
ref="video"
23+
:disablePictureInPicture="!isBig"
24+
:class="fitVideo ? 'video--fit' : 'video--fill'"
25+
class="video"
26+
@playing="updateVideoAspectRatio" />
27+
<IconAccountOffOutline
28+
v-if="isPresenterOverlay && mouseover"
29+
class="presenter-icon__hide"
30+
:aria-label="t('spreed', 'Hide presenter video')"
31+
:title="t('spreed', 'Hide presenter video')"
32+
:size="32"
33+
@click="$emit('clickPresenter')" />
34+
<NcLoadingIcon
35+
v-if="isLoading"
36+
:size="avatarSize / 2"
37+
class="video-loading" />
38+
39+
<img
40+
v-if="screenshotModeUrl && isPresenterOverlay"
41+
class="dev-mode-video--presenter"
42+
alt="dev-mode-video--presenter"
43+
:src="screenshotModeUrl">
44+
</div>
45+
<ScreenShare
46+
v-if="showSharedScreen"
47+
:is-big="isBig"
48+
:token="token"
49+
:call-participant-model="model"
50+
:shared-data="sharedData" />
51+
<div
52+
v-if="showBackgroundAndAvatar"
53+
class="avatar-container">
54+
<VideoBackground :display-name="displayName" :user="participantUserId" />
55+
<AvatarWrapper
56+
:id="participantUserId"
5157
:token="token"
52-
:call-participant-model="model"
53-
:shared-data="sharedData" />
54-
</TransitionWrapper>
55-
<TransitionWrapper name="fade">
56-
<div
57-
v-if="showBackgroundAndAvatar"
58-
class="avatar-container">
59-
<VideoBackground :display-name="displayName" :user="participantUserId" />
60-
<AvatarWrapper
61-
:id="participantUserId"
62-
:token="token"
63-
:name="displayName"
64-
:source="participantActorType"
65-
:size="avatarSize"
66-
:loading="isLoading"
67-
disable-menu
68-
disable-tooltip />
69-
</div>
70-
</TransitionWrapper>
71-
<TransitionWrapper name="fade">
72-
<div
73-
v-if="showPlaceholderForPromoted"
74-
class="placeholder-for-promoted">
75-
<IconAccountCircleOutline v-if="isPromoted || isSelected" fill-color="#FFFFFF" :size="64" />
76-
</div>
77-
</TransitionWrapper>
58+
:name="displayName"
59+
:source="participantActorType"
60+
:size="avatarSize"
61+
:loading="isLoading"
62+
disable-menu
63+
disable-tooltip />
64+
</div>
65+
<div
66+
v-if="showPlaceholderForPromoted"
67+
class="placeholder-for-promoted">
68+
<IconAccountCircleOutline v-if="isPromoted || isSelected" fill-color="#FFFFFF" :size="64" />
69+
</div>
7870
<div
7971
v-if="connectionMessage"
8072
:class="connectionMessageClass"
@@ -100,7 +92,6 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
10092
import IconAccountCircleOutline from 'vue-material-design-icons/AccountCircleOutline.vue'
10193
import IconAccountOffOutline from 'vue-material-design-icons/AccountOffOutline.vue'
10294
import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
103-
import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
10495
import ScreenShare from './ScreenShare.vue'
10596
import VideoBackground from './VideoBackground.vue'
10697
import VideoBottomBar from './VideoBottomBar.vue'
@@ -119,7 +110,6 @@ export default {
119110
120111
components: {
121112
AvatarWrapper,
122-
TransitionWrapper,
123113
VideoBackground,
124114
ScreenShare,
125115
VideoBottomBar,

0 commit comments

Comments
 (0)