Skip to content

Commit 3540492

Browse files
authored
Merge pull request #47 from yama-dev/v6.0.1
V6.0.1
2 parents 51f97c2 + f1af1fe commit 3540492

File tree

10 files changed

+106
-111
lines changed

10 files changed

+106
-111
lines changed

.env

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
SLUG=js-player-module-brightcove
2-
VERSION=6.0.0
2+
VERSION=6.0.1

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,4 @@ package-lock.json
1717

1818
# Development environment.
1919
_*/
20+
_*.html

@types/index.d.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,6 @@ interface PlayerModuleBrightcoveInterface {
6969
uiSeekbarTimeBg : any
7070
uiSeekbarTimeCover : any
7171
uiBtnChange : any
72-
uiBtnChangeDisplayTime : any
73-
uiBtnChangeDisplayTimeDown : any
7472
uiBtnDataId : any
7573
}
7674
playerHtml: any

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ The official document is here. -> https://docs.brightcove.com/brightcove-player/
1919

2020
- npm -> [https://www.npmjs.com/package/js-player-module-brightcove](https://www.npmjs.com/package/js-player-module-brightcove)
2121

22-
- Standalone(CDN) -> [https://cdn.jsdelivr.net/gh/yama-dev/js-player-module-brightcove@v5.4.2/dist/js-player-module-brightcove.js](https://cdn.jsdelivr.net/gh/yama-dev/js-player-module-brightcove@v5.4.2/dist/js-player-module-brightcove.js)
22+
- Standalone(CDN) -> [https://cdn.jsdelivr.net/gh/yama-dev/js-player-module-brightcove@v6.0.1/dist/js-player-module-brightcove.js](https://cdn.jsdelivr.net/gh/yama-dev/js-player-module-brightcove@v6.0.1/dist/js-player-module-brightcove.js)
2323

2424
- Zip -> [yama-dev/js-player-module-brightcove](https://github.com/yama-dev/js-player-module-brightcove/releases/latest)
2525

dist/js-player-module-brightcove.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

examples/index.html

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
gtag('config', 'UA-91619969-3');
2323
</script>
2424
<style>
25-
.display_poster img {
25+
.ui-poster img {
2626
max-width: 300px !important;
2727
}
2828
</style>
@@ -78,11 +78,11 @@ <h3>Simple Player(original image)</h3>
7878
ui_default: false
7979
});
8080
</script>
81-
<div class="player__btn">
82-
<div class="btn_play"><img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=PLAY" alt=""><img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=PLAY" alt=""></div>
83-
<div class="btn_pause"><img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=PAUSE" alt=""><img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=PAUSE" alt=""></div>
84-
<div class="btn_stop"><img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=STOP" alt=""><img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=STOP" alt=""></div>
85-
<div class="btn_mute"><img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=MUTE" alt=""><img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=MUTE" alt=""></div>
81+
<div>
82+
<div class="ui-btn-play"><img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=PLAY" alt=""><img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=PLAY" alt=""></div>
83+
<div class="ui-btn-pause"><img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=PAUSE" alt=""><img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=PAUSE" alt=""></div>
84+
<div class="ui-btn-stop"><img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=STOP" alt=""><img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=STOP" alt=""></div>
85+
<div class="ui-btn-mute"><img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=MUTE" alt=""><img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=MUTE" alt=""></div>
8686
</div>
8787
<pre class="prettyprint lang-html mt-2">
8888
<code>
@@ -97,20 +97,20 @@ <h3>Simple Player(original image)</h3>
9797
ui_default: false
9898
});
9999
&lt;/script&gt;
100-
&lt;div class="player__btn"&gt;
101-
&lt;div class="btn_play"&gt;
100+
&lt;div&gt;
101+
&lt;div class="ui-btn-play"&gt;
102102
&lt;img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=PLAY" alt=""&gt;
103103
&lt;img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=PLAY" alt=""&gt;
104104
&lt;/div&gt;
105-
&lt;div class="btn_pause"&gt;
105+
&lt;div class="ui-btn-pause"&gt;
106106
&lt;img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=PAUSE" alt=""&gt;
107107
&lt;img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=PAUSE" alt=""&gt;
108108
&lt;/div&gt;
109-
&lt;div class="btn_stop"&gt;
109+
&lt;div class="ui-btn-stop"&gt;
110110
&lt;img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=STOP" alt=""&gt;
111111
&lt;img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=STOP" alt=""&gt;
112112
&lt;/div&gt;
113-
&lt;div class="btn_mute"&gt;
113+
&lt;div class="ui-btn-mute"&gt;
114114
&lt;img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=MUTE" alt=""&gt;
115115
&lt;img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=MUTE" alt=""&gt;
116116
&lt;/div&gt;
@@ -185,25 +185,24 @@ <h3>Custom Player</h3>
185185
});
186186
</script>
187187

