Add embed api build

This commit is contained in:
Chocobozzz 2019-12-17 16:17:22 +01:00
parent c026a2e673
commit 03d641a0d7
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
11 changed files with 78 additions and 7 deletions

View File

@ -0,0 +1,3 @@
tsconfig.json
*.ts
webpack.config.ts

View File

@ -1,6 +1,7 @@
{ {
"name": "@peertube/embed-api", "name": "@peertube/embed-api",
"version": "1.0.0", "private": false,
"version": "0.0.1",
"description": "API to communicate with the PeerTube player embed", "description": "API to communicate with the PeerTube player embed",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
@ -13,11 +14,15 @@
"peertube", "peertube",
"embed" "embed"
], ],
"main": "./player.ts", "main": "./dist/player.js",
"types": "./dist/player.d.ts",
"author": "Chocobozzz", "author": "Chocobozzz",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"bugs": { "bugs": {
"url": "https://github.com/Chocobozzz/PeerTube/issues" "url": "https://github.com/Chocobozzz/PeerTube/issues"
}, },
"homepage": "https://github.com/Chocobozzz/PeerTube#readme" "homepage": "https://github.com/Chocobozzz/PeerTube#readme",
"dependencies": {
"jschannel": "^1.0.2"
}
} }

View File

@ -192,4 +192,4 @@ export class PeerTubePlayer {
} }
// put it on the window as well as the export // put it on the window as well as the export
window[ 'PeerTubePlayer' ] = PeerTubePlayer (window[ 'PeerTubePlayer' ] as any) = PeerTubePlayer

View File

@ -0,0 +1,19 @@
{
"compilerOptions": {
"module": "commonjs",
"removeComments": true,
"sourceMap": false,
"typeRoots": [
"../../../node_modules/@types"
],
"outDir": "./dist",
"declaration": true,
"target": "es5",
"types": [],
"lib": [
"es2018",
"dom"
]
},
"files": [ "./player.ts" ]
}

View File

@ -0,0 +1,12 @@
const path = require('path')
module.exports = [
{
mode: 'production',
entry: './dist/player.js',
output: {
filename: 'player.min.js',
path: path.resolve(__dirname, 'build')
}
}
]

View File

@ -46,7 +46,6 @@
"dev:embed": "scripty", "dev:embed": "scripty",
"dev:client": "scripty", "dev:client": "scripty",
"dev:cli": "scripty", "dev:cli": "scripty",
"dev:embed": "scripty",
"start": "node dist/server", "start": "node dist/server",
"start:server": "node dist/server --no-client", "start:server": "node dist/server --no-client",
"update-host": "node ./dist/scripts/update-host.js", "update-host": "node ./dist/scripts/update-host.js",
@ -73,6 +72,7 @@
"mocha": "mocha", "mocha": "mocha",
"ci": "scripty", "ci": "scripty",
"release": "scripty", "release": "scripty",
"release-embed-api": "scripty",
"nightly": "scripty", "nightly": "scripty",
"client-report": "scripty" "client-report": "scripty"
}, },

View File

@ -62,7 +62,7 @@ if [ -z ${1+x} ] || [ "$1" != "--light" ]; then
done done
fi fi
npm run build:embed cd ../ && npm run build:embed && cd client/
# Copy runtime locales # Copy runtime locales
cp -r "./src/locale" "./dist/locale" cp -r "./src/locale" "./dist/locale"

View File

@ -2,4 +2,6 @@
set -eu set -eu
cd client
NODE_ENV=production npm run webpack -- --config webpack/webpack.video-embed.js --mode production --json > "./dist/embed-stats.json" NODE_ENV=production npm run webpack -- --config webpack/webpack.video-embed.js --mode production --json > "./dist/embed-stats.json"

0
scripts/dev/embed.sh Normal file → Executable file
View File

11
scripts/release-embed-api.sh Executable file
View File

@ -0,0 +1,11 @@
#!/bin/sh
set -eu
cd client/src/standalone/player
rm -rf dist build && tsc -p . && ../../../node_modules/.bin/webpack --config ./webpack.config.js
npm publish --access public
rm -rf dist build node_modules

View File

@ -21,6 +21,24 @@ Now just use the `PeerTubePlayer` class exported by the module:
```typescript ```typescript
import { PeerTubePlayer } from '@peertube/embed-api' import { PeerTubePlayer } from '@peertube/embed-api'
...
```
Or use the minified build from NPM CDN in your HTML file:
```
<script src="https://unpkg.com/@peertube/embed-api@0.0.1/build/player.min.js"></script>
<script>
const PeerTubePlayer = window['PeerTubePlayer']
...
</script>
```
Then you can instantiate the player:
```typescript
let player = new PeerTubePlayer(document.querySelector('iframe')) let player = new PeerTubePlayer(document.querySelector('iframe'))
await player.ready // wait for the player to be ready await player.ready // wait for the player to be ready
@ -56,7 +74,7 @@ Get the available resolutions. A `PeerTubeResolution` looks like:
{ {
"id": 3, "id": 3,
"label": "720p", "label": "720p",
"src": "//src-url-here", "height": "720",
"active": true "active": true
} }
``` ```
@ -87,6 +105,7 @@ Set the playback volume. Value should be between `0` and `1`.
## `getVolume(): Promise<number>` ## `getVolume(): Promise<number>`
Get the playback volume. Returns a value between `0` and `1`. Get the playback volume. Returns a value between `0` and `1`.
# Events # Events
You can subscribe to events by using `addEventListener()`. See above for details. You can subscribe to events by using `addEventListener()`. See above for details.