diff --git a/packages/artplayer/src/player/pipMix.js b/packages/artplayer/src/player/pipMix.js index 67ba4fd5b..563c2a8cc 100644 --- a/packages/artplayer/src/player/pipMix.js +++ b/packages/artplayer/src/player/pipMix.js @@ -4,6 +4,7 @@ function nativePip(art, player) { const { template: { $video }, events: { proxy }, + notice, } = art; $video.disablePictureInPicture = false; @@ -15,10 +16,12 @@ function nativePip(art, player) { set(value) { if (value) { $video.requestPictureInPicture().catch(error => { + notice.show(error); throw error; }); } else { document.exitPictureInPicture().catch(error => { + notice.show(error); throw error; }); } @@ -75,6 +78,7 @@ function customPip(art, player) { let lastPageY = 0; let lastPlayerLeft = 0; let lastPlayerTop = 0; + proxy($pipHeader, 'mousedown', event => { isDroging = true; lastPageX = event.pageX; @@ -103,7 +107,8 @@ function customPip(art, player) { }); append($pipTitle, option.title || i18n.get('Mini player')); - Object.defineProperty(player, 'pip', { + + const property = { get() { return $player.classList.contains('artplayer-pip'); }, @@ -133,14 +138,16 @@ function customPip(art, player) { art.emit('pipExit'); } }, - }); + }; + + Object.defineProperty(player, 'pip', property); } export default function pipMix(art, player) { const { $video } = art.template; if (document.pictureInPictureEnabled) { nativePip(art, player); - } else if ($video.webkitSupportsPresentationMode && typeof $video.webkitSetPresentationMode === 'function') { + } else if ($video.webkitSupportsPresentationMode) { webkitPip(art, player); } else { customPip(art, player); diff --git a/packages/artplayer/src/plugins/autoPip.js b/packages/artplayer/src/plugins/autoPip.js index f1026faed..03452eeab 100644 --- a/packages/artplayer/src/plugins/autoPip.js +++ b/packages/artplayer/src/plugins/autoPip.js @@ -2,9 +2,10 @@ import { debounce } from '../utils'; export default function autoPip(art) { const { events, player, template } = art; + const scrollDebounce = debounce(() => { const { top, height } = template.$player.getBoundingClientRect(); - if (top + height <= 0 && !player.pip && player.playing) { + if (top + height <= 0 && !player.pip) { player.pip = true; art.emit('artplayerPluginAutoPip', true); } else if (player.pip) { @@ -12,6 +13,7 @@ export default function autoPip(art) { art.emit('artplayerPluginAutoPip', false); } }, 300); + events.proxy(window, 'scroll', scrollDebounce); return {