188-
<button class="btn btn btn-secondary" onclick="PMB.Play()">Media再生(Play)</button>
189-
<button class="btn btn btn-secondary" onclick="PMB.Stop()">Media停止(Stop)</button>
190-
<button class="btn btn btn-secondary" onclick="PMB.PauseAll()">Media全一時停止(PauseAll)</button>
191-
<button class="btn btn btn-secondary" onclick="PMB.StopAll()">Media全停止(StopAll)</button>
188+
<button class="btn btn-secondary" onclick="PMB.Play()">Media再生(Play)</button>
189+
<button class="btn btn-secondary" onclick="PMB.Stop()">Media停止(Stop)</button>
190+
<button class="btn btn-secondary" onclick="PMB.PauseAll()">Media全一時停止(PauseAll)</button>
191+
<button class="btn btn-secondary" onclick="PMB.StopAll()">Media全停止(StopAll)</button>
192192

193193
<br>
194194

195-
<button class="btn btn btn-secondary" data-PMB-id="4230322585001" onclick="PMB.Change('4230322585001')">Media変更 id=4230322585001</button>
196-
<button class="btn_change btn btn btn-secondary" data-PMB-id="4230322585001">Media変更 id=4230322585001</button>
195+
<button class="btn btn-secondary" data-PMB-id="4230322585001" onclick="PMB.Change('4230322585001')">Media変更 id=4230322585001</button>
197196
<div class="btn btn-secondary" data-PMB-id="4231692338001" onclick="PMB.Change('4231692338001')">
198197
Media変更 id=4231692338001<br><br>
199-
<p class="display_time">00:00</p>
200-
<p class="display_time_down">00:00</p>
198+
<p class="ui-time">00:00</p>
199+
<p class="ui-time_down">00:00</p>
201200
</div>
202201

203202
<br>
204203

205-
<button class="btn btn btn-secondary" onclick="PMB.SeekTo(30)">Media再生位置変更(SeekTo 30s)</button>
206-
<button class="btn btn btn-secondary" onclick="PMB.SeekTo(60)">Media再生位置変更(SeekTo 60s)</button>
204+
<button class="btn btn-secondary" onclick="PMB.SeekTo(30)">Media再生位置変更(SeekTo 30s)</button>
205+
<button class="btn btn-secondary" onclick="PMB.SeekTo(60)">Media再生位置変更(SeekTo 60s)</button>
207206

208207
<pre class="prettyprint lang-html mt-2">
209208
<code>
@@ -267,18 +266,18 @@ <h3>Custom Player</h3>
267266
});
268267
&lt;/script&gt;
269268

270-
&lt;button class=&quot;btn btn btn-secondary&quot; onclick=&quot;PMB.Stop()&quot;&gt;Media停止(Stop)&lt;/button&gt;
271-
&lt;button class=&quot;btn btn btn-secondary&quot; onclick=&quot;PMB.StopAll()&quot;&gt;Media全停止(StopAll)&lt;/button&gt;
269+
&lt;button class=&quot;btn btn-secondary&quot; onclick=&quot;PMB.Stop()&quot;&gt;Media停止(Stop)&lt;/button&gt;
270+
&lt;button class=&quot;btn btn-secondary&quot; onclick=&quot;PMB.StopAll()&quot;&gt;Media全停止(StopAll)&lt;/button&gt;
272271

