diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 6320cf4c7..d40234811 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -1,18 +1,24 @@ -# Publishes a GitHub release and NPM package for -# any tag that is pushed to the repository. -# Tags should be generated automatically by -# manually running the "release" workflow. +# Publishes a GitHub release and NPM package for the provided package. +# Tags are generated automatically on release. +# The release/publish steps can be skipped (in case of a re-release attempt). name: Publish on: - push: - branches: - - main - - 13-stable + workflow_dispatch: + inputs: + gh-release: + description: 'Create a github release?' + required: true + type: boolean + default: true + npm-publish: + description: 'Publish to NPM?' + required: true + type: boolean + default: true jobs: publish: - if: ${{ startsWith(github.event.head_commit.message, 'release:') }} runs-on: ubuntu-latest steps: - uses: extractions/setup-just@v1 @@ -20,7 +26,8 @@ jobs: - name: Extract version number id: vars - run: echo ::set-output name=version::v$(jq -r .version package.json) + run: | + echo "version=$(jq -r .version package.json)" >> $GITHUB_OUTPUT - name: Setup node uses: actions/setup-node@v4 @@ -36,54 +43,25 @@ jobs: just install just build - - name: Release + - name: Create GitHub release + if: ${{ inputs.gh-release }} id: release - uses: actions/create-release@v1 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # provided by Actions - with: - tag_name: ${{ steps.vars.outputs.version }} - release_name: Release ${{ steps.vars.outputs.version }} - body_path: CHANGELOG.md - draft: false - prerelease: false - - - name: Upload media-stream-library - uses: actions/upload-release-asset@v1.0.1 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - upload_url: ${{ steps.release.outputs.upload_url }} - asset_path: streams/dist/media-stream-library.min.js - asset_name: media-stream-library.min.js - asset_content_type: application/javascript - - - name: Upload media-stream-player - uses: actions/upload-release-asset@v1.0.1 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - upload_url: ${{ steps.release.outputs.upload_url }} - asset_path: player/dist/media-stream-player.min.js - asset_name: media-stream-player.min.js - asset_content_type: application/javascript - - - name: Upload media-overlay-library - uses: actions/upload-release-asset@v1.0.1 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - upload_url: ${{ steps.release.outputs.upload_url }} - asset_path: overlay/dist/media-overlay-library.min.js - asset_name: media-overlay-library.min.js - asset_content_type: application/javascript + run: | + yarn pack + gh release create v${{ steps.vars.outputs.version }} \ + --target ${{ github.ref }} \ + -F CHANGELOG.md \ + -t "Release v${{ steps.vars.outputs.version }}" \ + package.tgz overlay/*.min.js* player/*.min.js* streams/*.min.js* - - name: Deploy NPM packages + - name: Deploy to NPM registry env: NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} run: | - if [[ $GITHUB_REF =~ alpha|beta ]]; then - yarn workspaces foreach --no-private npm publish --tag next + if [[ "${{ steps.vars.output.version }}" =~ alpha|beta ]]; then + yarn npm publish --tag next else - yarn workspaces foreach --no-private npm publish --tag latest + yarn npm publish --tag latest fi diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml index 757b7c064..1359f5b21 100644 --- a/.github/workflows/verify.yml +++ b/.github/workflows/verify.yml @@ -109,3 +109,36 @@ jobs: run: just build - name: Test basic video functionality run: scripts/ci-video-test.sh edge + + housekeeping: + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Checkout repository@main + uses: actions/checkout@v4 + with: + ref: main + path: __ref-main + + - name: Check if package.json version was updated + run: | + this_version=$(jq -r '.version' package.json) + if [[ "$this_version" == "null" ]]; then + continue + fi + if [[ ! -f "__ref-main/package.json" ]]; then + main_version="" + else + main_version=$(jq -r '.version' __ref-main/package.json) + fi + if [[ "$main_version" == "$this_version" ]]; then + echo "::error:: package.json version ($main_version) was not updated" + exit 1 + elif ! grep -q "^## $this_version" $workspace/CHANGELOG.md; then + echo "::error:: CHANGELOG.md was not updated with latest version" + exit 1 + else + echo "::notice:: package.json updated: $main_version => $this_version" + fi diff --git a/.gitignore b/.gitignore index e903ecfcf..0561f7be5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,14 +1,12 @@ # Logs *.log -# Coverage directory (tests with coverage) +# Build/Test +*.min.js* build/ coverage/ - -# Bundles dist/ -tsconfig.tsbuildinfo -*.min.js* +*.tsbuildinfo # Cypress cypress/videos/ diff --git a/CHANGELOG.md b/CHANGELOG.md index def9d931f..58d6e5d56 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,42 +1,19 @@ -## [13.2.0](https://github.com/AxisCommunications/media-stream-library-js/compare/db30d3bda424de8011f46ed5f2d7c79fb8ad69e4..0ff93c1f6edead9ff7fccc5eac21e87b2600e964) (2025-01-07T16:48:02.968Z) - -### ๐Ÿšง Maintenance - - - **deps**: bump the dependencies group across 1 directory with 3 updates (#1000) ([6997451](https://github.com/AxisCommunications/media-stream-library-js/commit/6997451619516e8311efbe37cce7073534a0b149)) - - **deps-dev**: bump c8 from 9.1.0 to 10.1.2 (#995) ([b7db610](https://github.com/AxisCommunications/media-stream-library-js/commit/b7db6100dfa535bc0d28598398385db521c29ba2)) - - **deps-dev**: bump the dev-dependencies group across 1 directory with 8 updates (#1006) ([6e07315](https://github.com/AxisCommunications/media-stream-library-js/commit/6e073153aa747beacf3623fc9abbb02ea06ca865)) - - **deps-dev**: bump the dev-dependencies group across 1 directory with 15 updates (#989) ([76017bb](https://github.com/AxisCommunications/media-stream-library-js/commit/76017bbff22dfcd3dbdc8551ae448176907ba9fe)) - - **deps**: bump ws from 8.16.0 to 8.17.1 in the npm_and_yarn group (#981) ([49eaa51](https://github.com/AxisCommunications/media-stream-library-js/commit/49eaa5190ae8469e36556ff971c51549ef018a6c)) - - **deps-dev**: bump the dev-dependencies group with 5 updates (#938) ([6351e77](https://github.com/AxisCommunications/media-stream-library-js/commit/6351e77108e62e1898a0f3ddf4f6f1ef7a4e0e6b)) - - update code owners (#934) ([c5db120](https://github.com/AxisCommunications/media-stream-library-js/commit/c5db12049fc2179e294a015628c908ffed4769f6)) - - **deps**: upgrade to Node.js v20 (#933) ([18c26c4](https://github.com/AxisCommunications/media-stream-library-js/commit/18c26c4ebbc28333ba369da6ff5a08606eae8441)) - - **deps**: upgrade minor/patch (#932) ([2c2d7a3](https://github.com/AxisCommunications/media-stream-library-js/commit/2c2d7a338c47293ad352a14f0b10b94035cc6e0f)) - - **deps-dev**: bump jsdom from 23.2.0 to 24.0.0 (#931) ([f8939c9](https://github.com/AxisCommunications/media-stream-library-js/commit/f8939c9ed55b7e648f605ab55913f23e8a53c760)) - - **deps-dev**: bump the dev-dependencies group with 10 updates (#930) ([c07bfa4](https://github.com/AxisCommunications/media-stream-library-js/commit/c07bfa4b839066b5fb7f4f0bf538b06f37bce180)) - - allow hoisting to the root level ([49c266f](https://github.com/AxisCommunications/media-stream-library-js/commit/49c266fc0d8a366103e10c54a513a6d1e23729ef)) - - update workflows ([f461338](https://github.com/AxisCommunications/media-stream-library-js/commit/f461338abc899ff5cf052046f0facbfc43771fd8)) - - remove eslint-disable comments ([59f0613](https://github.com/AxisCommunications/media-stream-library-js/commit/59f06132ad3d77126f97b7356a6f021bc5104674)) - - satisfy biome checks ([4e9e041](https://github.com/AxisCommunications/media-stream-library-js/commit/4e9e0410c484465badcd579d0c559325894750a1)) - - biome import sorting ([0210ee1](https://github.com/AxisCommunications/media-stream-library-js/commit/0210ee17f3976f0b1f066e53e5250606bd0bd91d)) - - biome formatting ([51318dc](https://github.com/AxisCommunications/media-stream-library-js/commit/51318dc52d5576920f97abbe6600ad7259eb62f6)) - - use yarn and replace dprint/eslint with biome ([00abee0](https://github.com/AxisCommunications/media-stream-library-js/commit/00abee002c293f0f811fee171013ce5633a33509)) - - remove git LFS ([5c48be4](https://github.com/AxisCommunications/media-stream-library-js/commit/5c48be4bda7a12f4c430208d0162e88f6971368f)) - - **deps-dev**: bump the dev-dependencies group with 11 updates (#914) ([8488fae](https://github.com/AxisCommunications/media-stream-library-js/commit/8488fae4b74aa714432996b13fd30c8db05db390)) - - **deps-dev**: bump jsdom from 22.1.0 to 23.2.0 (#892) ([9f230db](https://github.com/AxisCommunications/media-stream-library-js/commit/9f230db4ce70ef4da727d442ce6a313ccbc71075)) - - **deps-dev**: bump follow-redirects from 1.15.3 to 1.15.5 (#889) ([c4f72ea](https://github.com/AxisCommunications/media-stream-library-js/commit/c4f72ea8c32a73955549d8f34e7486794d597b43)) - - **deps-dev**: bump c8 from 8.0.1 to 9.1.0 (#890) ([63e08ac](https://github.com/AxisCommunications/media-stream-library-js/commit/63e08ac687720edd50d78d5df93c73b6b3a4f7ee)) - - **deps-dev**: bump stylelint from 15.11.0 to 16.1.0 (#891) ([f4efbe7](https://github.com/AxisCommunications/media-stream-library-js/commit/f4efbe7198423768c131be18a2d34c148a48b852)) - - support merge queues (#893) ([d263395](https://github.com/AxisCommunications/media-stream-library-js/commit/d26339547d42f68c1297af4653c2966169c21322)) - -### ๐Ÿ“ Documentation - - - add quick install steps for example (#1029) ([998d5e2](https://github.com/AxisCommunications/media-stream-library-js/commit/998d5e2b3c22711d91c566f949d52ad2ca503fcc)) - -### ๐Ÿ› Bug fixes - - - replace npm with yarn for upgrades/releases ([0ff93c1](https://github.com/AxisCommunications/media-stream-library-js/commit/0ff93c1f6edead9ff7fccc5eac21e87b2600e964)) - - force negative frame durations to zero (#769) ([e6773e7](https://github.com/AxisCommunications/media-stream-library-js/commit/e6773e7ccccec782e655af4dab5c79e51eb67e45)) - -### ๐Ÿงช Test - - - add build verification for Node.js v22 (#1028) ([06968d7](https://github.com/AxisCommunications/media-stream-library-js/commit/06968d7be1d540ae357ba187a1c333465c70217d)) +## 14.0.0-beta.0 + +- Switched to workflow-based releases with version as part of source. + This means that each PR has to have an update of the package.json version + number and update the CHANGELOG.md file. +- **BREAKING**: Move `player` and `overlay` packages into the `media-stream-library` package. + These can be imported as `media-stream-library/player` and `media-stream-library/overlay`. +- **BREAKING**: Only export ES modules (including minified bundles with external dependencies). +- **BREAKING**: Replaced Node.js Buffer with Uint8Array. +- **BREAKING**: Replaced Node.js Stream module with Web Streams API. + Components and pipelines are redesigned completely, check the source + and examples for details on how to migrate. +- **BREAKING**: Replaced `debug` package with internal log module. + Set `msl-streams-debug`, `msl-player-debug`, and `msl-overlay-debug` + `localStorage` keys to `"true"` instead for logging. +- **BREAKING**: Removed CommonJS support and separation of Node.js + and Browser exports. +- Added AAC test audio to the default RTSP H.264 test video. + diff --git a/LICENSE b/LICENSE index 477debfcb..5af4b7a2d 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License -Copyright (c) 2018-2023 Axis Communications AB +Copyright (c) 2018-2025 Axis Communications AB Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 277aea1d9..510f3088c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,35 @@ -# Media streams and overlay +# Media Stream Library JS -This repository hosts 3 different libraries used for playback -of video streams and enabling simpler SVG overlays. +[![CI][ci-image]][ci-url] +[![NPM][npm-image]][npm-url] + +[ci-image]: https://github.com/AxisCommunications/media-stream-library-js/actions/workflows/verify.yml/badge.svg?branch=main +[ci-url]: https://github.com/AxisCommunications/media-stream-library-js/actions/workflows/verify.yml +[npm-image]: https://img.shields.io/npm/v/media-stream-library.svg +[npm-url]: https://www.npmjs.com/package/media-stream-library + +## Installation + +Make sure you have Node installed on your machine. +Then, to install the library: + +```sh +npm install media-stream-library +``` + +or + +```sh +yarn add media-stream-library +``` + +## Usage + +- [streams](streams/README.md) +- [player](player/README.md) +- [overlay](overlay/README.md) + +## Contributing For development, you'll need a local installation of [Node.js](https://nodejs.org/), and [yarn](https://v3.yarnpkg.com/) to install dependencies. @@ -9,3 +37,53 @@ To run commands, you need [just](https://just.systems/), which can be installed [prebuilt binaries](https://just.systems/man/en/chapter_5.html#pre-built-binaries) or [yarn](https://just.systems/man/en/chapter_8.html#nodejs-installation), e.g. `yarn global add just-install`. + +Please read our [contributing guidelines](CONTRIBUTING.md) before making pull +requests. + +## FAQ + +**Will it work with this library if it works with VLC?** + +Not necessarily. We only support a particular subset of the protocol useful for +basic streaming from IP cameras. With RTSP that is H.264+AAC or JPEG, and only +some simple profiles/levels are supported. For MP4, it depends entirely on your +browser if the media can be played. + +**Do I need to use RTSP for live (or low-latency) video?** + +Since this library only supports RTSP through some form of TCP connection, it's +going to have similar latency as streaming MP4 over HTTP. For true low-latency +real-time usage, you should either use a stand-alone player that can handle RTP over UDP, +or use WebRTC in the browser. + +You should expect in-browser latency of several frames. When using Firefox, you +might need to set the duration of the MediaSource to `0` to force live behaviour +with lower latency (see one of the browser examples). +The exact latency is controlled by the browser itself, and the data inside the +media stream can affect this (e.g. if audio is present or not). + +**Does this library support audio?** + +Yes, yes it does. With a few caveats though. + +- Make sure your AXIS camera actually supports audio +- Make sure the audio is enabled on the camera. +- It only works with H.264 and only after user interaction with the volume slider + +**How do I autoplay video?** + +Browsers will only allow to autoplay a video if it's muted. If the video is +not muted, then it will only play if the `play` method was called from inside +a handler of a user-initiated event. Note that different browsers can have +different behaviours. Read https://developer.chrome.com/blog/autoplay for more +details. + +## Acknowledgements + +The icons used are from https://github.com/google/material-design-icons/, which +are available under the Apache 2.0 license, more information can be found on: +http://google.github.io/material-design-icons + +The spinner is from https://github.com/SamHerbert/SVG-Loaders, available under +the MIT license. diff --git a/changeset.md b/changeset.md deleted file mode 100644 index 9423d28f9..000000000 --- a/changeset.md +++ /dev/null @@ -1,6 +0,0 @@ -## [12.2.0](https://github.com/AxisCommunications/media-stream-library-js/compare/v12.1.1...v12.2.0) (2023-03-21T09:54:34.838Z) - -### ๐Ÿšง Maintenance - - - add fallback package exports (#745) ([b029dc9](https://github.com/AxisCommunications/media-stream-library-js/commit/b029dc9af8b701956ab0a18b605400a50799c4de)) - - use correct GitHub repo link ([ee5142f](https://github.com/AxisCommunications/media-stream-library-js/commit/ee5142fbcfec9004c65e511ea7052ffebbeb261d)) diff --git a/cypress.config.ts b/cypress.config.js similarity index 100% rename from cypress.config.ts rename to cypress.config.js diff --git a/example-overlay-react/App.tsx b/example-overlay-react/App.jsx similarity index 75% rename from example-overlay-react/App.tsx rename to example-overlay-react/App.jsx index 2c687526e..b252de255 100644 --- a/example-overlay-react/App.tsx +++ b/example-overlay-react/App.jsx @@ -1,29 +1,26 @@ -import React, { FC, useState } from 'react' +import React, { useState } from 'react' import styled from 'styled-components' import { - Area, - Coord, - CoordArray, Foundation, Liner, -} from 'media-overlay-library' +} from 'media-stream-library/overlay' import { Circle, DraggableCircle, FastDraggableCircle, -} from './components/Circle' -import { Polygon } from './components/Polygon' -import { Text } from './components/Text' +} from './Circle' +import { Polygon } from './Polygon' +import { Text } from './Text' -const USER_BASIS: Area = [ +const USER_BASIS = [ [-1, 1], // top left coordinate [1, -1], // bottom right coordinate ] -const MIDDLE_AREA: Area = [ +const MIDDLE_AREA = [ [-0.5, 0.5], // top left coordinate [0.5, -0.5], // bottom right coordinate ] @@ -35,24 +32,24 @@ const Layers = styled.div` border: 1px solid deepskyblue; ` -const App: FC = () => { - const [textPos1, setTextPos1] = useState([-1, 0.8]) - const [textPos2, setTextPos2] = useState([-0.4, -0.5]) - const [textPos3, setTextPos3] = useState([-0.5, 0]) - const [polygonPos, setPolygonPos] = useState([ +const App = () => { + const [textPos1, setTextPos1] = useState([-1, 0.8]) + const [textPos2, setTextPos2] = useState([-0.4, -0.5]) + const [textPos3, setTextPos3] = useState([-0.5, 0]) + const [polygonPos, setPolygonPos] = useState([ [0.6, 0.1], [0.8, 0.2], [0.7, 0.5], [0.3, 0.2], ]) - const [circle1Pos] = useState([-0.3333, 0.3333]) - const [circle2Pos, setCircle2Pos] = useState([0.2, -0.5]) - const [circle3Pos, setCircle3Pos] = useState([-0.5, -0.3001]) + const [circle1Pos] = useState([-0.3333, 0.3333]) + const [circle2Pos, setCircle2Pos] = useState([0.2, -0.5]) + const [circle3Pos, setCircle3Pos] = useState([-0.5, -0.3001]) return (
-

