diff --git a/demo/demo.js b/demo/demo.js
index 35394df..c9197f9 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 0794d2f..a1f90d2 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 a167116..b04a53e 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 5f708f5..b64cfb3 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}
-
-
-
-
-
-
-
-
-
-
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
-
-
` : ''}
-
';
- for (let i = 0; i < quality.length; i++) {
- result += `
${quality[i].name}
`;
- }
- result += '
+ {{ include './video.art' video }}
+ {{ if options.logo }}
+
+
+
+ {{ /if }}
+
+
+
+
+ {{ if options.danmaku }}
+ {{ tran('Danmaku is loading') }}
+ {{ /if }}
+ {{@ icons.loading }}
+
+
+
+
+
+
+
+
+
+
+ 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 }}
+