Skip to content

Commit 3cc2fc7

Browse files
yama-devyama-dev
authored
Merge pull request #30 from yama-dev/v2.1.0
V2.1.0
2 parents a5f7d07 + 2213f41 commit 3cc2fc7

File tree

4 files changed

+74
-134
lines changed

4 files changed

+74
-134
lines changed

‎dist/js-player-module-brightcove.js

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

‎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": "2.0.12",
3+
"version": "2.1.0",
44
"description": "Brightcove custom player using the Brightcove Player API.",
55
"keywords": [
66
"Brightcove",

‎sample/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<div class="row mt-3">
2828
<div class="col-md-1"></div>
2929
<div class="col-md-10">
30-
<h2 class="mb-3">PLAYER MODULE BRIGHTCOVE v2.0.12</h2>
30+
<h2 class="mb-3">PLAYER MODULE BRIGHTCOVE v2.1.0</h2>
3131

3232
<p>Brightcove custom player using the Brightcove Player API.</p>
3333

‎src/js-player-module-brightcove.js

Lines changed: 69 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
/*!
22
* JS PLAYER MODULE BRIGHTCOVE (JavaScript Library)
33
* js-player-module-brightcove.js
4-
* Version 2.0.12
4+
* Version 2.1.0
55
* Repository https://github.com/yama-dev/js-player-module-brightcove
66
* Copyright yama-dev
77
* Licensed under the MIT license.
88
*/
99

1010
import { viewPlayerScriptcode, viewPlayer, viewPlayerUi, viewPlayerStyle } from './view.js';
1111

12-
class PLAYER_MODULE_BRIGHTCOVE {
12+
export class PLAYER_MODULE_BRIGHTCOVE {
1313

1414
constructor(options = {}){
1515

1616
// Set Version.
17-
this.VERSION = '2.0.12';
17+
this.VERSION = '2.1.0';
1818

1919
// Use for discrimination by URL.
2020
this.currentUrl = location.href;
@@ -39,9 +39,6 @@ class PLAYER_MODULE_BRIGHTCOVE {
3939
ui_default_css : options.ui_default_css === false ? false : true,
4040
stop_outfocus : options.stop_outfocus === true ? true : false,
4141
poster : options.poster||null,
42-
ui_round : options.ui_round||null,
43-
ui_round_num : options.ui_round_num||146,
44-
ui_round_color : options.ui_round_color||'#696969',
4542
style_text : options.style_text||'',
4643
other : options.other||''
4744
}
@@ -307,10 +304,6 @@ class PLAYER_MODULE_BRIGHTCOVE {
307304
this.$uiBtnChange = document.querySelectorAll('#'+this.config.id+' .btn_change') ? document.querySelectorAll('#'+this.config.id+' .btn_change') : document.createElement('div');
308305
this.$uiBtnChangeDisplayTime = document.querySelector('#'+this.config.id+' .display_time') ? document.querySelector('#'+this.config.id+' .display_time') : document.createElement('div');
309306
this.$uiBtnChangeDisplayTimeDown = document.querySelector('#'+this.config.id+' .display_time_down') ? document.querySelector('#'+this.config.id+' .display_time_down') : document.createElement('div');
310-
this.$uiBtnRound = document.querySelector('#'+this.config.id+' .btn_round') ? document.querySelector('#'+this.config.id+' .btn_round') : document.createElement('div');
311-
this.$uiBtnRoundSpan = document.querySelector('#'+this.config.id+' .btn_round span') ? document.querySelector('#'+this.config.id+' .btn_round span') : document.createElement('div');
312-
this.$uiBtnRoundSvg = document.querySelector('#'+this.config.id+' .btn_roundsvg') ? document.querySelector('#'+this.config.id+' .btn_roundsvg') : document.createElement('div');
313-
this.$uiBtnRoundSvgPath = document.querySelector('#'+this.config.id+' .btn_roundsvg .btn_roundsvg__path') ? document.querySelector('#'+this.config.id+' .btn_roundsvg .btn_roundsvg__path') : document.createElement('div');
314307
}
315308

316309
EventPlay(){
@@ -404,36 +397,9 @@ class PLAYER_MODULE_BRIGHTCOVE {
404397
}
405398
}
406399

407-
EventSeekbarVol(){
408-
if(this.$uiSeekbarVol !== null){
409-
let _flag = false;
410-
this.$uiSeekbarVolCover.style.width = 100 + '%';
411-
this.$uiSeekbarVol.addEventListener('mousedown', (event) => {
412-
_flag = true;
413-
let _currentWidth = this.$uiSeekbarVol.clientWidth;
414-
let _clickPosition = this.$uiSeekbarVol.getBoundingClientRect().left;
415-
let _targetWidth = (event.pageX - _clickPosition) / _currentWidth;
416-
this.Player.volume(_targetWidth);
417-
this.config.volume = _targetWidth;
418-
});
419-
this.$uiSeekbarVol.addEventListener('mouseleave', (event) => {
420-
_flag = false;
421-
});
422-
this.$uiSeekbarVol.addEventListener('mouseup', (event) => {
423-
_flag = false;
424-
});
425-
this.$uiSeekbarVol.addEventListener('mousemove', (event) => {
426-
if(_flag === true){
427-
let _currentWidth = this.$uiSeekbarVol.clientWidth;
428-
let _clickPosition = this.$uiSeekbarVol.getBoundingClientRect().left;
429-
let _targetWidth = (event.pageX - _clickPosition) / _currentWidth;
430-
this.Player.volume(_targetWidth);
431-
this.config.volume = _targetWidth;
432-
}
433-
});
434-
}
435-
}
436-
400+
/**
401+
* When dragging a seek bar(time).
402+
*/
437403
EventSeekbarTime(){
438404
let _that = this;
439405

@@ -456,36 +422,12 @@ class PLAYER_MODULE_BRIGHTCOVE {
456422
});
457423

458424
this.$uiSeekbarTime.addEventListener('mouseleave', (event) => {
459-
if(_flag === true){
460-
this.Player.play();
461-
if(this.$uiBtnPlay !== null && this.$uiBtnPlay.length !== 0){
462-
for (var i = 0; i < this.$uiBtnPlay.length; ++i) {
463-
this.$uiBtnPlay[i].addClass('active');
464-
}
465-
}
466-
if(this.$uiBtnPause !== null && this.$uiBtnPause.length !== 0){
467-
for (var i = 0; i < this.$uiBtnPause.length; ++i) {
468-
this.$uiBtnPause[i].addClass('active');
469-
}
470-
}
471-
}
425+
if(_flag === true) _that.Play();
472426
_flag = false;
473427
});
474428

475429
this.$uiSeekbarTime.addEventListener('mouseup', (event) => {
476-
if(_flag === true){
477-
this.Player.play();
478-
if(this.$uiBtnPlay !== null && this.$uiBtnPlay.length !== 0){
479-
for (var i = 0; i < this.$uiBtnPlay.length; ++i) {
480-
this.$uiBtnPlay[i].addClass('active');
481-
}
482-
}
483-
if(this.$uiBtnPause !== null && this.$uiBtnPause.length !== 0){
484-
for (var i = 0; i < this.$uiBtnPause.length; ++i) {
485-
this.$uiBtnPause[i].addClass('active');
486-
}
487-
}
488-
}
430+
if(_flag === true) _that.Play();
489431
_flag = false;
490432
});
491433

@@ -501,54 +443,37 @@ class PLAYER_MODULE_BRIGHTCOVE {
501443
});
502444

503445
}
504-
if(this.$uiBtnRound !== null){
505-
this.$uiBtnRound.addEventListener('click', (event) => {
506-
_that.Pause();
507-
let _currentWidth = this.$uiBtnRound.clientWidth;
508-
let _currentWidthHalf = _currentWidth / 2;
509-
let _clickPositionLeft = this.$uiBtnRound.getBoundingClientRect().left;
510-
let _clickPositionTop = this.$uiBtnRound.getBoundingClientRect().top;
511-
let _x = event.pageX - _clickPositionLeft - _currentWidthHalf;
512-
let _y = event.pageY - (_clickPositionTop + window.pageYOffset) - _currentWidthHalf;
513-
let _deg = Math.atan2( _y, _x ) * 180 / Math.PI;
514-
if(_deg >= -90 && _deg <= 0){
515-
_deg = _deg + 90;
516-
} else if(_deg >= 0 && _deg <= 90){
517-
_deg = _deg + 90;
518-
} else if(_deg >= 90 && _deg <= 180){
519-
_deg = _deg + 90;
520-
} else if(_deg >= -180 && _deg <= -90){
521-
_deg = _deg + 360 + 90;
522-
}
523-
// this.$uiSeekbarTimeCover.style.width = (_targetWidth * 100) + '%';
524-
this.Player.currentTime(this.Player.duration() * (_deg / 360) );
525-
this.$uiBtnRoundSpan.style.webkitTransform = 'rotate('+_deg+'deg)';
526-
this.Player.play();
446+
}
447+
448+
/**
449+
* When dragging a seek bar(volume).
450+
*/
451+
EventSeekbarVol(){
452+
if(this.$uiSeekbarVol !== null){
453+
let _flag = false;
454+
this.$uiSeekbarVolCover.style.width = 100 + '%';
455+
this.$uiSeekbarVol.addEventListener('mousedown', (event) => {
456+
_flag = true;
457+
let _currentWidth = this.$uiSeekbarVol.clientWidth;
458+
let _clickPosition = this.$uiSeekbarVol.getBoundingClientRect().left;
459+
let _targetWidth = (event.pageX - _clickPosition) / _currentWidth;
460+
this.Player.volume(_targetWidth);
461+
this.config.volume = _targetWidth;
527462
});
528-
}
529-
if(this.$uiBtnRoundSvg !== null){
530-
let _roundNum = this.$uiBtnRoundSvg.clientWidth * 3.14;
531-
this.$uiBtnRoundSvg.addEventListener('click', (event) => {
532-
_that.Pause();
533-
let _currentWidth = this.$uiBtnRoundSvg.clientWidth;
534-
let _currentWidthHalf = _currentWidth / 2;
535-
let _clickPositionLeft = this.$uiBtnRoundSvg.getBoundingClientRect().left;
536-
let _clickPositionTop = this.$uiBtnRoundSvg.getBoundingClientRect().top;
537-
let _x = event.pageX - _clickPositionLeft - _currentWidthHalf;
538-
let _y = event.pageY - (_clickPositionTop + window.pageYOffset) - _currentWidthHalf;
539-
let _deg = Math.atan2( _y, _x ) * 180 / Math.PI;
540-
if(_deg >= -90 && _deg <= 0){
541-
_deg = _deg + 90;
542-
} else if(_deg >= 0 && _deg <= 90){
543-
_deg = _deg + 90;
544-
} else if(_deg >= 90 && _deg <= 180){
545-
_deg = _deg + 90;
546-
} else if(_deg >= -180 && _deg <= -90){
547-
_deg = _deg + 360 + 90;
463+
this.$uiSeekbarVol.addEventListener('mouseleave', (event) => {
464+
_flag = false;
465+
});
466+
this.$uiSeekbarVol.addEventListener('mouseup', (event) => {
467+
_flag = false;
468+
});
469+
this.$uiSeekbarVol.addEventListener('mousemove', (event) => {
470+
if(_flag === true){
471+
let _currentWidth = this.$uiSeekbarVol.clientWidth;
472+
let _clickPosition = this.$uiSeekbarVol.getBoundingClientRect().left;
473+
let _targetWidth = (event.pageX - _clickPosition) / _currentWidth;
474+
this.Player.volume(_targetWidth);
475+
this.config.volume = _targetWidth;
548476
}
549-
this.Player.currentTime(this.Player.duration() * (_deg / 360) );
550-
this.$uiBtnRoundSvgPath.style.cssText = 'stroke-dashoffset: '+(_roundNum + 10 - _deg / 365 * _roundNum)+';';
551-
this.Player.play();
552477
});
553478
}
554479
}
@@ -583,9 +508,6 @@ class PLAYER_MODULE_BRIGHTCOVE {
583508

584509
// シークバーの更新(％)
585510
this.$uiSeekbarTimeCover.style.width = this.GetTimePar();
586-
this.$uiBtnRoundSpan.style.webkitTransform = 'rotate('+(360 * this.GetTimeRatio())+'deg)';
587-
let _roundNum = this.$uiBtnRoundSvg.clientWidth * 3.14 !== 0 ? this.$uiBtnRoundSvg.clientWidth * 3.14 : this.config.ui_round_num * 3.14;
588-
this.$uiBtnRoundSvgPath.style.cssText = 'stroke-dashoffset: '+(_roundNum + 10 - (360 * this.GetTimeRatio()) / 365 * _roundNum)+';';
589511
} else {
590512
// 再生時間の更新(分秒)
591513
this.$uiDisplayTime.innerHTML = '00:00';
@@ -600,8 +522,6 @@ class PLAYER_MODULE_BRIGHTCOVE {
600522

601523
// シークバーの更新(％)
602524
this.$uiSeekbarTimeCover.style.width = '0%';
603-
this.$uiBtnRoundSpan.style.webkitTransform = 'rotate(0deg)';
604-
this.$uiBtnRoundSvgPath.style.cssText = 'stroke-dashoffset: 0;';
605525
}
606526

607527
}
@@ -610,21 +530,39 @@ class PLAYER_MODULE_BRIGHTCOVE {
610530
let _that = this;
611531
if(this.$uiBtnPlay !== null && this.$uiBtnPlay.length !== 0){
612532
if(this.Player.paused()){
613-
// 停止状態の場合
533+
// When the player is stopped.
534+
614535
this.Player.play();
536+
537+
// Add className Play-Button.
615538
if(this.$uiBtnPlay !== null && this.$uiBtnPlay.length !== 0){
616539
for (var i = 0; i < this.$uiBtnPlay.length; ++i) {
617540
this.$uiBtnPlay[i].addClass('active');
618541
}
619542
}
543+
544+
// Add className Pause-Button.
620545
if(this.$uiBtnPause !== null && this.$uiBtnPause.length !== 0){
621546
for (var i = 0; i < this.$uiBtnPause.length; ++i) {
622547
this.$uiBtnPause[i].addClass('active');
623548
}
624549
}
550+
551+
// Add className MediaChange-Button.
552+
let dataIdElemAll = Array.prototype.slice.call( document.querySelectorAll('[data-PMB-id]') );
553+
if(dataIdElemAll){
554+
dataIdElemAll.forEach(function(elem,i){
555+
if(_that.config.videoid == elem.getAttribute('data-PMB-id')){
556+
elem.addClass('active');
557+
}
558+
});
559+
}
560+
625561
} else {
626-
// 再生状態の場合
562+
// When the player is playing.
563+
627564
_that.Pause();
565+
628566
if(this.$uiBtnPlay !== null && this.$uiBtnPlay.length !== 0){
629567
for (var i = 0; i < this.$uiBtnPlay.length; ++i) {
630568
this.$uiBtnPlay[i].removeClass('active');
@@ -646,21 +584,21 @@ class PLAYER_MODULE_BRIGHTCOVE {
646584
this.Player.pause();
647585
this.Player.currentTime(0);
648586

649-
// 再生中のPLAYボタンのhtml-classを削除
587+
// Remove className Play-Button.
650588
if(this.$uiBtnPlay !== null && this.$uiBtnPlay.length !== 0){
651589
for (var i = 0; i < this.$uiBtnPlay.length; ++i) {
652590
this.$uiBtnPlay[i].removeClass('active');
653591
}
654592
}
655593

656-
// 再生中のPAUSEボタンのhtml-classを削除
594+
// Remove className Pause-Button.
657595
if(this.$uiBtnPause !== null && this.$uiBtnPause.length !== 0){
658596
for (var i = 0; i < this.$uiBtnPause.length; ++i) {
659597
this.$uiBtnPause[i].removeClass('active');
660598
}
661599
}
662600

663-
// メディア変更ボタンのhtml-classを削除
601+
// Remove className MediaChange-Button.
664602
let clickElemAll = Array.prototype.slice.call( document.querySelectorAll('[data-PMB-id]') );
665603
if(clickElemAll){
666604
clickElemAll.forEach(function(elem,i){
@@ -676,21 +614,21 @@ class PLAYER_MODULE_BRIGHTCOVE {
676614

677615
this.Player.pause();
678616

679-
// 再生中のPLAYボタンのhtml-classを削除
617+
// Remove className Play-Button.
680618
if(this.$uiBtnPlay !== null && this.$uiBtnPlay.length !== 0){
681619
for (var i = 0; i < this.$uiBtnPlay.length; ++i) {
682620
this.$uiBtnPlay[i].removeClass('active');
683621
}
684622
}
685623

686-
// 再生中のPAUSEボタンのhtml-classを削除
624+
// Remove className Pause-Button.
687625
if(this.$uiBtnPause !== null && this.$uiBtnPause.length !== 0){
688626
for (var i = 0; i < this.$uiBtnPause.length; ++i) {
689627
this.$uiBtnPause[i].removeClass('active');
690628
}
691629
}
692630

693-
// メディア変更ボタンのhtml-classを削除
631+
// Remove className MediaChange-Button.
694632
let clickElemAll = Array.prototype.slice.call( document.querySelectorAll('[data-PMB-id]') );
695633
if(clickElemAll){
696634
clickElemAll.forEach(function(elem,i){
@@ -702,6 +640,12 @@ class PLAYER_MODULE_BRIGHTCOVE {
702640
if(this.on.Pause && typeof(this.on.Pause) === 'function') this.on.Pause();
703641
}
704642

643+
/**
644+
* When Media change.
645+
*
646+
* id | str | media-id.
647+
* callback | function | callback function after changed.
648+
*/
705649
Change(id, callback){
706650
let _that = this;
707651

@@ -975,7 +919,3 @@ class PLAYER_MODULE_BRIGHTCOVE {
975919
}
976920

977921
}
978-
979-
export default PLAYER_MODULE_BRIGHTCOVE;
980-
981-
window.PLAYER_MODULE_BRIGHTCOVE = PLAYER_MODULE_BRIGHTCOVE;

0 commit comments

Comments
 (0)