Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/nextcloud/spreed.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/src/components/TopBar/TopBar.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/TopBar/TopBar.vue')
-rw-r--r--src/components/TopBar/TopBar.vue210
1 files changed, 12 insertions, 198 deletions
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 4e417af7b..2e8429ad8 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -61,71 +61,17 @@
:show-actions="!isSidebar"
:screen-sharing-button-hidden="isSidebar"
:local-call-participant-model="localCallParticipantModel" />
+
+ <!-- TopBar menu -->
+ <TopBarMenu :token="token"
+ :show-actions="!isSidebar"
+ :is-sidebar="isSidebar"
+ :model="localMediaModel" />
+
<div class="top-bar__buttons">
<CallButton class="top-bar__button" />
- <!-- Vertical line -->
- <div v-if="!isSidebar && isInCall"
- class="top-bar__separator" />
-
<!-- sidebar toggle -->
- <NcActions v-if="!isSidebar"
- v-shortkey.once="disableKeyboardShortcuts ? null : ['f']"
- class="top-bar__button"
- :aria-label="t('spreed', 'Conversation actions')"
- :container="container"
- @shortkey.native="toggleFullscreen">
- <template #icon>
- <span :class="{'top-bar__button__force-white': isInCall}">
- <Cog :size="20" />
- </span>
- </template>
- <NcActionButton :icon="iconFullscreen"
- :aria-label="t('spreed', 'Toggle fullscreen')"
- :close-after-click="true"
- @click="toggleFullscreen">
- {{ labelFullscreen }}
- </NcActionButton>
- <NcActionSeparator v-if="showModerationOptions" />
- <NcActionLink v-if="isFileConversation"
- :href="linkToFile">
- <template #icon>
- <File :size="20" />
- </template>
- {{ t('spreed', 'Go to file') }}
- </NcActionLink>
- <template v-if="showModerationOptions">
- <NcActionButton :close-after-click="true"
- icon="icon-rename"
- @click="handleRenameConversation">
- {{ t('spreed', 'Rename conversation') }}
- </NcActionButton>
- </template>
- <NcActionButton v-if="!isOneToOneConversation"
- icon="icon-clippy"
- :close-after-click="true"
- @click="handleCopyLink">
- {{ t('spreed', 'Copy link') }}
- </NcActionButton>
- <template v-if="showModerationOptions && canFullModerate && isInCall">
- <NcActionSeparator />
- <NcActionButton :close-after-click="true"
- @click="forceMuteOthers">
- <template #icon>
- <MicrophoneOff :size="20" />
- </template>
- {{ t('spreed', 'Mute others') }}
- </NcActionButton>
- </template>
- <NcActionSeparator v-if="showModerationOptions" />
- <NcActionButton :close-after-click="true"
- @click="openConversationSettings">
- <template #icon>
- <Cog :size="20" />
- </template>
- {{ t('spreed', 'Conversation settings') }}
- </NcActionButton>
- </NcActions>
<NcActions v-if="showOpenSidebarButton"
class="top-bar__button"
close-after-click="true"
@@ -156,29 +102,25 @@
</template>
<script>
-import { showError, showSuccess, showMessage } from '@nextcloud/dialogs'
+import { showMessage } from '@nextcloud/dialogs'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
import CallButton from './CallButton.vue'
import BrowserStorage from '../../services/BrowserStorage.js'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
-import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
-import File from 'vue-material-design-icons/File.vue'
import MenuPeople from '../missingMaterialDesignIcons/MenuPeople.vue'
import MessageText from 'vue-material-design-icons/MessageText.vue'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
-import { CONVERSATION, PARTICIPANT } from '../../constants.js'
+import { CONVERSATION } from '../../constants.js'
import { generateUrl } from '@nextcloud/router'
-import { callParticipantCollection, localCallParticipantModel, localMediaModel } from '../../utils/webrtc/index.js'
+import { localCallParticipantModel, localMediaModel } from '../../utils/webrtc/index.js'
import { emit } from '@nextcloud/event-bus'
import ConversationIcon from '../ConversationIcon.vue'
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
import richEditor from '@nextcloud/vue/dist/Mixins/richEditor.js'
import userStatus from '../../mixins/userStatus.js'
import LocalMediaControls from '../CallView/shared/LocalMediaControls.vue'
-import Cog from 'vue-material-design-icons/Cog.vue'
import getParticipants from '../../mixins/getParticipants.js'
+import TopBarMenu from './TopBarMenu.vue'
export default {
name: 'TopBar',
@@ -190,17 +132,13 @@ export default {
components: {
NcActionButton,
NcActions,
- NcActionLink,
NcCounterBubble,
CallButton,
- NcActionSeparator,
- File,
MenuPeople,
MessageText,
- MicrophoneOff,
ConversationIcon,
LocalMediaControls,
- Cog,
+ TopBarMenu,
},
mixins: [
@@ -238,60 +176,14 @@ export default {
return this.$store.getters.getMainContainerSelector()
},
- isFullscreen() {
- return this.$store.getters.isFullscreen()
- },
-
- iconFullscreen() {
- if (this.isInCall) {
- return 'forced-white icon-fullscreen'
- }
- return 'icon-fullscreen'
- },
-
- labelFullscreen() {
- if (this.isFullscreen) {
- return t('spreed', 'Exit fullscreen (F)')
- }
- return t('spreed', 'Fullscreen (F)')
- },
-
showOpenSidebarButton() {
return !this.$store.getters.getSidebarStatus
},
- isFileConversation() {
- return this.conversation.objectType === 'file' && this.conversation.objectId
- },
-
isOneToOneConversation() {
return this.conversation.type === CONVERSATION.TYPE.ONE_TO_ONE
},
- linkToFile() {
- if (this.isFileConversation) {
- return window.location.protocol + '//' + window.location.host + generateUrl('/f/' + this.conversation.objectId)
- } else {
- return ''
- }
- },
-
- participantType() {
- return this.conversation.participantType
- },
-
- canFullModerate() {
- return this.participantType === PARTICIPANT.TYPE.OWNER || this.participantType === PARTICIPANT.TYPE.MODERATOR
- },
-
- canModerate() {
- return this.canFullModerate || this.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR
- },
-
- showModerationOptions() {
- return !this.isOneToOneConversation && this.canModerate
- },
-
token() {
return this.$store.getters.getToken()
},
@@ -323,11 +215,6 @@ export default {
}
},
- conversationHasSettings() {
- return this.conversation.type === CONVERSATION.TYPE.GROUP
- || this.conversation.type === CONVERSATION.TYPE.PUBLIC
- },
-
renderedDescription() {
return this.renderContent(this.conversation.description)
},
@@ -361,10 +248,6 @@ export default {
return !peer.sessionIds.length
} else return false
},
-
- disableKeyboardShortcuts() {
- return OCP.Accessibility.disableKeyboardShortcuts()
- },
},
watch: {
@@ -439,67 +322,6 @@ export default {
BrowserStorage.setItem('sidebarOpen', 'true')
},
- fullScreenChanged() {
- this.$store.dispatch(
- 'setIsFullscreen',
- document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement
- )
- },
-
- toggleFullscreen() {
- if (this.isFullscreen) {
- this.disableFullscreen()
- this.$store.dispatch('setIsFullscreen', false)
- } else {
- this.enableFullscreen()
- this.$store.dispatch('setIsFullscreen', true)
- }
- },
-
- enableFullscreen() {
- const fullscreenElem = document.getElementById('content-vue')
-
- if (fullscreenElem.requestFullscreen) {
- fullscreenElem.requestFullscreen()
- } else if (fullscreenElem.webkitRequestFullscreen) {
- fullscreenElem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)
- } else if (fullscreenElem.mozRequestFullScreen) {
- fullscreenElem.mozRequestFullScreen()
- } else if (fullscreenElem.msRequestFullscreen) {
- fullscreenElem.msRequestFullscreen()
- }
- },
-
- disableFullscreen() {
- if (document.exitFullscreen) {
- document.exitFullscreen()
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen()
- } else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen()
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen()
- }
- },
-
- async handleCopyLink() {
- try {
- await navigator.clipboard.writeText(this.linkToConversation)
- showSuccess(t('spreed', 'Conversation link copied to clipboard'))
- } catch (error) {
- showError(t('spreed', 'The link could not be copied'))
- }
- },
- handleRenameConversation() {
- this.$store.dispatch('isRenamingConversation', true)
- this.$store.dispatch('showSidebar')
- },
- forceMuteOthers() {
- callParticipantCollection.callParticipantModels.forEach(callParticipantModel => {
- callParticipantModel.forceMute()
- })
- },
-
openConversationSettings() {
emit('show-conversation-settings', { token: this.token })
},
@@ -561,14 +383,6 @@ export default {
right: 4px;
pointer-events: none;
}
-
- &__separator {
- top: 4px;
- border-left: 1px solid white;
- height: 36px;
- margin: auto 6px;
- opacity: 0.5;
- }
}
.conversation-icon {
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-21 03:13:12 +0300