Merge pull request #44 from core-player/mobile

Mobile Browser Support

Author: JackPu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-core-video-player",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "scripts": {
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build --target lib ./src/index.js",

src/App.vue

@@ -79,4 +79,11 @@ export default {
   position: relative;
   margin: 80px auto;
 }
+
+@media all and (max-width: 768px) {
+  #app .test-player-wrap {
+    width: 100%;
+    height: auto;
+  }
+}
 </style>

src/core/base.js

@@ -92,11 +92,18 @@ class BaseVideoCore {
     this.checkSource(this.config.src)
     this._autoRegisterEvents()
     this._setVideoAttr()
+    this.setContainer()
     this.setSize()
     this.emit(EVENTS.LIFECYCLE_INITED)
     this._autoplay()
   }
 
+  setContainer () {
+    if (isMobile) {
+      addClass(this.$el, 'mobile')
+    }
+  }
+
   setSize () {
     const width = this.$el.offsetWidth
     let size = ''

src/dashboard/fullscreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vue-core-video-player-control">
+  <div v-if="!disable" class="vue-core-video-player-control">
     <div v-if="!fullscreen" class="btn-control btn-fullscreen" @click="enterFullscreen">
       <svg xmlns="http://www.w3.org/2000/svg" width="28" height="20" viewBox="0 0 28 20"><g fill="#fff"><g data-name="6 7"><g data-name="4 1"><path data-name="7" d="M16 0h10v2H16z"/><path data-name="8" d="M26 0h2v6h-2z"/></g><g data-name="5 1"><path data-name="9" d="M18 18h10v2H18z"/><path data-name="10" d="M26 14h2v6h-2z"/></g></g><g data-name="6 8"><g data-name="4 1"><path data-name="7" d="M12 20H2v-2h10z"/><path data-name="8" d="M2 20H0v-6h2z"/></g><g data-name="5 1"><path data-name="9" d="M10 2H0V0h10z"/><path data-name="10" d="M2 6H0V0h2z"/></g></g></g></svg>
       <div class="tips">{{$t('dashboard.btn.fullscreen')}}</div>
@@ -14,12 +14,18 @@
 <script>
 // import EVENTS from '../constants/EVENTS'
 import coreMixins from '../mixins'
+import { isMobile, isApple } from '../helper/util'
 
 export default {
   name: 'Fullscreen',
   mixins: [coreMixins],
   props: {
     visible: Boolean
+  },
+  data () {
+    return {
+      disable: (isMobile && isApple)
+    }
   }
 }
 </script>

src/dashboard/mobile-controls.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="vcp-controls">
+    <div class="playback-control">
+      <time-span />
+    </div>
+    <div class="setting-control">
+      <picture-in-picture />
+      <settings-control />
+      <fullscreen-control />
+    </div>
+  </div>
+</template>
+
+<script>
+import TimeSpan from './time-span'
+import Fullscreen from './fullscreen'
+import Settings from './settings'
+import PictureInPicture from './picture-in-picture'
+
+export default {
+  name: 'Controls',
+  components: {
+    'time-span': TimeSpan,
+    'fullscreen-control': Fullscreen,
+    'settings-control': Settings,
+    'picture-in-picture': PictureInPicture
+  },
+  props: {
+    visible: Boolean,
+    muted: Boolean
+  }
+}
+</script>
+
+<style land="less">
+.vcp-controls {
+  z-index: 10;
+  position: absolute;
+  left: 0;
+  bottom: 5px;
+  width: 100%;
+  height: 50px;
+  text-align: left;
+}
+
+.playback-control,
+.setting-control{
+  display: flex;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}
+.playback-control {
+  left: 0;
+}
+.setting-control{
+  right: 0;
+}
+</style>

src/dashboard/mobile-dashboard.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="vcp-m-dashboard" autoplay v-show="show" ref="dashboard">
+    <MobileControls :muted="muted" />
+    <Progress />
+  </div>
+</template>
+
+<script>
+import { DEFAULT_CONFIG, EVENTS } from '../constants'
+import { isDescendant } from '../helper/dom'
+import { isMobile } from '../helper/util'
+import Progress from './progress'
+import MobileControls from './mobile-controls'
+import coreMixins from '../mixins'
+
+const pageCoor = {
+  x: null,
+  y: null
+}
+
+export default {
+  name: 'MobileDashboard',
+  components: {
+    Progress,
+    MobileControls
+  },
+  props: {
+    controls: [Boolean, String],
+    muted: Boolean
+  },
+  data () {
+    return {
+      show: true
+    }
+  },
+  mixins: [coreMixins],
+  methods: {
+    showDashboard (delay) {
+      window.clearTimeout(this._hideTimeout)
+      this.show = true
+      this.emit(EVENTS.UI_DASHBOARD_SHOW)
+      if (delay === 0) {
+        // TODO handle force show
+      } else {
+        this._hideTimeout = setTimeout(() => {
+          this.hideDashboard()
+        }, delay || DEFAULT_CONFIG.dashboardHideDelay)
+      }
+    },
+    hideDashboard () {
+      this.show = false
+      this.emit(EVENTS.UI_DASHBOARD_HIDE)
+    },
+    _initAutoMode () {
+      const $parent = this.$refs['dashboard'].parentNode
+      if (isMobile) {
+        $parent.addEventListener('touchend', this._onTouchend.bind(this), true)
+      } else {
+        $parent.addEventListener('mousemove', this._onMousemove.bind(this))
+        $parent.addEventListener('mouseleave', this._onMouseleave.bind(this))
+        $parent.addEventListener('mouseover', this._onMouseover.bind(this), true)
+      }
+      // first render delay
+      this.showDashboard(4000)
+    },
+    _onMousemove (e) {
+      if (e.pageX === pageCoor.x && e.pageY === pageCoor.y) {
+        pageCoor.x = e.pageX
+        pageCoor.y = e.pageY
+        return
+      }
+      pageCoor.x = e.pageX
+      pageCoor.y = e.pageY
+      if (isDescendant(this._el, e.target)) {
+        return this.showDashboard(0)
+      }
+      this.showDashboard()
+    },
+
+    _onMouseleave () {
+      this.showDashboard()
+    },
+    _onMouseover () {
+      this.showDashboard(0)
+    },
+    _onTouchend () {
+      this.showDashboard()
+    }
+  },
+  mounted () {
+    const { controls } = this
+    if (!controls) {
+      this.show = false
+    } else if (controls === 'fixed') {
+      this.show = true
+    } else {
+      this._initAutoMode()
+    }
+  }
+}
+</script>
+
+<style>
+.vcp-m-dashboard {
+  z-index: 11;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 59px;
+  background: linear-gradient(to top ,rgba(0,0,0, .7), rgba(0,0,0, 0));
+}
+.fullscreen .vcp-m-dashboard {
+  bottom: 12px;
+}
+.small  .vcp-m-dashboard{
+  height: 49px;
+}
+.settings-open .vcp-m-dashboard {
+  display: block !important;
+}
+.small  .vcp-m-dashboard .vcp-controls {
+  height: 40px;
+}
+</style>

src/dashboard/progress.vue

@@ -191,4 +191,19 @@ export default {
     }
   }
 }