Welcome to media-overlay-library

+

MSL Overlay Playground

To get started, edit src/App.tsx and save to reload. diff --git a/example-overlay-react/components/Circle.tsx b/example-overlay-react/Circle.jsx similarity index 75% rename from example-overlay-react/components/Circle.tsx rename to example-overlay-react/Circle.jsx index 41e746073..32e1ac740 100644 --- a/example-overlay-react/components/Circle.tsx +++ b/example-overlay-react/Circle.jsx @@ -1,7 +1,5 @@ import React, { - FC, forwardRef, - SVGProps, useContext, useEffect, useRef, @@ -11,15 +9,10 @@ import React, { import styled from 'styled-components' import { - Coord, - DraggableHandler, FoundationContext, LinerContext, useDraggable, -} from 'media-overlay-library' - -type BaseElement = SVGCircleElement -type BaseProps = Omit, 'ref'> +} from 'media-stream-library/overlay' const SvgCircle = styled.circle` fill: rgb(0.5, 0.5, 0.5, 0.2); @@ -37,14 +30,7 @@ const SvgCircle = styled.circle` * functions to convert from user to SVG coordinates (and back). */ -interface CircleProps extends BaseProps { - /** - * A coordinate pair [x, y] that represents the middle of the circle. - */ - readonly pos: Coord -} - -export const Circle: FC = forwardRef( +export const Circle = forwardRef( ({ pos, ...circleProps }, ref) => { const { toSvgBasis } = useContext(FoundationContext) @@ -68,17 +54,6 @@ export const Circle: FC = forwardRef( * will result in an update of the `pos` property. */ -interface DraggableCircleProps extends BaseProps { - /** - * A coordinate pair [x, y] that represents the middle of the circle. - */ - readonly pos: Coord - /** - * Callback with new coordinates when they were changed. - */ - readonly onChangePos: (pos: Coord) => void -} - /* * Simple variant of DraggableCircle * @@ -87,10 +62,7 @@ interface DraggableCircleProps extends BaseProps { * trigger a re-render through React's state change mechanism. */ -export const DraggableCircle: FC = forwardRef< - BaseElement, - DraggableCircleProps ->(({ pos, onChangePos, ...circleProps }, ref) => { +export const DraggableCircle = forwardRef(({ pos, onChangePos, ...circleProps }, ref) => { const { toSvgBasis, toUserBasis } = useContext(FoundationContext) const { clampCoord } = useContext(LinerContext) @@ -103,8 +75,8 @@ export const DraggableCircle: FC = forwardRef< useEffect(() => { const [x0, y0] = toSvgBasis(pos) - const updatePosition: DraggableHandler = ({ vector: [tx, ty] }, ended) => { - const newSvgPos: Coord = clampCoord([x0 + tx, y0 + ty]) + const updatePosition = ({ vector: [tx, ty] }, ended) => { + const newSvgPos = clampCoord([x0 + tx, y0 + ty]) setSvgPos(newSvgPos) if (ended) { onChangePos(toUserBasis(newSvgPos)) @@ -149,7 +121,7 @@ export const DraggableCircle: FC = forwardRef< * state changes during dragging. */ -export const FastDraggableCircle: FC = ({ +export const FastDraggableCircle = ({ pos, onChangePos, ...circleProps @@ -158,17 +130,17 @@ export const FastDraggableCircle: FC = ({ const { clampCoord } = useContext(LinerContext) const { subscribe, unsubscribe, start: startDragging } = useDraggable() - const circleRef = useRef(null) + const circleRef = useRef(null) useEffect(() => { const circleEl = circleRef.current if (circleEl !== null) { const [x0, y0] = toSvgBasis(pos) - const updatePosition: DraggableHandler = ( + const updatePosition = ( { vector: [tx, ty] }, ended ) => { - const newSvgPos: Coord = clampCoord([x0 + tx, y0 + ty]) + const newSvgPos = clampCoord([x0 + tx, y0 + ty]) circleEl.setAttribute('cx', String(newSvgPos[0])) circleEl.setAttribute('cy', String(newSvgPos[1])) if (ended) { diff --git a/example-overlay-react/components/Polygon.tsx b/example-overlay-react/Polygon.jsx similarity index 75% rename from example-overlay-react/components/Polygon.tsx rename to example-overlay-react/Polygon.jsx index 4c9b6690c..59e789725 100644 --- a/example-overlay-react/components/Polygon.tsx +++ b/example-overlay-react/Polygon.jsx @@ -1,14 +1,12 @@ -import React, { FC, useContext, useEffect, useState } from 'react' +import React, { useContext, useEffect, useState } from 'react' import styled from 'styled-components' import { - CoordArray, - DraggableHandler, FoundationContext, LinerContext, useDraggable, -} from 'media-overlay-library' +} from 'media-stream-library/overlay' const SvgCircleCorner = styled.circle` fill: rgb(0.5, 0.5, 0.5); @@ -28,24 +26,11 @@ const SvgPolygon = styled.polygon` stroke: grey; ` -interface PolygonProps { - /** - * An array of coordinate pairs [x, y] that represent - * the corners of the polygon. - */ - readonly pos: CoordArray - /** - * Callback with new cornerw coordinates whenever they - * changed. - */ - readonly onChangePos: (newPos: CoordArray) => void -} - -export const Polygon: FC = ({ pos, onChangePos }) => { +export const Polygon = ({ pos, onChangePos }) => { const { toSvgBasis, toUserBasis } = useContext(FoundationContext) const { clampCoord, clampCoordArray } = useContext(LinerContext) - const [svgPos, setSvgPos] = useState(pos.map(toSvgBasis)) + const [svgPos, setSvgPos] = useState(pos.map(toSvgBasis)) useEffect(() => { setSvgPos(pos.map(toSvgBasis)) }, [pos, toSvgBasis]) @@ -62,16 +47,16 @@ export const Polygon: FC = ({ pos, onChangePos }) => { * translate all points, otherwise we just translated the point * that matches the `name`. */ - const updatePosition: DraggableHandler = ( + const updatePosition = ( { name, vector: [tx, ty] }, ended ) => { - const newSvgPos: CoordArray = + const newSvgPos = name === 'g' ? clampCoordArray(initialSvgPos.map(([x, y]) => [x + tx, y + ty])) : initialSvgPos.map(([x, y], index) => - name === `p${index}` ? clampCoord([x + tx, y + ty]) : [x, y] - ) + name === `p${index}` ? clampCoord([x + tx, y + ty]) : [x, y] + ) if (ended) { onChangePos(newSvgPos.map(toUserBasis)) diff --git a/example-overlay-react/components/Text.tsx b/example-overlay-react/Text.jsx similarity index 74% rename from example-overlay-react/components/Text.tsx rename to example-overlay-react/Text.jsx index 81afa8680..cf7451a0f 100644 --- a/example-overlay-react/components/Text.tsx +++ b/example-overlay-react/Text.jsx @@ -1,26 +1,18 @@ -import React, { FC, SVGProps, useContext, useEffect, useRef } from 'react' +import React, { useContext, useEffect, useRef } from 'react' import styled from 'styled-components' import { - Coord, - DraggableHandler, FoundationContext, LinerContext, useDraggable, -} from 'media-overlay-library' +} from 'media-stream-library/overlay' const SvgText = styled.text` user-select: none; ` -interface TextProps extends SVGProps { - readonly x: number - readonly y: number - readonly onChangePos: (pos: Coord) => void -} - -export const Text: FC = ({ +export const Text = ({ x: userX, y: userY, onChangePos, @@ -31,7 +23,7 @@ export const Text: FC = ({ const { clampBBox } = useContext(LinerContext) const { subscribe, unsubscribe, start: startDragging } = useDraggable() - const textRef = useRef(null) + const textRef = useRef(null) useEffect(() => { const textEl = textRef.current @@ -43,10 +35,10 @@ export const Text: FC = ({ // box does not match the origin of the baseline of the text, but it // works reliably enough to limit the text box within the Liner. const { x: x0, y: y0 } = textEl.getBBox() - const updatePosition: DraggableHandler = ({ vector: [tx, ty] }, ended) => { + const updatePosition = ({ vector: [tx, ty] }, ended) => { const { width, height } = textEl.getBBox() const newBBox = clampBBox({ x: x0 + tx, y: y0 + ty, width, height }) - const newSvgPos: Coord = [newBBox.x, newBBox.y + height] + const newSvgPos = [newBBox.x, newBBox.y + height] textEl.setAttribute('x', String(newSvgPos[0])) textEl.setAttribute('y', String(newSvgPos[1])) if (ended) { diff --git a/example-overlay-react/index.html b/example-overlay-react/index.html index 339a0af29..509b6a4f1 100644 --- a/example-overlay-react/index.html +++ b/example-overlay-react/index.html @@ -3,11 +3,11 @@ - Media Overlay Library JS: Example + MSL Overlay - +

diff --git a/example-overlay-react/index.tsx b/example-overlay-react/index.jsx similarity index 89% rename from example-overlay-react/index.tsx rename to example-overlay-react/index.jsx index 0d2245a51..d8270d8df 100644 --- a/example-overlay-react/index.tsx +++ b/example-overlay-react/index.jsx @@ -1,6 +1,7 @@ import 'pepjs' import './index.css' +import React from 'react' import { createRoot } from 'react-dom/client' import App from './App' diff --git a/example-overlay-react/package.json b/example-overlay-react/package.json index 24e92123e..39b0c03e4 100644 --- a/example-overlay-react/package.json +++ b/example-overlay-react/package.json @@ -1,15 +1,17 @@ { "private": true, + "dependencies": { + "media-stream-library": "workspace:^", + "pepjs": "0.5.3", + "react": "18.3.1", + "react-dom": "18.3.1", + "styled-components": "5.3.11" + }, "devDependencies": { "@types/react": "18.3.18", "@types/react-dom": "18.3.5", "@types/styled-components": "5.1.34", "@vitejs/plugin-react": "4.3.4", - "media-overlay-library": "workspace:^", - "pepjs": "0.5.3", - "react": "18.3.1", - "react-dom": "18.3.1", - "styled-components": "5.3.11", "vite": "6.0.7" } } diff --git a/example-overlay-react/tsconfig.json b/example-overlay-react/tsconfig.json deleted file mode 100644 index dd6f44ce8..000000000 --- a/example-overlay-react/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "../tsconfig.base.json", - "compilerOptions": { - "baseUrl": ".", - "jsx": "react" - }, - "include": ["./**/*"] -} diff --git a/example-overlay-react/vite.mjs b/example-overlay-react/vite.mjs index ac9949ea2..fff3a800d 100755 --- a/example-overlay-react/vite.mjs +++ b/example-overlay-react/vite.mjs @@ -6,9 +6,11 @@ createServer({ optimizeDeps: { entries: ['index.html'], }, - // define: { - // global: 'window', - // }, + resolve: { + alias: { + 'media-stream-library/overlay': '../overlay/dist/index.js', + }, + }, plugins: [reactPlugin()], }) .then((server) => { diff --git a/example-player-react/BasicStream.jsx b/example-player-react/BasicStream.jsx index a5b46cf93..340f438ba 100644 --- a/example-player-react/BasicStream.jsx +++ b/example-player-react/BasicStream.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' -import { BasicPlayer } from 'media-stream-player' +import { BasicPlayer } from 'media-stream-library/player' // Force a login by fetching usergroup const authorize = async () => { diff --git a/example-player-react/MultiStream.jsx b/example-player-react/MultiStream.jsx index d742cdd7d..e10770c13 100644 --- a/example-player-react/MultiStream.jsx +++ b/example-player-react/MultiStream.jsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import styled from 'styled-components' -import { Player } from 'media-stream-player' +import { Player } from 'media-stream-library/player' const MediaPlayer = styled(Player)` max-width: 400px; diff --git a/example-player-react/SingleStream.jsx b/example-player-react/SingleStream.jsx index 6c7c17669..b151eb99f 100644 --- a/example-player-react/SingleStream.jsx +++ b/example-player-react/SingleStream.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' -import { Player } from 'media-stream-player' +import { Player } from 'media-stream-library/player' // Force a login by fetching usergroup const authorize = async () => { diff --git a/example-player-react/index.html b/example-player-react/index.html index ffb6027ec..55e9912f5 100644 --- a/example-player-react/index.html +++ b/example-player-react/index.html @@ -3,7 +3,7 @@ - media-stream-player + MSL Player diff --git a/example-player-react/package.json b/example-player-react/package.json index c913c5ba3..9ccd78d41 100644 --- a/example-player-react/package.json +++ b/example-player-react/package.json @@ -4,7 +4,6 @@ "@vitejs/plugin-react": "4.3.4", "luxon": "3.5.0", "media-stream-library": "workspace:^", - "media-stream-player": "workspace:^", "react": "18.3.1", "react-dom": "18.3.1", "styled-components": "5.3.11", diff --git a/example-player-react/vite.mjs b/example-player-react/vite.mjs index b5a6d1635..a0c2091d6 100755 --- a/example-player-react/vite.mjs +++ b/example-player-react/vite.mjs @@ -6,13 +6,9 @@ createServer({ optimizeDeps: { entries: ['index.html'], }, - define: { - global: 'window', - }, resolve: { alias: { - stream: 'stream-browserify', - util: '', + 'media-stream-library/player': '../player/dist/index.js', }, }, plugins: [reactPlugin()], diff --git a/example-player-webcomponent/index.html b/example-player-webcomponent/index.html index fcec7afa6..fdd3d4d3e 100644 --- a/example-player-webcomponent/index.html +++ b/example-player-webcomponent/index.html @@ -3,8 +3,8 @@ - media-stream-player - + MSL Player - web component +