Skip to content

Commit

Permalink
feat(AppFullscreen): (backport from Qv2) toggle fullscreen even if th…
Browse files Browse the repository at this point in the history 
…ere is already a fullscreen el; get active element and fullscreen status on fullscreenchange event (#11620)
  • Loading branch information
@pdanpdan
pdanpdan authored Dec 10, 2021
1 parent 363c24b commit 17a8217
Show file tree
Hide file tree
Showing 6 changed files with 233 additions and 59 deletions.
183 changes: 171 additions & 12 deletions ui/dev/src/pages/other/app-fullscreen-portals.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="bg-yellow-4 q-pa-md">
<div class="bg-yellow-4 q-pa-md column q-gutter-y-md items-center">
<q-card flat class="bg-grey-2" ref="fullscreen">
<q-card-section class="text-center q-pt-xl">
<q-btn
Expand Down Expand Up @@ -33,6 +33,17 @@
</h4>
</div>

<q-btn dense class="q-mx-md" icon="event" round color="primary">
<q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="proxyDate">
<div class="row items-center justify-end q-gutter-sm">
<q-btn label="Cancel" color="primary" flat v-close-popup />
<q-btn label="OK" color="primary" flat @click="save" v-close-popup />
</div>
</q-date>
</q-popup-proxy>
</q-btn>

<q-btn-dropdown no-caps color="primary" class="q-mt-sm" label="Btn dropdown">
<q-list dense>
<q-item clickable v-close-popup class="text-caption text-weight-bold">
Expand Down Expand Up @@ -131,11 +142,33 @@
color="primary"
@click="fullscreenNone"
/>

<q-btn dense class="q-mx-md" icon="event" round color="primary">
<q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="proxyDate">
<div class="row items-center justify-end q-gutter-sm">
<q-btn label="Cancel" color="primary" flat v-close-popup />
<q-btn label="OK" color="primary" flat @click="save" v-close-popup />
</div>
</q-date>
</q-popup-proxy>
</q-btn>
</q-card-section>

<q-card-section ref="fullscreenInside1" class="bg-orange-2 q-pa-md">
Fullscreen inside modal dialog
<span class="text-italic">Hover here for tooltip <q-tooltip>Some tooltip</q-tooltip></span>

<q-btn dense class="q-mx-md" icon="event" round color="primary">
<q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="proxyDate">
<div class="row items-center justify-end q-gutter-sm">
<q-btn label="Cancel" color="primary" flat v-close-popup />
<q-btn label="OK" color="primary" flat @click="save" v-close-popup />
</div>
</q-date>
</q-popup-proxy>
</q-btn>
</q-card-section>
</q-card>
</q-dialog>
Expand Down Expand Up @@ -170,6 +203,17 @@
color="primary"
@click="fullscreenNone"
/>

<q-btn dense class="q-mx-md" icon="event" round color="primary">
<q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="proxyDate">
<div class="row items-center justify-end q-gutter-sm">
<q-btn label="Cancel" color="primary" flat v-close-popup />
<q-btn label="OK" color="primary" flat @click="save" v-close-popup />
</div>
</q-date>
</q-popup-proxy>
</q-btn>
</q-card-section>

<q-card-section ref="fullscreenInside2" class="bg-blue-2 q-pa-md">
Expand Down Expand Up @@ -209,6 +253,17 @@
color="primary"
@click="fullscreenNone"
/>

<q-btn dense class="q-mx-md" icon="event" round color="primary">
<q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="proxyDate">
<div class="row items-center justify-end q-gutter-sm">
<q-btn label="Cancel" color="primary" flat v-close-popup />
<q-btn label="OK" color="primary" flat @click="save" v-close-popup />
</div>
</q-date>
</q-popup-proxy>
</q-btn>
</q-card-section>

<q-card-section ref="fullscreenInside4" class="bg-red-2 q-pa-md">
Expand All @@ -223,8 +278,36 @@
</q-card-section>
</q-card>

<div ref="videoParent" class="video-player flex items-center" style="max-width: 300px">
<div class="relative-position col flex">
<video
ref="videoPlayer"
class="col"
src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
playsinline
loop
@click="toggleVideoPlay"
@dblclick="toggleVideoFullscreen"
@play="videoPaused = false"
@pause="videoPaused = true"
/>

<div class="video-controls absolute-bottom">
<q-bar class="q-px-xs">
<q-btn flat stretch size="18px" padding="none" color="white" :icon="videoPaused ? 'play_arrow' : 'pause'" @click="toggleVideoPlay" />

<q-space />

<q-btn flat stretch size="18px" padding="none" color="white" icon="language" @click="showSimpleDialog" />

<q-btn flat stretch size="18px" padding="none" color="white" :icon="$q.fullscreen.activeEl === $refs.videoParent ? 'fullscreen_exit' : 'fullscreen'" @click="toggleVideoFullscreen" />
</q-bar>
</div>
</div>
</div>

<video
style="width: 300px"
style="width: 300px;"
src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
controls
playsinline
Expand Down Expand Up @@ -261,46 +344,90 @@
color="primary"
@click="fullscreenNone"
/>

<q-btn dense class="q-mx-md" icon="event" round color="primary">
<q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="proxyDate">
<div class="row items-center justify-end q-gutter-sm">
<q-btn label="Cancel" color="primary" flat v-close-popup />
<q-btn label="OK" color="primary" flat @click="save" v-close-popup />
</div>
</q-date>
</q-popup-proxy>
</q-btn>
</q-card-section>

<q-card-section ref="fullscreenInside3" class="bg-green-2 q-pa-md">
Fullscreen inside seamless dialog (outside fullscreen el)
<span class="text-italic">Hover here for tooltip <q-tooltip>Some tooltip</q-tooltip></span>

<q-btn dense class="q-mx-md" icon="event" round color="primary">
<q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="proxyDate">
<div class="row items-center justify-end q-gutter-sm">
<q-btn label="Cancel" color="primary" flat v-close-popup />
<q-btn label="OK" color="primary" flat @click="save" v-close-popup />
</div>
</q-date>
</q-popup-proxy>
</q-btn>
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>

<style lang="sass" scoped>
.video-player
.video-controls
overflow: hidden
video
max-width: 100%
max-height: 100%
.q-bar
transform: translateY(100%)
transition: transform .3s ease-in-out 2s
&:hover
.q-bar
transform: translateY(0)
transition: transform .3s ease-in-out
&:fullscreen
overflow: hidden
</style>

<script>
export default {
data () {
return {
model: null,
options: ['Option 1', 'Option 2', 'Option 3'],
date: '2019/03/01',
proxyDate: '2019/03/01',
dialog1: false,
dialog2: false,
dialog3: false,
dialog4: false
dialog4: false,
videoPaused: true
}
},
methods: {
fullscreenEl (el = this.$refs.fullscreen.$el) {
this.$q.fullscreen
.exit()
.request(el)
.catch(() => {})
.then(() => {
setTimeout(() => {
this.$q.fullscreen
.request(el)
.catch(() => {})
})
})
},
fullscreenNone () {
this.$q.fullscreen.exit()
this.$q.fullscreen
.exit()
.catch(() => {})
},
showSimpleDialog () {
Expand Down Expand Up @@ -350,7 +477,39 @@ export default {
this.fullscreenNone()
}
})
},
updateProxy () {
this.proxyDate = this.date
},
save () {
this.date = this.proxyDate
},
toggleVideoPlay () {
this.$refs.videoPlayer[this.videoPaused ? 'play' : 'pause']()
},
toggleVideoFullscreen () {
if (this.$q.fullscreen.activeEl === this.$refs.videoParent) {
this.fullscreenNone()
}
else {
this.fullscreenEl(this.$refs.videoParent)
}
}
},
mounted () {
this.notifyHide = this.$q.notify({
message: 'Test notification',
timeout: 0
})
},
beforeDestroy () {
this.notifyHide !== void 0 && this.notifyHide()
}
}
</script>
11 changes: 6 additions & 5 deletions ui/dev/src/pages/other/app-fullscreen.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@
</p>

<div>Is fullscreen: {{ $q.fullscreen.isActive }}</div>
<div v-if="$q.fullscreen.isActive">
Fullscreen el: {{ $q.fullscreen.activeEl.tagName }} - {{ $q.fullscreen.activeEl.className }}
</div>

<p>
<q-btn
Expand Down Expand Up @@ -48,18 +51,16 @@ import { AppFullscreen } from 'quasar'
export default {
watch: {
'$q.fullscreen.activeEl' (val) {
console.log(val)
'$q.fullscreen.activeEl' (activeEl) {
console.log('watch', { isActive: this.$q.fullscreen.isActive, activeEl })
}
},
methods: {
toggleFullscreen () {
AppFullscreen.toggle()
.then(() => {
setTimeout(() => {
console.log(AppFullscreen.isActive)
}, 1000)
console.log('toggle', { isActive: AppFullscreen.isActive, activeEl: AppFullscreen.activeEl })
})
.catch(err => {
console.error(err)
Expand Down
16 changes: 6 additions & 10 deletions ui/src/mixins/portal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Vue from 'vue'
import { isSSR } from '../plugins/Platform.js'
import { getBodyFullscreenElement } from '../utils/dom.js'
import { addFocusWaitFlag, removeFocusWaitFlag } from '../utils/focus-manager.js'
import debounce from '../utils/debounce.js'

export function closePortalMenus (vm, evt) {
do {
Expand Down Expand Up @@ -88,15 +89,12 @@ const Portal = {
addFocusWaitFlag(this.focusObj)

if (this.$q.fullscreen !== void 0 && this.$q.fullscreen.isCapable === true) {
const append = isFullscreen => {
const append = () => {
if (this.__portal === void 0) {
return
}

const newParent = getBodyFullscreenElement(
isFullscreen,
this.$q.fullscreen.activeEl
)
const newParent = getBodyFullscreenElement(this.$q.fullscreen.activeEl)

if (
this.__portal.$el.parentElement !== newParent &&
Expand All @@ -106,12 +104,10 @@ const Portal = {
}
}

this.unwatchFullscreen = this.$watch('$q.fullscreen.isActive', append)
this.unwatchFullscreen = this.$watch('$q.fullscreen.activeEl', debounce(append, 50))

const isActive = this.$q.fullscreen.isActive

if (this.__onGlobalDialog === false || isActive === true) {
append(isActive)
if (this.__onGlobalDialog === false || this.$q.fullscreen.isActive === true) {
append()
}
}
else if (this.__portal !== void 0 && this.__onGlobalDialog === false) {
Expand Down
Loading

0 comments on commit 17a8217

Please sign in to comment.