feat: add music-plugin

xgplayer support music with xgplayer-music

packages/xgplayer-music/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+yarn-error.log

packages/xgplayer-music/package.json

@@ -0,0 +1,51 @@
+{
+ "name": "xgplayer-music",
+ "version": "1.0.7",
+ "description": "xgplayer plugin for music",
+ "main": "./dist/index.js",
+ "scripts": {
+ "prepare": "npm run build",
+ "build": "webpack --progress --display-chunks -p",
+ "watch": "webpack --progress --display-chunks -p --watch"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git@github.com:bytedance/xgplayer.git"
+ },
+ "babel": {
+ "presets": [
+ "es2015"
+ ],
+ "plugins": [
+ "add-module-exports"
+ ]
+ },
+ "keywords": [
+ "mp4",
+ "fmp4",
+ "player",
+ "video"
+ ],
+ "author": "yinguohui@bytedance.com",
+ "license": "MIT",
+ "dependencies": {
+ "babel-core": "^6.26.3",
+ "babel-loader": "^7.1.4",
+ "babel-plugin-add-module-exports": "^0.2.1",
+ "deepmerge": "^2.0.1",
+ "event-emitter": "^0.3.5",
+ "hls.js": "^0.8.9",
+ "node-sass": "^4.9.2",
+ "postcss-cssnext": "^3.1.0",
+ "postcss-loader": "^3.0.0",
+ "sass-loader": "^7.1.0",
+ "webpack": "^4.11.0"
+ },
+ "peerDependency": {
+ "xgplayer": "^0.1.0"
+ },
+ "devDependencies": {
+ "babel-preset-es2015": "^6.24.1",
+ "webpack-cli": "^3.0.2"
+ }
+}

packages/xgplayer-music/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+ plugins: {
+ 'postcss-cssnext': {
+ browserslist: ['cover 99.5%']
+ }
+ }
+}

packages/xgplayer-music/src/controls/theme-default.js

@@ -0,0 +1,57 @@
+import Player from '../music'
+import './theme-default.scss'
+
+const defualtTheme = function (player) {
+ const config = player.config
+ const util = player.constructor.util
+ const controlEl = player.controls
+
+ if (!config.controls) {
+ player.root.style.display = 'none'
+ return
+ }
+ util.addClass(player.root, 'xgplayer-music-default')
+ if (!config.theme || config.theme === 'default') {
+ if (!config.width) {
+ player.config.width = '100%'
+ player.root.style.width = '100%'
+ }
+ if (!config.height) {
+ player.config.height = '50px'
+ player.root.style.height = '50px'
+ }
+ }
+ const prev = util.createDom('xg-prev', `<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(0.025 0.025)"
+ d="M600 1140v-768h128v352l320-320v704l-320-320v352zz"></path>
+ </svg></xg-icon>`, {}, 'xgplayer-prev')
+ controlEl.appendChild(prev)
+ const ev = ['click', 'touchstart']
+ ev.forEach(item => {
+ prev.addEventListener(item, function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ player.prev()
+ }, false)
+ })
+ const next = util.createDom('xg-next', `<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(0.025 0.025)"
+ d="M800 380v768h-128v-352l-320 320v-704l320 320v-352z"></path>
+ </svg></xg-icon>`, {}, 'xgplayer-next')
+ controlEl.appendChild(next)
+ ev.forEach(item => {
+ next.addEventListener(item, function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ player.next()
+ }, false)
+ })
+
+ const name = util.createDom('xg-name', `${player.config.name}`, {}, 'xgplayer-name')
+ controlEl.appendChild(name)
+
+ const poster = util.createDom('xg-poster', `<img src="${player.config.poster}">`, {}, 'xgplayer-poster')
+ controlEl.appendChild(poster)
+}
+
+Player.install('theme-default', defualtTheme)

packages/xgplayer-music/src/controls/theme-default.scss

