@codercms/web-player 0.0.1

package/dist/core/VideoPlayer.js

@@ -0,0 +1,342 @@
+import { EventEmitter } from 'eventemitter3';
+import { HLSLoader, isHlsJsSupported } from './HLSLoader.js';
+import { LoaderEvents } from './LoaderInterface.js';
+import { BROWSER } from 'esm-env';
+export var PlayerEvents;
+(function (PlayerEvents) {
+    PlayerEvents["Play"] = "player.play";
+    PlayerEvents["Pause"] = "player.pause";
+    PlayerEvents["Ended"] = "player.ended";
+    PlayerEvents["Error"] = "player.error";
+    PlayerEvents["Playing"] = "player.playing";
+    PlayerEvents["LoadingStarted"] = "player.loadingStarted";
+    PlayerEvents["LoadingEnded"] = "player.loadingEnded";
+    PlayerEvents["PlaybackBufferingProgress"] = "player.bufferingProgress";
+    PlayerEvents["PlaybackDurationChange"] = "player.durationChange";
+    PlayerEvents["PlaybackTimeUpdate"] = "player.timeUpdate";
+    PlayerEvents["PlaybackRateChange"] = "player.playbackRateChange";
+    PlayerEvents["VolumeChange"] = "player.volumeChange";
+    PlayerEvents["MuteChange"] = "player.muteChange";
+    PlayerEvents["VolumeStateChange"] = "player.volumeStateChange";
+    PlayerEvents["QualityLevelsUpdated"] = "player.qualityLevelsUpdated";
+    PlayerEvents["QualityLevelSwitched"] = "player.qualityLevelSwitched";
+})(PlayerEvents || (PlayerEvents = {}));
+export var PlayerActions;
+(function (PlayerActions) {
+    PlayerActions["PlayItem"] = "player.playItem";
+})(PlayerActions || (PlayerActions = {}));
+export var Loader;
+(function (Loader) {
+    Loader[Loader["Native"] = 0] = "Native";
+    Loader[Loader["HLS"] = 1] = "HLS";
+    Loader[Loader["DASH"] = 2] = "DASH";
+})(Loader || (Loader = {}));
+export class VideoPlayer {
+    el;
+    emitter;
+    loadAbortController = null;
+    currentLoader = null;
+    hlsLoader = null;
+    _isLoading = false;
+    _duration = 0;
+    _paused = true;
+    _currentTime = 0;
+    _playbackRate = 0;
+    _muted = false;
+    _volume = 1;
+    _buffered = new Array();
+    _isAutoQuality = true;
+    _currentQualityLevel = null;
+    _qualityLevels = [];
+    constructor(el, emitter = new EventEmitter()) {
+        this.el = el;
+        this.emitter = emitter;
+        // Do nothing in SSR environment
+        if (!BROWSER) {
+            return;
+        }
+        this._paused = el.paused;
+        this._muted = el.muted;
+        this._volume = el.volume;
+        this._currentTime = el.currentTime;
+        this._playbackRate = el.playbackRate;
+        // Setup HLS.js loader
+        if (isHlsJsSupported()) {
+            // @ts-ignore
+            this.hlsLoader = new HLSLoader(this.emitter, this.el, {
+                progressive: true
+            });
+        }
+        this.emitter.on(LoaderEvents.QualityLevelsUpdated, (newLevels) => {
+            console.log('Quality levels updated', newLevels);
+            this._qualityLevels = newLevels;
+            this.emitter.emit(PlayerEvents.QualityLevelsUpdated, newLevels);
+        });
+        this.emitter.on(LoaderEvents.QualityLevelSwitched, (newLevelId) => {
+            const newLevel = this._qualityLevels.find((lvl) => lvl.id === newLevelId);
+            if (!newLevel) {
+                console.error(`Quality level switch to unknown level`, {
+                    newLevelId,
+                    levels: this._qualityLevels
+                });
+                return;
+            }
+            this._currentQualityLevel = newLevel;
+            this.emitter.emit(PlayerEvents.QualityLevelSwitched, newLevel);
+        });
+        this.emitter.on(LoaderEvents.QualityLevelsUpdated, () => { });
+        // this.emitter.on(PlayerEvents.Playing, () => {
+        // 	console.log('Playing...');
+        // });
+        //
+        // this.emitter.on(PlayerEvents.Play, () => {
+        // 	console.log('Play!');
+        // });
+        //
+        // this.emitter.on(PlayerEvents.Pause, () => {
+        // 	console.log('Pause!');
+        // });
+        //
+        // this.emitter.on(PlayerEvents.MuteChange, (muted: boolean) => {
+        // 	console.log('Mute change', { muted });
+        // });
+        //
+        // this.emitter.on(PlayerEvents.VolumeChange, (volume: number) => {
+        // 	console.log('Volume change', { volume });
+        // });
+        //
+        // this.emitter.on(PlayerEvents.PlaybackRateChange, (rate: number) => {
+        // 	console.log('Playback rate change', { rate });
+        // });
+        //
+        // this.emitter.on(PlayerEvents.LoadingStarted, () => {
+        // 	console.log('Video Loading...');
+        // });
+        //
+        // this.emitter.on(PlayerEvents.LoadingEnded, () => {
+        // 	console.log('Video Loaded...');
+        // });
+        this._registerVideoEvents();
+    }
+    _registerVideoEvents() {
+        this.el.addEventListener('play', () => {
+            this._paused = false;
+            this.emitter.emit(PlayerEvents.Play);
+        });
+        this.el.addEventListener('pause', () => this._onPause());
+        this.el.addEventListener('playing', () => {
+            // Playing event can occur before canplaythrough event, so send loaded event there too
+            this._onLoaded();
+            this.emitter.emit(PlayerEvents.Playing);
+        });
+        this.el.addEventListener('waiting', () => {
+            // Loading event is already sent
+            if (this._isLoading) {
+                return;
+            }
+            this._isLoading = true;
+            this.emitter.emit(PlayerEvents.LoadingStarted);
+        });
+        this.el.addEventListener('ended', () => this.emitter.emit(PlayerEvents.Ended));
+        this.el.addEventListener('progress', () => this._onProgress());
+        this.el.addEventListener('canplaythrough', () => {
+            this._onLoaded();
+        });
+        this.el.addEventListener('durationchange', () => {
+            let newDur = this.el.duration;
+            if (!isFinite(newDur) || isNaN(newDur)) {
+                newDur = 0;
+            }
+            if (this._duration !== newDur) {
+                this._duration = newDur;
+                this.emitter.emit(PlayerEvents.PlaybackDurationChange, newDur);
+            }
+        });
+        this.el.addEventListener('timeupdate', () => {
+            let newTime = this.el.currentTime;
+            if (!isFinite(newTime) || isNaN(newTime)) {
+                newTime = 0;
+            }
+            if (this._currentTime !== newTime) {
+                this._currentTime = newTime;
+                this.emitter.emit(PlayerEvents.PlaybackTimeUpdate, newTime);
+            }
+            // Buffered parts may not be dispatched in on progress event
+            // so take care that there is always fresh buffered parts
+            this._onProgress();
+        });
+        this.el.addEventListener('ratechange', () => {
+            const newRate = this.el.playbackRate;
+            if (this._playbackRate !== newRate) {
+                this._playbackRate = newRate;
+                this.emitter.emit(PlayerEvents.PlaybackRateChange, newRate);
+            }
+        });
+        this.el.addEventListener('volumechange', () => {
+            const newVol = this.el.volume;
+            const newMuted = this.el.muted;
+            const isVolChanged = this._volume !== newVol;
+            const isMuteChanged = this._muted !== newMuted;
+            if (isVolChanged) {
+                this._volume = newVol;
+                this.emitter.emit(PlayerEvents.VolumeChange, newVol);
+            }
+            if (isMuteChanged) {
+                this._muted = newMuted;
+                this.emitter.emit(PlayerEvents.MuteChange, newMuted);
+            }
+            if (isVolChanged || isMuteChanged) {
+                this.emitter.emit(PlayerEvents.VolumeStateChange, newVol, newMuted);
+            }
+        });
+        this.el.addEventListener('error', (ev) => {
+            this.emitter.emit(PlayerEvents.Error, ev.error ?? 'unknown playback error');
+        });
+    }
+    _onPause() {
+        this._paused = true;
+        this.emitter.emit(PlayerEvents.Pause);
+    }
+    _onProgress() {
+        const newBuf = this.el.buffered;
+        const parts = [];
+        if (newBuf.length !== this._buffered.length) {
+            for (let i = 0; i < newBuf.length; i++) {
+                parts.push({ start: newBuf.start(i), end: newBuf.end(i) });
+            }
+            this._buffered = parts;
+            this.emitter.emit(PlayerEvents.PlaybackBufferingProgress, parts);
+            return;
+        }
+        let isChanged = false;
+        for (let i = 0; i < newBuf.length; i++) {
+            const start = newBuf.start(i);
+            const end = newBuf.end(i);
+            isChanged = start !== this._buffered[i].start || end !== this._buffered[i].end;
+            parts.push({ start, end });
+        }
+        if (!isChanged) {
+            return;
+        }
+        this._buffered = parts;
+        this.emitter.emit(PlayerEvents.PlaybackBufferingProgress, parts);
+    }
+    _onLoaded() {
+        if (this._isLoading) {
+            this._isLoading = false;
+            this.emitter.emit(PlayerEvents.LoadingEnded);
+        }
+    }
+    async load(params) {
+        if (this.loadAbortController) {
+            this.loadAbortController.abort('next loadPlaylistItem call');
+            this.loadAbortController = null;
+        }
+        this._isLoading = true;
+        this.emitter.emit(PlayerEvents.LoadingStarted);
+        this.loadAbortController = new AbortController();
+        let neededLoader = null;
+        if (params.loader !== undefined) {
+            switch (params.loader) {
+                case Loader.HLS:
+                    neededLoader = this.hlsLoader;
+                    break;
+                default:
+                    throw Error('unknown loader selected');
+            }
+        }
+        else {
+            // TODO: detect loader
+            neededLoader = this.hlsLoader;
+        }
+        if (neededLoader === null) {
+            throw Error('Cannot find suitable loader');
+        }
+        if (this.currentLoader && this.currentLoader !== neededLoader) {
+            this.currentLoader.stop();
+        }
+        // Send video loading event
+        this._isLoading = true;
+        this.emitter.emit(PlayerEvents.LoadingStarted);
+        this.currentLoader = neededLoader;
+        return neededLoader.load({
+            abortSignal: this.loadAbortController.signal,
+            url: params.url,
+            getUrlCb: params.getUrlCb,
+            startLevel: params.startLevel,
+            startPosition: params.startPosition,
+            audioTrack: params.audioTrack
+        });
+    }
+    async togglePlay() {
+        if (this.el.paused) {
+            return this.play();
+        }
+        this.el.pause();
+        return Promise.resolve();
+    }
+    async play() {
+        return this.el.play();
+    }
+    pause() {
+        this.el.pause();
+    }
+    seekTo(pos) {
+        this.el.currentTime = pos;
+    }
+    setQualityLevel(id, graceful) {
+        const found = this._qualityLevels.find((lvl) => lvl.id === id);
+        if (!found) {
+            throw Error(`Quality level not found: ${id}`);
+        }
+        if (!this.currentLoader) {
+            throw Error('Loader is not set');
+        }
+        this.currentLoader.switchQualityLevel(id, graceful);
+    }
+    setAutoQualityLevel(graceful) {
+        if (!this.currentLoader) {
+            throw Error('Loader is not set');
+        }
+        this.currentLoader.switchQualityLevel(this.currentLoader.getAutoQualityLevelId(), graceful);
+    }
+    subscribe(ev, cb) {
+        this.emitter.on(ev, cb);
+    }
+    unsubscribe(ev, cb) {
+        this.emitter.off(ev, cb);
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    get qualityLevels() {
+        return this._qualityLevels;
+    }
+    get isAutoQuality() {
+        return this._isAutoQuality;
+    }
+    get qualityLevel() {
+        return this._currentQualityLevel;
+    }
+    get duration() {
+        return this._duration;
+    }
+    get paused() {
+        return this._paused;
+    }
+    get currentTime() {
+        return this._currentTime;
+    }
+    get buffered() {
+        return this._buffered;
+    }
+    get playbackRate() {
+        return this._playbackRate;
+    }
+    get volume() {
+        return this._volume;
+    }
+    get muted() {
+        return this._muted;
+    }
+}

package/dist/core/VideoPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.js","sourceRoot":"","sources":["VideoPlayer.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1 @@
+// Reexport your entry components here

package/dist/ui/LoadingIndicator.svelte

@@ -0,0 +1,74 @@
+<script>import { PlayerEvents, VideoPlayer } from "../core/VideoPlayer";
+import { onMount } from "svelte";
+export let player;
+export let loadThreshold = 200;
+let loading = false;
+let timeoutId = 0;
+const setLoading = () => {
+  if (timeoutId) {
+    return;
+  }
+  timeoutId = window.setTimeout(() => {
+    loading = true;
+  }, loadThreshold);
+};
+const setLoaded = () => {
+  if (timeoutId) {
+    window.clearTimeout(timeoutId);
+    timeoutId = 0;
+  }
+  loading = false;
+};
+onMount(() => {
+  player.subscribe(PlayerEvents.LoadingStarted, setLoading);
+  player.subscribe(PlayerEvents.LoadingEnded, setLoaded);
+});
+</script>
+
+<div class="loading-container" style:visibility={loading ? `visible` : `hidden`}>
+	<div class="loader" />
+</div>
+
+<style>
+	/* Define CSS variables to control the animation */
+	:root {
+		--loader-size: 40px; /* Size of the loader */
+		--loader-border-width: 4px; /* Border width of the loader */
+		--loader-border-color: #3498db; /* Border color of the loader */
+		--loader-speed: 1s; /* Animation speed */
+	}
+
+	/* Styling for the loading indicator container */
+	.loading-container {
+		position: absolute;
+		visibility: hidden;
+		left: 0;
+		top: 0;
+		right: 0; /* Ensure the container spans the full width */
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		pointer-events: none; /* Make the loader non-interactive */
+	}
+
+	/* Styling for the loader */
+	.loader {
+		width: var(--loader-size);
+		height: var(--loader-size);
+		border: var(--loader-border-width) solid var(--loader-border-color);
+		border-top: var(--loader-border-width) solid transparent;
+		border-radius: 50%;
+		animation: spin var(--loader-speed) linear infinite;
+	}
+
+	/* Keyframes for the loader animation */
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/dist/ui/LoadingIndicator.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import { VideoPlayer } from '../core/VideoPlayer';
+declare const __propDef: {
+    props: {
+        player: VideoPlayer;
+        loadThreshold?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LoadingIndicatorProps = typeof __propDef.props;
+export type LoadingIndicatorEvents = typeof __propDef.events;
+export type LoadingIndicatorSlots = typeof __propDef.slots;
+export default class LoadingIndicator extends SvelteComponent<LoadingIndicatorProps, LoadingIndicatorEvents, LoadingIndicatorSlots> {
+}
+export {};