+.vcp-m-dashboard .vcp-progress-hover {
+  bottom: 0px;
+  .vcp-progress {
+    height: 3px;
+  }
+  .vcp-progress-played{
+    .thumb-drag{
+      background-color: #ff6060;
+      &:before{
+        background-color: #ff6060;
+        opacity: 0.25;
+      }
+    }
+  }
+}
 </style>

src/dashboard/settings.vue

@@ -195,4 +195,20 @@ export default {
     }
   }
 }
+.vcp-m-dashboard .settings-control .btn-control-panel {
+  z-index: 20000;
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  .current-panel {
+    width: 100%;
+  }
+  .speed-list {
+    margin-left: 20px;
+  }
+  .resolution-list {
+    margin-left: 20px;
+  }
+}
 </style>

src/helper/dom.js

@@ -15,7 +15,7 @@ export function toggle (el, className) {
   }
 };
 
-export function swichChildClass (el, childSelector, className, tellFunc) {
+export function switchChildClass (el, childSelector, className, tellFunc) {
   const children = el.querySelectorAll(childSelector)
   for (let i = 0; i < children.length; i++) {
     const item = children[i]

src/helper/util.js

@@ -198,23 +198,23 @@ export const isMSESupported = () => {
 }
 
 export function isDebug () {
-  return localStorage.__vrplayer_core
+  return localStorage._vcpDebug
 }
 
 export function setDebug (value) {
   if (value) {
-    localStorage.__vrplayer_debug = true
+    localStorage._vcpDebug = true
   } else {
-    localStorage.__vrplayer_debug = ''
+    localStorage._vcpDebug = ''
   }
 }
 export const isNodeEnv = () => {
   return typeof localStorage !== 'object' && typeof navigator !== 'object'
 }
 
-export const isMobile = isMobileJS.any
-export const isAndroid = isMobileJS.android
-export const isApple = isMobileJS.apple && isMobileJS.apple.device
+export const isMobile = isMobileJS(ua).any
+export const isAndroid = isMobileJS(ua).android
+export const isApple = isMobileJS(ua).apple && isMobileJS(ua).apple.device
 export const isSafari = isApple && _isSafari()
 export const isTencentGroup = /MQQBrowser/i.test(ua)
 export const isUC = /ucbrowser/i.test(ua)