@@ -0,0 +1,79 @@
+.xgplayer-music{
+ .xgplayer-controls {
+ display: flex;
+ height: 50px;
+ cursor: default;
+ .xgplayer-prev {
+ order: 0;
+ cursor: pointer;
+ }
+ .xgplayer-play {
+ order: 1;
+ .xgplayer-tips {
+ display: none;
+ }
+ }
+ .xgplayer-next {
+ order: 2;
+ cursor: pointer;
+ }
+ .xgplayer-poster {
+ position: static;
+ order: 3;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ vertical-align: middle;
+ position: relative;
+ top: 50%;
+ margin-top: -17px;
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ }
+ }
+ .xgplayer-progress {
+ position: relative;
+ order: 4;
+ top: 70%;
+ left: 20px;
+ margin-top: -11px;
+ flex: 99;
+ >* {
+ height: 3px;
+ margin-top: 8.5px;
+ }
+ .xgplayer-progress-played:after {
+ top: -4px;
+ width: 10px;
+ height: 10px;
+ content: " ";
+ display: block;
+ }
+ .xgplayer-tips {
+ display: none !important;
+ }
+ }
+ .xgplayer-time {
+ order: 5;
+ margin-left: 30px;
+ line-height: 1;
+ position: relative;
+ top: 55%;
+ }
+ .xgplayer-placeholder {
+ order: 999;
+ width: 0;
+ }
+ .xgplayer-icon {
+ padding-top: 5px;
+ }
+ .xgplayer-name {
+ position: absolute;
+ left: 175px;
+ bottom: 50%;
+ font-size: 12px;
+ color: #ddd;
+ }
+ }
+}

packages/xgplayer-music/src/controls/theme-lyric.js

@@ -0,0 +1,10 @@
+import Player from '../music'
+import './theme-lyric.scss'
+
+const defualtTheme = function (player) {
+ if (player.config.theme === 'lyric') {
+
+ }
+}
+
+Player.install('theme-lyric', defualtTheme)

packages/xgplayer-music/src/controls/theme-lyric.scss

@@ -0,0 +1,4 @@
+@import './theme-default.scss';
+.xgplayer-music{
+ font-size: 14px;
+}

packages/xgplayer-music/src/index.js

@@ -0,0 +1,5 @@
+import Music from './music'
+import './controls/theme-default'
+import './controls/theme-lyric'
+
+export default Music

packages/xgplayer-music/src/lyric.js

@@ -0,0 +1,79 @@
+class LyricTime {
+ constructor (timeTxt) {
+ this.regRule = /(\d{2}(?=:)):(\d{2}(?=\.))\.(\d{2,3})/g
+ if (this.regRule.test(timeTxt)) {
+ this.time = RegExp.$1 * 60 + RegExp.$2 * 1 + ('0.' + RegExp.$3) * 1
+ } else {
+ this.time = -1
+ }
+ }
+}
+
+export {LyricTime}
+
+class Lyric {
+ constructor (txt, interval = 0) {
+ this.rawTxt = txt
+ this.txt = txt.replace(/^[\r\n]|[\r\n]$/g, '').match(/(\[.*\])[^[]+/g)
+ this.isDynamic = [].concat(txt.match(/\[\d{2}:\d{2}\.\d{2,3}\]/g)).length === this.txt.length && this.txt.length > 1
+ this.animateInterval = interval
+ this.list = this.txt.map((item, idx) => {
+ const reg = /(\[[\d:\S]+\])([^[]+)/g.test(item)
+ const time = RegExp.$1
+ const lyric = RegExp.$2
+ return {
+ time: reg ? new LyricTime(time).time : -1,
+ lyric,
+ idx
+ }
+ })
+ this.line = 0
+ }
+ adjust () {
+ let list = this.list
+ for (let i = 0, j, k, len = list.length; i < len; i++) {
+ for (j = i + 1; j < len; j++) {
+ if (list[j].time > list[i].time) {
+ break
+ }
+ }
+ if (j < len) {
+ let sep = (list[j].time - list[i].time) / (j - i)
+ for (k = i + 1; k < j; k++) {
+ list[k].time = list[k - 1].time + sep
+ }
+ }
+ }
+ }
+ find (curTime) {
+ const list = this.list
+ const interval = this.animateInterval
+ return list.filter(({time}, idx) => {
+ return curTime >= time && list[idx++] && curTime * 1 + interval * 1 <= list[idx++].time
+ })
+ }
+ bind (player) {
+ let self = this
+ if (self.isDynamic) {
+ self.__handle__ = (() => {
+ const f = this.find(player.currentTime)[0]
+ if (f.idx !== this.line) {
+ this.line = f.idx
+ player.emit('lyricUpdate', f)
+ }
+ }).bind(self, player)
+ player.on('timeupdate', self.__handle__)
+ return true
+ } else {
+ return false
+ }
+ }
+ unbind (player) {
+ if (this.__handle__) {
+ player.off('lybricUpdate', this.__handle__)
+ delete this.__handle__
+ }
+ }
+}
+
+export default Lyric