mirror of
https://github.com/nextcloud/spreed.git
synced 2025-12-18 05:20:50 +01:00
Merge pull request #16534 from nextcloud/fix/noid/video-vue-remove-transitions
This commit is contained in:
Maksim Sukharev
GitHub
commit
616591e6e5
2 changed files with 68 additions and 85 deletions
|
|
@ -9,31 +9,25 @@
|
|||
:class="{ 'wrapper--big': isBig }"
|
||||
@mouseover.stop="mouseover = true"
|
||||
@mouseleave.stop="mouseover = false">
|
||||
<TransitionWrapper name="fade">
|
||||
<div v-if="showRaiseHandIndicator" class="status-indicator raiseHandIndicator">
|
||||
<IconHandBackLeft :size="18" fill-color="#ffffff" />
|
||||
</div>
|
||||
</TransitionWrapper>
|
||||
<div v-if="showRaiseHandIndicator" class="status-indicator raiseHandIndicator">
|
||||
<IconHandBackLeft :size="18" fill-color="#ffffff" />
|
||||
</div>
|
||||
|
||||
<div v-if="!isSidebar" class="bottom-bar">
|
||||
<TransitionWrapper name="fade">
|
||||
<div
|
||||
v-show="showParticipantName"
|
||||
class="participant-name"
|
||||
:class="{
|
||||
'participant-name--active': isCurrentlyActive,
|
||||
'participant-name--has-shadow': hasShadow,
|
||||
}">
|
||||
{{ participantName }}
|
||||
</div>
|
||||
</TransitionWrapper>
|
||||
<div
|
||||
v-show="showParticipantName"
|
||||
class="participant-name"
|
||||
:class="{
|
||||
'participant-name--active': isCurrentlyActive,
|
||||
'participant-name--has-shadow': hasShadow,
|
||||
}">
|
||||
{{ participantName }}
|
||||
</div>
|
||||
|
||||
<TransitionWrapper
|
||||
<div
|
||||
v-if="!isScreen"
|
||||
v-show="showVideoOverlay"
|
||||
class="media-indicators"
|
||||
name="fade"
|
||||
group>
|
||||
class="media-indicators">
|
||||
<NcButton
|
||||
v-if="showAudioIndicator"
|
||||
:title="audioButtonTitle"
|
||||
|
|
@ -79,7 +73,7 @@
|
|||
class="status-indicator iceFailedIndicator">
|
||||
<IconAlertCircleOutline :size="20" />
|
||||
</div>
|
||||
</TransitionWrapper>
|
||||
</div>
|
||||
|
||||
<NcButton
|
||||
v-if="showStopFollowingButton"
|
||||
|
|
@ -103,7 +97,6 @@ import IconMicrophone from 'vue-material-design-icons/Microphone.vue' // Filled
|
|||
import IconMonitor from 'vue-material-design-icons/Monitor.vue'
|
||||
import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
|
||||
import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
|
||||
import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
|
||||
import IconMicrophoneOffOutline from '../../../../img/material-icons/microphone-off-outline.svg?raw'
|
||||
import { PARTICIPANT } from '../../../constants.ts'
|
||||
import { useActorStore } from '../../../stores/actor.ts'
|
||||
|
|
@ -122,7 +115,6 @@ export default {
|
|||
IconVideoOffOutline,
|
||||
NcButton,
|
||||
NcIconSvgWrapper,
|
||||
TransitionWrapper,
|
||||
},
|
||||
|
||||
inheritAttrs: false,
|
||||
|
|
@ -351,6 +343,7 @@ export default {
|
|||
align-items: center;
|
||||
gap: var(--default-grid-baseline);
|
||||
width: 100%;
|
||||
min-height: var(--default-clickable-area);
|
||||
|
||||
& .media-indicators {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -13,68 +13,60 @@
|
|||
@mouseover="mouseover = true"
|
||||
@mouseleave="mouseover = false"
|
||||
@click="$emit('clickVideo')">
|
||||
<TransitionWrapper name="fade">
|
||||
<div
|
||||
v-show="showVideo"
|
||||
:class="videoWrapperClass"
|
||||
class="videoWrapper"
|
||||
:style="videoWrapperStyle">
|
||||
<video
|
||||
ref="video"
|
||||
:disablePictureInPicture="!isBig"
|
||||
:class="fitVideo ? 'video--fit' : 'video--fill'"
|
||||
class="video"
|
||||
@playing="updateVideoAspectRatio" />
|
||||
<IconAccountOffOutline
|
||||
v-if="isPresenterOverlay && mouseover"
|
||||
class="presenter-icon__hide"
|
||||
:aria-label="t('spreed', 'Hide presenter video')"
|
||||
:title="t('spreed', 'Hide presenter video')"
|
||||
:size="32"
|
||||
@click="$emit('clickPresenter')" />
|
||||
<NcLoadingIcon
|
||||
v-if="isLoading"
|
||||
:size="avatarSize / 2"
|
||||
class="video-loading" />
|
||||
<div
|
||||
v-show="showVideo"
|
||||
:class="videoWrapperClass"
|
||||
class="videoWrapper"
|
||||
:style="videoWrapperStyle">
|
||||
<video
|
||||
ref="video"
|
||||
:disablePictureInPicture="!isBig"
|
||||
:class="fitVideo ? 'video--fit' : 'video--fill'"
|
||||
class="video"
|
||||
@playing="updateVideoAspectRatio" />
|
||||
<IconAccountOffOutline
|
||||
v-if="isPresenterOverlay && mouseover"
|
||||
class="presenter-icon__hide"
|
||||
:aria-label="t('spreed', 'Hide presenter video')"
|
||||
:title="t('spreed', 'Hide presenter video')"
|
||||
:size="32"
|
||||
@click="$emit('clickPresenter')" />
|
||||
<NcLoadingIcon
|
||||
v-if="isLoading"
|
||||
:size="avatarSize / 2"
|
||||
class="video-loading" />
|
||||
|
||||
<img
|
||||
v-if="screenshotModeUrl && isPresenterOverlay"
|
||||
class="dev-mode-video--presenter"
|
||||
alt="dev-mode-video--presenter"
|
||||
:src="screenshotModeUrl">
|
||||
</div>
|
||||
</TransitionWrapper>
|
||||
<TransitionWrapper name="fade">
|
||||
<ScreenShare
|
||||
v-if="showSharedScreen"
|
||||
:is-big="isBig"
|
||||
<img
|
||||
v-if="screenshotModeUrl && isPresenterOverlay"
|
||||
class="dev-mode-video--presenter"
|
||||
alt="dev-mode-video--presenter"
|
||||
:src="screenshotModeUrl">
|
||||
</div>
|
||||
<ScreenShare
|
||||
v-if="showSharedScreen"
|
||||
:is-big="isBig"
|
||||
:token="token"
|
||||
:call-participant-model="model"
|
||||
:shared-data="sharedData" />
|
||||
<div
|
||||
v-if="showBackgroundAndAvatar"
|
||||
class="avatar-container">
|
||||
<VideoBackground :display-name="displayName" :user="participantUserId" />
|
||||
<AvatarWrapper
|
||||
:id="participantUserId"
|
||||
:token="token"
|
||||
:call-participant-model="model"
|
||||
:shared-data="sharedData" />
|
||||
</TransitionWrapper>
|
||||
<TransitionWrapper name="fade">
|
||||
<div
|
||||
v-if="showBackgroundAndAvatar"
|
||||
class="avatar-container">
|
||||
<VideoBackground :display-name="displayName" :user="participantUserId" />
|
||||
<AvatarWrapper
|
||||
:id="participantUserId"
|
||||
:token="token"
|
||||
:name="displayName"
|
||||
:source="participantActorType"
|
||||
:size="avatarSize"
|
||||
:loading="isLoading"
|
||||
disable-menu
|
||||
disable-tooltip />
|
||||
</div>
|
||||
</TransitionWrapper>
|
||||
<TransitionWrapper name="fade">
|
||||
<div
|
||||
v-if="showPlaceholderForPromoted"
|
||||
class="placeholder-for-promoted">
|
||||
<IconAccountCircleOutline v-if="isPromoted || isSelected" fill-color="#FFFFFF" :size="64" />
|
||||
</div>
|
||||
</TransitionWrapper>
|
||||
:name="displayName"
|
||||
:source="participantActorType"
|
||||
:size="avatarSize"
|
||||
:loading="isLoading"
|
||||
disable-menu
|
||||
disable-tooltip />
|
||||
</div>
|
||||
<div
|
||||
v-if="showPlaceholderForPromoted"
|
||||
class="placeholder-for-promoted">
|
||||
<IconAccountCircleOutline v-if="isPromoted || isSelected" fill-color="#FFFFFF" :size="64" />
|
||||
</div>
|
||||
<div
|
||||
v-if="connectionMessage"
|
||||
:class="connectionMessageClass"
|
||||
|
|
@ -100,7 +92,6 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
|
|||
import IconAccountCircleOutline from 'vue-material-design-icons/AccountCircleOutline.vue'
|
||||
import IconAccountOffOutline from 'vue-material-design-icons/AccountOffOutline.vue'
|
||||
import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
|
||||
import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
|
||||
import ScreenShare from './ScreenShare.vue'
|
||||
import VideoBackground from './VideoBackground.vue'
|
||||
import VideoBottomBar from './VideoBottomBar.vue'
|
||||
|
|
@ -119,7 +110,6 @@ export default {
|
|||
|
||||
components: {
|
||||
AvatarWrapper,
|
||||
TransitionWrapper,
|
||||
VideoBackground,
|
||||
ScreenShare,
|
||||
VideoBottomBar,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue