Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[stable30] fix: migrate fullscreen store and related functions/listeners to composable #13387

Merged
merged 2 commits into from
Sep 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.

Loading