Skip to content

Commit

Permalink
Merge pull request #13387 from nextcloud/backport/13311/stable30
Browse files Browse the repository at this point in the history
  • Loading branch information
Antreesy authored Sep 25, 2024
2 parents bc303c5 + a8c7e58 commit ccc583b
Show file tree
Hide file tree
Showing 8 changed files with 90 additions and 96 deletions.
15 changes: 0 additions & 15 deletions src/components/TopBar/TopBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -328,17 +328,9 @@ export default {
mounted() {
document.body.classList.add('has-topbar')
document.addEventListener('fullscreenchange', this.fullScreenChanged, false)
document.addEventListener('mozfullscreenchange', this.fullScreenChanged, false)
document.addEventListener('MSFullscreenChange', this.fullScreenChanged, false)
document.addEventListener('webkitfullscreenchange', this.fullScreenChanged, false)
},
beforeDestroy() {
document.removeEventListener('fullscreenchange', this.fullScreenChanged, false)
document.removeEventListener('mozfullscreenchange', this.fullScreenChanged, false)
document.removeEventListener('MSFullscreenChange', this.fullScreenChanged, false)
document.removeEventListener('webkitfullscreenchange', this.fullScreenChanged, false)
document.body.classList.remove('has-topbar')
},
Expand All @@ -349,13 +341,6 @@ export default {
this.sidebarStore.showSidebar({ activeTab })
},
fullScreenChanged() {
this.$store.dispatch(
'setIsFullscreen',
document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement
)
},
openConversationSettings() {
emit('show-conversation-settings', { token: this.token })
},
Expand Down
42 changes: 8 additions & 34 deletions src/components/TopBar/TopBarMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,11 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
import TransitionExpand from '../MediaSettings/TransitionExpand.vue'
import {
useDocumentFullscreen,
enableFullscreen,
disableFullscreen,
} from '../../composables/useDocumentFullscreen.ts'
import { useIsInCall } from '../../composables/useIsInCall.js'
import { CALL, CONVERSATION, PARTICIPANT } from '../../constants.js'
import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
Expand Down Expand Up @@ -251,6 +256,7 @@ export default {
setup() {
return {
isInCall: useIsInCall(),
isFullscreen: useDocumentFullscreen(),
breakoutRoomsStore: useBreakoutRoomsStore(),
}
},
Expand All @@ -269,10 +275,6 @@ export default {
return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
},
isFullscreen() {
return this.$store.getters.isFullscreen()
},
labelFullscreen() {
return this.isFullscreen
? t('spreed', 'Exit full screen (F)')
Expand Down Expand Up @@ -435,38 +437,10 @@ export default {
}
if (this.isFullscreen) {
this.disableFullscreen()
this.$store.dispatch('setIsFullscreen', false)
disableFullscreen()
} else {
this.enableFullscreen()
emit('toggle-navigation', { open: false })
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()
enableFullscreen()
}
},
Expand Down
63 changes: 63 additions & 0 deletions src/composables/useDocumentFullscreen.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/*
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

import { createSharedComposable } from '@vueuse/core'
import { readonly, ref, onBeforeMount, onBeforeUnmount } from 'vue'
import type { Ref, DeepReadonly } from 'vue'

/**
* Composable to check whether the page is displayed at fullscreen
* @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the page is displayed at fullscreen
*/
function useDocumentFullscreenComposable() {
const isFullscreen = ref<boolean>(document.fullscreenElement !== null)

const changeIsFullscreen = () => {
isFullscreen.value = document.fullscreenElement !== null
}

document.addEventListener('fullscreenchange', changeIsFullscreen)
document.addEventListener('webkitfullscreenchange', changeIsFullscreen)

onBeforeUnmount(() => {
document.removeEventListener('fullscreenchange', changeIsFullscreen)
document.removeEventListener('webkitfullscreenchange', changeIsFullscreen)
})

return readonly(isFullscreen)
}

/**
* Enable a fullscreen with Fullscreen API
*/
export async function enableFullscreen() {
const element = document.getElementById('content-vue')
if (!element) {
return
}

if (element.requestFullscreen) {
await element.requestFullscreen()
} else if (element.webkitRequestFullscreen) {
await element.webkitRequestFullscreen()
}
}

/**
* Disable a fullscreen
*/
export async function disableFullscreen() {
if (document.exitFullscreen) {
await document.exitFullscreen()
} else if (document.webkitExitFullscreen) {
await document.webkitExitFullscreen()
}
}

/**
* Shared composable to check whether the page is displayed at fullscreen
* @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the page is displayed at fullscreen
*/
export const useDocumentFullscreen = createSharedComposable(useDocumentFullscreenComposable)
7 changes: 4 additions & 3 deletions src/composables/useViewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

import { computed, nextTick, ref, watch } from 'vue'
import { nextTick, ref, watch } from 'vue'

import { useDocumentFullscreen } from './useDocumentFullscreen.ts'
import { useIsInCall } from './useIsInCall.js'
import { useStore } from './useStore.js'
import { useSidebarStore } from '../stores/sidebar.js'
Expand Down Expand Up @@ -74,7 +75,7 @@ function reparentViewer(isFullscreen) {

if (isFullscreen) {
// When changed to the fullscreen mode, Viewer should be moved to the talk app
document.getElementById('content-vue').appendChild(viewerElement)
document.getElementById('content-vue')?.appendChild(viewerElement)
} else {
// In normal mode if it was in fullscreen before, move back to body
// Otherwise it will be overlapped by web-page's header
Expand All @@ -98,7 +99,7 @@ const isViewerOpen = ref(false)
export function useViewer(fileAPI) {
const store = useStore()
const isInCall = useIsInCall()
const isFullscreen = computed(() => store.getters.isFullscreen())
const isFullscreen = useDocumentFullscreen()
const sidebarStore = useSidebarStore()

watch(isFullscreen, () => {
Expand Down
11 changes: 11 additions & 0 deletions src/env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,18 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

type ExitFullscreen = typeof document.exitFullscreen
type RequestFullscreen = typeof document.documentElement.requestFullscreen

declare global {
interface Document {
webkitExitFullscreen: ExitFullscreen;
}

interface HTMLElement {
webkitRequestFullscreen: RequestFullscreen;
}

// @nextcloud/webpack-vue-config build globals
const appName: string
const appVersion: string
Expand Down
2 changes: 0 additions & 2 deletions src/store/storeConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import participantsStore from './participantsStore.js'
import soundsStore from './soundsStore.js'
import tokenStore from './tokenStore.js'
import uiModeStore from './uiModeStore.js'
import windowVisibilityStore from './windowVisibilityStore.js'

export default {
modules: {
Expand All @@ -27,7 +26,6 @@ export default {
soundsStore,
tokenStore,
uiModeStore,
windowVisibilityStore,
},

mutations: {},
Expand Down
5 changes: 4 additions & 1 deletion src/store/uiModeStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

import { useDocumentFullscreen } from '../composables/useDocumentFullscreen.ts'

/**
* This store handles the values that need to be customized depending on the
* current UI mode of Talk (main UI, embedded in Files sidebar, video
Expand All @@ -15,7 +17,8 @@ const state = {

const getters = {
getMainContainerSelector: (state, getters, rootState, rootGetters) => () => {
return rootGetters.isFullscreen() ? state.mainContainerSelector : 'body'
const isFullscreen = useDocumentFullscreen()
return isFullscreen.value ? state.mainContainerSelector : 'body'
},
}

Expand Down
41 changes: 0 additions & 41 deletions src/store/windowVisibilityStore.js

This file was deleted.

0 comments on commit ccc583b

Please sign in to comment.