17 |
23 |
17 |
23 | 
2 |
3 | [](https://github.com/bbc/bigscreen-player/actions/workflows/npm-publish.yml) [](https://www.npmjs.com/package/bigscreen-player) [](https://github.com/bbc/bigscreen-player/blob/master/LICENSE)
4 |
5 | > Simplified media playback for bigscreen devices.
6 |
7 | ## Introduction
8 |
9 | _Bigscreen Player_ is an open source project developed by the BBC to simplify video and audio playback on a wide range of 'bigscreen' devices (TVs, set-top boxes, games consoles, and streaming devices).
10 |
11 | For documentation on using this library, please see our [Getting Started guide](https://bbc.github.io/bigscreen-player/api/tutorial-00-getting-started.html).
12 |
13 | ## Running Locally
14 |
15 | Install dependencies:
16 |
17 | ```bash
18 | npm install
19 | ```
20 |
21 | You can run Bigscreen Player locally in a dev environment by running:
22 |
23 | ```bash
24 | npm run start
25 | ```
26 |
27 | This will open a web page at `localhost:8080`.
28 |
29 | ## Testing
30 |
31 | The project is unit tested using [Jest](https://jestjs.io/). To run the tests:
32 |
33 | ```bash
34 | npm test
35 | ```
36 |
37 | This project currently has unit test coverage but no integration test suite. This is on our Roadmap to address.
38 |
39 | ## Releasing
40 |
41 | 1. Create a PR.
42 | 2. Label the PR with one of these labels; `semver prerelease`, `semver patch`, `semver minor` or `semver major`
43 | 3. Get a review from the core team.
44 | 4. If the PR checks are green. The core team can merge to master.
45 | 5. Automation takes care of the package versioning.
46 | 6. Publishing to NPM is handled with our [GitHub Actions CI integration](https://github.com/bbc/bigscreen-player/blob/master/.github/workflows/npm-publish.yml).
47 |
48 | ## Documentation
49 |
50 | Bigscreen Player uses JSDocs to autogenerate API documentation. To regenerate the documentation run:
51 |
52 | ```bash
53 | npm run docs
54 | ```
55 |
56 | ## Contributing
57 |
58 | See [CONTRIBUTING.md](CONTRIBUTING.md)
59 |
60 | ## License
61 |
62 | Bigscreen Player is available to everyone under the terms of the Apache 2.0 open source license. Take a look at the LICENSE file in the code for more information.
63 |
--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [["@babel/preset-env"], ["@babel/preset-typescript"]]
3 | }
4 |
--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
1 | api/*
2 |
--------------------------------------------------------------------------------
/docs/arch/001-native-strategy.md:
--------------------------------------------------------------------------------
1 | # 001 Native Strategy
2 |
3 | Originally Added: February 20th, 2019
4 |
5 | ## Context
6 |
7 | - As it stands, `bigscreen-player` requires using the `tal` device object - when in `talstrategy` - to obtain a media player for playback
8 | - Since the `tal` device media player exists as a singleton, applications using `talstrategy` can only access one active media element.
9 | - Unlike `msestrategy`, `talstrategy` also requires loading in the extra dependency (`tal` device) - and is therefore limited by the limitations of the `tal` device.
10 |
11 | ## Decision
12 |
13 | - A new strategy type - `nativestrategy` - has been created which pulls the media player out of `tal`
14 | - This is a refactor of the `tal` device media player code which allows further manipulation and control i.e. multiple video playback
15 |
16 | ## Status
17 |
18 | Approved
19 |
20 | ## Consequences
21 |
22 | - Multiple active video instances can be controlled
23 | - Preloading of content on different media elements is more achievable
24 | - The successful migration of all media player code from `tal` will create much greater modularity for `bigscreen-player` - therefore removing any limitations introduced by the current coupling with `tal`
25 |
--------------------------------------------------------------------------------
/docs/arch/002-sinon.md:
--------------------------------------------------------------------------------
1 | # 002 Use of Sinon for unit testing
2 |
3 | Update: Depricated, we no longer use sinon, see future ADRs
4 | Originally Added: April 30th, 2019
5 |
6 | ## Context
7 |
8 | With the addition of manifest loading into `bigscreen-player`, there is a need to stub out network requests with specific responses for unit testing.
9 |
10 | It is possible, using a combination of parametrised Squire mocks and multiple asynchronous functions, to achieve this with jasmine.
11 |
12 | However, when loading HLS manifests, multiple chained calls to loadUrl are needed within one test (in order to get the final playlist following the loading of the master playlist). This is difficult to achieve with jasmine, but can be simply handled with sinon.
13 |
14 | ## Decision
15 |
16 | We will pull sinon. This is only a dev dependency.
17 |
18 | ## Status
19 |
20 | Accepted
21 |
22 | ## Consequences
23 |
24 | - Using sinon makes it simpler to provide custom responses to network requests.
25 | - Another third party library is now pulled into bigscreen-player as a dev dependency.
26 |
27 | ## Further Reading
28 |
29 | See
17 |
23 | 
",
39 | "menu": [
40 | { "title": "Home", "link": "index.html" },
41 | { "title": "Repo", "link": "https://github.com/bbc/bigscreen-player" }
42 | ],
43 | "sections": ["Tutorials", "Modules"],
44 | "displayModuleHeader": true,
45 | "meta": [
46 | {
47 | "name": "description",
48 | "content": "Simplified media playback for bigscreen devices"
49 | }
50 | ],
51 | "search": {
52 | "shouldSort": true,
53 | "threshold": 0.4,
54 | "location": 0,
55 | "distance": 100,
56 | "maxPatternLength": 32,
57 | "minMatchCharLength": 1
58 | },
59 | "footer": ""
60 | }
61 | },
62 | "markdown": {
63 | "$comment": "Important for `clean-jsdoc-theme`",
64 | "hardwrap": false,
65 | "idInHeadings": true
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bigscreen-player",
3 | "version": "10.7.1",
4 | "type": "module",
5 | "description": "Simplified media playback for bigscreen devices.",
6 | "main": "dist/esm/main.js",
7 | "browser": "dist/esm/main.js",
8 | "module": "dist/esm/main.js",
9 | "types": "dist/esm/main.d.ts",
10 | "files": [
11 | "dist",
12 | "CONTRIBUTING.md"
13 | ],
14 | "scripts": {
15 | "prepare": "if [ ! -d dist/ ]; then npm run build; fi",
16 | "postinstall": "if [ -d .git/ ]; then husky install; fi",
17 | "docs": "jsdoc -c jsdoc.conf.json",
18 | "build": "npm run build:clean && npm run build:bundle && npm run build:tmp",
19 | "build:clean": "rm -rf dist/*",
20 | "build:bundle": "rollup --config rollup.config.js",
21 | "build:tmp": "rm -r dist/esm/__tmp",
22 | "watch": "rollup --watch --config rollup.config.js",
23 | "start": "rollup --watch --config rollup.dev.config.js",
24 | "test": "jest",
25 | "coverage": "jest --coverage",
26 | "lint": "eslint ."
27 | },
28 | "devDependencies": {
29 | "@babel/core": "^7.23.7",
30 | "@babel/plugin-transform-runtime": "^7.23.9",
31 | "@babel/preset-env": "^7.23.8",
32 | "@babel/preset-typescript": "^7.23.3",
33 | "@rollup/plugin-alias": "^5.1.1",
34 | "@rollup/plugin-babel": "^6.0.4",
35 | "@rollup/plugin-commonjs": "^25.0.7",
36 | "@rollup/plugin-inject": "^5.0.5",
37 | "@rollup/plugin-json": "^6.1.0",
38 | "@rollup/plugin-node-resolve": "^15.2.3",
39 | "@rollup/plugin-replace": "^5.0.5",
40 | "@rollup/plugin-typescript": "^11.1.6",
41 | "@types/jest": "^29.5.11",
42 | "babel-jest": "^29.7.0",
43 | "better-docs": "^2.7.3",
44 | "clean-jsdoc-theme": "^4.2.7",
45 | "eslint": "^8.57.0",
46 | "eslint-plugin-jest": "^27.9.0",
47 | "eslint-plugin-sonarjs": "^0.23.0",
48 | "eslint-plugin-unicorn": "^50.0.1",
49 | "husky": "^8.0.3",
50 | "jest": "^29.5.0",
51 | "jest-environment-jsdom": "^29.5.0",
52 | "jsdoc": "^4.0.4",
53 | "jsdoc-plugin-typescript": "^3.2.0",
54 | "prettier": "^3.1.1",
55 | "rollup": "^3.29.4",
56 | "rollup-plugin-dts": "^6.1.0",
57 | "rollup-plugin-livereload": "^2.0.5",
58 | "rollup-plugin-polyfill-node": "^0.13.0",
59 | "rollup-plugin-serve": "^1.1.0",
60 | "rollup-plugin-visualizer": "^5.5.2",
61 | "ts-jest": "^29.1.1",
62 | "ts-node": "^10.9.2",
63 | "typescript": "^5.3.3",
64 | "typescript-eslint": "^7.2.0"
65 | },
66 | "dependencies": {
67 | "dashjs": "github:bbc/dash.js#smp-v4.7.3-7",
68 | "smp-imsc": "github:bbc/imscJS#v1.0.3"
69 | },
70 | "repository": {
71 | "type": "git",
72 | "url": "git+https://github.com/bbc/bigscreen-player.git"
73 | },
74 | "keywords": [
75 | "BBC",
76 | "Media Player",
77 | "Video Playback",
78 | "TV",
79 | "Set Top Box",
80 | "Streaming"
81 | ],
82 | "author": "BBC",
83 | "license": "Apache-2.0",
84 | "bugs": {
85 | "url": "https://github.com/bbc/bigscreen-player/issues"
86 | },
87 | "homepage": "https://github.com/bbc/bigscreen-player#readme"
88 | }
89 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import PackageJSON from "./package.json" assert { type: "json" }
2 |
3 | import alias from "@rollup/plugin-alias"
4 | import replace from "@rollup/plugin-replace"
5 | import typescript from "@rollup/plugin-typescript"
6 | import { dts } from "rollup-plugin-dts"
7 |
8 | export default [
9 | {
10 | input: "src/main.ts",
11 | external: [/^dashjs/, "smp-imsc", "tslib"],
12 | output: [{ dir: "dist/esm", format: "es" }],
13 | plugins: [
14 | alias({
15 | entries: [{ find: "imsc", replacement: "smp-imsc" }],
16 | }),
17 | replace({
18 | preventAssignment: true,
19 | __VERSION__: () => PackageJSON.version,
20 | }),
21 | typescript({
22 | tsconfig: "./tsconfig.dist.json",
23 | }),
24 | ],
25 | },
26 | {
27 | input: "./dist/esm/__tmp/dts/main.d.ts",
28 | output: [{ file: "./dist/esm/main.d.ts", format: "es" }],
29 | plugins: [dts()],
30 | },
31 | ]
32 |
--------------------------------------------------------------------------------
/rollup.dev.config.js:
--------------------------------------------------------------------------------
1 | import PackageJSON from "./package.json" assert { type: "json" }
2 |
3 | import alias from "@rollup/plugin-alias"
4 | import babel from "@rollup/plugin-babel"
5 | import commonjs from "@rollup/plugin-commonjs"
6 | import resolve from "@rollup/plugin-node-resolve"
7 | import replace from "@rollup/plugin-replace"
8 | import liveReload from "rollup-plugin-livereload"
9 | import nodePolyfills from "rollup-plugin-polyfill-node"
10 | import serve from "rollup-plugin-serve"
11 |
12 | const extensions = [".js", ".ts"]
13 |
14 | export default {
15 | input: "src/main.ts",
16 | output: {
17 | file: "dist-local/esm/main.js",
18 | name: "bsp",
19 | inlineDynamicImports: true,
20 | sourcemap: true,
21 | format: "es",
22 | },
23 | plugins: [
24 | alias({
25 | entries: [{ find: "imsc", replacement: "smp-imsc" }],
26 | }),
27 | replace({
28 | preventAssignment: true,
29 | __VERSION__: () => PackageJSON.version,
30 | }),
31 | resolve({ extensions, preferBuiltins: false }),
32 | commonjs(),
33 | nodePolyfills(),
34 | babel({ extensions, babelHelpers: "bundled" }),
35 | serve({
36 | open: true,
37 | }),
38 | liveReload({
39 | watch: ["index.html", "dist-local"],
40 | }),
41 | ],
42 | }
43 |
--------------------------------------------------------------------------------
/scripts/format-staged.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | # Adapted from: https://prettier.io/docs/en/precommit.html#option-6-shell-script
4 |
5 | staged_files="$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')"
6 |
7 | [ -z "${staged_files}" ] && exit 0
8 |
9 | # Prettify all selected files
10 | printf "%s\n" "${staged_files}" | xargs ./node_modules/.bin/prettier --ignore-unknown --write
11 |
12 | # Add back the modified/prettified files to staging
13 | printf "%s\n" "${staged_files}" | xargs git add
14 |
15 | exit 0
16 |
--------------------------------------------------------------------------------
/scripts/lint-pr.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | PR_BASE_SHA="${PR_BASE_SHA}"
4 | PR_HEAD_SHA="${PR_HEAD_SHA}"
5 |
6 | changed_files="$(git diff --name-only --diff-filter=ACMR ${PR_BASE_SHA} ${PR_HEAD_SHA})"
7 |
8 | # Manually check the `git diff` succeeded
9 | if [ "${?}" -ne 0 ]; then
10 | exit 1
11 | fi
12 |
13 | # Exit early if no files were changed
14 | if [ -z "${changed_files}" ]; then
15 | exit 0
16 | fi
17 |
18 | # Lint changed files
19 | if !(
20 | printf "%s\n" "${changed_files}" |
21 | sed 's| |\\ |g' |
22 | xargs ./node_modules/.bin/eslint --quiet
23 | )
24 | then
25 | exit 1
26 | fi
27 |
28 | exit 0
29 |
--------------------------------------------------------------------------------
/scripts/lint-staged.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | # Adapted from: https://prettier.io/docs/en/precommit.html#option-6-shell-script
4 |
5 | staged_files="$(
6 | git diff --cached --name-only --diff-filter=ACMR | # get staged files
7 | sed 's| |\\ |g' # escape whitespace
8 | )"
9 |
10 | if [ -z "${staged_files}" ]; then
11 | exit 0
12 | fi
13 |
14 | # Lint all selected files
15 | # --quiet to silence unmatched file warnings caused by .eslintignore
16 | if !(
17 | printf "%s\n" "${staged_files}" |
18 | xargs ./node_modules/.bin/eslint --fix --quiet
19 | )
20 | then
21 | exit 1
22 | fi
23 |
24 | # Add back the modified/linted files to staging
25 | printf "%s\n" "${staged_files}" | xargs git add
26 |
27 | exit 0
28 |
--------------------------------------------------------------------------------
/src/allowedmediatransitions.js:
--------------------------------------------------------------------------------
1 | function AllowedMediaTransitions(mediaplayer) {
2 | const player = mediaplayer
3 |
4 | const MediaPlayerState = {
5 | EMPTY: "EMPTY", // No source set
6 | STOPPED: "STOPPED", // Source set but no playback
7 | BUFFERING: "BUFFERING", // Not enough data to play, waiting to download more
8 | PLAYING: "PLAYING", // Media is playing
9 | PAUSED: "PAUSED", // Media is paused
10 | COMPLETE: "COMPLETE", // Media has reached its end point
11 | ERROR: "ERROR", // An error occurred
12 | }
13 |
14 | function canBePaused() {
15 | const pausableStates = [MediaPlayerState.BUFFERING, MediaPlayerState.PLAYING]
16 |
17 | return pausableStates.indexOf(player.getState()) !== -1
18 | }
19 |
20 | function canBeStopped() {
21 | const unstoppableStates = [MediaPlayerState.EMPTY, MediaPlayerState.ERROR]
22 |
23 | const stoppable = unstoppableStates.indexOf(player.getState()) === -1
24 | return stoppable
25 | }
26 |
27 | function canBeginSeek() {
28 | const unseekableStates = [MediaPlayerState.EMPTY, MediaPlayerState.ERROR]
29 |
30 | const state = player.getState()
31 | const seekable = state ? unseekableStates.indexOf(state) === -1 : false
32 |
33 | return seekable
34 | }
35 |
36 | function canResume() {
37 | return player.getState() === MediaPlayerState.PAUSED || player.getState() === MediaPlayerState.BUFFERING
38 | }
39 |
40 | return {
41 | canBePaused: canBePaused,
42 | canBeStopped: canBeStopped,
43 | canBeginSeek: canBeginSeek,
44 | canResume: canResume,
45 | }
46 | }
47 |
48 | export default AllowedMediaTransitions
49 |
--------------------------------------------------------------------------------
/src/debugger/debugview.ts:
--------------------------------------------------------------------------------
1 | import DOMHelpers from "../domhelpers"
2 |
3 | type Entry = { id: string; key: string; value: string | number | boolean }
4 |
5 | let appElement: HTMLElement | undefined
6 | let logBox: HTMLElement | undefined
7 | let logContainer: HTMLElement | undefined
8 | let staticContainer: HTMLElement | undefined
9 | let staticBox: HTMLElement | undefined
10 |
11 | function init() {
12 | logBox = document.createElement("div")
13 | logContainer = document.createElement("span")
14 | staticBox = document.createElement("div")
15 | staticContainer = document.createElement("span")
16 |
17 | if (appElement === undefined) {
18 | appElement = document.body
19 | }
20 |
21 | logBox.id = "logBox"
22 | logBox.style.position = "absolute"
23 | logBox.style.width = "63%"
24 | logBox.style.left = "5%"
25 | logBox.style.top = "15%"
26 | logBox.style.bottom = "25%"
27 | logBox.style.backgroundColor = "#1D1D1D"
28 | logBox.style.opacity = "0.9"
29 | logBox.style.overflow = "hidden"
30 |
31 | staticBox.id = "staticBox"
32 | staticBox.style.position = "absolute"
33 | staticBox.style.width = "30%"
34 | staticBox.style.right = "1%"
35 | staticBox.style.top = "15%"
36 | staticBox.style.bottom = "25%"
37 | staticBox.style.backgroundColor = "#1D1D1D"
38 | staticBox.style.opacity = "0.9"
39 | staticBox.style.overflow = "hidden"
40 |
41 | logContainer.id = "logContainer"
42 | logContainer.style.color = "#ffffff"
43 | logContainer.style.fontSize = "11pt"
44 | logContainer.style.position = "absolute"
45 | logContainer.style.bottom = "1%"
46 | logContainer.style.left = "1%"
47 | logContainer.style.wordWrap = "break-word"
48 | logContainer.style.whiteSpace = "pre-line"
49 |
50 | staticContainer.id = "staticContainer"
51 | staticContainer.style.color = "#ffffff"
52 | staticContainer.style.fontSize = "11pt"
53 | staticContainer.style.wordWrap = "break-word"
54 | staticContainer.style.left = "1%"
55 | staticContainer.style.whiteSpace = "pre-line"
56 |
57 | logBox.appendChild(logContainer)
58 | staticBox.appendChild(staticContainer)
59 | appElement.appendChild(logBox)
60 | appElement.appendChild(staticBox)
61 | }
62 |
63 | function setRootElement(root?: HTMLElement) {
64 | if (root) {
65 | appElement = root
66 | }
67 | }
68 |
69 | function renderDynamicLogs(dynamic: string[]) {
70 | if (logContainer) logContainer.textContent = dynamic.join("\n")
71 | }
72 |
73 | function renderStaticLogs(staticLogs: (Entry | null)[]) {
74 | staticLogs.forEach((entry) => renderStaticLog(entry))
75 | }
76 |
77 | function render({ dynamic: dynamicLogs, static: staticLogs }: { dynamic: string[]; static: (Entry | null)[] }) {
78 | renderDynamicLogs(dynamicLogs)
79 | renderStaticLogs(staticLogs)
80 | }
81 |
82 | function renderStaticLog(entry: Entry | null) {
83 | if (entry == null) {
84 | return
85 | }
86 |
87 | const { id, key, value } = entry
88 |
89 | const existingElement = document.querySelector(`#${id}`)
90 |
91 | const text = `${key}: ${value}`
92 |
93 | if (existingElement == null) {
94 | createNewStaticElement(entry)
95 |
96 | return
97 | }
98 |
99 | if (existingElement.textContent === text) {
100 | return
101 | }
102 |
103 | existingElement.textContent = text
104 | }
105 |
106 | function createNewStaticElement({ id, key, value }: Entry) {
107 | const staticLog = document.createElement("div")
108 |
109 | staticLog.id = id
110 | staticLog.style.paddingBottom = "1%"
111 | staticLog.style.borderBottom = "1px solid white"
112 | staticLog.textContent = `${key}: ${value}`
113 |
114 | staticContainer?.appendChild(staticLog)
115 | }
116 |
117 | function tearDown() {
118 | DOMHelpers.safeRemoveElement(logBox)
119 | DOMHelpers.safeRemoveElement(staticBox)
120 |
121 | appElement = undefined
122 | staticContainer = undefined
123 | logContainer = undefined
124 | logBox = undefined
125 | }
126 |
127 | export default {
128 | init,
129 | setRootElement,
130 | render,
131 | tearDown,
132 | }
133 |
--------------------------------------------------------------------------------
/src/domhelpers.test.js:
--------------------------------------------------------------------------------
1 | import DOMHelpers from "./domhelpers"
2 |
3 | describe("DOMHelpers", () => {
4 | it("Converts an RGBA tuple string to RGB tripple string", () => {
5 | expect(DOMHelpers.rgbaToRGB("#FFAAFFAA")).toBe("#FFAAFF")
6 | })
7 |
8 | it("Will return a RGB as it is", () => {
9 | expect(DOMHelpers.rgbaToRGB("#FFAAFF")).toBe("#FFAAFF")
10 | })
11 |
12 | it("Will return a non-RGBA as it is", () => {
13 | expect(DOMHelpers.rgbaToRGB("black")).toBe("black")
14 | })
15 |
16 | it("Will delete a node which has a parent", () => {
17 | const body = document.createElement("body")
18 | const child = document.createElement("p")
19 | body.appendChild(child)
20 |
21 | DOMHelpers.safeRemoveElement(child)
22 |
23 | expect(body.hasChildNodes()).toBe(false)
24 | })
25 |
26 | it("Will do nothing when the node is detatched", () => {
27 | const node = document.createElement("p")
28 |
29 | expect(() => {
30 | DOMHelpers.safeRemoveElement(node)
31 | }).not.toThrow()
32 | })
33 | })
34 |
--------------------------------------------------------------------------------
/src/domhelpers.ts:
--------------------------------------------------------------------------------
1 | function addClass(el: HTMLElement, className: string) {
2 | if (el.classList) {
3 | el.classList.add(className)
4 | } else {
5 | el.className += ` ${className}`
6 | }
7 | }
8 |
9 | function removeClass(el: HTMLElement, className: string) {
10 | if (el.classList) {
11 | el.classList.remove(className)
12 | } else {
13 | el.className = el.className.replace(new RegExp(`(^|\\b)${className.split(" ").join("|")}(\\b|$)`, "gi"), " ")
14 | }
15 | }
16 |
17 | function hasClass(el: HTMLElement, className: string) {
18 | return el.classList ? el.classList.contains(className) : new RegExp(`(^| )${className}( |$)`, "gi").test(el.className)
19 | }
20 |
21 | function isRGBA(rgbaString: string) {
22 | return new RegExp("^#([A-Fa-f0-9]{8})$").test(rgbaString)
23 | }
24 |
25 | /**
26 | * Checks that the string is an RGBA tuple and returns a RGB Tripple.
27 | * A string that isn't an RGBA tuple will be returned to the caller.
28 | */
29 | function rgbaToRGB(rgbaString: string) {
30 | return isRGBA(rgbaString) ? rgbaString.slice(0, 7) : rgbaString
31 | }
32 |
33 | /**
34 | * Safely removes an element from the DOM, simply doing
35 | * nothing if the node is detached (Has no parent).
36 | * @param el The Element to remove
37 | */
38 | function safeRemoveElement(el?: Element) {
39 | if (el && el.parentNode) {
40 | el.parentNode.removeChild(el)
41 | }
42 | }
43 |
44 | export default {
45 | addClass,
46 | removeClass,
47 | hasClass,
48 | rgbaToRGB,
49 | isRGBA,
50 | safeRemoveElement,
51 | }
52 |
--------------------------------------------------------------------------------
/src/dynamicwindowutils.test.js:
--------------------------------------------------------------------------------
1 | import { autoResumeAtStartOfRange, canPauseAndSeek } from "./dynamicwindowutils"
2 | import LiveSupport from "./models/livesupport"
3 |
4 | describe("autoResumeAtStartOfRange", () => {
5 | const currentTime = 20
6 |
7 | const seekableRange = {
8 | start: 0,
9 | end: 7200,
10 | }
11 |
12 | let resume
13 | let addEventCallback
14 | let removeEventCallback
15 | let checkNotPauseEvent
16 |
17 | afterAll(() => {
18 | jest.useRealTimers()
19 | })
20 |
21 | beforeAll(() => {
22 | jest.useFakeTimers()
23 | })
24 |
25 | beforeEach(() => {
26 | jest.clearAllTimers()
27 |
28 | resume = jest.fn()
29 | addEventCallback = jest.fn()
30 | removeEventCallback = jest.fn()
31 | checkNotPauseEvent = jest.fn()
32 | })
33 |
34 | it.each([
35 | [0, 7200, 20],
36 | [3600, 10800, 3620],
37 | ])(
38 | "resumes play when the start of the seekable range (%d - %d) catches up to current time %d",
39 | (seekableRangeStart, seekableRangeEnd, currentTime) => {
40 | const seekableRange = {
41 | start: seekableRangeStart,
42 | end: seekableRangeEnd,
43 | }
44 |
45 | autoResumeAtStartOfRange(currentTime, seekableRange, addEventCallback, removeEventCallback, undefined, resume)
46 |
47 | jest.advanceTimersByTime(20000)
48 |
49 | expect(addEventCallback).toHaveBeenCalledTimes(1)
50 | expect(removeEventCallback).toHaveBeenCalledTimes(1)
51 | expect(resume).toHaveBeenCalledTimes(1)
52 | }
53 | )
54 |
55 | it("resumes play when the start of the seekable range is within a threshold of current time", () => {
56 | autoResumeAtStartOfRange(currentTime, seekableRange, addEventCallback, removeEventCallback, undefined, resume)
57 |
58 | jest.advanceTimersByTime(15000)
59 |
60 | expect(addEventCallback).toHaveBeenCalledTimes(1)
61 | expect(removeEventCallback).toHaveBeenCalledTimes(1)
62 | expect(resume).toHaveBeenCalledTimes(1)
63 | })
64 |
65 | it("resumes play when the start of the seekable range is at the threshold of current time", () => {
66 | autoResumeAtStartOfRange(currentTime, seekableRange, addEventCallback, removeEventCallback, undefined, resume)
67 |
68 | jest.advanceTimersByTime(12000)
69 |
70 | expect(addEventCallback).toHaveBeenCalledTimes(1)
71 | expect(removeEventCallback).toHaveBeenCalledTimes(1)
72 | expect(resume).toHaveBeenCalledTimes(1)
73 | })
74 |
75 | it("resumes play when the start of the time shift buffer is at the threshold of current time", () => {
76 | const seekableRange = { start: 0, end: 7170 }
77 |
78 | autoResumeAtStartOfRange(30, seekableRange, addEventCallback, removeEventCallback, undefined, resume, 7200)
79 |
80 | expect(addEventCallback).toHaveBeenCalledTimes(1)
81 |
82 | jest.advanceTimersByTime(40000)
83 |
84 | expect(resume).not.toHaveBeenCalled()
85 | expect(removeEventCallback).not.toHaveBeenCalled()
86 |
87 | jest.advanceTimersByTime(20000)
88 |
89 | expect(resume).toHaveBeenCalledTimes(1)
90 | expect(removeEventCallback).toHaveBeenCalledTimes(1)
91 | })
92 |
93 | it("does not resume play when the start of the seekable range has not caught up to current time", () => {
94 | autoResumeAtStartOfRange(currentTime, seekableRange, addEventCallback, removeEventCallback, undefined, resume)
95 |
96 | jest.advanceTimersByTime(10000)
97 |
98 | expect(addEventCallback).toHaveBeenCalledTimes(1)
99 | expect(removeEventCallback).toHaveBeenCalledTimes(0)
100 | expect(resume).toHaveBeenCalledTimes(0)
101 | })
102 |
103 | it("non pause event stops autoresume", () => {
104 | checkNotPauseEvent.mockImplementation(() => true)
105 |
106 | addEventCallback.mockImplementation((_, callback) => callback())
107 |
108 | autoResumeAtStartOfRange(
109 | currentTime,
110 | seekableRange,
111 | addEventCallback,
112 | removeEventCallback,
113 | checkNotPauseEvent,
114 | resume
115 | )
116 |
117 | jest.advanceTimersByTime(20000)
118 |
119 | expect(removeEventCallback).toHaveBeenCalledTimes(1)
120 | expect(resume).toHaveBeenCalledTimes(0)
121 | })
122 |
123 | it("pause event does not stop autoresume", () => {
124 | checkNotPauseEvent.mockImplementation(() => false)
125 |
126 | addEventCallback.mockImplementation((_, callback) => callback())
127 |
128 | autoResumeAtStartOfRange(
129 | currentTime,
130 | seekableRange,
131 | addEventCallback,
132 | removeEventCallback,
133 | checkNotPauseEvent,
134 | resume
135 | )
136 |
137 | jest.advanceTimersByTime(20000)
138 |
139 | expect(removeEventCallback).toHaveBeenCalledTimes(1)
140 | expect(resume).toHaveBeenCalledTimes(1)
141 | })
142 | })
143 |
144 | describe("canPause", () => {
145 | it("can't pause no live support", () => {
146 | expect(canPauseAndSeek(LiveSupport.NONE, { start: 0, end: 30 * 60 })).toBe(false)
147 | })
148 |
149 | it("can't pause playable", () => {
150 | expect(canPauseAndSeek(LiveSupport.PLAYABLE, { start: 0, end: 30 * 60 })).toBe(false)
151 | })
152 |
153 | it("can't pause restartable", () => {
154 | expect(canPauseAndSeek(LiveSupport.RESTARTABLE, { start: 0, end: 30 * 60 })).toBe(false)
155 | })
156 |
157 | it("can pause seekable", () => {
158 | expect(canPauseAndSeek(LiveSupport.SEEKABLE, { start: 0, end: 30 * 60 })).toBe(true)
159 | })
160 |
161 | it("can't pause a seekable range less than 4 minutes", () => {
162 | expect(canPauseAndSeek(LiveSupport.SEEKABLE, { start: 0, end: 3 * 60 })).toBe(false)
163 | })
164 | })
165 |
--------------------------------------------------------------------------------
/src/dynamicwindowutils.ts:
--------------------------------------------------------------------------------
1 | import LiveSupport from "./models/livesupport"
2 | import DebugTool from "./debugger/debugtool"
3 | import PlaybackStrategy from "./models/playbackstrategy"
4 |
5 | const AUTO_RESUME_WINDOW_START_CUSHION_SECONDS = 8
6 | const FOUR_MINUTES = 4 * 60
7 |
8 | declare global {
9 | interface Window {
10 | bigscreenPlayer?: {
11 | playbackStrategy: PlaybackStrategy
12 | liveSupport?: LiveSupport
13 | }
14 | }
15 | }
16 |
17 | type SeekableRange = {
18 | start: number
19 | end: number
20 | }
21 |
22 | function isSeekableRange(obj: unknown): obj is SeekableRange {
23 | return (
24 | obj != null &&
25 | typeof obj === "object" &&
26 | "start" in obj &&
27 | "end" in obj &&
28 | typeof obj.start === "number" &&
29 | typeof obj.end === "number" &&
30 | isFinite(obj.start) &&
31 | isFinite(obj.end)
32 | )
33 | }
34 |
35 | function isSeekableRangeBigEnough({ start, end }: SeekableRange): boolean {
36 | return end - start > FOUR_MINUTES
37 | }
38 |
39 | export function canPauseAndSeek(liveSupport: LiveSupport, seekableRange: unknown): boolean {
40 | return (
41 | liveSupport === LiveSupport.SEEKABLE && isSeekableRange(seekableRange) && isSeekableRangeBigEnough(seekableRange)
42 | )
43 | }
44 |
45 | export function autoResumeAtStartOfRange(
46 | currentTime: number,
47 | seekableRange: SeekableRange,
48 | addEventCallback: (thisArg: undefined, callback: (event: unknown) => void) => void,
49 | removeEventCallback: (thisArg: undefined, callback: (event: unknown) => void) => void,
50 | checkNotPauseEvent: (event: unknown) => boolean,
51 | resume: () => void,
52 | timeShiftBufferDepthInSeconds?: number
53 | ): void {
54 | const { start, end } = seekableRange
55 |
56 | const duration = end - start
57 |
58 | const windowLengthInSeconds =
59 | timeShiftBufferDepthInSeconds && duration < timeShiftBufferDepthInSeconds ? timeShiftBufferDepthInSeconds : duration
60 |
61 | const resumeTimeOut = Math.max(
62 | 0,
63 | windowLengthInSeconds - (end - currentTime) - AUTO_RESUME_WINDOW_START_CUSHION_SECONDS
64 | )
65 |
66 | DebugTool.dynamicMetric("auto-resume", resumeTimeOut)
67 |
68 | const autoResumeTimer = setTimeout(() => {
69 | removeEventCallback(undefined, detectIfUnpaused)
70 | resume()
71 | }, resumeTimeOut * 1000)
72 |
73 | addEventCallback(undefined, detectIfUnpaused)
74 |
75 | function detectIfUnpaused(event: unknown) {
76 | if (checkNotPauseEvent(event)) {
77 | removeEventCallback(undefined, detectIfUnpaused)
78 | clearTimeout(autoResumeTimer)
79 | }
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | export { default as BigscreenPlayer } from "./bigscreenplayer"
2 | export { default as MockBigscreenPlayer } from "./mockbigscreenplayer"
3 | export { default as LiveSupport } from "./models/livesupport"
4 | export { ManifestType } from "./models/manifesttypes"
5 | export { default as MediaKinds } from "./models/mediakinds"
6 | export { default as MediaState } from "./models/mediastate"
7 | export { default as PauseTriggers } from "./models/pausetriggers"
8 | export { default as PlaybackStrategy } from "./models/playbackstrategy"
9 | export { TransferFormat } from "./models/transferformats"
10 | export { Timeline } from "./models/timeline"
11 | export { default as TransportControlPosition } from "./models/transportcontrolposition"
12 | export { default as WindowTypes } from "./models/windowtypes"
13 | export { default as DebugTool } from "./debugger/debugtool"
14 | export * from "./debugger/chronicle"
15 |
--------------------------------------------------------------------------------
/src/manifest/manifestmodifier.js:
--------------------------------------------------------------------------------
1 | function filter(manifest, representationOptions) {
2 | const constantFps = representationOptions.constantFps
3 | const maxFps = representationOptions.maxFps
4 |
5 | if (constantFps || maxFps) {
6 | manifest.Period.AdaptationSet = manifest.Period.AdaptationSet.map((adaptationSet) => {
7 | if (adaptationSet.contentType === "video") {
8 | const frameRates = []
9 |
10 | adaptationSet.Representation_asArray = adaptationSet.Representation_asArray.filter((representation) => {
11 | if (!maxFps || representation.frameRate <= maxFps) {
12 | frameRates.push(representation.frameRate)
13 | return true
14 | }
15 | }).filter((representation) => {
16 | return !constantFps || representation.frameRate === Math.max.apply(null, frameRates)
17 | })
18 | }
19 | return adaptationSet
20 | })
21 | }
22 |
23 | return manifest
24 | }
25 |
26 | function extractBaseUrl(manifest) {
27 | if (manifest.Period && typeof manifest.Period.BaseURL === "string") {
28 | return manifest.Period.BaseURL
29 | }
30 |
31 | if (manifest.Period && manifest.Period.BaseURL && typeof manifest.Period.BaseURL.__text === "string") {
32 | return manifest.Period.BaseURL.__text
33 | }
34 |
35 | if (typeof manifest.BaseURL === "string") {
36 | return manifest.BaseURL
37 | }
38 |
39 | if (manifest.BaseURL && typeof manifest.BaseURL.__text === "string") {
40 | return manifest.BaseURL.__text
41 | }
42 | }
43 |
44 | function generateBaseUrls(manifest, sources) {
45 | if (!manifest) return
46 |
47 | const baseUrl = extractBaseUrl(manifest)
48 |
49 | if (isBaseUrlAbsolute(baseUrl)) {
50 | setAbsoluteBaseUrl(baseUrl)
51 | } else {
52 | if (baseUrl) {
53 | setBaseUrlsFromBaseUrl(baseUrl)
54 | } else {
55 | setBaseUrlsFromSource()
56 | }
57 | }
58 |
59 | removeUnusedPeriodAttributes()
60 |
61 | function generateBaseUrl(source, priority, serviceLocation) {
62 | return {
63 | __text: source,
64 | "dvb:priority": priority,
65 | "dvb:weight": isNaN(source.dpw) ? 0 : source.dpw,
66 | serviceLocation: serviceLocation,
67 | }
68 | }
69 |
70 | function removeUnusedPeriodAttributes() {
71 | if (manifest.Period && manifest.Period.BaseURL) delete manifest.Period.BaseURL
72 | if (manifest.Period && manifest.Period.BaseURL_asArray) delete manifest.Period.BaseURL_asArray
73 | }
74 |
75 | function isBaseUrlAbsolute(baseUrl) {
76 | return baseUrl && baseUrl.match(/^https?:\/\//)
77 | }
78 |
79 | function setAbsoluteBaseUrl(baseUrl) {
80 | const newBaseUrl = generateBaseUrl(baseUrl, 0, sources[0])
81 |
82 | manifest.BaseURL_asArray = [newBaseUrl]
83 |
84 | if (manifest.BaseURL || (manifest.Period && manifest.Period.BaseURL)) {
85 | manifest.BaseURL = newBaseUrl
86 | }
87 | }
88 |
89 | function setBaseUrlsFromBaseUrl(baseUrl) {
90 | manifest.BaseURL_asArray = sources.map((source, priority) => {
91 | const sourceUrl = new URL(baseUrl, source)
92 |
93 | return generateBaseUrl(sourceUrl.href, priority, source)
94 | })
95 | }
96 |
97 | function setBaseUrlsFromSource() {
98 | manifest.BaseURL_asArray = sources.map((source, priority) => {
99 | return generateBaseUrl(source, priority, source)
100 | })
101 | }
102 | }
103 |
104 | export default {
105 | filter: filter,
106 | extractBaseUrl: extractBaseUrl,
107 | generateBaseUrls: generateBaseUrls,
108 | }
109 |
--------------------------------------------------------------------------------
/src/manifest/manifestparser.ts:
--------------------------------------------------------------------------------
1 | import { durationToSeconds } from "../utils/timeutils"
2 | import DebugTool from "../debugger/debugtool"
3 | import Plugins from "../plugins"
4 | import PluginEnums from "../pluginenums"
5 | import { ManifestType } from "../models/manifesttypes"
6 | import { TransferFormat, DASH, HLS } from "../models/transferformats"
7 | import isError from "../utils/iserror"
8 | import { ErrorWithCode } from "../models/errorcode"
9 |
10 | export type TimeInfo = {
11 | manifestType: ManifestType
12 | presentationTimeOffsetInMilliseconds: number
13 | timeShiftBufferDepthInMilliseconds: number
14 | availabilityStartTimeInMilliseconds: number
15 | }
16 |
17 | function getMPDType(mpd: Element): ManifestType {
18 | const type = mpd.getAttribute("type")
19 |
20 | if (type !== ManifestType.STATIC && type !== ManifestType.DYNAMIC) {
21 | throw new TypeError(`MPD type attribute must be 'static' or 'dynamic'. Got ${type}`)
22 | }
23 |
24 | return type as ManifestType
25 | }
26 |
27 | function getMPDAvailabilityStartTimeInMilliseconds(mpd: Element): number {
28 | return Date.parse(mpd.getAttribute("availabilityStartTime") ?? "") || 0
29 | }
30 |
31 | function getMPDTimeShiftBufferDepthInMilliseconds(mpd: Element): number {
32 | return (durationToSeconds(mpd.getAttribute("timeShiftBufferDepth") ?? "") || 0) * 1000
33 | }
34 |
35 | function getMPDPresentationTimeOffsetInMilliseconds(mpd: Element): number {
36 | // Can be either audio or video data. It doesn't matter as we use the factor of x/timescale. This is the same for both.
37 | const segmentTemplate = mpd.querySelector("SegmentTemplate")
38 | const presentationTimeOffsetInFrames = parseFloat(segmentTemplate?.getAttribute("presentationTimeOffset") ?? "")
39 | const timescale = parseFloat(segmentTemplate?.getAttribute("timescale") ?? "")
40 |
41 | return (presentationTimeOffsetInFrames / timescale) * 1000 || 0
42 | }
43 |
44 | function parseMPD(manifestEl: Document): PromiseMango balloons are too expensive
and they smell odd, even if they taste amazing
TV: Sartorial before they sold out actually hammock
retro trust fund swag authentic succulents palo santo
