fix(xgplayer): add enter config support in mobile

bytedance · Oct 14, 2018 · b059edc · b059edc
1 parent 9c7130d
commit b059edc
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 13 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-alpha-1",
+ "version": "1.1.3-beta",
  "description": "video player",
  "main": "./dist/index.js",
  "scripts": {

diff --git a/packages/xgplayer/src/control/mobile.js b/packages/xgplayer/src/control/mobile.js
@@ -59,23 +59,46 @@ let mobile = function () {
  root.appendChild(btn)
  root.appendChild(enter)
  let path = btn.querySelector('path')
+ let enterTips = enter.querySelector('.xgplayer-enter-tips')
  let enterLogo = new Image()
+ enterLogo.onload = () => {
+ enterTips.style.display = 'block'
+ }
+ if (player.config.enterLogo && player.config.enterLogo.url && player.config.enterLogo.width && player.config.enterLogo.height) {
+ enterLogo.src = player.config.enterLogo.url
+
+ logo.style.backgroundImage = `url("${player.config.enterLogo.url}")`
+ logo.style.width = `${player.config.enterLogo.width}px`
+ logo.style.height = `${player.config.enterLogo.height}px`
+
+ logo.style.backgroundSize = `${player.config.enterLogo.width}px ${player.config.enterLogo.height}px`
+ logo.style.margin = `-${player.config.enterLogo.height/2}px auto auto -${player.config.enterLogo.width/2}px`
+
+ enterTips.style.margin = `${player.config.enterLogo.height-6}px auto auto -62px`
+ } else {
+ enterLogo.src = util.getBgImage(logo)
+ }
+
+ if (player.config.enterTips && player.config.enterTips.background) {
+ enterTips.style.background = `${player.config.enterTips.background}`
+ }
+
+ if (player.config.enterBg) {
+ if (player.config.enterBg.url) {
+ enter.style.backgroundImage = `url("${player.config.enterBg.url}")`
+ } else if (player.config.enterBg.color) {
+ enter.style.background = player.config.enterBg.color
+ }
+ }
  let svg = new SVG({
  from: iconPath.play,
  to: iconPath.pause,
  progress: (shape, percent) => {
  path.setAttribute('d', svg.toSVGString(shape))
  }
  })
- enter.querySelector('.xgplayer-enter-tips').style.display = 'block'
  player.start()
  if (pass) {
- if (player.config.enterLogo) {
- enterLogo.src = player.config.enterLogo
- logo.style.backgroundImage = `url("${player.config.enterLogo}")`
- } else {
- enterLogo.src = util.getBgImage(logo)
- }
  player.video.addEventListener('touchstart', (e) => {
  e.preventDefault()
  player.emit('focus')

diff --git a/packages/xgplayer/src/control/pc.js b/packages/xgplayer/src/control/pc.js
@@ -65,7 +65,6 @@ let pc = function () {
  })
  player.once('playing', () => {
  util.removeClass(root, 'xgplayer-is-enter')
- player.controls.style.display = 'flex'
  })
  if (!root.querySelector('video')) {
  player.start()