Skip to content

Commit 25f2b4f

Browse files
yama-devyama-dev
committed
adjust: シークバー変更時にメディアチェンジボタンが連動しない挙動を調整
1 parent 881993e commit 25f2b4f

File tree

1 file changed

+43
-102
lines changed

1 file changed

+43
-102
lines changed

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

Lines changed: 43 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -397,36 +397,6 @@ export class PLAYER_MODULE_BRIGHTCOVE {
397397
}
398398
}
399399

400-
EventSeekbarVol(){
401-
if(this.$uiSeekbarVol !== null){
402-
let _flag = false;
403-
this.$uiSeekbarVolCover.style.width = 100 + '%';
404-
this.$uiSeekbarVol.addEventListener('mousedown', (event) => {
405-
_flag = true;
406-
let _currentWidth = this.$uiSeekbarVol.clientWidth;
407-
let _clickPosition = this.$uiSeekbarVol.getBoundingClientRect().left;
408-
let _targetWidth = (event.pageX - _clickPosition) / _currentWidth;
409-
this.Player.volume(_targetWidth);
410-
this.config.volume = _targetWidth;
411-
});
412-
this.$uiSeekbarVol.addEventListener('mouseleave', (event) => {
413-
_flag = false;
414-
});
415-
this.$uiSeekbarVol.addEventListener('mouseup', (event) => {
416-
_flag = false;
417-
});
418-
this.$uiSeekbarVol.addEventListener('mousemove', (event) => {
419-
if(_flag === true){
420-
let _currentWidth = this.$uiSeekbarVol.clientWidth;
421-
let _clickPosition = this.$uiSeekbarVol.getBoundingClientRect().left;
422-
let _targetWidth = (event.pageX - _clickPosition) / _currentWidth;
423-
this.Player.volume(_targetWidth);
424-
this.config.volume = _targetWidth;
425-
}
426-
});
427-
}
428-
}
429-
430400
/**
431401
* When dragging a seek bar(time).
432402
*/
@@ -452,36 +422,12 @@ export class PLAYER_MODULE_BRIGHTCOVE {
452422
});
453423

454424
this.$uiSeekbarTime.addEventListener('mouseleave', (event) => {
455-
if(_flag === true){
456-
this.Player.play();
457-
if(this.$uiBtnPlay !== null && this.$uiBtnPlay.length !== 0){
458-
for (var i = 0; i < this.$uiBtnPlay.length; ++i) {
459-
this.$uiBtnPlay[i].addClass('active');
460-
}
461-
}
462-
if(this.$uiBtnPause !== null && this.$uiBtnPause.length !== 0){
463-
for (var i = 0; i < this.$uiBtnPause.length; ++i) {
464-
this.$uiBtnPause[i].addClass('active');
465-
}
466-
}
467-
}
425+
if(_flag === true) _that.Play();
468426
_flag = false;
469427
});
470428

471429
this.$uiSeekbarTime.addEventListener('mouseup', (event) => {
472-
if(_flag === true){
473-
this.Player.play();
474-
if(this.$uiBtnPlay !== null && this.$uiBtnPlay.length !== 0){
475-
for (var i = 0; i < this.$uiBtnPlay.length; ++i) {
476-
this.$uiBtnPlay[i].addClass('active');
477-
}
478-
}
479-
if(this.$uiBtnPause !== null && this.$uiBtnPause.length !== 0){
480-
for (var i = 0; i < this.$uiBtnPause.length; ++i) {
481-
this.$uiBtnPause[i].addClass('active');
482-
}
483-
}
484-
}
430+
if(_flag === true) _that.Play();
485431
_flag = false;
486432
});
487433

@@ -497,54 +443,37 @@ export class PLAYER_MODULE_BRIGHTCOVE {
497443
});
498444

499445
}
500-
if(this.$uiBtnRound !== null){
501-
this.$uiBtnRound.addEventListener('click', (event) => {
502-
_that.Pause();
503-
let _currentWidth = this.$uiBtnRound.clientWidth;
504-
let _currentWidthHalf = _currentWidth / 2;
505-
let _clickPositionLeft = this.$uiBtnRound.getBoundingClientRect().left;
506-
let _clickPositionTop = this.$uiBtnRound.getBoundingClientRect().top;
507-
let _x = event.pageX - _clickPositionLeft - _currentWidthHalf;
508-
let _y = event.pageY - (_clickPositionTop + window.pageYOffset) - _currentWidthHalf;
509-
let _deg = Math.atan2( _y, _x ) * 180 / Math.PI;
510-
if(_deg >= -90 && _deg <= 0){
511-
_deg = _deg + 90;
512-
} else if(_deg >= 0 && _deg <= 90){
513-
_deg = _deg + 90;
514-
} else if(_deg >= 90 && _deg <= 180){
515-
_deg = _deg + 90;
516-
} else if(_deg >= -180 && _deg <= -90){
517-
_deg = _deg + 360 + 90;
518-
}
519-
// this.$uiSeekbarTimeCover.style.width = (_targetWidth * 100) + '%';
520-
this.Player.currentTime(this.Player.duration() * (_deg / 360) );
521-
this.$uiBtnRoundSpan.style.webkitTransform = 'rotate('+_deg+'deg)';
522-
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;
523462
});
524-
}
525-
if(this.$uiBtnRoundSvg !== null){
526-
let _roundNum = this.$uiBtnRoundSvg.clientWidth * 3.14;
527-
this.$uiBtnRoundSvg.addEventListener('click', (event) => {
528-
_that.Pause();
529-
let _currentWidth = this.$uiBtnRoundSvg.clientWidth;
530-
let _currentWidthHalf = _currentWidth / 2;
531-
let _clickPositionLeft = this.$uiBtnRoundSvg.getBoundingClientRect().left;
532-
let _clickPositionTop = this.$uiBtnRoundSvg.getBoundingClientRect().top;
533-
let _x = event.pageX - _clickPositionLeft - _currentWidthHalf;
534-
let _y = event.pageY - (_clickPositionTop + window.pageYOffset) - _currentWidthHalf;
535-
let _deg = Math.atan2( _y, _x ) * 180 / Math.PI;
536-
if(_deg >= -90 && _deg <= 0){
537-
_deg = _deg + 90;
538-
} else if(_deg >= 0 && _deg <= 90){
539-
_deg = _deg + 90;
540-
} else if(_deg >= 90 && _deg <= 180){
541-
_deg = _deg + 90;
542-
} else if(_deg >= -180 && _deg <= -90){
543-
_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;
544476
}
545-
this.Player.currentTime(this.Player.duration() * (_deg / 360) );
546-
this.$uiBtnRoundSvgPath.style.cssText = 'stroke-dashoffset: '+(_roundNum + 10 - _deg / 365 * _roundNum)+';';
547-
this.Player.play();
548477
});
549478
}
550479
}
@@ -618,10 +547,22 @@ export class PLAYER_MODULE_BRIGHTCOVE {
618547
this.$uiBtnPause[i].addClass('active');
619548
}
620549
}
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+
621561
} else {
622562
// When the player is playing.
623563

624564
_that.Pause();
565+
625566
if(this.$uiBtnPlay !== null && this.$uiBtnPlay.length !== 0){
626567
for (var i = 0; i < this.$uiBtnPlay.length; ++i) {
627568
this.$uiBtnPlay[i].removeClass('active');

0 commit comments

Comments
 (0)