Hang UI as a separate package - Issue 695 #717
+1,519
−682
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <p align="center"> | ||
| <img height="128px" src="https://github.com/kixelated/moq/blob/main/.github/logo.svg" alt="Media over QUIC"> | ||
| </p> | ||
|
|
||
| # @kixelated/hang-ui | ||
|
|
||
| [](https://www.npmjs.com/package/@kixelated/hang-ui) | ||
| [](https://www.typescriptlang.org/) | ||
|
|
||
| A TypeScript library for interacting with @kixelated/hang Web Components. Provides methods to control playback and publish sources, as well as status of the connection. | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| npm add @kixelated/hang-ui | ||
| # or | ||
| pnpm add @kixelated/hang-ui | ||
| yarn add @kixelated/hang-ui | ||
| bun add @kixelated/hang-ui | ||
| ``` | ||
|
|
||
| ## Web Components | ||
|
|
||
| Currently, there are two Web Components provided by @kixelated/hang-ui: | ||
|
|
||
| - `<hang-watch-ui>` | ||
| - `<hang-publish-ui>` | ||
|
|
||
| Here's how you can use them (see also @kixelated/hang-demo for a complete example): | ||
|
|
||
| ```html | ||
| <hang-watch-ui> | ||
| <hang-watch url="<MOQ relay URL>" path="<relay path>" muted> | ||
| <canvas style="width: 100%; height: auto; border-radius: 4px; margin: 0 auto;"></canvas> | ||
| </hang-watch> | ||
| </hang-watch-ui> | ||
| ``` | ||
|
|
||
| ```html | ||
| <hang-publish-ui> | ||
| <hang-publish url="<MOQ relay URL>" path="<relay path>"> | ||
| <video | ||
| style="width: 100%; height: auto; border-radius: 4px; margin: 0 auto;" | ||
| muted | ||
| autoplay | ||
| ></video> | ||
| </hang-publish> | ||
| </hang-publish-ui> | ||
| ``` | ||
|
Comment on lines
+1
to
+49
There was a problem hiding this comment. 🛠️ Refactor suggestion | 🟠 Major Fix indentation to use spaces instead of tabs. The file contains hard tabs on multiple lines (2, 40-48), which conflicts with the project's Biome configuration that specifies Run the following command to automatically fix the formatting: #!/bin/bash
# Fix formatting for the hang-ui README
cd js/hang-ui && bun run fix🧰 Tools🪛 markdownlint-cli2 (0.18.1)2-2: Hard tabs (MD010, no-hard-tabs) 40-40: Hard tabs (MD010, no-hard-tabs) 41-41: Hard tabs (MD010, no-hard-tabs) 42-42: Hard tabs (MD010, no-hard-tabs) 43-43: Hard tabs (MD010, no-hard-tabs) 44-44: Hard tabs (MD010, no-hard-tabs) 45-45: Hard tabs (MD010, no-hard-tabs) 46-46: Hard tabs (MD010, no-hard-tabs) 47-47: Hard tabs (MD010, no-hard-tabs) 48-48: Hard tabs (MD010, no-hard-tabs) 🤖 Prompt for AI Agents |
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| { | ||
| "name": "@kixelated/hang-ui", | ||
| "type": "module", | ||
| "version": "0.1.0", | ||
| "description": "Media over QUIC library UI components", | ||
| "license": "(MIT OR Apache-2.0)", | ||
| "repository": "github:kixelated/moq", | ||
| "main": "dist/publish-controls.esm.js", | ||
| "module": "dist/publish-controls.esm.js", | ||
| "exports": { | ||
| "./publish/element": "./dist/publish-controls.esm.js", | ||
| "./watch/element": "./dist/watch-controls.esm.js" | ||
| }, | ||
| "sideEffects": true, | ||
| "scripts": { | ||
| "build": "npm run clean && rollup -c", | ||
|
Owner
There was a problem hiding this comment. And yeah, the other packages use a script to rewrite package.json to change |
||
| "check": "biome check src", | ||
| "clean": "rimraf dist", | ||
| "fix": "biome check src --fix" | ||
| }, | ||
| "devDependencies": { | ||
| "@biomejs/biome": "^2.2.2", | ||
| "@kixelated/hang": "workspace:^0.7.0", | ||
|
Owner
There was a problem hiding this comment. Should this be a peerDependency? |
||
| "@rollup/plugin-node-resolve": "^16.0.3", | ||
| "rimraf": "^6.0.1", | ||
| "rollup": "^4.53.3", | ||
| "rollup-plugin-esbuild": "^6.2.1", | ||
| "solid-element": "^1.9.1", | ||
| "solid-js": "^1.9.10", | ||
| "unplugin-solid": "^1.0.0" | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| // rollup.config.mjs / rollup.config.js | ||
| import { readFileSync } from 'node:fs'; | ||
| import nodeResolve from '@rollup/plugin-node-resolve'; | ||
| import esbuild from 'rollup-plugin-esbuild'; | ||
| import solid from 'unplugin-solid/rollup'; | ||
|
|
||
| function inlineCss() { | ||
| return { | ||
| name: 'inline-css', | ||
|
Author
There was a problem hiding this comment. This seems like the most simple solution for now to include the CSS without having the user include a separate file, but as the UI grows, this made lead to issues with larger bundle sizes.
Owner
There was a problem hiding this comment. We might want to do this anyway for |
||
| load(id) { | ||
| if (id.endsWith('.css?inline')) { | ||
| const realId = id.replace(/\?inline$/, ''); | ||
| const css = readFileSync(realId, 'utf8'); | ||
| return `export default ${JSON.stringify(css)};`; | ||
| } | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| export default [ | ||
| { | ||
| input: 'src/Components/publish/element.tsx', | ||
| output: { | ||
| file: 'dist/publish-controls.esm.js', | ||
| format: 'es', | ||
| sourcemap: true, | ||
| }, | ||
| plugins: [ | ||
| inlineCss(), | ||
| solid({ dev: false, hydratable: false }), | ||
| esbuild({ | ||
| include: /\.[jt]sx?$/, | ||
| jsx: 'preserve', | ||
| tsconfig: 'tsconfig.json', | ||
| }), | ||
| nodeResolve({ extensions: ['.js', '.ts', '.tsx'] }), | ||
| ], | ||
| }, | ||
| { | ||
| input: 'src/Components/watch/element.tsx', | ||
| output: { | ||
| file: 'dist/watch-controls.esm.js', | ||
| format: 'es', | ||
| sourcemap: true, | ||
| }, | ||
| plugins: [ | ||
| inlineCss(), | ||
| solid({ dev: false, hydratable: false }), | ||
| esbuild({ | ||
| include: /\.[jt]sx?$/, | ||
| jsx: 'preserve', | ||
| tsconfig: 'tsconfig.json', | ||
| }), | ||
| nodeResolve({ extensions: ['.js', '.ts', '.tsx'] }), | ||
| ], | ||
| }, | ||
| ]; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { Show, useContext } from "solid-js"; | ||
| import MediaSourceSourceSelector from "./MediaSourceSelector"; | ||
| import { PublishUIContext } from "./PublishUIContextProvider"; | ||
|
|
||
| export default function CameraSourceButton() { | ||
| const context = useContext(PublishUIContext); | ||
| const onClick = () => { | ||
| const hangPublishEl = context?.hangPublish(); | ||
| if (!hangPublishEl) return; | ||
|
|
||
| if (hangPublishEl.source === "camera") { | ||
| // Camera already selected, toggle video. | ||
| hangPublishEl.video = !hangPublishEl.video; | ||
| } else { | ||
| hangPublishEl.source = "camera"; | ||
| hangPublishEl.video = true; | ||
| } | ||
| }; | ||
|
|
||
| const onSourceSelected = (sourceId: MediaDeviceInfo["deviceId"]) => { | ||
| const hangPublishEl = context?.hangPublish(); | ||
| if (!hangPublishEl) return; | ||
|
|
||
| hangPublishEl.videoDevice = sourceId; | ||
| }; | ||
|
|
||
| return ( | ||
| <div class="publishSourceButtonContainer"> | ||
| <button | ||
| type="button" | ||
| title="Camera" | ||
| class={`publishButton publishSourceButton ${context?.cameraActive?.() ? "active" : ""}`} | ||
| onClick={onClick} | ||
| > | ||
| 📷 | ||
| </button> | ||
| <Show when={context?.cameraActive?.() && context?.cameraDevices().length}> | ||
| <MediaSourceSourceSelector | ||
| sources={context?.cameraDevices()} | ||
| selectedSource={context?.selectedCameraSource?.()} | ||
| onSelected={onSourceSelected} | ||
| /> | ||
| </Show> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { createSignal, useContext } from "solid-js"; | ||
| import { PublishUIContext } from "./PublishUIContextProvider"; | ||
|
|
||
| export default function FileSourceButton() { | ||
| const [fileInputRef, setFileInputRef] = createSignal<HTMLInputElement | undefined>(); | ||
| const context = useContext(PublishUIContext); | ||
| const onClick = () => fileInputRef()?.click(); | ||
| const onChange = (event: Event) => { | ||
| const castedInputEl = event.target as HTMLInputElement; | ||
| const file = castedInputEl.files?.[0]; | ||
|
|
||
| if (file) { | ||
| context?.setFile(file); | ||
| castedInputEl.value = ""; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <input | ||
| ref={setFileInputRef} | ||
| onChange={onChange} | ||
| type="file" | ||
| class="hidden" | ||
| accept="video/*,audio/*,image/*" | ||
| /> | ||
| <button | ||
| type="button" | ||
| title="Upload File" | ||
| onClick={onClick} | ||
| class={`publishButton publishSourceButton ${context?.fileActive?.() ? "active" : ""}`} | ||
| > | ||
| 📁 | ||
| </button> | ||
| </> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { createSignal, For, Show } from "solid-js"; | ||
|
|
||
| type MediaSourceSelectorProps = { | ||
| sources?: MediaDeviceInfo[]; | ||
| selectedSource?: MediaDeviceInfo["deviceId"]; | ||
| onSelected?: (sourceId: MediaDeviceInfo["deviceId"]) => void; | ||
| }; | ||
|
|
||
| export default function MediaSourceSelector(props: MediaSourceSelectorProps) { | ||
| const [sourcesVisible, setSourcesVisible] = createSignal(false); | ||
|
|
||
| const toggleSourcesVisible = () => setSourcesVisible((visible) => !visible); | ||
|
|
||
| return ( | ||
| <> | ||
| <button | ||
| type="button" | ||
| onClick={toggleSourcesVisible} | ||
| class="publishButton mediaSourceVisibilityToggle" | ||
| title={sourcesVisible() ? "Hide Sources" : "Show Sources"} | ||
| > | ||
| {sourcesVisible() ? "▲" : "▼"} | ||
| </button> | ||
| <Show when={sourcesVisible()}> | ||
| <select | ||
| value={props.selectedSource} | ||
| class="mediaSourceSelector" | ||
| onChange={(e) => props.onSelected?.(e.currentTarget.value as MediaDeviceInfo["deviceId"])} | ||
| > | ||
| <For each={props.sources}> | ||
| {(source) => <option value={source.deviceId}>{source.label}</option>} | ||
| </For> | ||
| </select> | ||
| </Show> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
kinda gross, but harmless I guess. You should leave a comment that this isn't needed when using the package from NPM.
This wasn't needed when
package.jsonpointed tosrcinstead ofdist.