Skip to content

Commit a16c948

Browse files
DIYgodDIYgod
committed
use art-template
1 parent df1deb3 commit a16c948

File tree

9 files changed

+418
-293
lines changed

9 files changed

+418
-293
lines changed

‎demo/demo.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,7 @@ function initPlayers () {
6464
token: 'tokendemo',
6565
maximum: 3000,
6666
user: 'DIYgod',
67-
margin: {
68-
bottom: '15%'
69-
},
67+
bottom: '15%',
7068
unlimited: true
7169
},
7270
contextmenu: [

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
},
3131
"homepage": "https://github.com/DIYgod/DPlayer#readme",
3232
"devDependencies": {
33+
"art-template": "4.12.2",
34+
"art-template-loader": "1.4.3",
3335
"autoprefixer": "^7.2.5",
3436
"babel-core": "^6.26.0",
3537
"babel-loader": "^7.1.2",

‎src/js/player.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import Comment from './comment';
1919
import HotKey from './hotkey';
2020
import ContextMenu from './contextmenu';
2121
import InfoPanel from './info-panel';
22+
import tplVideo from '../template/video.art';
2223

2324
let index = 0;
2425
const instances = [];
@@ -492,7 +493,14 @@ class DPlayer {
492493

493494
const paused = this.video.paused;
494495
this.video.pause();
495-
const videoHTML = this.template.tplVideo(false, null, this.options.screenshot, 'auto', this.quality.url, this.options.subtitle);
496+
const videoHTML = tplVideo({
497+
current: false,
498+
pic: null,
499+
screenshot: this.options.screenshot,
500+
preload: 'auto',
501+
url: this.quality.url,
502+
subtitle: this.options.subtitle
503+
});
496504
const videoEle = new DOMParser().parseFromString(videoHTML, 'text/html').body.firstChild;
497505
this.template.videoWrap.insertBefore(videoEle, this.template.videoWrap.getElementsByTagName('div')[0]);
498506
this.prevVideo = this.video;

‎src/js/template.js‎

Lines changed: 15 additions & 287 deletions
Large diffs are not rendered by default.

‎src/template/player.art‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
<div class="dplayer-mask"></div>
2+
<div class="dplayer-video-wrap">
3+
{{ include './video.art' video }}
4+
{{ if options.logo }}
5+
<div class="dplayer-logo">
6+
<img src="{{ options.logo }}">
7+
</div>
8+
{{ /if }}
9+
<div class="dplayer-danmaku"{{ if options.danmaku && options.danmaku.bottm }} style="margin-bottom:{{ options.danmaku.bottm }}"{{ /if }}>
10+
<div class="dplayer-danmaku-item dplayer-danmaku-item--demo"></div>
11+
</div>
12+
<div class="dplayer-subtitle"></div>
13+
<div class="dplayer-bezel">
14+
<span class="dplayer-bezel-icon"></span>
15+
{{ if options.danmaku }}
16+
<span class="dplayer-danloading">{{ tran('Danmaku is loading') }}</span>
17+
{{ /if }}
18+
<span class="diplayer-loading-icon">{{@ icons.loading }}</span>
19+
</div>
20+
</div>
21+
<div class="dplayer-controller-mask"></div>
22+
<div class="dplayer-controller">
23+
<div class="dplayer-icons dplayer-comment-box">
24+
<button class="dplayer-icon dplayer-comment-setting-icon" data-balloon="{{ tran('Setting') }}" data-balloon-pos="up">
25+
<span class="dplayer-icon-content">{{@ icons.pallette }}</span>
26+
</button>
27+
<div class="dplayer-comment-setting-box">
28+
<div class="dplayer-comment-setting-color">
29+
<div class="dplayer-comment-setting-title">{{ tran('Set danmaku color') }}</div>
30+
<label>
31+
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#fff" checked>
32+
<span style="background: #fff;"></span>
33+
</label>
34+
<label>
35+
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#e54256">
36+
<span style="background: #e54256"></span>
37+
</label>
38+
<label>
39+
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#ffe133">
40+
<span style="background: #ffe133"></span>
41+
</label>
42+
<label>
43+
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#64DD17">
44+
<span style="background: #64DD17"></span>
45+
</label>
46+
<label>
47+
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#39ccff">
48+
<span style="background: #39ccff"></span>
49+
</label>
50+
<label>
51+
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#D500F9">
52+
<span style="background: #D500F9"></span>
53+
</label>
54+
</div>
55+
<div class="dplayer-comment-setting-type">
56+
<div class="dplayer-comment-setting-title">{{ tran('Set danmaku type') }}</div>
57+
<label>
58+
<input type="radio" name="dplayer-danmaku-type-{{ index }}" value="top">
59+
<span>{{ tran('Top') }}</span>
60+
</label>
61+
<label>
62+
<input type="radio" name="dplayer-danmaku-type-{{ index }}" value="right" checked>
63+
<span>{{ tran('Rolling') }}</span>
64+
</label>
65+
<label>
66+
<input type="radio" name="dplayer-danmaku-type-{{ index }}" value="bottom">
67+
<span>{{ tran('Bottom') }}</span>
68+
</label>
69+
</div>
70+
</div>
71+
<input class="dplayer-comment-input" type="text" placeholder="{{ tran('Input danmaku, hit Enter') }}" maxlength="30">
72+
<button class="dplayer-icon dplayer-send-icon" data-balloon="{{ tran('Send') }}" data-balloon-pos="up">
73+
<span class="dplayer-icon-content">{{@ icons.send }}</span>
74+
</button>
75+
</div>
76+
<div class="dplayer-icons dplayer-icons-left">
77+
<button class="dplayer-icon dplayer-play-icon">
78+
<span class="dplayer-icon-content">{{@ icons.play }}</span>
79+
</button>
80+
<div class="dplayer-volume">
81+
<button class="dplayer-icon dplayer-volume-icon">
82+
<span class="dplayer-icon-content">{{@ icons.volumeDown }}</span>
83+
</button>
84+
<div class="dplayer-volume-bar-wrap" data-balloon-pos="up">
85+
<div class="dplayer-volume-bar">
86+
<div class="dplayer-volume-bar-inner" style="background: {{ options.theme }};">
87+
<span class="dplayer-thumb" style="background: {{ options.theme }}"></span>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
<span class="dplayer-time">
93+
<span class="dplayer-ptime">0:00</span> /
94+
<span class="dplayer-dtime">0:00</span>
95+
</span>
96+
{{ if options.live }}
97+
<span class="dplayer-live-badge"><span class="dplayer-live-dot" style="background: {{ options.theme }};"></span>{{ tran('Live') }}</span>
98+
{{ /if }}
99+
</div>
100+
<div class="dplayer-icons dplayer-icons-right">
101+
{{ if options.video.quality }}
102+
<div class="dplayer-quality">
103+
<button class="dplayer-icon dplayer-quality-icon">{{ options.video.quality[options.video.defaultQuality].name }}</button>
104+
<div class="dplayer-quality-mask">
105+
<div class="dplayer-quality-list"></div>
106+
{{ each options.video.quality }}
107+
<div class="dplayer-quality-item" data-index="{{ $index }}">{{ $value.name }}</div>
108+
{{ /each }}
109+
</div>
110+
</div>
111+
</div>
112+
{{ /if }}
113+
{{ if options.screenshot }}
114+
<a href="#" class="dplayer-icon dplayer-camera-icon" data-balloon="{{ tran('Screenshot') }}" data-balloon-pos="up">
115+
<span class="dplayer-icon-content">{{@ icons.camera }}</span>
116+
</a>
117+
{{ /if }}
118+
<div class="dplayer-comment">
119+
<button class="dplayer-icon dplayer-comment-icon" data-balloon="{{ tran('Send danmaku') }}" data-balloon-pos="up">
120+
<span class="dplayer-icon-content">{{@ icons.comment }}</span>
121+
</button>
122+
</div>
123+
{{ if options.subtitle }}
124+
<div class="dplayer-subtitle-btn">
125+
<button class="dplayer-icon dplayer-subtitle-icon" data-balloon="{{ tran('Hide subtitle') }}" data-balloon-pos="up">
126+
<span class="dplayer-icon-content">{{@ icons.subtitle }}</span>
127+
</button>
128+
</div>
129+
{{ /if }}
130+
<div class="dplayer-setting">
131+
<button class="dplayer-icon dplayer-setting-icon" data-balloon="{{ tran('Setting') }}" data-balloon-pos="up">
132+
<span class="dplayer-icon-content">{{@ icons.setting }}</span>
133+
</button>
134+
<div class="dplayer-setting-box">
135+
<div class="dplayer-setting-origin-panel">
136+
<div class="dplayer-setting-item dplayer-setting-speed">
137+
<span class="dplayer-label">{{ tran('Speed') }}</span>
138+
<div class="dplayer-toggle">{{@ icons.right }}</div>
139+
</div>
140+
<div class="dplayer-setting-item dplayer-setting-loop">
141+
<span class="dplayer-label">{{ tran('Loop') }}</span>
142+
<div class="dplayer-toggle">
143+
<input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle">
144+
<label for="dplayer-toggle"></label>
145+
</div>
146+
</div>
147+
<div class="dplayer-setting-item dplayer-setting-showdan">
148+
<span class="dplayer-label">{{ tran('Show danmaku') }}</span>
149+
<div class="dplayer-toggle">
150+
<input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan">
151+
<label for="dplayer-toggle-dan"></label>
152+
</div>
153+
</div>
154+
<div class="dplayer-setting-item dplayer-setting-danunlimit">
155+
<span class="dplayer-label">{{ tran('Unlimited danmaku') }}</span>
156+
<div class="dplayer-toggle">
157+
<input class="dplayer-danunlimit-setting-input" type="checkbox" name="dplayer-toggle-danunlimit">
158+
<label for="dplayer-toggle-danunlimit"></label>
159+
</div>
160+
</div>
161+
<div class="dplayer-setting-item dplayer-setting-danmaku">
162+
<span class="dplayer-label">{{ tran('Opacity for danmaku') }}</span>
163+
<div class="dplayer-danmaku-bar-wrap">
164+
<div class="dplayer-danmaku-bar">
165+
<div class="dplayer-danmaku-bar-inner">
166+
<span class="dplayer-thumb"></span>
167+
</div>
168+
</div>
169+
</div>
170+
</div>
171+
</div>
172+
<div class="dplayer-setting-speed-panel">
173+
<div class="dplayer-setting-speed-item" data-speed="0.5">
174+
<span class="dplayer-label">0.5</span>
175+
</div>
176+
<div class="dplayer-setting-speed-item" data-speed="0.75">
177+
<span class="dplayer-label">0.75</span>
178+
</div>
179+
<div class="dplayer-setting-speed-item" data-speed="1">
180+
<span class="dplayer-label">{{ tran('Normal') }}</span>
181+
</div>
182+
<div class="dplayer-setting-speed-item" data-speed="1.25">
183+
<span class="dplayer-label">1.25</span>
184+
</div>
185+
<div class="dplayer-setting-speed-item" data-speed="1.5">
186+
<span class="dplayer-label">1.5</span>
187+
</div>
188+
<div class="dplayer-setting-speed-item" data-speed="2">
189+
<span class="dplayer-label">2</span>
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
<div class="dplayer-full">
195+
<button class="dplayer-icon dplayer-full-in-icon" data-balloon="{{ tran('Web full screen') }}" data-balloon-pos="up">
196+
<span class="dplayer-icon-content">{{@ icons.fullWeb }}</span>
197+
</button>
198+
<button class="dplayer-icon dplayer-full-icon" data-balloon="{{ tran('Full screen') }}" data-balloon-pos="up">
199+
<span class="dplayer-icon-content">{{@ icons.full }}</span>
200+
</button>
201+
</div>
202+
</div>
203+
<div class="dplayer-bar-wrap">
204+
<div class="dplayer-bar-time hidden">00:00</div>
205+
<div class="dplayer-bar-preview"></div>
206+
<div class="dplayer-bar">
207+
<div class="dplayer-loaded" style="width: 0;"></div>
208+
<div class="dplayer-played" style="width: 0; background: {{ options.theme }}">
209+
<span class="dplayer-thumb" style="background: {{ options.theme }}"></span>
210+
</div>
211+
</div>
212+
</div>
213+
</div>
214+
<div class="dplayer-info-panel dplayer-info-panel-hide">
215+
<div class="dplayer-info-panel-close">[x]</div>
216+
<div class="dplayer-info-panel-item dplayer-info-panel-item-version">
217+
<span class="dplayer-info-panel-item-title">Player version</span>
218+
<span class="dplayer-info-panel-item-data"></span>
219+
</div>
220+
<div class="dplayer-info-panel-item dplayer-info-panel-item-fps">
221+
<span class="dplayer-info-panel-item-title">Player FPS</span>
222+
<span class="dplayer-info-panel-item-data"></span>
223+
</div>
224+
<div class="dplayer-info-panel-item dplayer-info-panel-item-type">
225+
<span class="dplayer-info-panel-item-title">Video type</span>
226+
<span class="dplayer-info-panel-item-data"></span>
227+
</div>
228+
<div class="dplayer-info-panel-item dplayer-info-panel-item-url">
229+
<span class="dplayer-info-panel-item-title">Video url</span>
230+
<span class="dplayer-info-panel-item-data"></span>
231+
</div>
232+
<div class="dplayer-info-panel-item dplayer-info-panel-item-resolution">
233+
<span class="dplayer-info-panel-item-title">Video resolution</span>
234+
<span class="dplayer-info-panel-item-data"></span>
235+
</div>
236+
<div class="dplayer-info-panel-item dplayer-info-panel-item-duration">
237+
<span class="dplayer-info-panel-item-title">Video duration</span>
238+
<span class="dplayer-info-panel-item-data"></span>
239+
</div>
240+
{{ if options.danmaku }}
241+
<div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-id">
242+
<span class="dplayer-info-panel-item-title">Danamku id</span>
243+
<span class="dplayer-info-panel-item-data"></span>
244+
</div>
245+
<div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-api">
246+
<span class="dplayer-info-panel-item-title">Danamku api</span>
247+
<span class="dplayer-info-panel-item-data"></span>
248+
</div>
249+
<div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-amount">
250+
<span class="dplayer-info-panel-item-title">Danamku amount</span>
251+
<span class="dplayer-info-panel-item-data"></span>
252+
</div>
253+
{{ /if }}
254+
</div>
255+
<div class="dplayer-menu">
256+
{{ each options.contextmenu }}
257+
<div class="dplayer-menu-item">
258+
<a target="_blank" href="{{ $value.link || 'javascript:void(0);' }}">{{ tran($value.text) }}</a>
259+
</div>
260+
{{ /each }}
261+
</div>
262+
<div class="dplayer-notice"></div>

‎src/template/video.art‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{{ set enableSubtitle = subtitle && subtitle.type === 'webvtt' }}
2+
<video
3+
class="dplayer-video {{ if current }}dplayer-video-current{{ /if }}"
4+
webkit-playsinline
5+
playsinline
6+
{{ if pic }}poster="{{ pic }}"{{ /if }}
7+
{{ if screenshot || enableSubtitle }}crossorigin="anonymous"{{ /if }}
8+
{{ if preload }}preload="{{ preload }}"{{ /if }}
9+
{{ if url }}src="{{ url }}"{{ /if }}
10+
>
11+
{{ if enableSubtitle }}
12+
<track kind="metadata" default src="{{ subtitle.url }}"></track>
13+
{{ /if }}
14+
</video>

‎webpack/dev.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@ module.exports = {
7979
{
8080
test: /\.svg$/,
8181
loader: 'svg-inline-loader'
82+
},
83+
{
84+
test: /\.art$/,
85+
loader: 'art-template-loader'
8286
}
8387
]
8488
},

‎webpack/prod.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,10 @@ module.exports = {
8787
{
8888
test: /\.svg$/,
8989
loader: 'svg-inline-loader'
90+
},
91+
{
92+
test: /\.art$/,
93+
loader: 'art-template-loader'
9094
}
9195
]
9296
},

0 commit comments

Comments
 (0)