diff options
| -rw-r--r-- | css/icons.scss | 3 | ||||
| -rw-r--r-- | src/components/TopBar/TopBar.vue | 74 |
2 files changed, 74 insertions, 3 deletions
diff --git a/css/icons.scss b/css/icons.scss index f777f2dcb..7188d604b 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -46,6 +46,9 @@ &.icon-menu-people { background-image: url(icon-color-path('menu-people', 'spreed', 'fff', 1)); } + &.icon-fullscreen { + background-image: url(icon-color-path('fullscreen', 'actions', 'fff', 1, true)); + } &.icon-audio { background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true)); } diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index e937919d6..8aae67a5b 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -22,8 +22,21 @@ <template> <div class="top-bar"> <CallButton /> - <Actions v-if="showOpenSidebarButton" class="top-bar__button" close-after-click="true"> - <ActionButton :icon="iconMenuPeople" @click="handleClick" /> + <Actions class="top-bar__button"> + <ActionButton + v-shortkey="['f']" + :icon="iconFullscreen" + @shortkey.native="toggleFullscreen" + @click="toggleFullscreen"> + {{ labelFullscreen }} + </ActionButton> + </Actions> + <Actions v-if="showOpenSidebarButton" + class="top-bar__button" + close-after-click="true"> + <ActionButton + :icon="iconMenuPeople" + @click="openSidebar" /> </Actions> </div> </template> @@ -49,7 +62,27 @@ export default { }, }, + data() { + return { + isFullscreen: false, + } + }, + computed: { + iconFullscreen() { + if (this.forceWhiteIcons) { + return 'forced-white icon-fullscreen' + } + return 'icon-fullscreen' + }, + + labelFullscreen() { + if (this.isFullscreen) { + return t('spreed', 'Exit fullscreen (f)') + } + return t('spreed', 'Fullscreen (f)') + }, + iconMenuPeople() { if (this.forceWhiteIcons) { return 'forced-white icon-menu-people' @@ -63,9 +96,44 @@ export default { }, methods: { - handleClick() { + openSidebar() { this.$store.dispatch('showSidebar') }, + toggleFullscreen() { + if (this.isFullscreen) { + this.disableFullscreen() + this.isFullscreen = false + } else { + this.enableFullscreen() + this.isFullscreen = true + } + }, + + enableFullscreen() { + const fullscreenElem = document.getElementById('content') + + 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() + } + }, }, } </script> |