273-
&lt;button class=&quot;btn btn btn-secondary&quot; data-PMB-id=&quot;4230322585001&quot; onclick=&quot;PMB.Change(&#039;4230322585001&#039;)&quot;&gt;Media変更 id=4230322585001&lt;/button&gt;
274-
&lt;button class=&quot;btn_change btn btn btn-secondary&quot; data-PMB-id=&quot;4230322585001&quot;&gt;Media変更 id=4230322585001&lt;/button&gt;
272+
&lt;button class=&quot;btn btn-secondary&quot; data-PMB-id=&quot;4230322585001&quot; onclick=&quot;PMB.Change(&#039;4230322585001&#039;)&quot;&gt;Media変更 id=4230322585001&lt;/button&gt;
273+
&lt;button class=&quot;btn_change btn btn-secondary&quot; data-PMB-id=&quot;4230322585001&quot;&gt;Media変更 id=4230322585001&lt;/button&gt;
275274
&lt;div class=&quot;btn btn-secondary&quot; data-PMB-id=&quot;4231692338001&quot; onclick=&quot;PMB.Change(&#039;4231692338001&#039;)&quot;&gt;
276275
Media変更 id=4231692338001&lt;br&gt;&lt;br&gt;
277276
&lt;p class=&quot;display_time&quot;&gt;00:00&lt;/p&gt;
278277
&lt;p class=&quot;display_time_down&quot;&gt;00:00&lt;/p&gt;
279278
&lt;/div&gt;
280-
&lt;button class=&quot;btn btn btn-secondary&quot; onclick=&quot;PMB.SeekTo(30)&quot;&gt;Media再生位置変更(SeekTo 30s)&lt;/button&gt;</code>
281-
&lt;button class=&quot;btn btn btn-secondary&quot; onclick=&quot;PMB.SeekTo(60)&quot;&gt;Media再生位置変更(SeekTo 60s)&lt;/button&gt;</code>
279+
&lt;button class=&quot;btn btn-secondary&quot; onclick=&quot;PMB.SeekTo(30)&quot;&gt;Media再生位置変更(SeekTo 30s)&lt;/button&gt;</code>
280+
&lt;button class=&quot;btn btn-secondary&quot; onclick=&quot;PMB.SeekTo(60)&quot;&gt;Media再生位置変更(SeekTo 60s)&lt;/button&gt;</code>
282281
</pre>
283282
</div>
284283

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-player-module-brightcove",
3-
"version": "6.0.0",
3+
"version": "6.0.1",
44
"description": "Brightcove custom player using the Brightcove Player API.",
55
"keywords": [
66
"Brightcove",

src/js-player-module-brightcove.ts

Lines changed: 32 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,6 @@ export class PLAYER_MODULE_BRIGHTCOVE implements PlayerModuleBrightcoveInterface
115115
uiSeekbarTimeBg : [],
116116
uiSeekbarTimeCover : [],
117117
uiBtnChange : [],
118-
uiBtnChangeDisplayTime : [],
119-
uiBtnChangeDisplayTimeDown : [],
120118
uiBtnDataId : [],
121119
};
122120

@@ -134,7 +132,7 @@ export class PLAYER_MODULE_BRIGHTCOVE implements PlayerModuleBrightcoveInterface
134132
poster: ''
135133
}
136134

137-
constructor(options: any = {}){
135+
constructor(options: any){
138136

139137
if(!options.id || !options.videoid){
140138
console.log('Inadequate parameters (id, videoid)');
@@ -222,7 +220,7 @@ export class PLAYER_MODULE_BRIGHTCOVE implements PlayerModuleBrightcoveInterface
222220

223221
}
224222

225-
BuildPlayer(){
223+
private BuildPlayer(){
226224
let _that = this;
227225

228226
// Player Ui.
@@ -270,7 +268,7 @@ export class PLAYER_MODULE_BRIGHTCOVE implements PlayerModuleBrightcoveInterface
270268
s.onerror = function(){
271269
console.log('ERROR: not script loaded.');
272270
};
273-
s.src = this.playerScriptCode+'?'+Date.now();
271+
s.src = `${this.playerScriptCode}?${Date.now()}`;
274272

275273
document.body.appendChild(s);
276274
}
@@ -387,32 +385,30 @@ export class PLAYER_MODULE_BRIGHTCOVE implements PlayerModuleBrightcoveInterface
387385
this.$.playerElemMain = DOM.selectDom(`#${this.CONFIG.id} #${this.CONFIG.player_id}`);
388386
this.$.playerElemMainWrap = DOM.selectDom(`#${this.CONFIG.id} #${this.CONFIG.player_id_wrap}`);
389387

390-
this.$.uiBtnPlay = DOM.selectDom('#'+this.CONFIG.id+' .btn_play');
391-
this.$.uiBtnStop = DOM.selectDom('#'+this.CONFIG.id+' .btn_stop');
392-
this.$.uiBtnPause = DOM.selectDom('#'+this.CONFIG.id+' .btn_pause');
393-
this.$.uiBtnMute = DOM.selectDom('#'+this.CONFIG.id+' .btn_mute');
394-
this.$.uiBtnVolon = DOM.selectDom('#'+this.CONFIG.id+' .btn_volon');
395-
this.$.uiBtnVoloff = DOM.selectDom('#'+this.CONFIG.id+' .btn_voloff');
396-
397-
this.$.uiDisplayTime = DOM.selectDom('#'+this.CONFIG.id+' .display_time');
398-
this.$.uiDisplayTimeNow = DOM.selectDom('#'+this.CONFIG.id+' .display_time_now');
399-
this.$.uiDisplayTimeTotal = DOM.selectDom('#'+this.CONFIG.id+' .display_time_total');
400-
this.$.uiDisplayTimeDown = DOM.selectDom('#'+this.CONFIG.id+' .display_time_down');
401-
this.$.uiDisplayTimePar = DOM.selectDom('#'+this.CONFIG.id+' .display_time_par');
402-
this.$.uiDisplayPoster = DOM.selectDom('#'+this.CONFIG.id+' .display_poster');
403-
this.$.uiDisplayPosterBg = DOM.selectDom('#'+this.CONFIG.id+' .display_poster_background');
404-
this.$.uiDisplayName = DOM.selectDom('#'+this.CONFIG.id+' .display_name');
405-
406-
this.$.uiSeekbarVol = DOM.selectDom('#'+this.CONFIG.id+' .seekbar_vol');
407-
this.$.uiSeekbarVolBg = DOM.selectDom('#'+this.CONFIG.id+' .seekbar_vol .seekbar_vol_bg');
408-
this.$.uiSeekbarVolCover = DOM.selectDom('#'+this.CONFIG.id+' .seekbar_vol span');
409-
this.$.uiSeekbarTime = DOM.selectDom('#'+this.CONFIG.id+' .seekbar_time');
410-
this.$.uiSeekbarTimeBg = DOM.selectDom('#'+this.CONFIG.id+' .seekbar_time .seekbar_time_bg');
411-
this.$.uiSeekbarTimeCover = DOM.selectDom('#'+this.CONFIG.id+' .seekbar_time span');
412-
413-
this.$.uiBtnChange = DOM.selectDom('#'+this.CONFIG.id+' .btn_change');
414-
this.$.uiBtnChangeDisplayTime = DOM.selectDom('#'+this.CONFIG.id+' .display_time');
415-
this.$.uiBtnChangeDisplayTimeDown = DOM.selectDom('#'+this.CONFIG.id+' .display_time_down');
388+
this.$.uiBtnPlay = DOM.selectDom('#'+this.CONFIG.id+' .ui-btn-play');
389+
this.$.uiBtnStop = DOM.selectDom('#'+this.CONFIG.id+' .ui-btn-stop');
390+
this.$.uiBtnPause = DOM.selectDom('#'+this.CONFIG.id+' .ui-btn-pause');
391+
this.$.uiBtnMute = DOM.selectDom('#'+this.CONFIG.id+' .ui-btn-mute');
392+
this.$.uiBtnVolon = DOM.selectDom('#'+this.CONFIG.id+' .ui-btn-volon');
393+
this.$.uiBtnVoloff = DOM.selectDom('#'+this.CONFIG.id+' .ui-btn-voloff');
394+
395+
this.$.uiDisplayTime = DOM.selectDom('#'+this.CONFIG.id+' .ui-time');
396+
this.$.uiDisplayTimeNow = DOM.selectDom('#'+this.CONFIG.id+' .ui-time-now');
397+
this.$.uiDisplayTimeTotal = DOM.selectDom('#'+this.CONFIG.id+' .ui-time-total');
398+
this.$.uiDisplayTimeDown = DOM.selectDom('#'+this.CONFIG.id+' .ui-time-down');
399+
this.$.uiDisplayTimePar = DOM.selectDom('#'+this.CONFIG.id+' .ui-time-par');
400+
this.$.uiDisplayPoster = DOM.selectDom('#'+this.CONFIG.id+' .ui-poster');
401+
this.$.uiDisplayPosterBg = DOM.selectDom('#'+this.CONFIG.id+' .ui-poster-background');
402+
this.$.uiDisplayName = DOM.selectDom('#'+this.CONFIG.id+' .ui-name');
403+
404+
this.$.uiSeekbarVol = DOM.selectDom('#'+this.CONFIG.id+' .ui-seekbar-vol');
405+
this.$.uiSeekbarVolBg = DOM.selectDom('#'+this.CONFIG.id+' .ui-seekbar-vol .ui-seekbar-vol-bg');
406+
this.$.uiSeekbarVolCover = DOM.selectDom('#'+this.CONFIG.id+' .ui-seekbar-vol span');
407+
this.$.uiSeekbarTime = DOM.selectDom('#'+this.CONFIG.id+' .ui-seekbar-time');
408+
this.$.uiSeekbarTimeBg = DOM.selectDom('#'+this.CONFIG.id+' .ui-seekbar-time .ui-seekbar-time-bg');
409+
this.$.uiSeekbarTimeCover = DOM.selectDom('#'+this.CONFIG.id+' .ui-seekbar-time span');
410+
411+
this.$.uiBtnChange = DOM.selectDom('#'+this.CONFIG.id+' .ui-btn-change');
416412

417413
this.$.uiBtnDataId = DOM.selectDom('[data-PMB-id]');
418414
}
@@ -629,10 +625,8 @@ export class PLAYER_MODULE_BRIGHTCOVE implements PlayerModuleBrightcoveInterface
629625
// update player data. (ms)
630626
if(this.$.uiDisplayTime) DOM.setHtml( this.$.uiDisplayTime, this.GetTime()+'/'+this.GetTimeMax() );
631627
if(this.$.uiDisplayTimeNow) DOM.setHtml( this.$.uiDisplayTimeNow, this.GetTime() );
632-
if(this.$.uiDisplayTimeTotal) DOM.setHtml( this.$.uiDisplayTimeTotal, this.GetTimeMax() );
633628
if(this.$.uiDisplayTimeDown) DOM.setHtml( this.$.uiDisplayTimeDown, this.GetTimeDown() );
634-
if(this.$.uiBtnChangeDisplayTime) DOM.setHtml( this.$.uiBtnChangeDisplayTime, this.GetTime()+'/'+this.GetTimeMax() );
635-
if(this.$.uiBtnChangeDisplayTimeDown) DOM.setHtml( this.$.uiBtnChangeDisplayTimeDown, this.GetTimeDown() );
629+
if(this.$.uiDisplayTimeTotal) DOM.setHtml( this.$.uiDisplayTimeTotal, this.GetTimeMax() );
636630

637631
// update play time. (%)
638632
if(this.$.uiDisplayTimePar) DOM.setHtml( this.$.uiDisplayTimePar, this.GetTimePar() );
@@ -651,12 +645,10 @@ export class PLAYER_MODULE_BRIGHTCOVE implements PlayerModuleBrightcoveInterface
651645
}
652646
} else {
653647
// update player data. (ms)
654-
if(this.$.uiDisplayTime) DOM.setHtml( this.$.uiDisplayTime, '00:00' );
648+
if(this.$.uiDisplayTime) DOM.setHtml( this.$.uiDisplayTime, '00:00/00:00' );
655649
if(this.$.uiDisplayTimeNow) DOM.setHtml( this.$.uiDisplayTimeNow, '00:00' );
656-
if(this.$.uiDisplayTimeTotal) DOM.setHtml( this.$.uiDisplayTimeTotal, '00:00' );
657650
if(this.$.uiDisplayTimeDown) DOM.setHtml( this.$.uiDisplayTimeDown, '00:00' );
658-
if(this.$.uiBtnChangeDisplayTime) DOM.setHtml( this.$.uiBtnChangeDisplayTime, '00:00' );
659-
if(this.$.uiBtnChangeDisplayTimeDown) DOM.setHtml( this.$.uiBtnChangeDisplayTimeDown, '00:00' );
651+
if(this.$.uiDisplayTimeTotal) DOM.setHtml( this.$.uiDisplayTimeTotal, '00:00' );
660652

661653
// update play time. (%)
662654
if(this.$.uiDisplayTimePar) DOM.setHtml( this.$.uiDisplayTimePar, '0%' );
@@ -824,7 +816,7 @@ export class PLAYER_MODULE_BRIGHTCOVE implements PlayerModuleBrightcoveInterface
824816
}
825817

826818
GetTimeDown(){
827-
let _countDownTime = this.Player.duration() - this.Player.currentTime();
819+
let _countDownTime = this.Player.duration() - Math.floor(this.Player.currentTime());
828820
let _m_down = PLAYER_MODULE_BRIGHTCOVE.parseNumber(Math.floor(_countDownTime / 60));
829821
let _s_down = PLAYER_MODULE_BRIGHTCOVE.parseNumber(Math.floor(_countDownTime % 60));
830822
// @ts-ignore
@@ -876,7 +868,7 @@ export class PLAYER_MODULE_BRIGHTCOVE implements PlayerModuleBrightcoveInterface
876868
if(path){
877869
this.Player.poster(path);
878870
} else {
879-
if(this.CONFIG.poster != false) this.state.poster = this.Player.poster();
871+
if(this.CONFIG.poster != false) this.state.poster = this.GetPoster();
880872

881873
if(this.$.uiDisplayPoster){
882874
if(this.CONFIG.mode == 'audio'){

src/view-dom.ts

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,25 @@ export let viewPlayerMain = `
1818
`;
1919

2020
export let viewPlayerUi = `
21-
<div class="display_time">00:00</div>
22-
<div class="display_time_now">00</div>
23-
<div class="display_time_total">00</div>
24-
<div class="display_time_par">0%</div>
25-
<button class="btn_play btn">play</button>
26-
<button class="btn_pause btn">pause</button>
27-
<button class="btn_stop btn">stop</button>
28-
<button class="btn_mute btn">mute</button>
29-
<div class="seekbar_time"><div class="seekbar_time_bg"></div><span></span></div>
30-
<div class="seekbar_vol"><div class="seekbar_vol_bg"></div><span></span></div>
31-
<button class="btn_volon btn">volume on</button>
32-
<button class="btn_voloff btn">volume off</button>
33-
<div class="display_poster"><img src="" alt=""></div>
34-
<div class="display_poster_background"></div>
35-
<div class="display_name"></div>
21+
<div class="ui-time"></div>
22+
<div class="ui-time-now"></div>
23+
<div class="ui-time-down"></div>
24+
<div class="ui-time-total"></div>
25+
<div class="ui-time-par"></div>
26+
27+
<button class="ui-btn-play btn">play</button>
28+
<button class="ui-btn-pause btn">pause</button>
29+
<button class="ui-btn-stop btn">stop</button>
30+
<button class="ui-btn-mute btn">mute</button>
31+
32+
<div class="ui-seekbar-time"><div class="ui-seekbar-time-bg"></div><span></span></div>
33+
<div class="ui-seekbar-vol"><div class="ui-seekbar-vol-bg"></div><span></span></div>
34+
35+
<button class="ui-btn-volon btn">volume on</button>
36+
<button class="ui-btn-voloff btn">volume off</button>
37+
38+
<div class="ui-poster"><img src="" alt=""></div>
39+
<div class="ui-poster-background"></div>
40+
<div class="ui-name"></div>
3641
`;
3742

0 commit comments

Comments
 (0)