Skip to content

Commit

Permalink
event utility in superclass to reduce the clutter
Browse files Browse the repository at this point in the history
  • Loading branch information
@stamat
stamat committed Nov 6, 2023
1 parent 6152902 commit da07679
Show file tree
Hide file tree
Showing 7 changed files with 66 additions and 59 deletions.
59 changes: 31 additions & 28 deletions jquery.youtube-background.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions jquery.youtube-background.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion jquery.youtube-background.min.js
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions src/lib/super-video-background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,10 @@ export class SuperVideoBackground {
return this.element;
}

dispatchEvent(name) {
this.element.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: this }));
}

mobileLowBatteryAutoplayHack() {
if (!this.params['force-on-low-battery']) return;
if (!this.is_mobile && this.params.mobile) return;
Expand Down
18 changes: 9 additions & 9 deletions src/lib/video-background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class VideoBackground extends SuperVideoBackground {
this.duration = 0 || this.params['end-at'];

this.mobileLowBatteryAutoplayHack();
this.element.dispatchEvent(new CustomEvent('video-background-ready', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-ready');
}

generatePlayerElement() {
Expand Down Expand Up @@ -83,7 +83,7 @@ export class VideoBackground extends SuperVideoBackground {

updateState(state) {
this.currentState = state;
this.element.dispatchEvent(new CustomEvent('video-background-state-change', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-state-change');
}

/* ===== API ===== */
Expand All @@ -102,7 +102,7 @@ export class VideoBackground extends SuperVideoBackground {

onVideoTimeUpdate() {
this.currentTime = this.player.currentTime;
this.element.dispatchEvent(new CustomEvent('video-background-time-update', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-time-update');

if (this.currentTime >= this.duration) {
this.onVideoEnded();
Expand All @@ -115,12 +115,12 @@ export class VideoBackground extends SuperVideoBackground {
this.playerElement.style.opacity = 1;
}
this.updateState('playing');
this.element.dispatchEvent(new CustomEvent('video-background-play', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-play');
}

onVideoPause() {
this.updateState('paused');
this.element.dispatchEvent(new CustomEvent('video-background-pause', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-pause');
}

onVideoEnded() {
Expand All @@ -130,7 +130,7 @@ export class VideoBackground extends SuperVideoBackground {
this.seekTo(this.params['start-at']);
this.play();
}
this.element.dispatchEvent(new CustomEvent('video-background-ended', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-ended');
}

onVideoBuffering() {
Expand Down Expand Up @@ -190,21 +190,21 @@ export class VideoBackground extends SuperVideoBackground {
this.initialVolume = true;
this.setVolume(this.params.volume);
}
this.element.dispatchEvent(new CustomEvent('video-background-unmute', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-unmute');
}

mute() {
if (!this.player) return;
this.state.muted = true;

this.player.muted = true;
this.element.dispatchEvent(new CustomEvent('video-background-mute', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-mute');
}

setVolume(volume) {
if (!this.player) return;

this.player.volume = volume;
this.element.dispatchEvent(new CustomEvent('video-background-volume-change', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-volume-change');
}
}
18 changes: 9 additions & 9 deletions src/lib/vimeo-background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export class VimeoBackground extends SuperVideoBackground {

updateState(state) {
this.currentState = state;
this.element.dispatchEvent(new CustomEvent('video-background-state-change', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-state-change');
}

/* ===== API ===== */
Expand All @@ -110,7 +110,7 @@ export class VimeoBackground extends SuperVideoBackground {
});
}

this.element.dispatchEvent(new CustomEvent('video-background-ready', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-ready');
}

onVideoEnded() {
Expand All @@ -119,12 +119,12 @@ export class VimeoBackground extends SuperVideoBackground {
this.seekTo(this.params['start-at']);
this.player.play();
}
this.element.dispatchEvent(new CustomEvent('video-background-ended', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-ended');
}

onVideoTimeUpdate(event) {
this.currentTime = event.seconds;
this.element.dispatchEvent(new CustomEvent('video-background-time-update', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-time-update');

if (this.params['end-at'] && event.seconds >= this.params['end-at']) {
this.onVideoEnded();
Expand All @@ -151,12 +151,12 @@ export class VimeoBackground extends SuperVideoBackground {
}

this.updateState('playing');
this.element.dispatchEvent(new CustomEvent('video-background-play', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-play');
}

onVideoPause() {
this.updateState('paused');
this.element.dispatchEvent(new CustomEvent('video-background-pause', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-pause');
}

seekTo(time) {
Expand Down Expand Up @@ -196,21 +196,21 @@ export class VimeoBackground extends SuperVideoBackground {
this.setVolume(this.params.volume);
}
this.player.setMuted(false);
this.element.dispatchEvent(new CustomEvent('video-background-unmute', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-unmute');
}

mute() {
if (!this.player) return;
this.state.muted = true;

this.player.setMuted(true);
this.element.dispatchEvent(new CustomEvent('video-background-mute', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-mute');
}

setVolume(volume) {
if (!this.player) return;

this.player.setVolume(volume);
this.element.dispatchEvent(new CustomEvent('video-background-volume-change', { bubbles: true, detail: this }));
this.dispatchEvent('video-background-volume-change');
}
}
Loading

0 comments on commit da07679

Please sign in to comment.