Skip to content

Commit

Permalink
use art-template
Browse files Browse the repository at this point in the history
  • Loading branch information
@DIYgod
DIYgod committed Feb 8, 2018
1 parent df1deb3 commit a16c948
Show file tree
Hide file tree
Showing 9 changed files with 418 additions and 293 deletions.
4 changes: 1 addition & 3 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,7 @@ function initPlayers () {
token: 'tokendemo',
maximum: 3000,
user: 'DIYgod',
margin: {
bottom: '15%'
},
bottom: '15%',
unlimited: true
},
contextmenu: [
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 9 additions & 1 deletion src/js/player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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;
Expand Down
302 changes: 15 additions & 287 deletions src/js/template.js
View file

Large diffs are not rendered by default.

262 changes: 262 additions & 0 deletions src/template/player.art
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,262 @@
<div class="dplayer-mask"></div>
<div class="dplayer-video-wrap">
{{ include './video.art' video }}
{{ if options.logo }}
<div class="dplayer-logo">
<img src="{{ options.logo }}">
</div>
{{ /if }}
<div class="dplayer-danmaku"{{ if options.danmaku && options.danmaku.bottm }} style="margin-bottom:{{ options.danmaku.bottm }}"{{ /if }}>
<div class="dplayer-danmaku-item dplayer-danmaku-item--demo"></div>
</div>
<div class="dplayer-subtitle"></div>
<div class="dplayer-bezel">
<span class="dplayer-bezel-icon"></span>
{{ if options.danmaku }}
<span class="dplayer-danloading">{{ tran('Danmaku is loading') }}</span>
{{ /if }}
<span class="diplayer-loading-icon">{{@ icons.loading }}</span>
</div>
</div>
<div class="dplayer-controller-mask"></div>
<div class="dplayer-controller">
<div class="dplayer-icons dplayer-comment-box">
<button class="dplayer-icon dplayer-comment-setting-icon" data-balloon="{{ tran('Setting') }}" data-balloon-pos="up">
<span class="dplayer-icon-content">{{@ icons.pallette }}</span>
</button>
<div class="dplayer-comment-setting-box">
<div class="dplayer-comment-setting-color">
<div class="dplayer-comment-setting-title">{{ tran('Set danmaku color') }}</div>
<label>
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#fff" checked>
<span style="background: #fff;"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#e54256">
<span style="background: #e54256"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#ffe133">
<span style="background: #ffe133"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#64DD17">
<span style="background: #64DD17"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#39ccff">
<span style="background: #39ccff"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#D500F9">
<span style="background: #D500F9"></span>
</label>
</div>
<div class="dplayer-comment-setting-type">
<div class="dplayer-comment-setting-title">{{ tran('Set danmaku type') }}</div>
<label>
<input type="radio" name="dplayer-danmaku-type-{{ index }}" value="top">
<span>{{ tran('Top') }}</span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-type-{{ index }}" value="right" checked>
<span>{{ tran('Rolling') }}</span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-type-{{ index }}" value="bottom">
<span>{{ tran('Bottom') }}</span>
</label>
</div>
</div>
<input class="dplayer-comment-input" type="text" placeholder="{{ tran('Input danmaku, hit Enter') }}" maxlength="30">
<button class="dplayer-icon dplayer-send-icon" data-balloon="{{ tran('Send') }}" data-balloon-pos="up">
<span class="dplayer-icon-content">{{@ icons.send }}</span>
</button>
</div>
<div class="dplayer-icons dplayer-icons-left">
<button class="dplayer-icon dplayer-play-icon">
<span class="dplayer-icon-content">{{@ icons.play }}</span>
</button>
<div class="dplayer-volume">
<button class="dplayer-icon dplayer-volume-icon">
<span class="dplayer-icon-content">{{@ icons.volumeDown }}</span>
</button>
<div class="dplayer-volume-bar-wrap" data-balloon-pos="up">
<div class="dplayer-volume-bar">
<div class="dplayer-volume-bar-inner" style="background: {{ options.theme }};">
<span class="dplayer-thumb" style="background: {{ options.theme }}"></span>
</div>
</div>
</div>
</div>
<span class="dplayer-time">
<span class="dplayer-ptime">0:00</span> /
<span class="dplayer-dtime">0:00</span>
</span>
{{ if options.live }}
<span class="dplayer-live-badge"><span class="dplayer-live-dot" style="background: {{ options.theme }};"></span>{{ tran('Live') }}</span>
{{ /if }}
</div>
<div class="dplayer-icons dplayer-icons-right">
{{ if options.video.quality }}
<div class="dplayer-quality">
<button class="dplayer-icon dplayer-quality-icon">{{ options.video.quality[options.video.defaultQuality].name }}</button>
<div class="dplayer-quality-mask">
<div class="dplayer-quality-list"></div>
{{ each options.video.quality }}
<div class="dplayer-quality-item" data-index="{{ $index }}">{{ $value.name }}</div>
{{ /each }}
</div>
</div>
</div>
{{ /if }}
{{ if options.screenshot }}
<a href="#" class="dplayer-icon dplayer-camera-icon" data-balloon="{{ tran('Screenshot') }}" data-balloon-pos="up">
<span class="dplayer-icon-content">{{@ icons.camera }}</span>
</a>
{{ /if }}
<div class="dplayer-comment">
<button class="dplayer-icon dplayer-comment-icon" data-balloon="{{ tran('Send danmaku') }}" data-balloon-pos="up">
<span class="dplayer-icon-content">{{@ icons.comment }}</span>
</button>
</div>
{{ if options.subtitle }}
<div class="dplayer-subtitle-btn">
<button class="dplayer-icon dplayer-subtitle-icon" data-balloon="{{ tran('Hide subtitle') }}" data-balloon-pos="up">
<span class="dplayer-icon-content">{{@ icons.subtitle }}</span>
</button>
</div>
{{ /if }}
<div class="dplayer-setting">
<button class="dplayer-icon dplayer-setting-icon" data-balloon="{{ tran('Setting') }}" data-balloon-pos="up">
<span class="dplayer-icon-content">{{@ icons.setting }}</span>
</button>
<div class="dplayer-setting-box">
<div class="dplayer-setting-origin-panel">
<div class="dplayer-setting-item dplayer-setting-speed">
<span class="dplayer-label">{{ tran('Speed') }}</span>
<div class="dplayer-toggle">{{@ icons.right }}</div>
</div>
<div class="dplayer-setting-item dplayer-setting-loop">
<span class="dplayer-label">{{ tran('Loop') }}</span>
<div class="dplayer-toggle">
<input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle">
<label for="dplayer-toggle"></label>
</div>
</div>
<div class="dplayer-setting-item dplayer-setting-showdan">
<span class="dplayer-label">{{ tran('Show danmaku') }}</span>
<div class="dplayer-toggle">
<input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan">
<label for="dplayer-toggle-dan"></label>
</div>
</div>
<div class="dplayer-setting-item dplayer-setting-danunlimit">
<span class="dplayer-label">{{ tran('Unlimited danmaku') }}</span>
<div class="dplayer-toggle">
<input class="dplayer-danunlimit-setting-input" type="checkbox" name="dplayer-toggle-danunlimit">
<label for="dplayer-toggle-danunlimit"></label>
</div>
</div>
<div class="dplayer-setting-item dplayer-setting-danmaku">
<span class="dplayer-label">{{ tran('Opacity for danmaku') }}</span>
<div class="dplayer-danmaku-bar-wrap">
<div class="dplayer-danmaku-bar">
<div class="dplayer-danmaku-bar-inner">
<span class="dplayer-thumb"></span>
</div>
</div>
</div>
</div>
</div>
<div class="dplayer-setting-speed-panel">
<div class="dplayer-setting-speed-item" data-speed="0.5">
<span class="dplayer-label">0.5</span>
</div>
<div class="dplayer-setting-speed-item" data-speed="0.75">
<span class="dplayer-label">0.75</span>
</div>
<div class="dplayer-setting-speed-item" data-speed="1">
<span class="dplayer-label">{{ tran('Normal') }}</span>
</div>
<div class="dplayer-setting-speed-item" data-speed="1.25">
<span class="dplayer-label">1.25</span>
</div>
<div class="dplayer-setting-speed-item" data-speed="1.5">
<span class="dplayer-label">1.5</span>
</div>
<div class="dplayer-setting-speed-item" data-speed="2">
<span class="dplayer-label">2</span>
</div>
</div>
</div>
</div>
<div class="dplayer-full">
<button class="dplayer-icon dplayer-full-in-icon" data-balloon="{{ tran('Web full screen') }}" data-balloon-pos="up">
<span class="dplayer-icon-content">{{@ icons.fullWeb }}</span>
</button>
<button class="dplayer-icon dplayer-full-icon" data-balloon="{{ tran('Full screen') }}" data-balloon-pos="up">
<span class="dplayer-icon-content">{{@ icons.full }}</span>
</button>
</div>
</div>
<div class="dplayer-bar-wrap">
<div class="dplayer-bar-time hidden">00:00</div>
<div class="dplayer-bar-preview"></div>
<div class="dplayer-bar">
<div class="dplayer-loaded" style="width: 0;"></div>
<div class="dplayer-played" style="width: 0; background: {{ options.theme }}">
<span class="dplayer-thumb" style="background: {{ options.theme }}"></span>
</div>
</div>
</div>
</div>
<div class="dplayer-info-panel dplayer-info-panel-hide">
<div class="dplayer-info-panel-close">[x]</div>
<div class="dplayer-info-panel-item dplayer-info-panel-item-version">
<span class="dplayer-info-panel-item-title">Player version</span>
<span class="dplayer-info-panel-item-data"></span>
</div>
<div class="dplayer-info-panel-item dplayer-info-panel-item-fps">
<span class="dplayer-info-panel-item-title">Player FPS</span>
<span class="dplayer-info-panel-item-data"></span>
</div>
<div class="dplayer-info-panel-item dplayer-info-panel-item-type">
<span class="dplayer-info-panel-item-title">Video type</span>
<span class="dplayer-info-panel-item-data"></span>
</div>
<div class="dplayer-info-panel-item dplayer-info-panel-item-url">
<span class="dplayer-info-panel-item-title">Video url</span>
<span class="dplayer-info-panel-item-data"></span>
</div>
<div class="dplayer-info-panel-item dplayer-info-panel-item-resolution">
<span class="dplayer-info-panel-item-title">Video resolution</span>
<span class="dplayer-info-panel-item-data"></span>
</div>
<div class="dplayer-info-panel-item dplayer-info-panel-item-duration">
<span class="dplayer-info-panel-item-title">Video duration</span>
<span class="dplayer-info-panel-item-data"></span>
</div>
{{ if options.danmaku }}
<div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-id">
<span class="dplayer-info-panel-item-title">Danamku id</span>
<span class="dplayer-info-panel-item-data"></span>
</div>
<div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-api">
<span class="dplayer-info-panel-item-title">Danamku api</span>
<span class="dplayer-info-panel-item-data"></span>
</div>
<div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-amount">
<span class="dplayer-info-panel-item-title">Danamku amount</span>
<span class="dplayer-info-panel-item-data"></span>
</div>
{{ /if }}
</div>
<div class="dplayer-menu">
{{ each options.contextmenu }}
<div class="dplayer-menu-item">
<a target="_blank" href="{{ $value.link || 'javascript:void(0);' }}">{{ tran($value.text) }}</a>
</div>
{{ /each }}
</div>
<div class="dplayer-notice"></div>
14 changes: 14 additions & 0 deletions src/template/video.art
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{{ set enableSubtitle = subtitle && subtitle.type === 'webvtt' }}
<video
class="dplayer-video {{ if current }}dplayer-video-current{{ /if }}"
webkit-playsinline
playsinline
{{ if pic }}poster="{{ pic }}"{{ /if }}
{{ if screenshot || enableSubtitle }}crossorigin="anonymous"{{ /if }}
{{ if preload }}preload="{{ preload }}"{{ /if }}
{{ if url }}src="{{ url }}"{{ /if }}
>
{{ if enableSubtitle }}
<track kind="metadata" default src="{{ subtitle.url }}"></track>
{{ /if }}
</video>
4 changes: 4 additions & 0 deletions webpack/dev.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,10 @@ module.exports = {
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.art$/,
loader: 'art-template-loader'
}
]
},
Expand Down
4 changes: 4 additions & 0 deletions webpack/prod.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,10 @@ module.exports = {
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.art$/,
loader: 'art-template-loader'
}
]
},
Expand Down
Loading

0 comments on commit a16c948

Please sign in to comment.