Merge pull request #16 from santipuppoQualabs/feature/web-component

Issue #10 - Web component

Author: englishm

lib/package.json

@@ -3,10 +3,20 @@
 	"version": "0.0.1",
 	"description": "Media over QUIC library",
 	"license": "(MIT OR Apache-2.0)",
-	"entry": "playback/index.ts",
-	"main": "dist/moq-player.cjs.js",
-	"module": "dist/moq-player.esm.js",
+	"wc-player": "video-moq/index.ts",
+	"simple-player": "playback/index.ts",
+	"exports": {
+		".": {
+			"import": "./dist/moq-player.esm.js",
+			"require": "./dist/moq-player.cjs.js"
+		},
+		"./simple-player": {
+			"import": "./dist/moq-simple-player.esm.js",
+			"require": "./dist/moq-simple-player.cjs.js"
+		}
+	},
 	"iife": "dist/moq-player.iife.js",
+	"iife-simple": "dist/moq-simple-player.iife.js",
 	"types": "dist/types/moq-player.d.ts",
 	"scripts": {
 		"build": "rollup -c",
@@ -36,6 +46,7 @@
 		"npm-run-all": "^4.1.5",
 		"prettier": "^3.0.1",
 		"rollup": "^4.28.0",
+		"rollup-plugin-import-css": "^3.5.8",
 		"rollup-plugin-sourcemaps": "^0.6.2",
 		"rollup-plugin-web-worker-loader": "github:montevideo-tech/rollup-plugin-web-worker-loader",
 		"tslib": "^2.8.1",

lib/playback/index.ts

@@ -129,8 +129,6 @@ export default class Player {
 		const kind = Catalog.isVideoTrack(track) ? "video" : Catalog.isAudioTrack(track) ? "audio" : "unknown"
 		if (kind == "audio" && this.#muted) return
 
-		const sub = await this.#connection.subscribe(track.namespace, track.name)
-
 		if (kind == "audio") {
 			// Save ref to last audio track we subscribed to for unmuting
 			this.#audioTrackName = track.name
@@ -140,6 +138,8 @@ export default class Player {
 			this.#videoTrackName = track.name
 		}
 
+		const sub = await this.#connection.subscribe(track.namespace, track.name)
+
 		try {
 			for (;;) {
 				const segment = await Promise.race([sub.data(), this.#running])
@@ -216,6 +216,14 @@ export default class Player {
 		return this.#paused
 	}
 
+	get muted(): boolean {
+		return this.#muted
+	}
+
+	get videoTrackName(): string {
+		return this.#videoTrackName
+	}
+
 	async switchTrack(trackname: string) {
 		const currentTrack = this.getCurrentTrack()
 		if (this.#paused) {
@@ -298,6 +306,15 @@ export default class Player {
 	}
 	*/
 
+	// Added this to divide play and pause into two different functions
+	async togglePlayPause() {
+		if (this.#paused) {
+			await this.play()
+		} else {
+			await this.pause()
+		}
+	}
+
 	async play() {
 		if (this.#paused) {
 			this.#paused = false
@@ -307,12 +324,16 @@ export default class Player {
 				await this.#backend.unmute()
 			}
 			this.#backend.play()
-		} else {
+		}
+	}
+
+	async pause() {
+		if (!this.#paused) {
 			this.#paused = true
-			this.#backend.pause()
 			const mutePromise = this.#backend.mute()
 			const audioPromise = this.unsubscribeFromTrack(this.#audioTrackName)
 			const videoPromise = this.unsubscribeFromTrack(this.#videoTrackName)
+			this.#backend.pause()
 			await Promise.all([mutePromise, audioPromise, videoPromise])
 		}
 	}

lib/rollup.config.js

@@ -7,61 +7,61 @@ const workerLoader = require("rollup-plugin-web-worker-loader")
 const babel = require("@rollup/plugin-babel")
 const terser = require("@rollup/plugin-terser")
 const sourceMaps = require("rollup-plugin-sourcemaps")
+const css = require("rollup-plugin-import-css")
 const pkg = require("./package.json")
 
-const config = []
+const basePlugins = [
+	resolve(),
+	commonjs({
+		include: [/node_modules/, /src/],
+		transformMixedEsModules: true,
+	}),
+	workerLoader({ preserveSource: true }),
+	typescript({
+		typescript: require("typescript"),
+	}),
+	sourceMaps(),
+	babel({
+		babelHelpers: "bundled",
+		presets: ["@babel/preset-env", "@babel/preset-typescript"],
+		exclude: "./node_modules/*",
+	}),
+	terser(),
+]
 
-config.push({
-	input: pkg.entry,
-	output: {
-		file: pkg.iife,
-		format: "iife",
-		name: "moqplayer",
-		sourcemap: true,
+module.exports = [
+	{
+		input: pkg["wc-player"],
+		output: [
+			{
+				file: pkg.iife,
+				format: "iife",
+				name: "MoqPlayer",
+				sourcemap: true,
+			},
+			{
+				file: pkg.exports["."].import,
+				format: "esm",
+				sourcemap: true,
+			},
+		],
+		plugins: [...basePlugins, css()],
 	},
-	plugins: [
-		resolve(),
-		commonjs({
-			include: [/node_modules/, /src/],
-			transformMixedEsModules: true,
-		}),
-		workerLoader({ preserveSource: true }),
-		typescript({
-			typescript: require("typescript"),
-		}),
-		sourceMaps(),
-		babel({
-			babelHelpers: "bundled",
-			presets: ["@babel/preset-env", "@babel/preset-typescript"],
-			exclude: "./node_modules/*",
-		}),
-		terser(),
-	],
-})
-
-config.push({
-	input: pkg.entry,
-	output: {
-		file: pkg.module,
-		format: "esm",
-		sourcemap: true,
+	{
+		input: pkg["simple-player"],
+		output: [
+			{
+				file: pkg["iife-simple"],
+				format: "iife",
+				name: "MoqSimplePlayer",
+				sourcemap: true,
+			},
+			{
+				file: pkg.exports["./simple-player"].import,
+				format: "esm",
+				sourcemap: true,
+			},
+		],
+		plugins: basePlugins,
 	},
-	external: [],
-	plugins: [
-		resolve(),
-		commonjs(),
-		workerLoader({ preserveSource: true }),
-		typescript({
-			typescript: require("typescript"),
-		}),
-		sourceMaps(),
-		babel({
-			babelHelpers: "bundled",
-			presets: ["@babel/preset-env", "@babel/preset-typescript"],
-			exclude: "./node_modules/*",
-		}),
-		terser(),
-	],
-})
-
-module.exports = config
+]

lib/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+	const content: string
+	export default content
+}