From a16c948a2d931f0f2dd2fda904a5da27b5fedcbe Mon Sep 17 00:00:00 2001 From: DIYgod Date: Fri, 9 Feb 2018 00:02:22 +0800 Subject: [PATCH] use art-template --- demo/demo.js | 4 +- package.json | 2 + src/js/player.js | 10 +- src/js/template.js | 302 ++-------------------------------------- src/template/player.art | 262 ++++++++++++++++++++++++++++++++++ src/template/video.art | 14 ++ webpack/dev.config.js | 4 + webpack/prod.config.js | 4 + yarn.lock | 109 ++++++++++++++- 9 files changed, 418 insertions(+), 293 deletions(-) create mode 100644 src/template/player.art create mode 100644 src/template/video.art diff --git a/demo/demo.js b/demo/demo.js index 35394df34..c9197f964 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -64,9 +64,7 @@ function initPlayers () { token: 'tokendemo', maximum: 3000, user: 'DIYgod', - margin: { - bottom: '15%' - }, + bottom: '15%', unlimited: true }, contextmenu: [ diff --git a/package.json b/package.json index 0794d2f81..a1f90d258 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,8 @@ }, "homepage": "https://github.com/DIYgod/DPlayer#readme", "devDependencies": { + "art-template": "4.12.2", + "art-template-loader": "1.4.3", "autoprefixer": "^7.2.5", "babel-core": "^6.26.0", "babel-loader": "^7.1.2", diff --git a/src/js/player.js b/src/js/player.js index a1671169f..b04a53ea6 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -19,6 +19,7 @@ import Comment from './comment'; import HotKey from './hotkey'; import ContextMenu from './contextmenu'; import InfoPanel from './info-panel'; +import tplVideo from '../template/video.art'; let index = 0; const instances = []; @@ -492,7 +493,14 @@ class DPlayer { const paused = this.video.paused; this.video.pause(); - const videoHTML = this.template.tplVideo(false, null, this.options.screenshot, 'auto', this.quality.url, this.options.subtitle); + const videoHTML = tplVideo({ + current: false, + pic: null, + screenshot: this.options.screenshot, + preload: 'auto', + url: this.quality.url, + subtitle: this.options.subtitle + }); const videoEle = new DOMParser().parseFromString(videoHTML, 'text/html').body.firstChild; this.template.videoWrap.insertBefore(videoEle, this.template.videoWrap.getElementsByTagName('div')[0]); this.prevVideo = this.video; diff --git a/src/js/template.js b/src/js/template.js index 5f708f55e..b64cfb3cc 100644 --- a/src/js/template.js +++ b/src/js/template.js @@ -1,4 +1,5 @@ import Icons from './icons'; +import tplPlayer from '../template/player.art'; class Template { constructor (options) { @@ -10,7 +11,20 @@ class Template { } init () { - this.container.innerHTML = this.tpl(this.options, this.index, this.tran); + this.container.innerHTML = tplPlayer({ + options: this.options, + index: this.index, + tran: this.tran, + icons: Icons, + video: { + current: true, + pic: this.options.video.pic, + screenshot: this.options.screenshot, + preload: this.options.preload, + url: this.options.video.url, + subtitle: this.options.subtitle + } + }); this.volumeBar = this.container.querySelector('.dplayer-volume-bar-inner'); this.volumeBarWrap = this.container.querySelector('.dplayer-volume-bar'); @@ -79,292 +93,6 @@ class Template { this.infoDanmakuApi = this.container.querySelector('.dplayer-info-panel-item-danmaku-api .dplayer-info-panel-item-data'); this.infoDanmakuAmount = this.container.querySelector('.dplayer-info-panel-item-danmaku-amount .dplayer-info-panel-item-data'); } - - tpl (options, index, tran) { - return ` -
-
- ${this.tplVideo(true, options.video.pic, options.screenshot, options.preload, options.video.url, options.subtitle)} - ${options.logo ? ` - - ` : ``} -
-
-
-
-
- - ${options.danmaku ? `${tran('Danmaku is loading')}` : ``} - ${Icons.loading} -
-
-
-
-
- -
-
-
${tran('Set danmaku color')}
- - - - - - -
-
-
${tran('Set danmaku type')}
- - - -
-
- - -
-
- -
- -
-
-
- -
-
-
-
- 0:00 / 0:00 - ${options.live ? `${tran('Live')}` : ''} -
-
- ${options.video.quality ? ` -
- -
- ${this.tplQualityList(options.video.quality)} -
-
- ` : ``} - ${options.screenshot ? ` - - ${Icons.camera} - - ` : ``} -
- -
- ${options.subtitle ? ` -
- -
- ` : ``} -
- -
-
-
- ${tran('Speed')} -
- ${Icons.right} -
-
-
- ${tran('Loop')} -
- - -
-
-
- ${tran('Show danmaku')} -
- - -
-
-
- ${tran('Unlimited danmaku')} -
- - -
-
-
- ${tran('Opacity for danmaku')} -
-
-
- -
-
-
-
-
-
-
- 0.5 -
-
- 0.75 -
-
- ${tran('Normal')} -
-
- 1.25 -
-
- 1.5 -
-
- 2 -
-
-
-
-
- - -
-
-
- -
-
-
-
- -
-
-
-
-
-
[x]
-
- Player version - -
-
- Player FPS - -
-
- Video type - -
-
- Video url - -
-
- Video resolution - -
-
- Video duration - -
- ${options.danmaku ? ` -
- Danamku id - -
-
- Danamku api - -
-
- Danamku amount - -
` : ''} -
- ${this.tplContextmenuList(options.contextmenu, tran)} -
`; - } - - tplDanmakumargin (margin) { - let result = ''; - if (margin) { - for (const key in margin) { - result += `${key}:${margin[key]};`; - } - } - return result; - } - - tplContextmenuList (contextmenu, tran) { - let result = '
'; - for (let i = 0; i < contextmenu.length; i++) { - result += `
${tran(contextmenu[i].text)}
`; - } - result += '
'; - - return result; - } - - tplQualityList (quality) { - let result = '
'; - for (let i = 0; i < quality.length; i++) { - result += `
${quality[i].name}
`; - } - result += '
'; - - return result; - } - - tplVideo (current, pic, screenshot, preload, url, subtitle) { - const enableSubtitle = subtitle && subtitle.type === 'webvtt'; - return ` - `; - } } export default Template; diff --git a/src/template/player.art b/src/template/player.art new file mode 100644 index 000000000..b6ab26b2d --- /dev/null +++ b/src/template/player.art @@ -0,0 +1,262 @@ +
+
+ {{ include './video.art' video }} + {{ if options.logo }} + + {{ /if }} +
+
+
+
+
+ + {{ if options.danmaku }} + {{ tran('Danmaku is loading') }} + {{ /if }} + {{@ icons.loading }} +
+
+
+
+
+ +
+
+
{{ tran('Set danmaku color') }}
+ + + + + + +
+
+
{{ tran('Set danmaku type') }}
+ + + +
+
+ + +
+
+ +
+ +
+
+
+ +
+
+
+
+ + 0:00 / + 0:00 + + {{ if options.live }} + {{ tran('Live') }} + {{ /if }} +
+
+ {{ if options.video.quality }} +
+ +
+
+ {{ each options.video.quality }} +
{{ $value.name }}
+ {{ /each }} +
+
+
+ {{ /if }} + {{ if options.screenshot }} + + {{@ icons.camera }} + + {{ /if }} +
+ +
+ {{ if options.subtitle }} +
+ +
+ {{ /if }} +
+ +
+
+
+ {{ tran('Speed') }} +
{{@ icons.right }}
+
+
+ {{ tran('Loop') }} +
+ + +
+
+
+ {{ tran('Show danmaku') }} +
+ + +
+
+
+ {{ tran('Unlimited danmaku') }} +
+ + +
+
+
+ {{ tran('Opacity for danmaku') }} +
+
+
+ +
+
+
+
+
+
+
+ 0.5 +
+
+ 0.75 +
+
+ {{ tran('Normal') }} +
+
+ 1.25 +
+
+ 1.5 +
+
+ 2 +
+
+
+
+
+ + +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
[x]
+
+ Player version + +
+
+ Player FPS + +
+
+ Video type + +
+
+ Video url + +
+
+ Video resolution + +
+
+ Video duration + +
+ {{ if options.danmaku }} +
+ Danamku id + +
+
+ Danamku api + +
+
+ Danamku amount + +
+ {{ /if }} +
+
+ {{ each options.contextmenu }} +
+ {{ tran($value.text) }} +
+ {{ /each }} +
+
\ No newline at end of file diff --git a/src/template/video.art b/src/template/video.art new file mode 100644 index 000000000..8d00f6044 --- /dev/null +++ b/src/template/video.art @@ -0,0 +1,14 @@ +{{ set enableSubtitle = subtitle && subtitle.type === 'webvtt' }} + \ No newline at end of file diff --git a/webpack/dev.config.js b/webpack/dev.config.js index 814374115..462fd9333 100644 --- a/webpack/dev.config.js +++ b/webpack/dev.config.js @@ -79,6 +79,10 @@ module.exports = { { test: /\.svg$/, loader: 'svg-inline-loader' + }, + { + test: /\.art$/, + loader: 'art-template-loader' } ] }, diff --git a/webpack/prod.config.js b/webpack/prod.config.js index 7d12ffeea..77fbdf348 100644 --- a/webpack/prod.config.js +++ b/webpack/prod.config.js @@ -87,6 +87,10 @@ module.exports = { { test: /\.svg$/, loader: 'svg-inline-loader' + }, + { + test: /\.art$/, + loader: 'art-template-loader' } ] }, diff --git a/yarn.lock b/yarn.lock index 3aa0ccd93..f37e3c20b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -189,6 +189,26 @@ arrify@^1.0.0: version "1.0.1" resolved "http://registry.npm.taobao.org/arrify/download/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" +art-template-loader@1.4.3: + version "1.4.3" + resolved "https://registry.npmjs.org/art-template-loader/-/art-template-loader-1.4.3.tgz#0c22565fe2f6cee37ff7dedfffbf8b53e0fba02e" + dependencies: + loader-utils "^1.1.0" + +art-template@4.12.2: + version "4.12.2" + resolved "http://registry.npm.bilibili.co/art-template/download/art-template-4.12.2.tgz#a41eb82d9679bbd1c73f1f838ff46e8eb0612565" + dependencies: + acorn "^5.0.3" + detect-node "^2.0.3" + escodegen "^1.8.1" + estraverse "^4.2.0" + html-minifier "^3.4.3" + is-keyword-js "^1.0.3" + js-tokens "^3.0.1" + merge-source-map "^1.0.3" + source-map "^0.5.6" + asn1.js@^4.0.0: version "4.9.2" resolved "http://registry.npm.taobao.org/asn1.js/download/asn1.js-4.9.2.tgz#8117ef4f7ed87cd8f89044b5bff97ac243a16c9a" @@ -1005,6 +1025,13 @@ callsites@^0.2.0: version "0.2.0" resolved "http://registry.npm.taobao.org/callsites/download/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca" +camel-case@3.0.x: + version "3.0.0" + resolved "http://registry.npm.bilibili.co/camel-case/download/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73" + dependencies: + no-case "^2.2.0" + upper-case "^1.1.1" + camelcase-keys@^2.0.0: version "2.1.0" resolved "http://registry.npm.taobao.org/camelcase-keys/download/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7" @@ -1144,6 +1171,12 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +clean-css@4.1.x: + version "4.1.9" + resolved "http://registry.npm.bilibili.co/clean-css/download/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301" + dependencies: + source-map "0.5.x" + cli-cursor@^2.1.0: version "2.1.0" resolved "http://registry.npm.taobao.org/cli-cursor/download/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5" @@ -1246,10 +1279,14 @@ combined-stream@^1.0.5, combined-stream@~1.0.5: dependencies: delayed-stream "~1.0.0" -commander@^2.9.0: +commander@2.12.x, commander@^2.9.0: version "2.12.2" resolved "http://registry.npm.taobao.org/commander/download/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555" +commander@~2.13.0: + version "2.13.0" + resolved "http://registry.npm.bilibili.co/commander/download/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c" + commondir@^1.0.1: version "1.0.1" resolved "http://registry.npm.taobao.org/commondir/download/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" @@ -2585,6 +2622,10 @@ hawk@~6.0.2: hoek "4.x.x" sntp "2.x.x" +he@1.1.x: + version "1.1.1" + resolved "http://registry.npm.bilibili.co/he/download/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" + hmac-drbg@^1.0.0: version "1.0.1" resolved "http://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -2629,6 +2670,19 @@ html-entities@^1.2.0: version "1.2.1" resolved "http://registry.npm.taobao.org/html-entities/download/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f" +html-minifier@^3.4.3: + version "3.5.8" + resolved "http://registry.npm.bilibili.co/html-minifier/download/html-minifier-3.5.8.tgz#5ccdb1f73a0d654e6090147511f6e6b2ee312700" + dependencies: + camel-case "3.0.x" + clean-css "4.1.x" + commander "2.12.x" + he "1.1.x" + ncname "1.0.x" + param-case "2.1.x" + relateurl "0.2.x" + uglify-js "3.3.x" + http-deceiver@^1.2.7: version "1.2.7" resolved "http://registry.npm.taobao.org/http-deceiver/download/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87" @@ -2937,6 +2991,10 @@ is-glob@^4.0.0: dependencies: is-extglob "^2.1.1" +is-keyword-js@^1.0.3: + version "1.0.3" + resolved "http://registry.npm.bilibili.co/is-keyword-js/download/is-keyword-js-1.0.3.tgz#ac30dcf35b671f4b27b17f5cb57235126021132d" + is-my-json-valid@^2.12.4: version "2.16.1" resolved "http://registry.npm.taobao.org/is-my-json-valid/download/is-my-json-valid-2.16.1.tgz#5a846777e2c2620d1e69104e5d3a03b1f6088f11" @@ -3074,7 +3132,7 @@ js-base64@^2.1.8, js-base64@^2.1.9: version "2.4.0" resolved "http://registry.npm.taobao.org/js-base64/download/js-base64-2.4.0.tgz#9e566fee624751a1d720c966cd6226d29d4025aa" -js-tokens@^3.0.0, js-tokens@^3.0.2: +js-tokens@^3.0.0, js-tokens@^3.0.1, js-tokens@^3.0.2: version "3.0.2" resolved "http://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" @@ -3319,6 +3377,10 @@ loud-rejection@^1.0.0: currently-unhandled "^0.4.1" signal-exit "^3.0.0" +lower-case@^1.1.1: + version "1.1.4" + resolved "http://registry.npm.bilibili.co/lower-case/download/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac" + lru-cache@^4.0.1: version "4.1.1" resolved "http://registry.npm.taobao.org/lru-cache/download/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55" @@ -3397,6 +3459,12 @@ merge-descriptors@1.0.1: version "1.0.1" resolved "http://registry.npm.taobao.org/merge-descriptors/download/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" +merge-source-map@^1.0.3: + version "1.1.0" + resolved "http://registry.npm.bilibili.co/merge-source-map/download/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646" + dependencies: + source-map "^0.6.1" + methods@~1.1.2: version "1.1.2" resolved "http://registry.npm.taobao.org/methods/download/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" @@ -3555,10 +3623,22 @@ natural-compare@^1.4.0: version "1.4.0" resolved "http://registry.npm.taobao.org/natural-compare/download/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" +ncname@1.0.x: + version "1.0.0" + resolved "http://registry.npm.bilibili.co/ncname/download/ncname-1.0.0.tgz#5b57ad18b1ca092864ef62b0b1ed8194f383b71c" + dependencies: + xml-char-classes "^1.0.0" + negotiator@0.6.1: version "0.6.1" resolved "http://registry.npm.taobao.org/negotiator/download/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9" +no-case@^2.2.0: + version "2.3.2" + resolved "http://registry.npm.bilibili.co/no-case/download/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac" + dependencies: + lower-case "^1.1.1" + node-forge@0.6.33: version "0.6.33" resolved "http://registry.npm.taobao.org/node-forge/download/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc" @@ -3860,6 +3940,12 @@ pako@~1.0.5: version "1.0.6" resolved "http://registry.npm.taobao.org/pako/download/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258" +param-case@2.1.x: + version "2.1.1" + resolved "http://registry.npm.bilibili.co/param-case/download/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247" + dependencies: + no-case "^2.2.0" + parse-asn1@^5.0.0: version "5.1.0" resolved "http://registry.npm.taobao.org/parse-asn1/download/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712" @@ -4563,6 +4649,10 @@ regjsparser@^0.1.4: dependencies: jsesc "~0.5.0" +relateurl@0.2.x: + version "0.2.7" + resolved "http://registry.npm.bilibili.co/relateurl/download/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" + remove-trailing-separator@^1.0.1: version "1.1.0" resolved "http://registry.npm.taobao.org/remove-trailing-separator/download/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef" @@ -5414,6 +5504,13 @@ typedarray@^0.0.6: version "0.0.6" resolved "http://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" +uglify-js@3.3.x: + version "3.3.9" + resolved "http://registry.npm.bilibili.co/uglify-js/download/uglify-js-3.3.9.tgz#33869666c8ab7f7658ce3d22f0f1ced40097d33a" + dependencies: + commander "~2.13.0" + source-map "~0.6.1" + uglify-js@^2.8.29: version "2.8.29" resolved "http://registry.npm.taobao.org/uglify-js/download/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd" @@ -5473,6 +5570,10 @@ unset-value@^1.0.0: has-value "^0.3.1" isobject "^3.0.0" +upper-case@^1.1.1: + version "1.1.3" + resolved "http://registry.npm.bilibili.co/upper-case/download/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598" + urix@^0.1.0: version "0.1.0" resolved "http://registry.npm.taobao.org/urix/download/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72" @@ -5719,6 +5820,10 @@ write@^0.2.1: dependencies: mkdirp "^0.5.1" +xml-char-classes@^1.0.0: + version "1.0.0" + resolved "http://registry.npm.bilibili.co/xml-char-classes/download/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d" + xtend@^4.0.0: version "4.0.1" resolved "http://registry.npm.taobao.org/xtend/download/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"