fix(xgplayer): fix ipad treated as PC problem; fix ios fullscreen beh…

…avior
bytedance · Oct 24, 2018 · e9234ac · e9234ac
1 parent d1ba2d1
commit e9234ac
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 46 deletions.
diff --git a/packages/xgplayer/browser/index.js b/packages/xgplayer/browser/index.js
diff --git a/packages/xgplayer/dist/index.js b/packages/xgplayer/dist/index.js
diff --git a/packages/xgplayer/package.json b/packages/xgplayer/package.json
@@ -1,6 +1,6 @@
 {
  "name": "xgplayer",
- "version": "1.1.3-beta-6",
+ "version": "1.1.3-beta-7",
  "description": "video player",
  "main": "./dist/index.js",
  "scripts": {

diff --git a/packages/xgplayer/src/control/fullscreen.js b/packages/xgplayer/src/control/fullscreen.js
@@ -10,47 +10,41 @@ let fullscreen = function () {
  let btn = util.createDom('xg-fullscreen', `<xg-icon class="xgplayer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
  <path transform="scale(${scale} ${scale})" d="${iconPath.default}"></path>
  </svg></xg-icon>`, {}, 'xgplayer-fullscreen')
- let tipsFull = player.config.lang && player.config.lang === "zh-cn" ? "全屏" : "Full screen"
- let tipsExitFull = player.config.lang && player.config.lang === "zh-cn" ? "退出全屏" : "Exit full screen"
+ let tipsFull = player.config.lang && player.config.lang === 'zh-cn' ? '全屏' : 'Full screen'
+ let tipsExitFull = player.config.lang && player.config.lang === 'zh-cn' ? '退出全屏' : 'Exit full screen'
  let root = player.controls; let container = player.root
  let tips = util.createDom('xg-tips', tipsFull, {}, 'xgplayer-tips')
  let path = btn.querySelector('path')
  btn.appendChild(tips)
  let getFullscreen = function (el) {
- let fullscreeSupport = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled
  path.setAttribute('d', iconPath.active)
  tips.textContent = tipsExitFull
- if (fullscreeSupport) {
- if (el.requestFullscreen) {
- el.requestFullscreen()
- } else if (el.mozRequestFullScreen) {
- el.mozRequestFullScreen()
- } else if (el.webkitRequestFullScreen) {
- el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
- } else if (el.msRequestFullscreen) {
- el.msRequestFullscreen()
- } else {
- util.addClass(el, 'xgplayer-fullscreen-active')
- }
+ if (el.requestFullscreen) {
+ el.requestFullscreen()
+ } else if (el.mozRequestFullScreen) {
+ el.mozRequestFullScreen()
+ } else if (el.webkitRequestFullscreen) {
+ el.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)
+ } else if (player.video.webkitSupportsFullscreen) {
+ player.video.webkitEnterFullscreen()
+ } else if (el.msRequestFullscreen) {
+ el.msRequestFullscreen()
  } else {
  util.addClass(el, 'xgplayer-fullscreen-active')
  }
  player.emit('requestFullscreen')
  }
  let exitFullscreen = function (el) {
- let fullscreeSupport = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled
  path.setAttribute('d', iconPath.default)
  tips.textContent = tipsFull
- if (fullscreeSupport) {
- if (document.exitFullscreen) {
- document.exitFullscreen()
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen()
- } else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen()
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen()
- }
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen()
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen()
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen()
  } else {
  util.removeClass(el, 'xgplayer-fullscreen-active')
  }
@@ -68,6 +62,10 @@ let fullscreen = function () {
  }
  })
  })
+ player.video.addEventListener('webkitendfullscreen', () => {
+ player.emit('exitFullscreen')
+ path.setAttribute('d', iconPath.default)
+ })
 
  let handle = function (e) {
  let fullscreenEl = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement
@@ -80,17 +78,17 @@ let fullscreen = function () {
  path.setAttribute('d', iconPath.default)
  tips.textContent = tipsFull
  }
- };
+ }
 
- btn.addEventListener('mouseenter', (e)=>{
-  e.preventDefault();
-  e.stopPropagation();
-  tips.style.left = "50%"
-  let rect = tips.getBoundingClientRect()
-  let rootRect = container.getBoundingClientRect()
-  if(rect.right > rootRect.right)  {
-  tips.style.left = `${- rect.right + rootRect.right + 16}px`
-  }
+ btn.addEventListener('mouseenter', (e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ tips.style.left = '50%'
+ let rect = tips.getBoundingClientRect()
+ let rootRect = container.getBoundingClientRect()
+ if (rect.right > rootRect.right) {
+ tips.style.left = `${-rect.right + rootRect.right + 16}px`
+ }
  });
 
  ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(item => {

diff --git a/packages/xgplayer/src/control/mobile.js b/packages/xgplayer/src/control/mobile.js
@@ -124,7 +124,11 @@ let mobile = function () {
  if (pass) {
  player.video.addEventListener('touchend', (e) => {
  e.preventDefault()
- player.emit('focus')
+ if (util.hasClass(root, 'xgplayer-inactive')) {
+ player.emit('focus')
+ } else {
+ player.emit('blur')
+ }
  }, false)
  btn.addEventListener('touchend', (e) => {
  e.preventDefault()

diff --git a/packages/xgplayer/src/utils/sniffer.js b/packages/xgplayer/src/utils/sniffer.js
@@ -1,7 +1,8 @@
 let sniffer = {
  get device () {
  let r = sniffer.os
- return r.isPc ? 'pc' : r.isTablet ? 'tablet' : 'mobile'
+ return r.isPc ? 'pc' : 'mobile'
+ // return r.isPc ? 'pc' : r.isTablet ? 'tablet' : 'mobile'
  },
  get browser () {
  let ua = navigator.userAgent.toLowerCase()
@@ -22,7 +23,7 @@ let sniffer = {
  let isFireFox = /(?:Firefox)/.test(ua)
  let isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua))
  let isPhone = /(?:iPhone)/.test(ua) && !isTablet
- let isPc = !isPhone && !isAndroid && !isSymbian
+ let isPc = !isPhone && !isAndroid && !isSymbian && !isTablet
  return {
  isTablet,
  isPhone,