spectatr-player-sdk/dist/collection/components/utils/event-handlers.js

A custom video player built with Stencil with Shaka Player integration

import { checkForQuiz } from "./quiz-handler";
import { startProgressUpdate, stopProgressUpdate } from "./control-utils";
import { resetControlsTimeout } from "./ui-utils";
import { setupTracks } from "./tracker-util";
export function setupEventListeners(component) {
    const { videoElement, hostElement } = component;
    if (!videoElement)
        return;
    videoElement.addEventListener('loadedmetadata', () => {
        if (component.player.isLive)
            return;
        component.duration = videoElement.duration;
    });
    videoElement.addEventListener('timeupdate', () => {
        component.currentTime = videoElement.currentTime;
        // if (component.isLive && component.isDvrEnabled) {
        //   component.duration = component.player.seekRange().end;
        // }
        checkForQuiz(component);
    });
    videoElement.addEventListener('play', () => {
        component.isPlaying = true;
        component.hasVideoStarted = true;
        startProgressUpdate(component);
        component.analyticsTracker.startProgressTracking();
    });
    videoElement.addEventListener('ended', () => {
        if (!component.isLive && component.autoPlay && !!component.nextVideoId) {
            component.setVideoId && component.setVideoId(component.nextVideoId);
        }
    });
    videoElement.addEventListener('pause', () => {
        component.isPlaying = false;
        stopProgressUpdate(component);
        component.analyticsTracker.stopProgressTracking();
    });
    videoElement.addEventListener('ended', () => {
        component.hasVideoStarted = true;
        component.analyticsTracker.stopProgressTracking();
        component.videoCompleted.emit();
        window.parent.postMessage({
            type: 'ON_VIDEO_COMPLETE',
        }, '*');
    });
    videoElement.addEventListener('volumechange', () => {
        component.volume = videoElement.volume;
        component.isMuted = videoElement.muted;
    });
    hostElement.addEventListener('mousemove', () => {
        component.showControls = true;
        resetControlsTimeout(component);
    });
    hostElement.addEventListener('mouseleave', () => {
        if (component.isPlaying)
            component.showControls = false;
    });
    hostElement.addEventListener('click', () => {
        component.showControls = !component.showControls;
        if (component.showControls)
            resetControlsTimeout(component);
    });
    // Stop progress tracking when user leaves the page
    window.addEventListener('beforeunload', () => {
        if (component.hasVideoStarted && component.isPlaying) {
            component.analyticsTracker.stopProgressTracking();
        }
    });
}
export function setUpPlayerEventListener(component) {
    const { videoElement, player } = component;
    if (!videoElement)
        return;
    player.addEventListener('trackschanged', () => setupTracks(component));
    player.addEventListener('error', error => {
        console.error('Shaka Player error', error);
        component.videoError.emit('Shaka Player error');
    });
    player.addEventListener('buffering', event => {
        if (event.buffering) {
            component.isLoading = true;
        }
        else {
            component.isLoading = false;
        }
    });
}
//# sourceMappingURL=event-handlers.js.map